/* Fitment — modifier varianti (hero, cart, product) + chrome condiviso.
 * Le regole base di .mz-fitment / .mz-fitment__select / __input / __submit
 * vivono in components/site-header.css (caricato ovunque). Qui stanno solo
 * gli stili specifici per le varianti non-header e gli elementi di chrome
 * (eyebrow, titolo, beta sup, guida link, hint, badge risultato).
 *
 * Migrato da assets/css/components/verify-search.css — la vecchia namespace
 * .mz-verify è stata ritirata. Mapping equivalente per riferimento futuro:
 *   .mz-verify           → wrapper esterno gestito dal caller (.mz-cart-empty__finder, .mz-hero__finder, .mz-fitment-block)
 *   .mz-verify__head     → .mz-fitment__chrome
 *   .mz-verify__eyebrow  → .mz-fitment__eyebrow
 *   .mz-verify__title    → .mz-fitment__title
 *   .mz-verify__beta     → .mz-fitment__beta
 *   .mz-verify__form     → .mz-fitment.mz-fitment--{hero,cart,product}
 *   .mz-verify__field    → .mz-fitment__field
 *   .mz-verify__input    → .mz-fitment__input (con override .--hero/--cart/--product)
 *   .mz-verify__submit   → .mz-fitment__submit
 *   .mz-verify__hint     → .mz-fitment__hint
 *   .mz-verify__result   → .mz-fitment__result
 *   .mz-verify__guide-link → .mz-fitment__guide-link
 */

/* --- Chrome condiviso (--hero, --cart, --product) ---------------------- */
.mz-fitment__chrome {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-1);
}
.mz-fitment__eyebrow {
  font: 600 var(--t-xs)/1 var(--ff-mono);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--brand);
}
.mz-fitment__title {
  font: 700 var(--t-md)/1.3 var(--ff-ui);
  letter-spacing: -0.005em;
  color: var(--ink-1);
  margin: 0;
}
.mz-fitment__beta {
  display: inline-block;
  vertical-align: super;
  margin-left: 4px;
  font: 600 0.55em/1 var(--ff-mono);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--brand);
}
.mz-fitment__guide-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 var(--t-xs)/1 var(--ff-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  transition: opacity var(--d-1) var(--ease);
}
.mz-fitment__guide-link:hover { opacity: 0.75; }
.mz-fitment__guide-link svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* --- Hero / cart / product: form layout differente dall'header --------- */
.mz-fitment--hero,
.mz-fitment--cart,
.mz-fitment--product {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: stretch;
  border: 0;
  background: transparent;
  padding: 0;
}
@media (max-width: 480px) {
  .mz-fitment--hero,
  .mz-fitment--cart,
  .mz-fitment--product {
    grid-template-columns: 1fr;
  }
}
.mz-fitment--hero .mz-fitment__field,
.mz-fitment--cart .mz-fitment__field,
.mz-fitment--product .mz-fitment__field {
  border-right: 0;
}
.mz-fitment--hero .mz-fitment__input,
.mz-fitment--cart .mz-fitment__input,
.mz-fitment--product .mz-fitment__input {
  height: 44px;
  background: var(--ctl-bg-sunken);
  border: 1px solid var(--ctl-border);
  border-radius: var(--r-2);
  padding: 0 var(--s-4);
  font: 600 var(--t-sm)/1 var(--ff-mono);
  letter-spacing: 0;
  color: var(--ink-1);
  transition: border-color var(--d-1) var(--ease);
}
.mz-fitment--hero .mz-fitment__input::placeholder,
.mz-fitment--cart .mz-fitment__input::placeholder,
.mz-fitment--product .mz-fitment__input::placeholder {
  color: var(--ink-4);
  font-weight: 500;
}
.mz-fitment--hero .mz-fitment__input:hover,
.mz-fitment--cart .mz-fitment__input:hover,
.mz-fitment--product .mz-fitment__input:hover {
  border-color: var(--ctl-border-h);
}
.mz-fitment--hero .mz-fitment__input:focus,
.mz-fitment--cart .mz-fitment__input:focus,
.mz-fitment--product .mz-fitment__input:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--ctl-border-h);
}
.mz-fitment--hero .mz-fitment__submit,
.mz-fitment--cart .mz-fitment__submit,
.mz-fitment--product .mz-fitment__submit {
  height: 44px;
  padding: 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--brand);
  color: var(--paper);
  border: 0;
  border-radius: var(--r-2);
  font: 600 var(--t-sm)/1 var(--ff-ui);
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease);
}
.mz-fitment--hero .mz-fitment__submit:hover,
.mz-fitment--cart .mz-fitment__submit:hover,
.mz-fitment--product .mz-fitment__submit:hover {
  background: var(--brand-ink);
}
.mz-fitment--hero .mz-fitment__submit svg,
.mz-fitment--cart .mz-fitment__submit svg,
.mz-fitment--product .mz-fitment__submit svg {
  width: 14px;
  height: 14px;
}

/* --- Hint / risultato (sotto il form, scope: tutte le varianti) -------- */
.mz-fitment__hint {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: var(--s-3);
}
.mz-fitment__result {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-1);
}
.mz-fitment__result svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
}
.mz-fitment__result.is-ok {
  border-color: var(--success);
  color: var(--success);
}
.mz-fitment__result.is-no {
  border-color: var(--brand);
  color: var(--brand);
}

/* --- Wrapper a card per la variante product (scheda) ------------------- */
.mz-fitment-block--product {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5);
  background: var(--paper-2);
}