/* Transceiver Catalog: hero */
.mf-hero{background-color:var(--color-primary);color:#fff;padding:48px 0}
.mf-hero-eyebrow{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600;opacity:.85;margin-bottom:8px}
.mf-hero-title{color:#fff;font-size:3rem;margin-bottom:0}
.mf-hero-text{color:#fff;opacity:.9;margin-bottom:0}

/* Pannello filtri */
/* .mf-panel e .mf-eyebrow sono generiche/riusate anche fuori da questa pagina (es. mod_masterfile
   in home/portfolio): definite in assets/css/custom.css (sitewide), non qui. */
.mf-panel-text{color:var(--body-color);opacity:.75;margin-bottom:0}

.mf-counter{border:1px solid var(--border-color-light);border-radius:var(--border-radius);padding:12px 20px;display:inline-block;text-align:center}
.mf-counter-value{display:block;font-size:1.5rem;font-weight:700;line-height:1.1;color:var(--color-primary)}
.mf-counter-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;opacity:.7}

/* Step numerati: riga 1 (Application) e riga 2 (Data rate/Form factor/Reach/Temperature + Reset) */
.mf-row-application{margin-bottom:20px}
.mf-row-steps{margin-bottom:0}
.mf-steps-container{display:flex;flex-wrap:wrap;gap:24px}
.mf-step{flex:1 1 220px;min-width:160px}
/* Le select della riga 2 mantengono una larghezza stabile (1/4 della riga) sopra il
   breakpoint md, cosi' non cambiano dimensione ogni volta che compare un nuovo step;
   sotto quella risoluzione occupano tutta la larghezza e vanno a capo. */
@media (min-width:992px){
	.mf-steps-container .mf-step{max-width:calc(25% - 18px)}
}
@media (max-width:991.98px){
	.mf-steps-container .mf-step{flex:1 1 100%;max-width:100%}
}
.mf-step-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mf-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:700;flex-shrink:0}
.mf-step-label{text-transform:uppercase;font-size:.75rem;font-weight:700;letter-spacing:.03em}
.mf-step-hint{font-size:.75rem;opacity:.6}
.mf-step-note{display:block;margin-top:6px;opacity:.65}

.mf-pills{display:flex;flex-wrap:wrap;gap:8px}
.mf-pill{border:1px solid var(--border-color-light);background:#fff;border-radius:50rem;padding:6px 16px;font-size:.85rem;transition:var(--transition-default);cursor:pointer}
.mf-pills .mf-pill:hover{border-color:var(--color-primary)}
.mf-pill.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Stesso bordo/sfondo di .mf-counter, per coerenza con lo stile del resto del sito */
.mf-select{width:100%;background:#fff;border:1px solid var(--border-color-light);border-radius:var(--border-radius);padding:8px 12px}

.mf-cta-box{background:var(--border-color-lighter);border-radius:var(--border-radius);padding:20px 24px;margin-top:28px}

/* Bottoni: "Find My Transceiver" e "Download Technical Datasheet" pieni, "Send Request" outline */
#mf-find-transceiver,
a.mf-btn-datasheet{background-color:var(--header-color);border:1px solid var(--header-color);color:#fff}
#mf-find-transceiver:hover,
a.mf-btn-datasheet:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);color:#fff}

button.mf-send-request{background-color:#fff;border:1px solid #000;color:#000}
button.mf-send-request:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}

/* Elenco risultati (accordion) */
.mf-results-container.is-loading{opacity:.5;pointer-events:none}
.mf-results-empty{text-align:center;padding:32px 16px;opacity:.7}
.masterfile-results{border:1px solid var(--border-color-light);border-radius:var(--border-radius);overflow:hidden}

.mf-row-header{width:100%;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background-color:var(--border-color-lighter);border:none;border-bottom:1px solid var(--border-color-light);padding:16px 20px;text-align:left;transition:var(--transition-default);cursor:pointer}
.mf-product-row:last-child .mf-row-header{border-bottom:none}
.mf-product-row.is-open .mf-row-header{background-color:#fff;border-bottom:1px solid var(--border-color-light)}

/* Colonna sinistra dell'header: titolo/SKU sopra, pillole sotto. Il toggle a destra
   resta centrato verticalmente grazie a align-items:center su .mf-row-header. */
.mf-row-content{display:flex;flex-direction:column;gap:8px;flex:1 1 260px;min-width:0}
.mf-row-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mf-row-sku{font-weight:700}
.mf-row-desc{opacity:.75;font-size:.9rem;white-space:normal;overflow-wrap:break-word}

/* .mf-row-pills/.mf-pill-static/.mf-pill-stock sono generiche/riusate anche fuori da questa
   pagina (es. card prodotto in mod_masterfile, home/portfolio): definite in
   assets/css/custom.css (sitewide), non qui. */

.mf-row-toggle-btn{flex-shrink:0}
.mf-label-hide{display:none}
.mf-product-row.is-open .mf-label-select{display:none}
.mf-product-row.is-open .mf-label-hide{display:inline}

.mf-row-body-inner{padding:24px 20px}
.mf-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.mf-badge{border:1px solid var(--color-primary);color:var(--color-primary);border-radius:50rem;padding:4px 12px;font-size:.75rem;font-weight:600}
.mf-badge-stock{border-color:#1c7c34;color:#1c7c34;background:#e7f6ec}

.mf-image-wrap{position:relative;background:var(--border-color-lighter);border-radius:var(--border-radius);min-height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mf-image-wrap img{max-width:80%;max-height:200px;object-fit:contain}
.mf-image-tag{position:absolute;bottom:10px;font-size:.7rem;opacity:.6;text-transform:uppercase}
.mf-tag-left{left:12px}
.mf-tag-center{left:50%;transform:translateX(-50%)}
.mf-tag-right{right:12px}

.mf-detail-title{font-size:1.1rem;margin-bottom:2px}
.mf-detail-sku{color:var(--color-primary);font-weight:600;margin-bottom:0}

.mf-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:20px}
.mf-spec-full{grid-column:1 / -1}
.mf-spec-label{display:block;text-transform:uppercase;font-size:.7rem;letter-spacing:.03em;opacity:.6;margin-bottom:2px}
.mf-spec-value{display:block;font-weight:600}

.mf-key-features h4{color:var(--color-primary);font-size:1rem;margin-bottom:8px}
.mf-key-features ul{padding-left:1.1rem;margin-bottom:20px}
.mf-key-features li{margin-bottom:4px}

.mf-detail-actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:991.98px){
	.mf-spec-grid{grid-template-columns:1fr}
}

/* Modal "Send Request": due colonne su desktop (dati prodotto a sinistra, Order details/Contact
   a destra, vedi part-product-request-modal.php). La colonna prodotto e' molto piu' stretta della
   pagina intera, quindi qui la griglia spec resta sempre a 1 colonna anche sopra il breakpoint
   generico di .mf-spec-grid, per non stringere troppo le 5 voci. */
#product-request .mf-spec-grid{grid-template-columns:1fr}