.cs-native-purchase form.ckcp-image-variation-form { width: 100%; max-width: 100%; min-width: 0; }
.cs-native-purchase .ckcp-image-variation-form table.variations,
.cs-native-purchase .ckcp-image-variation-form table.variations tbody,
.cs-native-purchase .ckcp-image-variation-form table.variations tr { display: block; width: 100%; max-width: 100%; min-width: 0; }
.cs-native-purchase .ckcp-image-variation-form table.variations tr { margin-bottom: 18px; }
.cs-native-purchase .ckcp-image-variation-form table.variations tr > * { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; text-align: left; }
.cs-native-purchase .ckcp-image-variation-form table.variations label { display: block; margin-bottom: 9px; }
.cs-native-purchase .ckcp-image-variation-form select:not(.ckcp-picture-select-enhanced) { width: 100%; max-width: 100%; }
.ckcp-variant-pictures { margin: 10px 0 20px; min-width: 0; width: 100%; max-width: 100%; }
.ckcp-variant-picture-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; max-width: 100%; width: 100%; }
.ckcp-variant-picture { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 7px; min-width: 0; border: 1px solid #d7dbd8; border-radius: 7px; background: #fff; color: #282d2a; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ckcp-variant-picture img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 3px; }
.ckcp-variant-picture span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.ckcp-variant-picture:hover { border-color: #68756d; background: #f7f9f7; }
.ckcp-variant-picture[aria-pressed="true"] { border: 2px solid #354c3d; padding: 6px; background: #f0f5f1; }
.ckcp-variant-picture:focus-visible { outline: 2px solid #354c3d; outline-offset: 3px; }
.ckcp-variant-picture:active { transform: scale(.98); }
.ckcp-variant-picture:disabled { opacity: .4; cursor: default; }
.ckcp-variant-selected { display: flex; align-items: center; gap: 18px; margin: 16px 0 0; padding: 12px 0; border-top: 1px solid #e3e7e3; }
.ckcp-variant-selected[hidden] { display: none; }
.ckcp-variant-selected img { display: block; width: 130px; height: 130px; object-fit: contain; background: #fff; }
.ckcp-variant-selected figcaption { font-size: 13px; line-height: 1.5; }
select.ckcp-picture-select-enhanced { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
@media (max-width: 600px) {
  .ckcp-variant-picture-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .ckcp-variant-picture { padding: 5px; }
  .ckcp-variant-picture[aria-pressed="true"] { padding: 4px; }
  .ckcp-variant-picture span { font-size: 10px; }
  .ckcp-variant-selected img { width: 100px; height: 100px; }
}