
.pp_container .highlightWindow{display:flex;flex-direction:column;touch-action:manipulation;}

/* --- Riga calcolo preventivo --- */
.pp_container .calc{display:flex;flex-wrap:wrap;align-items:center;gap:15px 20px;padding:20px;border-bottom:1px solid #F0F0F0;}
.pp_container .calc-title{font-size:1.3em;line-height:1.1;}

/* Quantità: pillola unica con i due bottoni ai lati della labeledForm centrale */
.pp_container .quantityForm{flex:0 0 auto;width:180px;display:inline-flex;align-items:stretch;border:var(--lf-border-size) solid var(--lf-border-color);border-radius:15px;background:var(--lf-label-background);transition:.2s;}
.pp_container .quantityForm button{flex:0 0 44px;border:none;background:none;padding:0;color:#666;font-size:2em;cursor:pointer;touch-action:manipulation;}
.pp_container .quantityForm button:hover{color:var(--standard-text-color);}
.pp_container .quantityForm .labeledForm{flex:1 1 auto;border-left:var(--lf-border-size) solid var(--lf-border-color);border-right:var(--lf-border-size) solid var(--lf-border-color);}
.pp_container .quantityForm .labeledForm > label{left:50%;margin-left:0;transform:translateX(-50%);}
.pp_container .quantityForm .labeledForm > input{border:none;border-radius:0;background:transparent;text-align:center;}
.pp_container .quantityForm .labeledForm > input:focus{border-color:transparent;box-shadow:none;}
.pp_container .quantityForm:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color);}

