/* =======================================================================
   CATEGORY HERO — context="category" (.eedf-ctx-category)
   Card compatta e minimale (NIENTE sfondo immagine). Il tipo è pre-selezionato
   dalla categoria -> immagine tipo + "Ricambi {tipo}" + due campi-dropdown
   (Marca, poi Modello) che aprono il drawer a step del finder + CTA Cerca.
   I risultati compaiono in-card (#view-results) sotto la cat-head.
   Tutto scoped sotto .eedf-root.eedf-ctx-category -> innocuo altrove.
   ======================================================================= */

.eedf-root.eedf-ctx-category{ width:100%; }

/* niente stepper, niente step "tipo", niente mobile-card: il tipo è fisso */
.eedf-root.eedf-ctx-category .stepper-wrap{ display:none; }
.eedf-ctx-category #view-type{ display:none !important; }
.eedf-ctx-category #mobileCard{ display:none !important; }

/* --- la card --- */
.eedf-ctx-category #app{
  background:#fff; border:1px solid var(--border); border-top:3px solid var(--brand);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; min-height:0; position:relative;
}

/* ============================ CAT-HEAD ============================
   griglia: immagine | corpo(titolo + form + help) | trust verticale     */
.eedf-ctx-category .cat-head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:26px;
  padding:22px 26px;
}
.eedf-ctx-category .cat-head__media{
  width:112px; height:112px; flex:none; border:1px solid var(--border); border-radius:16px;
  background:var(--surface); display:grid; place-items:center; padding:11px; overflow:hidden;
}
.eedf-ctx-category .cat-head__img{ width:100%; height:100%; object-fit:contain; }
.eedf-ctx-category .cat-head__body{ min-width:0; }
.eedf-ctx-category .cat-head__title{
  margin:0 0 13px; font-size:clamp(21px,2.2vw,28px); font-weight:800; letter-spacing:-.02em;
  line-height:1.08; color:var(--navy);
}

/* --- form: Marca | Modello | Cerca su una riga --- */
.eedf-ctx-category .cat-form{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }

.eedf-ctx-category .cat-field{
  flex:1 1 190px; min-width:0; display:flex; align-items:center; gap:10px;
  text-align:left; background:#fff; border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:9px 13px; cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  font:inherit; color:var(--navy); position:relative;
}
.eedf-ctx-category .cat-field:hover:not(:disabled){ border-color:var(--brand); background:var(--surface); }
.eedf-ctx-category .cat-field:focus-visible{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.eedf-ctx-category .cat-field:disabled{ cursor:not-allowed; opacity:.55; }
.eedf-ctx-category .cat-field--set{ border-color:var(--brand); }

.eedf-ctx-category .cat-field__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.15; flex:1; }
.eedf-ctx-category .cat-field__k{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.eedf-ctx-category .cat-field__v{
  font-size:15px; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.eedf-ctx-category .cat-field:not(.cat-field--set) .cat-field__v{ color:var(--muted); font-weight:500; }
.eedf-ctx-category .cat-field__chev{ width:18px; height:18px; flex:none; color:var(--muted); transition:transform .16s ease; }
.eedf-ctx-category .cat-field:hover:not(:disabled) .cat-field__chev{ color:var(--brand); transform:translateY(1px); }

.eedf-ctx-category .cat-search{
  flex:1 1 100%; display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:#fff; border:0; border-radius:var(--r-md); padding:0 22px; min-height:46px;
  font:inherit; font-weight:700; font-size:15px; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 6px 16px -7px var(--brand); transition:filter .16s ease, transform .12s ease, box-shadow .16s ease;
}
.eedf-ctx-category .cat-search svg{ width:18px; height:18px; }
.eedf-ctx-category .cat-search:hover:not(:disabled){ filter:brightness(1.05); box-shadow:0 9px 20px -8px var(--brand); }
.eedf-ctx-category .cat-search:active:not(:disabled){ transform:translateY(1px); }
.eedf-ctx-category .cat-search:disabled{ background:var(--border-strong); color:#fff; box-shadow:none; cursor:not-allowed; opacity:.85; }

.eedf-ctx-category .cat-help{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--muted);
  font:inherit; font-size:13px; font-weight:600; transition:color .16s ease;
}
.eedf-ctx-category .cat-help svg{ width:16px; height:16px; }
.eedf-ctx-category .cat-help:hover{ color:var(--brand-dark); text-decoration:underline; text-underline-offset:2px; }

/* --- trust verticale a destra --- */
.eedf-ctx-category .cat-trust{
  list-style:none; margin:0; padding:2px 0 2px 26px; border-left:1px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
}
.eedf-ctx-category .cat-trust__item{ display:flex; align-items:center; gap:11px; }
.eedf-ctx-category .cat-trust__ic{
  width:40px; height:40px; flex:none; border-radius:11px; background:var(--brand-light);
  color:var(--brand-dark); display:grid; place-items:center;
}
.eedf-ctx-category .cat-trust__ic svg{ width:21px; height:21px; }
.eedf-ctx-category .cat-trust__t{ display:flex; flex-direction:column; line-height:1.22; font-size:13px; color:var(--muted); white-space:nowrap; }
.eedf-ctx-category .cat-trust__t b{ color:var(--navy); font-weight:700; font-size:14px; }

/* ============================ RISULTATI ============================
   Le viste marca/modello vivono nei drawer (sheet): NON inline.
   Mostriamo solo i risultati, dentro la card, sotto un separatore.        */
.eedf-ctx-category #view-results.active{ display:block; border-top:1px solid var(--border); }
.eedf-ctx-category .view > .wrap{ width:100%; max-width:none; padding:18px 26px 24px !important; }
/* niente "Cambia tipo" nelle viste relocate: su una categoria il tipo è fisso */
.eedf-ctx-category #view-brand .back-btn[data-back="type"]{ display:none; }

/* ---------------- MOBILE (<=720): impila tutto, drawer come al solito ---------------- */
@media (max-width:720px){
  .eedf-ctx-category .cat-head{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"img title" "form form" "help help" "trust trust";
    gap:13px 16px; padding:18px 16px;
  }
  .eedf-ctx-category .cat-head__media{ grid-area:img; width:74px; height:74px; border-radius:13px; padding:8px; align-self:center; }
  .eedf-ctx-category .cat-head__body{ display:contents; }
  .eedf-ctx-category .cat-head__title{ grid-area:title; align-self:center; margin:0; font-size:clamp(19px,5.2vw,23px); }
  .eedf-ctx-category .cat-form{ grid-area:form; flex-direction:column; gap:9px; }
  .eedf-ctx-category .cat-field{ flex:1 1 auto; width:100%; padding:10px 14px; }
  .eedf-ctx-category .cat-search{ width:100%; min-height:48px; }
  .eedf-ctx-category .cat-help{ grid-area:help; margin:0; align-self:start; }
  .eedf-ctx-category .cat-trust{
    grid-area:trust; border-left:0; border-top:1px solid var(--border); padding:14px 0 0; margin-top:4px;
    flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px 18px;
  }
  .eedf-ctx-category .cat-trust__t{ white-space:normal; }
  .eedf-ctx-category .view > .wrap{ padding:16px !important; }
}