/* =========================================================================
   FICHA PREMIUM — sistema de diseño para los componentes de la ficha de
   producto/servicio (suscripción, combos, packs, stock, countdown, regalo,
   retiro, link-cards, confianza, barra de envío, sticky bar).
   Usa las variables de marca del tenant (--color-primario y variantes)
   definidas en head.php. Prefijo .fp- para no colisionar con el theme.
   ========================================================================= */

:root{
	--fp-radius: 16px;
	--fp-radius-sm: 12px;
	--fp-border: #e7e7e9;
	--fp-border-strong: #d9d9dd;
	--fp-ink: #1d1d1f;
	--fp-muted: #6b6b73;
	--fp-soft: #f6f6f4;
	--fp-green: #1a8f52;
	--fp-green-bg: rgba(26, 143, 82, 0.10);
	--fp-shadow: 0 1px 2px rgba(20,20,25,.04), 0 6px 20px rgba(20,20,25,.06);
	--fp-shadow-hover: 0 2px 4px rgba(20,20,25,.06), 0 14px 34px rgba(20,20,25,.10);
}

/* ---------- primitivos ---------- */
.fp-label{
	display:flex; align-items:center; gap:.5rem;
	font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
	color:var(--fp-muted); margin-bottom:.6rem;
}
.fp-label .fp-num{
	display:inline-flex; align-items:center; justify-content:center;
	width:19px; height:19px; border-radius:50%;
	background:var(--color-primario); color:#fff; font-size:11px; font-weight:800; letter-spacing:0;
}
.fp-save{
	display:inline-flex; align-items:center; gap:.25rem;
	background:var(--fp-green-bg); color:var(--fp-green);
	font-size:12px; font-weight:800; line-height:1;
	padding:.32rem .5rem; border-radius:999px; white-space:nowrap;
}
.fp-badge-dark{
	display:inline-flex; align-items:center; gap:.25rem;
	background:var(--fp-ink); color:#fff;
	font-size:10.5px; font-weight:800; letter-spacing:.03em; line-height:1;
	padding:.3rem .5rem; border-radius:6px; text-transform:uppercase; white-space:nowrap;
}
.fp-badge-accent{
	display:inline-flex; align-items:center; gap:.25rem;
	background:var(--color-primario); color:#fff;
	font-size:10.5px; font-weight:800; letter-spacing:.03em; line-height:1;
	padding:.3rem .5rem; border-radius:6px; text-transform:uppercase; white-space:nowrap;
}
.fp-price{ font-size:20px; font-weight:800; color:var(--fp-ink); line-height:1; }
.fp-price-old{ font-size:13px; color:var(--fp-muted); text-decoration:line-through; }

/* ---------- card genérica ---------- */
.fp-card{
	border:1.5px solid var(--fp-border);
	border-radius:var(--fp-radius);
	background:#fff;
	box-shadow:var(--fp-shadow);
}

/* Los componentes de la ficha son hijos directos del flex del precio/cantidad;
   sin width:100% no ocupan el ancho completo y se acomodan mal. */
#divSuscripcionProducto, #divCombosProducto,
#divCuentaRegresivaPromocion, .fp-pickup, .fp-gift, .fp-combo, .fp-countdown{
	width:100%;
}

/* =========================================================================
   SUSCRIPCIÓN — radio plan cards (F14)
   ========================================================================= */
