/*
 * Bodybrite – estilos de tienda.
 * Lo que se diseña desde Divi (tipografías de títulos, precios, colores de módulos) no se toca aquí:
 * este archivo cubre las piezas que Divi no controla (selector de cantidad, carrito flotante,
 * bloques de carrito y pago de WooCommerce y Mi cuenta).
 * Para cambiar colores o medidas, edita solo las variables.
 */
:root {
	--bb-dark: #423F40;
	--bb-accent: #90CCDD;
	--bb-soft: #F4FAFC;
	--bb-line: #D7E8EE;
	--bb-white: #FFFFFF;
	--bb-control-h: 52px;
	--bb-font-body: 'Roboto', Helvetica, Arial, sans-serif;
	--bb-font-ui: 'Poppins', Helvetica, Arial, sans-serif;
	--bb-font-title: 'Comfortaa', 'Roboto', sans-serif;
	--bb-focus: 0 0 0 3px rgba(66, 63, 64, .35);
}

/* ---------- Botones de WooCommerce con el estilo de la marca ---------- */

body.woocommerce-page #page-container .button:not(.et_pb_button),
body.woocommerce-page #page-container button.button.alt,
.bb-cart-drawer .button,
.wc-block-components-button:not(.is-link),
#page-container .woocommerce-MyAccount-content .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: var(--bb-control-h);
	padding: 0 28px !important;
	border: 2px solid var(--bb-accent) !important;
	border-radius: 0 !important;
	background: var(--bb-accent) !important;
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 2.5px !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	text-decoration: none;
	box-shadow: none !important;
	transition: background-color .2s ease, border-color .2s ease;
}
body.woocommerce-page #page-container .button:not(.et_pb_button):hover,
body.woocommerce-page #page-container button.button.alt:hover,
.bb-cart-drawer .button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--bb-dark) !important;
	border-color: var(--bb-dark) !important;
	color: var(--bb-white) !important;
	padding: 0 28px !important;
}
/* Divi añade una flecha al pasar el ratón: fuera. */
body.woocommerce-page #page-container .button:not(.et_pb_button)::after,
body.woocommerce-page #page-container .button:not(.et_pb_button)::before,
.bb-cart-drawer .button::after { display: none !important; }

/* Secundarios: contorno. */
.bb-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout),
#page-container .woocommerce-MyAccount-content .button.wc-forward {
	background: var(--bb-white) !important;
}
.bb-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
#page-container .woocommerce-MyAccount-content .button.wc-forward:hover {
	background: var(--bb-dark) !important;
}

.woocommerce .button:focus-visible,
.wc-block-components-button:focus-visible,
.bb-qty__btn:focus-visible,
.bb-cart-fab:focus-visible,
.bb-cart-drawer__close:focus-visible {
	outline: none;
	box-shadow: var(--bb-focus) !important;
}

/* ---------- Rejillas: botón «Añadir al carrito» por tarjeta ---------- */

#page-container ul.products li.product {
	display: flex;
	flex-direction: column;
}
#page-container ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1; }
body.woocommerce-page #page-container ul.products li.product .button,
#page-container ul.products li.product .button {
	width: 100%;
	min-height: 44px;
	margin: 14px 0 0 !important;
	padding: 0 12px !important;
	background: var(--bb-white) !important;
	font-size: 11px !important;
	letter-spacing: 2px !important;
	text-align: center;
}
body.woocommerce-page #page-container ul.products li.product .button:hover,
#page-container ul.products li.product .button:hover {
	background: var(--bb-dark) !important;
	border-color: var(--bb-dark) !important;
	color: var(--bb-white) !important;
	padding: 0 12px !important;
}
#page-container ul.products li.product .button.loading { opacity: .6; pointer-events: none; }
/* Tras añadir se abre el panel lateral: el enlace «Ver carrito» de WooCommerce sobra. */
#page-container ul.products li.product a.added_to_cart { display: none !important; }

/* ---------- Ficha de producto: cantidad + botón en una línea ---------- */

