/* =====================================================================
   AQUORA · B · produto.css — galeria + caixa de compra (referência: Jolie) com o dispositivo editorial.
   ===================================================================== */
.pg-produto main { padding-top: var(--topo-h); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

.compra { padding: 4px var(--g) clamp(64px, 9vw, 120px); }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 600 .64rem/1.3 var(--ff-t); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.trilha a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--tinta); }
.trilha [aria-current] { color: var(--tinta-2); }
.compra-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .compra-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(36px, 4.4vw, 80px); align-items: start; }
  .galeria { position: sticky; top: calc(var(--topo-h) + 10px); }
}

/* ---------- GALERIA ---------- */
.gal-palco { position: relative; margin: 0 calc(var(--g) * -1); }
@media (min-width: 1024px) { .gal-palco { margin: 0; } }
.gal-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.gal-trilho::-webkit-scrollbar { display: none; }
.gal-trilho.is-arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gal-item { flex: 0 0 100%; scroll-snap-align: start; }
.gal-item figure { position: relative; height: min(92vw, 52svh); display: grid; place-items: center; overflow: hidden; background: var(--papel-2); }
@media (min-width: 1024px) { .gal-item figure { height: calc(100svh - var(--topo-h) - 150px); min-height: 460px; max-height: 820px; cursor: grab; } }
.gal-item .fig { position: absolute; left: calc(var(--g) + 4px); right: 14px; bottom: 12px; margin: 0; }
@media (min-width: 1024px) { .gal-item .fig { left: 18px; } }
.gal-item img { -webkit-user-drag: none; user-select: none; }

.gal-chuveiro figure { background: var(--rosa); }
.gal-chuveiro .fig, .gal-chuveiro .fig b { color: var(--tinta); }
.gal-num { position: absolute; right: -.02em; bottom: -.2em; font-size: clamp(12rem, 62vw, 34rem); line-height: .8; color: #D19A9A; pointer-events: none; }
.gal-chuv-moldura { position: relative; width: min(74%, 82%, 600px); height: 84%; aspect-ratio: 1; display: grid; place-items: center; }
.gal-chuv-moldura .gal-chuv-img { width: auto; height: 100%; max-width: 100%; }
.gal-chuv-img { width: 100%; height: 100%; object-fit: contain; filter: var(--sh-prod); }
.gal-explodido img { width: auto; height: min(84%, 780px); object-fit: contain; filter: drop-shadow(0 20px 26px rgba(40, 24, 22, .22)); }
.prancha { width: min(82%, 600px); padding: 10px; background: var(--branco); box-shadow: var(--sh-2); rotate: -1.6deg; }
.prancha img { width: 100%; }
.gal-rosa figure { background: var(--rosa-claro); }
.gal-rosa .prancha { width: min(74%, 520px); rotate: 1.8deg; }
.gal-foto figure > img, .gal-foto figure > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-foto .fig { color: var(--claro); }
.gal-foto .fig b { color: var(--claro); }
.gal-foto figure::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(10, 10, 10, .55)); pointer-events: none; }
.gal-foto .fig { z-index: 2; flex-wrap: wrap; }
.gal-foto .reel-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: var(--claro); color: var(--tinta); }
.gal-foto .reel-play .i-pausa { display: none; }
.gal-foto .reel-play[aria-pressed="true"] { opacity: .0; }
.gal-foto .reel-play[aria-pressed="true"]:focus-visible, .gal-foto:hover .reel-play[aria-pressed="true"] { opacity: 1; }
.gal-foto .reel-play[aria-pressed="true"] .i-play { display: none; }
.gal-foto .reel-play[aria-pressed="true"] .i-pausa { display: block; }

.gal-seta { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; display: none; place-items: center; background: var(--papel); color: var(--tinta); translate: 0 -50%; transition: background-color .3s, color .3s; }
.gal-ant { left: 12px; } .gal-prox { right: 12px; }
@media (min-width: 1024px) { .gal-seta { display: grid; } }
@media (hover: hover) { .gal-seta:hover { background: var(--tinta); color: var(--claro); } }
.gal-barra { display: flex; align-items: center; gap: 14px; padding-top: 12px; }
.gal-cont { font: 600 .72rem/1 var(--ff-t); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.gal-prog { position: relative; flex: 1; height: 2px; background: var(--linha); overflow: hidden; }
.gal-prog i { position: absolute; inset: 0; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(.25); }
.gal-minis { display: none; }
@media (min-width: 1024px) {
  .gal-barra { display: none; }
  .gal-minis { display: flex; gap: 8px; padding-top: 10px; }
  .gal-minis button { position: relative; width: 64px; height: 64px; display: grid; place-items: center; background: var(--papel-2); overflow: hidden; transition: opacity .3s; opacity: .62; }
  .gal-minis button img { width: 100%; height: 100%; object-fit: cover; }
  .gal-minis li:first-child button { background: var(--rosa); }
  .gal-minis li:first-child img, .gal-minis li:nth-child(2) img { object-fit: contain; padding: 6px; }
  .gal-minis button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tinta); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
  .gal-minis button[aria-current] { opacity: 1; }
  .gal-minis button[aria-current]::after { transform: scaleX(1); }
}

/* ---------- CAIXA DE COMPRA ---------- */
.caixa-compra { display: grid; gap: 16px; align-content: start; }
.prod-titulo { font-size: clamp(2.7rem, 12.4vw, 5rem); line-height: .88; }
.prod-titulo em { font-size: 1.12em; }
.prod-frase { font: 400 clamp(1.2rem, 1.1rem + .6vw, 1.45rem)/1.2 var(--ff-s); max-width: 34ch; }
.prod-beneficios { padding-top: 4px; }
.prod-beneficios { display: grid; gap: 7px; font-size: .95rem; }
.prod-beneficios li { position: relative; padding-left: 26px; }
.prod-beneficios li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--tinta); }

