html,
body.crystafy-designer-page {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f6f3ef;
}

body.crystafy-designer-page #wpadminbar {
  display: none;
}

html:has(body.crystafy-designer-page) {
  margin-top: 0 !important;
}

.crystafy-designer-page-main,
.crystafy-designer-root,
#diy3d-root {
  width: 100%;
  height: calc(100dvh - var(--cf-global-header-h, 76px));
  min-height: 0;
}

.diy3d-bootloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
}

.diy3d-bootloader-spin {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(47, 44, 48, 0.12);
  border-top-color: rgba(47, 44, 48, 0.5);
  border-radius: 50%;
  animation: crystafy-bootspin 0.8s linear infinite;
}

.diy3d-bootloader-word {
  padding-left: 0.42em;
  color: #a6a0a4;
  font: 600 12px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.42em;
}

@keyframes crystafy-bootspin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1023px) {
  .crystafy-designer-page-main,
  .crystafy-designer-root,
  #diy3d-root {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diy3d-bootloader-spin { animation-duration: 1.6s; }
}
body.crystafy-designer-page .diy3d-app{height:100%;min-height:0}
body.crystafy-designer-page .diy3d-topbar{flex-shrink:0}
body.crystafy-designer-page .diy3d-sidepanel{min-height:0;overflow-y:auto}

