@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --brand-dark:#161a1a;
  --brand-accent:#0f8b8b;
  --brand-light:#f5f5f2;
  --ink:#1c1c1c;
  --muted:#6b6b6b;
  --border:#e4e0d8;
  --page-bg:#faf9f6;
  --card-bg:#ffffff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* Under-construction banner */
.buildBanner{
  background:#fff2ea;
  color:#8a3b22;
  font-size:13px;
  font-weight:600;
  text-align:center;
  padding:9px 16px;
  border-bottom:1px solid #f0d9c8;
}

/* Header */
header.site{
  background:var(--brand-dark);
  padding: 18px 0;
}
header.site .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.brandMark{ display:flex; align-items:center; gap:10px; }
.brandMark img{ height:26px; }
nav.mainNav{ display:flex; gap:26px; font-size:14px; font-weight:500; }
nav.mainNav a{ color:#d8d8d4; transition:color .15s ease; }
nav.mainNav a:hover, nav.mainNav a.active{ color:#f5f5f2; }

/* Hero */
.hero{
  background:var(--brand-dark);
  color:var(--brand-light);
  padding: 70px 0 90px;
}
.hero h1{
  font-size:40px; font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; max-width:560px;
}
.hero p.sub{
  font-size:16px; color:#b9b9b3; max-width:480px; margin:0 0 30px;
}
.btn{
  display:inline-block; padding:13px 26px; border-radius:10px; font-weight:700; font-size:14px;
  background:var(--brand-accent); color:#ffffff;
}
.btn.secondary{
  background:transparent; border:1.5px solid #3a3f3f; color:var(--brand-light); margin-left:12px;
}

/* Category chips */
.catChips{ display:flex; gap:10px; flex-wrap:wrap; margin: 34px 0 0; }
.catChip{
  padding:7px 16px; border-radius:20px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,0.08); color:#d8d8d4; border:1px solid rgba(255,255,255,0.15);
}

/* Sections */
.section{ padding: 56px 0; }
.section h2{ font-size:22px; font-weight:800; margin:0 0 8px; letter-spacing:-0.01em; }
.section p.lead{ color:var(--muted); font-size:14.5px; margin:0 0 34px; max-width:600px; }

/* Product grid */
.productGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.productCard{
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.productCard .thumb{
  height:150px; background:linear-gradient(135deg, #eef0ef, #e4e8e7);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.productCard .thumb .ph{ font-size:12px; color:#8a8f8f; font-weight:600; }
.productCard .badge{
  position:absolute; top:10px; left:10px; background:var(--brand-dark); color:var(--brand-accent);
  font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px; letter-spacing:0.02em;
}
.productCard .body{ padding:16px 18px 20px; }
.productCard .cat{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--brand-accent); font-weight:700; margin-bottom:6px; }
.productCard h3{ font-size:15.5px; margin:0 0 8px; }
.productCard p{ font-size:12.5px; color:var(--muted); margin:0 0 12px; line-height:1.55; }
.productCard .price{ font-size:14px; font-weight:700; color:var(--ink); display:inline-block; margin-right:10px; }
.productCard .etsyLink{ font-size:12px; font-weight:700; color:var(--brand-accent); }
.productCard .etsyLink:hover{ text-decoration:underline; }

/* Category section headers on shop page */
.catSection{ margin-bottom:50px; }
.catSection .catHead{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.catSection .catHead h2{ margin:0; }
.catSection .catHead span{ font-size:12.5px; color:var(--muted); }

/* Footer */
footer.site{ background:var(--brand-dark); color:#b9b9b3; padding:44px 0 30px; margin-top:60px; }
footer.site .footGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:30px; margin-bottom:30px; }
footer.site h4{ color:#f5f5f2; font-size:13px; margin:0 0 14px; text-transform:uppercase; letter-spacing:0.05em; }
footer.site ul{ list-style:none; margin:0; padding:0; }
footer.site li{ margin-bottom:9px; font-size:13.5px; }
footer.site li a:hover{ color:#f5f5f2; }
footer.site .bottom{ border-top:1px solid #2a2f2f; padding-top:20px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Legal pages */
.legalWrap{ max-width:760px; margin:0 auto; padding:50px 24px 90px; }
.legalWrap h1{ font-size:26px; font-weight:800; margin:0 0 6px; }
.legalWrap .updated{ font-size:12.5px; color:var(--muted); margin-bottom:26px; }
.draftNotice{
  background:#fff2ea; border:1px solid #f0d9c8; color:#8a3b22; border-radius:10px;
  padding:16px 18px; font-size:13px; line-height:1.6; margin-bottom:34px;
}
.draftNotice b{ display:block; margin-bottom:4px; font-size:13.5px; }
.legalWrap h2{ font-size:16.5px; margin:30px 0 10px; }
.legalWrap p, .legalWrap li{ font-size:14px; color:#333; }
.legalWrap .fill{ background:#fdeeb8; padding:1px 6px; border-radius:4px; font-weight:600; color:#5c4a00; }
.legalWrap table{ width:100%; border-collapse:collapse; margin:14px 0; }
.legalWrap td, .legalWrap th{ border:1px solid var(--border); padding:10px 12px; font-size:13px; text-align:left; }

/* Contact form (static mockup) */
.formBox{ background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:30px; max-width:520px; }
.formBox label{ display:block; font-size:12.5px; font-weight:700; margin:14px 0 6px; }
.formBox input, .formBox textarea{
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--border); font-family:'Inter',sans-serif; font-size:14px;
}
.formBox textarea{ min-height:110px; resize:vertical; }
.formBox .btn{ margin-top:20px; border:none; cursor:default; }

/* Trust bar */
.trustBar{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trustBar .container{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; padding:22px 24px; }
.trustBar .item{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink); }
.trustBar .item .sq{ width:8px; height:8px; border-radius:2px; background:var(--brand-accent); flex-shrink:0; }

/* Process steps */
.stepsGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; counter-reset:step; }
.stepCard{ background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:22px 20px; position:relative; }
.stepCard .num{
  width:30px; height:30px; border-radius:8px; background:var(--brand-dark); color:var(--brand-accent);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13.5px; margin-bottom:14px;
}
.stepCard h3{ font-size:14.5px; margin:0 0 6px; }
.stepCard p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.55; }

/* FAQ (native details/summary, no JS needed) */
.faqList{ max-width:700px; }
.faqItem{ border-bottom:1px solid var(--border); padding:16px 0; }
.faqItem summary{ font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; }
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem summary::before{ content:"+ "; color:var(--brand-accent); font-weight:800; }
.faqItem[open] summary::before{ content:"– "; }
.faqItem p{ font-size:13.5px; color:#444; margin:10px 0 0; line-height:1.6; }

/* Instagram CTA */
.igCta{ background:var(--brand-dark); border-radius:16px; padding:34px 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.igCta .txt h3{ color:var(--brand-light); font-size:17px; margin:0 0 6px; }
.igCta .txt p{ color:#b9b9b3; font-size:13px; margin:0; }

/* Custom-print highlighted tile (used in shop.html) */
.customTile{
  background:var(--brand-dark); border-radius:16px; padding:30px; color:var(--brand-light);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.customTile h2{ color:var(--brand-light); font-size:19px; margin:0 0 8px; }
.customTile p{ color:#b9b9b3; font-size:13.5px; margin:0; max-width:460px; }

/* Upload mockup field */
.uploadBox{
  border:1.5px dashed #c9c4b6; border-radius:10px; padding:22px; text-align:center; font-size:13px; color:var(--muted); margin-top:6px;
}

/* Example gallery placeholder */
.exampleGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.exampleCard{
  background:var(--card-bg); border:1px dashed var(--border); border-radius:14px; height:170px;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; color:#9a9a94; font-weight:600;
}

@media (max-width:640px){
  .hero h1{ font-size:30px; }
  nav.mainNav{ gap:16px; font-size:13px; }
  .trustBar .container{ justify-content:flex-start; }
}