/* =========================================================================
   LIBERATION STOREFRONT — brand design layer for WooCommerce dynamic pages
   Scoped under body.lp-storefront. Sizes in px (Bricks sets html to 62.5%).
   ========================================================================= */

body.lp-storefront {
	--lp-black:   #0b0b0b;
	--lp-ink:     #17171b;
	--lp-red:     #e01e1e;
	--lp-red-dk:  #b81717;
	--lp-white:   #ffffff;
	--lp-bg:      #f5f5f6;
	--lp-card:    #ffffff;
	--lp-line:    #e6e6e8;
	--lp-muted:   #6b6b70;
	--lp-radius:  14px;
	--lp-shadow:  0 6px 24px rgba(11,11,11,.08);
	--lp-font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body.lp-storefront,
body.lp-storefront .woocommerce,
body.lp-storefront .wc-block-components-product-name {
	font-family: var(--lp-font);
	color: var(--lp-ink);
}

body.lp-storefront.woocommerce-page,
body.lp-storefront.woocommerce-cart,
body.lp-storefront.woocommerce-checkout,
body.lp-storefront.single-product,
body.lp-storefront.post-type-archive-product,
body.lp-storefront.tax-product_cat {
	background: var(--lp-bg);
}

/* Content width breathing room */
body.lp-storefront .woocommerce,
body.lp-storefront .wp-block-woocommerce-cart,
body.lp-storefront .wp-block-woocommerce-checkout {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Buttons (global brand) ---------- */
body.lp-storefront .button,
body.lp-storefront button.button,
body.lp-storefront a.button,
body.lp-storefront .wc-block-components-button,
body.lp-storefront .single_add_to_cart_button,
body.lp-storefront [type="submit"].button {
	background: var(--lp-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: .3px;
	text-transform: uppercase;
	font-size: 14px !important;
	padding: 14px 30px !important;
	line-height: 1 !important;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	box-shadow: 0 4px 14px rgba(224,30,30,.28);
	cursor: pointer;
}
body.lp-storefront .button:hover,
body.lp-storefront button.button:hover,
body.lp-storefront a.button:hover,
body.lp-storefront .wc-block-components-button:hover,
body.lp-storefront .single_add_to_cart_button:hover {
	background: var(--lp-red-dk) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(224,30,30,.34);
}
/* secondary / ghost buttons */
body.lp-storefront .wc-block-cart__submit-button,
body.lp-storefront .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	width: 100%;
}
body.lp-storefront .added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--lp-red);
}

/* ---------- Notices ---------- */
body.lp-storefront .woocommerce-message,
body.lp-storefront .woocommerce-info,
body.lp-storefront .woocommerce-error,
body.lp-storefront .wc-block-components-notice-banner {
	border-radius: 12px !important;
	border: 1px solid var(--lp-line) !important;
	border-left: 4px solid var(--lp-red) !important;
	background: #fff !important;
	box-shadow: var(--lp-shadow);
	font-size: 15px;
}

/* ---------- Breadcrumb ---------- */
body.lp-storefront .woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--lp-muted);
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 26px;
}
body.lp-storefront .woocommerce-breadcrumb a {
	color: var(--lp-muted);
	text-decoration: none;
}
body.lp-storefront .woocommerce-breadcrumb a:hover { color: var(--lp-red); }

/* =========================================================================
   SINGLE PRODUCT
   ========================================================================= */
