/* Hunter Products — shared styles for /products/<slug>/ pages.
   Tokens match the homepage / store / store-pen design system. */

:root {
  --cream:#f5f0e8; --cream2:#ede7d9; --cream3:#e4dccb;
  --parchment:#d9cebc; --bg-dark:#1c1a16; --bg-dark2:#242018;
  --surface:#2e2a22; --border:#c9bfa8; --border2:#b0a48e;
  --gold:#9a7b2e; --gold2:#b8962f; --gold-lt:#c8a84b;
  --gold-dim:rgba(154,123,46,0.12);
  --ink:#1c1a16; --ink2:#3d3828; --ink3:#6b6249; --ink4:#8c8270;
  --white:#fdfaf4; --danger:#b84040; --success:#3d7a5a;
  --radius:2px; --radius-lg:4px;
  --shadow:0 2px 16px rgba(28,26,22,0.12);
  --shadow-lg:0 8px 40px rgba(28,26,22,0.2);
  --transition:0.22s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:95px;}
body{
  font-family:'EB Garamond',Georgia,serif;
  background:var(--cream); color:var(--ink); line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--border2); text-underline-offset:3px;}
a:hover{color:var(--gold);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

h1,h2,h3,h4{font-family:'EB Garamond',Georgia,serif;font-weight:600;line-height:1.15;color:var(--ink);}

.container{max-width:1160px;margin:0 auto;padding:0 32px;}

/* ── NAVBAR (matches sitewide) ───────────────────────── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;transition:all 0.3s;}
.nav-top-bar{
  background:var(--ink);text-align:center;padding:7px;
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:300;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--parchment);
}
.nav-top-bar span{color:var(--gold-lt);}
.nav-main{background:var(--cream);border-bottom:1px solid var(--border);}
#navbar.scrolled .nav-main{background:rgba(245,240,232,0.97);backdrop-filter:blur(14px);box-shadow:var(--shadow);}
#navbar.scrolled .nav-top-bar{max-height:0;padding:0;overflow:hidden;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;color:inherit;}
.logo-emblem{width:42px;height:42px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:border-color var(--transition);}
.logo-emblem::before{content:'H';font-family:'EB Garamond',serif;font-size:22px;font-weight:600;color:var(--ink);line-height:1;}
.nav-logo:hover .logo-emblem{border-color:var(--gold);}
.nav-logo:hover .logo-emblem::before{color:var(--gold);}
.logo-name{font-family:'EB Garamond',serif;font-size:19px;font-weight:600;color:var(--ink);display:block;letter-spacing:0.02em;}
.logo-tagline{font-family:'Oswald',sans-serif;font-size:9px;font-weight:300;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink4);display:block;margin-top:1px;}
.nav-links{display:flex;align-items:center;list-style:none;}
.nav-links a{
  display:block;padding:8px 16px;
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink3);
  text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--transition),border-color var(--transition);
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--gold);}
.nav-actions{display:flex;align-items:center;gap:6px;}
.cart-btn{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  background:transparent;border:1px solid var(--border2);
  color:var(--ink3);font-family:'Oswald',sans-serif;font-size:12px;
  font-weight:400;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--transition),color var(--transition);
}
.cart-btn:hover{border-color:var(--ink);color:var(--ink);}
.cart-count{
  background:var(--ink);color:var(--cream);font-size:10px;font-weight:600;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 28px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:none;transition:background var(--transition),border-color var(--transition),color var(--transition);
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--cream);border:1px solid var(--ink);}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--white);}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border2);}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--cream);}

/* ── PAGE LAYOUT ─────────────────────────────────────── */
.page-wrap{padding-top:100px;}
.breadcrumbs{
  padding:18px 0 6px;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:300;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink3);
}
.breadcrumbs a{color:var(--ink3);text-decoration:none;}
.breadcrumbs a:hover{color:var(--gold);}
.breadcrumbs .sep{color:var(--ink4);margin:0 8px;}
.breadcrumbs .current{color:var(--ink);}

