/* Comercial Apícola Gestión — estilos de la tienda */

/* ---------- Packs por unidades ---------- */
.cag-packs { display: flex; flex-direction: column; gap: 12px; margin: 15px 0; }
.cag-pack {
	position: relative; display: flex; align-items: center; gap: 14px;
	padding: 16px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fff;
	cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;
}
.cag-pack:hover { border-color: #ccc; box-shadow: 0 4px 10px rgba(0,0,0,.05); }
.cag-pack.is-selected { border: 2px solid var(--cag-packs, #4CAF50); background: #f9fff9; }
.cag-pack input[type="radio"] { transform: scale(1.2); flex: 0 0 auto; accent-color: var(--cag-packs, #4CAF50); }
.cag-pack__info { display: flex; flex-direction: column; gap: 4px; }
.cag-pack__name { font-size: 15px; }
.cag-pack__price { font-size: 18px; font-weight: 700; color: #000; }
.cag-pack__info small { font-size: 13px; color: #666; }
.cag-pack__saving { color: #2e7d32 !important; font-weight: 600; }
.cag-pack__out { color: #b32d2e !important; font-weight: 600; }
.cag-pack.is-out { opacity: .6; }
.cag-pack__badge {
	position: absolute; top: -10px; right: 12px; padding: 4px 8px; border-radius: 8px;
	background: var(--cag-packs, #4CAF50); color: #fff; font-size: 11px; font-weight: 600;
}

/* ---------- Precios por volumen: bloques ---------- */
.cag-vol { margin: 10px 0 20px; }
.cag-vol__title { margin: 0 0 12px; font-size: 22px; }
.cag-vol__blocks { display: flex; flex-wrap: wrap; gap: 10px; }
.cag-vol__block {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	min-width: 140px; padding: 26px 14px 14px; border: 1px solid #e6e6e6; border-radius: 6px;
	background: #fff; color: #555; font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.cag-vol__block:hover { border-color: #ccc; background: #fff; color: #555; }
.cag-vol__block.is-active { border: 2px solid var(--cag-vol, #FFB005); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.cag-vol__off {
	position: absolute; top: 0; left: 0; right: 0; padding: 3px 0; border-radius: 5px 5px 0 0;
	background: var(--cag-vol, #FFB005); color: #fff; font-size: 12px; text-align: center;
}
.cag-vol__price { font-size: 17px; font-weight: 700; color: #333; }
.cag-vol__range { font-size: 13px; color: #777; }

/* ---------- Precios por volumen: tarjetas de ahorro ---------- */
.cag-ahorro { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.cag-ahorro__header { font-size: 20px; font-weight: 700; color: #111; }
.cag-ahorro__cards { display: flex; flex-direction: column; gap: 14px; }
.cag-ahorro__card {
	display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 18px; text-align: left;
	border: 1px solid #ececec; border-radius: 16px; background: #fff; color: #111; font: inherit; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;
}
.cag-ahorro__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.10); background: #fff; color: #111; }
.cag-ahorro__card.is-best { border: 2px solid var(--cag-vol, #FFB005); background: linear-gradient(135deg, rgba(255,176,5,.10), #fff); }
.cag-ahorro__card.is-selected { border: 2px solid #2ecc71; background: linear-gradient(135deg, rgba(46,204,113,.10), #fff); }
.cag-ahorro__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cag-ahorro__qty { font-size: 18px; font-weight: 700; }
.cag-ahorro__badge {
	padding: 6px 12px; border-radius: 50px; background: var(--cag-vol, #FFB005); color: #fff;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.cag-ahorro__saving { color: #2ecc71; font-size: 22px; font-weight: 700; line-height: 1.2; }
.cag-ahorro__unit { color: #777; font-size: 13px; }

.cag-vol__block, .cag-ahorro__card { user-select: none; }
.cag-vol__block:focus-visible, .cag-ahorro__card:focus-visible { outline: 2px solid var(--cag-vol, #FFB005); outline-offset: 2px; }

/* ---------- Resumen bajo el botón de compra ---------- */
form.cart:has(.cag-vol-summary) { flex-wrap: wrap !important; }
form.cart .cag-vol-summary { flex: 0 0 100%; order: 99; box-sizing: border-box; }
.cag-vol-summary {
	display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; margin-top: 12px; padding: 10px 14px;
	border-radius: 8px; background: #f7f7f7; font-size: 14px; color: #444;
}
.cag-vol-summary[hidden], .cag-vol-summary__save[hidden] { display: none; }
.cag-vol-summary__save strong { color: #2ecc71; }

/* ---------- Carrito ---------- */
.cag-vol-upsell { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #2e7d32; }
.cag-peso th, .cag-peso td { font-weight: 400; color: #555; }

/* La lupa de zoom de la galería (z-index bajo la cabecera fija) está en Elementor → Ajustes del sitio → CSS personalizado. */

@media (max-width: 767px) {
	.cag-vol__block { min-width: calc(50% - 5px); }
	.cag-ahorro__top { flex-direction: column; align-items: flex-start; }
	.cag-ahorro__saving { font-size: 20px; }
}