.iss-configurator {
  --iss-cfg-border: #d8d5cd;
  --iss-cfg-muted: #5c5a55;
  --iss-cfg-accent: #1e1e1e;
  --iss-cfg-surface: #f6f4ef;
  margin: 24px 0;
  border: 1px solid var(--iss-cfg-border);
  background: var(--iss-cfg-surface);
  padding: 20px;
}

.iss-configurator__header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--iss-cfg-border);
}

.iss-configurator__eyebrow,
.iss-configurator__summary-label {
  display: block;
  margin-bottom: 5px;
  color: var(--iss-cfg-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.iss-configurator__title {
  font-size: 1.32rem;
  line-height: 1.15;
  margin: 0 0 7px;
}

.iss-configurator__hint,
.iss-configurator__note {
  color: var(--iss-cfg-muted);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
}

.iss-configurator__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

.iss-configurator__group {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--iss-cfg-border);
  padding: 18px 0;
}

.iss-configurator__group--dimension {
  grid-column: auto;
}

.iss-configurator__group > legend {
  width: 100%;
  color: #272824;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 10px;
}

.iss-configurator__required {
  color: #b23b2e;
  margin-left: 4px;
}

.iss-configurator__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.iss-configurator__values--visual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.iss-configurator__value {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--iss-cfg-border);
  background: #fff;
  padding: 11px 12px;
  cursor: pointer;
  line-height: 1.35;
  font-size: .84rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.iss-configurator__value:hover,
.iss-configurator__swatch:hover {
  border-color: #97958e;
}

.iss-configurator__value.is-selected,
.iss-configurator__value:has(input:checked) {
  border-color: var(--iss-cfg-accent);
  background: #faf9f6;
  box-shadow: inset 0 0 0 1px var(--iss-cfg-accent);
}

.iss-configurator__value input {
  margin: 0;
  accent-color: var(--iss-cfg-accent);
}

.iss-configurator__value--visual {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 64px;
  padding: 7px;
}

.iss-configurator__value--visual input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.iss-configurator__value--visual.iss-configurator__value--no-media {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 11px 12px;
}

.iss-configurator__value--visual.iss-configurator__value--no-media .iss-configurator__value-price {
  white-space: normal;
}

.iss-configurator__value-media {
  display: block;
  inline-size: 42px;
  block-size: 42px;
  overflow: hidden;
  border: 1px solid #e4e1da;
  background: #f3f1ec;
}

.iss-configurator__value-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iss-configurator__value small {
  color: var(--iss-cfg-muted);
}

.iss-configurator__value-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.iss-configurator__value-price {
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 700;
}

.iss-configurator__value--disabled {
  opacity: .45;
  cursor: not-allowed;
}

.iss-configurator__select {
  width: 100%;
  max-width: none;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--iss-cfg-border);
  background: #fff;
  color: #272824;
  font: inherit;
}

.iss-configurator__select option:disabled {
  background: #efede8;
  color: #9b9992;
}

.iss-configurator__dimension {
  display: flex;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--iss-cfg-border);
  background: #fff;
}

.iss-configurator__dimension:focus-within {
  border-color: var(--iss-cfg-accent);
  box-shadow: inset 0 0 0 1px var(--iss-cfg-accent);
}

.iss-configurator__dimension-input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 9px 10px;
  background: transparent;
  font: inherit;
  outline: 0;
}

.iss-configurator__dimension-input--invalid {
  color: #b23b2e;
}

.iss-configurator__dimension-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--iss-cfg-border);
  color: var(--iss-cfg-muted);
  font-size: .82rem;
}

.iss-configurator__dimension-help {
  display: block;
  margin-top: 5px;
  color: var(--iss-cfg-muted);
  font-size: .76rem;
}

.iss-configurator__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.iss-configurator__swatch {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  margin: 0;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--iss-cfg-border);
  background: #fff;
  cursor: pointer;
}

.iss-configurator__swatch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.iss-configurator__swatch.is-selected,
.iss-configurator__swatch:has(input:checked) {
  border-color: var(--iss-cfg-accent);
  box-shadow: inset 0 0 0 1px var(--iss-cfg-accent);
}

.iss-configurator__swatch-media {
  display: block;
  inline-size: 42px;
  block-size: 42px;
  overflow: hidden;
  border: 1px solid #e4e1da;
  background: #f3f1ec;
}

