/* ============================================================
 * OZ Cotizador — Design pack "7ksafety"
 * Card de tienda de 7K Safety.
 *
 * Diseno:
 *   - Tarjeta blanca con esquinas redondeadas (14px) y borde gris claro.
 *   - Imagen cuadrada, contenida, con su propio radio interior.
 *   - Chip gris con la marca, debajo de la imagen.
 *   - Categoria en mayusculas, gris, chica.
 *   - Titulo en negrita, oscuro, maximo 2 lineas.
 *   - Boton "Cotizar" rojo solido a todo el ancho.
 *
 * Orden de las partes y que se muestra (precio, WhatsApp, marca, categoria)
 * se controla en: Cotizador -> Ajustes -> Loops, por contexto (archivo /
 * relacionados). Este archivo solo pinta.
 *
 * Se usa !important en las propiedades decisivas porque compiten reglas del
 * tema (woocommerce/shop-archive.css) y de WooCommerce core, varias de ellas
 * ya con !important.
 *
 * Todo scopeado a .ozc-product-card--pack-7ksafety
 * ============================================================ */

.ozc-product-card--pack-7ksafety {
	--ozc7k-red: #e30613;
	--ozc7k-red-dark: #c00510;
	--ozc7k-ink: #16181c;
	--ozc7k-muted: #7c828a;
	--ozc7k-border: #e9e9e9;
	--ozc7k-chip-bg: #f2f2f3;
	--ozc7k-chip-ink: #4a4f56;
	--ozc7k-radius: 14px;
	--ozc7k-pad: 14px;
}

/* ---------------- Tarjeta ----------------
   box-sizing en la tarjeta Y en sus hijos: con width:100% + padding + borde,
   content-box la haria 30px mas ancha que su columna del grid y se comeria el
   gap (la ultima columna quedaba cortada).
   height:100% para que todas las tarjetas de la fila midan igual y, junto al
   margin-top:auto de __actions, los botones queden a la misma altura. */
.ozc-product-card--pack-7ksafety,
.ozc-product-card--pack-7ksafety * {
	box-sizing: border-box;
}
.ozc-product-card--pack-7ksafety {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: var(--ozc7k-pad) var(--ozc7k-pad) 16px;
	background: #ffffff;
	border: 1px solid var(--ozc7k-border);
	border-radius: var(--ozc7k-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.ozc-product-card--pack-7ksafety:hover {
	border-color: #dcdcdc;
	box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
}
/* El tema fuerza `height:auto !important` a <=1199px (venia del diseno viejo de
   alto fijo 428px). Con esta regla mas especifica las tarjetas siguen midiendo
   lo mismo dentro de la fila tambien en tablet, asi los botones no se
   desalinean. */
.oz-shop-layout__main .ozc-product-card.ozc-product-card--pack-7ksafety {
	height: 100% !important;
}

/* El badge "¡Oferta!" del diseno anterior se generaba con ::before. Fuera. */
.ozc-product-card--pack-7ksafety::before {
	content: none;
}

/* ---------------- Imagen ---------------- */
.ozc-product-card--pack-7ksafety .ozc-product-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 14px;
	border-radius: 10px;
	background: #ffffff;
	line-height: 0;
	overflow: hidden;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .35s ease;
}
.ozc-product-card--pack-7ksafety:hover .ozc-product-card__media img {
	transform: scale(1.03);
}
.ozc-product-card--pack-7ksafety .ozc-product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f5f6;
}

/* La marca se muestra como chip debajo de la imagen, no superpuesta. */
.ozc-product-card--pack-7ksafety .ozc-product-card__badge {
	display: none;
}

/* ---------------- Secciones de texto ---------------- */
.ozc-product-card--pack-7ksafety .ozc-product-card__section {
	padding-left: 0;
	padding-right: 0;
}
/* WooCommerce core aplica `.woocommerce ul.products li.product h3 {padding:.5em 0}`
   y por especificidad le gana a __section; se neutraliza con una regla mas
   especifica (0,4,0). */
.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__title.ozc-product-card__section {
	padding-left: 0;
	padding-right: 0;
}

/* Chip de marca */
.ozc-product-card--pack-7ksafety .ozc-product-card__brand {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--ozc7k-chip-bg);
	color: var(--ozc7k-chip-ink);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
}
/* En este pack el chip lleva solo el nombre; el "Marca:" se omite. */
.ozc-product-card--pack-7ksafety .ozc-product-card__brand-label {
	display: none;
}

