/* * Plantillas visuales del catálogo público. * Se activan añadiendo class="plantilla-{nombre}" al . * Cada plantilla sobreescribe solo lo necesario. * ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ ABARROTES — densa, práctica, precios grandes ═══════════════════════════════════════════════════════════════ */ .plantilla-abarrotes { --bg: #fffef8; --radius-md: 4px; --radius-sm: 3px; } .plantilla-abarrotes .catalog-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; } .plantilla-abarrotes .prod-card { border-radius: 4px; } .plantilla-abarrotes .prod-card-img, .plantilla-abarrotes .prod-card-img-placeholder { height: 110px; } .plantilla-abarrotes .prod-card-name { font-size: .8rem; } .plantilla-abarrotes .prod-card-price { font-size: 1.15rem; font-weight: 800; } @media (max-width: 680px) { .plantilla-abarrotes .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; } } /* ═══════════════════════════════════════════════════════════════ BOUTIQUE — minimalista, imágenes grandes, elegante ═══════════════════════════════════════════════════════════════ */ .plantilla-boutique { --bg: #fafaf8; --radius-md: 20px; --radius-sm: 14px; --border: #ece9e4; --shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.06); } .plantilla-boutique .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } .plantilla-boutique .prod-card { border: none; box-shadow: 0 2px 16px rgba(0,0,0,.07); border-radius: 20px; } .plantilla-boutique .prod-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.13); transform: translateY(-4px); } .plantilla-boutique .prod-card-img, .plantilla-boutique .prod-card-img-placeholder { height: 220px; } .plantilla-boutique .prod-card-name { font-weight: 500; letter-spacing: .01em; } .plantilla-boutique .prod-card-body { padding: 14px 18px 18px; } @media (max-width: 680px) { .plantilla-boutique .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } } /* ═══════════════════════════════════════════════════════════════ FERRETERIA — funcional, lista horizontal, categorías prominentes ═══════════════════════════════════════════════════════════════ */ .plantilla-ferreteria { --bg: #f3f4f6; --radius-md: 6px; --radius-sm: 4px; } .plantilla-ferreteria .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .plantilla-ferreteria .prod-card { flex-direction: row; align-items: stretch; border-radius: 6px; } .plantilla-ferreteria .prod-card-img, .plantilla-ferreteria .prod-card-img-placeholder { width: 100px; height: auto; min-height: 90px; flex-shrink: 0; border-bottom: none; border-right: 1px solid var(--border); object-fit: cover; } .plantilla-ferreteria .prod-card-body { padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; } .plantilla-ferreteria .prod-card-name { font-size: .84rem; font-weight: 700; } .plantilla-ferreteria .prod-card-price { font-size: 1rem; font-weight: 800; } @media (max-width: 680px) { .plantilla-ferreteria .catalog-grid { grid-template-columns: 1fr; } .plantilla-ferreteria .prod-card-img, .plantilla-ferreteria .prod-card-img-placeholder { width: 80px; min-height: 80px; } } /* ═══════════════════════════════════════════════════════════════ FRUTERIA — vibrante, fresca, tarjetas grandes y redondeadas ═══════════════════════════════════════════════════════════════ */ .plantilla-fruteria { --bg: #f6fff4; --radius-md: 16px; --radius-sm: 10px; --border: #d4edcc; } .plantilla-fruteria .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .plantilla-fruteria .prod-card { border-radius: 16px; border-color: #d4edcc; } .plantilla-fruteria .prod-card:hover { border-color: var(--store-primary); transform: translateY(-4px); } .plantilla-fruteria .prod-card-img, .plantilla-fruteria .prod-card-img-placeholder { height: 180px; } .plantilla-fruteria .prod-card-name { font-weight: 700; } @media (max-width: 680px) { .plantilla-fruteria .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }