/* ==========================================================================
   PRODUCTS PAGE – FINAL CLEAN CSS
   ========================================================================== */

/* Base */
body { background:#fff !important; color:#111; }
.shop-section { background:#fff; min-height:100vh; padding:2rem 0; }
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
/* Sidebar pegado: solo 2px de margen interior a la izquierda en esta página */
.shop-section .container { padding-left:2px !important; }

/* Header */
.breadcrumb { margin-bottom:1rem; }
.breadcrumb-list { display:flex; gap:.5rem; list-style:none; margin:0; padding:0; font-size:.875rem; color:#666; }
.breadcrumb-list li:not(:last-child)::after { content:"/"; margin-left:.5rem; color:#999; }
.breadcrumb-list a { color:#666; text-decoration:none; }
.breadcrumb-list a:hover { color:#000; }
.shop-title-section { text-align:center; margin-bottom:2rem; }
.section-title { font-size:2.5rem; font-weight:300; margin:0 0 .5rem; color:#000; }
.section-subtitle { font-size:1rem; color:#666; margin:0; line-height:1.4; }
.results-count { text-align:center; font-size:.875rem; color:#666; margin-bottom:2rem; }

/* Layout */
.shop-content { display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
.shop-main { min-height:400px; min-width:0; } /* evita recortes cuando el sidebar se pega */

/* Sidebar (filtro) */
.shop-sidebar { position:sticky; top:2rem; margin-left:0; }
.card { background:#f8f8f8; border:1px solid #e0e0e0; border-radius:4px; padding:1.5rem; margin-bottom:1.5rem; }
.sidebar-title { margin:0 0 1.5rem; color:#000; text-transform:uppercase; font:600 .875rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.5px; }
.filter-form { display:flex; flex-direction:column; gap:1.5rem; }
.filter-group { display:flex; flex-direction:column; gap:.5rem; }
.filter-label { font:500 .875rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#333; }
.form-control { width:100%; padding:.75rem; border:1px solid #ddd; border-radius:4px; font-size:.875rem; background:#fff; }
.form-control:focus { outline:none; border-color:#000; }
.form-control--sm { padding:.5rem .75rem; }
.price-range { display:flex; align-items:center; gap:.5rem; }
.price-range .field { flex:1; }
.price-separator { font-size:.875rem; color:#666; }
.filter-actions { display:flex; gap:.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.5rem; border:0; border-radius:4px; font:500 .875rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; transition:.2s; text-decoration:none; }
.btn--primary { background:#000; color:#fff; }
.btn--primary:hover { background:#333; }
.btn--ghost { background:transparent; color:#666; border:1px solid #ddd; }
.btn--ghost:hover { color:#000; border-color:#000; }
.btn--sm { padding:.5rem 1rem; font-size:.75rem; }

/* Products Grid (mobile-first) */
.products-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  grid-template-columns: repeat(3, 1fr); /* siempre 3 columnas */
}


/* Product Cards – robustos */
.product-card { background:#fff; border:1px solid #e0e0e0; border-radius:4px; transition:.2s; position:relative; display:flex; flex-direction:column; overflow:visible; }
.product-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }

.product-image { position:relative; aspect-ratio:1; background:#f5f5f5; overflow:hidden; border-radius:4px 4px 0 0; }
.product-image a { display:block; width:100%; height:100%; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-image:hover img { transform:scale(1.05); }
/* placeholder */
.product-image img[src*="placeholder"]{ background:#f0f0f0; color:#999; display:flex; align-items:center; justify-content:center; }
.product-image img[src*="placeholder"]::before{ content:"🖼"; font-size:3rem; }

.stock-badge{ position:absolute; top:.5rem; right:.5rem; background:#ff4444; color:#fff; padding:.25rem .5rem; border-radius:12px; font-size:.75rem; font-weight:500; }
.stock-badge--low{ background:#ff9500; }

.product-info{ padding:1.5rem; display:flex; flex-direction:column; flex:1 1 auto; }
.product-title{ margin:0 0 1rem; font-size:1.1rem; font-weight:500; color:#000; }
.product-title a{ color:inherit; text-decoration:none; }
.product-title a:hover{ color:#666; }
.product-details{ margin-bottom:1rem; font-size:.875rem; color:#666; line-height:1.4; }
.product-technique,.product-dimensions{ margin:.25rem 0; }
.product-technique span,.product-dimensions span{ color:#333; }
.product-description{ font-size:.875rem; color:#666; line-height:1.4; margin:0 0 1.5rem; }

.product-footer{ margin-top:auto; display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; }
.product-price{ font-size:1.25rem; font-weight:600; color:#000; }
.add-to-cart{ flex:1 1 auto; min-width:0; white-space:normal; text-align:center; padding:.65rem 1rem; font-size:clamp(.72rem,1.1vw,.82rem); background:#000; color:#fff; border:0; border-radius:4px; font-weight:600; letter-spacing:.5px; cursor:pointer; transition:.2s; }
.add-to-cart:hover:not(:disabled){ background:#333; }
.add-to-cart:disabled{ background:#ccc; cursor:not-allowed; }

@media (max-width:900px){
  .product-footer{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .add-to-cart{ width:100%; }
}

/* Empty state & loader */
.empty-state{ text-align:center; padding:4rem 2rem; }
.empty-state-content h2{ font-size:1.5rem; font-weight:300; margin:0 0 1rem; color:#000; }
.empty-state-content p{ color:#666; margin:0 0 2rem; }
.loading-overlay{ position:fixed; inset:0; background:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; z-index:9999; }
.loading-spinner{ width:40px; height:40px; border:3px solid #f0f0f0; border-top:3px solid #000; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Desktop: sidebar estrecho y galería centrada/robusta */
@media (min-width:992px){
  .shop-content{ grid-template-columns:270px minmax(0,1fr); gap:2rem; }
  .shop-sidebar{ margin-left:0; }
}

/* Misc */
.sidebar-subtitle{ font-size:1rem; font-weight:500; margin:0 0 1rem; color:#000; }
.technique-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.technique-tag{ background:#e0e0e0; color:#666; padding:.25rem .75rem; border-radius:12px; font-size:.75rem; font-weight:500; }

/* Mobile tweaks */
@media (max-width:768px){
  .section-title{ font-size:2rem; }
  .shop-sidebar{ position:static; }
}