/* =======================================
   Violin Boutique — Styles (v4)
   - Refined brand wordmark + TM placement
   - Cleaner typography + spacing
   - Better focus states & reduced motion
   - Minor hover/print polish
   ======================================= */

:root{
  --bg:#faf9f7;
  --paper:#ffffff;
  --ink:#111317;
  --muted:#61646b;
  --gold:#b8893a;
  --link:#0b5bd3;
  --border:#e6e2da;
  --shadow:0 10px 30px rgba(17,19,23,.06);
  --radius:14px;

  color-scheme: light;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------------- Header ---------------- */
header{
  background:var(--paper);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.1);
}
.nav{
  max-width:1160px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Brand wordmark + TM (single, consolidated rule) */
.brand{
  position:relative;
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:.3px;
  font-size:clamp(26px, 2.2vw, 32px);
  color:var(--ink);
  text-decoration:none;
  line-height:1;
}
.brand em{
  font-style:normal; /* keep upright */
  color:var(--gold);
  font-weight:700;
  letter-spacing:.6px;
}
/* TM rides the upper-right of the final 'e' */
.tm-symbol{
  position:absolute;
  right:-0.58em;        /* slightly beyond the word edge */
  top:-0.52em;          /* above cap height, tuned for Playfair */
  font-size:.52em;      /* proportional to brand size */
  opacity:.65;
  font-weight:600;
  line-height:1;
  user-select:none;
}

/* Nav links */
nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  opacity:.85;
  margin-left:18px;
}
nav a:hover{ opacity:1; color:var(--gold) }
nav a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------- Hero ---------------- */
.hero{
  max-width:1160px; margin:0 auto; padding:54px 20px 28px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;
}
.hero-card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px;
}
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700;
  color:var(--gold); background:#fff6e7; padding:6px 10px; border-radius:999px;
}
h1{
  margin:12px 0 6px; line-height:1.1;
  font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(28px,4.6vw,44px);
}
.sub{ color:var(--muted); font-size:18px; margin-bottom:16px }
.trust-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.trust{
  background:#f5efe5; color:#5c4a2a; border:1px solid #ecdcc2; border-radius:999px;
  font-size:13px; font-weight:700; padding:6px 10px;
}
.hero-img{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:12px; display:flex; align-items:center; justify-content:center;
}
.hero-img img{ width:100%; height:auto; border-radius:10px; display:block }

/* ---------------- Sections ---------------- */
.section{ max-width:1160px; margin:24px auto; padding:0 20px }
.section h2{
  font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(22px,3.5vw,30px);
  margin:22px 0 14px;
}
.lead{ color:var(--muted); max-width:800px }

/* ---------------- Grid / Cards ---------------- */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) }
.card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.card figure{ margin:0; position:relative; overflow:hidden; aspect-ratio:4/3 }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform .28s ease }
.card:hover img{ transform:scale(1.02) }
.label{
  position:absolute; left:12px; top:12px; background:#1b1c1f; color:#fff; font-size:12px; font-weight:700;
  padding:6px 10px; border-radius:999px; opacity:.9;
}
.label.gold{ background:var(--gold) }
.card .body{ padding:16px 16px 18px }
.title{ margin:0 0 6px; font-weight:700; font-size:18px }
.meta{ color:var(--muted); font-size:14px; margin-bottom:10px }
.price{ font-weight:700; color:var(--ink); margin-bottom:12px }
.actions{ display:flex; gap:10px; margin-top:auto; padding:0 16px 16px }

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); background:#f6f5f2; color:var(--ink);
  padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer;
  transition:background .2s ease, transform .06s ease, border-color .2s ease;
}
.btn:hover{ background:#efede8; transform:translateY(-1px) }
.btn:focus-visible{
  outline:2px solid var(--link);
  outline-offset:3px;
  border-radius:10px;
}
.btn.gold{ background:var(--gold); border-color:#a6782f; color:#fff }
.btn.gold:hover{ background:#a6782f }

/* ---------------- Policies ---------------- */
.policies{ background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.policy-wrap{
  max-width:1160px; margin:0 auto; padding:26px 20px; display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.policy{ background:#fffdfa; border:1px dashed #e7d9c3; border-radius:12px; padding:16px }
.policy b{ color:#3d2f15 }
.policy p{ margin:.35rem 0 0; color:var(--muted); font-size:14px }

/* ---------------- About / Contact ---------------- */
.about{ display:grid; gap:22px; grid-template-columns:1.2fr .8fr; align-items:start }
.panel{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.panel p{ margin:.25rem 0 .6rem; color:var(--muted) }
.list{ padding-left:18px; color:var(--muted) }
.list li{ margin:.35rem 0 }

/* ---------------- Modal ---------------- */
dialog{ border:0; padding:0; border-radius:16px; width:min(720px, 92vw); box-shadow:0 25px 60px rgba(0,0,0,.25) }
.modal{ background:var(--paper); border:1px solid var(--border); border-radius:16px; overflow:hidden }
.modal header{ border-bottom:1px solid var(--border); padding:14px 18px; display:flex; justify-content:space-between; align-items:center }
.modal h3{ margin:0; font-family:"Playfair Display", serif }
.close{ background:transparent; border:0; font-size:20px; cursor:pointer }
.modal .content{ padding:16px 18px; display:grid; gap:14px; grid-template-columns:1fr 1.1fr }
.modal figure{ margin:0; border:1px solid var(--border); border-radius:12px; overflow:hidden }
.modal img{ width:100%; height:auto; display:block }
.modal form{ display:grid; gap:10px }
.modal label{ font-weight:700; font-size:14px }
.modal input, .modal textarea, .modal select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; background:#fbfaf8;
}
.modal textarea{ min-height:110px; resize:vertical }
.modal .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.modal .submit{ margin-top:6px }
.note{ font-size:12px; color:var(--muted) }

/* ---------------- Footer ---------------- */
footer{ text-align:center; padding:28px 20px; color:#747474 }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr }
  .modal .content{ grid-template-columns:1fr }
  .about{ grid-template-columns:1fr }
  /* TM position tweak at smaller brand sizes */
  .tm-symbol{ right:-0.52em; top:-0.5em; font-size:.5em }
}

/* ---------------- Print (one-pager) ---------------- */
@media print{
  :root{ --bg:#fff; --paper:#fff; --border:#cfcfcf; --ink:#000; --muted:#333 }
  body{ background:#fff; color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  header{ border-bottom:0 }
  .hero-img, .policies{ box-shadow:none }
  .card:hover img{ transform:none }
}