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

:root{
  --cream:#F1EBDD;
  --cream-2:#E8E0CD;
  --green-900:#20301C;
  --green-700:#3A4F31;
  --green-600:#4C6640;
  --white:#FFFFFF;
  --gold:#B99B5D;
  --ink:#20301C;
  --muted:#7C8271;
  --danger:#A0432B;
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Cormorant Garamond', serif; }
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Stitch motif (signature element) ---------- */
.stitch{ border:none;border-top:1px dashed rgba(185,155,93,0.55);height:0;margin:0; }
.stitch-box{ position:relative; }
.stitch-box::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(185,155,93,0.4);pointer-events:none;
}

/* ---------- Header ---------- */
header{ position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px dashed rgba(32,48,28,0.25); }
.nav-wrap{ max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 28px; }
.brand{ display:flex;align-items:center;gap:12px; }
.brand img{ width:34px;height:34px; }
.brand-name{ font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;letter-spacing:5px;color:var(--green-900); }
nav.links{ display:flex;gap:34px; }
nav.links a{
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-900);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .2s;
}
nav.links a:hover, nav.links a.active{ border-color:var(--gold); }
.nav-right{ display:flex;align-items:center;gap:22px; }
.cart-btn{
  position:relative;background:none;border:1px solid var(--green-900);border-radius:100px;
  padding:9px 18px 9px 14px;display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:1px;color:var(--green-900);text-transform:uppercase;
}
.cart-btn svg{ width:16px;height:16px; }
.cart-count{
  background:var(--green-900);color:var(--cream);border-radius:100px;font-size:11px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ max-width:1240px;margin:0 auto;padding:22px 28px 0;font-size:12px;color:var(--muted); }
.breadcrumb a{ color:var(--green-900); }
.breadcrumb span{ margin:0 6px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background:var(--green-900);color:var(--cream);padding:70px 28px;text-align:center; }
.page-hero .hero-eyebrow{ justify-content:center; }
.page-hero h1{ font-size:clamp(32px,4vw,48px);margin:14px 0 0;font-weight:600; }

/* ---------- Hero (home) ---------- */
.hero{ background:var(--green-900);color:var(--cream);position:relative;overflow:hidden; }
.hero-inner{
  max-width:1240px;margin:0 auto;padding:90px 28px 100px;display:grid;
  grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.hero-eyebrow{
  font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.hero-eyebrow::before{ content:"";width:34px;height:1px;background:var(--gold); }
.hero h1{ font-size:clamp(40px,5vw,64px);line-height:1.05;font-weight:600;margin:0 0 22px;letter-spacing:0.5px; }
.hero p.desc{ font-family:'Inter',sans-serif;font-size:15px;line-height:1.7;color:#CBD2C2;max-width:420px;margin:0 0 34px; }
.hero-ctas{ display:flex;gap:16px;align-items:center; }
.btn-primary{
  background:var(--gold);color:var(--green-900);padding:15px 34px;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;font-weight:600;border:none;border-radius:100px;display:inline-block;
}
.btn-ghost{
  border:1px solid rgba(241,235,221,0.4);color:var(--cream);padding:15px 30px;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;border-radius:100px;background:none;
}
.hero-mark{ display:flex;justify-content:center;align-items:center;position:relative; }
.hero-mark img{ width:min(320px,80%);filter:drop-shadow(0 30px 60px rgba(0,0,0,0.35)); }
.hero-mark::before{
  content:"";position:absolute;width:420px;height:420px;max-width:90%;max-height:90%;
  border:1px dashed rgba(185,155,93,0.45);border-radius:50%;
}

/* ---------- Marquee strip ---------- */
.strip{
  background:var(--gold);color:var(--green-900);padding:10px 0;overflow:hidden;white-space:nowrap;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
}
.strip span{ padding:0 28px; }

/* ---------- Section shell ---------- */
section{ padding:90px 28px; }
.section-inner{ max-width:1240px;margin:0 auto; }
.section-head{ display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;gap:20px;flex-wrap:wrap; }
.section-eyebrow{ font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px; }
.section-head h2{ font-size:38px;font-weight:600;margin:0;color:var(--green-900); }
.section-head p{ max-width:360px;font-size:14px;color:var(--muted);line-height:1.6;margin:0; }

/* ---------- Category cards ---------- */
.cats{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.cat-card{ background:var(--white);padding:38px 26px;text-align:center;position:relative;border-radius:var(--radius); }
.cat-card svg{ width:46px;height:46px;margin-bottom:18px;color:var(--green-900); }
.cat-card h3{ font-size:22px;margin:0 0 8px;color:var(--green-900);letter-spacing:1px; }
.cat-card p{ font-size:13px;color:var(--muted);margin:0 0 18px; }
.cat-card a{ font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px; }

/* ---------- Product grid ---------- */
.grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px; }
.card{ background:var(--white);display:flex;flex-direction:column;position:relative; }
.card-media{
  aspect-ratio:4/5;background:linear-gradient(160deg,var(--cream-2),var(--cream));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;
}
.card-media svg{ width:52%;height:52%;color:var(--green-700); }
.card-badge{
  position:absolute;top:14px;left:14px;background:var(--danger);color:var(--cream);font-size:10px;
  letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:100px;
}
.card-body{ padding:20px 18px 22px; }
.card-cat{ font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px; }
.card-title{ font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;margin:0 0 10px;color:var(--green-900);cursor:pointer; }
.card-price-row{ display:flex;align-items:center;justify-content:space-between;margin-top:14px; }
.price{ font-size:15px;font-weight:600;color:var(--green-900); }
.price.old{ font-size:12px;color:var(--muted);text-decoration:line-through;font-weight:400;margin-right:8px; }
.add-btn{
  background:var(--green-900);color:var(--cream);border:none;padding:9px 16px;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;border-radius:100px;display:flex;align-items:center;gap:6px;
}
.add-btn:hover{ background:var(--green-700); }

/* ---------- Filter row ---------- */
.filter-row{ display:flex;gap:10px;margin-bottom:34px;flex-wrap:wrap; }
.filter-btn{
  background:none;border:1px solid rgba(32,48,28,0.3);padding:8px 20px;border-radius:100px;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--green-900);
}
.filter-btn.active{ background:var(--green-900);border-color:var(--green-900);color:var(--cream); }

/* ---------- Why us ---------- */
.why{ background:var(--white); }
.why-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:30px; }
.why-item{ text-align:left; }
.why-num{ font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);letter-spacing:2px;margin-bottom:14px; }
.why-item h4{ font-size:17px;margin:0 0 8px;color:var(--green-900); }
.why-item p{ font-size:13px;color:var(--muted);line-height:1.6;margin:0; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:var(--green-900);color:var(--cream);text-align:center;padding:100px 28px; }
.cta-banner .hero-eyebrow{ justify-content:center; }
.cta-banner h2{ font-size:clamp(30px,4vw,46px);margin:0 0 26px;font-weight:600; }

