/* Studio rancang 3D: scoped to #rancang-3d so it sits inside the editorial page without leaking styles. */
#rancang-3d{
  --c-night:#0b1430;--c-deep:#0f1a38;--c-gold:#d5b65f;--c-gold-2:#e2c87f;--c-ivory:#f7f5ef;
  --c-muted:#a3abbe;--c-line:rgba(247,245,239,.14);--c-r:14px;--c-ease:cubic-bezier(.22,1,.36,1);
  position:relative;background:radial-gradient(90% 70% at 25% 0%,#1d2c55 0%,var(--navy) 50%,var(--c-night) 100%);color:var(--c-ivory);overflow:hidden
}
#rancang-3d .eyebrow{color:var(--c-gold-2)}
#rancang-3d .section-heading h2{color:#fff}
#rancang-3d .section-heading h2 em{color:var(--c-gold-2)}
#rancang-3d .heading-aside{color:var(--c-muted)}
:where(#rancang-3d) :where(button){background:none;border:0;padding:0;margin:0;font:inherit;font-family:var(--sans);color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
:where(#rancang-3d) :where(input){font-family:var(--sans)}
#rancang-3d [hidden]{display:none!important}

.cfg-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);gap:20px;align-items:start}

/* Stage */
.atelier-stage{position:sticky;top:112px;height:min(76vh,700px);min-height:520px;border-radius:var(--c-r);overflow:hidden;background:radial-gradient(60% 55% at 50% 38%,#2a3f72 0%,#16244b 55%,#0a1330 100%);border:1px solid var(--c-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 70px -40px rgba(0,0,0,.65)}
.atelier-stage:after{content:'';position:absolute;left:12%;right:12%;bottom:11%;height:1px;background:linear-gradient(90deg,transparent,rgba(213,182,95,.35),transparent);pointer-events:none}
.atelier-canvas{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.is-dragging .atelier-canvas{cursor:grabbing}
.atelier-canvas canvas{width:100%!important;height:100%!important}
.stage-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;font-size:13px;color:var(--c-muted)}
.spinner{width:30px;height:30px;border-radius:50%;border:2px solid rgba(247,245,239,.14);border-top-color:var(--c-gold);animation:cfg-spin 1s linear infinite}
@keyframes cfg-spin{to{transform:rotate(360deg)}}
.stage-top,.stage-bottom{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:3;pointer-events:none}
.stage-top>*,.stage-bottom>*{pointer-events:auto}
.stage-top{top:16px}.stage-bottom{bottom:16px}
.stage-code{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--c-gold-2);background:rgba(11,20,48,.6);border:1px solid var(--c-line);padding:8px 12px;border-radius:8px;backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.cfg-seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:rgba(11,20,48,.6);border:1px solid var(--c-line);backdrop-filter:blur(10px)}
.cfg-seg button{padding:7px 14px;border-radius:6px;font-size:12px;font-weight:700;color:var(--c-muted);transition:background .25s,color .25s}
.cfg-seg button[aria-pressed=true]{background:var(--c-gold);color:var(--c-night)}
.views{display:flex;gap:2px;padding:3px;border-radius:9px;background:rgba(11,20,48,.6);border:1px solid var(--c-line);backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.views button{padding:7px 13px;border-radius:6px;font-size:12px;font-weight:600;color:var(--c-muted);white-space:nowrap;transition:background .25s,color .25s}
.views button[aria-pressed=true],.views button:hover{background:rgba(247,245,239,.12);color:#fff}
.icon-btn{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:rgba(11,20,48,.6);border:1px solid var(--c-line);backdrop-filter:blur(10px);flex:none;transition:background .25s}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:var(--c-ivory);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--c-gold)}.icon-btn:hover svg{stroke:var(--c-night)}
.stage-hint{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-muted);pointer-events:none;z-index:2;transition:opacity .4s;white-space:nowrap;background:rgba(11,20,48,.7);padding:5px 12px;border-radius:999px}
.stage-hint svg{width:16px;height:16px;fill:none;stroke:var(--c-gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.is-dragging .stage-hint{opacity:0}
.atelier-hotspots{position:absolute;inset:0;pointer-events:none;z-index:2}
.atelier-stage[data-mode=pola] .atelier-hotspots,.atelier-stage[data-mode=pola] .atelier-canvas,.atelier-stage[data-mode=pola] .stage-hint,.atelier-stage[data-mode=pola] .views{visibility:hidden}
.atelier-hotspot{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:8px;margin:-10px 0 0 -10px;transition:opacity .3s}
.atelier-hotspot.is-hidden{opacity:0;pointer-events:none;visibility:hidden}
.hs-dot{width:20px;height:20px;border-radius:50%;background:rgba(11,20,48,.45);border:1.5px solid var(--c-gold-2);position:relative;flex:none;transition:transform .3s var(--c-ease)}
.hs-dot:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--c-gold-2)}
.atelier-hotspot:hover .hs-dot,.atelier-hotspot:focus-visible .hs-dot{transform:scale(1.15)}
.hs-label{font-size:12px;font-weight:700;background:rgba(11,20,48,.88);color:#fff;padding:5px 10px;border-radius:6px;opacity:0;transform:translateX(-4px);transition:all .25s var(--c-ease);white-space:nowrap;border:1px solid var(--c-line)}
.atelier-hotspot:hover .hs-label,.atelier-hotspot:focus-visible .hs-label{opacity:1;transform:none}
.atelier-pattern{position:absolute;inset:62px 16px 16px;border-radius:10px;background:#0d1838;border:1px solid var(--c-line);overflow:hidden;z-index:1;animation:cfg-in .45s var(--c-ease)}
@keyframes cfg-in{from{opacity:0;transform:translateY(6px)}}
.atelier-pattern svg{width:100%;height:100%}
.mat-line{stroke:rgba(247,245,239,.07);stroke-width:1}
.piece-shape{fill:var(--cloth);fill-opacity:.85;stroke:var(--c-gold-2);stroke-width:2}
.piece .grain{stroke:rgba(247,245,239,.7);stroke-width:1.5;stroke-dasharray:10 6;fill:none}
.piece .fold{stroke:var(--c-gold-2);stroke-width:3;stroke-dasharray:3 6;fill:none}
.piece .notch,.piece .tick{stroke:var(--c-gold-2);stroke-width:2}
.piece .rib{stroke:rgba(247,245,239,.35);stroke-width:1.2}
.piece .selvedge{stroke:rgba(247,245,239,.4);stroke-width:2;stroke-dasharray:2 5;fill:none}
.piece .zip{stroke:#c9a24f;stroke-width:6;stroke-dasharray:2 3}
.piece-name{fill:#fff;font:600 15px var(--sans)}
.piece-count{fill:var(--c-gold-2);font:700 11px var(--sans);letter-spacing:.12em}
.tick-label{fill:var(--c-muted);font:600 11px var(--sans)}
.mat-note{fill:var(--c-muted);font:500 12px var(--sans)}
.no-3d [data-mode="3d"]{display:none}

/* Panel */
.cfg-panel{background:rgba(247,245,239,.045);border:1px solid var(--c-line);border-radius:var(--c-r);padding:12px;backdrop-filter:blur(14px)}
.cfg-tabs{display:flex;border-bottom:1px solid var(--c-line);overflow-x:auto;scrollbar-width:none}
.cfg-tabs::-webkit-scrollbar{display:none}
.cfg-tabs button{flex:1;padding:12px 8px 13px;font-size:13px;font-weight:700;color:var(--c-muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s}
.cfg-tabs button:hover{color:#fff}
.cfg-tabs button[aria-selected=true]{color:#fff;border-bottom-color:var(--c-gold)}
.tabpanel{padding:20px 6px 6px;min-height:240px;animation:cfg-in .35s var(--c-ease)}
.product-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.product-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px 13px;border-radius:10px;border:1px solid var(--c-line);background:rgba(247,245,239,.025);font-size:13px;font-weight:600;color:var(--c-ivory);transition:border-color .25s,background .25s,color .25s}
.product-tile svg{width:46px;height:46px;color:var(--c-muted);transition:color .25s}
.product-tile:hover{border-color:rgba(226,200,127,.5)}
.product-tile[aria-pressed=true]{background:var(--c-ivory);color:var(--c-night);border-color:var(--c-ivory)}
.product-tile[aria-pressed=true] svg{color:var(--navy)}
.cut{display:grid;gap:18px}
.cut-group{border:0;margin:0;padding:0;border-radius:10px}
.cut-group legend{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin-bottom:10px;padding:0}
.cut-options{display:flex;gap:8px;flex-wrap:wrap}
.cut-option{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;padding:10px 6px 9px;border-radius:10px;border:1px solid var(--c-line);font-size:12px;font-weight:600;color:var(--c-ivory);background:rgba(247,245,239,.025);transition:border-color .25s,background .25s}
.cut-option svg{width:36px;height:36px;color:var(--c-muted);transition:color .25s}
.cut-option:hover{border-color:rgba(226,200,127,.5)}
.cut-option[aria-pressed=true]{border-color:var(--c-gold);background:rgba(213,182,95,.12);box-shadow:inset 0 0 0 1px var(--c-gold)}
.cut-option[aria-pressed=true] svg{color:var(--c-gold-2)}
.cut-group.flash{animation:cfg-flash 1.3s var(--c-ease)}
@keyframes cfg-flash{25%{background:rgba(213,182,95,.16);box-shadow:0 0 0 8px rgba(213,182,95,.16)}}
.atelier-empty{color:var(--c-muted);font-size:14px;padding:16px 4px}
.cfg-label{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin:18px 0 10px}
.cfg-label:first-child{margin-top:0}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--c-muted)}
.swatch-dot{width:38px;height:38px;border-radius:50%;background:var(--swatch);border:2px solid rgba(247,245,239,.16);box-shadow:inset 0 -6px 12px rgba(0,0,0,.25);transition:box-shadow .25s}
.swatch[aria-pressed=true] .swatch-dot{box-shadow:0 0 0 3px var(--c-night),0 0 0 5px var(--c-gold),inset 0 -6px 12px rgba(0,0,0,.25)}
.swatch[aria-pressed=true]{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 14px;border-radius:8px;border:1px solid var(--c-line);font-size:13px;font-weight:600;color:var(--c-ivory);transition:border-color .25s,background .25s,color .25s}
.chip:hover{border-color:rgba(226,200,127,.5)}
.chip[aria-pressed=true]{background:var(--c-gold);border-color:var(--c-gold);color:var(--c-night)}
.cfg-input{width:100%;min-height:48px;padding:11px 14px;border-radius:9px;border:1px solid var(--c-line);background:rgba(11,20,48,.5);color:#fff;font-size:16px;font-family:var(--sans)}
.cfg-input::placeholder{color:rgba(163,171,190,.7)}
.cfg-input:focus{outline:none;border-color:var(--c-gold)}
.cfg-qty{display:flex;gap:10px;align-items:center}
.cfg-qty>span{font-weight:700;color:var(--c-gold-2);min-width:52px}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.size-cell{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--c-muted);text-align:center}
.size-cell input{width:100%;min-height:44px;border-radius:9px;border:1px solid var(--c-line);background:rgba(11,20,48,.5);color:#fff;text-align:center;font-size:16px;font-family:var(--sans)}
.size-cell input:focus{outline:none;border-color:var(--c-gold)}
.spec{margin-top:12px;padding:16px;border-radius:10px;background:rgba(11,20,48,.55);border:1px solid var(--c-line)}
.spec dl{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0 0 14px}
.spec dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--c-line);font-size:13px}
.spec dt{color:var(--c-muted)}.spec dd{margin:0;font-weight:600;text-align:right}
.spec-actions{display:flex;gap:8px;flex-wrap:wrap}
.cfg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:9px;font-size:14px;font-weight:700;transition:background .25s,transform .25s}
.cfg-btn-gold{background:var(--c-gold);color:var(--c-night)}
.cfg-btn-gold:hover{background:#e2c578;transform:translateY(-1px)}
.cfg-btn-line{border:1px solid var(--c-line);color:var(--c-ivory)}
.cfg-btn-line:hover{background:rgba(247,245,239,.1)}
.atelier-status{min-height:22px;margin:10px 0 0;font-size:13px;color:var(--c-gold-2);padding-inline:4px}
.cfg-note{margin-top:26px;font-size:12px;color:var(--c-muted)}
#rancang-3d :focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}

@media (max-width:1100px){
  .cfg-grid{grid-template-columns:1fr}
  .atelier-stage{position:relative;top:0;height:min(68vh,600px)}
}
@media (max-width:640px){
  .atelier-stage{height:60vh;min-height:420px}
  .stage-top,.stage-bottom{left:10px;right:10px}
  .stage-top{top:10px}.stage-bottom{bottom:10px}
  .stage-code{font-size:11px;padding:7px 9px;letter-spacing:.08em}
  .stage-hint{bottom:60px;font-size:11px}
  .views button{padding:7px 10px}
  .cfg-panel{padding:8px}
  .cfg-tabs button{font-size:12px;padding:11px 6px}
  .product-tiles{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .sizes{grid-template-columns:repeat(3,1fr)}
  .spec dl{gap:0 14px}
  .spec dl div{flex-direction:column;gap:0;padding:6px 0}
  .spec dd{text-align:left}
  .hs-dot{width:18px;height:18px}.hs-dot:after{inset:4px}
}
@media (prefers-reduced-motion:reduce){#rancang-3d *{animation:none!important;transition:none!important}}
@media print{#rancang-3d{display:none}}