/* =========================================================================
   ODENIP — Componentes compartidos
   Carruseles de OZ Sliders, tarjetas de OZ Cotizador y piezas del maquetador.

   Nota de especificidad: los módulos de OZ Sliders y OZ Cotizador encolan su
   CSS al renderizar el shortcode, así que sus hojas se imprimen DESPUÉS de
   ésta. Por eso los selectores llevan `html body` / clase doble y algunas
   propiedades usan !important.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Recorte de esquina con borde (patrón de marca)
   Un solo elemento: el recorte va en el elemento y el borde se dibuja como
   anillo en ::after con polygon(evenodd, exterior, interior).
   ------------------------------------------------------------------------- */

.odp-cut {
	--cut: 22px;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.odp-cutline {
	--cut: 22px;
	position: relative;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.odp-cutline::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: var(--odp-line);
	clip-path: polygon(evenodd,
		0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%,
		1px 1px, calc(100% - var(--cut) - 1px) 1px, calc(100% - 1px) calc(var(--cut) + 1px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
}

/* Tarjeta de página del maquetador (.odp-cardbox). Su regla vive en
   OZ Maquetador → CSS Global y allí el filete se dibuja como anillo de 1px con
   polygon(evenodd) pegado al canto de la caja: en tarjetas altas el tramo
   vertical izquierdo se desvanece a trozos (la tarjeta de «Ubicación» de
   Contáctanos llega a quedarse en #FEFEFE sobre blanco, o sea invisible),
   porque el recorte del propio elemento suaviza ese mismo canto y el anillo
   pierde casi toda su opacidad.

   Aquí se repinta con las dos capas macizas que ya usan el resto de tarjetas
   de la marca: el fondo del elemento hace de línea y ::after pone el relleno
   blanco 1px hacia dentro. Carga después del CSS global del maquetador, así
   que gana por orden. */
html body .odp-cardbox {
	isolation: isolate;
	background: var(--odp-line) !important;
}

/* Relleno blanco: mismo recorte, 1px hacia dentro. Como la caja va con
   `inset: 1px`, para que la diagonal quede a 1px perpendicular su corte debe
   ser `--cut - 0.59px` (2px de inset menos los 1,41px que desplaza en los ejes
   una paralela a 45°). z-index negativo dentro del aislamiento => queda sobre
   el fondo-línea y por debajo de todo el contenido de la tarjeta. */
html body .odp-cardbox::after {
	inset: 1px;
	z-index: -1;
	background: #fff;
	clip-path: polygon(0 0, calc(100% - var(--cut) + 0.59px) 0, 100% calc(var(--cut) - 0.59px), 100% 100%, 0 100%);
}

/* -------------------------------------------------------------------------
   2. Carril de carrusel (.odp-rail)
   OZ Sliders, con encabezado activo, mete las flechas dentro de él (arriba a
   la derecha). Aquí el encabezado va apagado y el carrusel se envuelve en un
   carril propio: flechas abajo a la izquierda y «Ver todos» abajo a la
   derecha, como en el diseño.
   ------------------------------------------------------------------------- */

.odp-rail {
	position: relative;
	padding-bottom: 58px;
}

/* El slider deja de ser el bloque contenedor para que las flechas se anclen
   al carril y no queden recortadas por su overflow. */
html body .odp-rail .ozs,
html body .odp-rail .oz-wc-products-theme,
html body .odp-rail .oz-wc-products-custom {
	position: static !important;
	overflow: visible !important;
	padding-bottom: 0;
}

html body .odp-rail .ozs__nav {
	position: absolute !important;
	left: 0 !important;
	right: auto !important;
	bottom: 0 !important;
	top: auto !important;
	display: flex !important;
	justify-content: flex-start !important;
	gap: 10px;
	width: auto !important;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: auto;
	z-index: 5;
}

/* Los módulos de OZ Sliders pintan estas flechas en rojo con !important y
   selectores de 3 clases; por eso aquí se apunta a --prev / --next dentro de
   `.odp-rail .ozs` (4 clases) para poder recuperar el diseño de la marca. */
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--prev,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--next,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--prev,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--next {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: 36px !important;
	height: 36px !important;
	/* El hexágono se dibuja como anillo: el fondo hace de borde y ::after
	   pinta el relleno blanco un pixel hacia dentro. */
	background: var(--odp-line) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color .18s ease !important;
}

html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev::after,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next::after,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--prev::after,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--next::after,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--prev::after,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--next::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 0;
	background: var(--odp-white);
	clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
}

html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev::before,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next::before,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--prev::before,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--next::before,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--prev::before,
html body .odp-rail.odp-rail .oz-wc-products-custom .ozs__nav-btn--next::before {
	position: relative;
	z-index: 1;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	background-size: 16px 16px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7' stroke='%2314161C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--prev:hover,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--next:hover,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev:hover,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next:hover,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev:focus-visible,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next:focus-visible {
	background: var(--odp-orange) !important;
	transform: none !important;
}

html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev:hover::after,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next:hover::after,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--prev:hover::after,
html body .odp-rail.odp-rail .oz-wc-products-theme .ozs__nav-btn--next:hover::after {
	background: var(--odp-orange);
}

html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev:hover::before,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next:hover::before,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev:focus-visible::before,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next:focus-visible::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev[disabled],
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next[disabled],
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--prev.is-disabled,
html body .odp-rail.odp-rail .ozs .ozs__nav-btn--next.is-disabled {
	background: transparent !important;
	opacity: .35 !important;
	transform: none !important;
}

/* Enlace «Ver todos» */
.odp-rail__seeall {
	position: absolute;
	right: 0;
	bottom: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--odp-font-cond);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odp-ink);
}

.odp-rail__seeall .odp-ico {
	color: var(--odp-orange);
}

.odp-rail__seeall:hover {
	color: var(--odp-orange);
}

.odp-rail__seeall:hover .odp-ico {
	color: currentColor;
}

/* -------------------------------------------------------------------------
   3. Tarjeta de categoría
   El módulo trae de serie una caja azul con el icono enmascarado en verde
   (diseño de otro proyecto). Aquí se devuelve la foto real sobre blanco.
   ------------------------------------------------------------------------- */

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat {
	display: block;
	height: 100%;
	padding: 0;
	background: transparent;
}

/* El borde del recorte se dibuja con dos capas macizas: el fondo de la tarjeta
   hace de línea y ::after pinta el relleno blanco 1px hacia dentro. Antes era
   un anillo de 1px hecho con clip-path(evenodd): como el ancho de columna del
   carrusel no cae en píxeles enteros, el anillo se difuminaba hasta desaparecer
   en tramos (igual que pasaba en .ozc-product-card). */
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card {
	--cut: 26px;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: var(--odp-line);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	transition: transform .22s ease;
}

/* Relleno blanco: mismo recorte, 1px hacia dentro. Como la caja ya va con
   `inset: 1px`, para que la diagonal quede a 1px perpendicular su corte debe
   ser `--cut - 0.59px` (2px de inset menos los 1.41px que desplaza en los ejes
   una paralela a 45°). z-index negativo => queda sobre el fondo-línea pero por
   debajo del contenido de la tarjeta. */
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	pointer-events: none;
	background: var(--odp-white);
	clip-path: polygon(0 0, calc(100% - var(--cut) + 0.59px) 0, 100% calc(var(--cut) - 0.59px), 100% 100%, 0 100%);
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat:hover .ozs-card {
	transform: translateY(-4px);
}

/* El módulo recorta el carrusel a ras de las tarjetas, así que el desplazamiento
   de hover se comía el borde superior. Se agranda la caja de recorte hacia
   arriba y se compensa con margen negativo para no mover el bloque.
   Hay que hacerlo en las DOS cajas que recortan: el viewport (overflow: hidden)
   y el propio track, que al ser el contenedor de scroll horizontal
   (overflow-x: auto) lleva overflow-y: hidden y recortaba igual. El padding sí
   entra en la zona visible del scroll, por eso se usa padding + margen negativo
   en vez de tocar el overflow (que rompería el arrastre horizontal). */
html body .ozs--wc-categories.odp-catcards .ozs__viewport,
html body .ozs--wc-categories.odp-catcards .ozs__track {
	padding-top: 8px;
	margin-top: -8px;
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 6px;
	/* Transparente: el blanco lo pone ::after de la tarjeta. Con fondo propio,
	   la caja tapaba la línea del borde a lo largo de toda la imagen. */
	background: transparent !important;
	border-bottom: 0 !important;
	border-radius: 0;
	overflow: hidden;
}

/* Se anula la máscara de color y se recupera la imagen real. */
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card__media::after {
	content: none !important;
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card__img {
	opacity: 1 !important;
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	transition: transform .3s ease;
}

/* El módulo tiñe la imagen de naranja en hover (filtro pensado para iconos
   monocromos). Con fotos reales tapaba la foto entera, así que se anula. */
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat:hover .ozs-card__img,
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat:focus-visible .ozs-card__img,
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat.is-current .ozs-card__img {
	filter: none;
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat:hover .ozs-card__img {
	transform: scale(1.05);
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card__body {
	flex: 1 1 auto;
	display: block;
	padding: 6px 24px 28px;
	/* Igual que el media: el blanco es el ::after de la tarjeta. */
	background: transparent;
	text-align: left;
}

/* Antetítulo: nombre de la categoría padre, inyectado con --odp-eyebrow. */
html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-card__body::before {
	content: var(--odp-eyebrow, "");
	display: block;
	margin-bottom: 8px;
	font-family: var(--odp-font-cond);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--odp-orange);
}

html body .ozs--wc-categories.odp-catcards .ozs-wc-cat .ozs-wc-cat__name {
	display: block;
	margin: 0;
	min-height: 0;
	font-family: var(--odp-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--odp-ink);
}

/* -------------------------------------------------------------------------
   4. Pestañas por categoría (portada)
   ------------------------------------------------------------------------- */

.odp-cattabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-bottom: 36px;
}

.odp-cattabs__tab {
	position: relative;
	max-width: 230px;
	overflow-wrap: normal;
	hyphens: none;
	padding: 0 0 14px;
	background: none;
	border: 0;
	font-family: var(--odp-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--odp-muted);
	cursor: pointer;
	transition: color .18s ease;
}

.odp-cattabs__tab.is-active {
	color: var(--odp-navy);
}

.odp-cattabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 48px;
	height: 3px;
	background: var(--odp-orange);
}

.odp-cattabs__tab:hover {
	color: var(--odp-ink);
}

.odp-cattabs__panel {
	display: none;
}

.odp-cattabs__panel.is-active {
	display: block;
}


/* -------------------------------------------------------------------------
   5. Grupos de categoría (página Tienda)
   ------------------------------------------------------------------------- */

.odp-catgroup + .odp-catgroup {
	margin-top: 56px;
}

.odp-catgroup__title {
	margin: 0 0 24px;
	max-width: 260px;
	overflow-wrap: normal;
	word-break: normal;
	font-family: var(--odp-font-title);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--odp-ink);
}

