/* ==========================================================================
   SECTION 5 — PRODUCT DESIGN STUDIO
   Premium 2D live-mockup configurator (Fabric.js). Garment-dominant
   3-column layout, card-based selectors, on-garment hotspots.
   ========================================================================== */

.pc-header{text-align:center;max-width:780px;margin:0 auto 48px;}
.pc-header .section-desc{max-width:100%;margin:0 auto;color:var(--text-secondary);}

.pc-studio{
  display:grid;grid-template-columns:300px 1fr 280px;gap:0;
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  backdrop-filter:blur(6px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.55);
}

@keyframes pcShimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.pc-thumb{
  position:relative;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:repeating-linear-gradient(135deg, var(--card-dark), var(--card-dark) 10px, #262319 10px, #262319 20px);
}
.pc-thumb.is-loading{
  background:linear-gradient(110deg, #262319 8%, #3a352c 18%, #262319 33%);
  background-size:200% 100%;animation:pcShimmer 1.1s ease-in-out infinite;
}
.pc-thumb-badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:4px;background:var(--primary);color:#fff;}
.pc-thumb-badge.eco{background:#3d6b3f;}

/* ---------- Left rail ---------- */
.pc-rail-left{
  min-width:0;
  max-height:900px;overflow-y:auto;padding:26px 22px;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:26px;
}
.pc-rail-left::-webkit-scrollbar{width:6px;}
.pc-rail-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

.pc-block-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.pc-block-title .pc-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#fff;}

/* Product gallery — horizontal scroll cards */
.pc-gallery{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;}
.pc-gallery::-webkit-scrollbar{height:5px;}
.pc-gallery::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.pc-gallery-card{
  flex-shrink:0;width:100px;scroll-snap-align:start;cursor:pointer;
  border:1.5px solid transparent;border-radius:10px;padding:6px;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), border-color .25s ease, box-shadow .25s ease;
}
.pc-gallery-card:hover{transform:translateY(-3px);}
.pc-gallery-card.is-active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(166,61,46,0.18), 0 10px 24px -8px rgba(166,61,46,0.4);}
.pc-gallery-thumb{aspect-ratio:1/1;margin-bottom:8px;}
.pc-gallery-thumb .pc-thumb-badge{font-size:8px;}
.pc-gallery-name{font-size:11px;font-weight:700;color:#fff;text-align:center;line-height:1.3;}
.pc-gallery-moq{font-size:9.5px;color:var(--text-secondary);text-align:center;margin-top:2px;}

/* Color swatches */
.pc-color-row{display:flex;flex-wrap:wrap;gap:12px;}
.pc-color-wrap{position:relative;width:38px;height:38px;}
.pc-color{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, 0 3px 8px rgba(0,0,0,0.35);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.pc-color:hover{transform:scale(1.16);}
.pc-color-ring{
  position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--primary);
  opacity:0;transform:scale(0.7);transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.4);
  pointer-events:none;
}
.pc-color-wrap.is-active .pc-color-ring{opacity:1;transform:scale(1);}
.pc-color-wrap.is-active .pc-color{transform:scale(1.08);}

/* Spec cards (fabric / branding / packaging) */
.pc-card-list{display:flex;flex-direction:column;gap:8px;}
.pc-card{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;
  border:1.5px solid var(--border);background:rgba(255,255,255,0.03);cursor:pointer;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.pc-card:hover{border-color:rgba(166,61,46,0.4);transform:translateX(2px);}
.pc-card.is-active{border-color:var(--primary);background:rgba(166,61,46,0.1);box-shadow:0 6px 18px -8px rgba(166,61,46,0.45);}
.pc-card-thumb{width:52px;height:52px;}
.pc-card-body{flex:1;min-width:0;}
.pc-card-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px;}
.pc-card-specs{display:flex;flex-wrap:wrap;gap:4px 10px;}
.pc-card-spec{font-size:10px;color:var(--text-secondary);}
.pc-card-spec strong{color:#d8d2c4;font-weight:600;}
.pc-card-desc{font-size:11px;color:var(--text-secondary);line-height:1.4;}

/* ---------- Center workspace ---------- */
.pc-workspace{min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 20%, #2b2822 0%, #171512 78%);}

.pc-view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);}
.pc-view-group{display:flex;gap:4px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:9px;padding:4px;}
.pc-view-btn{background:none;border:none;padding:8px 15px;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:background .25s ease, color .25s ease;}
.pc-view-btn.is-active{background:var(--primary);color:#fff;}
.pc-zoom-group{display:flex;gap:6px;}
.pc-zoom-btn{width:34px;height:34px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease, transform .2s ease;}
.pc-zoom-btn:hover{border-color:var(--primary);transform:translateY(-1px);}
.pc-zoom-btn svg{width:15px;height:15px;}

.pc-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:560px;padding:20px;}
.pc-stage-shadow{position:absolute;bottom:8%;left:50%;width:46%;height:26px;background:radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);transform:translateX(-50%);filter:blur(2px);}
.pc-canvas-wrap{position:relative;transition:transform .45s cubic-bezier(.2,.9,.3,1);}
.pc-canvas-wrap.is-switching{opacity:0;transform:scale(0.94) rotateY(8deg);}

