/* ElWood3D Nameplate — scoped so no theme rule leaks in or out. */
.ew3d{
  /* Light skin, to sit inside a white shop page without looking bolted on.
     The accent comes from the plugin settings, so it can match the theme
     exactly instead of being guessed here. */
  /* Colours are inherited from the block theme's own palette, so recolouring
     the site in the site editor recolours the configurator too. The fallbacks
     are the values currently used by Organic STAX + the shop's custom CSS. */
  --ew-accent:var(--wp--preset--color--accent-primary, #38BDA6);
  --ew-accent-soft:var(--wp--preset--color--accent-secondary, #D9E9E7);
  --ew-accent-ink:var(--wp--preset--color--white, #FFFFFF);

  --ew-panel:var(--wp--preset--color--white, #FFFFFF);
  --ew-panel-2:var(--wp--preset--color--bg-light, #F5FAFA);
  --ew-line:var(--wp--preset--color--light-gray, #DDDDDD);
  --ew-ink:var(--wp--preset--color--black, #000000);
  --ew-dim:var(--wp--preset--color--medium-gray, #656D6F);
  --ew-faint:var(--wp--preset--color--dark-gray, #383F40);
  --ew-warn:var(--wp--preset--color--luminous-vivid-amber, #B7791F);
  --ew-error:var(--wp--preset--color--vivid-red, #CF2E2E);
  --ew-ok:var(--wp--preset--color--vivid-green-cyan, #18B07A);
  --ew-stage-1:#FAFBFC; --ew-stage-2:#E9EDF2;

  /* Geometry copied from the theme: 3 px on controls, 12 px on cards,
     the same soft shadow preset, and the theme's own button proportions. */
  --ew-r:3px;
  --ew-r-card:12px;
  --ew-shadow:var(--wp--preset--shadow--soft, 6px 6px 18px 0 rgba(0,0,0,.1));
  --ew-focus:0 0 0 3px rgba(56,189,166,.2);
  --ew-lift:0 6px 12px rgba(0,0,0,.24);

  /* Typography follows the theme so nothing looks pasted in. */
  --ew-fs:var(--wp--preset--font-size--normal, 15px);
  --ew-fs-sm:var(--wp--preset--font-size--small, 13px);
  --ew-fs-xs:var(--wp--preset--font-size--extra-small, 12px);

  --ew-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ew-sans:inherit;

  display:block; width:100%;
  color:var(--ew-ink); font-family:var(--ew-sans); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* Dark skin stays available for shops with a dark theme. */
.ew3d--dark{
  --ew-panel:#171A1F; --ew-panel-2:#1F232B; --ew-line:#2C323C;
  --ew-ink:#E7EAF0; --ew-dim:#8B94A3; --ew-faint:#5C6572;
  --ew-warn:#F2C14E; --ew-error:#F2645A; --ew-ok:#4CC38A;
  --ew-stage-1:#F2F4F7; --ew-stage-2:#DCE1E9;
  --ew-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Osobne shortcode'y — każdy wypełnia swoją kolumnę buildera. */
.ew3d--options,.ew3d--visual{height:var(--ew-h,760px)}
.ew3d--options>.ew3d__panel,.ew3d--visual>.ew3d__stage{height:100%}

/* Wariant łączony: menu po lewej, podgląd po prawej. */
.ew3d--combined{display:grid;grid-template-columns:400px minmax(0,1fr);gap:16px;height:var(--ew-h,820px)}
.ew3d--full{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-inline:clamp(12px,4vw,48px);
}
.ew3d *,.ew3d *::before,.ew3d *::after{box-sizing:border-box}
/* Author styles beat the browser's [hidden]{display:none}, so any class of
   ours that sets `display` would silently defeat the attribute. Restore it. */
.ew3d [hidden]{display:none!important}
.ew3d p,.ew3d ul,.ew3d ol,.ew3d li{margin:0;padding:0;list-style:none}
.ew3d li::marker{content:""}
/* Organic STAX lifts every button on hover; ours opt in deliberately above. */
.ew3d button{top:0;box-shadow:none}

/* panel ------------------------------------------------------------- */
.ew3d__panel{background:var(--ew-panel);border:1px solid var(--ew-line);border-radius:var(--ew-r-card);box-shadow:var(--ew-shadow);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ew-line) transparent;min-height:0}
.ew3d__panel::-webkit-scrollbar{width:8px}
.ew3d__panel::-webkit-scrollbar-thumb{background:var(--ew-line);border-radius:8px}
.ew3d__panel::-webkit-scrollbar-track{background:transparent}
.ew3d__panel{container-type:inline-size}
.ew3d__body{display:grid;grid-template-columns:1fr}
@container (min-width:620px){
  .ew3d__body{grid-template-columns:1fr 1fr}
  .ew3d__body>.ew3d__sec:nth-child(odd){border-right:1px solid var(--ew-line)}
  .ew3d__body>.ew3d__sec:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
}
@container (min-width:1000px){
  .ew3d__body{grid-template-columns:repeat(3,1fr)}
  .ew3d__body>.ew3d__sec{border-right:1px solid var(--ew-line)}
  .ew3d__body>.ew3d__sec:last-child{border-right:0}
}
.ew3d__brand{padding:16px 18px 12px;border-bottom:1px solid var(--ew-line);
  display:flex;align-items:baseline;gap:8px}
.ew3d__brand b{font-size:14px;letter-spacing:.02em;color:var(--ew-ink)}
.ew3d__brand span{font:500 10px/1 var(--ew-mono);color:var(--ew-faint);
  letter-spacing:.14em;text-transform:uppercase}
.ew3d__sec{padding:16px 18px;border-bottom:1px solid var(--ew-line)}
.ew3d__sec-head{font:600 10px/1 var(--ew-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ew-dim);margin-bottom:12px}
.ew3d__f{display:block;margin-bottom:10px}
.ew3d__lab{display:block;font-size:11px;color:var(--ew-dim);margin-bottom:5px}

.ew3d input[type=text],.ew3d select{width:100%;background:var(--ew-panel-2);color:var(--ew-ink);
  border:1px solid var(--ew-line);border-radius:var(--ew-r);padding:10px 12px;
  font-family:inherit;font-size:var(--ew-fs);min-height:44px;height:auto;margin:0;box-shadow:none;max-width:none}
.ew3d input[type=text]:focus,.ew3d select:focus{outline:none;
  border-color:var(--ew-accent);box-shadow:var(--ew-focus)}
.ew3d select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8B94A3 50%),linear-gradient(135deg,#8B94A3 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}

.ew3d__row{display:grid;grid-template-columns:64px 1fr 68px;align-items:center;gap:9px;margin-bottom:9px}
.ew3d__row .ew3d__k{font-size:11px;color:var(--ew-dim)}
.ew3d__v{display:flex;align-items:center;gap:3px;background:var(--ew-panel-2);
  border:1px solid var(--ew-line);border-radius:8px;padding:5px 8px;min-height:38px}
.ew3d__v input{width:100%;background:none;border:0;color:var(--ew-ink);
  font:500 12px var(--ew-mono);text-align:right;padding:0;height:auto;box-shadow:none}
.ew3d__v input:focus{outline:none;box-shadow:none}
.ew3d__v span{font:11px var(--ew-mono);color:var(--ew-faint)}
.ew3d input[type=range]{width:100%;accent-color:var(--ew-accent);height:18px;padding:0;margin:0}

.ew3d details summary{cursor:pointer;font:600 10px/1 var(--ew-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ew-dim);padding:8px 0;list-style:none}
.ew3d details summary::-webkit-details-marker{display:none}
.ew3d details summary::before{content:"+ ";color:var(--ew-accent)}
.ew3d details[open] summary::before{content:"– "}

/* printability rail -------------------------------------------------- */

.ew3d__rail{margin-top:auto;position:sticky;bottom:0;z-index:2;
  border-top:1px solid var(--ew-line);padding:14px 18px 18px;
  background:var(--ew-panel);box-shadow:0 -8px 16px -12px rgba(16,24,40,.25)}
.ew3d__rail-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ew3d__dot{width:8px;height:8px;border-radius:50%;background:var(--ew-faint);flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.ew3d__dot.is-ok{background:var(--ew-ok)}
.ew3d__dot.is-warn{background:var(--ew-warn)}
.ew3d__dot.is-error{background:var(--ew-error)}
.ew3d__rail-top b{font-size:12px;font-weight:600}
.ew3d__issues{list-style:none;display:grid;gap:6px;margin:0 0 12px!important}
.ew3d__issues li{font-size:11.5px;line-height:1.45;color:var(--ew-dim);
  padding-left:12px;border-left:2px solid var(--ew-line);list-style:none}
.ew3d__issues li.is-warn{border-color:var(--ew-warn)}
.ew3d__issues li.is-error{border-color:var(--ew-error);color:var(--ew-ink)}
.ew3d__stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:12px}
.ew3d__stat{display:flex;justify-content:space-between;font:11px var(--ew-mono);color:var(--ew-faint)}
.ew3d__stat b{color:var(--ew-ink);font-weight:500}
.ew3d__price{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.ew3d__price em{font-style:normal;font-size:11px;color:var(--ew-dim)}
.ew3d__price b{font:600 22px/1 var(--ew-sans);letter-spacing:-.02em}

/* Same proportions as .wp-element-button in the theme. */
.ew3d__btn{position:relative;top:0;display:block;width:100%;border:0;
  border-radius:var(--ew-r);padding:12px 24px;
  font-family:inherit;font-size:var(--ew-fs-sm);font-weight:500;letter-spacing:1px;
  text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--ew-accent);color:var(--ew-accent-ink);
  transition:all .25s ease-in-out}
.ew3d__btn:hover:not(:disabled){top:-2px;box-shadow:var(--ew-lift);color:var(--ew-accent-ink)}
.ew3d__btn:active:not(:disabled){top:0;box-shadow:inset 0 2px 2px rgba(0,0,0,.24)}
.ew3d__btn:disabled{opacity:.4;cursor:not-allowed}
.ew3d__btn--ghost{background:var(--ew-panel-2);color:var(--ew-ink);border:1px solid var(--ew-line)}
.ew3d__btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
/* Stack the actions with real breathing room — they were touching. */
.ew3d__rail .ew3d__btn + .ew3d__btn{margin-top:10px}
.ew3d__rail .ew3d__why + .ew3d__btn{margin-top:10px}

/* stage -------------------------------------------------------------- */
.ew3d__stage{position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--ew-line);border-radius:var(--ew-r-card);box-shadow:var(--ew-shadow);
  background:radial-gradient(120% 100% at 50% 0%,var(--ew-stage-1),var(--ew-stage-2))}
.ew3d__stage canvas{display:block;width:100%;height:100%;touch-action:none}
.ew3d__hud{position:absolute;left:16px;top:14px;font:11px var(--ew-mono);color:#5C6572;
  letter-spacing:.04em;pointer-events:none}
.ew3d__busy{position:absolute;right:16px;top:14px;font:11px var(--ew-mono);color:#5C6572;
  opacity:0;transition:opacity .2s}
.ew3d__busy.is-on{opacity:1}
.ew3d__editor{position:absolute;left:0;right:0;bottom:16px;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none}
.ew3d__chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:76%;pointer-events:auto}
.ew3d__chip{min-width:32px;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--ew-line);
  background:#fff;color:#2B303A;box-shadow:var(--ew-shadow);font:600 12px var(--ew-sans);cursor:pointer}
.ew3d__chip.is-active{background:var(--ew-accent);border-color:var(--ew-accent);color:var(--ew-accent-ink)}
.ew3d__pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);
  gap:4px;pointer-events:auto}
.ew3d__pad button{border:1px solid var(--ew-line);background:#fff;border-radius:8px;cursor:pointer;
  color:#2B303A;font-size:12px;padding:0}
.ew3d__pad button:active{background:var(--ew-accent);color:var(--ew-accent-ink)}
.ew3d__pad .is-up{grid-area:1/2}
.ew3d__pad .is-reset{grid-area:1/3}
.ew3d__pad .is-left{grid-area:2/1}
.ew3d__pad .is-down{grid-area:2/2}
.ew3d__pad .is-right{grid-area:2/3}
.ew3d__pad .is-spacer{grid-area:1/1;visibility:hidden}
.ew3d__fatal{position:absolute;inset:0;display:none;place-items:center;padding:32px;
  background:rgba(255,255,255,.95);color:var(--ew-ink);text-align:center;font-size:13px;line-height:1.6}
.ew3d__fatal.is-on{display:grid}

@media (max-width:1100px){
  .ew3d--combined{grid-template-columns:340px minmax(0,1fr)}
}
/* Narrow phones: the fixed 64px label column squeezed words like "wymiary"
   into two lines and pushed the price onto its own row. */
@media (max-width:520px){
  .ew3d__row{grid-template-columns:1fr;gap:4px}
  .ew3d__row .ew3d__k{font-size:11.5px}
  .ew3d__row .ew3d__v{justify-self:start;min-width:96px}
  .ew3d__stats{grid-template-columns:1fr}
  .ew3d__stat{font-size:11.5px}
  .ew3d__stat span{white-space:nowrap}
  .ew3d__price{flex-wrap:nowrap;gap:10px}
  .ew3d__price em{white-space:nowrap}
  .ew3d__price b{white-space:nowrap;font-size:20px}
  .ew3d__sec,.ew3d__rail{padding-left:14px;padding-right:14px}
}
@media (max-width:860px){
  .ew3d--combined{grid-template-columns:1fr;grid-template-rows:46vh minmax(0,1fr);
        height:auto;gap:12px;padding-inline:clamp(8px,3vw,16px)}
  .ew3d--combined>.ew3d__stage{order:-1}
  .ew3d--options{height:auto;max-height:none}
  .ew3d--visual{height:56vh}
  .ew3d__chips{max-width:92%}
}
@media (prefers-reduced-motion:reduce){.ew3d *{transition:none!important;animation:none!important}}

/* --- decorations ---------------------------------------------------- */
.ew3d__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.ew3d__decor{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;
  background:var(--ew-panel-2);border:1px solid var(--ew-line);border-radius:var(--ew-r);cursor:pointer;
  color:var(--ew-dim);transition:border-color .15s,color .15s}
.ew3d__decor:hover{border-color:var(--ew-accent);color:var(--ew-ink);background:var(--ew-accent-soft)}
.ew3d__decor img{width:44px;height:44px;object-fit:contain;border-radius:6px;
  background:#fff}
.ew3d__decor-ph{width:44px;height:44px;display:grid;place-items:center;font-size:20px;
  color:var(--ew-faint);background:var(--ew-panel-2);border-radius:6px}
.ew3d__decor-name{font-size:9.5px;line-height:1.1;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ew3d__empty{font-size:11.5px;color:var(--ew-faint);line-height:1.5;margin:0}

.ew3d__decor-editor{margin-top:12px;padding:14px;background:var(--ew-panel-2);
  border:1px solid var(--ew-line);border-radius:var(--ew-r-card)}
.ew3d__decor-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ew3d__decor-editor-head b{font-size:13px}
.ew3d__decor-del{border:1px solid var(--ew-error);background:transparent;color:var(--ew-error);
  border-radius:8px;padding:6px 12px;font:600 11px var(--ew-sans);cursor:pointer}
.ew3d__decor-del:hover{background:var(--ew-error);color:#fff}
.ew3d__f--inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ew3d__f--inline .ew3d__lab{margin:0}
.ew3d input[type=color]{width:52px;height:30px;padding:2px;border:1px solid var(--ew-line);
  border-radius:7px;background:var(--ew-panel);cursor:pointer}
.ew3d__decor-hint{font-size:10.5px;color:var(--ew-faint);line-height:1.4;margin:6px 0 0}

.ew3d__chip--decor{background:#FFF4E8;border-color:#E8C9A0;color:#8A5A22}
.ew3d__chip--decor.is-active{background:var(--ew-accent);border-color:var(--ew-accent);color:#fff}

.ew3d__pad-extra{display:flex;gap:4px;pointer-events:auto}
.ew3d__pad-extra button{width:34px;height:30px;border:1px solid var(--ew-line);background:#fff;
  border-radius:8px;cursor:pointer;color:#2B303A;font-size:14px;padding:0}
.ew3d__pad-extra button:active{background:var(--ew-accent);color:var(--ew-accent-ink)}
.ew3d__issues li.is-info{border-color:var(--ew-accent);color:var(--ew-dim)}
.ew3d__testmode{font-size:11.5px;line-height:1.4;color:var(--ew-warn);margin:0 0 8px;
  padding:7px 9px;border:1px solid var(--ew-warn);border-radius:8px;
  background:rgba(242,193,78,.08)}
.ew3d__why{font-size:11px;line-height:1.45;color:var(--ew-dim);margin:8px 0 0;text-align:center}

/* --- filament swatches ---------------------------------------------- */
.ew3d__swatches{display:flex;flex-wrap:wrap;gap:6px}
.ew3d__sw{width:28px;height:28px;border-radius:8px;border:1px solid var(--ew-line);
  cursor:pointer;padding:0;position:relative;transition:transform .12s}
.ew3d__sw:hover{transform:scale(1.08)}
.ew3d__sw.is-active{border-color:var(--ew-accent);
  box-shadow:0 0 0 2px var(--ew-panel),0 0 0 4px var(--ew-accent),var(--ew-shadow)}
.ew3d__sw.is-active::after{content:"";position:absolute;inset:0;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.85);mix-blend-mode:difference}
.ew3d__lab b{font-weight:600;color:var(--ew-ink)}

/* --- view cube ------------------------------------------------------- */
.ew3d__gizmo{position:absolute;right:14px;top:14px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:4px;pointer-events:auto;z-index:3}
.ew3d__gizmo button{min-width:52px;padding:6px 9px;border-radius:8px;
  border:1px solid var(--ew-line);background:rgba(255,255,255,.92);color:#2B303A;
  font:600 10.5px var(--ew-sans);cursor:pointer;backdrop-filter:blur(4px);
  box-shadow:var(--ew-shadow);transition:background .12s,color .12s}
.ew3d__gizmo button:hover{background:#fff}
.ew3d__gizmo button.is-active{background:var(--ew-accent);border-color:var(--ew-accent);
  color:var(--ew-accent-ink)}
.ew3d__gizmo button:hover{background:var(--ew-accent-soft)}
.ew3d__axes{position:absolute;right:14px;bottom:14px;pointer-events:none;opacity:.85;z-index:3}
@media (max-width:520px){
  .ew3d__gizmo{right:8px;top:8px;gap:3px}
  .ew3d__gizmo button{min-width:44px;padding:4px 6px;font-size:9.5px}
}

/* --- unfinished-design notice --------------------------------------- */
.ew3d__draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px 14px 0;padding:10px 12px;border-radius:var(--ew-r);
  border:1px solid var(--ew-accent);background:var(--ew-accent-soft);
  font-size:var(--ew-fs-sm);line-height:1.4;color:var(--ew-ink)}
.ew3d__draft-btns{display:flex;gap:6px;margin-left:auto}
.ew3d__draft button{border:1px solid var(--ew-accent);background:var(--ew-panel);
  color:var(--ew-ink);border-radius:var(--ew-r);padding:5px 10px;cursor:pointer;
  font:600 var(--ew-fs-xs)/1.2 inherit}
.ew3d__draft button[data-ew=draft-restore]{background:var(--ew-accent);color:var(--ew-accent-ink)}
.ew3d__draft button:hover{filter:brightness(1.06)}