/* ==========================================================================
   wazo-theme · assets/css/tienda.css
   Estilos de WooCommerce que no llegan con app.min.css (el CSS base del tema
   original de Jumpseller). Se cargan SIEMPRE después de app.min.css.

   Orden de carga requerido:
       1. app.min.css      (base del tema Jumpseller: botones, bloques, tabs…)
       2. tienda.css       (este archivo: tokens, grilla, tarjeta, ficha)

   Contenido:
       01. Tipografías y tokens de marca
       02. Puente de variables que consume app.min.css
       03. Base, contenedores y utilidades
       04. Migas de pan
       05. Encabezado de categoría
       06. Barra de herramientas (conteo + orden)
       07. Grilla del listado
       08. Tarjeta de producto (.product-block)
       09. Paginación
       10. Avisos de WooCommerce
       11. Ficha de producto: layout y galería
       12. Ficha de producto: columna de información
       13. Ficha de producto: formulario de compra
       14. Ficha de producto: pestañas
       15. Responsive
   ========================================================================== */

/* Tipografías: las encola functions.php (handle "wazo-fonts"). */

/* --------------------------------------------------------------------------
   01. Tipografías y tokens de marca
   -------------------------------------------------------------------------- */
:root {
	--wazo-navy: #2e376a;
	--wazo-navy-dark: #232b54;
	--wazo-green: #00b047;
	--wazo-green-dark: #00793e;
	--wazo-amber: #ffb41e;
	--wazo-ink: #1f2540;
	--wazo-gray: #5b6478;
	--wazo-muted: #8a93a8;
	--wazo-line: #e3e7f0;
	--wazo-bg: #f5f7fb;
	--wazo-white: #fff;

	--wazo-font-text: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wazo-font-display: "Archivo Black", "Karla", system-ui, sans-serif;

	/* Mismos valores que :root de wazo-extra.css (fuente de verdad del tema). */
	--wazo-radius: 6px;
	--wazo-radius-sm: 5px;
	--wazo-gap: 22px;
	--wazo-control-h: 48px;
	--wazo-shadow: 0 2px 10px rgba(46, 55, 106, 0.06);
	--wazo-shadow-hover: 0 10px 24px rgba(46, 55, 106, 0.12);
	--wazo-trsn: 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   02. Puente de variables que consume app.min.css
   El CSS del tema original espera estas variables definidas en el HTML del
   tema (bundle de Jumpseller). Aquí se declaran una sola vez, acotadas a la
   zona de la tienda para no contaminar header/footer.
   -------------------------------------------------------------------------- */
.wazo-tienda {
	--font-main: var(--wazo-font-text);
	--font-secondary: var(--wazo-font-text);
	--font-buttons: var(--wazo-font-text);
	--font-store-name: var(--wazo-font-display);
	--font-base-size: 14px;

	--color-background: #fff;
	--color-background-contrast: #1f2540;
	--color-main: #2e376a;
	--color-main-op05: rgba(46, 55, 106, 0.05);
	--color-main-op1: rgba(46, 55, 106, 0.1);
	--color-main-op2: rgba(46, 55, 106, 0.2);
	--color-main-op3: rgba(46, 55, 106, 0.3);
	--color-main-op5: rgba(46, 55, 106, 0.5);
	--color-main-op7: rgba(46, 55, 106, 0.7);
	--color-secondary: #3d4873;
	--color-secondary-op1: rgba(61, 72, 115, 0.12);
	--color-links: var(--wazo-green-dark);
	--color-links-hover: var(--wazo-navy);
	--color-discount: var(--wazo-green);
	--color-discount-text: #fff;
	--color-button-main-bg: var(--wazo-green);
	--color-button-main-bg-hover: var(--wazo-green-dark);
	--color-button-main-text: #fff;
	--color-button-secondary-bg: var(--wazo-navy);
	--color-button-secondary-bg-hover: var(--wazo-navy-dark);
	--color-button-secondary-text: #fff;
	--color-border: var(--wazo-line);
	--color-overlay: #fff;

	--radius-style: var(--wazo-radius);
	--pb-radius-style: var(--wazo-radius);
	--pb-radius-style-inner: var(--wazo-radius-sm);
	--button-style: var(--wazo-radius-sm);
	--button-transform: uppercase;

	--pb-padding: 12px;
	--pb-alignment: start;
	--pb-object-fit: contain;
	--pb-image-dimension: 1 / 1;
	--pb-name-weight: 500;
	--pb-name-text-transform: initial;
	--pb-name-spacing: 0;
	--pb-font-size-desktop: 14px;
	--pb-font-size-mobile: 14px;
	--pb-card-border-opacity: 0; /* el borde lo pinta .product-block__wrapper (evita borde doble) */
	--pb-color-label-status-bg: var(--wazo-green);
	--pb-color-label-status-text: #fff;
	--pb-color-label-status-border: var(--wazo-green);

	--theme-columns-by-2: 50%;
	--theme-columns-by-3: 33.3333%;
	--theme-columns-by-4: 25%;
	--section-content-static-padding: 12px;
	--section-content-padding: 12px;
	--section-content-margin: -12px;
	--theme-section-padding: 32px;
	--theme-block-padding: 12px;
	--theme-heading-gap-desktop: 24px;

	color: var(--wazo-ink);
	font-family: var(--wazo-font-text);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	background: var(--wazo-white);
}

/* --------------------------------------------------------------------------
   03. Base, contenedores y utilidades
   El ancho máximo y el padding lateral los pone .wazo-container, que imprime
   functions.php en woocommerce_before_main_content (max-width 1280px).
   Aquí .container y las columnas quedan neutros para no duplicar padding y
   .row no usa los márgenes negativos de Bootstrap.
   -------------------------------------------------------------------------- */
#wazo-tienda > .wazo-container {
	padding-right: 32px;
	padding-left: 32px;
}

