/* Controlfy Bundles — "Comprados juntos" premium.
   Usa las variables del tema (--color-accent, --color-bg-*, --color-text-*) con
   fallback, para verse nativo en cualquier sitio. Oscuro y cinematográfico. */

.cf-bt{--cf-acc:var(--color-accent,#8fd3ff);--cf-ink:var(--color-text-primary,#fff);--cf-mut:var(--color-text-muted,#9aa3ad);
	--cf-surf:var(--color-bg-secondary,#12141a);--cf-base:var(--color-bg-primary,#050506);--cf-onacc:var(--color-on-accent,#0a0a0a);
	max-width:80rem;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem) 1rem 0;box-sizing:border-box}
.cf-bt *,.cf-bt *::before,.cf-bt *::after{box-sizing:border-box}
.cf-bt-head{margin:0 0 1.1rem}
.cf-bt-eyebrow{display:inline-block;font-family:var(--font-body,inherit);font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cf-acc);margin-bottom:.5rem}
.cf-bt-title{font-family:var(--font-heading,inherit);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.1rem);letter-spacing:-.03em;line-height:1.02;color:var(--cf-ink);margin:0}

/* Tarjeta contenedora premium — prominente para que se distinga de "También te puede gustar" */
.cf-bt-body{position:relative;display:flex;flex-direction:column;gap:1.25rem;padding:clamp(1.2rem,3vw,1.7rem);border-radius:22px;overflow:hidden;
	background:radial-gradient(120% 130% at 12% -10%,color-mix(in srgb,var(--cf-acc) 12%,transparent),transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--cf-surf) 82%,transparent),color-mix(in srgb,var(--cf-base) 92%,transparent));
	border:1.5px solid color-mix(in srgb,var(--cf-acc) 38%,transparent);
	box-shadow:0 40px 90px -46px #000,0 0 0 1px color-mix(in srgb,#fff 6%,transparent) inset,0 0 60px -30px color-mix(in srgb,var(--cf-acc) 55%,transparent)}
/* Línea de acento arriba */
.cf-bt-body::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cf-acc),transparent);opacity:.9}
.cf-bt{scroll-margin-top:90px}
@media(min-width:900px){.cf-bt-body{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}}

.cf-bt-row{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap;flex:1;min-width:0}
.cf-bt-plus{font-size:1.5rem;font-weight:200;color:color-mix(in srgb,var(--cf-acc) 70%,transparent);padding:0 .1rem;flex:0 0 auto;align-self:center}

/* Tarjetas verticales premium, TODAS idénticas (mismo ancho y alto) */
.cf-bt-item{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:.9rem;border:1.5px solid color-mix(in srgb,var(--cf-ink) 12%,transparent);border-radius:18px;cursor:pointer;
	transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;min-width:0;flex:1 1 0;
	background:linear-gradient(180deg,color-mix(in srgb,var(--cf-surf) 55%,transparent),color-mix(in srgb,var(--cf-base) 65%,transparent))}
