/* Acabamento visual: mantém a identidade GP Toys e o conteúdo do catálogo. */
:root{
  --bg:#060D1D;--bg2:#0C1930;--panel:#102039;--panel2:#132540;
  --txt:#F1F5FC;--muted:#B6C5DF;--dim:#A4B5D2;
  --line:rgba(171,195,231,.16);--line2:rgba(171,195,231,.3);
  --header-height:80px;--subnav-height:70px;
}
[hidden]{display:none!important}
body{font-size:1rem;line-height:1.5}
body::before{display:none}
:is(button,a,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wrap{max-width:1440px;padding-inline:32px}

/* Topo compacto; as alturas reais alimentam as posições fixas. */
header{background:rgba(6,13,29,.97);backdrop-filter:blur(8px)}
.top{min-height:80px;gap:20px;padding-block:14px}
.brand{gap:12px;flex:1;min-width:0}
.brand>div{min-width:0}
.brand img{width:48px;height:48px}
.brand .t1{font:700 1.25rem/1.2 'Space Grotesk',sans-serif;letter-spacing:.08em}
.brand .t2{font-size:.75rem;letter-spacing:.06em;white-space:normal;color:var(--muted);margin-top:4px}
.top-actions{flex:none;gap:10px}
.btn{min-height:48px;font-size:1rem;line-height:1.3;padding:12px 18px;border-radius:10px;box-shadow:none;white-space:normal}
.btn-gold{background:var(--gold);box-shadow:none}
.btn-wa{box-shadow:none}
.btn-line{color:var(--txt)}
.btn-cart{white-space:nowrap}
.btn-cart .badge{font-size:.8125rem;min-width:22px;height:22px;top:-7px;right:-7px}

/* Capa no salão azul das campanhas: produto inteiro e contato com o piso visíveis. */
.hero{background:linear-gradient(120deg,#0D213F 0%,var(--bg) 75%)}
.hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);padding-block:48px}
.kicker{font-size:.8125rem;letter-spacing:.1em;line-height:1.5}
.kicker::before{width:6px;height:6px}
.hero h1{font:700 clamp(2rem,3.4vw,3.5rem)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:18px 0 20px;max-width:18ch}
.hero p{font-size:1.0625rem;line-height:1.7;max-width:57ch}
.hero-cta{margin-top:26px}
.hero-img{max-width:360px;width:100%;justify-self:center;padding:0;overflow:hidden;border:1px solid var(--line2);border-radius:16px;background:var(--bg2);box-shadow:none}
.hero-img img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;padding:0;border-radius:0;filter:none}
.hero-img .corner{display:none}
.hero-stats{gap:30px;margin-top:28px}
.hst b{font-size:1.625rem;line-height:1.3}
.hst span{font-size:.8125rem;color:var(--muted);letter-spacing:.03em;text-transform:none}

