.wc-csm {
  margin: 2rem 0;
}
.wc-csm__title {
  margin: 0 0 1rem;
}
.wc-csm__color-label {
  display: inline-block;
  margin: 0 .6rem .75rem 0;
  font-weight: 600;
}
.wc-csm__color-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0;
  row-gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
.wc-csm__color-picker .wc-csm__color-label {
  margin: 0;
  padding: 0;
}
.wc-csm__color-picker > .wc-csm__swatches,
.wc-csm__color-picker > .wc-csm__color {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.wc-csm__color-picker > .wc-csm__color-preview {
  flex: 0 0 auto;
  width: 4rem;
  margin-bottom: 0;
}
.wc-csm__color {
  min-width: 14rem;
  margin-bottom: .75rem;
}
.wc-csm__color-preview {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 0 .9rem;
  object-fit: cover;
  border: 1px solid #d5d5d5;
}
.wc-csm__swatches,
.wc-csm__image-options {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .9rem;
}
.wc-csm__swatch {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 2px solid #d5d5d5;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.wc-csm__swatch.is-selected {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}
.wc-csm__swatch img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wc-csm__image-option {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 8rem;
  padding: .35rem .55rem;
  border: 1px solid #d5d5d5;
  background: #fff;
  cursor: pointer;
}
.wc-csm__image-option img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}
.wc-csm__image-option.is-selected {
  border-color: #111;
  box-shadow: 0 0 0 2px #111;
}
.wc-csm__image-option span {
  font-size: .85rem;
}
.wc-csm__table-wrap {
  overflow-x: auto;
}
.wc-csm__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.wc-csm__table th,
.wc-csm__table td {
  padding: 10px 20px;
  border: 1px solid #ddd;
  text-align: left;
}
.wc-csm__table th:not(:last-child),
.wc-csm__table td:not(:last-child) {
  width: 1%;
  white-space: nowrap;
}
.wc-csm__table th:last-child,
.wc-csm__table td:last-child {
  width: auto;
}
.wc-csm__table thead th {
  background: #f3f3f3;
  font-size: .78rem !important;
  text-align: center;
}
.wc-csm__table tbody .wc-csm__size-col,
.wc-csm__table tbody .wc-csm__price-col,
.wc-csm__table tbody .wc-csm__total-col {
  text-align: right;
}
.wc-csm__table tbody .wc-csm__quantity-col {
  text-align: center;
}
.wc-csm__table tbody tr:nth-child(even) {
  background: #fafafa;
}
.wc-csm__color-total {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
  font-weight: 600;
}
.wc-csm__notice {
  margin: 0 0 .8rem;
  padding: .65rem .8rem;
  border-radius: 3px;
  font-size: .9rem;
}
.wc-csm__notice--success {
  color: #176b38;
  background: #edf8f0;
}
.wc-csm__notice--error {
  color: #9b1c1c;
  background: #fff0f0;
}
.wc-csm button[hidden],
.wc-csm [hidden] {
  display: none !important;
}
.wc-csm__table input[type="number"] {
  width: 5.5rem;
  min-height: 2.5rem;
}
.wc-csm__submit {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: .8rem 1.4rem;
  cursor: pointer;
}
.wc-csm__unavailable {
  color: #777;
}
.wc-csm-error {
  padding: .75rem 1rem;
  border-left: 4px solid #b32d2e;
  background: #fff5f5;
}
.wc-csm-auto-product form.variations_form {
  display: none !important;
}
.wc-csm-auto-product .single_variation_wrap,
.wc-csm-auto-product .woocommerce-variation-add-to-cart,
.wc-csm-auto-product .wd-single-add-cart,
.wc-csm-auto-product form.cart:not(.wc-csm__form) {
  display: none !important;
}
.wc-csm__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 0;
  padding: 0;
}
.wc-csm__swatch {
  position: relative;
  box-sizing: border-box;
  width: var(--wc-csm-swatch-width, 38px) !important;
  height: var(--wc-csm-swatch-height, 38px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0;
  margin: 0;
  border: 2px solid #d5d5d5;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.wc-csm__swatch-bg,
.wc-csm__swatch-bg img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wc-csm__swatch-bg,
.wc-csm__swatch-bg img {
  box-shadow: 0 0 0 .5px #565656 inset;
}
.wc-csm__swatch.is-selected {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.wc-csm-shape-rounded .wc-csm__swatch,
.wc-csm-shape-rounded .wc-csm__swatch-bg,
.wc-csm-shape-rounded .wc-csm__swatch-bg img {
  border-radius: 5px;
}
.wc-csm-shape-circle .wc-csm__swatch,
.wc-csm-shape-circle .wc-csm__swatch-bg,
.wc-csm-shape-circle .wc-csm__swatch-bg img {
  border-radius: 50%;
}
.wc-csm-shape-rectangular .wc-csm__swatch,
.wc-csm-shape-rectangular .wc-csm__swatch-bg,
.wc-csm-shape-rectangular .wc-csm__swatch-bg img {
  border-radius: 0;
}
.wc-csm-shape-oval .wc-csm__swatch {
  width: var(--wc-csm-swatch-width, 52px) !important;
  height: var(--wc-csm-swatch-height, 32px) !important;
  border-radius: 999px;
}
.wc-csm-shape-oval .wc-csm__swatch-bg,
.wc-csm-shape-oval .wc-csm__swatch-bg img {
  border-radius: 999px;
}
.wc-csm__clear {
  margin: .25rem 0 .9rem;
}
.wc-csm__clear--top {
  box-sizing: border-box;
  padding: 2px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #565656 !important;
  color: #fff !important;
  vertical-align: baseline;
  line-height: 13px !important;
  font-size: 13px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wc-csm__clear--top:hover,
.wc-csm__clear--top:focus {
  background-color: #bb141a !important;
  color: #fff !important;
}
.wc-csm button[hidden],
.wc-csm [hidden] {
  display: none !important;
}
.wc-csm.wc-csm-no-selection .wc-csm__actions,
.wc-csm.wc-csm-no-selection [data-size-table] {
  display: none !important;
}
.wc-csm__actions {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  margin-top: 1rem;
}
.wc-csm__actions .wc-csm__submit {
  flex: 1 1 auto;
  margin-top: 0;
}
.wc-csm__clear--bottom {
  flex: 0 0 auto;
  margin: 0;
}
.wc-csm__submit.wc-csm-has-button-bg {
  background-color: var(--wc-csm-button-bg) !important;
}
.wc-csm__submit.wc-csm-has-button-text {
  color: var(--wc-csm-button-text) !important;
}
.wc-csm__submit.wc-csm-has-button-bg-hover:hover,
.wc-csm__submit.wc-csm-has-button-bg-hover:focus {
  background-color: var(--wc-csm-button-bg-hover) !important;
}
.wc-csm__submit.wc-csm-has-button-text-hover:hover,
.wc-csm__submit.wc-csm-has-button-text-hover:focus {
  color: var(--wc-csm-button-text-hover) !important;
}
.wc-csm__quantity {
  display: inline-flex;
  align-items: center;
  min-height: 2rem !important;
  font-size: .85rem !important;
}
.wc-csm__quantity button {
  width: 1.7rem !important;
  height: 2rem !important;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem !important;
  font-weight: 600;
}
.wc-csm__quantity input.qty {
  width: 2.7rem !important;
  min-height: 2rem !important;
  padding: .2rem !important;
  text-align: center;
  font-size: .85rem !important;
  border: 0 !important;
  box-shadow: none !important;
}
.wc-csm__quantity {
  border: 0 !important;
  box-shadow: none !important;
}
.wc-csm__submit:disabled {
  opacity: .65;
  cursor: wait;
}
.wc-csm__color-picker .wc-csm__color-label {
  margin: 0 10px 20px 0;
  padding: 0;
}
.wc-csm__clear--top {
  margin-bottom: 20px !important;
}
.wc-csm__color-picker > .wc-csm__swatches,
.wc-csm__color-picker > .wc-csm__color {
  margin-bottom: 20px;
}
.wc-csm__table {
  margin-bottom: 15px;
}
.wc-csm__color-total {
  margin: 0;
}
.wc-csm-table-style-minimal .wc-csm__table th,
.wc-csm-table-style-minimal .wc-csm__table td {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
}
.wc-csm-table-style-minimal .wc-csm__table thead th {
  border-bottom: 2px solid #cfd4da;
}
.wc-csm-table-style-striped .wc-csm__table tbody tr:nth-child(even) {
  background: #f6f8fa;
}
.wc-csm-table-style-modern .wc-csm__table {
  border-collapse: separate;
  border-spacing: 0 6px;
}
.wc-csm-table-style-modern .wc-csm__table thead th {
  border: 0;
  background: #f3f4f6;
}
.wc-csm-table-style-modern .wc-csm__table tbody td,
.wc-csm-table-style-modern .wc-csm__table tbody th {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.wc-csm-table-style-modern .wc-csm__table tbody th:first-child,
.wc-csm-table-style-modern .wc-csm__table tbody td:first-child {
  border-left: 1px solid #e5e7eb;
}
.wc-csm-table-style-modern .wc-csm__table tbody td:last-child {
  border-right: 1px solid #e5e7eb;
}
@media (max-width: 767px) {
  .wc-csm-hide-line-total-mobile .wc-csm__total-col,
  .wc-csm-hide-color-total-mobile [data-color-total] {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .wc-csm-hide-line-total-tablet .wc-csm__total-col,
  .wc-csm-hide-color-total-tablet [data-color-total] {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .wc-csm-hide-line-total-desktop .wc-csm__total-col,
  .wc-csm-hide-color-total-desktop [data-color-total] {
    display: none !important;
  }
}