/* FMW account mobile — v9.5.177 */ /* ===== Prenotazioni: pulsanti azione moderni (.ics accent, Cancella rosso) ===== */ .woocommerce-MyAccount-content .rb-myaccount-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center} .woocommerce-MyAccount-content .rb-myaccount-actions .button{padding:7px 13px!important;font-size:.8rem!important;font-weight:600!important;border-radius:9px!important;text-transform:none!important;letter-spacing:0!important;min-height:0!important;line-height:1.3!important;box-shadow:none!important;margin:0!important} .woocommerce-MyAccount-content .rb-ics-btn{background:#fff!important;color:var(--fmw-sec)!important;border:1.5px solid color-mix(in srgb,var(--fmw-sec) 30%,#e2e6ea)!important} .woocommerce-MyAccount-content .rb-ics-btn:hover{background:var(--fmw-sec)!important;color:#fff!important;border-color:var(--fmw-sec)!important} .woocommerce-MyAccount-content .rb-cancel-btn{background:#fff!important;color:#c0392b!important;border:1.5px solid color-mix(in srgb,#c0392b 30%,#eee)!important} .woocommerce-MyAccount-content .rb-cancel-btn:hover{background:#c0392b!important;color:#fff!important;border-color:#c0392b!important} /* ===== Wishlist: pulsante "Ordina" compatto (accento sezione) ===== */ .woocommerce-MyAccount-content .fmw-wlist-cart{padding:8px 16px!important;font-size:.82rem!important;font-weight:600!important;border-radius:9px!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;min-height:0!important;line-height:1.3!important;box-shadow:none!important;background:var(--fmw-sec)!important;color:#fff!important;border:0!important;white-space:nowrap} /* ===== Metodi di pagamento → CARD stile "carta" (mobile + DESKTOP) ===== La tabella WC (metodo/scadenza/azioni) diventa una griglia di carte scure con chip, numero, scadenza e azioni. Vale a TUTTE le larghezze (niente media query). Specificità alta (body.woocommerce-account + table.classe) per battere il box .shop_table inline. */ body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods{border:0!important;box-shadow:none!important;background:none!important;border-radius:0!important;display:block!important;width:100%!important;overflow:visible!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods thead{display:none!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tbody{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tr.payment-method{display:flex!important;flex-direction:column;background:linear-gradient(135deg,#20262c 0%,#3b4551 100%)!important;color:#fff!important;border:0!important;border-radius:16px!important;padding:54px 22px 20px!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important;min-height:172px;position:relative;overflow:hidden} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tr.payment-method:hover{background:linear-gradient(135deg,#20262c 0%,#3b4551 100%)!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tr.payment-method::after{content:"";position:absolute;top:20px;right:22px;width:36px;height:24px;border-radius:5px;background:linear-gradient(135deg,#f7d774,#e0b64a)} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-method{border:0!important;padding:0!important;color:#fff!important;font-size:1.08rem!important;font-weight:700!important;letter-spacing:.01em;order:2} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-expires{border:0!important;padding:0!important;font-size:.84rem!important;color:rgba(255,255,255,.72)!important;order:3;margin-top:5px} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-expires::before{content:"Scad. ";opacity:.6;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-actions{border:0!important;padding:0!important;display:flex;gap:8px;flex-wrap:wrap;order:4;margin-top:auto;padding-top:14px!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-actions .button{margin:0!important;padding:7px 13px!important;font-size:.78rem!important;font-weight:600!important;border-radius:8px!important;text-transform:none!important;letter-spacing:0!important;min-height:0!important;line-height:1.2!important;box-shadow:none!important;background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.26)!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-actions .button:hover{background:rgba(255,255,255,.24)!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td.payment-method-actions .button.delete{background:rgba(255,90,90,.16)!important;border-color:rgba(255,120,120,.42)!important;color:#ffd6d6!important} body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tr.payment-method--default::before{content:"Predefinita";position:absolute;top:21px;left:22px;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--fmw-sec);background:#fff;padding:3px 9px;border-radius:99px} /* ===== Menu account · ACCORDION su MOBILE (checkbox-hack, nessun JS) ===== Sotto 860px il menu (17+ voci) spingeva giù il contenuto: ora è chiuso di default (contenuto subito visibile) e si apre al tap. Puro CSS → funziona anche col JS lento. Toggle reso lato server nel woocommerce_before_account_navigation. ⚠️ SPECIFICITÀ: Flatsome ha regole PIÙ specifiche che sovrascrivevano le nostre: - input[type=checkbox]+label{display:inline} (0,1,2) → schiacciava la label - label,legend{display:block} (0,0,1) - input[type=checkbox]{display:inline;margin-right:10px;font-size:16px} (0,1,1) Per questo TUTTE le regole qui usano prefisso `body.woocommerce-account` (+ `input.` per la checkbox) e `!important` sulle proprietà critiche. */ body.woocommerce-account .fmw-acc-mnav{display:none!important} body.woocommerce-account input.fmw-acc-mnav-cb{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;margin:0!important;padding:0!important;border:0!important;-webkit-appearance:none!important;appearance:none!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)!important} @media(max-width:860px){ /* Barra UNICA: utente (avatar+nome, link bacheca) a sx + "Menu" e freccia a dx. Sostituisce i DUE blocchi separati (brand + toggle) per recuperare altezza. */ body.woocommerce-account .fmw-acc-mnav{display:flex!important;align-items:center;gap:10px;cursor:pointer;margin:0!important;padding:9px 14px!important;border-radius:13px;background:#fff;border:1.5px solid #e7eaee;color:#20262a;user-select:none;text-transform:none!important;line-height:1.2!important} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-user{display:flex!important;align-items:center;gap:9px;flex:1 1 auto!important;min-width:0;text-decoration:none!important;color:inherit!important;box-shadow:none!important} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-av{flex:none;width:34px;height:34px;border-radius:10px;background:#20262a;color:#fff;display:flex;align-items:center;justify-content:center} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-av svg{width:18px!important;height:18px!important;fill:currentColor!important} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-name{font-weight:800!important;font-size:1rem!important;color:#20262a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-id{font-style:italic;font-weight:600;opacity:.4;font-size:.82em} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-t{flex:none;color:#8a929c;font-weight:600!important;font-size:.9rem!important;text-transform:none!important} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-chev{flex:none;display:flex;transition:transform .2s;color:#9aa2ad} body.woocommerce-account .fmw-acc-mnav .fmw-acc-mnav-chev svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body.woocommerce-account input.fmw-acc-mnav-cb:checked ~ .fmw-acc-mnav .fmw-acc-mnav-chev{transform:rotate(180deg)} /* Il brand separato (iniettato via JS) su mobile è ORA dentro la barra → nascosto. */ body.woocommerce-account .fmw-acc-brand{display:none!important} body.woocommerce-account .woocommerce-MyAccount-navigation{max-height:0!important;overflow:hidden!important;transition:max-height .28s ease;margin-top:0!important} body.woocommerce-account input.fmw-acc-mnav-cb:checked ~ .woocommerce-MyAccount-navigation{max-height:1600px!important;margin-top:8px!important} } @media(min-width:861px){ body.woocommerce-account .fmw-acc-mnav,body.woocommerce-account input.fmw-acc-mnav-cb{display:none!important} } /* ===== Rimuove il "BOX AGGIUNTIVO" attorno alle tabelle/card su mobile+tablet ===== Il .shop_table ha bordo+radius+ombra (contenitore da desktop). Su ≤860px le righe sono card o tabella semplice dentro il pannello bianco → quel box faceva da contenitore DOPPIO. Lo togliamo QUI (file esterno, servito fresco) con specificità (0,4,2) via `body.woocommerce-account.woocommerce-page` così batte la regola inline del box (0,3,2) ANCHE se l'inline è servito da cache stantia. */ @media(max-width:860px){ body.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content table.shop_table{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:none!important} /* Flatsome avvolge la tabella ordini in
con box-shadow inset + padding 15px + margin-left -15px + overflow-x:scroll: ERA il vero "box aggiuntivo" attorno alle card. Su mobile/tablet le righe sono già card/tabella piena → azzeriamo il wrapper. */ body.woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table{box-shadow:none!important;margin:0!important;padding:0!important;overflow:visible!important;width:100%!important} } /* ===== Tabelle account → CARD su mobile (usano data-title) ===== Sotto i 600px ogni riga diventa una card etichetta→valore. */ @media(max-width:600px){ .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table, .woocommerce-MyAccount-content table.fmw-rq-table{border:0!important;box-shadow:none!important;width:100%!important} .woocommerce-MyAccount-content table.woocommerce-orders-table thead, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table thead, .woocommerce-MyAccount-content table.fmw-rq-table thead{display:none} .woocommerce-MyAccount-content table.woocommerce-orders-table tr, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table tr, .woocommerce-MyAccount-content table.fmw-rq-table tr{display:block;border:1px solid #e7e9ee!important;border-radius:13px;padding:4px 15px;margin:0 0 12px;background:#fff} .woocommerce-MyAccount-content table.woocommerce-orders-table td, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table td, .woocommerce-MyAccount-content table.fmw-rq-table td{display:flex!important;justify-content:space-between;align-items:center;gap:14px;text-align:right;padding:10px 0!important;border:0!important;border-bottom:1px solid #f1f3f6!important;width:auto!important} .woocommerce-MyAccount-content table.woocommerce-orders-table td::before, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table td::before, .woocommerce-MyAccount-content table.fmw-rq-table td::before{content:attr(data-title);font-weight:700;color:#8a929c;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;text-align:left;flex:none} .woocommerce-MyAccount-content table.woocommerce-orders-table td:last-child, .woocommerce-MyAccount-content table.shop_table.rb-myaccount-table td:last-child, .woocommerce-MyAccount-content table.fmw-rq-table td:last-child{border-bottom:0!important} .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions, .woocommerce-MyAccount-content td.rb-myaccount-actions{flex-wrap:wrap;justify-content:flex-end} .woocommerce-MyAccount-content .woocommerce-orders-table td .button{margin:2px 0 2px 6px!important;width:auto!important;display:inline-block!important} /* NUMERO ORDINE — fix "incasso": su alcune configurazioni (WC responsive nativo / tema figlio) questa cella non riceveva etichetta/allineamento come le altre e il link mostrava una sottolineatura corta (la "riga" staccata). La forziamo esplicitamente, per CLASSE (vale td o th) e con !important, con etichetta hard-coded (robusto anche se manca data-title). */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;text-align:right!important;padding:10px 0!important;border:0!important;border-bottom:1px solid #f1f3f6!important;width:auto!important;float:none!important} .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number::before{content:"Ordine"!important;font-weight:700!important;color:#8a929c!important;font-size:.72rem!important;text-transform:uppercase!important;letter-spacing:.03em!important;text-align:left!important;flex:none!important;float:none!important;margin:0!important} .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a{text-decoration:none!important;border:0!important;box-shadow:none!important;background:none!important;padding:0!important;display:inline!important;color:inherit!important;font-weight:600!important} }