:root{--bg:#0e0e12;--card:#16161b;--text:#ffffff;--muted:#c9c9cf;--accent:#f6c251;--accent-2:#f0a85a;--shadow:0 10px 25px rgba(0,0,0,.35)}
*{box-sizing:border-box} html{font-size:18px} body{margin:0;background:var(--bg);color:var(--text);font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif}
h1,h2,h3,.brand-name,.nav a,.block-btn,button{font-family:'Cinzel Decorative','Cinzel',ui-serif,Georgia,serif}
a{color:inherit;text-decoration:none} .container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;background:#0d0d12 url('/images/logo-symbol.png') center/80% no-repeat;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.brand-name{font-weight:800;letter-spacing:.5px}
.nav{display:flex;align-items:center;gap:12px}
.btn,button{cursor:pointer;border:none;padding:12px 16px;border-radius:999px;background:#1f1f27;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#1a140e;font-weight:900}
.btn-ghost{background:transparent;border:1px solid #2a2a33;color:#fff}
.hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;border-bottom:1px solid #222}
.hero::before{content:'';position:absolute;inset:0;background:url('/images/header.jpg') center/cover no-repeat;filter:contrast(1) brightness(.92)}
@media(min-width:1024px){ .hero{min-height:60vh} .hero::before{background-position:50% 24%;} } /* raised a bit to show 'FINE ART' + symbol */
.hero-inner{position:relative;z-index:1;width:100%}
.hero-spacer{height:18vh}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--card);border:1px solid #1f1f25;border-radius:16px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.35);display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;background:#0c0c0f;display:block;width:100%;object-fit:cover;cursor:zoom-in}
.card-body{padding:16px}
.card-title{margin:0;font-weight:700}
.card-title a{text-decoration:underline}
.small{font-size:1rem;color:var(--muted)}
.meta{display:flex;gap:10px;color:var(--muted);font-size:.95rem;margin:8px 0;flex-wrap:wrap}
.badge{font-size:.85rem;padding:4px 8px;border:1px solid #2d2d36;border-radius:999px;color:#bfecc2}
footer{padding:40px 24px;color:#cfd0d3}
.cat-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #2a2a33;color:#fff;border-radius:12px;padding:8px 12px}
.cat-panel{position:absolute;top:62px;left:24px;background:#14141a;border:1px solid #23232b;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.35);overflow:hidden;max-height:0;transition:max-height .35s ease;width:240px}
.cat-panel.open{max-height:360px}
.cat-panel a{display:block;padding:12px 14px;border-bottom:1px solid #1d1d25;color:#fff}
.cat-panel a:last-child{border-bottom:none}
.cart-link{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #2a2a33;border-radius:12px}
.cart-icon{width:24px;height:24px;display:inline-block}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.product-img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:16px;border:1px solid #1f1f25;background:#0b0b0f;cursor:zoom-in;max-height:75vh;object-fit:contain}
@media(max-width:840px){ .product{grid-template-columns:1fr} .product-img{max-height:60vh} }
.form{display:grid;gap:12px}
.input, select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #2a2a33;background:#1b1b22;color:#f3f3f5}
label{display:block;font-size:1rem;color:#b3b3bb;margin:6px 0 4px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #2a2a33;padding:10px;text-align:left}
.bottom-cta{margin:28px 0 12px;display:flex;gap:12px;flex-wrap:wrap}
.bottom-cta .btn-accent{flex:1}
input.qty{padding:10px 12px;border-radius:10px;border:1px solid #2a2a33;background:#1b1b22;color:#f3f3f5;width:80px}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000}
#lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

.hero + main{margin-top:10px}


@media(max-width: 640px){
  .hero{ min-height: 48vh; }
  .hero::before{ background-position: 20% 30%; } /* bias toward the left on mobile so text/logo aren't cropped */
}


@media(max-width: 640px){
  .hero{ min-height: 40vh; }
  .hero::before{ background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
}

main{padding-top:24px}