.acab-escolha legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; font-size: .95rem; }
.acab-escolha legend b { font-weight: 600; }
.acab-tag { padding: 4px 7px 3px; background: var(--tinta); color: var(--claro); font: 600 .58rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; }
.acab-tag.is-ilustrativo { background: var(--rosa); color: var(--tinta); }
.acab-opcoes { display: flex; flex-wrap: wrap; gap: 12px; }
.acab-op { position: relative; display: block; cursor: pointer; }
.acab-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.acab-mini { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linha); transition: box-shadow .35s var(--ease), scale .35s var(--ease); }
.acab-mini img { width: 54px; height: 54px; border-radius: 50%; }
.acab-op input:checked + .acab-mini { box-shadow: 0 0 0 3px var(--papel), 0 0 0 4.5px var(--tinta); scale: 1.14; }
.acab-opcoes { padding: 4px 4px 4px 4px; gap: 14px; }
.acab-op input:focus-visible + .acab-mini { outline: 2px solid var(--tinta); outline-offset: 7px; }
@media (hover: hover) { .acab-op:hover .acab-mini { scale: 1.06; } }

.planos { display: grid; gap: 8px; }
.plano { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px 14px 14px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; transition: box-shadow .3s, background-color .3s; }
.plano input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.marca-radio { width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid var(--tinta); background: var(--branco); }
.marca-radio::after { content: ""; width: 10px; height: 10px; background: var(--tinta); transform: scale(0); transition: transform .3s var(--ease); }
.plano input:checked + .marca-radio::after { transform: scale(1); }
.plano:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }
.plano:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.plano-assinatura:has(input:checked) { background: var(--rosa-claro); }
.plano-corpo { display: grid; gap: 5px; }
.plano-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plano-nome { font: 400 1.3rem/1 var(--ff-d); text-transform: uppercase; }
.plano-selo { padding: 4px 7px 3px; background: var(--tinta); color: var(--claro); font: 600 .58rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; }
.plano-preco { margin-left: auto; font: 600 1rem/1 var(--ff-t); font-variant-numeric: tabular-nums; }
.plano-desc { font-size: .85rem; line-height: 1.45; color: var(--tinta-2); }
.plano-desc b { color: var(--tinta); font-weight: 600; }

.prod-precos { display: grid; gap: 4px; }
.pix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pix b { font: 400 2rem/1 var(--ff-d); font-variant-numeric: tabular-nums; }
.pix-tag { padding: 4px 7px 3px; background: var(--rosa); font: 600 .6rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; }
.parc { font-size: .92rem; color: var(--tinta-2); }
.parc b { color: var(--tinta); font-weight: 600; }

.comprar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.comprar .stepper button { height: 58px; }
.btn-adicionar { width: 100%; padding: 0 16px; gap: 8px; }
.btn-adicionar .so-largo { display: none; }
@media (min-width: 430px) { .btn-adicionar .so-largo { display: inline; } }
.btn-adicionar .preco { display: inline-block; white-space: nowrap; }
.btn-adicionar > span:first-child { white-space: nowrap; }
@media (max-width: 399px) {
  .comprar { grid-template-columns: minmax(0, 1fr); }
  .comprar .stepper { justify-self: start; }
  .comprar .stepper button { height: 48px; }
}
.nota-js { font-size: .85rem; color: var(--tinta-2); }
.no-js .comprar { display: none; }

.selos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: .82rem; line-height: 1.3; }
.selos li { display: flex; align-items: center; gap: 10px; }
.prod-sanfona { margin-top: 4px; }
.prod-sanfona .sf-q { font-size: 1.25rem; }
.prod-sanfona .sf-item summary { min-height: 58px; }

/* ---------- barra fixa do celular ---------- */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px var(--g) max(10px, env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--tinta);
  transform: translateY(110%); transition: transform .5s var(--ease);
}
.barra-compra.is-visivel { transform: none; }
.barra-compra img { width: 44px; height: 44px; object-fit: contain; background: var(--rosa); padding: 3px; }
.barra-info { display: grid; min-width: 0; font-size: .74rem; line-height: 1.25; color: var(--tinta-2); }
.barra-info b { font: 400 1rem/1.1 var(--ff-d); text-transform: uppercase; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra .btn { min-height: 48px; padding: 0 14px; font-size: .7rem; letter-spacing: .1em; }
@media (min-width: 1024px) { .barra-compra { display: none; } }
.no-js .barra-compra { display: none; }

/* seções abaixo da compra */
.pg-produto .dentro { border-top: 0; }

/* ---------- desktop: o botão de compra acima da dobra em 1366×900 e 1366×768 ---------- */
@media (min-width: 1024px) {
  .compra { padding-top: 0; }
  .caixa-compra { gap: 12px; padding-top: 4px; }
  .prod-titulo { font-size: clamp(2.9rem, 3.6vw, 3.9rem); line-height: .9; }
  .prod-frase { font-size: 1.22rem; }
  .acab-mini { width: 54px; height: 54px; }
  .acab-mini img { width: 46px; height: 46px; }
  .plano { padding: 11px 14px 11px 12px; }
  .plano-nome { font-size: 1.18rem; }
  .plano-desc { font-size: .8rem; line-height: 1.4; }
  .pix b { font-size: 1.75rem; }
  .prod-precos { gap: 2px; }
  .comprar .stepper button { height: 54px; }
  .btn-adicionar { min-height: 54px; }
}
}

/* o aviso (ex.: "Máximo de 10 unidades") aparece acima da barra fixa do celular */
@media (max-width: 1023px) { .pg-produto .aviso-pagina { bottom: calc(86px + env(safe-area-inset-bottom)); } }