#wazo-tienda .container {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

#wazo-tienda .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0;
	margin-left: 0;
}

#wazo-tienda .col-12,
#wazo-tienda .col-md,
#wazo-tienda .col-md-11,
#wazo-tienda .col-lg-10 {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-right: 0;
	padding-left: 0;
}

#wazo-tienda .justify-content-center {
	justify-content: center;
}

#wazo-tienda .justify-content-start {
	justify-content: flex-start;
}

#wazo-tienda .text-center {
	text-align: center;
}

#wazo-tienda .text-start {
	text-align: left;
}

#wazo-tienda .check-empty:empty {
	display: none;
}

#wazo-tienda .theme-section {
	padding-top: 32px;
	padding-bottom: 32px;
}

#wazo-tienda .theme-section__container {
	margin-right: auto;
	margin-left: auto;
}

#wazo-tienda .theme-section__column {
	position: relative;
}

@media (min-width: 768px) {
	#wazo-tienda .col-md {
		flex: 1 1 0%;
		max-width: 100%;
	}

	#wazo-tienda .col-md-11 {
		flex: 0 0 auto;
		width: 91.6667%;
	}
}

@media (min-width: 992px) {
	#wazo-tienda .col-lg-10 {
		flex: 0 0 auto;
		width: 83.3333%;
	}
}

#wazo-tienda .screen-reader-text,
#wazo-tienda .sr-only {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

#wazo-tienda a {
	color: var(--wazo-navy);
	text-decoration: none;
}

#wazo-tienda a:hover,
#wazo-tienda a:focus {
	color: var(--wazo-green-dark);
}

/* --------------------------------------------------------------------------
   04. Migas de pan
   -------------------------------------------------------------------------- */
#wazo-tienda .wazo-breadcrumbs-wrap {
	padding-top: 14px;
}

#wazo-tienda .theme-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--wazo-muted);
	font-size: 13px;
	line-height: 1.4;
}

#wazo-tienda .theme-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wazo-muted);
}

#wazo-tienda .theme-breadcrumbs a {
	color: var(--wazo-muted);
	text-decoration: none;
}

#wazo-tienda .theme-breadcrumbs a:hover {
	color: var(--wazo-navy);
	text-decoration: underline;
}

#wazo-tienda .theme-breadcrumbs__arrow {
	color: #b9c0d0;
}

#wazo-tienda .theme-breadcrumbs__item:last-child,
#wazo-tienda .theme-breadcrumbs .breadcrumb-leaf {
	color: var(--wazo-navy);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   05. Encabezado de categoría
   -------------------------------------------------------------------------- */
#wazo-tienda .wazo-heading {
	padding-top: 8px;
	padding-bottom: 0;
}

#wazo-tienda .theme-section__heading {
	width: 100%;
}

#wazo-tienda .theme-section__title,
#wazo-tienda .wazo-heading__title {
	margin: 0;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-text);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

