/* KSK Designer 0.8.0 — responsive desktop toolbar with top-anchored drawers.
   The browser viewport is NOT the same as the designer width beside Woo summary.
   Desktop styles apply from 851px viewport AND 500px editor container; the
   narrow fallback remains an independently scrollable inline module. */
.kskd-shell .kskd-side-panel-header{display:none!important}
@media (min-width:851px){
 @container kskd-shell (min-width:500px){
  .kskd-shell[data-desktop-modules-layout="side"] > .kskd-workspace,
  .kskd-shell[data-desktop-modules-layout="overlay"] > .kskd-workspace{
    display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;
    gap:10px!important;align-items:stretch!important;position:relative!important;
    overflow:hidden!important;min-width:0!important;
  }
  /* On wider editor cards, reserve a dedicated 238px drawer column. */
  .kskd-shell[data-desktop-modules-layout="side"] > .kskd-workspace{
    grid-template-columns:minmax(284px,306px) minmax(0,1fr)!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-tools,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-tools{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:7px!important;
    position:relative!important;order:0!important;align-self:stretch!important;
    width:76px!important;max-width:76px!important;min-width:76px!important;
    height:100%!important;max-height:none!important;min-height:0!important;
    padding:0!important;margin:0!important;
    grid-template-columns:none!important;grid-auto-flow:row!important;
    overflow:visible!important;background:transparent!important;border:0!important;
    box-shadow:none!important;z-index:8!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-module,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-module{
    display:block!important;position:static!important;flex:0 0 auto!important;
    grid-row:auto!important;grid-column:auto!important;
    width:76px!important;min-width:0!important;border-radius:14px!important;
    border:1px solid #dbe5ef!important;overflow:visible!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-module > .kskd-tool,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-module > .kskd-tool{
    position:relative!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:5px!important;
    grid-row:auto!important;grid-column:auto!important;grid-template-columns:none!important;
    width:100%!important;min-height:62px!important;padding:7px 3px!important;
    border:0!important;border-radius:13px!important;text-align:center!important;
    white-space:normal!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools .kskd-tool .dashicons,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools .kskd-tool .dashicons{
    display:block!important;flex:0 0 auto!important;width:22px!important;height:22px!important;
    margin:0 auto!important;line-height:22px!important;font-size:21px!important;
    grid-column:auto!important;grid-row:auto!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools .kskd-tool strong,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools .kskd-tool strong{
    display:block!important;grid-column:auto!important;grid-row:auto!important;
    font-size:10px!important;line-height:1.25!important;white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools .kskd-tool small,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools .kskd-tool small,
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools .kskd-tool .kskd-chevron,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools .kskd-tool .kskd-chevron{
    display:none!important;
  }
  /* Position against .kskd-tools (NOT against the clicked module).
     All modules are position:static; the rail is the containing block. */
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-module > .kskd-module-panel,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-module > .kskd-module-panel{
    display:block!important;position:absolute!important;
    top:0!important;bottom:auto!important;left:calc(100% + 9px)!important;right:auto!important;
    z-index:25!important;min-width:0!important;width:208px!important;
    max-width:calc(100% + 165px)!important;
    height:auto!important;min-height:0!important;
    max-height:var(--kskd-side-panel-max-height, min(500px, 65dvh))!important;
    padding:0 12px 14px!important;margin:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important;
    scrollbar-gutter:stable!important;scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch;
    border:1px solid #d8e6f3!important;border-radius:15px!important;
    background:#fff!important;box-shadow:0 10px 32px rgba(23,53,89,.16)!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-module > .kskd-module-panel[hidden],
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-module > .kskd-module-panel[hidden]{display:none!important}
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-module > .kskd-module-panel{width:278px!important;max-width:min(278px,calc(100vw - 145px))!important}
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-stage-wrap,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-stage-wrap{
    order:0!important;min-width:0!important;grid-column:2!important;grid-row:1!important;z-index:1!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-tool-note,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools > .kskd-tool-note{display:none!important}
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools .kskd-side-panel-header,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools .kskd-side-panel-header{
    display:flex!important;position:sticky!important;top:0!important;z-index:9!important;
    align-items:center;justify-content:space-between;
    min-height:42px!important;margin:0 -12px 12px!important;padding:7px 11px!important;
    border-bottom:1px solid #e4edf5;border-radius:14px 14px 0 0;background:#fff;
  }
  .kskd-shell .kskd-side-panel-header strong{font-size:13px!important;line-height:1.2!important;color:#243b53}
  .kskd-shell .kskd-side-panel-close{
    display:grid!important;place-items:center!important;flex:0 0 auto!important;
    width:28px!important;height:28px!important;margin:0!important;padding:0!important;
    border:1px solid #d7e5f1!important;border-radius:50%!important;
    background:#f6f9fe!important;color:#34536f!important;font-size:21px!important;
    line-height:1!important;cursor:pointer!important;
  }
  .kskd-shell .kskd-side-panel-close:hover{background:#e6f1ff!important;color:#1769c2!important}
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-module-panel .kskd-create-text,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-module-panel .kskd-create-text{
    position:sticky!important;bottom:0!important;z-index:3!important;
  }
  .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="side"] .kskd-module-panel,
  .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="overlay"] .kskd-module-panel{
    background:var(--kskd-glass-surface,rgba(250,252,255,.97))!important;
    border-color:var(--kskd-glass-stroke,#d8e6f3)!important;
  }
  .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="side"] .kskd-side-panel-header,
  .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="overlay"] .kskd-side-panel-header{
    background:var(--kskd-glass-surface,rgba(250,252,255,.97))!important;
  }
 }
 @container kskd-shell (min-width:500px) and (max-width:705px){
  /* If the designer itself is narrow, retain the left rail and open the drawer
     over the canvas. It still starts at the top and has its own scrollbar. */
  .kskd-shell[data-desktop-modules-layout="side"] > .kskd-workspace{
    grid-template-columns:76px minmax(0,1fr)!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools > .kskd-module > .kskd-module-panel{
    width:242px!important;max-width:min(242px,calc(100vw - 145px))!important;
  }
 }
 /* For exceptionally narrow embedded designers, allow full inline scrolling. */
 @container kskd-shell (max-width:499px){
  .kskd-shell .kskd-module > .kskd-module-panel:not([hidden]){
    max-height:min(60dvh,470px)!important;overflow-y:auto!important;overflow-x:hidden!important;
  }
 }
}

/* 0.8.1: HARDENED DESKTOP DRAWER FALLBACK.
   Fix for real-world laptop Woo layouts: the editor card may be <500px wide
   even when the viewport is >850px. The previous container-query-only rail
   did not activate, leaving old 26dvh grid panels below the clicked button.
   From 851px viewport up, always use the rail and independently scrollable
   panels, even when the page editor itself is narrow. */
@media (min-width:851px) {
 .kskd-shell[data-desktop-modules-layout="side"] > .kskd-workspace,
 .kskd-shell[data-desktop-modules-layout="overlay"] > .kskd-workspace {
   display:grid!important;
   grid-template-columns:76px minmax(0,1fr)!important;
   gap:10px!important;
   align-items:stretch!important;
   position:relative!important;
   overflow:hidden!important;
   min-width:0!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-tools,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-tools {
   display:flex!important;flex-direction:column!important;
   align-items:stretch!important;justify-content:flex-start!important;
   grid-column:1!important;grid-row:1!important;
   gap:7px!important;
   order:0!important;
   position:relative!important;
   align-self:stretch!important;
   width:76px!important;min-width:76px!important;max-width:76px!important;
   height:100%!important;min-height:0!important;max-height:none!important;
   overflow:visible!important;
   padding:0!important;margin:0!important;
   grid-template-columns:none!important;grid-auto-flow:row!important;
   background:transparent!important;border:0!important;box-shadow:none!important;
   z-index:12!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-tools > .kskd-module,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-tools > .kskd-module {
   display:block!important;
   position:static!important;
   flex:0 0 auto!important;
   grid-column:auto!important;grid-row:auto!important;
   width:76px!important;min-width:0!important;
   overflow:visible!important;
   border-radius:14px!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool {
   position:relative!important;display:flex!important;flex-direction:column!important;
   align-items:center!important;justify-content:center!important;
   gap:5px!important;grid-column:auto!important;grid-row:auto!important;
   width:100%!important;min-height:62px!important;padding:7px 3px!important;
   text-align:center!important;border-radius:13px!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool strong,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool strong {
   display:block!important;white-space:normal!important;font-size:10px!important;
   line-height:1.25!important;overflow-wrap:anywhere!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool small,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool small,
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool .kskd-chevron,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-tool .kskd-chevron {
   display:none!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-stage-wrap,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-stage-wrap {
   grid-column:2!important;grid-row:1!important;order:0!important;
   min-width:0!important;z-index:1!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel {
   display:block!important;
   position:absolute!important;
   top:0!important;left:calc(100% + 9px)!important;
   right:auto!important;bottom:auto!important;
   width:min(270px,calc(100vw - 110px))!important;
   min-width:0!important;max-width:min(270px,calc(100vw - 110px))!important;
   height:auto!important;min-height:0!important;
   max-height:var(--kskd-side-panel-max-height,min(65dvh,540px))!important;
   padding:0 12px 14px!important;margin:0!important;
   overflow-y:auto!important;overflow-x:hidden!important;
   overscroll-behavior-y:contain!important;
   scrollbar-width:thin!important;-webkit-overflow-scrolling:touch;
   border:1px solid #d8e6f3!important;border-radius:15px!important;
   box-shadow:0 10px 32px rgba(23,53,89,.16)!important;
   background:#fff!important;z-index:99!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel[hidden],
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel[hidden] {
   display:none!important;
 }
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-tool-note,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-tool-note {display:none!important}
 .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools .kskd-side-panel-header,
 .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools .kskd-side-panel-header {
   display:flex!important;
 }
 /* Avoid clipping absolute drawers by the lightbox rail's legacy scrollbar. */
 .kskd-lightbox .kskd-shell[data-desktop-modules-layout="side"] .kskd-tools,
 .kskd-lightbox .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-tools {
   overflow:visible!important;
 }
 /* The original nested grid panels must also scroll in classic layout. */
 .kskd-shell[data-desktop-modules-layout="classic"] .kskd-module > .kskd-module-panel:not([hidden]) {
   max-height:min(60dvh,540px)!important;
   overflow-y:auto!important;overflow-x:hidden!important;
   overscroll-behavior-y:contain!important;
   scrollbar-width:thin!important;
   -webkit-overflow-scrolling:touch;
 }
}

/* Liquid Matte blur establishes a CSS containing block even on static module
   wrappers, so absolute drawers used to start at EACH button's top. Disable
   that blur on the wrapper only; the drawer itself retains the theme styling. */
@media (min-width:851px) {
 .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module,
 .kskd-shell.kskd-theme-liquid-matte[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module {
   -webkit-backdrop-filter:none!important;
   backdrop-filter:none!important;
 }
}


/* KSK Designer 0.8.2: REAL separation between the desktop layouts.
   0.8.1 forced 76px for both layouts, overwriting their key difference.
   Side reserves space for the drawer; overlay floats above the preview. */
@media (min-width:851px) {
  .kskd-shell[data-desktop-modules-layout="side"] > .kskd-workspace {
    grid-template-columns:84px minmax(0,1fr)!important;
    transition:grid-template-columns .16s ease;
  }
  .kskd-shell[data-desktop-modules-layout="side"].kskd-drawer-open > .kskd-workspace {
    grid-template-columns:clamp(294px,31%,340px) minmax(0,1fr)!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-tools,
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace > .kskd-tools > .kskd-module {
    width:84px!important;min-width:84px!important;max-width:84px!important;
  }
  .kskd-shell[data-desktop-modules-layout="side"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel {
    left:calc(100% + 9px)!important;
    width:200px!important;max-width:200px!important;
  }
  .kskd-shell[data-desktop-modules-layout="overlay"] > .kskd-workspace {
    grid-template-columns:68px minmax(0,1fr)!important;
  }
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-tools,
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace > .kskd-tools > .kskd-module {
    width:68px!important;min-width:68px!important;max-width:68px!important;
  }
  .kskd-shell[data-desktop-modules-layout="overlay"] .kskd-workspace .kskd-tools > .kskd-module > .kskd-module-panel {
    left:calc(100% + 9px)!important;
    width:270px!important;max-width:min(270px,calc(100vw - 100px))!important;
  }
  @container kskd-shell (max-width:540px) {
    .kskd-shell[data-desktop-modules-layout="side"].kskd-drawer-open > .kskd-workspace {
      grid-template-columns:294px minmax(0,1fr)!important;
    }
  }
}


/* 0.8.3: Mobile sheet owns its own heading and dismiss button. The desktop
   drawer heading travels with the original form, but must never be shown here. */
.kskd-mobile-sheet .kskd-mobile-sheet-content .kskd-side-panel-header {
  display:none!important;visibility:hidden!important;
}