/* ---------- Footer ---------- */
footer{ background:var(--green-900);color:#B9C1AE;padding:60px 28px 30px; }
.footer-grid{ max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px; }
.footer-brand{ display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.footer-brand img{ width:28px;height:28px; }
.footer-brand span{ font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:4px;color:var(--cream); }
footer p.tag{ font-size:13px;line-height:1.7;max-width:260px; }
footer h5{ font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 18px; }
footer ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px; }
footer ul a{ font-size:13px; }
.footer-bottom{
  max-width:1240px;margin:0 auto;border-top:1px dashed rgba(241,235,221,0.2);padding-top:24px;
  font-size:12px;display:flex;justify-content:space-between;color:#8B927E;
}

/* ---------- Cart drawer ---------- */
.overlay{ position:fixed;inset:0;background:rgba(32,48,28,0.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90; }
.overlay.show{ opacity:1;pointer-events:auto; }
.drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--cream);
  z-index:95;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;
}
.drawer.show{ transform:translateX(0); }
.drawer-head{ padding:24px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(32,48,28,0.25); }
.drawer-head h3{ margin:0;font-size:22px;color:var(--green-900); }
.drawer-close{ background:none;border:none;font-size:22px;color:var(--green-900); }
.drawer-body{ flex:1;overflow-y:auto;padding:20px 26px; }
.cart-item{ display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed rgba(32,48,28,0.15); }
.cart-item-media{ width:64px;height:76px;background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cart-item-media svg{ width:60%;height:60%;color:var(--green-700); }
.cart-item-info{ flex:1; }
.cart-item-info .name{ font-size:14px;font-weight:600;color:var(--green-900);margin-bottom:4px; }
.cart-item-info .cat{ font-size:11px;color:var(--muted);margin-bottom:8px; }
.qty-row{ display:flex;align-items:center;gap:10px; }
.qty-btn{
  width:22px;height:22px;border:1px solid rgba(32,48,28,0.3);background:none;border-radius:100px;
  font-size:13px;display:flex;align-items:center;justify-content:center;color:var(--green-900);
}
.cart-item-price{ font-size:13px;font-weight:600;color:var(--green-900); }
.remove-btn{ background:none;border:none;font-size:11px;color:var(--danger);text-decoration:underline;margin-left:auto; }
.drawer-empty{ text-align:center;padding:60px 10px;color:var(--muted);font-size:13px; }
.drawer-foot{ padding:22px 26px 28px;border-top:1px dashed rgba(32,48,28,0.25); }
.total-row{ display:flex;justify-content:space-between;margin-bottom:18px;font-size:15px;font-weight:600;color:var(--green-900); }
.checkout-btn{
  width:100%;background:var(--green-900);color:var(--cream);border:none;padding:15px;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;border-radius:100px;
}
.checkout-btn:disabled{ opacity:0.4; }

/* ---------- Checkout modal ---------- */
.modal-overlay{ position:fixed;inset:0;background:rgba(32,48,28,0.6);display:none;align-items:center;justify-content:center;z-index:100;padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--cream);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:38px 34px;position:relative; }
.modal h3{ margin:0 0 6px;font-size:26px;color:var(--green-900); }
.modal p.sub{ margin:0 0 26px;font-size:13px;color:var(--muted); }
.modal-close{ position:absolute;top:20px;right:22px;background:none;border:none;font-size:20px;color:var(--green-900); }
.field{ margin-bottom:16px; }
.field label{ display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--green-900);margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%;border:1px solid rgba(32,48,28,0.3);background:var(--white);padding:12px 14px;
  font-size:14px;font-family:inherit;border-radius:2px;color:var(--ink);
}
.field textarea{ resize:vertical;min-height:70px; }
.pay-options{ display:flex;gap:10px; }
.pay-opt{ flex:1;border:1px solid rgba(32,48,28,0.3);padding:12px;text-align:center;font-size:12px;border-radius:2px;cursor:pointer; }
.pay-opt.selected{ border-color:var(--green-900);background:var(--green-900);color:var(--cream); }
.modal-submit{
  width:100%;background:var(--gold);color:var(--green-900);border:none;padding:15px;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;border-radius:100px;margin-top:8px;font-weight:600;
}
.success-box{ text-align:center;padding:20px 0; }
.success-box svg{ width:56px;height:56px;color:var(--green-900);margin-bottom:18px; }
.success-box h3{ margin-bottom:10px; }
.success-box p{ font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:26px; }
.order-id{
  display:inline-block;background:var(--white);padding:10px 20px;font-family:'Cormorant Garamond',serif;
  font-size:18px;letter-spacing:2px;color:var(--green-900);margin-bottom:26px;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--green-900);
  color:var(--cream);padding:14px 26px;font-size:13px;border-radius:100px;z-index:110;transition:transform .3s;
  display:flex;align-items:center;gap:10px;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ---------- Product detail page ---------- */