body.lp-storefront.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) {
	body.lp-storefront.single-product div.product {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Gallery — framed card, vial cropped into focus like the home cards.
   Custom .lp-gallery markup (background-image crop = reliable + matches home). */
body.lp-storefront .lp-gallery {
	width: 100%;
	margin: 0;
	background: linear-gradient(180deg,#fff 0%,#f2f2f4 100%);
	border: 1px solid var(--lp-line);
	border-radius: 20px;
	box-shadow: var(--lp-shadow);
	overflow: hidden;
	position: relative;
	aspect-ratio: 3 / 4;
}
body.lp-storefront .lp-gallery__img {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	/* mismo encuadre medido que las tarjetas del listado */
	background-size: 202.7%;
	background-position: 12.2% 97.4%;
}
/* Branded text placeholder for photoless products */
body.lp-storefront .lp-gallery__ph {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 2px; text-align: center;
}
body.lp-storefront .lp-ph-red  { color: var(--lp-red);  font-weight: 900; font-size: 30px; letter-spacing: 2px; line-height: 1; }
body.lp-storefront .lp-ph-dark { color: var(--lp-black); font-weight: 900; font-size: 30px; letter-spacing: 6px; line-height: 1; }
body.lp-storefront .lp-gallery__ph small { margin-top: 14px; color: var(--lp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* Never crop/zoom the WooCommerce placeholder inside cards */
body.lp-storefront .woocommerce-placeholder {
	transform: none !important;
	object-fit: contain !important;
	padding: 22% !important;
	opacity: .28 !important;
	background: linear-gradient(180deg,#fff,#f2f2f4) !important;
}

/* Summary */
body.lp-storefront .single-product .summary.entry-summary {
	margin: 0 !important;
	padding: 4px 0;
}
body.lp-storefront .lp-product-eyebrow {
	display: inline-block;
	color: var(--lp-red);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
body.lp-storefront .product_title.entry-title {
	font-size: 38px !important;
	line-height: 1.1 !important;
	font-weight: 800 !important;
	color: var(--lp-black) !important;
	margin: 0 0 16px !important;
	letter-spacing: -.5px;
}
body.lp-storefront .single-product .summary p.price,
body.lp-storefront .single-product .summary .price {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: var(--lp-black) !important;
	margin: 0 0 20px !important;
}
body.lp-storefront .single-product .summary .price del { color: var(--lp-muted); font-weight: 500; }
body.lp-storefront .single-product .summary .price ins { text-decoration: none; color: var(--lp-red); }

/* Trust badges */
body.lp-storefront .lp-trust-badges {
	list-style: none;
	margin: 0 0 24px;
	padding: 20px 0;
	border-top: 1px solid var(--lp-line);
	border-bottom: 1px solid var(--lp-line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 22px;
}
body.lp-storefront .lp-trust-badges li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lp-ink);
	margin: 0;
}
body.lp-storefront .lp-trust-badges svg { color: var(--lp-red); flex: 0 0 auto; }

/* Short description */
body.lp-storefront .single-product .summary .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.7;
	color: #3a3a40;
	margin-bottom: 26px;
}

/* Stock */
body.lp-storefront .single-product .summary .stock.in-stock {
	color: #157a3d;
	font-weight: 700;
	font-size: 14px;
}
body.lp-storefront .single-product .summary .stock.out-of-stock { color: var(--lp-red); font-weight: 700; }

/* Cart form: quantity + add to cart */
body.lp-storefront .single-product form.cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin: 0 0 22px !important;
	flex-wrap: wrap;
}
body.lp-storefront .single-product form.cart .quantity {
	display: flex;
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
body.lp-storefront .single-product form.cart .quantity input.qty {
	width: 64px;
	border: none !important;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	background: transparent;
	color: var(--lp-black);
}
body.lp-storefront .single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 200px;
}

/* Research-use notice */
body.lp-storefront .lp-research-notice {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-left: 4px solid var(--lp-black);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--lp-muted);
	margin-bottom: 22px;
}
body.lp-storefront .lp-research-notice strong { color: var(--lp-black); }

/* Product meta */
body.lp-storefront .single-product .product_meta {
	font-size: 13.5px;
	color: var(--lp-muted);
	border-top: 1px solid var(--lp-line);
	padding-top: 16px;
}
body.lp-storefront .single-product .product_meta a { color: var(--lp-ink); text-decoration: none; }
body.lp-storefront .single-product .product_meta a:hover { color: var(--lp-red); }

/* Tabs */
body.lp-storefront .woocommerce-tabs {
	margin-top: 60px;
	grid-column: 1 / -1;
}
body.lp-storefront .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--lp-line);
	padding: 0;
	margin: 0 0 26px;
	display: flex;
	gap: 10px;
}
body.lp-storefront .woocommerce-tabs ul.tabs::before { display: none; }
body.lp-storefront .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.lp-storefront .woocommerce-tabs ul.tabs li::before,
body.lp-storefront .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.lp-storefront .woocommerce-tabs ul.tabs li a {
	padding: 12px 4px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 13.5px;
	color: var(--lp-muted) !important;
	border-bottom: 3px solid transparent;
	margin-right: 22px;
}
body.lp-storefront .woocommerce-tabs ul.tabs li.active a {
	color: var(--lp-black) !important;
	border-bottom-color: var(--lp-red);
}
body.lp-storefront .woocommerce-tabs .panel h2 { font-size: 22px; font-weight: 800; color: var(--lp-black); }
body.lp-storefront .woocommerce-tabs .panel { font-size: 16px; line-height: 1.75; color: #3a3a40; }

/* Related products heading */
body.lp-storefront .related.products,
body.lp-storefront .upsells.products { grid-column: 1 / -1; margin-top: 30px; }
body.lp-storefront .related.products > h2,
body.lp-storefront .upsells.products > h2 {
	font-size: 26px; font-weight: 800; color: var(--lp-black); margin-bottom: 24px;
}

/* =========================================================================
   PRODUCT CARDS — classic Woo grid (ul.products) used by shop + archives
   ========================================================================= */
body.lp-storefront ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	align-items: stretch !important;
}
body.lp-storefront ul.products::before,
body.lp-storefront ul.products::after { display: none !important; }
@media (max-width: 1024px) { body.lp-storefront ul.products { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 760px)  { body.lp-storefront ul.products { grid-template-columns: repeat(2,1fr) !important; } }

body.lp-storefront ul.products li.product {
	background: var(--lp-card);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	padding: 0 0 20px !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	text-align: left;
	/* 2026-08-03: la tarjeta era flex-column y el enlace interior se encogia,
	   dejando titulo y precio fuera de su caja y encima del boton.
	   Rejilla de dos filas: contenido arriba, boton abajo, sin encogimiento. */
	display: grid;
	grid-template-rows: auto 1fr;
}
body.lp-storefront ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--lp-shadow);
	border-color: #d6d6da;
}
/* card link wraps image + title + price; keep it a clean vertical stack */
body.lp-storefront ul.products li.product > a:first-of-type {
	display: block;
	text-decoration: none;
}
/* card image: background-crop of the composed vial (reliable, matches home) */
body.lp-storefront .lp-loop-img {
	/* Encuadre medido sobre la plantilla real de las fotos (4-ago-2026).
	   Las 16 fotos son idénticas en geometría: sobre el cuadrado de 600 px el
	   vial ocupa x 100-270 / y 205-590 y la mascota arranca en x=339.
	   Ventana visible: 296 x 395 px de origen, centrada en el vial -> en un
	   marco 3:4 son 202.7% de zoom colocados en 12.2% / 97.4%.
	   Antes: 224% en 15%/56%, que cortaba el tapón y colaba la mascota. */
	aspect-ratio: 3 / 4;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 202.7%;
	background-position: 12.2% 97.4%;
	background-color: #fff;
	border-bottom: 1px solid var(--lp-line);
	margin-bottom: 16px;
}
body.lp-storefront .lp-loop-img--ph {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	background-image: none;
}
body.lp-storefront .lp-loop-img--ph .lp-ph-red  { font-size: 20px; font-weight: 900; letter-spacing: 1px; color: var(--lp-red); }
body.lp-storefront .lp-loop-img--ph .lp-ph-dark { font-size: 20px; font-weight: 900; letter-spacing: 4px; color: var(--lp-black); }
body.lp-storefront ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--lp-black) !important;
	padding: 0 18px !important;
	margin: 0 0 8px !important;
	line-height: 1.35;
}
body.lp-storefront ul.products li.product .price {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--lp-black) !important;
	padding: 0 18px;
	margin: 0 0 14px;
	display: block;
}
body.lp-storefront ul.products li.product .price del { color: var(--lp-muted); font-weight: 500; }
/* hide the empty subscription price duplicate (products are one-time purchases) */
body.lp-storefront .subscription-period-prices,
body.lp-storefront .subscription-details { display: none !important; }
body.lp-storefront ul.products li.product .button {
	margin: 0 18px !important;
	align-self: end;
	width: calc(100% - 36px);
	text-align: center;
	justify-content: center;
}
body.lp-storefront ul.products li.product .lp-gallery__ph .lp-ph-red,
body.lp-storefront ul.products li.product .lp-gallery__ph .lp-ph-dark { font-size: 18px; letter-spacing: 1px; }
/* archive toolbar */
body.lp-storefront .woocommerce-result-count {
	font-size: 13px; color: var(--lp-muted); text-transform: uppercase; letter-spacing: .4px;
}
body.lp-storefront .woocommerce-ordering select,
body.lp-storefront .orderby {
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	background: #fff;
	color: var(--lp-ink);
}
body.lp-storefront .woocommerce-products-header__title,
body.lp-storefront .page-title {
	font-size: 32px; font-weight: 800; color: var(--lp-black); letter-spacing: -.5px;
}

