.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: hsl(var(--background) / 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid hsl(var(--border)); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0.7rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.nav-top { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.nav-top-right { position: absolute; right: 0; display: flex; align-items: center; gap: 1.1rem; }
@media (max-width: 480px) { .nav-top-right { gap: 0.7rem; } }
.nav-search { display: inline-flex; color: hsl(var(--foreground)); transition: color 0.2s ease; }
.nav-search:hover { color: hsl(var(--primary)); }
.nav-search svg { width: 18px; height: 18px; }
.nav-instagram { display: inline-flex; color: hsl(var(--foreground)); transition: color 0.2s ease; }
.nav-instagram:hover { color: hsl(var(--primary)); }
.nav-instagram svg { width: 18px; height: 18px; }
.nav-whatsapp { display: inline-flex; align-items: center; color: hsl(var(--foreground)); transition: color 0.2s ease; }
.nav-whatsapp:hover { color: hsl(var(--primary)); }
.nav-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-cats { display: flex; align-items: center; gap: 0.9rem; flex-wrap: nowrap; }
.nav-cats a {
  background: none; border: none; padding: 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); transition: color 0.2s ease; cursor: pointer; white-space: nowrap;
}
.nav-cats a:hover { color: hsl(var(--foreground)); }
.nav-cats a.active { color: hsl(var(--primary)); }
.nav-cats { flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) { .nav-cats { display: none; } }

.hero { position: relative; width: 100%; height: 92vh; min-height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@media (max-width: 640px) { .hero { height: 62vh; min-height: 400px; } }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.22) 55%, transparent 85%); }
.hero-content { position: relative; z-index: 1; text-align: center; padding: 0 1.5rem; max-width: 860px; margin: 5rem auto 0; }
@media (max-width: 640px) { .hero-content { margin-top: 2.5rem; } }
.hero-eyebrow { display: block; color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.08; margin-bottom: 1.4rem; }
.hero p { color: rgba(255,255,255,0.82); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; max-width: 46ch; margin: 0 auto 2.4rem; }
.hero-tagline { color: #fff; font-size: clamp(0.68rem, 3vw, 1.2rem); font-weight: 700; font-style: italic; white-space: nowrap; margin: -1.2rem auto 2rem; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: none; transition: background 0.2s ease; }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }

section.catalog-section { padding: 5rem 1.5rem 2rem; max-width: 1280px; margin: 0 auto; }
@media (max-width: 640px) { section.catalog-section { padding-top: 2.2rem; } }
.section-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; }
.section-header h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 1rem; }
.section-rule { width: 64px; height: 4px; background: hsl(var(--primary)); margin-bottom: 1.5rem; }
.section-header p { color: hsl(var(--muted-foreground)); max-width: 42rem; margin: 0; }

.mobile-filter-bar { display: none; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.mobile-filter-bar a {
  padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid hsl(var(--border)); background: transparent;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.mobile-filter-bar a.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
@media (max-width: 900px) { .mobile-filter-bar { display: flex; } }

.note-banner {
  max-width: 1280px; margin: 0 auto 2.5rem; padding: 0.9rem 1.2rem; background: hsl(var(--accent) / 0.12);
  border: 1px solid hsl(var(--accent) / 0.3); border-radius: 4px; font-size: 0.82rem; color: hsl(var(--foreground) / 0.85); line-height: 1.5;
}

.catalog-actions { display: flex; justify-content: center; margin-top: 1rem; }
.view-all-link {
  padding: 0.9rem 2.4rem; border: 1px solid hsl(var(--foreground) / 0.3); border-radius: 999px;
  background: transparent; color: hsl(var(--foreground)); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; transition: all 0.2s ease;
}
.view-all-link:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.75rem; row-gap: 3rem; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr); column-gap: 0.7rem; row-gap: 1.6rem; } }

/* On phone, show only the first 8 cards up front (view-all reveals the rest) */
@media (max-width: 480px) {
  #grid.has-preview .product-card:not(.extra-card):nth-child(n+9) { display: none; }
}

.product-card { display: flex; flex-direction: column; gap: 0.85rem; }
.product-card[hidden] { display: none !important; }
@media (max-width: 480px) { .product-card { gap: 0.5rem; } }
.gallery { position: relative; aspect-ratio: 3/4; border-radius: 2px; background: hsl(var(--muted)); overflow: hidden; cursor: pointer; }
.gallery img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  pointer-events: none; transition: opacity 0.35s ease;
}
.gallery img.cover { opacity: 1; z-index: 1; }
.gallery img.hover-alt { opacity: 0; z-index: 2; }
.gallery:hover img.hover-alt { opacity: 1; }

