/* KSK Designer 0.9.8 — mirrored WooCommerce variants, never duplicate native form inputs. */
.kskd-shell .kskd-variant-chooser[hidden]{display:none!important}
.kskd-shell .kskd-variant-chooser{
  box-sizing:border-box;min-width:0;max-width:100%;padding:10px 7px;
  border:1px solid #dbe5ef;border-radius:12px;background:#f8fbff;
  color:#263e58;overflow:hidden;align-self:stretch;
}
.kskd-shell .kskd-variant-chooser-content{display:flex;flex-direction:column;gap:10px;min-width:0}
.kskd-shell .kskd-variant-group{min-width:0;display:flex;flex-direction:column;gap:6px}
.kskd-shell .kskd-variant-heading{display:block;font-size:11px;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.kskd-shell .kskd-variant-options{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start;min-width:0}
.kskd-shell .kskd-variant-option{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;max-width:100%;min-height:34px!important;margin:0!important;padding:5px 8px!important;
  border:1px solid #cfdaea!important;border-radius:9px!important;
  background:#fff!important;color:#263e58!important;font-size:11px!important;font-weight:600!important;
  line-height:1.25!important;letter-spacing:normal!important;text-transform:none!important;
  box-shadow:none!important;cursor:pointer!important;white-space:normal!important;overflow-wrap:anywhere;
}
.kskd-shell .kskd-variant-option.is-selected{border-color:#1769c2!important;background:#e7f2ff!important;box-shadow:0 0 0 1px #1769c2 inset!important;color:#164d89!important}
.kskd-shell .kskd-variant-option:disabled{opacity:.35!important;cursor:not-allowed!important}
.kskd-shell .kskd-variant-option:focus-visible{outline:2px solid #1769c2!important;outline-offset:2px!important}
.kskd-shell .kskd-variant-swatch{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1px solid #a4b4c5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kskd-shell .kskd-variant-swatch-neutral{background:linear-gradient(135deg,#d2dbe5 50%,#a1acb9 50%)}
.kskd-shell .kskd-variant-reset{background:transparent!important;border:0!important;box-shadow:none!important;color:#1769c2!important;font-size:11px!important;text-decoration:underline!important;text-underline-offset:2px!important;padding:5px!important;cursor:pointer!important;text-align:left!important}
/* Keep native select/form inputs attached so WooCommerce's variation matching, validation, price, stock and add-to-cart still work. */
@media (min-width:851px){
 body.kskd-product .kskd-product-row .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form table.variations,
 body.kskd-product .kskd-product-row .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form .variations:not(.woocommerce-variation){display:none!important}
 /* Lightbox reparents shell and summary into modal, still siblings. */
 .kskd-lightbox .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form table.variations,
 .kskd-lightbox .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form .variations:not(.woocommerce-variation){display:none!important}
 /* Don't show Woo reset link floating without its hidden variation selectors. */
 body.kskd-product .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form .reset_variations,
 .kskd-lightbox .kskd-shell.kskd-variant-proxy-active ~ .summary form.variations_form .reset_variations{display:none!important}
}
@media (min-width:851px){
 /* Wide editors: side rails or a single compact box before the module toolbar. */
 @container kskd-shell (min-width:880px){
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"]>.kskd-workspace{
    display:grid!important;grid-template-columns:120px minmax(190px,285px) minmax(0,1fr)!important;
  }
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-box"]>.kskd-workspace{
    display:grid!important;grid-template-columns:188px minmax(190px,285px) minmax(0,1fr)!important;
  }
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-variant-chooser{grid-column:1!important;grid-row:1!important;order:0!important;max-height:100%;overflow-y:auto}
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-tools{grid-column:2!important;grid-row:1!important;order:0!important}
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-stage-wrap{grid-column:3!important;grid-row:1!important;order:0!important}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-chooser-content{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5px}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-group-other,
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-reset{grid-column:1/-1}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-options{flex-direction:column!important;flex-wrap:nowrap!important;max-height:min(65dvh,580px);overflow-y:auto;scrollbar-width:thin}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-option{width:100%!important;padding:5px 2px!important;flex-direction:column!important;font-size:10px!important;gap:3px!important}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-rails"] .kskd-variant-heading{font-size:10px!important;text-align:center}
  .kskd-shell.kskd-variant-proxy-active[data-variant-placement="left-box"] .kskd-variant-option{flex:0 1 auto!important}
 }
 /* Narrow editor next to Woo product summary: retain usable canvas width. */
 @container kskd-shell (max-width:879px){
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;align-items:start!important}
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-variant-chooser{grid-column:1/-1!important;grid-row:1!important;order:0!important;min-height:0!important;padding:8px!important}
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-tools{grid-column:1!important;grid-row:2!important;order:0!important}
  .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-stage-wrap{grid-column:2!important;grid-row:2!important;order:0!important}
  .kskd-shell.kskd-variant-proxy-active .kskd-variant-chooser-content{flex-direction:row!important;flex-wrap:wrap!important;gap:12px!important}
  .kskd-shell.kskd-variant-proxy-active .kskd-variant-group{flex:1 1 150px}
  .kskd-shell.kskd-variant-proxy-active .kskd-variant-reset{align-self:end}
 }
}
/* Phones keep the native WooCommerce variant selectors in their original form. */
@media(max-width:850px){.kskd-shell .kskd-variant-chooser{display:none!important}}
/* On laptop widths retain the established stacked preview/tools behaviour.
   Only the wide desktop uses permanent rails beside the tools. */
@media(min-width:851px) and (max-width:1100px){
 .kskd-shell.kskd-variant-proxy-active>.kskd-workspace{
   display:flex!important;flex-direction:column!important;align-items:stretch!important;
   grid-template-columns:none!important;overflow:visible!important;
 }
 .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-variant-chooser{
   order:0!important;width:100%!important;max-height:none!important;overflow:visible!important;
 }
 .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-stage-wrap{
   order:1!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;
 }
 .kskd-shell.kskd-variant-proxy-active>.kskd-workspace>.kskd-tools{
   order:2!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:100%!important;
 }
 .kskd-shell.kskd-variant-proxy-active .kskd-variant-chooser-content{
   display:flex!important;flex-direction:row!important;gap:12px!important;flex-wrap:wrap!important;
 }
 .kskd-shell.kskd-variant-proxy-active .kskd-variant-group{flex:1 1 150px}
 .kskd-shell.kskd-variant-proxy-active .kskd-variant-options{flex-flow:row wrap!important;max-height:none!important}
 .kskd-shell.kskd-variant-proxy-active .kskd-variant-option{flex-direction:row!important;width:auto!important}
}

/* 1.1.47: image swatches for WooCommerce pattern variants. */
.kskd-shell .kskd-variant-swatch-photo{background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;background-color:#fff!important}

/* 1.1.50: opt-in caption under an individual color/pattern swatch. */
.kskd-shell .kskd-variant-option.kskd-show-label{
  flex-direction:column!important;gap:4px!important;height:auto!important;
  min-height:48px!important;padding:5px 6px!important;text-align:center!important;
}
.kskd-shell .kskd-variant-option.kskd-show-label .kskd-variant-option-label{
  display:block!important;font-size:10px!important;line-height:1.2!important;
  text-align:center!important;max-width:100%!important;overflow-wrap:anywhere;
}