header {border-bottom: 2px solid #d4af37; align-items: center; }
header h1 {color: #d4af37; white-space: nowrap;}

.products-section {padding: 24px 16px; max-width: 1200px; margin: 0 auto; 
	background-color: rgba(255, 255, 255, 0.93); flex: 1;}
.products-section h2 {font-family: 'Bruno Ace SC', cursive; color: #d4af37;
	margin-bottom: 20px; font-size: 1.3em; }
#product-grid {display: grid; gap: 20px;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tile {background-color: #2a2a2a; border: 1px solid #3a3a3a;
	border-radius: 8px; overflow: hidden; cursor: pointer;
	text-decoration: none; color: inherit; display: block;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.tile:hover {transform: translateY(-4px); border-color: #d4af37;
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25); }
.tile.landscape {display: flex; flex-direction: column;}
.tile.landscape .tile-image {width: 100%; height: 180px; object-fit: contain;
	background-color: #f5f5f5;}
.tile.landscape .tile-content {padding: 12px; flex: 1; display: flex; 
	flex-direction: column; justify-content: space-between;}
.tile.portrait {display: flex; flex-direction: row; min-height: 160px;}
.tile.portrait .tile-image {width: 45%; object-fit: cover; flex-shrink: 0;}
.tile.portrait .tile-content {padding: 12px; flex: 1; display: flex;
	flex-direction: column; justify-content: space-between;
	overflow: hidden;}
.tile-product-name {font-family: 'Bruno Ace SC', cursive; color: #d4af37; 
	font-size: 0.9em; margin-bottom: 6px; line-height: 1.3;}
.tile-description {font-size: 0.82em; color: #ccc; flex: 1; /* -webkit-line-clamp: 4;*/
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.tile-merchant {margin-top: 10px; display: flex; align-items: center; }
.tile-merchant img {height: 22px; max-width: 80px; object-fit: contain; opacity: 0.8;}
.tile-merchant span {font-size: 0.75em; color: #888;} /* Fallback if no merchant icon*/

        /* ── Loading spinner ── */
#load-more-trigger {height: 60px; display: flex; align-items: center;
	justify-content: center; margin-top: 10px;}

.spinner {width: 28px; height: 28px; border: 3px solid #333;
	border-top-color: #d4af37; border-radius: 50%;
	animation: spin 0.7s linear infinite;}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
	header { flex-direction: column; align-items: flex-start; }
	nav a  { margin-left: 0; margin-right: 14px; }
	#product-grid { grid-template-columns: 1fr; }
    .tile.portrait .tile-image { width: 45%; }
        }