/*! Recrie Theme — CSS Principal (Refatorado v2.0)
 * Arquitetura limpa, sem !important desnecessários, sem duplicações.
 *
 * Estrutura:
 *   1. Reset + base
 *   2. Utilitários (Tailwind fallback)
 *   3. Header (faixa promo + desktop + mobile)
 *   4. Menu (desktop + mobile drawer)
 *   5. Busca popup
 *   6. Carrinho count
 *   7. Cards de produto (loop)
 *   8. Carrossel de produtos (home)
 *   9. Carrossel de vídeos (home)
 *   10. Trust bar
 *   11. Reviews section
 *   12. Single product
 *   13. Cart / Checkout / Forms
 *   14. Footer
 *   15. WhatsApp float
 *   16. Print
 *
 * Tokens vêm de tokens.css (variáveis CSS no :root).
 * Fonte universal: Belleza (decisão do cliente).
 * Acento: #6B1F2A (vinho).
 */

/* ====================================================================
 * 1. RESET + BASE
 * ==================================================================== */
*,*::before,*::after { box-sizing: border-box; }

html {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: #403D3E;
	background: #F2F2F2;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
ul, ol { margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ====================================================================
 * 2. UTILITÁRIOS (Tailwind-like, usados nos templates)
 * ==================================================================== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; }
.inset-0 { inset: 0; }
.z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-60 { z-index: 60; }
.w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; }
.h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; }
.w-auto { width: auto; }
.max-w-md { max-width: 28rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }

.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; }
.font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: .05em; }
.leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; }