#page-container form.cart:not(.variations_form):not(.grouped_form),
#page-container form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 !important;
}
#page-container form.cart::before,
#page-container form.cart::after { display: none !important; }
#page-container form.cart .quantity { margin: 0 !important; float: none !important; }
#page-container form.cart .single_add_to_cart_button {
	flex: 1 1 150px;
	float: none !important;
	margin: 0 !important;
	height: var(--bb-control-h);
}
#page-container form.cart .single_add_to_cart_button.loading { opacity: .7; }
/* El panel lateral ya ofrece «Ver carrito». */
#page-container form.cart a.added_to_cart { display: none !important; }

/* Selector − / + */
.bb-qty {
	display: inline-flex !important;
	align-items: stretch;
	height: var(--bb-control-h);
	border: 1px solid var(--bb-line);
	background: var(--bb-white);
}
.bb-qty__btn {
	width: 44px;
	border: 0;
	background: transparent;
	color: var(--bb-dark);
	font-family: var(--bb-font-ui);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
.bb-qty__btn:hover { background: var(--bb-soft); }
#page-container .bb-qty input.qty {
	width: 48px !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--bb-line) !important;
	border-right: 1px solid var(--bb-line) !important;
	background: transparent !important;
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-ui) !important;
	font-size: 16px !important;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.bb-qty input.qty::-webkit-outer-spin-button,
.bb-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Lista de ventajas bajo el botón */
.bb-ventajas {
	margin: 0 !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--bb-line);
	list-style: none !important;
}
.bb-ventajas li {
	position: relative;
	padding: 0 0 8px 26px !important;
}
.bb-ventajas li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .45em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--bb-dark);
	border-bottom: 2px solid var(--bb-dark);
	transform: rotate(-45deg);
}
.bb-ventajas a { color: var(--bb-dark); text-decoration: underline; }

/* Enlaces de categoría con contraste suficiente */
#page-container .product_meta a { color: var(--bb-dark); text-decoration: underline; }

/* ---------- Productos con opciones (tarjeta regalo) ---------- */

.bb-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
#page-container form.variations_form table.variations,
#page-container form.variations_form table.variations tbody,
#page-container form.variations_form table.variations tr,
#page-container form.variations_form table.variations th,
#page-container form.variations_form table.variations td {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left;
}
#page-container form.variations_form table.variations { margin: 0 0 20px !important; }
#page-container form.variations_form table.variations label,
#page-container .pwgc-label {
	display: block;
	margin: 0 0 8px;
	color: var(--bb-dark);
	font-family: var(--bb-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}
/* Envoltorio de Divi (dibuja la flecha del desplegable) */
#page-container form.variations_form td.value > span:has(> select.bb-visually-hidden) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.bb-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bb-amounts__option {
	min-width: 84px;
	min-height: 48px;
	padding: 0 18px;
	border: 2px solid var(--bb-line);
	background: var(--bb-white);
	color: var(--bb-dark);
	font-family: var(--bb-font-ui);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}
.bb-amounts__option:hover { border-color: var(--bb-accent); }
.bb-amounts__option.is-selected {
	border-color: var(--bb-dark);
	background: var(--bb-soft);
}
.bb-amounts__option:focus-visible { outline: none; box-shadow: var(--bb-focus); }
#page-container form.variations_form .reset_variations {
	display: inline-block;
	margin-top: 8px;
	color: var(--bb-dark);
	font-size: 13px;
	text-decoration: underline;
}
#page-container .woocommerce-variation-price { margin: 0 0 16px; }

/* Campos de destinatario */
#page-container #pwgc-purchase-container { width: 100%; margin: 0 0 20px; }
#page-container .pwgc-field-container { margin: 0 0 18px; }
#page-container .pwgc-input-text,
#page-container #pwgc-message {
	width: 100% !important;
	min-height: var(--bb-control-h);
	padding: 12px 14px !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 0 !important;
	background: var(--bb-white) !important;
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-body) !important;
	font-size: 16px !important;
}
#page-container #pwgc-message { min-height: 110px; resize: vertical; }
#page-container .pwgc-input-text:focus,
#page-container #pwgc-message:focus {
	border-color: var(--bb-dark) !important;
	box-shadow: 0 0 0 1px var(--bb-dark) !important;
	outline: none;
}
#page-container .pwgc-subtitle {
	margin-top: 6px;
	color: var(--bb-dark);
	font-size: 13px;
}

