/* Heavy Weight Branding clone — original dark UI (not the source's branding).
   Fonts are self-hosted open faces; commercial display faces in the source are
   substituted with open look-alikes (Oswald / Bebas Neue / Montserrat). */
@font-face { font-family:'Oswald'; src:url('../assets/fonts/oswald-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/montserrat-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Bebas Neue'; src:url('../assets/fonts/bebasneue-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Pacifico'; src:url('../assets/fonts/pacifico-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lato'; src:url('../assets/fonts/lato-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lato'; src:url('../assets/fonts/lato-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --bg:#0b0b0e; --panel:#141419; --panel2:#1b1b22; --line:#2a2a33;
  --txt:#e9e9ef; --muted:#9a9aa8; --accent:#8b5cf6; --accent2:#b794f6;
  --radius:14px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--txt);
  font-family:'Lato','Montserrat',system-ui,sans-serif; }
h1,h3 { margin:0; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.5px; }
h3 { font-size:13px; text-transform:uppercase; color:var(--muted); margin:14px 0 8px; }
.muted { color:var(--muted); font-size:13px; }

.studio { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(380px,520px);
  gap:16px; height:100vh; padding:16px; }
@media (max-width:980px){ .studio{ grid-template-columns:1fr; height:auto; } }

/* ---- 3D preview ---- */
.studio__preview { position:relative; background:
  radial-gradient(120% 120% at 50% 0%, #1a1626 0%, #0c0c10 60%, #08080b 100%);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:420px; }
.stage3d { position:absolute; inset:0; }
.stage3d canvas { display:block; }
.preview-bar { position:absolute; left:0; right:0; bottom:0; display:flex;
  justify-content:space-between; align-items:center; padding:12px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.45)); }
.face-tabs { display:flex; gap:6px; }

/* ---- panel ---- */
.studio__panel { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; overflow:auto; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.panel-head h1 { font-size:22px; }
.panel-head h1 .home-link { color:inherit; text-decoration:none; transition:color .15s; }
.panel-head h1 .home-link:hover { color:var(--accent2); }
.tag { font-size:10px; color:#0b0b0e; background:var(--accent); padding:2px 7px;
  border-radius:20px; vertical-align:middle; font-family:'Montserrat'; font-weight:700; }
select, input, textarea { background:var(--panel2); color:var(--txt);
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; font:inherit; width:100%; }
select { cursor:pointer; }
#product { width:auto; min-width:180px; }

/* ---- editor ---- */
.editor-wrap { background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:12px; margin-bottom:14px; }
.dpc-editor__stage { background:
  repeating-conic-gradient(#20202a 0% 25%, #191921 0% 50%) 50%/18px 18px;
  border-radius:8px; overflow:hidden; display:flex; }
.dpc-editor__canvas { width:100%; height:auto; display:block; touch-action:none; }
.editor-tools { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* face tabs above the editor */
.face-tabs--editor { display:flex; gap:6px; margin-bottom:8px; }
.face-dims { font-size:12px; color:var(--muted); margin-bottom:8px; font-family:'Montserrat'; }
.face-dims::before { content:'\25A1'; color:var(--accent); margin-right:6px; }

/* round (lid) design surface */
.dpc-editor__stage--round { max-width:300px; margin:0 auto; aspect-ratio:1; }
.face-mount { min-width:0; }
.hint { color:var(--muted); font-size:12px; }
.export-group { display:inline-flex; align-items:center; gap:6px; }
.export-chip { border-color:var(--accent); color:var(--accent2); }
.res-select { width:auto; padding:5px 8px; font-size:12px; border-radius:20px; background:var(--panel2); }

/* export renders modal */
.export-ov { position:fixed; inset:0; background:rgba(5,5,8,.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.export-modal { background:var(--panel); border:1px solid var(--line); border-radius:16px;
  width:min(920px,96vw); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.export-head { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line); }
.export-head h3 { font-size:18px; }
.export-head .muted { font-size:12px; }
.export-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;
  padding:18px; overflow:auto; }
.export-card { display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:repeating-conic-gradient(#20202a 0% 25%, #191921 0% 50%) 50%/16px 16px;
  text-decoration:none; color:var(--txt); transition:border-color .15s, transform .15s; }
.export-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.export-card img { width:100%; aspect-ratio:1; object-fit:contain; display:block; }
.export-cap { padding:8px 10px; font-size:12px; text-align:center; text-transform:capitalize;
  background:var(--panel2); border-top:1px solid var(--line); }
.export-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }

.btn { background:var(--accent); color:#0b0b0e; border:none; border-radius:9px;
  padding:9px 14px; font-weight:700; cursor:pointer; font-family:'Montserrat'; }
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn.ai { background:linear-gradient(90deg,#c084fc,#7c3aed); color:#fff; }
.btn.bleed { width:100%; margin:4px 0 10px; }

/* AI prompt bar */
.ai-bar { display:flex; gap:8px; margin-top:10px; }
.ai-bar input { flex:1; }

/* drag-and-drop highlight on the editor */
#editor.is-drop { outline:2px dashed var(--accent); outline-offset:4px; border-radius:10px; }
.btn.file { display:inline-flex; align-items:center; }
.btn:hover { filter:brightness(1.08); }

.chip { background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:20px; padding:6px 12px; font-size:13px; cursor:pointer; }
.chip.is-active { background:var(--accent); color:#0b0b0e; border-color:var(--accent); font-weight:700; }
.chip.danger { border-color:#5a2020; color:#ff8f8f; }
.chip.gloss.is-active { background:#e7ecff; border-color:#9fb4ff; color:#1a2240; }
.chip.fx.is-active { background:var(--accent2,#b794f6); border-color:var(--accent2,#b794f6); color:#0b0b0e; }
.chip.fxlvl { min-width:34px; text-align:center; padding:6px 10px; }
.fx-title { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:12px 0 5px; }
.fx-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
.fx-lab { font-size:11px; color:var(--muted); margin-right:2px; }
.fx-upload { margin:8px 0 2px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.fx-upload summary { cursor:pointer; font-size:12px; color:var(--muted); letter-spacing:.04em; }
.fx-upload__hint { font-size:12.5px; line-height:1.55; color:#b7b4c2; margin:8px 0 14px; }
.fx-upload__row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.fx-upload__row > .btn { flex:1 1 0; min-width:0; justify-content:center; }
.fx-upload .fx-row select { flex:0 0 auto; min-width:70px; width:auto; }
.btn.file.sm { font-size:11px; padding:6px 9px; }
.btn.file.sm.is-set, [data-fxlab].is-set { border-color:var(--accent2,#b794f6); color:var(--accent2,#b794f6); }
.layers { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; max-height:190px; overflow:auto; }
.layer-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:var(--panel2); }
.layer-row:hover { border-color:var(--accent2,#b794f6); }
.layer-row.sel { border-color:var(--accent,#8b5cf6); background:rgba(139,92,246,.14); }
.layer-ico { width:16px; text-align:center; color:var(--muted); font-size:12px; flex:0 0 auto; }
.layer-name { flex:1; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer-del { background:none; border:none; cursor:pointer; opacity:.55; font-size:12px; line-height:1; padding:2px 4px; }
.layer-del:hover { opacity:1; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }

/* finish preview swatches */
#finishes { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.finish-swatch { background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:5px; align-items:stretch;
  color:var(--txt); font:inherit; }
.finish-swatch__img { display:block; aspect-ratio:1; border-radius:7px; overflow:hidden; background:#0e0e13; }
.finish-swatch__img img, .finish-swatch__img canvas { width:100%; height:100%; object-fit:cover; display:block; }
.finish-swatch__name { font-size:11px; text-align:center; color:var(--muted); }
.finish-swatch:hover { border-color:var(--accent2); }
.finish-swatch.is-active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.finish-swatch.is-active .finish-swatch__name { color:var(--accent2); }

/* animated holographic swatch tiles — rainbow sweep like real holo foil */
.holo-tile { width:100%; height:100%;
  background:linear-gradient(115deg,#ff5f97,#ffd24d,#59ff9c,#38d1ff,#b36bff,#ff5f97);
  background-size:300% 300%; animation:holoShift 3.2s linear infinite; }
.holo-tile--matte { filter:saturate(0.75) brightness(0.9) contrast(0.95); }
.holo-tile--glossy { position:relative; filter:saturate(1.15); }
.holo-tile--glossy::after { content:''; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  background-size:300% 100%; animation:holoSheen 3.2s linear infinite; mix-blend-mode:screen; }
@keyframes holoShift { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes holoSheen { 0%{background-position:150% 0} 100%{background-position:-150% 0} }
.spot-holo-tile { width:100%; height:100%; background:#3b3442; position:relative; overflow:hidden; }
.spot-holo-tile__dot { position:absolute; width:62%; height:62%; left:19%; top:19%; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; }
@media (prefers-reduced-motion: reduce) { .holo-tile, .holo-tile--glossy::after { animation:none; } }

.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .panel-grid{ grid-template-columns:1fr; } }
.panel-col { min-width:0; }

/* inspector */
.inspector label { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.inspector input, .inspector select, .inspector textarea { margin-top:4px; }
.inspector .row { display:flex; gap:8px; }
.inspector .row label { flex:1; }
.z-row { margin-top:10px; }
.z-row .chip { flex:0; white-space:nowrap; }
/* premium-finish controls: distribute the chips evenly across the inspector width */
.inspector .fx-row > .chip { flex:1 1 0; min-width:0; text-align:center; }
.inspector .fx-row > .fx-lab { flex:1 1 100%; margin:0 0 4px; }
.inspector .z-row { display:flex; gap:6px; }
.inspector .z-row > .chip { flex:1 1 0; white-space:nowrap; text-align:center; }
input[type=color]{ padding:2px; height:38px; }
.qty-input { max-width:140px; }

/* catalog */
.catalog { max-height:340px; overflow:auto; padding-right:4px; }
.cat-group { border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--panel2); }
.cat-group summary { cursor:pointer; padding:9px 12px; font-size:13px; font-weight:700;
  font-family:'Montserrat'; user-select:none; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 12px 12px; }
.cat-item { background:#0e0e13; border:1px solid var(--line); border-radius:8px;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:6px; overflow:hidden; }
.cat-item img { max-width:100%; max-height:100%; filter:brightness(0) invert(1); opacity:.9; }
.cat-item:hover { border-color:var(--accent); }
.cat-item--text { font-size:10px; text-align:center; color:var(--muted); line-height:1.2; aspect-ratio:auto; min-height:44px; }

/* pricing */
.dpc-price { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; position:relative; }
.dpc-price.is-loading { opacity:.6; }
.dpc-price__total { font-family:'Oswald'; font-size:30px; font-weight:600; }
.dpc-price__unit { color:var(--muted); font-size:13px; margin-bottom:10px; }
.dpc-price__incl { color:var(--accent2); font-weight:600; white-space:nowrap; }
.dpc-price__tiers { width:100%; border-collapse:collapse; font-size:13px; }
.dpc-price__tiers th { text-align:left; color:var(--muted); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line); }
.dpc-price__tiers td { padding:6px; border-bottom:1px solid #202028; cursor:pointer; }
.dpc-price__tiers tr:hover td { background:#1a1a22; }
.dpc-price__tiers tr.is-active td { background:rgba(139,92,246,.16); color:var(--accent2); }
.dpc-price__note { color:var(--muted); font-size:11px; margin-top:8px; }

.cart-btn { width:100%; margin-top:16px; padding:15px; border:none; border-radius:12px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#0b0b0e;
  font-family:'Oswald'; font-size:18px; font-weight:600; letter-spacing:1px; cursor:pointer; }
.cart-btn:hover { filter:brightness(1.06); }

/* ===== MOBILE / TOUCH ==================================================== */
@media (max-width:980px) {
  /* Preview control bar: scroll it horizontally so Export etc. stay reachable
     instead of being clipped by the preview's overflow:hidden. */
  .preview-bar { gap:8px; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -ms-overflow-style:none; }
  .preview-bar::-webkit-scrollbar { display:none; }
  .preview-bar > * { flex:0 0 auto; }
  .studio { padding:12px; gap:12px; }
  .studio__preview { min-height:58vh; }
  .panel-head h1 { font-size:20px; }
}
@media (max-width:560px) {
  /* roomier touch targets + fewer cramped columns on phones */
  .studio__preview { min-height:52vh; }
  #finishes { grid-template-columns:repeat(2, 1fr); }
  .cat-grid { grid-template-columns:repeat(2, 1fr); }
  .btn, .chip { padding:10px 14px; }
  .export-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}