/* ============================================================
   CONTACT US — a split layout: shop info on one side, a
   "docket" style form on the other, echoing the receipt motif
   from the cart drawer so it still feels part of the same shop.
   ============================================================ */

.contact-wrap{
  max-width:var(--maxw); margin:0 auto; padding:60px 28px 80px;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:start;
}

.contact-info h1{ font-size:clamp(1.8rem, 4vw, 2.5rem); font-style:italic; }
.contact-info p.lede{ margin-top:14px; color:var(--choc-soft); font-size:1rem; line-height:1.6; max-width:42ch; }

.info-list{ margin-top:34px; display:flex; flex-direction:column; gap:22px; }
.info-item{ display:flex; gap:16px; align-items:flex-start; }
.info-item .icon{
  width:44px; height:44px; border-radius:14px; background:var(--box-lid);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.info-item h4{ font-size:0.95rem; font-weight:700; margin-bottom:3px; }
.info-item p, .info-item a{ font-size:0.9rem; color:var(--choc-soft); line-height:1.5; }
.info-item a:hover{ color:var(--berry); }

.map-placeholder{
  margin-top:30px; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; background:var(--box-lid);
  display:flex; align-items:center; justify-content:center; color:var(--choc-soft); font-size:0.85rem;
}

/* ---------- Docket form ---------- */
.docket{
  background:var(--paper); border-radius:22px; padding:38px 34px;
  border:1px solid var(--line); position:relative;
  box-shadow:0 20px 40px rgba(61,43,31,0.08);
}
.docket::before{
  content:""; position:absolute; top:-1px; left:24px; right:24px; height:0;
  border-top:2px dashed var(--line);
}
.docket h2{ font-size:1.5rem; font-style:italic; margin-bottom:6px; }
.docket p.sub{ color:var(--choc-soft); font-size:0.9rem; margin-bottom:26px; }

.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:0.82rem; font-weight:700; color:var(--choc-soft); margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:0.95rem; background:var(--cream); color:var(--choc);
}
.form-row textarea{ min-height:110px; resize:vertical; }
.form-row input:focus, .form-row textarea:focus{ outline:2px solid var(--berry); outline-offset:1px; }

.form-status{ margin-top:14px; font-size:0.86rem; font-weight:600; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:#3a7d44; }
.form-status.err{ color:var(--berry); }

@media(max-width:900px){
  .contact-wrap{ grid-template-columns:1fr; }
}