#wazo-tienda .theme-section__underline {
	position: relative;
	width: 100%;
	height: 2px;
	margin: 16px 0 0;
	background: var(--wazo-line);
}

#wazo-tienda .theme-section__underline::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
	height: 2px;
	background: var(--wazo-green);
	content: "";
}

#wazo-tienda .theme-section__description {
	margin-top: 18px;
	color: var(--wazo-gray);
	font-size: 15px;
	line-height: 1.6;
}

#wazo-tienda .theme-section__description p {
	margin: 0 0 8px;
}

/* --------------------------------------------------------------------------
   06. Barra de herramientas (conteo + orden)
   woocommerce_result_count() y woocommerce_catalog_ordering()
   -------------------------------------------------------------------------- */
#wazo-tienda .wazo-feed {
	padding-top: 8px;
}

#wazo-tienda .wazo-feed__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 8px 0 20px;
}

#wazo-tienda .woocommerce-result-count {
	margin: 0;
	color: var(--wazo-muted);
	font-size: 13px;
}

#wazo-tienda .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 auto;
}

#wazo-tienda .woocommerce-ordering::before {
	flex: 0 0 auto;
	color: var(--wazo-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	content: "Ordenar por";
}

#wazo-tienda .woocommerce-ordering select {
	/* !important: app.min.css fuerza appearance:auto y quita bordes a los
	   <select> dentro de formularios. */
	min-width: 210px;
	height: 42px !important;
	padding: 0 36px 0 14px !important;
	border: 1px solid #cfd6e4 !important;
	border-radius: var(--wazo-radius-sm) !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232E376A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	color: var(--wazo-navy) !important;
	font-family: var(--wazo-font-text);
	font-size: 13px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

#wazo-tienda .woocommerce-ordering select:focus {
	border-color: var(--wazo-navy);
	outline: 2px solid rgba(46, 55, 106, 0.15);
}

/* --------------------------------------------------------------------------
   07. Grilla del listado
   woocommerce_product_loop_start() imprime <ul class="products columns-N">.
   wazo-extra.css trae reglas para el loop por defecto de WooCommerce
   (.woocommerce ul.products / li.product) con !important; aquí se neutralizan
   con la especificidad del ID para que mande el diseño de tarjeta propio.
   -------------------------------------------------------------------------- */
#wazo-tienda .products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--wazo-gap) !important;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

#wazo-tienda .products::before,
#wazo-tienda .products::after {
	content: none;
}

#wazo-tienda .products > li {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	list-style: none;
	transform: none !important;
}

#wazo-tienda .products > li:hover {
	box-shadow: none !important;
	transform: none !important;
}

#wazo-tienda .products > li img {
	height: auto;
	margin-bottom: 0 !important;
}

#wazo-tienda .products > li .woocommerce-loop-product__title {
	min-height: 0;
	margin: 0;
}

/* Neutraliza el ancho porcentual que app.min.css aplica por data-columns-desktop */
#wazo-tienda .products > li > .product-block {
	width: 100% !important;
	max-width: 100% !important;
	padding-right: 0;
	padding-left: 0;
	float: none !important;
}

/* --------------------------------------------------------------------------
   08. Tarjeta de producto (.product-block)
   -------------------------------------------------------------------------- */
#wazo-tienda .product-block {
	display: flex;
	height: 100%;
	text-align: left;
}

#wazo-tienda .product-block__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: 1px solid var(--wazo-line);
	border-radius: var(--wazo-radius);
	background: #fff;
	box-shadow: none;
	transition: border-color var(--wazo-trsn), box-shadow var(--wazo-trsn), transform var(--wazo-trsn);
}

#wazo-tienda .product-block:hover .product-block__wrapper,
#wazo-tienda .product-block:focus-within .product-block__wrapper {
	border-color: #c6cee0;
	box-shadow: var(--wazo-shadow-hover);
	transform: translateY(-2px);
}

/* Galería: cuadrado 1:1 con padding interno, como data-card-image-padding */
#wazo-tienda .product-block__gallery {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: var(--pb-padding) var(--pb-padding) 0;
	background: #fff;
}

#wazo-tienda .product-block__anchor {
	position: relative;
	z-index: 2;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
}

#wazo-tienda .product-block__labels {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

#wazo-tienda .product-block__label {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--wazo-green);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

#wazo-tienda .product-block__canvas {
	position: absolute;
	z-index: 1;
	top: var(--pb-padding);
	right: var(--pb-padding);
	bottom: 0;
	left: var(--pb-padding);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--pb-radius-style-inner);
}