@media(max-width:640px){.cf-bt-item{flex:1 1 100%}}
.cf-bt-item:hover{border-color:color-mix(in srgb,var(--cf-acc) 55%,transparent);transform:translateY(-2px);box-shadow:0 20px 40px -26px #000}
.cf-bt-item:has(.cf-bt-check:checked){border-color:var(--cf-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cf-acc) 15%,transparent)}
.cf-bt-current{border-style:dashed}
.cf-bt-check{position:absolute;top:12px;left:12px;z-index:3;width:20px;height:20px;flex:0 0 auto;accent-color:var(--cf-acc);cursor:pointer}
.cf-bt-thumb{position:relative;width:100%;aspect-ratio:1;border-radius:13px;overflow:hidden;border:1px solid color-mix(in srgb,var(--cf-ink) 10%,transparent);background:#fff}
.cf-bt-img,.cf-bt-thumb img{width:100%!important;height:100%!important;object-fit:contain!important;padding:9%;display:block}
.cf-bt-corner{display:none}
.cf-bt-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.cf-bt-name{font-size:.86rem;font-weight:700;line-height:1.3;color:var(--cf-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.24em}
.cf-bt-price{font-size:.95rem;font-weight:800;color:var(--cf-ink);margin-top:auto}
.cf-bt-price del{color:var(--cf-mut);font-weight:500;font-size:.78rem;margin-right:5px}
/* Chips de tamaño del producto principal dentro del combo */
.cf-bt-sizes{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cf-bt-size{padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:700;cursor:pointer;line-height:1.2;
	color:color-mix(in srgb,var(--cf-ink) 85%,transparent);background:color-mix(in srgb,var(--cf-base) 60%,transparent);border:1px solid color-mix(in srgb,var(--cf-ink) 16%,transparent);transition:.15s}
.cf-bt-size:hover{border-color:color-mix(in srgb,var(--cf-acc) 55%,transparent)}
.cf-bt-size.is-on{background:var(--cf-acc);color:var(--cf-onacc);border-color:var(--cf-acc)}

/* Resumen / total / ahorro / botón */
.cf-bt-summary{display:flex;flex-direction:column;gap:.75rem;flex:0 0 auto;min-width:230px}
.cf-bt-total-wrap{display:flex;flex-direction:column;gap:3px}
.cf-bt-total-lbl{font-size:.72rem;color:var(--cf-mut);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.cf-bt-total-line{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.cf-bt-total{font-family:var(--font-heading,inherit);font-size:clamp(1.6rem,4vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--cf-ink);line-height:1}
.cf-bt-was{font-size:1rem;color:var(--cf-mut);text-decoration:line-through;font-weight:600}
/* Ahorro protagonista (persuasión) */
.cf-bt-savehero{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:.55rem .8rem;border-radius:13px;
	background:linear-gradient(135deg,color-mix(in srgb,var(--cf-acc) 22%,transparent),color-mix(in srgb,var(--cf-acc) 8%,transparent));
	border:1px solid color-mix(in srgb,var(--cf-acc) 35%,transparent)}
.cf-bt-savehero-lbl{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--cf-ink) 75%,transparent)}
.cf-bt-savehero-amt{font-family:var(--font-heading,inherit);font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--cf-acc);line-height:1}
.cf-bt-savehero-pct{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--cf-onacc);background:var(--cf-acc);padding:.2rem .55rem;border-radius:99px}
/* ── Estabilidad tipo TABLERO: cero movimiento al (des)marcar productos ──
   El bloque "Ahorras" reserva su espacio (visibility en vez de colapsar) y
   todos los números usan ancho fijo (tabular-nums) para que no salten. */
.cf-bt-savehero[hidden]{display:flex !important;visibility:hidden;pointer-events:none}
.cf-bt-total,.cf-bt-savehero-amt,.cf-bt-savehero-pct,.cf-bt-total-line,.cf-bt-add,.cf-bt-price,.cf-bt-total-old,.cf-bt-qty{font-variant-numeric:tabular-nums}

.cf-bt-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;padding:.85rem 1.4rem;border:0;cursor:pointer;border-radius:13px;
	font-family:var(--font-heading,inherit);color:var(--cf-onacc);background:var(--cf-acc);
	transition:transform .2s,filter .2s,box-shadow .2s;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--cf-acc) 75%,transparent)}
.cf-bt-add:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cf-bt-add[disabled]{opacity:.5;pointer-events:none;box-shadow:none}
.cf-bt-add-main{font-weight:800;font-size:.98rem;line-height:1.1}
.cf-bt-add-sub{font-weight:700;font-size:.74rem;opacity:.85}
.cf-bt-trust{font-size:.72rem;color:var(--cf-mut);text-align:center}
.cf-bt-note{font-size:.72rem;color:var(--cf-mut);margin:0;line-height:1.4}

/* Subtítulo + eyebrow con punto pulsante */
.cf-bt-sub{margin:.4rem 0 0;font-size:.86rem;line-height:1.5;color:var(--cf-mut);max-width:52ch}
.cf-bt-eyebrow{display:inline-flex;align-items:center;gap:8px}
.cf-bt-eyedot{width:7px;height:7px;border-radius:50%;background:var(--cf-acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--cf-acc) 60%,transparent);animation:cfBtPulse 2s ease-out infinite}
@keyframes cfBtPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cf-acc) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Badge de cantidad en la miniatura (piezas) — más grande y legible */
.cf-bt-qbadge{position:absolute;bottom:7px;left:7px;right:auto;z-index:2;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:900;letter-spacing:.01em;color:var(--cf-onacc);background:var(--cf-acc);box-shadow:0 6px 16px -6px #000;border:1px solid color-mix(in srgb,#fff 22%,transparent)}
/* Chip de "N piezas" bajo el nombre + etiqueta de variación (ej. 500 ml) */
.cf-bt-qtyline{display:flex;margin:1px 0 0}
.cf-bt-qtybadge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:800;color:var(--cf-acc);background:color-mix(in srgb,var(--cf-acc) 13%,transparent);border:1px solid color-mix(in srgb,var(--cf-acc) 28%,transparent)}
.cf-bt-vtag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:99px;font-size:.68rem;font-weight:800;color:var(--cf-mut);background:color-mix(in srgb,var(--cf-ink) 8%,transparent);vertical-align:middle}
.cf-bt-discbadge{position:absolute;top:9px;right:9px;left:auto;z-index:3;display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.01em;color:#fff;
	background:linear-gradient(135deg,#ff617f,#e11d48);box-shadow:0 8px 18px -8px rgba(225,29,72,.65);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.cf-bt-qmul{font-weight:800;color:var(--cf-acc)}

@media(prefers-reduced-motion:reduce){.cf-bt-item,.cf-bt-add{transition:none}.cf-bt-eyedot{animation:none}}