body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #fff; color: #333; }
.explore-container { max-width: 1200px; margin: 0 auto; }
h1 { margin: 0 0 20px 0; font-size: 24px; color: #333; }
.search-filters { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; background: #f9f9f9; }
.filter-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.filter-group { flex: 1; min-width: 200px; max-width: 25%; }
.filter-group label { display: block; margin-bottom: 3px; font-weight: bold; color: #333; }
.filter-group input, .filter-group select { width: 100%; padding: 8px; border: 1px solid #999; font-size: 12px; box-sizing: border-box; }
.search-btn { background: #333; color: white; border: 1px solid #333; padding: 8px 16px; cursor: pointer; font-size: 12px; width: 100%; margin-top: 22px; }
.search-btn:hover { background: #555; }
.filter-buttons { margin-top: 20px; margin-bottom: 20px; }
.button-group { margin-bottom: 15px; }
.button-group label { display: block; font-weight: bold; margin-bottom: 10px; font-size: 12px; color: #333; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-button { display: inline-block; padding: 8px 16px; background: #f5f5f5; color: #333; text-decoration: none; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; font-weight: 500; transition: all 0.2s ease; }
.filter-button:hover { background: #e0e0e0; border-color: #bbb; }
.filter-button.active { background: #333; color: white; border-color: #333; }
.alphabet-nav { margin: 20px 0 30px 0; text-align: center; }
.alphabet-nav a { display: inline-block; padding: 5px 8px; margin: 0 2px 7px; text-decoration: none; color: #333; border: 1px solid #ccc; background: #f9f9f9; width: 12px; }
.alphabet-nav a:last-child { width: auto; }
.alphabet-nav a:hover { background: #e0e0e0; }
.section-title { font-size: 18px; font-weight: bold; margin: 20px 0 10px 0; color: #333; }
.section-description { color: #666; font-size: 12px; margin-bottom: 15px; }
.artisans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.artisan-card { border: 1px solid #ddd; background: white; position: relative; overflow: hidden; border-radius: 8px; }
.artisan-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-category { position: absolute; top: 0; left: 0; background: #333; color: white; padding: 5px 10px; font-size: 10px; font-weight: bold; z-index: 5; }
.card-booth { position: absolute; top: 30px; left: 0; background: #f0f0f0; padding: 3px 8px; font-size: 10px; color: #333; z-index: 5; }
.artisan-image { width: 100%; height: 200px; object-fit: contain; display: block; border-radius: 8px 8px 0 0; background-color: #f8f8f8; object-position: center; }
.artisan-info { padding: 15px; }
.artisan-name { font-size: 14px; font-weight: bold; margin-bottom: 5px; color: #333; }
.artisan-company { color: #666; font-size: 12px; margin-bottom: 5px; }
.artisan-location { color: #888; font-size: 11px; margin-bottom: 10px; }
.artisan-actions { display: flex; align-items: center; margin-top: 10px; gap: 8px; }
.artisan-link { display: inline-block; background: #333; color: white; text-decoration: none; padding: 6px 10px; text-align: center; font-size: 11px; border-radius: 4px; flex-shrink: 0; }
.artisan-link:hover { background: #555; }
.artisan-links { display: flex; align-items: center; gap: 4px; flex-grow: 1; justify-content: flex-end; }
.all-links { display: flex; align-items: center; gap: 4px; }
.social-links a:link, .social-links a:visited { color: #515458; }
.social-links a:hover { color: #243a56; }
.back-link a:link, .all-links a:link, .back-link a:visited, .all-links a:visited { display: inline-block; text-decoration: none; color: #666; font-size: 12px; padding: 4px 6px; border-radius: 3px; background: #f5f5f5; border: 1px solid #ddd; transition: all 0.2s ease; line-height: 1; vertical-align: middle; text-transform: uppercase;}
.back-link a:hover, .all-links a:hover { color: #333; background: #e9e9e9; transform: translateY(-1px); }
.fa { margin-right: 0; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; display: none; }
#spinner.show { display: block; animation: fadeIn 0.5s; }

/* Pagination with ranges */
.pagination .page-number {display: inline-flex;flex-direction: column;align-items: center;padding: 8px 2px;min-width: 30px;}
.pagination .page-number .number {font-size: 16px;font-weight: bold;}
.pagination .page-number .range {font-size: 15px;color: #666;margin-top: 2px;white-space: nowrap;}
.pagination .current.page-number .range {color: #fff;}
.pagination .page-nav {padding: 8px 12px; display: inline-flex; align-items: center; vertical-align: middle;}

.pagination { text-align: center; margin-top: 20px; margin-bottom: 20px; }
.pagination a, .pagination span { padding: 1px 2px;  text-decoration: none; color: #333; margin: 0 2px; }
.pagination .current { background: #b4b4b4; color: #000000; border-color: #333; }
.pagination a:hover { background: #f0f0f0; }
.no-results { text-align: center; padding: 20px; color: #666; }
@media (max-width: 1000px) { .filter-group { max-width: 33.333%; } }
@media (max-width: 800px) { .filter-group { max-width: 50%; } }
@media (max-width: 600px) { .artisans-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .filter-group { max-width: 100%; } }
@media (max-width: 480px) { .artisans-grid { grid-template-columns: 1fr; } body { padding: 10px; } }