/* Tarjeta regalo: va una por destinatario (sin cantidad) y no se envía a domicilio. */
.bb-tarjeta-regalo #page-container form.cart .quantity,
.bb-tarjeta-regalo #pwgc-quantity-one-per-recipient,
.bb-tarjeta-regalo .bb-ventajas li:first-child { display: none !important; }

/* Galería: imagen centrada dentro del panel */
.woocommerce-product-gallery__image img { margin: 0 auto; }

/* «Consultar precio» */
.bb-consultar-precio {
	font-family: var(--bb-font-ui);
	font-size: .85em;
	letter-spacing: 1px;
	color: var(--bb-dark);
}
a.bb-consultar-precio { text-decoration: underline; }

/* ---------- Carrito flotante ---------- */

.bb-cart-fab {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	background: var(--bb-dark);
	color: var(--bb-white);
	box-shadow: 0 6px 20px rgba(66, 63, 64, .25);
	cursor: pointer;
	transition: transform .2s ease;
}
.bb-cart-fab:hover { transform: translateY(-2px); }
.bb-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--bb-accent);
	color: var(--bb-dark);
	font: 600 12px/22px var(--bb-font-ui);
	text-align: center;
}
.bb-cart-fab.is-empty .bb-cart-count { display: none; }

.bb-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(66, 63, 64, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.bb-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	background: var(--bb-white);
	color: var(--bb-dark);
	font-family: var(--bb-font-body);
	box-shadow: -10px 0 30px rgba(66, 63, 64, .15);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s ease, visibility .3s ease;
}
.bb-cart-open .bb-cart-overlay { opacity: 1; visibility: visible; }
.bb-cart-open .bb-cart-drawer { transform: none; visibility: visible; }
.bb-cart-open body { overflow: hidden; }

.bb-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--bb-line);
	background: var(--bb-soft);
}
.bb-cart-drawer__title {
	margin: 0;
	padding: 0;
	font-family: var(--bb-font-title);
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--bb-dark);
}
.bb-cart-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--bb-dark);
	cursor: pointer;
}
.bb-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 24px 24px;
}
.bb-cart-drawer .woocommerce-mini-cart {
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.bb-cart-drawer .woocommerce-mini-cart-item {
	position: relative;
	min-height: 96px;
	margin: 0 !important;
	padding: 14px 40px 14px 88px !important;
	border-bottom: 1px solid var(--bb-line);
	list-style: none;
}
.bb-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
	display: block !important;
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-body);
	font-size: 16px;
	font-weight: 400 !important;
	line-height: 1.4;
}
.bb-cart-drawer .woocommerce-mini-cart-item img {
	position: absolute;
	top: 12px;
	left: 0;
	width: 72px !important;
	height: 72px !important;
	margin: 0 !important;
	padding: 6px;
	background: var(--bb-soft);
	object-fit: contain;
	float: none !important;
	box-shadow: none !important;
}
.bb-cart-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 4px;
	font-family: var(--bb-font-ui);
	font-size: 14px;
	color: var(--bb-dark);
}
.bb-cart-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	color: var(--bb-dark) !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}
.bb-cart-drawer .woocommerce-mini-cart-item a.remove:hover { background: var(--bb-soft); }
.bb-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 18px 0 !important;
	font-family: var(--bb-font-ui);
	font-size: 16px;
	color: var(--bb-dark);
}
.bb-cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 10px;
	margin: 0;
}
.bb-cart-drawer .woocommerce-mini-cart__buttons .button { width: 100%; margin: 0 !important; }
.bb-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 32px 0 16px;
	text-align: center;
	font-size: 16px;
}
.bb-cart-empty-cta { text-align: center; }

/* ---------- Carrito y pago (bloques de WooCommerce) ---------- */

.wc-block-cart,
.wc-block-checkout {
	color: var(--bb-dark);
	font-family: var(--bb-font-body);
}
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart-items__header,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--bb-font-ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--bb-dark) !important;
}
.wc-block-components-checkout-step__title { font-size: 15px !important; }

/* Resumen lateral como tarjeta */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar .wc-block-components-checkout-order-summary__content,
.wc-block-checkout__sidebar {
	background: var(--bb-soft);
}
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout__sidebar { padding: 24px !important; }