/* -------------------------------------------------------------------------
   6. Tarjeta de producto (OZ Cotizador)
   ------------------------------------------------------------------------- */

/* El borde del recorte se dibuja con dos capas macizas: el fondo de la tarjeta
   hace de línea y ::after pinta el relleno blanco 1px hacia dentro. Antes era
   un anillo de 1px hecho con clip-path(evenodd): al no caer en píxeles enteros
   se difuminaba hasta desaparecer en tramos (sobre todo el lado izquierdo). */
html body .ozc-product-card {
	--cut: 22px;
	position: relative;
	isolation: isolate;
	/* Contenedor de consulta: la fila de acciones (cantidad + «Añadir al
	   carrito») se aprieta según lo ancha que sea la tarjeta, no según el
	   ancho de la ventana. Así el mismo componente sirve para 4 o 5 columnas
	   en la tienda y para los carruseles de la portada sin tocar nada. */
	container-type: inline-size;
	container-name: ozc-card;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0;
	padding: 0 0 22px;
	background: var(--odp-line) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	transition: transform .22s ease;
}

/* Relleno blanco: mismo recorte, 1px hacia dentro. Como la caja ya va con
   `inset: 1px`, para que la diagonal quede a 1px perpendicular su corte debe
   ser `--cut - 0.59px` (2px de inset menos los 1.41px que desplaza en los ejes
   una paralela a 45°). z-index negativo => queda sobre el fondo-línea pero por
   debajo del contenido de la tarjeta. */
