/**
 * Culture Racing — Página de tienda (/tienda/)
 *
 * Estilos de la página /tienda/ y sus secciones decorativas. Se carga
 * ÚNICAMENTE en tienda (enqueue condicional en functions.php). Los bloques
 * funcionales (toolbar, grid, drawer, carrusel, categorías destacadas) son
 * widgets del Zenth Toolkit y traen su propio CSS scoped.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Variables + contenedor → .cr-shop-page (:root local) / .cr-shop-inner
 *   §2  Hero de tienda         → .cr-shop-hero (+ breadcrumbs/eyebrow/título)
 *   §3  Trust strip            → .cr-trust-strip
 *   §4  Banda de marcas        → .cr-brands
 *   §5  Help CTA               → .cr-help-cta ("¿No encuentras lo que buscas?")
 *   §6  Placeholder            → .cr-shop-placeholder
 *   §7  Responsive             → TODOS los @media de tamaño consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1024 (tablet) · 768 (tablet-chico) · 480 (mobile-small)
 *   Todos son @media de tamaño (max-width). No hay media de accesibilidad.
 *   Viven en §7, ordenados de más ancho a más angosto (1024 → 768 → 480).
 * ─────────────────────────────────────────────────────────────────────────
 * CONVENCIONES
 *   - Todas las clases arrancan con `cr-shop-` o con un sustantivo del
 *     componente (`cr-trust-strip`, `cr-brands`, `cr-help-cta`).
 *   - El rojo del módulo es #E8001D (no la variable --cr-color-primary del
 *     sitio, que actualmente vale #c00000). Si en el futuro se unifica la
 *     paleta a #E8001D global, podemos limpiar.
 *   - Textos secundarios usan rgba(255,255,255,0.7) para consistencia.
 *   - El padding lateral sigue --cr-container-pad del global. El max-width
 *     interno es 1280px (más estrecho que el del sitio, para que respire).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · VARIABLES + CONTENEDOR
   ═══════════════════════════════════════════════════════════════════════ */

.cr-shop-page {
	/* Rojo del módulo — siempre #E8001D acá, no la variable
	   global del sitio (que es #c00000). */
	--cr-shop-red: #E8001D;
	--cr-shop-red-hover: #ff1a36;
	--cr-shop-red-dark: #b8000f;

	/* Tonos de fondo para alternar secciones sin romper la
	   oscuridad de marca. Sube de tono A → B → C según importancia. */
	--cr-shop-bg-a: #000000;
	--cr-shop-bg-b: #0a0a0a;
	--cr-shop-bg-c: #141414;

	/* Tonos de tarjetas y bordes oscuros. */
	--cr-shop-card-bg: #1a1a1a;
	--cr-shop-card-bg-hover: #242424;
	--cr-shop-border: rgba(255, 255, 255, 0.08);
	--cr-shop-border-hover: rgba(255, 255, 255, 0.15);

	/* Tipografías derivadas de las globales. Defaults seguros
	   por si las variables globales no existieran. */
	--cr-shop-font-display: var(--cr-font-display, 'Super Brigade', Impact, sans-serif);
	--cr-shop-font-heading: var(--cr-font-heading, 'Bebas Neue', sans-serif);
	--cr-shop-font-body: var(--cr-font-body, 'Montserrat', sans-serif);

	/* Contenedor del módulo tienda. */
	--cr-shop-container: 1280px;
	--cr-shop-pad-x: clamp(16px, 4vw, 48px);

	/* Color base del módulo. */
	background-color: var(--cr-shop-bg-a);
	color: #ffffff;
}


.cr-shop-inner {
	width: 100%;
	max-width: var(--cr-shop-container);
	margin: 0 auto;
	padding-left: var(--cr-shop-pad-x);
	padding-right: var(--cr-shop-pad-x);
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HERO DE TIENDA — .cr-shop-hero
   ═══════════════════════════════════════════════════════════════════════ */

.cr-shop-hero {
	background-color: var(--cr-shop-bg-a) !important;
	padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 80px) 0;
	position: relative;
	overflow: hidden;
}

.cr-shop-hero .cr-shop-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

/* Breadcrumbs — links pequeños arriba del título */
.cr-shop-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cr-shop-font-body);
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

