/* =====================================================================
   AQUORA · C · produto.css — galeria + caixa de compra (referência: Jolie), barra fixa do celular
   ===================================================================== */
.pdp { padding: calc(var(--topo-h) + 14px) var(--g) clamp(64px, 9vw, 120px); }
.migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .78rem; color: var(--tinta-2); margin-bottom: 14px; }
.migalha a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
.pdp-grade { display: grid; gap: 30px; }
@media (min-width: 1000px) {
  .pdp-grade { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); align-items: start; }
  .galeria { position: sticky; top: calc(var(--topo-h) + 16px); }
}

/* ---------- galeria ---------- */
.galeria { min-width: 0; }
.gal-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--raio); box-shadow: var(--sh-1); cursor: grab; }
.gal-trilho::-webkit-scrollbar { display: none; }
.gal-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.gal-item { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 1 / 1.06; overflow: hidden; margin: 0; }
@media (min-width: 1000px) { .gal-item { aspect-ratio: 1 / .92; } }
.gal-cena { position: absolute; inset: 0; display: grid; place-items: center; }
.gal-leg { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 3; }

/* cena 1: o chuveiro sobre água espelhada */
.gal-agua { background:
  radial-gradient(ellipse 40% 36% at 50% 34%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
  linear-gradient(180deg, #F6F1EB 0%, #EEEAE6 50%, #E2E1E0 64%, #D3D3D5 100%); }
.gal-agua::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; bottom: 0; border-top: 1px solid rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, rgba(180, 184, 190, .45), rgba(236, 231, 226, .3) 100%); }
.gal-agua .gal-cena { place-items: start center; }
.gal-agua .espelho-reflexo { aspect-ratio: 1 / .34; }
.gal-giro { position: absolute; z-index: 1; left: 50%; width: 54%; top: calc(64% - 54% / 1.06); translate: -50% 0; transform: perspective(1300px) rotateY(-22deg); transform-style: preserve-3d; }
@media (min-width: 1000px) { .gal-giro { width: 50%; top: calc(64% - 50% / .92); } }
.gal-agua .gal-leg { color: var(--tinta-2); }

/* cena 2: vista explodida na vitrine noturna */
.gal-noite { background: radial-gradient(ellipse 50% 40% at 50% 18%, rgba(214, 226, 240, .22), transparent 70%), linear-gradient(180deg, #263140 0%, #121821 100%); }
.gal-explodido { height: 80%; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .5)); }
.gal-noite .gal-leg { color: var(--nevoa-2); }
.gal-noite .gal-leg b { color: var(--nevoa); }

/* cenas 3-4: caixa (o fundo dos mockups) */
.gal-caixa { background: var(--caixa); }
.gal-caixa img { width: 84%; max-width: 640px; height: auto; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 64%, transparent 100%); }
.gal-caixa .gal-leg { color: #4A4440; }

/* cenas 5-6: ilustrativas de uso */
.gal-foto { background: var(--perola-2); }
.gal-foto picture { display: contents; }
.gal-foto img, .gal-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-foto .gal-cena.contida img { width: auto; height: auto; max-width: 74%; max-height: 80%; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 64%, transparent 100%); }
.gal-foto .gal-leg { background: rgba(245, 239, 232, .9); padding: 8px 12px; border-radius: 12px; right: auto; }
.gal-play { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; background: rgba(245, 239, 232, .92); display: grid; place-items: center; box-shadow: var(--sh-1); }
.gal-play .ic { fill: currentColor; stroke: none; margin-left: 3px; }

.gal-minis { display: none; }
.gal-prog { padding: 0; margin-top: 16px; }
@media (min-width: 1000px) {
  .gal-minis { display: flex; gap: 10px; margin-top: 14px; }
  .gal-minis button { width: 68px; height: 68px; border-radius: 14px; overflow: hidden; background: var(--perola-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linha); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
  .gal-minis button img { width: 100%; height: 100%; object-fit: cover; }
  .gal-minis button:first-child img, .gal-minis button:nth-child(2) img { object-fit: contain; padding: 6px; }
  .gal-minis button[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--tinta), 0 0 0 2px var(--perola), 0 0 0 3px var(--tinta); }
  .gal-minis button:hover { transform: translateY(-3px); }
  .gal-prog { display: none; }
}

/* ---------- caixa de compra ---------- */
.compra { display: grid; gap: 18px; align-content: start; min-width: 0; }
.compra-nome { font-size: clamp(2.1rem, 3.7vw, 3.2rem); }
.compra-frase { color: var(--tinta-2); font-size: 1.04rem; max-width: 32rem; }
.compra-aval { justify-self: start; font-size: .78rem; color: var(--tinta-2); border: 1px dashed var(--linha-forte); border-radius: 999px; padding: 7px 14px; }
.compra-beneficios { display: grid; gap: 2px; padding: 4px 0; }
.compra-beneficios li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: .95rem; }
.compra-beneficios .ic { color: var(--agua-tinta); width: 18px; height: 18px; }

