/* Página de produto (carretinha-utilitaria.html): visão 360°, caixa de compra e ficha técnica.
   Carrega depois de styles.css e fachada.css. */

/* ---------- Caminho ---------- */
.crumb { background: #fff; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.crumb .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 10px; }
.crumb a { text-underline-offset: 3px; }
.crumb [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Topo do produto ---------- */
.prod { padding-block: 22px 44px; background: #fff; }
.prod__in { display: grid; gap: 18px; }

/* ---------- Visão 360° ---------- */
.v360__stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(ellipse 70% 46% at 50% 76%, #dfe8e2 0, rgba(223, 232, 226, 0) 100%), linear-gradient(#fbfcfb, #eef3f0);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.v360__stage.is-grabbing { cursor: grabbing; }
.v360__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s; }
.is-ready .v360__stage canvas { opacity: 1; }
.v360__layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.is-ready .v360__layer { opacity: 1; }

.v360__dot {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--f-green); color: #fff;
  font: 700 .9rem/1 var(--body); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; pointer-events: auto;
  transition: opacity .2s, background-color .15s, scale .15s;
}
/* área de toque maior que o círculo */
.v360__dot::before { content: ""; position: absolute; inset: -9px; }
.v360__dot:hover { scale: 1.12; }
.v360__dot.is-on { background: var(--f-yellow); color: var(--f-navy); scale: 1.2; }
.v360__dot.is-back { opacity: 0; pointer-events: none; }

.v360__dim { position: absolute; left: 0; top: 0; margin: -13px 0 0 -30px; width: 60px; text-align: center; padding: 3px 0; border-radius: 3px; background: var(--f-green); color: #fff; font: 700 .8rem/1.2 var(--body); font-variant-numeric: tabular-nums; }

.v360__badge { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 3px; background: rgba(255, 255, 255, .88); color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
.v360__hint { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 7px 14px; border-radius: 999px; background: var(--f-navy); color: #fff; font-size: .86rem; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.is-touched .v360__hint { opacity: 0; }

/* Sem WebGL: mostra a foto real no lugar */
.v360__fallback { display: none; position: absolute; inset: 0; }
.v360__fallback img { width: 100%; height: 100%; object-fit: cover; }
.v360--fallback .v360__fallback { display: block; }
.v360--fallback .v360__hint, .v360--fallback .v360__badge, .v360--fallback .v360__bar { display: none; }

.v360__bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 10px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.seg button { min-height: 40px; padding: 6px 12px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--text); font: 600 .86rem/1 var(--body); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--tint); }
.seg button[aria-pressed="true"] { background: var(--f-green); color: #fff; }

.v360__panel { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line); border-left: 6px solid var(--f-green); border-radius: var(--r); background: var(--tint); }
.v360__count { font: 600 .74rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--f-green); }
.v360__panel h2 { margin-top: 6px; font-size: 1.5rem; }
.v360__panel > p:not(.v360__count) { margin-top: 6px; font-size: .97rem; color: var(--muted); min-height: 3.1em; }
.v360__nav { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- Caixa de compra ---------- */
.prod__head h1 { margin-top: 6px; font-size: clamp(2.3rem, 8vw, 3.2rem); color: var(--f-navy); }
.buy__dim { margin-top: 6px; font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.buy__lead { color: var(--muted); }
.buy__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); font-size: .84rem; color: var(--muted); }
.buy__specs li { padding: 11px 13px; background: #fff; }
.buy__specs strong { display: block; font: 800 1.3rem/1.05 var(--display); text-transform: uppercase; color: var(--text); }
.buy__cta { display: grid; gap: 10px; margin-top: 18px; padding: 18px; border-radius: var(--r); background: var(--tint); }
.buy__price { font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; color: var(--f-green); }
.buy__price span { display: block; margin-bottom: 3px; font: 600 .8rem/1.3 var(--body); text-transform: none; color: var(--muted); }
.buy__cta .btn--line { background: #fff; }
.buy__trust { display: grid; gap: 7px; margin-top: 16px; font-size: .92rem; }
.buy__trust li { display: flex; gap: 8px; align-items: flex-start; }
.buy__trust svg { margin-top: 3px; color: var(--f-green); }

/* ---------- Lista de pontos ---------- */
.pts { display: grid; gap: 10px; }
.pt { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--muted); font: 400 .95rem/1.45 var(--body); text-align: left; cursor: pointer; }
.pt:hover { border-color: var(--f-green); }
.pt.is-on { border-color: var(--f-green); box-shadow: inset 4px 0 0 var(--f-green); }
.pt strong { display: block; margin-bottom: 2px; font: 700 1.25rem/1.15 var(--display); text-transform: uppercase; color: var(--f-navy); }
.pt__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--f-green); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Fotos reais ---------- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shots .gal { border-radius: var(--r); overflow: hidden; }
.shots .gal:first-child { grid-column: 1 / -1; }
.shots .gal:first-child .gal__track { aspect-ratio: 3 / 2; }

/* ---------- Ficha ---------- */
.ficha { display: grid; gap: 28px; }
.specs { margin: 0; border-top: 2px solid var(--f-navy); }
.specs div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.specs dt { font-weight: 600; color: var(--muted); }
.specs dd { margin: 0; }
.extras { align-self: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.extras h3 { font-size: 1.4rem; text-transform: uppercase; }
.extras ul { display: grid; gap: 12px; margin: 14px 0 18px; font-size: .94rem; color: var(--muted); }
.extras li strong { display: block; color: var(--text); }

/* ---------- Outros modelos ---------- */
.rel { display: grid; gap: 12px; }
.rel__card { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--muted); font-size: .9rem; text-decoration: none; }
.rel__card:hover { border-color: var(--f-green); }
.rel__card img { width: 104px; height: 84px; object-fit: cover; border-radius: 4px; }
.rel__card strong { display: block; font: 700 1.25rem/1.15 var(--display); text-transform: uppercase; color: var(--f-navy); }

@media (min-width: 640px) {
  .pts { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: 1.5fr 1fr 1fr; }
  .shots .gal:first-child { grid-column: auto; }
  .shots .gal__track, .shots .gal:first-child .gal__track { aspect-ratio: auto; height: 320px; }
  .rel { grid-template-columns: repeat(3, 1fr); }
  .rel__card { grid-template-columns: 1fr; }
  .rel__card img { width: 100%; height: 170px; }
}
@media (min-width: 980px) {
  .prod { padding-block: 30px 64px; }
  .prod__in { grid-template-columns: 1.35fr .65fr; grid-template-areas: "view head" "view buy"; grid-template-rows: auto 1fr; gap: 18px 40px; align-items: start; }
  .v360 { grid-area: view; }
  .prod__head { grid-area: head; }
  .buy { grid-area: buy; }
  .v360__stage { aspect-ratio: 16 / 11; }
  .prod__head h1 { font-size: 2.9rem; }
  .pts { grid-template-columns: repeat(3, 1fr); }
  .shots .gal__track, .shots .gal:first-child .gal__track { height: 400px; }
  .ficha { grid-template-columns: 1.4fr .6fr; gap: 56px; }
  .extras { position: sticky; top: calc(var(--top-h) + 22px); }
}