.text-white { color: #fff; }
.text-black { color: #000; }
.text-neutral-300 { color: #d4d4d4; }
.text-neutral-400 { color: #a3a3a3; }
.text-neutral-500 { color: #737373; }
.text-neutral-600 { color: #525252; }
.text-neutral-900 { color: #171717; }
.bg-white { background-color: #fff; }
.bg-black { background-color: #171717; }
.bg-vinho { background-color: #6B1F2A; }
.bg-neutral-50 { background-color: #fafafa; }
.bg-neutral-100 { background-color: #f5f5f5; }
.bg-neutral-200 { background-color: #e5e5e5; }

.m-0 { margin: 0; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.p-0 { padding: 0; }
.p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.border { border: 1px solid #e5e5e5; }
.border-t { border-top: 1px solid #e5e5e5; }
.rounded { border-radius: .25rem; }
.rounded-full { border-radius: 9999px; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.transition { transition: all .15s ease-in-out; }

@media (min-width: 768px) {
	.md\:flex { display: flex; }
	.md\:block { display: block; }
	.md\:hidden { display: none; }
	.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ====================================================================
 * 3. HEADER — Faixa promo (vinho) + Desktop (preto)
 * ==================================================================== */

/* Tira CSS antigo do site-header genérico */
.site-header { background: transparent; box-shadow: none; border: 0; }

/* Sticky offset pro admin bar do WordPress (logado).
   Sem isso o admin bar (fixed, top:0) cobre o topo do header quando rola. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .site-header { top: 0; }
}

/* Faixa promocional vinho com marquee */
.recrie-promo-bar {
	background-color: #6B1F2A;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 400;
	padding: 9px 0;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	z-index: 60;
}
.recrie-promo-bar .recrie-marquee {
	display: inline-flex;
	gap: 80px;
	animation: recrie-marquee-anim 45s linear infinite;
	white-space: nowrap;
}
.recrie-promo-bar .recrie-marquee-item {
	display: inline-block;
	padding-right: 80px;
	letter-spacing: 0.3px;
}
@keyframes recrie-marquee-anim {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Header desktop — preto */
.recrie-header-desktop {
	background: #171717;
	color: #FFFFFF;
	position: relative;
	z-index: 50;
}
.recrie-header-desktop .recrie-header-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* Logo */
.recrie-header-desktop .recrie-header-logo { flex-shrink: 0; }
.recrie-header-desktop .recrie-logo-link img {
	height: 56px;
	width: auto;
	filter: brightness(0) invert(1);
}
.recrie-header-desktop .recrie-logo-text {
	color: #FFFFFF;
	font-size: 26px;
	font-weight: 400;
}

/* Nav container */
.recrie-header-desktop .recrie-header-nav {
	flex: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 100%;
}

/* Menu horizontal */
.recrie-header-desktop .recrie-menu-primary,
.recrie-header-desktop ul.recrie-menu-primary,
.recrie-header-desktop .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	height: 100%;
}
.recrie-header-desktop .recrie-menu-primary > li,
.recrie-header-desktop ul.recrie-menu-primary > li,
.recrie-header-desktop .menu > li {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.recrie-header-desktop .recrie-menu-primary > li > a,
.recrie-header-desktop ul.recrie-menu-primary > li > a,
.recrie-header-desktop .menu > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 0 18px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.3px;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}
.recrie-header-desktop .recrie-menu-primary > li > a:hover,
.recrie-header-desktop ul.recrie-menu-primary > li > a:hover,
.recrie-header-desktop .menu > li > a:hover {
	opacity: 0.7;
}

/* Separadores | entre itens */
.recrie-header-desktop .recrie-menu-primary > li + li::after,
.recrie-header-desktop ul.recrie-menu-primary > li + li::after,
.recrie-header-desktop .menu > li + li::after {
	content: "|";
	position: absolute;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.25);
	pointer-events: none;
	font-weight: 300;
	font-size: 16px;
}

/* Submenu dropdown */
.recrie-header-desktop .sub-menu {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #262626;
	box-shadow: 0 8px 20px rgba(0,0,0,0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
	z-index: 70;
	display: flex;
	flex-direction: column;
}
.recrie-header-desktop li:hover > .sub-menu,
.recrie-header-desktop li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.recrie-header-desktop .sub-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	position: relative; /* âncora pro flyout do submenu de 2º nível */
}
.recrie-header-desktop .sub-menu li a {
	display: block;
	padding: 10px 22px;
	color: #FFFFFF;
	font-size: 14px;
	transition: background 0.2s;
	white-space: nowrap;
}
.recrie-header-desktop .sub-menu li a:hover {
	background: rgba(107, 31, 42, 0.3);
}

/* Submenu de 2º nível: abre como flyout à direita do item pai (cascading),
   pra evitar que o usuário cruze por cima de irmãos ao tentar clicar nos
   subitens. Equivalente ao mega-menu da Decathlon (referência do cliente). */
.recrie-header-desktop .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: 0;
	transform: translateX(-5px);
}
.recrie-header-desktop .sub-menu li:hover > .sub-menu,
.recrie-header-desktop .sub-menu li:focus-within > .sub-menu {
	transform: translateX(0);
}

/* Indicador de seta nos itens que têm filhos dentro do dropdown */
.recrie-header-desktop .sub-menu .menu-item-has-children > a {
	padding-right: 30px;
	position: relative;
}
.recrie-header-desktop .sub-menu .menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	opacity: 0.7;
}

/* Ações (lupa, conta, carrinho) */
.recrie-header-desktop .recrie-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.recrie-header-desktop .recrie-header-icon-btn,
.recrie-header-desktop a.recrie-header-icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #FFFFFF;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	font-size: 0;
	transition: opacity 0.2s;
}
.recrie-header-desktop .recrie-header-icon-btn:hover {
	opacity: 0.7;
}
.recrie-header-desktop .recrie-header-icon-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: #FFFFFF;
	fill: none;
}

/* Contador do carrinho */
.recrie-header-desktop .recrie-cart-count {
	position: absolute;
	top: 6px;
	right: 4px;
	background: #6B1F2A;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	line-height: 1;
}
.recrie-cart-count-empty,
.recrie-cart-count[data-count="0"] {
	display: none;
}

/* Menu vazio (aviso) */
.recrie-header-desktop .recrie-menu-empty {
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
	margin: 0 auto;
}

/* Header mobile / drawer — visibilidade */
@media (max-width: 767px) {
	.recrie-header-desktop { display: none; }
	.recrie-header-mobile { display: block; }
}
@media (min-width: 768px) {
	.recrie-header-desktop { display: block; }
	.recrie-header-mobile { display: none; }
}

/* Header mobile — preto, mesma identidade do desktop */
.recrie-header-mobile {
	background: #171717;
	color: #FFFFFF;
	position: relative;
	z-index: 50;
}
.recrie-header-mobile__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: 64px;
	max-width: 100%;
}
.recrie-header-mobile__btn,
.recrie-header-mobile a.recrie-header-mobile__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: #FFFFFF;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	transition: opacity 0.2s;
}
.recrie-header-mobile__btn:hover { opacity: 0.7; }
.recrie-header-mobile__btn svg {
	display: block;
	stroke: #FFFFFF;
	fill: none;
}
/* Layout: LOGO esquerda | (hamb + lupa + conta + sacola) direita.
   Logo: flex:0 (sem esticar). Actions: flex:0 + margin-left:auto puxa
   o bloco todo pro fim da linha, sem precisar de justify-content. */
.recrie-header-mobile .recrie-logo-mobile {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.recrie-header-mobile .recrie-logo-mobile__link {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}
.recrie-header-mobile .recrie-logo-mobile img {
	display: inline-block;
	height: 40px;
	width: auto;
	max-width: 100%;
	filter: brightness(0) invert(1);
}
.recrie-header-mobile .recrie-logo-mobile__text {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 400;
	white-space: nowrap;
}
.recrie-header-actions-mobile {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	margin-left: auto;
}
/* Badge contador (carrinho) — vinho, mesma cor do desktop */
.recrie-header-mobile .recrie-cart-link-mobile { overflow: visible; }
.recrie-header-mobile .recrie-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	background: #6B1F2A;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	line-height: 1;
}
.recrie-header-mobile .recrie-cart-count-empty,
.recrie-header-mobile .recrie-cart-count[data-count="0"] {
	display: none;
}

/* Responsivo: telas < 1200px, menu mais compacto */
@media (max-width: 1200px) {
	.recrie-header-desktop .recrie-menu-primary > li > a,
	.recrie-header-desktop ul.recrie-menu-primary > li > a,
	.recrie-header-desktop .menu > li > a {
		padding: 0 12px;
		font-size: 13px;
	}
}

/* ====================================================================
 * 4. MOBILE DRAWER
 * ==================================================================== */
.recrie-drawer { transition: transform 0.3s ease-out; }

/* ============================================================
 * Drawer mobile FULLSCREEN (referência do cliente)
 * ============================================================
 * O drawer mobile cobre toda a tela com fundo cinza-escuro, lista
 * de categorias centralizada verticalmente com tipografia grande.
 * Sub-menus colapsam por padrão; click no pai expande/recolhe.
 *
 * Substitui o layout antigo de drawer-lateral (85% width) — vira
 * uma overlay tela cheia abaixo do header, casando com a ref do
 * cliente que mostra a marca + ícones no topo e a lista respira
 * no espaço central.
 */
.recrie-drawer-wrapper .recrie-drawer {
	background: #525252;
	color: #FFFFFF;
	width: 100% !important;
	max-width: 100% !important;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100vh;
	overflow-y: auto;
	padding: 0;
}

/* Header interno do drawer — replica visual do header mobile (preto,
   logo esquerda, ícones direita). Usuário sempre vê onde está. */
.recrie-drawer-header {
	display: flex;
	align-items: center;
	background: #171717;
	padding: 8px 12px;
	min-height: 64px;
	gap: 8px;
}
.recrie-drawer-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	line-height: 0;
}
.recrie-drawer-logo img {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}
.recrie-drawer-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}
.recrie-drawer-close,
.recrie-drawer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #FFFFFF;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	position: static; /* override do top/right antigo (era absolute) */
	transition: opacity 0.2s;
}
.recrie-drawer-close:hover,
.recrie-drawer-icon:hover { opacity: 0.7; }
.recrie-drawer-close svg,
.recrie-drawer-icon svg { stroke: #FFFFFF; display: block; }

.recrie-drawer-nav {
	padding: 32px 24px 24px;
}
.recrie-drawer-nav .recrie-menu-mobile,
.recrie-drawer-nav ul.recrie-menu-mobile {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.recrie-drawer-nav .recrie-menu-mobile > li {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0;
}
.recrie-drawer-nav .recrie-menu-mobile > li > a {
	display: block;
	padding: 22px 0;
	font-size: 22px;
	font-weight: 400;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: 0.3px;
	text-align: center;
	font-family: var(--font-display, serif);
}

/* Item com filhos: NÃO usa caret — visual minimalista da referência.
   Click expande/colapsa via .is-open. */
.recrie-drawer-nav .recrie-menu-mobile .menu-item-has-children > a {
	position: relative;
}

/* Submenu colapsado por padrão; expande quando .is-open no pai.
   Sub-itens em fonte menor, leve indent visual, mesma cor branca. */
.recrie-drawer-nav .recrie-menu-mobile .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	background: transparent;
}
.recrie-drawer-nav .recrie-menu-mobile .menu-item-has-children.is-open > .sub-menu {
	max-height: 2000px;
}
.recrie-drawer-nav .recrie-menu-mobile .sub-menu li {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0;
}
.recrie-drawer-nav .recrie-menu-mobile .sub-menu a {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	padding: 12px 0;
	text-decoration: none;
	text-align: center;
}
.recrie-drawer-nav .recrie-menu-mobile .sub-menu .sub-menu a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	padding: 8px 0;
}

/* Bloco "Minha conta" no fundo do drawer */
.recrie-drawer-account {
	margin: 24px auto 32px;
	max-width: 320px;
	border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
	padding-top: 24px !important;
	text-align: center;
}
.recrie-drawer-account a {
	color: #FFFFFF !important;
	font-size: 16px;
}

/* ====================================================================
 * 5. BUSCA POPUP
 * ==================================================================== */
.recrie-search-popup-wrapper .recrie-search-popup {
	position: fixed;
	top: 130px;
	right: 24px;
	left: auto;
	transform: none;
	width: 420px;
	max-width: calc(100vw - 48px);
	background: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.25);
	padding: 18px 20px;
	z-index: 70;
}
.recrie-search-popup-wrapper .recrie-search-backdrop {
	background: rgba(0,0,0,0.15);
}
.recrie-search-popup form {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 0;
	padding: 0;
}
.recrie-search-popup form svg {
	color: #69727D;
	flex-shrink: 0;
}
.recrie-search-popup input[type="search"] {
	flex: 1;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: #171717;
	padding: 8px 0;
	width: 100%;
}
.recrie-search-popup input[type="search"]::placeholder {
	color: #A3A3A3;
}
.recrie-search-popup form button {
	font-size: 11px;
	color: #A3A3A3;
	border: 1px solid #E5E5E5;
	border-radius: 3px;
	padding: 3px 8px;
	background: #FAFAFA;
	cursor: pointer;
	font-family: monospace;
	letter-spacing: 0.5px;
}
.recrie-search-popup .recrie-search-hint {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #F5F5F5;
	font-size: 12px;
	color: #A3A3A3;
}
@media (max-width: 767px) {
	.recrie-search-popup-wrapper .recrie-search-popup {
		top: 70px;
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
	}
}

/* ====================================================================
 * 6. CARDS DE PRODUTO (loop)
 * Aspecto 3:4, botão "Ver Produto" deslizando de baixo no hover
 * ==================================================================== */

/* Grid do archive Woo */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce nativo injeta ::before e ::after em ul.products com
   `content:" "; display:table` (legado pra clearfix de float).
   Quando o UL é `display:grid`, esses pseudo-elements viram grid items
   e ocupam a primeira/última célula, empurrando o 1º produto pra coluna 2.
   Neutralizar pra que os items reais ocupem as células corretas. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}
@media (min-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}
@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.recrie-loop-product {
	/* !important porque o CSS nativo do WooCommerce aplica float+width+margin
	   no li.product que conflita com o grid e desalinha a primeira posição.
	   width: 100% (não auto!) — auto faria o card encolher pro tamanho
	   intrínseco do <img> filho, causando cards de larguras diferentes
	   conforme a resolução de cada foto. */
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: none !important;
	list-style: none;
	background: transparent;
	position: relative;
	transition: transform 0.2s ease;
}

/* Imagem do produto — aspect-ratio 2:3 fixo pra garantir que TODOS os
   cards da mesma linha tenham exatamente a mesma altura (e preço/título
   sempre alinhados). object-fit: cover preenche 100% do card sem barras
   brancas — fotos com proporção diferente de 2:3 sofrem corte mínimo. */
.recrie-loop-product-image {
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
	margin-bottom: 12px;
	aspect-ratio: 2 / 3;
}
.recrie-loop-product-image img,
li.product img.wp-post-image,
.recrie-loop-product img.attachment-recrie-card {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.4s ease;
}

/* Badge de oferta */
.recrie-sale-badge,
li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	background: #6B1F2A;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 0;
	line-height: 1;
	margin: 0;
	min-height: auto;
	min-width: auto;
	z-index: 3;
}

/* Badge estoque */
.recrie-stock-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #171717;
	color: #FFFFFF;
	font-size: 10px;
	padding: 6px 10px;
	z-index: 3;
}

/* Botão "Ver Produto" — desliza de baixo no hover (desktop) */
.recrie-loop-product .recrie-view-product-btn,
li.product .recrie-view-product-btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	transform: translateY(100%);
	width: 100%;
	background: #FFFFFF;
	color: #171717;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding: 18px 16px;
	border-radius: 0;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	text-align: center;
	box-shadow: none;
	transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
	z-index: 5;
	margin: 0;
	pointer-events: none;
}
.recrie-loop-product:hover .recrie-view-product-btn,
li.product:hover .recrie-view-product-btn,
.swiper-slide:hover .recrie-view-product-btn {
	transform: translateY(0);
	pointer-events: auto;
}
.recrie-loop-product .recrie-view-product-btn:hover,
li.product .recrie-view-product-btn:hover {
	background: #171717;
	color: #FFFFFF;
}

/* Esconde botão padrão Woo de "adicionar ao carrinho" */
li.product .add_to_cart_button,
li.product .added_to_cart {
	display: none;
}

/* Título do produto */
.recrie-loop-product-title,
.woocommerce-loop-product__title,
li.product h2.woocommerce-loop-product__title,
li.product h3.woocommerce-loop-product__title {
	font-size: 18px;
	font-weight: 500;
	color: #403D3E;
	margin: 0 0 8px 0;
	padding: 0;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: left;
	letter-spacing: 0;
}

/* Preço */
.recrie-loop-product-price,
li.product .price,
li.product span.price {
	font-size: 16px;
	font-weight: 500;
	color: #171717;
	margin: 0;
	text-align: left;
	line-height: 1.4;
}
li.product .price ins {
	background: transparent;
	text-decoration: none;
	font-weight: 500;
}
li.product .price del {
	color: #A3A3A3;
	font-weight: 400;
	margin-right: 6px;
	font-size: 13px;
}

/* Parcelamento — único bloco, sem !important */
.recrie-installments,
li.product .recrie-installments,
.recrie-loop-product .recrie-installments,
.woocommerce ul.products li.product .recrie-installments {
	display: block;
	font-size: 12px;
	color: #69727D;
	font-weight: 400;
	margin-top: 4px;
	margin-bottom: 0;
	line-height: 1.4;
	text-align: left;
	letter-spacing: 0;
}

/* Link envolvente: sem sublinhado */
.recrie-loop-product a,
.recrie-loop-product-link,
li.product a {
	text-decoration: none;
}

/* Mobile: card full-bleed (imagem 100% da viewport) + bloco de texto
   com padding lateral pra respirar. TODOS os cards têm a MESMA altura
   garantida via aspect-ratio (imagem) + min-height (título reserva 2 linhas)
   + min-height da área de preço. */
@media (max-width: 767px) {
	/* CTA "VER PRODUTO" sempre visível no mobile (sem hover) */
	.recrie-loop-product .recrie-view-product-btn,
	li.product .recrie-view-product-btn {
		transform: translateY(0);
		pointer-events: auto;
		padding: 14px;
		font-size: 11px;
		letter-spacing: 1.5px;
	}

	/* Padding lateral pra texto não colar na borda da tela */
	.recrie-loop-product-title,
	.woocommerce-loop-product__title,
	li.product h2.woocommerce-loop-product__title,
	li.product h3.woocommerce-loop-product__title,
	.recrie-loop-product-price,
	li.product .price,
	li.product span.price,
	.recrie-loop-product .recrie-installments,
	li.product .recrie-installments {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* Título + preço lado a lado (referência do cliente):
	   título esquerda fluido (até 2 linhas), preço direita rígido.
	   Esse layout elimina o "buraco" entre título e preço que vinha
	   da min-height + stacking vertical. */
	.recrie-loop-product-title,
	.woocommerce-loop-product__title,
	li.product h2.woocommerce-loop-product__title,
	li.product h3.woocommerce-loop-product__title {
		min-height: 0;
		-webkit-line-clamp: 2;
		font-size: 14px;
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}

	.recrie-loop-product-price {
		font-size: 15px;
		margin-top: 0;
		flex: 0 0 auto;
		text-align: right;
	}

	/* Espaço inferior pra cards respirarem entre si no scroll */
	.recrie-loop-product {
		padding-bottom: 16px;
	}
}

/* ====================================================================
 * MOBILE OVERRIDES — fixes específicos pedidos pelo cliente
 * ==================================================================== */
@media (max-width: 767px) {

	/* (3) iOS: bloqueia zoom automático ao focar selects e inputs do
	   checkout. iOS Safari faz zoom quando font-size < 16px no campo
	   ativo — força 16px e o problema some sem mudar visualmente o
	   layout (16px é o tamanho padrão de body). */
	.recrie-checkout select,
	.recrie-checkout input[type="text"],
	.recrie-checkout input[type="tel"],
	.recrie-checkout input[type="email"],
	.recrie-checkout input[type="number"],
	.recrie-checkout input[type="date"],
	.recrie-checkout input[type="password"],
	.recrie-checkout textarea,
	.woocommerce-checkout select,
	.woocommerce-checkout input[type="text"],
	.woocommerce-checkout input[type="tel"],
	.woocommerce-checkout input[type="email"],
	.woocommerce-checkout input[type="number"],
	.woocommerce-checkout textarea,
	.woocommerce-account select,
	.woocommerce-account input[type="text"],
	.woocommerce-account input[type="tel"],
	.woocommerce-account input[type="email"],
	.woocommerce-account input[type="password"] {
		font-size: 16px !important;
	}

	/* (4) Mini-cart mobile — empilhamento vertical CENTRALIZADO.
	   Antes: thumb à esquerda, info à direita = layout torto.
	   O .recrie-mini-cart__item usa flex (não grid) — então empilhamos
	   via flex-direction: column e centralizamos os filhos.  */
	.recrie-mini-cart__item {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		padding: var(--space-4) 40px var(--space-4) var(--space-4);
	}
	.recrie-mini-cart__thumb {
		flex: 0 0 auto !important;
		width: 60% !important;
		max-width: 240px !important;
		height: auto !important;
		min-height: 200px !important;
		margin: 0 auto var(--space-3);
	}
	.recrie-mini-cart__info {
		width: 100%;
		align-items: center;
		text-align: center;
	}
	.recrie-mini-cart__name {
		text-align: center;
	}
	.recrie-mini-cart__meta {
		justify-content: center;
		text-align: center;
		list-style: none;
		padding-left: 0;
	}
	.recrie-mini-cart__row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: var(--space-4);
	}
	.recrie-mini-cart__totals {
		text-align: center;
	}
	.recrie-mini-cart__subtotal,
	.recrie-mini-cart__total,
	.recrie-mini-cart__discount {
		display: flex;
		justify-content: center;
		gap: 6px;
		text-align: center;
	}

	/* (5) Wizard de personalização — caixa quebrando texto em mobile.
	   Sintomas no print: "Selecione uma opç..." e "Total: R$23..." cortados.
	   Causa: overflow-x do container + box-sizing herdado errado em
	   .yith-wapo-addon. Fix: força box-sizing + overflow visible + larguras
	   100% nos selects. */
	.recrie-wizard-body,
	.recrie-wizard-step,
	.recrie-wizard-step .yith-wapo-addon,
	.recrie-wizard-footer {
		box-sizing: border-box;
		max-width: 100%;
		overflow: visible;
	}
	.recrie-wizard-step .yith-wapo-addon select,
	.recrie-wizard-step .yith-wapo-addon input[type="text"],
	.recrie-wizard-step .yith-wapo-addon input[type="email"] {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* "Preço/Valor/Total" — quadro de totais do produto: garante quebra
	   limpa e padding pra texto não colar nas bordas. */
	.yith-wapo-price-container,
	.yith-wapo-final-price,
	.yith-wapo-options-price {
		box-sizing: border-box;
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: normal;
	}

	/* ============================================================
	 * Fixes adicionais — iteração 2026-05-27
	 * ============================================================ */

	/* (2) Mini-cart cupom + totais — largura cheia igual ao botão
	   "Finalizar compra". Antes os cards de cupom/subtotal ficavam
	   estreitos por causa de padding ou max-width herdado. */
	.recrie-mini-cart-coupon,
	.recrie-mini-cart-coupon__details,
	.recrie-mini-cart-coupon__applied,
	.recrie-mini-cart__totals {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Toggle "Adicionar cupom/vale" + box totais: padding interno largo
	   pra casarem visualmente com o botão de finalizar. */
	.recrie-mini-cart-coupon__toggle,
	.recrie-mini-cart-coupon__form,
	.recrie-mini-cart__totals {
		padding: var(--space-4) var(--space-5) !important;
		box-sizing: border-box;
	}

	/* (3) Qty controls da single product centralizados em mobile.
	   Atalho via margin-inline:auto — sem mudar display do componente. */
	.recrie-product-summary .recrie-quantity,
	.recrie-product-summary .quantity.recrie-quantity,
	.woocommerce div.product form.cart .quantity {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* (4) Card "Entrega" no review-order do Step 4 — texto longo
	   estava colando à direita com muito espaço vazio à esquerda.
	   Força text-align: left realmente respeitado, sem o td antigo
	   esmagando o conteúdo. */
	.recrie-checkout .shop_table tfoot tr.shipping td,
	.woocommerce-checkout-review-order-table tfoot tr.shipping td {
		text-align: left !important;
		padding: 0 !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.recrie-checkout .shop_table tfoot tr.shipping th,
	.woocommerce-checkout-review-order-table tfoot tr.shipping th {
		text-align: left !important;
		display: block !important;
		width: 100% !important;
		padding: 0 0 var(--space-2) 0 !important;
	}

	/* (5) Endereços no /pedido-recebido/ (thank you) — força
	   empilhamento vertical no mobile. O CSS anterior dependia do
	   wrapper .recrie-thankyou-details que pode não estar presente
	   sempre — aqui usamos o seletor universal da WC. */
	.woocommerce-customer-details .woocommerce-columns,
	.woocommerce-customer-details .col2-set,
	.woocommerce-customer-details .addresses {
		display: block !important;
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}
	.woocommerce-customer-details .woocommerce-column,
	.woocommerce-customer-details .col-1,
	.woocommerce-customer-details .col-2 {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 var(--space-4) 0 !important;
		float: none !important;
		display: block !important;
		box-sizing: border-box;
	}
	.woocommerce-customer-details address {
		word-break: normal;
		overflow-wrap: break-word;
	}
}

/* ====================================================================
 * 7. GRID DE PRODUTOS NA HOME + CARROSSEL
 * ==================================================================== */

.recrie-product-grid {
	padding: 64px 0;
	background: transparent;
}

.recrie-grid-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Título grande do grid */
.recrie-product-grid h2,
.recrie-grid-header h2 {
	font-weight: 200;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 1.1;
	letter-spacing: 0;
	color: #171717;
	margin: 0;
}
.recrie-grid-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-bottom: 48px;
}
.recrie-grid-header > div {
	text-align: center;
}
.recrie-grid-header p {
	font-weight: 300;
	font-size: 16px;
	color: #69727D;
	margin-top: 8px;
}

/* Wrapper do carrossel
 * IMPORTANTE: o wrapper tem padding-bottom GRANDE pra acomodar bullets
 * e o link "Ver todos →" que vem depois.
 * Bullets ficam EM CIMA do padding, NUNCA dentro do swiper. */
.recrie-product-carousel-wrapper {
	position: relative;
	padding-bottom: 56px;
}

/* Swiper: NÃO usar padding-bottom interno (deixa só o wrapper cuidar) */
.recrie-product-carousel {
	overflow: hidden;
	padding-bottom: 0;
}
.recrie-product-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
}
.recrie-product-carousel .swiper-slide {
	height: auto;
	display: flex;
}
/* Mobile: força slide a ocupar 100% da largura visível mesmo se o Swiper
   calcular margem residual. Combina com spaceBetween:0 do JS. */
@media (max-width: 767px) {
	.recrie-product-carousel .swiper-slide {
		margin-right: 0 !important;
	}
}
.recrie-product-carousel .swiper-slide .recrie-loop-product {
	width: 100%;
	display: block;
}

/* ==== Pre-Swiper layout (anti-FOUC) ====
   Antes do Swiper.js inicializar, o .swiper-slide não tem width definida,
   então o primeiro slide ocupa 100% da largura por default e aparece como
   um card gigante por alguns milissegundos. Renderizamos os 4 primeiros
   slides já em grid, com layout idêntico ao do Swiper depois de inicializar,
   pra evitar esse flash. Quando o Swiper inicializa, ele adiciona a classe
   .swiper-initialized automaticamente e as regras abaixo deixam de aplicar. */
.recrie-product-carousel:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.recrie-product-carousel:not(.swiper-initialized) .swiper-slide {
	width: auto;
	height: auto;
	display: block;
}
.recrie-product-carousel:not(.swiper-initialized) .swiper-slide:nth-child(n+5) {
	display: none;
}
@media (max-width: 1099px) {
	.recrie-product-carousel:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	.recrie-product-carousel:not(.swiper-initialized) .swiper-slide:nth-child(n+4) {
		display: none;
	}
}
@media (max-width: 899px) {
	.recrie-product-carousel:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.recrie-product-carousel:not(.swiper-initialized) .swiper-slide:nth-child(n+3) {
		display: none;
	}
}
@media (max-width: 639px) {
	.recrie-product-carousel:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.recrie-product-carousel:not(.swiper-initialized) .swiper-slide:nth-child(n+2) {
		display: none;
	}
}
/* Esconde setas/paginação até o Swiper estar pronto pra evitar elementos
   bagunçados aparecendo antes do tempo. */
.recrie-product-carousel:not(.swiper-initialized) ~ .swiper-pagination,
.recrie-product-carousel:not(.swiper-initialized) ~ .recrie-swiper-prev,
.recrie-product-carousel:not(.swiper-initialized) ~ .recrie-swiper-next {
	opacity: 0;
	pointer-events: none;
}

/* Setas */
.recrie-swiper-prev,
.recrie-swiper-next {
	position: absolute;
	top: calc(50% - 28px);  /* compensa o padding-bottom do wrapper */
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	color: #171717;
}
.recrie-swiper-prev:hover,
.recrie-swiper-next:hover {
	background: #171717;
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.recrie-swiper-prev { left: -22px; }
.recrie-swiper-next { right: -22px; }
.recrie-swiper-prev svg,
.recrie-swiper-next svg { display: block; }
.recrie-swiper-prev.swiper-button-disabled,
.recrie-swiper-next.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Paginação — fixa NO FUNDO do wrapper (NÃO do swiper) */
.recrie-product-carousel-wrapper .swiper-pagination {
	position: absolute;
	bottom: 16px;
	top: auto;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 2;
}
.recrie-product-carousel-wrapper .swiper-pagination-bullet {
	width: 24px;
	height: 3px;
	background: #DED9D9;
	border-radius: 0;
	opacity: 1;
	margin: 0;
	transition: background 0.2s ease;
	cursor: pointer;
}
.recrie-product-carousel-wrapper .swiper-pagination-bullet-active {
	background: #6B1F2A;
}

/* "Ver todos →" abaixo */
.recrie-grid-footer {
	text-align: center;
	margin-top: 32px;
}
.recrie-grid-see-all {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #171717;
	text-decoration: none;
	padding: 12px 24px;
	border: 1px solid #171717;
	transition: background 0.2s, color 0.2s;
}
.recrie-grid-see-all:hover {
	background: #171717;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.recrie-product-grid { padding: 40px 0; }
	/* Container sem padding lateral → cards do carrossel preenchem 100%
	   da largura da tela. Header/footer mantêm padding pra não colar nas bordas. */
	.recrie-product-grid .recrie-grid-container { padding: 0; }
	.recrie-product-grid .recrie-grid-header,
	.recrie-product-grid .recrie-grid-footer { padding-left: 16px; padding-right: 16px; }
	.recrie-grid-header { margin-bottom: 32px; }
	.recrie-swiper-prev,
	.recrie-swiper-next {
		width: 36px;
		height: 36px;
	}
	.recrie-swiper-prev { left: 4px; }
	.recrie-swiper-next { right: 4px; }
}

/* ====================================================================
 * 8. CARROSSEL DE VÍDEOS
 * ==================================================================== */

.recrie-video-grid {
	padding: 64px 0;
	background: transparent;
}
.recrie-video-grid .recrie-grid-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}
.recrie-video-grid .recrie-grid-header {
	margin-bottom: 48px;
	text-align: center;
}

.recrie-video-carousel-wrapper {
	position: relative;
	padding: 0;
}
.recrie-video-carousel {
	overflow: hidden;
}
.recrie-video-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
}
.recrie-video-carousel .swiper-slide {
	height: auto;
	display: flex;
}

/* Card de vídeo — vertical 9:16 */
.recrie-video-card {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #171717;
	cursor: default;
}

.recrie-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
	transition: opacity 0.4s ease;
}
.recrie-video-thumb-hidden {
	opacity: 0;
	visibility: hidden;
}

.recrie-video-play-indicator {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.4s ease;
}
.recrie-video-play-indicator svg {
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.recrie-video-indicator-hidden {
	opacity: 0;
}

.recrie-video-iframe-wrapper {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
/* Escudo transparente acima do iframe — bloqueia taps que iOS Safari
   deixaria passar pro player do YouTube, evitando que a UI de controles
   (play/pause/next) apareça quando o usuário toca/arrasta o card. */
.recrie-video-tap-shield {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: transparent;
	pointer-events: auto;
	touch-action: pan-y;
}
/* O iframe é maior que o card e deslocado pra cima/baixo pra cortar
   a barra de canal do YouTube (topo) e qualquer faixa de controles
   (base). pointer-events: none impede que o usuário clique no player. */
.recrie-video-iframe-wrapper iframe {
	position: absolute;
	left: -10%;
	top: -12%;
	width: 120%;
	height: 124%;
	border: 0;
	pointer-events: none;
}

.recrie-video-label {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 72px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	z-index: 5;
	text-shadow: 0 2px 12px rgba(0,0,0,0.9);
	pointer-events: none;
	text-align: left;
}

.recrie-video-card .recrie-video-cta {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	background: #FFFFFF;
	color: #171717;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	display: block;
	z-index: 5;
	transition: background 0.25s ease, color 0.25s ease;
	border: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	cursor: pointer;
}
.recrie-video-card .recrie-video-cta:hover {
	background: #171717;
	color: #FFFFFF;
}
.recrie-video-card .recrie-video-cta-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Setas do carrossel de vídeo */
.recrie-video-prev,
.recrie-video-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	color: #171717;
}
.recrie-video-prev:hover,
.recrie-video-next:hover {
	background: #171717;
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.recrie-video-prev { left: -22px; }
.recrie-video-next { right: -22px; }
.recrie-video-prev.swiper-button-disabled,
.recrie-video-next.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

@media (max-width: 767px) {
	.recrie-video-grid { padding: 40px 0; }
	/* Mesmo princípio do grid de produtos: container sem padding → vídeos
	   ocupam full-bleed; header/footer mantêm padding lateral. */
	.recrie-video-grid .recrie-grid-container { padding: 0; }
	.recrie-video-grid .recrie-grid-header,
	.recrie-video-grid .recrie-grid-footer { padding-left: 16px; padding-right: 16px; }
	.recrie-video-prev,
	.recrie-video-next {
		width: 36px;
		height: 36px;
	}
	.recrie-video-prev { left: 4px; }
	.recrie-video-next { right: 4px; }
	.recrie-video-label {
		font-size: 13px;
		bottom: 56px;
		left: 12px;
		right: 12px;
	}
	.recrie-video-card .recrie-video-cta {
		font-size: 11px;
		padding: 12px;
		letter-spacing: 1.5px;
		left: 12px;
		right: 12px;
		bottom: 12px;
	}
}

/* ====================================================================
 * 9. TRUST BAR (Pagamento | Suporte | Envios | Personalizável)
 *
 * Layout único, sem !important nem regras duplicadas.
 * Background herdado do body (transparente).
 * ==================================================================== */

.recrie-trust-bar {
	padding: 64px 24px;
	background: transparent;
}

.recrie-trust-bar-container {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
	align-items: start;
	width: 100%;
}

.recrie-trust-bar-item {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.recrie-trust-bar-icon {
	color: #171717;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.recrie-trust-bar-icon svg { display: block; }

.recrie-trust-bar-title {
	font-size: 28px;
	font-weight: 400;
	color: #171717;
	margin: 0;
	letter-spacing: 0.5px;
	text-align: center;
}

.recrie-trust-bar-description {
	font-size: 14px;
	color: #403D3E;
	margin: 0;
	line-height: 1.6;
	max-width: 260px;
	text-align: center;
}
.recrie-trust-bar-description strong {
	font-weight: 500;
	color: #171717;
}

@media (max-width: 1024px) {
	.recrie-trust-bar-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 32px;
	}
}

@media (max-width: 600px) {
	.recrie-trust-bar {
		padding: 40px 16px;
	}
	.recrie-trust-bar-container {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.recrie-trust-bar-title {
		font-size: 24px;
	}
}

/* ====================================================================
 * 10. REVIEWS SECTION (Google reviews via shortcode)
 * ==================================================================== */

.recrie-reviews-section {
	padding: 64px 24px;
	background: transparent;
}
.recrie-reviews-container {
	max-width: 1280px;
	margin: 0 auto;
}
.recrie-reviews-section .recrie-grid-header {
	margin-bottom: 48px;
	text-align: center;
}
.recrie-reviews-shortcode-wrapper {
	width: 100%;
}

/* Override leve do plugin (sem !important agressivo) */
.recrie-reviews-shortcode-wrapper .ti-widget {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
}
.recrie-reviews-shortcode-wrapper .ti-widget .ti-reviews-container-wrapper {
	background: transparent;
}

@media (max-width: 600px) {
	.recrie-reviews-section {
		padding: 40px 16px;
	}
	.recrie-reviews-section .recrie-grid-header {
		margin-bottom: 32px;
	}
}

/* ====================================================================
 * 11. SINGLE PRODUCT
 * ==================================================================== */
.recrie-single-product {
	padding: 32px 0;
}
.recrie-single-product .product_title {
	font-size: 32px;
	font-weight: 500;
	color: #171717;
	margin: 0 0 16px 0;
}
.recrie-single-product .price {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 24px;
}
.recrie-single-product .summary > * {
	margin-bottom: 16px;
}
.woocommerce-product-gallery__wrapper {
	display: grid;
	gap: 16px;
}
.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ====================================================================
 * 12. WOOCOMMERCE — botões, notices
 * ==================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: #171717;
	color: #FFFFFF;
	border: none;
	padding: 12px 24px;
	font-weight: 500;
	border-radius: 4px;
	transition: background 0.15s;
	display: inline-block;
	text-decoration: none;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: #262626;
	color: #FFFFFF;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 16px;
}
.woocommerce-message { background: #f0fdf4; border-left: 4px solid #16a34a; }
.woocommerce-info    { background: #eff6ff; border-left: 4px solid #3b82f6; }
.woocommerce-error   { background: #fef2f2; border-left: 4px solid #dc2626; }

/* Modal de medidas */
.recrie-measures-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 16px;
	transition: all 0.15s;
}
.recrie-measures-badge:hover {
	background: #e5e5e5;
	border-color: #d4d4d4;
}
.recrie-measures-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.recrie-measures-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.7);
}
.recrie-measures-modal-content {
	position: relative;
	background: #FFFFFF;
	border-radius: 8px;
	padding: 24px;
	max-width: 640px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
}
.recrie-measures-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 24px;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	transition: background 0.15s;
}
.recrie-measures-modal-close:hover {
	background: #f5f5f5;
}
.recrie-measures-video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 4px;
}
.recrie-measures-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Quantity input */
.recrie-quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	overflow: hidden;
	width: fit-content;
}
.recrie-qty-btn {
	padding: 8px 12px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background 0.15s;
}
.recrie-qty-btn:hover {
	background: #f5f5f5;
}
.recrie-qty-input {
	text-align: center;
	width: 48px;
	padding: 8px;
	border: 0;
	outline: none;
}
.recrie-qty-input::-webkit-outer-spin-button,
.recrie-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.recrie-qty-input[type=number] {
	-moz-appearance: textfield;
}

/* Carrinho vazio */
.recrie-cart-empty {
	text-align: center;
	padding: 64px 0;
}

/* Form base */
.search-field,
.search-form input[type="search"] {
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	padding: 8px 16px;
	flex: 1;
}
.search-submit {
	background: #171717;
	color: #FFFFFF;
	border: none;
	padding: 8px 24px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	transition: background 0.15s;
}
.search-submit:hover {
	background: #262626;
}

/* Page content */
.entry-content > * + * { margin-top: 1em; }
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-weight: 500;
	line-height: 1.25;
	color: #171717;
}
.entry-content h1 { font-size: 36px; }
.entry-content h2 { font-size: 30px; }
.entry-content h3 { font-size: 24px; }
.entry-content p { line-height: 1.625; }
.entry-content a { text-decoration: underline; }
.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
	line-height: 1.625;
}
.entry-content img { border-radius: 4px; }

/* ====================================================================
 * 13. FOOTER
 * ==================================================================== */
.site-footer {
	background: #171717;
	color: #FFFFFF;
	margin-top: 64px;
}
.site-footer h3 {
	color: #FFFFFF;
	margin: 0 0 16px 0;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer a {
	color: #d4d4d4;
	transition: color 0.15s;
}
.site-footer a:hover {
	color: #FFFFFF;
}
.recrie-footer-main {
	padding: 64px 0;
}
.recrie-footer-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}
/* Layout: 3 colunas de seções + 1 coluna de cadastro */
.recrie-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
	gap: 56px;
	align-items: start;
}
/* 6 seções dispostas em 3 colunas × 2 linhas (column-flow pra ficar
   coluna 1: [Jalecos, Scrubs], coluna 2: [Dólmãs, Acessórios], coluna 3: [Para Seu Cliente, Informações]) */
