/* css/theme.css — Premium theme layered on Bootstrap 5.
   Loaded AFTER Bootstrap so these rules win. */

:root{
  --ivory:#F6F2EA; --ivory-2:#FBF9F3; --ink:#1E1D19; --muted:#7C7568;
  --line:#E6DECF; --card:#FFFFFF;
  --green:#36473C; --green-deep:#293429; --brass:#A98C5A; --brass-deep:#8A6F40;
  --danger:#9B3B36; --danger-soft:#F2E4E1;
  --shadow:0 22px 48px -28px rgba(45,38,24,.5);
  --shadow-sm:0 10px 26px -20px rgba(45,38,24,.45);
}

*{ -webkit-font-smoothing:antialiased; }
body{
  background:var(--ivory); color:var(--ink);
  font-family:'Mulish',sans-serif; line-height:1.6; position:relative; min-height:100vh;
  display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-shell{ position:relative; z-index:1; flex:1 0 auto; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }

h1,h2,h3,h4,h5,.serif{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--green-deep); }

.eyebrow{ font-family:'Mulish',sans-serif; text-transform:uppercase; letter-spacing:.24em;
  font-size:.72rem; font-weight:700; color:var(--brass-deep); }
.rule{ width:54px; height:2px; background:var(--brass); border:0; opacity:1; }
.page{ padding:3rem 0 4rem; }
.page-head{ margin-bottom:2rem; }
.page-head h2{ font-size:2.2rem; margin:.4rem 0 0; }

/* ---------- announcement + navbar ---------- */
.announce{ background:var(--green-deep); color:#EBE6D8; text-align:center;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; padding:.55rem 1rem; }
.nav-shell{ background:rgba(246,242,234,.85); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.brand{ font-family:'Fraunces',serif; font-size:1.55rem; font-weight:600; color:var(--ink)!important;
  display:flex; align-items:center; gap:.5rem; }
.brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); display:inline-block; }
.brand small{ font-family:'Mulish',sans-serif; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass-deep); font-weight:700; }
.nav-link-x{ color:var(--ink); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  padding:.4rem .2rem; position:relative; }
.nav-link-x::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--brass); transition:width .35s ease; }
.nav-link-x:hover{ color:var(--green); } .nav-link-x:hover::after{ width:100%; }
.cart-pill{ border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem;
  font-weight:700; font-size:.85rem; color:var(--ink); }
.cart-pill:hover{ border-color:var(--brass); color:var(--green); }