html body .ozc-product-card::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	pointer-events: none;
	background: var(--odp-white);
	clip-path: polygon(0 0, calc(100% - var(--cut) + 0.59px) 0, 100% calc(var(--cut) - 0.59px), 100% 100%, 0 100%);
}

html body .ozc-product-card:hover {
	transform: translateY(-4px);
}

/* Caja cuadrada que centra la imagen. `max-height: none` neutraliza el tope de
   200px que impone loops.css del Cotizador: con ese tope la caja quedaba en
   200px de alto, la imagen conservaba su alto natural y `overflow: hidden` le
   recortaba la parte inferior. */
html body .ozc-product-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-height: none;
	padding: 34px 24px 12px;
	/* Transparente: el blanco lo pone ::after de la tarjeta. Con fondo propio,
	   la caja tapaba la línea del borde a lo largo de toda la imagen. */
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
}

/* Sin estirar: la imagen se muestra entera dentro de la caja. */
html body .ozc-product-card__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .3s ease;
}

html body .ozc-product-card:hover .ozc-product-card__media img {
	transform: scale(1.05);
}

/* 1px hacia dentro para no tapar la línea del borde en la esquina. */
html body .ozc-product-card__badge {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 14px;
	background: var(--odp-navy) !important;
	color: var(--odp-white) !important;
	font-family: var(--odp-font-cond);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 0 !important;
	border-radius: 0 !important;
}

