/* ============================================================================= storefront-mobile.css — Correções de responsividade do cardápio público ============================================================================= Importar DEPOIS de app.css no do storefront (head.ejs). Tudo aqui usa @media (max-width: ...) — só afeta telas pequenas. Não usar !important sem necessidade — o app.css já tem regras mobile; estas são complementares pra pontos que ficaram faltando. */ /* =========================================================================== 1) BANNER DA LOJA — altura adaptada ao mobile (não consome a tela toda) =========================================================================== */ @media (max-width: 768px) { .store-banner { height: 160px; min-height: 160px; } .store-banner__img { height: 160px; object-fit: cover; } } @media (max-width: 480px) { .store-banner { height: 130px; min-height: 130px; } .store-banner__img { height: 130px; } } /* =========================================================================== 2) STORE PROFILE - meta items (rating, horario, sobre) em chips menores =========================================================================== */ @media (max-width: 768px) { .store-profile__meta { gap: 6px; flex-wrap: wrap; } .store-meta-item { font-size: 12px; padding: 5px 10px; gap: 4px; } .store-meta-item__icon--star { font-size: 13px; } .store-meta-item > i { font-size: 13px; } .store-profile__description { font-size: 13px; line-height: 1.4; } } /* Em telas bem pequenas, o nome da loja não pode estourar */ @media (max-width: 380px) { .store-profile__name { font-size: 20px; } } /* =========================================================================== 3) CATEGORIES NAV - sticky tem que respeitar safe-area + topbar =========================================================================== */ @media (max-width: 768px) { .categories-nav { padding: 8px 0; } .category-pill { padding: 7px 14px; font-size: 12px; } /* Adiciona padding lateral pro primeiro/último chip não colar na borda */ .categories-nav__scroll { padding: 4px 4px; } .categories-nav__scroll > .category-pill:first-child { margin-left: 0; } } /* =========================================================================== 4) PRODUCT CARD - layout mobile (imagem menor à direita) =========================================================================== */ @media (max-width: 600px) { .product-card { grid-template-columns: 1fr 96px; gap: 10px; padding: 12px; border-radius: 12px; } .product-card__img-wrap { width: 96px; height: 96px; border-radius: 10px; } .product-card__name { font-size: 14px; line-height: 1.25; } .product-card__description { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; } .price-main, .price-promo { font-size: 15px; } .price-original { font-size: 11px; } .btn-add-product { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; } } @media (max-width: 380px) { .product-card { grid-template-columns: 1fr 84px; } .product-card__img-wrap { width: 84px; height: 84px; } } /* =========================================================================== 5) MENU SECTION - títulos das categorias menores =========================================================================== */ @media (max-width: 768px) { .menu-section { margin-bottom: 28px; } .menu-section__title { font-size: 18px; margin-bottom: 12px; } .menu-section__title::before { height: 16px; } } /* =========================================================================== 6) SEARCH BAR do cardápio mobile (mais alta pra touch) =========================================================================== */ @media (max-width: 768px) { .search-bar__input { min-height: 44px; font-size: 16px; /* evita zoom iOS */ } } /* =========================================================================== 7) CART FLOAT (botão flutuante "Ver carrinho") - respeita safe-area iPhone =========================================================================== */ @supports (padding: env(safe-area-inset-bottom)) { .cart-float { bottom: calc(16px + env(safe-area-inset-bottom)); } } @media (max-width: 768px) { /* Espaço extra no final da página pra cart-float não cobrir conteúdo */ .store-layout { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } } /* =========================================================================== 8) CART MODAL / DRAWER - bottom-sheet style no mobile =========================================================================== */ @media (max-width: 768px) { .cart-modal { width: 100%; max-width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; margin: 0; align-self: flex-end; } .cart-modal__header { padding: 14px 16px; } .cart-modal__header h2 { font-size: 16px; } } /* =========================================================================== 9) CHECKOUT - melhorias finais (app.css já cobre boa parte) =========================================================================== */ @media (max-width: 600px) { .checkout-page { padding: 10px 0 calc(100px + env(safe-area-inset-bottom, 0px)); } .page-title { font-size: 20px; margin-bottom: 14px; } .back-link { font-size: 13px; margin-bottom: 8px; } .checkout-card { padding: 14px; margin-bottom: 12px; border-radius: 12px; } .checkout-card__title { font-size: 15px; margin-bottom: 10px; } } /* Form-row do checkout no mobile sempre 1 coluna (já tem isso no app.css mas reforço pra todas as variantes) */ @media (max-width: 480px) { .checkout-page .form-row { grid-template-columns: 1fr; gap: 10px; } } /* =========================================================================== 10) TOPBAR PÚBLICO - mais compacto no mobile =========================================================================== */ @media (max-width: 480px) { .topbar__inner { width: 100%; padding: 0 12px; } .topbar .brand__name { font-size: 16px; } .topbar .brand__mark { width: 28px; height: 28px; font-size: 14px; } } /* =========================================================================== 11) MODAL DE PRODUTO (quando clica num item do cardápio) =========================================================================== */ @media (max-width: 768px) { /* Modal de produto vira bottom sheet no mobile */ .product-modal, .modal-content, .modal__content { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; margin: 0; align-self: flex-end; } /* Imagem do produto não consome tela toda */ .product-modal__img, .product-modal__image { max-height: 240px; object-fit: cover; } .product-modal__title { font-size: 18px; } /* Botão "Adicionar ao carrinho" sticky no rodapé do modal */ .product-modal__footer { position: sticky; bottom: 0; background: var(--bg-1); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); z-index: 2; } } /* =========================================================================== 12) SAFE-AREA geral pra storefront =========================================================================== */ @supports (padding: env(safe-area-inset-bottom)) { .page-checkout main, .page-store main { padding-bottom: env(safe-area-inset-bottom); } } /* =========================================================================== 13) TOAST no mobile - longe do botão de carrinho =========================================================================== */ @media (max-width: 768px) { .toast { left: 12px; right: 12px; /* Acima do cart-float */ bottom: calc(90px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; } } /* =========================================================================== 14) STORE SHARE BTN e botões circulares - tamanho de toque adequado =========================================================================== */ @media (max-width: 768px) { .store-share-btn { width: 38px; height: 38px; } } /* =========================================================================== 15) ORDER SUCCESS (página depois de finalizar pedido) =========================================================================== */ @media (max-width: 600px) { .order-success-card, .order-success { padding: 16px; } }