/*!
Theme Name: Outgrid Child
Theme URI: https://uicore.co
Description: Multi-Purpose Elementor WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: outgrid
Version: 1.0.0
Text Domain: outgrid
*/

 /* Add your custom style here */

/* ── CraftLab: foco visible (WCAG 2.4.7). Anillo de dos capas medido en todas las superficies de la marca:
   outline teal-600 + halo #FBF8F4. Ver docs/02-spec.md → Foco. Solo teclado (:focus-visible). ── */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #1A545C;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FBF8F4;
}

/* ── CraftLab: fuentes con respaldo. UiCore declara "Inter"/"Fraunces" sin genérica:
   si la fuente tarda o falla, el navegador cae a su serif por defecto (menú en serif). ── */
html:root body {
	--uicore-primary-font-family: "Fraunces", Georgia, serif;
	--uicore-secondary-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--uicore-text-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--uicore-accent-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── CraftLab: íconos Solar (480 Design, CC BY 4.0) en el header. Reemplazan los glifos de uicore-icons.
   Fuente: assets/icons/solar/. ── */
.uicore-navbar .uicore-search-btn::before,
html .uicore-navbar #uicore-site-header-cart .uicore-icon-holder::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--cl-icon) center / contain no-repeat;
	        mask: var(--cl-icon) center / contain no-repeat;
}
.uicore-navbar .uicore-search-btn::before { --cl-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22currentColor%22 stroke-linecap=%22round%22 stroke-width=%221.5%22%3E%3Ccircle cx=%2211.5%22 cy=%2211.5%22 r=%229.5%22/%3E%3Cpath d=%22M18.5 18.5L22 22%22/%3E%3C/g%3E%3C/svg%3E"); }
html .uicore-navbar #uicore-site-header-cart .uicore-icon-holder::before { --cl-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22currentColor%22 stroke-linecap=%22round%22 stroke-width=%221.5%22%3E%3Cpath d=%22M3.74181 18.5545C3.74181 18.5545 3.74181 18.5545 3.74181 18.5545C4.94143 20 7.17414 20 11.6395 20H12.3607C16.8261 20 19.0589 20 20.2585 18.5545M3.74181 18.5545C2.54219 17.1091 2.95365 14.9146 3.77657 10.5257C4.36179 7.40452 4.65441 5.84393 5.7653 4.92196M20.2585 18.5545C20.2585 18.5545 20.2585 18.5545 20.2585 18.5545C21.4581 17.1091 21.0466 14.9146 20.2237 10.5257C19.6385 7.40452 19.3459 5.84393 18.235 4.92196M18.235 4.92196C18.235 4.92196 18.235 4.92196 18.235 4.92196C17.1241 4 15.5363 4 12.3607 4H11.6395C8.46398 4 6.8762 4 5.7653 4.92196C5.7653 4.92196 5.7653 4.92196 5.7653 4.92196%22/%3E%3Cpath d=%22M9.1709 8C9.58273 9.16519 10.694 10 12.0002 10C13.3064 10 14.4177 9.16519 14.8295 8%22/%3E%3C/g%3E%3C/svg%3E"); }
html .uicore-navbar #uicore-site-header-cart .uicore-icon-holder { width: 22px; height: 22px; }

/* ── CraftLab: banner promocional con forma del manual de marca (H9, 27 sep).
   Se activa poniendo la clase CSS `cl-banner` a un contenedor en Elementor (Avanzado → Clases CSS).
   La forma se elige con una segunda clase: cl-banner--balloons | --bow | --heart | --heart-bow | --toast |
   --cherries | --cherries-bow | --sparkle (por defecto, globos). Tono sobre tono: solo sube el contraste del texto. ── */
.elementor .cl-banner { position: relative; overflow: hidden; isolation: isolate; }
.elementor .cl-banner::before {
	/* Elementor usa este ::before para su capa de fondo y fija top/left/opacity: se anulan. */
	content: ""; position: absolute; top: auto; left: auto; right: -8%; bottom: -22%; z-index: -1; width: 46%; height: auto; aspect-ratio: 1; pointer-events: none;
	opacity: 1; mix-blend-mode: normal; border-radius: 0;
	background: rgba(0, 0, 0, .16);
	-webkit-mask: var(--cl-banner-shape, url("/wp-content/themes/outgrid-child/assets/brand-shapes/balloons.svg")) center / contain no-repeat;
	        mask: var(--cl-banner-shape, url("/wp-content/themes/outgrid-child/assets/brand-shapes/balloons.svg")) center / contain no-repeat;
	transform: rotate(-10deg);
}
.cl-banner--light::before { background: rgba(255, 255, 255, .28); }
.cl-banner--bow { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/bow.svg"); }
.cl-banner--heart { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/heart.svg"); }
.cl-banner--heart-bow { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/heart-bow.svg"); }
.cl-banner--toast { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/toast.svg"); }
.cl-banner--cherries { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/cherries.svg"); }
.cl-banner--cherries-bow { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/cherries-bow.svg"); }
.cl-banner--sparkle { --cl-banner-shape: url("/wp-content/themes/outgrid-child/assets/brand-shapes/sparkle.svg"); }
@supports not (aspect-ratio: 1 / 1) { .elementor .cl-banner::before { height: 0; padding-top: 46%; } }

/* ── CraftLab: guías de regalo (H4, 29 sep). Tarjetas-enlace de Elementor con clase `cl-guide`.
   El texto va sobre un degradado ink (0 → 85%) que garantiza ≥ 6:1 aun sobre la zona más clara de la foto. ── */
.elementor .cl-guide { overflow: hidden; transition: transform .4s cubic-bezier(.2, 1, .2, 1), box-shadow .4s ease; }
.elementor .cl-guide:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 26, 27, .16); }
.elementor .cl-guide__cta .elementor-heading-title::after {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px;
	background: currentColor;
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/arrow-right-linear.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/arrow-right-linear.svg") center / contain no-repeat;
	transition: transform .3s ease;
}
.elementor .cl-guide:hover .cl-guide__cta .elementor-heading-title::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .elementor .cl-guide, .elementor .cl-guide__cta .elementor-heading-title::after { transition: none; } }

/* ── CraftLab: footer (29 sep, decisión D26). Plantilla de footer de UiCore "CraftLab Footer",
   fuente en scripts/elementor/build-footer.py. Cinta de marca magenta + footer vino con la firma
   "Gifting & Celebrating, Redefined." (tagline del manual) y las formas de marca como stickers.
   Contraste medido sobre vino #4F1731: crema 12.47:1 · crema 80% 8.41:1 · crema 75% 7.56:1 · coral 7.44:1.
   Cinta: crema sobre magenta 5.04:1. ── */
.cl-ft, .cl-ft-ribbon {
	--cl-wine: #4F1731; --cl-cream: #F7F1E8; --cl-coral: #F6AB91;
	--cl-amber: #EC9219; --cl-pink: #FF66C4; --cl-magenta: #B53570;
}

/* Cinta: movimiento continuo (como partakefoods.com). Se pausa con el botón (casilla + label, sin JS;
   WCAG 2.2.2), al pasar el mouse y con "reducir movimiento". El 29 sep se probó moverla con el scroll
   (animation-timeline), pero Safari de iPhone solo lo soporta desde iOS 26: en el resto quedaba quieta. */
.elementor .elementor-element.cl-ft-ribbon { background: var(--cl-magenta); overflow: hidden; }
.cl-ribbon { position: relative; padding: 14px 0; overflow: hidden; color: var(--cl-cream); }
.cl-ribbon__track { display: flex; width: max-content; animation: cl-ribbon 45s linear infinite; }
.cl-ribbon__toggle:checked ~ .cl-ribbon__track { animation-play-state: paused; }
/* Solo con mouse: en pantallas táctiles el :hover queda pegado tras tocar el botón y no dejaría reanudar. */
@media (hover: hover) { .cl-ribbon:hover .cl-ribbon__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .cl-ribbon__track { animation: none; } }
@keyframes cl-ribbon { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
.cl-ribbon__group {
	display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
	font: 500 22px/1.2 "Fraunces", Georgia, serif;
}
.cl-ribbon__shape {
	flex: none; width: 26px; height: 26px; background: currentColor;
	-webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat;
}
/* Botón de pausa: la casilla queda invisible pero enfocable; el label es lo que se ve (32px). */
.cl-ribbon__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cl-ribbon__btn {
	position: absolute; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 50%;
	background: var(--cl-wine); cursor: pointer;
}
.cl-ribbon__btn span { width: 10px; height: 12px; border-inline: 3px solid var(--cl-cream); } /* pausa: dos barras */
.cl-ribbon__toggle:checked + .cl-ribbon__btn span { /* play: triángulo */
	width: 11px; height: 12px; border: 0; background: var(--cl-cream); clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 3px;
}
.cl-ribbon__toggle:focus-visible + .cl-ribbon__btn { outline: 2px solid var(--cl-cream); outline-offset: 2px; }

/* Footer: grilla de marca + 4 columnas */
.elementor .elementor-element.cl-ft { color: var(--cl-cream); }
.elementor .elementor-element.e-con.cl-ft__top {
	--display: grid; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 40px;
}
.elementor .elementor-element.e-con.cl-ft__brand,
.elementor .elementor-element.e-con.cl-ft__col { gap: 0; }
.elementor .e-con .elementor-widget.cl-ft__logo { margin-bottom: 20px; text-align: left; } /* le gana al margen 0 de Elementor */
.elementor .cl-ft__logo img { display: block; width: 168px; height: auto; }
.elementor .cl-ft__lede, .elementor .cl-ft__lede p {
	max-width: 300px; margin: 0; font: 400 16px/24px "Inter", system-ui, sans-serif; color: rgba(247, 241, 232, .8);
}
.elementor .e-con .elementor-widget.cl-ft__lede { margin-bottom: 24px; }
.elementor .elementor-element.e-con.cl-ft__ctas { --flex-direction: row; flex-direction: row; flex-wrap: wrap; gap: 10px; }
/* .elementor-button doble: UiCore usa `.elementor-kit-6 .elementor-button.elementor-button` y carga después */
.elementor .cl-ft-btn .elementor-button.elementor-button {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px;
	font: 600 14px/1 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
	transition: background-color .2s ease, border-color .2s ease;
}
.elementor .cl-ft-btn--solid .elementor-button.elementor-button { background: var(--cl-cream); color: var(--cl-wine); border: 1.5px solid var(--cl-cream); }
.elementor .cl-ft-btn--solid .elementor-button.elementor-button:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--cl-wine); }
.elementor .cl-ft-btn--line .elementor-button.elementor-button { background: transparent; color: var(--cl-cream); border: 1.5px solid rgba(247, 241, 232, .6); }
.elementor .cl-ft-btn--line .elementor-button.elementor-button:hover { background: rgba(247, 241, 232, .08); border-color: var(--cl-cream); color: var(--cl-cream); }

.elementor .cl-ft__h .elementor-heading-title {
	margin: 0 0 16px; font: 600 12px/16px "Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
	color: var(--cl-coral);
}
.elementor .cl-ft__list .elementor-icon-list-items { display: grid; gap: 10px; margin: 0; padding: 0; }
.elementor .cl-ft__list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.elementor .cl-ft__list .elementor-icon-list-item a,
.elementor .cl-ft__list .elementor-icon-list-text {
	font: 400 15px/22px "Inter", system-ui, sans-serif; color: var(--cl-cream); text-decoration: none;
}
.elementor .cl-ft__list a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; }

/* Firma gigante con stickers */
.elementor .elementor-element.e-con.cl-ft__sign { position: relative; margin-top: 88px; padding-bottom: 40px; }
.elementor .cl-ft__signature .elementor-heading-title {
	margin: 0; font: 500 clamp(44px, 9.2vw, 136px)/.95 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: var(--cl-cream);
}
.elementor .cl-ft__signature em { font-style: italic; color: var(--cl-coral); }
.elementor .elementor-element.cl-ft__stickers { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; pointer-events: none; }
.cl-stickers { position: relative; width: 100%; height: 100%; }
.cl-sticker {
	position: absolute; background: var(--c);
	-webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat;
	transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2, 1, .2, 1);
}
.cl-ft__sign:hover .cl-sticker { transform: rotate(calc(var(--r) * -1)) scale(1.06); }
.cl-sticker--balloons { width: clamp(56px, 8vw, 120px); height: clamp(56px, 8vw, 120px); right: 0; top: -40%; }
.cl-sticker--heart { width: clamp(40px, 5vw, 76px); height: clamp(40px, 5vw, 76px); right: 30%; bottom: 22%; }
.cl-sticker--bow { width: clamp(40px, 6vw, 92px); height: clamp(40px, 6vw, 92px); right: 12%; bottom: 4%; }
.cl-sticker--sparkle { width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); left: 52%; top: -6%; }
@media (prefers-reduced-motion: reduce) { .cl-sticker { transition: none; } }

