/* KSK Designer 0.8.6 — opt-in Minimal Studio; CLASSIC remains unchanged.
   Styles affect only the KSK root with the chosen device layout. No Fabric
   coordinates, WooCommerce form fields or cart data are modified here. */

/* Minimal Light is a separate visual theme, independent of the layout. */
.kskd-shell.kskd-theme-minimal-light {
  --kskd-blue:#2563eb;
  --kskd-border:#e2e8f0;
  --kskd-soft:#f7f9fc;
  --kskd-ink:#1e293b;
  --kskd-muted:#64748b;
}
.kskd-shell.kskd-theme-minimal-light .kskd-workspace,
.kskd-shell.kskd-theme-minimal-light .kskd-stage-wrap {
  background:#fff!important;
  border-color:#e2e8f0!important;
  box-shadow:0 2px 16px rgba(15,23,42,.035)!important;
}
.kskd-shell.kskd-theme-minimal-light .kskd-module,
.kskd-shell.kskd-theme-minimal-light .kskd-module-panel {
  border-color:#e2e8f0!important;
  box-shadow:none!important;
}
.kskd-shell.kskd-theme-minimal-light .kskd-stage {
  background:#f8fafc!important;
  border-color:#e9eff5!important;
}
.kskd-shell.kskd-theme-minimal-light .kskd-module .kskd-tool:hover,
.kskd-shell.kskd-theme-minimal-light .kskd-module.is-open>.kskd-tool {
  background:#eff6ff!important;
}

/* DESKTOP: a 56px tool rail with an overlay drawer; no persistent drawer column.
   The drawer is absolutely positioned relative to the rail, and opens toward
   the preview, while the canvas itself never changes its logical dimensions. */
