/**
 * Supra Force — sidebar mini-cart drawer, definitive design.
 * Enqueued sitewide (the drawer lives in the header, on every page) from
 * functions.php via supra_force_enqueue_mini_cart_styles().
 *
 * The drawer itself is NOT WooCommerce core's mini-cart widget — it's
 * rendered by the "PRO Elements" plugin's Menu Cart widget
 * (wp-content/plugins/proelements-4.1.0/modules/woocommerce/), which
 * overrides WooCommerce's cart/mini-cart.php template with its own
 * .elementor-menu-cart__* markup. Selectors below target that structure.
 *
 * ASSUMPTION TO VERIFY: the widget's "Cart Position" control defaults to
 * right-aligned (drawer slides in from the right edge of the viewport),
 * which is what item 1 below assumes when it rounds the LEFT corners (the
 * two corners facing INTO the page, away from the viewport edge — the
 * "inner" corners the request describes). If this site's widget instance
 * is actually configured for the left edge instead, swap
 * border-top-left-radius/border-bottom-left-radius for the -right- pair.
 * Check: Elementor editor → select the Menu Cart widget → Content tab →
 * "Cart Position".
 *
 * Specificity: this plugin's own CSS
 * (assets/css/widget-woocommerce-menu-cart.min.css) is fairly plain
 * (no !important), so !important throughout below is enough on its own —
 * kept anyway to match this theme's established pattern (custom-single-
 * product.css, custom-related-products.css) for consistency/safety against
 * any future Additional CSS addition targeting this drawer.
 */

/* =========================================================
   1. Rounded inner-left corners — the panel no longer looks like a flat,
   engessada box when it slides in.
   ========================================================= */
.elementor-menu-cart__main {
	border-top-left-radius: 24px !important;
	border-bottom-left-radius: 24px !important;
}

/* =========================================================
   2. Empty-cart message, translated. The native text is hidden (kept in
   the DOM, zeroed out + visibility:hidden so screen readers relying on
   the accessible name aren't affected by display:none), and a
   ::before with the Portuguese copy is centered over the whole panel.
   ========================================================= */
.elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	visibility: hidden !important;
	font-size: 0 !important;
	position: relative !important;
}

.elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message::before {
	content: "Seu carrinho está vazio." !important;
	visibility: visible !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: max-content !important;
	max-width: 80% !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #050A55 !important;
	text-align: center !important;
}

/* =========================================================
   3. Subtotal + action buttons pinned to the bottom of the panel,
   regardless of item count. .elementor-menu-cart__products (the
   scrollable item list) grows to fill any leftover space instead of
   just shrink-wrapping its content, pushing everything after it down
   to the panel's true bottom edge.
   ========================================================= */
.elementor-menu-cart__main .widget_shopping_cart_content {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.elementor-menu-cart__main .elementor-menu-cart__products {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
}

/* First product item only: the plugin's own CSS gives every item AFTER
   the first one 20px of padding-top (:not(:first-of-type)) as the
   between-items gap, but the first one gets none — sitting flush against
   the top edge of the scrollable area. 16px of breathing room here (a
   touch less than the 20px between-items gap, intentionally, since this
   is edge spacing rather than a separator). */
.elementor-menu-cart__main .elementor-menu-cart__product:first-of-type {
	padding-top: 16px !important;
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	flex-shrink: 0 !important;
}

/* =========================================================
   4. Identity unification with the Home/related-products design system.
   ========================================================= */

/* Product titles: Loft, matching the weight/case used for titles
   everywhere else in this project. */
.elementor-menu-cart__main .elementor-menu-cart__product-name,
.elementor-menu-cart__main .elementor-menu-cart__product-name a {
	font-family: 'LOFT', sans-serif !important;
	font-weight: 900 !important;
	color: #050A55 !important;
}

/* Prices (line-item price + Subtotal value): Luxe Uno, per request — the
   one place in this project where price text uses the body font instead
   of Loft. Both now the same brand blue as the Home "Adicionar ao
   Pedido" button (#425fdb), and a touch larger (15px) than the default
   for better visual weight. */
.elementor-menu-cart__main .elementor-menu-cart__product-price,
.elementor-menu-cart__main .elementor-menu-cart__subtotal {
	font-family: 'LUXE UNO', sans-serif !important;
	color: #425fdb !important;
	font-size: 15px !important;
}

/* Subtotal price value only (not the "Subtotal:" label, already bold via
   the <strong> rule above): Bold, per request. Confirmed real (not
   synthesized) — Luxe Uno's @font-face files include 700/Bold. */
.elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	font-weight: 700 !important;
}

/* Quantity ("1 ×") inside the product price line: smaller than the price
   itself, for hierarchy — the number that matters (the price) should
   read first. */