.cr-shop-breadcrumbs a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 200ms ease;
}

.cr-shop-breadcrumbs a:hover {
	color: var(--cr-shop-red);
}

.cr-shop-breadcrumbs .sep {
	opacity: 0.4;
	font-size: 12px;
}

.cr-shop-breadcrumbs .current {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

/* Eyebrow rojo — "Tienda Online" */
.cr-shop-hero .cr-shop-eyebrow,
.cr-shop-hero .cr-shop-eyebrow .elementor-heading-title {
	color: var(--cr-shop-red) !important;
	font-family: var(--cr-shop-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Título principal h1 */
.cr-shop-hero .cr-shop-title,
.cr-shop-hero .cr-shop-title .elementor-heading-title {
	font-family: var(--cr-shop-font-display) !important;
	font-size: clamp(40px, 6vw, 88px) !important;
	font-weight: 800 !important;
	line-height: 1.0 !important;
	letter-spacing: -0.5px !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 !important;
	max-width: 900px;
}

/* Subtítulo descriptivo */
.cr-shop-hero .cr-shop-subtitle,
.cr-shop-hero .cr-shop-subtitle .elementor-heading-title {
	font-family: var(--cr-shop-font-body) !important;
	font-size: clamp(15px, 1.4vw, 18px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 8px 0 0 0 !important;
	max-width: 720px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · TRUST STRIP — .cr-trust-strip
   ═══════════════════════════════════════════════════════════════════════ */

.cr-trust-strip {
	background-color: var(--cr-shop-bg-b) !important;
	padding: 32px 0 !important;
	border-top: 1px solid var(--cr-shop-border);
	border-bottom: 1px solid var(--cr-shop-border);
}

.cr-trust-strip .cr-shop-inner {
	display: block;
}

.cr-trust-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: center;
}

.cr-trust-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px !important;
}

/* Anular margen entre los hijos del item (Elementor block-gap) */
.cr-trust-item > * {
	margin: 0 !important;
}

/* Círculo del icono — más sutil que el rojo full de cr-visit:
   fondo oscuro con borde rojo. Más editorial. */
.cr-trust-item-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(232, 0, 29, 0.12);
	border: 1px solid rgba(232, 0, 29, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cr-shop-red);
}

.cr-trust-item-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--cr-shop-red);
	fill: none;
	stroke-width: 2;
}

/* Texto: strong en blanco arriba, span gris abajo */
.cr-trust-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cr-trust-item-text strong {
	font-family: var(--cr-shop-font-body);
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.cr-trust-item-text span {
	font-family: var(--cr-shop-font-body);
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · BANDA DE MARCAS — .cr-brands
   ═══════════════════════════════════════════════════════════════════════ */

.cr-brands {
	background-color: var(--cr-shop-bg-a) !important;
	padding: clamp(48px, 6vw, 80px) 0 !important;
}

.cr-brands .cr-shop-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.cr-brands-eyebrow,
.cr-brands-eyebrow .elementor-heading-title {
	font-family: var(--cr-shop-font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.45) !important;
	text-align: center !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.cr-brands-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 48px;
	width: 100%;
}

/* Cada logo individual */
.cr-brand-logo {
	flex-shrink: 0;
	max-height: 36px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(100%) brightness(1.5);
	transition: opacity 250ms ease, filter 250ms ease;
}

.cr-brand-logo:hover {
	opacity: 1;
	filter: grayscale(0%) brightness(1);
}

/* Si los logos vienen como widgets Image de Elementor, necesitamos
   apuntar al img dentro y aplicar las mismas reglas. */
.cr-brands-grid .elementor-widget-image img,
.cr-brands-grid img.cr-brand-logo {
	max-height: 36px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(100%) brightness(1.5);
	transition: opacity 250ms ease, filter 250ms ease;
}

.cr-brands-grid .elementor-widget-image:hover img,
.cr-brands-grid img.cr-brand-logo:hover {
	opacity: 1;
	filter: grayscale(0%) brightness(1);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · HELP CTA — .cr-help-cta ("¿No encuentras lo que buscas?")
   ═══════════════════════════════════════════════════════════════════════ */

.cr-help-cta {
	background-color: var(--cr-shop-bg-b) !important;
	padding: clamp(64px, 8vw, 120px) 0 !important;
	position: relative;
	border-top: 1px solid var(--cr-shop-border);
}

/* Acento rojo sutil arriba — una línea fina */
.cr-help-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(120px, 20%, 240px);
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--cr-shop-red) 50%,
		transparent 100%
	);
}

