/* Nelb WooCommerce Macchedil Pack — Navigazione mobile (bottom bar + drawer). */ /* ============== BOTTOM BAR ============== */ .nelb-mbar-wrap { --nelb-mbar-bp: 767px; --nelb-mbar-h: 64px; display: none; } .nelb-mbar-wrap.vis-always { display: block; } @media (max-width: 767px) { .nelb-mbar-wrap.vis-mobile { display: block; } } .nelb-mbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nelb-mbar-h, 64px); background: #fff; border-top: 1px solid #ededed; display: flex; box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); z-index: 999; padding-bottom: env(safe-area-inset-bottom, 0px); } .nelb-mbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9a9a9a; text-decoration: none; font-size: 10px; font-weight: 700; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; padding: 0; cursor: pointer; position: relative; font-family: inherit; transition: color .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; outline: none; } .nelb-mbar-item:focus { outline: none; } .nelb-mbar-item:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } .nelb-mbar-item:hover { color: #FE3F12; } .nelb-mbar-item.is-active { color: #FE3F12; } .nelb-mbar-item.is-active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #FE3F12; } .nelb-mbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; } .nelb-mbar-item svg { width: 22px; height: 22px; display: block; } .nelb-mbar-badge { position: absolute; top: -6px; right: -10px; background: #FE3F12; color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(254, 63, 18, .35); } .nelb-mbar-badge[hidden] { display: none; } .nelb-mbar-label { line-height: 1; } /* Hide on scroll down */ .nelb-mbar-wrap.hide-on-scroll .nelb-mbar { transform: translateY(0); transition: transform .25s ease; } .nelb-mbar-wrap.hide-on-scroll.is-hidden .nelb-mbar { transform: translateY(100%); } /* Body padding helper (added by JS to ) */ body.has-nelb-mbar { padding-bottom: var(--nelb-mbar-h, 64px); } @media (min-width: 768px) { body.has-nelb-mbar { padding-bottom: 0; } } /* ============== DRAWER ============== */ .nelb-drawer-wrap { --nelb-drawer-bp: 1024px; display: inline-flex; align-items: center; gap: 8px; } @media (min-width: 1025px) { .nelb-drawer-wrap.hide-above { display: none; } } .nelb-drawer-trigger { width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; padding: 0; display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; line-height: 1; } .nelb-drawer-trigger span { display: block !important; width: 22px; height: 3px; background: #212121; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; flex: 0 0 auto; } .nelb-drawer-wrap.is-open .nelb-drawer-trigger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nelb-drawer-wrap.is-open .nelb-drawer-trigger span:nth-child(2) { opacity: 0; } .nelb-drawer-wrap.is-open .nelb-drawer-trigger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nelb-drawer-trigger-label { font-size: 13px; font-weight: 700; color: #212121; cursor: pointer; } /* Mask + drawer */ .nelb-drawer-mask { position: fixed; inset: 0; background: rgba(20, 20, 20, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 998; } .nelb-drawer-wrap.is-open .nelb-drawer-mask { opacity: 1; pointer-events: auto; } .nelb-drawer { position: fixed; top: 0; bottom: 0; width: 80%; max-width: 460px; background: #fff; box-shadow: none; display: flex; flex-direction: column; z-index: 1000; transition: transform .3s cubic-bezier(.4, 0, .2, 1); overflow: hidden; } /* Direzioni */ .nelb-drawer-wrap.side-left .nelb-drawer { left: 0; transform: translateX(-101%); } .nelb-drawer-wrap.side-right .nelb-drawer { right: 0; transform: translateX(101%); } .nelb-drawer-wrap.side-full .nelb-drawer { left: 0; right: 0; width: 100%; max-width: none; transform: translateY(-100%); } .nelb-drawer-wrap.side-left.is-open .nelb-drawer, .nelb-drawer-wrap.side-right.is-open .nelb-drawer { transform: translateX(0); } .nelb-drawer-wrap.side-full.is-open .nelb-drawer { transform: translateY(0); } /* Drawer content */ .nelb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: #fff; border-bottom: 1px solid #ededed; color: #212121; } .nelb-drawer-head .t { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } .nelb-drawer-close { background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .nelb-drawer-close:hover { opacity: .7; } /* Drawer body (sostituisce la vecchia struttura) */ .nelb-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nelb-drawer-menu { padding: 6px 0; } .nelb-drawer-menu ul { list-style: none; margin: 0; padding: 0; } .nelb-drawer-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: #212121; text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid #f3f3f3; transition: background .12s ease, color .12s ease; } .nelb-drawer-menu a:hover { background: #F5F7F7; color: #FE3F12; } .nelb-drawer-menu li.current-menu-item > a { color: #FE3F12; } /* Submenu */ .nelb-drawer-menu ul ul a { padding-left: 36px; font-size: 13px; text-transform: none; font-weight: 400; color: #4a4a4a; } .nelb-drawer-foot { padding: 14px 20px; border-top: 1px solid #ededed; font-size: 12px; color: #9a9a9a; } .nelb-drawer-empty { padding: 24px 20px; color: #9a9a9a; font-size: 13px; text-align: center; } /* Drawer: ricerca */ .nelb-drawer-search { padding: 14px; } .nelb-drawer-search-form { display: flex; align-items: center; border: 1.5px solid #E0E0E0; border-radius: 10px; overflow: hidden; background: #fff; } .nelb-drawer-search-form input[type="search"] { flex: 1; border: none; padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; background: transparent; } .nelb-drawer-search-form button { background: #FE3F12; color: #fff; border: none; width: 44px; height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* Drawer: categorie */ .nelb-drawer-cats ul { list-style: none; margin: 0; padding: 6px 0; } .nelb-drawer-cats a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: #212121; text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid #F3F3F3; transition: background .12s ease, color .12s ease; } .nelb-drawer-cats a:hover { background: #F5F7F7; color: #FE3F12; } .nelb-drawer-cats .lbl { flex: 1; } .nelb-drawer-cats .count { font-size: 11px; font-weight: 800; color: #9a9a9a; } /* Drawer: carrello mini (carrello in colonna stretta) */ .nelb-drawer-wrap.type-cart .nelb-drawer { width: 90%; max-width: 420px; } .nelb-cart-in-drawer { gap: 14px; padding: 14px; } .nelb-cart-in-drawer .panel { box-shadow: none; } /* Editor preview: il drawer è fixed; in editor diamogli un placeholder */ .elementor-editor-active .nelb-drawer-wrap .nelb-drawer, .elementor-editor-active .nelb-drawer-wrap .nelb-drawer-mask { position: static; transform: none; opacity: 1; pointer-events: none; width: 100%; max-width: 360px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); border: 1px solid #ededed; border-radius: 12px; margin-top: 10px; } .elementor-editor-active .nelb-drawer-wrap .nelb-drawer-mask { display: none; } /* ========================================================== * v1.8.2 — Pill style per voci della bar + override stati. * ========================================================== */ /* Voce con pill: sfondo/ombra/raggio applicati */ .nelb-mbar-item.is-pill { background: #FFFFFF !important; border: 1px solid #EDEDED; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 20, 20, .08) !important; padding: 8px 10px; margin: 6px 0; align-self: center; flex: 0 1 auto; min-width: 56px; } /* Override del trigger hamburger (anche stand-alone) per evitare radius/shadow del tema */ .nelb-drawer-trigger { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent; } .nelb-drawer-close { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================== * v1.8.2 — Categorie nel drawer: indentazione + accordion. * ========================================================== */ .nelb-drawer-cats ul { list-style: none; margin: 0; padding: 0; } .nelb-drawer-cats > ul.lvl-1 { padding: 6px 0; } .nelb-drawer-cats .row { display: flex; align-items: stretch; border-bottom: 1px solid #F3F3F3; } .nelb-drawer-cats .row .lnk { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: #212121; text-decoration: none; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; transition: background .12s ease, color .12s ease; } .nelb-drawer-cats .row .lnk:hover { background: #F5F7F7; color: #FE3F12; } .nelb-drawer-cats .lbl { flex: 1; } .nelb-drawer-cats .count { font-size: 11px; font-weight: 800; color: #9a9a9a; } /* Bottone toggle accordion (chevron a destra) */ .nelb-drawer-cats .nelb-cats-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; width: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; color: #9a9a9a; border-left: 1px solid #F3F3F3 !important; padding: 0 !important; } .nelb-drawer-cats .nelb-cats-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; } .nelb-drawer-cats li.has-children:not(.is-collapsed) > .row > .nelb-cats-toggle svg { transform: rotate(180deg); } /* Sotto-livelli: indentati progressivamente */ .nelb-drawer-cats .sub { overflow: hidden; } .nelb-drawer-cats ul.lvl-2 .lnk { padding-left: 36px; font-size: 13px; text-transform: none; font-weight: 600; color: #4a4a4a; } .nelb-drawer-cats ul.lvl-3 .lnk { padding-left: 52px; font-size: 13px; text-transform: none; font-weight: 400; color: #6a6a6a; } .nelb-drawer-cats ul.lvl-4 .lnk { padding-left: 68px; font-size: 12px; text-transform: none; font-weight: 400; color: #6a6a6a; } .nelb-drawer-cats ul.lvl-5 .lnk { padding-left: 84px; font-size: 12px; text-transform: none; font-weight: 400; color: #6a6a6a; } /* Accordion: nascondi sub quando il padre è collapsed */ .nelb-drawer-cats.mode-accordion li.is-collapsed > .sub { display: none; } /* Modalità sempre espansa: visibile (default) */ .nelb-drawer-cats.mode-expanded .sub { display: block; }