.recrie-footer-sections {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	gap: 40px 32px;
}
.recrie-footer-section-title {
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 14px 0;
	text-transform: none;
	letter-spacing: 0;
}
.recrie-footer-section-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.recrie-footer-section-list li {
	margin: 0 0 8px 0;
}
.recrie-footer-section-list a {
	color: #a3a3a3;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s;
}
.recrie-footer-section-list a:hover {
	color: #FFFFFF;
}

/* Coluna de cadastro */
.recrie-footer-newsletter-intro {
	font-size: 14px;
	color: #a3a3a3;
	margin: 0 0 20px 0;
	line-height: 1.5;
}
.recrie-footer-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.recrie-footer-newsletter-input {
	background: #FFFFFF;
	color: #171717;
	border: 0;
	border-radius: 9999px;
	padding: 12px 22px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
	outline: none;
}
.recrie-footer-newsletter-input::placeholder {
	color: #737373;
}
.recrie-footer-newsletter-btn {
	background: #404040;
	color: #FFFFFF;
	border: 0;
	border-radius: 9999px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}
.recrie-footer-newsletter-btn:hover {
	background: #525252;
}
.recrie-footer-social {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}
.recrie-footer-social a {
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: #404040;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	text-decoration: none;
	transition: background 0.2s;
}
.recrie-footer-social a:hover {
	background: #6B1F2A;
	color: #FFFFFF;
}

.recrie-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 24px 0;
	font-size: 12px;
	color: #a3a3a3;
}

/* Responsivo: tablet — 3 colunas viram 2 + cadastro embaixo */
@media (max-width: 1024px) {
	.recrie-footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.recrie-footer-sections {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.recrie-footer-newsletter {
		max-width: 480px;
	}
}
/* Mobile */
@media (max-width: 640px) {
	.recrie-footer-main {
		padding: 40px 0;
	}
	.recrie-footer-container {
		padding: 0 20px;
	}
	.recrie-footer-sections {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-auto-flow: row;
		gap: 32px 20px;
	}
}

/* ====================================================================
 * 14. WHATSAPP FLUTUANTE
 * ==================================================================== */
.recrie-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background: #25d366;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15);
	z-index: 30;
	transition: transform 0.15s, box-shadow 0.15s;
}
.recrie-whatsapp-float:hover {
	transform: scale(1.1);
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
	color: #FFFFFF;
}
.recrie-whatsapp-float:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
}
@media (max-width: 768px) {
	.recrie-whatsapp-float {
		bottom: 16px;
		right: 16px;
		width: 48px;
		height: 48px;
	}
}

/* ====================================================================
 * 15. PRINT
 * ==================================================================== */
@media print {
	.recrie-whatsapp-float,
	.recrie-promo-bar,
	.site-header,
	.site-footer {
		display: none;
	}
}
/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT (Bloco F) — v2.1 consolidado
   ═══════════════════════════════════════════════════════════════ */

//* ─── Container + grid 2 colunas (galeria maior) ─────────── */
.recrie-single-product {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 64px;
	background: var(--color-bg);
}

/* Sobrescreve Tailwind lg:grid-cols-2 com seletor mais específico */
.recrie-single-product > .grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 1024px) {
	.recrie-single-product > .grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 48px;
		align-items: start;
	}
}

.recrie-product-gallery {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.recrie-product-gallery .woocommerce-product-gallery {
	position: relative;
	background: var(--color-bg-alt);
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.recrie-product-gallery .woocommerce-product-gallery .flex-viewport {
	background: var(--color-bg-alt);
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.recrie-product-gallery .woocommerce-product-gallery__wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
}

.recrie-product-gallery .woocommerce-product-gallery__image {
	width: 100%;
	max-width: 100%;
}

.recrie-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 0;
}

.recrie-product-gallery .zoomImg {
	display: none !important;
}

/* Botão de zoom (lupa) */
.recrie-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;
	color: var(--color-text-strong);
	transition: background 0.2s ease;
}

.recrie-product-gallery .woocommerce-product-gallery__trigger:hover {
	background: #fff;
}

/* Thumbnails abaixo */
.recrie-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.recrie-product-gallery .flex-control-thumbs li {
	flex: 0 0 90px;
	max-width: 90px;
	margin: 0;
	list-style: none;
}

.recrie-product-gallery .flex-control-thumbs img {
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease;
	width: 100% !important;
	height: auto !important;
}

.recrie-product-gallery .flex-control-thumbs img:hover,
.recrie-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* Badge "Como tirar medidas" — posiciona no canto */
.recrie-product-gallery .recrie-measures-badge {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	border-radius: 999px;
	padding: 8px 14px;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
	color: var(--color-text-strong);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: background 0.2s ease;
}

.recrie-product-gallery .recrie-measures-badge:hover {
	background: #fff;
}

.recrie-product-summary {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 8px;
	align-self: flex-start;
	width: 100% !important;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Garante que selects internos do YITH ocupem 100% (vence inline 75%) */
.recrie-product-summary .yith-wapo-addon .options,
.recrie-product-summary .yith-wapo-addon select.yith-wapo-option-value {
	width: 100% !important;
}

/* ─── Breadcrumb ───────────────────────────────────────────── */
.recrie-single-breadcrumb {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
	color: var(--color-text-muted);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.recrie-single-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.recrie-single-breadcrumb a:hover {
	color: var(--color-accent);
}

.recrie-breadcrumb-sep {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.recrie-breadcrumb-current {
	color: var(--color-text);
}

/* ─── Título ──────────────────────────────────────────────── */
.recrie-product-summary .product_title,
.recrie-product-summary .entry-title {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-weight: 200;
	font-size: 36px;
	line-height: 1.15;
	color: var(--color-text-strong);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.recrie-product-summary .product_title {
		font-size: 42px;
	}
}

/* ─── Preço (neutraliza cores herdadas) ──────────────────── */
.recrie-product-summary p.price,
.recrie-product-summary .price,
.recrie-product-summary .price > .woocommerce-Price-amount,
.recrie-product-summary .price > span,
.recrie-product-summary .price bdi,
.recrie-product-summary .price .amount,
.recrie-product-summary .price .woocommerce-Price-currencySymbol {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	color: var(--color-text-strong);
	background: transparent;
	line-height: 1.2;
}

.recrie-product-summary p.price {
	font-size: 28px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.recrie-product-summary .price ins {
	text-decoration: none;
	background: transparent;
}

.recrie-product-summary .price del {
	font-size: 18px;
	color: var(--color-text-muted);
	margin-right: 8px;
	opacity: 0.7;
}

.recrie-product-summary .recrie-installments {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.recrie-product-summary .recrie-installments .woocommerce-Price-amount,
.recrie-product-summary .recrie-installments .amount,
.recrie-product-summary .recrie-installments bdi {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
}

/* ─── Form cart ────────────────────────────────────────────── */
.recrie-product-summary form.cart {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ─── YITH WAPO — estilização temporária (modal vem depois) ─ */
.recrie-product-summary #yith-wapo-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.recrie-product-summary .yith-wapo-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.recrie-product-summary .yith-wapo-addon {
	background: var(--color-bg-alt) !important;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 14px 16px;
	margin: 0 !important;
}

.recrie-product-summary .yith-wapo-addon.hidden {
	display: none;
}

.recrie-product-summary .yith-wapo-addon .addon-header {
	margin-bottom: 8px;
}

.recrie-product-summary .yith-wapo-addon .wapo-addon-title {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	margin: 0;
	padding: 0;
	cursor: default;
}

.recrie-product-summary .yith-wapo-addon .wapo-addon-title span {
	font-weight: 500;
}

.recrie-product-summary .yith-wapo-addon .wapo-addon-description {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 12px;
	color: var(--color-text-muted);
	margin: 0 0 8px;
}

.recrie-product-summary .yith-wapo-addon .options-container {
	margin: 0;
}

.recrie-product-summary .yith-wapo-addon select {
	width: 100% !important;
	padding: 10px 14px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	background: #fff;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23403D3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.recrie-product-summary .yith-wapo-addon input[type="text"] {
	width: 100% !important;
	padding: 10px 14px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	background: #fff;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: var(--color-text);
}

.recrie-product-summary .yith-wapo-addon select:focus,
.recrie-product-summary .yith-wapo-addon input[type="text"]:focus {
	outline: none;
	border-color: var(--color-accent);
}

.recrie-product-summary .yith-wapo-addon label {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
	color: var(--color-text);
	margin-bottom: 6px;
	display: block;
}

/* Upload de arquivo */
.recrie-product-summary .yith-wapo-ajax-uploader {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px dashed #d4d4d4;
	border-radius: 4px;
	background: #fff;
}

.recrie-product-summary .yith-wapo-ajax-uploader-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}

.recrie-product-summary .yith-wapo-ajax-uploader-container > span:first-child {
	font-size: 13px;
	color: var(--color-text-muted);
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
}

.recrie-product-summary .yith-wapo-ajax-uploader-container .button {
	background: var(--color-text-strong);
	color: #fff;
	padding: 6px 14px;
	border-radius: 3px;
	font-size: 12px;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	cursor: pointer;
}

.recrie-product-summary .yith-wapo-addon .description {
	font-size: 11px;
	color: var(--color-text-muted);
	margin: 6px 0 0;
}

/* Imagem de título YITH (brasão) — reduz tamanho do gigante */
.recrie-product-summary .yith-wapo-addon .title-image {
	max-width: 80px;
	margin-bottom: 8px;
}

.recrie-product-summary .yith-wapo-addon .title-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

/* Tabela de total (YITH) */
.recrie-product-summary #wapo-total-price-table {
	background: var(--color-bg-alt);
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 12px 16px;
	margin: 0;
}

.recrie-product-summary #wapo-total-price-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.recrie-product-summary #wapo-total-price-table th,
.recrie-product-summary #wapo-total-price-table td {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
	padding: 4px 0;
	border: none;
	background: transparent;
}

.recrie-product-summary #wapo-total-price-table th {
	text-align: left;
	font-weight: 400;
	color: var(--color-text-muted);
}

.recrie-product-summary #wapo-total-price-table td {
	text-align: right;
	color: var(--color-text);
	font-weight: 500;
}

.recrie-product-summary #wapo-total-price-table .wapo-total-order th,
.recrie-product-summary #wapo-total-price-table .wapo-total-order td {
	font-size: 16px;
	color: var(--color-text-strong);
	font-weight: 500;
	padding-top: 8px;
	border-top: 1px solid #e5e5e5;
}

/* ─── Card "Personalizar bordado" — escondemos por enquanto.
       Aparece quando YITH virar modal step-by-step. */
.recrie-personalization-card {
	display: none;
}

/* ─── Quantity ────────────────────────────────────────────── */
.recrie-product-summary .recrie-quantity {
	width: fit-content;
}

/* ─── Add to cart (CTA principal) ─────────────────────────── */
.recrie-product-summary .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	box-shadow: none;
	text-shadow: none;
}

.recrie-product-summary .single_add_to_cart_button:hover {
	background: #571820;
}

.recrie-product-summary .single_add_to_cart_button:active {
	transform: scale(0.99);
}

.recrie-product-summary .single_add_to_cart_button::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center;
}

.recrie-product-summary .single_add_to_cart_button:disabled,
.recrie-product-summary .single_add_to_cart_button.disabled {
	background: #c4b5b8;
	cursor: not-allowed;
	opacity: 0.8;
}

/* ─── Frete (Melhor Envio Cotação) ────────────────────────── */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto.containerCalculator {
	border-top: 1px solid #e5e5e5;
	padding-top: 20px;
	margin-top: 4px;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .calculatorRow {
	margin: 0;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .row {
	display: block;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75 {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto p {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	margin: 0;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .iptCep {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	background: var(--color-bg-alt);
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: var(--color-text);
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .iptCep:focus {
	outline: none;
	border-color: var(--color-accent);
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete {
	margin-top: 12px;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 13px;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete table {
	width: 100%;
	border-collapse: collapse;
}

#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete th,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete td {
	padding: 6px 8px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	text-align: left;
}

#calcular-frete-loader {
	display: none;
	margin: 8px 0;
}

#calcular-frete-loader img {
	width: 24px;
	height: 24px;
}

/* ─── Esconde meu placeholder de frete (duplicado) ───────── */
.recrie-product-summary > .recrie-single-shipping {
	display: none;
}

/* ─── Meta (categoria) ─────────────────────────────────────── */
.recrie-single-meta {
	border-top: 1px solid #e5e5e5;
	padding-top: 16px;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.recrie-single-meta__row {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 12px;
	color: var(--color-text-muted);
}

.recrie-single-meta__key {
	font-weight: 500;
	margin-right: 4px;
}

.recrie-single-meta__val a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.recrie-single-meta__val a:hover {
	color: var(--color-accent);
}

/* ─── Esconde Woo padrão indesejado ────────────────────────── */
.recrie-product-summary .woocommerce-product-rating,
.recrie-product-summary .product_meta,
.recrie-product-summary .woocommerce-product-details__short-description {
	display: none;
}

/* ─── Esconde breadcrumb nativo do Woo (duplicado) ────────── */
.woocommerce-breadcrumb {
	display: none;
}

/* ─── Tabs (descrição abaixo da dobra) ────────────────────── */
.recrie-product-tabs {
	max-width: 1280px;
	margin: 48px auto 0;
	padding: 0 16px;
}

.recrie-product-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid #e5e5e5;
	list-style: none;
}

.recrie-product-tabs .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.recrie-product-tabs .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 20px;
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.recrie-product-tabs .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text-strong);
	border-bottom-color: var(--color-accent);
}

.recrie-product-tabs .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-text);
}

.recrie-product-tabs .woocommerce-Tabs-panel {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
}

.recrie-product-tabs .woocommerce-Tabs-panel h2 {
	font-size: 22px;
	font-weight: 500;
	color: var(--color-text-strong);
	margin: 0 0 12px;
}

/* ─── Produtos relacionados ───────────────────────────────── */
.related.products {
	max-width: 1280px;
	margin: 64px auto 0;
	padding: 0 16px;
}

.related.products > h2 {
	font-family: 'Belleza', 'Cormorant Garamond', Georgia, serif;
	font-size: 28px;
	font-weight: 200;
	color: var(--color-text-strong);
	margin: 0 0 24px;
}

/* ─── Responsivo ───────────────────────────────────────────── */
@media (max-width: 1023px) {
	.recrie-single-product {
		padding: 16px 12px 48px;
	}

	.recrie-product-summary .product_title {
		font-size: 28px;
	}

	.recrie-product-summary p.price {
		font-size: 24px;
	}

	.recrie-product-gallery .recrie-measures-badge {
		font-size: 11px;
		padding: 6px 10px;
	}
}

/* ────────────────────────────────────────────────────────────────
   Single product gallery — Swiper + zoom (CSS dedicado).
   - Card com aspect-ratio fixo (4:5) e object-cover → imagem preenche,
     sem faixas laterais brancas.
   - Card encolhe largura em viewport baixo (preserva sticky sem corte).
   - Setas absolutas DENTRO do card (= dentro da imagem).
   - Zoom hover gerido por JS (scale + transform-origin no cursor).
   ──────────────────────────────────────────────────────────────── */

/* Anti-FOUC */
.recrie-product-gallery-swiper:not(.swiper-initialized) > .swiper-wrapper {
	display: block;
}
.recrie-product-gallery-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:not(:first-child) {
	display: none !important;
}
.recrie-product-gallery-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:first-child {
	width: 100%;
}

/* Wrap externo: container simples, sticky em desktop (≥1024px).
   Sem flex/justify pra não atrapalhar position:sticky. */
.recrie-product-gallery-wrap {
	position: relative;
	min-width: 0;
	width: 100%;
}

/* Card: aspect-ratio DINÂMICO (var --gallery-aspect injetada pelo JS após
   a primeira imagem carregar, baseada na proporção natural dela).
   Isso garante que object-cover não cropa NADA. */
.recrie-product-gallery-wrap > .recrie-gallery-card,
.recrie-product-gallery-wrap > div:first-child {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #fafafa;
	width: 100%;
	aspect-ratio: var(--gallery-aspect, 4 / 5);
	margin: 0 auto;
}

/* Decisão UX: imagem inteira deve caber numa tela só, sem scroll.
   Limita max-height ao viewport menos header (96px) e folga (44px).
   Limita max-width JUNTO (calc do max-height × aspect-ratio da imagem),
   senão browser respeita só max-height mas mantém width:100%, quebrando
   aspect-ratio. JS injeta --gallery-w/--gallery-h como números crus. */
@media (min-width: 1024px) {
	.recrie-product-gallery-wrap > .recrie-gallery-card,
	.recrie-product-gallery-wrap > div:first-child {
		max-height: calc(100vh - 140px);
		max-width: calc((100vh - 140px) * var(--gallery-w, 4) / var(--gallery-h, 5));
	}
}

/* Swiper preenche o card */
.recrie-product-gallery-swiper {
	width: 100%;
	height: 100%;
}
.recrie-product-gallery-swiper .swiper-wrapper,
.recrie-product-gallery-swiper .swiper-slide {
	height: 100%;
}

.recrie-product-gallery-swiper .swiper-slide {
	display: flex !important;
	align-items: stretch;
	justify-content: stretch;
	overflow: hidden;
	background: transparent;
}

/* Imagem preenche, sem cortar bordas críticas (object-position: center top
   prioriza topo — bom pra fotos de roupa onde a peça começa em cima) */
.recrie-product-gallery-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	/* object-fit: contain garante que NUNCA cropa, mesmo se aspect var não tiver
	   sido aplicado ainda. Com aspect-ratio do card == aspect da imagem (via JS),
	   contain preenche 100% sem deixar faixa lateral. */
	object-fit: contain;
	object-position: center center;
	transition: transform 0.18s ease-out;
	will-change: transform;
	transform-origin: center center;
}

/* Cursor zoom-in só onde faz sentido */
@media (hover: hover) and (pointer: fine) {
	.recrie-product-gallery-swiper .swiper-slide {
		cursor: zoom-in;
	}
}

/* Setas dentro da imagem */
.recrie-gallery-prev,
.recrie-gallery-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #1f2937;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.recrie-gallery-prev { left: 12px; }
.recrie-gallery-next { right: 12px; }

.recrie-gallery-prev:hover,
.recrie-gallery-next:hover {
	background: #fff;
}

.recrie-gallery-prev.swiper-button-disabled,
.recrie-gallery-next.swiper-button-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Sticky desktop.
   IMPORTANTE: o CSS curado deste arquivo (~linha 1591) define
   `align-items: start` no `.recrie-single-product > .grid` em desktop.
   Isso fazia o pai imediato (.recrie-product-gallery) ter altura intrínseca
   = altura do wrap, anulando o sticky. Forçamos stretch só nessa coluna. */
