/* ============================================================
 * INNER · CyberInner Badges & Banners
 * Solo estilos de display (cocardas, etiqueta de precio, banner).
 * Variables --ilcb-accent / --ilcb-ink se inyectan inline desde PHP.
 * ============================================================ */

:root{
	--ilcb-accent:#D89BA0;
	--ilcb-ink:#1F1815;
}

/* ---------- Tipografía base ---------- */
.ilcb-badge,
.ilcb-price-label,
.ilcb-bar{
	font-family:'Raleway','Helvetica Neue',Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
}

/* ============================================================
 * 1) Cocarda "CyberInner" sobre la imagen del producto
 * ============================================================ */
/* Contenedor de imagen al que el JS mueve la cocarda */
.ilcb-img-anchor{
	position:relative !important;
}
/* Fallback de posicionamiento por si el JS no corre */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
li.product .woocommerce-loop-product__link,
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .images{
	position:relative;
}

.ilcb-badge{
	position:absolute;
	top:10px;
	z-index:9;
	display:inline-block;
	padding:6px 12px;
	font-size:12px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	line-height:1;
	color:#fff;
	background:var(--ilcb-accent);
	border-radius:999px;
	box-shadow:0 4px 12px rgba(31,24,21,.18);
	pointer-events:none;
	white-space:nowrap;
}
.ilcb-badge::before{
	content:"";
	display:inline-block;
	width:6px;height:6px;
	margin-right:6px;
	vertical-align:middle;
	border-radius:50%;
	background:#fff;
	opacity:.85;
}
.ilcb-pos-left{ left:10px; }
.ilcb-pos-right{ right:10px; }

/* En la ficha del producto, separar un poco más del borde */
.single-product .ilcb-badge{
	top:16px;
}
.single-product .ilcb-pos-left{ left:16px; }
.single-product .ilcb-pos-right{ right:16px; }

/* ============================================================
 * 2) Etiqueta "Precio CyberInner" junto al precio de oferta
 * ============================================================ */
