/**
 * Supra Force — "Ver Produto" Quick View popup (YITH WooCommerce Quick
 * View plugin), redesigned to a real two-column layout (image | info)
 * similar to the single-product page, sized to fit its content without
 * a scrollbar, using this project's established typography/color/radius
 * system. Enqueued sitewide via supra_force_enqueue_quick_view_styles()
 * — the trigger button (.yith-wcqv-button) already appears in more than
 * one loop context (Home, related products), so this follows the
 * mini-cart's precedent of loading unconditionally rather than gating on
 * a specific page template.
 *
 * Root cause of the cramped/scrolling layout this replaces: the plugin's
 * own CSS (yith-woocommerce-quick-view/assets/css/yith-quick-view.css)
 * already declares `div[id^="product"] { display:flex; flex-direction:row }`
 * for the two-column intent, but leaves both columns' width rules
 * commented out in its source — so the image column never claims real
 * space and shrinks to its intrinsic (tiny) size — while a fixed
 * `.product{height:600px}` plus `div.summary{max-height:600px;
 * overflow-y:auto}` clips and scrolls whatever doesn't fit in that
 * narrow leftover column. This file gives both columns real widths and
 * switches every fixed height to auto, so the modal grows to fit its
 * (now trimmed-down) content instead of clipping it.
 *
 * Scope decision: the "trust badges" block (Low Price / Produto
 * Original / Pedido Direto) is hidden inside this popup specifically
 * (kept intact on the real single-product page). That content isn't
 * essential to a one-click add-to-cart decision, and cutting it is the
 * most reliable way to guarantee no scrollbar is needed — flag if you'd
 * rather keep it and let the modal grow taller instead.
 */

/* =========================================================
   0. Overlay — the dark backdrop behind the popup. Brand-tinted navy
   instead of the plugin's plain black default.
   ========================================================= */
#yith-quick-view-modal .yith-quick-view-overlay {
	background: rgba(81, 81, 106, 0.89) !important;
}

/* =========================================================
   1. Modal wrapper — bigger, no fixed height, matches this project's
   large-radius card language instead of the plugin's plainer default.
   ========================================================= */
/* 2026-07-10: tried leaving height unset entirely to let the plugin's
   own JS measure and write it back — that fixed centering (JS's top/
   left math is now working against real dimensions) but the box still
   rendered small with an internal scrollbar, meaning the JS's own
   height measurement still isn't reliable here (likely measuring before
   the two-column layout has finished reflowing, or some other plugin-
   side quirk). Taking full manual control instead: fixed viewport-
   percentage width/height, generous enough to comfortably fit the
   content this popup actually has (confirmed ~588px via live DevTools),
   with overflow-y:auto on .yith-wcqv-main below as a safety net only —
   should never actually trigger given these dimensions. */
#yith-quick-view-modal .yith-wcqv-wrapper {
	width: 90vw !important;
	max-width: 1100px !important;
	height: 82vh !important;
	max-height: 720px !important;
	border-radius: 28px !important;
	/* Explicit white — previously relied entirely on the plugin's own
	   PHP-injected inline background (from its color-picker setting),
	   which should default to white but left room for a mismatched edge
	   color to show through at the card's boundary ("borda direita
	   competindo espaço com o final do popup"). This guarantees it. */
	background-color: #ffffff !important;
	box-shadow: 0 28px 80px rgba(5, 10, 85, 0.16) !important;
	/* Clips anything that bleeds past the rounded corners — specifically
	   the diagonal blue accent stripe (.summary::before, see note further
	   down) inherited from the single-product page's own decorative
	   design, which otherwise pokes out past this card's top-right
	   corner instead of staying inside it. */
	overflow: hidden !important;
}

#yith-quick-view-modal.open .yith-wcqv-main {
	height: 100% !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	background-color: #ffffff !important;
}

/* REAL root cause of the blank-space bug, finally confirmed via live
   DevTools (the earlier "JS caches a stale width" theory was wrong):
   YITH's own template gives #yith-quick-view-content the literal class
   "single-product" (`class="yith-quick-view-content woocommerce
   single-product"` — visible in the plugin's own template file). This
   project's Customizer Additional CSS has a rule from the real
   single-product page — `.single-product div.product { display:grid;
   grid-template-columns:minmax(0,1.05fr) minmax(360px,0.95fr); }` —
   meant to lay out that page's own image+summary columns. Because of
   that shared "single-product" class, the OUTER <div class="product">
   wrapper here (the direct parent of #product-{ID}.product, one level
   above what our own flex rule below targets) ALSO matches that
   selector and becomes a 2-column CSS Grid. It only has ONE child
   (#product-{ID}.product), which lands in the first (~52%) grid column
   — the second (~48%) column has nothing to fill it, rendering as the
   blank space seen in every screenshot so far. Fix: force this specific
   outer wrapper back to a plain single-column block, killing the
   inherited grid-template-columns outright. */
