/**
 * Supra Force — modernized product gallery styling for the Single Product
 * page. Enqueued conditionally (single product pages only) from
 * functions.php via supra_force_enqueue_single_product_gallery_styles().
 *
 * Note: the gallery already has substantial custom CSS living in
 * WordPress's own Customizer "Additional CSS" (the same <style id="wp-custom-css">
 * block used elsewhere on this site). That block prints later in <head>
 * than any enqueued stylesheet, so on any selector this file shares with
 * it, the Additional CSS would normally win by load order despite both
 * using !important. Every selector below is prefixed with
 * `body.single-product.woocommerce.woocommerce.woocommerce` (repeating the
 * `.woocommerce` class 3x — a valid, standard CSS specificity-boosting
 * trick; body only needs the class once for it to match, the repeats just
 * inflate the specificity count) instead of the existing rules' apparent
 * `.single-product` (1 class).
 *
 * 2026-07-09: a single `body.single-product.woocommerce` (2 classes) prefix
 * was NOT enough — confirmed via live DevTools measurement that the Additional
 * CSS was still winning the `height` property specifically on the gallery's
 * <a> element (measured 560px instead of our declared 480px, while our
 * `.flex-viewport` override with the same 2-class prefix WAS winning at
 * the same time) — meaning Additional CSS's real selector for at least
 * that one property is more specific than 2 classes, or ties and wins on
 * source order. Bumped to 3x `.woocommerce` across every selector in this
 * file as a blanket, can't-lose fix, rather than reverse-engineering the
 * exact Additional CSS selector (which lives in wp_options, not a file —
 * not greppable). If a future edit still loses to Additional CSS on some
 * property, bump the repeat count further rather than guessing at exact
 * parity.
 *
 * ============================================================================
 * REAL STRUCTURE OF THIS GALLERY — CORRECTED from live DOM inspection
 * (DevTools output pasted by the user), not just source-reading. An earlier
 * version of this comment concluded "fade" mode from the library's default
 * value in jquery.flexslider.js — that was wrong; something on this site
 * overrides it. The live inline styles prove it's actually "slide" mode:
 *
 *   <div class="flex-viewport" style="overflow:hidden; position:relative;
 *        height:560px;">
 *     <div class="woocommerce-product-gallery__wrapper"
 *          style="width:400%; transform:translate3d(0px,0px,0px);">
 *       <div class="woocommerce-product-gallery__image flex-active-slide"
 *            style="width:487.89px; margin-right:0px; float:left; display:block;">
 *         <a><img class="wp-post-image" ...></a>
 *       </div>
 *       <div class="woocommerce-product-gallery__image" style="width:487.89px; ...">
 *         <a><img ...></a>
 *       </div>
 *     </div>
 *   </div>
 *
 * — a real horizontal track: the wrapper is (slide count × 100%) wide and
 * shifted via `transform: translate3d(...)`, each slide gets a JS-computed
 * PIXEL width + float:left. .flex-viewport is the fixed-width, clipped
 * "window" onto that track.
 *
 * Bottom line is the same as before, just for a different reason: do not
 * set width, margin, float, position, display, transform, or opacity on
 * .woocommerce-product-gallery__wrapper or .woocommerce-product-gallery__image
 * — those are exactly the properties this JS computes and writes inline.
 * Across several previous rounds we forced margin:0, width:100%, and
 * jump to the wrong position.
 *
 * THE FIX: this file no longer sets width, margin, float, position,
 * display, opacity, or z-index on .woocommerce-product-gallery__image at
 * all — those seven stay 100% under FlexSlider's own control. All
 * centering/framing work happens on the <a> nested inside instead, which
 * FlexSlider's JS never touches.
 * ============================================================================
 */

/* Outer gallery container: FlexSlider never reaches this element (it only
   manipulates .woocommerce-product-gallery__wrapper and its direct
   .woocommerce-product-gallery__image children) — fully safe to style.
   overflow:hidden here is the real "no bleed" guarantee; background/
   position are just polish. Also removes the theme's own flat gray border
   (hello-commerce-woocommerce.css: .woocommerce-product-gallery{border:1px
   solid #e7e7e7}). */

/* THE "ghost box beside the image" BUG: confirmed via live DOM inspection
   (pasted by the user) that there is a stray, duplicate <a><img></a> —
   an exact copy of the first slide's link/image — sitting as a DIRECT
   CHILD of .woocommerce-product-gallery, immediately after .flex-viewport
   closes. Per WooCommerce's own gallery markup, the only legitimate direct
   children of .woocommerce-product-gallery are .flex-viewport and the
   .flex-control-nav thumbnail list — a bare <a> here is never part of the
   real structure. Could not pin down which script/hook injects it within
   reasonable effort (not the theme, not an Elementor widget — this page
   isn't Elementor-built beyond the global kit styles), so neutralizing it
   here instead of chasing the source further: hide any <a> that is a
   direct child of the gallery container. This cannot affect the real
   gallery links (those live inside .flex-viewport, several levels deep). */
body.single-product.woocommerce.woocommerce.woocommerce .woocommerce-product-gallery > a {
	display: none !important;
}
/* .flex-viewport is created by FlexSlider's own JS (not present in the
   PHP-rendered HTML) — at creation it only gets overflow:hidden and
   position:relative set inline, border is never touched, so overriding it
   is safe. This removes the light-blue #DCE8F8 border the Additional CSS
   puts around the whole main-image viewport (confirmed present in both of
   its duplicated gallery rule blocks) — asked to be removed, not a bug.
   height:480px (2026-07-09): WooCommerce's own single-product.js syncs this
   element's height inline ONCE, on the first slide image's load event
   (confirmed via live DOM inspection to land on 560px) — it never re-syncs
   after that. Our slide box (the <a> below) is fixed at height:480px, so
   that stale 560px left an 80px gap inside the viewport with nothing in
   it, exposing the outer container's own background/border through the
   gap — inconsistently, since which edge the gap fell on shifted with
   which slide was active. Forcing the same 480px here, deterministically,
   removes any dependency on that one-shot JS sync ever matching us.
   background:transparent + padding:0 (2026-07-09, from reading the actual
   Additional CSS text): its .flex-viewport rule sets BOTH a light-blue
   gradient background AND 24-28px of padding — border:none alone didn't
   remove the "blue frame" look because that ring was never the 1px border,
   it was this padding gap revealing the light-blue gradient background
   underneath it, all the way around the white <a> box. Neither property
   was overridden here before now. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .flex-viewport {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	width: 100% !important;
	height: 480px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	/* 2026-07-09: Additional CSS also puts a soft box-shadow on this element
	   (0 18px 42px rgba(5,10,85,0.05)) — never overridden until now. User
	   reported a faint bluish "square projection" below the box, which is
	   exactly this shadow spilling out past the now-transparent viewport. */
	box-shadow: none !important;
}

