/* Service Inspection PDP — strategy-pattern panel for the Brazil
   configurable Service Inspection product (config_kind=service_inspection).
   Mirrors the Magento layout (left = region map, right = options + price). */

.pdp-si {
  background: var(--pdp-bg, #fafafa);
  min-height: calc(100vh - 5rem);
}

/* Fluid sidebar layout: image rail flexes 20–30rem, panel takes the rest;
   below ~44rem of available width the pair wraps to a stacked flow. */
.pdp-si-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, calc(2.5 * var(--vwx)), 2rem);
  padding: clamp(1rem, calc(2.5 * var(--vwx)), 2rem) clamp(1rem, calc(4 * var(--vwx)), 3rem);
  max-width: 82.5rem;
  margin: 0 auto;
}

.pdp-si-image-col {
  flex: 1 1 20rem;
  max-width: 30rem;
  position: sticky;
  top: 6rem;
  align-self: start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}

.pdp-si-image {
  width: 100%;
  height: auto;
  max-height: 26.25rem;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: opacity 0.18s ease;
}

.pdp-si-image-caption {
  margin-top: 0.75rem;
  color: #666;
  font-size: 0.8125rem;
}

.pdp-si-panel-col {
  flex: 999 1 24rem;
  min-width: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pdp-si-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #009999; /* Siemens petrol */
  margin: 0;
}

.pdp-si-subtitle {
  color: #555;
  font-size: 0.875rem;
  margin: 0;
}

/* Live-updating price card */
.pdp-si-price-card {
  background: #f4f4f4;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pdp-si-price-label {
  margin: 0;
  color: #666;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp-si-price {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

.pdp-si-sku {
  margin: 0;
  color: #888;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Form fields */
.pdp-si-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pdp-si-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pdp-si-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
}

.pdp-si-select,
.pdp-si-asset-input {
  padding: 0.625rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background: #fff;
  color: #1a1a1a;
}

.pdp-si-select:focus,
.pdp-si-asset-input:focus {
  outline: none;
  border-color: #009999;
  box-shadow: 0 0 0 2px rgba(0, 153, 153, 0.18);
}

.pdp-si-select[disabled] {
  background: #f4f4f4;
  color: #999;
  cursor: not-allowed;
}

.pdp-si-helper {
  margin: 0;
  font-size: 0.75rem;
  color: #777;
}

.pdp-si-overflow {
  color: #b8531a;
  font-weight: 500;
}

/* CTA row */
.pdp-si-cta-row {
  margin-top: 0.5rem;
}

.pdp-si-add-to-cart {
  width: 100%;
  padding: 0.875rem;
  background: #009999;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pdp-si-add-to-cart:hover:not(.is-disabled) {
  background: #007777;
}

.pdp-si-add-to-cart.is-disabled {
  background: #cccccc;
  color: #888;
  cursor: not-allowed;
}

.pdp-si-quote-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.875rem;
  background: #b8531a;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pdp-si-quote-cta:hover {
  background: #973d0e;
}

/* "Why this price" breakdown */
.pdp-si-breakdown {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.pdp-si-breakdown h3 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: #1a1a1a;
}

.pdp-si-breakdown p {
  margin: 0;
  color: #555;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Inline feedback hints above the Add-to-Cart CTA. Renders the silent-fail
   path of "click did nothing" with explicit guidance: warning when the
   buyer clicks the bottom-bar cart icon before completing selections,
   error when the API call fails, success toast on add. */
.pdp-si-hint {
  margin: 0.75rem 0 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.pdp-si-hint-warning {
  background: #fff8e1;
  color: #6b5200;
  border: 1px solid #ffd54f;
}

.pdp-si-hint-error {
  background: #fde7e9;
  color: #862020;
  border: 1px solid #e88080;
}

.pdp-si-hint-success {
  background: #e7f4ea;
  color: #1f5b30;
  border: 1px solid #6bbb86;
}

/* Per-asset hint inside the price breakdown. Surfaces the per-unit rate
   so Werner sees the volume discount baked into the total-package tier. */
.pdp-si-perunit {
  margin-top: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: #1f5b30;
  font-weight: 500;
  border-top: 1px dashed #d1d5db;
}

/* Brazil "Dados do equipamento" (Userback 8449649) — the asset block right
   above the PDP buy cluster. Brazil-only markup; nothing else uses these. */
.pdp-asset-block {
  margin: clamp(1.25rem, calc(2.4 * var(--vwx)), 2rem)
    clamp(1rem, calc(2 * var(--vwx)), 1.5rem) 0;
  padding: 1.25rem;
  border: 1px solid #e3e3e3;
  border-radius: 1rem;
  background: #fff;
}
.pdp-asset-block__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.pdp-asset-block__question {
  margin: 0.25rem 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
}
.pdp-asset-block__hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.pdp-asset-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.875rem 1rem;
}
.pdp-asset-block__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.pdp-asset-block__field--wide {
  grid-column: 1 / -1;
}
.pdp-asset-block__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3d3d3d;
}
.pdp-asset-block__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 1px solid #c2c2c2;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  color: #1a1a1a;
  background: #fff;
}
.pdp-asset-block__input:focus {
  outline: 2px solid #641e8c;
  outline-offset: 1px;
  border-color: transparent;
}
.pdp-asset-block__input::placeholder {
  color: #9a9a9a;
}