.ilcb-price{
	display:inline-flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:6px;
}
.ilcb-price-label{
	display:inline-block;
	padding:3px 8px;
	font-size:11px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	line-height:1;
	color:var(--ilcb-accent);
	background:color-mix(in srgb, var(--ilcb-accent) 14%, #fff);
	border:1px solid color-mix(in srgb, var(--ilcb-accent) 35%, #fff);
	border-radius:6px;
	white-space:nowrap;
}
/* El precio rebajado un poco más protagonista */
.ilcb-price ins,
.ilcb-price ins .amount{
	text-decoration:none;
	font-weight:800;
	color:var(--ilcb-ink);
}
.ilcb-price del,
.ilcb-price del .amount{
	opacity:.55;
	font-weight:500;
}

/* ============================================================
 * 3) Banner / barra promocional superior
 * ============================================================ */
.ilcb-bar{
	position:relative;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:10px 44px 10px 16px;
	background:linear-gradient(90deg,var(--ilcb-ink),color-mix(in srgb, var(--ilcb-ink) 78%, var(--ilcb-accent)));
	color:#fff;
	text-align:center;
	font-size:14px;
	line-height:1.35;
}
.ilcb-bar-in{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:6px 14px;
	max-width:1100px;
}
.ilcb-bar-text{ color:#fff; }
.ilcb-bar-text strong{ color:#fff; font-weight:800; letter-spacing:.04em; }
.ilcb-bar-cta{
	display:inline-block;
	padding:6px 16px;
	font-size:13px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--ilcb-ink);
	background:#fff;
	border-radius:999px;
	text-decoration:none;
	transition:transform .15s ease, box-shadow .15s ease;
}
.ilcb-bar-cta:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 16px rgba(0,0,0,.25);
	color:var(--ilcb-ink);
}
.ilcb-bar-x{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	width:26px;height:26px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	font-size:20px;
	line-height:1;
	color:#fff;
	background:transparent;
	border:0;
	border-radius:50%;
	cursor:pointer;
	opacity:.75;
	transition:opacity .15s ease, background .15s ease;
}
.ilcb-bar-x:hover{
	opacity:1;
	background:rgba(255,255,255,.15);
}
.ilcb-bar.ilcb-bar--closed{ display:none; }

/* ---------- Texto en movimiento (marquee) ---------- */
.ilcb-bar--marquee{
	justify-content:flex-start;
	gap:0;
	padding-left:0;
	padding-right:44px;
}
.ilcb-bar-marquee{
	flex:1 1 auto;
	min-width:0;
	overflow:hidden;
}
.ilcb-bar-track{
	display:inline-flex;
	align-items:center;
	white-space:nowrap;
	will-change:transform;
	animation:ilcb-marquee 28s linear infinite;
}
.ilcb-bar--marquee:hover .ilcb-bar-track{ animation-play-state:paused; }
.ilcb-bar--marquee .ilcb-bar-text{ padding:0 14px; }
.ilcb-bar-sep{
	color:#fff;
	opacity:.55;
	font-weight:700;
}
@keyframes ilcb-marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
	.ilcb-bar-track{ animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:600px){
	.ilcb-bar{
		font-size:13px;
		padding:9px 40px 9px 12px;
	}
	.ilcb-bar-cta{
		padding:5px 12px;
		font-size:12px;
	}
	.ilcb-badge{
		font-size:11px;
		padding:5px 10px;
	}
}

/* Fallback para navegadores sin color-mix() */
@supports not (background:color-mix(in srgb, #000 50%, #fff)){
	.ilcb-price-label{
		background:#f7e9ea;
		border-color:#e7c4c8;
	}
	.ilcb-bar{
		background:var(--ilcb-ink);
	}
}

/* ============================================================
 * 4) Banner promocional del HOME (shortcode) — web + móvil
 * ============================================================ */
.ci-promo{
	font-family:'Raleway','Helvetica Neue',Arial,sans-serif;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	border-radius:18px;
	margin:0 auto;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ilcb-accent) 55%, #fff) 0%, transparent 55%),
		linear-gradient(120deg, #F8F1EC 0%, color-mix(in srgb, var(--ilcb-accent) 22%, #F8F1EC) 100%);
	color:var(--ilcb-ink);
}
.ci-promo *{ box-sizing:border-box; }

/* Variante con imagen de fondo */
.ci-promo--img{ background-size:cover; background-position:center; }
.ci-promo--img::before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(90deg, rgba(31,24,21,.72) 0%, rgba(31,24,21,.35) 55%, rgba(31,24,21,0) 100%);
}
.ci-promo--img.ci-promo--mobile::before{
	background:linear-gradient(0deg, rgba(31,24,21,.8) 0%, rgba(31,24,21,.25) 60%, rgba(31,24,21,0) 100%);
}
.ci-promo--img .ci-promo-inner{ position:relative; z-index:1; }
.ci-promo--img .ci-promo-eyebrow,
.ci-promo--img .ci-promo-title,
.ci-promo--img .ci-promo-num{ color:#fff; }

.ci-promo-inner{
	display:flex;
	align-items:center;
	gap:24px;
}
.ci-promo-eyebrow{
	display:inline-block;
	font-size:12px;
	font-weight:800;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--ilcb-accent);
	margin-bottom:6px;
}
.ci-promo-disc{ flex:0 0 auto; }
.ci-promo-num{
	display:inline-block;
	font-weight:800;
	line-height:.9;
	color:var(--ilcb-accent);
	letter-spacing:-.02em;
}
.ci-promo-copy{ flex:1 1 auto; min-width:0; }
.ci-promo-title{
	display:block;
	font-weight:800;
	line-height:1.05;
	color:var(--ilcb-ink);
}
.ci-promo-ship{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:12px;
	padding:7px 14px;
	font-size:14px;
	font-weight:700;
	color:var(--ilcb-ink);
	background:#fff;
	border:1px solid color-mix(in srgb, var(--ilcb-accent) 40%, #fff);
	border-radius:999px;
	box-shadow:0 4px 14px rgba(31,24,21,.08);
}
.ci-promo--img .ci-promo-ship{ border-color:transparent; }
.ci-promo-ship-ico{ font-size:16px; line-height:1; }
.ci-promo-cta{
	flex:0 0 auto;
	display:inline-block;
	padding:14px 28px;
	font-size:15px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.04em;
	text-decoration:none;
	color:#fff;
	background:var(--ilcb-accent);
	border-radius:999px;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ci-promo-cta:hover{
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 10px 24px color-mix(in srgb, var(--ilcb-accent) 55%, transparent);
}

/* ---- Cuenta regresiva dentro del banner ---- */
.ci-countdown{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px 10px;
	margin-top:14px;
}
.ci-count-label{
	font-size:12px;
	font-weight:800;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ilcb-ink);
	opacity:.85;
}
.ci-promo--img .ci-count-label{ color:#fff; opacity:.9; }
.ci-count-boxes{
	display:inline-flex;
	gap:8px;
}
.ci-count-box{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	min-width:46px;
	padding:7px 8px 5px;
	background:#fff;
	border:1px solid color-mix(in srgb, var(--ilcb-accent) 40%, #fff);
	border-radius:10px;
	box-shadow:0 4px 14px rgba(31,24,21,.08);
	line-height:1;
}
.ci-count-box b{
	font-size:22px;
	font-weight:800;
	color:var(--ilcb-ink);
	font-variant-numeric:tabular-nums;
	letter-spacing:.01em;
}
.ci-count-box i{
	margin-top:4px;
	font-size:10px;
	font-style:normal;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ilcb-accent);
}

/* En la franja móvil, el countdown va centrado bajo el resto del copy */
.ci-promo--mobile .ci-countdown{ justify-content:center; }

/* Si el banner del home se inserta arriba del shop */
.ci-promo-shopwrap{ margin:0 0 26px; }

/* ---- Layout WEB (horizontal) ---- */
.ci-promo--web{ padding:34px 40px; }
.ci-promo--web .ci-promo-num{ font-size:88px; }
.ci-promo--web .ci-promo-title{ font-size:30px; }

/* ---- Layout MÓVIL (vertical, centrado, franja limpia sin marco) ---- */
.ci-promo--mobile{ padding:30px 22px; text-align:center; border-radius:0; }
.ci-promo--mobile .ci-promo-inner{ flex-direction:column; gap:12px; }
.ci-promo--mobile .ci-promo-num{ font-size:72px; }
.ci-promo--mobile .ci-promo-title{ font-size:24px; }
.ci-promo--mobile .ci-promo-cta{ width:100%; max-width:340px; }

/* ---- Conmutación automática web/móvil ---- */
.ci-promo--mobile{ display:none; }
.ci-promo--web{ display:block; }
@media (max-width:782px){
	.ci-promo--web{ display:none; }
	.ci-promo--mobile{ display:block; }
}
/* Forzado por atributo view="web|mobile" */
.ci-promo--solo{ display:block !important; }

/* ============================================================
 * 5) Promo compacta en la ficha de producto
 * ============================================================ */
.ci-promo-mini{
	font-family:'Raleway','Helvetica Neue',Arial,sans-serif;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin:0 0 18px;
	padding:12px 14px;
	border-radius:12px;
	background:color-mix(in srgb, var(--ilcb-accent) 14%, #fff);
	border:1px solid color-mix(in srgb, var(--ilcb-accent) 32%, #fff);
	line-height:1.3;
}
.ci-promo-mini-badge{
	flex:0 0 auto;
	padding:5px 11px;
	font-size:14px;
	font-weight:800;
	letter-spacing:.02em;
	color:#fff;
	background:var(--ilcb-accent);
	border-radius:8px;
	white-space:nowrap;
}
.ci-promo-mini-text{
	flex:1 1 auto;
	font-size:14px;
	color:var(--ilcb-ink);
}
.ci-promo-mini-text strong{ font-weight:800; letter-spacing:.04em; }
.ci-promo-mini-ship{
	display:inline-block;
	font-weight:700;
	white-space:nowrap;
}

/* Fallback color-mix() para la promo */
@supports not (background:color-mix(in srgb, #000 50%, #fff)){
	.ci-promo{ background:linear-gradient(120deg,#F8F1EC,#efd9dc); }
	.ci-promo-ship{ border-color:#e7c4c8; }
	.ci-promo-mini{ background:#f7e9ea; border-color:#e7c4c8; }
	.ci-count-box{ border-color:#e7c4c8; }
	.ci-promo-cta:hover{ box-shadow:0 10px 24px rgba(216,155,160,.5); }
}