/* =========================================================================
   CART BLOCK
   ========================================================================= */
body.lp-storefront .wc-block-cart {
	background: transparent;
}
body.lp-storefront .wc-block-cart-items {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow);
	overflow: hidden;
}
body.lp-storefront .wc-block-cart-items__header {
	background: var(--lp-black);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 12px;
}
body.lp-storefront .wc-block-cart-item__image {
	border-radius: 10px;
	border: 1px solid var(--lp-line);
	overflow: hidden;
	background: linear-gradient(180deg,#fff,#f2f2f4);
	aspect-ratio: 1 / 1;
}
body.lp-storefront .wc-block-cart-item__image img {
	border-radius: 0;
	border: none;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 16% 54%;
	transform: scale(2.1);
	transform-origin: 16% 54%;
}
body.lp-storefront .wc-block-cart-item__image .woocommerce-placeholder {
	transform: none !important;
	object-fit: contain !important;
	padding: 18% !important;
	opacity: .3 !important;
}
body.lp-storefront .wc-block-components-product-name {
	font-weight: 700 !important;
	color: var(--lp-black) !important;
	text-decoration: none;
}
body.lp-storefront .wc-block-components-totals-wrapper,
body.lp-storefront .wc-block-cart__sidebar .wc-block-components-totals-item {
	font-size: 15px;
}
body.lp-storefront .wc-block-cart__sidebar .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow);
	padding: 8px 20px 20px;
}
body.lp-storefront .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--lp-black);
	font-weight: 800;
}