/* ---------- buttons ---------- */
.btn{ border-radius:2px; font-weight:600; letter-spacing:.02em; }
.btn:focus{ box-shadow:none; }
/* their bare class="btn" becomes the premium primary */
.btn.btn:not(.btn-sm){ padding:.72rem 1.6rem; }
.btn-pine,
.btn:not(.btn-ghost):not(.btn-soft-danger):not(.btn-soft-warn):not(.btn-brass-outline){
  background:var(--green); color:#F6F2EA; border:1px solid var(--green); }
.btn-pine:hover,
.btn:not(.btn-ghost):not(.btn-soft-danger):not(.btn-soft-warn):not(.btn-brass-outline):hover{
  background:var(--green-deep); color:#fff; }
.btn-sm{ padding:.4rem .85rem!important; font-size:.82rem; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--ivory); }
.btn-brass-outline{ background:transparent; color:var(--brass-deep); border:1px solid var(--brass);
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.btn-brass-outline:hover{ background:var(--green); color:#F6F2EA; border-color:var(--green); }
.btn-soft-danger{ background:var(--danger-soft); color:var(--danger); border:1px solid #E3C9C4; }
.btn-soft-danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-soft-warn{ background:#F3ECD9; color:#8A6F40; border:1px solid #E6D9B8; }
.btn-soft-warn:hover{ background:#E9DDBE; color:#6f5930; }

/* ---------- alerts (override Bootstrap to match palette) ---------- */
.alert{ border-radius:3px; border:1px solid transparent; font-size:.95rem; }
.alert-success{ background:#E9EFE8; border-color:#CBDAC7; color:#2C4030; }
.alert-success a{ color:var(--green-deep); font-weight:700; }
.alert-danger{ background:var(--danger-soft); border-color:#E3C9C4; color:var(--danger); }

/* ---------- forms / cards ---------- */
.surface{ background:var(--card); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow-sm); }
.form-shell{ max-width:480px; margin:0 auto; padding:2.4rem 2.2rem; }
.form-shell.wide{ max-width:640px; }
.form-label{ font-weight:600; font-size:.86rem; color:var(--ink); letter-spacing:.01em; margin-bottom:.4rem; }
.form-control,.form-select,textarea.form-control{
  border:1px solid var(--line); border-radius:2px; background:var(--ivory-2); padding:.72rem .9rem; color:var(--ink); }
.form-control:focus,.form-select:focus{ border-color:var(--brass); background:#fff; box-shadow:0 0 0 .15rem rgba(169,140,90,.18); }
.form-control::placeholder{ color:#A89F8E; }

/* search input-group */
.search-wrap .form-control{ border-right:0; border-radius:2px 0 0 2px; }
.search-wrap .btn{ border-radius:0 2px 2px 0; }

/* ---------- hero (index) ---------- */
.hero{ padding:5rem 0 3.5rem; }
.hero h1{ font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; }
.hero .lead-x{ color:var(--muted); font-size:1.08rem; max-width:30rem; }
.hero-figure{ position:relative; }
.hero-figure img{ width:100%; border-radius:3px; box-shadow:var(--shadow); display:block; }
.hero-figure::after{ content:""; position:absolute; right:-14px; bottom:-14px; width:64%; height:64%;
  border:1px solid var(--brass); border-radius:3px; z-index:-1; }

/* ---------- product grid (index) ---------- */
.product-card{ background:var(--card); border:1px solid var(--line); border-radius:3px; overflow:hidden;
  height:100%; display:flex; flex-direction:column; transition:transform .4s ease, box-shadow .4s ease; }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.pc-img{ aspect-ratio:4/5; overflow:hidden; background:#ECE5D8; }
.pc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.product-card:hover .pc-img img{ transform:scale(1.05); }
.pc-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.pc-name{ font-family:'Fraunces',serif; font-size:1.16rem; font-weight:500; margin:0 0 .15rem; }
.pc-desc{ color:var(--muted); font-size:.88rem; margin:0 0 .8rem; flex:1; }
.pc-price{ font-family:'Fraunces',serif; font-size:1.16rem; color:var(--brass-deep); font-weight:600; }

/* ---------- product detail ---------- */
.detail-img{ width:100%; border-radius:4px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.detail-price{ font-family:'Fraunces',serif; font-size:1.6rem; color:var(--brass-deep); font-weight:600; }
.detail-desc{ color:#4A453C; white-space:normal; }

/* ---------- cart ---------- */
.cart-row{ display:flex; gap:1.2rem; align-items:center; padding:1.1rem; border:1px solid var(--line);
  border-radius:3px; background:var(--card); margin-bottom:1rem; }
.cart-row img{ width:84px; height:84px; object-fit:cover; border-radius:3px; background:#ECE5D8; flex:none; }
.cart-row .c-name{ font-family:'Fraunces',serif; font-size:1.1rem; }
.cart-row .c-meta{ color:var(--muted); font-size:.9rem; }
.cart-summary{ background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1.4rem 1.6rem; }
.cart-total{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--ink); }

/* ---------- tables (admin) ---------- */
.table-shell{ background:var(--card); border:1px solid var(--line); border-radius:4px; overflow:hidden; box-shadow:var(--shadow-sm); }
.table.theme-table{ margin:0; vertical-align:middle; }
.table.theme-table thead th{ background:var(--green-deep); color:#EDE7D8; font-family:'Mulish',sans-serif;
  font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; border:0; padding:.9rem 1rem; }
.table.theme-table tbody td{ border-color:var(--line); padding:.85rem 1rem; color:var(--ink); }
.table.theme-table tbody tr:hover{ background:var(--ivory-2); }
.table.theme-table img{ border-radius:3px; border:1px solid var(--line); }
.status-badge{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px; background:#EFE9DC; color:var(--brass-deep); border:1px solid #E6D9B8; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--green-deep); color:#D8D3C4; border-top:3px solid var(--brass);
  margin-top:3rem; flex-shrink:0; }
footer.site-footer .f-brand{ font-family:'Fraunces',serif; font-size:1.5rem; color:#F4EFE2; }
footer.site-footer a{ color:#CFC9B8; font-size:.92rem; } footer.site-footer a:hover{ color:#fff; }
footer.site-footer .f-label{ text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--brass); font-weight:700; }
footer.site-footer .f-bottom{ border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:#A9A491; }

/* ---------- load reveal ---------- */
@keyframes riseIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.reveal{ opacity:0; animation:riseIn .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}
.d4{animation-delay:.1s}.d5{animation-delay:.18s}.d6{animation-delay:.26s}.d7{animation-delay:.34s}.d8{animation-delay:.42s}.d9{animation-delay:.5s}
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; } }