#yith-quick-view-content {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
}

/* 2026-07-10: padding:8px moved here (the outer <div class="product">
   wrapper, one level below #yith-quick-view-content) — the flex row's
   own padding:8px (further below) wasn't producing a visible gap
   between the summary column and the popup's right edge (reported as
   "glued" to it). This is the single source of the 8px inset now — the
   flex row itself no longer duplicates it (see its own rule below). */
/* 2026-07-10: padding moved OFF this element and onto the grid
   container itself (#product-{ID}.product, below) — one less layer of
   indirection between "where the padding is declared" and "the grid
   that actually divides the padded space into columns," removing any
   chance of it not fully reaching through. */
#yith-quick-view-content > div.product {
	display: block !important;
	grid-template-columns: none !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

/* 2026-07-10: switched from flexbox to CSS Grid entirely. Live DevTools
   inspection (the user walked through this in detail, comparing the
   highlighted box geometry of .summary-content against the visibly
   rendered card) showed the actual rendered width/position of the
   right column disagreeing with where it visually appeared — a sign of
   ambiguous flex-basis math (percentage flex-basis + a gap + padding
   stacked across three nested flex levels: .product, .images, .summary
   all fighting over how "remaining space" gets computed). Grid's `fr`
   unit doesn't have that ambiguity — it's specifically defined as
   "whatever's left after fixed tracks and gaps are subtracted," a
   single unambiguous calculation instead of flex-grow interacting with
   percentage flex-basis across nested containers. Same visual result
   (50/50 columns, 40px gap, 8px outer padding) via a much more
   predictable mechanism. */
.yith-quick-view-content.woocommerce div.product .product {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: 50% 1fr !important;
	align-items: stretch !important;
	gap: 40px !important;
	padding: 8px !important;
}

/* =========================================================
   2. Column widths — the actual fix: giving both columns real,
   uncommented-out widths instead of the plugin's shrink-to-content
   default.
   ========================================================= */
/* Image column: the frame (background/border/radius) now lives on the
   CONTAINER, not the <img> itself — matches the pattern used everywhere
   else in this project (Home cards, related-products), and gives a
   single, clear place to control the internal padding instead of it
   being split across two elements. height:100% makes this box match
   the right column's height exactly — when there's a single product
   photo (no gallery/thumbnails), it just centers in that full-height
   box via the flex centering below, instead of shrink-wrapping to a
   small floating square. */
/* width/height:100% — fills whatever the grid track gives it (the
   .product rule above defines the actual 50%/1fr split now), no
   flex-basis properties needed as a grid item. */
#yith-quick-view-content div.images {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 28px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #F9FBFF !important;
	border: 1px solid #E6EDF8 !important;
	border-radius: 24px !important;
}

#yith-quick-view-content div.images img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* width/height:100% — fills the grid's second (1fr) track exactly, no
   flex-grow/flex-basis math involved anymore. The old padding-right:8px
   patch (added while still on flexbox, trying to compensate for the
   ambiguous flex-basis math) is gone — grid's own gap:40px (on .product
   above) plus its 8px outer padding already produce a clean, correctly
   computed edge with no compensation needed. */
#yith-quick-view-content div.summary {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* 2026-07-10: decorative diagonal blue accent stripe removed entirely,
   per request — clean 100% white now. Both sources are neutralized:
   the ORIGINAL stripe bled in from the single-product page's own
   Additional CSS (.summary::before, via the shared "single-product"
   class this popup's markup carries) — killed at the source rather
   than just restyled, since restyling it alone left it as a second,
   separately-rendering element whenever this project's own
   #yith-quick-view-content::before accent (since removed too) was also
   present. */
#yith-quick-view-content div.summary::before {
	content: none !important;
	display: none !important;
}

/* Real bug fix: the .summary column itself was already correctly
   claiming the remaining flex space, but the plugin wraps its actual
   content in a NESTED div.summary-content that has its own width
   constraint from the plugin's own CSS — so the outer column was wide,
   the inner content block inside it wasn't, leaving a large blank strip
   of white on the right (confirmed via screenshot: price/description/
   button all hugging the left edge of a much wider empty card). Forcing
   this inner wrapper to 100% is the actual fix. Padding lives here
   (not on .summary above) — single, explicit place to control it. */
/* 2026-07-10: switched from justify-content:center to flex-start — top-
   aligned, reading top-to-bottom like the single-product page's own
   summary card, instead of floating centered in the middle of a tall
   82vh-high column. This is also most of the fix for "the blue stripe
   looks too dominant": centering left a large empty band above AND
   below the content, and the diagonal stripe (spans the column's full
   height) read as the dominant visual against all that empty space.
   Top-aligned content now fills from the padding down in a natural
   hierarchy, same as the reference page. */