@media (min-width: 1024px) {
	.recrie-single-product > .grid > .recrie-product-gallery {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	.recrie-product-gallery-wrap {
		position: sticky;
		top: 112px;
	}
}

/* ════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — Coluna direita redesenhada (2026-05-24)
   Flat, sem cards, tipografia Belleza, espaçamento generoso.
   Sobrescreve YITH WAPO inline styles e markup customizado do tema.
   ════════════════════════════════════════════════════════════════ */

/* ───── Espaçamento vertical generoso entre seções ───── */
.recrie-product-summary {
	font-family: var(--font-body);
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.recrie-product-summary > * { margin: 0; }

/* Breadcrumb mantém compacto */
.recrie-product-summary .recrie-single-breadcrumb {
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

/* ───── Título ───── */
.recrie-product-summary .product_title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	line-height: var(--leading-snug);
	margin: 0;
}

/* ───── Preço + parcelamento ───── */
.recrie-product-summary p.price {
	font-family: var(--font-body);
	font-size: var(--text-h4);
	color: var(--color-text-strong);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.recrie-product-summary p.price .recrie-installments {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
}

/* ────────────────────────────────────────────────────────────────
   YITH WAPO — flat, sem cards
   Sobrescreve inline `background-color:#f2f2f2` e remove visual de card.
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary .yith-wapo-container {
	margin: 0;
	padding: 0;
	background: transparent !important;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.recrie-product-summary .yith-wapo-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Cada addon: tira o card cinza, deixa flat */
.recrie-product-summary .yith-wapo-addon {
	background: transparent !important;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Título do addon — compacto e Belleza */
.recrie-product-summary .yith-wapo-addon .addon-header {
	margin-bottom: var(--space-2);
}
.recrie-product-summary .wapo-addon-title {
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	color: var(--color-text);
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
}
.recrie-product-summary .wapo-addon-title span { color: inherit; }

/* Não exibe pseudo-toggle de "default-closed" (não usamos collapse nativo) */
.recrie-product-summary .yith-wapo-addon .options-container.default-closed {
	display: block !important;
}

/* Descrição interna do addon */
.recrie-product-summary .wapo-addon-description,
.recrie-product-summary .option-description {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-2);
	padding: 0;
}

/* Selects do YITH — flat, padding consistente, largura total */
.recrie-product-summary .yith-wapo-addon .options { width: 100% !important; }
.recrie-product-summary .yith-wapo-option-value,
.recrie-product-summary select.yith-wapo-option-value {
	width: 100% !important;
	max-width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	box-shadow: none;
	appearance: auto;
	transition: border-color var(--transition-base);
}
.recrie-product-summary .yith-wapo-option-value:focus,
.recrie-product-summary select.yith-wapo-option-value:focus {
	outline: none;
	border-color: var(--color-text-strong);
}

/* Inputs de texto (nome / profissão) — mesmo padrão */
.recrie-product-summary .yith-wapo-option .input-text-container input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	transition: border-color var(--transition-base);
}
.recrie-product-summary .yith-wapo-option .input-text-container input[type="text"]:focus {
	outline: none;
	border-color: var(--color-text-strong);
}
.recrie-product-summary .yith-wapo-option .label label {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	margin-bottom: var(--space-1);
	display: block;
}

/* ────────────────────────────────────────────────────────────────
   Size Toggle (substitui o <select> de Tamanho, gerado via JS)
   ──────────────────────────────────────────────────────────────── */
.recrie-size-toggle-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-size-toggle-label {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
}
.recrie-size-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.recrie-size-toggle__btn {
	min-width: 48px;
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-base);
}
.recrie-size-toggle__btn:hover {
	border-color: var(--color-text);
}
.recrie-size-toggle__btn[aria-pressed="true"] {
	background: var(--color-text-strong);
	color: var(--color-text-inverse);
	border-color: var(--color-text-strong);
}

/* O <select> original fica escondido visualmente, mas presente no DOM
   pra YITH calcular preço e enviar no POST. */
.recrie-size-toggle-wrap + .yith-wapo-addon-hidden-original > .options-container,
.yith-wapo-addon-hidden-original {
	display: none !important;
}

/* ────────────────────────────────────────────────────────────────
   Personalização — accordion único (JS embrulha addons em <details>)
   ──────────────────────────────────────────────────────────────── */
.recrie-personalization-accordion {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	overflow: hidden;
}
.recrie-personalization-accordion[open] {
	background: var(--color-bg-alt);
}
.recrie-personalization-accordion > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-strong);
	user-select: none;
}
.recrie-personalization-accordion > summary::-webkit-details-marker { display: none; }
.recrie-personalization-accordion > summary::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--color-text);
	border-bottom: 1.5px solid var(--color-text);
	transform: rotate(45deg);
	transition: transform var(--transition-base);
	flex-shrink: 0;
	margin-right: 4px;
}
.recrie-personalization-accordion[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: 4px;
}
.recrie-personalization-accordion__body {
	padding: 0 var(--space-4) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	border-top: 1px solid var(--color-border-light);
	padding-top: var(--space-4);
}

/* ────────────────────────────────────────────────────────────────
   Personalização — Wizard step-by-step
   Substitui o accordion. Cada addon = uma etapa, nav anterior/próximo.
   ──────────────────────────────────────────────────────────────── */
.recrie-personalization-wizard {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	/* overflow:hidden REMOVIDO pra permitir o zoom dos brasões extrapolar
	   a coluna. Border-radius dos cantos preservado via header/footer abaixo. */
}

.recrie-wizard-header {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.recrie-wizard-title {
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-strong);
	margin: 0;
	font-weight: var(--font-regular);
}
.recrie-wizard-counter {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	letter-spacing: 0.5px;
}

.recrie-wizard-body {
	padding: var(--space-4);
}
/* Step inativo: NÃO usar display:none, senão o JS do YITH WAPO ignora
   os addons escondidos no cálculo do "Valor opções" (só soma o que
   está :visible). Posicionamos off-screen com dimensão real preservada
   pra YITH detectar via offsetWidth, mas o usuário não vê. */
.recrie-wizard-step[data-active="false"] {
	position: absolute;
	left: -99999px;
	top: 0;
	width: 100%;
	max-width: 1px;
	height: auto;
	overflow: hidden;
	visibility: visible;
	pointer-events: none;
	opacity: 0;
}

/* Step ativo: empilha addons com gap. Não use só margin no addon —
   alguns tipos do YITH (upload, select condicional) têm margin
   sobrescrita inline. Flex+gap resolve sem disputa de especificidade. */
.recrie-wizard-step[data-active="true"] {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	opacity: 1;
	pointer-events: auto;
	max-width: none;
	overflow: visible;
}
.recrie-wizard-step .yith-wapo-addon { margin: 0; }

/* "Tipos de arquivos aceitos..." e qualquer p.description do YITH:
   YITH usa max-height + overflow:auto no front-end, gerando uma
   scrollbar minúscula. Aqui liberamos a altura natural e damos
   estilo de texto auxiliar discreto. */
.recrie-wizard-step .yith-wapo-addon p.description,
.recrie-wizard-step .yith-wapo-addon .description {
	max-height: none !important;
	overflow: visible !important;
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: var(--text-small);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
}

/* Respiro extra entre o uploader e o próximo addon (quando há
   conditional logic mostrando outro campo em sequência, ex.
   "Onde deseja bordar sua logo?"). */
.recrie-wizard-step .yith-wapo-ajax-uploader {
	margin-bottom: var(--space-2);
}

.recrie-wizard-footer {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border-light);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	background: var(--color-bg);
}

.recrie-wizard-btn {
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-small);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-base);
}
.recrie-wizard-btn--prev {
	background: var(--color-bg-alt);
	color: var(--color-text);
	border: 1px solid var(--color-border-light);
}
.recrie-wizard-btn--prev:hover:not(:disabled) {
	border-color: var(--color-text-strong);
	color: var(--color-text-strong);
}
.recrie-wizard-btn--next {
	background: var(--color-text-strong);
	color: var(--color-text-inverse);
	border: 1px solid var(--color-text-strong);
}
.recrie-wizard-btn--next:hover:not(:disabled) {
	background: var(--color-neutral-800);
	border-color: var(--color-neutral-800);
}
.recrie-wizard-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Caixa de erro de validação (trava do carrinho) */
.recrie-cart-validation-error {
	margin: 0 0 var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: #FDECEC;
	border-left: 3px solid var(--color-error);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: var(--leading-snug);
}
.recrie-cart-validation-error strong {
	display: block;
	color: var(--color-error);
	margin-bottom: var(--space-1);
	font-weight: var(--font-medium);
}
.recrie-cart-validation-error__list {
	margin: var(--space-1) 0 0;
	padding-left: var(--space-5);
}
.recrie-cart-validation-error__list li {
	list-style: disc;
	color: var(--color-text);
}

/* ════════════════════════════════════════════════════════════════
   CART/CHECKOUT/ACCOUNT — Overrides do page.php
   O page.php aplica max-w-4xl (896px) e título "entry-header" duplicado.
   Aqui liberamos largura, escondemos título WP da página e neutralizamos
   estilos do .prose (Tailwind Typography) pra não bagunçar tipografia.
   ════════════════════════════════════════════════════════════════ */
/* Páginas Woo (cart/checkout/account) usam class .woocommerce-page-main
   no <main> via page.php condicional. Layout largo, sem max-w-4xl. */
.woocommerce-page-main {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

/* ════════════════════════════════════════════════════════════════
   CART PAGE — Layout custom Recrie (2026-05-24)
   2 colunas (itens + totais sticky), Belleza, tokens do tema.
   ════════════════════════════════════════════════════════════════ */
.recrie-cart {
	font-family: var(--font-body);
	color: var(--color-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4) var(--space-16);
}
.recrie-cart__title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-6);
}
/* 2 colunas no desktop: 65% itens + 35% totais sticky */
.recrie-cart__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.recrie-cart__items,
.recrie-cart__totals {
	min-width: 0;
}
@media (min-width: 1024px) {
	.recrie-cart__grid {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
		gap: var(--space-8);
		align-items: start;
	}
	.recrie-cart__totals {
		position: sticky;
		top: 112px;
	}
}

/* Container externo dos itens (border-radius unifica header + lista) */
.recrie-cart-items-wrap {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Cabeçalho de colunas — só ≥768px.
   Soma fixa enxuta + 1fr generoso pra info caber em 1-2 linhas. */
.recrie-cart-items-header {
	display: none;
}
@media (min-width: 768px) {
	.recrie-cart-items-header {
		display: grid;
		/* remove | thumb | info | preço | qty | subtotal */
		grid-template-columns: 32px 100px minmax(0, 1fr) 90px 110px 90px;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-bottom: 1px solid var(--color-border-light);
		font-family: var(--font-body);
		font-size: var(--text-small);
		color: var(--color-text-muted);
		font-weight: var(--font-medium);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.recrie-cart-items-header__product  { grid-column: 3; }
	.recrie-cart-items-header__price    { grid-column: 4; }
	.recrie-cart-items-header__qty      { grid-column: 5; text-align: center; }
	.recrie-cart-items-header__subtotal { grid-column: 6; text-align: right; }
}

/* Lista de itens */
.recrie-cart-items-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.recrie-cart-item {
	/* Mobile: grid simples — remove fica top-right, thumb à esquerda,
	   info + qty + subtotal empilhados na coluna 2 */
	display: grid;
	grid-template-columns: 90px 1fr auto;
	grid-template-areas:
		"thumb info     remove"
		"thumb price    price"
		"thumb qty      subtotal";
	gap: var(--space-2) var(--space-3);
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
	align-items: center;
}
.recrie-cart-item:last-child { border-bottom: 0; }

@media (min-width: 768px) {
	.recrie-cart-item {
		grid-template-columns: 32px 100px minmax(0, 1fr) 90px 110px 90px;
		grid-template-areas: "remove thumb info price qty subtotal";
		gap: var(--space-3);
		padding: var(--space-4);
		align-items: center;
	}
}

.recrie-cart-item__thumb { grid-area: thumb; }
.recrie-cart-item__thumb a,
.recrie-cart-item__thumb img {
	display: block;
	width: 100%;
}
.recrie-cart-item__thumb img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #fff;
	border-radius: var(--radius-sm);
}

.recrie-cart-item__info { grid-area: info; min-width: 0; }
.recrie-cart-item__name,
.recrie-cart h3.recrie-cart-item__name {
	font-family: var(--font-body) !important;
	font-size: var(--text-body) !important;
	color: var(--color-text-strong);
	margin: 0 0 var(--space-2) !important;
	font-weight: var(--font-medium) !important;
	line-height: var(--leading-snug) !important;
	word-break: normal;
	overflow-wrap: normal;
}
.recrie-cart-item__name a {
	color: inherit;
	text-decoration: none;
}
.recrie-cart-item__name a:hover {
	text-decoration: underline;
}
/* Meta YITH no carrinho — uma linha por variação, label+valor inline,
   sem stack vertical apertado. */
.recrie-cart-item__meta {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
}
.recrie-cart-item__meta dl,
.recrie-cart-item__meta dl.variation,
.recrie-cart-item__meta p {
	margin: 0;
	padding: 0;
}
.recrie-cart-item__meta dl.variation {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.recrie-cart-item__meta dl.variation > dt,
.recrie-cart-item__meta dl.variation > dd {
	display: inline;
	margin: 0;
	float: none;
	clear: none;
	width: auto;
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
}
.recrie-cart-item__meta dl.variation > dt {
	font-weight: var(--font-medium);
}
.recrie-cart-item__meta dl.variation > dt::after { content: " "; }
.recrie-cart-item__meta dl.variation > dd > p {
	display: inline;
	margin: 0;
}

/* Preço unitário (coluna nova, espelhando o site de produção) */
.recrie-cart-item__price {
	grid-area: price;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-strong);
	white-space: nowrap;
}

.recrie-cart-item__qty { grid-area: qty; }
.recrie-cart-item__qty .quantity {
	display: inline-flex;
	align-items: stretch;
	width: fit-content;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	overflow: hidden;
}
.recrie-cart-item__qty input.qty {
	width: 56px;
	min-height: 40px;
	text-align: center;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--font-body);
	-moz-appearance: textfield;
}
.recrie-cart-item__qty input.qty::-webkit-inner-spin-button,
.recrie-cart-item__qty input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.recrie-cart-item__subtotal {
	grid-area: subtotal;
	font-family: var(--font-body);
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
	text-align: right;
	white-space: nowrap;
}

/* Labels mobile (Preço:, Subtotal:) usando data-label */
@media (max-width: 767px) {
	.recrie-cart-item__price::before,
	.recrie-cart-item__subtotal::before {
		content: attr(data-label) ": ";
		color: var(--color-text-muted);
		font-weight: var(--font-regular);
		margin-right: var(--space-1);
	}
	.recrie-cart-item__price,
	.recrie-cart-item__subtotal {
		text-align: left;
		font-size: var(--text-small);
	}
	.recrie-cart-item__subtotal { text-align: right; }
}

.recrie-cart-item__remove {
	grid-area: remove;
	text-align: center;
}
.recrie-cart-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 20px;
	line-height: 1;
	background: transparent;
	transition: all var(--transition-base);
}
.recrie-cart-remove:hover {
	background: var(--color-bg);
	color: var(--color-error);
}

/* Cupom + atualizar — espelha o card de itens (mesma largura, padding interno) */
.recrie-cart-actions {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: stretch;
}
.recrie-cart-coupon {
	display: flex;
	gap: var(--space-3);
	flex: 1;
	min-width: 260px;
	align-items: stretch;
}
.recrie-cart-coupon__input {
	flex: 1;
	min-height: 48px;
	padding: 0 var(--space-5);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-full);
	background: var(--color-bg-alt);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
}
.recrie-cart-coupon__input::placeholder {
	color: var(--color-text-muted);
}
.recrie-cart-coupon__input:focus {
	outline: none;
	border-color: var(--color-text-strong);
}
.recrie-cart-coupon__btn {
	min-height: 48px;
	padding: 0 var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-medium);
	background: var(--color-text-strong);
	border: 1px solid var(--color-text-strong);
	color: var(--color-text-inverse);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition-base);
}
.recrie-cart-coupon__btn:hover {
	background: var(--color-neutral-800);
}

/* Botão "Atualizar" — secundário discreto */
.recrie-cart-update-btn {
	min-height: 48px;
	padding: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-small);
	background: transparent;
	border: 1px solid var(--color-border-light);
	color: var(--color-text);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-base);
}
.recrie-cart-update-btn:hover {
	border-color: var(--color-text-strong);
	color: var(--color-text-strong);
}

/* Coluna direita: totais */
.recrie-cart__totals .cart_totals {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	padding: var(--space-5);
}
.recrie-cart__totals .cart_totals h2 {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	color: var(--color-text-strong);
	font-weight: var(--font-regular);
	margin: 0 0 var(--space-4);
}
.recrie-cart__totals .shop_table,
.recrie-cart__totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}
.recrie-cart__totals .shop_table th,
.recrie-cart__totals .shop_table td {
	padding: var(--space-2) 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	border: 0;
	background: transparent;
}
.recrie-cart__totals .shop_table th {
	text-align: left;
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
}
.recrie-cart__totals .shop_table td {
	text-align: right;
	color: var(--color-text-strong);
}
.recrie-cart__totals .order-total th,
.recrie-cart__totals .order-total td {
	border-top: 1px solid var(--color-border-light);
	padding-top: var(--space-3);
	font-size: var(--text-h5);
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
}

/* Opções de frete (Sedex/Jadlog/Retirada) — radio à esquerda, label em
   linha natural, preço alinhado à direita. */
.recrie-cart__totals tr.shipping td ul#shipping_method,
.recrie-cart__totals ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-cart__totals ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: var(--leading-snug);
	word-break: normal;
	overflow-wrap: normal;
}
.recrie-cart__totals ul#shipping_method li input[type="radio"] {
	flex-shrink: 0;
	margin-top: 4px;
}
.recrie-cart__totals ul#shipping_method li label {
	flex: 1;
	margin: 0;
	cursor: pointer;
}
.recrie-cart__totals ul#shipping_method li label .amount {
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
	margin-left: var(--space-1);
}
/* Endereço "Entrega para X" e link "Mudar endereço" */
.recrie-cart__totals .woocommerce-shipping-destination {
	margin-top: var(--space-3);
	font-size: var(--text-small);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
}
.recrie-cart__totals .shipping-calculator-button {
	display: inline-block;
	margin-top: var(--space-1);
	color: var(--color-text-strong);
	text-decoration: underline;
	font-size: var(--text-small);
}

/* Cálculo de frete dentro do totais */
.recrie-cart__totals .shipping-calculator-form {
	margin-top: var(--space-2);
}
.recrie-cart__totals .shipping-calculator-form .form-row input,
.recrie-cart__totals .shipping-calculator-form .form-row select {
	width: 100%;
	min-height: 40px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	font-family: var(--font-body);
	font-size: var(--text-small);
}
.recrie-cart__totals .shipping-calculator-button {
	color: var(--color-text-strong);
	text-decoration: underline;
}

/* Botão "Ir para o checkout" — preto, full-width, sobrescreve cor roxa
   herdada de algum CSS Woo legado via !important. */
.recrie-cart__totals .wc-proceed-to-checkout {
	margin-top: var(--space-4);
	padding: 0;
}
.recrie-cart__totals .wc-proceed-to-checkout .button,
.recrie-cart__totals .wc-proceed-to-checkout a.button,
.recrie-cart__totals .checkout-button,
.recrie-cart__totals a.checkout-button.button,
.recrie-cart__totals .checkout-button.alt {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: var(--space-3) var(--space-6) !important;
	background: #7F54B3 !important;
	background-color: #7F54B3 !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: var(--radius) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-body) !important;
	font-weight: var(--font-bold) !important;
	letter-spacing: var(--tracking-button);
	text-decoration: none !important;
	text-align: center;
	text-transform: none !important;
	transition: background var(--transition-base);
	margin: 0 !important;
	box-shadow: none !important;
}
.recrie-cart__totals .wc-proceed-to-checkout .button:hover,
.recrie-cart__totals .checkout-button:hover {
	background: #6B4297 !important;
	color: #FFFFFF !important;
}

/* Esconde cross-sells na página de carrinho (pollui o totals) — global */
.recrie-cart .cross-sells,
body.woocommerce-cart .cross-sells,
.cart-collaterals > .cross-sells {
	display: none !important;
}

/* Defesa: largura do thumb travada mesmo se outro CSS tentar override */
.recrie-cart-item__thumb {
	width: 100px;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.recrie-cart-item__thumb { width: 110px; }
}
.recrie-cart-item__thumb img,
.recrie-cart-item__thumb a img {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #fff;
	border-radius: var(--radius-sm);
	display: block;
}

/* Notices do WC (cupom aplicado, etc) */
.recrie-cart .woocommerce-message,
.recrie-cart .woocommerce-info,
.recrie-cart .woocommerce-error {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--text-small);
	border-left-width: 3px;
	border-left-style: solid;
	background: var(--color-bg);
}
.recrie-cart .woocommerce-message { border-left-color: var(--color-success); }
.recrie-cart .woocommerce-info    { border-left-color: var(--color-info); }
.recrie-cart .woocommerce-error   { border-left-color: var(--color-error); }