.product-detail{ display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1240px;margin:0 auto;padding:60px 28px 100px; }
.product-media-main{
  aspect-ratio:4/5;background:linear-gradient(160deg,var(--cream-2),var(--white));
  display:flex;align-items:center;justify-content:center;position:relative;
}
.product-media-main svg{ width:44%;height:44%;color:var(--green-700); }
.product-info .cat-tag{ font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px; }
.product-info h1{ font-size:38px;margin:0 0 16px;color:var(--green-900); }
.product-info .price-row{ display:flex;align-items:center;gap:12px;margin-bottom:26px; }
.product-info .price{ font-size:24px; }
.product-info .desc{ font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:30px; }
.size-row{ display:flex;gap:10px;margin-bottom:30px; }
.size-opt{
  width:44px;height:44px;border:1px solid rgba(32,48,28,0.3);display:flex;align-items:center;justify-content:center;
  font-size:13px;border-radius:2px;cursor:pointer;
}
.size-opt.selected{ background:var(--green-900);color:var(--cream);border-color:var(--green-900); }
.detail-block{ margin-top:36px;padding-top:26px;border-top:1px dashed rgba(32,48,28,0.2); }
.detail-block h4{ font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--green-900);margin-bottom:12px; }
.detail-block p, .detail-block li{ font-size:13px;color:var(--muted);line-height:1.7; }

/* ---------- About / Contact pages ---------- */
.prose{ max-width:760px;margin:0 auto;padding:80px 28px; }
.prose h2{ font-size:32px;color:var(--green-900);margin:40px 0 14px; }
.prose p{ font-size:15px;line-height:1.85;color:var(--muted);margin:0 0 20px; }
.value-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px; }
.value-card{ background:var(--white);padding:30px 24px; }
.value-card h4{ color:var(--green-900);font-size:17px;margin:0 0 10px; }
.value-card p{ font-size:13px;margin:0; }

.contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1100px;margin:0 auto;padding:80px 28px; }
.contact-info h3{ font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:22px; }
.contact-line{ display:flex;gap:14px;margin-bottom:22px;font-size:14px;color:var(--green-900); }
.contact-line svg{ width:20px;height:20px;flex-shrink:0;color:var(--gold); }
.contact-form .field{ margin-bottom:18px; }
.contact-submit{
  background:var(--green-900);color:var(--cream);border:none;padding:15px 34px;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;border-radius:100px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  nav.links{ display:none; }
  .hero-inner{ grid-template-columns:1fr;text-align:center; }
  .hero p.desc{ margin-left:auto;margin-right:auto; }
  .hero-eyebrow{ justify-content:center; }
  .hero-ctas{ justify-content:center; }
  .hero-mark{ order:-1; }
  .cats{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .product-detail{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr 1fr;gap:16px; }
  section{ padding:60px 18px; }
  .footer-grid{ grid-template-columns:1fr; }
}