/* 1.1.56: Per-WooCommerce-attribute presentation. Auto remains untouched. */
.kskd-variant-style-settings{margin:12px 0 16px;padding:13px 15px;border:1px solid #dbe6f1;border-radius:12px;background:#f6f9fe}
.kskd-variant-style-settings h4{margin:0 0 5px!important;font-size:14px}
.kskd-variant-style-settings .description{margin:0 0 10px!important;max-width:740px}
.kskd-variant-style-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.kskd-variant-style-row strong{flex:0 0 130px}
.kskd-variant-style-row select{max-width:100%;min-width:min(100%,280px)}

/* Square/rectangle: values are always displayed within the button. */
.kskd-shell .kskd-variant-group.kskd-variant-style-square .kskd-variant-options,
.kskd-shell .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-options{display:flex!important;flex-wrap:wrap!important;gap:7px!important;overflow:visible!important;max-height:none!important}
.kskd-shell .kskd-variant-group.kskd-variant-style-square .kskd-variant-option{
  display:flex!important;flex:0 0 52px!important;width:52px!important;max-width:72px!important;
  height:52px!important;min-height:52px!important;padding:4px!important;
  border-radius:8px!important;background:#fff!important;border:1px solid #c9d8e7!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-option{
  display:flex!important;flex:0 1 auto!important;width:auto!important;max-width:100%!important;
  min-width:66px!important;min-height:37px!important;height:auto!important;
  padding:7px 11px!important;border-radius:8px!important;
  background:#fff!important;border:1px solid #c9d8e7!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-square .kskd-variant-option.is-selected,
.kskd-shell .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-option.is-selected{
  background:#e8f2ff!important;border:2px solid #1769c2!important;color:#104b87!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-square .kskd-variant-option-label,
.kskd-shell .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-option-label{
  display:block!important;position:static!important;visibility:visible!important;
  font-size:11px!important;line-height:1.2!important;font-weight:600!important;
  white-space:normal!important;max-width:100%!important;overflow-wrap:anywhere!important;
  text-align:center!important;margin:0!important;
}

/* Circle: keep a circular touch surface; named circles retain a caption below. */
.kskd-shell .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option:not(.kskd-show-label){
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  padding:4px!important;border-radius:50%!important;background:#fff!important;
  border:1px solid #c9d8e7!important;flex:0 0 42px!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option.is-selected:not(.kskd-show-label){
  border:2px solid #1769c2!important;background:#e8f2ff!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-circle .kskd-variant-swatch{
  display:block!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option-label{
  display:block!important;font-size:10px!important;line-height:1.15!important;text-align:center!important;
}
/* A circle without an assigned color/photo shows the numeral as text. */
.kskd-shell .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option:not(.kskd-show-label) .kskd-variant-option-label{
  max-width:100%!important;overflow-wrap:anywhere!important;font-size:10px!important;
}

/* Image: 44px photo tiles. Show fallback text if a photo was not assigned. */
.kskd-shell .kskd-variant-group.kskd-variant-style-image .kskd-variant-option{
  display:flex!important;flex-direction:column!important;flex:0 0 auto!important;
  width:56px!important;max-width:88px!important;min-height:55px!important;height:auto!important;
  padding:5px!important;border-radius:9px!important;border:1px solid #c9d8e7!important;background:#fff!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-image .kskd-variant-option.is-selected{border:2px solid #1769c2!important;background:#e8f2ff!important}
.kskd-shell .kskd-variant-group.kskd-variant-style-image .kskd-variant-swatch-photo{
  display:block!important;width:44px!important;height:44px!important;flex:0 0 44px!important;
  border-radius:6px!important;border:1px solid #d3dce7!important;
}
.kskd-shell .kskd-variant-group.kskd-variant-style-image .kskd-variant-option-label{
  display:block!important;visibility:visible!important;font-size:10px!important;
  line-height:1.2!important;text-align:center!important;max-width:100%!important;overflow-wrap:anywhere!important;
}
/* Prevent old 1.1.55 special sizing rules overriding chosen presentation. */
@media(min-width:851px){
 .kskd-shell.kskd-floating-colors .kskd-project-group>.kskd-variant-chooser .kskd-variant-group:is(.kskd-variant-style-square,.kskd-variant-style-rectangle,.kskd-variant-style-circle,.kskd-variant-style-image) .kskd-variant-options{
    display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;max-height:min(300px,55vh)!important;overflow-y:auto!important;gap:6px!important;
 }
 .kskd-shell.kskd-floating-colors .kskd-project-group>.kskd-variant-chooser .kskd-variant-group.kskd-variant-style-square .kskd-variant-option{
    flex:0 0 52px!important;width:52px!important;height:52px!important;min-height:52px!important;padding:4px!important;border-radius:8px!important;
 }
 .kskd-shell.kskd-floating-colors .kskd-project-group>.kskd-variant-chooser .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-option{
    flex:0 1 auto!important;width:auto!important;height:auto!important;min-height:37px!important;padding:7px 11px!important;border-radius:8px!important;
 }
 .kskd-shell.kskd-floating-colors .kskd-project-group>.kskd-variant-chooser .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option:not(.kskd-show-label){
    flex:0 0 42px!important;width:42px!important;height:42px!important;border-radius:50%!important;
 }
 .kskd-shell.kskd-floating-colors .kskd-project-group>.kskd-variant-chooser .kskd-variant-group.kskd-variant-style-image .kskd-variant-option{
    flex:0 0 auto!important;width:56px!important;height:auto!important;min-height:55px!important;border-radius:9px!important;
 }
}

/* Mobile variant popup mirrors the per-attribute setting, not WooCommerce inputs. */
@media(max-width:850px){
 .kskd-shell .kskd-mobile-variant-picker:is([data-variant-button-style="square"],[data-variant-button-style="rectangle"],[data-variant-button-style="image"],[data-variant-button-style="circle"]) .kskd-mobile-variant-options{
    display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;gap:7px!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="square"] .kskd-mobile-variant-color{
    display:flex!important;flex:0 0 52px!important;align-items:center!important;justify-content:center!important;
    width:52px!important;min-width:52px!important;height:52px!important;min-height:52px!important;
    padding:4px!important;border-radius:8px!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="rectangle"] .kskd-mobile-variant-color{
    display:flex!important;flex:0 1 auto!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:66px!important;height:auto!important;min-height:38px!important;
    padding:6px 10px!important;border-radius:8px!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="image"] .kskd-mobile-variant-color{
    display:flex!important;flex-direction:column!important;flex:0 0 auto!important;width:60px!important;
    min-width:60px!important;height:auto!important;min-height:58px!important;
    padding:4px!important;border-radius:8px!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="image"] .kskd-mobile-variant-dot{
    width:46px!important;height:46px!important;border-radius:6px!important;flex:0 0 46px!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="circle"] .kskd-mobile-variant-color:not(.kskd-show-label){
    display:flex!important;flex:0 0 42px!important;width:42px!important;min-width:42px!important;
    height:42px!important;min-height:42px!important;border-radius:50%!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="circle"] .kskd-mobile-variant-dot{
    width:30px!important;height:30px!important;border-radius:50%!important;
 }
 .kskd-shell .kskd-mobile-variant-picker:is([data-variant-button-style="square"],[data-variant-button-style="rectangle"],[data-variant-button-style="image"],[data-variant-button-style="circle"]) .kskd-mobile-variant-label{
    display:block!important;visibility:visible!important;font-size:11px!important;line-height:1.2!important;
    text-align:center!important;max-width:100%!important;overflow-wrap:anywhere!important;
 }
 .kskd-shell .kskd-mobile-variant-picker[data-variant-button-style="image"] .kskd-mobile-variant-color.kskd-show-label{
    min-height:74px!important;height:auto!important;
 }
}
/* Specificity guard for Studio's older !important swatch sizing. */
@media(min-width:851px){
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-square .kskd-variant-option{
    flex:0 0 52px!important;width:52px!important;height:52px!important;min-height:52px!important;
    padding:4px!important;border-radius:8px!important;border:1px solid #c9d8e7!important;background:#fff!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-rectangle .kskd-variant-option{
    flex:0 1 auto!important;width:auto!important;height:auto!important;min-height:37px!important;
    padding:7px 11px!important;border-radius:8px!important;border:1px solid #c9d8e7!important;background:#fff!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-image .kskd-variant-option{
    flex:0 0 auto!important;width:56px!important;height:auto!important;min-height:55px!important;
    padding:5px!important;border-radius:9px!important;border:1px solid #c9d8e7!important;background:#fff!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-circle .kskd-variant-option:not(.kskd-show-label){
    flex:0 0 42px!important;width:42px!important;height:42px!important;min-height:42px!important;
    padding:4px!important;border-radius:50%!important;border:1px solid #c9d8e7!important;background:#fff!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-circle .kskd-variant-swatch{
    width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group.kskd-variant-style-image .kskd-variant-swatch-photo{
    width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:6px!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="studio"] .kskd-variant-group:is(.kskd-variant-style-square,.kskd-variant-style-rectangle,.kskd-variant-style-circle,.kskd-variant-style-image) .kskd-variant-option.is-selected{
    border:2px solid #1769c2!important;background:#e8f2ff!important;
  }
}