/* Borda vermelha no addon-mãe pendente até o user responder */
.recrie-personalization-wizard .yith-wapo-addon.recrie-addon-error {
	outline: 2px solid var(--color-error);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Zoom hover em imagens dentro do wizard (brasões etc.) */
.recrie-personalization-wizard .yith-wapo-addon { overflow: visible; }
.recrie-personalization-wizard .title-image,
.recrie-personalization-wizard .yith-wapo-addon .image-container {
	overflow: visible;
}
.recrie-personalization-wizard .title-image img,
.recrie-personalization-wizard .yith-wapo-addon .image-container img {
	transition: transform 0.18s ease-out;
	will-change: transform;
}

/* ────────────────────────────────────────────────────────────────
   Tabela de Total (renderizada pelo YITH automaticamente)
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary #wapo-total-price-table {
	margin: 0;
}
.recrie-product-summary #wapo-total-price-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: var(--text-body);
}
.recrie-product-summary #wapo-total-price-table th {
	text-align: left;
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
	padding: var(--space-2) 0;
}
.recrie-product-summary #wapo-total-price-table td {
	text-align: right;
	color: var(--color-text-strong);
	padding: var(--space-2) 0;
}
.recrie-product-summary #wapo-total-price-table tr.wapo-total-order th,
.recrie-product-summary #wapo-total-price-table tr.wapo-total-order td {
	border-top: 1px solid var(--color-border-light);
	padding-top: var(--space-3);
	font-size: var(--text-h5);
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
}

/* ────────────────────────────────────────────────────────────────
   Quantity — sobrescreve utilities Tailwind do markup com tokens
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary .quantity.recrie-quantity {
	display: inline-flex;
	align-items: stretch;
	width: fit-content;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-alt);
}
.recrie-product-summary .recrie-qty-btn {
	width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-text);
	font-size: var(--text-h5);
	cursor: pointer;
	transition: background var(--transition-base);
}
.recrie-product-summary .recrie-qty-btn:hover {
	background: var(--color-bg);
}
.recrie-product-summary .recrie-qty-input {
	width: 56px;
	min-height: 44px;
	padding: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-left: 1px solid var(--color-border-light);
	border-right: 1px solid var(--color-border-light);
	-moz-appearance: textfield;
}
.recrie-product-summary .recrie-qty-input::-webkit-outer-spin-button,
.recrie-product-summary .recrie-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   Botão "Adicionar ao carrinho"
   Cor primária do tema (vinho — var(--color-primary)).
   Ícone injetado pelo JS dentro do botão.
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.recrie-product-summary .single_add_to_cart_button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 56px;
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	color: var(--color-text-inverse);
	background: var(--color-text-strong);
	border: 0;
	border-radius: var(--radius);
	box-shadow: none;
	cursor: pointer;
	text-transform: none;
	transition: background var(--transition-base);
}
.recrie-product-summary .single_add_to_cart_button.button.alt:hover,
.recrie-product-summary .single_add_to_cart_button.button.alt:focus {
	background: var(--color-neutral-800);
	color: var(--color-text-inverse);
}
.recrie-product-summary .single_add_to_cart_button svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Layout horizontal: quantity ao lado do botão em telas largas */
@media (min-width: 768px) {
	.recrie-product-summary form.cart .recrie-cart-row {
		display: flex;
		align-items: stretch;
		gap: var(--space-3);
	}
	.recrie-product-summary form.cart .recrie-cart-row .single_add_to_cart_button {
		flex: 1;
	}
}

/* ────────────────────────────────────────────────────────────────
   Shipping (CEP) placeholder do tema — flatten
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary ~ .recrie-single-shipping,
.recrie-product-summary .recrie-single-shipping,
.recrie-single-shipping {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-top: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-single-shipping__head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
}
.recrie-single-shipping__form {
	display: flex;
	gap: var(--space-2);
}
.recrie-single-shipping__input {
	flex: 1;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	transition: border-color var(--transition-base);
}
.recrie-single-shipping__input:focus {
	outline: none;
	border-color: var(--color-text-strong);
}
.recrie-single-shipping__btn {
	min-height: 44px;
	padding: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-medium);
	color: var(--color-text-inverse);
	background: var(--color-text-strong);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition-base);
}
.recrie-single-shipping__btn:hover:not(:disabled) {
	background: var(--color-neutral-800);
}
.recrie-single-shipping__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.recrie-single-shipping__result {
	font-size: var(--text-small);
	color: var(--color-text);
	margin-top: var(--space-2);
}

/* Frete real do plugin Correios (vem depois do form) */
.recrie-product-summary #woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
	margin-top: var(--space-2);
}

/* Aviso de teto de frete (R$100 máx) — JS controla visibility via [hidden]. */
.recrie-shipping-cap-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	background: var(--color-bg);
	border-left: 3px solid var(--color-text-strong);
	border-radius: var(--radius-sm);
	line-height: var(--leading-snug);
}
.recrie-shipping-cap-notice[hidden] { display: none; }
.recrie-shipping-cap-notice__icon {
	font-size: var(--text-h6);
	line-height: 1;
	flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   Meta (SKU + Categoria) — flat, fim de coluna
   ──────────────────────────────────────────────────────────────── */
.recrie-product-summary .recrie-single-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-light);
	font-size: var(--text-small);
	color: var(--color-text-muted);
}
.recrie-product-summary .recrie-single-meta__row { display: flex; gap: var(--space-2); }
.recrie-product-summary .recrie-single-meta__key { color: var(--color-text-muted); }
.recrie-product-summary .recrie-single-meta__val { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════
   MINI-CART DRAWER (gaveta lateral do carrinho)

   Estrutura:
     .recrie-mini-cart-wrapper  → host Alpine (x-data)
       .recrie-mini-cart-backdrop  → overlay escuro
       .recrie-mini-cart           → aside fixo à direita
         .recrie-mini-cart__header
         .recrie-mini-cart__content    → wrapper widget_shopping_cart_content
           ul.recrie-mini-cart__list
             li.recrie-mini-cart__item
           .recrie-mini-cart__footer  → subtotal + CTA
   ════════════════════════════════════════════════════════════════ */

.recrie-mini-cart-wrapper {
	font-family: var(--font-body);
	position: relative;
	z-index: 99998;
}

.recrie-mini-cart-backdrop {
	position: fixed;
	inset: 0;
	background: var(--color-overlay);
	z-index: 99998;
}

.recrie-mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 880px;
	background: var(--color-bg);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}

/* Transições Alpine (slide da direita) */
.recrie-mini-cart--enter        { transition: transform var(--transition-slow); }
.recrie-mini-cart--enter-start  { transform: translateX(100%); }
.recrie-mini-cart--enter-end    { transform: translateX(0); }
.recrie-mini-cart--leave        { transition: transform var(--transition-base); }
.recrie-mini-cart--leave-start  { transform: translateX(0); }
.recrie-mini-cart--leave-end    { transform: translateX(100%); }

/* Header */
.recrie-mini-cart__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-5) var(--space-5);
	border-bottom: 1px solid var(--color-border-light);
	flex-shrink: 0;
	min-height: 88px;
}
.recrie-mini-cart__title {
	line-height: 1.5;
	padding: 4px 0;
}
.recrie-mini-cart__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--color-bg);
	color: var(--color-accent);
	transition: background var(--transition-fast);
}
.recrie-mini-cart__back:hover { background: var(--color-bg-muted); }
.recrie-mini-cart__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	line-height: var(--leading-snug);
	flex: 1;
	text-align: right;
}

/* Content area (rolagem única no container; o grid de 2 colunas vive dentro) */
.recrie-mini-cart__content {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

/* Lista de itens — sem rolagem própria (rola junto com o content) */
.recrie-mini-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.recrie-mini-cart__item {
	display: flex !important;
	align-items: stretch !important;
	gap: var(--space-4);
	padding: var(--space-4) 40px var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-light);
	background: transparent;
	position: relative;
}
.recrie-mini-cart__item:last-child {
	border-bottom: 0;
}
.recrie-mini-cart__thumb {
	flex: 0 0 160px !important;
	width: 160px !important;
	height: auto !important;
	min-height: 200px !important;
	align-self: stretch !important;
	overflow: hidden;
	border-radius: var(--radius);
	background: transparent;
}
.recrie-mini-cart__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.recrie-mini-cart__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.recrie-mini-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.recrie-mini-cart__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.recrie-mini-cart__name {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	line-height: var(--leading-snug);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.recrie-mini-cart__meta {
	list-style: none;
	margin: var(--space-2) 0 var(--space-2);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.recrie-mini-cart__meta-line {
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	color: var(--color-text);
	line-height: var(--leading-snug);
	letter-spacing: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Compat com regras antigas (key/val agora não usadas) */
.recrie-mini-cart__meta-key {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: var(--font-medium);
}
.recrie-mini-cart__meta-val { color: var(--color-text); }
.recrie-mini-cart__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-1);
}

/* Quantity controls */
.recrie-mini-cart__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	overflow: hidden;
}
.recrie-mini-cart__qty-btn {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-body);
	line-height: 1;
	color: var(--color-text);
	background: var(--color-bg-alt);
	transition: background var(--transition-fast), color var(--transition-fast);
}
.recrie-mini-cart__qty-btn:hover:not(:disabled) {
	background: var(--color-accent);
	color: var(--color-accent-text);
}
.recrie-mini-cart__qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.recrie-mini-cart__qty-value {
	min-width: 32px;
	text-align: center;
	font-size: var(--text-small);
	color: var(--color-text);
	border-left: 1px solid var(--color-border-light);
	border-right: 1px solid var(--color-border-light);
	padding: 4px 0;
}
.recrie-mini-cart__line-total {
	font-size: var(--text-small);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	white-space: nowrap;
}

/* Remove (lixeira) */
.recrie-mini-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius);
	color: var(--color-text-muted);
	transition: color var(--transition-fast), background var(--transition-fast);
	flex-shrink: 0;
}
.recrie-mini-cart__remove:hover {
	color: var(--color-error);
	background: var(--color-bg);
}

/* Footer */
.recrie-mini-cart__footer {
	flex-shrink: 0;
	padding: var(--space-5);
	border-top: 1px solid var(--color-border-light);
	background: var(--color-bg-alt);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.recrie-mini-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.recrie-mini-cart__subtotal-label {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	color: var(--color-text-strong);
}
.recrie-mini-cart__subtotal-value {
	font-size: var(--text-h5);
	font-weight: var(--font-semibold);
	color: var(--color-text-strong);
}
.recrie-mini-cart__hint {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}
.recrie-mini-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-family: var(--font-display);
	font-size: var(--text-button);
	font-weight: var(--font-regular);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	border-radius: var(--radius);
	transition: background var(--transition-base);
	text-align: center;
}
.recrie-mini-cart__checkout:hover { background: var(--color-accent-hover); color: var(--color-accent-text); }

/* Estado vazio */
.recrie-mini-cart__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-8) var(--space-5);
	color: var(--color-text-muted);
	text-align: center;
}
.recrie-mini-cart__empty svg { color: var(--color-text-muted); }
.recrie-mini-cart__empty p {
	margin: 0;
	font-size: var(--text-body);
	color: var(--color-text);
}
.recrie-mini-cart__shop-link {
	display: inline-block;
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--color-accent);
	color: var(--color-accent-text);
	font-size: var(--text-button);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	border-radius: var(--radius);
	transition: background var(--transition-base);
}
.recrie-mini-cart__shop-link:hover { background: var(--color-accent-hover); color: var(--color-accent-text); }

/* Mobile: drawer 100% da tela (regras de item/thumb agora ficam nos blocos novos abaixo) */
@media (max-width: 480px) {
	.recrie-mini-cart { max-width: 100%; }
	.recrie-mini-cart__header,
	.recrie-mini-cart-coupon { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ──────────────────────────────────────────────────────────────
   CUPOM no mini-cart (accordion + cupons aplicados)
   ────────────────────────────────────────────────────────────── */
.recrie-mini-cart-coupon {
	padding: var(--space-3) var(--space-4);
	border-top: none;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	flex-shrink: 0;
}

/* Lista de cupons aplicados */
.recrie-mini-cart-coupon__applied {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.recrie-mini-cart-coupon__applied li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg);
	border-radius: var(--radius);
	font-size: var(--text-xs);
}
.recrie-mini-cart-coupon__code {
	flex: 1;
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: var(--font-medium);
}
.recrie-mini-cart-coupon__amount {
	color: var(--color-success);
	font-weight: var(--font-medium);
}
.recrie-mini-cart-coupon__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--color-text-muted);
	border-radius: var(--radius-full);
	transition: color var(--transition-fast), background var(--transition-fast);
}
.recrie-mini-cart-coupon__remove:hover {
	color: var(--color-error);
	background: var(--color-bg-muted);
}

/* Accordion */
.recrie-mini-cart-coupon__details { width: 100%; }
.recrie-mini-cart-coupon__details > summary { list-style: none; }
.recrie-mini-cart-coupon__details > summary::-webkit-details-marker { display: none; }
.recrie-mini-cart-coupon__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.recrie-mini-cart-coupon__chevron {
	transition: transform var(--transition-base);
	color: var(--color-text-muted);
}
.recrie-mini-cart-coupon__details[open] .recrie-mini-cart-coupon__chevron {
	transform: rotate(45deg);
}

/* Form */
.recrie-mini-cart-coupon__form {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-2);
}
.recrie-mini-cart-coupon__input {
	flex: 1;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	outline: none;
	transition: border-color var(--transition-fast);
}
.recrie-mini-cart-coupon__input:focus {
	border-color: var(--color-accent);
}
.recrie-mini-cart-coupon__apply {
	padding: var(--space-2) var(--space-4);
	background: var(--color-text-strong);
	color: var(--color-accent-text);
	font-family: var(--font-display);
	font-size: var(--text-button-sm);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	border-radius: var(--radius);
	transition: background var(--transition-fast);
}
.recrie-mini-cart-coupon__apply:hover:not(:disabled) {
	background: var(--color-accent);
}
.recrie-mini-cart-coupon__apply:disabled { opacity: 0.5; cursor: not-allowed; }

.recrie-mini-cart-coupon__error {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--color-error);
}
.recrie-mini-cart-coupon__error[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────
   FRETE no mini-cart (CEP + lista de métodos)
   ────────────────────────────────────────────────────────────── */
.recrie-mini-cart-shipping {
	padding: var(--space-4);
	border-top: none;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.recrie-mini-cart-shipping__cep-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.recrie-mini-cart-shipping__cep-label {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.recrie-mini-cart-shipping__cep-row {
	display: flex;
	gap: var(--space-2);
}

.recrie-mini-cart-shipping__cep-input {
	flex: 1;
	min-width: 0;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	outline: none;
	transition: border-color var(--transition-fast);
}
.recrie-mini-cart-shipping__cep-input:focus {
	border-color: var(--color-accent);
}

.recrie-mini-cart-shipping__cep-submit {
	padding: var(--space-2) var(--space-4);
	background: var(--color-text-strong);
	color: var(--color-accent-text);
	font-family: var(--font-display);
	font-size: var(--text-button-sm);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
	transition: background var(--transition-fast);
}
.recrie-mini-cart-shipping__cep-submit:hover:not(:disabled) {
	background: var(--color-accent);
}
.recrie-mini-cart-shipping__cep-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.recrie-mini-cart-shipping__cep-error {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-error);
}
.recrie-mini-cart-shipping__cep-error[hidden] { display: none; }

.recrie-mini-cart-shipping__package + .recrie-mini-cart-shipping__package {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--color-border-light);
}

.recrie-mini-cart-shipping__package-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-small);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.recrie-mini-cart-shipping__rates {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.recrie-mini-cart-shipping__rate label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}
.recrie-mini-cart-shipping__rate label:hover {
	border-color: var(--color-accent);
}
.recrie-mini-cart-shipping__rate input[type="radio"] {
	margin: 3px 0 0;
	flex-shrink: 0;
	accent-color: var(--color-accent);
	cursor: pointer;
}
.recrie-mini-cart-shipping__rate-label {
	flex: 1;
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: 1.4;
}
.recrie-mini-cart-shipping__rate-label .amount,
.recrie-mini-cart-shipping__rate-label bdi {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}

.recrie-mini-cart-shipping__no-rates {
	margin: 0;
	padding: var(--space-2) 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-style: italic;
}

/* Linhas extras no footer (Frete, Desconto, Total) */
.recrie-mini-cart__shipping-total,
.recrie-mini-cart__discount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--text-small);
}
.recrie-mini-cart__shipping-total-label,
.recrie-mini-cart__discount-label {
	color: var(--color-text-muted);
}
.recrie-mini-cart__shipping-total-value {
	color: var(--color-text);
	font-weight: var(--font-medium);
}
.recrie-mini-cart__discount-value {
	color: var(--color-success);
	font-weight: var(--font-medium);
}

.recrie-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-light);
}
.recrie-mini-cart__total-label {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	color: var(--color-text-strong);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.recrie-mini-cart__total-value {
	font-size: var(--text-h5);
	font-weight: var(--font-bold);
	color: var(--color-text-strong);
}

@media (max-width: 480px) {
	.recrie-mini-cart-shipping {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}

/* ──────────────────────────────────────────────────────────────
   LAYOUT 2 COLUNAS DO MINI-CART
   - Esquerda: lista de produtos + botão Finalizar Compra
   - Direita:  frete (CEP + opções) + cupom + totais
   ────────────────────────────────────────────────────────────── */
.recrie-mini-cart__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-5);
	align-items: start;
}

.recrie-mini-cart__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.recrie-mini-cart__col--products {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	padding: var(--space-4);
}

/* Lixeira fica fixa no canto superior direito do item — não interfere no grid */
.recrie-mini-cart__col--products .recrie-mini-cart__remove {
	position: absolute;
	top: var(--space-3);
	right: 0;
}

/* Botão Finalizar Compra: mesmo preto do header (#171717) */
.recrie-mini-cart__col--products .recrie-mini-cart__checkout {
	width: 100%;
	margin-top: var(--space-2);
	background: var(--color-text-strong);
	color: #FFFFFF;
}
.recrie-mini-cart__col--products .recrie-mini-cart__checkout:hover {
	background: #000000;
	color: #FFFFFF;
}

.recrie-mini-cart__col--summary {
	gap: var(--space-3);
}


/* Bloco de totais (subtotal, frete, desconto, total) — card branco no col direito */
.recrie-mini-cart__totals {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Item: imagem maior e info com mais respiro no novo layout */
.recrie-mini-cart__col--products .recrie-mini-cart__name {
	font-size: var(--text-body);
	-webkit-line-clamp: 3;
}
.recrie-mini-cart__col--products .recrie-mini-cart__row {
	margin-top: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────
   MOBILE / TABLET: empilha em uma coluna E reordena o fluxo
   ──────────────────────────────────────────────────────────────
   Ordem desejada (regra do cliente):
     1. Lista de produtos
     2. Frete (CEP + opções)
     3. Cupom
     4. Totais (subtotal/frete/desconto/total)
     5. Botão "Finalizar Compra" (sempre por último)

   Como o checkout vive DENTRO de __col--products no DOM, achatamos os dois
   containers de coluna com `display: contents` — os filhos se tornam
   irmãos diretos de __cols (agora flex) e podemos reordená-los com `order`.
   Bônus: o card de fundo dos produtos some no mobile, ficando mais arejado.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.recrie-mini-cart {
		max-width: 480px;
	}
	.recrie-mini-cart__cols {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-4);
	}
	.recrie-mini-cart__col--products,
	.recrie-mini-cart__col--summary {
		display: contents;
	}
	.recrie-mini-cart__col--products .recrie-mini-cart__list { order: 1; }
	.recrie-mini-cart__col--summary .recrie-mini-cart-shipping { order: 2; }
	.recrie-mini-cart__col--summary .recrie-mini-cart-coupon   { order: 3; }
	.recrie-mini-cart__col--summary .recrie-mini-cart__totals  { order: 4; }
	.recrie-mini-cart__col--products .recrie-mini-cart__checkout { order: 5; margin-top: var(--space-3); }

	.recrie-mini-cart__item {
		grid-template-columns: 120px minmax(0, 1fr);
		column-gap: var(--space-4);
	}
	.recrie-mini-cart__thumb {
		min-height: 140px;
	}
}

@media (max-width: 480px) {
	.recrie-mini-cart {
		max-width: 100%;
	}
	.recrie-mini-cart__cols {
		padding: var(--space-3);
		gap: var(--space-3);
	}
	.recrie-mini-cart__item {
		grid-template-columns: 100px minmax(0, 1fr);
		column-gap: var(--space-3);
		padding: var(--space-3) 36px var(--space-3) 0;
	}
	.recrie-mini-cart__thumb {
		min-height: 120px;
	}
}

/* ====================================================================
 * MY ACCOUNT — Login + Dashboard + Sidebar
 * Override completo dos templates WooCommerce (woocommerce/myaccount/).
 * Tokens: tudo via var(--color-*), var(--font-*), var(--space-*).
 * ==================================================================== */

/* Override de cor de acento APENAS dentro da página de conta:
   troca o vinho da marca pelo preto do menu (#171717) — consistência visual
   com o header/navigation. Todas as instâncias de var(--color-accent) abaixo
   resolvem pra preto sem precisar reescrever cada regra. */
.woocommerce-account {
	--color-accent:       var(--color-text-strong);
	--color-accent-hover: var(--color-text-pure);
	--color-accent-text:  var(--color-white);
}

/* ===== Wrapper geral da página de conta ===== */
.woocommerce-account .site-main,
.woocommerce-account #primary {
	background: var(--color-bg);
	padding: var(--space-12) 0;
}
/* Article wrapper do post — sem max-width fixo, ele só envolve */
.woocommerce-account article {
	max-width: none;
}
/* O shortcode WC gera 3 filhos diretos no .woocommerce:
   .woocommerce-notices-wrapper, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content
   Usando flex-wrap pra notices ocupar linha cheia e nav+content dividirem a linha de baixo. */
.woocommerce-account .woocommerce {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--space-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	align-items: flex-start;
}
.woocommerce-account .woocommerce-notices-wrapper {
	flex: 1 1 100%;
	max-width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 280px;
	max-width: 280px;
}
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0;
}
/* Página de login/cadastro não usa o layout 2 colunas (não tem nav) */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}

/* ===== AUTH (Login + Cadastro) ===== */
.recrie-account-auth {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) 0;
}
.recrie-account-auth-inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.recrie-account-auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}
.recrie-account-auth-grid--single {
	grid-template-columns: minmax(0, 460px);
	justify-content: center;
}

/* ===== Card (compartilhado entre auth + dashboard) ===== */
.recrie-account-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}
.recrie-account-card-title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-6) 0;
	text-align: center;
	line-height: var(--leading-snug);
}
.recrie-account-card-title-sm {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
	line-height: var(--leading-snug);
}