/* Barra legal */
.elementor .elementor-element.e-con.cl-ft__legal { border-top: 1px solid rgba(247, 241, 232, .18); padding: 20px 0 28px; }
.elementor .cl-ft__legal-text p { margin: 0; font: 400 13px/20px "Inter", system-ui, sans-serif; color: rgba(247, 241, 232, .75); }
.elementor .cl-ft__legal-text .cl-ft__ack { margin-bottom: 8px; }
.elementor .cl-ft__legal-text .cl-ft__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.elementor .cl-ft__legal-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.elementor .cl-ft__legal-text a:hover { color: var(--cl-cream); }

@media (max-width: 1024px) {
	.elementor .elementor-element.e-con.cl-ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor .elementor-element.e-con.cl-ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.elementor .elementor-element.e-con.cl-ft__top { gap: 32px 16px; }
	.elementor .elementor-element.e-con.cl-ft__sign { margin-top: 64px; }
	.cl-ribbon__group { font-size: 18px; gap: 20px; padding-right: 20px; }
	.cl-sticker--bow { display: none; }
	.cl-sticker--heart { right: 4%; bottom: 12%; }
}

/* ── CraftLab: barra de anuncio (delivery) también en móvil (30 sep, feedback del QA).
   UiCore la esconde a ≤768px con una sola regla: `max-height: 0; max-width: 0; pointer-events: none;
   visibility: hidden; z-index: -999; position: absolute !important`. Se anulan las seis: position con
   !important y el resto con más especificidad (doble clase; uicore-global.css carga después). ── */