.wc-block-components-product-name {
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-body);
	font-size: 17px !important;
	text-decoration: none !important;
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	background: var(--bb-soft);
	object-fit: contain;
}
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
	font-family: var(--bb-font-ui);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 18px !important;
	font-weight: 500 !important;
}

/* Cantidad en el carrito */
.wc-block-components-quantity-selector {
	border-radius: 0 !important;
	border-color: var(--bb-line) !important;
}
.wc-block-components-quantity-selector::after { border: 0 !important; }
.wc-block-components-quantity-selector__button { color: var(--bb-dark) !important; }

/* Campos */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-form .wc-block-components-text-input input {
	border-radius: 0 !important;
	border-color: var(--bb-line) !important;
	color: var(--bb-dark) !important;
}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--bb-dark) !important;
	box-shadow: 0 0 0 1px var(--bb-dark) !important;
}
.wc-block-checkout input[type="radio"],
.wc-block-checkout input[type="checkbox"] { accent-color: var(--bb-dark); }
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option { border-radius: 0 !important; }

/* Botón principal a todo el ancho */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; min-height: 56px; }

/* ---------- Mi cuenta (clásico) ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 1px solid var(--bb-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { padding: 0 !important; border-bottom: 1px solid var(--bb-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 18px;
	color: var(--bb-dark);
	font-family: var(--bb-font-ui);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--bb-soft); font-weight: 600; }
.woocommerce-account .woocommerce form .input-text {
	min-height: var(--bb-control-h);
	padding: 0 14px !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 0 !important;
	background: var(--bb-white) !important;
	color: var(--bb-dark) !important;
}

/* Avisos de WooCommerce (Divi los pinta con texto blanco sobre el azul de acento: no pasa AA) */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border-radius: 0 !important;
	font-family: var(--bb-font-body);
}
#page-container .woocommerce-message,
#page-container .woocommerce-info {
	padding: 16px 20px !important;
	border-left: 4px solid var(--bb-accent) !important;
	background: var(--bb-soft) !important;
	color: var(--bb-dark) !important;
	font-size: 16px !important;
}
#page-container .woocommerce-message a:not(.button),
#page-container .woocommerce-info a:not(.button) { color: var(--bb-dark) !important; text-decoration: underline; }
#page-container .woocommerce-message .button.wc-forward { display: none !important; }

@media (max-width: 767px) {
	body.woocommerce-page #page-container ul.products li.product .button,
	#page-container ul.products li.product .button {
		padding: 0 6px !important;
		font-size: 10px !important;
		letter-spacing: .8px !important;
	}
	.bb-cart-fab { left: 16px; bottom: 16px; width: 54px; height: 54px; }
	.bb-cart-drawer__header { padding: 16px; }
	.bb-cart-drawer__body { padding: 8px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-cart-drawer, .bb-cart-overlay, .bb-cart-fab { transition: none; }
}

/* ---------- Canjear tarjeta regalo (carrito y pago) ---------- */

#pwgc-redeem-gift-card-number {
	width: 100%;
	min-height: 48px;
	margin: 6px 0 10px;
	padding: 0 14px !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 0 !important;
	background: var(--bb-white) !important;
	color: var(--bb-dark) !important;
	font-family: var(--bb-font-ui);
	font-size: 15px;
	letter-spacing: 1px;
}
#pwgc-redeem-gift-card-number:focus {
	border-color: var(--bb-dark) !important;
	box-shadow: 0 0 0 1px var(--bb-dark) !important;
	outline: none;
}
.pwgc-apply-gift-card-button.wc-block-components-button,
#page-container .pwgc-apply-gift-card-button {
	width: 100%;
	min-height: 48px !important;
	background: var(--bb-white) !important;
}
.pwgc-apply-gift-card-button.wc-block-components-button:hover,
#page-container .pwgc-apply-gift-card-button:hover { background: var(--bb-dark) !important; }

/* Mi cuenta: enlaces de pedidos con contraste */
.woocommerce-account #page-container .woocommerce-MyAccount-content a:not(.button) {
	color: var(--bb-dark);
	text-decoration: underline;
}