.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__attribute-hex {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.wc-csm__attribute-visual {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-width: 3.5rem;
  text-align: center;
  vertical-align: middle;
}
.wc-csm__attribute-preview {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 .5px #565656 inset;
}
.wc-csm__attribute-image {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
}
.wc-csm__attribute-name {
  display: block;
  margin: 0;
}
.wc-csm__color-cell--clickable {
  cursor: pointer;
}
.wc-csm__image-tooltip {
  position: fixed;
  z-index: 999999;
  width: 180px;
  height: 180px;
  padding: 5px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.wc-csm__image-tooltip--compact {
  width: 120px;
  height: 120px;
}
.wc-csm__image-tooltip:not([hidden]) {
  pointer-events: auto;
}
.wc-csm__image-tooltip:not(.wc-csm__image-tooltip--clickable) {
  pointer-events: none;
}
.wc-csm__image-tooltip--clickable {
  cursor: pointer;
}
.wc-csm__image-tooltip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wc-csm__image-tooltip[hidden] {
  display: none !important;
}
.wc-csm__table-image-preview {
  display: none;
  margin: 0 0 12px;
  text-align: center;
}
.wc-csm__table-image-preview button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  min-height: 120px;
  padding: 6px;
  border: 1px solid #d5d5d5;
  background: #fff;
  cursor: pointer;
}
.wc-csm__table-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.wc-csm__table-image-preview:not([hidden]) {
  display: block;
}
@media (min-width: 768px) {
  .wc-csm__table-image-preview[data-mobile-only="1"] {
    display: none !important;
  }
}
.wc-csm__lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .82);
}
.wc-csm__lightbox-panel {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.wc-csm__lightbox[hidden] {
  display: none !important;
}
.wc-csm__lightbox img {
  display: block;
  max-width: min(88vw, 1160px);
  max-height: calc(88vh - 24px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}
.wc-csm__lightbox .wc-csm__lightbox-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #222;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.wc-csm__lightbox--plugin .wc-csm__lightbox-close {
  background: #565656;
  color: #fff;
}
.wc-csm__lightbox--plugin .wc-csm__lightbox-close:hover,
.wc-csm__lightbox--plugin .wc-csm__lightbox-close:focus-visible {
  background: #bb141a;
  color: #fff;
}
.wc-csm__lightbox-close:hover,
.wc-csm__lightbox-close:focus-visible {
  background: #fff;
  color: #bb141a;
}
body.wc-csm-lightbox-open {
  overflow: hidden;
}
/* Keep the WoodMart/WooCommerce image-lightbox close control on top of the
 * opened variation image instead of outside the image frame. */
body.wc-csm-theme-lightbox-open .mfp-content,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-content,
body.wc-csm-theme-lightbox-open .mfp-figure,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-figure {
  position: relative !important;
}
body.wc-csm-theme-lightbox-open .mfp-close,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-close,
body.wc-csm-theme-lightbox-open .mfp-image-holder .mfp-close,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-image-holder .mfp-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #222 !important;
  font-size: 30px !important;
  line-height: 42px !important;
  text-align: center !important;
  opacity: 1 !important;
}
body.wc-csm-theme-lightbox-open .mfp-close:hover,
body.wc-csm-theme-lightbox-open .mfp-close:focus-visible,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-close:hover,
.mfp-wrap.wc-csm-clickable-tooltip .mfp-close:focus-visible {
  background: #fff !important;
  color: #bb141a !important;
}
.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),
.wc-csm-auto-product a.added_to_cart,
.wc-csm-auto-product a.wc-forward.added_to_cart {
  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__swatches--attribute .wc-csm__attribute-swatch {
  width: auto !important;
  min-width: 3rem !important;
  height: auto !important;
  min-height: 2.35rem !important;
  padding: .45rem .75rem !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: inherit;
  line-height: 1.2;
}
.wc-csm__swatches--attribute .wc-csm__attribute-swatch.is-selected {
  border-color: currentColor;
}
.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__submit.wc-csm-feedback-loading {
  position: relative;
  opacity: .78;
  cursor: wait;
}
.wc-csm__submit.wc-csm-feedback-loading::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .55em;
  vertical-align: -.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wc-csm-spin .7s linear infinite;
}
.wc-csm__submit.wc-csm-feedback-progress {
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.42), rgba(255,255,255,.08)) !important;
  background-size: 220% 100%;
  animation: wc-csm-progress-shift 1.1s linear infinite;
}
.wc-csm__submit.wc-csm-feedback-progress::after {
  display: none;
}
.wc-csm__submit.wc-csm-feedback-success {
  box-shadow: 0 0 0 3px rgba(35, 134, 54, .22);
}
.wc-csm__view-cart[hidden] {
  display: none !important;
}
.wc-csm__view-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}
.wc-csm__button-icon {
  display: none;
}
@keyframes wc-csm-spin {
  to { transform: rotate(360deg); }
}
@keyframes wc-csm-progress-shift {
  from { background-position: -20% 0; }
  to { background-position: 200% 0; }
}
@media (max-width: 767px) {
  .wc-csm-mobile-icons .wc-csm__button-text {
    display: none;
  }
  .wc-csm-mobile-icons .wc-csm__button-icon {
    display: inline-block;
    font-size: 1.25em;
    line-height: 1;
  }
}
.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;
  }
}