.acab { border: 0; padding: 0; margin: 0; min-width: 0; }
.acab-leg { padding: 0; margin-bottom: 8px; font-size: .9rem; color: var(--tinta-2); }
.acab-leg strong { color: var(--tinta); font-weight: 500; }
.acab-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acab-op { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.acab-op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.acab-mini { width: 54px; height: 54px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--linha); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.acab-mini img { width: 100%; height: 100%; border-radius: 50%; }
.acab-op input:checked + .acab-mini { box-shadow: 0 0 0 3px var(--perola), 0 0 0 4px var(--tinta); transform: scale(1.04); }
.acab-op input:focus-visible + .acab-mini { outline: 2px solid var(--agua-tinta); outline-offset: 6px; }
@media (hover: hover) { .acab-op:hover .acab-mini { transform: rotate(-12deg) scale(1.04); } }
.acab-nota { font-size: .8rem; color: var(--tinta-2); margin-top: 8px; }

.opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.op { position: relative; display: grid; gap: 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--linha-forte); background: #FBF8F4; cursor: pointer; transition: border-color .4s, box-shadow .5s var(--ease), background-color .4s; }
.op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: inherit; }
.op:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta), var(--sh-1); background: #FFFFFF; }
.op-topo { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.op-radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--tinta); display: grid; place-items: center; flex: none; }
.op input:checked ~ .op-topo .op-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.op input:focus-visible ~ .op-topo .op-radio { outline: 2px solid var(--agua-tinta); outline-offset: 4px; }
.op-nome { font: 400 1.14rem/1.2 var(--ff-d); }
.op-selo { font: 500 .6rem/1 var(--ff-t); letter-spacing: .16em; text-transform: uppercase; background: var(--rose-claro); color: var(--tinta); padding: 6px 9px 5px; border-radius: 999px; }
.op-preco { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-desc { font-size: .86rem; color: var(--tinta-2); padding-left: 32px; line-height: 1.5; }
.op-ass::before { content: "Recomendado"; position: absolute; top: -9px; right: 16px; font: 500 .58rem/1 var(--ff-t); letter-spacing: .18em; text-transform: uppercase; background: var(--tinta); color: var(--perola); padding: 5px 9px 4px; border-radius: 999px; }

.compra-preco { display: grid; gap: 2px; }
.cp-pix { font-size: .95rem; }
.cp-pix strong { font: 400 1.7rem/1.2 var(--ff-d); margin-right: 4px; font-variant-numeric: tabular-nums; }
.cp-tag { font: 500 .66rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; color: var(--agua-tinta); margin-left: 6px; white-space: nowrap; }
.cp-cartao { font-size: .88rem; color: var(--tinta-2); }
.compra-add { margin-top: 2px; }
.compra-semjs { font-size: .9rem; padding: 14px 16px; border-radius: 14px; background: var(--perola-2); }

.selos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: .8rem; color: var(--tinta-2); }
.selos li { display: flex; align-items: center; gap: 8px; }
.selos .ic { width: 18px; height: 18px; color: var(--tinta); }
@media (min-width: 600px) { .selos { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.compra-sanfona { margin-top: 6px; }
.compra-sanfona summary { min-height: 56px; font-size: 1.08rem; }
.specs { display: grid; gap: 8px; }
.specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.specs dt { font-weight: 500; color: var(--tinta); }
@media (max-width: 420px) { .specs div { grid-template-columns: 1fr; gap: 2px; } }

/* entrada da página (CSS, a partir do 1º desenho) */
.js:not(.rm) .gal-trilho { animation: pdp-sobe 1.8s var(--ease) backwards; }
.js:not(.rm) .gal-giro .espelho-obj { animation: pdp-emerge 2.4s var(--ease) .3s backwards; }
.js:not(.rm) .gal-giro .espelho-reflexo { animation: pdp-emerge-r 2.4s var(--ease) .3s backwards; }
.js:not(.rm) .compra > * { animation: pdp-entra 1.4s var(--ease) backwards; }
.js:not(.rm) .compra > :nth-child(2) { animation-delay: .1s; } .js:not(.rm) .compra > :nth-child(3) { animation-delay: .18s; }
.js:not(.rm) .compra > :nth-child(4) { animation-delay: .24s; } .js:not(.rm) .compra > :nth-child(5) { animation-delay: .3s; }
.js:not(.rm) .compra > :nth-child(6) { animation-delay: .36s; } .js:not(.rm) .compra > :nth-child(n+7) { animation-delay: .42s; }
@keyframes pdp-sobe { from { clip-path: inset(100% 0 0 0 round var(--raio)); } to { clip-path: inset(0 0 0 0 round var(--raio)); } }
@keyframes pdp-emerge { from { transform: translateY(14%); opacity: 0; } }
@keyframes pdp-emerge-r { from { transform: translateY(-14%); opacity: 0; } }
@keyframes pdp-entra { from { opacity: 0; transform: translateY(18px); } }

/* ---------- instalação compacta ---------- */
.inst-compacta .ic-lista { display: grid; gap: 34px; margin-top: clamp(40px, 6vw, 80px); }
.ic-lista li { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--linha); }
.ic-lista p { color: var(--tinta-2); max-width: 26rem; }
.ic-lista .passo-n { font-size: clamp(2.8rem, 6vw, 4.4rem); }
@media (min-width: 900px) { .inst-compacta .ic-lista { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.rc-mini { width: 74px; }
@media (min-width: 900px) { .rc-mini { width: 96px; } }

/* ---------- complete seu ritual ---------- */
@media (min-width: 760px) { .loja-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; } }

/* ---------- barra fixa do celular ---------- */
.barra-compra {
  position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: var(--z-barra);
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 10px; border-radius: 999px;
  background: rgba(28, 36, 48, .97); color: var(--nevoa); box-shadow: var(--sh-noite);
  transform: translateY(150%); transition: transform .8s var(--ease); visibility: hidden;
}
.barra-compra.is-on { transform: none; visibility: visible; }
.barra-compra img { width: 42px; height: 42px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .08); }
.barra-txt { flex: 1; min-width: 0; display: grid; }
.barra-nome { font: 400 .88rem/1.2 var(--ff-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-op { font-size: .7rem; color: var(--nevoa-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra .btn { --bg: var(--rose-claro); --fg: var(--tinta); min-height: 48px; padding: 0 14px; font-size: .68rem; letter-spacing: .06em; flex: none; }
@media (min-width: 1000px) { .barra-compra { display: none; } }
@media (max-width: 999px) { body.com-barra .rodape { padding-bottom: 80px; } }

/* aros do disco no acabamento escolhido */
.gal-giro[data-cor="preto"] .espelho-obj::before { background: linear-gradient(90deg, #45474B 0%, #6B6D72 35%, #26272A 62%, #0E0E10 100%); }
.gal-giro[data-cor="dourado"] .espelho-obj::before { background: linear-gradient(90deg, #C2A46C 0%, #F1DFB5 35%, #A88A52 62%, #6F5A36 100%); }
.gal-giro[data-cor="rose"] .espelho-obj::before { background: linear-gradient(90deg, #CFA395 0%, #F6DDD4 35%, #B8897C 62%, #7E5A4E 100%); }
@media (max-width: 400px) {
  .barra-nome { display: none; }
  .barra-op { font-size: .76rem; white-space: normal; line-height: 1.25; color: var(--nevoa); }
}

/* =====================================================================
   Caixa de compra compacta (o botão fica acima da dobra em 1366x900)
   ===================================================================== */
.pdp { padding-top: calc(var(--topo-h) + 4px); }
.migalha { margin-bottom: 4px; }
.compra { gap: 14px; }
.compra-nome { font: 400 clamp(1.9rem, 2.6vw, 2.3rem)/1.06 var(--ff-d); letter-spacing: -.01em; text-wrap: balance; }
.compra-frase { font-size: .98rem; line-height: 1.55; }
.compra-beneficios { padding: 0; gap: 0 18px; }
.compra-beneficios li { align-items: flex-start; font-size: .9rem; line-height: 1.4; padding: 5px 0; }
.compra-beneficios .ic { margin-top: 1px; }
.acab-leg { margin-bottom: 6px; }
.acab-nota { margin: 0; font-size: .8rem; color: var(--tinta-2); }
.op { padding: 13px 16px; gap: 6px; }
.op-desc { font-size: .82rem; }
.op-desc sup, .cp-cartao sup { font-size: .7em; line-height: 0; margin-left: 1px; }
.compra-preco { gap: 0; }
.cp-pix strong { font-size: 1.55rem; }
.selos { padding: 12px 0; }
.compra-aval { margin-top: -2px; }
.nota-ast { font-size: .74rem; color: var(--tinta-2); margin-top: -6px; }
@media (min-width: 1000px) {
  .compra-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compra { gap: 12px; }
  .galeria { top: calc(var(--topo-h) + 8px); }
}
/* celular: rótulo curto e tracking menor, o preço sempre inteiro */
@media (max-width: 599px) {
  .compra-add { letter-spacing: .12em; padding: 0 20px; font-size: .78rem; }
}