#yith-quick-view-content div.summary .summary-content {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	box-sizing: border-box !important;
	/* 2026-07-10: reverted the asymmetric padding (56/96/56/64) — per
	   request, uniform 28px on all sides, matching .images exactly
	   (same value the left column already uses), instead of inventing a
	   different, larger, asymmetric value for this column.
	   2026-07-10 (again): padding-top bumped 28->36 (+8px) to push the
	   title/price/description/button group down for more breathing
	   room at the top — compensated by an equal -8px on .product_meta's
	   margin-top below, so the divider's absolute position stays exactly
	   where it was (only the group above it visually shifts). */
	padding: 36px 28px 28px 28px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* =========================================================
   4. Info column typography/color, matching the single-product page's
   own treatment but with this project's current brand blue (#425fdb)
   instead of the older Additional CSS's #2F65F2.
   ========================================================= */
#yith-quick-view-content .product_title {
	/* 2026-07-10: confirmed via live DevTools computed styles that
	   something (not one of the rules visible in the matched-rules
	   panel, so likely further down the cascade than we could see) sets
	   this to display:none. Every other property here already won via
	   !important — display was just never one of them, an oversight,
	   not a mystery. */
	display: block !important;
	margin: 20px 0 24px 0 !important;
	max-width: 100% !important;
	color: #050A55 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 26px !important;
	font-weight: 900 !important;
	letter-spacing: .02em !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
}

/* 2026-07-10: title/price sizes swapped (title 24->26, price 30->24) —
   the reference single-product page always has the title reading
   BIGGER than the price (title ~28-32px, price 25px); this popup had
   it backwards, undermining the hierarchy. */
#yith-quick-view-content .summary .price {
	display: block !important;
	margin: 0 0 30px 0 !important;
	color: #425fdb !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 26px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
}

/* Short description: kept genuinely brief — clamped to 3 lines so a
   long product excerpt can never be the reason this popup needs to
   scroll. Larger + more line-height than before, matching the more
   spacious/vertical feel of the rest of this redesign. */
/* 2026-07-10: dropped the 3-line clamp/overflow:hidden entirely — with
   the popup's generous fixed height there's plenty of room, and the
   clamp was the reason the description read as cut off/invisible (a
   4-line wrapped title pushing the description down combined with the
   hard clamp left it clipped mid-sentence). Text now just wraps
   naturally to however many lines it needs. */
#yith-quick-view-content .woocommerce-product-details__short-description {
	margin: 0 0 30px 0 !important;
	color: #111827 !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	display: block !important;
	overflow: visible !important;
}

/* Quantity input + Add to Cart button: pill shapes matching this
   project's established form/button system (single-product page,
   mini-cart, cart page). margin-bottom separates this block from the
   meta (Categoria/Marca) block below it. */
/* flex-wrap:nowrap (was wrap) — quantity and the Add to Cart button
   must always stay on the same row, side by side, never stacking. */
#yith-quick-view-content form.cart {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	margin: 20px 0 20px 0 !important;
}

#yith-quick-view-content form.cart .quantity input.qty {
	flex-shrink: 0 !important;
	width: 76px !important;
	height: 50px !important;
	padding: 0 8px !important;
	background: #ffffff !important;
	border: 1px solid #DCE8F8 !important;
	border-radius: 999px !important;
	color: #050A55 !important;
	font-family: 'LOFT', sans-serif !important;
	font-weight: 900 !important;
	text-align: center !important;
}

#yith-quick-view-content form.cart .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 50px !important;
	padding: 0 32px !important;
	background: #425fdb !important;
	border: none !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out !important;
}

#yith-quick-view-content form.cart .single_add_to_cart_button:hover {
	background: #050A55 !important;
	transform: translateY(-2px) !important;
}

/* Trust badges: hidden inside this popup — see file header for why.
   Selector is a best-effort match on the same class the single-product
   page uses for this block; if it renders under a different wrapper
   inside Quick View's own markup (this popup is built from a different
   plugin hook than the single-product page template), this may need
   adjusting once confirmed live. */
#yith-quick-view-content .supra-product-trust {
	display: none !important;
}

/* Category/Brand meta: was plain unstyled black text with default blue
   links — now matches the single-product page's own meta treatment
   (muted label color, thin top divider, brand-blue links), giving the
   card a proper closing block instead of trailing off in browser
   defaults. Fills out the extra vertical room from the wider info
   column instead of leaving it as dead space. */
/* 2026-07-10: margin-top back to a fixed small value (8px) — the
   earlier margin-top:auto (pushing this block to the bottom of the
   column) is exactly what created the large gap now being reported;
   per this follow-up request the divider should sit close (~8px) to
   the button above it instead. */