/* overflow:hidden was already here from the start — the real gap was no
   explicit border-radius on THIS element. Without one, whatever radius the
   outer blue-bordered box actually has (default none, or a different value
   inherited from Customizer Additional CSS, invisible to us — it lives in
   wp_options, not a file) didn't necessarily match the inner white box's
   24px curve, leaving a sliver of mismatch exactly at the rounded corner
   for the white background to poke through diagonally. Declaring the same
   24px here — on this selector, already confirmed (file header) to win
   over Additional CSS via specificity — guarantees the outer clip boundary
   and the inner box's own curve are identical, so overflow:hidden crops
   flush with zero gap all the way around.
   2026-07-10: the brand-blue outline that lived here (framing the WHOLE
   gallery card, image + thumbnail row together) is REMOVED per request —
   visually it read wrong; the outline needs to hug just the main product
   image, not the whole card. Also, even at 1.5px it never fully solved
   the "arcs at corners, invisible on straight edges" artifact reported
   via screenshot. See the <a> rule below for the fix now living there. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images.woocommerce-product-gallery,
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images {
	border: none !important;
	background: #FFFFFF !important;
	overflow: hidden !important;
	border-radius: 24px !important;
	position: relative !important;
}

/* .woocommerce-product-gallery__wrapper (FlexSlider's "container"): only
   resized by the JS in "slide"/carousel mode, not in "fade" (confirmed —
   the width-setting code for slider.container is inside the non-fade
   branch). Safe to style freely.
   2026-07-10: this background had NO border-radius at all — a flat,
   square-cornered white rectangle (400% wide, the whole slide track)
   sitting behind the rounded slide/border above it. Per user diagnosis
   from a screenshot (border rendering broken/interrupted at the rounded
   corners), that sharp-cornered white was likely showing through right at
   the curve, blending with the border's own white and breaking the arc.
   Testing 25px here — 1px more than the 24px used elsewhere — so this
   layer's own corner recedes slightly further than the border's curve
   instead of exactly matching or extending past it. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	border-radius: 25px !important;
}

/* .woocommerce-product-gallery__image (the individual slide): ONLY
   properties FlexSlider's fade-mode JS never sets. No width, margin,
   float, position, display, opacity or z-index here — see the file header
   for exactly why each of those is off-limits.
   background:transparent + overflow:hidden here (ALL slides, active or not)
   is the guillotine confirmed needed 2026-07-09: inactive slides sit right
   next to the active one in the float-based filmstrip, and without their
   own overflow:hidden their content/background could bleed into view and
   show up as cut/misaligned corners at the top of the active card. Made
   transparent (not white) so an inactive slide never paints its own opaque
   box over anything — only the active slide (rule below) gets an opaque
   white background. overflow is not in the forbidden list above, so this
   is safe despite targeting the FlexSlider-controlled div. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
	background: transparent !important;
	overflow: hidden !important;
	border-radius: 24px !important;
	box-sizing: border-box !important;
}

/* Extra isolation on the ACTIVE slide only, per the "cut/misaligned corners
   of the box behind" symptom reported after the resize-polling JS fix.
   .flex-active-slide is a class FlexSlider's own JS toggles per active index
   (flexAnimate(): slider.slides.removeClass(namespace+"active-slide").eq(
   slider.currentSlide).addClass(namespace+"active-slide")) — never an inline
   style, so keying a selector on it is safe. overflow and background are
   NOT in the forbidden list above (only width/margin/float/position/display/
   opacity/z-index are), so this is safe even though the target is the
   FlexSlider-controlled slide div itself. Do NOT add width here — that IS
   forbidden; the <a> below already provides width:100% within the correctly
   JS-computed slide box, no need to duplicate it on the div.
   position:relative (2026-07-10): needed as the anchor for the ::after
   border overlay below. WooCommerce's own jquery.zoom plugin ALSO sets
   this same element's inline `position` to relative — but only when the
   hover-zoom feature triggers (large product photo, magnifying-glass
   hover), and it appends its own `.zoomImg` clone as a LATER sibling of
   the <a> right here, which paints on top of the <a> (and on top of any
   border declared on the <a>) whenever zoom is active. Declaring position
   here ourselves makes it unconditional — not dependent on zoom firing —
   and is also the reason the border moved to this element's own ::after
   below instead of living on the <a>: a generated ::after is always the
   last thing painted for its host, so it stays on top of the photo, the
   zoomImg hover clone, and anything else ever added here later. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide {
	background: #FFFFFF !important;
	overflow: hidden !important;
	position: relative !important;
}

/* The brand-blue outline itself, as a ::after overlay on the active slide
   div rather than a border/box-shadow on the <a> (see the position:relative
   comment above for why). inset:0 makes this pseudo-element exactly match
   the <a>'s own box beneath it. pointer-events:none so it never blocks
   clicks/hover on the real gallery link or the zoom trigger.
   border + box-shadow together (not just one): a plain `border` (attempt 14)
   and a fine inset `box-shadow` (attempt 16, and later the outer card)
   each washed out on a different part of the rounded rect under Safari's
   sub-pixel anti-aliasing — border vanished at the 4 corners, box-shadow
   vanished on the straight edges. Declaring both, same color/width, means
   wherever one fails the other still paints that segment.
   2026-07-10: bumped 1.5px -> 2px on both. Live DevTools computed styles
   confirmed the actual cause of the still-broken sides: this box's width
   is a fractional pixel value (543.890625px, from FlexSlider's own JS
   measurement), and the browser silently rounded our declared 1.5px
   `border-width` down to a computed 1px (confirmed via the Computed
   panel) while `box-shadow`'s 1.5px stayed exact — a 1px hairline sitting
   on a fractional-pixel box edge is exactly the kind of thing WebKit
   anti-aliases to near-invisibility on one axis. 2px is thick enough that
   even rounded down slightly it won't wash out the same way.
   2026-07-10 (second fix, same day): 22px -> 24px. User spotted a white
   square poking through the curve at the corners even with the fixed
   width. Root cause, confirmed via live DevTools computed styles on the
   outer card (div.images): it self-clips via overflow:hidden at a 24px
   radius, and our ::after is a DESCENDANT of that card — so it's ALSO
   clipped to that same 24px boundary, regardless of its own declared
   radius. Our previous 22px was tighter (recedes less, extends closer to
   the true corner) than the card's 24px clip allows, so the outermost
   sliver of our curve — exactly the part inside that 2px gap between the
   two radii — was being cut off by the card's own overflow:hidden. What
   showed through the gap was the slide div's own white background (also
   correctly clipped at 24px, so no cut there), reading as a white notch
   breaking the border's arc. Matching our radius to 24px, exactly equal
   to the outermost clip, means our curve never tries to extend past what
   the ancestor allows. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 36px !important;
	border: 1px solid #425fdb !important;
	box-shadow: inset 0 0 0 1px #425fdb !important;
	pointer-events: none !important;
	z-index: 5 !important;
}

/* All centering/framing lives here instead — the <a> is never touched by
   FlexSlider's JS, so it's free to be a flex container, clip its contents,
   etc. without any risk to the fade mechanism above it. border-radius here
   is 2px tighter than the outer container's 24px so the curve nests
   cleanly inside it instead of two mismatched arcs at the same corner.
   height:480px (fixed, not min-height) fixes a real bug: the <img> below
   uses max-height:85%, and a percentage height only resolves against an
   ancestor with an EXPLICIT height — min-height doesn't count for that per
   the CSS spec, so with only min-height here the img's max-height was
   silently computing to `none` (unconstrained). Tall product photos (e.g.
   the nutrition-table image) then rendered past 480px and got clipped by
   this element's own overflow:hidden — which is exactly the "cropped, not
   respecting the original image" symptom reported. A definite height
   makes 85% resolve to a real 408px ceiling, so nothing ever needs to be
   clipped in the first place.
   2026-07-10: the brand-blue outline that used to live directly on this
   <a> (border + inset box-shadow) moved to the parent
   .flex-active-slide's own ::after instead — see that rule above. Reason:
   WooCommerate's jquery.zoom plugin appends its hover-zoom `.zoomImg`
   clone as a sibling of this <a>, inside the same parent, painted AFTER
   it — meaning it visually sits on top of any border declared here
   whenever the zoom effect is active. A ::after on the parent is
   guaranteed to paint last regardless, so it stays visible above both the
   photo and the zoomImg hover layer. This element keeps its plain white
   background and radius only now — no outline of its own. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 480px !important;
	min-height: 480px !important;
	max-height: 480px !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	overflow: hidden !important;
	border-radius: 22px !important;
}

/* Fine vertical nudge, active slide only: a small padding-bottom inside the
   flex-centered container shifts the vertically-centered image up by about
   half that value, with no folga (gap) left at the base. box-sizing:
   border-box keeps the box at exactly the base rule's height:480px even
   with this padding added — plain content-box would otherwise grow the
   total box past 480px, which risks reintroducing the .flex-viewport
   height-mismatch/clipped-corner bug this file already fought once. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide a {
	box-sizing: border-box !important;
	padding-bottom: 20px !important;
}

/* The <img> itself: also never touched by FlexSlider's JS. Fixed
   max-height, no native top margin, centered both ways inside the white box.
   2026-07-09: dropped the img's own box-shadow (was 0 4px 20px
   rgba(0,0,0,0.04)) — user reported it read as a faint shadow line under
   the photo, creating a visible "seam" inside the otherwise clean white
   box we just finished making seamless (pure #FFFFFF + the box-shadow
   outline above). The photo should sit flush in the box with nothing
   under it now. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a img {
	display: block !important;
	width: auto !important;
	max-width: 85% !important;
	height: auto !important;
	max-height: 85% !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 24px !important;
	border: none !important;
	box-shadow: none !important;
	margin: auto !important;
	padding: 0 !important;
}

/* Tighter geometric centering, scoped ONLY to the active slide's <img> (not
   inactive off-screen slides — no reason to force recalculation on those).
   Resets any stray inline position/top the WooCommerce zoom.js plugin
   (magnific zoom) may leave on the <img> from hover/init, and shrinks the
   image slightly more (80% vs the base rule's 85%) to guarantee breathing
   room from the <a>'s edges so nothing brushes against the overflow:hidden
   boundary above. Selector is a strict superset of the base rule above
   (same chain + .flex-active-slide), so it wins on specificity alone. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide a img {
	max-height: 80% !important;
	max-width: 80% !important;
	margin: auto !important;
	display: block !important;
	position: relative !important;
	top: 0 !important;
	object-fit: contain !important;
}

/* Native blocker found in WooCommerce core itself (plugins/woocommerce/
   assets/css/woocommerce.css, no !important there):
     .flex-control-thumbs{margin:0;padding:0}
     .flex-control-thumbs li{width:25%;float:left;margin:0}
   A zero-margin, float-based 4-column layout with no gap mechanism at all.
   Unlike the main slide, the thumbnail <li> items are NOT touched by
   FlexSlider's per-render .css() calls (confirmed — controlNav setup only
   binds click handlers and toggles the .flex-active class, no inline
   width/float/position), so it's fully safe to override their layout here.
   2026-07-10: padding-top bumped 2px -> 12px (and bottom 2px -> 4px, a
   little extra room there too). Cause: the active thumbnail's
   `transform: translateY(-3px)` below moves it visually 3px above its own
   laid-out position, but a CSS transform never changes the box used for a
   parent's overflow/auto-sizing math — that box stays exactly where it
   was pre-transform. With only 2px of padding-top as buffer, the lifted
   thumbnail's actual rendered position (3px up) exceeded that buffer and
   got its top sliced off by an ancestor's overflow:hidden. More
   padding-top than the lift distance guarantees the transformed box never
   reaches that boundary. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	margin: 16px 0 0 0 !important;
	padding: 12px 2px 4px 2px !important;
}

/* Each thumbnail: fixed square box, white background, rounded corners,
   photo centered and contained inside — the same frame+photo technique
   used for the Home page cards. box-sizing:border-box keeps the box at
   exactly 72x72 even once the active state's 1.5px border is added.
   2026-07-10: removed overflow:hidden and dropped the radius to 18px (50%
   of the main gallery box's 36px, per request). overflow:hidden here was
   clipping the active thumbnail's own box-shadow below — box-shadow is
   painted outside the border box, and overflow:hidden on the SAME element
   cuts off anything that extends past its own box, shadow included (a
   well-known CSS interaction, not actually about the radius value). Safe
   to drop: the img is already fully contained by max-width/max-height:100%
   + object-fit:contain, so nothing needs clipping to stay inside the box. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .flex-control-thumbs li {
	float: none !important;
	width: 72px !important;
	height: 72px !important;
	aspect-ratio: 1 / 1 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #FFFFFF !important;
	border-radius: 18px !important;
}

body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .flex-control-thumbs li img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 auto !important;
}

/* Active thumbnail indicator (2026-07-09, replaced the flat brand-blue
   border with a lift + drop-shadow instead, per request): no special
   border color for the selected thumbnail anymore — it keeps the same
   light border as every other thumbnail (from Additional CSS's base
   .flex-control-thumbs li rule, #E3EBF7, which we never override). What
   marks it as selected now is a small upward translateY (like a persistent
   hover) plus a soft shadow underneath, in brand blue at low opacity.
   Additional CSS's own base li rule already declares
   `transition: border-color .2s ease, box-shadow .2s ease, transform .2s
   ease !important` (never overridden by us), so this animates smoothly in
   without needing our own transition declaration.
   2026-07-10: shadow tightened from `0 8px 16px` to `0 2px 5px` — pulled in
   close to the box instead of floating well below it, per request; opacity
   bumped slightly (0.22 -> 0.28) so the smaller shadow stays visible. */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) {
	transform: translateY(-3px) !important;
	box-shadow: 0 2px 5px rgba(66, 95, 219, 0.28) !important;
}

