/* KSK Designer 1.1.77 - readable names in mobile pattern / text variants.
   WooCommerce themes sometimes force white text onto buttons; our swatches
   have white backgrounds and must not inherit that text color. */
@media (max-width:850px) {
  .kskd-shell .kskd-mobile-variant-picker .kskd-mobile-variant-color {
    color:#263e58!important;
    -webkit-text-fill-color:#263e58!important;
    text-transform:none!important;
    letter-spacing:normal!important;
  }
  .kskd-shell .kskd-mobile-variant-picker .kskd-mobile-variant-color.is-selected {
    color:#10559e!important;
    -webkit-text-fill-color:#10559e!important;
  }
  .kskd-shell .kskd-mobile-variant-picker .kskd-mobile-variant-color .kskd-mobile-variant-label {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:650!important;
    text-transform:none!important;
  }
  /* With no photo or HEX, show a readable text choice instead of a blank dot. */
  .kskd-shell .kskd-mobile-variant-picker .kskd-mobile-variant-color.kskd-mobile-variant-text-choice {
    background:#fff!important;
    border-radius:8px!important;
  }
  .kskd-shell .kskd-mobile-variant-picker .kskd-mobile-variant-color.kskd-mobile-variant-text-choice.is-selected {
    background:#e8f2ff!important;
  }
  .kskd-shell .kskd-mobile-variant-picker[data-kskd-kind="pattern"][data-variant-button-style="auto"] .kskd-mobile-variant-options {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .kskd-shell .kskd-mobile-variant-picker[data-kskd-kind="pattern"][data-variant-button-style="auto"] .kskd-mobile-variant-color {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:48px!important;
    height:auto!important;
    border-radius:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:5px!important;
  }
  .kskd-shell .kskd-mobile-variant-picker[data-kskd-kind="pattern"][data-variant-button-style="auto"] .kskd-mobile-variant-dot {
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
  }
}