/* ==============
   Base Styles
   ============== */
:root{
  --bg:#0c0c0c;
  --text:#111;
  --muted:#666;
  --soft:#faf7f3;
  --brand:#1f4a3e; /* deep green */
  --brand-2:#c49a6c; /* warm bronze */
  --white:#fff;
  --border:#e9e4de;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px; padding:0 20px; margin:auto}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:fixed; left:20px; top:20px; width:auto; height:auto; padding:8px 12px; background:var(--brand); color:#fff; z-index:1000}

.small{font-size:.9rem}
.muted{color:var(--muted)}
.bg-soft{background:var(--soft)}

.section{padding:72px 0}
.section-head{margin-bottom:28px}
.section-head h2{font-size:2rem; margin:0 0 8px}
.section-head p{margin:0; color:var(--muted)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(8px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:#111}
.brand svg{color:var(--brand)}
.nav-toggle{display:none}
.nav-list{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.nav-list a{display:block; padding:10px 8px}

/* Hero */
.hero{
  background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.5)), var(--hero) center/cover no-repeat;
  color:#fff; position:relative; padding:120px 0 100px;
}
.hero-inner{max-width:840px}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); margin:0 0 10px}
.hero p{font-size:1.125rem; color:#f1f1f1}
.underline{background:linear-gradient(transparent 65%, rgba(196,154,108,.5) 65%)}
.cta-row{display:flex; gap:14px; margin-top:16px; flex-wrap:wrap}
.trust{display:flex; gap:18px; padding:0; margin:20px 0 0; list-style:none; color:#eaeaea; font-size:.95rem}
.trust li::before{content:"✓ "; color:#b8e0d5}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{background:#fff; color:var(--brand); border-color:var(--brand)}
.btn-outline:hover{background:#f2f8f5}
.btn-ghost{background:transparent; border-color:#ddd; color:#333}
.icon-btn{background:#f5f5f5; border:1px solid #ddd; border-radius:8px; padding:6px 10px; cursor:pointer}

/* Products */
.grid{display:grid; gap:22px}
.products{grid-template-columns: repeat(auto-fill, minmax(260px,1fr))}
.product{
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.product-body{padding:14px}
.product h3{margin:6px 0 6px; font-size:1.1rem}
.product .muted{margin:0 0 12px}
.product-meta{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-weight:600}
.price{color:#111}
.sku{color:var(--muted); font-weight:500}

/* Collections */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 24px}
.pill{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--border); color:#333}
.pill:hover{background:#f9f7f3}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.feature{display:flex; gap:16px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow); align-items:flex-start}
.feature img{width:120px; height:100px; object-fit:cover; border-radius:8px}

/* About */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.about-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow)}
.about-card h3{margin:0 0 6px}

/* Authenticity checklist */
.checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.check{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow)}
.check-icon{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e8f5f1; color:var(--brand); font-weight:800}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.testimonials figure{margin:0; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
blockquote{margin:0 0 10px; font-size:1.05rem}

/* Contact */
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.contact-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.contact .btn{margin-top:10px}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:28px 0 50px; background:#fff}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; align-items:start}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.legal p{margin:.3rem 0 0}

/* Modal */
dialog{border:none; border-radius:14px; padding:0; width:min(680px, 95vw); box-shadow:0 30px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); background:#fff; border-radius:14px 14px 0 0}
#request-form{padding:14px 18px 8px; background:#fff}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid label{display:grid; gap:6px; font-weight:600}
.form-grid input, .form-grid textarea{
  appearance:none; border:1px solid var(--border); border-radius:10px; padding:12px; font:inherit; width:100%;
}
.form-grid .full{grid-column:1 / -1}
.form-grid .consent{grid-column:1 / -1; display:flex; align-items:center; gap:10px; font-weight:500}
.modal-actions{display:flex; gap:10px; padding:8px 18px 18px}

/* Privacy modal */
.policy{padding:0 18px 18px; background:#fff}
.policy p{margin:1rem 0}

/* Cookie banner */
.cookie{
  position:fixed; inset:auto 0 0 0; background:#111; color:#fff; z-index:100;
  transform:translateY(100%); transition:transform .35s ease;
}
.cookie.show{transform:translateY(0)}
.cookie-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px}
.cookie a{color:#f7d7a8; text-decoration:underline}

/* Back to top */
.back-to-top{
  position:fixed; right:16px; bottom:80px; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow);
  display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transition:.3s;
}
.back-to-top.show{opacity:1; visibility:visible}

/* Responsive nav */
@media (max-width: 880px){
  .nav-toggle{display:inline-flex; background:#fff; border:1px solid var(--border); padding:8px 10px; border-radius:8px}
  .nav-list{position:absolute; right:20px; top:60px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px; display:none; box-shadow:var(--shadow)}
  .nav-list.show{display:grid}
  .footer-grid{grid-template-columns:1fr}
}

/* Reduce motion for those who prefer it */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  .cookie{transition:none}
}