#wazo-tienda .product-block__image,
#wazo-tienda .product-block__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.35s ease;
}

#wazo-tienda .product-block:hover .product-block__image {
	transform: scale(1.04);
}

/* Contenido: SKU/categoría, nombre, precio */
#wazo-tienda .product-block__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
	padding: 12px var(--pb-padding) 0;
}

#wazo-tienda .product-block__attributes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--wazo-muted);
	font-size: 11px;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

#wazo-tienda .product-block__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

#wazo-tienda .product-block__name {
	display: inline;
	color: var(--wazo-navy);
	text-decoration: none;
}

#wazo-tienda .product-block__name:hover {
	color: var(--wazo-green-dark);
	text-decoration: underline;
}

#wazo-tienda .product-block__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: auto;
	padding-top: 2px;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-text);
	line-height: 1.2;
}

#wazo-tienda .product-block__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: var(--wazo-navy);
	font-size: 16px;
	font-weight: 700;
}

#wazo-tienda .product-block__price .woocommerce-Price-amount {
	color: inherit;
}

#wazo-tienda .product-block__price--old,
#wazo-tienda .product-block__price--old del {
	color: var(--wazo-muted);
	font-size: 12px;
	font-weight: 500;
}

#wazo-tienda .product-block__price--new,
#wazo-tienda .product-block__price--new ins {
	color: var(--wazo-green-dark);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

/* Botón de compra del listado */
#wazo-tienda .product-block__actions {
	display: flex;
	width: 100%;
	margin-top: 12px;
	padding: 0 var(--pb-padding) var(--pb-padding);
}

#wazo-tienda .product-block__form {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 8px;
}

#wazo-tienda .product-block__button,
#wazo-tienda .product-block__button.add_to_cart_button {
	position: relative;
	display: inline-flex;
	width: 100%;
	max-width: 100%;
	height: 42px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--wazo-radius-sm);
	background: var(--wazo-green);
	color: #fff;
	font-family: var(--wazo-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--wazo-trsn);
}

#wazo-tienda .product-block__button::before {
	/* El CSS base usa .button--style::before como capa de hover (position:absolute,
	   opacity:0); hay que devolverlo al flujo para que se vea el ícono. */
	position: static;
	inset: auto;
	z-index: auto;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	opacity: 1;
	content: "";
	-webkit-mask: var(--wazo-icon-cart) center / contain no-repeat;
	mask: var(--wazo-icon-cart) center / contain no-repeat;
}

#wazo-tienda .product-block__button:hover,
#wazo-tienda .product-block__button:focus {
	background: var(--wazo-green-dark);
	color: #fff;
}

#wazo-tienda .product-block__button.loading {
	opacity: 0.75;
}

#wazo-tienda .product-block__button.added::after {
	position: absolute;
	top: -8px;
	right: -6px;
	content: "✓";
	font-size: 14px;
}

#wazo-tienda .product-block__button--add-to-cart {
	--wazo-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3l-1 14H5L4 7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   09. Paginación
   -------------------------------------------------------------------------- */
#wazo-tienda .woocommerce-pagination {
	margin: 8px 0 40px;
}

#wazo-tienda .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

#wazo-tienda .woocommerce-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--wazo-line);
	border-radius: var(--wazo-radius-sm);
	background: #fff;
	color: var(--wazo-navy);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

#wazo-tienda .woocommerce-pagination .page-numbers:hover {
	border-color: var(--wazo-navy);
}

#wazo-tienda .woocommerce-pagination .page-numbers.current {
	border-color: var(--wazo-navy);
	background: var(--wazo-navy);
	color: #fff;
}

/* --------------------------------------------------------------------------
   10. Avisos de WooCommerce
   -------------------------------------------------------------------------- */
#wazo-tienda .woocommerce-message,
#wazo-tienda .woocommerce-info,
#wazo-tienda .woocommerce-error {
	margin: 18px 0;
	padding: 14px 18px 14px 46px;
	border: 1px solid var(--wazo-line);
	border-left: 4px solid var(--wazo-green);
	border-radius: var(--wazo-radius-sm);
	background: var(--wazo-bg);
	color: var(--wazo-ink);
	font-size: 14px;
	list-style: none;
}

#wazo-tienda .woocommerce-error {
	border-left-color: #d63638;
}

#wazo-tienda .woocommerce-info {
	border-left-color: var(--wazo-navy);
}