/* =========================================================
   MOLDURA DA GALERIA ABAIXO DE 768px — fechamento das bordas direita e
   inferior (o defeito em "L").
   -----------------------------------------------------------
   PROPRIETÁRIO DA MOLDURA (inalterado): o ::after de
   .woocommerce-product-gallery__image.flex-active-slide, algumas regras
   acima. Ele já estava correto — inset:0 cobre 100% da caixa nos dois
   eixos, e os quatro lados saem da MESMA declaração
   (border: 1px solid #425fdb + box-shadow inset de 1px, radius 36px). Não
   havia borda faltando: havia borda sendo RECORTADA.

   CAUSA REAL (medida no DOM ao vivo, produto com 4 imagens de galeria):
   o Additional CSS do Customizer (inline <style> no <head>, não é arquivo)
   declara

     @media (max-width: 767px) {
       .single-product div.product div.images .woocommerce-product-gallery__wrapper {
         padding: 16px !important; border-radius: 24px !important;
         margin-bottom: 14px !important; } }

   Esses 16px de padding no WRAPPER (a esteira do FlexSlider) empurram o
   slide flutuado 16px para a direita e 16px para baixo dentro de
   .flex-viewport — que tem altura fixa de 480px e overflow:hidden. O slide
   mantém a largura medida pelo JS do FlexSlider (igual à do viewport), de
   modo que sua caixa fica do MESMO tamanho do recorte, só que deslocada:

     767px  viewport l=152 r=616 b=723   slide l=168 r=632 b=739
                                          -> transborda 16px à direita e 16px abaixo

   Resultado: as bordas superior e esquerda ficam dentro do recorte e
   aparecem; a direita e a inferior caem fora e são cortadas pelo
   overflow:hidden do .flex-viewport. Daí o "L". Nada a ver com
   box-sizing, com a altura do container, com estilo inline do FlexSlider
   nem com a moldura estar no dono errado.

   FAIXA REAL DO DEFEITO: medido em 700/766/767/768/780/799/800/801 —
   padding do wrapper = 16px até 767px e 0px de 768 em diante; o
   transbordo é 16/16 até 767 e 0/0 de 768 em diante. Ou seja, o limite é
   767px, não 800px: de 768 a 801 a moldura já fechava corretamente. Por
   isso esta regra é escopada exatamente a max-width:767px — dentro do
   teto de 799px pedido, sem tocar em nada que já estivesse certo e sem
   criar degrau entre 799 e 800.

   CORREÇÃO: zerar o padding do wrapper nessa faixa, devolvendo o slide ao
   alinhamento exato com o viewport (é o mesmo estado que já vale de 768px
   para cima). Assim os quatro lados da moldura voltam a caber no recorte,
   com a mesma espessura, a mesma cor e o mesmo raio — sem remendo de
   border-right/border-bottom isolados e sem tocar no ::after.

   O Additional CSS externo NÃO é removido (fora do escopo desta fase),
   apenas sobrescrito de forma escopada; a especificidade daqui
   (body.single-product + .woocommerce x3 + div.product + div.images +
   classe) vence a de lá (.single-product + div.product + div.images +
   classe) independentemente da ordem de impressão no <head>.

   Escopado a body.single-product: o Quick View (#yith-quick-view-modal)
   não é alcançado por nenhum destes seletores.
   ========================================================= */