@media (min-width:851px) {
  .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace,
  .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace {
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:stretch!important;
    padding:5px!important;
    background:#fff!important;
    border:1px solid #e6ebf2!important;
    border-radius:16px!important;
    box-shadow:0 3px 24px rgba(20,44,79,.035)!important;
    position:relative!important;
    overflow:visible!important;
    min-width:0!important;
    width:100%!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"].kskd-drawer-open > .kskd-workspace {
    grid-template-columns:56px minmax(0,1fr)!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace > .kskd-tools {
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    position:relative!important;
    grid-column:1!important;grid-row:1!important;
    order:0!important;
    flex:0 0 56px!important;
    width:56px!important;min-width:56px!important;max-width:56px!important;
    height:100%!important;min-height:0!important;max-height:none!important;
    gap:6px!important;
    margin:0!important;padding:5px 0!important;
    border:0!important;border-radius:12px!important;
    background:#f7f9fc!important;box-shadow:none!important;
    overflow:visible!important;z-index:40!important;
    align-self:stretch!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module {
    position:static!important;
    display:block!important;
    flex:0 0 auto!important;
    width:50px!important;min-width:50px!important;max-width:50px!important;
    padding:0!important;margin:0 auto!important;
    border:1px solid transparent!important;border-radius:10px!important;
    overflow:visible!important;background:transparent!important;
    box-shadow:none!important;backdrop-filter:none!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module > .kskd-tool {
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;min-height:51px!important;
    padding:5px 2px!important;margin:0!important;gap:3px!important;
    border:0!important;border-radius:9px!important;
    background:transparent!important;box-shadow:none!important;text-align:center!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-tool .dashicons {
    display:block!important;width:20px!important;height:20px!important;
    margin:0 auto!important;font-size:20px!important;line-height:20px!important;
    color:#2563eb!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-tool strong {
    display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;
    font-size:9px!important;line-height:1.14!important;font-weight:650!important;
    letter-spacing:-.02em!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-tool small,
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-tool .kskd-chevron,
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-tool-note {display:none!important}
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-module.is-open > .kskd-tool {
    color:#1d4ed8!important;background:#eaf2ff!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module > .kskd-module-panel {
    display:block!important;
    position:absolute!important;
    left:calc(100% + 8px)!important;top:0!important;bottom:auto!important;right:auto!important;
    z-index:55!important;
    width:min(292px,calc(100vw - 92px))!important;
    max-width:min(292px,calc(100vw - 92px))!important;
    max-height:var(--kskd-side-panel-max-height,min(550px,75dvh))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;scrollbar-width:thin!important;
    padding:0 12px 15px!important;margin:0!important;
    border:1px solid #dce6f1!important;border-radius:14px!important;
    background:#fff!important;box-shadow:0 14px 42px rgba(15,35,66,.17)!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module > .kskd-module-panel[hidden] {display:none!important}
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-side-panel-header {
    display:flex!important;position:sticky!important;top:0!important;z-index:5!important;
    align-items:center!important;justify-content:space-between!important;
    min-height:41px!important;margin:0 -12px 12px!important;padding:6px 11px!important;
    background:#fff!important;border-bottom:1px solid #ebf0f5!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace > .kskd-stage-wrap {
    display:flex!important;flex-direction:column!important;
    grid-column:2!important;grid-row:1!important;order:0!important;
    min-width:0!important;min-height:0!important;
    width:100%!important;max-width:100%!important;height:100%!important;
    margin:0!important;padding:3px!important;
    position:relative!important;z-index:1!important;
    border:0!important;box-shadow:none!important;background:#fff!important;
    overflow:hidden!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage-top {
    min-height:24px!important;padding:0 3px 3px!important;font-size:10px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage-top .kskd-status {
    padding:3px 7px!important;font-size:9px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-side-switch {
    min-height:32px!important;gap:5px!important;padding:2px 0 4px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-side-switch .kskd-side {
    min-width:64px!important;min-height:27px!important;padding:4px 10px!important;
    font-size:11px!important;border-radius:8px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage {
    flex:1 1 auto!important;min-width:0!important;min-height:0!important;
    padding:3px!important;border-radius:12px!important;
    background:#f9fafc!important;border-color:#edf1f6!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage-footer {
    min-height:22px!important;padding:4px 3px 0!important;font-size:9px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-history-actions button {
    min-height:28px!important;padding:4px 7px!important;font-size:10px!important;
    border-radius:8px!important;
  }
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage .canvas-container {
    box-shadow:0 2px 14px rgba(15,23,42,.035)!important;
  }
  /* Fullscreen Page: no extra frames stealing canvas room. */
  .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] .kskd-workspace {
    height:100%!important;max-height:100%!important;
  }
  .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage-wrap {
    height:100%!important;
  }
  .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage {
    flex:1 1 0!important;height:100%!important;max-height:none!important;
  }
}

/* PAGE view: neutral white canvas surface and maximum usable width while the
   real fixed logical Fabric dimensions remain 600 x 700 (see fitCanvas). */
@media (min-width:851px) {
 .kskd-shell[data-display="page"][data-ui-layout-desktop="studio"] > .kskd-workspace > .kskd-stage-wrap {height:auto!important}
 .kskd-shell[data-display="page"][data-ui-layout-desktop="studio"] .kskd-stage {flex:0 0 auto!important;height:auto!important}
}

/* MOBILE: prioritize the garment over chrome, keep the original accessible
   tool buttons and the ORIGINAL editor panels in the established bottom sheet. */
@media (max-width:850px) {
  .kskd-shell[data-ui-layout-mobile="studio"] {
    --kskd-blue:#2563eb;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-workspace {
    display:flex!important;flex-direction:column!important;
    padding:3px!important;gap:2px!important;
    border:1px solid #e9edf4!important;border-radius:13px!important;
    background:#fff!important;box-shadow:none!important;
    overflow:visible!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage-wrap {
    order:1!important;min-width:0!important;width:100%!important;
    margin:0!important;padding:0!important;
    background:#fff!important;border:0!important;box-shadow:none!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-tools {order:2!important}
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage-top {
    min-height:22px!important;padding:0 3px 3px!important;
    font-size:10px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage-top .kskd-status {
    padding:3px 6px!important;font-size:9px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-side-switch {
    min-height:29px!important;padding:1px 0 3px!important;gap:4px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-side-switch .kskd-side {
    min-width:58px!important;min-height:28px!important;padding:3px 9px!important;
    font-size:10px!important;border-radius:9px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage {
    min-width:0!important;width:100%!important;
    padding:1px!important;border-radius:10px!important;
    border:1px solid #edf1f5!important;background:#fafbfc!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage-footer {
    padding:3px 2px 0!important;min-height:20px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-history-actions button {
    font-size:10px!important;min-height:27px!important;padding:4px 7px!important;
  }
  .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage .canvas-container {
    box-shadow:none!important;border-radius:8px!important;
  }
  /* Fullscreen Page previously limited the stage to 42dvh. That crops a wide
     Fabric canvas on narrow phones. Give it sufficient space for the aspect
     ratio; fitCanvas still controls the exact image width. */
  .kskd-fullpage-row .kskd-shell[data-ui-layout-mobile="studio"] .kskd-stage {
    height:auto!important;
    min-height:min(132vw,560px)!important;
    max-height:none!important;
    flex:0 0 auto!important;
  }
  .kskd-fullpage-row .kskd-shell[data-ui-layout-mobile="studio"] .kskd-workspace {
    height:auto!important;max-height:none!important;
  }
  /* Keep the dock bottom-fixed but only 52-56px high. All buttons retain at
     least a 44px touch target; active styling and programmatic labels remain. */
  .kskd-mobile-appbar.kskd-studio-mobile-ui:not([hidden]) {
    display:flex!important;align-items:stretch!important;justify-content:space-evenly!important;
    flex-wrap:nowrap!important;gap:3px!important;
    left:7px!important;right:7px!important;bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
    max-width:560px!important;min-height:55px!important;
    padding:4px!important;border-radius:15px!important;
    border:1px solid #dfe6f0!important;background:#fff!important;
    box-shadow:0 7px 22px rgba(15,23,42,.14)!important;
    overflow-x:auto!important;scrollbar-width:none!important;
  }
  .kskd-mobile-appbar.kskd-studio-mobile-ui::-webkit-scrollbar {display:none}
  .kskd-mobile-appbar.kskd-studio-mobile-ui button,
  .kskd-mobile-appbar.kskd-studio-mobile-ui.kskd-scroll-dock button {
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    flex:1 0 50px!important;width:auto!important;min-width:50px!important;max-width:none!important;
    min-height:46px!important;padding:4px 2px!important;gap:2px!important;
    margin:0!important;border:1px solid transparent!important;border-radius:11px!important;
    background:transparent!important;box-shadow:none!important;
    color:#475569!important;
  }
  .kskd-mobile-appbar.kskd-studio-mobile-ui button .dashicons {
    width:19px!important;height:19px!important;font-size:19px!important;
    line-height:19px!important;color:#2563eb!important;
  }
  .kskd-mobile-appbar.kskd-studio-mobile-ui button>span:last-child {
    font-size:9px!important;line-height:1.12!important;font-weight:650!important;
    white-space:normal!important;text-align:center!important;
  }
  .kskd-mobile-appbar.kskd-studio-mobile-ui button.is-active {
    background:#eff6ff!important;border-color:#cbdfff!important;
  }
  .kskd-mobile-sheet.kskd-studio-mobile-ui:not([hidden]) {
    left:7px!important;right:7px!important;bottom:calc(69px + env(safe-area-inset-bottom,0px) + var(--kskd-sheet-keyboard,0px))!important;
    max-width:560px!important;max-height:min(57svh,520px)!important;
    border:1px solid #dce4ee!important;border-radius:15px!important;
    box-shadow:0 9px 30px rgba(15,23,42,.17)!important;
  }
  .kskd-mobile-sheet.kskd-studio-mobile-ui-header {
    padding:5px 10px 6px!important;
  }
  .kskd-mobile-sheet.kskd-studio-mobile-ui-content {
    padding:7px 10px 11px!important;
  }
  .kskd-dock-swipe-hint.kskd-studio-mobile-ui:not([hidden]) {
    bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;
    font-size:9px!important;
  }
  .kskd-mobile-sheet.kskd-studio-mobile-ui.kskd-keyboard-open:not([hidden]) {
    max-height:min(29svh,220px)!important;
  }
}
/* Tablet/narrow-desktop fallback (851-1100px) keeps a usable left rail as long
   as the editor is embedded. Narrow mobile browsers continue using the dock. */
@media (min-width:851px) and (max-width:1100px) {
  .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace {grid-template-columns:52px minmax(0,1fr)!important}
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module {width:46px!important;min-width:46px!important;max-width:46px!important}
  .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace > .kskd-tools {width:52px!important;min-width:52px!important;max-width:52px!important}
  .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-module > .kskd-module-panel {width:min(270px,calc(100vw - 86px))!important}
}
@media (prefers-reduced-motion:reduce) {
 .kskd-shell[data-ui-layout-desktop="studio"] *,
 .kskd-shell[data-ui-layout-mobile="studio"] * {scroll-behavior:auto!important}
}

/* Mobile quick-edit dock is also portaled to <body>. */
@media (max-width:850px) {
  .kskd-mobile-dock.kskd-studio-mobile-ui:not([hidden]) {
    left:7px!important;right:7px!important;max-width:560px!important;
    border-radius:15px!important;border-color:#dce4ee!important;
    box-shadow:0 8px 26px rgba(15,23,42,.17)!important;
  }
}
/* Override 0.8.2 selector-specific drawer width rather than relying on CSS
   source order: 0.8.2 selectors include the workspace in their chain. */
@media (min-width:851px) {
 .kskd-shell[data-ui-layout-desktop="studio"][data-desktop-modules-layout] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel:not([hidden]) {
   left:calc(100% + 8px)!important;
   width:min(292px,calc(100vw - 92px))!important;
   max-width:min(292px,calc(100vw - 92px))!important;
 }
}
/* On a tablet in desktop mode the previous fullpage 50dvh preview produced
   a very short canvas. Allow natural vertical scrolling rather than cropping. */
@media (min-width:851px) and (max-width:1100px) {
 .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace,
 .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] > .kskd-workspace > .kskd-stage-wrap {
   height:auto!important;min-height:0!important;max-height:none!important;
 }
 .kskd-fullpage-row .kskd-shell[data-ui-layout-desktop="studio"] .kskd-stage {
   flex:0 0 auto!important;height:clamp(470px,65dvh,690px)!important;
   min-height:470px!important;max-height:none!important;
 }
}

/* Icon-only desktop rail: translated button text remains screen-reader readable.
   Native title attributes (added by designer.js) explain each icon on hover. */
@media (min-width:851px) {
 .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools .kskd-tool strong {
   position:absolute!important;width:1px!important;height:1px!important;
   overflow:hidden!important;clip-path:inset(50%)!important;
   white-space:nowrap!important;padding:0!important;margin:-1px!important;
 }
 .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module > .kskd-tool {
   min-height:48px!important;
 }
 .kskd-shell[data-ui-layout-desktop="studio"] .kskd-tools > .kskd-module > .kskd-tool:focus-visible {
   outline:2px solid #2563eb!important;outline-offset:2px!important;
 }
}