/* 2026-07-10: flex:1 1 auto + flex-direction:column + justify-content:
   flex-end — the block itself (and its divider, the border-top) STAYS
   right where it was (20px below the button), but now grows to fill
   whatever vertical space remains in the column, with its own content
   (the SKU/Categoria/Tags/Marca lines) bottom-aligned within that
   grown space. This is different from the earlier margin-top:auto
   attempt (which moved the divider itself down to the bottom) — here
   the divider stays put, only the text below it shifts down. */
#yith-quick-view-content .product_meta {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	margin-top: 36px !important;
	padding-top: 20px !important;
	border-top: 1px solid #DCE8F8 !important;
	color: #6B7280 !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 13.5px !important;
	line-height: 2 !important;
}

#yith-quick-view-content .product_meta > span {
	display: block !important;
	flex-shrink: 0 !important;
}

#yith-quick-view-content .product_meta a {
	color: #425fdb !important;
	text-decoration: none !important;
}

#yith-quick-view-content .product_meta a:hover {
	color: #050A55 !important;
	text-decoration: underline !important;
}

/* =========================================================
   5. Close button — same custom SVG icon used for "remove" elsewhere
   in this project (mini-cart close, cart-page remove-item), replacing
   the plugin's default red × glyph. mask-image + background-color
   (not a plain background-image) so the fill color can transition on
   hover, same technique as the mini-cart's close button.
   ========================================================= */
/* Anchor for the close button's position:absolute below — without this,
   top/right would resolve against whichever ancestor happens to already
   be positioned (likely .yith-wcqv-wrapper, higher up), not this
   immediate wrapper. */
#yith-quick-view-modal .yith-quick-view-head {
	position: relative !important;
}

#yith-quick-view-modal .yith-quick-view-close {
	/* 2026-07-10: found the actual reason top/right never had any
	   visible effect across several rounds of edits — this element was
	   never made `position:absolute` (or any positioned value). top/
	   right/bottom/left are simply INERT on a static-positioned element;
	   the button was being placed by the plugin's own flexbox layout
	   (.yith-quick-view-head, justify-content:flex-end) the whole time,
	   completely independent of whatever top/right values I kept
	   changing. Declaring position:absolute here is what finally makes
	   those properties do anything. */
	position: absolute !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* 2026-07-10: more breathing room around the icon itself — bumped
	   the button's own box (32px -> 38px) while trimming the icon
	   slightly (18px -> 16px), roughly doubling the margin between the
	   icon shape and the edge of its own clickable box (was ~7px each
	   side, now ~11px). mask-size is what actually controls the icon's
	   rendered size here (not a `padding` property — this element has no
	   real content box for padding to act on, it's the mask itself that
	   needs to shrink relative to the box). */
	width: 38px !important;
	height: 38px !important;
	top: 4px !important;
	right: 4px !important;
	border: none !important;
	opacity: 1 !important;
	background-color: #425fdb !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M37.71,5.96c-2.01,2.14-9.98,13.04-12.09,15.23-.35.36-.89.36-1.24,0-2.16-2.24-10.06-13.08-12.09-15.23C6.48-.24,1.18,0,.9.01-.53.11.15,1.4.35,1.63l19.59,21.84c.92,1.03.55,2.43,0,3.05L.33,48.38c-.15.17-.94,1.53.62,1.61.22.01,5.52.24,11.34-5.95,2.06-2.19,9.95-13.01,12.09-15.23.35-.36.89-.36,1.24,0,3.35,3.48,8.79,11.73,12.09,15.23,5.82,6.19,11.12,5.96,11.4,5.95,1.41-.09.75-1.4.55-1.62l-19.59-21.85c-.65-.73-.83-2.13,0-3.05L49.67,1.61c.15-.17.94-1.51-.63-1.6-.22-.01-5.52-.24-11.34,5.95Z'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M37.71,5.96c-2.01,2.14-9.98,13.04-12.09,15.23-.35.36-.89.36-1.24,0-2.16-2.24-10.06-13.08-12.09-15.23C6.48-.24,1.18,0,.9.01-.53.11.15,1.4.35,1.63l19.59,21.84c.92,1.03.55,2.43,0,3.05L.33,48.38c-.15.17-.94,1.53.62,1.61.22.01,5.52.24,11.34-5.95,2.06-2.19,9.95-13.01,12.09-15.23.35-.36.89-.36,1.24,0,3.35,3.48,8.79,11.73,12.09,15.23,5.82,6.19,11.12,5.96,11.4,5.95,1.41-.09.75-1.4.55-1.62l-19.59-21.85c-.65-.73-.83-2.13,0-3.05L49.67,1.61c.15-.17.94-1.51-.63-1.6-.22-.01-5.52-.24-11.34,5.95Z'/%3E%3C/svg%3E") !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
	-webkit-mask-size: 16px 16px !important;
	mask-size: 16px 16px !important;
	transition: background-color 0.2s ease-in-out !important;
}

