/*
 * Safetop - Outlet (safetopoutlet) 1.1.0 - bloques «Familias» y «Stock»
 *
 * Las tarjetas de familia llevan las mismas clases y las mismas reglas que la propuesta de Alberto
 * (PropuestaAparienciaOutlet.html, bloque «Categorías»): si la página también lleva su CSS (widget HTML de
 * Creative Elements), coinciden y no hay conflicto; si no, con esto se ven igual.
 * El bloque de stock usa las miniaturas del tema dentro de una rejilla propia.
 */
.sto2 {
    --or: #FF5900;
    --or-d: #E04E00;
    --or-s: #FFF1EA;
    --gr: #2B2D30;
    --mu: #6B6E72;
    --ln: #E6E6E4;
    --bg: #F7F7F6;
    color: var(--gr);
    line-height: 1.6;
}
.sto2 *, .sto2 *::before, .sto2 *::after { box-sizing: border-box; }
.sto2 a { text-decoration: none; }
.sto2 h3, .sto2 p { margin: 0; }

/* ---- Familias (tarjetas) ---- */
.sto2-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sto2-cat { display: block; color: var(--gr) !important; }
.sto2-cat__img { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--bg); margin-bottom: 16px; }
.sto2-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); transition: transform .5s, filter .4s; }
.sto2-cat:hover .sto2-cat__img img { transform: scale(1.05); filter: none; }
.sto2-cat__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.sto2-cat:hover .sto2-cat__img::after { transform: scaleX(1); }
.sto2-cat__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 20px; font-weight: 600; color: var(--mu); background: repeating-linear-gradient(-45deg, #F7F7F6 0 14px, #EFEFED 14px 28px); }
.sto2-cat__new { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--or); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; }
.sto2-cat__n { position: absolute; right: 12px; bottom: 12px; background: var(--gr); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .1em; padding: 4px 8px; border-radius: 2px; }
.sto2-cat h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.sto2-cat h3 i { font-style: normal; color: var(--or); transition: transform .2s; }
.sto2-cat:hover h3 i { transform: translateX(4px); }
.sto2-cat p { color: var(--mu); font-size: 14.5px; }

/* ---- Stock (miniaturas del tema en rejilla) ---- */
.sto-stock__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sto-stock__grid > * { width: 100%; max-width: none; flex: none; margin: 0; }
.sto-stock__grid .product-miniature { height: 100%; }

.sto-vacio { color: var(--mu); padding: 24px 0; }
.sto-preview__h { margin: 32px 0 16px; }

/* Etiqueta «Novedad outlet» (hook de etiquetas del tema): misma forma que «Nuevo» del tema, color gris oscuro. */
.product-flag.st-flag-outlet-new { background: var(--gr, #2B2D30); color: #fff; }

@media (max-width: 1024px) {
    .sto2-cats, .sto-stock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sto-stock__grid { gap: 12px; }
}