.fp-plans{ display:flex; flex-direction:column; gap:.65rem; margin:.25rem 0 .5rem; }
.fp-plan{
	position:relative; display:flex; gap:.75rem; align-items:flex-start;
	border:1.5px solid var(--fp-border); border-radius:var(--fp-radius);
	background:#fff; padding:.9rem 1rem; cursor:pointer;
	transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.fp-plan:hover{ border-color:var(--fp-border-strong); box-shadow:var(--fp-shadow); }
.fp-plan.is-selected{
	border-color:var(--color-primario); background:var(--color-primario-10);
	box-shadow:0 0 0 1px var(--color-primario);
}
.fp-plan-radio{
	flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%;
	border:2px solid var(--fp-border-strong); background:#fff;
	display:inline-flex; align-items:center; justify-content:center;
	transition:border-color .16s ease;
}
.fp-plan.is-selected .fp-plan-radio{ border-color:var(--color-primario); }
.fp-plan.is-selected .fp-plan-radio::after{
	content:""; width:10px; height:10px; border-radius:50%; background:var(--color-primario);
}
.fp-plan-body{ flex:1 1 auto; min-width:0; }
.fp-plan-head{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.fp-plan-title{ font-size:15px; font-weight:800; color:var(--fp-ink); }
.fp-plan-desc{ font-size:12.5px; color:var(--fp-muted); margin-top:.2rem; line-height:1.35; }
.fp-plan-prices{ flex:0 0 auto; text-align:right; white-space:nowrap; }
.fp-plan-prices .fp-price small{ font-size:12px; font-weight:600; color:var(--fp-muted); }
.fp-plan-save{ font-size:12px; font-weight:800; color:var(--fp-green); margin-top:.15rem; }

/* =========================================================================
   PACKS POR CANTIDAD — tier cards seleccionables (F11)
   ========================================================================= */
#divDescuentosCantidadProducto{ width:100%; }
.fp-packs{ display:flex; flex-wrap:wrap; gap:.55rem; margin:.25rem 0 .4rem; }
.fp-pack{
	flex:0 0 auto; min-width:175px;
	position:relative; border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm);
	background:#fff; padding:.85rem .9rem .7rem; text-align:center; cursor:pointer;
	transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.fp-pack:hover{ border-color:var(--fp-border-strong); transform:translateY(-1px); }
.fp-pack.is-selected{ border-color:var(--color-primario); background:var(--color-primario-10); box-shadow:0 0 0 1px var(--color-primario); }
.fp-pack-qty{ font-size:15px; font-weight:800; color:var(--fp-ink); line-height:1.1; }
.fp-pack-off{ display:inline-block; margin-top:.35rem; font-size:12px; font-weight:800; color:var(--fp-green); }
.fp-pack-unit{ font-size:11.5px; color:var(--fp-muted); margin-top:.2rem; }
.fp-pack-tag{
	position:absolute; top:-9px; left:50%; transform:translateX(-50%);
	background:var(--color-primario); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.03em;
	text-transform:uppercase; padding:.18rem .45rem; border-radius:999px; white-space:nowrap;
}

/* =========================================================================
   COMBOS — bundle visual (F12)
   ========================================================================= */
.fp-combo{
	border:1.5px solid var(--fp-border); border-radius:var(--fp-radius);
	background:linear-gradient(180deg, var(--color-primario-10), #fff 42%);
	padding:1rem; margin-top:.9rem;
}
.fp-combo-title{ display:flex; align-items:center; gap:.4rem; font-size:14.5px; font-weight:800; color:var(--fp-ink); margin-bottom:.75rem; }
.fp-combo-title i{ color:var(--color-primario); }
.fp-combo-items{ display:flex; align-items:center; justify-content:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.75rem; }
.fp-combo-thumb{
	width:64px; height:64px; border-radius:12px; border:1.5px solid var(--fp-border);
	background:#fff center/cover no-repeat; flex:0 0 auto;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fp-combo-thumb img{ width:100%; height:100%; object-fit:cover; }
.fp-combo-thumb .fp-combo-qty{ position:absolute; }
.fp-combo-plus{ color:var(--fp-muted); font-size:18px; font-weight:700; }
.fp-combo-list{ font-size:12.5px; color:var(--fp-muted); margin-bottom:.6rem; }
.fp-combo-list-row{ display:flex; justify-content:space-between; gap:1rem; padding:.12rem 0; }
.fp-combo-total{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px dashed var(--fp-border-strong); padding-top:.65rem; }
.fp-combo-total .fp-combo-now{ font-size:20px; font-weight:800; color:var(--fp-ink); }
.fp-combo-btn{
	display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%;
	margin-top:.8rem; padding:.8rem 1rem; border:none; border-radius:12px;
	background:var(--color-primario); color:#fff; font-size:14px; font-weight:800; cursor:pointer;
	transition:filter .15s ease;
}
.fp-combo-btn:hover{ filter:brightness(.94); }

/* =========================================================================
   STOCK BAJO — chip + barra (F1)
   ========================================================================= */
.fp-qty-stock{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.6rem .75rem; flex:1 1 0; min-width:0; }
.fp-qty-stock > *{ flex:0 0 auto; }
.fp-qty-stock .fp-stock{ margin:0; }
.fp-qty-stock .number-picker .input-group{ width:140px !important; }
.fp-qty-stock .number-picker .input-group input.form-control{ padding-left:.25rem !important; padding-right:.25rem !important; text-align:center; }
.fp-stock{ margin:.5rem 0; }
.fp-stock-chip{
	display:inline-flex; align-items:center; gap:.4rem;
	background:rgba(214,69,42,.10); color:#c0341c;
	font-size:13px; font-weight:800; padding:.4rem .7rem; border-radius:999px;
}
.fp-stock-chip i{ font-size:16px; }
.fp-stock-bar{ height:6px; border-radius:999px; background:rgba(214,69,42,.14); margin-top:.5rem; overflow:hidden; max-width:260px; }
.fp-stock-bar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#e0592f,#c0341c); }

/* =========================================================================
   FAQ — preguntas desplegables con transicion (F3)
   ========================================================================= */
.fp-faq-item{ border-bottom:1px solid var(--fp-border); }
.fp-faq-item:last-child{ border-bottom:0; }
.fp-faq-q{
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
	background:none; border:0; padding:.85rem 0; text-align:left; cursor:pointer;
	font-size:15px; font-weight:700; color:var(--fp-ink);
}
.fp-faq-q i{ color:var(--color-primario); font-size:18px; flex:0 0 auto; transition:transform .3s ease; }
.fp-faq-item.is-open .fp-faq-q i{ transform:rotate(180deg); }
.fp-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.fp-faq-item.is-open .fp-faq-a{ grid-template-rows:1fr; }
.fp-faq-a-inner{ overflow:hidden; }
.fp-faq-a-inner > :last-child{ margin-bottom:.9rem; }

/* =========================================================================
   COUNTDOWN — cajas HRS/MIN/SEG (F4)
   ========================================================================= */
.fp-countdown{
	display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
	border:1.5px solid var(--color-primario-30); border-radius:var(--fp-radius);
	background:linear-gradient(120deg, var(--color-primario-20), var(--color-primario-10)); color:var(--fp-ink); padding:.7rem .9rem; margin-bottom:1rem;
}
.fp-countdown-left{ display:flex; flex-direction:column; gap:.15rem; }
.fp-countdown-label{ display:flex; align-items:center; gap:.4rem; font-size:14px; font-weight:800; color:var(--fp-ink); }
.fp-countdown-label i{ color:var(--color-primario); }
.fp-countdown-link{ display:inline-flex; align-items:center; gap:.15rem; font-size:12.5px; font-weight:700; color:var(--color-primario); text-decoration:none; }
.fp-countdown-link:hover{ opacity:.75; }
.fp-countdown-boxes{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.fp-cd-box{ display:flex; flex-direction:column; align-items:center; background:#fff; color:var(--color-primario); border:1.5px solid var(--color-primario-30); border-radius:8px; padding:.35rem .5rem; min-width:40px; }
.fp-cd-num{ font-size:16px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.fp-cd-unit{ font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.7; margin-top:.15rem; }
.fp-cd-sep{ font-weight:800; color:var(--fp-muted); }

/* =========================================================================
   REGALO — gift card (F13)
   ========================================================================= */
.fp-gift{
	display:flex; align-items:center; gap:.75rem;
	border:1.5px solid var(--color-primario-30); border-radius:var(--fp-radius);
	background:linear-gradient(120deg, var(--color-primario-20), var(--color-primario-10));
	padding:.8rem 1rem; margin-bottom:1rem;
}
.fp-gift-ico{
	flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:#fff;
	display:flex; align-items:center; justify-content:center; color:var(--color-primario);
	box-shadow:var(--fp-shadow);
}
.fp-gift-ico i{ font-size:22px; }
.fp-gift-txt{ font-size:13.5px; color:var(--fp-ink); line-height:1.35; }
.fp-gift-txt b{ font-weight:800; }

/* =========================================================================
   RETIRO EN LOCAL — card expandible (F5)
   ========================================================================= */
.fp-pickup{
	border:1.5px solid var(--fp-border); border-radius:var(--fp-radius);
	background:#fff; padding:.85rem 1rem; margin-top:1rem;
}
.fp-pickup-head{ display:flex; align-items:flex-start; gap:.7rem; }
.fp-pickup-ico{
	flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--color-primario-10); color:var(--color-primario);
	display:flex; align-items:center; justify-content:center;
}
.fp-pickup-ico i{ font-size:19px; }
.fp-pickup-title{ font-size:13.5px; font-weight:800; color:var(--fp-ink); line-height:1.3; }
.fp-pickup-sub{ font-size:12.5px; color:var(--fp-muted); }
.fp-pickup-toggle{ font-size:12.5px; font-weight:700; color:var(--color-primario); cursor:pointer; }
.fp-pickup-list{ margin-top:.7rem; border-top:1px solid var(--fp-border); padding-top:.6rem; }
.fp-pickup-item{ font-size:12.5px; color:var(--fp-ink); padding:.25rem 0; }
.fp-pickup-item b{ font-weight:700; }

/* =========================================================================
   LINK-CARDS — medios de pago, guía de talles (F8, F10)
   ========================================================================= */
.fp-linkrow{
	display:flex; align-items:center; gap:.7rem; width:100%;
	border:1.5px solid var(--fp-border); border-radius:var(--fp-radius-sm);
	background:#fff; padding:.7rem .9rem; margin:.4rem 0; cursor:pointer; text-align:left;
	transition:border-color .15s ease, background .15s ease;
}
.fp-linkrow:hover{ border-color:var(--color-primario); background:var(--color-primario-10); }
.fp-linkrow-ico{
	flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--color-primario-10); color:var(--color-primario);
	display:flex; align-items:center; justify-content:center;
}
.fp-linkrow-ico i{ font-size:19px; }
.fp-linkrow-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.fp-linkrow-title{ display:block; font-size:13.5px; font-weight:800; color:var(--fp-ink); line-height:1.25; }
.fp-linkrow-sub{ display:block; font-size:11.5px; color:var(--fp-muted); line-height:1.2; }
.fp-linkrow-chev{ flex:0 0 auto; color:var(--fp-muted); }

/* =========================================================================
   CONFIANZA — franja envío/garantía/pago (trust badges)
   ========================================================================= */
.fp-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem; margin:.9rem 0; width:100%; }
.fp-trust-item{ display:flex; align-items:center; gap:.4rem; font-size:12px; color:var(--fp-muted); font-weight:600; }
.fp-trust-item i{ font-size:17px; color:var(--color-primario); }

/* =========================================================================
   BARRA DE ENVÍO GRATIS — drawer (F6)
   ========================================================================= */
.fp-shipbar{ padding:.2rem 0 .1rem; }
.fp-shipbar-txt{ display:flex; align-items:center; gap:.4rem; font-size:12.5px; font-weight:700; color:var(--fp-ink); margin-bottom:.4rem; }
.fp-shipbar-txt i{ color:var(--color-primario); font-size:17px; }
.fp-shipbar-txt b{ color:var(--color-primario); }
.fp-shipbar-track{ height:8px; border-radius:999px; background:var(--color-primario-10); overflow:hidden; }
.fp-shipbar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--color-primario), var(--color-primario)); transition:width .4s ease; }
.fp-shipbar.is-free .fp-shipbar-fill{ background:linear-gradient(90deg,#1a8f52,#22b566); }
.fp-shipbar.is-free .fp-shipbar-txt, .fp-shipbar.is-free .fp-shipbar-txt i, .fp-shipbar.is-free .fp-shipbar-txt b{ color:var(--fp-green); }

/* =========================================================================
   ACCORDION — FAQ (F3)
   ========================================================================= */
.fp-acc{ border:1.5px solid var(--fp-border); border-radius:var(--fp-radius); overflow:hidden; background:#fff; }
.fp-acc-item + .fp-acc-item{ border-top:1px solid var(--fp-border); }
.fp-acc-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; cursor:pointer; font-size:14.5px; font-weight:700; color:var(--fp-ink); }
.fp-acc-q i{ flex:0 0 auto; color:var(--color-primario); transition:transform .2s ease; }
.fp-acc-item.is-open .fp-acc-q i{ transform:rotate(45deg); }
.fp-acc-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.fp-acc-a-inner{ padding:0 1.1rem 1.1rem; font-size:13.5px; color:var(--fp-muted); line-height:1.5; }

/* =========================================================================
   NAV ANCLAS — chips sticky que saltan a las secciones (F7)
   ========================================================================= */
.fp-anclas{
	display:flex; gap:.5rem; overflow-x:auto; padding:.6rem 0; margin-bottom:.5rem;
	position:sticky; top:70px; z-index:20; background:#fff;
	border-bottom:1px solid var(--fp-border); -webkit-overflow-scrolling:touch;
}
.fp-anclas::-webkit-scrollbar{ display:none; }
.fp-ancla{
	flex:0 0 auto; font-size:13px; font-weight:700; color:var(--fp-ink);
	border:1.5px solid var(--fp-border); border-radius:999px; padding:.4rem .9rem;
	text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.fp-ancla:hover, .fp-ancla.is-active{ border-color:var(--color-primario); background:var(--color-primario-10); color:var(--color-primario); }
[id="divTextos"], [id="divCalificacionesProducto"]{ scroll-margin-top: 96px; }

/* =========================================================================
   MODALES — override del padding gigante del theme + estilo limpio
   ========================================================================= */
.fp-modal .modal-content{ border:none; border-radius:var(--fp-radius); overflow:hidden; box-shadow:0 20px 60px rgba(20,20,25,.25); }
.fp-modal .modal-header{ padding:1.05rem 1.3rem !important; border-bottom:1px solid var(--fp-border); align-items:center; }
.fp-modal .modal-title{ font-size:17px; font-weight:800; color:var(--fp-ink); display:flex; align-items:center; gap:.5rem; }
.fp-modal .modal-title i{ color:var(--color-primario); font-size:22px; }
.fp-modal .modal-body{ padding:1.3rem !important; color:var(--fp-ink); }
.fp-modal .modal-body p{ margin-bottom:.55rem; line-height:1.5; }
.fp-modal .modal-body p:last-child{ margin-bottom:0; }

/* =========================================================================
   Ajustes responsivos
   ========================================================================= */
@media (max-width: 575.98px){
	.fp-plan-prices{ text-align:right; }
	.fp-countdown-boxes{ margin-left:0; }
	.fp-countdown{ justify-content:space-between; }
	.fp-cd-box{ min-width:38px; }
}