.elementor-menu-cart__main .elementor-menu-cart__product-price .product-quantity {
	font-size: 11px !important;
}

/* Subtotal label: uppercase Loft (was the default sans, mixed case) —
   the amount next to it keeps the Luxe Uno + blue + 15px set above,
   since it's not inside this <strong>. */
.elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
	font-family: 'LOFT', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	color: #050A55 !important;
	font-size: 15px !important;
}

/* Remove ("X") button on each cart line item: filled circle — solid blue,
   white X, no border. The circle's own fill isn't behind a CSS custom
   property in the plugin's source (only border/X-line color is, via
   --remove-item-button-color) so that's set directly instead.
   2026-07-10: sized back down — the previous pass bumped the circle to
   23px/2px-thick X for visibility, but that read as too large next to the
   rest of the card; --remove-item-button-size now 18px (smaller than
   even the plugin's own original 22px default) with a 1.5px stroke, a
   middle ground between the original 1px (too thin once the fill made it
   a solid circle) and the 2px that felt heavy. The clickable <a> inside
   still fills 100% of this circle (plugin's own CSS, untouched), so the
   tap target shrinks proportionally with the visual — acceptable here
   since this is a hover-revealed desktop affordance, not a primary
   mobile touch target. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
	--remove-item-button-color: #ffffff;
	--remove-item-button-hover-color: #ffffff;
	--remove-item-button-size: 17px;
	background-color: #425fdb !important;
	border: none !important;
	box-sizing: border-box !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
	background-color: #050A55 !important;
}

/* X bars, re-centered: 2026-07-10, switched from the plugin's own
   percentage-left + negative-margin-top approach (left:25%; width:50%;
   margin-top:-Xpx — math that assumes the circle's exact pixel dimensions
   line up perfectly) to centering each bar on its OWN midpoint via
   transform: translate(-50%,-50%) from the circle's true 50%/50% center,
   then rotating around that already-centered point. This is robust
   regardless of any sub-pixel sizing quirks — the earlier version could
   read as slightly off-center ("dentro da elipse" rather than dead-
   center) if the circle's rendered box wasn't exactly square. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove::before,
.elementor-menu-cart__main .elementor-menu-cart__product-remove::after {
	left: 50% !important;
	top: 50% !important;
	width: 50% !important;
	height: 1.5px !important;
	margin-top: 0 !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Product thumbnail: small rounded corners + a light brand-blue glow
   around the box it sits in (previously plain, no radius/shadow at all).
   2026-07-10: switched from a drop-shadow (0 2px 6px — offset downward,
   directional) to a centered glow (0 0 Npx — no offset, radiates evenly
   on all sides), and shrank the blur slightly (6px -> 4px) per request.
   overflow:hidden on the container so the photo's own corners crop to
   match, in case the <img> itself is ever taller/wider than its box.
   display:flex + centering (2026-07-10): this element spans 2 grid rows
   in the plugin's own layout (grid-row-start:1 / grid-row-end:3, matching
   the product-name + product-price rows combined), and grid items stretch
   to fill their area by default — so its actual height equals however
   tall the name+price column needs to be, which grows with longer titles
   that wrap to more lines. The <img> itself is only display:block with no
   sizing logic of its own, so on a taller card (long title) it stayed
   pinned to the top with empty space below instead of centering — this
   flex centering fixes that regardless of title length. */
.elementor-menu-cart__main .elementor-menu-cart__product-image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 0 4px rgba(66, 95, 219, 0.25) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image img {
	border-radius: 8px !important;
}