#wazo-tienda .woocommerce-message .button,
#wazo-tienda .woocommerce-info .button {
	float: right;
	margin-left: 12px;
	padding: 6px 14px;
	border-radius: var(--wazo-radius-sm);
	background: var(--wazo-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. Ficha de producto: layout y galería
   -------------------------------------------------------------------------- */
#wazo-tienda .product-page {
	padding-top: 10px;
	padding-bottom: 8px;
}

#wazo-tienda .product-page__wrapper {
	align-items: flex-start;
	gap: 32px;
}

#wazo-tienda .product-gallery {
	flex: 1 1 0;
	max-width: 50%;
}

#wazo-tienda .product-page__content {
	flex: 1 1 0;
	max-width: 50%;
}

#wazo-tienda .wazo-gal {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}

#wazo-tienda .product-gallery__thumbs {
	display: flex;
	flex: 0 0 84px;
	flex-direction: column;
	gap: 10px;
	width: 84px;
}

#wazo-tienda .product-gallery__thumb {
	overflow: hidden;
	width: 84px;
	height: 84px;
	padding: 4px;
	border: 1px solid var(--wazo-line);
	border-radius: var(--wazo-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--wazo-trsn), box-shadow var(--wazo-trsn);
}

#wazo-tienda .product-gallery__thumb:hover {
	border-color: #c6cee0;
}

#wazo-tienda .product-gallery__thumb.is-active {
	border-color: var(--wazo-green);
	box-shadow: 0 0 0 1px var(--wazo-green);
}

#wazo-tienda .product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#wazo-tienda .product-gallery__main {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--wazo-line);
	border-radius: var(--wazo-radius);
	background: #fff;
}

#wazo-tienda .product-gallery__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	pointer-events: none;
}

#wazo-tienda .product-gallery__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

#wazo-tienda .product-gallery__picture {
	width: 100%;
	height: 100%;
}

#wazo-tienda .product-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* --------------------------------------------------------------------------
   12. Ficha de producto: columna de información
   -------------------------------------------------------------------------- */
#wazo-tienda .product-page__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 4px 8px 0;
	text-align: center;
}

#wazo-tienda .product-page__attributes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--wazo-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
}

#wazo-tienda .product-page__title {
	max-width: 640px;
	margin: 0;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-display);
	font-size: clamp(22px, 2.3vw, 32px);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: 0;
	text-transform: uppercase;
}

#wazo-tienda .product-page__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin-top: 2px;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-text);
}

#wazo-tienda .product-page__price-amount {
	color: var(--wazo-navy);
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 700;
	line-height: 1.1;
}

#wazo-tienda .product-page__price .woocommerce-Price-amount {
	color: inherit;
}

#wazo-tienda .product-page__price del,
#wazo-tienda .product-page__price .product-block__price--old {
	color: var(--wazo-muted);
	font-size: 16px;
	font-weight: 500;
}

#wazo-tienda .product-page__price ins {
	color: var(--wazo-green-dark);
	text-decoration: none;
}

#wazo-tienda .product-page__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 100px;
	background: rgba(0, 176, 71, 0.08);
	color: var(--wazo-green-dark);
	font-size: 12px;
	font-weight: 600;
}

#wazo-tienda .product-stock__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wazo-green);
}

#wazo-tienda .product-page__stock--out {
	background: rgba(214, 54, 56, 0.08);
	color: #d63638;
}

#wazo-tienda .product-page__excerpt {
	max-width: 560px;
	color: var(--wazo-gray);
	font-size: 15px;
	line-height: 1.65;
}

#wazo-tienda .product-page__excerpt p {
	margin: 0 0 10px;
}

#wazo-tienda .product-page__excerpt p:last-child {
	margin-bottom: 0;
}

#wazo-tienda .product-page__meta {
	width: 100%;
	color: var(--wazo-muted);
	font-size: 12px;
}

#wazo-tienda .product-page__meta .product_meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
}

#wazo-tienda .product-page__meta .sku_wrapper {
	display: none;
}

#wazo-tienda .product-page__meta a {
	color: var(--wazo-gray);
	text-decoration: underline;
}

#wazo-tienda .product-page__subtitle {
	margin: 8px 0 0;
	color: var(--wazo-muted);
	font-family: var(--wazo-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#wazo-tienda .product-page__share {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

#wazo-tienda .theme-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

#wazo-tienda .theme-share__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--wazo-line);
	border-radius: 100px;
	color: var(--wazo-navy);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--wazo-trsn), background-color var(--wazo-trsn);
}