@media (max-width: 767px) {
	body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
		padding: 0 !important;
	}
}

/* =========================================================
   MOBILE (<=767px): caixa da quantidade com a MESMA largura do botão
   "ADICIONAR AO PEDIDO".
   -----------------------------------------------------------
   ORIGEM DOS 18px (confirmada no DOM ao vivo, duas regras casam com
   div.quantity e nenhuma delas tem media query):

     [woocommerce.css 10.9.4]
       .woocommerce div.product form.cart div.quantity
       { float: left; margin: 0 4px 0 0; }

     [hello-commerce-woocommerce.css 1.0.3 — TEMA PAI]
       .woocommerce div.product form.cart div.quantity
       { margin-inline-end: 18px; }          <-- a causa

   form.cart é display:flex / flex-direction:column / gap:14px, então a
   quantity é um item flex esticado à largura do container MENOS suas
   margens. Os 18px de margem lateral encolhiam a caixa exatamente nesse
   valor: em 390px, quantity 302px contra 320px do botão, com a borda
   esquerda alinhada e a direita 18px curta. Medido idêntico (-18px) em
   390/425/433/480/600/736/767.

   No DESKTOP (>=1025px) a mesma margem faz o trabalho legítimo dela: ali o
   formulário é uma linha e os 18px são o respiro entre a quantity (76px) e
   o botão (270px). Por isso a correção é escopada a max-width:767px e o
   desktop não é tocado. O tablet (768px) fica como controle, também
   intocado, conforme o pedido.

   CORREÇÃO MÍNIMA: só zerar a margem lateral. Nenhuma das regras que casam
   com div.quantity declara width — os 302px eram o resultado do stretch do
   flex, não uma largura autoral — então remover a margem já devolve a
   largura cheia, sem precisar de width:100%, max-width, box-sizing nem de
   tocar no input.qty. Sem calc(), sem margem negativa, sem transform,
   sem padding compensatório: remove a causa em vez de compensá-la.

   margin-right acompanha margin-inline-end porque o shorthand `margin` do
   WooCommerce escreve a propriedade física; declarar as duas deixa o
   resultado independente da ordem de cascata entre as duas folhas.
   ========================================================= */
