/* OZ Cotizador — Design pack "herramientasperu"
 * Card de catálogo exacta al diseño de HerramientasPerú:
 *   - Card de fondo NEGRO, esquinas redondeadas.
 *   - Imagen del producto dentro de una caja BLANCA redondeada (arriba).
 *   - Categoría en GRIS + título en BLANCO negrita (debajo, sobre el negro).
 *   - Botón naranja con ícono de carrito que AGREGA AL CARRITO (add to cart),
 *     abajo a la derecha.
 *
 * Todo el estilo vive bajo .ozc-product-card--pack-herramientasperu para no
 * afectar otros packs. El HTML lo genera frontend/templates/loop-product-card.php.
 */

.ozc-product-card--pack-herramientasperu {
  --ozc-hp-bg: #000000;             /* fondo negro de la card */
  --ozc-hp-media-bg: #ffffff;       /* caja blanca de la imagen */
  --ozc-hp-title: #ffffff;          /* título */
  --ozc-hp-muted: #8a9099;          /* categoría / texto secundario */
  --ozc-hp-orange: #f15a22;         /* botón carrito (naranja Truper) */
  --ozc-hp-orange-hover: #d94a16;
  --ozc-hp-radius: 0px;        /* sin esquinas redondas en la card */
  --ozc-hp-media-radius: 0px;  /* ni en la caja de la imagen */
  --ozc-hp-btn-radius: 12px;

  position: relative;
  box-sizing: border-box;
  /* Grid: imagen y categoria a todo el ancho; abajo "titulo | boton". */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "media    media"
    "category category"
    "title    actions"
    "price    actions"
    "excerpt  actions"
    "brand    actions";
  align-items: start;
  column-gap: 0.9rem;
  background: var(--ozc-hp-bg);
  border: 1px solid #2f3336;
  border-radius: var(--ozc-hp-radius);
  padding: 0.85rem 0.95rem 1.1rem;
  text-align: left;
  color: var(--ozc-hp-title);
  overflow: hidden;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.ozc-product-card--pack-herramientasperu:hover,
.ozc-product-card--pack-herramientasperu:focus-within {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/* Colocación por areas del grid (imagen y categoria full width; titulo izq / boton der) */
.ozc-product-card--pack-herramientasperu .ozc-product-card__media     { grid-area: media; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__category  { grid-area: category; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__title     { grid-area: title; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__price     { grid-area: price; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__excerpt   { grid-area: excerpt; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__brand     { grid-area: brand; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__actions   { grid-area: actions; }

.ozc-product-card--pack-herramientasperu .ozc-product-card__section {
  margin-top: 0.55rem;
}

/* ---- Imagen dentro de caja blanca ---- */
.ozc-product-card--pack-herramientasperu .ozc-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1 / 1;
  margin: -0.85rem -0.95rem 0;   /* full-bleed: imagen pegada a los bordes superiores, sin caja */
  padding: 0;                     /* imagen tal cual, sin aire interno */
  background: var(--ozc-hp-media-bg);
  border-radius: var(--ozc-hp-media-radius);
  text-decoration: none;
  color: inherit;
}

/* La marca no se muestra como badge sobre la imagen en este pack */
.ozc-product-card--pack-herramientasperu .ozc-product-card__media .ozc-product-card__badge {
  display: none;
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__media img,
.ozc-product-card--pack-herramientasperu .ozc-product-card__placeholder {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  display: block;
  transition: transform 0.28s ease;
}

.ozc-product-card--pack-herramientasperu:hover .ozc-product-card__media img,
.ozc-product-card--pack-herramientasperu:focus-within .ozc-product-card__media img {
  transform: scale(1.03);
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__placeholder {
  border-radius: 6px;
  background: linear-gradient(145deg, #f6f6f6 0%, #ececec 100%);
}

/* ---- Categoría (gris, arriba del título) ---- */
.ozc-product-card--pack-herramientasperu .ozc-product-card__category {
  margin-top: 0.95rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ozc-hp-muted);
}

/* ---- Título (blanco, negrita) ---- */
.ozc-product-card--pack-herramientasperu .ozc-product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 0.3rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.28;
  /* Sin tope de altura fijo: el -webkit-line-clamp ya limita a 2 lineas.
     Un max-height calculado recortaba la 2a linea cuando el <a> usa otra
     altura de linea (del tema). */
  max-height: none;
  min-height: 0;        /* clave en grid: sin esto, min-height:auto ignora el max-height */
  color: var(--ozc-hp-title);
  overflow: hidden;
  word-break: break-word;
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__title a:hover,
.ozc-product-card--pack-herramientasperu .ozc-product-card__title a:focus-visible {
  color: var(--ozc-hp-orange);
}

/* ---- Precio (si está habilitado en el admin) ---- */
.ozc-product-card--pack-herramientasperu .ozc-product-card__price {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ozc-hp-title);
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__price .woocommerce-Price-amount {
  color: var(--ozc-hp-title);
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ozc-hp-muted);
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__brand {
  font-size: 0.78rem;
  color: var(--ozc-hp-muted);
}

/* ---- Acciones: botón naranja de carrito, alineado abajo a la derecha ---- */
.ozc-product-card--pack-herramientasperu .ozc-product-card__actions {
  display: flex;
  align-self: center;   /* boton centrado vertical respecto al titulo */
  justify-self: end;    /* a la derecha */
  align-items: center;
  margin-top: 0;
}

/* El selector de cantidad no aparece en este diseño (botón directo de carrito) */
.ozc-product-card--pack-herramientasperu .ozc-product-card__qty {
  display: none;
}

/* Botón principal -> cuadrado redondeado naranja, solo ícono de carrito */
.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: var(--ozc-hp-btn-radius);
  background: var(--ozc-hp-orange);
  color: #fff;
  font-size: 0;            /* oculta el texto (el aria-label conserva accesibilidad) */
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(241, 90, 34, 0.3);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary::after {
  display: none;
  content: none;
}

/* Ícono de carrito (máscara SVG, hereda el blanco del color del botón) */
.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  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 fill='%23000' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%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 fill='%23000' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary:hover {
  background: var(--ozc-hp-orange-hover);
  box-shadow: 0 12px 24px rgba(241, 90, 34, 0.38);
  transform: translateY(-1px);
}

.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.4), 0 12px 24px rgba(241, 90, 34, 0.34);
}

/* Estado "añadido": check antes del carrito (AJAX add-to-cart de Woo) */
.ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary.added::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%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 fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Enlace "Ver carrito" que Woo agrega tras el AJAX: chip discreto bajo el botón */
.ozc-product-card--pack-herramientasperu .added_to_cart {
  align-self: flex-end;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ozc-hp-orange);
  text-decoration: none;
}

.ozc-product-card--pack-herramientasperu .added_to_cart:hover {
  text-decoration: underline;
}

/* WhatsApp oculto en este diseño (la card de referencia no lo incluye).
 * Si querés mostrarlo, quitá esta regla o desactivala desde el admin. */

/* ===== Movil: card compacta (boton 52->40px, titulo y paddings menores) para
   que no se vea apretada en 2 columnas. ===== */
@media (max-width: 768px) {
  .ozc-product-card--pack-herramientasperu {
    padding: 0.6rem 0.7rem 0.9rem;
    /* 1 sola columna: el boton va DEBAJO del titulo (titulo a todo el ancho) */
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "category"
      "title"
      "price"
      "excerpt"
      "brand"
      "actions";
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__media {
    margin: -0.6rem -0.7rem 0;
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__actions {
    justify-self: end;   /* boton abajo, a la derecha */
    align-self: auto;
    margin-top: 0.7rem;
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__category {
    margin-top: 0.6rem;
    font-size: 0.62rem;
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__title {
    font-size: 0.82rem;
    line-height: 1.22;
    max-height: none;
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary {
    width: 40px;
    height: 40px;
  }
  .ozc-product-card--pack-herramientasperu .ozc-product-card__btn--primary::before {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/* ── Fix: contenido pegado ARRIBA. En grids de igual altura, sin esto las filas
   se estiran (align-content:stretch por defecto) y el botón del carrito queda
   flotando lejos del título. Con align-content:start el contenido + botón van
   juntos arriba y el espacio sobrante queda al fondo (uniforme entre cards). ── */
.ozc-product-card--pack-herramientasperu { align-content: start; }
.ozc-product-card--pack-herramientasperu .ozc-product-card__actions { align-self: start; }