/* Chip rapidi */
.pp_container .chips{display:flex;flex-wrap:wrap;gap:10px;align-self:stretch;align-items:stretch;}
.pp_container .chip{min-width:48px;padding:10px 14px;border:1px solid #DDD;border-radius:12px;background:#FFF;color:#666;font-size:1em;cursor:pointer;}
.pp_container .chip.selected{background:var(--primary-color-030);border-color:var(--primary-color);color:var(--standard-text-color);font-weight:bold;outline:1px solid var(--primary-color);}
.pp_container :is(.chips-expander, .qty-expander){display:none;}

/* Ricerca: labeledForm a tutta larghezza (nascosta sotto la soglia di formati) */
.pp_container .searchForm{flex:1 1 100%;}
.pp_container .searchForm.search-off{display:none;}

/* Upsel globale e non */
.pp_container .upsell{background:rgba(250,99,1,.20);color:var(--discount-color);border-radius:7px;font-weight:bold;}
.pp_container .upsell.global{flex:1 1 100%;margin-top:0;}

/* Lista formati */
.pp_container .contentLine{position:relative;overflow-y:auto;}
.pp_container .scroll-fade{display:none;}
.pp_container .wait-panel{display:inline-block;font-size:3em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.pp_container .list{opacity:0;min-height:130px;}
.pp_container .empty{padding:40px 30px;text-align:center;color:#999;}
.pp_container .group.hidden{display:none;}
.pp_container .group > h2{margin:0;padding:30px 30px 15px;font-size:1.4em;color:var(--light-text-color);}
.pp_container .format{border-bottom:1px solid #F0F0F0;}
.pp_container .format.hidden{display:none;}
.pp_container .list .group:not(.hidden):not(:has(~ .group:not(.hidden))) .format:not(.hidden):not(:has(~ .format:not(.hidden))){border-bottom:none;}
.pp_container .format-head{display:flex;align-items:center;gap:15px;padding:10px 30px;cursor:pointer;min-height:calc(2.3lh + 5px);/* cad (1.4em) + sottoriga (.9em + margine 4px) + 1px di arrotondamento metriche font: altezza costante, il cad si centra da solo quando la sottoriga è vuota */}
.pp_container .format-label{font-size:1.3em;font-weight:bold;flex:1;}
.pp_container .format-summary{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.pp_container .cad{font-size:1.4em;font-weight:bold;white-space:nowrap;}
.pp_container .cad .unit{font-size:.6em;font-weight:normal;color:#999;margin-left:7px;}
.pp_container .cad .striked{font-size:.7em;font-weight:normal;margin-right:7px;}
.pp_container .striked{color:var(--light-text-color);text-decoration:line-through;}
.pp_container b.discount{color:var(--discount-color);}
.pp_container .subline{display:flex;align-items:center;font-size:.9em;}
.pp_container .badge{background:var(--discount-color);color:#FFF;border-radius:6px;padding:2px 7px;margin:2px 0 -2px;}
.pp_container .cad .badge{display:none;/* il badge a fianco del prezzo vive solo su mobile */}
.pp_container .total{margin-top:4px;margin-left:10px;white-space:nowrap;/* margini sui figli, non sulla sottoriga: così lo slide li anima e a sottoriga vuota non resta spazio residuo */}
.pp_container .chevron{transition:transform .2s;color:#999;}
.pp_container .format.expanded .chevron{transform:rotate(180deg);}
.pp_container .format.single .format-head,.pp_container .format.no-detail .format-head{cursor:default;}
.pp_container .format.single .chevron{display:none;}

/* Dettaglio (fasce/valori) */
.pp_container .format-detail{display:none;margin:0 30px;padding:10px 0;border-top:1px solid #F0F0F0;}
.pp_container .format-detail table{width:100%;border-collapse:collapse;}
.pp_container .format-detail td{padding:7px;}
.pp_container .row-label{text-align:left;width:100%;}
.pp_container :is(.row-price,.row-striked){text-align:right;white-space:nowrap;}
.pp_container .format-detail tr td{transition:background .2s;}
.pp_container .format-detail tr td:first-child{border-radius:7px 0 0 7px;}
.pp_container .format-detail tr td:last-child{border-radius:0 7px 7px 0;}
.pp_container .format-detail tr[data-band]:not(.active){cursor:pointer;}
.pp_container .format-detail tr[data-band]:not(.active):hover td{background:#F5F5F5;}
.pp_container .format-detail tr.active td{background:var(--primary-color-030);}

.pp_container :is(.upsell, .printsize){margin-top:10px;padding:7px;display:flex;align-items:center;gap:7px;}
.pp_container .printsize{color:#999;font-style:italic;}

@media only screen and (max-width:1002px){
    .pp_container .highlightWindow{font-size:13px;}
}

@media only screen and (max-width:798px) {
    .pp_container .calc-title{display:none;}
    /* Ricerca sempre nascosta: il filtro dei formati resta solo su desktop */
    .pp_container .searchForm{display:none;}
    /* Riga unica: chip subito, matita-quantità alla loro destra; i margini negativi sugli elementi collassati assorbono i gap residui del flex */
    .pp_container .chips-expander{order:1;display:block;flex:0 0 0;box-sizing:border-box;min-width:0;min-height:46px;margin:0 -10px;padding:0;border:0 solid #DDD;border-radius:12px;background:#FFF;color:#666;font-size:1.2em;opacity:0;overflow:hidden;pointer-events:none;cursor:pointer;touch-action:manipulation;transition:flex-basis .2s, opacity .2s, margin .2s, border-width .2s;}
    .pp_container .chips{order:2;flex:1 1 0;min-width:0;gap:7px;flex-wrap:nowrap;transition:flex-grow .2s, opacity .2s, margin .2s;}
    .pp_container .chip{flex:1 1 0;min-width:0;min-height:46px;padding:10px 4px;}
    /* Quantità chiusa = pillola intera collassata (il clip nasconde i contenuti a misura piena) */
    .pp_container .quantityForm{order:3;width:auto;flex:0 1 0;min-width:0;box-sizing:border-box;margin:0 -10px;border-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:flex-grow .2s, opacity .2s, margin .2s, border-width .2s;}
    .pp_container .quantityForm .labeledForm > input{min-width:0;}
    /* Matita compattata: finto chip che espande la quantità; con quantità fuori dai chip mostra il valore e si evidenzia (.selected) */
    .pp_container .qty-expander{order:4;display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;box-sizing:border-box;min-height:46px;max-width:120px;padding:10px 14px;border:1px solid #DDD;border-radius:12px;background:#FFF;color:#666;font-size:1em;white-space:nowrap;overflow:hidden;cursor:pointer;touch-action:manipulation;transition:max-width .2s, opacity .2s, margin .2s, border-width .2s, padding .2s;}
    .pp_container .qty-expander.selected{background:var(--primary-color-030);border-color:var(--primary-color);color:var(--standard-text-color);font-weight:bold;outline:1px solid var(--primary-color);}
    .pp_container .qty-expander .qv:empty{display:none;}
    .pp_container .upsell.global{order:5;}
    /* Quantità espansa: pillola completa al posto di matita e chip (che collassano), appare l'espansore-finto-chip che riapre i chip */
    .pp_container .calc.qty-open .quantityForm{flex-grow:1;margin:0;border-width:var(--lf-border-size);opacity:1;overflow:visible;pointer-events:auto;}
    .pp_container .calc.qty-open .chips{flex:0 1 0;opacity:0;margin:0 -10px;overflow:hidden;pointer-events:none;}
    .pp_container .calc.qty-open .chips-expander{flex-basis:48px;margin:0;border-width:1px;opacity:1;pointer-events:auto;}
    .pp_container .calc.qty-open .qty-expander{max-width:0;margin:0 -10px;padding:0;border-width:0;opacity:0;pointer-events:none;outline:none;}
    /* Sottoriga come su desktop ma senza badge: resta solo il totale (lo sconto a listino vive già nel .cad) */
    .pp_container .subline .badge{display:none!important;/* vince sugli inline di SlideToggle/toggle() */}
    /* Badge dello sconto a listino a fianco del prezzo cadauno; niente barrato nell'header (resta nelle righe dell'espansione) */
    .pp_container .cad .badge{display:inline-block;font-size:.7em;margin:0 0 0 7px;vertical-align:2px;}
    .pp_container .cad .striked{display:none;}
    /* Banner upsell delle fasce sempre nascosto (quello globale resta); !important perché il ricalcolo lo mostra con display inline */
    .pp_container .format-detail .upsell{display:none!important;}
    /* Sfumatura di fondo: invita allo scroll e scompare arrivati in fondo */
    .pp_container .scroll-fade{display:block;position:sticky;bottom:0;height:40px;margin-top:-40px;background:linear-gradient(rgba(255,255,255,0), #FFF);pointer-events:none;transition:opacity .2s;}
    .pp_container .contentLine.at-bottom .scroll-fade{opacity:0;}
}