/* Clickey 3D configurator (clickey-3d.js). Colours and type come from site.css.
   The stage is as wide as the screen and has no border or frame: the model stands on the page
   itself. The options sit under it, in the page's text column (.wrap). Stage and options together fit one screen on a wide
   display; on a narrow one the stage stays pinned under the header while the options scroll, so the
   model is always in sight while it is being changed. */
.c3d{--c3d-panel:330px;--c3d-edge:max(20px,calc(50% - var(--wrap)/2 + 20px));margin-bottom:40px}
.c3d-stage{position:sticky;top:64px;z-index:2;height:42svh;min-height:230px;background:var(--krem)}
.c3d-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;opacity:0;transition:opacity .5s;-webkit-tap-highlight-color:transparent}
.c3d-stage canvas:active{cursor:grabbing}
.c3d-on canvas{opacity:1}
.c3d-note,.c3d-hint{margin:0;font-size:.8rem;font-weight:600;color:var(--muted)}
.c3d-note{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;pointer-events:none}
.c3d-on .c3d-note{display:none}
.c3d-arrange canvas{cursor:move}
.c3d-off canvas,.c3d-off .c3d-zoom{display:none}
.c3d-off{position:static;height:auto;min-height:0;padding:36px 0}
.c3d-off .c3d-note{position:static;translate:none}

.c3d-zoom{position:absolute;right:var(--c3d-edge);bottom:6px;display:flex;gap:6px}
.c3d-zoom button{width:40px;height:40px;border-radius:50%;border:2px solid var(--tinta);background:var(--krem);color:var(--tinta);font-size:1.15rem;font-weight:700;line-height:1}
.c3d-zoom button:active{background:var(--tinta);color:var(--krem)}

.c3d-panel{display:grid;gap:16px 32px;max-width:var(--wrap);margin:0 auto;padding:12px 20px 0}
.c3d-col,.c3d-pane{display:grid;gap:14px;align-content:start}
.c3d-pane[hidden]{display:none}
.c3d-row{display:grid;gap:6px}
.c3d-pick{grid-template-columns:4.6em 1fr;align-items:center}
.c3d-lab{font-size:.85rem;font-weight:700;color:var(--tinta)}
.c3d-step{font-size:1rem;font-weight:700;color:var(--tinta)}
.c3d-panel input{width:100%;height:46px;border-radius:999px;border:2px solid var(--tinta);background:transparent;color:var(--tinta);font:inherit;font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;padding:0 18px}
.c3d-panel input::placeholder{color:var(--muted);opacity:.7;letter-spacing:.04em;font-weight:500;text-transform:none}
.c3d-seg{display:flex;flex-wrap:wrap;gap:8px}
.c3d-seg button,.c3d-match{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--tinta);font-weight:700;font-size:.92rem;color:var(--tinta);transition:background .15s,color .15s}
.c3d-seg button[aria-pressed=true]{background:var(--tinta);color:var(--krem)}
.c3d-match{min-height:48px;padding:0 24px;background:var(--kuning);box-shadow:0 3px 0 var(--edge);justify-self:start}
.c3d-match:active{translate:0 2px;box-shadow:0 1px 0 var(--edge)}
.c3d-sw{display:flex;flex-wrap:wrap;gap:5px}
.c3d-sw button{width:27px;height:27px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px var(--line);transition:transform .12s}
.c3d-sw button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--line),0 0 0 2px var(--krem),0 0 0 4px var(--tinta);transform:scale(1.06)}
.c3d-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.c3d-acts .btn{flex:1 1 200px}

/* Order sheet: the design picture to send along, then on to WhatsApp. */
.c3d-order{width:min(92vw,440px);max-height:92svh;margin:auto;padding:20px;border:0;border-radius:var(--r);background:var(--krem);color:var(--tinta);box-shadow:0 30px 60px -20px #4C551D99;overflow:auto}
.c3d-order::backdrop{background:#4C551D80}
.c3d-order h3{margin:0 0 12px;font-size:1.15rem}
.c3d-order img{display:block;width:auto;max-width:100%;height:auto;max-height:40svh;margin:0 auto;aspect-ratio:4/5;border-radius:16px;box-shadow:inset 0 0 0 2px var(--line);border:2px solid var(--line)}
.c3d-order-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;padding:12px 16px;border-radius:16px;background:var(--hijau-pucat,#E4EAC6);font-size:.85rem;font-weight:700}
.c3d-order-price b{font-size:1.35rem}
.c3d-order-price small{flex:1 1 100%;font-size:.78rem;font-weight:600;color:var(--muted)}
.c3d-order-form{display:grid;gap:10px;margin-top:14px}
.c3d-order-form label{display:grid;gap:4px;font-size:.85rem;font-weight:700}
.c3d-order-form input,.c3d-order-form textarea{width:100%;border-radius:16px;border:2px solid var(--tinta);background:transparent;color:var(--tinta);font:inherit;font-size:1rem;font-weight:600;padding:10px 14px;resize:vertical}
.c3d-order-form input{height:46px;border-radius:999px;padding:0 18px}
.c3d-order-form ::placeholder{color:var(--muted);opacity:.7;font-weight:500}
.c3d-order-note{margin:12px 0;font-size:.9rem;font-weight:600;color:var(--muted)}
.c3d-order-acts{display:flex;flex-wrap:wrap;gap:8px}
.c3d-order-acts .btn{flex:1 1 100%;margin-bottom:4px}
.c3d-order-b{flex:1 1 auto;display:inline-grid;place-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--tinta);font:inherit;font-weight:700;font-size:.92rem;color:var(--tinta);background:none;text-decoration:none;cursor:pointer}
.c3d-order-b[hidden]{display:none}

/* Model only, no options (home page hero). Vertical swipes still scroll the page. */
.c3d-bare{margin:0 -20px}
.c3d-bare .c3d-stage{position:relative;top:auto;background:none;height:clamp(240px,40svh,440px)}
.c3d-bare .c3d-stage canvas{touch-action:pan-y}
.c3d-bare .c3d-panel,.c3d-bare .c3d-zoom,.c3d-bare .c3d-off{display:none}

@media (min-width:900px){
  /* One screen: what the header and the options leave is the stage's. */
  .c3d{margin-bottom:56px}
  .c3d-stage{position:relative;top:auto;background:none;height:clamp(250px,calc(100svh - 64px - var(--c3d-panel)),540px)}
  .c3d-bare{margin:0 min(0px,calc((var(--wrap) - 100vw)/2)) 0 -48px}
  .c3d-bare .c3d-stage{height:clamp(320px,52svh,520px)}
  .c3d-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
  .c3d-hint,.c3d-acts{grid-column:1/-1}
  .c3d-acts{justify-content:center}
  .c3d-acts .btn{flex:0 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .c3d-stage canvas,.c3d-seg button,.c3d-match,.c3d-sw button{transition:none}
}