/** * Orola Child Theme — theme.css v3.1.0 · Direzione F * ───────────────────────────────────────────────────────────────────────────── * Direzione: MODERN MINIMAL · bianco-first · oro come accento funzionale * * Brand Gold #caa133 · Navy #1c3464 * Fonts Inter (single sans, no Cormorant) * Icons Bootstrap Icons 1.11 (CDN, caricate da head.tpl) * Parent Hummingbird 2.0.x · Bootstrap 5.3.3 · PrestaShop 9.1.1 * * REGOLE D'ORO * - Niente box-shadow decorativi, niente gradient, niente backdrop-filter. * - Bordi sottili (0.5–1px) come unico elemento di separazione. * - White space generoso. Spaziatura in rem, gap interni in px. * - Tabular numerals per i prezzi. * - Hummingbird usa @layer: questo file è unlayered → vince il cascade * senza !important (salvo override !important del parent). * - Le utility Bootstrap (d-flex, container-md, row, col-*…) sono già * compilate nel parent: NON ridefinirle qui. * * INDICE * 1. Design tokens * 2. Reset & tipografia globale * 3. Topbar (.header-top) * 4. Header sticky (.header-bottom) * 5. Logo * 6. Search bar * 7. Account / Cart icons * 8. Desktop navigation (ps-mainmenu) * 9. Mobile menu offcanvas * 10. Reassurance strip * 11. Bottoni * 12. Form & input * 13. Product miniature * 14. Listing / category * 15. Pagina prodotto * 16. Breadcrumb * 17. Checkout / cart * 18. Footer * 19. Bottom mobile nav * 20. Utility & override mirati * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Palette ── */ --orola-gold: #caa133; --orola-gold-dark: #a0801f; --orola-gold-light: #e8d28a; --orola-gold-pale: #faf4e3; --orola-navy: #1c3464; --orola-navy-dark: #14233c; --orola-navy-soft: #4a5b85; /* ── Surfaces / neutri ── */ --orola-white: #ffffff; --orola-bg: #ffffff; --orola-surface: #f7f7f5; /* hero panels, soft cards */ --orola-surface-2: #fafafa; /* product image bg */ --orola-border: #ececec; /* default 1px */ --orola-border-strong: #d9d9d6; /* hover / emphasis */ --orola-text: #1c3464; /* corpo testo = navy */ --orola-text-muted: #6b7280; --orola-text-faint: #9aa0a6; /* ── Semantic ── */ --orola-success: #1d9e75; --orola-danger: #c0392b; /* ── Typography ── */ --font-ui: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ── Radii ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ── Layout ── */ --header-h: 64px; --topbar-h: 34px; --container-max: 1600px; /* ── Motion ── */ --t-fast: 120ms ease; --t-med: 200ms ease; } /* Override variabili Bootstrap (limitato all'essenziale) */ :root { --bs-body-font-family: var(--font-ui); --bs-body-color: var(--orola-text); --bs-body-bg: var(--orola-bg); --bs-primary: var(--orola-gold); --bs-link-color: var(--orola-navy); --bs-link-hover-color: var(--orola-gold-dark); --bs-border-color: var(--orola-border); --bs-border-radius: var(--radius-md); } /* ═══════════════════════════════════════════════════════════════════════════ 2. RESET & TIPOGRAFIA GLOBALE ═══════════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { font-family: var(--font-ui); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--orola-text); background: var(--orola-bg); line-height: 1.55; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-ui); font-weight: 500; color: var(--orola-navy-dark); letter-spacing: -0.01em; line-height: 1.2; } h1, .h1 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; } h2, .h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); } h3, .h3 { font-size: 1.15rem; } a { color: var(--orola-navy); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--orola-gold-dark); } ::selection { background: var(--orola-gold); color: var(--orola-navy-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 3. TOPBAR (.header-top) ═══════════════════════════════════════════════════════════════════════════ */ .header-top { background: var(--orola-navy-dark); color: var(--orola-white); min-height: var(--topbar-h); font-size: 12px; letter-spacing: 0.01em; } .header-top a, .header-top .nav-link, .header-top .dropdown-toggle { color: var(--orola-white); opacity: 0.9; } .header-top a:hover { color: var(--orola-gold); opacity: 1; } .header-top .container-md { min-height: var(--topbar-h); } @media (max-width: 767.98px) { .header-top { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 4. HEADER STICKY (.header-bottom) ═══════════════════════════════════════════════════════════════════════════ */ .header { background: var(--orola-white); border-bottom: 1px solid var(--orola-border); position: sticky; top: 0; z-index: 1020; } .header-bottom { min-height: var(--header-h); background: var(--orola-white); } .header-bottom__row { min-height: var(--header-h); padding-block: 8px; } .header-bottom + .ps-mainmenu--desktop, .header .ps-mainmenu--desktop { border-top: 1px solid var(--orola-border); background: var(--orola-white); } /* ═══════════════════════════════════════════════════════════════════════════ 5. LOGO ═══════════════════════════════════════════════════════════════════════════ */ .header-bottom__logo img, .header .logo img { max-height: 42px; width: auto; display: block; } .header-bottom__h1 { line-height: 1; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 6. SEARCH BAR (#search_widget) ═══════════════════════════════════════════════════════════════════════════ */ #search_widget, .search-widget { max-width: 480px; flex: 1 1 auto; } #search_widget form, .search-widget form { position: relative; } #search_widget input[type="text"], .search-widget input[type="text"] { width: 100%; height: 40px; padding: 0 44px 0 16px; background: var(--orola-surface); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; color: var(--orola-text); transition: border-color var(--t-fast), background var(--t-fast); } #search_widget input[type="text"]:hover, .search-widget input[type="text"]:hover { background: var(--orola-white); border-color: var(--orola-border-strong); } #search_widget input[type="text"]:focus, .search-widget input[type="text"]:focus { outline: none; background: var(--orola-white); border-color: var(--orola-gold); box-shadow: 0 0 0 3px var(--orola-gold-pale); } #search_widget input::placeholder { color: var(--orola-text-faint); } #search_widget button[type="submit"], .search-widget button[type="submit"] { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: transparent; color: var(--orola-navy); border: 0; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; } #search_widget button[type="submit"]:hover { color: var(--orola-gold-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 7. ACCOUNT / CART ICONS (header right) ═══════════════════════════════════════════════════════════════════════════ */ .orola-account-btn, .header-block__action-btn, .blockcart .header__action { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--orola-navy); background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); transition: background var(--t-fast), color var(--t-fast); text-decoration: none; } .orola-account-btn:hover, .header-block__action-btn:hover, .blockcart .header__action:hover { background: var(--orola-surface); color: var(--orola-gold-dark); } .blockcart .header__action { position: relative; } .blockcart .header__action .cart-products-count, .blockcart__count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--orola-gold); color: var(--orola-navy-dark); font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ 8. DESKTOP NAVIGATION (ps-mainmenu) ═══════════════════════════════════════════════════════════════════════════ */ .ps-mainmenu--desktop .ps-mainmenu__desktop { padding: 0; } .ps-mainmenu__desktop .top-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .ps-mainmenu__desktop .top-menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--orola-navy); border-radius: 0; position: relative; transition: color var(--t-fast); } .ps-mainmenu__desktop .top-menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--orola-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med); } .ps-mainmenu__desktop .top-menu > li:hover > a, .ps-mainmenu__desktop .top-menu > li.current > a, .ps-mainmenu__desktop .top-menu > li > a:focus-visible { color: var(--orola-navy-dark); } .ps-mainmenu__desktop .top-menu > li:hover > a::after, .ps-mainmenu__desktop .top-menu > li.current > a::after { transform: scaleX(1); } .ps-mainmenu__desktop .sub-menu, .ps-mainmenu__desktop .top-menu .submenu { background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 12px; margin-top: 4px; } .ps-mainmenu__desktop .sub-menu a { font-size: 13px; color: var(--orola-text); padding: 6px 10px; border-radius: var(--radius-sm); display: block; } .ps-mainmenu__desktop .sub-menu a:hover { background: var(--orola-gold-pale); color: var(--orola-navy-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 9. MOBILE MENU OFFCANVAS (#mobileMenu) ═══════════════════════════════════════════════════════════════════════════ */ .ps-mainmenu__mobile-toggle button, .navbar-toggler { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--orola-navy); border: 1px solid var(--orola-border); border-radius: var(--radius-pill); } .ps-mainmenu__mobile-toggle button:hover { background: var(--orola-surface); } #mobileMenu.offcanvas { background: var(--orola-white); border-right: 1px solid var(--orola-border); } #mobileMenu .offcanvas-header { border-bottom: 1px solid var(--orola-border); padding: 16px 20px; } #mobileMenu .offcanvas-body { padding: 8px 12px; } #mobileMenu .top-menu, #mobileMenu .submenu { list-style: none; margin: 0; padding: 0; } #mobileMenu .top-menu > li > a, #mobileMenu .submenu > li > a { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; font-size: 15px; font-weight: 500; color: var(--orola-navy); border-bottom: 1px solid var(--orola-border); } #mobileMenu .top-menu > li > a:hover, #mobileMenu .submenu > li > a:hover { color: var(--orola-gold-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 10. REASSURANCE STRIP (.header-nav-full-width / blockreassurance) ═══════════════════════════════════════════════════════════════════════════ */ .header-nav-full-width, #block-reassurance { background: var(--orola-surface); border-bottom: 1px solid var(--orola-border); } #block-reassurance ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; list-style: none; margin: 0; padding: 14px 16px; } #block-reassurance ul li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--orola-navy-dark); } #block-reassurance ul li img, #block-reassurance ul li svg { width: 22px; height: 22px; } @media (max-width: 575.98px) { #block-reassurance ul { gap: 12px; padding: 10px 12px; font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ 11. BOTTONI ═══════════════════════════════════════════════════════════════════════════ */ .btn { font-family: var(--font-ui); font-weight: 500; font-size: 14px; letter-spacing: 0.01em; border-radius: var(--radius-md); padding: 10px 18px; border: 1px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); text-transform: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--orola-gold-pale); } /* Primary: oro pieno (CTA conversione, ATC) */ .btn-primary, .btn-add-to-cart, button[name="add-to-cart"], .btn[data-button-action="add-to-cart"] { background: var(--orola-gold); color: var(--orola-navy-dark); border-color: var(--orola-gold); } .btn-primary:hover, .btn-add-to-cart:hover, button[name="add-to-cart"]:hover, .btn[data-button-action="add-to-cart"]:hover { background: var(--orola-gold-dark); color: var(--orola-white); border-color: var(--orola-gold-dark); } /* Secondary: navy outline */ .btn-secondary, .btn-outline-secondary, .btn-outline { background: var(--orola-white); color: var(--orola-navy); border-color: var(--orola-border-strong); } .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline:hover { background: var(--orola-navy); color: var(--orola-white); border-color: var(--orola-navy); } /* Ghost / link */ .btn-link { color: var(--orola-navy); text-decoration: none; padding: 8px 12px; } .btn-link:hover { color: var(--orola-gold-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 12. FORM & INPUT ═══════════════════════════════════════════════════════════════════════════ */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], textarea, select { font-family: var(--font-ui); font-size: 14px; color: var(--orola-text); background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 10px 12px; min-height: 40px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orola-gold); box-shadow: 0 0 0 3px var(--orola-gold-pale); } .form-label, label { font-size: 13px; font-weight: 500; color: var(--orola-navy-dark); margin-bottom: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ 13. PRODUCT MINIATURE ═══════════════════════════════════════════════════════════════════════════ */ .product-miniature, .js-product-miniature { background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--t-med); height: 100%; display: flex; flex-direction: column; } .product-miniature:hover { border-color: var(--orola-navy); } .product-miniature .thumbnail-container, .product-miniature .product-thumbnail { position: relative; aspect-ratio: 1 / 1; background: var(--orola-surface-2); overflow: hidden; } .product-miniature .thumbnail-container img, .product-miniature .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform var(--t-med); } .product-miniature:hover .thumbnail-container img, .product-miniature:hover .product-thumbnail img { transform: scale(1.03); } .product-miniature .product-description, .product-miniature .product-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; } .product-miniature .product-manufacturer, .product-miniature .product-brand { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orola-gold-dark); font-weight: 600; } .product-miniature .product-title, .product-miniature h2, .product-miniature h3 { font-size: 13px; font-weight: 500; color: var(--orola-navy-dark); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-miniature .product-title a { color: inherit; } .product-miniature .product-title a:hover { color: var(--orola-gold-dark); } .product-miniature .product-price-and-shipping, .product-miniature .price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px; font-variant-numeric: tabular-nums; } .product-miniature .price { font-size: 14px; font-weight: 600; color: var(--orola-navy-dark); } .product-miniature .regular-price { font-size: 12px; color: var(--orola-text-faint); text-decoration: line-through; font-weight: 400; } .product-miniature .discount, .product-miniature .discount-percentage { background: var(--orola-gold); color: var(--orola-navy-dark); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); } .product-miniature .product-flags { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; } .product-miniature .product-flag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; background: var(--orola-navy-dark); color: var(--orola-white); border-radius: var(--radius-sm); } .product-miniature .product-flag.discount, .product-miniature .product-flag.on-sale { background: var(--orola-gold); color: var(--orola-navy-dark); } .product-miniature .product-flag.new { background: var(--orola-white); color: var(--orola-navy-dark); border: 1px solid var(--orola-border-strong); } /* ═══════════════════════════════════════════════════════════════════════════ 14. LISTING / CATEGORY ═══════════════════════════════════════════════════════════════════════════ */ .page-category .page-title, .page-header .h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; color: var(--orola-navy-dark); margin-bottom: 8px; } #category-description, .category-description { color: var(--orola-text-muted); font-size: 14px; max-width: 720px; } .products, #products .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } #search_filters, .search-filters { background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 16px; } #search_filters .facet-title, .search-filters .facet-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orola-navy-dark); margin: 0 0 8px; } #js-product-list-top, .products-selection { border-bottom: 1px solid var(--orola-border); padding-bottom: 12px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ 15. PAGINA PRODOTTO ═══════════════════════════════════════════════════════════════════════════ */ .product-detail .product-name, .product-detail h1 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; color: var(--orola-navy-dark); margin-bottom: 4px; } .product-detail .product-manufacturer, .product-detail .product-brand { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orola-gold-dark); font-weight: 600; margin-bottom: 8px; } .product-detail .product-reference { font-size: 12px; color: var(--orola-text-muted); } .product-prices .current-price, .product-detail .current-price { font-size: 28px; font-weight: 600; color: var(--orola-navy-dark); font-variant-numeric: tabular-nums; } .product-prices .regular-price, .product-detail .regular-price { font-size: 16px; color: var(--orola-text-faint); text-decoration: line-through; } .product-prices .discount, .product-detail .discount { background: var(--orola-gold); color: var(--orola-navy-dark); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); } .product-images .product-thumbs .thumb, .product-images img.thumb { border: 1px solid var(--orola-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--t-fast); } .product-images img.thumb.selected, .product-images img.thumb:hover { border-color: var(--orola-gold); } .product-add-to-cart { border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 16px; background: var(--orola-white); margin-top: 16px; } .product-quantity, .qty { display: inline-flex; align-items: center; gap: 8px; } .product-quantity .qty input, .qty input { width: 64px; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ 16. BREADCRUMB ═══════════════════════════════════════════════════════════════════════════ */ .breadcrumb, nav.breadcrumb { background: transparent; padding: 12px 0; font-size: 12px; color: var(--orola-text-muted); } .breadcrumb a { color: var(--orola-text-muted); } .breadcrumb a:hover { color: var(--orola-gold-dark); } .breadcrumb .active, .breadcrumb [aria-current="page"] { color: var(--orola-navy-dark); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--orola-text-faint); padding: 0 6px; } /* ═══════════════════════════════════════════════════════════════════════════ 17. CHECKOUT / CART ═══════════════════════════════════════════════════════════════════════════ */ .cart-grid, #main .cart-summary, #main .cart-detailed { background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); } .cart-summary { padding: 16px; } .cart-summary .cart-summary-line { font-size: 14px; } .cart-summary .cart-total { font-size: 18px; color: var(--orola-navy-dark); font-weight: 600; font-variant-numeric: tabular-nums; } #checkout #header, body#checkout .header { box-shadow: none; } .checkout-step { border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; } .checkout-step.-current { border-color: var(--orola-gold); } /* ═══════════════════════════════════════════════════════════════════════════ 18. FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .page-footer, #footer, footer.page-footer { background: var(--orola-white); border-top: 1px solid var(--orola-border); color: var(--orola-text); font-size: 13px; padding-block: 40px 16px; } .page-footer h3, #footer h3, #footer .h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orola-navy-dark); margin-bottom: 12px; } .page-footer a, #footer a { color: var(--orola-text-muted); } .page-footer a:hover, #footer a:hover { color: var(--orola-gold-dark); } .page-footer ul, #footer ul { list-style: none; padding: 0; margin: 0; } .page-footer ul li, #footer ul li { padding: 4px 0; } .footer-copyright, .copyright { background: var(--orola-navy-dark); color: var(--orola-white); font-size: 12px; padding: 14px 0; margin-top: 32px; text-align: center; } .footer-copyright a, .copyright a { color: var(--orola-gold-light); } /* ═══════════════════════════════════════════════════════════════════════════ 19. BOTTOM MOBILE NAV (custom orola) ═══════════════════════════════════════════════════════════════════════════ */ .orola-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: none; background: var(--orola-white); border-top: 1px solid var(--orola-border); padding: 6px 4px env(safe-area-inset-bottom); } .orola-bottom-nav__item { flex: 1 1 0; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; font-size: 10px; color: var(--orola-navy); text-decoration: none; border-radius: var(--radius-sm); } .orola-bottom-nav__item i { font-size: 20px; } .orola-bottom-nav__item.is-active { color: var(--orola-gold-dark); } @media (max-width: 767.98px) { .orola-bottom-nav { display: flex; } body { padding-bottom: 62px; } } /* ═══════════════════════════════════════════════════════════════════════════ 20. UTILITY & OVERRIDE MIRATI ═══════════════════════════════════════════════════════════════════════════ */ .tabular { font-variant-numeric: tabular-nums; } .text-gold { color: var(--orola-gold-dark); } .text-navy { color: var(--orola-navy-dark); } .bg-soft { background: var(--orola-surface); } .divider-gold { height: 1px; background: var(--orola-gold); opacity: 0.4; border: 0; } :focus-visible { outline: 2px solid var(--orola-gold); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 21. OROLA MEGAMENU (custom orola — categorie + brand reali, sempre visibile) ═══════════════════════════════════════════════════════════════════════════ */ .orola-megamenu { background: var(--orola-white); border-bottom: 1px solid var(--orola-border); } .orola-megamenu__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 4px; } .orola-megamenu__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .orola-megamenu__list > li { position: relative; } .orola-megamenu__list > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 14px 16px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--orola-navy); position: relative; white-space: nowrap; } .orola-megamenu__list > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--orola-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med); } .orola-megamenu__list > li:hover > a, .orola-megamenu__list > li.is-active > a { color: var(--orola-navy-dark); } .orola-megamenu__list > li:hover > a::after, .orola-megamenu__list > li.is-active > a::after { transform: scaleX(1); } .orola-megamenu__list > li > a .bi { font-size: 10px; opacity: .6; } /* dropdown panel */ .orola-megamenu__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); min-width: 560px; max-width: 90vw; background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); padding: 18px 20px; display: none; z-index: 1019; } .orola-megamenu__panel.is-wide { min-width: 720px; } .orola-megamenu__list > li:hover > .orola-megamenu__panel, .orola-megamenu__list > li:focus-within > .orola-megamenu__panel { display: grid; } .orola-megamenu__panel { grid-template-columns: 1fr 1fr; gap: 18px 28px; } .orola-megamenu__col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orola-gold-dark); margin: 0 0 8px; } .orola-megamenu__col ul { list-style: none; margin: 0; padding: 0; } .orola-megamenu__col li a { display: block; padding: 6px 0; font-size: 13px; color: var(--orola-text); } .orola-megamenu__col li a:hover { color: var(--orola-gold-dark); } .orola-megamenu__cta { font-size: 12px; font-weight: 600; color: var(--orola-navy-dark); border-left: 1px solid var(--orola-border); padding-left: 16px; margin-left: 8px; } /* nasconde su mobile (sostituito da #mobileMenu) */ @media (max-width: 991.98px) { .orola-megamenu { display: none; } } /* ── Nascondi i moduli home placeholder di Hummingbird (sample slider, banner generico "20% OFF clothes", custom text spedizione 24h) ── */ .page-content--home > .ps-imageslider, .page-content--home > .ps-customtext, .page-content--home > .ps-banner, .page-content--home > .ps-featuredproducts, .page-content--home > .ps-bestsellers, #imageslider, .imageslider, .page-content--home > #ps_imageslider { display: none !important; } /* ── Sezioni prodotto home (Novità, Top sconti) — stile Orola Modern ── */ .page-content--home > .ps-newproducts, .page-content--home > .ps-specials { max-width: var(--container-max) !important; margin: 24px auto 0 !important; padding: 0 !important; background: transparent !important; } .ps-newproducts > .h2, .ps-newproducts > h2, .ps-newproducts__title, .ps-specials > .h2, .ps-specials > h2, .ps-specials__title { font-family: var(--font-editorial) !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(1.6rem, 2.2vw, 2rem) !important; color: var(--orola-navy-dark) !important; letter-spacing: 0 !important; margin: 0 0 18px !important; position: relative; padding-left: 16px; } .ps-newproducts > h2::before, .ps-newproducts > .h2::before, .ps-specials > h2::before, .ps-specials > .h2::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; background: var(--orola-gold); border-radius: 2px; } /* sostituiamo il titolo della sezione con la nostra dicitura Orola */ .page-content--home > .ps-newproducts > h2, .page-content--home > .ps-newproducts > .h2 { visibility: hidden; position: relative; } .page-content--home > .ps-newproducts > h2::after, .page-content--home > .ps-newproducts > .h2::after { content: "Novità"; visibility: visible; position: absolute; left: 16px; top: 0; font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: inherit; color: var(--orola-navy-dark); white-space: nowrap; } .page-content--home > .ps-specials > h2, .page-content--home > .ps-specials > .h2 { visibility: hidden; position: relative; } .page-content--home > .ps-specials > h2::after, .page-content--home > .ps-specials > .h2::after { content: "Top sconti"; visibility: visible; position: absolute; left: 16px; top: 0; font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: inherit; color: var(--orola-navy-dark); white-space: nowrap; } /* product list dentro questi moduli: 4 colonne desktop, responsive */ .ps-newproducts .products, .ps-specials .products, .ps-newproducts__products, .ps-specials__products, .ps-newproducts ul, .ps-specials ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 16px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } @media (max-width: 767.98px) { .ps-newproducts .products, .ps-specials .products, .ps-newproducts ul, .ps-specials ul { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* CTA "Vedi tutti" via pseudo-element */ .page-content--home > .ps-newproducts::after, .page-content--home > .ps-specials::after { content: ""; display: block; margin-top: 18px; text-align: center; } /* page-content--home è un grid auto-fit nel parent Hummingbird: le nostre section + TUTTI i moduli PS (ps_imageslider, ps_customtext, ps_banner, ps_featuredproducts, ps_newproducts, ps_bestsellers, ps_specials…) devono occupare tutta la riga per non finire in colonna stretta. */ .page-content--home > .orola-hero, .page-content--home > .orola-brand-strip, .page-content--home > .orola-occasions, .page-content--home > .orola-services, .page-content--home > .orola-editorial, .page-content--home > .orola-reviews, .page-content--home > .orola-blog, .page-content--home > .orola-cats, .page-content--home > [class*="ps-"], .page-content--home > .ps-imageslider, .page-content--home > .ps-customtext, .page-content--home > .ps-banner, .page-content--home > .ps-featuredproducts, .page-content--home > .ps-newproducts, .page-content--home > .ps-bestsellers, .page-content--home > .ps-specials, .page-content--home > .ps-brandlist, .page-content--home > .ps-supplierlist, .page-content--home > section, .page-content--home > div { grid-column: 1 / -1 !important; width: 100% !important; max-width: var(--container-max) !important; margin-left: auto !important; margin-right: auto !important; } /* il page-content stesso non deve limitare l'asse trasversale */ .page-content--home { grid-template-columns: 1fr !important; gap: 24px !important; max-width: 100% !important; padding-inline: 24px !important; } /* ═══════════════════════════════════════════════════════════════════════════ 22. HOMEPAGE — HERO (Modern Minimal, bozza C) ═══════════════════════════════════════════════════════════════════════════ */ .orola-hero { max-width: var(--container-max); margin: 18px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; } @media (max-width: 767.98px) { .orola-hero { grid-template-columns: 1fr; } } .orola-hero__main { background: var(--orola-surface); border-radius: var(--radius-lg); padding: 36px 36px 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; } .orola-hero__kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orola-gold-dark); margin-bottom: 14px; } .orola-hero__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; color: var(--orola-navy-dark); line-height: 1.1; margin: 0 0 8px; max-width: 380px; } .orola-hero__title em { color: var(--orola-gold-dark); font-style: normal; } .orola-hero__sub { font-size: 14px; color: var(--orola-text-muted); max-width: 380px; margin: 0 0 16px; } .orola-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; } .orola-hero__cta-row .meta { font-size: 12px; color: var(--orola-text-muted); } .orola-hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; } .orola-hero__tile { border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; transition: transform var(--t-med); } .orola-hero__tile:hover { transform: translateY(-2px); } .orola-hero__tile--navy { background: var(--orola-navy-dark); color: var(--orola-white); } .orola-hero__tile--gold { background: var(--orola-gold); color: var(--orola-navy-dark); } .orola-hero__tile .ki { font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; opacity: .9; } .orola-hero__tile--navy .ki { color: var(--orola-gold); } .orola-hero__tile h3 { font-size: 17px; font-weight: 600; margin: 0; color: inherit; } /* ═══════════════════════════════════════════════════════════════════════════ 23. HOMEPAGE — BRAND STRIP (17 marchi reali) ═══════════════════════════════════════════════════════════════════════════ */ .orola-brand-strip { max-width: var(--container-max); margin: 40px auto 0; padding: 0 24px; } .orola-brand-strip__title { font-family: var(--font-editorial) !important; font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--orola-navy-dark) !important; text-align: left; margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--orola-gold); letter-spacing: 0 !important; text-transform: none !important; } .orola-brand-strip__grid { display: grid; grid-template-columns: repeat(7, 1fr); /* 7 colonne fisse su desktop */ gap: 12px; border: 1px solid var(--orola-border); border-radius: var(--radius-lg); background: var(--orola-white); padding: 16px; box-shadow: 0 2px 12px rgba(28,52,100,0.05); } .orola-brand-strip__item { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 4px; /* da 14 → 4 (zoom logo) */ border-radius: var(--radius-md); transition: background var(--t-fast), transform var(--t-fast); background: transparent; overflow: hidden; } .orola-brand-strip__item:hover { background: var(--orola-surface-cool); transform: scale(1.04); } .orola-brand-strip__item img { width: 100%; height: 100%; /* riempie tutto il box */ max-width: none; max-height: none; object-fit: contain; /* mantieni proporzioni logo */ filter: grayscale(15%); transition: filter var(--t-fast), transform var(--t-fast); transform: scale(1.35); /* zoom in interno ×1.35 */ } .orola-brand-strip__item:hover img { filter: grayscale(0%); transform: scale(1.45); /* zoom extra al hover */ } @media (max-width: 1199.98px) { .orola-brand-strip__grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } } @media (max-width: 991.98px) { .orola-brand-strip__grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media (max-width: 767.98px) { .orola-brand-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; } } @media (max-width: 480px) { .orola-brand-strip__grid { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════════════ 24. HOMEPAGE — GENDER CARDS (Uomo / Donna / Bambino) ═══════════════════════════════════════════════════════════════════════════ */ .orola-gender { max-width: var(--container-max); margin: 32px auto 0; padding: 0 16px; } .orola-gender__title { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--orola-navy-dark); margin: 0 0 14px; } .orola-gender__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 767.98px) { .orola-gender__grid { grid-template-columns: 1fr; } } .orola-gender__card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--orola-surface); display: flex; align-items: flex-end; padding: 18px 20px; text-decoration: none; border: 1px solid var(--orola-border); } .orola-gender__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--t-med); } .orola-gender__card:hover img { transform: scale(1.03); } .orola-gender__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 35, 60, 0.55), rgba(20, 35, 60, 0) 60%); z-index: 1; } .orola-gender__card-text { position: relative; z-index: 2; color: var(--orola-white); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; } /* ═══════════════════════════════════════════════════════════════════════════ 25. HOMEPAGE — CATEGORY GRID (12 macro categorie) ═══════════════════════════════════════════════════════════════════════════ */ .orola-cats { max-width: var(--container-max); margin: 40px auto 16px; padding: 0 16px; } .orola-cats__title { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--orola-navy-dark); margin: 0 0 16px; } .orola-cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } @media (max-width: 1199.98px) { .orola-cats__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767.98px) { .orola-cats__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .orola-cats__grid { grid-template-columns: repeat(2, 1fr); } } .orola-cats__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: var(--orola-white); border: 1px solid var(--orola-border); border-radius: var(--radius-md); color: var(--orola-navy-dark); text-decoration: none; text-align: center; font-size: 12px; font-weight: 500; transition: border-color var(--t-fast), color var(--t-fast); } .orola-cats__item:hover { border-color: var(--orola-gold); color: var(--orola-gold-dark); } .orola-cats__item .bi { font-size: 24px; color: var(--orola-gold-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 26. HEADER FIX (v3.0.1) — cleanup ps_mainmenu inline, cart pill, search, bandiere rotte, hairline residue. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 26.1 nascondi ps_mainmenu desktop dentro l'header (sostituito dal nostro orola-megamenu sotto). Il blocco mobile (offcanvas) resta. ── */ .header .ps-mainmenu--desktop, .header-bottom .ps-mainmenu--desktop, .header-bottom__row > .ps-mainmenu--desktop, .header-bottom #menu-mobile, .header-bottom .menu--current, .header-bottom .ps-mainmenu__desktop { display: none !important; } /* il mobile-toggle hamburger deve restare per .header-bottom { box-shadow: none !important; } .header::after, .header-bottom::after { content: none !important; } .header-bottom { border-bottom: 0 !important; } /* ── 26.7 padding header-bottom uniforme, no gap inutile a destra ── */ .header-bottom__row { padding-block: 8px !important; } .header-bottom__row > .col-auto { padding-inline: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ 27. DIREZIONE F — palette estesa + tipografia editoriale + decorativa ═══════════════════════════════════════════════════════════════════════════ */ :root { --orola-navy-grad-1: #1c3464; --orola-navy-grad-2: #0f1e3d; --orola-navy-grad-3: #162a50; --orola-navy-soft: #8aaad4; /* testi topbar e sub hero */ --orola-surface-cool: #f4f6fb; /* pill search, reassurance, hero side */ --orola-border-cool: rgba(28,52,100,.12); --orola-border-cool2: rgba(28,52,100,.18); --orola-shadow-gold: 0 4px 14px rgba(202,161,51,.35); --orola-shadow-card: 0 4px 18px rgba(28,52,100,.08), 0 1px 4px rgba(0,0,0,.04); --orola-shadow-pill: 0 3px 10px rgba(28,52,100,.07); --font-editorial: Georgia, "Times New Roman", Times, serif; } /* ═══════════════════════════════════════════════════════════════════════════ 28. DIREZIONE F — TOPBAR (indirizzo + WhatsApp + spedizione gratis) ═══════════════════════════════════════════════════════════════════════════ */ .header-top { background: var(--orola-navy) !important; color: var(--orola-navy-soft) !important; min-height: 28px !important; padding: 0 !important; font-size: 11px !important; } .header-top a, .header-top .nav-link { color: var(--orola-navy-soft) !important; opacity: 1 !important; } .header-top a:hover { color: var(--orola-gold) !important; } .header-top .container-md { padding: 5px 16px !important; } .header-top__row, .header-top .row { row-gap: 0 !important; } /* contenuto statico Orola della topbar (renderizzato da header.tpl) */ .orola-topbar { background: var(--orola-navy); color: var(--orola-navy-soft); font-size: 11px; letter-spacing: 0.01em; } .orola-topbar__inner { max-width: var(--container-max); margin: 0 auto; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .orola-topbar__left, .orola-topbar__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .orola-topbar__item { display: inline-flex; align-items: center; gap: 5px; } .orola-topbar__item .bi { font-size: 12px; } .orola-topbar__shipping { color: var(--orola-gold) !important; font-weight: 500; } .orola-topbar__shipping .bi { color: var(--orola-gold); font-size: 13px; } /* WhatsApp = solo logo cerchio compatto */ .orola-topbar__wa { width: 22px; height: 22px; border-radius: var(--radius-pill); background: transparent; display: inline-flex !important; align-items: center; justify-content: center; color: #25d366 !important; transition: background var(--t-fast), color var(--t-fast); padding: 0 !important; gap: 0 !important; } .orola-topbar__wa .bi { font-size: 15px !important; color: #25d366 !important; } .orola-topbar__wa:hover { background: #25d366 !important; color: var(--orola-navy-dark) !important; } .orola-topbar__wa:hover .bi { color: var(--orola-navy-dark) !important; } /* hide any language/currency selector that PS may still inject into topbar */ .orola-topbar .ps-languageselector, .orola-topbar #_desktop_ps_languageselector, .orola-topbar #_mobile_ps_languageselector, .orola-topbar .ps-currencyselector, .orola-topbar #_desktop_ps_currencyselector, .orola-topbar #_mobile_ps_currencyselector, .orola-topbar .js-language-selector, .orola-topbar .js-currency-selector, .orola-topbar select, .orola-topbar .form-select { display: none !important; } @media (max-width: 767.98px) { .orola-topbar__inner { padding: 5px 12px; gap: 8px; font-size: 10px; } .orola-topbar__left { gap: 10px; } .orola-topbar__item { gap: 4px; } /* lasciamo solo i pezzi essenziali su mobile */ .orola-topbar__addr { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 29. DIREZIONE F — HEADER (account/wishlist cerchi + cart pill gold) ═══════════════════════════════════════════════════════════════════════════ */ .header, .header-bottom { border-bottom: 0 !important; box-shadow: none !important; } /* search pill chiara con border cool */ #search_widget input[type="text"], #search_widget input[type="search"], .ps-searchbar input, .search-widget input { background: var(--orola-surface-cool) !important; border: 1px solid var(--orola-border-cool2) !important; border-radius: var(--radius-pill) !important; height: 40px !important; padding: 0 44px 0 18px !important; font-size: 13px !important; } #search_widget input::placeholder { color: #aaa !important; } /* Account + Wishlist: stacked icon-on-circle + label sotto */ .orola-header-actions { display: flex; align-items: center; gap: 10px; } .orola-header-action { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none !important; cursor: pointer; } .orola-header-action__circle { width: 34px; height: 34px; background: var(--orola-surface-cool); border: 1px solid var(--orola-border-cool); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--orola-navy); font-size: 16px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); position: relative; } .orola-header-action:hover .orola-header-action__circle { background: var(--orola-white); border-color: var(--orola-gold); color: var(--orola-gold-dark); } .orola-header-action__label { font-size: 9px; color: var(--orola-navy-soft); letter-spacing: 0.02em; line-height: 1; } /* CARRELLO: pill GOLD pieno con icona + testo + counter (Direzione F) */ .orola-header-cart-pill, .blockcart .orola-cart-btn, #_desktop_ps_shoppingcart .orola-cart-btn, #_desktop_ps_shoppingcart .header-block__action-btn, .orola-cart-btn.is-pill { background: var(--orola-gold) !important; background-color: var(--orola-gold) !important; background-image: none !important; color: var(--orola-navy-dark) !important; border: 0 !important; border-radius: var(--radius-pill) !important; padding: 8px 16px !important; width: auto !important; min-width: 0 !important; height: auto !important; display: inline-flex !important; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(202,161,51,.4) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.02em; font-family: var(--font-ui); } .orola-header-cart-pill:hover, .blockcart .orola-cart-btn:hover, #_desktop_ps_shoppingcart .orola-cart-btn:hover, #_desktop_ps_shoppingcart .header-block__action-btn:hover { background: var(--orola-gold-dark) !important; color: var(--orola-white) !important; box-shadow: 0 6px 18px rgba(202,161,51,.5) !important; } .orola-header-cart-pill .bi, .orola-cart-btn .bi { font-size: 16px !important; } /* dentro la pill mostriamo la label "Carrello (N)" */ .orola-header-cart-pill__label { display: inline; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 30. DIREZIONE F — NAV STRIPE (bordo 2px navy sopra+sotto, no dropdown, "Offerte ✦" oro a destra) ═══════════════════════════════════════════════════════════════════════════ */ .orola-megamenu { background: var(--orola-white) !important; border-top: 2px solid var(--orola-navy) !important; border-bottom: 2px solid var(--orola-navy) !important; } .orola-megamenu__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; justify-content: flex-start; gap: 0; } .orola-megamenu__list { display: flex; align-items: stretch; flex: 1 1 auto; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; } .orola-megamenu__list > li { position: static; } .orola-megamenu__list > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px !important; font-size: 12px !important; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--orola-navy) !important; white-space: nowrap; position: relative; border-bottom: 2px solid transparent; margin-bottom: -2px; } .orola-megamenu__list > li > a::after { display: none !important; } .orola-megamenu__list > li:hover > a, .orola-megamenu__list > li.is-active > a, .orola-megamenu__list > li.current > a, .orola-megamenu__list > li > a:focus-visible { border-bottom-color: var(--orola-gold) !important; color: var(--orola-navy-dark) !important; font-weight: 600; } .orola-megamenu__list > li > a .bi { display: none; } /* niente icone nel nav F */ /* sub-panel: lo riduco a uno mini-dropdown leggero (Direzione F è "flat", ma per non perdere brand/sottocategorie tengo un panel discreto) */ .orola-megamenu__panel { position: absolute !important; top: auto !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-left: 0 !important; background: var(--orola-white) !important; border: 0 !important; border-top: 1px solid var(--orola-border) !important; border-bottom: 1px solid var(--orola-border) !important; border-radius: 0 !important; padding: 18px 24px !important; z-index: 1015 !important; display: none !important; } .orola-megamenu__list > li { position: relative !important; } .orola-megamenu__list > li > .orola-megamenu__panel { left: 50% !important; transform: translateX(-50%) !important; width: 720px !important; max-width: 90vw !important; border: 1px solid var(--orola-border) !important; margin-top: 2px !important; box-shadow: var(--orola-shadow-card) !important; } .orola-megamenu__list > li:hover > .orola-megamenu__panel, .orola-megamenu__list > li:focus-within > .orola-megamenu__panel { display: grid !important; } /* Voce speciale "Offerte ✦" / "Nuovi arrivi" — gold, a destra */ .orola-megamenu__cta { margin-left: auto !important; color: var(--orola-gold-dark) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; border-left: 0 !important; padding-left: 14px !important; } .orola-megamenu__cta:hover { color: var(--orola-gold) !important; border-bottom-color: var(--orola-gold) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 31. DIREZIONE F — REASSURANCE (4 voci icone gold + testo navy) ═══════════════════════════════════════════════════════════════════════════ */ .header-nav-full-width, #block-reassurance { background: var(--orola-surface-cool) !important; border-bottom: 1px solid rgba(28,52,100,.07) !important; border-top: 0 !important; } #block-reassurance ul { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; padding: 9px 16px !important; list-style: none; margin: 0; } #block-reassurance ul li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--orola-navy-dark); font-weight: 500; } #block-reassurance ul li img, #block-reassurance ul li svg, #block-reassurance ul li i { color: var(--orola-gold); width: 16px; height: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ 32. DIREZIONE F — HOMEPAGE HERO (gradient navy + Georgia italic + CTA pill) ═══════════════════════════════════════════════════════════════════════════ */ .orola-hero { display: grid !important; grid-template-columns: 1.45fr 1fr !important; /* 1 grande sx + 2 piccoli dx */ gap: 14px !important; padding: 0 !important; margin: 16px auto 0 !important; max-width: var(--container-max) !important; min-height: 420px !important; } @media (max-width: 767.98px) { .orola-hero { grid-template-columns: 1fr !important; min-height: auto !important; } } .orola-hero__main { background: linear-gradient(135deg, var(--orola-navy-grad-1) 0%, var(--orola-navy-grad-2) 55%, var(--orola-navy-grad-3) 100%) !important; border-radius: var(--radius-lg) !important; padding: 40px 36px !important; min-height: 420px !important; color: var(--orola-white) !important; position: relative; overflow: hidden; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .orola-hero__kicker { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(202,161,51,.15) !important; border: 1px solid rgba(202,161,51,.4) !important; color: var(--orola-gold) !important; border-radius: var(--radius-pill) !important; padding: 5px 14px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase; width: auto !important; margin-bottom: 14px !important; } .orola-hero__title { font-family: var(--font-editorial) !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(1.8rem, 3.4vw, 2.4rem) !important; color: var(--orola-white) !important; line-height: 1.15 !important; letter-spacing: 0 !important; margin: 0 0 10px !important; max-width: 600px; } .orola-hero__title em { color: var(--orola-gold) !important; font-style: italic !important; } .orola-hero__sub { color: var(--orola-navy-soft) !important; font-size: 13px !important; max-width: 540px; margin: 0 0 22px !important; line-height: 1.6; } .orola-hero__cta-row { gap: 12px !important; } .orola-hero__cta-row .btn.btn-primary, .orola-hero__cta-row .btn-primary { background: var(--orola-gold) !important; color: var(--orola-navy-dark) !important; border: 0 !important; border-radius: var(--radius-pill) !important; padding: 10px 22px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase; box-shadow: 0 5px 18px rgba(202,161,51,.4) !important; } .orola-hero__cta-row .meta { color: var(--orola-navy-soft) !important; font-size: 11px !important; } /* 2 tile laterali sovrapposti a destra (stesso ingombro del tile sx) */ .orola-hero__side { display: grid !important; grid-template-rows: 1fr 1fr !important; gap: 14px !important; min-height: 420px !important; } .orola-hero__tile { border-radius: var(--radius-lg) !important; padding: 26px 28px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 0 !important; position: relative; overflow: hidden; transition: transform var(--t-med), box-shadow var(--t-med) !important; } .orola-hero__tile:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(28,52,100,.18); } .orola-hero__tile--navy { background: linear-gradient(135deg, var(--orola-navy-grad-1), var(--orola-navy-grad-3)) !important; color: var(--orola-white) !important; } .orola-hero__tile--gold { background: linear-gradient(135deg, var(--orola-gold) 0%, #b08a25 100%) !important; color: var(--orola-navy-dark) !important; } .orola-hero__tile .ki { display: inline-flex; align-items: center; gap: 6px; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase; opacity: 0.9; } .orola-hero__tile--navy .ki { color: var(--orola-gold) !important; } .orola-hero__tile h3 { font-family: var(--font-editorial) !important; font-style: italic !important; font-weight: 400 !important; font-size: 22px !important; margin: 0 !important; color: inherit !important; line-height: 1.2 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 33. PRODUCT MINIATURE v3.3 · Direzione C "Split asimmetrica" - immagine in alto · ATC cerchio gold top-right - footer NAVY con brand kicker oro + nome italic - niente prezzo · niente wishlist · niente qty · niente quickview ═══════════════════════════════════════════════════════════════════════════ */ .product-miniature, .js-product-miniature, .product-miniature--split { border-radius: 14px !important; border: 0 !important; /* Background del wrapper = stesso navy della topbar #1c3464 (orola-navy), così card footer e topbar sono coerenti. */ background: #1c3464 !important; overflow: hidden; box-shadow: 0 6px 22px rgba(28,52,100,.1) !important; transition: transform var(--t-med), box-shadow var(--t-med); display: flex !important; flex-direction: column !important; } .product-miniature:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(28,52,100,.18) !important; } /* ── Cover (immagine prodotto a tutto-box, niente cornice grigia) ── Sfondo BIANCO così le foto PNG/senza-bg appaiono su bianco e non sul navy del footer (la card eredita background navy dal contenitore). */ .product-miniature__cover, .product-miniature .thumbnail-container, .product-miniature .product-thumbnail, .product-miniature__image-container { position: relative; display: block; aspect-ratio: 1 / 1; background: #ffffff !important; overflow: hidden; text-decoration: none !important; flex: 0 0 auto; padding: 0 !important; margin: 0 !important; } .product-miniature__cover-link, .product-miniature__image-container, .product-miniature .thumb, .product-miniature__cover > a, .product-miniature__cover > div { display: block !important; width: 100% !important; height: 100% !important; position: relative; overflow: hidden; } .product-miniature__cover img, .product-miniature .thumbnail-container img, .product-miniature .product-thumbnail img, .product-miniature__image-container img, .product-miniature picture img, .product-miniature .thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; margin: 0 !important; display: block !important; transition: transform var(--t-med); } /* PICTURE wrapper di PrestaShop: forza riempire il parent positioned */ .product-miniature picture { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } .product-miniature__image-link { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } .product-miniature:hover .product-miniature__cover img, .product-miniature:hover .thumbnail-container img, .product-miniature:hover .product-thumbnail img, .product-miniature:hover .product-miniature__image-container img { transform: scale(1.05); } /* ── ATC cerchio gold top-right dell'immagine ── */ .product-miniature__atc-form { position: absolute !important; top: 10px; right: 10px; margin: 0; z-index: 3; } .product-miniature__atc, .product-miniature button[data-button-action="add-to-cart"] { width: 38px !important; height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: var(--orola-gold) !important; color: var(--orola-navy-dark) !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(202,161,51,.45) !important; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .product-miniature__atc:hover, .product-miniature button[data-button-action="add-to-cart"]:hover { background: var(--orola-gold-dark) !important; color: var(--orola-white) !important; box-shadow: 0 6px 20px rgba(202,161,51,.55) !important; transform: scale(1.06); } .product-miniature__atc .bi, .product-miniature__atc i { font-size: 15px !important; line-height: 1 !important; } .product-miniature__atc-text, .product-miniature__add-text { display: none !important; } /* ── Footer NAVY coerente con la topbar header (#1c3464 = orola-navy) ── */ .product-miniature__info, .product-miniature .product-description, .product-miniature__bottom { background: #1c3464 !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 4px; flex: 1 1 auto; } .product-miniature__brand, .product-miniature .product-manufacturer, .product-miniature .product-brand { font-family: var(--font-ui) !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--orola-gold) !important; font-weight: 700 !important; line-height: 1.2; } .product-miniature__title, .product-miniature .product-title, .product-miniature h2, .product-miniature h3 { font-family: var(--font-editorial) !important; font-style: italic !important; font-weight: 400 !important; font-size: 17px !important; color: var(--orola-white) !important; line-height: 1.3 !important; letter-spacing: 0 !important; margin: 4px 0 0 !important; text-decoration: none !important; /* Titolo SEMPRE su una riga sola — overflow tronca con ellissi */ display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: unset !important; } .product-miniature__title:hover, .product-miniature .product-title:hover { color: var(--orola-gold) !important; } /* ── Badge ribbon diagonale (stile A — "bandierina cucita" all'angolo) ── Container .product-flags = riempie il cover (per posizionamento). Singolo badge = ruotato −45°, lieve "sbordare" a sinistra (il cover ha overflow:hidden → effetto cucito sull'angolo). IMPORTANTE: Hummingbird parent ha la regola .product-flags .badge:not(.discount) { background-color: RGBA(var(--bs-primary-rgb), ...) !important; } con specificità (0,0,3,0). Per batterla: 1) sovrascriviamo --bs-primary-rgb sul container .product-flags → tutte le regole var-based risolvono a navy 2) aggiungiamo regole con specificità ≥ (0,0,4,0) e !important → forziamo background-color esplicito in cascata. */ .product-miniature .product-flags, .product-miniature ul.product-flags { position: absolute !important; inset: 0 !important; z-index: 3; list-style: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none; overflow: hidden; /* Override CSS variables Bootstrap nel solo scope dei badge prodotto. Cosi anche il rule parent `RGBA(var(--bs-primary-rgb), ...)` di Hummingbird risolve al nostro navy. */ --bs-primary: #14233c; --bs-primary-rgb: 20, 35, 60; --bs-bg-opacity: 1; } /* Ribbon NOVITÀ (default · navy scuro #14233c + oro #e9c75c brillante) Specificità ≥ (0,0,4,0) per battere `.product-flags .badge:not(.discount)` di Hummingbird (0,0,3,0). Colori espliciti, no var. Uso flex per centrare perfettamente il testo nella striscia. */ .product-miniature .product-flags .badge, .product-miniature .product-flags li.badge, .product-miniature .product-flags .badge:not(.discount), .product-miniature .product-flags .product-flag, .product-miniature .product-flags .product-flag.new { position: absolute !important; /* Geometria del corner-ribbon: con rotate(-45°) e transform-origin:center, un box 160×28 posizionato a left:-40 top:22 cade dentro un quadrato 128×128 in alto a sinistra → niente troncatura su card da 220px+ */ top: 22px; left: -40px; transform: rotate(-45deg); transform-origin: center; display: flex !important; align-items: center !important; justify-content: center !important; width: 160px !important; height: 28px !important; background: #14233c !important; background-color: #14233c !important; background-image: none !important; color: #e9c75c !important; font-family: var(--font-ui) !important; font-size: 11px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; font-weight: 800 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; line-height: 1 !important; text-align: center !important; text-shadow: 0 1px 2px rgba(0,0,0,.5) !important; box-shadow: 0 3px 10px rgba(0,0,0,.3) !important; pointer-events: auto; white-space: nowrap !important; overflow: hidden !important; } /* Sostituisce "Nuovo" (PS default) con "✧ Novità" via pseudo-element. Specificità ≥ (0,0,4,0) per battere `.product-flags .badge:not(.discount)` di Hummingbird (0,0,3,0) che ha `color:#fff !important` e azzera la nostra regola color:transparent. Senza questa specificità, il testo originale "Nuovo" resta visibile in bianco accanto a "Novità". */ .product-miniature .product-flags .badge.new, .product-miniature .product-flags li.badge.new, .product-miniature .product-flags .product-flag.new { font-size: 0 !important; color: transparent !important; line-height: 0 !important; } .product-miniature .product-flags .badge.new::before, .product-miniature .product-flags li.badge.new::before, .product-miniature .product-flags .product-flag.new::before { content: "✧ Novità"; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.15em; color: #e9c75c !important; text-transform: uppercase; line-height: 1; display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* ── Ribbon SCONTO (rosso fisso #dc3545) ────────────────────────────── Stesso layout diagonale del ribbon Novità. Eredita display:flex/ align-center/justify-center/width/height/transform/position dalla base. Specificità (0,0,4,0) per battere Hummingbird. */ .product-miniature .product-flags .badge.discount, .product-miniature .product-flags .badge.on-sale, .product-miniature .product-flags li.badge.discount, .product-miniature .product-flags .product-flag.discount, .product-miniature .product-flags .product-flag.on-sale, .product-miniature .product-flags .discount-percentage { background: #dc3545 !important; background-color: #dc3545 !important; background-image: none !important; color: #ffffff !important; letter-spacing: 0.05em !important; font-weight: 800 !important; font-size: 13px !important; text-align: center !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; box-shadow: 0 3px 12px rgba(220,53,69,.42) !important; } /* ── DOPPIO BADGE: novità + sconto UNITI come blocco continuo ──────── Lo sconto resta un ribbon sottile (160×28) in alto. Il NOVITÀ diventa un ribbon ALTO (160×130) che: - ha il bordo SUPERIORE perfettamente combaciante con il bordo INFERIORE dello sconto (top edge intercept = 95.8 sulla linea y = -x + c, uguale per i due ribbon) - ha il bordo INFERIORE che esce in basso-sinistra del cover (bottom edge intercept ≈ 278, vicino all'angolo (0,278) del cover quadrato) Risultato: i due flag formano un unico blocco diagonale rosso+navy che riempie l'intera fascia diagonale dell'angolo top-left, senza spazi bianchi tra i due colori, e lo sfondo navy continua fino al bordo basso del cover. Il testo ✦ NOVITÀ è ancorato al TOP del ribbon (align-items: flex-start + padding-top) così resta vicino al confine con lo sconto, non scivola al centro del ribbon allungato. */ /* Quando c'è ANCHE lo sconto, il novità (2° figlio) si sposta sotto col MEDESIMO formato sottile: stessa fascia diagonale come lo sconto, solo traslata in basso lungo il bordo laterale sinistro del cover. Geometria: top:60 dà perpendicular-distance ~27px tra le due centerlines, ovvero ribbon che si TOCCANO sul bordo (uniti, "back to back") senza gap visibile né overlap percepibile a 28px di altezza ciascuno. */ /* Quando c'è anche lo sconto, il novità è una striscia PIÙ LUNGA (200px invece di 160) così la fascia navy si estende più verso l'interno del cover, allungandosi sul lato sinistro. Resta sottile (28px) e accostata sotto allo sconto. */ /* Quando c'è anche lo sconto, il novità è una striscia da 220px appiccicata SOTTO allo sconto (top:54 dà ~7px di overlap visivo in modo che le due fasce sembrino una sola banda continua, senza gap percepibile). */ .product-miniature .product-flags:has(> :nth-child(2)) > .badge.new, .product-miniature .product-flags:has(> :nth-child(2)) > li.badge.new, .product-miniature .product-flags:has(> :nth-child(2)) > .product-flag.new, .product-miniature .product-flags > :nth-child(2).badge.new, .product-miniature .product-flags > :nth-child(2).product-flag.new { top: 54px !important; left: -40px !important; width: 220px !important; height: 28px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* ── Badge "Edizione Limitata" — top-right del cover ───────────────── Visivamente DISTINTO da Novità/Sconto (che stanno top-left): qui pill verticale gold-oro con icona gem, font Inter uppercase letter- spacing. Comunica "esclusivo" senza essere gridato. */ .product-miniature .product-miniature__cover .product-badge--limited, .product-miniature .product-badge--limited { position: absolute !important; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: linear-gradient(135deg, #e9c75c 0%, #caa133 60%, #a0801f 100%); color: #14233c; font-family: var(--font-ui, system-ui), sans-serif; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; border-radius: 999px; box-shadow: 0 3px 10px rgba(202,161,51,.35), inset 0 1px 0 rgba(255,255,255,.4); white-space: nowrap; line-height: 1; } .product-miniature .product-badge--limited .bi { font-size: 11px; color: #14233c; line-height: 1; } /* Fallback: novità come 1° figlio ma con un sibling sconto */ .product-miniature .product-flags:has(> :nth-child(2)) > :nth-child(1).badge.new, .product-miniature .product-flags:has(> :nth-child(2)) > :nth-child(1).product-flag.new { top: 54px !important; left: -40px !important; width: 220px !important; height: 28px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* ── Nascondi tutto ciò che non vogliamo nella card ── */ .product-miniature .product-miniature__variants, .product-miniature .product-miniature__prices, .product-miniature .product-price-and-shipping, .product-miniature .product-miniature__discount-price, .product-miniature .quantity-button, .product-miniature .js-quantity-button, .product-miniature .product-miniature__actions form .quantity-button, .product-miniature .product-miniature__actions:not(:has(form)), .product-miniature .quickview, .product-miniature .product-miniature__quickview, .product-miniature [data-link-action="quickview"], .product-miniature__details, .product-miniature .product-miniature__form, .product-miniature .product-flags + .quickview, .product-miniature .btn-outline-primary, .product-miniature__add-text { display: none !important; } /* Il form ATC dentro al footer (struttura Hummingbird default) lo nascondiamo perché abbiamo il nostro ATC sopra l'immagine */ .product-miniature__bottom .product-miniature__actions, .product-miniature .product-description ~ .product-miniature__actions { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 35. CONTAINER MAX 1600 — override container-md di Bootstrap usato da Hummingbird ═══════════════════════════════════════════════════════════════════════════ */ .container-md, .container, .container-lg, .container-xl, .container-xxl { max-width: var(--container-max) !important; } @media (min-width: 1200px) { .container-md, .container, .container-lg, .container-xl, .container-xxl { max-width: var(--container-max) !important; padding-inline: 24px; } } /* ═══════════════════════════════════════════════════════════════════════════ 36. HEADER LAYOUT (Direzione F) — [logo · search center · azioni right] ═══════════════════════════════════════════════════════════════════════════ */ .header-bottom__container { max-width: var(--container-max) !important; padding-inline: 24px; } .header-bottom__row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin: 0 !important; min-height: var(--header-h) !important; } /* logo: dimensioni naturali, mai stirato */ .header-bottom__logo, .header .logo { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; } .header-bottom__logo img, .header .logo img, .header img.logo { height: 48px !important; width: auto !important; max-width: 220px !important; object-fit: contain !important; display: block !important; } @media (max-width: 575.98px) { .header-bottom__logo img, .header .logo img { height: 36px !important; max-width: 160px !important; } } /* search: CENTRALE, flex 1, larghezza limitata */ .header .ps-searchbar, .header-bottom #_desktop_ps_searchbar, .header-bottom #search_widget, .header-bottom .search-widget { flex: 1 1 auto !important; max-width: 480px !important; min-width: 0 !important; margin: 0 auto !important; order: 2 !important; padding: 0 !important; } #_desktop_ps_searchbar.col-auto { width: auto !important; } /* azioni: a destra, flex-shrink 0 */ .orola-header-actions { flex: 0 0 auto !important; order: 3 !important; display: flex; align-items: center; gap: 10px !important; } /* il logo passa a order 1 per sicurezza in caso di flex reorder */ .header-bottom__logo { order: 1 !important; } /* nascondi gli slot mobile-only quando siamo desktop, e rimuovi col-* legacy */ @media (min-width: 768px) { #_mobile_ps_customersignin, #_mobile_ps_shoppingcart { display: none !important; } } /* su mobile: stack logo+icone in alto, search sotto */ @media (max-width: 767.98px) { .header-bottom__row { flex-wrap: wrap !important; gap: 10px !important; } .header .ps-searchbar, .header-bottom #_desktop_ps_searchbar, .header-bottom #search_widget, .header-bottom .search-widget { order: 4 !important; flex: 1 1 100% !important; max-width: 100% !important; margin: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 37. CLEANUP TOPBAR — solo lingua/valuta a destra, niente "Accedi" duplicato ═══════════════════════════════════════════════════════════════════════════ */ .orola-topbar #_desktop_ps_customersignin, .orola-topbar #ps_customersignin, .orola-topbar .ps-customersignin, .orola-topbar .header-block, .orola-topbar .blockcart, .orola-topbar #_desktop_ps_shoppingcart, .orola-topbar #_mobile_ps_shoppingcart, .orola-topbar .blockwishlist, .orola-topbar #blockwishlist, .orola-topbar .ps-contactinfo, .orola-topbar #ps_contactinfo { display: none !important; } .orola-topbar select, .orola-topbar .form-select { background: var(--orola-white) !important; color: var(--orola-navy-dark) !important; border: 0 !important; border-radius: var(--radius-pill) !important; font-size: 11px !important; padding: 3px 22px 3px 10px !important; min-height: 0 !important; height: auto !important; line-height: 1 !important; width: auto !important; } .orola-topbar__right > span { display: inline-flex; align-items: center; gap: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ 39. MOBILE HEADER (hamburger sx · logo center · cart compact dx) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { /* desktop nav stripe + topbar nascosti su mobile */ .orola-megamenu { display: none !important; } .orola-topbar { display: none !important; } /* layout della riga logo: hamburger | logo center | spacer */ .header-bottom__row { flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding-block: 8px !important; } .header-bottom__container { padding-inline: 12px !important; } /* logo PROPRIAMENTE centrato (bilanciato dallo spacer a destra) */ .header-bottom__logo { order: 2 !important; flex: 1 1 auto !important; justify-content: center !important; margin: 0 !important; } .header-bottom__logo img, .header .logo img { height: 44px !important; max-width: 180px !important; } /* spacer invisibile a destra, stessa larghezza dell'hamburger (40px) */ .orola-header-spacer { order: 3 !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; } /* nascondo TUTTE le search di Hummingbird/PS dentro l'header (cerca è nella bottom-nav che apre il drawer) — specificità tripla per battere il .d-flex di Bootstrap e il cache aggregato vecchio. */ body .header-bottom__row .ps-searchbar, body .header-bottom__row #_desktop_ps_searchbar, body .header-bottom__row #search_widget, body .header-bottom__row .ps-searchbar--mobile, body .header-bottom__row .ps-searchbar--mobile.d-flex, body .header-bottom__row #_mobile_ps_searchbar, body .header-bottom__row .js-search-template, body .ps-searchbar--mobile, body .ps-searchbar--mobile.d-flex { display: none !important; } /* logo davvero centrato — specificità maggiorata per battere il cache */ body .header-bottom__logo { margin-inline: auto !important; text-align: center !important; } body .header-bottom__logo img, body .header .logo img, body .header img.logo { height: 44px !important; max-height: 44px !important; max-width: 200px !important; width: auto !important; margin: 0 auto !important; } } /* hamburger */ .orola-hamburger { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--orola-border-cool2); border-radius: var(--radius-pill); color: var(--orola-navy); padding: 0; font-size: 22px; /* v4.10.7 — order 0 così l'hamburger viene PRIMA della search mobile. La search (.ps-searchbar--mobile) resta order 0 default ma viene dopo l'hamburger per via del DOM order (hamburger index 0). */ order: 0; flex: 0 0 auto; } /* v4.10.7 — Search mobile dopo hamburger, prima del logo */ .ps-searchbar--mobile { order: 0; } /* v4.10.8 — Bottone cerca header mobile, stile uguale all'hamburger */ .orola-header-search { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--orola-border-cool2); border-radius: var(--radius-pill); color: var(--orola-navy); padding: 0; font-size: 18px; order: 0; flex: 0 0 auto; margin-left: 8px; } .orola-header-search:hover { background: var(--orola-surface-cool); border-color: var(--orola-navy); } .orola-hamburger:hover { background: var(--orola-surface-cool); border-color: var(--orola-navy); } /* cart pill in versione compatta (icona + badge) su mobile */ .orola-header-pill--mobile { height: 40px !important; padding: 0 12px !important; gap: 6px !important; order: 3 !important; flex: 0 0 auto !important; } .orola-header-pill--mobile .orola-header-pill__label { display: none !important; } .orola-header-pill--mobile .bi { font-size: 18px !important; } /* su desktop hamburger e spacer mobile non vanno mostrati */ @media (min-width: 992px) { .orola-hamburger, .orola-header-spacer { display: none !important; } } /* search bar dentro al drawer (in cima al body) */ .orola-drawer__search { position: relative; display: flex; align-items: center; padding: 14px 16px; background: var(--orola-surface-cool); border-bottom: 1px solid var(--orola-border); } .orola-drawer__search .bi { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--orola-navy-soft); pointer-events: none; z-index: 2; } .orola-drawer__search input { width: 100%; height: 42px; padding: 0 16px 0 44px; background: var(--orola-white); border: 1px solid var(--orola-border-cool2); border-radius: var(--radius-pill); font-size: 14px; color: var(--orola-text); } .orola-drawer__search input:focus { border-color: var(--orola-gold); box-shadow: 0 0 0 3px var(--orola-gold-pale); outline: none; } /* ═══════════════════════════════════════════════════════════════════════════ 40. DRAWER MOBILE (offcanvas-start, full menu accordion) ═══════════════════════════════════════════════════════════════════════════ */ .orola-drawer.offcanvas { width: min(86vw, 360px) !important; background: var(--orola-white) !important; border-right: 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; max-height: 100% !important; overflow: hidden !important; } .orola-drawer__head { background: var(--orola-navy); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--orola-gold); flex: 0 0 auto; } .orola-drawer__body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } .orola-drawer__foot { flex: 0 0 auto; } .orola-drawer__logo img, .orola-drawer__logo .logo { height: 36px !important; max-width: 160px !important; /* il logo Orola è gold su sfondo trasparente; sul navy resta brillante */ filter: brightness(1.05); } .orola-drawer__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 0; border-radius: var(--radius-pill); color: var(--orola-white); font-size: 14px; } .orola-drawer__body { padding: 8px 0 0; overflow-y: auto; flex: 1 1 auto; } .orola-drawer__nav { display: flex; flex-direction: column; } .orola-drawer__item, .orola-drawer__group > summary.orola-drawer__item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 15px; font-weight: 500; color: var(--orola-navy) !important; text-decoration: none !important; border-bottom: 1px solid var(--orola-border); cursor: pointer; list-style: none; } .orola-drawer__item:hover, .orola-drawer__group > summary.orola-drawer__item:hover { background: var(--orola-surface-cool); color: var(--orola-navy-dark) !important; } .orola-drawer__item .bi { color: var(--orola-gold-dark); font-size: 13px; } .orola-drawer__group { border-bottom: 1px solid var(--orola-border); } .orola-drawer__group > summary { border-bottom: 0 !important; } .orola-drawer__group > summary::-webkit-details-marker { display: none; } .orola-drawer__group[open] > summary { background: var(--orola-surface-cool); font-weight: 600; } .orola-drawer__group[open] > summary .bi { transform: rotate(180deg); } .orola-drawer__group > summary .bi { transition: transform var(--t-fast); } .orola-drawer__sub { display: block; padding: 11px 20px 11px 36px; font-size: 14px; color: var(--orola-text) !important; text-decoration: none !important; border-bottom: 1px solid var(--orola-border); border-left: 2px solid transparent; background: var(--orola-white); } .orola-drawer__sub:hover { background: var(--orola-gold-pale); color: var(--orola-navy-dark) !important; border-left-color: var(--orola-gold); } .orola-drawer__item--cta { color: var(--orola-gold-dark) !important; font-weight: 700 !important; letter-spacing: 0.02em; } .orola-drawer__divider { height: 12px; background: var(--orola-surface-cool); } .orola-drawer__row { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: 14px; color: var(--orola-navy) !important; text-decoration: none !important; border-bottom: 1px solid var(--orola-border); } .orola-drawer__row .bi { font-size: 18px; flex: 0 0 auto; } .orola-drawer__row:hover { background: var(--orola-surface-cool); } .orola-drawer__row > span { display: flex; flex-direction: column; line-height: 1.25; font-weight: 500; } .orola-drawer__row-sub { font-size: 11px; font-weight: 400; color: var(--orola-navy-soft); margin-top: 2px; } .orola-drawer__foot { padding: 14px 20px; background: var(--orola-surface-cool); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--orola-navy-soft); } .orola-drawer__foot-item .bi { color: var(--orola-gold-dark); margin-right: 4px; } /* ═══════════════════════════════════════════════════════════════════════════ 41. BOTTOM NAV (rifatta v3.2 — 4 icone fisse in basso su .orola-hero { order: 1 !important; } .page-content--home > .ps-newproducts { order: 2 !important; } .page-content--home > .orola-occasions { order: 3 !important; } .page-content--home > .ps-specials { order: 4 !important; } .page-content--home > .orola-brand-strip { order: 5 !important; } .page-content--home > .orola-services { order: 6 !important; } .page-content--home > .orola-editorial { order: 7 !important; } .page-content--home > .orola-reviews { order: 8 !important; } .page-content--home > .orola-cats { order: 9 !important; } .page-content--home > .orola-blog { order: 10 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 38. REFINEMENTS — search overlap, menu/logo/account bigger, cart navy, slider 1600, page-content vincolato al container ═══════════════════════════════════════════════════════════════════════════ */ /* ── 38.1 search: icona magnifier a SINISTRA dentro il pill (no overlap) ── */ .ps-searchbar { position: relative !important; } .ps-searchbar__magnifier, #search_widget .ps-searchbar__magnifier, .ps-searchbar .js-search-icon { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; font-size: 16px !important; color: var(--orola-navy-soft) !important; pointer-events: none; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; } /* sostituisco l'icona Material Icons con un glyph generico/bi-search */ .ps-searchbar__magnifier::before, .ps-searchbar .js-search-icon::before { content: "" !important; display: block; width: 16px; height: 16px; /* SVG inline magnifier (no dep esterna) */ background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; font-family: inherit; } /* il padding-left deve LASCIARE SPAZIO all'icona */ .ps-searchbar input, .ps-searchbar__input, #search_widget input[type="text"], #search_widget input[type="search"] { padding-left: 44px !important; padding-right: 16px !important; } /* il submit button a destra può sparire — la magnifier left + Enter bastano */ .ps-searchbar button[type="submit"], #search_widget button[type="submit"] { position: absolute !important; right: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; } /* ── 38.2 LOGO — dimensioni responsive ── */ .header-bottom__logo img, .header .logo img, .header img.logo { height: 72px !important; max-height: 72px !important; max-width: 340px !important; } /* Fascia tablet larga / desktop piccolo (992-1199): logo + search + pill non entrano insieme a 340px logo. Riduco logo per evitare collisione. */ @media (max-width: 1199.98px) and (min-width: 992px) { .header-bottom__logo img, .header .logo img, .header img.logo { height: 52px !important; max-height: 52px !important; max-width: 220px !important; } /* search più stretta nello stesso range */ .header .ps-searchbar, .header-bottom #_desktop_ps_searchbar, .header-bottom #search_widget, .header-bottom .search-widget { max-width: 340px !important; } /* azioni un pelo più compatte */ .orola-header-pill { padding: 0 14px !important; font-size: 12px !important; } } /* mobile (gestito da sezione 39) usa max-width: 200, height: 44 */ /* ── 38.3 NAV STRIPE — sottile ma con font più grande ── */ /* Blog si stacca a destra: margin-left auto spinge tutto ciò che viene dopo */ .orola-megamenu__list > li.orola-megamenu__right-start { margin-left: auto !important; } /* chevron icon a destra di voci con sottomenu (eccezione: nel nav F le altre icone sono nascoste) */ .orola-megamenu__list > li.has-submenu > a[href="#"] { cursor: default; } .orola-megamenu__list > li.has-submenu > a .orola-megamenu__chev, .orola-megamenu__list > li.has-submenu > a .bi-chevron-down { display: inline-block !important; font-size: 11px !important; opacity: 0.55; margin-left: 4px; transition: transform var(--t-fast), opacity var(--t-fast); } .orola-megamenu__list > li.has-submenu:hover > a .orola-megamenu__chev, .orola-megamenu__list > li.has-submenu:hover > a .bi-chevron-down { transform: rotate(180deg); opacity: 1; } /* Dropdown leggero per "Gioielli" — colonna singola, niente grid 2-col */ .orola-megamenu__list > li.has-submenu > .orola-megamenu__panel { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; transform: none !important; width: max-content !important; min-width: 220px !important; max-width: 380px !important; margin-top: 1px !important; padding: 8px 0 !important; background: var(--orola-white) !important; border: 1px solid var(--orola-border) !important; border-radius: var(--radius-md) !important; box-shadow: 0 8px 24px rgba(28,52,100,.12) !important; z-index: 1018 !important; } .orola-megamenu__list > li.has-submenu:hover > .orola-megamenu__panel, .orola-megamenu__list > li.has-submenu:focus-within > .orola-megamenu__panel { display: block !important; } .orola-megamenu__sub { display: block; padding: 10px 18px !important; font-size: 14px !important; color: var(--orola-navy) !important; text-decoration: none !important; border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .orola-megamenu__sub:hover { background: var(--orola-surface-cool) !important; color: var(--orola-navy-dark) !important; border-left-color: var(--orola-gold); font-weight: 500; } .orola-megamenu__list > li > a { padding: 7px 14px !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } .orola-megamenu__list > li:hover > a, .orola-megamenu__list > li.is-active > a, .orola-megamenu__list > li.current > a { font-weight: 600 !important; } .orola-megamenu__cta { padding: 7px 14px !important; font-size: 18px !important; } @media (min-width: 1280px) { .orola-megamenu__list > li > a { font-size: 19px !important; padding: 8px 16px !important; } .orola-megamenu__cta { font-size: 19px !important; padding: 8px 16px !important; } } /* ── 38.4 ACCOUNT cerchio più grande + label leggibile ── */ .orola-header-action__circle { width: 44px !important; height: 44px !important; font-size: 20px !important; } .orola-header-action__circle .bi { font-size: 20px !important; } .orola-header-action__label { font-size: 11px !important; color: var(--orola-navy) !important; font-weight: 500 !important; margin-top: 2px; } /* ── 38.5 CART pill NAVY pieno (più sofisticato del gold) ── */ .orola-header-cart-pill, .blockcart .orola-cart-btn, #_desktop_ps_shoppingcart .orola-cart-btn, #_desktop_ps_shoppingcart .header-block__action-btn, .orola-cart-btn.is-pill { background: var(--orola-navy) !important; background-color: var(--orola-navy) !important; background-image: none !important; color: var(--orola-white) !important; border: 0 !important; border-radius: var(--radius-pill) !important; padding: 11px 20px !important; width: auto !important; min-width: 0 !important; height: auto !important; display: inline-flex !important; align-items: center; gap: 10px; box-shadow: 0 6px 18px rgba(28,52,100,.22), inset 0 0 0 1px rgba(202,161,51,.0) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; font-family: var(--font-ui); position: relative; transition: background var(--t-med), transform var(--t-fast), box-shadow var(--t-med) !important; } .orola-header-cart-pill:hover, .blockcart .orola-cart-btn:hover, #_desktop_ps_shoppingcart .header-block__action-btn:hover { background: var(--orola-navy-dark) !important; color: var(--orola-white) !important; box-shadow: 0 8px 24px rgba(28,52,100,.32), inset 0 0 0 1px rgba(202,161,51,.35) !important; transform: translateY(-1px); } .orola-header-cart-pill .bi, .orola-cart-btn .bi { font-size: 18px !important; color: var(--orola-gold) !important; } .orola-header-cart-pill__label { color: var(--orola-white) !important; font-weight: 600 !important; } /* ── 38.5b PILL COERENTI Account / Carrello — stessa altezza, stesso stile, ghost (outline) vs solid (filled). Sostituisce il vecchio cerchio. ── */ .orola-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; } .orola-header-pill { display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 18px !important; border-radius: var(--radius-pill) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em; font-family: var(--font-ui); text-decoration: none !important; white-space: nowrap; position: relative; line-height: 1; transition: background var(--t-med), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med), transform var(--t-fast) !important; } .orola-header-pill .bi { font-size: 18px !important; line-height: 1 !important; } .orola-header-pill__label { font-weight: 600; line-height: 1; } /* GHOST (Account): bordo navy chiaro, hover navy filled inverted */ .orola-header-pill--ghost { background: transparent !important; border: 1.5px solid var(--orola-border-cool2) !important; color: var(--orola-navy) !important; } .orola-header-pill--ghost:hover { border-color: var(--orola-navy) !important; background: var(--orola-surface-cool) !important; color: var(--orola-navy-dark) !important; } /* SOLID (Carrello): navy pieno con icona gold + testo bianco + count gold */ .orola-header-pill--solid { background: var(--orola-navy) !important; border: 1.5px solid var(--orola-navy) !important; color: var(--orola-white) !important; box-shadow: 0 6px 18px rgba(28,52,100,.22) !important; } .orola-header-pill--solid:hover { background: var(--orola-navy-dark) !important; border-color: var(--orola-navy-dark) !important; color: var(--orola-white) !important; box-shadow: 0 8px 24px rgba(28,52,100,.32), inset 0 0 0 1px rgba(202,161,51,.35) !important; transform: translateY(-1px); } .orola-header-pill--solid .bi { color: var(--orola-gold) !important; } /* count "0" pill oro accanto al testo (carrello) */ .orola-header-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 2px; background: var(--orola-gold); color: var(--orola-navy-dark); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } /* mobile: shrink le pill */ @media (max-width: 575.98px) { .orola-header-pill { height: 38px; padding: 0 12px !important; font-size: 12px !important; } .orola-header-pill__label { display: none; } .orola-header-pill .bi { font-size: 16px !important; } } /* count "0" come piccola pill oro a fianco del testo */ .orola-header-cart-pill .orola-header-cart-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 4px; background: var(--orola-gold); color: var(--orola-navy-dark); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } /* ── 38.6 PAGE-CONTENT vincolato a 1600px (slider, banner, custom html) ── */ #main, #wrapper, #content { max-width: 100% !important; } .page-content--home, .page-content--home > .row, .page-content--home > section, .page-content--home > div, .page-content--home > .ps-imageslider, .page-content--home > .imageslider, .page-content--home > .swiper, .page-content--home > .slick-list { max-width: var(--container-max) !important; margin-left: auto !important; margin-right: auto !important; } /* il modulo slider Hummingbird ha class .ps-imageslider o .imageslider */ .ps-imageslider, .imageslider, #imageslider, .swiper, .swiper-container, .slick-slider { max-width: var(--container-max) !important; margin: 0 auto !important; } .ps-imageslider img, .imageslider img, .swiper img { max-width: 100% !important; height: auto !important; } /* hero a 3 tile (1 grande sx + 2 sovrapposti dx) — controllato dalla sezione 32 + 38 */ .orola-hero { max-width: var(--container-max) !important; margin: 16px auto 0 !important; padding: 0 !important; } /* ── 26.8 OVERRIDE FINALE: il pulsante cerchio oro pieno del parent ha classe .header-block__action-btn (NON .header__action). Resetto qui in modo aggressivo per avere un'icona pulita 40x40. Nota: il cache aggregato vecchio v2 ha `#_desktop_ps_shoppingcart .header-block__action-btn` come selettore (1 ID + 1 class). Pareggio la specificità qui + ordine cascade (questo file carica dopo) per vincere. ── */ #_desktop_ps_shoppingcart .header-block__action-btn, #_mobile_ps_shoppingcart .header-block__action-btn, #_desktop_ps_customersignin .header-block__action-btn, #_mobile_ps_customersignin .header-block__action-btn, .header-block, .header-block .header-block__action-btn, a.header-block__action-btn, .orola-account-btn, .orola-cart-btn, .orola-cart-btn:hover, .orola-account-btn:hover, #_desktop_ps_shoppingcart .header-block__action-btn:hover, #_mobile_ps_shoppingcart .header-block__action-btn:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: var(--radius-pill) !important; box-shadow: none !important; padding: 0 !important; color: var(--orola-navy) !important; } /* hover dedicato (sopra siamo neutri, qui ridefinisco l'hover utile) */ #_desktop_ps_shoppingcart .header-block__action-btn:hover, #_mobile_ps_shoppingcart .header-block__action-btn:hover, #_desktop_ps_customersignin .header-block__action-btn:hover, #_mobile_ps_customersignin .header-block__action-btn:hover { background: var(--orola-surface) !important; color: var(--orola-gold-dark) !important; } a.header-block__action-btn, .header-block__action-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; } a.header-block__action-btn:hover, .header-block__action-btn:hover { background: var(--orola-surface) !important; color: var(--orola-gold-dark) !important; } .header-block__action-btn .bi, .header-block__action-btn .header-block__icon, .header-block__action-btn i { font-size: 20px !important; line-height: 1 !important; } /* la label "Cart"/"Carrello" inline va nascosta — solo icona */ .header-block__title, .header-block__label, .header-block__name { display: none !important; } /* badge contatore (numero articoli nel cart) */ .header-block__badge, .header-block__count, .cart-products-count { position: absolute !important; top: -3px !important; right: -3px !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; background: var(--orola-gold) !important; color: var(--orola-navy-dark) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; border-radius: var(--radius-pill) !important; display: inline-flex !important; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ 50. FACETED SEARCH · Pattern G "Due bottoni minimalisti" + Drawer ═══════════════════════════════════════════════════════════════════════════ Sostituisce la sidebar PS standard con: · 2 bottoni minimalisti "Filtra (N)" + "Ordina" in alto a destra · Click "Filtra" → drawer laterale (desktop ≥992px) o fullscreen (mobile) con TUTTI i facet organizzati editorialmente · Filtri attivi come pill subtle sotto i bottoni JS: assets/js/orola-facets-chip.js Template: catalog/_partials/products-top.tpl ═══════════════════════════════════════════════════════════════════════════ */ /* ── 50.1 Nascondi elementi PS nativi che non servono ── */ #js-product-list-top .products__count, #category-description, .category__description, .category__cover, #js-active-search-filters, #search_filters, .search-filters, #left-column .block.product-categories, #offcanvas-faceted { display: none !important; } /* Sorgente facets (hidden — letta dal JS) */ #js-orola-facets-source { display: none !important; } /* ── 50.2 Toolbar in alto: 2 bottoni allineati a destra ── */ #js-product-list-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .orola-listing-toolbar { display: flex; flex-direction: column; gap: 10px; width: 100%; } .orola-listing-toolbar__actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; } /* Bottoni "Filtra" e "Ordina" · pill coerenti con resto del tema */ .orola-toolbar-btn, .orola-toolbar-btn--sort .products__sort-dropdown-button, .orola-toolbar-btn--sort > .dropdown > .btn { background: transparent !important; border: 1px solid var(--orola-navy-dark, #14233c) !important; color: var(--orola-navy-dark, #14233c) !important; padding: 10px 22px !important; font-family: var(--font-ui), system-ui, sans-serif !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 600 !important; border-radius: 999px !important; /* pill — coerente con account/cart */ cursor: pointer; display: inline-flex !important; align-items: center !important; gap: 8px; transition: background var(--t-fast), color var(--t-fast); line-height: 1; } .orola-toolbar-btn:hover, .orola-toolbar-btn--sort .products__sort-dropdown-button:hover { background: var(--orola-navy-dark, #14233c) !important; color: var(--orola-gold, #caa133) !important; } .orola-toolbar-btn .ti { font-size: 14px; } .orola-toolbar-btn__count { color: var(--orola-gold, #caa133); font-weight: 700; font-size: 10px; letter-spacing: 0; } .orola-toolbar-btn__count::before { content: '·'; margin-right: 4px; } .orola-toolbar-btn.has-active { background: var(--orola-navy-dark, #14233c) !important; color: var(--orola-gold, #caa133) !important; } .orola-toolbar-btn.has-active .orola-toolbar-btn__count { color: var(--orola-gold, #caa133); } /* Sort dropdown wrapper — il parent deve essere relative per il menu absolute */ .orola-toolbar-btn--sort, .orola-toolbar-btn--sort .products__sort-dropdown { position: relative; } /* Dropdown menu "Ordina" — toggle gestito da JS custom (no Bootstrap JS) */ .orola-toolbar-btn--sort .dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 2000; background: #fff; border-radius: 0; border: 1px solid #14233c; margin: 0; padding: 6px 0; min-width: 240px; box-shadow: 0 8px 24px rgba(20,35,60,.12); list-style: none; } .orola-toolbar-btn--sort .dropdown-menu.show { display: block; } .orola-toolbar-btn--sort .dropdown-item, .orola-toolbar-btn--sort .dropdown-menu a { display: block; font-family: var(--font-ui), sans-serif; font-size: 12px; letter-spacing: 0.04em; color: #14233c; padding: 10px 18px; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); } .orola-toolbar-btn--sort .dropdown-item:hover, .orola-toolbar-btn--sort .dropdown-menu a:hover { background: #fafafa; color: #caa133; } .orola-toolbar-btn--sort .dropdown-item.current, .orola-toolbar-btn--sort .dropdown-menu a.current { background: #fafbfd; color: #caa133; font-weight: 600; } /* ── 50.3 Strip "Attivi —" sotto i bottoni ────────────────────────── */ .orola-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0 2px; } .orola-active-filters[hidden] { display: none; } .orola-active-filters__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa0a6; font-weight: 500; } .orola-active-filters__pill { background: transparent; border: 0; padding: 4px 0; color: var(--orola-navy-dark, #14233c); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-bottom: 1px dotted #d9d9d6; transition: color var(--t-fast); } .orola-active-filters__pill:hover { color: var(--orola-gold, #caa133); } .orola-active-filters__pill .ti { font-size: 12px; color: var(--orola-gold, #caa133); } .orola-active-filters__clear { margin-left: auto; background: none; border: 0; color: var(--orola-gold, #caa133); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; cursor: pointer; padding: 4px 0; } .orola-active-filters__clear:hover { color: var(--orola-gold-dark, #a0801f); } /* ── 50.4 Drawer (Filtri) ──────────────────────────────────────────── */ /* v4.10.7 — Scope :not(.offcanvas) per non collidere con il drawer mobile Bootstrap offcanvas che usa la STESSA classe .orola-drawer. Senza :not(), opacity:0 + pointer-events:none bloccavano il menu mobile. */ .orola-drawer:not(.offcanvas) { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity .26s ease; } .orola-drawer:not(.offcanvas).is-open { pointer-events: auto; opacity: 1; } .orola-drawer:not(.offcanvas) .orola-drawer__backdrop { position: absolute; inset: 0; background: rgba(20,35,60,.32); } .orola-drawer:not(.offcanvas) .orola-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #ffffff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1); box-shadow: -12px 0 32px rgba(20,35,60,.18); } .orola-drawer:not(.offcanvas).is-open .orola-drawer__panel { transform: translateX(0); } .orola-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 18px; border-bottom: 1px solid #ececec; } .orola-drawer__title { font-family: var(--font-editorial), Georgia, serif; font-style: italic; font-size: 22px; font-weight: 400; color: var(--orola-navy-dark, #14233c); } .orola-drawer__close { width: 36px; height: 36px; background: none; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: var(--orola-navy-dark, #14233c); transition: background var(--t-fast); } .orola-drawer__close:hover { background: #fafafa; color: var(--orola-gold, #caa133); } .orola-drawer__close .ti { font-size: 22px; } .orola-drawer__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 28px; -webkit-overflow-scrolling: touch; } /* Sezione facet (accordion editoriale) */ .orola-drawer__facet { padding: 16px 0; border-bottom: 1px solid #ececec; } .orola-drawer__facet:last-child { border-bottom: 0; } .orola-drawer__facet-header { background: none; border: 0; padding: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; font-family: var(--font-ui), sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--orola-gold, #caa133); } .orola-drawer__facet-header:hover { color: var(--orola-gold-dark, #a0801f); } .orola-drawer__facet-header .ti { font-size: 16px; color: var(--orola-navy-dark, #14233c); transition: transform var(--t-fast); } .orola-drawer__facet[data-open="1"] .orola-drawer__facet-header .ti { transform: rotate(180deg); } .orola-drawer__facet-badge { background: var(--orola-gold, #caa133); color: var(--orola-navy-dark, #14233c); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; margin-left: 8px; margin-right: auto; } .orola-drawer__facet-content { display: none; margin-top: 14px; } .orola-drawer__facet[data-open="1"] .orola-drawer__facet-content { display: block; } /* ─── Bubble buttons (item facet · stile pill toggle) ────────────── */ .orola-drawer__bubbles { display: flex; flex-wrap: wrap; gap: 8px; } .orola-drawer__bubble { background: #ffffff; border: 1px solid #d9d9d6; color: var(--orola-navy-dark, #14233c); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-family: var(--font-ui), system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); user-select: none; } .orola-drawer__bubble:hover { border-color: var(--orola-navy-dark, #14233c); } .orola-drawer__bubble.is-active { background: var(--orola-navy-dark, #14233c); border-color: var(--orola-navy-dark, #14233c); color: var(--orola-gold, #caa133); font-weight: 600; } .orola-drawer__bubble.is-active .orola-drawer__bubble-mag { color: var(--orola-gold, #caa133); opacity: 0.75; } .orola-drawer__bubble-mag { font-size: 10px; color: #9aa0a6; font-variant-numeric: tabular-nums; font-weight: 500; } .orola-drawer__bubble-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #d9d9d6; display: inline-block; flex-shrink: 0; margin-right: 2px; } .orola-drawer__empty { padding: 12px 0; color: #9aa0a6; font-size: 12px; } /* Footer drawer · 2 bottoni Azzera / Mostra risultati */ .orola-drawer__footer { padding: 16px 28px; border-top: 1px solid #ececec; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; background: #ffffff; } .orola-drawer__clear, .orola-drawer__apply { border: 0; cursor: pointer; padding: 14px; font-family: var(--font-ui), sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; transition: background var(--t-fast), color var(--t-fast); } .orola-drawer__clear { background: #ffffff; border: 1px solid #14233c; color: var(--orola-navy-dark, #14233c); } .orola-drawer__clear:hover { background: #fafafa; } .orola-drawer__apply { background: var(--orola-navy-dark, #14233c); color: var(--orola-gold, #caa133); } .orola-drawer__apply:hover { background: var(--orola-navy, #1c3464); } /* Body lock quando drawer aperto */ body.orola-drawer-open { overflow: hidden; } /* ── 50.5 Mobile/Tablet (≤768px) ────────────────────────────────── */ @media (max-width: 768px) { /* Drawer fullscreen mobile */ .orola-drawer__panel { width: 100vw; box-shadow: none; } .orola-drawer__header { padding: 16px 18px 14px; border-bottom: 1px solid #ececec; position: sticky; top: 0; background: #fff; z-index: 5; } .orola-drawer__body { padding: 0 18px; } .orola-drawer__footer { padding: 12px 18px; } /* X close BIGGER e più prominente su mobile */ .orola-drawer__close { width: 44px; height: 44px; background: #fafafa; border: 1px solid #ececec; } .orola-drawer__close .ti { font-size: 26px; color: var(--orola-navy-dark, #14233c); } .orola-drawer__close:hover { background: var(--orola-navy-dark, #14233c); color: var(--orola-gold, #caa133); } .orola-drawer__close:hover .ti { color: var(--orola-gold, #caa133); } .orola-drawer__title { font-size: 20px; } /* Toolbar mobile: Filtra a SINISTRA + Ordina a DESTRA, stessa riga. Override aggressivo perché parent Hummingbird ha: .products__sort { order:-1; display:flex } .products__sort-dropdown { flex-grow:1 } .products__sort-dropdown-button { width:100% } che farebbero esplodere il layout o nascondere Filtra. */ .orola-listing-toolbar__actions { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 10px; width: 100%; } .orola-toolbar-btn--filter { flex: 0 0 auto !important; display: inline-flex !important; visibility: visible !important; order: 0 !important; /* batte order:-1 del parent */ width: auto !important; } .orola-toolbar-btn--sort { flex: 0 0 auto !important; display: inline-flex !important; visibility: visible !important; order: 1 !important; /* dopo Filtra */ margin-left: auto; width: auto !important; flex-grow: 0 !important; align-items: center !important; flex-wrap: nowrap !important; } .orola-toolbar-btn--sort .products__sort-dropdown { flex-grow: 0 !important; /* batte flex-grow:1 parent */ width: auto !important; position: relative; } .orola-toolbar-btn--sort .products__sort-label { display: none !important; } .orola-toolbar-btn, .orola-toolbar-btn--sort .products__sort-dropdown-button { padding: 9px 14px !important; font-size: 10px !important; letter-spacing: 0.14em !important; width: auto !important; /* batte width:100% parent */ } } /* Mobile stretto ≤480 — bottoni più compatti, solo icona+count su Filtra */ @media (max-width: 480px) { .orola-toolbar-btn--filter, .orola-toolbar-btn--sort .products__sort-dropdown-button { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 0.08em !important; } .orola-listing-toolbar__actions { gap: 8px; } } /* ── 50.6 Griglia prodotti · 4 colonne su desktop full-width ───── */ @media (min-width: 1200px) { .products, #products .products { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; } } @media (min-width: 992px) and (max-width: 1199px) { .products, #products .products { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 768px) and (max-width: 991px) { .products, #products .products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 767px) { .products, #products .products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* ── 50.7 Slider facet (Prezzo, Peso) – widget PS nativo embedded ─── */ .orola-drawer__facet-content .accordion-collapse { display: block !important; height: auto !important; } .orola-drawer__facet-content .accordion-body { padding: 4px 0 0; border: 0; } .orola-drawer__facet-content .ui-slider { margin: 14px 0 10px; } /* ═══════════════════════════════════════════════════════════════════════════ 51. FOOTER · Restyling moduli stock Hummingbird/PrestaShop ═══════════════════════════════════════════════════════════════════════════ Il footer ora usa moduli ufficiali PS via hook `displayFooter`: · ps_linklist (link list) → output `.linklist` · ps_contactinfo (contact info) → output `.block-contact` · ps_socialfollow (social) → output `.block-social` / `.ps-socialfollow` · ps_emailsubscription (newsletter, opzionale) → output `.block_newsletter` Qui restila l'output di questi moduli con palette navy + gold del brand. Template wrapper: templates/_partials/footer.tpl (pass-through agli hook). Accordion mobile: gestito da orola-mobile.js (vedere quel file). */ /* ── Wrapper esterno del footer (sostituisce padding/bg parent bianco) ─── */ .orola-footer-wrapper { background: #1c3464; color: #f3eadc; font-family: var(--font-ui, 'Inter'), system-ui, sans-serif; margin-top: 80px; padding: 60px 0 24px; } .orola-footer__container { max-width: 1600px; margin: 0 auto; padding: 0 32px; } /* ── Layout colonne moduli (Bootstrap row + col-md-6 col-lg-3) ────────── */ /* PS9 stock moduli usano `col-md-6 col-lg-3`. Rispettiamo il grid Bootstrap. Aggiungiamo gap verticale + un po' di gap orizzontale extra via padding. */ .orola-footer__main-top { padding-bottom: 36px; --bs-gutter-y: 36px; --bs-gutter-x: 44px; } .orola-footer__main-bottom { --bs-gutter-y: 24px; --bs-gutter-x: 24px; } /* ── Stile blocco generico modulo ──────────────────────────────────────── */ .orola-footer-wrapper .block, .orola-footer-wrapper .footer-block, .orola-footer-wrapper .ps-linklist, .orola-footer-wrapper .ps-customeraccountlinks, .orola-footer-wrapper .ps-socialfollow, .orola-footer-wrapper .block-contact { color: #f3eadc; /* Override eventuali bg/border dal parent Hummingbird */ background: transparent !important; border: 0 !important; padding: 0 !important; } /* ── Titoli blocchi (qualunque modulo) ────────────────────────────────── PS9 + Hummingbird usano

