.vcs {
  margin-top: 1.25rem;
  border: 1px solid #e2e7e4;
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
}

.vcs__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  background: #f7f9f8;
  border-bottom: 1px solid #e2e7e4;
}

.vcs__heading h3 {
  margin: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.vcs__heading p {
  margin: .18rem 0 0;
  color: #66706b;
  font-size: .75rem;
  line-height: 1.4;
}

.vcs__optional {
  flex: none;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #e4e8e6;
  color: #4b5563;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.vcs__group {
  border-bottom: 1px solid #e2e7e4;
  background: #fff;
}

.vcs__group.has-selection { box-shadow: inset 3px 0 0 #147a4b; }
.vcs:not(.is-groups-expanded) .vcs__group.is-group-overflow:not(.has-selection) { display: none; }

.vcs__product {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 4.8rem;
  padding: .6rem 1rem;
}

.vcs__product--simple {
  grid-template-columns: 3.6rem minmax(0, 1fr) auto 5.85rem;
  transition: background-color .15s ease;
}
.vcs__product--simple.is-selected { background: #f0f8f3; }
.vcs__product--simple.is-unavailable { background: #f7f8f8; }
.vcs__product--simple.is-unavailable .vcs__identity,
.vcs__product--simple.is-unavailable .vcs__range,
.vcs__product--simple.is-unavailable .vcs__quantity { opacity: .48; }

.vcs__image {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .45rem;
  overflow: hidden;
  background: #f7f9f8;
}

.vcs__image img { width: 100%; height: 100%; object-fit: contain; }
.vcs__identity { display: grid; min-width: 0; gap: .15rem; }
.vcs__name { color: #111827; font-size: .87rem; font-weight: 680; line-height: 1.3; }
.vcs__name:hover { color: #147a4b; }
.vcs__count { color: #7a827e; font-size: .68rem; line-height: 1.25; }
.vcs__range,
.vcs__price { color: #111827; font-size: .82rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.vcs__range del,
.vcs__price del { color: #9ca3af; font-weight: 400; }
.vcs__range ins,
.vcs__price ins { text-decoration: none; }

.vcs__options { border-top: 1px solid #edf0ee; }
.vcs__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5.85rem;
  align-items: center;
  gap: .65rem;
  min-height: 3.05rem;
  padding: .45rem 1rem .45rem 1.25rem;
  border-bottom: 1px solid #edf0ee;
  transition: background-color .15s ease;
}

.vcs__option:last-child { border-bottom: 0; }
.vcs__option.is-selected { background: #f0f8f3; }
.vcs__group:not(.is-expanded) .vcs__option.is-overflow:not(.is-selected) { display: none; }
.vcs__option.is-unavailable { background: #f7f8f8; }
.vcs__option.is-unavailable .vcs__option-info,
.vcs__option.is-unavailable .vcs__price,
.vcs__option.is-unavailable .vcs__quantity { opacity: .48; }

.vcs__option-info { display: grid; min-width: 0; gap: .1rem; }
.vcs__option-name { overflow: hidden; color: #29312d; font-size: .75rem; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; }
.vcs__stock { color: #147a4b; font-size: .65rem; line-height: 1.25; }
.vcs__option.is-unavailable .vcs__stock { color: #6b7280; }

.vcs__quantity { display: grid; grid-template-columns: 1.65rem 2.25rem 1.65rem; height: 1.85rem; }
.vcs__quantity button,
.vcs__quantity input {
  min-width: 0;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  text-align: center;
  font-size: .76rem;
}
.vcs__quantity button:first-child { border-radius: .35rem 0 0 .35rem; }
.vcs__quantity button:last-child { border-radius: 0 .35rem .35rem 0; }
.vcs__quantity input { width: 100%; padding: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.vcs__quantity input::-webkit-outer-spin-button,
.vcs__quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.vcs__quantity :disabled { background: #f1f3f2; color: #a0a7a3; }

.vcs__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 2.3rem;
  padding: .45rem .75rem;
  border: 0;
  border-top: 1px solid #edf0ee;
  background: #fbfcfb;
  color: #186543;
  font-size: .7rem;
  font-weight: 700;
}
.vcs__expand:hover { background: #f1f7f3; }
.vcs__expand:focus-visible { outline: 2px solid #147a4b; outline-offset: -3px; }
.vcs__expand span:last-child { font-size: 1rem; line-height: 1; transition: transform .15s ease; }
.vcs__expand[aria-expanded="true"] span:last-child { transform: rotate(180deg); }
.vcs__expand--groups { border-top: 0; border-bottom: 1px solid #e2e7e4; background: #f7f9f8; }

.vcs__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.65rem;
  padding: .7rem 1rem;
  background: #f2f8f4;
}
.vcs__summary-copy { display: grid; min-width: 0; gap: .08rem; }
.vcs__summary-label { color: #202824; font-size: .82rem; font-weight: 750; line-height: 1.25; }
.vcs__summary-copy small { color: #66706b; font-size: .68rem; line-height: 1.3; }
.vcs__total { flex: none; color: #126f46; font-size: 1.05rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.vcs__total .woocommerce-Price-currencySymbol { font-size: .82em; }

.vcs__message { min-height: 0; margin: 0; padding: 0 1rem; font-size: .78rem; font-weight: 600; }
.vcs__message:not(:empty) { min-height: 2.4rem; padding-top: .7rem; padding-bottom: .7rem; border-top: 1px solid #e2e7e4; }
.vcs__message.is-error { color: #991b1b; background: #fef2f2; }
.vcs__message.is-success { color: #166534; background: #f0fdf4; }

@media (max-width: 639px) {
  .vcs__heading { padding: .8rem .75rem; }
  .vcs__product { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .55rem; min-height: 4.1rem; padding: .55rem .75rem; }
  .vcs__product--simple { grid-template-columns: 3rem minmax(4.5rem, 1fr) auto 5.05rem; }
  .vcs__image { width: 3rem; height: 3rem; }
  .vcs__name { font-size: .8rem; }
  .vcs__range,
  .vcs__price { font-size: .74rem; }
  .vcs__option { grid-template-columns: minmax(4.5rem, 1fr) auto 5.05rem; gap: .4rem; padding: .45rem .65rem .45rem .75rem; }
  .vcs__option-name { white-space: normal; }
  .vcs__quantity { grid-template-columns: 1.45rem 2.05rem 1.45rem; }
  .vcs__summary { min-height: 3.4rem; padding: .65rem .75rem; }
  .vcs__total { font-size: .98rem; }
}