/* ===== Form ===== */
.recrie-account-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
}
.recrie-account-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-account-label {
	font-size: var(--text-small);
	font-weight: var(--font-medium);
	color: var(--color-text);
	font-family: var(--font-body);
}
.recrie-account-required {
	color: var(--color-accent);
	margin-left: 2px;
}
.recrie-account-input {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font-size: var(--text-body);
	font-family: var(--font-body);
	color: var(--color-text-strong);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-sizing: border-box;
	min-height: 48px;
}
.recrie-account-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.12);
}
.recrie-account-input::placeholder {
	color: var(--color-text-muted);
}

/* Row helper (lembrar de mim + esqueci a senha) */
.recrie-account-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.recrie-account-row-between {
	justify-content: space-between;
}
.recrie-account-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-small);
	color: var(--color-text);
	cursor: pointer;
}
.recrie-account-checkbox-input {
	width: 16px;
	height: 16px;
	accent-color: var(--color-accent);
	cursor: pointer;
}

/* ===== Botão primário ===== */
.recrie-account-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 14px 28px;
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition-fast), transform var(--transition-fast);
	width: 100%;
	min-height: 52px;
	text-decoration: none;
}
.recrie-account-btn-primary {
	background: var(--color-accent);
	color: var(--color-accent-text);
}
.recrie-account-btn-primary:hover {
	background: var(--color-accent-hover);
	color: var(--color-accent-text);
}
.recrie-account-btn-primary:active {
	transform: translateY(1px);
}
.recrie-account-btn-secondary {
	background: var(--color-bg-alt);
	color: var(--color-text-strong);
	border: 1px solid var(--color-border-light);
}
.recrie-account-btn-secondary:hover {
	background: var(--color-bg);
}

/* ===== Links/Helpers ===== */
.recrie-account-link {
	color: var(--color-accent);
	font-weight: var(--font-medium);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.recrie-account-link:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}
.recrie-account-link-muted {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	text-decoration: none;
}
.recrie-account-link-muted:hover {
	color: var(--color-accent);
}
.recrie-account-helper {
	margin: var(--space-3) 0 0 0;
	font-size: var(--text-small);
	color: var(--color-text-muted);
	text-align: center;
}
.recrie-account-helper-mobile {
	display: none;
}
.recrie-account-privacy {
	margin: var(--space-4) 0 0 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
	line-height: var(--leading-relaxed);
}
.recrie-account-empty {
	color: var(--color-text-muted);
	font-style: italic;
}

/* ===== Sidebar (Navigation) ===== */
.recrie-account-nav {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	position: sticky;
	top: var(--space-8);
}
.recrie-account-nav-header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-account-nav-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	flex-shrink: 0;
}
.recrie-account-nav-greet {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.recrie-account-nav-greet-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}
.recrie-account-nav-greet-name {
	font-size: var(--text-base);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recrie-account-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.recrie-account-nav-item {
	margin: 0;
	padding: 0;
}
.recrie-account-nav-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
	min-height: 44px;
	box-sizing: border-box;
}
.recrie-account-nav-link:hover {
	background: var(--color-bg);
	color: var(--color-accent);
}
.recrie-account-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}
.recrie-account-nav-link:hover .recrie-account-nav-icon {
	color: var(--color-accent);
}
.recrie-account-nav-item.is-active .recrie-account-nav-link,
.woocommerce-MyAccount-navigation li.is-active > a {
	background: rgba(23, 23, 23, 0.08);
	color: var(--color-accent);
	font-weight: var(--font-medium);
}
.recrie-account-nav-item.is-active .recrie-account-nav-icon {
	color: var(--color-accent);
}
.recrie-account-nav-item.woocommerce-MyAccount-navigation-link--customer-logout .recrie-account-nav-link {
	color: var(--color-text-muted);
}

/* ===== Conteúdo principal (cards do dashboard) ===== */
.recrie-account-content {
	min-width: 0;
}
.recrie-account-page-header {
	margin-bottom: var(--space-8);
}
.recrie-account-page-title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-2) 0;
	line-height: var(--leading-snug);
}
.recrie-account-page-subtitle {
	font-size: var(--text-body);
	color: var(--color-text-muted);
	margin: 0;
	line-height: var(--leading-relaxed);
}
.recrie-account-block {
	margin-bottom: var(--space-8);
}
.recrie-account-block-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.recrie-account-block-title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0;
	line-height: var(--leading-snug);
}

.recrie-account-card-info {
	padding: var(--space-6);
}
.recrie-account-card-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-account-card-row:first-child {
	padding-top: 0;
}
.recrie-account-card-row:last-of-type {
	border-bottom: 0;
}
.recrie-account-card-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}
.recrie-account-card-value {
	font-size: var(--text-body);
	color: var(--color-text-strong);
}
.recrie-account-card-actions {
	display: flex;
	gap: var(--space-5);
	padding-top: var(--space-4);
	margin-top: var(--space-2);
	border-top: 1px solid var(--color-border-light);
}

/* Grid de endereços (2 colunas) */
.recrie-account-address-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}
.recrie-account-address-grid .recrie-account-card {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.recrie-account-address {
	font-style: normal;
	color: var(--color-text);
	line-height: var(--leading-relaxed);
	font-size: var(--text-small);
	flex: 1;
}
.recrie-account-address-grid .recrie-account-card-actions {
	padding-top: var(--space-3);
	margin-top: auto;
	border-top: 1px solid var(--color-border-light);
}

/* ===== Tabelas e listas WC dentro do dashboard (orders, downloads) ===== */
.recrie-account-content .woocommerce-orders-table,
.recrie-account-content table.shop_table {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 var(--space-6) 0;
}
.recrie-account-content table.shop_table th {
	background: var(--color-bg);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-account-content table.shop_table td {
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
	color: var(--color-text);
	font-size: var(--text-small);
}
.recrie-account-content table.shop_table tr:last-child td {
	border-bottom: 0;
}
.recrie-account-content .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	color: var(--color-text-strong);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-button);
	text-decoration: none;
	transition: background var(--transition-fast);
	min-height: 36px;
}
.recrie-account-content .woocommerce-button:hover {
	background: var(--color-bg);
	color: var(--color-accent);
}

/* Forms padrão WC (edit-account, edit-address) — herdam estilo do form de auth */
.recrie-account-content form .woocommerce-form-row label,
.recrie-account-content form label {
	display: block;
	font-size: var(--text-small);
	font-weight: var(--font-medium);
	color: var(--color-text);
	margin-bottom: var(--space-2);
}
.recrie-account-content form input[type="text"],
.recrie-account-content form input[type="email"],
.recrie-account-content form input[type="tel"],
.recrie-account-content form input[type="password"],
.recrie-account-content form input[type="number"],
.recrie-account-content form select,
.recrie-account-content form textarea {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font-size: var(--text-body);
	font-family: var(--font-body);
	color: var(--color-text-strong);
	box-sizing: border-box;
	min-height: 48px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.recrie-account-content form input:focus,
.recrie-account-content form select:focus,
.recrie-account-content form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.12);
}
.recrie-account-content form .woocommerce-form-row {
	margin-bottom: var(--space-4);
}
.recrie-account-content .button,
.recrie-account-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: var(--color-accent);
	color: var(--color-accent-text);
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition-fast);
	min-height: 52px;
	text-decoration: none;
}
.recrie-account-content .button:hover,
.recrie-account-content button[type="submit"]:hover {
	background: var(--color-accent-hover);
	color: var(--color-accent-text);
}

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.woocommerce-account .woocommerce {
		gap: var(--space-6);
	}
	.recrie-account-nav {
		position: static;
	}
}
@media (max-width: 767px) {
	.woocommerce-account .site-main,
	.woocommerce-account #primary {
		padding: var(--space-8) 0;
	}
	.woocommerce-account .woocommerce {
		padding: 0 var(--space-4);
		gap: var(--space-4);
	}
	.recrie-account-auth-grid {
		grid-template-columns: 1fr;
	}
	.recrie-account-card {
		padding: var(--space-6);
	}
	.recrie-account-card-title {
		font-size: var(--text-h4);
	}
	.recrie-account-helper-mobile {
		display: block;
	}
	.recrie-account-page-title {
		font-size: var(--text-h3);
	}
	.recrie-account-block-title {
		font-size: var(--text-h5);
	}
	.recrie-account-address-grid {
		grid-template-columns: 1fr;
	}
	.recrie-account-nav {
		padding: var(--space-4);
	}
	.recrie-account-nav-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2);
	}
}
@media (max-width: 480px) {
	.recrie-account-nav-list {
		grid-template-columns: 1fr;
	}
}

/* ====================================================================
 * CHECKOUT — Step-by-step wizard + sidebar de resumo
 * Override do woocommerce/checkout/form-checkout.php.
 * Mantém identidade do tema (Belleza, preto do menu, tokens).
 * ==================================================================== */

/* Bloqueia background cinza herdado de outros wrappers */
.woocommerce-checkout .site-main,
.woocommerce-checkout #primary {
	background: var(--color-bg);
	padding: var(--space-12) 0;
}

/* Esconde o título duplicado da página WP ("Finalizar compra") — vamos
   mostrar o nosso próprio no header do wizard. */
.woocommerce-checkout .entry-header,
.woocommerce-checkout article > header.entry-header {
	display: none;
}

.recrie-checkout {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--space-6);
	font-family: var(--font-body);
}

/* ===== Header (título + stepper) ===== */
.recrie-checkout-header {
	margin-bottom: var(--space-8);
}
.recrie-checkout-title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-6) 0;
	line-height: var(--leading-snug);
	text-align: center;
}

.recrie-checkout-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 640px;
	margin: 0 auto;
}
.recrie-checkout-step-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	cursor: pointer;
	flex: 1;
	min-width: 0;
}
.recrie-checkout-step-indicator + .recrie-checkout-step-indicator::before {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border-light);
	margin-right: var(--space-3);
}
.recrie-checkout-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
	font-size: var(--text-small);
	flex-shrink: 0;
	transition: all var(--transition-fast);
}
.recrie-checkout-step-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.recrie-checkout-step-indicator.is-active .recrie-checkout-step-num {
	background: var(--color-text-strong);
	border-color: var(--color-text-strong);
	color: var(--color-white);
}
.recrie-checkout-step-indicator.is-active {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}
.recrie-checkout-step-indicator.is-completed .recrie-checkout-step-num {
	background: var(--color-text-strong);
	border-color: var(--color-text-strong);
	color: var(--color-white);
}
.recrie-checkout-step-indicator.is-completed .recrie-checkout-step-num::before {
	content: '✓';
	font-size: 14px;
}
.recrie-checkout-step-indicator.is-completed .recrie-checkout-step-num > * {
	display: none;
}

/* ===== Grid: wizard + sidebar ===== */
.recrie-checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: var(--space-8);
	align-items: start;
}

/* ===== Wizard (esquerda) ===== */
.recrie-checkout-wizard {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.recrie-checkout-wizard-header {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
}
.recrie-checkout-wizard-title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0;
	line-height: var(--leading-snug);
}
.recrie-checkout-wizard-counter {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	letter-spacing: 0.5px;
	flex-shrink: 0;
}
.recrie-checkout-wizard-body {
	padding: var(--space-6);
	min-height: 320px;
}
.recrie-checkout-step[data-active="false"],
.recrie-checkout-step[hidden] {
	display: none !important;
}
.recrie-checkout-step[data-active="true"] {
	display: block;
}
.recrie-checkout-section {
	margin-bottom: var(--space-4);
}
.recrie-checkout-section:last-child {
	margin-bottom: 0;
}
.recrie-checkout-review-title {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
}

/* ===== Footer (navegação) ===== */
.recrie-checkout-wizard-footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border-light);
	background: var(--color-bg);
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}
/* Botões do wizard já vêm com .recrie-wizard-btn (compartilhado) */
.recrie-checkout-wizard-footer .recrie-wizard-btn {
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
}

/* Override dos forms WC dentro do checkout pra herdar a identidade dos forms da conta */
.recrie-checkout input[type="text"],
.recrie-checkout input[type="email"],
.recrie-checkout input[type="tel"],
.recrie-checkout input[type="password"],
.recrie-checkout input[type="number"],
.recrie-checkout input[type="date"],
.recrie-checkout select,
.recrie-checkout textarea,
.recrie-checkout .select2-selection {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font-size: var(--text-body);
	font-family: var(--font-body);
	color: var(--color-text-strong);
	box-sizing: border-box;
	min-height: 48px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.recrie-checkout input:focus,
.recrie-checkout select:focus,
.recrie-checkout textarea:focus {
	outline: none;
	border-color: var(--color-text-strong);
	box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.12);
}
.recrie-checkout .form-row {
	margin: 0 0 var(--space-4) 0;
}
.recrie-checkout .form-row label {
	display: block;
	font-size: var(--text-small);
	font-weight: var(--font-medium);
	color: var(--color-text);
	margin-bottom: var(--space-2);
}
.recrie-checkout .form-row .required {
	color: var(--color-text-strong);
}
.recrie-checkout h3 {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
	padding: 0;
	border: 0;
}

/* Layout 2 colunas dentro do form de cobrança (first/last name etc.) */
.recrie-checkout .form-row-first,
.recrie-checkout .form-row-last {
	display: inline-block;
	width: calc(50% - var(--space-2));
	box-sizing: border-box;
}
.recrie-checkout .form-row-first {
	margin-right: var(--space-3);
}

/* Campo invalido */
.recrie-checkout .recrie-field-invalid,
.recrie-checkout input.recrie-field-invalid,
.recrie-checkout select.recrie-field-invalid {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(204, 24, 24, 0.12);
}

/* Banner de erro do step (validação de frete não selecionado, etc.) */
.recrie-checkout-step-error {
	display: none;
	margin: 0 var(--space-6) var(--space-4) var(--space-6);
	padding: var(--space-3) var(--space-4);
	background: #FDECEC;
	border-left: 3px solid var(--color-error);
	border-radius: var(--radius-sm);
	color: var(--color-error);
	font-size: var(--text-small);
	font-weight: var(--font-medium);
	line-height: var(--leading-snug);
}

/* Estado travado pelo CEP — visual de campo desabilitado/lock */
.recrie-checkout select.recrie-state-locked {
	background: var(--color-bg) !important;
	color: var(--color-text-muted) !important;
	cursor: not-allowed !important;
	pointer-events: none;
	opacity: 0.9;
}
.recrie-checkout .recrie-state-locked-s2 .select2-selection {
	background: var(--color-bg) !important;
	color: var(--color-text-muted) !important;
	cursor: not-allowed !important;
	border-color: var(--color-border-light) !important;
}
.recrie-checkout .recrie-state-locked-s2 .select2-selection__rendered {
	color: var(--color-text-muted) !important;
}
.recrie-checkout .recrie-state-locked-s2 .select2-selection__arrow {
	display: none;
}
.recrie-checkout .recrie-state-locked-s2 {
	pointer-events: none;
	position: relative;
}
.recrie-checkout .recrie-state-locked-s2::after {
	content: '🔒';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	pointer-events: none;
	opacity: 0.6;
}

/* Mensagens WC */
.recrie-checkout .woocommerce-error,
.recrie-checkout .woocommerce-info,
.recrie-checkout .woocommerce-message {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	margin: 0 0 var(--space-4) 0;
	list-style: none;
	font-size: var(--text-small);
}
.recrie-checkout .woocommerce-error {
	background: #FDECEC;
	border-left: 3px solid var(--color-error);
	color: var(--color-text);
}
.recrie-checkout .woocommerce-info,
.recrie-checkout .woocommerce-message {
	background: var(--color-bg);
	border-left: 3px solid var(--color-text-strong);
	color: var(--color-text);
}

/* Métodos de pagamento (step 3) */
.recrie-checkout #payment {
	background: transparent;
	border: 0;
}
.recrie-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-6) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	border: 0;
}
.recrie-checkout #payment ul.payment_methods li {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: 0;
	transition: border-color var(--transition-fast);
}
.recrie-checkout #payment ul.payment_methods li:has(input:checked),
.recrie-checkout #payment ul.payment_methods li.recrie-selected {
	border-color: var(--color-text-strong);
	background: var(--color-bg);
}
.recrie-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
	cursor: pointer;
	margin: 0;
}
.recrie-checkout #payment ul.payment_methods .payment_box {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--color-bg);
	border-radius: var(--radius-md);
	font-size: var(--text-small);
	color: var(--color-text);
}
.recrie-checkout #payment .place-order {
	padding: 0;
	background: transparent;
}
.recrie-checkout #place_order,
.recrie-checkout button#place_order {
	width: 100%;
	background: var(--color-text-strong);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-md);
	padding: 16px 28px;
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	cursor: pointer;
	min-height: 56px;
	transition: background var(--transition-fast);
	margin-top: var(--space-4);
}
.recrie-checkout #place_order:hover {
	background: var(--color-neutral-800);
}

/* Tabela de revisão do pedido (step 3) */
.recrie-checkout .shop_table {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 var(--space-4) 0;
	table-layout: fixed;
}
/* Coluna Produto: larga (1fr); Subtotal: fixo à direita */
.recrie-checkout .shop_table th:first-child,
.recrie-checkout .shop_table td:first-child {
	width: auto;
}
.recrie-checkout .shop_table th:last-child,
.recrie-checkout .shop_table td:last-child {
	width: 140px;
	text-align: right;
	white-space: nowrap;
	vertical-align: top;
}
.recrie-checkout .shop_table th,
.recrie-checkout .shop_table td {
	padding: var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
	text-align: left;
	font-size: var(--text-small);
	vertical-align: top;
}
.recrie-checkout .shop_table thead th {
	font-weight: var(--font-medium);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-xs);
	background: var(--color-bg);
}
/* Nome do produto + quantidade (badge inline ×N) */
.recrie-checkout .shop_table .product-name {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	line-height: var(--leading-snug);
}
.recrie-checkout .shop_table .product-name a {
	color: inherit;
	text-decoration: none;
}
.recrie-checkout .shop_table .product-name a:hover {
	color: var(--color-accent);
}
.recrie-checkout .shop_table .product-quantity {
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
	margin-left: var(--space-1);
}
/* Variações e addons: lista discreta abaixo do nome */
.recrie-checkout .shop_table .variation,
.recrie-checkout .shop_table dl.variation {
	margin: var(--space-2) 0 0 0;
	padding: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
}
.recrie-checkout .shop_table .variation dt,
.recrie-checkout .shop_table .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: var(--font-regular);
	color: var(--color-text-muted);
}
.recrie-checkout .shop_table .variation dt {
	font-weight: var(--font-medium);
}
.recrie-checkout .shop_table .variation dt::after {
	content: ' ';
}
.recrie-checkout .shop_table .variation dd::after {
	content: ' • ';
	color: var(--color-border);
	margin: 0 4px;
}
.recrie-checkout .shop_table .variation dd:last-child::after {
	content: '';
}
.recrie-checkout .shop_table .variation dd p {
	display: inline;
	margin: 0;
}
/* Subtotal alinhado no topo da linha pra ficar visualmente "ao lado do nome" */
.recrie-checkout .shop_table .product-total,
.recrie-checkout .shop_table td.product-total {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	font-size: var(--text-small);
}
/* tfoot (subtotal, frete, total) */
.recrie-checkout .shop_table tfoot th {
	background: transparent;
	color: var(--color-text);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--text-small);
	font-weight: var(--font-regular);
}
.recrie-checkout .shop_table tfoot td {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}
.recrie-checkout .shop_table tfoot tr:last-child th,
.recrie-checkout .shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	padding-top: var(--space-4);
}
/* Linha de frete no shop_table: a estrutura padrão (th + td estreito 140px)
   esmaga descrições longas. Forçar tr.shipping a `display: block` libera
   o td pra ocupar a largura total do box, alinhando a UL à esquerda. */
.recrie-checkout .shop_table tfoot tr.shipping {
	display: block;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-checkout .shop_table tfoot tr.shipping th,
.recrie-checkout .shop_table tfoot tr.shipping td {
	display: block;
	width: 100% !important;
	padding: 0;
	border-bottom: 0;
	text-align: left !important;
	white-space: normal !important;
	background: transparent;
}
.recrie-checkout .shop_table tfoot tr.shipping th {
	margin-bottom: var(--space-3);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	font-size: var(--text-small);
	text-transform: none;
	letter-spacing: 0;
}
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method li {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	text-align: left;
	font-weight: var(--font-regular);
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: var(--leading-snug);
}
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method label {
	flex: 1;
	margin: 0;
	cursor: pointer;
	color: var(--color-text);
	font-weight: var(--font-regular);
}
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method label .amount,
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method label strong {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	white-space: nowrap;
}
.recrie-checkout .shop_table tfoot tr.shipping ul#shipping_method input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
	accent-color: var(--color-text-strong);
}

/* Toggle positivo "Entregar no mesmo endereço de cobrança" — substitui
   visualmente o checkbox nativo do WC (#ship-to-different-address). */