.product-hero{
  padding:24px 0 56px;
  display:grid;grid-template-columns:1fr 1.15fr;gap:48px;
}
@media (max-width:820px){.product-hero{grid-template-columns:1fr;gap:24px;padding-bottom:36px;}}

.product-media{
  background:var(--cream2);
  border:1px solid var(--border);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-media img{width:100%;height:100%;object-fit:cover;}
.product-media .placeholder{color:var(--border2);}

.product-eyebrow{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.product-eyebrow::before{content:'◆';font-size:7px;}
.product-h1{
  font-size:clamp(32px,4.6vw,46px);
  font-weight:600;line-height:1.1;color:var(--ink);
  margin-bottom:18px;letter-spacing:-0.01em;
}
.product-sku{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:300;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink4);
  margin-bottom:24px;
}
.product-price{
  font-family:'EB Garamond',serif;font-weight:600;
  font-size:34px;color:var(--ink);margin-bottom:8px;
}
.product-price small{font-size:14px;color:var(--ink3);font-weight:400;font-style:italic;display:block;margin-top:4px;}

.buy-row{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 28px;}
.buy-row .btn{min-width:180px;justify-content:center;}

.short-desc{
  font-size:18px;color:var(--ink2);
  line-height:1.65;margin-bottom:0;
}

/* ── BODY SECTIONS ───────────────────────────────────── */
.section-divider{
  border:0;border-top:1px solid var(--border);
  margin:16px 0 0;
}
.product-body-section{padding:48px 0;border-top:1px solid var(--border);}
.product-body-section:first-of-type{border-top:0;padding-top:32px;}
.product-body-section h2{
  font-size:24px;font-weight:600;color:var(--ink);
  margin-bottom:18px;letter-spacing:-0.005em;
}
.product-body-section h2 .accent{color:var(--gold);}
.product-body-section p{color:var(--ink2);margin-bottom:14px;font-size:17px;}
.product-body-section p:last-child{margin-bottom:0;}

/* ── SPECS TABLE ─────────────────────────────────────── */
.specs-table{
  width:100%;border-collapse:collapse;
  border-top:1px solid var(--border);
  font-size:15px;
}
.specs-table tr{border-bottom:1px solid var(--border);}
.specs-table th,.specs-table td{
  padding:14px 0;text-align:left;vertical-align:top;
}
.specs-table th{
  width:230px;font-weight:500;color:var(--ink3);
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;padding-right:20px;
}
.specs-table td{color:var(--ink);font-size:16px;}

/* ── APPLICATIONS ────────────────────────────────────── */
.app-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.app-list a{
  display:inline-block;padding:6px 14px;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:400;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);
  text-decoration:none;border:1px solid var(--gold);
  transition:background var(--transition),color var(--transition);
}
.app-list a:hover{background:var(--gold);color:var(--white);}

/* ── RELATED PRODUCTS ────────────────────────────────── */
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;margin-top:6px;
}
.related-card{
  background:var(--cream2);border:1px solid var(--border);
  padding:18px;text-decoration:none;color:inherit;
  transition:border-color var(--transition),transform var(--transition);
  display:block;
}
.related-card:hover{border-color:var(--ink);transform:translateY(-2px);color:inherit;}
.related-card-cat{
  font-family:'Oswald',sans-serif;font-size:9px;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;
}
.related-card-name{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.25;}
.related-card-price{font-size:15px;color:var(--ink2);font-weight:500;}

/* ── FOOTER (matches sitewide minimal version) ───────── */
footer{background:var(--bg-dark);color:rgba(245,240,232,0.65);padding:60px 0 30px;margin-top:48px;}
footer a{color:var(--gold-lt);text-decoration:none;}
footer a:hover{color:var(--white);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}}
.footer-brand h4{color:var(--cream);font-size:18px;margin-bottom:10px;font-weight:600;}
.footer-brand p{font-size:14px;line-height:1.6;}
.footer-col h5{font-family:'Oswald',sans-serif;font-size:11px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:8px;font-size:14px;}
.footer-bottom{
  border-top:1px solid rgba(245,240,232,0.1);
  padding-top:24px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(245,240,232,0.45);
}