/* HAVALORO — shared base for app.html routed pages.
 * Design tokens + core components mirrored from index.html so routed pages
 * carry the identical approved visual system. */
:root{
  --ink:#252523;--charcoal:#3B3936;--terracotta:#A65F43;--taupe:#978A7D;--greige:#C9C1B8;
  --ivory:#F2EEE7;--sand:#C8A77F;--walnut:#5A4033;--steel:#1E1E1C;--brass:#A88A5B;
  --hairline:rgba(37,37,35,.16);--hairline-light:rgba(242,238,231,.20);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--maxw:1360px;--pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--terracotta);color:var(--ivory)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.1}
.wrap{max-width:var(--maxw);margin:0 auto}
.section{padding:clamp(56px,8vw,120px) var(--pad)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--terracotta)}
.eyebrow.muted{color:var(--taupe)}
.btn{display:inline-flex;align-items:center;gap:.7em;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:16px 30px;border:1px solid transparent;cursor:pointer;transition:all .45s var(--ease);background:none}
.btn-dark{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ivory)}
.link-under{display:inline-flex;align-items:center;gap:.6em;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid currentColor;transition:gap .4s var(--ease)}
.link-under:hover{gap:1.1em}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip-link{position:fixed;top:-120px;left:16px;z-index:300;background:var(--ink);color:var(--ivory);padding:12px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:top .3s}
.skip-link:focus{top:16px}

/* ---- nav (shared, static ink header on routed pages) ---- */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:15px var(--pad);background:rgba(242,238,231,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hairline)}
.nav .wordmark{font-family:var(--serif);font-weight:500;letter-spacing:.2em;font-size:24px;white-space:nowrap}
.nav .wordmark .hv{color:var(--ink)}.nav .wordmark .lo{color:var(--terracotta)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:currentColor;transition:width .4s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-utils{display:flex;gap:6px;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:inherit;cursor:pointer}
@media(max-width:960px){.nav-links{display:none}.nav-toggle{display:flex}}

/* ---- routed view scaffolding ---- */
#view{min-height:60vh}
.crumbs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);padding:22px var(--pad) 0}
.crumbs a:hover{color:var(--ink)}
.view-head{padding:26px var(--pad) 8px}
.view-head h1{font-size:clamp(28px,4vw,52px)}
.view-head p{max-width:60ch;color:var(--charcoal);font-weight:300;margin-top:14px}
.count{font-size:12px;color:var(--taupe);letter-spacing:.08em;margin-top:10px}

/* product grid (reuses .card idiom) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--ivory);position:relative;transition:box-shadow .5s var(--ease)}
.pcard:hover{box-shadow:0 24px 60px -30px rgba(37,37,35,.4)}
.pcard .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.pcard .media img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.pcard:hover .media img{transform:scale(1.03)}
.pcard .wish{position:absolute;top:14px;right:14px;z-index:4;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(242,238,231,.82);border:0;cursor:pointer;opacity:0;transform:translateY(-6px);transition:all .4s var(--ease)}
.pcard:hover .wish{opacity:1;transform:none}
.pcard .wish svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.4}
.pcard .wish.on svg{fill:var(--terracotta);stroke:var(--terracotta)}
.pcard .quickadd{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--ink);color:var(--ivory);text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:14px;transform:translateY(100%);transition:transform .45s var(--ease);cursor:pointer;border:0;width:100%}
.pcard .media:hover .quickadd{transform:none}
.pcard .body{padding:16px 4px 24px}
.pcard .nm{font-family:var(--serif);font-size:17px}
.pcard .spec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin:6px 0 8px}
.pcard .pr{font-size:13px;font-weight:500}
.pcard a.cover{position:absolute;inset:0;z-index:3}

/* product detail */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);padding:12px var(--pad) clamp(56px,8vw,110px);align-items:start}
@media(max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp-gallery{display:grid;gap:12px}
.pdp-gallery .main{aspect-ratio:4/5;background:var(--ivory) center/contain no-repeat}
.pdp-info h1{font-size:clamp(26px,3vw,40px);margin-bottom:6px}
.pdp-info .spec{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:16px}
.pdp-info .price{font-size:20px;font-family:var(--serif);margin-bottom:20px}
.pdp-info .desc{font-weight:300;color:var(--charcoal);margin-bottom:24px;max-width:46ch}
.pdp-actions{display:flex;gap:12px;margin-bottom:12px}
.pdp-actions .btn{flex:1;justify-content:center}
.pdp-meta{margin-top:18px;font-size:12px;color:var(--taupe);letter-spacing:.06em}
details.acc{border-top:1px solid var(--hairline)}
details.acc summary{list-style:none;cursor:pointer;padding:16px 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:flex;justify-content:space-between}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";color:var(--sand)}
details.acc[open] summary::after{content:"\2212"}
details.acc .acc-body{padding:0 0 18px;font-size:14px;font-weight:300;color:var(--charcoal)}

/* editorial / material / mood / static */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:8px var(--pad) 40px}
@media(max-width:700px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--greige) center/cover no-repeat;display:flex;align-items:flex-end;padding:26px;color:var(--ivory)}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,15,.66),rgba(20,18,15,.05) 60%)}
.tile h3,.tile h1{position:relative;font-size:24px;color:var(--ivory);font-family:var(--serif);font-weight:400;line-height:1.05}
.prose{max-width:70ch;padding:8px var(--pad) clamp(56px,8vw,110px)}
.prose p{font-weight:300;color:var(--charcoal);margin:0 0 16px}
.prose h2{font-size:clamp(20px,2.4vw,30px);margin:28px 0 12px}
.notice{background:var(--greige);border:1px solid var(--hairline);padding:16px 20px;font-size:13px;color:var(--charcoal);margin:16px 0}

/* forms (trade / contact) */
.form{max-width:720px;padding:8px var(--pad) 80px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin:16px 0 6px}
.form input,.form select,.form textarea{width:100%;background:none;border:1px solid var(--hairline);padding:12px 14px;font-family:var(--sans);font-size:14px;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form .err{color:#7a2f1c;font-size:12px;margin-top:6px;display:none}
.form .field.invalid .err{display:block}
.form .field.invalid input,.form .field.invalid select,.form .field.invalid textarea{border-color:#7a2f1c}
.form .actions{margin-top:26px}

/* footer (shared) */
footer{background:var(--steel);color:var(--greige);padding:clamp(56px,8vw,100px) var(--pad) 34px}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:52px;border-bottom:1px solid var(--hairline-light)}
.foot-brand .wordmark{font-family:var(--serif);font-size:28px;letter-spacing:.14em}
.foot-brand .wordmark .hv{color:var(--greige)}.foot-brand .wordmark .lo{color:var(--terracotta)}
.foot-brand p{margin-top:16px;max-width:32ch;font-size:13px;font-weight:300;color:rgba(242,238,231,.6)}
.foot-col h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;font-size:13px;font-weight:300;color:rgba(242,238,231,.66);padding:6px 0;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:var(--ivory);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:11px;color:rgba(242,238,231,.44)}
.foot-bottom .r{display:flex;gap:22px}
@media(max-width:800px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.empty-view{text-align:center;padding:100px 20px}
.empty-view .serif{font-family:var(--serif);font-size:30px;margin-bottom:10px}
.empty-view p{color:var(--charcoal);font-weight:300;margin-bottom:22px}