#yith-quick-view-modal .yith-quick-view-close svg {
	display: none !important;
}

#yith-quick-view-modal .yith-quick-view-close:hover {
	background-color: #050A55 !important;
}

/* =========================================================
   6. Responsive — stack the two columns on narrow viewports instead of
   forcing the 42/58 split into a cramped phone-width row.
   ========================================================= */
@media (max-width: 767px) {
	/* ---------------------------------------------------------------
	   PAINEL — compactação de 2026-08-01.
	   Antes: YITH fixava `top:0 !important` (<=480px) e `height:100%`,
	   e este arquivo definia `height:82vh` mas NUNCA `top` — o painel
	   nascia colado no topo da viewport, com todo o respiro sobrando
	   embaixo (medido a 393x939: painel 0..770 numa tela de 939).
	   Agora a altura acompanha o conteúdo até um teto de dvh, com 12px
	   de folga em cima e embaixo. dvh (não vh) porque no mobile a barra
	   de endereço muda a altura visível e vh não acompanha.
	   A barra do WordPress, quando logado, é somada ao topo e descontada
	   do teto pela própria variável que o core publica, então ela nunca
	   empurra nem corta o painel. --------------------------------- */
	/* =============================================================
	   CENTRALIZAÇÃO VERTICAL — o OVERLAY é o proprietário (2026-08-01)
	   =============================================================
	   Substitui a estratégia anterior de fixar `top: 12px` no wrapper,
	   que nunca centralizava: o painel nascia colado no topo e o espaço
	   sobrava todo embaixo. Agora #yith-quick-view-modal (o overlay, que
	   já é position:fixed cobrindo a viewport) vira um flex container
	   centralizado, com 12px de padding de segurança. O wrapper deixa de
	   carregar top/left/transform e passa a ser um item de flex comum.

	   Quando o conteúdo cabe, o painel fica no centro. Quando excede,
	   `max-height:100%` o limita à caixa de conteúdo do overlay — ou
	   seja, viewport menos os 12px de cada ponta — e o scroll acontece
	   dentro dele. Nenhum offset novo é empilhado: os antigos saíram. */
	#yith-quick-view-modal {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 12px !important;
		box-sizing: border-box !important;
	}

	#yith-quick-view-modal .yith-wcqv-wrapper {
		/* YITH escreve left/top/width/height inline via JS; tudo é
		   neutralizado aqui para o flex do overlay assumir o comando. */
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 100% !important;
		/* Coluna flex para o scroller interno poder encolher: sem
		   min-height:0 num filho de flex, o conteúdo empurra a caixa e o
		   overflow nunca chega a acontecer. */
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
	}

	#yith-quick-view-modal.open .yith-wcqv-main {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: none !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* O conteúdo precisa medir pelo próprio tamanho para o painel poder
	   encolher e centralizar; `height:100%` da regra base o mantinha
	   sempre na altura máxima. */
	#yith-quick-view-content,
	#yith-quick-view-content > div.product {
		height: auto !important;
	}

	/* O scroll acontece AQUI, não na página. .yith-wcqv-main já nasce com
	   overflow-y:auto; só o teto precisa acompanhar o do painel, senão o
	   `max-height:90vh` da regra base volta a estourar a viewport. */

	/* grid-template-columns:1fr (was flex-direction:column — the parent
	   switched from flexbox to grid) — stacks into a single column on
	   narrow viewports. */
	.yith-quick-view-content.woocommerce div.product .product {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* =============================================================
	   LARGURA — UM ÚNICO PROPRIETÁRIO (2026-08-01)
	   =============================================================
	   Substitui o par antigo (`div.images, div.summary { width:100% }`
	   seguido de `div.summary { width:82%; max-width:82%;
	   min-width:302px }`). Aquele trio conflitante fazia a imagem e o
	   summary responderem a referências diferentes: a imagem acompanhava
	   o viewport e o summary travava no piso de 302px, deixando de
	   crescer junto.

	   Agora div.product é o dono do eixo. Ele vira uma coluna flex
	   centralizada e publica duas variáveis; as duas boxes derivam a
	   largura DA MESMA referência — a caixa de conteúdo do próprio
	   div.product — e nenhuma delas carrega min-width. */
	/* CORRIGIDO 2026-08-01 (A5.13): o seletor era
	   `#yith-quick-view-content > div.product`, que atinge apenas o
	   WRAPPER externo — e ele tem um unico filho, entao flex e gap ali
	   nao governavam nada. A arvore real tem DOIS .product aninhados:

	     #yith-quick-view-content
	       > div.product                  (wrapper, 1 filho)
	           > div#product-{ID}.product (o pai REAL de images/summary)

	   O interno vinha como `display:grid` com grid-template-columns:354px
	   e gap:20px — a summary era, de fato, um ITEM DE GRID, e era esse
	   grid (nao o nosso clamp) que produzia os 20px medidos. Sem o `>` a
	   regra passa a cobrir os dois niveis, independentemente do ID do
	   produto, e o proprietario do eixo vira quem realmente contem as
	   duas boxes.

	   gap fixo em 20px de proposito: e o valor que o grid ja produzia, e
	   o briefing manda preservar o espaco atual entre imagem e summary. */
	#yith-quick-view-content div.product {
		/* Uma unica referencia horizontal. A variavel
		   --qv-summary-inline-size:88% foi removida em 2026-08-01: era ela
		   que deixava a box informativa mais estreita que a da imagem
		   (medido 312 contra 354 a 394px), com bordas laterais
		   desalinhadas. As duas boxes passam a derivar da MESMA
		   referencia. */
		--qv-content-inline-size: 100%;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		grid-template-columns: none !important;
		gap: 20px !important;
	}

	/* Neutralizacao explicita das regras legadas do YITH e do WooCommerce
	   sobre a summary. Varias ja estavam vencidas na cascata (o
	   padding-right:30px do yith-quick-view.css computa 0px hoje), mas
	   ficam declaradas aqui para o comportamento nao depender de uma
	   regra escrita em outra secao do arquivo. */
	#yith-quick-view-content div.summary.entry-summary {
		float: none !important;
		box-sizing: border-box !important;
		padding-inline: 0 !important;
		height: auto !important;
		min-height: 0 !important;
	}

	/* O conteudo interno e o proprietario da distribuicao vertical.
	   Fluxo normal: sem transform, sem position/top, sem altura fixa,
	   sem margem negativa. */
	#yith-quick-view-content div.summary.entry-summary .summary-content {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	#yith-quick-view-content div.images,
	#yith-quick-view-content div.summary.entry-summary {
		width: var(--qv-content-inline-size) !important;
		max-width: var(--qv-content-inline-size) !important;
		min-width: 0 !important;
		margin-inline: auto !important;
		box-sizing: border-box !important;
	}

	/* ---------------------------------------------------------------
	   IMAGEM — o maior ganho isolado.
	   A regra base pede `height:100%`, que num pai de altura automática
	   não resolve e cai para `auto`: a área virava a altura natural da
	   IMG mais 28px de padding dos dois lados — medido 412px a 393x939 e
	   583px a 761x939, quase dois terços da tela. Agora a altura é
	   limitada por dvh e o padding cai para 12px. A IMG continua inteira:
	   object-fit:contain (regra base) com width/height automáticos e
	   limites de 100%, então a proporção original nunca é forçada nem a
	   embalagem cortada. O arquivo de imagem não é tocado. --------- */
	/* 2026-08-01 — o produto estava pequeno DENTRO da área, medido em 48%
	   da largura interna a 390x757 (159px de 334px). A causa não era
	   max-width nem o arquivo: é que a embalagem é retrato (proporção
	   0,859) e quem limitava era a ALTURA da caixa, 212px. Com
	   object-fit:contain e proporção preservada, a única forma de um
	   retrato ficar mais largo é ter mais altura — não existe outro
	   caminho sem cortar ou distorcer, e as duas coisas estão vedadas.
	   Daí a caixa subir de 28dvh/260px para 40dvh/310px, com o padding
	   caindo de 12 para 8px para devolver 8px de largura útil. O aumento
	   de altura é compensado pelas reduções de título, preço e respiros
	   abaixo, então o modal não volta ao patamar anterior. */
	#yith-quick-view-content div.images {
		/* ALTURA DEFINIDA, nao `auto` + max-height (A5.13). Enquanto a
		   caixa era item de GRID ela recebia altura do proprio grid, e o
		   `height:100%` da <img> resolvia contra ela. Ao virar item de
		   FLEX a altura ficou indefinida: `height:100%` e `max-height:100%`
		   da img deixaram de ter contra o que resolver e a foto passou a
		   usar o tamanho intrinseco, estourando a caixa (medido 336x392 a
		   394px e 450x525 a 518px, contra 250x292 antes). Com a altura
		   definida o object-fit:contain volta a governar e a foto retoma
		   exatamente o tamanho aprovado. */
		height: clamp(200px, 40dvh, 310px) !important;
		max-height: clamp(200px, 40dvh, 310px) !important;
		padding: 8px !important;
		border-radius: 18px !important;
	}

	/* width/height 100% + contain: a caixa da IMG passa a ocupar a área
	   inteira e o bitmap se ajusta dentro dela preservando a proporção.
	   Com `width:auto` (valor anterior) o elemento parava no tamanho
	   intrínseco e nunca aproveitava o espaço disponível. Nada de
	   transform:scale — a escala é resolvida pelo próprio contain. */
	#yith-quick-view-content div.images img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
	}

	/* ---------------------------------------------------------------
	   CONTEÚDO — só margens e paddings. Tipografia, peso, cor e
	   line-height do título ficam como aprovados (o título já usa
	   line-height 1.15; sua altura vem do nome ser longo, não de
	   entrelinha frouxa, então reduzi-la não traria nada). ---------- */
	#yith-quick-view-content div.summary .summary-content {
		/* padding-bottom 18 -> 24px: com os metadados ocultos no mobile,
		   quem fecha a box e este padding. A 18px o CTA ficava perto
		   demais da borda; a 24px o fechamento equilibra os 40px que a
		   linha de acao passou a ter acima dela. */
		padding: 16px 14px 24px 14px !important; /* era 36/28/28/28 */
	}

	/* ---------------------------------------------------------------
	   HIERARQUIA DO BLOCO SUPERIOR — 2026-08-01.
	   A compactação anterior resolveu a altura, mas deixou o título com
	   os mesmos 26px do preço: dois pesos idênticos disputando a mesma
	   área, e com um nome longo (medido 149px de altura a 393px) ele
	   dominava o card. Reduzido em ~23%, o título deixa de gritar sem
	   perder autoridade — continua 900 de peso, na mesma família e cor.

	   O preço NÃO muda de tamanho: o destaque relativo que se pede vem
	   de o título encolher, não de o preço crescer. Assim a hierarquia
	   inverte sozinha sem mexer numa propriedade que o briefing manda
	   preservar.

	   clamp só dentro desta faixa: 19px nos telefones estreitos, subindo
	   suavemente até o teto de 21px por volta de 420px, sem degrau entre
	   larguras vizinhas. A entrelinha abre de 1.15 para 1.25 porque, com
	   o corpo menor, 1.15 fica apertado demais para um título de várias
	   linhas. --------------------------------------------------------- */
	#yith-quick-view-content .product_title {
		font-size: clamp(17px, 4.4vw, 18px) !important; /* 26 -> 21 -> 17/18 */
		line-height: 1.2 !important;                    /* 1.15 -> 1.25 -> 1.2 */
		margin: 0 0 12px 0 !important;
	}

	#yith-quick-view-content .summary .price {
		/* 26 -> 21.5px. Peso 900 e cor #425fdb intocados: segue dominante
		   sobre a descrição (15,5px) sem dominar o modal inteiro. */
		font-size: 21.5px !important;
		line-height: 1.15 !important;
		margin: 0 0 16px 0 !important;
	}

	/* A regra base declara 15.5px no CONTÊINER, mas quem carrega o texto é
	   o <p> dentro dele, e o CSS do próprio YITH
	   (#yith-quick-view-content div.summary.entry-summary …) o fixava em
	   16px. Nosso valor nunca governou de fato. Os dois seletores abaixo
	   corrigem isso e sobem levemente o corpo, para a descrição não ficar
	   apagada ao lado do preço de 21,5px. Entrelinha 1.45 (era 1.3): a
	   altura extra é bem menor que os 166px devolvidos pela remoção dos
	   metadados logo abaixo. */
	#yith-quick-view-content .woocommerce-product-details__short-description,
	#yith-quick-view-content .woocommerce-product-details__short-description p {
		font-size: clamp(13.5px, 3.6vw, 14.5px) !important;
		line-height: 1.5 !important;
	}

	#yith-quick-view-content .woocommerce-product-details__short-description {
		margin: 0 0 24px 0 !important; /* + os 16px do form abaixo = 40px */
	}

	#yith-quick-view-content .woocommerce-product-details__short-description p:last-child {
		margin-bottom: 0 !important; /* o respiro até o form é do contêiner */
	}

	/* ---------------------------------------------------------------
	   FORMULÁRIO — quantidade e botão na MESMA linha.
	   Causa do empilhamento: um <style> inline do projeto declara
	       @media (max-width:900px) { .single-product form.cart {
	           flex-direction: column } }
	   e o modal reaproveita o markup `.single-product`. A regra base
	   aqui força display/flex-wrap/gap com !important mas nunca declarou
	   `flex-direction`, então a inline vencia por omissão, não por peso.
	   Declarada explicitamente, o problema acaba. A `.quantity` também
	   perde o `float:left` que o woocommerce.css lhe dá — float e flex
	   não se misturam bem e o gap já cuida do espaçamento. ---------- */
	#yith-quick-view-content form.cart {
		flex-direction: row !important;
		align-items: center !important;
		/* Sem isto sobravam 16px na linha que o botão não absorvia, apesar
		   do flex:1 1 auto — espaço repartido nas pontas em vez de ir para
		   o CTA. */
		justify-content: flex-start !important;
		width: 100% !important;
		/* 8 -> 16px nos dois lados: somado aos 24px da descricao acima,
		   a linha de acao desce 20px (20 -> 40px de separacao) e ganha o
		   mesmo respiro por baixo, para nao ficar espremida contra a base
		   da box. */
		/* Calibrado 2026-08-01: 36 -> 25px. Somado aos 24px de
		   margin-bottom da descrição, a separação fica em 49px (era 60).
		   O margin-bottom de 16px não muda, para os ~41px entre o
		   formulário e a base da box seguirem intactos. */
		margin: 25px 0 16px 0 !important;
	}

	/* O tema imprime ::before/::after de clearfix neste form. Num
	   contêiner flex eles viram ITENS, e cada um consome um gap de 8px —
	   16px roubados da linha, que era o resto do motivo de o rótulo do
	   CTA transbordar. Não têm função alguma aqui: o layout é flex, não
	   float. */
	#yith-quick-view-content form.cart::before,
	#yith-quick-view-content form.cart::after {
		display: none !important;
	}

	#yith-quick-view-content form.cart .quantity {
		flex: 0 0 auto !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	#yith-quick-view-content form.cart .quantity input.qty {
		width: 54px !important;
		height: 46px !important; /* dentro da faixa de toque 44-48px */
	}

	#yith-quick-view-content form.cart .single_add_to_cart_button {
		flex: 1 1 auto !important;
		height: 46px !important;
		padding: 0 10px !important;
		/* O WooCommerce dá 15px de margem à direita neste botão. Numa linha
		   flex isso rouba largura útil do próprio botão e era parte do
		   motivo de "ADICIONAR AO PEDIDO" transbordar a pílula na box
		   estreitada. O espaçamento entre quantidade e botão já é o gap
		   de 8px do form. */
		margin: 0 !important;
		white-space: nowrap !important;
	}

	/* ---------------------------------------------------------------
	   METADADOS — ocultos no Quick View mobile (2026-08-01).
	   As rodadas anteriores só os compactaram (de 226px para 146px). A
	   decisão agora é outra: no telefone o modal existe para decidir uma
	   compra em um toque — foto, título, preço, descrição e CTA. SKU,
	   categoria, tags e marca são informação de catálogo e continuam
	   disponíveis um clique adiante, na página do produto.

	   `display:none` vale SÓ aqui: este bloco é @media(max-width:767px)
	   e o seletor é escopado em #yith-quick-view-content. Tablet, desktop
	   e a página individual do produto seguem exibindo tudo — verificado
	   por medição. Nenhuma informação foi removida do HTML: o markup
	   continua íntegro, apenas não é pintado nesta faixa.

	   Com isto o modal termina no CTA; o respiro final passa a ser o
	   padding-bottom de 18px do .summary-content. ------------------- */
	#yith-quick-view-content .product_meta {
		display: none !important;
	}

	/* Rede de segurança para qualquer outro bloco auxiliar que o tema ou
	   o WooCommerce venham a imprimir depois do formulário nesta faixa.
	   .supra-product-trust já nasce oculto na regra base; declarado aqui
	   junto para o critério "nada abaixo do CTA" não depender de uma
	   regra escrita em outra seção do arquivo. */
	#yith-quick-view-content .supra-product-trust,
	#yith-quick-view-content .product_meta_wrapper,
	#yith-quick-view-content .yith-wcbr-brands-in-loop {
		display: none !important;
	}
}