.product-info { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
@media (max-width: 480px) { .product-info { gap: 0.3rem; } }
.product-info .enquire-link { margin-top: auto; }
@media (max-width: 480px) { .product-info .enquire-link { font-size: 0.68rem; padding: 0.55rem; letter-spacing: 0.02em; } .product-info .enquire-link svg { width: 13px; height: 13px; } }
.product-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
@media (max-width: 480px) { .product-title-row { gap: 0.4rem; } }
.product-title-row h3 { font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
@media (max-width: 480px) { .product-title-row h3 { font-size: 0.8rem; } }
.product-title-row h3 a:hover { color: hsl(var(--primary)); }
.product-price { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; color: hsl(var(--primary)); white-space: nowrap; }
@media (max-width: 480px) { .product-price { font-size: 0.76rem; } }
.product-category { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
@media (max-width: 480px) { .product-category { font-size: 0.6rem; } }

.instagram-cta { text-align: center; padding: 0 1.5rem 3rem; }
.instagram-cta a {
  display: inline-flex; align-items: center; gap: 0.6rem; color: hsl(var(--foreground));
  font-size: 1rem; font-weight: 600; transition: color 0.2s ease;
}
.instagram-cta a:hover { color: hsl(var(--primary)); }
.instagram-cta svg { width: 22px; height: 22px; }

.about-section { background: hsl(var(--card)); padding: 6rem 1.5rem; border-top: 1px solid hsl(var(--border)); }
.about-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-media { width: 100%; max-height: 640px; overflow: hidden; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted)); }
.about-media img { width: 100%; height: 100%; max-height: 640px; object-fit: contain; }
.about-text h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1.5rem; }
.about-text p { color: hsl(var(--foreground) / 0.8); font-size: 1.2rem; font-weight: 300; line-height: 1.7; margin: 0 0 1.4rem; }
.about-text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.painter-block {
  max-width: 1280px; margin: 3.5rem auto 0; padding-top: 3rem; border-top: 1px solid hsl(var(--border));
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
@media (max-width: 860px) { .painter-block { grid-template-columns: 1fr; gap: 2.5rem; } }
.painter-photo { order: 2; width: 100%; max-height: 640px; overflow: hidden; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted)); }
.painter-text { order: 1; }
@media (max-width: 860px) { .painter-photo, .painter-text { order: initial; } }
.painter-photo img { width: 100%; height: 100%; max-height: 640px; object-fit: contain; }
.painter-text p { color: hsl(var(--foreground) / 0.8); font-size: 1.12rem; font-weight: 300; line-height: 1.7; margin: 0 0 1rem; }
.painter-text p:last-child { margin-bottom: 0; }
.painter-text .eyebrow {
  display: block; margin-bottom: 1.5rem; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: normal; text-transform: none;
  color: hsl(var(--foreground));
}

footer { background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 4rem 1.5rem 2rem; }
.footer-top { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; }
.footer-brand h2 { font-size: 1.9rem; font-weight: 700; color: hsl(var(--primary)); margin-bottom: 0.4rem; }
.footer-brand p { font-size: 0.8rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: hsl(var(--background) / 0.6); margin: 0; }
.footer-links a { display: flex; align-items: center; gap: 0.6rem; color: hsl(var(--background) / 0.8); font-size: 1.05rem; transition: color 0.2s ease; }
.footer-links a:hover { color: hsl(var(--primary)); }
.footer-links svg { width: 22px; height: 22px; }
.footer-bottom { max-width: 1280px; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid hsl(var(--background) / 0.1); font-size: 0.85rem; color: hsl(var(--background) / 0.4); }
.footer-nav { max-width: 1280px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.footer-nav a { font-size: 1rem; color: hsl(var(--background) / 0.65); transition: color 0.2s ease; }
.footer-nav a:hover { color: hsl(var(--primary)); }

.search-bar { max-width: 480px; margin: 0 auto 2rem; }
.search-bar input {
  width: 100%; padding: 0.9rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: 4px;
  background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: 0.95rem; font-family: inherit;
}
.search-bar input:focus { outline: none; border-color: hsl(var(--primary)); }
.search-empty { text-align: center; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; }