/* ================================================================= SISTEMA DE DESIGN — Branco · Preto · Azul #10a9b4 Moderno, profissional, com micro-interações e efeitos. ================================================================= */ /* As variáveis de cor (--azul, --ink, etc.) são injetadas via PHP (cssTema()) no . Aqui ficam os tokens derivados. */ :root{ --azul-08:rgba(16,169,180,.08); --azul-15:rgba(16,169,180,.15); --azul-30:rgba(16,169,180,.30); --sombra-sm:0 1px 2px rgba(10,14,20,.06), 0 1px 3px rgba(10,14,20,.04); --sombra:0 8px 24px -8px rgba(10,14,20,.12), 0 2px 8px -2px rgba(10,14,20,.06); --sombra-lg:0 24px 60px -16px rgba(10,14,20,.18), 0 8px 24px -8px rgba(10,14,20,.10); --sombra-azul:0 14px 36px -10px rgba(16,169,180,.45); --raio:18px; --raio-sm:12px; --raio-lg:28px; --container:1240px; --header-h:84px; --serif:"Inter", system-ui, -apple-system, sans-serif; --sans:"Inter", system-ui, -apple-system, sans-serif; --transicao:.4s cubic-bezier(.2,.8,.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--sans); color:var(--ink); background:var(--branco); line-height:1.6; font-size:16px; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} ul{list-style:none} ::selection{background:var(--azul);color:#fff} /* foco acessível */ :focus-visible{outline:3px solid var(--azul-30);outline-offset:2px;border-radius:6px} /* ---------- TIPOGRAFIA ---------- */ h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink)} .h-display{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;letter-spacing:-.035em} .h-2{font-size:clamp(1.9rem,3.4vw,2.9rem)} .eyebrow{ font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--azul-escuro);display:inline-flex;align-items:center;gap:.5rem; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--azul);border-radius:2px} .muted{color:var(--cinza)} /* ---------- LAYOUT ---------- */ .container{max-width:var(--container);margin:0 auto;padding:0 24px} .section{padding:clamp(64px,9vw,120px) 0} .section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px;max-width:620px} .section-head.center{margin-inline:auto;text-align:center;align-items:center} .row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} /* ---------- BOTÕES ---------- */ .btn{ --bg:var(--azul);--fg:#06252a; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:15px 30px;border-radius:100px;font-weight:700;font-size:.96rem; background:var(--bg);color:var(--fg);position:relative;overflow:hidden; transition:transform var(--transicao), box-shadow var(--transicao), background .3s; box-shadow:var(--sombra-azul);white-space:nowrap; } .btn::after{ /* brilho que cruza no hover */ content:"";position:absolute;inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%);transition:transform .7s; } .btn:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(16,169,180,.6)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(-1px) scale(.99)} .btn-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--linha)} .btn-ghost::after{display:none} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--azul);color:var(--azul);transform:translateY(-2px)} .btn-dark{--bg:#fff !important;box-shadow:0 14px 30px -12px rgba(10,14,20,.5)} .btn-dark:hover{box-shadow:0 18px 40px -12px rgba(10,14,20,.6)} .btn-block{width:100%} .btn-lg{padding:18px 38px;font-size:1.04rem} .link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ink);transition:gap .3s,color .3s} .link-arrow svg{transition:transform .3s} .link-arrow:hover{color:var(--azul);gap:.8rem} .link-arrow:hover svg{transform:translateX(3px)} /* ---------- TOPBAR + HEADER ---------- */ .topbar{ background:var(--ink);color:#fff;font-size:.82rem;font-weight:500; overflow:hidden;white-space:nowrap; } .topbar-track{display:inline-flex;gap:60px;padding:9px 0;animation:marquee 26s linear infinite} .topbar-track span{display:inline-flex;align-items:center;gap:8px;opacity:.92} .topbar-track b{color:var(--azul)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .site-header{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, padding .3s; } .site-header.scrolled{border-color:var(--linha);box-shadow:0 6px 30px -18px rgba(10,14,20,.4)} .header-inner{display:flex;align-items:center;gap:28px;height:var(--header-h);transition:height .3s} .site-header.scrolled .header-inner{height:68px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:800;font-size:1.45rem;letter-spacing:-.03em} .brand .mark{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--azul),var(--azul-escuro)); box-shadow:var(--sombra-azul);font-size:1.2rem; transition:transform var(--transicao); } .brand:hover .mark{transform:rotate(-8deg) scale(1.06)} .brand .mark img{width:100%;height:100%;object-fit:contain;border-radius:12px} .main-nav{display:flex;align-items:center;gap:6px;margin-left:auto} .nav-list > li > a{ display:block;padding:10px 16px;font-weight:600;font-size:.95rem;border-radius:10px;position:relative; transition:color .25s,background .25s; } .nav-list > li > a::after{ content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px; background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform .3s; } .nav-list > li > a:hover{color:var(--azul-escuro)} .nav-list > li > a:hover::after{transform:scaleX(1)} /* mega dropdown */ .has-mega{position:relative} .mega{ position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px); background:#fff;border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-lg); padding:18px;min-width:240px;opacity:0;visibility:hidden;transition:var(--transicao);z-index:70; } .has-mega:hover .mega{opacity:1;visibility:visible;transform:translate(-50%,0)} .mega a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;font-weight:600;font-size:.92rem;transition:background .2s,color .2s} .mega a:hover{background:var(--azul-08);color:var(--azul-escuro)} .header-actions{display:flex;align-items:center;gap:6px} .icon-btn{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center;position:relative;color:var(--ink); transition:background .25s,color .25s,transform .25s; } .icon-btn:hover{background:var(--azul-08);color:var(--azul);transform:translateY(-2px)} .icon-btn .badge{ position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px; background:var(--ink);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center; box-shadow:0 0 0 2px #fff; } .menu-toggle{display:none} /* busca expansível */ .search-wrap{position:relative;flex:1;max-width:340px} .search-wrap input{ width:100%;height:46px;border:1.5px solid var(--linha);border-radius:13px;padding:0 16px 0 44px; font-family:inherit;font-size:.93rem;background:var(--fundo);transition:border-color .25s,background .25s,box-shadow .25s; } .search-wrap input:focus{outline:none;border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px var(--azul-08)} .search-wrap svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--cinza)} /* ---------- HERO ---------- */ .hero{position:relative;overflow:hidden;padding:clamp(60px,9vw,110px) 0 clamp(80px,10vw,130px);background:var(--branco)} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5} .blob.b1{width:520px;height:520px;background:radial-gradient(circle,var(--azul-30),transparent 70%);top:-160px;right:-120px;animation:float1 16s ease-in-out infinite} .blob.b2{width:380px;height:380px;background:radial-gradient(circle,rgba(16,169,180,.18),transparent 70%);bottom:-120px;left:-80px;animation:float2 20s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}} .hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%);opacity:.5} .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero-copy{max-width:560px} .hero h1{margin:18px 0 22px} .hero h1 .azul{color:var(--azul-escuro);position:relative;white-space:nowrap} .hero h1 .azul::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.18em;background:var(--azul-15);border-radius:4px;z-index:-1} .hero p.lead{font-size:1.12rem;color:var(--cinza);max-width:480px} .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero-stats{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap} .hero-stats .stat b{font-family:var(--serif);font-size:1.9rem;font-weight:800;display:block;line-height:1} .hero-stats .stat span{font-size:.86rem;color:var(--cinza)} .hero-visual{position:relative;aspect-ratio:4/4.4} .hero-card{ position:absolute;border-radius:var(--raio-lg);overflow:hidden;box-shadow:var(--sombra-lg); background:#fff;border:1px solid var(--linha); } .hero-card.main{inset:0 8% 12% 0;background:linear-gradient(150deg,var(--azul-claro),#fff)} .hero-card.main .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:5rem;color:var(--azul-30)} .hero-float{ position:absolute;background:#fff;border:1px solid var(--linha);border-radius:16px;padding:14px 16px; box-shadow:var(--sombra);display:flex;align-items:center;gap:11px;font-size:.86rem;font-weight:600; animation:bob 5s ease-in-out infinite; } .hero-float .dot{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--azul-08);color:var(--azul)} .hero-float.f1{top:6%;right:0;animation-delay:.2s} .hero-float.f2{bottom:4%;left:-4%;animation-delay:1.2s} .hero-float small{display:block;font-weight:500;color:var(--cinza);font-size:.74rem} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* ---------- BARRA DE CONFIANÇA ---------- */ .trust{border-block:1px solid var(--linha);background:var(--fundo)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha)} .trust-item{background:var(--fundo);padding:26px 24px;display:flex;align-items:center;gap:15px} .trust-item .ic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;background:#fff;color:var(--azul);box-shadow:var(--sombra-sm)} .trust-item b{display:block;font-size:.96rem} .trust-item span{font-size:.82rem;color:var(--cinza)} /* ---------- CATEGORIAS ---------- */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cat-card{ position:relative;border-radius:var(--raio);overflow:hidden;aspect-ratio:1/1.12; background:linear-gradient(160deg,var(--azul-claro),#fff);border:1px solid var(--linha); padding:26px;display:flex;flex-direction:column;justify-content:flex-end; transition:transform var(--transicao),box-shadow var(--transicao); } .cat-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,var(--azul-15),transparent 60%);opacity:0;transition:opacity .4s} .cat-card:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg);border-color:var(--azul-30)} .cat-card:hover::before{opacity:1} .cat-card .num{position:absolute;top:20px;right:22px;font-family:var(--serif);font-weight:800;font-size:2.4rem;color:#fff;-webkit-text-stroke:1.5px var(--azul-30);opacity:.7} .cat-card h3{font-size:1.3rem;position:relative} .cat-card p{font-size:.86rem;color:var(--cinza);margin:6px 0 0;position:relative} .cat-card .go{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;color:var(--azul);position:relative;transition:gap .3s} .cat-card:hover .go{gap:11px} /* ---------- CARD DE PRODUTO ---------- */ .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .prod-card{ position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden; display:flex;flex-direction:column;transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao); } .prod-card:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg);border-color:transparent} .prod-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--fundo)} .prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)} .prod-card:hover .prod-media img{transform:scale(1.08)} .prod-media .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:3rem;color:var(--azul-30);background:linear-gradient(150deg,var(--azul-claro),#fff)} .prod-badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:7px;z-index:2} .tag{font-size:.72rem;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:100px;backdrop-filter:blur(6px)} .tag.promo{background:var(--azul);color:#fff;box-shadow:var(--sombra-azul)} .tag.novo{background:var(--ink);color:#fff} .tag.estoque{background:#fff;color:#d9480f;box-shadow:var(--sombra-sm)} .prod-fav{ position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;z-index:2; background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--ink);display:grid;place-items:center; box-shadow:var(--sombra-sm);transition:transform .25s,color .25s,background .25s; } .prod-fav:hover{transform:scale(1.12);color:var(--azul)} .prod-fav.ativo{color:#fff;background:var(--azul)} .prod-quick{ position:absolute;left:14px;right:14px;bottom:14px;z-index:2; transform:translateY(140%);opacity:0;transition:var(--transicao); } .prod-card:hover .prod-quick{transform:translateY(0);opacity:1} .prod-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .prod-cat{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);margin-bottom:7px} .prod-name{font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--ink);margin-bottom:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .prod-name a:hover{color:var(--azul)} .prod-price{display:flex;align-items:baseline;gap:9px;margin-top:14px;flex-wrap:wrap} .prod-price .now{font-family:var(--serif);font-weight:800;font-size:1.4rem;color:var(--ink)} .prod-price .was{font-size:.92rem;color:var(--cinza);text-decoration:line-through} .prod-installment{font-size:.8rem;color:var(--cinza);margin-top:3px} .prod-pix{font-size:.8rem;color:var(--azul);font-weight:700;margin-top:4px;display:flex;align-items:center;gap:5px} /* estrelas */ .stars{display:inline-flex;gap:1px;color:var(--azul)} .stars svg{width:14px;height:14px} /* ---------- BANNER PROMO ---------- */ .promo-banner{ position:relative;overflow:hidden;border-radius:var(--raio-lg); background:linear-gradient(125deg,var(--ink),#12243a 60%,var(--azul-escuro)); color:#fff;padding:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center; } .promo-banner .blob{opacity:.35} .promo-banner h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.7rem)} .promo-banner p{color:rgba(255,255,255,.8);margin:14px 0 26px;max-width:440px} .promo-banner .btn{box-shadow:0 14px 36px -10px rgba(16,169,180,.7)} .promo-visual{display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:clamp(3rem,8vw,7rem);color:rgba(255,255,255,.1);position:relative;z-index:1} /* ---------- PÁGINA DE PRODUTO ---------- */ .breadcrumb{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--cinza);padding:22px 0;flex-wrap:wrap} .breadcrumb a:hover{color:var(--azul)} .breadcrumb .sep{opacity:.5} .pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-bottom:40px} .gallery{position:sticky;top:calc(var(--header-h) + 20px)} .gallery-main{border-radius:var(--raio-lg);overflow:hidden;background:var(--fundo);aspect-ratio:1/1;border:1px solid var(--linha);position:relative} .gallery-main img{width:100%;height:100%;object-fit:cover} .gallery-main .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:5rem;color:var(--azul-30);background:linear-gradient(150deg,var(--azul-claro),#fff)} .gallery-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap} .gallery-thumbs button{width:78px;height:78px;border-radius:14px;overflow:hidden;border:2px solid var(--linha);background:var(--fundo);transition:border-color .25s,transform .25s} .gallery-thumbs button:hover{transform:translateY(-2px)} .gallery-thumbs button.ativo{border-color:var(--azul)} .gallery-thumbs img{width:100%;height:100%;object-fit:cover} .pdp-info h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:10px 0 14px} .pdp-rating{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--cinza);margin-bottom:22px} .pdp-price-box{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio);padding:22px 24px;margin-bottom:26px} .pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .pdp-price .now{font-family:var(--serif);font-weight:800;font-size:2.4rem;color:var(--ink);line-height:1} .pdp-price .was{font-size:1.1rem;color:var(--cinza);text-decoration:line-through} .pdp-price .off{background:var(--azul);color:#fff;font-size:.8rem;font-weight:800;padding:5px 11px;border-radius:100px} .pdp-pix{margin-top:12px;font-size:.95rem;color:var(--azul);font-weight:700;display:flex;align-items:center;gap:7px} .pdp-installment{font-size:.9rem;color:var(--cinza);margin-top:4px} /* atributos / variações */ .attr-group{margin-bottom:24px} .attr-label{font-weight:700;font-size:.92rem;margin-bottom:12px;display:flex;justify-content:space-between} .attr-label .sel{color:var(--azul);font-weight:600} .attr-opts{display:flex;gap:10px;flex-wrap:wrap} .opt{ min-width:52px;padding:11px 16px;border-radius:12px;border:1.5px solid var(--linha);background:#fff; font-weight:600;font-size:.92rem;transition:var(--transicao);position:relative; } .opt:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)} .opt.sel{border-color:var(--azul);background:var(--azul-08);color:var(--azul);box-shadow:0 0 0 3px var(--azul-08)} .opt.cor{width:46px;height:46px;min-width:46px;padding:0;border-radius:50%} .opt.cor span{position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .opt.cor.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--azul)} .opt.indisp{opacity:.4;text-decoration:line-through;pointer-events:none} .qty-row{display:flex;align-items:center;gap:16px;margin:26px 0} .qty{display:inline-flex;align-items:center;border:1.5px solid var(--linha);border-radius:12px;overflow:hidden} .qty button{width:46px;height:50px;font-size:1.2rem;color:var(--ink);transition:background .2s} .qty button:hover{background:var(--azul-08);color:var(--azul)} .qty input{width:48px;height:50px;text-align:center;border:none;font-weight:700;font-size:1rem;font-family:inherit} .qty input:focus{outline:none} .pdp-actions{display:flex;gap:14px;flex-wrap:wrap} .pdp-actions .btn{flex:1;min-width:200px} .pdp-perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} .perk{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--linha);border-radius:14px;font-size:.86rem;font-weight:600} .perk svg{color:var(--azul);flex:none} .perk small{display:block;color:var(--cinza);font-weight:500} /* frete na PDP */ .frete-box{margin-top:24px;border:1px solid var(--linha);border-radius:var(--raio);padding:20px} .frete-box label{font-weight:700;font-size:.9rem;display:block;margin-bottom:10px} .frete-input{display:flex;gap:10px} .frete-input input{flex:1;height:48px;border:1.5px solid var(--linha);border-radius:12px;padding:0 16px;font-family:inherit;font-size:.95rem} .frete-input input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-08)} .frete-result{margin-top:14px;display:flex;flex-direction:column;gap:8px} .frete-opt{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1.5px solid var(--linha);border-radius:12px;font-size:.9rem;cursor:pointer;transition:border-color .2s,background .2s} .frete-opt:hover{border-color:var(--azul);background:var(--azul-08)} .frete-opt b{color:var(--azul)} /* abas */ .tabs{margin-top:64px} .tab-nav{display:flex;gap:6px;border-bottom:1px solid var(--linha);margin-bottom:28px;flex-wrap:wrap} .tab-nav button{padding:14px 20px;font-weight:700;font-size:.95rem;color:var(--cinza);position:relative;transition:color .25s} .tab-nav button.ativo{color:var(--ink)} .tab-nav button.ativo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:var(--azul);border-radius:3px} .tab-pane{display:none;max-width:760px;color:var(--cinza);line-height:1.8} .tab-pane.ativo{display:block;animation:fadeUp .5s} .tab-pane h4{color:var(--ink);margin:18px 0 8px} /* ---------- LISTAGEM / CATEGORIA ---------- */ .cat-hero{background:linear-gradient(160deg,var(--azul-claro),#fff);border-bottom:1px solid var(--linha);padding:46px 0} .cat-hero h1{font-size:clamp(2rem,4vw,3rem)} .cat-hero p{color:var(--cinza);margin-top:10px;max-width:560px} .listing{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;padding:44px 0} .filters{position:sticky;top:calc(var(--header-h) + 20px);background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:8px} .filter-block{padding:18px;border-bottom:1px solid var(--linha)} .filter-block:last-child{border-bottom:none} .filter-block h4{font-size:.95rem;margin-bottom:14px} .filter-block label{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.9rem;cursor:pointer;color:var(--cinza);transition:color .2s} .filter-block label:hover{color:var(--ink)} .filter-block input[type=checkbox]{width:18px;height:18px;accent-color:var(--azul)} .toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap} .toolbar .count{color:var(--cinza);font-size:.92rem} .select{height:46px;border:1.5px solid var(--linha);border-radius:12px;padding:0 40px 0 16px;font-family:inherit;font-weight:600;font-size:.92rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6573' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;cursor:pointer} .select:focus{outline:none;border-color:var(--azul)} /* ---------- CARRINHO ---------- */ .cart-wrap{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start;padding:40px 0} .cart-item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px;border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:14px;align-items:center;transition:box-shadow .25s} .cart-item:hover{box-shadow:var(--sombra)} .cart-item .thumb{width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--fundo)} .cart-item .thumb img{width:100%;height:100%;object-fit:cover} .cart-item h4{font-size:1rem;font-family:var(--sans);font-weight:700} .cart-item .var{font-size:.84rem;color:var(--cinza);margin-top:4px} .cart-item .price{font-family:var(--serif);font-weight:800;font-size:1.15rem;text-align:right} .cart-remove{color:var(--cinza);font-size:.82rem;margin-top:8px;transition:color .2s;display:inline-flex;gap:5px;align-items:center} .cart-remove:hover{color:#e03131} .summary{position:sticky;top:calc(var(--header-h) + 20px);background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:26px;box-shadow:var(--sombra)} .summary h3{font-size:1.25rem;margin-bottom:20px} .summary-row{display:flex;justify-content:space-between;padding:10px 0;font-size:.95rem;color:var(--cinza)} .summary-row.total{border-top:1px solid var(--linha);margin-top:10px;padding-top:18px;font-size:1.3rem;font-weight:800;color:var(--ink);font-family:var(--serif)} .summary-row.total .pix{font-size:.8rem;color:var(--azul);font-weight:700;display:block;text-align:right} .coupon{display:flex;gap:8px;margin:18px 0} .coupon input{flex:1;height:46px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;font-family:inherit} .coupon input:focus{outline:none;border-color:var(--azul)} .empty{text-align:center;padding:80px 20px} .empty .ic{width:90px;height:90px;border-radius:50%;background:var(--azul-08);color:var(--azul);display:grid;place-items:center;margin:0 auto 22px} .empty h2{margin-bottom:10px} .empty p{color:var(--cinza);margin-bottom:26px} /* ---------- CHECKOUT ---------- */ .checkout{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start;padding:40px 0} .steps{display:flex;gap:8px;margin-bottom:32px} .step{flex:1;text-align:center;padding-bottom:14px;border-bottom:3px solid var(--linha);font-weight:700;font-size:.9rem;color:var(--cinza);position:relative} .step.ativo{border-color:var(--azul);color:var(--azul)} .step.feito{border-color:var(--azul);color:var(--ink)} .step .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--linha);color:var(--cinza);font-size:.8rem;margin-right:8px;transition:.3s} .step.ativo .n,.step.feito .n{background:var(--azul);color:#fff} .card-panel{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:28px;margin-bottom:20px} .card-panel h3{font-size:1.15rem;margin-bottom:20px;display:flex;align-items:center;gap:10px} .field{margin-bottom:16px} .field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:7px} .field input,.field select{width:100%;height:50px;border:1.5px solid var(--linha);border-radius:12px;padding:0 16px;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s} .field input:focus,.field select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-08)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .pay-methods{display:flex;flex-direction:column;gap:12px} .pay-method{display:flex;align-items:center;gap:14px;padding:18px;border:1.5px solid var(--linha);border-radius:14px;cursor:pointer;transition:border-color .25s,background .25s} .pay-method:hover{border-color:var(--azul-30)} .pay-method.sel{border-color:var(--azul);background:var(--azul-08)} .pay-method .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--linha);flex:none;display:grid;place-items:center;transition:.2s} .pay-method.sel .radio{border-color:var(--azul)} .pay-method.sel .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--azul)} .pay-method .pm-ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--fundo);color:var(--azul)} .pay-method b{display:block;font-size:.98rem} .pay-method small{color:var(--cinza);font-size:.82rem} .pay-method .pm-tag{margin-left:auto;background:var(--azul);color:#fff;font-size:.72rem;font-weight:800;padding:5px 10px;border-radius:100px} /* pix box */ .pix-box{text-align:center;padding:24px;background:var(--fundo);border-radius:var(--raio);margin-top:16px} .pix-qr{width:200px;height:200px;margin:0 auto 16px;background:#fff;border-radius:16px;padding:12px;box-shadow:var(--sombra-sm);display:grid;place-items:center} .pix-code{display:flex;gap:8px;max-width:420px;margin:0 auto} .pix-code input{flex:1;height:46px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;font-size:.82rem;font-family:monospace} /* ---------- FOOTER ---------- */ .site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:72px 0 0;margin-top:40px} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand .brand{color:#fff;margin-bottom:18px} .footer-brand p{font-size:.92rem;max-width:300px;line-height:1.7} .footer-social{display:flex;gap:10px;margin-top:22px} .footer-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;transition:background .25s,transform .25s,color .25s} .footer-social a:hover{background:var(--azul);transform:translateY(-3px)} .footer-col h5{color:#fff;font-family:var(--sans);font-weight:700;font-size:.98rem;margin-bottom:18px} .footer-col a{display:block;padding:7px 0;font-size:.9rem;transition:color .2s,padding-left .2s} .footer-col a:hover{color:var(--azul);padding-left:5px} .footer-news input{width:100%;height:50px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);border-radius:12px;padding:0 16px;color:#fff;font-family:inherit;margin-bottom:12px} .footer-news input::placeholder{color:rgba(255,255,255,.4)} .footer-news input:focus{outline:none;border-color:var(--azul)} .footer-pay{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap} .footer-pay span{padding:6px 10px;background:rgba(255,255,255,.08);border-radius:8px;font-size:.72rem;font-weight:700} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:24px 0;font-size:.84rem;flex-wrap:wrap;gap:12px} /* ---------- TOAST / OVERLAY DO CARRINHO ---------- */ .toast{ position:fixed;bottom:26px;left:50%;transform:translate(-50%,140%); background:var(--ink);color:#fff;padding:15px 22px;border-radius:14px;box-shadow:var(--sombra-lg); display:flex;align-items:center;gap:12px;font-weight:600;font-size:.92rem;z-index:200;transition:transform .5s cubic-bezier(.2,.8,.2,1);max-width:90vw; } .toast.show{transform:translate(-50%,0)} .toast .ic{width:30px;height:30px;border-radius:50%;background:var(--azul);display:grid;place-items:center;flex:none} /* drawer carrinho */ .drawer-backdrop{position:fixed;inset:0;background:rgba(10,14,20,.45);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.4s;z-index:90} .drawer-backdrop.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:100;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:var(--sombra-lg)} .drawer.open{transform:translateX(0)} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--linha)} .drawer-head h3{font-size:1.2rem} .drawer-body{flex:1;overflow-y:auto;padding:18px 24px} .drawer-foot{padding:24px;border-top:1px solid var(--linha)} /* ---------- ANIMAÇÕES DE SCROLL ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* shimmer skeleton */ .skeleton{background:linear-gradient(90deg,var(--fundo) 25%,#eef3f7 50%,var(--fundo) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite} @keyframes shimmer{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* ---------- RESPONSIVO ---------- */ @media (max-width:1080px){ .hero-inner{grid-template-columns:1fr;gap:40px} .hero-visual{max-width:460px;margin-inline:auto;width:100%} .prod-grid,.cat-grid{grid-template-columns:repeat(3,1fr)} .pdp{grid-template-columns:1fr;gap:36px} .gallery{position:static} .checkout,.cart-wrap{grid-template-columns:1fr} .summary,.filters{position:static} .listing{grid-template-columns:1fr} .filters{display:none} .footer-top{grid-template-columns:1fr 1fr} } @media (max-width:760px){ :root{--header-h:68px} .trust-grid{grid-template-columns:1fr 1fr} .prod-grid,.cat-grid{grid-template-columns:1fr 1fr;gap:14px} .promo-banner{grid-template-columns:1fr;text-align:center} .promo-visual{display:none} .search-wrap{display:none} .main-nav{ position:fixed;top:0;right:0;bottom:0;width:300px;max-width:88vw;background:#fff;flex-direction:column;align-items:stretch; padding:90px 20px 30px;gap:4px;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1); box-shadow:var(--sombra-lg);z-index:80;overflow-y:auto; } .main-nav.open{transform:translateX(0)} .nav-list > li > a{padding:14px 16px;border-radius:12px;font-size:1.05rem} .nav-list > li > a::after{display:none} .menu-toggle{display:grid} .has-mega .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 14px;min-width:0;background:transparent} .hero-stats{gap:22px} .pdp-perks,.grid-2,.grid-3{grid-template-columns:1fr} .pdp-actions .btn{min-width:100%} .footer-top{grid-template-columns:1fr} .drawer{width:100%} .nav-backdrop{position:fixed;inset:0;background:rgba(10,14,20,.4);opacity:0;visibility:hidden;transition:.3s;z-index:75} .nav-backdrop.open{opacity:1;visibility:visible} } @media (max-width:420px){ .prod-grid,.cat-grid{grid-template-columns:1fr} .cart-item{grid-template-columns:72px 1fr} .cart-item .price{grid-column:1/-1;text-align:left} } /* ===== ITENS DO DRAWER (carrinho lateral) ===== */ .drawer-items{display:flex;flex-direction:column;gap:14px;padding:4px 2px} .drawer-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding-bottom:14px;border-bottom:1px solid var(--linha)} .drawer-item:last-child{border-bottom:none} .drawer-item .thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--fundo);display:block;flex:none} .drawer-item .thumb img{width:100%;height:100%;object-fit:cover} .drawer-item .thumb .ph-mini{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:1.5rem;color:var(--azul-30);background:linear-gradient(150deg,var(--azul-claro),#fff)} .di-info{min-width:0} .di-info h4{font-family:var(--sans);font-size:.9rem;font-weight:700;line-height:1.3;margin:0} .di-info .var{display:block;font-size:.76rem;color:var(--cinza);margin-top:3px} .di-foot{display:flex;align-items:center;gap:10px;margin-top:7px} .di-qtd{font-size:.8rem;color:var(--cinza)} .di-remove{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--cinza);background:transparent;transition:.2s} .di-remove:hover{background:#fff0f0;color:#e03131} .di-sub{font-family:var(--serif);font-weight:800;font-size:.95rem;white-space:nowrap} .drawer-resumo{margin-top:18px;padding-top:16px;border-top:1px dashed var(--linha)} .dr-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--cinza);padding:4px 0} .dr-row b{color:var(--ink)} .dr-row.pix b{color:var(--azul)} .dr-frete{margin-top:10px;font-size:.82rem;color:var(--cinza);background:var(--azul-08);padding:10px 12px;border-radius:10px;text-align:center} .dr-frete b{color:var(--azul)} .dr-frete-ok{margin-top:10px;font-size:.82rem;color:#1c7c39;background:#eafaf0;padding:10px 12px;border-radius:10px;text-align:center;font-weight:600} .drawer-foot-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:700} .drawer-foot-total b{font-family:var(--serif);font-size:1.3rem} /* ===== CHECKOUT: status/extras ===== */ .pix-timer{font-size:.82rem;color:var(--cinza);margin-top:10px} .pix-status{margin-top:14px;font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;background:var(--azul-08);color:var(--azul)} .pix-status.pago{background:#eafaf0;color:#1c7c39} .installments{margin-top:10px} .card-row{display:grid;grid-template-columns:1fr;gap:14px} .alert-demo{background:#fff8e6;border:1px solid #ffe3a3;color:#7a5b00;border-radius:12px;padding:12px 16px;font-size:.85rem;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start} .alert-demo svg{flex:none;margin-top:1px} .ship-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--linha);border-radius:12px;cursor:pointer;transition:.2s;margin-bottom:10px} .ship-opt:hover{border-color:var(--azul-30)} .ship-opt.sel{border-color:var(--azul);background:var(--azul-08)} .ship-opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--linha);flex:none;display:grid;place-items:center} .ship-opt.sel .radio{border-color:var(--azul)} .ship-opt.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--azul)} .ship-opt .so-main{flex:1} .ship-opt b{display:block;font-size:.92rem} .ship-opt small{color:var(--cinza);font-size:.8rem} .ship-opt .so-preco{font-family:var(--serif);font-weight:800} .mini-cart{display:flex;flex-direction:column;gap:12px;margin-bottom:18px} .mini-cart .mc-item{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;font-size:.86rem} .mini-cart .mc-thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--fundo);position:relative} .mini-cart .mc-thumb img{width:100%;height:100%;object-fit:cover} .mini-cart .mc-thumb .ph-mini{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;color:var(--azul-30)} .mini-cart .mc-thumb .mc-qtd{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center} .mc-nome{min-width:0} .mc-nome b{display:block;font-weight:600;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mc-nome small{color:var(--cinza);font-size:.74rem} .success-wrap{max-width:560px;margin:0 auto;text-align:center;padding:60px 20px} .success-ic{width:96px;height:96px;border-radius:50%;background:#eafaf0;color:#1c7c39;display:grid;place-items:center;margin:0 auto 26px;animation:pop .5s cubic-bezier(.2,.9,.3,1.3)} @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .success-box{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px;margin:26px 0;text-align:left} /* ================================================================= NDI AUTOPECAS — marca, topbar, busca, WhatsApp e mobile ================================================================= */ /* ---- Lista de navegação (sem bolinhas) ---- */ .main-nav{list-style:none} .nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav-list li{list-style:none} .nav-list .chev{vertical-align:-2px;margin-left:3px;opacity:.7;transition:transform .25s} .has-mega:hover .chev{transform:rotate(180deg)} /* cabeçalho interno do menu (só aparece no mobile) */ .nav-mobile-head{display:none} /* ---- Marca (logo NDI em SVG) ---- */ .brand{gap:12px} .brand .mark{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none; background:linear-gradient(160deg,#f3f7f9,#e7eef2);border:1px solid var(--linha); box-shadow:none;color:inherit;font-size:0; transition:transform var(--transicao); } .brand:hover .mark{transform:translateY(-1px) rotate(-3deg)} .brand .mark .mk-svg{width:26px;height:30px;display:block} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-text b{font-family:var(--serif);font-weight:700;font-size:1.22rem;letter-spacing:.02em;color:var(--ink)} .brand-text i{font-family:var(--serif);font-style:normal;font-weight:500;font-size:.62rem;letter-spacing:.34em;color:var(--cinza);margin-top:2px} /* ---- Topbar com ícones SVG ---- */ .tb-item{display:inline-flex;align-items:center;gap:8px} .tb-item svg{width:15px;height:15px;flex:none;stroke:var(--cyan)} .topbar-track b{color:var(--cyan)} /* ---- Busca profissional ---- */ .search-wrap{ flex:1;max-width:440px;height:48px;display:flex;align-items:center; background:#fff;border:1.6px solid var(--linha);border-radius:14px;padding-left:14px;overflow:hidden; transition:border-color .25s,box-shadow .25s; } .search-wrap .s-ic{position:static;transform:none;color:var(--cinza);flex:none;margin-right:6px} .search-wrap input{ flex:1;height:100%;border:none;background:transparent;padding:0 10px 0 0; font-family:var(--sans);font-size:.95rem;color:var(--ink);box-shadow:none;border-radius:0; } .search-wrap input:focus{outline:none;box-shadow:none;background:transparent;border:none} .search-wrap input::placeholder{color:#8a97a3} .search-wrap:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-08)} .s-btn{ align-self:stretch;padding:0 20px;background:var(--azul);color:#06252a; font-family:var(--sans);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center; transition:background .25s; } .s-btn:hover{background:var(--azul-escuro);color:#fff} /* busca dentro do menu mobile */ .search-mobile{display:none} /* ---- Botão flutuante de WhatsApp ---- */ .wa-float{ position:fixed;right:20px;bottom:20px;z-index:90; width:60px;height:60px;border-radius:50%;display:grid;place-items:center; background:#25d366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .25s,box-shadow .25s; } .wa-float svg{width:32px;height:32px;fill:#fff} .wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 40px -10px rgba(37,211,102,.7)} .wa-float::after{ content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366; animation:waPulse 2.4s ease-out infinite; } @keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} /* ---- Refinos mobile ---- */ @media (max-width:760px){ .header-inner{gap:12px} .brand-text b{font-size:1.08rem} .brand-text i{font-size:.56rem;letter-spacing:.3em} .nav-mobile-head{ display:flex;align-items:center;justify-content:space-between; padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--linha); } .nav-list{flex-direction:column;align-items:stretch;gap:2px;width:100%} .nav-list > li > a{display:block;width:100%} .search-mobile{ display:flex;align-items:center;height:46px;margin:0 0 12px; background:var(--fundo);border:1.5px solid var(--linha);border-radius:12px;padding-left:12px;overflow:hidden; } .search-mobile svg{color:var(--cinza);flex:none;margin-right:6px} .search-mobile input{flex:1;height:100%;border:none;background:transparent;font-family:var(--sans);font-size:.95rem;color:var(--ink)} .search-mobile input:focus{outline:none} .search-mobile button{align-self:stretch;padding:0 16px;background:var(--azul);color:#06252a;font-weight:700;font-size:.86rem} .wa-float{width:54px;height:54px;right:16px;bottom:16px} .wa-float svg{width:28px;height:28px} } @media (max-width:380px){ .brand-text i{display:none} } /* marca no rodapé (fundo escuro) */ .site-footer .brand-text b{color:#fff} .site-footer .brand-text i{color:rgba(255,255,255,.55)} .site-footer .brand .mark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} .site-footer .brand .mark .mk-svg path{fill:#fff} /* ================================================================= MINHA CONTA (cliente) ================================================================= */ .account-narrow{max-width:1000px} .acc-flash{padding:14px 18px;border-radius:14px;margin-bottom:22px;font-weight:600;font-size:.92rem} .acc-flash.is-ok{background:#eafaf0;color:#1c7c39;border:1px solid #bdeccb} .acc-flash.is-erro{background:#fff0f0;color:#c0341d;border:1px solid #f5c6c0} /* login / cadastro */ .auth-head{text-align:center;max-width:460px;margin:0 auto 26px} .auth-head .eyebrow{justify-content:center} .auth-head h1{margin:8px 0 6px} .auth-card{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:10px} .auth-tabs{display:flex;gap:4px;background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:5px;margin:8px 8px 18px} .auth-tab{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:.95rem;color:var(--cinza);transition:.2s} .auth-tab.active{background:#fff;color:var(--ink);box-shadow:var(--sombra-sm)} .auth-pane{display:none;flex-direction:column;gap:14px;padding:0 14px 16px} .auth-pane.active{display:flex} /* campos */ .fld{display:flex;flex-direction:column;gap:7px} .fld span{font-size:.82rem;font-weight:600;color:var(--cinza)} .fld input{height:48px;border:1.6px solid var(--linha);border-radius:12px;padding:0 14px;font-family:var(--sans);font-size:.96rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s} .fld input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-08)} .fld input:disabled{background:var(--fundo);color:var(--cinza)} /* painel logado */ .acc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap} .acc-top h1{margin-top:6px} .acc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start} .acc-orders{grid-row:span 2} .acc-box{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px} .acc-box h3{font-family:var(--serif);font-size:1.15rem;margin-bottom:16px} .acc-form{display:flex;flex-direction:column;gap:13px} .acc-empty{text-align:center;padding:24px 0;color:var(--cinza)} .acc-empty p{margin-bottom:14px} /* pedidos */ .order-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--linha)} .order-row:last-child{border-bottom:none} .order-main{display:flex;flex-direction:column;gap:2px;min-width:0} .order-main b{font-size:.98rem} .order-main small{font-size:.78rem;color:var(--cinza)} .order-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none} .order-total{font-family:var(--serif);font-weight:800} .order-status{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:100px} .order-status.st-ok{background:#eafaf0;color:#1c7c39} .order-status.st-warn{background:#fff6e6;color:#9a6700} .order-status.st-info{background:var(--azul-08);color:var(--azul-escuro)} .order-status.st-bad{background:#fdecea;color:#c0341d} @media (max-width:760px){ .acc-grid{grid-template-columns:1fr} .acc-orders{grid-row:auto} } /* ================================================================= LOGO (imagem logo.png) + MODAL DE BUSCA ================================================================= */ .brand{gap:0} .brand-logo{height:116px;width:auto;display:block;object-fit:contain} .site-header.scrolled .brand-logo{height:100px;transition:height .3s} .brand-logo-footer{height:46px;filter:brightness(0) invert(1);opacity:.92} @media (max-width:760px){ /* A logo é um wordmark largo; a 108px de altura ela ficava com ~430px de largura e estourava o header no celular (faixa branca / layout quebrado). Reduz para um tamanho que cabe e deixa encolher se faltar espaço. Cobre também o estado .scrolled (que voltava a 100px ao rolar). */ .brand{flex:0 1 auto;min-width:0} .header-actions{flex:none} .brand-logo, .site-header.scrolled .brand-logo{height:46px;width:auto;max-width:100%} } /* botão lupa */ .search-trigger{color:var(--ink)} /* modal */ .search-modal{position:fixed;inset:0;z-index:120;display:none} .search-modal.open{display:block} .search-modal-backdrop{position:absolute;inset:0;background:rgba(15,25,32,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s} .search-modal.open .search-modal-backdrop{opacity:1} .search-modal-card{ position:relative;max-width:680px;margin:11vh auto 0;background:#fff;border-radius:20px; box-shadow:0 40px 90px -20px rgba(10,16,22,.5);padding:10px; transform:translateY(-14px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s; } .search-modal.open .search-modal-card{transform:none;opacity:1} .search-modal-form{display:flex;align-items:center;gap:10px;padding:8px 10px} .search-modal-form .sm-ic{color:var(--azul);flex:none} .search-modal-form input{ flex:1;height:56px;border:none;background:transparent;font-family:var(--sans); font-size:1.25rem;font-weight:500;color:var(--ink); } .search-modal-form input:focus{outline:none} .search-modal-form input::placeholder{color:#9aa6b1} .sm-close{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--cinza);flex:none;transition:.2s} .sm-close:hover{background:var(--fundo);color:var(--ink)} .search-pop{border-top:1px solid var(--linha);padding:16px 18px 14px} .search-pop-label{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)} .search-pop-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .search-pop-chips a{ padding:8px 14px;border:1.5px solid var(--linha);border-radius:100px;font-size:.88rem;font-weight:600; color:var(--ink);transition:.2s; } .search-pop-chips a:hover{border-color:var(--azul);color:var(--azul-escuro);background:var(--azul-08)} @media (max-width:560px){ .search-modal-card{margin:0;min-height:100%;border-radius:0;padding-top:8px} .search-modal-form input{font-size:1.1rem} }