@media (max-width: 767px) {
	body.single-product.woocommerce div.product form.cart div.quantity {
		margin-inline-end: 0 !important;
		margin-right: 0 !important;
	}
}

/* =========================================================
   A) DISTÂNCIA DESCRIÇÃO -> "PRODUTOS RELACIONADOS" (<=1024px)
   -----------------------------------------------------------
   MEDIÇÃO: a distância NÃO dependia da quantidade de linhas — com 6 e com 8
   linhas de descrição o valor era o mesmo (210.5px em 390px). Não havia
   min-height, height fixa, flex-grow nem justify-content:space-between em
   lugar nenhum: painel e abas acompanham o conteúdo (height:auto,
   min-height:0, flex-grow:0). O problema era só o TAMANHO, e ele vinha de
   CINCO espaçamentos somados, exatamente o que o pedido proíbe:

     390px  = 4.5 (leading da última linha)
            + 30 (.panel margin-bottom: 2em — woocommerce.css)
            + 64 (.woocommerce-tabs margin-bottom)
            + 40 (row-gap do grid div.product)
            + 64 (.related.products margin-top — Additional CSS)
            +  8 (.related.products padding-top)
            = 210.5  ✓ confere com o medido

     768px  = 4.2 + 32 + 64 + 40 + 88 + 8 = 236.2  ✓
     1025px = 4.2 + 32 + 64 + 56 + 88 + 8 = 252.2  ✓

   Detalhe que explica por que as margens não se anulavam: div.product é um
   GRID (row-gap 40px até 1024px, 56px no desktop), e margens de itens de
   grid NÃO colapsam — por isso os 64px das abas e os 64/88px da seção se
   somavam em vez de virar um só.

   CORREÇÃO: zerar os três somatórios arbitrários (margem do painel, margem
   das abas e padding da seção) e deixar UM único proprietário ajustável,
   .related.products { margin-top }. O row-gap do grid fica de fora de
   propósito: ele é o ritmo estrutural compartilhado da página (é o mesmo gap
   que separa galeria e abas), então mexer nele deslocaria áreas fora do
   escopo. A distância final passa a ser row-gap + margin-top + leading, com
   só o margin-top como variável de calibração.

   DESKTOP (>=1025px) INTOCADO: nada aqui entra em @media (min-width:1025px),
   então os 252.2px aprovados permanecem exatamente como estão.
   ========================================================= */
@media (max-width: 1024px) {
	/* .panel { margin: 0 0 2em } vem do woocommerce.css 10.9.4 */
	body.single-product.woocommerce div.product .woocommerce-tabs .panel,
	body.single-product.woocommerce div.product .woocommerce-Tabs-panel {
		margin-bottom: 0 !important;
	}

	body.single-product.woocommerce div.product .woocommerce-tabs {
		margin-bottom: 0 !important;
	}

	body.single-product.woocommerce div.product .related.products {
		padding-top: 0 !important;
	}

	/* O último parágrafo da descrição tem margin-bottom próprio (~14.4px) e,
	   como o painel ficou sem padding-bottom nem borda, essa margem COLAPSA
	   para fora do painel e reaparece como espaço entre o texto e a seção
	   seguinte — medido exatamente assim: painel.bottom 1968.4 contra
	   tabs.bottom 1982.8. Zerar só no último filho mantém o ritmo entre os
	   parágrafos internos e tira o resíduo da borda de baixo, que é o que
	   impedia a distância de ser governada por uma propriedade só. */
	body.single-product.woocommerce div.product .woocommerce-Tabs-panel > *:last-child {
		margin-bottom: 0 !important;
	}
}

/* Único proprietário da distância. row-gap (40px) + leading (~4.3px) já dão
   ~44px; estes 4px fecham em ~48px, a faixa pedida para o mobile. */
@media (max-width: 767px) {
	/* REFINADO: 4px -> 20px. row-gap (40) + leading (~4.5) + 20 = ~64.5px,
	   contra os 48.5px anteriores. Mais respiro sem voltar ao vazio antigo, e
	   o proprietário continua sendo só este margin-top. */
	body.single-product.woocommerce div.product .related.products {
		margin-top: 20px !important;
	}
}

/* 40 + 4.2 + 12 = ~56px, a faixa pedida para o tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
	/* REFINADO: 12px -> 28px. 40 + ~4.2 + 28 = ~72px, mantendo o tablet um
	   pouco mais folgado que o mobile, como já era a proporção. */
	body.single-product.woocommerce div.product .related.products {
		margin-top: 28px !important;
	}
}

/* =========================================================
   B) CARROSSEL DE PRODUTOS RELACIONADOS (<=1024px)
   -----------------------------------------------------------
   ARQUITETURA: scroll-snap nativo + JS próprio (assets/js/
   related-products-carousel.js). O único carrossel já carregado nesta página
   é o FlexSlider do WooCommerce (jquery.flexslider.min.js), que existe para a
   galeria: filmstrip baseado em float com larguras calculadas por JS e
   markup próprio. Reaproveitá-lo num ul.products significaria deixá-lo
   escrever width/float/position nos cards — exatamente as propriedades que o
   design system dos cards controla — e criaria dependência de um plugin de
   galeria para uma seção que não é galeria. Swiper/Splide/Flickity/Slick não
   estão carregados aqui (verificado: window.Swiper, window.Splide,
   window.Flickity e jQuery.fn.slick todos ausentes), e o Swiper do Elementor
   não entra nesta página. Então: nada de biblioteca nova, nada de CDN,
   nada de plugin — scroll-snap resolve com CSS nativo e dá swipe, trackpad,
   arraste e rolagem por teclado de graça.

   O desktop (>=1025px) não é tocado: a grade de 4 colunas segue igual, sem
   overflow, sem setas e sem JS de carrossel ativo.
   ========================================================= */