o

, ma dopo il wrap accordion JS diventano

. Miro tutti. */ .orola-footer-wrapper .block-title, .orola-footer-wrapper .h3, .orola-footer-wrapper h3, .orola-footer-wrapper h4, .orola-footer-wrapper .footer-block__title, .orola-footer-wrapper summary { font-size: 12px !important; font-family: var(--font-ui, 'Inter'), system-ui, sans-serif !important; letter-spacing: 0.2em !important; font-weight: 600 !important; text-transform: uppercase !important; margin: 0 0 22px !important; color: #d6b04a !important; position: relative; padding-bottom: 12px !important; line-height: 1.4 !important; white-space: normal; } .orola-footer-wrapper .block-title::after, .orola-footer-wrapper .h3::after, .orola-footer-wrapper h3::after, .orola-footer-wrapper h4::after, .orola-footer-wrapper .footer-block__title::after, .orola-footer-wrapper summary::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 1.5px; background: #d6b04a; } /* ── Hide sr-only text dentro i titoli dei moduli PS9 ─────────────────── ps_linklist + altri moduli mettono "Mostra/nascondi link X" dentro h3 per il toggle accessibility. Non serve visivamente nel nostro footer. */ .orola-footer-wrapper .sr-only, .orola-footer-wrapper .visually-hidden, .orola-footer-wrapper .show-link-toggle { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ── Lista link (ps_linklist + altri) ──────────────────────────────────── */ .orola-footer-wrapper ul, .orola-footer-wrapper .linklist { list-style: none; margin: 0; padding: 0; } .orola-footer-wrapper li { font-size: 14.5px; line-height: 2.05; } .orola-footer-wrapper a { display: inline-flex; align-items: baseline; gap: 9px; color: #f3eadc; text-decoration: none; transition: color .18s ease; } .orola-footer-wrapper ul li > a::before, .orola-footer-wrapper .linklist li > a::before { content: '›'; color: #d6b04a; font-size: 17px; line-height: 1; font-weight: 400; transition: transform .18s ease, color .18s ease; opacity: 0.9; } .orola-footer-wrapper a:hover { color: #ffffff; } .orola-footer-wrapper a:hover::before { transform: translateX(4px); color: #ffffff; opacity: 1; } /* ── ps_contactinfo: indirizzo, telefono, email ────────────────────────── */ .orola-footer-wrapper .block-contact, .orola-footer-wrapper .block_contact { font-size: 14.5px; line-height: 1.85; color: #f3eadc; } .orola-footer-wrapper .block-contact a { color: #f3eadc; } .orola-footer-wrapper .block-contact a:hover { color: #d6b04a; } .orola-footer-wrapper .block-contact a::before { content: none; /* contact info non ha la chevron */ } .orola-footer-wrapper .block-contact .data { margin-bottom: 6px; } /* Icone ps_contactinfo: indirizzo, telefono, email — mira font-icons */ .orola-footer-wrapper .block-contact i, .orola-footer-wrapper .block-contact .material-icons, .orola-footer-wrapper .block-contact [class^="bi-"] { color: #d6b04a; margin-right: 10px; font-size: 16px; vertical-align: middle; } /* ── ps_socialfollow: icone Facebook/Instagram/ecc. ───────────────────── */ .orola-footer-wrapper .block-social ul, .orola-footer-wrapper .ps-socialfollow ul, .orola-footer-wrapper ul.social-icons { display: flex; gap: 12px; margin: 0; padding: 0; } .orola-footer-wrapper .block-social li, .orola-footer-wrapper .ps-socialfollow li { line-height: 1; } .orola-footer-wrapper .block-social a, .orola-footer-wrapper .ps-socialfollow a { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(202, 161, 51, 0.15); color: #d6b04a; font-size: 18px; text-indent: 0; overflow: hidden; transition: background .15s ease, color .15s ease, transform .15s ease; padding: 0; gap: 0; } .orola-footer-wrapper .block-social a:hover, .orola-footer-wrapper .ps-socialfollow a:hover { background: #d6b04a; color: #1c3464; transform: translateY(-2px); } .orola-footer-wrapper .block-social a::before, .orola-footer-wrapper .ps-socialfollow a::before { content: none; /* niente chevron sui social */ } /* ── ps_emailsubscription (newsletter, se installato) ──────────────────── */ .orola-footer-wrapper .block_newsletter form { display: flex; gap: 0; margin-top: 12px; border-bottom: 1px solid rgba(214, 176, 74, 0.5); } .orola-footer-wrapper .block_newsletter input[type="email"] { flex: 1; background: transparent; border: 0; color: #f3eadc; font-size: 14px; padding: 10px 0; outline: none; } .orola-footer-wrapper .block_newsletter input[type="email"]::placeholder { color: rgba(243, 234, 220, 0.55); } .orola-footer-wrapper .block_newsletter button { background: #d6b04a; color: #1c3464; border: 0; padding: 10px 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; } /* ── Copyright partial (parent: _partials/copyright.tpl) ───────────────── */ .orola-footer-wrapper #footer_copyrights, .orola-footer-wrapper .footer__copyright, .orola-footer-wrapper ._footer-copyrights-1 { background: #14233c !important; padding: 18px 0 !important; border-top: 1px solid rgba(202, 161, 51, 0.18); color: #c9c1aa; font-size: 12.5px; letter-spacing: 0.02em; margin-top: 0; text-align: center; } .orola-footer-wrapper #footer_copyrights a { color: #c9c1aa; } .orola-footer-wrapper #footer_copyrights a::before { content: none; } .orola-footer-wrapper #footer_copyrights a:hover { color: #d6b04a; } /* ── Responsive: accordion mobile compatto (≤767px) ────────────────────── */ @media (max-width: 767px) { .orola-footer-wrapper { padding: 16px 0 0; /* da 28px 0 12px → molto più compatto */ margin-top: 40px; /* da 80px → metà */ } .orola-footer__container { padding: 0 20px; } .orola-footer__main-top { display: block; padding-bottom: 0; /* da 8px → 0 */ --bs-gutter-y: 0; /* niente gap Bootstrap su mobile */ } /* Borders sottili oro tra le accordion rows */ .orola-footer-wrapper details.footer-block, .orola-footer-wrapper details.block, .orola-footer-wrapper details.ps-linklist, .orola-footer-wrapper details.ps-customeraccountlinks, .orola-footer-wrapper details.ps-socialfollow, .orola-footer-wrapper details.block-contact { border-top: 1px solid rgba(214, 176, 74, 0.18); margin: 0 !important; padding: 0 !important; } .orola-footer-wrapper details:last-of-type { border-bottom: 1px solid rgba(214, 176, 74, 0.18); } /* Summary compatta: 13px padding verticale invece di 18 */ .orola-footer-wrapper details summary { padding: 13px 4px !important; margin: 0 !important; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; list-style: none; display: flex !important; align-items: center; justify-content: space-between; font-size: 11.5px !important; line-height: 1.3 !important; padding-bottom: 13px !important; /* override del padding-bottom 12 desktop */ } /* Niente sottolineatura oro sul summary mobile (è la riga clickabile) */ .orola-footer-wrapper details summary::-webkit-details-marker { display: none; } .orola-footer-wrapper details summary::marker { content: ''; } .orola-footer-wrapper details > summary::after { content: '+' !important; position: static !important; width: auto !important; height: auto !important; background: transparent !important; font-size: 18px; font-weight: 300; line-height: 1; color: #d6b04a !important; transition: transform .2s ease; } .orola-footer-wrapper details[open] > summary::after { content: '−' !important; } /* Content quando aperto: padding ridotto */ .orola-footer-wrapper details[open] > *:not(summary) { padding: 0 4px 12px !important; /* da 16 → 12 */ margin: 0 !important; animation: orolaFooterFadeIn .25s ease; } @keyframes orolaFooterFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Liste link più compatte: 13.5px e line-height ridotta */ .orola-footer-wrapper li { font-size: 13.5px !important; line-height: 1.85 !important; } .orola-footer-wrapper .block-contact { font-size: 13.5px !important; line-height: 1.75 !important; } /* Social icons più piccoli */ .orola-footer-wrapper .block-social a, .orola-footer-wrapper .ps-socialfollow a { width: 34px !important; height: 34px !important; font-size: 15px !important; } /* Copyright bottom: padding dimezzato + font ridotto */ .orola-footer-wrapper #footer_copyrights, .orola-footer-wrapper .footer__copyright, .orola-footer-wrapper ._footer-copyrights-1 { padding: 12px 16px !important; /* da 18px → 12px */ font-size: 11px !important; line-height: 1.45 !important; margin-top: 8px !important; } .orola-footer-wrapper li { line-height: 1.9; } } /* ── Neutralizza wrapper