/* 0.9.17 - configurable color shortcut and swapped mobile color/tool positions.
   Keep the real WooCommerce color selector and its event listeners unchanged. */
@media (max-width:850px) {
  /* Stack both real controls: gear higher, color button at the bottom of the
     corner. Using layout instead of translate avoids off-screen hit targets. */
  .kskd-shell.kskd-corner-layout .kskd-corner[data-group="zone"] .kskd-zone-tools:not(.kskd-zone-off) {
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    position:relative!important;
    width:66px!important;
    max-width:calc(100vw - 20px)!important;
    overflow:visible!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-zone-tools .kskd-zone-tools-toggle {
    order:1!important;
    flex:0 0 auto!important;
    align-self:center!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-picker:not([hidden]) {
    display:block!important;
    position:relative!important;
    order:2!important;
    flex:0 0 auto!important;
    align-self:center!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:64px!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  /* In top corners, the color shortcut takes the place nearest the edge. */
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tl"] .kskd-zone-tools,
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tr"] .kskd-zone-tools {
    flex-direction:column-reverse!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-toggle {
    width:100%!important;
    min-width:0!important;
    min-height:43px!important;
    padding:5px 3px!important;
    gap:1px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.08!important;
    text-transform:none!important;
    border-radius:10px!important;
    cursor:pointer!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-caption {
    display:block!important;width:100%!important;min-width:0!important;
    text-align:center!important;font-size:10px!important;font-weight:700!important;
    line-height:1.08!important;white-space:normal!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-style-icon{display:none!important;}
  /* The popup clears the upper gear, and zoom moves above both shortcuts. */
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-popup:not([hidden]) {
    position:absolute!important;
    left:var(--kskd-mobile-popup-offset,0px)!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(100% + 46px)!important;
    z-index:95!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tl"] .kskd-mobile-variant-popup:not([hidden]),
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tr"] .kskd-mobile-variant-popup:not([hidden]) {
    top:calc(100% + 46px)!important;
    bottom:auto!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-corner[data-group="zone"]>.kskd-zoom-control.kskd-zoom-zone-aligned.kskd-zoom-compact {
    bottom:calc(100% + 8px)!important;
    top:auto!important;
  }
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tl"][data-group="zone"]>.kskd-zoom-control.kskd-zoom-zone-aligned.kskd-zoom-compact,
  .kskd-shell.kskd-corner-layout .kskd-corner[data-corner="tr"][data-group="zone"]>.kskd-zoom-control.kskd-zoom-zone-aligned.kskd-zoom-compact {
    top:calc(100% + 8px)!important;
    bottom:auto!important;
  }
  /* Keep the original 0.9.15 shortcut as the default for old installations. */
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="duotone"] .kskd-mobile-variant-toggle {
    background:linear-gradient(135deg,#1769c2 0%,#1769c2 48.5%,#9b2d7a 51.5%,#9b2d7a 100%)!important;
    color:#fff!important;border:1px solid rgba(255,255,255,.70)!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="duotone"] .kskd-mobile-variant-caption{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.25)!important;}
  /* Matches the other mobile tool tiles: blue icon above two-line label. */
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="product"] .kskd-mobile-variant-toggle {
    min-height:57px!important;
    background:rgba(255,255,255,.98)!important;
    color:#234f83!important;
    border:1px solid #c5dff8!important;
    box-shadow:0 3px 12px rgba(17,50,78,.14)!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="product"] .kskd-mobile-variant-style-icon {
    display:block!important;
    color:#1769c2!important;
    font-size:20px!important;
    height:20px!important;
    width:20px!important;
    line-height:20px!important;
    flex:0 0 20px!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="product"] .kskd-mobile-variant-caption{color:#234f83!important;text-shadow:none!important;}
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="product"] .kskd-mobile-variant-toggle[aria-expanded="true"]{background:#eaf4ff!important;}
  /* Soft pale-blue button with an actual multicolor swatch at the top. */
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="swatch"] .kskd-mobile-variant-toggle {
    min-height:56px!important;
    background:#edf6ff!important;
    color:#1b5b9c!important;
    border:1px solid #a9d0f6!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="swatch"] .kskd-mobile-variant-style-icon {
    display:block!important;
    width:18px!important;height:18px!important;flex:0 0 18px!important;
    font-size:0!important;line-height:18px!important;
    background:conic-gradient(#1769c2 0 25%,#f1bd53 25% 50%,#e15768 50% 75%,#26a681 75% 100%)!important;
    border:2px solid #fff!important;border-radius:50%!important;
    box-shadow:0 0 0 1px rgba(32,90,148,.22)!important;
    box-sizing:border-box!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="swatch"] .kskd-mobile-variant-caption{color:#1b5b9c!important;text-shadow:none!important;}
  /* Border only, smallest possible visual footprint. */
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="minimal"] .kskd-mobile-variant-toggle {
    min-height:39px!important;
    background:#fff!important;
    color:#1769c2!important;
    border:1px solid #aecbed!important;
    box-shadow:0 2px 9px rgba(17,50,78,.12)!important;
  }
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="minimal"] .kskd-mobile-variant-caption{color:#1769c2!important;text-shadow:none!important;}
  .kskd-shell.kskd-corner-layout[data-mobile-color-button-style="minimal"] .kskd-mobile-variant-toggle[aria-expanded="true"]{background:#eaf4ff!important;}
  /* Without a selected style (legacy data), keep the old appearance. */
}