/* J&S Reserve — Old‑Money UI */
:root{
  --ink:#0B0D0E;
  --ivory:#F8F5EF;
  --champagne:#C2A46B;
  --slate:#2F3437;

  --radius:12px;
  --container:1080px;

  --shadow-sm:0 1px 0 rgba(11,13,14,.06), 0 6px 16px rgba(11,13,14,.06);
  --shadow:0 1px 0 rgba(11,13,14,.05), 0 12px 30px rgba(11,13,14,.08);

  /* Override Bootstrap card defaults */
  --bs-card-bg: #fff;
  --bs-card-color: var(--ink);
  --bs-body-bg: var(--ivory);
  --bs-body-color: var(--ink);
}

html,body{ background:var(--ivory); color:var(--ink); }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1,"pnum" 1;
  margin:0;
}

h1,h2,h3{
  font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
  letter-spacing:.01em; color:var(--ink);
}
h1{ font-size:64px; line-height:1.06; font-weight:600; }
h2{ font-size:28px; line-height:1.15; }
h3{ font-size:20px; line-height:1.2; margin:.4rem 0 .2rem; }

@media (max-width: 768px){
  h1{ font-size:42px; }
  h2{ font-size:24px; }
}

.smallcaps{ font-variant:small-caps; letter-spacing:.05em; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* Nav */
.nav{ background:#fff; border-bottom:1px solid rgba(11,13,14,.08); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.nav .brand{ font-family:'EB Garamond', serif; font-weight:700; font-size:24px; color:var(--ink); text-decoration:none; display:flex; align-items:center; }
.nav .brand img{ display:block; height:36px; width:auto; max-width:180px; object-fit:contain; }
.nav-links a{ color:var(--ink); opacity:.88; margin-left:24px; text-decoration:none; }
.nav-links a:hover{ opacity:1; }

/* Staff bar - sits flush below nav for admin users */
.staff-bar{
  background:var(--ink);
  padding:8px 0;
  font-size:0.85rem;
  margin-top:-1px; /* Overlap nav border for seamless appearance */
}
.staff-bar a{
  color:var(--ivory);
  text-decoration:none;
}
.staff-bar a:hover{
  color:var(--champagne);
}

/* Hero */
.hero{ background:radial-gradient(900px 360px at 50% -10%, rgba(194,164,107,.06), transparent 60%); }
.hero-inner{ padding:72px 0 44px; text-align:center; }
.hero h1{ max-width:18ch; line-height:1.06; margin:0 auto .5rem; }
.hero .rule{ width:160px; height:2px; background:var(--champagne); margin:.75rem auto 1.25rem; }
.hero p{ color:var(--slate); max-width:66ch; margin:0 auto 24px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.1rem;
  border-radius:8px; font-weight:600; border:1px solid transparent;
  transition:transform .06s ease, box-shadow .2s ease; background-image:none !important;
  cursor:pointer;
}
.btn-primary{ background:var(--ink) !important; color:var(--ivory) !important; border-color:var(--slate); }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-secondary{ background:var(--champagne); color:var(--ink); border-color:var(--champagne); }
.btn-secondary:hover{ background:#b89d6b; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--champagne); }
.btn-ghost:hover{ background:rgba(194,164,107,.08); }
.btn-danger{ background:#dc3545; color:#fff; border-color:#dc3545; }
.btn-danger:hover{ background:#c82333; transform:translateY(-1px); }
.btn-sm{ padding:.4rem .7rem; font-size:.9rem; }

/* Cards & features - override Bootstrap */
.card{ background:#fff !important; color:var(--ink) !important; border:1px solid rgba(11,13,14,.08); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; }
.card:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.features{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--champagne); background:rgba(194,164,107,.08);
  font-family:'EB Garamond', serif; font-size:15px; color:var(--ink);
}

/* Categories */
.section-title{ margin:8px 0 6px; }

/* Product detail page typography */
.product-title{
  max-width:20ch;
  margin:0 auto 32px;
  text-align:center;
  line-height:1.1;
}
.product-body{
  max-width:66ch;
  margin-left:auto;
  margin-right:auto;
}
.referral-content{
  white-space:pre-wrap;
  line-height:1.6;
  font-size:1.05rem;
}
.back-link{
  color:var(--champagne);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:500;
}
.back-link:hover{ text-decoration:underline; }
.breadcrumb-trail{
  font-size:0.8rem;
  color:var(--slate);
  opacity:0.7;
  margin-top:4px;
}
.breadcrumb-trail a{
  color:var(--slate);
  text-decoration:none;
}
.breadcrumb-trail a:hover{ text-decoration:underline; }
.product-subhead{
  font-family:'EB Garamond', serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--slate);
  margin:0 0 12px;
}
.referral-content p,
.product-body p{
  margin-bottom:1rem;
}
.section-sub{ color:var(--slate); margin:0 0 16px; }

.categories{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.category{ position:relative; }
.category .strap{ height:0; border-top:1px solid var(--champagne); margin:-6px 0 10px; position:relative; }
.category .strap .label{
  position:absolute; top:-11px; left:12px; padding:.08rem .5rem; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
  background:#fff; border:1px solid var(--champagne); border-radius:999px;
}
.category h3{ margin-top:0; }
.category .desc{ color:var(--slate); margin:.25rem 0 .9rem; }

/* CTA */
.cta{ background:var(--ink); color:var(--ivory); padding:56px 0; margin:56px 0 0; }
.cta .btn-primary{ background:var(--ivory) !important; color:var(--ink) !important; border-color:transparent; }
.cta .btn-primary:hover{ box-shadow:0 8px 28px rgba(248,245,239,.25); }

/* Footer - override Bootstrap */
.footer{ background:#fff !important; border-top:1px solid rgba(11,13,14,.08); color:var(--slate) !important; }
.footer a{ color:var(--ink) !important; }
.footer-inner{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:28px 0; }
.brand-text{ font-family:'EB Garamond', serif; font-weight:700; font-size:20px; color:var(--ink); }
.disclosure{ font-size:.92rem; }

/* Category Chip (product detail page) */
.category-chip{
  display:inline-block;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(194,164,107,0.12);
  color:var(--slate);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:all 0.2s ease;
}
.category-chip:hover{
  background:rgba(194,164,107,0.25);
  color:var(--ink);
}

/* Filter Chips */
.chip{
  display:inline-block;
  padding:.375rem .75rem;
  border-radius:999px;
  background:rgba(194,164,107,0.15);
  color:var(--champagne);
  font-weight:500;
  font-size:0.9rem;
  text-decoration:none;
  transition:all 0.2s ease;
}
.chip:hover{
  background:rgba(194,164,107,0.25);
  color:var(--ink);
}
.chip.is-selected{
  background:var(--champagne);
  color:var(--ink);
}

/* Focus rings */
:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; border-radius:6px; }
.btn:focus-visible{ outline-offset:4px; }

/* Product Grid - responsive auto-fit layout */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}
.product-grid .product-card{
  text-decoration:none;
  color:inherit;
}
.product-grid .product-card:focus-visible{
  outline:2px solid var(--champagne);
  outline-offset:4px;
}
.product-grid .product-card h2{
  margin-bottom:8px;
  line-height:1.3;
  font-size:1.25rem;
  min-height:3.25rem; /* Prevent jump when titles wrap */
}

/* Card meta row: category tag + date */
.card-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.85rem;
}
.card-meta .tag{
  background:rgba(183,155,119,0.15);
  color:var(--champagne);
  padding:3px 10px;
  border-radius:12px;
  font-weight:500;
}
.card-meta .date{
  color:var(--slate);
}

/* Card CTA link */
.card-cta{
  display:block;
  margin-top:12px;
  color:var(--champagne);
  font-size:0.9rem;
  font-weight:500;
}
.product-card:hover .card-cta{
  text-decoration:underline;
}

/* Mobile: single column and auto height */
@media (max-width: 600px){
  .product-grid{ grid-template-columns:1fr; }
  .product-grid .product-card h2{ min-height:auto; }
}

/* Mobile */
@media (max-width: 768px){
  .features{ grid-template-columns:1fr; gap:14px; }
  .categories{ grid-template-columns:1fr; gap:16px; }
  .btn{ width:100%; }
}