/* HAVN — Theme 1: Classic Light (Rendering #3) */
/* Reset */
*,*::before,*::after{box-sizing:border-box}html,body{height:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote{margin:0;padding:0}
ul[role='list'],ol[role='list']{list-style:none}img,picture{max-width:100%;display:block}
input,button,textarea,select{font:inherit}

/* Tokens */
:root{
  --bg:#fff;--bg-soft:#f7f7f8;--bg-elev:#fff;
  --text:#0f172a;--text-muted:#475569;--border:#e5e7eb;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  --brand:#1e66ff;--brand-600:#1650cc;--brand-50:#eef4ff;
  --success:#10b981;--warning:#f59e0b;--danger:#ef4444;
  --r:16px;--r-lg:20px;--pad:16px;--pad-lg:24px;--maxw:1200px;
}

/* Base */
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
.brand-logo{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:var(--shadow)}
.brand-name{font-size:1.125rem;color:var(--text)}
.nav-links{display:flex;gap:16px}
.nav-links a{padding:8px 12px;border-radius:10px;color:var(--text-muted);border:1px solid transparent}
.nav-links a:hover{background:var(--brand-50);color:var(--brand);border-color:var(--border);text-decoration:none}

/* Hero */
.hero{background:linear-gradient(180deg,var(--bg),var(--bg-soft));border-bottom:1px solid var(--border)}
.hero-inner{padding:48px 0;display:grid;gap:16px}
.hero h1{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.15}
.hero p{color:var(--text-muted);max-width:70ch}

/* Search */
.searchbar{display:flex;gap:8px;background:var(--bg-elev);padding:10px;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.searchbar input,.searchbar select{flex:1;min-width:0;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
.searchbar button{padding:10px 16px;border-radius:12px;border:1px solid var(--brand-600);background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.searchbar button:hover{background:var(--brand-600)}

/* Grid & Cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
@media (max-width:1024px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}
.card-media{position:relative;aspect-ratio:4/3;background:#f2f4f7;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-badge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.9);color:var(--text);padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.card-body{padding:14px;display:grid;gap:8px}
.card-title{font-weight:700;color:var(--text);line-height:1.25}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--text-muted);font-size:.95rem}
.card-price{font-weight:800;color:var(--brand)}

/* Sections & Footer */
.section{padding:28px 0}.section h2{font-size:1.25rem;margin-bottom:12px}
.site-footer{margin-top:40px;border-top:1px solid var(--border);background:var(--bg-soft)}
.footer-inner{padding:20px 0;color:var(--text-muted);font-size:.95rem}

/* Debug bar */
.debugbar{position:fixed;right:12px;bottom:12px;z-index:60;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;color:var(--text-muted);font-size:12px;max-width:60vw}
.debugbar code{background:#f3f4f6;padding:2px 6px;border-radius:8px}

/* === Card hover polish === */
@media (hover:hover) and (pointer:fine){
  .card { transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
  .card-media img { transition: transform .35s ease; }
  .card:hover .card-media img { transform: scale(1.03); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card, .card-media img { transition: none !important; }
}

/* === HAVN: Unified Header & Footer === */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-logo{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.brand-name{font-size:1.05rem;color:var(--text)}
.nav-links{display:flex;gap:4px}
.nav-links a{position:relative;padding:10px 12px;border-radius:10px;color:var(--text);border:1px solid transparent}
.nav-links a:hover{background:var(--brand-50);border-color:var(--border);text-decoration:none}
.nav-links a:after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:transparent;transition:background .15s}
.nav-links a:hover:after{background:var(--brand)}

.site-footer{margin-top:40px;border-top:1px solid var(--border);background:var(--bg-soft)}
.footer-inner{padding:22px 0;color:var(--text-muted);font-size:.95rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Mobile tweaks for header spacing */
@media (max-width:640px){
  .navbar{height:58px}
  .nav-links a{padding:8px 10px}
}