#wazo-tienda .theme-share__link:hover {
	border-color: var(--wazo-navy);
	background: var(--wazo-bg);
}

/* --------------------------------------------------------------------------
   13. Ficha de producto: formulario de compra
   woocommerce_template_single_add_to_cart() imprime form.cart con .quantity y
   .single_add_to_cart_button.
   -------------------------------------------------------------------------- */
#wazo-tienda .wazo-product-form {
	width: 100%;
	max-width: 520px;
	margin: 4px auto 0;
}

#wazo-tienda .wazo-product-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

#wazo-tienda .wazo-product-form .quantity {
	display: flex;
	align-items: center;
	height: var(--wazo-control-h);
	border: 1px solid #cfd6e4;
	border-radius: var(--wazo-radius-sm);
	background: #fff;
}

#wazo-tienda .wazo-product-form .quantity .qty,
#wazo-tienda .wazo-product-form .quantity input.input-text {
	/* !important: app.min.css aplica width:100%, height:44px, borde y radio a
	   todo "form input[type=number]" con !important. El control visible es el
	   contenedor .quantity, así que el input va plano. */
	width: 88px !important;
	min-width: 0;
	height: 46px !important;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wazo-navy) !important;
	font-family: var(--wazo-font-text);
	font-size: 15px !important;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
}

#wazo-tienda .wazo-product-form .quantity .qty:focus {
	outline: 2px solid rgba(46, 55, 106, 0.15);
	outline-offset: -2px;
}

#wazo-tienda .wazo-product-form .quantity input::-webkit-outer-spin-button,
#wazo-tienda .wazo-product-form .quantity input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

#wazo-tienda .wazo-product-form .single_add_to_cart_button {
	position: relative;
	display: inline-flex;
	height: var(--wazo-control-h);
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--wazo-radius-sm);
	background: var(--wazo-green);
	color: #fff;
	font-family: var(--wazo-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wazo-trsn);
}

#wazo-tienda .wazo-product-form .single_add_to_cart_button::before {
	position: static;
	inset: auto;
	z-index: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	opacity: 1;
	content: "";
	-webkit-mask: var(--wazo-icon-cart) center / contain no-repeat;
	mask: var(--wazo-icon-cart) center / contain no-repeat;
	--wazo-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3l-1 14H5L4 7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E");
}

#wazo-tienda .wazo-product-form .single_add_to_cart_button:hover,
#wazo-tienda .wazo-product-form .single_add_to_cart_button:focus {
	background: var(--wazo-green-dark);
	color: #fff;
}

#wazo-tienda .wazo-product-form .single_add_to_cart_button.disabled,
#wazo-tienda .wazo-product-form .single_add_to_cart_button[disabled] {
	background: #c9d1de;
	cursor: not-allowed;
}

/* Variaciones (por si el producto las usa) */
#wazo-tienda .wazo-product-form .variations {
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
}

#wazo-tienda .wazo-product-form .variations th,
#wazo-tienda .wazo-product-form .variations td {
	padding: 6px 8px;
	text-align: left;
}

#wazo-tienda .wazo-product-form .variations select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #cfd6e4;
	border-radius: var(--wazo-radius-sm);
	background: #fff;
	color: var(--wazo-navy);
	font-family: var(--wazo-font-text);
}

#wazo-tienda .wazo-product-form .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
}

#wazo-tienda .wazo-product-form .woocommerce-variation-price {
	margin: 4px 0 8px;
	color: var(--wazo-navy);
	font-weight: 700;
}

#wazo-tienda .wazo-product-form .single_variation_wrap {
	width: 100%;
	text-align: center;
}

/* --------------------------------------------------------------------------
   14. Ficha de producto: pestañas (<details>/<summary>, como el original)
   -------------------------------------------------------------------------- */
#wazo-tienda .wazo-product-tabs {
	padding-top: 8px;
	padding-bottom: 48px;
}

#wazo-tienda .theme-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

#wazo-tienda .theme-tabs__item {
	display: contents;
}

#wazo-tienda .theme-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	order: 0;
	width: auto;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid #cfd6e4;
	border-radius: var(--wazo-radius-sm);
	background: #fff;
	/* !important: el skin .button de wazo-extra.css fuerza color:#fff. */
	color: var(--wazo-navy) !important;
	font-family: var(--wazo-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	list-style: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wazo-trsn), border-color var(--wazo-trsn), color var(--wazo-trsn);
}