.iss-configurator__swatch-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iss-configurator__swatch-label {
  min-width: 0;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.iss-configurator__swatch--disabled {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(1);
}

.iss-configurator__values--collapsed > .iss-configurator__item--limited:not(.is-selected) {
  display: none;
}

.iss-configurator__show-more {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 10px;
  padding: 0 13px;
  border: 1px solid #aaa79f;
  background: transparent;
  color: #272824;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.iss-configurator__show-more:hover {
  border-color: var(--iss-cfg-accent);
  background: #fff;
}

@media (max-width: 575px) {
  .iss-configurator {
    margin-inline: -2px;
    padding: 16px;
  }

  .iss-configurator__body {
    grid-template-columns: 1fr;
  }

  .iss-configurator__group--dimension {
    grid-column: 1 / -1;
  }

  .iss-configurator__swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iss-configurator__values--visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iss-configurator__values:not(.iss-configurator__values--visual) {
    grid-template-columns: 1fr;
  }
}

.iss-configurator__footer {
  position: sticky;
  bottom: 10px;
  z-index: 4;
  margin: 18px -8px -8px;
  padding: 11px 14px;
  border: 1px solid #161714;
  background: #252622;
  color: #fff;
  box-shadow: 0 8px 24px rgba(22, 23, 20, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
}

.iss-configurator__summary-wrap {
  display: none;
}

.iss-configurator__summary-label {
  display: none;
}

.iss-configurator__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: .78rem;
  line-height: 1.35;
  color: #e4e4df;
}

.iss-configurator__price {
  display: flex;
  gap: 7px;
  align-items: baseline;
  text-align: right;
}

.iss-configurator__price-label {
  font-size: .7rem;
  color: #b9b9b4;
}

.iss-configurator__price strong {
  font-size: 1.28rem;
  white-space: nowrap;
}

.iss-configurator__note {
  flex: 1 1 100%;
  min-height: 1.2em;
  color: #d2d2cd;
}

.iss-configurator__note:empty {
  display: none;
}

.iss-configurator__note--error {
  color: #b23b2e;
}

.iss-configurator--loading .iss-configurator__price,
.iss-configurator--loading .iss-configurator__summary {
  opacity: .55;
}

.iss-configurator--quote {
  padding: 24px;
  border-left: 4px solid #d45518;
}

.iss-configurator--quote .iss-configurator__header {
  margin-bottom: 18px;
}

.iss-configurator__quote-form,
.iss-configurator__quote-grid {
  display: grid;
  gap: 14px;
}

.iss-configurator__quote-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iss-configurator__quote-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #292b29;
  font-size: .82rem;
  font-weight: 700;
}

.iss-configurator__quote-grid input,
.iss-configurator__quote-grid select,
.iss-configurator__quote-grid textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #c9c8c2;
  border-radius: 0;
  background: #fff;
  padding: 10px 12px;
  color: #252622;
  font: inherit;
  font-weight: 500;
}

.iss-configurator__quote-grid textarea {
  min-height: 104px;
  resize: vertical;
}

.iss-configurator__quote-wide {
  grid-column: 1 / -1;
}

.iss-configurator__quote-trap {
  position: absolute;
  left: -9999px;
}

.iss-configurator__quote-status {
  margin-bottom: 16px;
  border-left: 3px solid #47735c;
  background: #edf4ef;
  padding: 12px 14px;
}

.iss-configurator__quote-status--error {
  border-left-color: #b23b2e;
  background: #faeeee;
}

.iss-configurator__quote-link {
  display: inline-flex;
  min-height: 46px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid #252622;
  background: #252622;
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.iss-configurator__quote-link:hover,
.iss-configurator__quote-link:focus-visible {
  border-color: #d45518;
  background: #d45518;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 575px) {
  .iss-configurator__quote-grid {
    grid-template-columns: 1fr;
  }

  .iss-configurator__quote-wide {
    grid-column: auto;
  }
}

.iss-configurator-admin-row {
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0;
}

.iss-configurator-admin-row:last-child {
  border-bottom: 0;
}

.iss-cart-config {
  width: min(100%, 44rem);
  margin-top: .75rem;
  border: 1px solid #d9d8d2;
  background: #faf9f6;
  color: #292b29;
}

.iss-cart-config__header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid #d9d8d2;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.iss-cart-config__mark {
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  background: #2d302d;
  color: #fff;
  font-size: .72rem;
}

.iss-cart-config__content {
  padding: .25rem .8rem .55rem;
}

.iss-cart-config__list {
  margin: 0;
}

.iss-cart-config__row {
  display: grid;
  grid-template-columns: minmax(8rem, .38fr) minmax(0, 1fr);
  gap: .8rem;
  padding: .48rem 0;
  border-bottom: 1px solid #e5e3dc;
}

.iss-cart-config__row:last-child {
  border-bottom: 0;
}

.iss-cart-config__row dt,
.iss-cart-config__row dd {
  margin: 0;
  line-height: 1.4;
}

.iss-cart-config__row dt {
  color: #6c706b;
  font-size: .78rem;
  font-weight: 600;
}

.iss-cart-config__row dd {
  overflow-wrap: anywhere;
  color: #292b29;
  font-size: .82rem;
}

.iss-cart-config__image {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.iss-cart-config__image img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .iss-cart-config__row {
    grid-template-columns: 1fr;
    gap: .12rem;
  }
}

/* Native variant UI is hidden only when the custom configurator rendered. */
.js-iss-configurator-active .product-variants,
.js-iss-configurator-active .js-product-variants,
.js-iss-configurator-active [data-product-variants] {
  display: none;
}

/* Quote-only products use the inquiry configurator, never a disabled cart UI. */
.js-iss-quote-active .iss-shop-pdp__price--native,
.js-iss-quote-active .product__actions-qty-add,
.js-iss-quote-active .product__add-to-cart-container,
.js-iss-quote-active .product-add-to-cart {
  display: none !important;
}