/* El padding y el tamaño van con !important: WooCommerce impone
   `.woocommerce ul.products li.product h3 {padding: .5em 0; font-size: 1em}`
   (0,3,3), que gana por especificidad; dejaba el título pegado al borde y a
   16px, por lo que se desbordaba a una tercera línea recortada. */
html body .ozc-product-card__title {
	margin: 0;
	padding: 10px 24px 18px !important;
	/* Alto de dos líneas (15px × 1.45) más el padding, para que las tarjetas
	   de una y de dos líneas sigan alineando la fila de botones. */
	min-height: 72px;
	/* El recorte a dos líneas va en el <a> de dentro, no aquí: como la tarjeta
	   es un contenedor flex, el navegador convierte el `-webkit-box` de este
	   <h3> en un bloque normal y el clamp deja de aplicarse (se veía la
	   elipsis en la segunda línea y aun así seguían saliendo la tercera y la
	   cuarta). El enlace no es ítem flex, así que ahí sí funciona. */
	display: block !important;
	overflow: hidden !important;
	font-family: var(--odp-font-body);
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: left;
	color: var(--odp-ink);
}

html body .ozc-product-card__title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: inherit;
}

html body .ozc-product-card__title a:hover {
	color: var(--odp-orange);
}

html body .ozc-product-card .ozc-product-card__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding: 0 24px;
}

/* Selector de cantidad.
   `row-reverse` porque el diseño coloca el «+» a la izquierda y el «−» a la
   derecha, y la plantilla del plugin los emite al revés. */
html body .ozc-product-card__qty {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	height: 42px;
	background: var(--odp-white);
	border: 1px solid var(--odp-orange) !important;
	border-radius: 0 !important;
	overflow: hidden;
}

