/* CALIMONO Storefront Styles */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

header {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem 0;
}

header nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

header nav a {
    font-weight: bold;
    font-size: 1.25rem;
    text-decoration: none;
    color: #000;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

footer {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 2rem 1rem;
    text-align: center;
    color: #666;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    main {
        padding: 1rem;
    }
}

/* Catalog styles */
.category-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
}
.category-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cat-link { color: #333; text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 4px; }
.cat-link.active { background: #007bff; color: #fff; }

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.product-card { border: 1px solid #eee; border-radius: 6px; overflow: hidden; background: #fff; display:flex; flex-direction:column; }
.product-image { width:100%; height:180px; object-fit: contain; display:block; }
.no-image { width:100%; height:180px; display:flex; align-items:center; justify-content:center; color:#888; background:#f5f5f5; }
.product-body { padding: 0.75rem; flex:1; display:flex; flex-direction:column; }
.product-body h3 { margin:0 0 0.5rem 0; font-size:1rem; }
.price { font-weight:700; margin-top:auto; }
.btn { display:inline-block; padding:0.5rem 0.75rem; border-radius:4px; text-decoration:none; }
.btn-primary { background:#007bff; color:#fff; }
.btn-whatsapp { background:#25D366; color:#fff; }
.btn-whatsapp.disabled { opacity:0.6; pointer-events:none; }

.pagination { display:flex; gap:0.5rem; align-items:center; justify-content:center; margin-top:1rem; }

/* Product detail */
.product-detail { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; align-items:start; }
.primary-image img.primary { width:100%; height:420px; object-fit:cover; border-radius:6px; }
.gallery { display:flex; gap:0.5rem; margin-top:0.5rem; }
.gallery .thumb { width:72px; height:72px; object-fit:cover; border-radius:4px; }

/* Search-first storefront */
.catalog-shell { display:flex; flex-direction:column; gap:2rem; }
.hero-search {
    background: linear-gradient(135deg, #f8f9fa 0%, #eef4ff 100%);
    border: 1px solid #dce5f6;
    border-radius: 16px;
    padding: 2rem;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.hero-copy h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin:0 0 0.5rem; }
.hero-copy p { margin:0; color:#666; max-width:700px; }
.eyebrow { font-size:0.85rem; text-transform:uppercase; letter-spacing:0.16em; color:#0d6efd; font-weight:700; margin-bottom:0.5rem !important; }
.hero-form { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-start; }
.search-input-shell { position:relative; flex:1 1 320px; min-width:240px; }
.hero-form .search-input { width:100%; padding:0.9rem 1rem; border:1px solid #cfd8e3; border-radius:999px; font-size:1rem; box-sizing:border-box; }
.hero-form .btn-search { border:none; background:#0d6efd; color:#fff; padding:0.9rem 1.2rem; border-radius:999px; cursor:pointer; }
.search-suggestions {
    display:none;
    position:absolute;
    top:calc(100% + 0.4rem);
    left:0;
    right:0;
    background:#fff;
    border:1px solid #e5eaf2;
    border-radius:12px;
    box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
    overflow:hidden;
    z-index:20;
}
.search-suggestions.is-open { display:flex; flex-direction:column; }
.suggestion-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    padding:0.75rem 0.9rem;
    text-decoration:none;
    color:#111;
}
.suggestion-item:hover { background:#f6f9ff; }
.suggestion-title { font-weight:600; }
.suggestion-thumb { width:42px; height:42px; object-fit:cover; border-radius:8px; }
.section-block { display:flex; flex-direction:column; gap:1rem; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; }
.section-heading h2 { margin:0; }
.section-heading p { margin:0; color:#666; }
.results-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem; }
.results-toolbar h2 { margin:0; }
.results-toolbar p { margin:0; color:#666; }
.results-count { font-weight:600; color:#111; }
.no-results { padding:2rem; text-align:center; border:1px dashed #d9d9d9; border-radius:8px; color:#666; background:#fafafa; }

@media (max-width: 900px) {
    .product-detail { grid-template-columns: 1fr; }
    .primary-image img.primary { height:320px; }
}

@media (max-width: 640px) {
    .hero-search { padding:1.25rem; }
    .hero-form { flex-direction:column; }
    .hero-form .btn-search { width:100%; }
    .search-input-shell { width:100%; }
}