/* =========================================================================
   CHECKOUT BLOCK
   ========================================================================= */
body.lp-storefront .wc-block-checkout__main {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow);
	padding: 30px 34px;
}
body.lp-storefront .wc-block-components-checkout-step__title,
body.lp-storefront .wc-block-checkout__sidebar .wc-block-components-title {
	font-weight: 800 !important;
	color: var(--lp-black) !important;
}
body.lp-storefront .wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow);
}
body.lp-storefront .wc-block-components-text-input input,
body.lp-storefront .wc-block-components-address-form input,
body.lp-storefront .wc-block-components-select select {
	border-radius: 10px !important;
}
body.lp-storefront .wc-block-components-text-input.is-active label,
body.lp-storefront .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	font-weight: 700;
}
body.lp-storefront .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	width: 100%;
}
/* Order summary line-item images — crop to vial like everywhere else */
body.lp-storefront .wc-block-components-order-summary-item__image {
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--lp-line);
	background: linear-gradient(180deg,#fff,#f2f2f4);
	aspect-ratio: 1 / 1;
}
body.lp-storefront .wc-block-components-order-summary-item__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 16% 54%;
	transform: scale(2.1);
	transform-origin: 16% 54%;
}
body.lp-storefront .wc-block-components-order-summary-item__image .woocommerce-placeholder {
	transform: none !important; object-fit: contain !important; padding: 16% !important; opacity: .3 !important;
}
/* the small quantity bubble on order-summary items */
body.lp-storefront .wc-block-components-order-summary-item__quantity {
	background: var(--lp-black) !important;
	color: #fff !important;
	border-color: var(--lp-black) !important;
}


/* =========================================================================
   RITMO VERTICAL DE LOS LISTADOS  (4-ago-2026)
   El archivo de categoría terminaba con la rejilla pegada al pie: cero aire.
   ========================================================================= */
body.lp-storefront.woocommerce-page #brx-content,
body.lp-storefront.post-type-archive-product #brx-content,
body.lp-storefront.tax-product_cat #brx-content {
	padding-bottom: 88px;
}
@media (max-width: 760px) {
	body.lp-storefront.woocommerce-page #brx-content,
	body.lp-storefront.post-type-archive-product #brx-content,
	body.lp-storefront.tax-product_cat #brx-content {
		padding-bottom: 56px;
	}
}
/* el marcador de "foto pendiente" se centra en el marco vertical nuevo */
body.lp-storefront .lp-loop-img--ph {
	background-color: #f2f2f4;
}

/* Tarjetas en movil: con dos columnas el texto y el boton iban muy apretados
   y "ADD TO CART" se partia en dos lineas. */
@media (max-width: 760px) {
	body.lp-storefront ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px !important;
		padding: 0 14px !important;
	}
	body.lp-storefront ul.products li.product .price {
		font-size: 16px !important;
		padding: 0 14px;
	}
	body.lp-storefront ul.products li.product .button {
		font-size: 13px !important;
		letter-spacing: .2px !important;
		white-space: nowrap;
		margin: 0 14px !important;
		width: calc(100% - 28px);
	}
}