@media (max-width: 1024px) {
	/* A pista. O ul.products é grid vindo do Additional CSS; vira flex aqui. */
	/* min-width:0 nos três níveis é o que impede a armadilha clássica de
	   min-content: .related.products é item de um GRID (div.product) e, sem
	   isto, o tamanho mínimo automático do item passa a ser o min-content da
	   pista — ou seja, a soma dos 4 cards que não encolhem. Medido antes da
	   correção: a coluna do grid inteira ia de 370px para 683.4px em um
	   viewport de 390px, arrastando galeria e abas junto e criando overflow
	   horizontal na página. Com min-width:0 o item volta a caber na coluna e
	   o excedente vira rolagem interna da pista, que é o que se quer. */
	body.single-product.woocommerce div.product .related.products {
		min-width: 0 !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-carousel {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.single-product.woocommerce div.product .related.products ul.products {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		gap: var(--supra-rel-gap, 16px) !important;
		margin: 0 !important;
		padding: 0 0 4px !important;
		list-style: none !important;
		/* A barra fica escondida aqui de propósito: a navegação é pelas setas
		   e pelo swipe, e o sistema de scrollbar do projeto
		   (theme-scrollbars.css) trata só html, mini-cart e Quick View — esta
		   pista não entra naquele inventário. */
		scrollbar-width: none !important;
	}

	body.single-product.woocommerce div.product .related.products ul.products::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* Cada card: largura fixa por página, sem encolher, ancorado ao snap.
	   --supra-rel-visiveis é trocado por breakpoint mais abaixo. */
	body.single-product.woocommerce div.product .related.products ul.products li.product {
		flex: 0 0 calc(
			(100% - (var(--supra-rel-visiveis, 2) - 1) * var(--supra-rel-gap, 16px))
			/ var(--supra-rel-visiveis, 2)
		) !important;
		max-width: none !important;
		width: auto !important;
		margin: 0 !important;
		scroll-snap-align: start !important;
	}

	/* Wrapper da pista + setas, criado pelo JS. */
	body.single-product.woocommerce div.product .related.products .supra-rel-carousel {
		position: relative !important;
	}

	/* Setas: pílula circular, ícone só, identidade da marca. */
	body.single-product.woocommerce div.product .related.products .supra-rel-nav {
		display: flex !important;
		gap: 10px !important;
		justify-content: flex-end !important;
		align-items: center !important;
		margin: 0 0 14px !important;
		padding: 0 !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow {
		appearance: none !important;
		-webkit-appearance: none !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		padding: 0 !important;
		background-color: #E8EDFF !important;
		color: #425fdb !important;
		border: 1px solid #DCE8F8 !important;
		border-radius: 999px !important;
		box-shadow: none !important;
		cursor: pointer !important;
		transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.15s ease-in-out !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow svg {
		width: 16px !important;
		height: 16px !important;
		display: block !important;
		pointer-events: none !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow:hover:not(:disabled) {
		background-color: #425fdb !important;
		color: #ffffff !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow:active:not(:disabled) {
		background-color: #0a1b8c !important;
		color: #ffffff !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow:focus-visible {
		outline: 2px solid #050A55 !important;
		outline-offset: 2px !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow:disabled {
		opacity: 0.35 !important;
		cursor: default !important;
	}

	/* Sem overflow real: o JS marca o wrapper e as setas somem. */
	body.single-product.woocommerce div.product .related.products .supra-rel-carousel.supra-rel-sem-overflow .supra-rel-nav {
		display: none !important;
	}
}

/* Mobile e tablet menor: 2 cards por vez. */
@media (max-width: 899px) {
	body.single-product.woocommerce div.product .related.products ul.products {
		--supra-rel-visiveis: 2;
		--supra-rel-gap: 16px;
	}
}

/* Tablet largo: 3 cards por vez. */
@media (min-width: 900px) and (max-width: 1024px) {
	body.single-product.woocommerce div.product .related.products ul.products {
		--supra-rel-visiveis: 3;
		--supra-rel-gap: 20px;
	}
}

/* Sem animação para quem pede menos movimento — navegação segue funcionando. */
@media (prefers-reduced-motion: reduce) {
	body.single-product.woocommerce div.product .related.products ul.products {
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   C) MOBILE ESTREITO (<550px) — UM CARD POR VEZ
   -----------------------------------------------------------
   DECISÃO, tomada por medição e não por preferência. Com 2 cards visíveis
   nessa faixa o card fica com 177-241px e o conteúdo quebra:

     vw    cardW   linhas do título   linhas do CTA
     390   177     5                  2
     400   182     7                  2
     430   197     6                  2
     480   222     3                  2
     518   241     4                  1

   Título de 5 a 7 linhas, altura do bloco de título oscilando entre 60 e
   101.5px de um viewport para o outro, e o CTA principal quebrando em duas
   linhas: é exatamente o "apertado, hierarquicamente ruim e visualmente
   pesado" que o pedido define como gatilho para preferir 1 card.

   Com 1 card na mesma faixa, medido: título passa a 2-3 linhas com altura
   estável em 60px e o CTA nunca quebra.

     vw    cardW   linhas do título   linhas do CTA
     390   370     3                  1
     400   380     2                  1
     430   410     3                  1
     480   460     2                  1
     518   498     2                  1

   O efeito colateral de 1 card era a altura: o quadro da imagem é
   aspect-ratio 4/5, então a 370px de largura ele sozinho passava de 460px e
   o card inteiro chegava a 713-873px, com a foto pequena perdida no meio de
   muito branco. Por isso o quadro é reproporcionado para 3/2 SÓ nesta faixa
   e SÓ dentro de .related.products — a foto ganha peso relativo e o card
   volta a uma altura de leitura normal. O componente global do card, o
   catálogo, a Home, o Quick View e o mini-cart não são tocados.

   De 550px para cima nada muda: 2 cards até 899, 3 de 900 a 1024 e a grade
   de 4 no desktop, todos já aprovados.
   ========================================================= */
@media (max-width: 549px) {
	body.single-product.woocommerce div.product .related.products ul.products {
		--supra-rel-visiveis: 1;
		--supra-rel-gap: 16px;
	}

	/* Quadro da imagem mais baixo: 4/5 -> 3/2. Escopado à seção e à faixa. */
	/* .related.related.products (classe repetida) sobe a especificidade em um
	   ponto: theme-related-products.css declara o aspect-ratio 4/5 com um
	   seletor de peso idêntico ao natural aqui E é enfileirado depois, então
	   no empate ele venceria pela ordem de origem. */
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .supra-product-image-frame {
		aspect-ratio: 3 / 2 !important;
		padding: 18px !important;
		margin-bottom: 14px !important;
	}

	/* Respiro lateral: o container da página já dá 10px de cada lado; estes
	   6px fecham nos ~16px pedidos, sem os cards colarem na borda. Aplicado
	   na seção inteira para que o título "PRODUTOS RELACIONADOS", a pista e
	   as setas fiquem todos no mesmo alinhamento. */
	body.single-product.woocommerce div.product .related.products {
		padding-inline: 6px !important;
	}

	/* Setas menores: 40px -> 34px (-6px, dentro da redução pedida), ícone
	   16px -> 13px. Segue confortável para toque e fica bem mais leve. */
	body.single-product.woocommerce div.product .related.products .supra-rel-arrow {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-arrow svg {
		width: 13px !important;
		height: 13px !important;
	}

	body.single-product.woocommerce div.product .related.products .supra-rel-nav {
		gap: 8px !important;
		margin-bottom: 12px !important;
	}
}

/* Título do card abaixo de 550px: soltar o min-height de 60px.
   Ele existia para igualar a altura dos cards numa GRADE. Aqui a pista é
   flex com align-items:stretch, que já iguala a altura de todos os cards
   sozinha — então o min-height virou só reserva de espaço vazio: com 1 card
   por vez o título passou a ocupar 2 linhas (29px) dentro de uma caixa de
   60px, abrindo ~31px de buraco entre o nome do produto e o preço e
   quebrando a hierarquia que este ajuste quer justamente melhorar. */
@media (max-width: 549px) {
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .woocommerce-loop-product__title {
		min-height: 0 !important;
	}
}

/* =========================================================
   D) GAP ENTRE OS DOIS CTAs DO CARD RELACIONADO (<550px)
   -----------------------------------------------------------
   O espaço de 20px medido NÃO vinha de uma propriedade só: o li.product é
   display:flex/column com row-gap:16px E o primeiro botão ainda carrega
   margin-bottom:4px (theme-related-products.css). 16 + 4 = 20px, dois donos
   somando. Zerar a margem e deixar o gap do card como proprietário único
   resolve e entrega os ~12px pedidos.
   ========================================================= */
@media (max-width: 549px) {
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product {
		row-gap: 12px !important;
	}

	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .add_to_cart_button {
		margin-bottom: 0 !important;
	}
}

/* =========================================================
   E) RESPIRO LATERAL DA DESCRIÇÃO (<=767px)
   -----------------------------------------------------------
   Medido em 400px: o painel da descrição tem padding 0 e ocupa 380 de 400,
   ou seja o texto encosta nos mesmos 10px que o container da página dá — a
   mesma lateral estreita das abas. Os 6px daqui fecham nos ~16px pedidos,
   alinhando a descrição com o respiro que a seção de relacionados já usa
   nesta faixa.

   Proprietário único: o padding-inline do próprio painel. Usei as longhands
   inline em vez do shorthand `padding` de propósito — o Additional CSS
   declara `.woocommerce-Tabs-panel { padding: 6px 0 0 }` e o shorthand
   apagaria aquele padding-top de 6px, que é espaçamento aprovado. Nada de
   padding redundante em outro nível: as abas, o wrapper e os parágrafos
   ficam intocados.

   FAIXA: max-width 575px, medida e não presumida. O container da página
   troca de comportamento exatamente em 576px — até 575px o texto fica a
   10px da borda; de 576px em diante ele já é centrado com 56px e cresce
   dali para cima (68px em 600, 152px em 767, 102px em 768). Ou seja, o
   aperto só existe abaixo de 576px; aplicar o respiro acima disso apenas
   estreitaria um bloco que já tem folga de sobra, sem resolver nada — por
   isso o tablet e o desktop ficam fora, e a largura visual aprovada deles
   é preservada.

   Registro honesto sobre o padding-top: o Additional CSS declara
   `.woocommerce-Tabs-panel { padding: 6px 0 0 }`, mas no mobile o valor
   computado já era 0px ANTES desta fase (medido nos dois estados). As
   longhands inline seguem sendo a escolha certa por não mexerem no eixo
   vertical, mas não há um padding-top de 6px sendo preservado aqui.
   ========================================================= */
@media (max-width: 575px) {
	body.single-product.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
		padding-inline: 6px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* =========================================================
   F) MOLDURA DA IMAGEM QUANDO O PRODUTO TEM UMA ÚNICA IMAGEM
   -----------------------------------------------------------
   CAUSA EXATA (comparação de DOM entre um produto de 4 imagens e um de 1):
   as classes da galeria são IDÊNTICAS nos dois casos —
   `woocommerce-product-gallery woocommerce-product-gallery--with-images
   woocommerce-product-gallery--columns-4 images`. Não existe classe do
   WooCommerce que distinga "tem galeria" de "não tem", e
   --without-images só aparece quando não há imagem nenhuma.

   A diferença real está no que o FlexSlider cria em tempo de execução:

     4 imagens -> .flex-viewport existe, miniaturas existem, e o slide
                  recebe a classe .flex-active-slide
     1 imagem  -> o FlexSlider NÃO inicializa: sem .flex-viewport, sem
                  miniaturas, e o slide fica só com
                  .woocommerce-product-gallery__image

   Como a moldura aprovada é desenhada por
   `.woocommerce-product-gallery__image.flex-active-slide::after`, e essa
   classe só existe por obra do JS do FlexSlider, o produto de imagem única
   nunca a recebia — medido: `content: none`, bordas 0px/0px/0px/0px. Não é
   que a borda sumia; ela nunca chegava a ser gerada.

   PROPRIETÁRIO ESCOLHIDO: `:only-child`. Confirmado no DOM que, com uma
   imagem, o wrapper tem exatamente um filho e o slide é `:only-child`;
   com várias, são 5 slides e o seletor não casa. É estrutural, estável,
   não depende de JS, não exige `:has()` e não precisa de classe nova
   escrita pelo plugin. O slide também recebe position:relative aqui, que
   no caso múltiplo vem da regra do .flex-active-slide.

   As declarações da moldura são as MESMAS da galeria múltipla (1px sólido
   #425fdb + box-shadow inset de 1px, radius 36px, inset 0, pointer-events
   none, z-index 5), então os dois casos ficam pixel a pixel no mesmo
   sistema visual. Nada aqui toca a galeria com várias imagens, as
   miniaturas, o lightbox, o srcset/sizes, o link ou o Quick View.
   ========================================================= */
body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:only-child {
	position: relative !important;
	overflow: hidden !important;
	background: #FFFFFF !important;
	border-radius: 24px !important;
	box-sizing: border-box !important;
}

body.single-product.woocommerce.woocommerce.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:only-child::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 36px !important;
	border: 1px solid #425fdb !important;
	box-shadow: inset 0 0 0 1px #425fdb !important;
	pointer-events: none !important;
	z-index: 5 !important;
}

/* =========================================================
   G) CARDS RELACIONADOS EM COLUNA ESTREITA (900-1199px)
   -----------------------------------------------------------
   G.1 CAIXAS DE IMAGEM DESIGUAIS — causa exata.

   Medido no DOM ao vivo, cards com a MESMA largura tendo molduras
   diferentes no mesmo viewport:

     1099px, card 167px (caixa de conteúdo 127px):
       "…La Fajor … Brigadeiro"      -> link 125.0  -> moldura 125.0x156.3
       "Pasta de Amendoim…"          -> link 125.0  -> moldura 125.0x156.3
       "…Protein Crisp … Integralmedica" -> link 132.5 -> moldura 132.5x165.6
       "Protein Crisp … Integralmedica"  -> link 132.5 -> moldura 132.5x165.6

   O <a class="woocommerce-LoopProduct-link"> é `display:flex` com
   `flex: 1 1 auto` e `min-width: auto`. Em item flex, min-width:auto faz o
   tamanho mínimo automático ser o MIN-CONTENT — que aqui é a maior palavra
   indivisível do título. Os cards cujo nome contém "Integralmedica" (14
   caracteres, 132.5px) não conseguem encolher abaixo disso e estouram a
   caixa de 127px do card; os demais, com "Brigadeiro"/"Amendoim", cabem e
   ficam em 125px. Como a moldura é width:100% do link, ela herda a
   diferença. Não era aspect-ratio, nem padding, nem imagem: era a palavra
   do título mandando na largura do link.

   Correção: min-width:0 devolve ao link a capacidade de encolher até a
   caixa do card, e overflow-wrap:break-word deixa a palavra longa quebrar
   em vez de empurrar. Sem truncar, sem ellipsis, sem esconder linha —
   o nome do produto continua inteiro.

   Faixa: até 1199px. De 1200px em diante a coluna já é larga o bastante
   para a palavra caber (links já eram 210px uniformes em 1200 e 1366),
   então lá a regra é inerte — verificado.
   ========================================================= */
@media (max-width: 1199px) {
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product > a.woocommerce-LoopProduct-link {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .woocommerce-loop-product__title {
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}
}

/* =========================================================
   G.2 COMPACTAÇÃO NA FAIXA 900-1199px
   -----------------------------------------------------------
   Faixa determinada por medição, não pelo print: é exatamente onde a
   coluna fica mais estreita e o conteúdo transborda de linhas.

     899px  (2 cards, 274px)  título 3-4 linhas, CTA 1 linha  -> ok
     900px  (3 cards, 174.7)  título 5-7 linhas, CTA 2 linhas -> problema
     1024px (3 cards, 237.3)  título 3-5 linhas, CTA 1 linha  -> limítrofe
     1025px (grade 4, 167)    título 5-7 linhas, CTA 2 linhas -> problema
     1099px (grade 4, 167)    título 5-8 linhas, CTA 2 linhas -> problema
     1199px (grade 4, 167)    título 5-8 linhas, CTA 2 linhas -> problema
     1200px (grade 4, 252)    título 3-4 linhas, CTA 1 linha  -> ok
     1366px (grade 4, 252)    título 3-4 linhas, CTA 1 linha  -> ok

   Ou seja, o desktop largo aprovado começa em 1200px, não em 1025px — a
   grade de 4 colunas entra em 1025 mas só ganha largura de verdade em
   1200. Abaixo de 900 e a partir de 1200 nada aqui se aplica.
   ========================================================= */
@media (min-width: 900px) and (max-width: 1199px) {
	/* Título: 12.5/14.5 -> 11.5px/1.15. Família, peso, cor, caixa alta e
	   alinhamento intocados; só corpo e entrelinha encolhem. */
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .woocommerce-loop-product__title {
		font-size: 11.5px !important;
		line-height: 1.15 !important;
	}

	/* Botões: 11px/48px -> 10px/44px (principal) e 42px (secundário),
	   padding lateral 16 -> 12px. Cores, raio, hierarquia e hover
	   inalterados. */
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .add_to_cart_button {
		font-size: 10px !important;
		line-height: 1.1 !important;
		min-height: 44px !important;
		padding: 10px 12px !important;
	}

	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product a.button.yith-wcqv-button {
		font-size: 10px !important;
		line-height: 1.1 !important;
		min-height: 42px !important;
		padding: 10px 12px !important;
	}

	/* Espaçamento interno mais compacto. row-gap do card é o dono único do
	   espaço entre os dois CTAs (a margin-bottom de 4px do primeiro é
	   zerada aqui pelo mesmo motivo já documentado na seção D). */
	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product {
		row-gap: 12px !important;
	}

	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .add_to_cart_button {
		margin-bottom: 0 !important;
	}

	body.single-product.woocommerce.woocommerce.woocommerce .related.related.products ul.products li.product .supra-product-image-frame {
		margin-bottom: 14px !important;
	}
}
