/* ============================================================
   Design pack "OMB" — diseño de la card de producto del cotizador.
   Se carga DESPUÉS de loops.css, así que sus reglas ganan por orden.
   Aplica a todas las cards (tienda, sliders, relacionados).
   ============================================================ */

/* Las secciones no llevan el padding lateral (lo pone la card) */
.ozc-product-card__section { padding: 0; margin-top: 0; }

/* 1. CARD — vertical, compacta, blanca.
   Sin min-height fijo: la grilla (align-items:stretch) uniforma las cards a la
   más alta de cada fila. Así se evita el hueco vacío y quedan compactas. */
.ozc-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	height: 100%;
	padding: 18px 16px 20px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
/* Orden visual: imagen → categoría → nombre → acciones (el HTML trae título
   antes que categoría, lo reordenamos por CSS sin tocar el PHP). */
.ozc-product-card__media    { order: 1; }
.ozc-product-card__category { order: 2; }
.ozc-product-card__title    { order: 3; }
.ozc-product-card__actions  { order: 4; }

/* 2. MARCA arriba-derecha (badge). Ocultar la línea "Marca:" duplicada */
.ozc-product-card__brand { display: none; }
.ozc-product-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	left: auto;
	z-index: 2;
	margin: 0;
	padding: 0;
	max-width: 55%;
	background: transparent;
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #111;
	text-align: right;
}

/* 3. IMAGEN — zona fija, contain (no recorta) */
.ozc-product-card__media {
	width: 100%;
	height: 205px;
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	overflow: hidden;
}
.ozc-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

/* 4. CATEGORÍA */
.ozc-product-card__category {
	margin: 0 6px 5px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #666;
	text-align: left;
}

/* 5. NOMBRE — máx 2 líneas */
.ozc-product-card__title {
	margin: 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	text-align: left;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 36px;
}

/* 6. ACCIONES abajo — Cotizar (izq) + stepper (der).
   Medidas pensadas para que la fila NUNCA toque los bordes de la card
   (en 4 col las cards bajan a ~215-245px según el ancho de pantalla). */
.ozc-product-card__actions {
	margin-top: auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	padding: 18px 0 0; /* sin padding lateral: la fila usa todo el ancho útil
	                      de la card para que Cotizar y la cápsula respiren */
}
/* 7. BOTÓN COTIZAR — naranja, izquierda. flex:1 → aprovecha el espacio libre
   de la card (crece cuando hay sitio, encoge sin desbordar cuando no). */
.ozc-product-card__btn--primary {
	order: 0;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	box-sizing: border-box; /* el padding cuenta dentro del ancho: no desborda */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ff641e;
	border: 0;
	border-radius: 21px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
/* 8. STEPPER — cápsula blanca amplia con borde naranja: [ − | 1 | + ].
   ~122px de ancho, 42px de alto (igual que Cotizar). Zonas 38px | 1fr | 38px.
   Los divisores (#e5e5e5, ~64% del alto interno, centrados) se pintan como
   degradados en el fondo de la cápsula: el input no admite ::before y un
   border ocuparía el 100% del alto. */
.ozc-product-card__qty {
	order: 1;
	flex: 0 0 auto;
	width: 122px;
	min-width: 115px;
	max-width: 125px;
	height: 42px;
	margin: 0;
	display: grid;
	grid-template-columns: 38px 1fr 38px;
	align-items: stretch;
	background-color: #ffffff;
	background-image:
		linear-gradient(#e5e5e5, #e5e5e5),
		linear-gradient(#e5e5e5, #e5e5e5);
	background-repeat: no-repeat;
	background-size: 1px 64%, 1px 64%;
	background-position: 38px center, calc(100% - 38px) center;
	border: 1px solid #ff641e; /* mismo naranja que Cotizar */
	border-radius: 999px;
	box-sizing: border-box;
	box-shadow: none;
	overflow: hidden;
}
.ozc-product-card__qty-btn {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: #ff641e;
	cursor: pointer;
}
.ozc-product-card__qty-btn:hover {
	background: rgba(255, 100, 30, 0.08); /* naranja muy suave solo en hover */
}
.ozc-product-card__qty-input {
	width: 100%;
	min-width: 0; /* los input tienen ancho mínimo intrínseco: sin esto revienta
	                 la zona central y aplasta la del "+" */
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	font-size: 14px;
	font-weight: 600;
	color: #111;
	appearance: textfield;
	-moz-appearance: textfield;
}
.ozc-product-card__qty-input::-webkit-inner-spin-button,
.ozc-product-card__qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Alturas uniformes cuando la card va dentro de un carrusel OZ-Sliders */
.ozs__slide { display: flex; }
.ozs__slide > * { width: 100%; height: 100%; }

/* ============================================================
   RESPONSIVE
   Laptop (992–1499px): las cards de 4 col bajan a ~215px; fila de acciones
   aún más compacta para que el stepper no toque el borde derecho.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1499px) {
	.ozc-product-card__actions { gap: 10px; }
	.ozc-product-card__qty { width: 115px; }
	.ozc-product-card__btn--primary { padding: 0 8px; }
}

/* ============================================================
   RESPONSIVE
   La grilla de la tienda/archivo es `ul.products` (grid de WooCommerce).
   La adaptamos por breakpoints: 4 → 3 → 2 columnas. La card no lleva
   min-height (la grilla align-items:stretch iguala alturas), así no hay
   huecos en ninguna vista.
   ============================================================ */
@media (max-width: 1200px) {
	.ozc-product-card__media { height: 195px; }
}
@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, 1fr) !important; }
	.ozc-product-card__media { height: 185px; }
}
/* Tablet / móvil grande y abajo: 2 columnas y acciones apiladas
   (en poco ancho no caben Cotizar + stepper en la misma fila). */
@media (max-width: 767px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.ozc-product-card { padding: 12px 10px 14px; }
	.ozc-product-card__media { height: 140px; margin-bottom: 12px; }
	.ozc-product-card__badge { font-size: 11px; max-width: 60%; }
	.ozc-product-card__category { font-size: 11px; }
	.ozc-product-card__title { font-size: 13px; min-height: 34px; }
	.ozc-product-card__actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 2px 0; }
	.ozc-product-card__btn--primary { order: 1; width: 100%; min-width: 0; }
	/* Cápsula a todo el ancho; se mantienen las zonas 38|1fr|38 para que los
	   divisores pintados a 38px de cada borde sigan cuadrando. */
	.ozc-product-card__qty { order: 0; width: 100%; max-width: 100%; height: 42px; }
	.ozc-product-card__qty-btn, .ozc-product-card__qty-input { width: 100%; height: 100%; }
}
@media (max-width: 380px) {
	.ozc-product-card__media { height: 120px; }
}