/* ========================================================================== AVELOR — STYLE.CSS -------------------------------------------------------------------------- COMO TROCAR O NOME DA LOJA: edite a variável --store-name aqui embaixo E a constante STORE_NAME no topo de js/main.js — o JS injeta esse nome automaticamente em todo elemento com class="js-store-name" (as duas logos do header e a logo do footer, em todas as páginas). COMO TROCAR AS CORES: edite os valores dentro de :root abaixo. O tema atual é claro (branco + dourado), inspirado no banner de decoração — praticamente todo componente do site usa essas variáveis, então trocar os valores aqui já propaga a mudança para o site inteiro. COMO TROCAR A FONTE: troque o link do Google Fonts no de cada HTML e o valor de --font-base aqui embaixo. ========================================================================== */ :root { /* ---- Identidade da loja (nome usado apenas como referência textual) --- */ --store-name: "Avelor"; /* ---- Paleta de cores: tema claro premium (branco + dourado) ----------- */ --color-bg: #ffffff; --color-bg-alt: #f6f1e6; --color-surface: #ffffff; --color-text: #221d15; /* Ligeiramente mais escuro do que o tom original (#7c7261) — esse falhava o contraste mínimo (WCAG AA, 4.5:1) sobre o fundo creme (--color-bg-alt), usado em muitos textos secundários (rodapé, resumos). Mudança quase impercetível, só o suficiente para passar. */ --color-text-muted: #706757; --color-border: #e6ddc8; --color-dark: #221d15; --color-dark-alt: #38301f; /* Dourado escurecido (era #b8863a) — o tom original falhava o contraste mínimo legal (WCAG AA, 4.5:1) sempre que era usado como texto sobre branco ou creme (preços, ligações, estrelas de avaliação): dava só 3.23:1. Este tom mantém o mesmo matiz/saturação, só mais escuro, e passa em ambos os fundos (5.33:1 em branco, 4.73:1 em creme). Onde o dourado é usado como FUNDO de um botão/selo, o texto por cima passou de --color-dark para branco, porque com este tom mais escuro o texto escuro deixava de ter contraste suficiente — branco sobre este dourado dá 5.33:1, mais legível do que a combinação original. */ --color-primary: #8a642b; /* dourado - cor de destaque principal */ --color-primary-dark: #6e5022; --color-primary-light: rgba(138, 100, 43, 0.14); --color-accent: #8a642b; /* dourado - usado em selos, sucesso, desconto */ --color-accent-light: rgba(138, 100, 43, 0.14); --color-warning: #e0a52c; --color-danger: #e5484d; --color-star: #8a642b; /* ---- Tipografia --------------------------------------------------------*/ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---- Layout ------------------------------------------------------------*/ --container-width: 1200px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 10px 40px rgba(0,0,0,0.12); --header-height: 64px; --announcement-height: 38px; /* Altura total das barras fixas (aviso + cabecalho) */ --header-offset: calc(var(--announcement-height) + var(--header-height)); --transition: all 0.2s ease; } /* ========================================================================== RESET / BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-offset) + 16px); } body { margin: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p { margin: 0; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } /* Acessibilidade: foco visível para navegação por teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: #fff; padding: 12px 20px; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } section { padding: 64px 0; } .section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-tag { display: inline-block; color: var(--color-primary); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; } .section-header p { color: var(--color-text-muted); margin-top: 12px; font-size: 1.05rem; } .bg-alt { background: var(--color-bg-alt); } /* ========================================================================== BOTÕES ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 0; font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid transparent; transition: var(--transition); white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Botão principal em tom escuro neutro; o dourado fica reservado para o estado :hover e para detalhes pequenos (selos, preços, ligações), em vez de preencher blocos inteiros. */ .btn-primary { background: var(--color-dark); border-color: var(--color-dark); color: #fff; } .btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-outline:hover { background: var(--color-dark); border-color: var(--color-dark); color: #fff; } .btn-dark { background: var(--color-dark); color: #fff; } .btn-dark:hover { background: var(--color-dark-alt); } .btn-block { width: 100%; } .btn-sm { padding: 11px 20px; font-size: 0.7rem; letter-spacing: 0.12em; } /* ========================================================================== BARRA DE AVISO (topo, acima do cabeçalho) ========================================================================== */ .announcement-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--announcement-height); display: flex; align-items: center; justify-content: center; background: var(--color-dark); color: #fff; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0 16px; z-index: 501; } /* ========================================================================== HEADER ========================================================================== */ .site-header { position: fixed; top: var(--announcement-height); left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; background: #ffffff; border-bottom: 1px solid rgba(138,100,43,0.22); box-shadow: 0 1px 12px rgba(0,0,0,0.06); z-index: 500; } .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Em desktop, o cabeçalho ocupa a largura toda da página (em vez do container de 1200px usado no resto do site), para o carrinho e a conta ficarem sempre encostados ao canto direito do ecrã em monitores largos. */ @media (min-width: 1024px) { .site-header .container { max-width: none; padding: 0 32px; } } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo img { height: 34px; width: auto; } /* Menu horizontal, centrado entre a logo (à esquerda) e os ícones (à direita) */ .main-nav { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1; min-width: 0; margin: 0 24px; } .main-nav a { font-weight: 500; font-size: 0.86rem; letter-spacing: 0.01em; color: var(--color-text); position: relative; padding: 6px 0; white-space: nowrap; } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-primary); } /* Menu com subníveis (ex.: Iluminação → Lustres, Candeeiros Suspensos…) */ .nav-item.has-submenu { position: relative; } .submenu-toggle-icon { display: none; } /* só aparece no telemóvel, ver media query abaixo */ .submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: 10px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 10; } .submenu li a { display: block; padding: 9px 20px; font-size: 0.82rem; white-space: nowrap; color: var(--color-text-muted); } .submenu li a:hover { color: var(--color-primary); background: var(--color-bg-alt); } .nav-item.has-submenu:hover .submenu, .nav-item.has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Grupo à esquerda: botão de menu (telemóvel) + pesquisa. Em desktop a ordem é reordenada por CSS para a pesquisa ficar junto dos outros ícones, à direita, como antes; no telemóvel fica à esquerda, ao lado do botão de menu. */ .header-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } @media (min-width: 1024px) { .header-inner > .logo { order: 1; } .header-inner > .main-nav { order: 2; } .header-inner > .header-left { order: 3; } .header-inner > .header-actions { order: 4; } } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: none; border-radius: 50%; background: none; color: var(--color-text); transition: var(--transition); } .icon-btn:hover { background: rgba(0,0,0,0.06); } /* Barra de pesquisa que abre por baixo do cabeçalho */ .header-search { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: 16px 0; } .header-search[hidden] { display: none; } .header-search form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; } .header-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); } .header-search input:focus { border-color: var(--color-primary); background: var(--color-surface); } .cart-icon { position: relative; display: inline-flex; padding: 8px; border-radius: 50%; transition: var(--transition); } .cart-icon:hover { background: rgba(0,0,0,0.06); } .cart-badge { position: absolute; top: 0; right: 0; background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; } /* Só aparece depois de haver pelo menos um artigo — ver updateCartBadge(). */ .cart-badge.is-visible { display: flex; } .account-icon { position: relative; display: inline-flex; padding: 8px; border-radius: 50%; color: var(--color-text); transition: var(--transition); } .account-icon:hover { background: rgba(0,0,0,0.06); } .account-icon.is-logged-in { color: var(--color-primary); } .nav-toggle { display: none; background: none; border: none; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); margin: 5px 0; transition: var(--transition); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; min-height: 760px; display: flex; align-items: center; padding: calc(var(--header-offset) + 80px) 0 80px; background: linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.12) 100%), url('../img/banner-01-v3.png') center / cover no-repeat; overflow: hidden; } .hero-copy { max-width: 560px; margin: 0; text-align: left; } .hero-tagline { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 18px; } .hero h1 { color: var(--color-text); font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35; margin: 0 0 34px; } .hero h1 .highlight { color: var(--color-primary); } /* Botão retangular claro, igual ao do banner de destaque */ .hero-cta { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border: 1px solid rgba(34,29,21,0.12); background: rgba(255,255,255,0.92); color: var(--color-text); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; backdrop-filter: blur(2px); transition: var(--transition); } .hero-cta:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; } /* ========================================================================== BANNER "CATEGORIA EM DESTAQUE" (index.html, abaixo dos produtos) Texto alinhado à esquerda e centrado na vertical, em maiúsculas com espaçamento largo entre letras e traço fino — mais o botão retangular claro. Para trocar a foto, substitua img/banner-categoria-destaque-v3.png ou edite o caminho abaixo. ========================================================================== */ .featured-banner { position: relative; min-height: 680px; display: flex; align-items: center; padding: 80px 0; background: linear-gradient(90deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.12) 100%), url('../img/banner-categoria-destaque-v3.png') center / cover no-repeat; overflow: hidden; } .featured-banner-copy { max-width: 560px; margin: 0; text-align: left; } .featured-banner-copy .section-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-text-muted); margin-bottom: 18px; } .featured-banner-copy h2 { color: var(--color-text); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35; margin: 0 0 34px; } /* Botão retangular claro, em maiúsculas espaçadas */ .featured-banner-cta { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: 0; border: 1px solid rgba(34,29,21,0.12); background: rgba(255,255,255,0.92); color: var(--color-text); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; backdrop-filter: blur(2px); } .featured-banner-cta:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; } /* ========================================================================== CATEGORIAS ========================================================================== */ .categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .category-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px 16px; text-align: center; transition: var(--transition); } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .category-card h3 { font-size: 0.95rem; font-weight: 700; } /* Cartão de categoria: foto (ou ícone placeholder) preenchendo o quadrado, com o nome centralizado na parte de baixo. Estrutura única para todas as categorias — quando tiver a foto real de uma categoria, basta trocar o
pelo Nome correspondente (veja o exemplo já usado em "Cozinha") que o layout já fica igual. */ .category-card-photo { position: relative; padding: 0; overflow: hidden; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; } .category-card-photo img, .category-card-photo .category-card-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .category-card-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--color-bg-alt), var(--color-surface)); color: var(--color-primary); } .category-card-placeholder svg { width: 38%; height: 38%; opacity: 0.85; } .category-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.88) 100%); z-index: 1; } .category-card-photo h3 { position: relative; z-index: 2; width: 100%; padding: 14px 16px 6px; color: #fff; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 1px 6px rgba(0,0,0,0.4); text-align: center; } /* Botão "Veja mais" — só aparece ao passar o rato pela categoria */ .category-card-cta { position: relative; z-index: 2; align-self: center; margin-bottom: 16px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: rgba(120,120,120,0.35); color: #d8d8d8; font-size: 0.75rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: var(--transition); } .category-card-photo:hover .category-card-cta, .category-card-photo:focus-visible .category-card-cta { opacity: 1; transform: translateY(0); } /* ========================================================================== PRODUTOS ========================================================================== */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); position: relative; } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .product-badge { position: absolute; top: 12px; left: 12px; background: var(--color-accent); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; z-index: 2; text-transform: uppercase; } .product-badge-promo { background: var(--color-dark); color: #fff; } .product-image { aspect-ratio: 1 / 1; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); text-decoration: none; overflow: hidden; } /* Quando um produto tem foto real (campo "imagem" em data/produtos.json, editável em /admin), estas regras fazem-na preencher o quadrado sem distorcer — sem foto, continua a mostrar o emoji como antes. */ .product-image img, .product-detail-image img, .cart-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-info { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product-category { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.04em; } .product-info h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; /* Nomes de produto longos e sem espaços a meio (importados do Shopify) conseguiam furar a largura do cartão em ecrãs estreitos — o lá dentro é inline e só quebra em espaços por omissão. */ overflow-wrap: break-word; } .product-info h3 a { color: inherit; text-decoration: none; } .product-info h3 a:hover { text-decoration: underline; } .product-rating { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--color-text-muted); } .product-rating .stars { color: var(--color-star); letter-spacing: 1px; } .product-price { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } /* Cada valor fica sempre inteiro: o "€" nunca se separa do número. */ .price-old, .price-new, .price-from { white-space: nowrap; } .price-old { text-decoration: line-through; color: var(--color-text-muted); font-size: 0.85rem; } .price-new { font-size: 1.25rem; font-weight: 800; color: var(--color-text); } .price-installments { display: block; font-size: 0.75rem; color: var(--color-text-muted); } /* Botão do cartão de produto: fundo branco com texto preto. O contorno é necessário para o botão se distinguir do cartão, que também é branco. Ao passar o rato inverte-se, para dar resposta ao clique. */ .product-card .btn { background: #fff; border-color: var(--color-text); color: var(--color-text); /* Um pouco mais estreito do que o cartão, e centrado, para não ficar colado às bordas — o contorno do próprio botão, tão perto do contorno do cartão, dava a sensação de estarem grudados. */ width: calc(100% - 12px); margin-left: auto; margin-right: auto; } .product-card .btn:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; } .products-footer { text-align: center; margin-top: 40px; } /* Subníveis dentro de uma categoria (ex.: Lustres dentro de Iluminação) */ .subcategory-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .subcategory-filter[hidden] { display: none; } .subcategory-chip { padding: 9px 18px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); transition: var(--transition); } .subcategory-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .subcategory-chip.is-active { background: var(--color-text); border-color: var(--color-text); color: #fff; } /* "Desde" nos produtos cujo preço varia com a opção escolhida */ .price-from { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); } .price-range-note { font-size: 0.82rem; color: var(--color-text-muted); margin-top: -4px; } /* ========================================================================== SELETOR DE VARIANTES (página de produto) ========================================================================== */ .variant-picker { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 4px; } .variant-group { display: flex; flex-direction: column; gap: 6px; } .variant-group label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); } .variant-group select { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 0.92rem; cursor: pointer; } .variant-group select:focus { border-color: var(--color-primary); } /* outline:none aqui sozinho tirava o indicador de foco a quem navega por teclado (sem substituto visível) — mantém-se só a mudança de cor do contorno no clique, e o anel dourado (regra global :focus-visible) continua a aparecer para quem usa Tab. */ .variant-group select:focus:not(:focus-visible) { outline: none; } /* Opção com um único valor possível (ex.: só existe um tamanho) — mostra-se como informação simples, com o mesmo aspeto do normal). */ .variant-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .variant-swatch { width: 52px; height: 52px; flex-shrink: 0; padding: 0; border: 2px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-alt); cursor: pointer; transition: var(--transition); } .variant-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; } .variant-swatch:hover { border-color: var(--color-text-muted); } .variant-swatch.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } /* Opções escolhidas, no carrinho e no checkout */ .cart-item-variant { font-size: 0.78rem; color: var(--color-text-muted); } /* ========================================================================== BLOCOS DE PRODUTOS POR CATEGORIA (home) — cada bloco é preenchido por js/main.js (renderHomeCategoryBlocks) a partir de data/produtos.json. Categorias sem produtos ficam escondidas via [hidden]. ========================================================================== */ .category-block[hidden] { display: none; } .block-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .block-header h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; } .block-header p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 4px; } .block-link { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .block-link:hover { color: var(--color-primary-dark); } .block-footer { text-align: center; margin-top: 32px; } /* Em desktop o "Ver tudo" do cabeçalho do bloco chega; no telemóvel, onde esse link fica apertado, mostra-se antes o botão do fim. */ .block-footer { display: none; } /* ========================================================================== PÁGINA DE PRODUTO (produto.html?id=N) ========================================================================== */ .product-detail-section { padding: calc(var(--header-offset) + 32px) 0 24px; } .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding-bottom: 24px; } .product-detail-image { position: relative; min-width: 0; aspect-ratio: 1 / 1; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 8rem; color: var(--color-text-muted); overflow: hidden; } /* Galeria de fotos da página do produto (foto principal + miniaturas), usada quando o produto tem mais do que uma foto em "imagens". */ .product-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Faixa com 3 fotos lado a lado (anterior/atual/seguinte) — ver comentário em productGalleryHTML/js/main.js. Fica escondida atrás de overflow:hidden em .product-detail-image, e o JS translada só o suficiente para mostrar sempre a foto "atual" em repouso. */ .product-gallery-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--color-bg-alt); } .product-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .product-gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; padding: 0; border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); cursor: pointer; transition: border-color 0.15s ease; } .product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-gallery-thumb.active, .product-gallery-thumb:hover { border-color: var(--color-primary); } .product-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(138,100,43,0.35); color: #fff; backdrop-filter: blur(4px); cursor: pointer; transition: var(--transition); z-index: 2; } .product-gallery-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .product-gallery-arrow-prev { left: 12px; } .product-gallery-arrow-next { right: 12px; } .product-gallery-arrow.is-disabled { opacity: 0.35; cursor: default; pointer-events: none; } .product-detail-info { display: flex; flex-direction: column; gap: 12px; } .product-detail-info h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.25; overflow-wrap: break-word; } .product-badge-static { align-self: flex-start; background: var(--color-accent); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; } .product-price-lg .price-new { font-size: 2rem; } .product-detail-description { color: var(--color-text-muted); line-height: 1.6; } .product-detail-description p { margin-bottom: 14px; } .product-detail-description p:last-child { margin-bottom: 0; } .product-detail-description ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; } .product-detail-description ul:last-child { margin-bottom: 0; } .product-detail-description li { margin-bottom: 6px; } .product-detail-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .product-detail-actions .btn { flex: 1; min-width: 200px; } .qty-selector { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .qty-selector input { width: 48px; height: 40px; text-align: center; border: none; background: transparent; color: var(--color-text); font-weight: 700; -moz-appearance: textfield; } .qty-selector input::-webkit-outer-spin-button, .qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { width: 40px; height: 40px; background: var(--color-bg-alt); border: none; color: var(--color-text); font-size: 1.1rem; cursor: pointer; transition: var(--transition); } .qty-btn:hover { background: var(--color-border); } .product-detail-trust { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; } .product-detail-trust li { list-style: none; padding-left: 22px; position: relative; font-size: 0.85rem; color: var(--color-text-muted); } .product-detail-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; } .product-not-found { text-align: center; padding: 60px 20px 80px; } .product-not-found h1 { margin-bottom: 12px; } .product-not-found p { color: var(--color-text-muted); margin-bottom: 24px; } /* ---- Página 404 (404.html) ---------------------------------------------- Sem .page-hero por cima (como checkout.html) — esta classe substitui o espaçamento que ela daria, para o conteúdo não ficar atrás do cabeçalho fixo. Mesmo registo visual do estado vazio do carrinho (título maiúsculo espaçado, texto contido, botões retangulares). */ .not-found-main { padding-top: calc(var(--header-offset) + 40px); } .not-found { text-align: center; max-width: 480px; margin: 0 auto; padding: 40px 20px 100px; } .not-found-code { font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 800; color: var(--color-primary); line-height: 1; letter-spacing: -0.02em; margin-bottom: 4px; } .not-found h1 { color: var(--color-text); font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4; margin-bottom: 16px; } .not-found p { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.65; margin-bottom: 32px; } .not-found-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .not-found-actions .btn { border-radius: 0; padding: 15px 32px; font-size: 0.76rem; } @media (max-width: 768px) { .product-detail { grid-template-columns: 1fr; gap: 24px; } .product-detail-image { font-size: 5rem; } .product-gallery-thumb { width: 56px; height: 56px; } } /* ========================================================================== POR QUE COMPRAR / SELOS DE CONFIANÇA ========================================================================== */ /* Secção simples: título em maiúsculas espaçadas (como nos banners) e quatro colunas com ícone de traço, sem caixas nem fundos. */ .trust-section { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .trust-section .section-header { margin-bottom: 48px; } .trust-section .section-header h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; } .trust-card { text-align: center; padding: 0; } .trust-icon { margin: 0 auto 16px; color: var(--color-primary); display: flex; align-items: center; justify-content: center; } .trust-card h3 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; } .trust-card p { color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.6; max-width: 24ch; margin: 0 auto; } /* ========================================================================== DEPOIMENTOS ========================================================================== */ .testimonials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .testimonial-stars { color: var(--color-star); letter-spacing: 2px; } .testimonial-text { color: var(--color-text); font-size: 0.92rem; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .avatar-placeholder { width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .testimonial-author strong { display: block; font-size: 0.9rem; } .testimonial-author span { font-size: 0.78rem; color: var(--color-text-muted); } /* ========================================================================== FAQ / ACORDEÃO ========================================================================== */ .accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .accordion-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 20px 22px; text-align: left; font-weight: 700; font-size: 0.98rem; } .accordion-trigger .icon-plus { flex-shrink: 0; width: 24px; height: 24px; position: relative; } .accordion-trigger .icon-plus::before, .accordion-trigger .icon-plus::after { content: ''; position: absolute; background: var(--color-primary); transition: var(--transition); } .accordion-trigger .icon-plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .accordion-trigger .icon-plus::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .accordion-item.active .icon-plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-panel-inner { padding: 0 22px 20px; color: var(--color-text-muted); font-size: 0.92rem; } .faq-cta { text-align: center; margin-top: 32px; } /* ========================================================================== NEWSLETTER — 1ª coluna do rodapé, antes de "Informações" (mesma composição e microinterações da versão em destaque que existiu como secção à parte: logótipo, antetítulo, texto, campo com sublinhado e botão que fica dourado no hover — só recolorida para o fundo claro do rodapé). Mesma lógica de sempre (initNewsletterForm, em js/main.js): [data-newsletter-form] continua a ser o único formulário da página. ========================================================================== */ .footer-col-newsletter { max-width: 260px; } .footer-newsletter-logo { display: block; height: 26px; width: auto; margin-bottom: 18px; } .footer-newsletter-kicker { color: var(--color-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; } .footer-newsletter { display: flex; flex-direction: column; gap: 4px; } .footer-newsletter-field { display: flex; align-items: stretch; gap: 10px; } .footer-newsletter-field input { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-family: inherit; font-size: 0.86rem; padding: 11px 2px; transition: border-color 0.25s ease; } .footer-newsletter-field input::placeholder { color: var(--color-text-muted); } .footer-newsletter-field input:focus { border-color: var(--color-primary); } .footer-newsletter-field input:focus:not(:focus-visible) { outline: none; } .footer-newsletter-field button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--color-dark); color: #fff; border: 1px solid var(--color-dark); padding: 0 16px; font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: var(--transition); } .footer-newsletter-field button:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .footer-newsletter .newsletter-msg { margin-top: 8px; } .newsletter-msg { margin-top: 12px; font-size: 0.85rem; font-weight: 700; min-height: 1.2em; } .newsletter-msg.success { color: var(--color-primary); } .newsletter-msg.error { color: var(--color-danger); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 64px 0 0; } .footer-grid { display: grid; /* 4 colunas, cada uma do tamanho do seu próprio conteúdo ("auto", em vez de frações do espaço todo, que deixavam vãos irregulares entre colunas curtas) e distribuídas de ponta a ponta da linha — a Newsletter fica limitada a 260px (.footer-col-newsletter) para não tomar a linha toda, as 3 colunas de links seguem-se, alinhadas entre si e com a última encostada à direita. */ grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 40px 28px; padding-bottom: 48px; } .footer-about { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 14px; } .footer-contact { display: flex; flex-direction: column; gap: 12px; } .footer-contact li { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.5; } /* Selo do Livro de Reclamações Eletrónico, obrigatório por lei — fica por baixo da coluna "Legal" do rodapé, a apontar para livroreclamacoes.pt. */ .footer-badge { display: inline-block; margin-top: 18px; } .footer-badge img { display: block; width: 90px; height: auto; } /* Linha com redes sociais + meios de pagamento, entre as colunas e o rodapé */ .footer-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px 0; border-top: 1px solid var(--color-border); } .social-links { display: flex; gap: 10px; } .social-links a { width: 38px; height: 38px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .footer-col h4 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 20px; color: var(--color-text); } .footer-col ul { display: flex; flex-direction: column; gap: 11px; } .footer-col a { color: var(--color-text-muted); font-size: 0.86rem; transition: var(--transition); } .footer-col a:hover { color: var(--color-primary); } .payment-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .payment-icons span { display: inline-flex; align-items: center; justify-content: center; height: 32px; } .payment-icons img { height: 100%; width: auto; max-width: 52px; object-fit: contain; } .footer-bottom { border-top: 1px solid var(--color-border); padding: 22px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 0.8rem; color: var(--color-text-muted); text-align: center; } .footer-legal-line { max-width: 900px; } .footer-legal-line a { text-decoration: underline; text-underline-offset: 2px; } .footer-legal-line a:hover { color: var(--color-primary); } .footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; } .footer-bottom-links a:hover { color: var(--color-primary); } /* ========================================================================== COOKIE BANNER (RGPD) ========================================================================== */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 620px; margin: 0 auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-lg); z-index: 600; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cookie-banner[hidden] { display: none; } .cookie-banner p { font-size: 0.85rem; color: var(--color-text-muted); flex: 1; min-width: 220px; } .cookie-banner p a { color: var(--color-primary); text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; } /* ========================================================================== PÁGINAS INTERNAS (políticas, contato, faq) ========================================================================== */ .page-hero { padding: calc(var(--header-offset) + 48px) 0 40px; background: var(--color-bg-alt); text-align: center; } .page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; } .page-hero p { color: var(--color-text-muted); margin-top: 10px; } /* Hero das páginas de categoria (categorias/*.html) — mesma foto do card da categoria como fundo, com o nome centralizado por cima. */ .category-page-hero { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--header-offset) + 40px) 20px 40px; background-size: cover; background-position: center; } .category-page-hero .breadcrumbs { color: var(--color-text-muted); } .category-page-hero .breadcrumbs a:hover { color: var(--color-primary); } .category-page-hero h1 { color: var(--color-text); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4; } .category-page-hero p { color: var(--color-text-muted); margin-top: 12px; } .products-empty { text-align: center; color: var(--color-text-muted); padding: 40px 20px 8px; } .products-empty strong { display: block; color: var(--color-text); font-size: 1.1rem; margin-bottom: 8px; } .legal-notice { background: rgba(138,100,43,0.1); border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.88rem; font-weight: 600; max-width: var(--container-width); margin: 24px auto 0; } .legal-content { max-width: 780px; margin: 0 auto; padding: 48px 0 80px; } .legal-content h2 { font-size: 1.25rem; font-weight: 800; margin: 36px 0 12px; } .legal-content h2:first-child { margin-top: 0; } .legal-content p { margin-bottom: 14px; color: var(--color-text); } .legal-content ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; } .legal-content li { margin-bottom: 8px; } .legal-content strong { font-weight: 700; } .legal-content .updated-date { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 28px; } /* ---- Sobre Nós ---- */ .about-content { padding-bottom: 0; } .about-closing { max-width: 640px; margin: 0 auto; padding: 48px 0 80px; border-top: 1px solid var(--color-border); text-align: center; } .about-closing-label { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-primary); margin-bottom: 10px; } .about-closing-tagline { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; margin-bottom: 18px; } .about-closing-text { color: var(--color-text-muted); margin-bottom: 28px; } .breadcrumbs { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 8px; } .breadcrumbs a:hover { color: var(--color-primary); } /* ---- Contato ---- */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 0 80px; align-items: start; } .contact-form { display: flex; flex-direction: column; gap: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-weight: 700; font-size: 0.88rem; } .form-group input, .form-group textarea { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .form-group input:focus, .form-group textarea:focus { border-color: var(--color-primary); } .form-group textarea { resize: vertical; min-height: 130px; } .field-error { color: var(--color-danger); font-size: 0.8rem; min-height: 1.1em; } .form-group.invalid input, .form-group.invalid textarea { border-color: var(--color-danger); } .form-success { background: var(--color-accent-light); border: 1px solid rgba(138,100,43,0.35); color: var(--color-text); border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 700; font-size: 0.9rem; display: none; align-items: center; gap: 10px; } .form-success.show { display: flex; } .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-info-card { display: flex; gap: 16px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; } .contact-info-card .icon-box { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-card h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 4px; } .contact-info-card p { color: var(--color-text-muted); font-size: 0.9rem; } /* ---- Criar conta (criar-conta.html) ---- */ .account-layout { max-width: 560px; margin: 0 auto; padding: 56px 0 80px; } .account-form { display: flex; flex-direction: column; gap: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px; } /* [hidden] tem a mesma especificidade de uma classe — sem isto, o display:flex acima venceria o display:none nativo do atributo hidden nestes elementos. */ .account-form[hidden], .account-profile[hidden], .auth-tabs[hidden] { display: none; } .optional-tag { font-weight: 400; color: var(--color-text-muted); font-size: 0.78rem; } .checkbox-label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; font-weight: 400; color: var(--color-text-muted); cursor: pointer; } .checkbox-label input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--color-primary); flex-shrink: 0; } .checkbox-label a { color: var(--color-primary); } .auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); } .auth-tab { flex: 1; padding: 12px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: var(--transition); } .auth-tab:hover { color: var(--color-text); } .auth-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .password-field { position: relative; } .password-field input { padding-right: 44px; width: 100%; } .password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--color-text-muted); cursor: pointer; transition: var(--transition); } .password-toggle:hover { background: rgba(0,0,0,0.06); color: var(--color-text); } .password-toggle.is-visible { color: var(--color-primary); } .form-error-banner { background: rgba(229,72,77,0.1); border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.88rem; font-weight: 600; } .account-profile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px; display: flex; flex-direction: column; gap: 24px; } .account-profile-header { display: flex; align-items: center; gap: 16px; } .account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; flex-shrink: 0; } .account-profile-header h2 { font-size: 1.2rem; font-weight: 800; } .account-profile-header p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 2px; } .account-profile-details { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--color-border); padding-top: 20px; } .account-profile-details dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 700; } .account-profile-details dd { font-size: 0.95rem; margin-top: 2px; } .account-profile-actions { display: flex; gap: 12px; flex-wrap: wrap; } .account-profile-actions .btn { flex: 1; min-width: 160px; } .account-profile-actions .btn-danger:hover { border-color: var(--color-danger); color: var(--color-danger); } /* ---- FAQ completo ---- */ /* padding-top/bottom só (não o atalho "48px 0 80px"): essa forma zera o padding horizontal de .container, colando a pesquisa e os acordeões às margens do ecrã no telemóvel — no desktop passava despercebido porque .container já fica centrado com margens automáticas. */ .faq-page-content { padding-top: 48px; padding-bottom: 80px; } .faq-search { max-width: 520px; margin: 0 auto 40px; position: relative; } .faq-search input { width: 100%; padding: 14px 18px 14px 44px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-alt); } .faq-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .faq-empty { text-align: center; color: var(--color-text-muted); padding: 24px; display: none; } /* ---- Carrinho de compras (carrinho.html) ---- */ .cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 48px 0 80px; align-items: start; } /* Sem artigos não há resumo ao lado: uma só coluna, para o estado vazio ficar centrado na página em vez de encostado à esquerda. */ .cart-layout.is-empty { grid-template-columns: 1fr; } /* [hidden] tem a mesma especificidade de uma classe — sem isto, o display:flex de .cart-items venceria o display:none nativo. */ .cart-items[hidden] { display: none; } .cart-items { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 24px; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto auto auto; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--color-border); } .cart-item:last-child { border-bottom: none; } .cart-item-image { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; overflow: hidden; } .cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cart-item-info h3 { font-size: 0.95rem; font-weight: 700; overflow-wrap: break-word; } .cart-item-unit-price { font-size: 0.8rem; color: var(--color-text-muted); } .cart-item-qty input { width: 56px; padding: 8px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); } .cart-item-total { font-weight: 700; white-space: nowrap; } .cart-item-remove { background: none; border: none; padding: 8px; border-radius: 50%; color: var(--color-text-muted); transition: var(--transition); } .cart-item-remove:hover { color: var(--color-danger); background: rgba(229,72,77,0.1); } /* Estado vazio, no mesmo registo minimalista do resto da loja: ícone de traço, título em maiúsculas espaçadas e botão retangular. */ .cart-empty { text-align: center; max-width: 460px; margin: 0 auto; padding: 72px 24px; color: var(--color-text-muted); } .cart-empty .cart-empty-icon { display: flex; justify-content: center; color: var(--color-primary); margin-bottom: 22px; } .cart-empty h2 { color: var(--color-text); font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4; margin-bottom: 12px; } .cart-empty p { margin-bottom: 28px; font-size: 0.9rem; } .cart-empty .btn { border-radius: 0; padding: 15px 32px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; } .cart-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; position: sticky; top: calc(var(--header-offset) + 20px); min-width: 0; } .cart-summary h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; } .cart-summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-text-muted); } /* Sem isto, o "display:flex" acima (mesma especificidade do "display:none" nativo do atributo hidden, e por vir do CSS do site, mais forte na cascata) ganhava sempre — a linha "Desconto" (escondida via JS quando não há cupão ativo) continuava visível, com o valor da última vez que esteve visível. Mesmo padrão já usado em .account-form[hidden] etc. */ .cart-summary-row[hidden] { display: none; } .cart-summary-row.total { border-bottom: none; border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 16px; font-size: 1.15rem; font-weight: 800; color: var(--color-text); } .cart-summary .btn { margin-top: 20px; } .cart-summary-note { margin-top: 12px; font-size: 0.78rem; color: var(--color-text-muted); text-align: center; } .cart-summary-note-secure { display: flex; align-items: center; justify-content: center; gap: 6px; } .cart-summary-note-secure svg { flex-shrink: 0; } /* ========================================================================== Mini-carrinho lateral (cart drawer) -------------------------------------------------------------------------- Injetado em todas as páginas por initCartDrawer() (js/main.js) — não existe no HTML das páginas. Abre ao adicionar um produto ou ao clicar no ícone do carrinho no cabeçalho. ========================================================================== */ body.cart-drawer-open { overflow: hidden; } .cart-drawer-overlay { position: fixed; inset: 0; background: rgba(34, 29, 21, 0.45); opacity: 0; transition: opacity 0.3s ease; z-index: 1100; } .cart-drawer-overlay.open { opacity: 1; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--color-surface); box-shadow: var(--shadow-lg); z-index: 1101; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; } /* Visibility fica "hidden" até ao fim da transição ao fechar (para não ficar focável por Tab enquanto está fora do ecrã), mas passa a "visible" já no próprio instante de abrir. */ .cart-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .cart-drawer-header h2 { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } .cart-drawer-count { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--color-text-muted); } .cart-drawer-close { display: flex; padding: 8px; margin: -8px; background: none; border: none; border-radius: 50%; color: var(--color-text); cursor: pointer; transition: var(--transition); flex-shrink: 0; } .cart-drawer-close:hover { background: var(--color-bg-alt); } .cart-drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px; } .cart-drawer-items[hidden] { display: none; } .cart-drawer-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--color-border); } .cart-drawer-item:last-child { border-bottom: none; } .cart-drawer-item-image { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; overflow: hidden; } .cart-drawer-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-drawer-item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .cart-drawer-item-info h3 { font-size: 0.86rem; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; } .cart-drawer-item-price { font-size: 0.78rem; color: var(--color-text-muted); } .cart-drawer-item-qty.qty-selector { margin-top: 6px; } .cart-drawer-item-qty .qty-btn { width: 28px; height: 28px; font-size: 0.9rem; } .cart-drawer-item-qty-value { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; font-weight: 700; font-size: 0.82rem; } .cart-drawer-item-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; } .cart-drawer-item-side .cart-item-remove { padding: 6px; } .cart-drawer-item-total { font-weight: 700; font-size: 0.86rem; white-space: nowrap; } .cart-drawer-empty { text-align: center; padding: 64px 20px; color: var(--color-text-muted); } .cart-drawer-empty .cart-empty-icon { display: flex; justify-content: center; color: var(--color-primary); margin-bottom: 20px; } .cart-drawer-empty h3 { color: var(--color-text); font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; } .cart-drawer-empty p { margin-bottom: 24px; font-size: 0.88rem; } .cart-drawer-footer { flex-shrink: 0; padding: 20px 24px 24px; border-top: 1px solid var(--color-border); background: var(--color-surface); } .cart-drawer-subtotal-row { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 800; } .cart-drawer-note { margin: 6px 0 16px; font-size: 0.78rem; color: var(--color-text-muted); text-align: center; } .cart-drawer-actions { display: flex; flex-direction: column; gap: 10px; } .cart-drawer-actions .btn { width: 100%; } @media (max-width: 480px) { .cart-drawer { width: 100vw; } /* Alvos de toque maiores no telemóvel (mínimo confortável ~36-40px). */ .cart-drawer-item-qty .qty-btn { width: 36px; height: 36px; font-size: 1rem; } .cart-drawer-item-qty-value { min-width: 34px; height: 36px; } .cart-drawer-item-side .cart-item-remove { padding: 10px; } .cart-drawer-close { padding: 10px; margin: -10px; } } @media (prefers-reduced-motion: reduce) { .cart-drawer, .cart-drawer-overlay { transition: none; } } /* ---- Checkout (checkout.html) ---- */ /* checkout.html não tem .page-hero (título/legenda) por cima do formulário — este espaçamento substitui o que a .page-hero dava, para o conteúdo não ficar escondido atrás do cabeçalho fixo. */ .checkout-main { padding-top: calc(var(--header-offset) + 40px); } /* ---- Checkout: layout de duas colunas ---------------------------------- Coluna esquerda (formulário) em branco, coluna direita (resumo) num tom ligeiramente diferente (--color-bg-alt, já usado no resto do site) para criar separação visual, como na referência. Classes novas e exclusivas do checkout — .cart-layout/.cart-summary continuam só em carrinho.html, sem qualquer alteração. */ /* Duas camadas à volta do resumo + botão de finalizar (grid-area "summary"): .checkout-summary-column esfica até à altura da coluna do formulário (align-items:stretch, como sempre foi) só para a divisória à esquerda ir até ao fundo da página; .checkout-summary-sticky, por dentro, é que fica sticky — precisa de ficar com a sua altura NATURAL (não esticada) para ter margem para "flutuar" dentro da coluna esticada, senão não haveria diferença entre as duas alturas e o scroll não tinha onde colar nada. No telemóvel (ver query 860px) ambas passam a display:contents: os dois invólucros "desaparecem" e .checkout-order-summary/.checkout-summary-actions tornam-se items diretos de .checkout-layout, cada um com a sua própria grid-area — é assim que o resumo sobe para o topo e o botão desce para o fim, sem duplicar nada, sempre os mesmos elementos. */ .checkout-layout { display: grid; grid-template-columns: 1.2fr 0.9fr; grid-template-areas: "form summary"; /* align-items: stretch (default) — a coluna do resumo precisa de esticar até à altura da coluna do formulário (normalmente mais alta) para a divisória preencher a linha toda. */ } /* min-width:0 nas colunas: por omissão, uma célula de grid não encolhe para lá do maior conteúdo indivisível lá dentro (min-width: auto) — sem isto, a coluna do resumo era empurrada mais larga do que a fração (0.9fr) lhe reservava, empurrando a página toda para o lado com scroll horizontal, em larguras intermédias entre o desktop cheio e o colapso para uma coluna no telemóvel. */ .checkout-col-form { grid-area: form; padding: 56px 56px 80px 0; min-width: 0; } /* Fundo e divisória à esquerda vivem aqui (na coluna esticada) para preencherem a linha toda até ao fundo da página — não nos dois elementos de dentro, que só teriam a sua altura natural (bem mais curta do que o formulário ao lado). */ .checkout-summary-column { grid-area: summary; background: var(--color-surface); border-left: 1px solid var(--color-border); min-width: 0; } .checkout-summary-sticky { position: sticky; top: calc(var(--header-offset) + 32px); min-width: 0; } /* Resumo e ações ficam colados um ao outro (sem padding a separar as duas pontas que se tocam) para continuar a ler-se como um único bloco no desktop, tal como antes de serem separados em dois elementos. */ .checkout-order-summary, .checkout-summary-actions { min-width: 0; } .checkout-order-summary { padding: 56px 0 0 56px; } .checkout-summary-actions { padding: 0 0 80px 56px; } /* ---- Secções do formulário (Contacto / Entrega / Envio / Pagamento) ---- */ .checkout-section { padding: 36px 0; border-bottom: 1px solid var(--color-border); } .checkout-section:first-child { padding-top: 0; } .checkout-section:last-child { border-bottom: none; } .checkout-section > h2 { font-weight: 800; font-size: 1.15rem; color: var(--color-text); margin-bottom: 22px; } .checkout-section-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; } .checkout-section-header > h2 { margin-bottom: 0; } .checkout-guest-note { font-size: 0.82rem; color: var(--color-text-muted); } .checkout-guest-note a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; } .checkout-section-note { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 16px; margin-top: -6px; } .required-mark { color: var(--color-primary); } .label-hint { font-weight: 400; color: var(--color-text-muted); text-transform: none; letter-spacing: normal; } /* Labels discretos, em tom mais claro — só dentro do checkout, para não mexer no formulário de contacto/conta (que continuam com labels a negrito, no seu próprio registo). */ .checkout-col-form .form-group label { font-weight: 500; font-size: 0.78rem; color: var(--color-text-muted); } .checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .checkout-form-grid .form-group.full { grid-column: 1 / -1; } .checkout-section:not(.checkout-section-terms) > .form-group + .form-group { margin-top: 18px; } /* ---- Caixa de métodos de envio/pagamento (mesmo tratamento visual) ---- */ .shipping-methods, .payment-methods { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .shipping-method-option, .payment-method-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; transition: var(--transition); } .shipping-method-option:not(:last-child) { border-bottom: 1px solid var(--color-border); } .shipping-method-option:hover, .payment-method-option:hover { background: var(--color-bg-alt); } .shipping-method-option:has(input:checked), .payment-method-option:has(input:checked) { background: var(--color-primary-light); } .shipping-method-option input[type="radio"], .payment-method-option input[type="radio"] { accent-color: var(--color-dark); width: 17px; height: 17px; flex-shrink: 0; } .shipping-method-body, .payment-method-option-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .shipping-method-body strong, .payment-method-option-body strong { font-size: 0.92rem; } .shipping-method-body .method-desc, .payment-method-option-body span { font-size: 0.78rem; color: var(--color-text-muted); } .shipping-method-price { font-weight: 800; white-space: nowrap; } .payment-method-option.is-disabled { opacity: 0.5; cursor: not-allowed; } /* Logótipo(s) do método (Visa/Mastercard, MB WAY, Multibanco — ficheiros já usados no rodapé) encostados à direita; .payment-method-option-body com flex:1 empurra-os sozinho, sem precisar de margin-left:auto. */ .payment-method-logos { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ---- Pagamento: acordeão (cada método pode abrir uma área por baixo) -- Cada método vive num .payment-method-group (linha + painel), com a divisória a passar para o grupo em vez da linha, já que agora pode haver conteúdo extra a seguir a uma linha sem ser a última do bloco. Mesmo mecanismo de altura de .accordion-panel (FAQ), só disparado pela escolha do rádio em vez de um clique — ver initPaymentAccordion(). */ .payment-method-group:not(:last-child) { border-bottom: 1px solid var(--color-border); } .payment-method-group:has(input:checked) .payment-method-panel { background: var(--color-bg-alt); } .payment-method-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .payment-method-panel-inner { padding: 4px 18px 18px; border-top: 1px solid var(--color-border); margin-top: 2px; } .payment-method-panel-text { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; padding-top: 16px; } /* ---- Campos do cartão (pré-visualização — ver aviso no HTML/JS) ---- Tamanhos reduzidos (campos, logótipos e respiração vertical) para ficar à mesma escala do resto do checkout — antes, os logótipos Visa/Mastercard/MB WAY/Multibanco (22px) e o espaçamento à volta dos campos do cartão destacavam-se como maiores do que tudo o resto da página, apesar de os próprios já terem sempre o mesmo tamanho dos campos de Contacto/Entrega (ver .form-group input). */ .gateway-card-fields { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; } .card-number-field { position: relative; } /* Os outros campos esticam para a largura do .form-group porque este é flex column (align-items:stretch, por omissão) — mas aqui o pai imediato é .card-number-field (position:relative, não flex), por isso o não herda esse esticar sozinho e precisa de width:100% explícito, senão fica com a largura intrínseca do browser (mais larga do que a coluna, empurrada por baixo do acordeão). */ .card-number-field input { width: 100%; padding-right: 60px; } .card-number-icons { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; pointer-events: none; } .card-number-icons img { height: 13px; width: auto; } /* min-width:0 nos dois campos: sem isto, um sem largura própria definida recusa-se a encolher a menos do que a sua largura intrínseca (bem mais larga do que metade da linha em ecrãs estreitos), empurrando o campo CVC para fora do painel — mascarado pelo overflow:hidden do acordeão, por isso não aparecia como scroll horizontal da página. */ .card-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .card-fields-row > .form-group { min-width: 0; } .card-fields-note { font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.5; border-top: 1px dashed var(--color-border); margin-top: 4px; padding-top: 10px; } .payment-method-logos img { height: 17px; width: auto; display: block; } .checkout-section-terms { padding-top: 8px; border-bottom: none; } /* ---- Resumo da encomenda (coluna direita) ------------------------------ */ .checkout-summary-sticky { max-width: 420px; } .checkout-summary-items { display: flex; flex-direction: column; } .checkout-summary-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); } .checkout-summary-item:first-child { padding-top: 0; } .checkout-summary-item:last-child { border-bottom: none; } .checkout-summary-item-image { position: relative; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } /* O selo de quantidade fica meio para fora do canto da imagem (ver .qty-badge, com offsets negativos) — por isso o recorte de cantos arredondados vai só na própria , sem overflow:hidden no contentor, que cortaria o selo. */ .checkout-summary-item-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); display: block; } .qty-badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 50%; background: var(--color-dark); color: #fff; font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); } .checkout-summary-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .checkout-summary-item-info h3 { font-size: 0.88rem; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; } .checkout-summary-item-price { font-weight: 700; font-size: 0.88rem; white-space: nowrap; } .checkout-coupon { padding: 22px 0; border-top: 1px solid var(--color-border); } .checkout-summary-totals { padding: 6px 0 26px; } .checkout-summary-totals .cart-summary-row:first-child { padding-top: 0; } .checkout-order-summary .cart-summary-row.total { font-size: 1.3rem; padding-top: 20px; } /* ---- Barra compacta "Resumo da encomenda (X)" — só no telemóvel ---- No desktop fica escondida e o resumo mantém-se sempre aberto (ver .checkout-summary-collapsible, sem limite de altura por omissão). */ .checkout-summary-toggle { display: none; width: 100%; align-items: center; gap: 10px; background: none; border: none; padding: 0; font-family: inherit; color: var(--color-text); cursor: pointer; text-align: left; } /* O texto encolhe (com reticências, se for mesmo preciso) antes de deixar o total quebrar para uma segunda linha — o total é o que tem de ficar sempre legível numa peça só, mesmo em ecrãs muito estreitos (320px). */ .checkout-summary-toggle-text { font-weight: 700; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checkout-summary-toggle-text span { color: var(--color-text-muted); font-weight: 500; } .checkout-summary-toggle-total { font-weight: 800; font-size: 0.95rem; margin-left: auto; flex-shrink: 0; white-space: nowrap; } .checkout-summary-toggle-chevron { flex-shrink: 0; transition: transform 0.2s ease; } .checkout-summary-toggle[aria-expanded="true"] .checkout-summary-toggle-chevron { transform: rotate(180deg); } .checkout-summary-collapsible { max-height: none; overflow: visible; } .checkout-submit-btn { padding: 18px 28px; font-size: 0.8rem; } .checkout-submit-hint { min-height: 1.1em; margin-top: 10px; font-size: 0.78rem; color: var(--color-text-muted); text-align: center; } .coupon-row { display: flex; gap: 10px; } .coupon-row input { flex: 1; min-width: 0; } .coupon-row .btn { flex-shrink: 0; } .coupon-feedback { font-size: 0.8rem; margin-top: 6px; min-height: 1.1em; } .coupon-feedback.success { color: var(--color-primary); font-weight: 700; } .coupon-feedback.error { color: var(--color-danger); } .cart-summary-row.discount span:last-child { color: var(--color-primary); } /* Estado de confirmação do checkout — mesmo registo do estado vazio do carrinho (.cart-empty: ícone a traço em dourado, título maiúsculo espaçado, texto contido, botão retangular), em vez do emoji genérico ✅ que tinha antes. */ .checkout-success { max-width: 560px; margin: 48px auto; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 56px 40px; } .checkout-success-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); } .checkout-success h2 { color: var(--color-text); font-size: clamp(1.2rem, 2.2vw, 1.4rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.4; margin-bottom: 18px; } .checkout-success p { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.65; max-width: 440px; margin: 0 auto 10px; } .checkout-success-note { margin-bottom: 0; } .checkout-success-actions { margin-top: 28px; } .checkout-success .btn { border-radius: 0; padding: 15px 36px; font-size: 0.76rem; } @media (max-width: 768px) { .checkout-form-grid { grid-template-columns: 1fr; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } .products-grid { grid-template-columns: repeat(3, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } /* Checkout numa só coluna: o resumo da encomenda passa para o TOPO, compacto e fechado por omissão (basta tocar para abrir) — antes de Contacto/Entrega/Envio/Pagamento. O botão de finalizar mantém-se no fim, depois de todo o formulário, como último passo. Os painéis ocupam a largura toda do ecrã (a margem negativa cancela exatamente o padding do .container, sem criar scroll horizontal). */ .checkout-layout { grid-template-columns: 1fr; grid-template-areas: "summary" "form" "actions"; } .checkout-col-form { grid-area: form; padding: 8px 0; } /* Os dois invólucros "desaparecem" (a sua caixa deixa de existir, mas os filhos continuam no DOM) — .checkout-order-summary e .checkout-summary-actions passam a ser items diretos de .checkout-layout, cada um na sua própria grid-area. */ .checkout-summary-column, .checkout-summary-sticky { display: contents; } .checkout-order-summary { grid-area: summary; max-width: none; background: var(--color-surface); border-left: none; border-bottom: 1px solid var(--color-border); margin: 0 -20px 24px; padding: 0; } .checkout-summary-actions { grid-area: actions; background: var(--color-surface); border-left: none; border-top: 1px solid var(--color-border); margin: 0 -20px; padding: 24px 20px 48px; } .checkout-summary-toggle { display: flex; padding: 16px 20px; } /* Fechado por omissão (ver initCheckoutMobileSummary em main.js, que abre/fecha ao tocar e ajusta esta altura ao conteúdo real). */ .checkout-summary-collapsible { max-height: 0; overflow: hidden; padding: 0 20px; transition: max-height 0.25s ease; } .checkout-order-summary.is-expanded .checkout-summary-collapsible { padding: 4px 20px 24px; } /* Newsletter: a coluna do formulário passa para baixo do texto, tudo centrado — não é só o desktop encolhido, o alinhamento muda de propósito para ler como um bloco único, não duas metades desiguais. */ .newsletter-band { padding: 56px 0; } .newsletter-band-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; } .newsletter-band-logo, .newsletter-band-text { margin-left: auto; margin-right: auto; } .newsletter-band-field { flex-direction: column; gap: 18px; } .newsletter-band-field input { text-align: center; padding: 14px 4px; } .newsletter-band-field button { width: 100%; padding: 16px 0; } } @media (max-width: 560px) { .cart-item { grid-template-columns: 48px 1fr auto; grid-template-areas: "image info remove" "qty qty total"; row-gap: 10px; } .cart-item-image { grid-area: image; width: 48px; height: 48px; font-size: 1.4rem; } .cart-item-info { grid-area: info; } .cart-item-remove { grid-area: remove; } .cart-item-qty { grid-area: qty; } .cart-item-total { grid-area: total; text-align: right; } .cart-items { padding: 8px 16px; } } /* O menu horizontal com 7 categorias precisa de ~990px para caber ao lado da logo e dos ícones. Abaixo disso passa a painel dropdown, aberto pelo botão hambúrguer — senão os itens sobrepunham-se em ecrãs médios. */ @media (max-width: 1023px) { .main-nav { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: var(--header-offset); left: 0; right: 0; max-height: calc(100vh - var(--header-offset)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--color-surface); gap: 0; padding: 8px 20px 20px; border-bottom: 1px solid var(--color-border); transform: translateY(-150%); opacity: 0; transition: var(--transition); box-shadow: var(--shadow-md); margin: 0; flex: none; } .main-nav.open { transform: translateY(0); opacity: 1; } .main-nav > a, .nav-item.has-submenu > a { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } .main-nav > a:last-child { border-bottom: none; } /* No telemóvel o submenu começa fechado — toca-se na categoria para o abrir (ícone "+" que roda para "x"), tal como o acordeão do FAQ. */ .nav-item.has-submenu { position: static; } .nav-item.has-submenu > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .submenu-toggle-icon { display: block; flex-shrink: 0; width: 16px; height: 16px; position: relative; } .submenu-toggle-icon::before, .submenu-toggle-icon::after { content: ''; position: absolute; background: var(--color-text); transition: var(--transition); } .submenu-toggle-icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .submenu-toggle-icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .nav-item.has-submenu.open .submenu-toggle-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .submenu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; border: none; box-shadow: none; background: none; padding: 0 0 0 16px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .submenu li a { padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; white-space: normal; } /* A regra de desktop (:hover/:focus-within) tem mais especificidade do que ".submenu" sozinho — sem isto, tocar no link (que fica com foco) reativava o transform/posição absoluta do dropdown de desktop e empurrava o painel para fora do ecrã no telemóvel. */ .nav-item.has-submenu:hover .submenu, .nav-item.has-submenu:focus-within .submenu { transform: none; } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-toggle { display: block; } .header-left { justify-self: start; } .logo { justify-self: center; } .header-actions { justify-self: end; } } @media (max-width: 768px) { /* Botões com texto mais comprido (ex.: "Ver todos os produtos de Casa de banho", que varia com o nome da categoria) quebravam a largura do ecrã em vez de quebrar linha, por causa do white-space:nowrap usado nos botões curtos ("Comprar", "Ver tudo"…). No telemóvel deixa-se quebrar linha e o botão nunca ultrapassa a largura do contentor. */ .btn { white-space: normal; max-width: 100%; text-align: center; } /* No telemóvel o link "Ver tudo" do topo do bloco sai e fica só o botão do fim */ .block-header .block-link { display: none; } .block-footer { display: block; } .categories-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-col-newsletter { max-width: none; } section { padding: 48px 0; } .footer-bottom { flex-direction: column; text-align: center; } /* No telemóvel o texto assenta em baixo, sobre a zona clara do gradiente, e a tipografia encolhe para caber bem num ecrã estreito. */ .hero { min-height: 560px; align-items: flex-end; padding: calc(var(--header-offset) + 32px) 0 48px; /* Foto vertical dedicada para telemóvel (o desktop usa banner-01-v3.png) */ background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.9) 100%), url('../img/banner-mobile-v2.png') center top / cover no-repeat; } .hero-tagline { font-size: 0.62rem; letter-spacing: 0.16em; margin-bottom: 12px; } .hero h1 { font-size: 1.24rem; letter-spacing: 0.08em; line-height: 1.45; margin-bottom: 24px; } .hero-cta { padding: 13px 26px; font-size: 0.68rem; letter-spacing: 0.14em; } /* Mesma escala no banner de destaque, para os dois continuarem iguais */ .featured-banner-copy .section-tag { font-size: 0.62rem; letter-spacing: 0.16em; } .featured-banner-copy h2 { font-size: 1.24rem; line-height: 1.45; } .featured-banner-cta { padding: 13px 26px; font-size: 0.68rem; letter-spacing: 0.14em; } /* Foto vertical dedicada para telemóvel. Tal como no banner principal, o texto assenta em baixo, sobre a zona clara do gradiente. */ .featured-banner { min-height: 560px; align-items: flex-end; padding: 56px 0 48px; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.9) 100%), url('../img/banner-categoria-destaque-mobile.png') center top / cover no-repeat; } .featured-banner-copy h2 { letter-spacing: 0.1em; } } @media (max-width: 480px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } /* Cartão mais compacto para o preço caber todo numa linha em ecrãs estreitos (com dois cartões por linha sobra pouca largura). */ .product-info { padding: 14px; gap: 6px; } .product-price { gap: 3px 6px; } .price-new { font-size: 1.02rem; } .price-old { font-size: 0.76rem; } .price-from { font-size: 0.62rem; letter-spacing: 0.06em; } }