/* =============================================================
   Redheart Customizer — interface styles
   Matches the main site's palette (bone / charcoal / red,
   Inter + Playfair Display).
   ============================================================= */
:root {
  --paper:#ffffff; --bone:#f7f5f2; --bone-2:#efebe6;
  --charcoal:#14161a; --charcoal-2:#1d2026;
  --ink:#15171b; --ink-2:#474d57; --muted:#797f8a; --muted-2:#9aa0ab;
  --line:#e5e1db; --line-d:rgba(255,255,255,.14);
  --red:#a51226; --red-d:#850e1e; --red-tint:#fbeef0;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:4px;
  --hh:58px;
  --th:1px solid var(--line);
}

* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  font-family:var(--sans); color:var(--ink-2); background:var(--bone);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* ---------- Header ---------- */
.cz-header {
  height:var(--hh); display:flex; align-items:center; gap:18px;
  padding:0 clamp(14px,2vw,24px);
  background:var(--charcoal); color:#fff;
  border-bottom:1px solid var(--line-d);
}
.cz-back { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.cz-back img { border-radius:50%; background:#fff; padding:2px; }
.cz-back-text { font-size:1.02rem; } .cz-back-text strong { font-family:var(--serif); font-weight:600; }
.cz-tagline { margin:0; margin-left:4px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.cz-header-cta {
  margin-left:auto; background:var(--red); color:#fff; text-decoration:none;
  padding:9px 18px; border-radius:var(--radius); font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; transition:background .2s;
}
.cz-header-cta:hover { background:var(--red-d); }

/* ---------- App grid ---------- */
.cz-app {
  display:grid;
  grid-template-columns:clamp(290px,24vw,340px) 1fr clamp(300px,25vw,360px);
  height:calc(100vh - var(--hh)); height:calc(100dvh - var(--hh));
}
.cz-panel { overflow-y:auto; background:var(--paper); }
.cz-panel-left { border-right:var(--th); }
.cz-panel-right { border-left:var(--th); padding:20px clamp(14px,1.4vw,20px) 40px; }

/* ---------- Sections ---------- */
.cz-section { padding:18px clamp(14px,1.4vw,20px); border-bottom:var(--th); }
.cz-section-title { margin:0 0 14px; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cz-section-body { display:flex; flex-direction:column; gap:14px; }
.cz-sub { font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-top:4px; }
.cz-note { margin:0; font-size:.78rem; color:var(--muted); line-height:1.5; }
.cz-mini { font-size:.72rem; color:var(--muted); }

/* ---------- Select ---------- */
.cz-select {
  width:100%; padding:11px 13px; font-size:.9rem; color:var(--ink);
  background:var(--paper); border:var(--th); border-radius:var(--radius);
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23797f8a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px;
}
.cz-select:focus { border-color:var(--red); outline:none; }

/* ---------- Chips ---------- */
.cz-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cz-chip {
  padding:7px 13px; font-size:.76rem; font-weight:500; color:var(--ink-2);
  background:var(--bone); border:var(--th); border-radius:999px; transition:all .18s;
}
.cz-chip:hover { border-color:var(--muted-2); }
.cz-chip.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Dimension rows ---------- */
.cz-dimrow { display:flex; flex-direction:column; gap:7px; }
.cz-dimhead { display:flex; align-items:center; gap:8px; }
.cz-dimhead label { font-size:.8rem; color:var(--ink); flex:1; }
.cz-num {
  width:80px; padding:7px 9px; font-size:.84rem; text-align:right; color:var(--ink);
  background:var(--paper); border:var(--th); border-radius:var(--radius);
}
.cz-num.is-err { border-color:var(--red); }
.cz-num:focus { border-color:var(--red); outline:none; }
.cz-unit { font-size:.72rem; color:var(--muted); width:22px; }
.cz-range { width:100%; accent-color:var(--red); }
.cz-field-err { font-size:.72rem; color:var(--red); min-height:0; }

/* ---------- Segmented ---------- */
.cz-seg { display:flex; flex-wrap:wrap; gap:4px; background:var(--bone); border:var(--th); border-radius:var(--radius); padding:4px; }
.cz-seg-btn {
  flex:1 1 auto; min-width:52px; padding:8px 6px; font-size:.76rem; font-weight:500;
  color:var(--ink-2); background:transparent; border:0; border-radius:3px; transition:all .16s;
}
.cz-seg-btn:hover { color:var(--ink); }
.cz-seg-btn.is-active { background:var(--paper); color:var(--red); box-shadow:0 1px 3px rgba(20,22,26,.12); font-weight:600; }
.cz-seg-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- Swatches ---------- */
.cz-swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:8px; }
.cz-swatch {
  aspect-ratio:1; border-radius:var(--radius); border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); position:relative; transition:transform .14s, border-color .14s;
}
.cz-swatch:hover { transform:translateY(-2px); }
.cz-swatch.is-active { border-color:var(--red); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px rgba(165,18,38,.2); }
.cz-swatch-picker { display:grid; place-items:center; background:var(--bone); color:var(--muted); font-size:1.2rem; }
.cz-picker-wrap { display:flex; align-items:center; gap:10px; }
.cz-color { width:44px; height:30px; padding:0; border:var(--th); border-radius:var(--radius); background:none; cursor:pointer; }

/* ---------- Tabs ---------- */
.cz-tabs { display:flex; gap:4px; background:var(--bone); border:var(--th); border-radius:var(--radius); padding:4px; }
.cz-tab { flex:1; padding:9px; font-size:.78rem; font-weight:500; color:var(--ink-2); background:transparent; border:0; border-radius:3px; }
.cz-tab.is-active { background:var(--paper); color:var(--red); font-weight:600; box-shadow:0 1px 3px rgba(20,22,26,.12); }

/* ---------- Product style grid ---------- */
.cz-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.cz-style {
  padding: 11px 10px; font-size: .8rem; font-weight: 500; text-align: center;
  color: var(--ink-2); background: var(--paper); border: var(--th); border-radius: var(--radius);
  transition: all .16s;
}
.cz-style:hover { border-color: var(--muted-2); color: var(--ink); }
.cz-style.is-active { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 1px var(--red); font-weight: 600; }

/* ---------- Material cards ---------- */
.cz-materials { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cz-mat {
  display:flex; flex-direction:column; gap:6px; padding:10px; text-align:left;
  background:var(--paper); border:var(--th); border-radius:var(--radius); transition:all .16s;
}
.cz-mat:hover { border-color:var(--muted-2); }
.cz-mat.is-active { border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.cz-mat-sw { height:34px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.cz-mat-sw.is-glass { opacity:.5; background-blend-mode:multiply; }
.cz-mat-sw.is-frost { filter:blur(.3px); }
.cz-mat-name { font-size:.78rem; font-weight:600; color:var(--ink); line-height:1.1; }
.cz-mat-spec { font-size:.68rem; color:var(--muted); line-height:1.2; }

/* ---------- Checkboxes ---------- */
.cz-checks { display:flex; flex-direction:column; gap:8px; }
.cz-check { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--ink); cursor:pointer; }
.cz-check input { width:17px; height:17px; accent-color:var(--red); }

/* ---------- Stage ---------- */
.cz-stage { position:relative; background:#cfd5dc; overflow:hidden; }
.cz-stage:fullscreen { background:#cfd5dc; }
.cz-viewer { position:absolute; inset:0; }
.cz-viewer canvas { display:block; width:100% !important; height:100% !important; touch-action:none; }

.cz-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cz-dim {
  font-family:var(--sans); font-size:.68rem; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.82); padding:2px 7px; border-radius:3px;
  box-shadow:0 1px 4px rgba(20,22,26,.12); white-space:nowrap;
}

/* Loading */
.cz-loading {
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px;
  background:#cfd5dc; color:var(--ink-2); font-size:.86rem; transition:opacity .5s; z-index:5;
}
.cz-loading.is-hidden { opacity:0; pointer-events:none; }
.cz-spinner { width:38px; height:38px; border:3px solid rgba(21,23,27,.15); border-top-color:var(--red); border-radius:50%; animation:cz-spin .8s linear infinite; }
@keyframes cz-spin { to { transform:rotate(360deg); } }
.cz-error { max-width:360px; text-align:center; padding:24px; font-size:.9rem; line-height:1.6; }

/* Toolbar */
.cz-toolbar {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:calc(100% - 24px);
  padding:8px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border:var(--th); border-radius:10px; box-shadow:0 8px 30px rgba(20,22,26,.16); z-index:4;
}
.cz-tool-group { display:flex; align-items:center; gap:3px; padding:2px; background:var(--bone); border-radius:7px; }
.cz-tool-label { font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 6px; }
.cz-tool {
  padding:7px 11px; font-size:.72rem; font-weight:500; color:var(--ink-2);
  background:transparent; border:0; border-radius:5px; white-space:nowrap; transition:all .14s;
}
.cz-tool:hover { background:rgba(20,22,26,.07); color:var(--ink); }
.cz-tool.is-active { background:var(--ink); color:#fff; }

/* ---------- Right panel: summary ---------- */
.cz-summary { margin:0 0 18px; display:flex; flex-direction:column; }
.cz-sumrow { display:grid; grid-template-columns:40% 60%; gap:10px; padding:9px 0; border-bottom:var(--th); }
.cz-sumrow dt { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0; }
.cz-sumrow dd { margin:0; font-size:.84rem; color:var(--ink); }

/* Price */
.cz-price { background:var(--bone); border:var(--th); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.cz-price-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cz-price-label { font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cz-price-total { font-family:var(--serif); font-size:1.7rem; color:var(--ink); }
.cz-price-break { margin-top:10px; font-size:.78rem; }
.cz-price-break summary { cursor:pointer; color:var(--red); font-weight:500; }
.cz-price-break ul { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cz-price-break li { display:flex; justify-content:space-between; gap:10px; color:var(--ink-2); }
.cz-price-disc { margin:12px 0 0; font-size:.68rem; color:var(--muted); line-height:1.5; font-style:italic; }

/* Actions */
.cz-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:26px; }
.cz-btn {
  padding:10px; font-size:.76rem; font-weight:600; color:var(--ink);
  background:var(--paper); border:var(--th); border-radius:var(--radius); transition:all .16s;
}
.cz-btn:hover { border-color:var(--ink); }
.cz-btn-solid { grid-column:1/-1; background:var(--red); color:#fff; border-color:var(--red); letter-spacing:.06em; text-transform:uppercase; padding:13px; }
.cz-btn-solid:hover { background:var(--red-d); border-color:var(--red-d); }

/* Quote */
.cz-quote { display:flex; flex-direction:column; gap:10px; }
.cz-quote-row { display:flex; }
.cz-input {
  width:100%; padding:11px 13px; font-size:.86rem; color:var(--ink); font-family:var(--sans);
  background:var(--bone); border:var(--th); border-radius:var(--radius); resize:vertical;
}
.cz-input:focus { border-color:var(--red); outline:none; background:var(--paper); }
.cz-quote-note { margin:0; font-size:.7rem; color:var(--muted); line-height:1.5; }

/* ---------- Toast ---------- */
.cz-toast {
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(16px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:8px; font-size:.82rem;
  box-shadow:0 12px 40px rgba(20,22,26,.3); opacity:0; pointer-events:none; transition:all .3s; z-index:200; max-width:90vw; text-align:center;
}
.cz-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Modal ---------- */
.cz-modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(10,11,14,.7); backdrop-filter:blur(4px); }
.cz-modal-box { background:var(--paper); border-radius:10px; max-width:460px; width:100%; max-height:86vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.cz-modal-wide .cz-modal-box { max-width:900px; }
.cz-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:var(--th); }
.cz-modal-head h3 { margin:0; font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
.cz-modal-close { width:34px; height:34px; border:0; background:var(--bone); border-radius:50%; font-size:.9rem; color:var(--ink-2); }
.cz-modal-close:hover { background:var(--bone-2); }
.cz-modal-body { padding:20px; }

/* Compare */
.cz-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cz-compare-col { display:flex; flex-direction:column; gap:10px; }
.cz-compare-empty { place-content:center; text-align:center; color:var(--muted); font-size:.82rem; border:1px dashed var(--line); border-radius:var(--radius); padding:24px; }
.cz-compare-label { font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.cz-compare-img { width:100%; border-radius:var(--radius); border:var(--th); background:var(--bone); }
.cz-compare-sum { margin:0; font-size:.78rem; color:var(--ink-2); line-height:1.5; }

/* =============================================================
   Responsive — tablet & mobile (stacked, collapsible)
   ============================================================= */
@media (max-width:980px) {
  body { overflow:auto; }
  .cz-app { grid-template-columns:1fr; height:auto; }
  .cz-stage { order:-1; height:52vh; min-height:360px; position:sticky; top:var(--hh); z-index:10; }
  .cz-panel { max-height:none; }
  .cz-panel-left, .cz-panel-right { border:0; border-top:8px solid var(--bone); }
  .cz-toolbar { bottom:10px; gap:6px; padding:6px; }
  .cz-tool { padding:6px 9px; font-size:.68rem; }
  .cz-tool-label { display:none; }
  .cz-materials { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .cz-tagline { display:none; }
  .cz-stage { height:46vh; min-height:300px; }
  .cz-actions { grid-template-columns:1fr 1fr; }
  .cz-compare { grid-template-columns:1fr; }
  .cz-swatches { grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  * { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}