/* Shared WooCommerce controls, with a desktop library beside the canvas. */
.crystafy-studio { --cfm-ink:#302c30; --cfm-muted:#787075; --cfm-accent:#775c70; --cfm-line:#e9e3e6; }
.crystafy-studio .cfm-usage-guide { pointer-events:auto; margin-left:5px; padding:4px 7px; border:1px solid #ddd3da; border-radius:4px; background:#fff; color:#775c70; cursor:pointer; font-size:11px; }
.crystafy-studio.cfm-preview-open { position:fixed; inset:0; height:100dvh!important; z-index:10000; }
.crystafy-studio.cfm-preview-open .cfm-library { display:none; }
.crystafy-studio.cfm-preview-open .diy3d-stage-wrap { flex:1 1 auto; }
.crystafy-studio :is(button,input,select):focus-visible {outline:2px solid #775c70;outline-offset:2px}
@media(min-width:768px){
 .crystafy-studio .diy3d-main {flex-direction:row}
 .crystafy-studio .cfm-library {order:0;flex:0 0 clamp(330px,32vw,460px);height:100%;min-height:0;max-height:none;border-top:0;border-right:1px solid var(--cfm-line);padding:0}
 .crystafy-studio .cfm-library-heading,.crystafy-studio .cfm-results,.crystafy-studio .diy3d-sidepanel {display:none}
 .crystafy-studio .diy3d-stage-wrap {order:1;flex:1;min-height:0}
 .crystafy-studio .diy3d-mobilechips,.crystafy-studio .diy3d-topbar-actions {display:flex}
 .crystafy-studio .diy3d-fitchip {display:flex;align-items:center;pointer-events:auto;gap:5px;white-space:normal}
 .crystafy-studio .cfm-picker-row {padding:12px 8px 8px;border-bottom:1px solid var(--cfm-line)}
 .crystafy-studio .cfm-families {margin:0;gap:2px}
 .crystafy-studio .cfm-families button {font-size:12px;gap:5px;padding:0 2px 8px}
 .crystafy-studio .cfm-category-image,.crystafy-studio .cfm-category-image img,.crystafy-studio .cfm-category-image svg {width:30px;height:30px}
 .crystafy-studio .cfm-tools {padding:8px 2px 0;justify-content:flex-end}
 .crystafy-studio .cfm-filter-toggle {font-size:12px;height:34px}
 .crystafy-studio .cfm-products {flex:1;padding:10px;gap:8px}
 .crystafy-studio .cfm-product-name {font-size:12px;min-height:30px}
 .crystafy-studio .cfm-product-meta {font-size:11px}
 .crystafy-studio .cfm-filter-panel {top:110px;bottom:auto;max-height:calc(100% - 125px)}
}

/* Compact mobile studio: allocate recovered space to the scrollable library. */
@media (max-width:767px) {
  .crystafy-mobile-studio .cfm-picker-row { display:flex; align-items:center; flex-shrink:0; gap:2px; padding:2px 5px; border-bottom:1px solid #e9e3e6; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-families { flex:1; min-width:0; margin:0; border:0; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-families button { min-width:0; padding:0 1px 2px; font-size:10px; white-space:nowrap; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-tools { padding:0; gap:0; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-filter-toggle { padding:0 3px; gap:2px; font-size:10px; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-filter-toggle>span:not(.cfm-colorwheel) { max-width:36px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crystafy-mobile-studio .cfm-picker-row .cfm-colorwheel { width:12px; height:12px; }
  .crystafy-mobile-studio .diy3d-fitchip { display:flex; align-items:center; gap:5px; max-width:none; }
  .crystafy-mobile-studio .cfm-usage-guide { pointer-events:auto; flex-shrink:0; padding:3px 5px; border:1px solid #ddd3da; border-radius:4px; background:#fff; color:#775c70; font-size:10px; line-height:1.4; cursor:pointer; }
  .crystafy-mobile-studio .diy3d-help-modal { animation:cfm-guide-up .2s ease-out; }
  @keyframes cfm-guide-up { from {transform:translateY(100%)} to {transform:translateY(0)} }
  @media(prefers-reduced-motion:reduce) { .crystafy-mobile-studio .diy3d-help-modal {animation:none} }
  @media(max-width:360px) { .crystafy-mobile-studio .diy3d-fitchip {font-size:9px;gap:3px} .crystafy-mobile-studio .diy3d-totalchip-price {font-size:12px} }
}
@media (max-width:767px) {
  body.crystafy-designer-page .cf-promo-banner,
  body.crystafy-designer-page [data-cf-home-promo] { display:none!important; }
  .crystafy-mobile-studio .diy3d-topbar { min-height:38px; padding:2px 6px; }
  .crystafy-mobile-studio .diy3d-topbar-save,
  .crystafy-mobile-studio .diy3d-topbar-finalize { min-height:30px; height:30px; padding:3px 9px; }
  .crystafy-mobile-studio .cfm-tour-trigger { width:26px; height:26px; flex-basis:26px; margin:2px; }
  .crystafy-mobile-studio .diy3d-mobilechips { top:8px; left:12px; right:12px; }
  .crystafy-mobile-studio .diy3d-zoom,
  .crystafy-mobile-studio .diy3d-saved-shortcut,
  .crystafy-mobile-studio .diy3d-clear { bottom:8px; }
  .crystafy-mobile-studio .cfm-library-heading { display:none; }
  .crystafy-mobile-studio .cfm-library-handle { padding:3px 0; min-height:26px; }
  .crystafy-mobile-studio .cfm-families { margin:0 8px; }
  .crystafy-mobile-studio .cfm-families button { padding:0 1px 2px; gap:0; }
  .crystafy-mobile-studio .cfm-category-image { width:25px; height:25px; }
  .crystafy-mobile-studio .cfm-category-image img,
  .crystafy-mobile-studio .cfm-category-image svg { width:24px; height:24px; }
  .crystafy-mobile-studio .cfm-tools { padding:3px 8px; gap:4px; }
  .crystafy-mobile-studio .cfm-search,
  .crystafy-mobile-studio .cfm-search input,
  .crystafy-mobile-studio .cfm-filter-toggle { height:30px; }
  .crystafy-mobile-studio .cfm-results { display:none; }
  .crystafy-mobile-studio .cfm-products { flex:1; padding:2px 8px 12px; }
  .crystafy-mobile-studio .cfm-add { padding:3px 5px 4px; }
  .crystafy-mobile-studio .cfm-product-image { height:68px; margin-bottom:1px; }
  .crystafy-mobile-studio .cfm-product-image img { max-height:68px; }
  .crystafy-mobile-studio .cfm-product-name { min-height:0; line-height:1.25; }
  .crystafy-mobile-studio .cfm-product-meta { margin-top:2px; }
  .crystafy-mobile-studio .cfm-products { gap:5px; }
  .crystafy-mobile-studio.cfm-preview-open { position:fixed; inset:0; height:100dvh; z-index:10000; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .crystafy-mobile-studio.cfm-preview-open .cfm-library { display:none; }
  .crystafy-mobile-studio.cfm-preview-open .diy3d-stage-wrap { flex:1 1 auto; }
}
@media (max-width:767px) and (min-height:481px) {
  .crystafy-mobile-studio .diy3d-stage-wrap { flex:0 0 clamp(220px,46dvh,420px); min-height:0; }
  .crystafy-mobile-studio .cfm-library { flex:1 1 0; min-height:0; max-height:none; }
  .crystafy-mobile-studio .cfm-library.is-expanded { flex:1 1 0; max-height:none; }
  .crystafy-mobile-studio .diy3d-main:has(.cfm-library.is-expanded) .diy3d-stage-wrap { flex-basis:clamp(130px,24dvh,210px); }
  .crystafy-mobile-studio .cfm-library.is-collapsed { flex:0 0 28px; min-height:28px; }
  .crystafy-mobile-studio .diy3d-main:has(.cfm-library.is-collapsed) .diy3d-stage-wrap { flex:1 1 auto; }
}
/* Information must not blur the design behind it. */
.crystafy-studio .diy3d-fitchip,
.crystafy-studio .diy3d-totalchip {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0;
}
.crystafy-studio .diy3d-fitchip {
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:flex-start;
  gap:3px!important;
}
.crystafy-studio .cfm-usage-guide { margin-left:0; }
@media(max-width:767px) {
  /* Compact overlay: no reserved blank band, and no background blur. */
  .crystafy-mobile-studio .diy3d-stage-wrap { margin-top:0; }
  .crystafy-mobile-studio .diy3d-mobilechips {
    top:8px!important;
    min-height:0;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
  }
  .crystafy-mobile-studio .diy3d-fitchip { max-width:none; padding:0; }
  .crystafy-mobile-studio .diy3d-totalchip { max-width:none; padding:0; }
  .crystafy-mobile-studio .cfm-usage-guide { margin-left:0; }
}