.cr-help-cta .cr-shop-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

/* Eyebrow */
.cr-help-cta__eyebrow,
.cr-help-cta__eyebrow .elementor-heading-title {
	font-family: var(--cr-shop-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--cr-shop-red) !important;
	margin: 0 !important;
	line-height: 1 !important;
}

/* Título */
.cr-help-cta__title,
.cr-help-cta__title .elementor-heading-title {
	font-family: var(--cr-shop-font-display) !important;
	font-size: clamp(32px, 5vw, 64px) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.5px !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 !important;
	max-width: 900px;
}

/* Subtítulo */
.cr-help-cta__subtitle,
.cr-help-cta__subtitle .elementor-heading-title {
	font-family: var(--cr-shop-font-body) !important;
	font-size: clamp(15px, 1.3vw, 17px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 8px 0 0 0 !important;
	max-width: 640px;
}

/* CTAs container */
.cr-help-cta__ctas {
	display: flex !important;
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
}

/* Botones — estilo ghost igual al de cr-visit pero con CTA primario
   en rojo full (la primera opción es "Escríbenos por WhatsApp",
   debe destacar) y la segunda en ghost normal. */
.cr-help-cta__ctas .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 32px !important;
	border-radius: 999px !important;
	font-family: var(--cr-shop-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease !important;
	border: 2px solid transparent !important;
}

/* Primer botón (CTA primario - fondo rojo) — usa la clase
   .cr-help-cta__btn--primary en el widget Button. */
.cr-help-cta__btn--primary .elementor-button {
	background: var(--cr-shop-red) !important;
	color: #ffffff !important;
	border-color: var(--cr-shop-red) !important;
}

.cr-help-cta__btn--primary .elementor-button:hover,
.cr-help-cta__btn--primary .elementor-button:focus-visible {
	background: var(--cr-shop-red-hover) !important;
	border-color: var(--cr-shop-red-hover) !important;
	transform: translateY(-2px);
}

/* Segundo botón (ghost) — usa la clase .cr-help-cta__btn--ghost */
.cr-help-cta__btn--ghost .elementor-button {
	background: transparent !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
}

.cr-help-cta__btn--ghost .elementor-button:hover,
.cr-help-cta__btn--ghost .elementor-button:focus-visible {
	background: #ffffff !important;
	color: #000000 !important;
	transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · PLACEHOLDER — .cr-shop-placeholder
   ═══════════════════════════════════════════════════════════════════════ */

.cr-shop-placeholder {
	background-color: var(--cr-shop-bg-c) !important;
	border: 1px dashed var(--cr-shop-border-hover);
	color: rgba(255, 255, 255, 0.4) !important;
	font-family: var(--cr-shop-font-body) !important;
	font-size: 13px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	padding: 80px 24px !important;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Tablet-chico (≤768) → Mobile-small (≤480)
   La regla base de cada componente queda ANTES (en §2–§5); acá solo se
   reescala. No hay @media de accesibilidad en este archivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {

	/* §3 · Trust strip: de 4 a 2 columnas */
	.cr-trust-strip-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}


/* ──────────────────────── TABLET-CHICO · max-width: 768px ─────────────── */
@media (max-width: 768px) {

	/* §4 · Banda de marcas: menos gap entre logos */
	.cr-brands-grid {
		gap: 32px;
	}

	/* §4 · Logos más chicos (tanto widgets Image como img directa) */
	.cr-brands-grid .elementor-widget-image img,
	.cr-brands-grid img.cr-brand-logo,
	.cr-brand-logo {
		max-height: 28px;
	}
}


/* ─────────────────────── MOBILE-SMALL · max-width: 480px ──────────────── */
@media (max-width: 480px) {

	/* §3 · Trust strip: 1 sola columna */
	.cr-trust-strip-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* §5 · Help CTA: CTAs apilados full-width */
	.cr-help-cta__ctas {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
	}
}