/* ============================================================ FAMOORS — Design system (redesign) Base tokens, chrome (header / nav / footer) e componentes da home. Páginas ainda não migradas herdam de legacy.css (carregado antes). ============================================================ */ :root { --teal:#4D6D78; --teal-dark:#3C565F; --navy:#7B9CA6; --mint:#BED4D0; --sand:#EFE3D5; --pearl:#F8F6F0; --gold:#D4AF77; --gold-dark:#C29A5C; --ink:#2E3F45; --line:#E3DACF; --card-shadow:0 6px 24px rgba(77,109,120,.08); --radius:18px; --primary:var(--gold); /* compat c/ regras legadas */ --lightblack:var(--teal); } *,*::before,*::after { box-sizing:border-box; } body { margin:0; background:var(--pearl); font-family:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; color:var(--teal); font-size:14px; line-height:1.6; } .logo,h1,h2,h3,.f-serif { font-family:'Cormorant Garamond',Georgia,serif; } a { color:var(--teal); text-decoration:none; transition:color .15s ease; } a:hover { color:var(--gold); } img { max-width:100%; height:auto; } /* rodapé colado ao fundo */ #container { display:flex; flex-direction:column; min-height:100vh; } #container > main { flex:1 0 auto; } /* alertas AJAX (canto sup. dir.) */ #alert { position:fixed; top:0; right:0; padding:1rem; z-index:1080; max-width:360px; } /* ---------- botões ---------- */ .btn, .btn-primary, .btn-famoors { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--teal); color:var(--pearl); border:1px solid var(--teal); padding:12px 26px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.03em; cursor:pointer; line-height:1.2; transition:filter .15s ease, background .15s ease, color .15s ease; } .btn:hover,.btn-primary:hover { background:var(--teal-dark); border-color:var(--teal-dark); color:var(--pearl); filter:none; } .btn.gold,.btn-gold { background:var(--gold); border-color:var(--gold); color:var(--teal); } .btn.gold:hover,.btn-gold:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:var(--teal); } .btn.outline,.btn-outline { background:transparent; color:var(--teal); border-color:var(--mint); } .btn.outline:hover,.btn-outline:hover { background:var(--sand); color:var(--teal); } .btn-sm { padding:8px 18px; font-size:12px; } /* ============================================================ TOPBAR ============================================================ */ #top { background:var(--teal); color:var(--pearl); font-size:11.5px; letter-spacing:.08em; } #top .container { max-width:1440px; } #top .row { align-items:center; min-height:38px; } #top .welcom-text p { margin:0; display:flex; align-items:center; gap:8px; text-transform:uppercase; opacity:.92; } #top .welcom-text svg { width:16px; height:16px; fill:var(--gold); } #top .header-social { margin:0; text-align:right; } #top .header-social .list-inline-item { margin-left:14px; } #top .header-social a { color:var(--pearl); opacity:.85; font-size:13px; } #top .header-social a:hover { color:var(--gold); opacity:1; } /* ============================================================ HEADER (telefone | marca | ações) ============================================================ */ header { background:var(--pearl); } header .container { max-width:1440px; } header .row { min-height:96px; } /* header fixo no mobile/tablet (topbar + logo + menu num só bloco pegajoso) */ @media (max-width:991px) { #site-header { position:sticky; top:0; z-index:1030; background:var(--pearl); box-shadow:0 4px 18px rgba(77,109,120,.12); } #site-header .menu-bg { background:var(--pearl); } } .header-lang-currency { margin:0; display:flex; align-items:center; gap:18px; } .header-lang-currency .list-inline-item { margin:0; font-size:13px; font-weight:600; color:var(--teal); } .header-lang-currency a { color:var(--teal); display:inline-flex; align-items:center; gap:6px; } .header-lang-currency a:hover { color:var(--gold); } .header-lang-currency i { color:var(--gold); } .header-lang-currency .btn-link, .header-lang-currency .dropdown-toggle { color:var(--teal); font-weight:600; text-decoration:none; padding:4px 6px; } .header-lang-currency .dropdown-menu { border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--card-shadow); } #logo { text-align:center; margin:0; } #logo img { height:80px; max-height:80px; max-width:100%; width:auto; object-fit:contain; display:inline-block; } #logo h1 { margin:0; font-size:30px; color:var(--teal); letter-spacing:.03em; } #logo h1 a { color:var(--teal); } /* alinhamento vertical: o da conta ficava colado ao topo da linha */ .head-user, .head-user .dropdown { display:flex; align-items:center; } .header-actions-col .head-icon, .header-actions-col .dropdown-toggle, .head-user .dropdown-toggle { color:var(--teal); background:transparent; border:0; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; line-height:1; } .header-actions-col svg { width:20px; height:20px; } .header-actions-col .head-icon svg use, .head-user .dropdown-toggle svg use { stroke:var(--teal); } .header-actions-col .head-icon:hover, .head-user .dropdown-toggle:hover { color:var(--gold); } .account-dropdown { border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:var(--card-shadow); min-width:210px; } .account-dropdown .dropdown-item { border-radius:9px; padding:9px 12px; font-size:13px; color:var(--teal); display:flex; align-items:center; gap:9px; } .account-dropdown .dropdown-item i { color:var(--gold); width:16px; text-align:center; } .account-dropdown .dropdown-item:hover { background:var(--sand); color:var(--teal); } /* mini-cart (dropdown botão) */ #cart .dropdown > button, #cart .btn-dark { background:var(--teal) !important; border:0 !important; color:var(--pearl) !important; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px; } #cart .dropdown > button svg { width:16px; height:16px; fill:var(--pearl); } #cart .dropdown-menu.mini-cart { border:1px solid var(--line); border-radius:16px; padding:16px; min-width:340px; box-shadow:0 18px 44px rgba(77,109,120,.18); } #cart .dropdown-menu.mini-cart li.cart-box { max-width:none; width:100%; } .mini-cart__item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); } .mini-cart__item:last-child { border-bottom:0; } .mini-cart__thumb img { width:56px; height:56px; object-fit:cover; border-radius:10px; } .mini-cart__name { font-weight:600; font-size:13px; color:var(--teal); } .mini-cart__meta { font-size:11.5px; color:var(--navy); display:flex; flex-direction:column; } .mini-cart__qty { font-size:12.5px; color:var(--teal); font-weight:600; } .mini-cart__remove button { background:none; border:0; color:var(--navy); } .mini-cart__totals { margin:12px 0; font-size:13px; } .mini-cart__total-row { display:flex; justify-content:space-between; padding:3px 0; color:var(--navy); } .mini-cart__total-row.is-grand { font-weight:700; color:var(--teal); font-size:15px; border-top:1px solid var(--line); padding-top:10px; margin-top:6px; } .mini-cart__actions { display:flex; gap:10px; margin-top:6px; } .mini-cart__actions .btn-cart { flex:1; padding:10px 14px; border-radius:999px; font-size:12.5px; font-weight:700; text-align:center; } .btn-cart--ghost { background:var(--sand); color:var(--teal); } .btn-cart--primary { background:var(--teal); color:var(--pearl); } .mini-cart__empty { padding:16px; text-align:center; color:var(--navy); font-size:13px; } /* pesquisa (offcanvas topo) — barra fina no topo, não painel de ecrã inteiro */ #searchoffcanvasTop { height:auto !important; min-height:0; max-height:none; bottom:auto; background:var(--pearl); border-bottom:1px solid var(--line); box-shadow:0 10px 30px rgba(77,109,120,.12); } #searchoffcanvasTop .offcanvas-header { display:block; padding:0; } #searchoffcanvasTop .offcanvas-body { flex:none; overflow:visible; padding:18px 24px; } /* o template embrulha o formulário num .container do bootstrap: aqui não pode impor largura */ #searchoffcanvasTop .container { width:100%; max-width:none; padding:0; margin:0; } #searchoffcanvasTop .header-search-wrap { max-width:720px; margin:0 auto; padding-right:56px; } #searchoffcanvasTop .header-search-form { border-color:var(--line); box-shadow:0 8px 24px rgba(77,109,120,.12); } #searchoffcanvasTop .header-search-form:focus-within { border-color:var(--gold); box-shadow:0 8px 24px rgba(77,109,120,.12), 0 0 0 3px rgba(212,175,119,.22); } #searchoffcanvasTop .header-search-icon { color:var(--navy); } #searchoffcanvasTop .header-search-input { color:var(--teal); font-size:15px; } #searchoffcanvasTop .header-search-submit { background:var(--teal); font-size:13px; } #searchoffcanvasTop .header-search-submit:hover { background:var(--gold); filter:none; } #searchoffcanvasTop .header-search-close { color:var(--teal); box-shadow:var(--card-shadow); } #searchoffcanvasTop .header-search-close:hover { background:var(--sand); color:var(--teal); } @media (max-width:575px) { #searchoffcanvasTop .offcanvas-body { padding:14px 16px; } #searchoffcanvasTop .header-search-wrap { padding-right:46px; } } #search .input-group { border:1px solid var(--mint); border-radius:999px; overflow:hidden; background:#fff; } #search .form-control { border:0; padding:12px 18px; font-size:14px; background:transparent; } #search .form-control:focus { box-shadow:none; } #search .btn { border-radius:0; background:var(--teal); border:0; padding:0 22px; } #search .btn:hover { background:var(--teal-dark); } /* ============================================================ NAV DE CATEGORIAS (desktop) ============================================================ */ .menu-bg { border-top:1px solid var(--mint); border-bottom:1px solid var(--mint); background:var(--pearl); } .menu-bg .container { max-width:1440px; } #menu.navbar { padding:0; } #menu .navbar-nav { width:100%; justify-content:center; gap:8px; } #menu .nav-item > .nav-link, #menu .nav-item > .dropdown-item { font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--teal); padding:16px 18px; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; border-radius:0; } #menu .nav-item > .nav-link:hover, #menu .nav-item > .dropdown-item:hover, #menu .nav-item.show > .nav-link { color:var(--gold); background:transparent; } #menu .nav-item .enaleng { font-size:11px; color:var(--navy); } #menu .dropdown-menu { border:0; border-radius:0 0 16px 16px; padding:22px 26px; box-shadow:0 20px 44px rgba(77,109,120,.16); margin-top:0; } #menu .dropdown-inner { display:flex; gap:34px; } #menu .dropdown-menu .dropdown-item { padding:6px 0; font-size:13px; color:var(--navy); text-transform:none; font-weight:500; } #menu .dropdown-menu .dropdown-item:hover { color:var(--gold); background:transparent; } #menu .dropdown-divider { border-color:var(--line); } /* ============================================================ MENU MOBILE (offcanvas) ============================================================ */ .menu-bar-icon { border:0; background:transparent; color:var(--teal); padding:8px; display:inline-flex; /* removed */ } .menu-bar-icon .hamburger-icon { color:var(--teal); } .mobile-menu.offcanvas.offcanvas-start { width:300px; max-width:86vw; border:0; box-shadow:8px 0 32px rgba(77,109,120,.16); background:var(--pearl); } .mobile-menu .offcanvas-header { padding:20px 20px 16px; background:var(--pearl); border-bottom:1px solid var(--line); } .mobile-menu .offcanvas-title { color:var(--teal); font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; font-family:'Archivo',sans-serif; } .mobile-menu .btn-close { opacity:.5; } .mobile-menu .btn-close:hover { opacity:1; } .mobile-menu .offcanvas-body { padding:10px; } .mobile-menu .nav.navbar-nav { gap:2px; } .mobile-menu .nav-item > a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-radius:10px; color:var(--teal); font-size:14px; font-weight:600; text-transform:none; background:transparent; } .mobile-menu .nav-item > a:hover, .mobile-menu .nav-item.show > a { background:var(--sand); color:var(--gold); } .mobile-menu .nav-item .enaleng { color:var(--navy); font-size:12px; } .mobile-menu .dropdown-menu { border:0; background:#fff; border-radius:10px; margin:2px 0 8px; padding:4px; box-shadow:none; } .mobile-menu .dropdown-menu .dropdown-item { padding:10px 14px; border-radius:8px; font-size:13px; color:var(--navy); } .mobile-menu .dropdown-menu .dropdown-item:hover { background:var(--sand); color:var(--gold); } .mobile-menu .dropdown-menu.show { position:static !important; transform:none !important; } /* ============================================================ CARTÃO DE PRODUTO (home / categoria / relacionados) ============================================================ */ .product-thumb { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); position:relative; height:100%; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; } .product-thumb:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(77,109,120,.14); } .product-thumb .image { overflow:hidden; } .product-thumb .image img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .35s ease; } .product-thumb:hover .image img { transform:scale(1.05); } .product-thumb .content, .product-thumb .caption { padding:16px 18px; text-align:center; display:flex; flex-direction:column; gap:6px; flex:1; } .product-thumb .name, .product-thumb .caption a { font-size:14px; font-weight:600; color:var(--teal); } .product-thumb .rating, .product-thumb .stars { color:var(--gold); font-size:13px; letter-spacing:2px; } .product-thumb .price { font-size:15px; font-weight:700; color:var(--teal); } .product-thumb .price-old { color:var(--navy); text-decoration:line-through; font-weight:500; margin-right:6px; } /* linha de ações (carrinho / favoritos / comparar) — entre o nome e o preço */ .product-thumb .thumb-actions { display:flex; gap:8px; justify-content:center; align-items:center; margin:0; padding:0; } .product-thumb .thumb-actions button, .product-thumb .thumb-actions .thumb-action-link { width:34px; height:34px; border-radius:50%; border:1px solid var(--mint); background:#fff; color:var(--teal); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .15s ease, color .15s ease, border-color .15s ease; } .product-thumb .thumb-actions button:hover, .product-thumb .thumb-actions .thumb-action-link:hover { background:var(--teal); color:var(--pearl); border-color:var(--teal); } .product-thumb .thumb-actions button svg { width:15px; height:15px; fill:currentColor; } .product-thumb .thumb-actions input { display:none; } .product-thumb .price--quote .price-new { color:var(--gold); font-size:13px; } /* overlay de hover sobre a imagem — cores (bikinis) ou formato (livros) */ .product-thumb .image { position:relative; } .product-thumb .thumb-hover { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:12px; /* background:rgba(248,246,240,.9); backdrop-filter:blur(3px); */ -webkit-backdrop-filter:blur(3px); opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; } .product-thumb .image:hover .thumb-hover { opacity:1; transform:translateY(0); } .product-thumb .thumb-hover__row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .product-thumb .thumb-swatch { width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1px var(--mint), 0 0 0 3px #fff; } .product-thumb .thumb-swatch--multi { background:conic-gradient(#C25B54,#D4AF77,#6B8E5A,#3E6DA3,#D98BA8,#C25B54); } .product-thumb .thumb-hover__fmt { gap:10px; } .product-thumb .thumb-fmt { display:inline-flex; align-items:center; justify-content:center; background:#fff; line-height:1; padding:6px; border-radius:50%; box-shadow:0 0 0 1px var(--mint); } .product-thumb .image .thumb-hover .thumb-hover__fmt .thumb-fmt img { width:22px !important; height:22px !important; max-width:22px !important; aspect-ratio:auto !important; object-fit:contain !important; position:static !important; inset:auto !important; transform:none !important; display:block; } .badge-new,.product-thumb .badge { position:absolute; top:12px; left:12px; z-index:1; background:var(--gold); color:var(--teal); font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; } /* ============================================================ SECÇÕES / TÍTULOS ============================================================ */ .section-heading,.section-title { text-align:center; margin:0 0 32px; } .section-heading h2,.section-title h2,.co-heading { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--teal); font-weight:600; margin:0; text-transform:none; letter-spacing:0; } .section-heading hr,.section-title hr { width:56px; border:0; border-top:2px solid var(--gold); margin:12px auto 0; opacity:1; } .section-kicker { font-size:11px; letter-spacing:.25em; color:var(--navy); font-weight:700; text-transform:uppercase; margin-bottom:6px; } /* ============================================================ FOOTER ============================================================ */ footer { background:var(--teal); color:var(--pearl); margin-top:64px; padding:60px 32px 0; } footer a { color:var(--mint); } footer a:hover { color:var(--gold); } /* .cols — grelha exata do export */ footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:40px; max-width:1200px; margin:0 auto 40px; } footer h5, footer .col-title { font-size:13px; letter-spacing:.15em; font-weight:700; color:var(--gold); text-transform:uppercase; margin:0 0 18px; } footer h5 .toggle, footer h5 .btn { display:none; } .footer-link, footer .links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .footer-link a, footer .links a { font-size:14px; color:var(--mint); } .footer-link a:hover, footer .links a:hover { color:var(--gold); } .footer-collapse { display:block !important; } footer p { font-size:14px; line-height:1.9; color:var(--mint); margin:0; } /* bloco contacto (storeinfo) */ .storeinfo h5 { margin-bottom:16px; } .storeinfo .f-left { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .storeinfo .f-left li { display:flex; gap:10px; font-size:13.5px; color:var(--mint); line-height:1.5; } .storeinfo .f-left li i { color:var(--gold); margin-top:3px; } .storeinfo .f-left li .fs-0 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .storeinfo .f-left a { color:var(--mint); } .storeinfo .f-left a:hover { color:var(--gold); } #column-left1 h1 { display:none; } /* newsletter */ #footer-newsletter h3 { font-size:12px !important; letter-spacing:.15em; font-weight:700; color:var(--gold) !important; text-transform:uppercase; margin-bottom:14px; } #footer-newsletter .inputnew, #footer-newsletter input[type="text"] { width:100%; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.12); color:var(--pearl); font-size:13px; } #footer-newsletter .inputnew::placeholder, #footer-newsletter input[type="text"]::placeholder { color:rgba(248,246,240,.65); } #footer-newsletter .inputnew:focus, #footer-newsletter input[type="text"]:focus { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); outline:none; box-shadow:none; } #footer-newsletter .button, #footer-newsletter .newsletters-footer { width:100% !important; margin-top:12px !important; background:var(--gold) !important; color:var(--teal) !important; border:0 !important; border-radius:999px !important; padding:12px !important; font-weight:700 !important; font-size:13px !important; } #footer-newsletter .checkbox { font-size:12px; color:var(--mint); margin-top:12px; } #footer-newsletter .checkbox a { color:var(--gold); } /* ============================================================ NEWSLETTER POPUP (tmdadvancenewsletter → #tmdnewsletterPopup) Formato "glass card" — famoors-newsletter-popup.html ============================================================ */ #tmdnewsletterPopup .modal-dialog { max-width:520px; width:calc(100% - 32px); margin-left:auto; margin-right:auto; } #tmdnewsletterPopup .modal-content { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.6) !important; border-radius:32px !important; background:rgba(248,246,240,.82) !important; background-image:none !important; -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%); box-shadow:0 30px 60px rgba(77,109,120,.28) !important; min-height:0 !important; } #tmdnewsletterPopup .modal-body { padding:52px 44px 36px !important; text-align:center; } /* botão fechar — dentro do cartão, canto superior direito */ #tmdnewsletterPopup .close { position:absolute !important; top:16px !important; right:16px !important; left:auto !important; bottom:auto !important; margin:0 !important; width:34px; height:34px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; z-index:6; opacity:1; text-shadow:none; font-size:19px; font-weight:400; border:1px solid rgba(255,255,255,.75) !important; background:rgba(255,255,255,.55) !important; color:var(--teal) !important; box-shadow:none !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } #tmdnewsletterPopup .close:hover { background:rgba(212,175,119,.4) !important; color:var(--teal-dark) !important; } /* cabeçalho */ #tmdnewsletterPopup .newsletters { padding:0 !important; margin:0 !important; position:static !important; } #tmdnewsletterPopup .nl-envelope { width:86px; height:86px; margin:0 auto 22px; display:block; } #tmdnewsletterPopup h3 { font-family:'Cormorant Garamond',serif; font-size:32px !important; font-weight:600 !important; line-height:1.1; color:var(--teal) !important; margin:0 0 12px !important; } #tmdnewsletterPopup .nl-desc, #tmdnewsletterPopup .newsletters p { font-size:14px; line-height:1.7; color:var(--teal); opacity:.8; margin:0 auto 26px; max-width:400px; } /* form: pill input + botão gradiente */ #tmdnewsletterPopup #addpop .donot { position:static !important; height:auto !important; top:auto; bottom:auto; left:auto; right:auto; } #tmdnewsletterPopup .row.mb-3 { margin:0 0 14px !important; } #tmdnewsletterPopup .row.mb-3 > .col-sm-12 { display:flex !important; gap:10px; flex-wrap:nowrap; padding:0; align-items:stretch; } #tmdnewsletterPopup input.form-control { flex:1 1 auto; min-width:0; width:auto; height:auto !important; padding:15px 20px !important; border-radius:999px !important; border:1px solid rgba(77,109,120,.22) !important; background:rgba(255,255,255,.62) !important; font-size:14px; color:var(--teal) !important; box-shadow:none !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } #tmdnewsletterPopup input.form-control::placeholder { color:var(--navy) !important; opacity:1; } #tmdnewsletterPopup input.form-control:focus { outline:2px solid var(--gold) !important; border-color:transparent !important; } #tmdnewsletterPopup #newsletters-subspopup { flex:0 0 auto; float:none !important; padding:15px 28px !important; border-radius:999px !important; border:0 !important; white-space:nowrap; background:linear-gradient(135deg,var(--gold),var(--teal)) !important; color:var(--pearl) !important; font-weight:700; font-size:15px; } #tmdnewsletterPopup #newsletters-subspopup:hover { opacity:.92; } #tmdnewsletterPopup .nl-hint { display:block; font-size:12px; color:var(--navy); margin:2px 0 14px; } #tmdnewsletterPopup .popup_success:empty { display:none; } #tmdnewsletterPopup .name_errorpop:empty, #tmdnewsletterPopup .email_errorpop:empty { display:none; } /* concordar + não mostrar */ #tmdnewsletterPopup .agree-box { position:static !important; display:flex !important; flex-direction:column; align-items:center; gap:10px; margin-top:4px; } #tmdnewsletterPopup .checkbox { display:flex; align-items:center; justify-content:center; width:auto; } #tmdnewsletterPopup .checkbox label { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; font-weight:400; color:var(--teal); cursor:pointer; } #tmdnewsletterPopup .checkbox input { accent-color:var(--teal); width:14px; height:14px; margin:0; } #tmdnewsletterPopup .checkbox a { color:var(--gold); } #tmdnewsletterPopup #news-popupshow { background:transparent !important; border:0 !important; padding:0 !important; color:var(--navy) !important; font-size:12px; text-decoration:underline; white-space:normal; } #tmdnewsletterPopup .popup_success { margin-top:12px; } /* responsivo */ #tmdnewsletterPopup .modal-dialog-centered { min-height:calc(100% - 1rem); } #tmdnewsletterPopup .modal-body { max-height:calc(100vh - 40px); overflow-y:auto; } @media (max-width:560px) { #tmdnewsletterPopup .modal-dialog { width:calc(100% - 24px); } #tmdnewsletterPopup .modal-body { padding:46px 22px 28px !important; } #tmdnewsletterPopup .nl-envelope { width:72px; height:72px; margin-bottom:16px; } #tmdnewsletterPopup h3 { font-size:26px !important; margin-bottom:10px !important; } #tmdnewsletterPopup .nl-desc { font-size:13px; margin-bottom:20px; } #tmdnewsletterPopup .row.mb-3 > .col-sm-12 { flex-wrap:wrap !important; gap:8px; } #tmdnewsletterPopup input.form-control { flex:1 1 100%; padding:13px 18px !important; } #tmdnewsletterPopup #newsletters-subspopup { flex:1 1 100%; padding:13px 24px !important; } #tmdnewsletterPopup .close { top:12px !important; right:12px !important; } } .footblink { max-width:1200px; margin:0 auto; padding:26px 0 22px; text-align:center; display:flex; align-items:center; justify-content:center; border-top:1px solid rgba(248,246,240,.15); } .footblink > div, .footblink .foot-pay { width:100%; max-width:100%; flex:0 0 100%; float:none; text-align:center; } .footblink img, .footblink .foot-pay img { display:inline-block; float:none; margin:0 auto; max-height:46px; height:46px; width:auto; opacity:1; } .powerby { background:var(--teal) !important; border-top:1px solid rgba(248,246,240,.15); } .powerby .container { max-width:1200px; } .powerby p { margin:0; padding:22px 0; text-align:center; font-size:12px; color:var(--mint); } .powerby p a { color:var(--gold); } /* scroll-to-top */ #scroll { position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--teal); display:flex; align-items:center; justify-content:center; z-index:60; box-shadow:0 8px 22px rgba(77,109,120,.25); } #scroll:hover { background:var(--gold-dark); color:var(--teal); } /* ============================================================ BREADCRUMB (global, discreto) ============================================================ */ .breadcrumb { display:flex; flex-wrap:wrap; gap:6px; padding:18px 0 0; margin:0; background:transparent; font-size:12px; color:var(--navy); list-style:none; } .breadcrumb .breadcrumb-item a { color:var(--navy); } .breadcrumb .breadcrumb-item.active, .breadcrumb .breadcrumb-item:last-child { color:var(--teal); font-weight:600; } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content:"/"; color:var(--mint); padding-right:6px; } /* ============================================================ HOME — layout (réplica do export) ============================================================ */ #common-home, #common-home.container-fluid { max-width:1440px; margin:0 auto; padding:0; } #common-home > .row { margin:0; --bs-gutter-x:0; } #common-home > .row > #content, #common-home #content { padding:0; } /* ============================================================ HERO — carrossel de imagens com "peek" (desktop) / full-bg (mobile) ============================================================ */ .rless > .col-lg-12 { padding:0; } .hero { position:relative; margin:28px 32px; border-radius:24px; background:linear-gradient(120deg,#EFE3D5 0%,#BED4D0 100%); padding:48px 40px 64px 48px; display:flex; align-items:center; gap:32px; overflow:hidden; /* recortado nas bordas do painel */ } .hero-slider .slick-list { overflow:visible; } /* peek visível dentro do painel */ /* --- coluna de texto (esquerda, fixa) --- */ .hero-text { flex:0 0 40%; max-width:40%; position:relative; z-index:4; animation:heroIn .7s cubic-bezier(.22,.61,.36,1) both; } .hero-text > * { position:relative; z-index:1; } /* degradé por trás do texto: faz DESAPARECER o(s) slide(s) à esquerda */ .hero-text::before { content:""; position:absolute; top:-140px; bottom:-140px; left:-48px; right:-300px; background:linear-gradient(90deg, #ECE3D5 0%, #ECE3D5 56%, rgba(236,227,213,.7) 78%, rgba(236,227,213,0) 100%); z-index:0; pointer-events:none; } .hero-slider .slick-slide { position:relative; z-index:1; } .hero-slider .slick-center { z-index:2; } @keyframes heroIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } .hero-kicker { font-size:15px; letter-spacing:.3em; color:var(--gold); font-weight:600; margin-bottom:6px; text-transform:uppercase; } .hero-text h2, .hero-title { font-family:'Cormorant Garamond',serif; font-size:44px; line-height:1.1; color:var(--teal); font-weight:600; margin:0 0 18px; } .hero-text .hero-sub { font-size:15px; color:var(--teal); opacity:.85; margin:0 0 26px; max-width:420px; } /* --- slider (direita) --- */ .hero-slider { flex:1 1 auto; min-width:0; position:relative; } .hero-slider .slick-list { overflow:visible; } .hero-slider .slick-track { display:flex; align-items:center; } .hero-slide { padding:0 9px; outline:none; } .hero-slide a, .hero-slide img { display:block; width:100%; } .hero-slide img { aspect-ratio:1 / 1; height:auto; max-height:380px; object-fit:cover; border-radius:18px; transition:opacity .45s ease, transform .45s ease, filter .45s ease; } /* slides não-centrais: espreitam esbatidos (degradé) */ .hero-slider .slick-slide:not(.slick-center) img { opacity:.32; transform:scale(.9); filter:saturate(.85); } .hero-slider .slick-center img { opacity:1; transform:scale(1); } /* setas */ .hero-slider .slick-prev, .hero-slider .slick-next { width:44px; height:44px; z-index:5; background:rgba(255,255,255,.85); border-radius:50%; box-shadow:0 6px 18px rgba(77,109,120,.18); } .hero-slider .slick-prev { left:-14px; } .hero-slider .slick-next { right:-6px; } .hero-slider .slick-prev:hover, .hero-slider .slick-next:hover { background:#fff; } .hero-slider .slick-prev:before, .hero-slider .slick-next:before { font-family:"Font Awesome 6 Free","FontAwesome",sans-serif; font-weight:900; color:var(--teal); font-size:15px; opacity:1; } .hero-slider .slick-prev:before { content:"\f053"; } .hero-slider .slick-next:before { content:"\f054"; } /* dots — desktop: canto inferior direito do painel / mobile: sobre a imagem */ .hero-dots { position:absolute; left:40%; right:40px; bottom:26px; width:auto; z-index:6; } .hero-dots .slick-dots { position:static !important; display:flex !important; align-items:center; justify-content:center; gap:9px; margin:0; padding:0; width:auto; list-style:none; } .hero-dots .slick-dots li { position:static; width:10px; height:10px; margin:0; padding:0; } .hero-dots .slick-dots li button { width:10px; height:10px; padding:0; margin:0; border:0; background:transparent; font-size:0; line-height:0; cursor:pointer; } .hero-dots .slick-dots li button:before { content:"" !important; display:block; width:10px; height:10px; border-radius:50%; background:var(--teal); opacity:.28; position:static; transition:opacity .2s ease, background .2s ease, transform .2s ease; } .hero-dots .slick-dots li.slick-active button:before { opacity:1; background:var(--gold); transform:scale(1.15); } /* ---------- BANNERS ABAIXO DO HERO (infiofferbanner) — exato ao export ---------- */ .offerbanner { display:flex; gap:20px; max-width:1440px; margin:0 auto 44px; padding:0 32px; flex-wrap:wrap; } .offer-tile { flex:1; min-width:300px; position:relative; height:340px; border-radius:20px; overflow:hidden; } .offer-tile > a, .offer-tile > picture, .offer-tile > a > picture { display:block; width:100%; height:100%; } .offer-tile source { display:none; } .offer-tile img { width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; max-height:none !important; } .offer-tile .offer-tag { position:absolute; left:24px; bottom:24px; padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600; background:rgba(77,109,120,.88); color:#F8F6F0; } .offer-tile:nth-child(2) .offer-tag { background:rgba(212,175,119,.92); color:#4D6D78; } /* ---------- TOP PRODUCTS (tabs + .grid) — exato ao export ---------- */ .tab-products { max-width:1440px; margin:60px auto 0; padding:0 32px; } .tab-products .section-title { text-align:center; margin-bottom:36px; } .tab-products .section-kicker { font-size:12px; letter-spacing:.25em; color:var(--navy); font-weight:700; margin-bottom:6px; text-transform:uppercase; } .tab-products .section-title h2 { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--teal); font-weight:600; margin:0; } .tab-products .tabs { display:flex; justify-content:center; gap:28px; margin-top:22px; } .tab-products .tabs span { font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; padding-bottom:6px; } .tab-products .tabs span.active { font-weight:700; color:var(--teal); border-bottom:2px solid var(--gold); } /* ============================================================ TOP PRODUCTS por marca Desktop: linha estatica centrada (ate 5). Mobile: carrossel 1-a-1 + dots. ============================================================ */ .brands-products .tabs { flex-wrap:wrap; } .brands-products .tab-content { overflow:hidden; } .brands-products .brand-pane { display:none; min-width:0; } .brands-products .brand-pane.active { display:block; } .brands-products .brand-carousel { margin:0; min-width:0; } .brands-products .brand-slide { padding:0 12px; } .brands-products .brand-slide .product-thumb { margin:0 auto; height:440px; display:flex; flex-direction:column; } /* imagem ocupa TODO o espaço livre até ao título; conteúdo colado em baixo */ .brands-products .brand-slide .product-thumb .image { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; } .brands-products .brand-slide .product-thumb .image > a { flex:1 1 auto; min-height:0; height:auto !important; display:block; position:relative; } .brands-products .brand-slide .product-thumb .image img { position:absolute !important; inset:0; width:100% !important; height:100% !important; aspect-ratio:auto !important; object-fit:cover !important; } .brands-products .brand-slide .product-thumb .content, .brands-products .brand-slide .product-thumb .caption { flex:0 0 auto; justify-content:flex-end; gap:8px; min-height:0; padding:12px 18px 18px; } .brands-products .brand-slide .product-thumb .rating, .brands-products .brand-slide .product-thumb .stars { display:none; } .brands-products .brand-slide .product-thumb .description { display:flex; flex-direction:column; gap:10px; width:100%; } .brands-products .brand-slide .product-thumb .thumb-actions { margin:2px 0; } .brands-products .brand-slide .product-thumb .description h4, .brands-products .brand-slide .product-thumb .name { min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; align-items:center; } .brands-products .brand-more { text-align:center; margin:34px 0 50px; } .brands-products .brand-more .btn { min-width:180px; } /* ============================================================ CARROSSÉIS PARTILHADOS — Top Products / Relacionados / Blog Sempre carrossel; slidesToShow adapta ao ecrã (JS responsive). ============================================================ */ .brand-carousel.slick-initialized, .pdp__related.slick-initialized, .latest-news.slick-initialized { display:block; } .brand-carousel .slick-list, .pdp__related .slick-list, .latest-news .slick-list { overflow:hidden; } .brand-carousel .slick-track { display:flex; align-items:stretch; } /* related/blog: sem stretch — os cartões seguem a altura do conteúdo (o nome tem min-height de 2 linhas, por isso ficam iguais na prática) */ .pdp__related .slick-track, .latest-news .slick-track { display:flex; align-items:flex-start; } .brand-carousel .slick-slide, .pdp__related .slick-slide, .latest-news .slick-slide { height:auto; } .brand-carousel .slick-slide > div { height:100%; } .pdp__related .slick-slide, .latest-news .slick-slide { padding:0 12px; } /* a imagem quadrada NÃO pode encolher (o .image tem overflow:hidden → min-height:auto vira 0) */ .pdp__related .product-thumb .image, .latest-news .product-thumb .image { flex:0 0 auto; } /* setas */ .brand-carousel .slick-prev, .brand-carousel .slick-next, .pdp__related .slick-prev, .pdp__related .slick-next, .latest-news .slick-prev, .latest-news .slick-next { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 6px 20px rgba(77,109,120,.16); z-index:5; } .brand-carousel .slick-prev, .pdp__related .slick-prev, .latest-news .slick-prev { left:-6px; } .brand-carousel .slick-next, .pdp__related .slick-next, .latest-news .slick-next { right:-6px; } .brand-carousel .slick-prev:before, .brand-carousel .slick-next:before, .pdp__related .slick-prev:before, .pdp__related .slick-next:before, .latest-news .slick-prev:before, .latest-news .slick-next:before { font-family:"FontAwesome","Font Awesome 6 Free"; font-weight:900; color:var(--teal); font-size:15px; opacity:1; } .brand-carousel .slick-prev:before, .pdp__related .slick-prev:before, .latest-news .slick-prev:before { content:"\f053"; } .brand-carousel .slick-next:before, .pdp__related .slick-next:before, .latest-news .slick-next:before { content:"\f054"; } .brand-carousel .slick-disabled, .pdp__related .slick-disabled, .latest-news .slick-disabled { opacity:.3; cursor:default; } /* dots */ .brand-carousel .slick-dots, .pdp__related .slick-dots, .latest-news .slick-dots { position:static !important; display:flex !important; justify-content:center; gap:9px; margin:22px 0 0; padding:0; } .brand-carousel .slick-dots li, .pdp__related .slick-dots li, .latest-news .slick-dots li { width:auto; height:auto; margin:0; } .brand-carousel .slick-dots li button, .pdp__related .slick-dots li button, .latest-news .slick-dots li button { width:10px; height:10px; padding:0; } .brand-carousel .slick-dots li button:before, .pdp__related .slick-dots li button:before, .latest-news .slick-dots li button:before { content:"" !important; display:block; width:10px; height:10px; border-radius:50%; background:var(--teal); opacity:.28; } .brand-carousel .slick-dots li.slick-active button:before, .pdp__related .slick-dots li.slick-active button:before, .latest-news .slick-dots li.slick-active button:before { opacity:1; background:var(--gold); transform:scale(1.15); } /* 1 slide + peek (ecrãs pequenos, centerMode ligado) */ @media (max-width:560px) { .brand-carousel .slick-slide:not(.slick-center) .product-thumb, .pdp__related .slick-slide:not(.slick-center) .product-thumb, .latest-news .slick-slide:not(.slick-center) .product-thumb { opacity:.4; transform:scale(.92); transition:opacity .35s, transform .35s; } .brand-carousel .slick-center .product-thumb, .pdp__related .slick-center .product-thumb, .latest-news .slick-center .product-thumb { opacity:1; transform:none; } .brand-carousel .slick-prev, .brand-carousel .slick-next, .pdp__related .slick-prev, .pdp__related .slick-next, .latest-news .slick-prev, .latest-news .slick-next { display:none !important; } } /* .grid — igual ao export */ .tab-products .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin:0 0 50px; } .tab-products .grid > .product-thumb, .tab-products .grid > div { margin:0; } /* .card = .product-thumb com as medidas do export */ .tab-products .product-thumb { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 6px 24px rgba(77,109,120,.08); position:relative; } .tab-products .product-thumb .image { position:relative; } .tab-products .product-thumb .image > a { display:block; height:220px; } .tab-products .product-thumb .image img { width:100% !important; height:220px !important; object-fit:cover !important; display:block !important; } .tab-products .product-thumb .content, .tab-products .product-thumb .caption { padding:16px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; } .tab-products .product-thumb .description { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; } .tab-products .product-thumb .description > *, .tab-products .product-thumb .content > * { margin:0; } .tab-products .product-thumb .description h4, .tab-products .product-thumb .name { font-size:14px; font-weight:600; color:var(--teal); margin:0; line-height:1.25; } .tab-products .product-thumb .description h4 a { color:var(--teal); } .tab-products .product-thumb .price { font-size:15px; font-weight:700; color:var(--teal); line-height:1.2; margin:0; } .tab-products .product-thumb .price .price-new { font-size:15px; font-weight:700; color:var(--teal); } .tab-products .product-thumb .price .price-old { font-size:13px; } .tab-products .product-thumb .price-tax, .tab-products .product-thumb .description .price-tax, .tab-products .product-thumb .price small { display:none; } .tab-products .product-thumb .rating, .tab-products .product-thumb .stars { color:var(--gold); font-size:13px; margin:0 0 6px; letter-spacing:2px; line-height:1; height:15px; } .tab-products .product-thumb .rating .fa-stack { width:15px; height:15px; line-height:15px; font-size:13px; vertical-align:top; } .tab-products .product-thumb .rating .fa-stack .fa-stack-1x { line-height:15px; font-size:13px; } .tab-products .product-thumb .price { font-size:15px; font-weight:700; color:var(--teal); } .tab-products .product-thumb .d-list-view, .tab-products .product-thumb .description p { display:none; } .tab-products .product-thumb .button { position:absolute; top:12px; right:12px; left:auto; flex-direction:column; gap:8px; padding:0; opacity:0; transition:opacity .18s ease; } .tab-products .product-thumb:hover .button { opacity:1; } .tab-products .product-thumb .button button { width:34px; height:34px; border-radius:50%; border:0; background:#fff; color:var(--teal); box-shadow:0 3px 10px rgba(77,109,120,.18); display:flex; align-items:center; justify-content:center; } .tab-products .product-thumb .button button svg { width:15px; height:15px; fill:currentColor; } .tab-products .product-thumb .button button:hover { background:var(--teal); color:#fff; } .badge { position:absolute; top:12px; left:12px; background:var(--gold); color:var(--teal); font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; z-index:1; } /* ---------- MARCAS (inficategory) ---------- */ .bg-white.cmn-space { background:transparent !important; margin-top:64px; } #common-home .caregory-list ~ *, .caregory-list { max-width:1200px; margin:8px auto 0; } /* Poucas marcas (<=5): linha centrada, sem carrossel */ .caregory-list.caregory-static { display:flex; flex-wrap:wrap; justify-content:center; gap:24px 0; } .caregory-list.caregory-static .infi-item-layout { flex:0 0 auto; width:200px; max-width:44%; } /* Com carrossel (>5 marcas) — centra os slides do slick */ .caregory-list.slick-initialized .slick-track { display:flex; align-items:flex-start; } .caregory-list.slick-initialized .slick-slide { display:flex; justify-content:center; height:auto; } .infi-item-layout { text-align:center; padding:0 16px; } .infi-item-thumb { margin-bottom:0; } .infi-item-img { width:150px; height:150px; margin:0 auto 14px; border-radius:50%; border:2px solid var(--gold); padding:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; } .infi-item-img a { display:block; width:100%; height:100%; } .infi-item-img img { width:100%; height:100%; object-fit:cover; border-radius:50%; } .infi-item-title { margin:0; font-size:14px; } .infi-item-title a { font-family:'Archivo',sans-serif; font-weight:600; color:var(--teal); } .infi-item-title a:hover { color:var(--gold); } .catepro, .giant-item-subtitle { display:none; } .caregory-list .slick-prev, .caregory-list .slick-next { width:38px; height:38px; } .caregory-list .slick-prev:before, .caregory-list .slick-next:before { color:var(--teal); opacity:.6; font-size:24px; } /* ---------- BLOG (card único vertical) ---------- */ .blog-home, .blog-home.container { max-width:1440px; width:100%; margin:56px auto 0; padding:0 32px; } .latest-news { margin:26px 0 0; min-width:0; padding:0; } .latest-news .product-thumb { display:flex; flex-direction:column; border-radius:20px; box-shadow:0 10px 30px rgba(77,109,120,.1); overflow:hidden; background:#fff; } /* a imagem ocupa a largura toda do cartão: sem padding/margem herdados do legacy.css */ .latest-news .product-thumb .image { margin:0; padding:0; overflow:hidden; line-height:0; font-size:0; } .latest-news .product-thumb .image > a { display:block; margin:0; padding:0; } .latest-news .product-thumb .image img { width:100%; max-width:none; margin:0; padding:0; aspect-ratio:4/3; height:auto; object-fit:cover; display:block; border-radius:20px 20px 0 0; } .latest-news .product-thumb .content { padding:18px 22px 22px; text-align:left; display:flex; flex-direction:column; gap:10px; } .latest-news .product-thumb .description { display:flex; flex-direction:column; gap:10px; flex:1 1 auto; } .latest-news .product-thumb .description h4 { font-size:17px; color:var(--teal); font-weight:700; margin:0; text-transform:none; letter-spacing:0; } .latest-news .product-thumb .description p { color:var(--navy); font-size:14px; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .latest-news .product-thumb .description .btn { align-self:flex-start; margin-top:4px; } /* ---------- TESTEMUNHOS — .testi-grid, largura = banner ---------- */ .testimonials { background:transparent; max-width:1440px; margin:60px auto 0; padding:0 32px; } .testimonials .section-title { text-align:center; margin-bottom:36px; } .testimonials .section-kicker { font-size:12px; letter-spacing:.25em; color:var(--navy); font-weight:700; text-transform:uppercase; margin-bottom:6px; } .testimonials .section-title h2 { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--teal); font-weight:600; margin:0; } .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 60px; } .testi-card { background:#fff; border:0; border-radius:18px; padding:28px 26px; box-shadow:0 6px 24px rgba(77,109,120,.08); display:flex; flex-direction:column; gap:16px; } .testi-card::before { content:none; } .testi-card .stars { color:var(--gold); font-size:13px; letter-spacing:2px; line-height:1; } .testi-card .stars i { font-size:13px; } .testi-card p { font-size:14px; line-height:1.7; color:var(--teal); margin:0; flex:1; } .testi-card .avatar { display:flex; align-items:center; gap:12px; } .testi-card .avatar .ph { width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--teal); color:var(--pearl); font-weight:700; font-size:16px; text-transform:uppercase; } .testi-card .avatar .who .n { font-size:13px; font-weight:700; color:var(--teal); } .testi-card .avatar .who .r { font-size:12px; color:var(--navy); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:991px) { header .row { min-height:84px; padding-top:12px; padding-bottom:12px; } header .row.align-items-center > .header-logo-col { padding-right:0; } #logo a { display:inline-flex; align-items:center; justify-content:center; line-height:0; } #logo img { height:60px; max-height:60px; max-width:112px; margin-left:0; } @media (max-width:575px) { #logo img { width:80px; height:auto; max-height:60px; } } #top { font-size:10.5px; } #top .welcom-text p { justify-content:center; } .hero { padding:44px 0 44px 32px; gap:24px; } .hero-text { flex-basis:44%; max-width:44%; } .hero-text h2,.hero-title { font-size:32px; } .hero-slide img { max-height:320px; } .offerbanner { margin:0 16px 32px; } .tab-products,.testimonials,.blog-home { padding:0 16px; } .testi-grid { grid-template-columns:1fr; } .tab-products .grid { grid-template-columns:repeat(2,1fr); } .brands-products .tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:20px; padding-bottom:4px; -webkit-overflow-scrolling:touch; } .brands-products .tabs span { white-space:nowrap; flex:0 0 auto; } } /* ---------- HERO no MOBILE: imagem full-bg, texto em baixo, dots ---------- */ @media (max-width:767px) { .section-heading h2,.section-title h2 { font-size:26px; } footer { margin-top:44px; } /* ---------- TESTEMUNHOS no MOBILE: carrossel com touch + dots ---------- */ .testi-grid.slick-initialized { display:block; grid-template-columns:none; margin-bottom:36px; } .testi-grid.slick-initialized .slick-list { overflow:hidden; } .testi-grid.slick-initialized .slick-slide { padding:0 8px; } .testi-grid.slick-initialized .testi-card { display:flex; /* o slick força .slick-slide{display:block} — repor flex */ flex-direction:column; padding:34px 28px; gap:20px; /* a altura e igualada por JS (equalize) — mesma para todos */ transition:opacity .35s, transform .35s; } .testi-grid.slick-initialized .testi-card p { flex:1 1 auto; line-height:1.9; margin:0; } .testi-grid.slick-initialized .testi-card .avatar { margin-top:auto; flex:0 0 auto; } .testi-grid.slick-initialized .slick-slide:not(.slick-center) .testi-card { opacity:.45; transform:scale(.94); } .testi-grid.slick-initialized .slick-center .testi-card { opacity:1; transform:none; } .testi-grid.slick-initialized .slick-prev, .testi-grid.slick-initialized .slick-next { display:none !important; } .testi-grid.slick-initialized .slick-dots { position:static !important; display:flex !important; justify-content:center; gap:9px; margin:22px 0 0; padding:0; } .testi-grid.slick-initialized .slick-dots li { width:auto; height:auto; margin:0; } .testi-grid.slick-initialized .slick-dots li button { width:10px; height:10px; padding:0; } .testi-grid.slick-initialized .slick-dots li button:before { content:"" !important; display:block; width:10px; height:10px; border-radius:50%; background:var(--teal); opacity:.28; } .testi-grid.slick-initialized .slick-dots li.slick-active button:before { opacity:1; background:var(--gold); transform:scale(1.15); } .hero { display:block; padding:0; margin:20px 16px; min-height:470px; border-radius:20px; overflow:hidden; background:var(--sand); } .hero-slider { position:absolute; inset:0; } .hero-slider .slick-list, .hero-slider .slick-track, .hero-slide { height:100%; } .hero-slider .slick-list { overflow:hidden; } .hero-slide { padding:0; } .hero-slide a { height:100%; } .hero-slide img { aspect-ratio:auto; width:100%; height:100%; max-height:none; min-height:470px; border-radius:0; opacity:1 !important; transform:none !important; filter:none !important; } .hero-text { position:absolute; left:0; right:0; bottom:0; flex:none; max-width:100%; z-index:2; padding:90px 22px 52px; background:linear-gradient(to top, rgba(46,63,69,.92) 0%, rgba(46,63,69,.72) 30%, rgba(46,63,69,.28) 62%, rgba(46,63,69,0) 100%); } .hero-text::before { content:none; } .hero-text .hero-kicker { color:var(--gold); } .hero-text h2, .hero-text .hero-title { color:#fff; font-size:30px; margin:0 0 12px; } .hero-text .hero-sub { color:rgba(255,255,255,.9); margin:0 0 18px; } .hero-dots { display:block; position:absolute; left:0; right:0; bottom:16px; z-index:4; } .hero-dots .slick-dots li button:before { background:#fff; opacity:.55; } .hero-dots .slick-dots li.slick-active button:before { opacity:1; background:var(--gold); } .main-footer { padding-top:42px; } /* bloco CONTACTOS sempre aberto, igual às outras colunas (sem acordeão no mobile) */ footer h5 .toggle, footer h5 .btn { display:none !important; } .footer-collapse { display:block !important; } footer h5 { display:block; cursor:default; border-bottom:0 !important; padding:0 !important; margin:0 0 16px !important; } } /* ============================================================ PÁGINA DE CATEGORIA (product/category.twig → .catpage) Estrutura e valores do export (famoors-categorias.html) ============================================================ */ #product-category.catpage { max-width:none; padding:0; margin:0; } /* faixa com gradiente + breadcrumb + título */ .catpage__hero { background:linear-gradient(120deg,#EFE3D5 0%,#BED4D0 100%); padding:40px 32px; margin:0 0 30px; } .catpage__hero-inner { max-width:1200px; margin:0 auto; } .catpage .crumb { font-size:12px; color:var(--navy); margin-bottom:16px; } .catpage .crumb a { color:var(--navy); } .catpage .crumb a:hover { color:var(--gold); } .catpage .crumb .cur { color:var(--teal); font-weight:600; } .catpage__hero h1 { font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--teal); font-weight:600; margin:0; line-height:1.1; } /* corpo: sidebar + grelha */ .catpage__body { max-width:1200px; margin:0 auto; display:flex; gap:36px; padding:0 32px 60px; align-items:flex-start; flex-wrap:wrap; } .catpage__side { width:240px; flex:0 0 240px; min-width:200px; } .catpage__main { flex:1; min-width:0; } /* elementos só-mobile (drawer de filtros) */ .catpage__filter-open, .catpage__side-head, .catpage__side-overlay { display:none; } /* painéis (partilhado: .panel, .cat-nav, .category-filter) */ .catpage .panel, .catpage__side .cat-nav, .catpage__side .category-filter { background:#fff; border-radius:18px; box-shadow:0 6px 24px rgba(77,109,120,.08); padding:26px; margin-bottom:20px; border:0; } .catpage .panel-title, .catpage__side .cat-nav__head, .catpage__side .category-filter .card-header { font-size:15px; font-weight:700; color:var(--teal); margin:0 0 18px; padding:0; background:none; border:0; display:block; } .catpage__side .category-filter .card-header .toggle { display:none; } .catpage__side .cat-nav, .catpage__side .cat-nav.mb-3 { margin-bottom:20px; } /* o OpenCart embrulha o column_left num