/* Navegação com alvos de toque e foco visíveis. */
.subnav{top:var(--header-height);scroll-margin-top:var(--header-height);background:rgba(6,13,29,.97);backdrop-filter:blur(8px)}
.subnav .wrap{gap:20px;padding-block:12px}
.search{min-width:230px;min-height:46px;gap:10px;padding:9px 12px;border-radius:10px;background:var(--bg2)}
.search:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.search input{width:190px;min-width:0;font-size:1rem;outline:none}
.search input::placeholder{color:var(--dim)}
.cats{min-width:0;gap:8px;padding:4px;align-items:center}
.cat{min-height:44px;padding:9px 14px;font-size:.875rem;line-height:1.3;color:var(--muted)}
.cat:hover{background:var(--panel);color:#fff}
.cat b{margin-left:7px}

/* Fotos maiores, como na amostra aprovada: até três colunas no desktop. */
main{padding-top:40px;padding-bottom:24px}
.sec{margin-bottom:56px;scroll-margin-top:calc(var(--header-height) + var(--subnav-height) + 24px)}
.sec-head{gap:12px;margin-bottom:8px;align-items:baseline}
.sec-head h2{font:600 clamp(1.5rem,2vw,1.9rem)/1.25 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.sec-head .n{font-size:.875rem;color:var(--muted)}
.sec-tag{font-size:1rem;line-height:1.6;margin-bottom:24px}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
.card{min-width:0;background:var(--panel);border-radius:16px;box-shadow:none;transition:border-color .15s ease}
.card:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.ph{aspect-ratio:auto;padding-bottom:60px;background:#fff}
.photo-open{position:relative;display:block;height:auto;aspect-ratio:4/3;width:100%;padding:0}
.photo-open>img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.photo-open span{top:10px;right:10px;font-size:.8125rem;line-height:1.2;padding:7px 9px;border-radius:7px;background:#172339}
.thumbs{left:14px;right:14px;bottom:12px;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.photo-thumb{flex:none;width:44px;height:44px;border-radius:8px;border-color:#CCD5E2;opacity:1}
.thumbs .photo-thumb img{object-fit:contain}
.photo-thumb.on{border-color:#2265BD}
.photo-thumb:focus-visible{outline:2px solid #2265BD;outline-offset:-2px}
.ph.is-scene{background:#08162A}
.ph.is-scene .photo-open{background:#030812}
.ph.is-scene .photo-open>img{inset:0;width:100%;height:100%;object-fit:contain}
.ph.is-scene .photo-thumb{border-color:#486381;background:#fff}
.ph.is-scene .photo-thumb.on{border-color:var(--gold)}
.gallery-view.is-scene{background:#08162A}
.body{padding:20px;gap:14px}
.nome{font-size:1.125rem;font-weight:600;line-height:1.35;min-height:2.7em;letter-spacing:-.015em}
.specs{display:flex;flex-wrap:wrap;border-radius:10px}
.spec{flex:1;min-width:0;padding:10px;background:rgba(171,195,231,.035)}
.spec.full{flex:0 0 100%;border-bottom:1px solid var(--line)}
.spec.full+.spec{border-left:0}
.spec b{font-size:1rem;line-height:1.45;font-variant-numeric:tabular-nums}
.spec span{display:block;font-size:.875rem;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.extra{font-size:.875rem;line-height:1.6;color:var(--muted)}
.acts{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px}
.acts .btn-gold{font-size:.9375rem;min-height:48px;padding:10px 8px;white-space:normal}
.acts .btn-wa-sq{width:48px;height:48px;border-radius:10px}
.payback-open{min-height:48px;padding:12px 0 0;font-size:.875rem;line-height:1.45;align-items:center}

/* Orçamento: painel modal, alvos maiores e nenhum controle oculto focável. */
.fab-cart{font-size:1rem;background:var(--gold);box-shadow:0 6px 20px #0003;bottom:20px;right:20px}
.fab-cart .badge{font-size:.875rem}
.drawer{inset:0 0 0 auto;margin:0;width:min(460px,100vw);height:100dvh;max-width:none;max-height:none;padding:0;display:none;transform:none;transition:none;border:0;border-left:1px solid var(--line);background:var(--bg2);color:var(--txt)}
.drawer[open]{display:flex}
.drawer::backdrop{background:rgba(2,5,14,.78);backdrop-filter:blur(3px)}
.dr-head{gap:16px;padding:18px 20px}
.dr-head h3{font:600 1.2rem/1.3 'Space Grotesk',sans-serif;letter-spacing:.015em}
.dr-head button{min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:#fff}
.dr-list{min-height:0;padding:16px 20px;gap:14px}
.dr-empty{font-size:1rem;color:var(--muted)}
.item{display:grid;grid-template-columns:60px minmax(0,1fr) 44px;gap:12px;padding:14px;border-radius:12px}
.item img{grid-column:1;grid-row:1;width:60px;height:54px;object-fit:contain;background:#fff;padding:3px}
.item .inf{grid-column:2/-1;grid-row:1}
.item .inf .n{font-size:1rem;line-height:1.35}
.item .inf .s{font-size:.875rem;color:var(--muted);line-height:1.4}
.qty{grid-column:1/3;gap:6px}
.qty button{width:44px;height:44px;font-size:1.125rem;color:var(--txt)}
.qty span{min-width:32px;font-size:1rem}
.item .rm{grid-column:3;min-width:44px;min-height:44px;border-radius:8px;border:1px solid var(--line);color:var(--muted);font-size:1.3rem}
.dr-foot{padding:16px 20px max(20px,env(safe-area-inset-bottom))}
.dr-foot .limpar{min-height:44px;font-size:.875rem;color:var(--muted)}
.dr-note{font-size:.875rem;color:var(--muted);line-height:1.5}
.toast{max-width:calc(100vw - 32px);width:max-content;font-size:.875rem;line-height:1.4;text-align:center}
.gallery-head h2{font-size:1.2rem;font-weight:600}
.gallery-hint{font-size:.875rem}
.gallery-count,.gallery-zoom{font-size:.875rem}
footer{font-size:.875rem;color:var(--muted);line-height:1.6;padding-inline:20px}

/* A seleção comparativa de seis produtos é restrita à URL ?amostra=salao. */
.sample-preview .hero,.sample-preview .subnav{display:none}
.sample-review{padding-top:40px;padding-bottom:28px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:24px;border-bottom:1px solid var(--line)}
.sample-review-copy{flex:1 1 460px}
.sample-review h1{font:600 clamp(1.6rem,3vw,2.2rem)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.025em;margin:10px 0 12px}
.sample-review-copy p{font-size:1rem;line-height:1.6;color:var(--muted);max-width:62ch}
.sample-review-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.sample-switch{display:flex;gap:4px;background:var(--bg2);padding:4px;border:1px solid var(--line2);border-radius:12px}
.sample-switch button{min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:10px 16px;font:inherit;font-size:.9375rem;font-weight:600;line-height:1.4;cursor:pointer}
.sample-switch button[aria-pressed="true"]{background:var(--gold);color:#0B1426}
.sample-back{color:var(--muted);font-size:.875rem;min-height:28px}
.sample-note{flex:0 0 100%;font-size:.875rem;line-height:1.5;color:var(--muted)}
.sample-preview main{padding-top:28px}
.sample-preview .sec-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sample-preview .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.sample-preview .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .sample-review{padding-top:24px;gap:18px}
  .sample-review-actions{width:100%;align-items:stretch;gap:10px}
  .sample-switch button{flex:1}
  .sample-back{padding-block:8px}
  .sample-preview .grid{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:1100px){
  .brand .t2{max-width:30ch}
  .hero .wrap{gap:28px}
  .subnav .wrap{gap:12px}
}
@media(max-width:820px){
  .wrap{padding-inline:24px}
  .top{min-height:72px;padding-block:12px;gap:16px}
  .brand .t2{display:none}
  .brand img{width:44px;height:44px}
  .brand .t1{font-size:1.125rem}
  .top .btn-wa .lbl{display:none}
  .top .btn-wa{width:48px;padding:12px;flex:none}
  .hero .wrap{grid-template-columns:1fr;gap:22px;padding-block:32px}
  .hero h1{max-width:22ch;font-size:clamp(2rem,5.7vw,2.6rem)}
  .hero-img{order:0;max-width:300px}
  .hero-stats{gap:24px;margin-top:22px}
  .subnav{top:var(--header-height)}
  .subnav .wrap{flex-direction:column;align-items:stretch;gap:8px;padding-block:10px}
  .search{min-width:0;min-height:44px}
  .search input{width:100%}
  .sec{scroll-margin-top:calc(var(--header-height) + var(--subnav-height) + 20px)}
  .fab-cart{display:none!important}
  .toast{bottom:20px}
  .gallery{width:100vw;height:100dvh;border:0;border-radius:0}
  .gallery-head h2{font-size:1.0625rem}
  .gallery-hint{font-size:.875rem}
}
@media(max-width:600px){
  .wrap{padding-inline:16px}
  .top{min-height:68px;padding-block:10px;gap:12px}
  .brand{gap:8px}
  .brand img{width:40px;height:40px}
  .brand .t1{font-size:1.0625rem;letter-spacing:.055em}
  .top-actions{gap:8px}
  .top .btn-cart{width:44px;min-height:44px;padding:8px}
  .top .cart-label{display:none}
  .top .btn-wa{width:44px;min-height:44px;padding:10px}
  .hero .wrap{padding-block:28px;gap:20px}
  .hero h1{font-size:clamp(1.9rem,8vw,2.4rem);margin:14px 0 16px}
  .hero p{font-size:1rem;line-height:1.6}
  .hero-cta{gap:10px;margin-top:20px}
  .hero-cta .btn{flex:1 1 auto;font-size:.9375rem}
  .hero-img{max-width:300px}
  .hero-stats{gap:22px}
  .hst b{font-size:1.5rem}
  .hst span{font-size:.8125rem}
  main{padding-top:28px}
  .grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec{margin-bottom:40px}
  .sec-head h2{font-size:1.5rem}
  .sec-tag{font-size:.9375rem;margin-bottom:20px}
  .body{padding:18px;gap:14px}
  .nome{min-height:0}
  .dr-head,.dr-list,.dr-foot{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}