/** * Catálogo / páginas de venda (cursos.php, produtos.php, …) * Layout: navbar fixa + cabeçalho full-bleed (top-*) + grelha de cards + carrinho. * Cores de tema: --cor-sidebar, --cor-toggle-text (inline no da página). */ /* === Base / reset (scoped) === */ body.pagina-catalogo { --cor-texto: #333; --cor-bg: #f5f7fa; --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.08); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --font-base: "Roboto", system-ui, sans-serif; --navbar-catalog-height: 56px; --navbar-search-max: 300px; --navbar-toggle-size: 44px; --navbar-ac-size: 44px; --navbar-logo-width: 132px; --navbar-actions-gap: 6px; margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-base); background: var(--cor-bg); color: var(--cor-texto); line-height: 1.5; padding-top: var(--navbar-catalog-height); } body.pagina-catalogo *, body.pagina-catalogo *::before, body.pagina-catalogo *::after { box-sizing: border-box; } body.pagina-catalogo.has-catalog-top { background: #fff; } body.pagina-catalogo h1, body.pagina-catalogo h2, body.pagina-catalogo h3, body.pagina-catalogo h4, body.pagina-catalogo h5, body.pagina-catalogo h6, body.pagina-catalogo .modal-title, body.pagina-catalogo .offcanvas-title, body.pagina-catalogo input, body.pagina-catalogo button, body.pagina-catalogo .form-control { font-family: var(--font-base); } /* scrollbar-gutter:stable cria faixa lateral sob fixed-top */ html:has(body.pagina-catalogo) { overflow-y: scroll !important; scrollbar-gutter: auto; } body.pagina-catalogo.modal-open, body.pagina-catalogo.offcanvas-menu-open, body.pagina-catalogo.offcanvas-carrinho-open, body.pagina-catalogo.offcanvas-checkout-open { padding-right: 0 !important; overflow-y: auto !important; } body.pagina-catalogo.modal-open .navbar-menu-toggle, body.pagina-catalogo.offcanvas-carrinho-open .navbar-menu-toggle { display: none !important; } /* === Navbar catálogo === */ .navbar-catalog-fixed { z-index: 1030; height: var(--navbar-catalog-height); min-height: var(--navbar-catalog-height); max-height: var(--navbar-catalog-height); box-shadow: none; width: 100%; display: block; overflow: hidden; } /* Não usar .navbar do Bootstrap (flex space-between quebra o layout). */ .navbar-catalog-inner { position: relative; width: 100%; max-width: 100%; height: var(--navbar-catalog-height); min-height: var(--navbar-catalog-height); max-height: var(--navbar-catalog-height); padding: 0 12px !important; padding-left: calc(var(--navbar-logo-width) + 20px) !important; padding-right: calc(var(--navbar-toggle-size) + 16px) !important; box-sizing: border-box; } .navbar-catalog-inner.has-area-cliente { padding-right: calc(var(--navbar-toggle-size) + var(--navbar-ac-size) + var(--navbar-actions-gap) + 20px) !important; } .navbar-catalog-actions { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: var(--navbar-actions-gap); } .navbar-catalog-ac, .navbar-catalog-ac-logout { display: inline-flex; align-items: center; justify-content: center; min-width: var(--navbar-ac-size); height: var(--navbar-ac-size); padding: 0 10px; border: none; border-radius: 0; background-color: var(--cor-sidebar); color: var(--cor-toggle-text); font-size: 0.72rem; font-weight: 600; line-height: 1.1; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; } .navbar-catalog-ac:hover, .navbar-catalog-ac-logout:hover { filter: brightness(1.08); color: var(--cor-toggle-text); } .navbar-catalog-ac .bi, .navbar-catalog-ac-logout .bi { font-size: 1.15rem; line-height: 1; } .navbar-catalog-ac--nome { max-width: 96px; overflow: hidden; text-overflow: ellipsis; } .navbar-catalog-logo { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; max-width: var(--navbar-logo-width); max-height: calc(var(--navbar-catalog-height) - 10px); line-height: 0; } .navbar-catalog-logo img { display: block; max-width: 100%; max-height: calc(var(--navbar-catalog-height) - 10px); width: auto; height: auto; object-fit: contain; } .navbar-search-form { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(var(--navbar-search-max), calc(100% - var(--navbar-logo-width) - var(--navbar-toggle-size) - 48px)); max-width: var(--navbar-search-max); min-width: 0; margin: 0; } .navbar-menu-toggle { position: static; transform: none; flex-shrink: 0; width: var(--navbar-toggle-size); height: var(--navbar-toggle-size); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.95rem; line-height: 1; border: none; border-radius: 0; cursor: pointer; background-color: var(--cor-sidebar); color: var(--cor-toggle-text) !important; transition: filter 0.15s; } .navbar-menu-toggle:hover { filter: brightness(1.06); color: var(--cor-toggle-text) !important; } .navbar-menu-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } .search-wrapper { display: flex; align-items: stretch; gap: 0; background: #fff; border-radius: 0; padding: 0; border: 1px solid #d8dde2; box-shadow: none; } .search-input { border: none; outline: none; padding: 6px 10px; font-size: 0.875rem; width: auto; background: transparent; flex: 1; min-width: 0; border-right: 1px solid #e4e8ec; } .search-btn { background: var(--cor-sidebar); border: none; padding: 0 10px; border-radius: 0; color: var(--cor-toggle-text); cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .search-btn:hover { filter: brightness(1.05); color: var(--cor-toggle-text); } /* === Cabeçalho módulo (top-cursos / top-estoque / top-hweb) — full-bleed colado à navbar === */ .catalogo-wrap { padding-bottom: 100px; margin-top: 0.5rem; } .catalog-top-landing { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; line-height: 0; font-size: 0; } .catalog-top-landing > section.section, .catalog-top-landing section.section#top-cursos, .catalog-top-landing section.section#top-estoque, .catalog-top-landing section.section#top-hweb, .catalog-top-landing .catalog-top-section, .catalog-top-landing .catalog-top-section > section.section { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0; font-size: 0; } .catalog-top-landing .row.k-element, .catalog-top-landing .row { --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .catalog-top-landing .row > [class*="col"], .catalog-top-landing .k-col-selector { padding: 0 !important; margin: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; } .catalog-top-landing .editor-slide-banner, .catalog-top-landing .editor-slide-banner-v2 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: hidden !important; line-height: 0 !important; --sb2-min-h: 0px !important; } .catalog-top-landing .editor-slide-banner-carousel, .catalog-top-landing .editor-slide-banner-carousel .carousel-inner, .catalog-top-landing .editor-slide-banner-carousel .carousel-item, .catalog-top-landing .sb2-slide-media { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; min-height: 0 !important; height: auto !important; display: block !important; border-radius: 0 !important; } /* Proporção natural da imagem (sem letterbox do min-height do editor) */ .catalog-top-landing .editor-slide-banner-v2 .sb2-slide-media > img, .catalog-top-landing .editor-slide-banner-v2 .sb2-slide-media > video, .catalog-top-landing .editor-slide-banner-v2 .carousel-item img, .catalog-top-landing .editor-slide-banner-v2 .carousel-item video, .catalog-top-landing .editor-slide-banner-carousel .carousel-item img, .catalog-top-landing .editor-slide-banner-carousel .carousel-item video { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; vertical-align: top; position: relative !important; z-index: 1; } .catalog-top-landing .sb2-slide-media { position: relative !important; } .catalog-top-landing .editor-slide-banner-v2 .sb2-slide-stack { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 6; pointer-events: none; font-size: 1rem; line-height: 1.35; } .catalog-top-landing .sb2-caption, .catalog-top-landing .sb2-cta { line-height: 1.35; font-size: 1rem; } /* === Grelha de itens (cursos / produtos) === */ .produtos-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 18px; padding: 20px 10px 24px 10px; width: 100%; align-items: stretch; justify-items: center; } .produto-col { width: 100%; max-width: 360px; } .produto-card { background: #fff; border-radius: 0; border: 1px solid #e2e6ea; padding: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; transition: border-color 0.2s, box-shadow 0.2s; text-decoration: none; color: inherit; box-shadow: none; } .produto-card:hover { border-color: #cfd6dd; box-shadow: var(--shadow-sm); color: inherit; } .produto-card-media { background: #f0f2f5; padding: 0; margin: 0; flex-shrink: 0; overflow: hidden; line-height: 0; } .produto-img { width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 0; margin: 0; display: block; } .produto-card-body { padding: 12px 12px 10px; text-align: left; flex: 1; display: flex; flex-direction: column; min-height: 0; } .produto-meta { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6c757d; margin: 0 0 6px 0; line-height: 1.3; } .produto-nome { font-size: 0.98rem; font-weight: 700; color: #1a1a1a; margin: 0 0 8px 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } h3.produto-nome { margin-top: 0; } .produto-preco { font-size: 1.05rem; font-weight: 700; color: var(--cor-sidebar); margin: 0; } .produto-actions { display: flex; justify-content: stretch; align-items: center; gap: 6px; margin-top: auto; padding: 10px 12px 12px; border-top: 1px solid #eef1f4; background: #fafbfc; } .qtd-input { width: 52px; text-align: center; padding: 6px 4px; border-radius: 0; border: 1px solid #cfd6dd; font-weight: 600; } .btn-action { width: 40px; height: 40px; border: none; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--cor-sidebar); color: var(--cor-toggle-text) !important; text-decoration: none; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; transition: filter 0.15s, opacity 0.15s; } .btn-action:hover { filter: brightness(1.08); color: var(--cor-toggle-text) !important; } .btn-info-prod { background: #0d6efd; } .btn-cart-prod { background: var(--cor-sidebar); } .btn-cart-prod:disabled { opacity: 0.45; cursor: not-allowed; } /* === Carrinho flutuante === */ .float-cart-btn { position: fixed; z-index: 1046; bottom: max(18px, env(safe-area-inset-bottom, 18px)); right: max(18px, env(safe-area-inset-right, 18px)); left: auto; top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 76px; padding: 10px 14px 12px; border: none; border-radius: 0; background: var(--cor-sidebar); color: var(--cor-toggle-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .float-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .float-cart-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .float-cart-ico-wrap { position: relative; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; line-height: 1; } .float-cart-badge { position: absolute; top: -10px; right: -12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e53935; color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .float-cart-badge.is-empty { display: none; } .float-cart-valor { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } /* === Offcanvas carrinho === */ #offcanvasCarrinho.offcanvas, #offcanvasCarrinhoCursos.offcanvas { z-index: 1250 !important; } .offcanvas-cart-sidebar { --bs-offcanvas-width: min(100vw, 420px); background-color: var(--cor-sidebar) !important; color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .offcanvas-header { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding: 1rem 1.15rem; padding-top: max(1rem, calc(0.75rem + env(safe-area-inset-top, 0px))); padding-right: max(1.15rem, calc(0.75rem + env(safe-area-inset-right, 0px))); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.25rem; } .offcanvas-cart-sidebar .offcanvas-header .offcanvas-title { color: var(--cor-toggle-text) !important; letter-spacing: 0.04em; margin: 0; padding-right: 0.5rem; } /* Close com respiro do canto (não colado ao topo/direita) */ .offcanvas-cart-sidebar .cart-offcanvas-close, .offcanvas-cart-sidebar .offcanvas-header .btn-close { flex-shrink: 0; width: 2.35rem; height: 2.35rem; margin: 0 !important; padding: 0; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: var(--cor-toggle-text, #fff) !important; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); filter: none; background-image: none !important; } .offcanvas-cart-sidebar .cart-offcanvas-close .bi { font-size: 1.1rem; line-height: 1; pointer-events: none; } .offcanvas-cart-sidebar .cart-offcanvas-close:hover, .offcanvas-cart-sidebar .cart-offcanvas-close:focus, .offcanvas-cart-sidebar .offcanvas-header .btn-close:hover, .offcanvas-cart-sidebar .offcanvas-header .btn-close:focus { background: rgba(255, 255, 255, 0.24); opacity: 1; outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } .offcanvas-cart-sidebar .cart-footer-panel { background: rgba(0, 0, 0, 0.12) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .cart-footer-panel .fw-semibold, .offcanvas-cart-sidebar .cart-footer-panel #carrinho-offcanvas-total { color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .cart-line-item { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0; padding: 12px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.07); } .offcanvas-cart-sidebar .cart-line-item:last-of-type { margin-bottom: 0; } .offcanvas-cart-sidebar .cart-line-nome { font-weight: 700; font-size: 0.95rem; color: var(--cor-toggle-text) !important; line-height: 1.3; margin-bottom: 6px; padding-right: 8px; } .offcanvas-cart-sidebar .cart-line-detalhe { font-size: 0.82rem; color: var(--cor-toggle-text) !important; opacity: 0.88; margin-bottom: 4px; } .offcanvas-cart-sidebar .cart-line-sub { font-size: 0.9rem; font-weight: 700; color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .cart-line-num { color: var(--cor-toggle-text) !important; opacity: 0.75; } .offcanvas-cart-sidebar .cart-line-qty-row { width: 100%; margin-top: 8px; } .offcanvas-cart-sidebar .cart-qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0; overflow: hidden; } .offcanvas-cart-sidebar .cart-qty-stepper button { border: none; border-radius: 0 !important; background: rgba(255, 255, 255, 0.12); color: var(--cor-toggle-text) !important; font-weight: 700; font-size: 1rem; line-height: 1; min-width: 36px; padding: 6px 10px; } .offcanvas-cart-sidebar .cart-qty-stepper button:hover { background: rgba(255, 255, 255, 0.22); color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .cart-qty-val { min-width: 2.25rem; text-align: center; font-weight: 800; font-size: 0.95rem; line-height: 36px; padding: 0 6px; color: var(--cor-toggle-text) !important; background: rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.25); border-right: 1px solid rgba(255, 255, 255, 0.25); } .offcanvas-cart-sidebar .btn-outline-danger { border-color: rgba(255, 255, 255, 0.55); color: var(--cor-toggle-text) !important; background: transparent; } .offcanvas-cart-sidebar .btn-outline-danger:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.75); color: var(--cor-toggle-text) !important; } .offcanvas-cart-sidebar .btn-checkout-carrinho { background: #fff !important; color: var(--cor-sidebar) !important; border: none; } .offcanvas-cart-sidebar .btn-checkout-carrinho:hover { filter: brightness(0.97); color: var(--cor-sidebar) !important; } .offcanvas-cart-sidebar .text-muted { color: var(--cor-toggle-text) !important; opacity: 0.88; } .cart-line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } /* === Offcanvas menu lateral === */ .offcanvas-nav-menu { --bs-offcanvas-width: min(100vw, 300px); background-color: var(--cor-sidebar) !important; color: var(--cor-toggle-text) !important; } .offcanvas-nav-menu .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .offcanvas-nav-menu .nav-links-menu { list-style: none; margin: 0; padding: 0; } .offcanvas-nav-menu .nav-links-menu > li { margin: 10px 0; text-align: left; } .offcanvas-nav-menu .nav-links-menu > li.logo-item-menu, .offcanvas-nav-menu .nav-links-menu > li:not(.nav-menu-item):not(.nav-menu-has-children) { text-align: center; } .offcanvas-nav-menu .nav-links-menu a { font-size: 1.05rem; font-weight: 500; padding: 8px 12px; display: block; border-radius: 6px; text-decoration: none; transition: opacity 0.3s; color: var(--cor-toggle-text) !important; } .offcanvas-nav-menu .nav-links-menu a:hover { opacity: 0.85; } .offcanvas-nav-menu .logo-item-menu img { max-width: 160px; margin: 0 auto 16px; display: block; } .offcanvas-nav-menu .nav-menu-toggle { display: none; } .offcanvas-nav-menu .nav-menu-parent-row { display: flex; align-items: stretch; width: 100%; min-width: 0; } .offcanvas-nav-menu .nav-menu-parent-row > a { flex: 1; min-width: 0; } .offcanvas-nav-menu .nav-menu-caret { display: flex; align-items: center; justify-content: center; padding: 0 12px; cursor: pointer; color: var(--cor-toggle-text) !important; flex-shrink: 0; transition: transform 0.2s ease; user-select: none; } .offcanvas-nav-menu .nav-menu-toggle:checked ~ .nav-menu-parent-row .nav-menu-caret { transform: rotate(90deg); } .offcanvas-nav-menu .nav-menu-submenu { list-style: none; margin: 0; padding: 0 0 0 8px; max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .offcanvas-nav-menu .nav-menu-toggle:checked ~ .nav-menu-submenu { max-height: 80vh; } .offcanvas-nav-menu .nav-menu-submenu li { margin: 4px 0; text-align: left; } .offcanvas-nav-menu .nav-menu-submenu a { font-size: 0.95rem; font-weight: 400; padding: 6px 12px 6px 20px; opacity: 0.95; } /* === Checkout (produtos) === */ .offcanvas-catalog { --bs-offcanvas-width: min(100vw, 560px); } @media (min-width: 1200px) { .offcanvas-catalog { --bs-offcanvas-width: min(100vw, 640px); } } .checkout-uf-input { min-width: 3.25rem; font-weight: 600; text-align: center; text-transform: uppercase; } .offcanvas-catalog .offcanvas-header { border-bottom: 1px solid #e9ecef; } .offcanvas-catalog .offcanvas-title { font-weight: 700; font-size: 1.1rem; } .checkout-resumo-pedido { background: #f8f9fa; border: 1px solid #e9ecef !important; } .checkout-resumo-pedido #checkout-lista-itens { max-height: 220px; overflow-y: auto; } .checkout-item-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e9ecef; font-size: 0.9rem; } .checkout-item-linha:last-child { border-bottom: none; } .checkout-item-nome { flex: 1; min-width: 0; word-break: break-word; } .checkout-item-preco { flex-shrink: 0; font-weight: 600; color: #212529; } #offcanvasCheckout.offcanvas { position: fixed !important; } .catalog-checkout-loading { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(2px); } .catalog-checkout-loading.d-none { display: none !important; } .catalog-checkout-loading__spinner { width: 2.5rem; height: 2.5rem; margin: 0 auto; border: 3px solid rgba(25, 135, 84, 0.2); border-top-color: #198754; border-radius: 50%; animation: catalog-checkout-spin 0.7s linear infinite; } @keyframes catalog-checkout-spin { to { transform: rotate(360deg); } } .catalog-checkout-loading__msg { max-width: 18rem; line-height: 1.45; } /* === Paginação === */ .pagina-catalogo .pagination .page-link { margin: 0 3px; border-radius: 8px; color: var(--cor-sidebar); } .pagina-catalogo .pagination .active .page-link { background: var(--cor-sidebar) !important; border-color: var(--cor-sidebar) !important; color: #fff; } /* === Modal produto (estoque) === */ .pagina-catalogo .modal-content { border-radius: 16px; border: none; box-shadow: var(--shadow-lg); } #modalProduto .modal-header { border-bottom: none; } #modalProduto .modal-title { font-weight: 700; color: #222; } #produtoImagem { width: 100%; max-height: 350px; object-fit: contain; } .modal-prod-info { display: flex; flex-direction: column; gap: 10px; } #produtoPreco { font-size: 1.6rem; font-weight: 700; color: var(--cor-sidebar); } #produtoDescricao { font-size: 0.95rem; color: #444; } #btnComprar { background: var(--cor-sidebar) !important; color: #fff !important; padding: 12px 20px; border-radius: 10px; border: none; font-weight: 600; width: 100%; transition: 0.2s; } /* === Mobile === */ @media (max-width: 768px) { body.pagina-catalogo { --navbar-logo-width: 96px; } .navbar-catalog-inner { padding-left: calc(var(--navbar-logo-width) + 14px) !important; padding-right: calc(var(--navbar-toggle-size) + 12px) !important; } .navbar-catalog-inner.has-area-cliente { padding-right: calc(var(--navbar-toggle-size) + var(--navbar-ac-size) + var(--navbar-actions-gap) + 16px) !important; } .navbar-catalog-ac--nome { max-width: 72px; font-size: 0.65rem; } .navbar-search-form { width: min(var(--navbar-search-max), calc(100% - var(--navbar-logo-width) - var(--navbar-toggle-size) - 36px)); } .search-input { width: 100%; min-width: 0; } .produtos-container { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-padding-inline: 0; padding: 16px 0 28px; width: 100%; max-width: 100%; justify-content: flex-start; align-items: stretch; } .produtos-container::-webkit-scrollbar { height: 6px; } .produtos-container::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 4px; } .produto-col { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0 12px; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; } .produtos-container > .col-12 { flex: 0 0 100%; max-width: 100%; min-width: 100%; scroll-snap-align: none; } .produto-card-media { padding: 0; text-align: center; } .produto-img { height: 200px; margin: 0; object-fit: cover; } .produto-card-body { text-align: center; align-items: center; } .produto-meta, .produto-nome, .produto-preco { text-align: center; width: 100%; } .produto-nome { font-size: 1.05rem; -webkit-line-clamp: 4; } .produto-preco { font-size: 1.22rem; } .produto-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: center; gap: 8px; } .qtd-input { width: 56px; } .btn-action { width: 44px; height: 44px; } #modalProduto .modal-body { flex-direction: column; text-align: center; } #produtoImagem { max-height: 220px !important; margin-bottom: 10px; } #modalProduto .modal-title { font-size: 1.25rem; } #produtoPreco { font-size: 1.4rem; } }