/* =============================================================
   BARRA ADMINISTRATIVA — por estado real, não globalmente
   =============================================================
   Medido no próprio site, logado, em 11 larguras:
     ate 600px  -> position:absolute, 46px, SAI da viewport ao rolar
     601-782px  -> position:fixed,    46px, permanece visivel
     783px+     -> position:fixed,    32px

   Por isso a altura da barra NAO e reservada em toda a faixa mobile: de
   390 a 600px ela rola junto com a pagina e ja nao esta na tela quando o
   modal abre a partir de um card — reservar 46px ali era o que criava a
   faixa de overlay acima do painel. De 601 a 767px ela e fixa e sempre
   visivel, e ai a reserva e obrigatoria: sem ela o topo do modal entra
   debaixo da barra e o botao X fica comprometido (reportado em ~671px).

   O padding-top entra no OVERLAY, que e o proprietario da centralizacao,
   entao o painel passa a se centralizar apenas na area util abaixo da
   barra — nao e um offset empilhado no wrapper. */
@media (min-width: 601px) and (max-width: 767px) {
	body.admin-bar #yith-quick-view-modal {
		padding-top: 58px !important; /* 46px da barra + 12px de seguranca */
	}
}

/* Fallback empilhado apenas abaixo da menor largura que o projeto
   realmente suporta (o menor viewport validado é 390px). Em telas mais
   estreitas que 340px o botão e a quantidade lado a lado deixariam o
   rótulo sem espaço, então ali — e só ali — a coluna volta. */
@media (max-width: 339px) {
	#yith-quick-view-content form.cart {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	#yith-quick-view-content form.cart .quantity input.qty {
		width: 100% !important;
	}
}