html body .ozc-product-card__qty-btn {
	width: 26px;
	height: 100%;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: 0 !important;
	color: var(--odp-orange) !important;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

html body .ozc-product-card__qty-input {
	width: 30px;
	height: 100%;
	padding: 0;
	border: 0 !important;
	background: none !important;
	text-align: center;
	font-family: var(--odp-font-body);
	font-size: 15px;
	color: var(--odp-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

html body .ozc-product-card__qty-input::-webkit-outer-spin-button,
html body .ozc-product-card__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Botón principal (añadir al carrito) */
html body .ozc-product-card__btn--primary {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 12px;
	background: var(--odp-orange) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--odp-white) !important;
	min-width: 0;
	font-family: var(--odp-font-cond);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .18s ease;
}

html body .ozc-product-card__btn--primary::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.3l2.4 11.3a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.5-6.4H6.3'/%3E%3Ccircle cx='9.5' cy='20' r='1.5'/%3E%3Ccircle cx='17.5' cy='20' r='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.3l2.4 11.3a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2l1.5-6.4H6.3'/%3E%3Ccircle cx='9.5' cy='20' r='1.5'/%3E%3Ccircle cx='17.5' cy='20' r='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

html body .ozc-product-card__btn--primary:hover {
	background: var(--odp-orange-dark) !important;
}

/* Tarjeta estrecha (la tienda a 5 columnas, los carruseles de la portada): el
   rótulo «Añadir al carrito» deja de caber junto al selector de cantidad. Se
   cede en tres tiempos, del ajuste más discreto al más visible.

   1. Se recorta el aire: menos canalón, menos interlineado y un selector de
      cantidad más justo. Con esto el botón vuelve a caber entero. */
@container ozc-card (max-width: 365px) {
	/* Misma especificidad que la regla base (`.ozc-product-card` + `__actions`),
	   si no el `padding: 0 24px` de arriba gana y no se recorta nada. */
	html body .ozc-product-card .ozc-product-card__actions {
		padding-inline: 16px;
	}

	html body .ozc-product-card__btn--primary {
		gap: 6px;
		padding-inline: 8px;
		letter-spacing: .02em;
	}

	html body .ozc-product-card__qty-btn {
		width: 20px;
	}

	html body .ozc-product-card__qty-input {
		width: 24px;
	}
}

/* 2. Por debajo de esto el rótulo ya no entra al lado del selector por mucho
      que se apriete. La fila NO se parte: la tarjeta conserva su forma en
      cualquier resolución. Lo que cede es el texto, que pasa al rótulo corto
      «Cotizar».

      Se hace por CSS porque el rótulo lo pinta la plantilla de OZ Cotizador:
      se anula el original con font-size:0 y se escribe el corto en ::after.
      El icono no se entera, porque mide en px. */
@container ozc-card (max-width: 305px) {
	html body .ozc-product-card__btn--primary {
		font-size: 0;
		letter-spacing: 0;
	}

	html body .ozc-product-card__btn--primary::after {
		content: "Cotizar";
		font-size: 12.5px;
		letter-spacing: .05em;
	}
}

/* 3. Tarjetas muy estrechas (rejilla de 3 columnas por debajo de ~760px):
      ni «Cotizar» entra con el espaciado anterior. Último apretón —cuerpo
      menor y selector más justo— antes de que el texto se recortara. La fila
      sigue siendo una sola. */
@container ozc-card (max-width: 255px) {
	html body .ozc-product-card .ozc-product-card__actions {
		padding-inline: 12px;
		gap: 6px;
	}

	html body .ozc-product-card__btn--primary {
		gap: 5px;
		padding-inline: 6px;
	}

	html body .ozc-product-card__btn--primary::after {
		font-size: 11px;
	}

	html body .ozc-product-card__qty-btn {
		width: 18px;
	}

	html body .ozc-product-card__qty-input {
		width: 22px;
	}
}

/* Aviso «Ver carrito» que añade WooCommerce tras el AJAX. */
html body .ozc-product-card a.added_to_cart {
	display: none !important;
}

/* -------------------------------------------------------------------------
   7. Marcas
   ------------------------------------------------------------------------- */

/* Carrusel de marcas (portada). La tarjeta es la misma que la de la rejilla de
   la página «Marcas»: el módulo de OZ Sliders trae tarjeta alta, hueco para el
   texto «ver productos» (invisible sobre fondo blanco, pero ocupa sitio y sube
   el logo) y 60px de aire en el carril; aquí se apaga todo eso. */

/* El carril y su ventana recortan a ras de las tarjetas (son contenedores de
   scroll), así que el borde superior de la tarjeta elevada (-3px) necesita
   sitio DENTRO del carril: 6px de padding. No se compensa con margen negativo
   porque eso saca el borde fuera del bloque y lo vuelve a recortar. */
html body .ozs--wc-brands.odp-brands .ozs__track {
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: 0;
	margin-bottom: 0;
}

/* La tarjeta se mete 2px dentro de su diapositiva: el JS del carrusel alinea el
   borde izquierdo de la diapositiva con el borde del carril (redondeando a
   píxeles enteros), así que si la tarjeta llegara a ras, su borde izquierdo
   quedaría cortado en la primera marca. */
html body .ozs--wc-brands.odp-brands .ozs__slide {
	box-sizing: border-box;
	padding-left: 2px;
	padding-right: 2px;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand {
	height: 100%;
	background: transparent;
	border: 0;
	padding: 0;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
	height: 132px;
	padding: 24px;
	background: var(--odp-white) !important;
	border: 1px solid var(--odp-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: border-color .2s ease, transform .2s ease;
}

/* «ver productos» y el anillo degradado animado no son del diseño. */
html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link::before,
html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link::after {
	content: none;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link:hover,
html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link:focus-visible {
	transform: translateY(-3px);
	border-color: var(--odp-orange) !important;
	box-shadow: none !important;
	z-index: 5;
}

/* El logo va centrado y quieto: nada de crecer y salirse de la tarjeta. */
html body .ozs--wc-brands.odp-brands .ozs__media,
html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link:hover .ozs__media,
html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link:focus-visible .ozs__media {
	max-height: 62px;
	transform: none;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand__img {
	width: auto;
	max-width: 100%;
	max-height: 62px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .2s ease, opacity .2s ease;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand__link:hover .ozs-wc-brand__img {
	filter: none;
	opacity: 1;
}

html body .ozs--wc-brands.odp-brands .ozs-wc-brand__name {
	display: none;
}

/* Rejilla de la página «Marcas» (sin carrusel). */
.odp-brandgrid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.odp-brandgrid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	padding: 24px;
	background: var(--odp-white);
	border: 1px solid var(--odp-line);
	transition: border-color .2s ease, transform .2s ease;
}

.odp-brandgrid__item:hover {
	border-color: var(--odp-orange);
	transform: translateY(-3px);
}

.odp-brandgrid__item img {
	max-width: 100%;
	max-height: 62px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .2s ease, opacity .2s ease;
}

.odp-brandgrid__item:hover img {
	filter: none;
	opacity: 1;
}

/* -------------------------------------------------------------------------
   8. Carrito y mini carrito (OZ Cotizador)
   Sólo se reviste con los colores y tipografías de la marca; la estructura
   la aporta el plugin.
   ------------------------------------------------------------------------- */

/* --- Mini carrito lateral --- */
html body .ozc-sidecart__panel {
	border-radius: 0 !important;
}

html body .ozc-sidecart__header {
	background: var(--odp-black) !important;
	color: var(--odp-white) !important;
	border: 0 !important;
}

html body .ozc-sidecart__title {
	font-family: var(--odp-font-title);
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--odp-white) !important;
}

html body .ozc-sidecart__close {
	color: var(--odp-white) !important;
	border-radius: 0 !important;
}

html body .ozc-sidecart-item__name {
	font-family: var(--odp-font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--odp-ink) !important;
}

html body .ozc-sidecart-item__subtotal,
html body .ozc-sidecart__total-value {
	color: var(--odp-orange) !important;
	font-weight: 700;
}

html body .ozc-sidecart__total-label {
	font-family: var(--odp-font-cond);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--odp-ink) !important;
}

html body .ozc-sidecart__btn {
	border-radius: 0 !important;
	font-family: var(--odp-font-cond);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

html body .ozc-sidecart__btn--cart {
	background: var(--odp-orange) !important;
	border-color: var(--odp-orange) !important;
	color: var(--odp-white) !important;
}

html body .ozc-sidecart__btn--continue {
	background: transparent !important;
	border: 1px solid var(--odp-line) !important;
	color: var(--odp-ink) !important;
}

html body .ozc-qty {
	border: 1px solid var(--odp-orange) !important;
	border-radius: 0 !important;
}

html body .ozc-qty__btn {
	color: var(--odp-orange) !important;
	background: none !important;
}

/* --- Página de carrito / cotización --- */
html body .ozc-quote-cart__block {
	--cut: 26px;
	position: relative;
	background: var(--odp-white) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

html body .ozc-quote-cart__block::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--odp-line);
	clip-path: polygon(evenodd,
		0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%,
		1px 1px, calc(100% - var(--cut) - 1px) 1px, calc(100% - 1px) calc(var(--cut) + 1px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
}

html body .ozc-quote-cart__block > * {
	position: relative;
	z-index: 2;
}

html body .ozc-quote-cart__block-title,
html body .ozc-quote-cart__header h1,
html body .ozc-quote-cart__header h2 {
	font-family: var(--odp-font-title);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--odp-ink) !important;
}

html body .ozc-quote-cart__item-name {
	font-family: var(--odp-font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--odp-ink) !important;
}

html body .ozc-quote-cart__item-subtotal,
html body .ozc-quote-cart__meta-value--emphasis {
	color: var(--odp-orange) !important;
}

html body .ozc-quote-cart__actions-primary button,
html body .ozc-quote-cart__actions-primary .button,
html body .ozc-quote-cart__actions-primary a.button {
	background: var(--odp-orange) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--odp-white) !important;
	font-family: var(--odp-font-cond);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

html body .ozc-quote-cart__actions-secondary a,
html body .ozc-quote-cart__actions-secondary button {
	border-radius: 0 !important;
	font-family: var(--odp-font-cond);
	letter-spacing: .1em;
	text-transform: uppercase;
}

html body .ozc-quote-cart__field input,
html body .ozc-quote-cart__field select,
html body .ozc-quote-cart__field textarea {
	border: 1px solid var(--odp-line) !important;
	border-radius: 4px !important;
	font-family: var(--odp-font-body);
}

html body .ozc-quote-cart__field input:focus,
html body .ozc-quote-cart__field select:focus,
html body .ozc-quote-cart__field textarea:focus {
	border-color: var(--odp-orange) !important;
	outline: none;
}

/* -------------------------------------------------------------------------
   9. Mapa
   ------------------------------------------------------------------------- */

.odp-map {
	width: 100%;
	height: var(--odp-map-h, 340px);
	overflow: hidden;
}

.odp-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------
   10. Carrusel de tableros (.odp-tabcar)
   Piel para un carrusel de imágenes de OZ Sliders: se activa poniendo
   `odp-tabcar` en «Clase del preset» del carrusel. El contenido (imágenes,
   enlaces y captions) vive en el plugin, aquí solo va el aspecto.

   Cada tarjeta es un marco blanco cuadrado con dos esquinas recortadas
   (superior izquierda e inferior derecha); dentro, la foto a la izquierda y a
   la derecha la franja con el nombre en vertical, con la flecha naranja al
   pie. El caption solo se pinta si el shortcode lleva captions="true", cosa
   que resuelve el filtro de inc/odenip-shortcodes.php.
   ------------------------------------------------------------------------- */

html body .odp-tabcar .ozs__link {
	--cut: 26px;
	--odp-tabcar-pad: 16px;
	--odp-tabcar-arrow: 36px;
	position: relative;
	isolation: isolate;
	display: flex;
	gap: 10px;
	/* Cuadrada como en el diseño: el alto sale del ancho de la columna, así
	   acompaña a cols_desktop/laptop/tablet sin tocar nada. */
	aspect-ratio: 1 / 1;
	padding: var(--odp-tabcar-pad);
	box-sizing: border-box;
	text-decoration: none;
	/* El fondo hace de línea del borde; el relleno blanco lo pinta ::before 1px
	   hacia dentro. Dos capas macizas en vez de un anillo de 1px con
	   clip-path(evenodd): como el ancho de columna del carrusel no cae en
	   píxeles enteros, el anillo se difuminaba hasta desaparecer en tramos
	   (mismo arreglo que en .ozc-product-card y en las tarjetas de categoría). */
	background: var(--odp-line);
	clip-path: polygon(
		var(--cut) 0, 100% 0,
		100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
		0 100%, 0 var(--cut));
}

/* Relleno blanco: misma silueta, 1px hacia dentro. Como la caja ya va con
   `inset: 1px`, para que las diagonales queden a 1px perpendicular su corte
   debe ser `--cut - 0.59px` (2px de inset menos los 1.41px que desplaza en los
   ejes una paralela a 45°). z-index negativo => queda sobre el fondo-línea
   pero por debajo de la foto y del caption. */
html body .odp-tabcar .ozs__link::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	pointer-events: none;
	background: var(--odp-white);
	clip-path: polygon(
		calc(var(--cut) - 0.59px) 0, 100% 0,
		100% calc(100% - var(--cut) + 0.59px), calc(100% - var(--cut) + 0.59px) 100%,
		0 100%, 0 calc(var(--cut) - 0.59px));
}

/* La foto la manda el cuadrado de la tarjeta, no el preset del carrusel:
   `height: auto` + `align-self: stretch` dejan que el estirado del flex le dé
   el alto (si no, el `height: var(--ozs-height)` del plugin la dejaría en su
   tamaño natural) y `aspect-ratio: auto` anula el `--ozs-ratio` del preset,
   que al ser vertical la hacía más alta que el hueco: se salía por abajo y,
   como el clip-path la recorta a ras de la tarjeta, tapaba el borde inferior y
   media flecha. `min-height: 0` evita el mínimo automático del flex. */
html body .odp-tabcar .ozs__media {
	flex: 1 1 auto;
	align-self: stretch;
	height: auto;
	max-height: 100%;
	aspect-ratio: auto;
	padding: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

html body .odp-tabcar .ozs__media img,
html body .odp-tabcar .ozs__media .ozs_picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Franja vertical con el nombre del tablero. El margen inferior le reserva
   sitio a la flecha sin sacar el texto de su eje. */
html body .odp-tabcar .ozs__caption {
	flex: 0 0 var(--odp-tabcar-arrow);
	margin: 0 0 calc(var(--odp-tabcar-arrow) + 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--odp-font-title);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--odp-ink);
}

/* Flecha naranja al pie de la franja (icono `arrow-ur` del tema). */
html body .odp-tabcar .ozs__link::after {
	content: "";
	position: absolute;
	right: var(--odp-tabcar-pad);
	bottom: var(--odp-tabcar-pad);
	z-index: 3;
	width: var(--odp-tabcar-arrow);
	height: var(--odp-tabcar-arrow);
	background-color: var(--odp-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

html body .odp-tabcar .ozs__media img {
	transition: transform 420ms ease;
}

html body .odp-tabcar .ozs__link:hover .ozs__media img,
html body .odp-tabcar .ozs__link:focus-visible .ozs__media img {
	transform: scale(1.04);
}

@media (max-width: 1024px) {
	html body .odp-tabcar .ozs__caption {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	html body .odp-tabcar .ozs__link {
		--cut: 20px;
		--odp-tabcar-pad: 12px;
		--odp-tabcar-arrow: 30px;
	}

	html body .odp-tabcar .ozs__caption {
		font-size: 13px;
		letter-spacing: .08em;
	}
}

/* -------------------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.odp-cattabs__bar {
		gap: 26px;
	}

	.odp-brandgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.odp-cattabs__bar {
		gap: 16px;
	}

	.odp-cattabs__tab {
		max-width: 150px;
		font-size: 12px;
	}

	.odp-brandgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ===== Precio en las tarjetas de producto (OZ-Cotizador) =====================
   OZ-Cotizador no trae ningun estilo para .ozc-product-card__price: solo
   heredaba el texto del cuerpo, y por eso el precio pesaba menos que el titulo.
   Se le da el mismo tratamiento que en la ficha (.odp-buy__price) a escala de
   tarjeta. Vive en el TEMA a proposito: usa las variables de odenip y no se
   pierde al actualizar el plugin. Este CSS carga despues del plugin, asi que
   no hace falta !important. */
.ozc-product-card__price {
	font-family: var(--odp-font-title);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--odp-orange);
}

.ozc-product-card__price del {
	margin-right: 8px;
	font-size: 15px;
	color: var(--odp-muted);
	opacity: .7;
}

.ozc-product-card__price ins {
	text-decoration: none;
}