/* KSK Designer 0.9.15 - more room for the garment preview.
   The purchase column is modestly narrower; its existing size chips retain
   the flexible single-row grid and horizontal overflow fallback. */
@media (min-width: 1101px) {
  body.kskd-product .product.kskd-designer-active > .kskd-product-row.kskd-layout-right {
    grid-template-columns: minmax(0, 1fr) clamp(318px, 25vw, 374px) !important;
    column-gap: 12px !important;
  }
  body.kskd-product .product.kskd-fullpage-product > .kskd-fullpage-row {
    --kskd-panel-side: clamp(310px, 24vw, 372px);
    --kskd-panel-gap: 12px;
    grid-template-columns: minmax(0, 1fr) var(--kskd-panel-side) !important;
  }
  .kskd-lightbox .kskd-modal-layout {
    grid-template-columns: minmax(0, 1fr) clamp(310px, 24vw, 372px) !important;
  }
}
@media (min-width: 851px) and (max-width: 1100px) {
  body.kskd-product .product.kskd-designer-active > .kskd-product-row.kskd-layout-right {
    grid-template-columns: minmax(0, 1fr) clamp(295px, 31vw, 335px) !important;
    column-gap: 9px !important;
  }
  .kskd-lightbox .kskd-modal-layout {
    grid-template-columns: minmax(0, 1fr) clamp(290px, 31vw, 335px) !important;
  }
}
/* Optical correction is applied only to the visual canvas, not its parent,
   toolbar, or control positions. No change to print coordinates or dimensions. */
@media (min-width: 1101px) {
  .kskd-shell.kskd-floating-colors .kskd-stage > .canvas-container {
    transform: translateX(clamp(20px, 1.8vw, 28px)) !important;
  }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .kskd-shell.kskd-floating-colors .kskd-stage > .canvas-container {
    transform: translateX(15px) !important;
  }
}
/* Mobile: a narrow, genuinely two-colour button. No extra swatch/icon.
   Real WC colour selection and the existing positioning/popup stay intact. */
@media (max-width: 850px) {
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-picker:not([hidden]) {
    width: 64px !important;
    max-width: calc(100vw - 20px) !important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 5px 3px !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1769c2 0%, #1769c2 48.5%, #9b2d7a 51.5%, #9b2d7a 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(28,48,92,.22) !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.09 !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    text-transform: none !important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-icon { display: none !important; }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-caption {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.09 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, #0e539e 0%, #0e539e 48.5%, #7f1d62 51.5%, #7f1d62 100%) !important;
    border-color: #e6eef9 !important;
  }
  .kskd-shell.kskd-corner-layout .kskd-mobile-variant-toggle:focus-visible {
    outline: 2px solid #1769c2 !important;
    outline-offset: 3px !important;
  }
  .kskd-shell.kskd-corner-layout .kskd-corner[data-group="zone"] > .kskd-zoom-control.kskd-zoom-zone-aligned.kskd-zoom-compact {
    bottom: calc(100% + 55px) !important;
  }
}