#wazo-tienda .theme-tabs__tab::-webkit-details-marker {
	display: none;
}

#wazo-tienda .theme-tabs__tab:hover {
	border-color: var(--wazo-navy);
}

#wazo-tienda .theme-tabs__item[open] .theme-tabs__tab {
	border-color: var(--wazo-navy);
	background: var(--wazo-navy);
	color: #fff !important;
}

#wazo-tienda .theme-tabs__content {
	order: 1;
	width: 100%;
	margin-top: 18px;
	padding: 4px 0 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#wazo-tienda .theme-tabs__item[open] .theme-tabs__content {
	opacity: 1;
}

#wazo-tienda .theme-tabs__content h2:first-child {
	display: none;
}

#wazo-tienda .theme-tabs__content p {
	margin: 0 0 14px;
	color: var(--wazo-gray);
	font-size: 15px;
	line-height: 1.7;
}

#wazo-tienda .theme-tabs__content h3 {
	margin: 26px 0 12px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--wazo-green);
	color: var(--wazo-navy);
	font-family: var(--wazo-font-display);
	font-size: 18px;
	line-height: 1.25;
}

#wazo-tienda .theme-tabs__content table {
	width: 100%;
	max-width: 560px;
	margin-bottom: 14px;
	border: 1px solid var(--wazo-line);
	border-collapse: collapse;
	border-radius: var(--wazo-radius);
	overflow: hidden;
}

#wazo-tienda .theme-tabs__content table tr:nth-child(odd) {
	background: var(--wazo-bg);
}

#wazo-tienda .theme-tabs__content table td,
#wazo-tienda .theme-tabs__content table th {
	padding: 11px 14px;
	border-bottom: 1px solid var(--wazo-line);
	color: var(--wazo-gray);
	font-size: 15px;
	text-align: left;
	vertical-align: top;
}

#wazo-tienda .theme-tabs__content table td:first-child {
	width: 42%;
	color: var(--wazo-navy);
	font-weight: 700;
}

#wazo-tienda .theme-tabs__content table tr:last-child td {
	border-bottom: 0;
}

#wazo-tienda .theme-tabs__content ul,
#wazo-tienda .theme-tabs__content ol {
	margin: 0 0 14px 20px;
	color: var(--wazo-gray);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	#wazo-tienda .products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 991px) {
	#wazo-tienda > .wazo-container {
		padding-right: 22px;
		padding-left: 22px;
	}

	#wazo-tienda .products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}

	#wazo-tienda .product-gallery,
	#wazo-tienda .product-page__content {
		flex: 1 1 100%;
		max-width: 100%;
	}

	#wazo-tienda .product-page__content {
		margin-top: 26px;
	}
}

@media (max-width: 767px) {
	#wazo-tienda > .wazo-container {
		padding-right: 16px;
		padding-left: 16px;
	}

	#wazo-tienda .product-page__title {
		font-size: 21px;
	}

	#wazo-tienda .product-block__attributes-divider {
		display: none;
	}

	#wazo-tienda .products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}

	#wazo-tienda .wazo-feed__toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	#wazo-tienda .woocommerce-ordering {
		width: 100%;
		margin-left: 0;
	}

	#wazo-tienda .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
	}

	#wazo-tienda .wazo-gal {
		flex-direction: column-reverse;
		gap: 12px;
	}

	#wazo-tienda .product-gallery__thumbs {
		flex: 0 0 auto;
		flex-direction: row;
		overflow-x: auto;
		width: 100%;
		padding-bottom: 4px;
	}

	#wazo-tienda .product-gallery__thumb {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
	}

	#wazo-tienda .product-block__title {
		font-size: 13px;
		-webkit-line-clamp: 3;
	}

	#wazo-tienda .product-block__price {
		font-size: 15px;
	}

	#wazo-tienda .product-block__button {
		height: 40px;
		font-size: 11px;
		letter-spacing: 0.03em;
	}

	#wazo-tienda .product-block__attributes {
		font-size: 10px;
	}

	#wazo-tienda .wazo-product-form .single_add_to_cart_button {
		width: 100%;
	}
}

@media (max-width: 400px) {
	#wazo-tienda .product-block__button::before {
		display: none;
	}
}

