/**
 * OREM USA — modo de destino (Fase 7). Reemplaza a usa-barra.css.
 *
 * Mapa de z-index del sitio, medido antes de elegir los de aquí:
 *   4          botón de WhatsApp (class-wp-menu-css-js-manager.php)
 *   20         sticky add-to-cart de CommerceKit (producto.css:402)
 *   99999999   .variations_form.cart.commercekit_sticky-atc ≤641px
 *   2147483000 banner de consentimiento (consent.js) — el techo
 * La hoja va en 2147482000: por encima de todo lo del PDP, por debajo
 * del consentimiento (que es legal y manda).
 *
 * Toda regla que cambia `display` lleva su guardia `[hidden]` — en
 * producción `display:grid/flex` le gana a `[hidden]` y la UI oculta se
 * pinta sola (lección documentada en el banner de consentimiento).
 */

/* ───────────────────────────────────────────────────────────────
 *  FRANJA DE MODO (topbar)
 * ─────────────────────────────────────────────────────────────── */

.orem-usa-franja {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 36px;
	padding: 6px 12px;
	background: var( --orem-burgundy, #6b1d33 );
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}

.orem-usa-franja[hidden] {
	display: none !important;
}

.orem-usa-franja__texto {
	font-weight: 600;
}

/* Las banderas son <img>, no emoji: Windows no trae los glifos de los
   indicadores regionales y Chrome pintaba las dos letras ("US", "MX") en una
   cajita. Ver class-wc-orem-usa-bandera.php. */
.orem-bandera {
	display: inline-block;
	vertical-align: -0.12em;
}

.orem-usa-franja__bandera {
	margin-right: 2px;
}

/* Versión corta bajo 400px -- "Envío a EE. UU. · USD" + el botón
   "Cambiar" no caben en una sola línea en un iPhone SE/mini. */
.orem-usa-franja__texto--corto {
	display: none;
}

@media ( max-width: 400px ) {
	.orem-usa-franja__texto--largo {
		display: none;
	}
	.orem-usa-franja__texto--corto {
		display: inline;
	}
}

/* Fondo SÓLIDO, no un contorno translúcido: sobre el burdeos de la
   franja un botón transparente con borde al 55% se lee lavado, y el
   reset de botones del tema además le mete su propio fondo oscuro.
   Mismo patrón que arregló el botón "No, envío a México": color plano de
   la paleta + appearance:none para ganarle al tema (la especificidad se
   sube anidando bajo .orem-usa-franja). */
.orem-usa-franja .orem-usa-franja__cambiar {
	-webkit-appearance: none;
	appearance: none;
	background: var( --orem-champagne, #e8d8c5 );
	border: 1.5px solid var( --orem-champagne, #e8d8c5 );
	border-radius: 999px;
	box-shadow: none;
	color: var( --orem-burgundy, #6b1d33 );
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 14px;
	text-decoration: none;
}

.orem-usa-franja .orem-usa-franja__cambiar:hover,
.orem-usa-franja .orem-usa-franja__cambiar:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var( --orem-burgundy, #6b1d33 );
}

/* En modo US la promo escalonada no aplica: está calibrada en pesos y
   para envíos mexicanos. */
body.orem-modo-us .orem-promo-topbar {
	display: none !important;
}

/* El topbar NATIVO del tema (el que se ve cuando la promo escalonada no
   está corriendo) NO se oculta aquí: en modo US lo quita PHP
   (`WC_Orem_USA_Header::quitar_topbar_nativo`), porque este archivo no
   siempre llega — WP Rocket puede servir una copia de used-CSS generada
   con el HTML mexicano, donde nada de esto existe. Estructura en PHP,
   apariencia en CSS. */

/* ───────────────────────────────────────────────────────────────
 *  PÍLDORA (sustituye al widget de Aelia -- Fase 7b)
 * ─────────────────────────────────────────────────────────────── */

/* Mismo tamaño de bandera que el widget que reemplaza, para que el
   hueco del topbar no salte -- 16px en la promo escalonada
   (descuentos-escalonados.css:106-142), 22px en el topbar nativo móvil
   (shoptimizer-child-theme/style.css:778-836). */
.orem-usa-pill {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 5px;
	padding: 2px 4px;
}

.orem-usa-pill:hover,
.orem-usa-pill:focus-visible {
	opacity: 0.75;
}

/* Medidas fijas, no `width:auto`: mientras la imagen no ha cargado, `auto`
 * depende del tamaño intrínseco y la píldora cambiaba de ancho al llegar.
 * Coinciden con el `width`/`height` que declara el <img> (18x13 para un alto
 * de 13) -- si dejan de coincidir, `contain` la encaja sin deformarla pero
 * queda aire alrededor. */
.orem-usa-pill__bandera {
	display: block;
	width: 18px;
	height: 13px;
	object-fit: contain;
}

.orem-usa-pill__moneda {
	font-size: 12px;
	letter-spacing: 0.02em;
}

.orem-usa-pill__caret {
	font-size: 9px;
	opacity: 0.7;
}

/* ───────────────────────────────────────────────────────────────
 *  HOJA DE DESTINO
 * ─────────────────────────────────────────────────────────────── */

.orem-usa-sheet {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.35 );
}

.orem-usa-sheet[hidden] {
	display: none !important;
}

.orem-usa-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 20px 18px calc( 18px + env( safe-area-inset-bottom ) );
	box-shadow: 0 -8px 32px rgba( 0, 0, 0, 0.18 );
}

.orem-usa-sheet__cerrar {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #6a6a6a;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 4px 8px;
	position: absolute;
	right: 8px;
	top: 8px;
}

.orem-usa-sheet__titulo {
	font-size: 19px;
	margin: 4px 28px 14px 0;
}

.orem-usa-sheet__opciones {
	display: grid;
	gap: 10px;
}

.orem-usa-sheet__opcion {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: var( --orem-silk, #f3e3d8 );
	border: 1.5px solid transparent;
	border-radius: var( --orem-radius, 12px );
	box-shadow: none;
	color: #2b2b2b;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px;
	text-align: left;
	/* Sin esto un mobile browser puede esperar ~300ms por si viene un
	   segundo tap (zoom) antes de disparar el click -- el mismo retraso
	   que se sentía como "no responde". */
	touch-action: manipulation;
	transition: opacity 0.15s ease;
	width: 100%;
}

.orem-usa-sheet__opcion:hover,
.orem-usa-sheet__opcion:focus-visible {
	background: var( --orem-champagne, #e8d8c5 );
	border-color: var( --orem-burgundy, #6b1d33 );
	color: #2b2b2b;
}

/* Feedback inmediato al elegir: la confirmación con el servidor tarda lo
   que tarde un request de WordPress (nunca instantáneo) -- sin esto el
   clic se sentía "muerto" durante esa espera. La opción elegida queda
   marcada, la otra se atenúa, y el cursor dice "espera". */
.orem-usa-sheet__opcion:disabled {
	cursor: wait;
	opacity: 0.55;
}

.orem-usa-sheet--cargando .orem-usa-sheet__cerrar {
	visibility: hidden;
}

/* Sin medidas aquí: el <img> ya trae las suyas (30x22) y va dentro de un
   flex row con `gap`, así que no hay nada que reservar. */
.orem-usa-sheet__bandera {
	flex: none;
}

.orem-usa-sheet__texto {
	display: block;
}

.orem-usa-sheet__texto strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.orem-usa-sheet__texto small {
	color: #5a5a5a;
	display: block;
	font-size: 12px;
	line-height: 1.4;
}

.orem-usa-sheet__ayuda {
	color: #5a5a5a;
	font-size: 12.5px;
	line-height: 1.5;
	margin: 14px 0 0;
}

.orem-usa-sheet__pie {
	color: #8a8a8a;
	font-size: 11.5px;
	margin: 6px 0 0;
}

/* Mientras la hoja está abierta, nada compite con ella en el borde
   inferior: ni el sticky add-to-cart ni el botón de WhatsApp. */
body.orem-usa-sheet-abierta #cgkit-mobile-commercekit-sticky-atc,
body.orem-usa-sheet-abierta .commercekit_sticky-atc,
body.orem-usa-sheet-abierta .button-whatsapp {
	display: none !important;
}

@media ( min-width: 641px ) {
	.orem-usa-sheet {
		align-items: center;
	}

	.orem-usa-sheet__panel {
		border-radius: var( --orem-radius, 14px );
		padding-bottom: 20px;
	}
}

/* ───────────────────────────────────────────────────────────────
 *  BADGE DEL LOOP (class-wc-orem-usa-badge.php)
 * ─────────────────────────────────────────────────────────────── */

.ckit-badge-usa {
	display: none;
}

body.orem-dest-us .ckit-badge-usa[hidden],
body.orem-dest-us .ckit-badge-usa {
	display: inline-block;
	background-color: var( --orem-champagne, #e8d8c5 );
	color: #2b2b2b;
}

/* ───────────────────────────────────────────────────────────────
 *  PDP (class-wc-orem-usa-pdp.php + usa-pdp-aviso.js)
 * ─────────────────────────────────────────────────────────────── */

.orem-usa-pdp-aviso {
	margin: 10px 0;
	padding: 10px 14px;
	border-radius: var( --orem-radius, 8px );
	background: var( --orem-silk, #f3e3d8 );
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.5;
}

.orem-usa-pdp-aviso[hidden] {
	display: none !important;
}

.orem-usa-pdp-aviso a {
	color: var( --orem-burgundy, #6b1d33 );
	font-weight: 600;
}

/* Panel del producto que no se envía a EE. UU. */
.orem-usa-pdp-panel {
	background: var( --orem-silk, #f3e3d8 );
	border-radius: var( --orem-radius, 10px );
	margin: 16px 0;
	padding: 16px;
}

.orem-usa-pdp-panel[hidden] {
	display: none !important;
}

.orem-usa-pdp-panel__titulo {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
}

.orem-usa-pdp-panel__texto {
	color: #4a4a4a;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 12px;
}

.orem-usa-pdp-panel__acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
}

.orem-usa-pdp-panel__cta {
	background: var( --orem-burgundy, #6b1d33 );
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	text-decoration: none;
}

.orem-usa-pdp-panel__cta:hover,
.orem-usa-pdp-panel__cta:focus-visible {
	background: #571727;
	color: #fff;
}

.orem-usa-link {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var( --orem-burgundy, #6b1d33 );
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
}

/* Sugerencias ("Lo que sí te llevas hoy") */
.orem-usa-sugerencias {
	margin: 20px 0;
}

.orem-usa-sugerencias__titulo {
	font-size: 15px;
	margin: 0 0 10px;
}

/* Línea de envío en un PDP elegible */
.orem-usa-pdp-envio {
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0;
}

.orem-usa-pdp-envio a {
	color: var( --orem-burgundy, #6b1d33 );
	font-weight: 600;
}

/* Nota de moneda bajo el precio, solo en modo US */
.orem-usa-nota-precio {
	color: #6a6a6a;
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

/* Un producto no elegible no se puede comprar: fuera todos los caminos
   de compra, incluidos los flotantes de CommerceKit y los express. */
body.orem-usa-no-elegible #cgkit-mobile-commercekit-sticky-atc,
body.orem-usa-no-elegible .commercekit_sticky-atc,
body.orem-usa-no-elegible .shoptimizer-sticky-add-to-cart,
body.orem-usa-no-elegible .wc-stripe-product-checkout-container,
body.orem-usa-no-elegible .wcpay-payment-request-wrapper {
	display: none !important;
}

/* Red de seguridad: tarjetas de producto no comprables en EE. UU. dentro
   de cualquier carrusel (relacionados, upsells, "también compraron").
   Ver class-wc-orem-usa-redirect.php::clase_tarjeta(). */
body.orem-modo-us li.product.orem-usa-oculto,
body.orem-modo-us .product.orem-usa-oculto {
	display: none !important;
}

/* ───────────────────────────────────────────────────────────────
 *  GRIDS DE PRODUCTO -- shortcodes de la landing en Elementor
 *  (Fase 7c: [orem_usa_productos], class-wc-orem-usa-catalogo.php)
 * ─────────────────────────────────────────────────────────────── */

.orem-usa-productos .products.orem-usa-catalogo__grid {
	display: grid;
	gap: 24px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.orem-usa-productos--1 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.orem-usa-productos--2 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orem-usa-productos--3 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orem-usa-productos--4 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orem-usa-productos--5 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.orem-usa-productos--6 .products.orem-usa-catalogo__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media ( max-width: 900px ) {
	.orem-usa-productos .products.orem-usa-catalogo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.orem-usa-productos__vacio {
	background: var( --orem-silk, #f3e3d8 );
	border-radius: var( --orem-radius, 10px );
	color: #4a4a4a;
	font-size: 14px;
	padding: 20px;
}

.orem-usa-productos__aviso {
	background: var( --orem-silk, #f3e3d8 );
	border-radius: var( --orem-radius, 10px );
	font-size: 14px;
	margin-bottom: 24px;
	padding: 12px 16px;
}

/* Viñetas de confianza del hero -- Fase 7c, sembradas dentro del diseño
   de Elementor (landing-estados-unidos.json). Mismo look que las de la
   Fase 7 (`orem-usa-catalogo__confianza`), con su propio nombre porque
   viven en un widget de texto libre, no en el contenedor del shortcode
   completo. */
.orem-usa-confianza-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.orem-usa-confianza-lista li {
	background: var( --orem-silk, #f3e3d8 );
	border-radius: 999px;
	color: #4a4a4a;
	font-size: 13.5px;
	padding: 6px 14px;
}

@media ( max-width: 640px ) {
	.orem-usa-confianza-lista li {
		flex: 1 1 calc( 50% - 9px );
		font-size: 13px;
		text-align: center;
	}
}