/* Hotspot markers */
.pc-hotspot{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:rgba(166,61,46,0.28);border:1.5px solid var(--primary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:5;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), background .2s ease;
}
.pc-hotspot::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(166,61,46,0.5);animation:pcHotspotPulse 2.2s ease-out infinite;}
.pc-hotspot:hover{transform:scale(1.18);background:rgba(166,61,46,0.5);}
.pc-hotspot-dot{width:6px;height:6px;border-radius:50%;background:#fff;}
@keyframes pcHotspotPulse{0%{transform:scale(0.8);opacity:.9;}100%{transform:scale(1.7);opacity:0;}}

.pc-hotspot-menu{
  position:absolute;z-index:20;background:rgba(24,22,19,0.96);border:1px solid var(--border);border-radius:10px;
  padding:8px;display:flex;flex-direction:column;gap:4px;min-width:150px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(6px) scale(0.96);pointer-events:none;transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.pc-hotspot-menu.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.pc-hotspot-menu-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);padding:4px 8px 2px;}
.pc-hotspot-menu button{
  display:flex;align-items:center;gap:8px;background:none;border:none;color:#fff;font-size:12.5px;font-weight:600;
  padding:8px;border-radius:6px;cursor:pointer;text-align:left;transition:background .18s ease;
}
.pc-hotspot-menu button:hover{background:rgba(166,61,46,0.18);}
.pc-hotspot-menu svg{width:14px;height:14px;flex-shrink:0;}

.pc-canvas-hint{padding:10px 22px;text-align:center;font-size:11px;color:rgba(255,255,255,0.35);border-top:1px solid var(--border);}

/* Layers strip inside workspace footer */
.pc-layers-bar{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-top:1px solid var(--border);}
.pc-layer-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:20px;padding:6px 8px 6px 12px;font-size:11.5px;color:#fff;transition:border-color .2s ease;}
.pc-layer-chip:hover{border-color:rgba(166,61,46,0.5);}
.pc-layer-chip-zone{color:var(--text-secondary);}
.pc-layer-chip-btn{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease, color .18s ease;}
.pc-layer-chip-btn:hover{background:var(--primary);color:#fff;}
.pc-layer-chip-btn svg{width:11px;height:11px;}
.pc-layer-chip-btn.is-locked{color:var(--primary);}
.pc-layers-empty{font-size:12px;color:var(--text-secondary);font-style:italic;padding:2px 0;}

/* Text editor (opens above layers bar when a text layer is selected) */
.pc-text-editor{display:flex;flex-direction:column;gap:10px;padding:14px 22px;border-top:1px solid var(--border);background:rgba(0,0,0,0.15);}
.pc-text-editor[hidden]{display:none;}
.pc-text-input{width:100%;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:13px;color:#fff;}
.pc-text-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.pc-text-row label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);}
.pc-text-select{background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:6px;padding:7px 8px;font-size:12px;color:#fff;}
.pc-text-range{width:90px;accent-color:var(--primary);}
.pc-text-color{width:30px;height:30px;border:none;border-radius:6px;background:none;cursor:pointer;padding:0;}
.pc-align-group{display:flex;gap:4px;}
.pc-align-btn{width:28px;height:28px;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease;}
.pc-align-btn.is-active{background:var(--primary);color:#fff;border-color:var(--primary);}
.pc-align-btn svg{width:14px;height:14px;}
.pc-curve-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;cursor:pointer;}

/* ---------- Right rail ---------- */
.pc-rail-right{min-width:0;padding:26px 22px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:18px;}
.pc-quote-hdr{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);}
.pc-quote-grid{display:flex;flex-direction:column;gap:2px;}
.pc-quote-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:12.5px;transition:background .2s ease;}
.pc-quote-row span:first-child{color:var(--text-secondary);}
.pc-quote-row span:last-child{color:#fff;font-weight:600;text-align:right;}
.pc-quote-price-row span:last-child{color:var(--primary);font-size:15px;font-family:'Barlow Condensed',sans-serif;}
.pc-quote-note{font-size:11px;color:var(--text-secondary);line-height:1.6;}
.pc-quote-cta{
  margin-top:auto;padding:15px;border-radius:10px;background:var(--primary);color:#fff;border:none;
  font-size:13.5px;font-weight:700;cursor:pointer;transition:background .2s ease, transform .2s ease;
}
.pc-quote-cta:hover{background:var(--hover);transform:translateY(-2px);}

/* ---------- Bottom toolbar ---------- */
.pc-toolbar{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--border);background:rgba(0,0,0,0.18);
}
.pc-tool{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
  border-radius:8px;padding:9px 15px;font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.pc-tool:hover{border-color:var(--primary);background:rgba(166,61,46,0.12);transform:translateY(-1px);}
.pc-tool:disabled{opacity:.35;cursor:not-allowed;transform:none;}
.pc-tool svg{width:15px;height:15px;}
.pc-tool.pc-tool-primary{background:var(--primary);border-color:var(--primary);}
.pc-tool.pc-tool-primary:hover{background:var(--hover);}

.pc-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:999;
  background:#201e1a;border:1px solid var(--border);border-left:3px solid var(--primary);
  padding:12px 20px;border-radius:8px;color:#fff;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.pc-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:1200px){
  .pc-studio{grid-template-columns:260px 1fr 240px;}
}
@media(max-width:1100px){
  .pc-studio{grid-template-columns:1fr;}
  .pc-rail-left{max-height:none;overflow:visible;border-right:none;border-bottom:1px solid var(--border);}
  .pc-rail-right{border-left:none;border-top:1px solid var(--border);}
  .pc-stage{min-height:420px;}
}
@media(max-width:600px){
  .pc-toolbar{gap:4px;}
  .pc-tool{padding:8px 11px;font-size:11.5px;}
  .pc-tool span{display:none;}
  .pc-view-toolbar{flex-wrap:wrap;row-gap:10px;padding:14px 16px;}
  .pc-view-btn{padding:6px 10px;font-size:11px;}
  .pc-zoom-btn{width:30px;height:30px;}
}