@media (max-width: 768px) {
	.uicore.uicore-top-bar {
		position: relative !important; z-index: auto; max-height: none; max-width: none;
		pointer-events: auto; visibility: visible; width: 100%; padding: 6px 0;
	}
	.uicore.uicore-top-bar .uicore-container { width: 100%; padding: 0 16px; justify-content: center; }
	.uicore.uicore-top-bar .ui-tb-col-1 { width: 100%; }
	.uicore.uicore-top-bar p { margin: 0; font-size: 12px; line-height: 16px; text-align: center; }
}

/* ── CraftLab: variante "suave" del home (30 sep, muestra para la clienta tras el feedback de su auxiliar).
   Página aparte; el home no cambia. Estructura en scripts/elementor/build-home-variants.py (clase `cl-soft`
   en cada sección). Paleta dentro del manual: fondo casi blanco, títulos vino, rosa pálido y magenta
   como acentos; sin teal. ── */
body:has(.cl-soft), body:has(.cl-soft) #uicore-page, body:has(.cl-soft) .uicore-body-content { background-color: #FFFCFA; }
.cl-soft .cl-occ, .cl-soft .cl-evt { --cl-teal: #4F1731; }
.cl-soft .cl-occ { --cl-peach: #F4D7E5; } /* pedestal del producto activo en rosa pálido */

/* Tipos de evento: 2 tonos alternados (vino y magenta) en vez de 6 colores. Le gana al color en línea. */
.cl-soft .cl-evt__slide:nth-child(odd) .cl-evt__card { --cl-card: #4F1731 !important; }
.cl-soft .cl-evt__slide:nth-child(even) .cl-evt__card { --cl-card: #B53570 !important; }
.cl-soft .cl-evt__card.is-light { color: #F7F1E8; --cl-shape-tint: rgba(0, 0, 0, .16); }

/* Tarjeta de eventos: los globos de la marca, tono sobre tono (anula el ::before de overlay de Elementor) */
.elementor .elementor-element.cl-route__event { position: relative; overflow: hidden; }
.elementor .elementor-element.cl-route__event::before {
	content: ""; position: absolute; top: auto; left: auto; right: -24px; bottom: -24px; z-index: 0;
	width: 58%; aspect-ratio: 1; opacity: 1; background: var(--cl-route-shape, rgba(0, 0, 0, .16)); border-radius: 0;
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/balloons.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/balloons.svg") center / contain no-repeat;
	transform: rotate(-8deg); pointer-events: none;
}
.elementor .elementor-element.cl-route__event > * { position: relative; z-index: 1; }

/* Móvil: los dos caminos lado a lado en la primera pantalla (etiqueta + imagen o panel + botón) */
@media (max-width: 600px) {
	.elementor .elementor-element.e-con.cl-routes { --flex-direction: row; flex-direction: row; flex-wrap: nowrap; gap: 12px; padding: 16px; }
	.elementor .elementor-element.e-con.cl-route { --width: calc(50% - 6px); width: calc(50% - 6px); gap: 8px; }
	.elementor .elementor-element.e-con.cl-route__copy { display: none; }
	.elementor .cl-route__label .elementor-heading-title { font-size: 16px; line-height: 20px; }
	.elementor .elementor-element.cl-route__img img { height: 132px !important; }
	.elementor .elementor-element.e-con.cl-route__gift { padding: 10px; gap: 0; }
	.elementor .elementor-element.e-con.cl-route__event { --min-height: 0; min-height: 0; padding: 10px; justify-content: flex-end; }
	.elementor .elementor-element.cl-route__event::before { width: 90%; right: -12px; bottom: 36px; }
	.cl-routes .elementor-button { width: 100%; padding: 10px 4px; font-size: 12px; line-height: 16px; letter-spacing: .02em; white-space: nowrap; }
}

/* ── CraftLab: variante "unisex" del home (30 sep). Página /home-unisex/ (clase `cl-unisex`).
   Blanco + crema de base y tinta (ink) como color fuerte. Liberman (30 sep): el negro sí, pero el hero
   necesita vida y nada de amarillo ni naranja → acentos magenta y rosa del manual, sin ámbar ni coral.
   Contraste medido: blanco/tinta 17.31:1 · crema/tinta 15.42:1 · #5A514B/blanco 7.74:1 ·
   magenta/blanco 5.66:1 · rosa #FF66C4/tinta 6.57:1 · crema/magenta 5.04:1. ── */
body:has(.cl-unisex), body:has(.cl-unisex) #uicore-page, body:has(.cl-unisex) .uicore-body-content { background-color: #FFFFFF; }
body:has(.cl-unisex) .uicore.uicore-top-bar { background-color: #1C1A1B; }
.cl-unisex .cl-occ, .cl-unisex .cl-evt { --cl-teal: #1C1A1B; }
.cl-unisex .cl-occ { --cl-peach: #F7F1E8; }
.cl-unisex .elementor-element.cl-route__event { --cl-route-shape: rgba(255, 255, 255, .12); }

/* Hero: acento magenta en el H1 y formas de marca alrededor (entran al cargar, se mueven al pasar el mouse) */
.cl-unisex .cl-hl { font-style: italic; color: #B53570; }
.elementor .elementor-element.cl-hero-intro { position: relative; }
.elementor .elementor-element.cl-hero-stickers { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; pointer-events: none; }
.cl-hs { position: relative; width: 100%; height: 100%; }
.cl-hs__s {
	position: absolute; background: var(--c);
	-webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat;
	transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2, 1, .2, 1);
	animation: cl-hs-pop .7s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.cl-hs__s--a { width: 56px; height: 56px; left: 6%; top: 4%; }
.cl-hs__s--b { width: 88px; height: 88px; right: 5%; top: -14%; animation-delay: .1s; }
.cl-hs__s--c { width: 28px; height: 28px; right: 17%; bottom: 8%; animation-delay: .2s; }
.cl-hs__s--d { width: 48px; height: 48px; left: 14%; bottom: 0; animation-delay: .3s; }
.cl-hero-intro:hover .cl-hs__s { transform: rotate(calc(var(--r) * -1)) scale(1.08); }
@keyframes cl-hs-pop { from { opacity: 0; transform: rotate(var(--r)) scale(.3); } }
@media (max-width: 600px) {
	/* Arriba del H1 no hay lugar (28px): van a los costados de la fila de avatares */
	.cl-hs__s--a { width: 30px; height: 30px; left: 8%; top: auto; bottom: 26px; }
	.cl-hs__s--b { width: 38px; height: 38px; right: 7%; top: auto; bottom: 25px; }
	.cl-hs__s--c, .cl-hs__s--d { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cl-hs__s { animation: none; transition: none; } }

/* Tipos de evento: tinta y magenta alternados */
.cl-unisex .cl-evt__slide:nth-child(odd) .cl-evt__card { --cl-card: #1C1A1B !important; color: #F7F1E8; --cl-shape-tint: rgba(255, 255, 255, .12); }
.cl-unisex .cl-evt__slide:nth-child(even) .cl-evt__card { --cl-card: #B53570 !important; color: #F7F1E8; --cl-shape-tint: rgba(0, 0, 0, .16); }

/* Footer en esta página: tinta, con la cinta magenta del sitio y rosa en lugar de coral y ámbar */
body:has(.cl-unisex) .elementor .elementor-element.cl-ft { background-color: #1C1A1B; }
body:has(.cl-unisex) .cl-ft { --cl-wine: #1C1A1B; --cl-coral: #FF66C4; --cl-amber: #B53570; }

/* ── CraftLab: franja de título de UiCore con la dirección suave (19 oct). La usan las páginas sin
   cabecera propia (Cart, Checkout, My account y las de contenido). UiCore la pinta con el color "dark"
   (#164950, teal). Rosa pálido con título vino: vino/rosa pálido 10.47:1. ── */
.uicore-page-title { background-color: #F4D7E5 !important; }
.uicore-page-title .uicore-title, .uicore-page-title h1, .uicore-page-title .uicore-entry-meta, .uicore-page-title a { color: #4F1731 !important; }
.uicore-page-title .uicore-overlay { background: none !important; }

/* ── CraftLab: hover del menú principal (escritorio). UiCore pinta una caja detrás del enlace (a::before) con el
   mismo magenta que usa para el texto en hover: la palabra desaparecía. Además la caja medía lo mismo que el
   enlace (12.75px a cada lado) y se quedaba pintada en la página actual, como un hover pegado.
   Ahora: hover y foco de teclado con caja rosa pálido y texto vino (10.47:1), 6px más a cada lado; la página
   actual se marca con un subrayado magenta, sin caja. El panel móvil (.uicore-navigation-wrapper) no cambia. ── */
.uicore-navbar .uicore-nav-menu .uicore-menu > li.menu-item > a::before { left: -6px; right: -6px; }
.uicore-navbar .uicore-nav-menu .uicore-menu > li.menu-item:hover > a::before,
.uicore-navbar .uicore-nav-menu .uicore-menu > li.menu-item > a:focus-visible::before { background-color: #F4D7E5; }
.uicore-navbar .uicore-nav-menu .uicore-menu > li.menu-item:hover > a,
.uicore-navbar .uicore-nav-menu .uicore-menu > li.menu-item > a:focus-visible { color: #4F1731; }
.uicore-navbar .uicore-nav-menu .uicore-menu > li.current-menu-item:not(:hover) > a::before { background-color: transparent; }
.uicore-navbar .uicore-nav-menu .uicore-menu > li.current-menu-item > a .ui-menu-item-wrapper {
	color: #4F1731; text-decoration: underline 2px #B53570; text-underline-offset: 6px;
}

/* ── CraftLab: selector de idioma (D29, 20 oct). Elemento "Opposite Language" de TranslatePress en el menú
   y [cl_lang_switch] en el footer: muestra el otro idioma por su nombre ("Español" / "English").
   Sin bandera (las banderas son países, no idiomas); ícono Solar global-linear. ── */
.trp-menu-ls-item .trp-flag-image { display: none !important; }
.trp-menu-ls-label, .cl-lang--footer { display: inline-flex; align-items: center; gap: 6px; }
.trp-menu-ls-label::before, .cl-lang--footer::before {
	content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/global-linear.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/global-linear.svg") center / contain no-repeat;
}

/* ── CraftLab: sin palabras sueltas (20 oct, Liberman: "evitemos palabras muertas"). Títulos con líneas
   parejas (text-wrap: balance) y párrafos sin la última palabra sola (pretty). Vale para inglés y español
   y para cualquier ancho: no depende de cortes manuales en el texto. Navegadores sin soporte cortan como
   siempre. La firma del footer ("Redefined.") va en su propia línea a propósito, con <br>. ── */
h1, h2, h3, h4, h5, h6, .elementor-heading-title, .cl-pdp__title, .cl-evt__title, .cl-occ__name,
.cl-mm__feature-title, .cl-added__title, .cl-addons__title, .cl-addon__name, .woocommerce-loop-product__title,
.wc-block-components-product-name { text-wrap: balance; }
p, li, .cl-pers__hint, .cl-mm__feature-text, .cl-evt__tag, .cl-added__item { text-wrap: pretty; }

/* Tarjetas de los dos caminos en tablet vertical (601–899px): con los 48px de margen de desktop el título
   quedaba en 197px, una palabra por línea ("Send / something / thoughtful."). Menos margen y título a 20px (como en móvil). */
@media (min-width: 601px) and (max-width: 899px) {
	.elementor .elementor-element.e-con.cl-route__gift, .elementor .elementor-element.e-con.cl-route__event { padding-left: 24px; padding-right: 24px; }
	.elementor .cl-routes .elementor-element.elementor-element-085191d .elementor-heading-title, /* doble clase: le gana al CSS de Elementor */
	.elementor .cl-routes .elementor-element.elementor-element-c442721 .elementor-heading-title { font-size: 20px; line-height: 26px; }
}
/* 900–1023 (24 oct): la tarjeta mide 270px y a 26px "something thoughtful." no entra junto: queda "thoughtful." sola. */
@media (min-width: 900px) and (max-width: 1023px) {
	.elementor .cl-routes .elementor-element.elementor-element-085191d .elementor-heading-title,
	.elementor .cl-routes .elementor-element.elementor-element-c442721 .elementor-heading-title { font-size: 22px; line-height: 28px; }
}

/* ── CraftLab: tarjetas del catálogo (24 oct). Foto completa de la clienta en 3:4 (las miniaturas son 600×800),
   bordes de 8px y el zoom de UiCore al pasar el mouse. UiCore deja el marco del zoom cuadrado y cortaba la foto. ── */
ul.products li.product .uicore-zoom-wrapper { aspect-ratio: 3 / 4; height: auto !important; padding: 0 !important; border-radius: 8px; }
ul.products li.product .uicore-zoom-wrapper img { width: 100%; height: 100%; object-fit: cover; }