/* teasofthailand — PDP gallery polish (tot-visual-cro-gallery.css, enqueued by tot-pdp-gallery.php).
   File name deliberately contains "tot-visual-cro" so LiteSpeed's optm-css_exc keeps it OUT of UCSS:
   UCSS strips .flex-control-thumbs rules (JS-generated markup) and the thumbnails rendered as a bare
   numbered list. 2026-08-16 */
.single-product .woocommerce-product-gallery{position:relative;opacity:1!important}
.single-product .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper>div:not(:first-child){display:none}
.single-product .woocommerce-product-gallery__image{display:block}
.single-product .woocommerce-product-gallery__image>a>img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:12px}
.single-product .flex-control-thumbs{margin:12px -5px 0;padding:0;list-style:none;display:flex;flex-wrap:wrap}
.single-product .flex-control-thumbs li{list-style:none;width:25%;padding:5px;margin:0;cursor:pointer;float:none}
.single-product .flex-control-thumbs li img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:2px solid transparent;opacity:.65;transition:opacity .2s,border-color .2s}
.single-product .flex-control-thumbs li img.flex-active,.single-product .flex-control-thumbs li img:hover{opacity:1;border-color:var(--tot-green-dark,#2e7d32)}
.single-product .woocommerce-product-gallery__trigger{position:absolute;top:.75rem;right:.75rem;z-index:9;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;text-decoration:none;text-indent:0;color:#1f2d1f}
.single-product .woocommerce-product-gallery__trigger:hover{background:#fff}

/* CLS (measured 2026-08-18: 0.216). The gallery JS is delayed several seconds; at FlexSlider init every
   slide is briefly laid out stacked (the gallery hit 7,571px) and the thumb strip then appears with no
   space reserved for it, so the whole content column jumps. Pin the slide area square at every stage —
   the raw wrapper before init, .flex-viewport after — clip the transient overflow, and reserve the strip
   (2 rows of quarter-width thumbs ≈ 52% of the gallery width) until it exists. Width-relative, so it
   holds at any viewport, unlike a px reservation. */
.single-product .woocommerce-product-gallery{overflow:hidden}
.single-product .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery>.flex-viewport{aspect-ratio:1/1;height:auto!important}
.single-product .woocommerce-product-gallery:not(:has(.flex-control-nav)){padding-bottom:52%;box-sizing:border-box}