/* Categoria */
.ozc-product-card--pack-7ksafety .ozc-product-card__category {
	margin: 0 0 6px;
	color: var(--ozc7k-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .045em;
}

/* Titulo — maximo 2 lineas para que todas las cards midan igual */
.ozc-product-card--pack-7ksafety .ozc-product-card__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ozc7k-ink);
	text-decoration: none;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__title a:hover {
	color: var(--ozc7k-red);
}

/* Precio (si el contexto lo tiene activado) */
.ozc-product-card--pack-7ksafety .ozc-product-card__price {
	margin: 0 0 12px;
	color: var(--ozc7k-red);
	font-size: 16px;
	font-weight: 700;
	text-align: left;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__price del,
.ozc-product-card--pack-7ksafety .ozc-product-card__price del .amount {
	margin-right: 6px;
	color: #9aa0a6;
	font-weight: 400;
	text-decoration: line-through;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__price ins {
	text-decoration: none;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__price ins,
.ozc-product-card--pack-7ksafety .ozc-product-card__price ins .amount {
	color: var(--ozc7k-red);
}

/* Excerpt (si el contexto lo tiene activado) */
.ozc-product-card--pack-7ksafety .ozc-product-card__excerpt {
	margin: 0 0 12px;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.55;
}

/* ---------------- Acciones ---------------- */
/* margin-top:auto empuja el boton al pie: con titulos de 1 o 2 lineas todos
   los botones de la fila quedan a la misma altura. */
.ozc-product-card--pack-7ksafety .ozc-product-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: auto;
	padding-top: 0;
	padding-bottom: 0;
}

/* Stepper de cantidad (si se muestra) */
.ozc-product-card--pack-7ksafety .ozc-product-card__qty {
	display: flex;
	align-items: stretch;
	justify-content: center;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__qty-btn {
	width: 38px;
	border: 0;
	background: #f4f4f5;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__qty-input {
	width: 54px;
	border: 0;
	border-left: 1px solid #e2e2e2;
	border-right: 1px solid #e2e2e2;
	text-align: center;
	font-size: 15px;
}

/* Boton Cotizar — rojo solido, ancho completo, sin icono */
.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px;
	margin: 0 !important;
	padding: 12px 16px !important;
	background: var(--ozc7k-red) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color .2s ease;
}
/* El diseno anterior metia un carrito con ::before; en este no va icono. */
.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary::before {
	content: none !important;
}
.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary:hover,
.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary:focus-visible {
	background: var(--ozc7k-red-dark) !important;
	color: #ffffff !important;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary:focus-visible {
	outline: 2px solid var(--ozc7k-red);
	outline-offset: 2px;
}

/* ---------------- WhatsApp (si el contexto lo tiene activado) ----------------
   Ya no va superpuesto sobre la imagen: se apila debajo del boton Cotizar. */
.ozc-product-card--pack-7ksafety .ozc-product-card__wa {
	position: static;
	width: 100%;
	margin: 10px 0 0;
}
.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__wa-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: auto !important;
	min-height: 44px;
	padding: 10px 16px !important;
	background: #ffffff !important;
	color: #128c4a !important;
	border: 1px solid #25d366 !important;
	border-radius: 8px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__wa-btn::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ozc-product-card--pack-7ksafety .ozc-product-card__wa-btn:hover,
.ozc-product-card--pack-7ksafety .ozc-product-card__wa-btn:focus-visible {
	background: #25d366 !important;
	color: #ffffff !important;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1199px) {
	.ozc-product-card--pack-7ksafety {
		--ozc7k-pad: 12px;
	}
}
@media (max-width: 575px) {
	.ozc-product-card--pack-7ksafety {
		--ozc7k-pad: 10px;
		--ozc7k-radius: 12px;
	}
	.ozc-product-card--pack-7ksafety .ozc-product-card__title {
		font-size: 15px;
		margin-bottom: 12px;
	}
	.ozc-product-card--pack-7ksafety .ozc-product-card__category {
		font-size: 11px;
	}
	.ozc-product-card.ozc-product-card--pack-7ksafety .ozc-product-card__btn--primary {
		min-height: 44px;
		font-size: 14px;
	}
}