/* ============================================================ MOBILE-FIRST UX/UI OVERRIDES (GamingGears Thailand) Loaded LAST in ; page-level stylesheets are injected dynamically at runtime, so conflicting rules use !important. Scope: <= 768px (phone), with <= 400px micro tweaks. ============================================================ */ /* Filter sheet close button: exists in DOM but hidden on desktop */ .btn-filter-close { display: none; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; } @media (max-width: 768px) { /* ============ 1. GLOBAL BASE ============ */ html, body { overflow-x: hidden !important; } * { -webkit-tap-highlight-color: transparent; } button, a, .product-card, .filter-chip { touch-action: manipulation; } /* Prevent iOS auto-zoom on focus + comfy tap targets */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { font-size: 16px !important; } /* ============ 2. SHELL / CHROME ============ */ .mobile-header-inner { padding: 8px 12px; } .mobile-header-btn { width: 40px; height: 40px; font-size: 15px; } .mobile-header-logo img { height: 30px !important; } /* ============ 3. HOMEPAGE ============ */ .container-main { padding: 0 12px !important; } /* Hero slider: taller, app-like ratio */ .hero-grid { gap: 12px !important; } .hero-slider { aspect-ratio: 16 / 10 !important; border-radius: 14px !important; } .hero-slide-content { padding: 16px !important; } .hero-arrow { width: 40px !important; height: 40px !important; } .hero-dots { bottom: 10px; left: 10px; } .hero-pager-dots { top: 10px; } /* Bestseller side panel */ .bestseller-panel { padding: 14px !important; border-radius: 14px !important; } .bs-item { padding: 8px 6px !important; } .bs-thumb { width: 52px !important; height: 52px !important; } /* Section headers */ .section-title-bar { margin-bottom: 12px !important; } .section-title { font-size: 16px !important; } .section-link { font-size: 12px !important; white-space: nowrap; } /* Category icon grid */ .cat-icon-grid { gap: 8px !important; } .cat-icon-card { border-radius: 12px !important; } .cat-icon-wrap { min-height: 44px; } /* Flash sale */ .flash-sale-banner { border-radius: 14px !important; } .countdown-box { border-radius: 8px !important; } .countdown-box .num { font-size: 16px !important; } .countdown-box .lbl { font-size: 11px !important; } /* Shop-by-category tiles */ .shop-cat-grid { gap: 10px !important; } /* Promo banners */ .promo-2-grid { gap: 10px !important; } .promo-card { border-radius: 14px !important; } /* Top-seller banner */ .top-sell-banner { border-radius: 14px !important; } .top-sell-tabs { gap: 6px !important; } .top-sell-tab { padding: 8px 14px !important; font-size: 12px !important; min-height: 38px; } /* Services strip */ .services-bar { gap: 8px !important; } .service-item { padding: 10px 8px !important; font-size: 11px !important; } /* Articles / news / tiktok */ .article-grid, .article-grid.article-grid-4 { gap: 12px !important; } .article-card { border-radius: 12px !important; } .tiktok-grid { gap: 10px !important; } .news-grid { gap: 12px !important; } /* Social CTA */ .social-cta-grid { gap: 10px !important; } .line-big-cta { border-radius: 14px !important; padding: 18px 16px !important; } /* Marquee brand strip */ .marquee-wrap { border-radius: 12px !important; } /* ============ 4. PRODUCT CARDS (shared home + listing) ============ */ .product-grid { gap: 10px !important; } .product-grid-4 { gap: 10px !important; } .product-card { border-radius: 12px !important; } .product-card .img-wrap { padding: 10px !important; border-radius: 0; } .product-info { padding: 10px !important; } .product-name { font-size: 12px !important; min-height: 32px !important; line-height: 1.3 !important; } .product-price-row { margin-top: 4px !important; gap: 6px !important; } .price-now { font-size: 15px !important; } .price-old { font-size: 11px !important; } .price-disc { font-size: 9px !important; padding: 2px 5px !important; } .product-meta { font-size: 10px !important; } /* Brand logo slot inside card: shrink so name/price stay visible */ .product-brand-inline { height: 34px !important; margin-bottom: 4px !important; } .product-brand-inline img, .product-brand-inline svg { max-height: 34px !important; max-width: 60px !important; } /* Card action buttons: full tap height */ .btn-row-blue { margin: 8px 10px 10px !important; gap: 6px !important; } .product-card.blue-style .btn-blue-buy { padding: 11px 6px !important; font-size: 12px !important; border-radius: 8px !important; min-height: 42px; } .product-wishlist { width: 34px !important; height: 34px !important; } .product-view-btn { width: 34px !important; height: 34px !important; top: 50px !important; } /* Hover-only CTA overlay is useless on touch */ .product-hover-ctas { display: none !important; } /* Keep 2 columns even on small phones (no 1-col collapse) */ .product-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .skeleton-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Carousel cards slightly narrower on phones */ .carousel-viewport .product-grid .product-card, .carousel-viewport .product-grid .skeleton-card { flex: 0 0 calc(46% - 6px) !important; min-width: 150px !important; } .carousel-btn { width: 36px !important; height: 36px !important; } /* ============ 5. PRODUCTS LISTING PAGE ============ */ .products-layout { padding: 14px 12px !important; gap: 14px !important; } .results-bar { gap: 8px !important; margin-bottom: 12px !important; } .results-count { font-size: 12px !important; width: 100%; order: 3; } .btn-filter-toggle { display: inline-flex !important; flex: 1; justify-content: center; min-height: 42px !important; border-radius: 10px !important; font-size: 13px !important; } .sort-select { flex: 1; min-height: 42px !important; border-radius: 10px !important; font-size: 13px !important; padding: 8px 12px !important; } /* Filter: full-screen sheet when opened (covers header + bottom nav) */ .filter-sidebar.open { position: fixed !important; inset: 0 !important; z-index: 999; height: 100% !important; width: 100% !important; max-width: none !important; overflow-y: auto; border-radius: 0 !important; border: none !important; padding: 18px 16px 120px !important; background: var(--bg) !important; animation: mobSheetUp .22s ease; } @keyframes mobSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } } .filter-title { font-size: 17px !important; margin-bottom: 14px !important; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 2; } .btn-filter-close { display: inline-flex !important; width: 40px !important; height: 40px !important; font-size: 16px !important; } .filter-chip { padding: 10px 14px !important; font-size: 13px !important; margin: 3px !important; } .filter-check-row { padding: 9px 0 !important; font-size: 14px !important; } .brand-check { width: 20px !important; height: 20px !important; } .price-input { padding: 12px !important; font-size: 15px !important; border-radius: 10px !important; } .btn-clear-filter { padding: 13px 16px !important; font-size: 14px !important; border-radius: 10px !important; } /* Pagination: proper tap targets */ .pagination { gap: 6px !important; margin-top: 24px !important; flex-wrap: wrap; } .page-btn { width: 44px !important; height: 44px !important; border-radius: 10px !important; font-size: 14px !important; } /* Category nav inside products body (if rendered) */ .cat-nav-inner { padding: 8px 0 !important; } .cat-link { padding: 9px 14px !important; font-size: 13px !important; } /* ============ 6. PRODUCT DETAIL PAGE ============ */ .detail-layout { padding: 0 12px 110px !important; gap: 18px !important; } .breadcrumb { padding: 10px 0 !important; font-size: 12px !important; gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; } .breadcrumb .current { max-width: 150px !important; } .img-main { border-radius: 14px !important; } .img-badge { top: 10px; left: 10px; } .img-wish { width: 42px !important; height: 42px !important; top: 10px; right: 10px; } .quick-row { margin-top: 10px !important; gap: 6px !important; } .quick-btn { padding: 12px 6px !important; min-height: 44px; font-size: 11px !important; border-radius: 10px !important; } .brand-chip { padding: 6px 12px !important; font-size: 13px !important; } .brand-chip img { height: 22px !important; } .product-title { font-size: 18px !important; margin-top: 10px !important; line-height: 1.4 !important; } .rating-row { margin-top: 6px !important; } .price-main { font-size: 26px !important; } .price-was { font-size: 14px !important; } .save-chip { font-size: 11px !important; } .inst-row { font-size: 12px !important; padding: 10px 12px !important; } .qty-row { margin-top: 14px !important; } .qty-btn { width: 44px !important; height: 44px !important; font-size: 16px !important; } .qty-in { width: 56px !important; height: 44px !important; font-size: 16px !important; } /* Sticky add-to-cart bar above the bottom nav */ .detail-layout div:has(> .btn-cart):has(> .btn-buy) { position: fixed !important; left: 0; right: 0; z-index: 90; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); margin: 0 !important; gap: 8px !important; padding: 10px 12px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.18); } .btn-cart { min-height: 48px !important; padding: 12px !important; font-size: 14px !important; border-radius: 12px !important; } .btn-buy { min-height: 48px !important; padding: 12px !important; font-size: 14px !important; border-radius: 12px !important; } .btn-line { min-height: 46px !important; font-size: 13px !important; border-radius: 12px !important; } /* Tabs */ .tab-nav { margin-top: 20px !important; } .tab-btn { padding: 12px 14px !important; font-size: 13px !important; min-height: 44px; } .tab-panel { padding: 14px 0 !important; } /* Spec table */ .spec-table { font-size: 12px !important; } .spec-table td { padding: 9px 10px !important; word-break: break-word; } .spec-table td:first-child { width: 40% !important; } /* Description HTML content scaling */ .product-description-html { font-size: 13px !important; } .product-description-html img { max-width: 100% !important; height: auto !important; } .review-card { padding: 14px !important; } .delivery-box { padding: 12px 14px !important; gap: 10px !important; } .delivery-row { font-size: 12px !important; } /* Related products: keep 2 columns on small phones */ .related-grid { gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; } .rel-name { font-size: 12px !important; } .rel-price { font-size: 14px !important; } /* ============ 7. CART / CHECKOUT / PAYMENT ============ */ .cart-page-wrap { padding: 16px 0 40px !important; } .cart-stepper { margin-bottom: 18px !important; gap: 6px !important; } .cart-step { font-size: 10px !important; } .cart-step .dot { width: 32px !important; height: 32px !important; font-size: 13px !important; } .step-line { flex: 0 0 24px !important; } .cart-grid { gap: 16px !important; } .cart-card { border-radius: 14px !important; } .cart-card-head { padding: 14px 16px !important; font-size: 14px !important; } .cart-card-body { padding: 14px 16px !important; } .ci-row { grid-template-columns: 76px 1fr auto !important; gap: 10px !important; padding: 12px 0 !important; } .ci-img { width: 76px !important; height: 76px !important; border-radius: 10px !important; } .ci-name { font-size: 13px !important; } .ci-price { font-size: 14px !important; } .qty-box { margin-top: 8px !important; border-radius: 10px !important; } .qty-box button { width: 36px !important; height: 36px !important; font-size: 14px !important; } .qty-box span { min-width: 38px !important; font-size: 14px !important; } .ci-remove { padding: 10px !important; font-size: 16px !important; } .summary-box { position: static !important; padding: 16px !important; border-radius: 14px !important; } .coupon-row input { min-height: 44px !important; border-radius: 10px !important; font-size: 15px !important; } .coupon-row button { min-height: 44px !important; padding: 10px 16px !important; font-size: 13px !important; } .form-group label { font-size: 13px !important; } .form-ctrl { padding: 12px 14px !important; min-height: 46px !important; border-radius: 10px !important; font-size: 15px !important; } .pay-options { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .pay-opt { padding: 14px 8px !important; min-height: 74px; } .pay-opt i { font-size: 20px !important; } .empty-cart { padding: 50px 16px !important; } .success-box { padding: 40px 16px !important; } /* ============ 8. SHARED COMPONENTS ============ */ /* Toast above bottom nav */ .toast { left: 16px !important; right: 16px !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; transform: translateY(120px); font-size: 13px !important; padding: 12px 16px !important; } .toast.show { transform: translateY(0) !important; } /* Modal */ .modal-box { width: calc(100vw - 24px) !important; max-width: 100% !important; max-height: 85vh !important; border-radius: 16px !important; margin: 0 auto; } .modal-body { padding: 14px !important; overflow-y: auto; } /* Generic buttons everywhere: comfy min height */ .btn-primary, .btn-ghost, .btn-add-cart, .btn-buy-now, .btn-line-add, .btn-line-order, .btn-phone-call { min-height: 44px !important; border-radius: 10px !important; } /* Search suggestions dropdown */ .search-suggestion-item { padding: 10px 12px !important; } .search-suggestion-img { width: 44px !important; height: 44px !important; } /* Flash sale grid card buttons */ .flash-link-btn { min-height: 42px; font-size: 13px !important; } } /* ============ MICRO PHONES (<= 400px) ============ */ @media (max-width: 400px) { .container-main { padding: 0 10px !important; } .product-grid, .product-grid-4, .related-grid { gap: 8px !important; } .product-info { padding: 8px !important; } .product-name { font-size: 11px !important; } .price-now { font-size: 14px !important; } .product-card.blue-style .btn-blue-buy { font-size: 11px !important; padding: 10px 4px !important; } .hero-slider { aspect-ratio: 4 / 3 !important; } .product-title { font-size: 16px !important; } .price-main { font-size: 23px !important; } .section-title { font-size: 15px !important; } .pay-options { grid-template-columns: 1fr !important; } }