/* ZAOXMACH - clone palette dal sito attuale verde brand: #4d9b4c | verde lime (styleNew): #a1cb03 accenti: #83be50 (verde chiaro), #ffb33b (arancio) testo: #333 | grigi: #666 #ebebeb #f8f8f8 */ :root{ --brand:#4d9b4c; --brand-lime:#a1cb03; --brand-light:#83be50; --accent:#ffb33b; --text:#333; --muted:#666; --line:#ebebeb; --bg-soft:#f8f8f8; } *{box-sizing:border-box;margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--text);line-height:1.5;background:#fff; } .container{max-width:1160px;margin:0 auto;padding:0 20px} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-light)} /* header */ .site-header{border-bottom:3px solid var(--brand);background:#fff} .header-inner{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{font-size:26px;font-weight:800;color:var(--text);letter-spacing:.5px} .brand-mark{color:var(--brand)} .brand-sub{color:var(--muted);font-weight:600} .main-nav a{margin:0 14px;color:var(--text);font-weight:600} .main-nav a:hover{color:var(--brand)} .lang-switch a{margin-left:8px;padding:4px 8px;border:1px solid var(--line);border-radius:4px;font-size:13px;color:var(--muted)} .lang-switch a.active{background:var(--brand);color:#fff;border-color:var(--brand)} /* main */ .site-main{padding:0 0 24px;min-height:60vh} .hero{text-align:center;padding:60px 0} .hero h1{font-size:42px;margin-bottom:14px} .hero .lead{font-size:20px;color:var(--muted);margin-bottom:26px} .btn{display:inline-block;padding:12px 26px;border-radius:6px;font-weight:700} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-light);color:#fff} .intro{max-width:760px;margin:20px auto;text-align:center;color:var(--muted)} .page-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px} /* auth */ .auth-box{max-width:420px;margin:20px auto;padding:28px;border:1px solid var(--line);border-radius:10px;background:#fff} .auth-box h1{font-size:26px;margin-bottom:18px} .auth-box label{display:block;margin:12px 0 4px;font-weight:600;font-size:14px} .auth-box input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:15px} .auth-box .btn{margin-top:18px;width:100%;border:0;cursor:pointer;font-size:15px} .auth-alt{margin-top:16px;text-align:center;color:var(--muted);font-size:14px} .alert{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:14px} .alert-error{background:#fdecec;color:#c0392b;border:1px solid #f5c6cb} .alert-ok{background:#eafaf0;color:#1e7e4c;border:1px solid #b8e6c8} .alert ul{margin:0;padding-left:18px} /* dashboard */ .dash-intro{color:var(--muted);margin-bottom:24px} .dash-widgets{display:flex;flex-wrap:wrap;gap:16px} .widget{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:260px;transition:box-shadow .2s,border-color .2s} .widget:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.06)} .widget-icon{font-size:30px} .widget-body{display:flex;flex-direction:column} .widget-body strong{color:var(--text);font-size:16px} .widget-body span{color:var(--muted);font-size:13px} /* selettore Privato/Azienda */ .ptype-switch{display:flex;gap:12px;margin:16px 0 22px} .auth-box .ptype-switch label.ptype-opt{flex:1;display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:600} .ptype-opt input{width:auto;margin:0} .ptype-opt span{line-height:1} .ptype-opt:has(input:checked){border-color:var(--brand);background:#f2faf0;color:var(--brand)} .auth-box-wide{max-width:520px} /* intl-tel-input: adatta al nostro stile */ .iti{width:100%} .iti input#phone{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:15px} .iti__dropdown-content{border-radius:8px} .iti--separate-dial-code .iti__selected-flag{border-radius:6px 0 0 6px} /* footer */ .site-footer{background:var(--bg-soft);border-top:1px solid var(--line);margin-top:40px;padding:30px 0} .footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;color:var(--muted);font-size:14px} .footer-col strong{color:var(--text);font-size:18px} /* header dark (match footer) */ .site-header{background:#243024;border-bottom:3px solid #a1cb03} .brand{display:flex;align-items:center;gap:12px} .brand-bull{height:52px;display:block} .brand-word{height:26px;display:block} .main-nav a{color:#e6ece2} .main-nav a:hover{color:#a1cb03} .header-right .auth-links a{color:#e6ece2} .header-right .auth-links a:hover{color:#a1cb03} .lang-switch a{color:#c9d2cc;border-color:#3a4a35} .lang-switch a.active{background:#a1cb03;color:#243024;border-color:#a1cb03} .header-inner{padding:12px 20px;align-items:center} /* ===== Testata unificata pagine (CATALOG style) ===== */ .zx-head{text-align:center;padding:20px 16px 20px;background:#fff} .zx-eyebrow{display:block;letter-spacing:6px;color:#9aa79f;font-size:.72rem;font-weight:700;text-transform:uppercase} .zx-head h1{margin:.35rem 0 .1rem;font-size:2.4rem;color:#243029;font-weight:800;letter-spacing:1px;text-transform:uppercase} .zx-head h1 span{color:#7cc53f} .zx-sub{color:#8a968f;margin:.4rem 0 0;font-size:.95rem} .zx-rule{display:block;width:54px;height:4px;background:#7cc53f;border-radius:3px;margin:18px auto 0} @media(max-width:600px){.zx-head h1{font-size:2rem}} /* ============ HEADER RESPONSIVE / HAMBURGER ============ */ .header-inner{gap:12px} .nav-collapse{display:flex;align-items:center;flex:1;justify-content:center;gap:6px} .header-right{display:flex;align-items:center;gap:6px} .nav-toggle{display:none;width:42px;height:42px;background:transparent;border:0;cursor:pointer;padding:9px;flex-direction:column;justify-content:space-between} .nav-toggle span{display:block;height:2px;width:100%;background:#e6ece2;border-radius:2px;transition:.28s;pointer-events:none} .nav-toggle{-webkit-tap-highlight-color:transparent;touch-action:manipulation} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)} .nav-backdrop{position:fixed;inset:0;background:rgba(20,26,18,.5);z-index:985} @media(max-width:960px){ .header-inner{height:auto;padding:10px 16px} .brand-bull{height:44px} .brand-word{height:22px} .nav-toggle{display:flex} /* menu a tendina full-width sotto header */ .nav-collapse{ position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px); background:#243024;flex-direction:column;justify-content:flex-start;align-items:stretch; gap:0;padding:76px 0 24px;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:990;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.3) } .nav-collapse.open{transform:translateX(0)} .main-nav{display:flex;flex-direction:column;width:100%} .main-nav a{margin:0;padding:15px 24px;border-bottom:1px solid #33422f;font-size:1.02rem} .auth-links{display:flex;flex-direction:column;width:100%;margin-top:8px} .auth-links a{padding:14px 24px;border-bottom:1px solid #33422f} } @media(max-width:420px){ .lang-switch a{padding:3px 6px;font-size:12px} .brand-bull{height:38px} .brand-word{height:19px} } /* ============ MOBILE — griglie e testate ============ */ @media(max-width:600px){ .zx-head{padding:24px 16px 10px} .zx-head h1{font-size:1.7rem} .zx-eyebrow{letter-spacing:4px} .container{padding:0 16px} } /* evita overflow orizzontale globale */ html,body{max-width:100%;overflow-x:hidden} img,iframe{max-width:100%} /* toggle sempre cliccabile, anche a menu aperto (sopra il pannello) */ .nav-toggle{position:relative;z-index:1001} @media(max-width:960px){ .site-header{position:relative;z-index:1001} .nav-toggle[aria-expanded="true"]{position:fixed;top:14px;right:16px} .nav-toggle[aria-expanded="true"] span{background:#fff} } /* ============ HEADER DESKTOP REFINE ============ */ @media(min-width:961px){ .header-inner{height:74px;padding:0 20px;gap:18px} /* logo: PNG trasparenti (toro cerchio + scritta ZAOX) */ .brand{display:flex;align-items:center;gap:14px} .brand-bull{height:52px} .brand-word{height:26px} /* nav centrale bilanciata */ .nav-collapse{gap:16px} .main-nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap} .main-nav a{margin:0;font-size:.9rem;font-weight:600;letter-spacing:.2px;position:relative;padding:4px 0;white-space:nowrap} .main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#a1cb03;transform:scaleX(0);transform-origin:left;transition:transform .22s} .main-nav a:hover::after{transform:scaleX(1)} /* auth: separati e leggibili, Register come pill */ .auth-links{display:flex;align-items:center;gap:12px;margin-left:4px;padding-left:16px;border-left:1px solid #3a4a35;white-space:nowrap} .auth-links a{font-size:.9rem;font-weight:700} .auth-links a:last-child{background:#a1cb03;color:#243024!important;padding:7px 16px;border-radius:20px;transition:.18s} .auth-links a:last-child:hover{background:#b6dd1a;color:#243024!important} /* gruppo destro allineato */ .header-right{gap:14px} .lang-switch{display:flex;gap:6px} .lang-switch a{padding:5px 9px;border-radius:6px;font-size:12px;font-weight:700;line-height:1;border:1px solid #3a4a35;color:#c9d2cc} .cart-link{margin-left:2px;color:#e6ece2} .cart-link:hover{color:#a1cb03} } /* ===== Selettori a tendina in header: lingua + valuta (14/09) ===== Sostituiscono le vecchie liste piatte .lang-switch / .cur-switch. Il menu e' in position:absolute dentro uno span relative, cosi' non allarga l'header quando si apre. */ .hd-sel{position:relative;display:inline-block} .hd-sel-btn{display:inline-flex;align-items:center;gap:5px;background:transparent; border:1px solid #3a4a35;color:#c9d2cc;border-radius:6px;padding:5px 9px; font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:.15s;font-family:inherit} .hd-sel-btn:hover{border-color:#a1cb03;color:#fff} .hd-sel.open .hd-sel-btn{border-color:#a1cb03;color:#243024;background:#a1cb03} .hd-sel-arrow{font-size:9px;opacity:.8;transition:transform .15s} .hd-sel.open .hd-sel-arrow{transform:rotate(180deg)} .hd-sel-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:200; min-width:150px;background:#fff;border:1px solid #e0e4dd;border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.18);padding:5px;overflow:hidden} .hd-sel.open .hd-sel-menu{display:block} .hd-sel-menu a{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:6px; font-size:13px;color:#3d4a3d;text-decoration:none;white-space:nowrap;border:0} .hd-sel-menu a b{min-width:26px;font-weight:800;color:#243024} .hd-sel-menu a:hover{background:#f1f6ec;color:#243024} .hd-sel-menu a.active{background:#4d9b4c;color:#fff} .hd-sel-menu a.active b{color:#fff} @media(max-width:860px){ .hd-sel-menu{right:auto;left:0} } /* ===== DEALER_DASH_20260923 — dealer area layout ===== Cloned from zaox.cz assets/css/style.css (.dash-* rules), which /global never had: the dashboard was a single widget with no sidebar. Added at the end of the file, nothing above was reordered. */ .dash-wrap{display:flex;gap:28px;align-items:flex-start;max-width:1200px;margin:0 auto 60px;padding:0 16px} .dash-nav{flex:0 0 230px;background:#fff;border:1px solid #e3e6e3;border-radius:10px;overflow:hidden} .dash-nav-head{padding:14px 16px;background:#f5f7f4;border-bottom:1px solid #e3e6e3} .dash-nav-user{font-weight:700;font-size:14px;color:#2c3327;display:block} .dash-nav-badge{display:inline-block;margin-top:6px;padding:.1rem .5rem;border-radius:3px; background:#1e7a3c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em} .dash-nav ul{list-style:none;margin:0;padding:6px} .dash-nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:7px;color:#3a4235;text-decoration:none;font-size:14px} .dash-nav-link:hover{background:#f2f5f0} .dash-nav-link.is-active{background:#7cc53f;color:#fff;font-weight:600} .dash-nav-ico{font-size:16px;line-height:1} .dash-main{flex:1 1 auto;min-width:0} .dash-main .muted{color:#6b7364} .dash-dealer-line{margin-top:.6rem} .dash-dealer-badge{display:inline-block;padding:.15rem .6rem;border-radius:3px; background:#1e7a3c;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.04em} .imp-bar{position:fixed;top:0;left:0;right:0;z-index:9998;background:#c0392b;color:#fff; padding:8px 16px;display:flex;justify-content:space-between;align-items:center;font-size:14px} .imp-bar a{color:#fff;text-decoration:underline;font-weight:600} .imp-bar a:hover{color:#ffe3de} body:has(.imp-bar){padding-top:38px} @media (max-width:820px){ .dash-wrap{flex-direction:column;gap:16px} .dash-nav{flex:1 1 auto;width:100%} .dash-nav ul{display:flex;gap:6px;overflow-x:auto} .dash-nav-link{white-space:nowrap} } /* ===== DEALER_MENU_20260923 — dealer area: one card style for both pages ===== Dashboard and Profile now share the same shell (page-head + .dash-wrap + shared menu). The profile form still uses .auth-box, which is designed as a STANDALONE centred card (max-width:420px; margin:20px auto): dropped inside .dash-main it would render narrow and floating instead of filling the column. .dash-card neutralises exactly those two properties and gives both pages the same white box. Appended at the end, nothing above reordered. */ .dash-card{background:#fff;border:1px solid var(--line);border-radius:10px; padding:24px 26px;margin:0 0 20px} /* when .dash-card is applied to an .auth-box, undo the standalone-card rules */ .dash-main .auth-box.dash-card, .dash-main .auth-box-wide.dash-card{max-width:none;width:100%;margin:0 0 20px} .dash-main .auth-box.dash-card h1{font-size:20px} .dash-main .dash-card > :first-child{margin-top:0} .dash-main .dash-card > :last-child{margin-bottom:0} /* ===== MINI_LIST_20260923 — dealer price table (text only, no images) ===== */ .price-table{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:14px} .price-table th,.price-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .price-table thead th{background:#f5f7f4;font-size:12px;letter-spacing:.04em; text-transform:uppercase;color:#5c6657;border-bottom:2px solid var(--line);white-space:nowrap} .price-table tbody tr:hover{background:#fafbfa} .price-table .num{text-align:right;white-space:nowrap} .price-table .row-sub{display:block;font-size:12px;color:#8a927f;font-weight:400;margin-top:2px} .price-table .price-dealer{font-weight:700;color:#1e7a3c} .dash-list-intro{margin-bottom:4px} .price-note{font-size:12.5px;line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} /* on narrow screens the table scrolls instead of squashing the prices */ @media (max-width:760px){ .dash-main .dash-card{overflow-x:auto} .price-table{min-width:560px} } /* ZAOX_PP_TEMP 20260923 — temporary internal column, visually marked as such so nobody mistakes it for a dealer-facing price. Remove with the column. */ .price-table th.col-temp,.price-table td.col-temp{background:#fff8e6; border-left:1px dashed #d9b038;border-right:1px dashed #d9b038} .price-table td.col-temp{color:#8a6d1f;font-weight:600} .temp-note{font-size:12.5px;line-height:1.5;margin-top:8px;padding:8px 10px; background:#fff8e6;border-left:3px solid #d9b038;color:#7a6119} /* MINI_LIST_20260923 — dealer margin: the number the dealer earns on resale */ .price-table td.price-margin{font-weight:700;color:#1e5f8a} .price-table td.price-margin .row-sub{color:#7c93a5;font-weight:600} /* ===== GROUPS_20260923 — nested menu (machinery groups) + group index ===== */ .dash-nav-sub{list-style:none;margin:2px 0 6px;padding:0 0 0 30px} .dash-nav-sub li{margin:0} .dash-nav-sublink{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:7px 10px;border-radius:6px;color:#5b6456;text-decoration:none;font-size:13px} .dash-nav-sublink:hover{background:#f2f5f0;color:#3a4235} .dash-nav-sublink.is-active{background:#e8f3dd;color:#2f6b1f;font-weight:700} .dash-nav-sublink .sub-count{font-size:11px;color:#9aa79f;background:#f0f3ee; border-radius:9px;padding:1px 7px;font-weight:600} .dash-nav-sublink.is-active .sub-count{background:#d4e8c2;color:#2f6b1f} /* group index */ .group-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px} .group-list a{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#fff; text-decoration:none;color:#3a4235} .group-list a:hover{border-color:#7cc53f;background:#fafdf7} .group-list .group-name{font-weight:700;font-size:15px} .group-list .group-count{font-size:12.5px;color:#8a927f;white-space:nowrap} /* INTL_PRICE_20260923 — international list price banner + Czech reference */ .intl-banner{margin:10px 0 4px;padding:10px 12px;background:#eef4fb; border-left:3px solid #4a86b8;border-radius:6px;font-size:12.5px;line-height:1.5;color:#42566b} .price-table td .row-sub{font-weight:400} /* MAX_ONLINE_20260923 — the list price is a CEILING for online ads, not a selling price. Styled as a rule (amber, bordered) rather than a footnote: a dealer who misses this line prices wrong on his own website. */ .maxonline-note{margin:16px 0 0;padding:12px 14px;background:#fff8e6; border:1px solid #e8cf8a;border-left:4px solid #d9a521;border-radius:8px; font-size:13px;line-height:1.55;color:#6b5514} .maxonline-note strong{display:block;margin-bottom:3px;color:#8a6a10;font-size:13.5px} /* MAX_ONLINE_20260923 (rev) — ads example inside the rule box */ .maxonline-note .ads-example{display:block;margin-top:7px;padding-top:7px; border-top:1px dashed #e0c87e;font-size:12.5px;color:#7a5f12} /* ===== MODEL_PAGE_20260923 — button in the list + single model page ===== */ .model-cell{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .model-names{display:block;min-width:0} .btn-model{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:6px;border:1px solid #cfe0c2;background:#f4f9ef; color:#4d7c2f;font-size:17px;font-weight:700;line-height:1;text-decoration:none; transition:background .12s,border-color .12s} .btn-model:hover{background:#7cc53f;border-color:#7cc53f;color:#fff} .crumb{margin:0 0 12px;font-size:13px} .crumb a{color:#5c7a4a;text-decoration:none} .crumb a:hover{text-decoration:underline} /* model head */ .model-head .mh-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px} .model-head .mh-title strong{font-size:17px;color:#243029} .model-head .mh-sku{font-size:12px;color:#939c8c} .mh-prices{display:flex;flex-wrap:wrap;gap:26px} .mh-p{display:flex;flex-direction:column;gap:1px} .mh-p em{font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#7d8875} .mh-p strong{font-size:19px;color:#243029} .mh-p strong.is-dealer{color:#1e7a3c} .mh-p strong.is-margin{color:#1e5f8a} .mh-p small{font-size:11.5px;color:#9aa492} /* section titles */ .sec-title{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:15px;color:#243029} .sec-count{font-size:12px;font-weight:700;color:#4d7c2f;background:#eef6e4; border-radius:9px;padding:1px 8px} .stock-recap{font-size:12.5px;margin:0 0 6px} /* stock table */ .stock-table td{vertical-align:middle} .pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11.5px;font-weight:700} .pill-available{background:#e4f5da;color:#2f6b1f} .pill-reserved{background:#fdf1d8;color:#8a6a10} .pill-sold{background:#eceff0;color:#77818a} .stock-table tr.st-sold td{opacity:.62} .cond-used{color:#8a6a10;font-weight:600} /* specs */ .spec-tab{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#6b7364} .spec-tab:first-of-type{margin-top:4px} .spec-table td{padding:8px 12px} .spec-table .spec-label{color:#5c6657;width:62%} .spec-table .spec-value strong{color:#243029} .spec-unit{color:#9aa492;font-size:12px;margin-left:3px} .spec-table tr.spec-hi{background:#f6fbf2} .spec-table tr.spec-hi .spec-value strong{color:#2f6b1f} @media (max-width:760px){ .stock-table,.spec-table{min-width:520px} } /* ===== FACTORY_OPT_20260923 — "Show more info" on each ready-made unit ===== */ .stock-table th.th-more,.stock-table td.td-more{width:1%;white-space:nowrap;text-align:right} .btn-more{display:inline-flex;align-items:center;gap:6px;padding:4px 10px; border:1px solid #cfe0c2;border-radius:14px;background:#f4f9ef;color:#4d7c2f; font-size:12px;font-weight:600;line-height:1.5;cursor:pointer; transition:background .12s,border-color .12s,color .12s} .btn-more:hover{background:#7cc53f;border-color:#7cc53f;color:#fff} .btn-more .bm-n{display:inline-block;min-width:16px;padding:0 5px;border-radius:8px; background:#e2f0d4;color:#2f6b1f;font-size:11px;font-weight:700;text-align:center} .btn-more:hover .bm-n{background:rgba(255,255,255,.28);color:#fff} .btn-more .bm-caret{font-size:10px;transition:transform .15s} .btn-more.is-open{background:#7cc53f;border-color:#7cc53f;color:#fff} .btn-more.is-open .bm-caret{transform:rotate(180deg)} .btn-more.is-open .bm-n{background:rgba(255,255,255,.28);color:#fff} /* the panel row */ .stock-table tr.fo-row > td{padding:0;background:#fafcf7;border-top:0} .fo-panel{padding:14px 16px 16px;border-left:3px solid #7cc53f} .fo-h{margin:0 0 9px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#6b7364} .fo-empty{margin:0;font-size:12.5px} .fo-table{margin:0;background:#fff} .fo-table th{font-size:11.5px} .fo-table td,.fo-table th{padding:7px 12px} .fo-table .num{text-align:right;white-space:nowrap} .fo-table td.is-dealer{color:#1e7a3c;font-weight:600} .fo-table td.is-margin{color:#1e5f8a} .fo-table tr.fo-tot td{border-top:2px solid var(--line);font-weight:700;background:#f6fbf2} .fo-note{margin:9px 0 0;font-size:11.5px;line-height:1.5} @media (max-width:760px){ .btn-more .bm-label{display:none} .fo-table{min-width:420px} } /* ===== RM_PRICE_20260923 — price columns on the ready-made table ===== */ /* Eleven columns: the money block needs a visual edge, or the dealer reads a figure off the wrong column. A left rule, not a colour: colour is already carrying meaning here (green = what you pay). */ .stock-table th.rm-sep,.stock-table td.rm-sep{border-left:1px solid var(--line)} .stock-table th.num,.stock-table td.num{text-align:right;white-space:nowrap} .stock-table td.num strong{display:block;font-size:13.5px} .stock-table td.num strong.is-dealer{color:#1e7a3c} .stock-table td.num .is-dealer{color:#1e7a3c;font-weight:600} .stock-table td.num .row-sub{display:block;font-size:11px;color:#9aa492;font-weight:400} .stock-table td.num .row-sub.rm-warn{color:#8a6a10} .stock-table th{font-size:11.5px;line-height:1.3} .rm-legend{margin-top:10px} /* Five money columns make this table wide. The existing overflow rule only kicks in under 760px, so between 760px and the table's own width the page would just clip the last columns — and a clipped price column is worse than a scrollbar, because nothing tells you it is missing. Scroll at any width. */ .stock-table{min-width:1020px} .dash-main .dash-card:has(> .stock-table){overflow-x:auto} /* :has() is recent; this fallback wrapper-free rule covers older engines by letting the card scroll whenever its content is wider than the card. */ @supports not selector(:has(*)){ .dash-main .dash-card{overflow-x:auto} } /* ===== DEALER_FULL_20260923 — the dealer area is an ADMIN, not an article ===== Giorgio: "tutto il concetto di ADMIN per dealer non puo' essere costipato dentro un container, deve andare fullscreen". The dealer pages were rendering inside the public site shell: header.php opens `
` with a 1160px cap, and .dash-wrap added a second 1200px cap of its own. A price table with five money columns was therefore squeezed into ~1120px of usable width and scrolled sideways on a 27" monitor — the tool was being framed like a blog post. Rather than edit header.php (shared with every public page, where the 1160px column is correct), the dealer shell breaks OUT of the container: `body:has(.dash-wrap)` scopes this to dealer/dashboard/profile pages only, so nothing on the public site can be affected by it. */ body:has(.dash-wrap) .site-main > .container{ max-width:none;width:100%;padding:0 } body:has(.dash-wrap) .dash-wrap{ max-width:none;width:100%;margin:0 0 48px;padding:0 28px;gap:24px } /* The page title belongs to the same full-width shell. */ body:has(.dash-wrap) .page-head{padding-left:28px;padding-right:28px} /* A sidebar of fixed width next to an elastic main area: the extra pixels go to the tables, which is what needed them. */ body:has(.dash-wrap) .dash-nav{flex:0 0 220px} /* Now that the page is full width, the wide table no longer needs a scrollbar on a normal screen: let it use the room instead of the min-width that was there to protect it inside the narrow column. */ body:has(.dash-wrap) .stock-table{min-width:0;width:100%} @media (max-width:1180px){ /* Below this the columns would start to crush: scroll again, deliberately. */ body:has(.dash-wrap) .stock-table{min-width:1020px} } @media (max-width:760px){ body:has(.dash-wrap) .dash-wrap{padding:0 12px} body:has(.dash-wrap) .page-head{padding-left:12px;padding-right:12px} } /* :has() is unsupported on older engines. There the dealer pages simply keep the old boxed layout: narrower than asked, but never broken. */ /* ===== DEALER_MARGIN_20260923 — margin on the unit as built ===== */ /* Eleven columns now. The margin is the conclusion of the row, so it gets the same blue it has in the model recap at the top of the page: the dealer already learned that colour there, and reusing it costs him nothing. */ .stock-table td.num strong.is-margin{color:#1e5f8a} /* Three money groups, separated by the existing rm-sep rule: what you pay | what it sells for | what you make. */ .stock-table th.rm-sep,.stock-table td.rm-sep{border-left:1px solid var(--line)} @media (max-width:1400px){ /* With eleven columns the break point moves up: below this the table scrolls rather than squeeze five-digit figures into three characters. */ body:has(.dash-wrap) .stock-table{min-width:1240px} } /* ===== ASSETS_20260923 — machine assets under the serial number ===== */ /* Giorgio: under the serial number of each ready-made, the assets of that unit. Deliberately mute and small: this is HOW the machine is built, not what it costs. The money columns keep the visual weight of the row; if the chips were loud, eight of them per line would bury the prices. No price is ever printed here — assets are inside the machine price, and a figure next to them reads as an extra charge. */ .asset-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0;padding:0;list-style:none; max-width:340px} .asset-chips li{font-size:11px;line-height:1.35;font-weight:500;color:#5c6657; background:#f3f5f0;border:1px solid #e6e9e1;border-radius:9px;padding:1px 7px} .ord-unit .asset-chips{max-width:none;margin-top:10px} /* ===== ORDER_20260923 — order sheet of one ready-made unit ===== */ /* The Order button sits under "show more info" in the same cell: reading the options and quoting the machine are two steps of one job. It is green and filled because it is the action of the row; the info toggle stays outlined so the two never get confused at a glance. */ .btn-order{display:inline-flex;align-items:center;justify-content:center; margin-top:6px;padding:5px 14px;border-radius:6px;border:1px solid #2f6b1f; background:#2f6b1f;color:#fff;font-size:12.5px;font-weight:700; text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s} .btn-order:hover{background:#265816;border-color:#265816;color:#fff} .stock-table td.td-more{text-align:right} .stock-table td.td-more .btn-order{display:flex} /* --- 1. machine recap on top --- */ .ord-unit{display:flex;flex-direction:column;gap:4px;padding-bottom:14px; border-bottom:1px solid var(--line);margin-bottom:14px} .ou-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ou-sku{font-size:17px;color:#243029} .ou-id .row-sub{display:inline;font-size:12px;color:#8a927f} .ord-recap{display:flex;flex-wrap:wrap;gap:26px} .or-item{display:flex;flex-direction:column;gap:1px} .or-item em{font-style:normal;font-size:11.5px;text-transform:uppercase; letter-spacing:.04em;color:#7d8875} .or-item strong{font-size:19px;color:#243029} .or-item strong.is-dealer{color:#1e7a3c} .or-item strong.is-margin{color:#1e5f8a} .or-item .row-sub{font-size:11.5px;color:#9aa492;font-weight:400} /* Same separator logic as the stock table: what you pay | what it sells for. */ .or-item.or-sep{border-left:1px solid var(--line);padding-left:26px} /* --- 2. accessories, in thumbs --- */ /* auto-fill, not auto-fit: with three accessories left the cards keep their size instead of stretching to half the screen each. */ .acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;margin:14px 0 0;padding:0;list-style:none} .acc-card{border:1px solid var(--line);border-radius:10px;background:#fff; transition:border-color .15s,box-shadow .15s} .acc-card:hover{border-color:#c6d3ba} /* The whole card is the label, so the click target is the card, not a 13px box: this is a list to be ticked quickly, often on a laptop trackpad. */ .ac-label{display:block;position:relative;cursor:pointer;margin:0;padding:12px} .ac-check{position:absolute;top:14px;left:14px;width:18px;height:18px; accent-color:#2f6b1f;cursor:pointer;z-index:2} .ac-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3; border-radius:7px;overflow:hidden;background:#fafbf9} .ac-thumb img{width:100%;height:100%;object-fit:contain} .ac-noimg{font-size:11.5px;color:#a8b09e} .ac-body{display:block;margin-top:10px} .ac-title{display:block;font-size:13px;font-weight:600;color:#243029;line-height:1.35} .ac-sku{display:block;font-size:11px;color:#9aa492;margin-top:2px} .ac-prices{display:flex;gap:16px;margin-top:9px;padding-top:9px; border-top:1px solid var(--line)} .ac-p{display:flex;flex-direction:column;gap:0} .ac-p em{font-style:normal;font-size:10.5px;text-transform:uppercase; letter-spacing:.03em;color:#7d8875} .ac-p strong{font-size:14px;color:#243029} .ac-p strong.is-dealer{color:#1e7a3c} /* A ticked card must be obvious from across the table: the dealer scrolls back up to check what he picked, and a pale tint alone is not enough. */ .acc-card.is-picked{border-color:#2f6b1f;box-shadow:0 0 0 1px #2f6b1f inset; background:#fbfdf9} /* --- 3 & 4. recap and totals --- */ .ord-table td .row-sub{display:block;font-size:11.5px;color:#8a927f; font-weight:400;margin-top:2px} .ord-table tfoot td{font-weight:700;border-top:2px solid var(--line)} .ord-table td.num.is-dealer{color:#1e7a3c} .ord-table td.num.is-margin{color:#1e5f8a} /* The machine line is the subject of the sheet; the accessories are added to it. Tinting it keeps that hierarchy once ten lines are on screen. */ .ord-total tr.ot-machine td{background:#f8faf6} .ord-total tr.ot-grand td{font-size:16px;border-top:2px solid #243029} /* The percentage is a reading of the row above, not a total of its own. */ .ord-total tr.ot-pct td{font-size:12.5px;font-weight:600;border-top:0; padding-top:2px;color:#5c6657} .ord-total tr.ot-pct td.muted{color:#c3c9bc} @media (max-width:760px){ .ord-table{min-width:520px} .ord-recap{gap:16px} .or-item.or-sep{border-left:0;padding-left:0} } /* ===== CART_20260923 — "Add to cart", decorative for now ===== */ /* Giorgio: il bottone c'e' ma non fa niente, lo completiamo poi. Styled as the primary action it will become, but disabled and visibly so: half opacity and a not-allowed cursor. Looking live while doing nothing is the one thing it must not do — on an order sheet a dealer would read the silence as "order sent". The note next to it says when it will work. */ .ord-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px} .btn-cart{padding:11px 26px;border-radius:7px;border:1px solid #2f6b1f; background:#2f6b1f;color:#fff;font-size:14.5px;font-weight:700;cursor:pointer} .btn-cart[disabled]{opacity:.45;cursor:not-allowed} .ord-soon{font-size:12.5px} /* ===== SPEC_DIAGRAM_20260923 — schematic drawing on Working Range / Size ===== */ /* Capped rather than full width: these are ~1.5 MB technical scans that, on a full-width dealer page, would blow up to 1600px and push the table they belong to off the screen. The drawing explains the numbers, it is not the subject of the section. */ .spec-diagram{margin:0 0 12px;padding:10px;border:1px solid var(--line); border-radius:8px;background:#fcfdfb;text-align:center} .spec-diagram img{max-width:100%;width:auto;max-height:420px;height:auto} @media (max-width:760px){ .spec-diagram img{max-height:260px} } /* ===== TH_WRAP_20260923 — narrower stock table ===== */ /* Giorgio: la pagina e' troppo larga. Two changes, no data lost: the Status column is gone (its pill now sits next to the serial), and the money headings break onto two lines. ⭐ The heading was setting the column width: `white-space:nowrap` on every th meant "Ready-made dealer price" reserved ~190px for figures that need 90. Allowing the break — and only in the headings, never in the figures — is what actually narrows the table. */ .stock-table thead th{white-space:normal;line-height:1.25} /* The numbers themselves must never wrap: a price split over two lines stops being a price. */ .stock-table td.num{white-space:nowrap} /* Serial and state on one line, wrapping together on a narrow screen. */ .stock-table .sku-line{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} /* With one column fewer and shorter headings the table fits in less room, so the scrollbar threshold comes down with it. These override the 1240px and 1020px set by the earlier blocks — same selector, later in the file. */ body:has(.dash-wrap) .stock-table{min-width:0} @media (max-width:1240px){ body:has(.dash-wrap) .stock-table{min-width:1080px} } @media (max-width:760px){ body:has(.dash-wrap) .stock-table{min-width:900px} } /* ===== ORDER_BTN_20260923 — smaller Order button ===== */ /* Giorgio: meno padding, meno largo. It sits in the last column of an already wide table: a button as big as a form submit was pushing that column out on its own. Tight padding and 11px type make it read as a row action, which is what it is. */ .stock-table .rm-actions .btn-order{padding:3px 10px;font-size:11.5px; margin-top:5px;font-weight:600} /* ===== FOOTNOTE_20260923 — (1) on the List price column ===== */ /* Small and raised, the way a footnote mark reads on paper, but still a real link: it must jump to the note, or it is decoration pretending to be a reference. */ .fn-ref{font-size:10px;vertical-align:super;margin-left:2px;color:#5c7a4a; text-decoration:none;font-weight:700} .fn-ref:hover{text-decoration:underline} /* The (1) inside the amber MAX ADVERTISED PRICE box the marker points at. */ .fn-num{font-weight:700;color:#8a6a10;margin-right:2px} /* Landing target: without it the heading lands under the sticky header. */ #fn1{scroll-margin-top:90px} /* Anchor target for footnote (2), same offset as (1). */ #fn2{scroll-margin-top:90px} /* ===== BOOKING_NO_20260923 — booking number under the model name ===== */ /* Monospace on the code only: it is meant to be read character by character and typed back to us, and a proportional font makes 0/O and 1/l a coin toss on a code that identifies a price. The label stays in the page font so the line does not shout. */ .booking-no{margin-top:3px} .booking-no code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#5c6657; background:#f3f5f0;border:1px solid #e6e9e1;border-radius:4px;padding:0 5px; -webkit-user-select:all;user-select:all} /* ===== ZAOX_PP_20260923 / NO_STOCK_20260923 ===== */ /* Our own profit on a unit: internal, so it stays visually quiet under the serial. Loud styling on an internal figure is how it ends up in a screenshot sent to a customer. */ .unit-pp{color:#8a927f} .unit-pp code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#5c6657; background:#f3f5f0;border:1px solid #e6e9e1;border-radius:4px; padding:0 4px;margin-left:4px;-webkit-user-select:all;user-select:all} .mh-booking{margin:8px 0 0} /* "Nothing in stock" is an invitation to call, not an error: green, not grey and not red. A grey line reads as "unavailable, move on" — which is the one conclusion it must not produce. */ .nostock-banner{margin:6px 0 0;padding:14px 16px;border:1px solid #cfe3c2; border-left:4px solid #4d9b4c;border-radius:8px;background:#f6fbf2; font-size:13.5px;line-height:1.55;color:#35462f} .nostock-banner strong{display:block;margin-bottom:2px;color:#2f6b1f} /* ===== FO_CHIPS_20260923 — option names under the options total ===== */ /* Same chips as the assets, in a money column: so they are right-aligned with the figure they explain and capped narrow. The cell holds a price — if the chips could grow, the column would widen and the table would go back to being too wide, which is what we just fixed. */ .stock-table .fo-chips{justify-content:flex-end;max-width:210px;margin-left:auto; text-align:right} .stock-table .fo-chips li{font-size:10.5px;padding:0 6px} /* ===== BOOKING_NO_20260923 — code above Add to cart ===== */ /* Bigger than the one in the table: this is the string the dealer copies into an email to us, and it changes as he ticks boxes. user-select:all makes one click select the whole code — a half-copied booking number is a wrong one. */ .ord-booking{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .ord-booking .ob-label{font-size:11.5px;text-transform:uppercase; letter-spacing:.04em;color:#7d8875;font-weight:700} .ord-booking code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px;font-weight:700;letter-spacing:.06em;color:#243029; background:#f3f5f0;border:1px solid #d9e0d2;border-radius:6px;padding:4px 12px; -webkit-user-select:all;user-select:all} /* ===== HYDRAULIC_20260923 — view-only attachments table ===== */ /* Family headers inside the table: fourteen attachments in one flat list read as a jumble, and the hose lines look like breakers. */ .hyd-table tr.hyd-cat td{background:#f3f5f0;font-size:11.5px;font-weight:700; text-transform:uppercase;letter-spacing:.04em;color:#5c6657;padding-top:9px; padding-bottom:9px} .hyd-table td .row-sub{display:block;font-size:11px;color:#9aa492;margin-top:2px} /* ===== BTN_IN_MARGIN_20260923 — actions inside the Dealer margin cell ===== */ /* The two buttons moved out of their own column into the margin cell. Right aligned like the figure above them, stacked, and not stretched: a full width button under a price reads as a banner, not as a row action. `align-items:flex-end` instead of `width:100%` keeps each one as wide as its own label. */ .stock-table .rm-actions{display:flex;flex-direction:column;align-items:flex-end; gap:5px;margin-top:8px} .stock-table .rm-actions .btn-more, .stock-table .rm-actions .btn-order{margin-top:0} /* ===== WARRANTY_20260923 — extended warranty picker ===== */ /* The whole first cell is the label, so the click target is the row and not a 13px radio. */ .warr-pick{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0} .warr-radio{width:17px;height:17px;accent-color:#2f6b1f;cursor:pointer;flex:0 0 auto} .warr-table tbody tr:hover{background:#fbfdf9} /* Same tint as the accessories in the total block: the warranty is part of the machine, and the final table should read as one list. */ .ord-total tr.ot-warr td{background:#fdfdfb} /* ===== FITS_ON_20260923 — which machine an attachment fits ===== */ /* Chips like the assets, capped: a breaker that fits three machines must not make the column wider than the prices next to it. */ .fits-cell{vertical-align:middle} .fits-chips{max-width:210px;margin:0} .fits-chips li{font-size:10.5px;padding:0 6px;white-space:nowrap} /* ===== CURRENCY_20260923 — USD/EUR switch under the DEALER label ===== */ /* Due bottoni affiancati che riempiono la larghezza del menu: la scelta e' binaria e va vista tutta insieme, non cercata in una tendina. Quello attivo e' pieno, non solo evidenziato: il dealer deve sapere SENZA pensarci in che valuta sta leggendo i prezzi, perche' sbagliare valuta su un listino e' un errore che si scopre tardi. */ .dash-nav-cur{display:flex;gap:6px;margin-top:10px} .dnc-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center; padding:5px 8px;border:1px solid var(--line);border-radius:6px; background:#fff;color:#5c6657;font-size:12px;font-weight:700; text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s} .dnc-btn:hover{border-color:#c6d3ba;color:#2f6b1f} .dnc-btn.is-on{background:#2f6b1f;border-color:#2f6b1f;color:#fff} /* TERMS_20260923 — sales conditions page. The page is one long legal document: the only job of this CSS is to make it readable. Measure limited, generous line height, tables that survive a phone screen. Everything reuses .dash-card, so the page cannot drift away from the rest of the dealer area. */ .terms-intro p{margin:0 0 10px} .terms-updated{font-size:13px} .terms-toc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .terms-toc-title{margin:0 0 8px;font-weight:600;font-size:14px} .terms-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px} .terms-toc li{margin:0 0 5px;break-inside:avoid} .terms-toc a{text-decoration:none} .terms-toc a:hover{text-decoration:underline} .terms-sec h2{margin:0 0 12px;font-size:20px;line-height:1.3} .terms-sec h3{margin:20px 0 8px;font-size:16px} .terms-sec h4{margin:16px 0 6px;font-size:14px;font-weight:600} .terms-sec p{margin:0 0 10px;max-width:74ch;line-height:1.6} .terms-list{margin:0 0 12px;padding-left:20px;max-width:74ch} .terms-list li{margin:0 0 7px;line-height:1.6} /* The rule a dealer will argue about deserves to be findable at a glance. */ .terms-callout{margin:18px 0;padding:14px 16px;border-left:3px solid var(--accent,#c8102e); background:#faf9f7;border-radius:0 8px 8px 0} .terms-callout h3{margin:0 0 8px} .terms-callout :last-child{margin-bottom:0} .terms-tablewrap{overflow-x:auto;margin:0 0 12px} .terms-table{width:100%;border-collapse:collapse;font-size:14px} .terms-table th,.terms-table td{padding:9px 12px;border:1px solid var(--line);text-align:left; vertical-align:top} .terms-table th{background:#f4f3f0;font-weight:600;white-space:nowrap} .terms-table tr:nth-child(even) td{background:#fbfbfa} .terms-foot h3{margin:14px 0 6px;font-size:15px} @media (max-width:760px){ .terms-toc ol{columns:1} .terms-table{font-size:13px} .terms-table th,.terms-table td{padding:7px 9px;white-space:normal} } /* Printing these conditions is a normal thing for a dealer to do: the menu, the header and the index are noise on paper. */ @media print{ .dash-nav,.terms-toc,.page-head .zx-eyebrow,.site-header,.site-footer{display:none !important} .dash-wrap{display:block} .dash-card{border:0;box-shadow:none;padding:0;margin:0 0 18px;break-inside:avoid} .terms-sec h2{break-after:avoid} .terms-callout{border-left:2px solid #000;background:none} } /* ANTIGRAB_20260923 — the