/**
 * GETU Shopping — single-product-page component CSS.
 *
 * PRODUCTION MAPPING POINT
 * ------------------------
 * Deploy to wp-content/themes/bricks-child/assets/css/getu-product.css.
 * Enqueued by getu-chrome.php after getu-tailwind + getu-chrome, gated to the
 * product template (a `#gallery-main` presence guard in getu-product.js keeps
 * the JS inert elsewhere; this stylesheet is component-scoped so it is inert
 * unless the matching markup is on the page).
 *
 * Ported VERBATIM from produto.html's inline <style> (lines 25-57), carrying
 * ONLY the classes that are not already provided globally: .btn-wa, the
 * gallery frame/zoom, the thumb rail, the quantity stepper and the tab
 * underline. .reveal / .reveal-d*, .pcard, .rule-gold and .wish already live
 * in getu-home.css / getu-chrome.css (loaded site-wide), so they are NOT
 * duplicated here — a second copy would only risk drift. The FAQ accordion
 * (.acc) and urgency meter (.bar-fill) rules are omitted because those
 * sections are not ported (FAQ deferred, urgency dropped).
 */

/* WooCommerce's single-product wrapper <main class="product"> is a flex-wrap
   container — its default gallery|summary two-column layout. Our Bricks
   template replaces that content with full-width stacked sections that render
   as DIRECT children of <main>, so as flex items they tile side-by-side in the
   ~1600-1750px band (two narrower sections — tabs + reviews — fit in one row),
   overlapping. Reset <main> to a normal block flow on our product template so
   the sections stack. Scoped to .getu-vanilla-scope (only our live product
   template) + main.product (single-product only), so no other page is touched.
   The gallery|buy-box split is unaffected — it lives in pdpmain's own grid. */
.getu-vanilla-scope main.product { display: block; }

/* WhatsApp "Tirar dúvidas" button (buy box + related rows).
   box-shadow is part of the effective reference style: produto.html's inline
   .btn-wa overrides only bg/color/border over the shared style.css .btn-wa, so
   its `box-shadow: var(--shadow-raised)` still applies. The shared base isn't
   on staging, so it is restated here to keep the button identical.
   SCOPED to `.single-product` (a WooCommerce single-product body class) because
   this white variant is produto.html's PAGE-LOCAL override — the landing pages
   (cold-brew, solucoes-b2b, …) carry no such override and must keep the shared
   GREEN .btn-wa. This file loads site-wide, so a bare selector would repaint
   their WhatsApp buttons white. Landing pages are `page` posts and never get
   the single-product class, so the scope is exact. */
.single-product .btn-wa { background: #fff; color: #128C3E; border: 1px solid rgba(18,140,62,.30); box-shadow: var(--shadow-raised); }
.single-product .btn-wa:hover { background: rgba(37,211,102,.06); border-color: #25D366; transform: translateY(-2px); }

/* Gallery main frame + hover zoom (transform only). */
.gallery-main { position: relative; overflow: hidden; }
.gallery-main img { transition: transform .25s var(--ease-out); will-change: transform; }
.gallery-main.zooming { cursor: zoom-in; }
.gallery-main.zooming img { transform: scale(2.1); }

/* Thumbnail rail. */
.thumb { transition: border-color .25s, transform .25s var(--ease-out); }
.thumb:hover { transform: translateY(-2px); }
.thumb.active { border-color: var(--wine-600); }

/* Quantity stepper buttons. */
.qty-btn { transition: background-color .2s, color .2s; }
.qty-btn:hover { background: rgba(110,26,42,.07); color: var(--wine-700); }

/* Detail tabs — animated underline. */
.tab-btn { position: relative; transition: color .25s; }
.tab-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--wine-600); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.tab-btn[aria-selected="true"] { color: var(--wine-700); }
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }