/* Página de produto — carregado só em is_product() (inc/smo-pdp.php). Blocos ativados por classe no <body>. */

/* ── A3. Barra fixa (mobile) ── */
.smo-sticky-buy { display: none; }
@media (max-width: 921px) {
  body.smo-a3 .smo-sticky-buy:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; /* abaixo de banners de cookies (≥ 99999) */
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  }
  body.smo-a3 .smo-sticky-buy__btn {
    display: block; width: 100%; min-height: 50px; border: 0; border-radius: 10px;
    background: #0D4F4A; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .01em;
  }
  body.smo-a3.smo-sticky-on { padding-bottom: 76px; }          /* o rodapé não fica escondido atrás da barra */
  body.smo-a3.smo-sticky-on #ast-scroll-top { display: none !important; }
}

/* ── B4. Barra superior no mobile ── */
.smo-topbar-mobile { display: none; }
@media (max-width: 921px) {
  body.smo-b4 .smo-topbar-mobile {
    display: block; background: var(--ast-global-color-0, #111827); color: #fff;
    font-size: 12.5px; line-height: 1.35; text-align: center; padding: 7px 12px;
  }
  body.smo-b4 .smo-topbar-mobile p { margin: 0; color: inherit; }
}

/* ── D1. Galeria estável ── */
/* Visível desde o início (o WooCommerce começa com opacity:0 até o flexslider terminar). */
body.smo-d1 .woocommerce-product-gallery { opacity: 1 !important; }
/* Antes do JS (o wrapper ainda é filho direto da galeria): só a 1ª foto, com a proporção dela. */
body.smo-d1 .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none; }
body.smo-d1 .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child { aspect-ratio: var(--smo-gallery-ratio, 1); overflow: hidden; }
/* Espaço da fileira de miniaturas, criada pelo flexslider depois: 1em acima + miniatura (25% − 0,75em) + 1em abaixo. */
body.smo-d1 .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) { padding-bottom: calc((100% - 3em) / 4 + 2em); }
/* Durante a inicialização a janela do slider não passa da altura da 1ª foto (o smoothHeight depois fixa a mesma altura). */
body.smo-d1 .woocommerce-product-gallery .flex-viewport { aspect-ratio: var(--smo-gallery-ratio, 1); }