.recrie-checkout #ship-to-different-address {
	display: none !important;
}
.recrie-same-address-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	margin: 0 0 var(--space-5) 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--text-small);
	color: var(--color-text-strong);
	transition: border-color var(--transition-fast), background var(--transition-fast);
}
.recrie-same-address-toggle:hover {
	border-color: var(--color-text-strong);
}
.recrie-same-address-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-text-strong);
	cursor: pointer;
	flex-shrink: 0;
}
.recrie-same-address-toggle:has(input:checked) {
	border-color: var(--color-text-strong);
	background: var(--color-bg-alt);
}

/* ===== Seletor de Forma de Entrega (step 2) ===== */
.recrie-step2-shipping {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-light);
}
.recrie-step2-shipping-title {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
}
.recrie-step2-shipping-empty {
	margin: 0;
	padding: var(--space-4);
	background: var(--color-bg);
	border: 1px dashed var(--color-border-light);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-style: italic;
}
ul.recrie-step2-shipping-methods,
.recrie-step2-shipping ul.recrie-step2-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.recrie-step2-shipping-option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}
.recrie-step2-shipping-option:hover {
	border-color: var(--color-text-strong);
}
.recrie-step2-shipping-option.is-selected,
.recrie-step2-shipping-option:has(input:checked) {
	border-color: var(--color-text-strong);
	background: var(--color-bg);
}
.recrie-step2-shipping-option input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
	accent-color: var(--color-text-strong);
	cursor: pointer;
}
.recrie-step2-shipping-option label {
	flex: 1;
	margin: 0;
	cursor: pointer;
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: var(--leading-relaxed);
	font-weight: var(--font-regular);
}
.recrie-step2-shipping-option label .amount,
.recrie-step2-shipping-option label strong {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}

/* Frete no order_review (Step 4): label do método pode ser MUITO longo
   ("Retirada no local - Rua Belo Horizonte, 198 São Mateus - Juiz de
   Fora, MG. Horário de funcionamento: Segunda a sexta..."). Em layout
   table-row + table-cell, a coluna .product-total fica estreita (~140px)
   e o texto quebra letra por letra. Solução: tr.shipping vira BLOCK
   ocupando 100% da largura, th rotula em cima, td libera o texto pra
   respirar com word-wrap normal em palavras. */
.recrie-checkout .shop_table tfoot tr.shipping {
	display: block;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-checkout .shop_table tfoot tr.shipping th,
.recrie-checkout .shop_table tfoot tr.shipping td {
	display: block;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border-bottom: 0 !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: normal;
	background: transparent;
}
.recrie-checkout .shop_table tfoot tr.shipping th {
	margin-bottom: var(--space-2);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	font-size: var(--text-small);
	text-transform: none;
	letter-spacing: 0;
}
.recrie-checkout .shop_table tfoot tr.shipping td {
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}
.recrie-shipping-chosen-label {
	color: var(--color-text);
}

/* ====================================================================
 * Sidebar — linha "Entrega" controlada por confirmação do usuário
 * ====================================================================
 * O backend (`recrie_block_shipping_auto_select`) impede que o WC
 * auto-selecione um método e some o frete no total. O JS revela esta
 * linha SOMENTE depois que o usuário clicar num radio no Step 3.
 * `hidden` é o estado inicial vindo do PHP; `shown` é setado no client. */
[data-recrie-shipping-row="hidden"] {
	display: none !important;
}
[data-recrie-shipping-row="shown"] {
	display: flex;
}

/* ====================================================================
 * THANK YOU / ORDER RECEIVED — Layout pós-checkout
 * Override do woocommerce/checkout/thankyou.php.
 * ==================================================================== */

.woocommerce-order-received .site-main,
.woocommerce-order-received #primary {
	background: var(--color-bg);
	padding: var(--space-12) 0;
}
/* Esconde título duplicado da página WP — vamos mostrar o nosso */
.woocommerce-order-received .entry-header,
.woocommerce-order-received article > header.entry-header {
	display: none;
}

.recrie-thankyou {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--space-6);
	font-family: var(--font-body);
}

/* ===== Cabeçalho de sucesso ===== */
.recrie-thankyou-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-10) auto;
	padding: 0 var(--space-4);
}
.recrie-thankyou-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-success);
	color: var(--color-white);
	margin: 0 auto var(--space-5) auto;
}
.recrie-thankyou-icon--failed {
	background: var(--color-error);
}
.recrie-thankyou-title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-3) 0;
	line-height: var(--leading-snug);
}
.recrie-thankyou-subtitle {
	font-size: var(--text-body);
	color: var(--color-text-muted);
	margin: 0;
	line-height: var(--leading-relaxed);
}
.recrie-thankyou-actions {
	margin: var(--space-6) 0 0 0;
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}
.recrie-thankyou-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	min-height: 52px;
	transition: background var(--transition-fast);
}
.recrie-thankyou-btn--primary {
	background: var(--color-text-strong);
	color: var(--color-white);
	border: 0;
}
.recrie-thankyou-btn--primary:hover {
	background: var(--color-neutral-800);
	color: var(--color-white);
}
.recrie-thankyou-btn--ghost {
	background: transparent;
	color: var(--color-text-strong);
	border: 1px solid var(--color-border-light);
}
.recrie-thankyou-btn--ghost:hover {
	border-color: var(--color-text-strong);
}

/* ===== Chips de resumo ===== */
.recrie-thankyou-summary {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
	margin: 0 0 var(--space-8) 0;
	padding: 0;
}
.recrie-thankyou-summary-item {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.recrie-thankyou-summary-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-weight: var(--font-medium);
}
.recrie-thankyou-summary-value {
	font-size: var(--text-small);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: var(--leading-snug);
}

/* ===== Cards (instruções de pagamento + detalhes) ===== */
.recrie-thankyou-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	margin-bottom: var(--space-6);
}
.recrie-thankyou-card:last-child {
	margin-bottom: 0;
}

/* Instruções de pagamento (Pix/Boleto) — geralmente o gateway injeta
   layout próprio (logo + steps + QR + código). Garantimos respiro,
   tipografia e que o QR não passe de 240px. */
.recrie-thankyou-payment h2,
.recrie-thankyou-payment h3 {
	font-family: var(--font-display);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
}
.recrie-thankyou-payment h2 { font-size: var(--text-h4); }
.recrie-thankyou-payment h3 { font-size: var(--text-h5); }
.recrie-thankyou-payment p {
	margin: 0 0 var(--space-3) 0;
	color: var(--color-text);
	line-height: var(--leading-relaxed);
}
.recrie-thankyou-payment img {
	max-width: 240px;
	height: auto;
}
.recrie-thankyou-payment ol,
.recrie-thankyou-payment ul {
	margin: 0 0 var(--space-4) 0;
	padding-left: var(--space-5);
	color: var(--color-text);
	line-height: var(--leading-relaxed);
}
.recrie-thankyou-payment button,
.recrie-thankyou-payment .button,
.recrie-thankyou-payment input[type="submit"] {
	background: var(--color-text-strong);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-md);
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition-fast);
}
.recrie-thankyou-payment button:hover,
.recrie-thankyou-payment .button:hover {
	background: var(--color-neutral-800);
	color: var(--color-white);
}
.recrie-thankyou-payment input[type="text"],
.recrie-thankyou-payment input[readonly] {
	width: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text);
	word-break: break-all;
}

/* ===== Detalhes do pedido (woocommerce_order_details_table) ===== */
.recrie-thankyou-details .woocommerce-order-details,
.recrie-thankyou-details .woocommerce-customer-details {
	margin: 0;
	padding: 0;
}
.recrie-thankyou-details .woocommerce-order-details + .woocommerce-customer-details,
.recrie-thankyou-details > * + * {
	margin-top: var(--space-8);
}
.recrie-thankyou-details h2,
.recrie-thankyou-details h3,
.recrie-thankyou-details .woocommerce-order-details__title,
.recrie-thankyou-details .woocommerce-column__title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-5) 0;
	line-height: var(--leading-snug);
}

/* Tabela de itens — mesma identidade do checkout review */
.recrie-thankyou-details .shop_table {
	width: 100%;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 var(--space-4) 0;
	background: var(--color-bg-alt);
	table-layout: fixed;
}
.recrie-thankyou-details .shop_table th:last-child,
.recrie-thankyou-details .shop_table td:last-child {
	width: 140px;
	text-align: right;
	white-space: nowrap;
	vertical-align: top;
}
.recrie-thankyou-details .shop_table th,
.recrie-thankyou-details .shop_table td {
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
	text-align: left;
	font-size: var(--text-small);
	vertical-align: top;
	color: var(--color-text);
}
.recrie-thankyou-details .shop_table thead th {
	background: var(--color-bg);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
}
.recrie-thankyou-details .shop_table .product-name {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	line-height: var(--leading-snug);
}
.recrie-thankyou-details .shop_table .product-name a {
	color: inherit;
	text-decoration: none;
}
.recrie-thankyou-details .shop_table .product-name a:hover {
	color: var(--color-text);
}
.recrie-thankyou-details .shop_table .product-quantity {
	color: var(--color-text-muted);
	font-weight: var(--font-regular);
	margin-left: var(--space-1);
}
.recrie-thankyou-details .shop_table .wc-item-meta,
.recrie-thankyou-details .shop_table dl.variation {
	margin: var(--space-2) 0 0 0;
	padding: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
	list-style: none;
}
/* Override pro novo .recrie-item-meta (cada addon em linha própria) */
.recrie-thankyou-details .shop_table .recrie-item-meta .recrie-item-meta__row {
	display: block;
	margin: 0 0 4px 0;
}
.recrie-thankyou-details .shop_table .wc-item-meta li:not(.recrie-item-meta__row),
.recrie-thankyou-details .shop_table dl.variation dt,
.recrie-thankyou-details .shop_table dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: var(--font-regular);
	color: var(--color-text-muted);
}
.recrie-thankyou-details .shop_table .wc-item-meta li strong,
.recrie-thankyou-details .shop_table dl.variation dt {
	font-weight: var(--font-medium);
}
.recrie-thankyou-details .shop_table .wc-item-meta li::after,
.recrie-thankyou-details .shop_table dl.variation dd::after {
	content: ' • ';
	color: var(--color-border);
	margin: 0 4px;
}
.recrie-thankyou-details .shop_table .wc-item-meta li:last-child::after,
.recrie-thankyou-details .shop_table dl.variation dd:last-child::after {
	content: '';
}
.recrie-thankyou-details .shop_table .wc-item-meta p,
.recrie-thankyou-details .shop_table dl.variation p {
	display: inline;
	margin: 0;
}
.recrie-thankyou-details .shop_table .product-total {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}
/* tfoot (subtotal, frete, total) */
.recrie-thankyou-details .shop_table tfoot th {
	background: transparent;
	color: var(--color-text);
	font-size: var(--text-small);
	font-weight: var(--font-regular);
	text-transform: none;
	letter-spacing: 0;
}
.recrie-thankyou-details .shop_table tfoot td {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	/* Permite que textos longos de Entrega/Pagamento quebrem em vez de estourar */
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: anywhere;
	width: auto !important;
	text-align: right;
}

/* Linha "Entrega" no tfoot: o th + td estreito esmaga o endereço completo.
   Forçar display:block libera o td a ocupar a largura inteira do card. */
.recrie-thankyou-details .shop_table tfoot tr.shipping,
.recrie-thankyou-details .shop_table tfoot tr.cart-shipping {
	display: block;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-thankyou-details .shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.shipping td,
.recrie-thankyou-details .shop_table tfoot tr.cart-shipping th,
.recrie-thankyou-details .shop_table tfoot tr.cart-shipping td {
	display: block;
	width: 100% !important;
	padding: 0;
	border-bottom: 0;
	text-align: left !important;
	white-space: normal !important;
	font-weight: var(--font-regular);
}
.recrie-thankyou-details .shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.cart-shipping th {
	margin-bottom: var(--space-2);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}
.recrie-thankyou-details .shop_table tfoot tr.shipping td,
.recrie-thankyou-details .shop_table tfoot tr.cart-shipping td {
	color: var(--color-text);
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
}

/* ===== Item meta (variações + addons YITH WAPO) — uma linha por addon =====
   Substitui o "wc-item-meta" default que renderiza tudo inline e fica confuso. */
.recrie-item-meta,
ul.recrie-item-meta {
	list-style: none !important;
	margin: var(--space-3) 0 0 0;
	padding: 0;
}
.recrie-item-meta__row {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
	margin: 0 0 4px 0;
	padding: 0;
}
.recrie-item-meta__row::before,
.recrie-item-meta__row::after {
	content: none !important;
}
.recrie-item-meta__key {
	font-weight: var(--font-medium);
	color: var(--color-text);
	margin-right: 4px;
}
.recrie-item-meta__value {
	color: var(--color-text-muted);
	word-break: break-word;
}
.recrie-item-meta__value p {
	display: inline;
	margin: 0;
}
.recrie-thankyou-details .shop_table tfoot tr:last-child th,
.recrie-thankyou-details .shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
}
/* Linha de frete dentro do tfoot (mesma técnica do checkout) */
.recrie-thankyou-details .shop_table tfoot tr.shipping {
	display: block;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-thankyou-details .shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.shipping td {
	display: block;
	width: 100% !important;
	padding: 0;
	border-bottom: 0;
	text-align: left !important;
	white-space: normal !important;
}
.recrie-thankyou-details .shop_table tfoot tr.shipping th {
	margin-bottom: var(--space-2);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}

/* Endereços (cobrança/entrega) — grid 2 colunas. !important pra vencer
   os floats/widths do CSS legado do WC (.col-1/.col-2 do col2-set). */
.recrie-thankyou-details .woocommerce-customer-details .woocommerce-columns,
.recrie-thankyou-details .woocommerce-customer-details .col2-set,
.recrie-thankyou-details .woocommerce-customer-details .addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--space-5) !important;
	width: 100% !important;
	float: none !important;
}
/* Anula clearfix antigo do WC que reservava espaço entre os floats */
.recrie-thankyou-details .woocommerce-customer-details .col2-set::before,
.recrie-thankyou-details .woocommerce-customer-details .col2-set::after,
.recrie-thankyou-details .woocommerce-customer-details .woocommerce-columns::before,
.recrie-thankyou-details .woocommerce-customer-details .woocommerce-columns::after {
	display: none !important;
	content: none !important;
}
.recrie-thankyou-details .woocommerce-customer-details .woocommerce-column,
.recrie-thankyou-details .woocommerce-customer-details .col-1,
.recrie-thankyou-details .woocommerce-customer-details .col-2 {
	background: var(--color-bg) !important;
	border: 1px solid var(--color-border-light) !important;
	border-radius: var(--radius-md) !important;
	padding: var(--space-5) !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box;
}
.recrie-thankyou-details .woocommerce-customer-details address {
	font-style: normal;
	color: var(--color-text);
	line-height: var(--leading-relaxed);
	font-size: var(--text-small);
	margin: 0;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
	.recrie-thankyou-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.woocommerce-order-received .site-main,
	.woocommerce-order-received #primary {
		padding: var(--space-8) 0;
	}
	.recrie-thankyou {
		padding: 0 var(--space-4);
	}
	.recrie-thankyou-title {
		font-size: var(--text-h3);
	}
	.recrie-thankyou-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.recrie-thankyou-card {
		padding: var(--space-5);
	}
	.recrie-thankyou-details .woocommerce-customer-details .woocommerce-columns,
	.recrie-thankyou-details .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr;
	}
	.recrie-thankyou-details .shop_table th:last-child,
	.recrie-thankyou-details .shop_table td:last-child {
		width: 100px;
	}
}
@media (max-width: 480px) {
	.recrie-thankyou-summary {
		grid-template-columns: 1fr;
	}
}

/* ===== Sidebar: resumo do pedido ===== */
.recrie-checkout-summary {
	position: sticky;
	top: var(--space-8);
}
.recrie-checkout-summary-inner {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.recrie-checkout-summary-title {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-4) 0;
	padding: 0 0 var(--space-3) 0;
	border-bottom: 1px solid var(--color-border-light);
}
.recrie-checkout-summary-items {
	list-style: none;
	margin: 0 0 var(--space-4) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-height: 320px;
	overflow-y: auto;
}
.recrie-checkout-summary-item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}
.recrie-checkout-summary-item-img {
	position: relative;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg);
}
.recrie-checkout-summary-item-img img,
.recrie-checkout-summary-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.recrie-checkout-summary-item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--color-text-strong);
	color: var(--color-white);
	font-size: 11px;
	font-weight: var(--font-medium);
	min-width: 20px;
	height: 20px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	line-height: 1;
}
.recrie-checkout-summary-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.recrie-checkout-summary-item-name {
	font-size: var(--text-small);
	color: var(--color-text);
	line-height: var(--leading-snug);
}
.recrie-checkout-summary-item-name a {
	color: inherit;
	text-decoration: none;
}
.recrie-checkout-summary-item-price {
	font-size: var(--text-small);
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
}

.recrie-checkout-summary-totals {
	margin: 0;
	padding: var(--space-4) 0 0 0;
	border-top: 1px solid var(--color-border-light);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-checkout-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	font-size: var(--text-small);
	color: var(--color-text);
	margin: 0;
}
.recrie-checkout-summary-row dt {
	font-weight: var(--font-regular);
}
.recrie-checkout-summary-row dd {
	margin: 0;
	font-weight: var(--font-medium);
	color: var(--color-text-strong);
}
.recrie-checkout-summary-row-total {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-light);
	font-size: var(--text-body);
}
.recrie-checkout-summary-row-total dt,
.recrie-checkout-summary-row-total dd {
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: var(--font-regular);
	color: var(--color-text-strong);
}
.recrie-checkout-summary-pending {
	color: var(--color-text-muted);
	font-style: italic;
	font-size: var(--text-xs);
}
.recrie-checkout-summary-row-coupon dd {
	color: var(--color-success);
}

/* Linha de Entrega quando tem múltiplas opções (radio buttons):
   empilha verticalmente pra cada opção respirar — descrições longas
   tipo "Retirada no local - Rua... Horário de funcionamento..." não
   ficam mais comprimidas em uma coluna estreita. */
.recrie-checkout-summary-row:has(ul#shipping_method),
.recrie-checkout-summary-row:has(.shipping_method) {
	flex-direction: column;
	align-items: stretch;
}
.recrie-checkout-summary-row ul#shipping_method,
.recrie-checkout-summary-row .woocommerce-shipping-methods {
	list-style: none;
	margin: var(--space-2) 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.recrie-checkout-summary-row ul#shipping_method li {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-small);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.recrie-checkout-summary-row ul#shipping_method input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
	accent-color: var(--color-text-strong);
}
.recrie-checkout-summary-row ul#shipping_method label {
	flex: 1;
	margin: 0;
	cursor: pointer;
	color: var(--color-text);
	font-weight: var(--font-regular);
}
.recrie-checkout-summary-row ul#shipping_method label strong,
.recrie-checkout-summary-row ul#shipping_method label .amount {
	color: var(--color-text-strong);
	font-weight: var(--font-medium);
	white-space: nowrap;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
	.recrie-checkout-grid {
		grid-template-columns: 1fr;
	}
	.recrie-checkout-summary {
		position: static;
		order: -1;
	}
}
@media (max-width: 767px) {
	.woocommerce-checkout .site-main,
	.woocommerce-checkout #primary {
		padding: var(--space-8) 0;
	}
	.recrie-checkout {
		padding: 0 var(--space-4);
	}
	.recrie-checkout-title {
		font-size: var(--text-h3);
	}
	.recrie-checkout-stepper {
		gap: 0;
	}
	.recrie-checkout-step-label {
		display: none;
	}
	.recrie-checkout-step-indicator + .recrie-checkout-step-indicator::before {
		margin-right: var(--space-2);
	}
	.recrie-checkout-wizard-body {
		padding: var(--space-4);
	}
	.recrie-checkout-wizard-header,
	.recrie-checkout-wizard-footer {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
	.recrie-checkout-wizard-title {
		font-size: var(--text-h5);
	}
	.recrie-checkout .form-row-first,
	.recrie-checkout .form-row-last {
		display: block;
		width: 100%;
		margin-right: 0;
	}
	.recrie-checkout-summary-inner {
		padding: var(--space-4);
	}
}
/* ====================================================================
 * Iteração 2026-05-27 (continuação)
 * ==================================================================== */

/* (1) Aviso "Obs: Prazo de confecção" entre o Adicionar ao carrinho e
   a Simulação de Frete na single product. Linha horizontal acima
   separando do botão (border-top), texto centralizado, font igual à do
   resto da sidebar de produto pra integrar visualmente. */