/* ============ CARRITO Y CHECKOUT (réplica Jumpseller) ============ */
.woocommerce-cart .wazo-tienda,
.woocommerce-checkout .wazo-tienda { max-width: 1240px; margin: 0 auto; padding: 28px 16px 70px; }

/* Pasos del pedido */
.wazo-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; font-size: 13px; color: #8A93A8; }
.wazo-pasos span { white-space: nowrap; }
.wazo-pasos .activo { color: #2E376A; font-weight: 700; }
.wazo-pasos .flecha { color: #C9CFDB; }

/* Dos columnas: productos a la izquierda, resumen a la derecha */
@media (min-width: 992px) {
  .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-info { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; margin: 0; }
  .woocommerce-cart .cross-sells { grid-column: 1 / -1; }
  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 34px; align-items: start; }
  .woocommerce-checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 2; }
  .woocommerce-checkout #order_review { background: #fff; border: 1px solid #E6EAF2; border-radius: 12px; padding: 22px; }
}

/* Tabla de productos */
.woocommerce table.shop_table { border: 0; border-collapse: collapse; width: 100%; border-radius: 10px; overflow: hidden; }
.woocommerce table.shop_table thead th { background: #F4F6FA; color: #2E376A; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 14px 12px; border: 0; }
.woocommerce table.shop_table td { border: 0; border-top: 1px solid #E6EAF2; padding: 18px 12px; vertical-align: middle; }
.woocommerce table.shop_table td.product-name a { color: #2E376A; font-weight: 700; text-decoration: underline; }
.woocommerce table.shop_table td.product-remove a.remove { color: #C0392B !important; font-size: 20px; background: transparent; }
.woocommerce table.shop_table td.product-thumbnail img { max-width: 62px; border-radius: 8px; }
.woocommerce .quantity input.qty { width: 76px; height: 42px; text-align: center; border: 1px solid #C9CFDB; border-radius: 8px; font-size: 16px; }

/* Botones de la tienda */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button { background: #00B047; color: #fff; border-radius: 8px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; padding: 14px 24px; border: 0; line-height: 1.2; }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #00793E; color: #fff; }
.woocommerce button.button[name="update_cart"] { background: #fff; color: #00793E; border: 1px solid #00793E; }
.woocommerce button.button[name="update_cart"]:hover { background: #00793E; color: #fff; }
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] { background: #E6EAF2; color: #8A93A8; }

/* Resumen del carro */
.woocommerce .cart_totals { background: #fff; border: 1px solid #E6EAF2; border-radius: 12px; padding: 24px; }
.woocommerce .cart_totals h2 { font-family: "Archivo Black", sans-serif; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #2E376A; margin: 0 0 14px; }
.woocommerce .cart_totals table { border: 0; }
.woocommerce .cart_totals th,
.woocommerce .cart_totals td { border: 0; border-bottom: 1px dashed #D8DEEA; padding: 12px 0; font-size: 14px; color: #4A5573; text-align: left; }
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td { border-bottom: 0; font-size: 19px; color: #2E376A; font-weight: 800; padding-top: 16px; }
.woocommerce .cart_totals td { text-align: right; }
.woocommerce .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; background: #00B047; padding: 16px; font-size: 13px; border-radius: 8px; }
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: #00793E; }

/* Carrito vacío */
.woocommerce-cart .cart-empty { background: #F4F6FA; border-radius: 10px; padding: 40px 20px; text-align: center; color: #2E376A; font-family: "Archivo Black", sans-serif; font-size: 18px; }
.woocommerce-cart .return-to-shop { text-align: center; margin: 22px 0 0; }

/* Checkout: formularios */
.woocommerce form .form-row label { font-size: 13px; font-weight: 700; color: #2E376A; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { padding: 12px 14px; border: 1px solid #C9CFDB; border-radius: 8px; font-size: 15px; background: #fff; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid #00B047; border-color: #00B047; }
.woocommerce #payment { background: #fff; border-radius: 10px; }
.woocommerce #payment #place_order { width: 100%; background: #00B047; padding: 18px; font-size: 14px; }
.woocommerce #payment #place_order:hover { background: #00793E; }

/* Botón de ficha técnica en PDF */
.wazo-ficha-pdf { margin: 18px 0 0; }
.wazo-ficha-pdf a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #2E376A; color: #2E376A; background: #fff;
  padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
}
.wazo-ficha-pdf a:hover { background: #2E376A; color: #fff; }
.wazo-ficha-pdf .ph { font-size: 17px; }