/* Buttons stacked in a single column instead of side-by-side — overriding
   the plugin's own --cart-footer-layout token (default "1fr 1fr") rather
   than fighting its grid-template-columns declaration directly. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	--cart-footer-layout: 1fr;
}

/* Shared button shape: pill (50px radius, per request — not this site's
   usual 999px, though visually equivalent at this button height),
   14px vertical padding, Loft for the label. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 14px 20px !important;
	border: none !important;
	border-radius: 50px !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	transition: all 0.2s ease-in-out !important;
}

/* "Finalizar pedido" (Checkout) — solid official brand blue, white text. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: #425fdb !important;
	color: #ffffff !important;
}

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
	background: #050A55 !important;
}

/* "Ver pedido" (View cart) — light-blue tint, dark blue text. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background: #E8EDFF !important;
	color: #425fdb !important;
}

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
	background: #d9e2ff !important;
}

/* =========================================================
   5. Close ("X") button: elegant elastic 90deg spin on hover. Targets
   both the default close button and the custom-SVG-icon variant (only
   one of the two is ever present at a time, per the widget's own markup,
   depending on whether a custom Close Icon is configured).
   2026-07-10: swapped the plugin's own CSS-drawn X (two rotated ::before/
   ::after bars) for the same custom SVG icon now used for "remove item"
   on the cart page — same one requested here, "our SVG." The native bars
   are hidden (display:none on both pseudo-elements) rather than removed
   from markup (can't touch that, it's the plugin's own template).
   2026-07-10 (follow-up): the color needed to visibly TRANSITION during
   the spin, not hard-cut instantly — a plain background-image swap
   between two fixed-fill data URIs can't animate (browsers don't
   interpolate between two background images, it's an instant
   replacement). Switched technique: the SVG is now a mask-image instead
   (masks only use the shape's alpha, so the fill color baked into the
   SVG itself is irrelevant), and the actual visible color comes from
   background-color — a genuinely CSS-transitionable property. Base
   brand blue (#425fdb) -> light blue (#8AB4F8, this project's
   established "light blue that reads on lighter backgrounds," already
   used elsewhere for hover accents) smoothly animates alongside the
   90° spin, then eases back to brand blue on mouse-out. Sized to ~18px
   to visually match the previous CSS-drawn X's footprint (a 25px-wide
   bar rotated 45° projects to roughly that size, not the full 25px). */
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after,
.elementor-menu-cart__close-button-custom::before,
.elementor-menu-cart__close-button-custom::after {
	display: none !important;
}

.elementor-menu-cart__close-button,
.elementor-menu-cart__close-button-custom {
	/* 2026-07-10: the icon was getting clipped at the top — root cause is
	   that this button's own box size comes from the widget's
	   --cart-close-icon-size custom property (configured in the
	   Elementor editor, not visible in any static file), which may be
	   smaller than the 18px mask. An 18px icon inside a smaller box
	   overflows the box, and the panel's own overflow:hidden then clips
	   whatever pokes out. Forcing a known 24px box here (comfortably
	   bigger than the 18px icon, with margin to spare) removes the
	   guesswork entirely instead of chasing the actual configured value. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	background-color: #425fdb !important;
	background-image: none !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: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.elementor-menu-cart__close-button:hover,
.elementor-menu-cart__close-button-custom:hover {
	background-color: #8AB4F8 !important;
	transform: rotate(90deg) !important;
	opacity: 0.8 !important;
}

/* =========================================================
   9. Respiro horizontal entre a lista de produtos e a barra de rolagem
   -----------------------------------------------------------
   O SISTEMA VISUAL da scrollbar (largura, cores, raio, estados) NÃO mora
   mais aqui — foi para assets/css/theme-scrollbars.css, que virou o dono
   único do padrão em todo o front-end. Um arquivo chamado theme-mini-cart
   não deveria ser proprietário de barras que também valem para o scroll
   principal da página e para o Quick View. Ficou nesta folha apenas o que é
   genuinamente específico do mini-cart: o espaçamento abaixo.

   MEDIDO ANTES (DOM ao vivo, 8 produtos, painel de 350px):
     painel .............. 1016 -> 1366 (350px, padding 20px 30px)
     lista ............... 1046 -> 1336 (290px, padding 0, border-box)
     botão remover ....... 1319 -> 1336
     distância do conteúdo até a borda direita da lista: 0px
   Ou seja, o botão de remover encostava exatamente onde a barra é
   desenhada, e títulos/preços terminavam a 30px dali.

   POR QUE padding-inline-end E NÃO padding no painel: subtotal
   (.elementor-menu-cart__subtotal) e os botões do rodapé
   (.elementor-menu-cart__footer-buttons) são IRMÃOS desta lista, não filhos
   — medidos ocupando os mesmos 1046 -> 1336. Padding no painel os moveria
   junto; aqui só a lista rolável é afetada, exatamente como pedido.

   POR QUE 12px DÁ 12px DE RESPIRO: quando a barra clássica de largura S
   aparece, ela reduz o clientWidth do elemento. A borda direita do conteúdo
   passa a ficar em (direita - S - padding) e a barra ocupa de (direita - S)
   até (direita) — a distância entre as duas é exatamente o padding, sem
   depender de S. Com scrollbar sobreposta (overlay), S = 0 e a barra é
   pintada por cima dos 6px externos desse mesmo respiro, então o
   afastamento visual fica em torno de 6px. Os dois casos ficam dentro do
   aceitável e nenhum deles corta texto.

   scrollbar-gutter: stable foi avaliado e DESCARTADO de propósito: com
   scrollbar sobreposta ele reservaria a faixa permanentemente, criando
   justamente a faixa vazia que o próprio pedido manda evitar, e não há como
   comprovar ganho neste ambiente headless.
   ========================================================= */
.elementor-menu-cart__main .elementor-menu-cart__products {
	box-sizing: border-box !important;
	padding-inline-end: 12px !important;
}