.recrie-product-summary .recrie-production-notice,
.recrie-single-product .recrie-production-notice {
	margin: var(--space-5) 0 var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border, #e5e5e5);
}
.recrie-product-summary .recrie-production-notice p,
.recrie-single-product .recrie-production-notice p {
	margin: 0;
	font-size: var(--text-body, 16px);
	color: var(--color-text-strong, #171717);
	line-height: var(--leading-snug, 1.4);
	text-align: left;
}
.recrie-product-summary .recrie-production-notice strong,
.recrie-single-product .recrie-production-notice strong {
	font-weight: 600;
	color: var(--color-text-strong, #171717);
}

/* (3) Cupom no order_review do checkout — link "[Remover]" estourava
   pra fora da célula (overflow horizontal). Permite quebra natural e
   coloca o link em uma quebra própria, alinhado à direita.  */
.recrie-checkout .shop_table tfoot tr.cart-discount td,
.woocommerce-checkout-review-order-table tr.cart-discount td {
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: normal;
	text-align: right;
	padding-right: var(--space-3);
}
.recrie-checkout .shop_table tfoot tr.cart-discount td .woocommerce-remove-coupon,
.woocommerce-checkout-review-order-table tr.cart-discount td .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 6px;
	white-space: nowrap;
	font-size: var(--text-xs, 13px);
}

/* (4) "Detalhes do pedido" no /pedido-recebido/ — linha Entrega ficava
   esmagada na coluna estreita TOTAL, quebrando palavra por palavra.
   Mesma estratégia do checkout: tr.shipping vira block, td ocupa 100%
   da largura e texto fica alinhado à esquerda com quebra normal. */
.woocommerce-order-details .shop_table tfoot tr.shipping,
.recrie-thankyou-details .shop_table tfoot tr.shipping {
	display: block;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-light, #e5e5e5);
}
.woocommerce-order-details .shop_table tfoot tr.shipping th,
.woocommerce-order-details .shop_table tfoot tr.shipping td,
.recrie-thankyou-details .shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.shipping td {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border-bottom: 0 !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: normal;
	background: transparent;
	font-weight: var(--font-regular, 400);
}
.woocommerce-order-details .shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.shipping th {
	margin-bottom: var(--space-2);
	color: var(--color-text-strong, #171717);
	font-weight: var(--font-medium, 500);
	font-size: var(--text-small, 14px);
}
.woocommerce-order-details .shop_table tfoot tr.shipping td,
.recrie-thankyou-details .shop_table tfoot tr.shipping td {
	color: var(--color-text, #404040);
	font-size: var(--text-small, 14px);
	line-height: var(--leading-relaxed, 1.6);
}

/* ====================================================================
 * Layout título + preço LADO A LADO no card de produto
 * ====================================================================
 * Referência do cliente: título à esquerda (cresce até 2 linhas) e
 * preço alinhado à direita com parcelas embaixo. Substitui o stacking
 * vertical que deixava muito espaço morto.
 *
 * Estrutura: <a><div.image/><div.info><h2/><div.price/></div></a>
 * .info é flex row; title e price ficam side-by-side.
 */
.recrie-loop-product-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-3, 12px);
	padding: var(--space-3, 12px) 0 0;
}
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: left;
}
.recrie-loop-product-info .recrie-loop-product-price {
	flex: 0 0 auto;
	margin: 0;
	text-align: right;
	white-space: normal;
}
/* Parcelas (linha abaixo do preço) também alinhadas à direita */
.recrie-loop-product-info .recrie-loop-product-price .recrie-installments,
.recrie-loop-product-info .recrie-installments {
	text-align: right;
	display: block;
}

@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: var(--space-3, 12px) 16px 0;
		gap: var(--space-2, 8px);
	}
}

/* Reset do padding-x interno dos filhos quando estão no wrapper .info:
   antes o padding 16px era em cada elemento; agora vem do wrapper. */
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info .recrie-loop-product-price,
.recrie-loop-product-info .recrie-installments {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ====================================================================
 * Card título+preço lado-a-lado — REFORÇO desktop
 * ====================================================================
 * Regras antigas pra .woocommerce-loop-product__title têm specificity
 * alta (li.product h2.woocommerce-loop-product__title = 0,0,2,1) que
 * vencia minhas regras .recrie-loop-product-info (0,0,2,0). Aqui uso
 * seletor com a mesma cascata pra garantir override em desktop também.
 */
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h2.recrie-loop-product-title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.recrie-loop-product-title {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.4;
}
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .price,
li.product .recrie-loop-product-info span.price {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
	white-space: normal;
}
.recrie-loop-product-info .recrie-loop-product-price .recrie-installments,
.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	text-align: right !important;
	display: block;
}

/* ====================================================================
 * Card .recrie-loop-product-info — replicação fiel da referência prod
 * ====================================================================
 * Reference shows:
 *   - Caixa cinza-clara abaixo da imagem com padding generoso
 *   - Título à esquerda em 2 linhas (fonte menor que antes)
 *   - Preço à direita em 1 linha + parcelas abaixo (cinza menor)
 *
 * Cobre h2 (single product loop) e h3 (carrossel da home).
 */
.recrie-loop-product-info {
	background: #f3f4f6;
	padding: 16px 20px;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 16px;
}

/* Título: fonte menor + máximo 2 linhas + esquerda */
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h3.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: #1f2937 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden;
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
}

/* Preço: rígido à direita */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #171717 !important;
	line-height: 1.3 !important;
}
.recrie-loop-product-info .recrie-loop-product-price .amount,
.recrie-loop-product-info .recrie-loop-product-price > .woocommerce-Price-amount,
.recrie-loop-product-info .recrie-loop-product-price bdi {
	color: #171717 !important;
	font-weight: 500 !important;
}

/* Parcelas embaixo do preço, fonte menor, cinza */
.recrie-loop-product-info .recrie-installments,
.recrie-loop-product-info .recrie-loop-product-price .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: block !important;
	text-align: right !important;
	font-size: 12px !important;
	color: #9ca3af !important;
	margin-top: 4px !important;
	padding: 0 !important;
	line-height: 1.3;
	font-weight: 400;
}

/* Mobile: ajusta padding lateral do card pra não colar nas bordas */
@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: 14px 16px;
		gap: 12px;
	}
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title {
		font-size: 14px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price {
		font-size: 15px !important;
	}
}

/* ====================================================================
 * Card de produto — ajuste FINAL após feedback do cliente
 * ====================================================================
 * Problema anterior: título "Touca Bandana Feminina Halloween" estava
 * cortando com "..." na primeira linha porque a fonte estava grande pro
 * espaço do card de carrossel. Solução: reduzir fonte, permitir título
 * em 2-3 linhas COMPLETAS sem reticências, dar mais espaço pra título
 * (flex grow maior) e price não quebra entre R$ e número.
 */
.recrie-loop-product-info {
	background: #f3f4f6;
	padding: 14px 16px !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 12px !important;
}

/* Título: SEM cortar com "...". 2-3 linhas com fonte pequena, hyphens
   nativo pra quebrar palavras longas (Bandana, Feminino). */
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h3.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	flex: 1 1 60% !important;
	min-width: 0;
	text-align: left !important;
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	/* tira clamp e overflow pra deixar título completo respirar */
	display: block !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
	overflow: visible !important;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Preço: alinhado direita, 1 linha. Parcelas quebram embaixo. */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #171717 !important;
	line-height: 1.3 !important;
	white-space: normal !important;
}
.recrie-loop-product-info .recrie-loop-product-price > .woocommerce-Price-amount,
.recrie-loop-product-info .recrie-loop-product-price .amount,
.recrie-loop-product-info .recrie-loop-product-price bdi {
	white-space: nowrap; /* "R$32,90" não quebra entre $ e número */
}

.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: block !important;
	text-align: right !important;
	font-size: 11px !important;
	color: #9ca3af !important;
	margin-top: 3px !important;
	padding: 0 !important;
	line-height: 1.3;
	font-weight: 400;
}

@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: 12px 14px !important;
		gap: 10px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title {
		font-size: 13px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price {
		font-size: 14px !important;
	}
	.recrie-loop-product-info .recrie-installments {
		font-size: 10.5px !important;
	}
}

/* ====================================================================
 * Card de produto — LAYOUT VERTICAL (ajuste pedido pelo cliente)
 * ====================================================================
 * Decisão final do cliente: título COMPLETO (sem cortar, sem hifenizar)
 * em cima, preço + parcelas embaixo. Stack vertical resolve quebra de
 * palavra que aparecia com layout side-by-side em cards estreitos.
 */
.recrie-loop-product-info {
	background: #f3f4f6 !important;
	padding: 14px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px !important;
}

.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h3.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	text-align: left !important;
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	/* título INTEIRO, quebrando só entre palavras inteiras */
	display: block !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
	overflow: visible !important;
	white-space: normal !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}

.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	flex: 0 0 auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #171717 !important;
	line-height: 1.3 !important;
}
.recrie-loop-product-info .recrie-loop-product-price > .woocommerce-Price-amount,
.recrie-loop-product-info .recrie-loop-product-price .amount,
.recrie-loop-product-info .recrie-loop-product-price bdi {
	white-space: nowrap;
}

.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: block !important;
	text-align: left !important;
	font-size: 11.5px !important;
	color: #9ca3af !important;
	margin-top: 4px !important;
	padding: 0 !important;
	line-height: 1.3;
	font-weight: 400;
}

@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: 12px 14px !important;
		gap: 6px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title {
		font-size: 14px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price {
		font-size: 14px !important;
	}
}

/* ====================================================================
 * Preço + parcelas STACK VERTICAL — regra obrigatória do cliente
 * ====================================================================
 * "Parcelamento sempre abaixo do preço total, nunca quebrar".
 * Forçando flex column no container do preço, R$ fica em cima e parcelas
 * sempre embaixo, alinhados à esquerda. Sobrescreve qualquer flex/inline
 * herdado de plugins de parcelas.
 */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 2px !important;
	width: 100% !important;
}
.recrie-loop-product-info .recrie-loop-product-price > *,
li.product .recrie-loop-product-info .recrie-loop-product-price > * {
	display: block !important;
	width: auto !important;
	text-align: left !important;
}
.recrie-loop-product-info .recrie-loop-product-price > br {
	display: none !important;
}
.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	font-size: 11.5px !important;
	color: #9ca3af !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
	font-weight: 400;
	float: none !important;
}

/* Centralizar preço + parcelamento (teste de layout) */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	align-items: center !important;
	text-align: center !important;
}
.recrie-loop-product-info .recrie-loop-product-price > *,
li.product .recrie-loop-product-info .recrie-loop-product-price > * {
	text-align: center !important;
}
.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	text-align: center !important;
}

/* ====================================================================
 * Card produto — bloco TÍTULO + bloco PREÇO com altura reservada
 * ====================================================================
 * Regras finais do cliente:
 *  - Tudo à ESQUERDA
 *  - Bloco do título com altura mínima fixa (reserva 3 linhas) — assim
 *    todos os cards têm o preço na MESMA altura, independente do tamanho
 *    do nome do produto.
 *  - Bloco do preço separado, distância fixa do título.
 *  - Título mais perto da imagem (padding-top reduzido).
 */
.recrie-loop-product-info {
	background: #f3f4f6 !important;
	padding: 10px 16px 14px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 0 !important;
}

/* BLOCO TÍTULO — altura reservada de 3 linhas pra alinhar preços
   entre cards mesmo com nomes de tamanhos diferentes. */
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h3.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	min-height: 3.9em !important; /* 3 linhas reservadas */
	width: 100% !important;
	flex: 0 0 auto !important;
	text-align: left !important;
	font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
	display: block !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
	overflow: visible !important;
	white-space: normal !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}

/* BLOCO PREÇO — começa sempre na mesma altura entre cards graças à
   reserva acima. Preço em cima, parcelas embaixo, ambos à esquerda. */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 2px !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #171717 !important;
	line-height: 1.3 !important;
}
.recrie-loop-product-info .recrie-loop-product-price > * {
	display: block !important;
	text-align: left !important;
	width: auto !important;
}
.recrie-loop-product-info .recrie-loop-product-price > br {
	display: none !important;
}
.recrie-loop-product-info .recrie-loop-product-price > .woocommerce-Price-amount,
.recrie-loop-product-info .recrie-loop-product-price .amount,
.recrie-loop-product-info .recrie-loop-product-price bdi {
	white-space: nowrap;
	color: #171717 !important;
	font-weight: 500 !important;
}

.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	font-size: 11.5px !important;
	color: #9ca3af !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
	font-weight: 400;
	float: none !important;
}

@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: 8px 14px 12px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title {
		font-size: 14px !important;
		min-height: 3.9em !important;
		margin: 0 0 8px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price {
		font-size: 14px !important;
	}
}

/* ====================================================================
 * Ajuste fino do card — feedback iteração final
 * ====================================================================
 *  - padding-top do bloco info: 5px (metade) → título mais perto da imagem
 *  - min-height do título: 2.6em (2 linhas reservadas, era 3)
 *  - margin-bottom do título: 4px (era 10px) → preço mais perto
 *  - preço e parcelamento na MESMA linha (flex row em vez de column)
 */
.recrie-loop-product-info {
	padding: 5px 16px 12px !important;
}
.recrie-loop-product-info .recrie-loop-product-title,
.recrie-loop-product-info .woocommerce-loop-product__title,
.recrie-loop-product-info h2.woocommerce-loop-product__title,
.recrie-loop-product-info h3.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title {
	min-height: 2.6em !important;
	margin: 0 0 4px !important;
}

/* Preço + parcelas MESMA LINHA — flex row com gap */
.recrie-loop-product-info .recrie-loop-product-price,
li.product .recrie-loop-product-info .recrie-loop-product-price {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: flex-start !important;
	gap: 8px !important;
}
.recrie-loop-product-info .recrie-loop-product-price > * {
	display: inline-block !important;
	width: auto !important;
}
.recrie-loop-product-info .recrie-installments,
li.product .recrie-loop-product-info .recrie-installments {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.recrie-loop-product-info {
		padding: 4px 14px 10px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title {
		min-height: 2.6em !important;
		margin: 0 0 4px !important;
	}
}

/* Mobile: fontes maiores no card de produto + gap menor entre blocos */
@media (max-width: 767px) {
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title,
	.recrie-loop-product-info h2.woocommerce-loop-product__title,
	.recrie-loop-product-info h3.woocommerce-loop-product__title {
		font-size: 16px !important;
		min-height: 2.6em !important;
		margin: 0 0 2px !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price {
		font-size: 16px !important;
	}
	.recrie-loop-product-info .recrie-installments {
		font-size: 13px !important;
	}
}

/* Mobile: fonte DOBRADA (specificity reforçada pra vencer regras antigas) */
@media (max-width: 767px) {
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title,
	.recrie-loop-product-info h2.woocommerce-loop-product__title,
	.recrie-loop-product-info h3.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
	.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title,
	body .recrie-loop-product-info .recrie-loop-product-title {
		font-size: 28px !important;
		line-height: 1.2 !important;
		min-height: 2.4em !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price,
	li.product .recrie-loop-product-info .recrie-loop-product-price,
	body .recrie-loop-product-info .recrie-loop-product-price {
		font-size: 26px !important;
		line-height: 1.2 !important;
	}
	.recrie-loop-product-info .recrie-installments,
	li.product .recrie-loop-product-info .recrie-installments,
	body .recrie-loop-product-info .recrie-installments {
		font-size: 18px !important;
		line-height: 1.2 !important;
	}
}

/* Mobile: fonte reduzida pra título de 4 palavras caber em 1 linha */
@media (max-width: 767px) {
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title,
	.recrie-loop-product-info h2.woocommerce-loop-product__title,
	.recrie-loop-product-info h3.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
	.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title,
	body .recrie-loop-product-info .recrie-loop-product-title {
		font-size: 18px !important;
		line-height: 1.25 !important;
		min-height: 2.5em !important;
	}
	.recrie-loop-product-info .recrie-loop-product-price,
	li.product .recrie-loop-product-info .recrie-loop-product-price,
	body .recrie-loop-product-info .recrie-loop-product-price {
		font-size: 18px !important;
		line-height: 1.25 !important;
	}
	.recrie-loop-product-info .recrie-installments,
	li.product .recrie-loop-product-info .recrie-installments,
	body .recrie-loop-product-info .recrie-installments {
		font-size: 13px !important;
		line-height: 1.25 !important;
	}
}

/* Mobile: reduz min-height do título (~metade) → preço cola mais perto */
@media (max-width: 767px) {
	.recrie-loop-product-info .recrie-loop-product-title,
	.recrie-loop-product-info .woocommerce-loop-product__title,
	.recrie-loop-product-info h2.woocommerce-loop-product__title,
	.recrie-loop-product-info h3.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h2.woocommerce-loop-product__title,
	li.product .recrie-loop-product-info h3.woocommerce-loop-product__title,
	.swiper-slide .recrie-loop-product-info h3.woocommerce-loop-product__title,
	body .recrie-loop-product-info .recrie-loop-product-title {
		min-height: 1.25em !important;
		margin: 0 0 1px !important;
	}
}

/* Mobile: reduz espaço entre card de produto e botão "Ver Todos" */
@media (max-width: 767px) {
	.recrie-product-grid .recrie-grid-footer {
		margin-top: 12px !important;
	}
	.recrie-loop-product {
		padding-bottom: 8px !important;
	}
}

/* ====================================================================
 * Detalhes do pedido — linha "Entrega" funde th+td em bloco único
 * ====================================================================
 * Tabela: .woocommerce-table.shop_table.order_details
 * Antes: th "Entrega:" estreito à esquerda + td comprimido à direita.
 * Agora: bloco único largo — "Entrega:" em cima + texto justificado
 * preenchendo toda a largura embaixo.
 */
.woocommerce-table.order_details tfoot tr.shipping,
table.woocommerce-table--order-details tfoot tr.shipping,
.woocommerce-order-details .order_details tfoot tr.shipping {
	display: block !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--color-border-light, #e5e5e5) !important;
}
.woocommerce-table.order_details tfoot tr.shipping th,
.woocommerce-table.order_details tfoot tr.shipping td,
table.woocommerce-table--order-details tfoot tr.shipping th,
table.woocommerce-table--order-details tfoot tr.shipping td,
.woocommerce-order-details .order_details tfoot tr.shipping th,
.woocommerce-order-details .order_details tfoot tr.shipping td {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	font-weight: 400;
}
.woocommerce-table.order_details tfoot tr.shipping th,
table.woocommerce-table--order-details tfoot tr.shipping th,
.woocommerce-order-details .order_details tfoot tr.shipping th {
	margin: 0 0 6px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #171717 !important;
	text-align: left !important;
}
.woocommerce-table.order_details tfoot tr.shipping td,
table.woocommerce-table--order-details tfoot tr.shipping td,
.woocommerce-order-details .order_details tfoot tr.shipping td {
	text-align: justify !important;
	text-align-last: left !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #1f2937 !important;
	hyphens: none !important;
}

/* ====================================================================
 * BRUTE FORCE: linha Entrega na tabela order details vira bloco único
 * ====================================================================
 * Seletor pesado com html body + table + tfoot pra vencer qualquer outra
 * regra com !important. Cobre todas as classes possíveis: shop_table,
 * order_details, woocommerce-table, etc.
 */
html body table.shop_table tfoot tr.shipping,
html body table.order_details tfoot tr.shipping,
html body table.woocommerce-table tfoot tr.shipping {
	display: block !important;
	width: 100% !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid #e5e5e5 !important;
	box-sizing: border-box !important;
}
html body table.shop_table tfoot tr.shipping > th,
html body table.shop_table tfoot tr.shipping > td,
html body table.order_details tfoot tr.shipping > th,
html body table.order_details tfoot tr.shipping > td,
html body table.woocommerce-table tfoot tr.shipping > th,
html body table.woocommerce-table tfoot tr.shipping > td {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	box-sizing: border-box !important;
	text-align: left !important;
	float: none !important;
	vertical-align: top !important;
}
html body table.shop_table tfoot tr.shipping > th,
html body table.order_details tfoot tr.shipping > th,
html body table.woocommerce-table tfoot tr.shipping > th {
	margin-bottom: 6px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #171717 !important;
}
html body table.shop_table tfoot tr.shipping > td,
html body table.order_details tfoot tr.shipping > td,
html body table.woocommerce-table tfoot tr.shipping > td {
	text-align: justify !important;
	text-align-last: left !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #1f2937 !important;
	font-weight: 400 !important;
	hyphens: none !important;
}

/* Override final pra td:last-child que tinha width:140px herdado.
   Specificity batida com .recrie-thankyou-details prefix + :last-child. */
.recrie-thankyou-details table.shop_table tfoot tr.shipping th,
.recrie-thankyou-details table.shop_table tfoot tr.shipping td,
.recrie-thankyou-details table.shop_table tfoot tr.shipping th:last-child,
.recrie-thankyou-details table.shop_table tfoot tr.shipping td:last-child,
.recrie-thankyou-details .shop_table tfoot tr.shipping th:last-child,
.recrie-thankyou-details .shop_table tfoot tr.shipping td:last-child {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	box-sizing: border-box !important;
	vertical-align: top !important;
	float: none !important;
	font-weight: 400;
}
.recrie-thankyou-details table.shop_table tfoot tr.shipping {
	display: block !important;
	width: 100% !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid #e5e5e5 !important;
	box-sizing: border-box !important;
}
.recrie-thankyou-details table.shop_table tfoot tr.shipping th,
.recrie-thankyou-details .shop_table tfoot tr.shipping th:last-child {
	margin-bottom: 6px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #171717 !important;
	text-align: left !important;
}
.recrie-thankyou-details table.shop_table tfoot tr.shipping td,
.recrie-thankyou-details .shop_table tfoot tr.shipping td:last-child {
	text-align: justify !important;
	text-align-last: left !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #1f2937 !important;
	hyphens: none !important;
}