/*
 * Tarjetas de subcategorias reutilizadas en varias categorias de Obturadores
 * (596 = Obturadores, 694 = Obturadores Pequeños, 695 = Obturadores Grandes,
 * 641 = Obturadores Ciegos, 642 = Obturadores Con Bypass, y las que se sumen).
 * Vive en un fichero de tema, NO en category_lang.description, porque cualquier
 * edicion de esa descripcion desde el back office pasa por CKEditor/HTMLPurifier,
 * que elimina los bloques <style> incrustados en el contenido (rompe el diseno
 * sin tocar el resto del HTML). Cargado condicionalmente por id de categoria,
 * ver category-header.tpl.
 *
 * Selector: la clase .sp-oc-cards en el div contenedor. Las categorias 596,
 * 694, 695 y 641 se generaron antes de este cambio y usan solo un id propio
 * (#sp-oc-596 etc) sin la clase; se mantienen aqui por compatibilidad. Toda
 * categoria NUEVA solo necesita class="sp-oc-cards" en su HTML y la condicion
 * de categoria en category-header.tpl — no hace falta tocar este fichero.
 */
.block-category-inner{float:none!important;width:100%!important}
.sp-oc-cards,#sp-oc-596,#sp-oc-694,#sp-oc-695,#sp-oc-641{width:100%;margin:0 auto;padding:8px 0 4px;box-sizing:border-box}
.sp-oc-cards .sp-oc-grid,#sp-oc-596 .sp-oc-grid,#sp-oc-694 .sp-oc-grid,#sp-oc-695 .sp-oc-grid,#sp-oc-641 .sp-oc-grid{display:grid;width:100%;box-sizing:border-box;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.sp-oc-cards .sp-oc-card,#sp-oc-596 .sp-oc-card,#sp-oc-694 .sp-oc-card,#sp-oc-695 .sp-oc-card,#sp-oc-641 .sp-oc-card{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:16px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%);box-shadow:0 2px 10px rgba(20,20,20,.07);border:1px solid rgba(0,0,0,.05);overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.sp-oc-cards .sp-oc-card:hover,#sp-oc-596 .sp-oc-card:hover,#sp-oc-694 .sp-oc-card:hover,#sp-oc-695 .sp-oc-card:hover,#sp-oc-641 .sp-oc-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(20,20,20,.14)}
.sp-oc-cards .sp-oc-media,#sp-oc-596 .sp-oc-media,#sp-oc-694 .sp-oc-media,#sp-oc-695 .sp-oc-media,#sp-oc-641 .sp-oc-media{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#fff}
.sp-oc-cards .sp-oc-media img,#sp-oc-596 .sp-oc-media img,#sp-oc-694 .sp-oc-media img,#sp-oc-695 .sp-oc-media img,#sp-oc-641 .sp-oc-media img{width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box;transition:transform .35s ease}
.sp-oc-cards .sp-oc-card:hover .sp-oc-media img,#sp-oc-596 .sp-oc-card:hover .sp-oc-media img,#sp-oc-694 .sp-oc-card:hover .sp-oc-media img,#sp-oc-695 .sp-oc-card:hover .sp-oc-media img,#sp-oc-641 .sp-oc-card:hover .sp-oc-media img{transform:scale(1.06)}
.sp-oc-cards .sp-oc-media::after,#sp-oc-596 .sp-oc-media::after,#sp-oc-694 .sp-oc-media::after,#sp-oc-695 .sp-oc-media::after,#sp-oc-641 .sp-oc-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(200,20,20,.05) 100%);opacity:0;transition:opacity .28s ease}
.sp-oc-cards .sp-oc-card:hover .sp-oc-media::after,#sp-oc-596 .sp-oc-card:hover .sp-oc-media::after,#sp-oc-694 .sp-oc-card:hover .sp-oc-media::after,#sp-oc-695 .sp-oc-card:hover .sp-oc-media::after,#sp-oc-641 .sp-oc-card:hover .sp-oc-media::after{opacity:1}
.sp-oc-cards .sp-oc-title,#sp-oc-596 .sp-oc-title,#sp-oc-694 .sp-oc-title,#sp-oc-695 .sp-oc-title,#sp-oc-641 .sp-oc-title{display:flex;flex-direction:column;gap:2px;width:100%;padding:14px 12px 20px;text-decoration:none;color:#222;box-sizing:border-box}
.sp-oc-cards .sp-oc-title b,#sp-oc-596 .sp-oc-title b,#sp-oc-694 .sp-oc-title b,#sp-oc-695 .sp-oc-title b,#sp-oc-641 .sp-oc-title b{font-size:clamp(14px,1.3vw,20px);font-weight:700;line-height:1.25;color:#222}
.sp-oc-cards .sp-oc-title span,#sp-oc-596 .sp-oc-title span,#sp-oc-694 .sp-oc-title span,#sp-oc-695 .sp-oc-title span,#sp-oc-641 .sp-oc-title span{font-size:clamp(12px,.9vw,14px);color:#777;font-weight:500}
@media(max-width:575px){
.sp-oc-cards .sp-oc-grid,#sp-oc-596 .sp-oc-grid,#sp-oc-694 .sp-oc-grid,#sp-oc-695 .sp-oc-grid,#sp-oc-641 .sp-oc-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;gap:14px}
.sp-oc-cards .sp-oc-media img,#sp-oc-596 .sp-oc-media img,#sp-oc-694 .sp-oc-media img,#sp-oc-695 .sp-oc-media img,#sp-oc-641 .sp-oc-media img{padding:8%}
}