/* mm-v9-negozio: fourth overlay for Warehouse 4.8.2 (after brand, shop, hero-lang). Marker: mm-v9-negozio-20260916. Owner requests (16 Sept 2026, morning): no top bar at all (it was eating the header height), header like the main site; the "Shop" mega-menu must be visually appealing; product visuals richer; payments inside the footer; copyright 2026. CSS only (plus one small JS file that swaps the 250 px thumbnails for the 452 px ones). Tokens from mm-v9-brand.css. Research: proposal/shop-nuovo-20260916/RICERCA-BEST-PRACTICE.md. */ /* ───────────────────────── 1. Header: the top bar disappears on desktop; «IT / EN» sits inside the header row ───────── */ @media (min-width: 992px) { /* the bar stays in flow but 1 px tall (the theme's sticky script measures the header offset from it: at 0 it would stick the header at page top); the language links are laid over the header row, at its right end */ #header .header-nav { position: relative; height: 1px; min-height: 0; padding: 0 !important; margin: 0; border: 0 !important; background: transparent !important; overflow: visible; z-index: 1040; pointer-events: none; } #header .header-nav .container { position: relative; height: 1px; } #header .header-nav .row, #header .header-nav .row > .col { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: visible; } #header .header-nav #language_selector { position: absolute; right: 15px; top: 28px; pointer-events: auto; } /* reserve room at the right end of the icons row so «IT / EN» never overlaps the cart */ #desktop-header .col-header-right > .row { padding-right: 96px; } .sticky-desktop-wrapper #desktop-header.stuck-header .col-header-right > .row { padding-right: 15px; } } /* ───────────────────────── 2. «Shop» mega-menu: one panel, eight tiles (photo + name), no arrows ─────────────────────── */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 > .cbp-hrsub { width: 780px !important; left: 0; border: 0; border-radius: var(--mm-radius); overflow: hidden; box-shadow: 0 18px 44px rgba(85, 69, 54, .16); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 .cbp-hrsub-inner { padding: 0; background: var(--mm-paper); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 .iqitmegamenu-submenu-container { padding: 0; max-width: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 .menu_row { margin: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 .cbp-menu-column { flex: 0 0 100%; max-width: 100%; padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 .cbp-menu-column-inner { padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; margin: 0; padding: 22px 24px 24px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li { display: block; float: none; width: auto; margin: 0; padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::after { display: none; content: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a { display: block; padding: 0; margin: 0; color: var(--mm-ink); text-decoration: none; text-align: center; font-family: var(--mm-serif); font-size: .98rem; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: normal; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::before { content: ""; display: block; position: static; left: auto; top: auto; width: auto; height: auto; font-size: 0; line-height: 0; aspect-ratio: 1 / 1; margin: 0 0 9px; border-radius: 8px; background: #fff center / 74% no-repeat; border: 1px solid var(--mm-line); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a:hover { color: var(--mm-accent); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a:hover::before { transform: translateY(-3px); box-shadow: var(--mm-shadow); border-color: transparent; } /* one product photograph per category (the theme's own 452 px thumbnails) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/10-olio-extra-vergine-di-oliva"]::before { background-image: url("/shop/31-medium_default/olio-extra-vergine-di-oliva-in-lattina-da-5lt.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/11-vino"]::before { background-image: url("/shop/160-medium_default/vino-rosso-da-tavola-primitivo-e-lambrusco.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/12-sott-oli-e-conserve"]::before { background-image: url("/shop/140-medium_default/cime-di-rapa-alla-fasanese-sott-olio.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/14-prodotti-da-forno"]::before { background-image: url("/shop/35-medium_default/taralli-pugliesi-ai-cereali.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/13-confetture-extra-e-marmellate"]::before { background-image: url("/shop/173-medium_default/composta-artigianale-di-cipolla-rossa-aceto-balsamico-e-prugna.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/18-pasta"]::before { background-image: url("/shop/163-medium_default/orecchiette-pugliesi-tradizionali-integrali-pasta-secca.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/15-legumi"]::before { background-image: url("/shop/65-medium_default/fave-intere-pugliesi.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/17-frutta-secca-ed-essiccati"]::before { background-image: url("/shop/171-medium_default/pomodori-secchi-pugliesi-200g.jpg"); } /* ───────────────────────── 3. Category page: richer grid (4 columns on wide screens), cream photo field, quiet chrome ── */ @media (min-width: 1200px) { .products.products-grid > .js-product-miniature-wrapper { flex: 0 0 25%; max-width: 25%; } } .products.products-grid > .js-product-miniature-wrapper { margin-bottom: 30px; } .product-miniature .thumbnail-container { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 0 !important; border-radius: var(--mm-radius); background: var(--mm-cream) !important; box-shadow: none; transition: box-shadow .35s ease, transform .35s ease; } .product-miniature .thumbnail-container .product-thumbnail { display: block; width: 100%; height: 100%; } .product-miniature .thumbnail-container picture { display: block; width: 100%; height: 100%; } .product-miniature .thumbnail-container img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .product-miniature:focus-within .thumbnail-container img { transform: scale(1.05); } @media (hover: hover) and (pointer: fine) { .product-miniature:hover .thumbnail-container { box-shadow: var(--mm-shadow); } .product-miniature:hover .thumbnail-container img { transform: scale(1.05); } } .product-miniature .product-description { padding: 14px 6px 0; text-align: center; } .product-miniature .product-category-name { display: block; font-family: var(--mm-sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-accent); margin-bottom: 5px; } .product-miniature .product-title { font-family: var(--mm-serif); font-size: 1.04rem; line-height: 1.3; color: var(--mm-ink); font-weight: 400; } @media (hover: hover) and (pointer: fine) { .product-miniature .product-title:hover { color: var(--mm-accent); } } .product-miniature .product-price-and-shipping { margin-top: 6px; } .product-miniature .product-price { font-family: var(--mm-serif); font-size: 1.12rem; color: var(--mm-olive); } .product-miniature .regular-price { color: var(--mm-muted); font-size: .9rem; margin-right: 6px; } .product-miniature .product-flags { top: 10px; left: 10px; } .product-miniature .product-flag, .product-flags .product-flag { background: var(--mm-olive); color: #fff; font-family: var(--mm-sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; margin-bottom: 4px; } .product-miniature .product-flag.out_of_stock, .product-flags .product-flag.out_of_stock { background: var(--mm-ink); } .product-miniature .product-availability { display: none !important; } .product-miniature .product-functional-buttons { background: transparent; } .product-miniature .product-functional-buttons-links a { background: var(--mm-paper); color: var(--mm-ink); border-radius: 999px; box-shadow: var(--mm-shadow); } @media (hover: hover) and (pointer: fine) { .product-miniature .product-functional-buttons-links a:hover { background: var(--mm-olive); color: #fff; } } /* left column: category tree */ #left-column .block-categories { border: 0; padding: 0; } #left-column .block-categories .block-title { border-bottom: 1px solid var(--mm-line); padding-bottom: 10px; margin-bottom: 8px; } #left-column .block-categories .block-title::before { content: "Categorie"; display: block; font-family: var(--mm-sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); margin-bottom: 8px; } html:lang(en) #left-column .block-categories .block-title::before { content: "Categories"; } /* the root category link («Tutti i prodotti», renamed from «Home») stays visible as the first entry */ #left-column .block-categories .block-title span a { font-family: var(--mm-serif); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mm-ink); } #left-column .block-categories .block-title span a:hover { color: var(--mm-accent); } #left-column .category-sub-menu li { border-bottom: 1px solid rgba(128, 99, 48, .1); } #left-column .category-sub-menu li::before, #left-column .category-sub-menu li a::before { display: none; content: none; } #left-column .category-sub-menu li a { display: block; padding: 9px 0; font-family: var(--mm-serif); font-size: 1rem; color: var(--mm-ink); transition: color .25s ease, padding-left .25s ease; } #left-column .category-sub-menu li a:hover, #left-column .category-sub-menu li.current a, #left-column .category-sub-menu li a.current { color: var(--mm-accent); padding-left: 6px; } /* category header and toolbar */ #js-product-list-header .page-title { font-family: var(--mm-serif); font-weight: 400; letter-spacing: -.02em; color: var(--mm-ink); } #category-description, .category-description { color: var(--mm-muted); font-size: .96rem; line-height: 1.65; } #js-product-list-top { border: 0; border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); padding: 10px 0; margin-bottom: 26px; } #js-product-list-top .products-sort-order .select-title, #js-product-list-top .select-title { border-color: var(--mm-line-soft); border-radius: var(--mm-radius); } .pagination .page-list a, .pagination .page-list span { border-radius: 999px; } .pagination .current a, .pagination .current span { background: var(--mm-olive); color: #fff; } /* ───────────────────────── 4. Product page ───────────────────────────────────────────────────────────────────────────── */ #main .images-container .product-cover, .product-cover { border: 0 !important; border-radius: var(--mm-radius); background: var(--mm-cream) !important; overflow: hidden; } #main .images-container .product-cover img, .product-cover img { mix-blend-mode: multiply; background: transparent !important; } .product-images .thumb-container, .product-images .thumb { border-radius: 6px; overflow: hidden; background: var(--mm-cream) !important; } .product-images .thumb-container img, .product-images .thumb img { mix-blend-mode: multiply; } #main .page-title, h1.page-title { font-family: var(--mm-serif); font-weight: 400; letter-spacing: -.02em; color: var(--mm-ink); } .product-prices .current-price, .product-prices .current-price-value { font-family: var(--mm-serif); font-size: 1.9rem; color: var(--mm-olive); } /* the theme hides «Tasse incluse / Tax included» (audit finding 8): show it, quietly, under the price */ .product-prices .tax-shipping-delivery-label { display: block !important; color: var(--mm-muted); font-family: var(--mm-sans); font-size: .78rem; margin-top: 2px; } .product-information .product-description, .product-information .rte-content { color: var(--mm-muted); line-height: 1.65; } .product-variants .control-label, .product-quantity .control-label { font-family: var(--mm-sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-accent); } .product-variants .form-control, .product-quantity .qty .form-control { border-color: var(--mm-line-soft); border-radius: var(--mm-radius); } .product-add-to-cart .add-to-cart { padding: 12px 22px; } .product-actions .social-sharing { margin-top: 18px; } .product-tabs .nav-tabs .nav-link, .section-title, #main h2.h3, #main .h3 { font-family: var(--mm-serif); font-weight: 400; color: var(--mm-ink); } .product-tabs .nav-tabs .nav-link.active { border-bottom-color: var(--mm-olive); color: var(--mm-olive); } #product-details .data-sheet dt, #product-details .data-sheet dd { border-color: rgba(128, 99, 48, .12); } .block-reassurance, .blockreassurance_product { border-color: var(--mm-line); } .product-comments-additional-info, .product-comments-block, #product-comments-list-empty { color: var(--mm-muted); } /* related and cross-sell sliders use the same cards */ .products-carousel .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container { aspect-ratio: 1 / 1; } .products-carousel .swiper-button-next, .products-carousel .swiper-button-prev, .swiper-button-next, .swiper-button-prev { background: var(--mm-paper); color: var(--mm-ink); border-radius: 999px; box-shadow: var(--mm-shadow); } /* ───────────────────────── 5. Footer: payments inside the footer, one field with the copyright ─────────────────────────── */ #footer-copyrights { background: var(--mm-cream) !important; border-top: 1px solid var(--mm-line); padding: 20px 0 26px; } #footer-copyrights .row { align-items: center; } #footer-copyrights .copyright-img { text-align: left; } #footer-copyrights .copyright-img::before { content: "Pagamenti sicuri"; display: block; font-family: var(--mm-sans); font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); margin-bottom: 8px; } html:lang(en) #footer-copyrights .copyright-img::before { content: "Secure payments"; } #footer-copyrights .copyright-img img { display: block; max-width: 300px; height: auto; } #footer-copyrights .copyright-img::after { content: "Carte accettate tramite PayPal, anche senza account. Nessun dato di carta transita sul sito."; display: block; margin-top: 8px; font-family: var(--mm-sans); font-size: .74rem; color: var(--mm-muted); } html:lang(en) #footer-copyrights .copyright-img::after { content: "Cards are accepted through PayPal, no PayPal account needed. No card data passes through this site."; } #footer-copyrights .copyright-txt { text-align: right; font-family: var(--mm-sans); font-size: .78rem; color: var(--mm-muted); letter-spacing: .02em; } @media (max-width: 575.98px) { #footer-copyrights .copyright-img, #footer-copyrights .copyright-txt { text-align: center; } #footer-copyrights .copyright-img img { margin: 0 auto; } #footer-copyrights .copyright-txt { margin-top: 16px; } } /* ───────────────────────── 6. Owner round 2 (16/9, 10:30): select, social, WhatsApp button, service icons, hero fade ── */ /* «Formato» select was 84 px wide and clipped the unit («580g» → «580»): give it room */ .product-variants .custom-select2, .product-variants .form-control-select { min-width: 8.5rem; } .product-variants .form-control-select { padding-right: 2.2rem; text-overflow: clip; } /* share links (real Facebook / X / Pinterest share URLs): quiet round buttons */ .product-actions .social-sharing { display: flex; align-items: center; gap: 8px; } .product-actions .social-sharing::before { content: "Condividi"; font-family: var(--mm-sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-accent); margin-right: 4px; } html:lang(en) .product-actions .social-sharing::before { content: "Share"; } .product-actions .social-sharing li { margin: 0; } .product-actions .social-sharing a, .product-actions .social-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--mm-line); color: var(--mm-ink); background: var(--mm-paper); font-size: .85rem; transition: color .25s ease, border-color .25s ease, transform .25s ease; } .product-actions .social-sharing a:hover { color: var(--mm-accent); border-color: var(--mm-accent); transform: translateY(-1px); } /* WhatsApp button: it used to lose its background on hover (white text on white → "disappears") and was a green slab. Now: a round 58 px button, icon only, gentle lift on hover, label that slides out on wide screens; never disappears. */ a.top-visible.btn, a.top-visible.btn:hover, a.top-visible.btn:focus, a.top-visible.btn:active { position: fixed; right: 22px; bottom: 22px; z-index: 1030; display: inline-flex !important; align-items: center; justify-content: center; height: 58px; width: auto; min-width: 58px; padding: 0 !important; margin: 0; border: 0; border-radius: 999px; background: #25d366 !important; color: #fff !important; opacity: 1 !important; visibility: visible !important; font-family: var(--mm-sans); font-size: 0 !important; line-height: 1; letter-spacing: .02em; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 26px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .12); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, padding .3s ease; overflow: hidden; } a.top-visible.btn br { display: none; } a.top-visible.btn i.fa-whatsapp { float: none !important; margin: 0 !important; font-size: 30px !important; line-height: 58px; width: 58px; text-align: center; color: #fff; } a.top-visible.btn::after { content: "Scrivici su WhatsApp"; display: inline-block; font-size: .9rem; font-weight: 600; max-width: 0; padding-right: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, padding-right .4s cubic-bezier(.2, .7, .2, 1); } html:lang(en) a.top-visible.btn::after { content: "Chat on WhatsApp"; } @media (min-width: 992px) { a.top-visible.btn:hover, a.top-visible.btn:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(37, 211, 102, .4), 0 3px 8px rgba(0, 0, 0, .14); } a.top-visible.btn:hover::after, a.top-visible.btn:focus-visible::after { max-width: 220px; opacity: 1; padding-right: 22px; } } @media (max-width: 991.98px) { a.top-visible.btn, a.top-visible.btn:hover { right: 16px; bottom: 16px; height: 54px; width: auto; min-width: 54px; } a.top-visible.btn i.fa-whatsapp { line-height: 54px; width: 54px; font-size: 27px !important; } } /* service icon boxes («Acquisti in sicurezza» …): same marks as the site — olive disc, white icon, serif title, muted text */ .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon { background: var(--mm-olive) !important; border-color: var(--mm-olive) !important; color: #fff !important; width: 58px; height: 58px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px !important; border-radius: 999px; transition: background .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); } .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon { background: var(--mm-accent) !important; border-color: var(--mm-accent) !important; transform: translateY(-2px); } .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title span { font-family: var(--mm-serif) !important; font-weight: 400 !important; font-size: 1.15rem !important; color: var(--mm-ink) !important; letter-spacing: -.01em; } .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-icon-box .elementor-icon-box-description p { font-family: var(--mm-sans); color: var(--mm-muted) !important; font-size: .92rem; line-height: 1.55; } /* hero carousel (fade, no arrows, no dots): belt and braces in case the module prints them */ #content-wrapper .elementor-top-section:first-child .swiper-button-next, #content-wrapper .elementor-top-section:first-child .swiper-button-prev, #content-wrapper .elementor-top-section:first-child .swiper-pagination { display: none !important; } #content-wrapper .elementor-top-section:first-child .swiper-slide img { display: block; width: 100%; height: auto; } /* sticky header: white in every state (never the cream token), smooth size change of the marks */ .sticky-desktop-wrapper #desktop-header.stuck-header, #desktop-header.stuck-header .header-top, #desktop-header.stuck-header #desktop-header-container { background: #fff !important; } #desktop_logo a::before, #desktop_logo a::after { transition: width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; } #desktop-header, #desktop-header .header-top { transition: padding .3s ease, box-shadow .3s ease; } /* footer columns: serif headings rhythm already set by mm-v9-shop; quieter link arrows */ #footer .block-links li::before, #footer .footer-block li::before { color: var(--mm-accent); } /* audit finding 9 (16/9): the newsletter module was off, so its empty heading was hidden here. 18/9 evening: the module is back on (proposal/shop-rifiniture-20260918/newsletter-accendi.php) and the block must show again — rule removed (found by the 3rd reviewer). The social heading is English on IT: */ /* 18/9 22:55: the envelope glyph IS there (FA6 shim: .fa.fa-envelope-o { --fa: "\f0e0" }) but mm-v9-brand.css paints the «Iscriviti» button in ink (#footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: var(--mm-ink) }) on the dark olive background: invisible. White icon like the old site (black button, white envelope); same specificity, this sheet loads later and wins. */ #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe i { color: #fff; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover i { color: var(--mm-cream, #f3ecdd); } /* 19/9 00:45: audit accessibilita' (axe, 48 rilevazioni): il testo del consenso GDPR sotto la newsletter (psgdpr, «Acconsento al trattamento…») e la frase delle condizioni erano grigio chiaro su crema (contrasto sotto 4,5:1 su /shop/carrello). Inchiostro pieno. */ #footer .block-newsletter .psgdpr_consent_message, #footer .block-newsletter .psgdpr_consent_message a, #footer .block-newsletter .ps-emailsubscription-conditions, #footer .block-newsletter .text-muted { color: var(--mm-ink, #554536); } /* 19/9 01:05: axe misurava ancora 4,49:1 perche' un antenato ha opacita' ridotta (il testo esce #736555 invece di #554536): opacita' piena sul blocco del consenso e delle condizioni. */ #footer .block-newsletter .text-muted, #footer .block-newsletter .psgdpr_consent_message, #footer .block-newsletter .ps-emailsubscription-conditions, #footer .block-newsletter .custom-checkbox { opacity: 1; } html:lang(it) #footer .block-social-links .block-title span { font-size: 0; } html:lang(it) #footer .block-social-links .block-title span::before { content: "Seguici"; font-family: var(--mm-sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-accent); } /* ───────────────────────── 7. Testata sticky, complemento al refine 5 (16 set 2026, 10:39): icone e segnaposto ──────── */ /* Stato in linea dopo il refine 5 (§6, «sticky header: white in every state»): campo bianco in stato «stuck» e simbolo + wordmark con la stessa curva (.35s cubic-bezier(.2,.7,.2,1)) → l'altezza della riga (72→60 px) segue senza salti. Residui misurati alle 10:40 (proposal/shop-header-sticky-20260916/ANALISI.md §5): - le icone ricerca/account/carrello saltano di 81 px in un fotogramma: lo spazio riservato a «IT / EN» (§1: padding-right 96 px → 15 px in stato «stuck») non ha transizione; - al ritorno a scroll 0 il contenuto sotto la testata sale di 12 px e poi ridiscende in .35 s: Waypoint azzera l'altezza in linea del segnaposto .sticky-desktop-wrapper mentre la riga sta ancora crescendo 60→72 px; - con «riduci movimento» attivo le transizioni dei due segni restano accese. Solo desktop (≥ 992 px): #mobile-header non è sticky (rm_sticky = 0) e non viene toccato. */ @media (min-width: 992px) { /* 7.1 lo spazio delle icone si chiude e si riapre con la stessa curva dei segni: le icone scivolano, non saltano */ #desktop-header .col-header-right > .row { transition: padding-right .35s cubic-bezier(.2, .7, .2, 1); } /* 7.2 il segnaposto in flusso non scende mai sotto l'altezza a riposo (62 px di simbolo + 2 × 5 px): niente rimbalzo */ .sticky-desktop-wrapper { min-height: 72px; } } @media (prefers-reduced-motion: reduce) { #desktop_logo a::before, #desktop_logo a::after, #desktop-header, #desktop-header .header-top, #desktop-header .col-header-right > .row { transition: none !important; } } /* ───────────────────────── 9. Owner round 3 (16/9, 11:50): mark as big as the site, compact menu, richer category panel, product cards with breathing room, pagination, no breadcrumb on text pages ─────────────────────────────────────────── */ /* 9.1 header: symbol 82 px + wordmark 110×56 (the WordPress header shows 82 px), row ≈ 98 px like the site; menu a notch smaller */ @media (min-width: 992px) { #desktop_logo a { gap: 14px; height: 82px; } #desktop_logo a::before { width: 82px; height: 82px; } #desktop_logo a::after { width: 110px; height: 56px; } .sticky-desktop-wrapper #desktop-header.stuck-header #desktop_logo a { height: 56px; } .sticky-desktop-wrapper #desktop-header.stuck-header #desktop_logo a::before { width: 56px; height: 56px; } .sticky-desktop-wrapper #desktop-header.stuck-header #desktop_logo a::after { width: 86px; height: 44px; } #desktop-header .header-top { padding-top: 8px; padding-bottom: 8px; } .sticky-desktop-wrapper { min-height: 98px; } #header .header-nav #language_selector { top: 36px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: .74rem; letter-spacing: .12em; padding-left: 11px; padding-right: 11px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: .68rem; letter-spacing: .1em; padding-left: 8px; padding-right: 8px; } } /* 9.2 «Shop» panel: wider, olive rule, small heading, cream tiles with the photo blended in, «Scopri» on hover */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 > .cbp-hrsub { width: 920px !important; border-top: 3px solid var(--mm-olive); border-radius: 0 0 var(--mm-radius) var(--mm-radius); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links { grid-template-columns: repeat(4, 1fr); gap: 24px 22px; padding: 22px 30px 30px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links::before { content: "Le nostre categorie"; grid-column: 1 / -1; font-family: var(--mm-sans); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent); padding-bottom: 10px; border-bottom: 1px solid var(--mm-line); } html:lang(en) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links::before { content: "Our categories"; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a { font-size: 1rem; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::before { background-color: var(--mm-cream); background-blend-mode: multiply; background-size: 72%; border: 0; border-radius: 12px; margin-bottom: 11px; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, background-size .4s ease; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a:hover::before { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(85, 69, 54, .14); background-size: 78%; border-color: transparent; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::after { content: "Scopri"; display: block; font-family: var(--mm-sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); margin-top: 6px; opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; } html:lang(en) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::after { content: "Discover"; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a:hover::after { opacity: 1; transform: none; } /* 9.3 product cards: separate white cards with a cream photo field, quick-view on hover, aligned prices */ .products.products-grid > .js-product-miniature-wrapper { padding: 0 12px; margin-bottom: 30px; } .product-miniature { position: relative; height: 100%; background: var(--mm-paper); border: 1px solid rgba(128, 99, 48, .12); border-radius: 14px; padding: 10px 10px 18px; transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease; } .product-miniature:focus-within { box-shadow: 0 18px 40px rgba(85, 69, 54, .13); transform: translateY(-3px); border-color: transparent; } @media (hover: hover) and (pointer: fine) { .product-miniature:hover { box-shadow: 0 18px 40px rgba(85, 69, 54, .13); transform: translateY(-3px); border-color: transparent; } } .product-miniature .thumbnail-container { border-radius: 10px; } @media (hover: hover) and (pointer: fine) { .product-miniature:hover .thumbnail-container { box-shadow: none; } } .product-miniature .product-category-name { display: block !important; } .product-miniature .product-title { display: block; min-height: 2.6em; } .product-miniature .product-price-and-shipping { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(128, 99, 48, .12); } .product-miniature .product-functional-buttons { position: absolute; right: 18px; top: 18px; left: auto; bottom: auto; width: auto; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .product-miniature .product-functional-buttons { opacity: 0; transform: translateY(-4px); pointer-events: auto; } .product-miniature:hover .product-functional-buttons, .product-miniature:focus-within .product-functional-buttons { opacity: 1; transform: none; } } .product-miniature .product-functional-buttons-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: .95rem; } .products-carousel .product-miniature, .featured-products .product-miniature { margin: 6px; } /* 9.4 pagination: round numbered pills, the current one solid olive with a readable digit */ .pagination .page-list { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; } .pagination .page-list li { margin: 0; display: block; } .pagination .page-list li a, .pagination .page-list li span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--mm-line); background: var(--mm-paper); color: var(--mm-ink) !important; opacity: 1 !important; font-family: var(--mm-sans); font-size: .86rem; font-weight: 600; text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease; } .pagination .page-list li a:hover { border-color: var(--mm-accent); color: var(--mm-accent) !important; } .pagination .page-list li.current a, .pagination .page-list li.current span, .pagination .page-list li.current a.disabled { background: var(--mm-olive) !important; border-color: var(--mm-olive) !important; color: #fff !important; } /* 9.5 text pages (CMS): no breadcrumb line */ body#cms .breadcrumb { display: none !important; } body#cms #wrapper { padding-top: 18px; } /* 9.6 pagination: the theme's
  • box must not draw its own border/background around the pills */ .pagination .page-list li, .pagination .page-list li.current { border: 0 !important; background: transparent !important; padding: 0; border-radius: 0; box-shadow: none; } /* ───────────────────────── 10. Footer payments block, second pass (16/9, 12:30): a real «Pagamenti sicuri» line ─────── */ #footer-copyrights { padding: 26px 0 30px; } #footer-copyrights .copyright-img { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } #footer-copyrights .copyright-img::before { content: "\f023 Pagamenti sicuri"; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mm-serif), FontAwesome; font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mm-ink); margin: 0; } html:lang(en) #footer-copyrights .copyright-img::before { content: "\f023 Secure payments"; } #footer-copyrights .copyright-img img { display: block; max-width: 340px; height: auto; padding: 10px 14px; background: #fff; border: 1px solid var(--mm-line); border-radius: 10px; } #footer-copyrights .copyright-img::after { margin-top: 0; max-width: 420px; line-height: 1.5; font-size: .8rem; color: var(--mm-muted); } #footer-copyrights .copyright-txt { font-size: .8rem; line-height: 1.6; } @media (max-width: 575.98px) { #footer-copyrights .copyright-img { align-items: center; text-align: center; } #footer-copyrights .copyright-img::after { text-align: center; } } /* ───────────────────────── 11. Owner round 4 (16/9, 12:50): bigger IT/EN, availability badge in the listing, no «Riferimento» sort ── */ /* 11.1 «IT / EN»: larger type and tap area (≈ 36 × 38 px each), still vertically centred in the 98 px row */ #header .header-nav #language_selector .dropdown-menu .dropdown-item { padding: .6rem .5rem; } #header .header-nav #language_selector .dropdown-menu .dropdown-item::before { font-size: .9rem; min-width: 2rem; } #header .header-nav #language_selector .dropdown-menu li + li::before { font-size: .9rem; } @media (min-width: 992px) { #header .header-nav #language_selector { top: 30px; } } /* 11.2 availability («Non disponibile», «Ultimi articoli») shown on the card itself, not only inside the product page */ .product-miniature .product-availability { display: block !important; position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0; pointer-events: none; } .product-miniature .product-availability:empty { display: none !important; } .product-miniature .product-availability .badge { display: inline-block; margin: 0 !important; padding: 6px 10px; border-radius: 4px; font-family: var(--mm-sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; } .product-miniature .product-availability .badge-danger, .product-miniature .product-availability .product-unavailable { background: var(--mm-ink) !important; color: #fff !important; } .product-miniature .product-availability .badge-warning { background: var(--mm-accent) !important; color: #fff !important; } .product-miniature .product-availability .badge-success { background: var(--mm-olive) !important; color: #fff !important; } .product-miniature .product-unavailable ~ *, .product-miniature .thumbnail-container:has(.product-unavailable) img { opacity: .85; } /* 11.3 sort menu: the two «Riferimento» orders are meaningless for customers */ .products-sort-order a.select-list[href*="order=product.reference."] { display: none !important; } /* 11.4 the theme centres the availability badge with a translateX(-50%): pin it to the top-left corner of the photo field */ .product-miniature .product-availability { transform: none !important; right: auto !important; bottom: auto !important; width: auto !important; text-align: left; } /* ───────────────────────── 12. Header exactly like the main site (16/9, 13:15): full-width row, 16 px menu, IT / EN at the far right; category panel anchored to the container (never off-screen) with the photos also in English ───────────────────────── */ @media (min-width: 992px) { #desktop-header-container, #desktop-header .container, #header .header-nav .container { max-width: none !important; width: 100%; padding-left: 36px; padding-right: 36px; } #desktop-header-container { position: relative; } #desktop-header .header-top { padding-top: 9px; padding-bottom: 9px; } .sticky-desktop-wrapper { min-height: 100px; } /* menu typography = WordPress header: Source Sans 3, 16 px, 600, uppercase, 1.12 px tracking */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-family: var(--mm-sans); font-size: 16px; font-weight: 600; letter-spacing: 1.12px; text-transform: uppercase; color: var(--mm-ink); padding-left: 9px; padding-right: 9px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { margin: 0 3px; } /* IT / EN like the site: 16 px, at the far right of the row */ #header .header-nav #language_selector { right: 36px; top: 25px; } #header .header-nav #language_selector .dropdown-menu .dropdown-item { padding: .7rem .35rem; font-weight: 600; } #header .header-nav #language_selector .dropdown-menu .dropdown-item::before { font-size: 16px; letter-spacing: 1.12px; min-width: 1.7em; line-height: 1.5; } #header .header-nav #language_selector .dropdown-menu li + li::before { font-size: 16px; line-height: 1.5; margin-right: .4rem; } #desktop-header .col-header-right > .row { padding-right: 112px; } /* category panel: anchored to the header container, one row of 8 tiles on wide screens, never wider than the viewport */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 { position: static; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 > .cbp-hrsub { left: 36px !important; right: 36px !important; width: auto !important; max-width: none; margin: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links { grid-template-columns: repeat(8, 1fr); gap: 18px 16px; padding: 20px 28px 26px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a { font-size: .92rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 13.5px; letter-spacing: .9px; padding-left: 6px; padding-right: 6px; } #header .header-nav #language_selector .dropdown-menu .dropdown-item::before, #header .header-nav #language_selector .dropdown-menu li + li::before { font-size: 14px; } #desktop-header .col-header-right > .row { padding-right: 100px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links { grid-template-columns: repeat(4, 1fr); } } /* photos of the categories keyed by category id: valid for the Italian and the English URLs */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/10-"]::before { background-image: url("/shop/31-medium_default/olio-extra-vergine-di-oliva-in-lattina-da-5lt.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/11-"]::before { background-image: url("/shop/160-medium_default/vino-rosso-da-tavola-primitivo-e-lambrusco.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/12-"]::before { background-image: url("/shop/140-medium_default/cime-di-rapa-alla-fasanese-sott-olio.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/14-"]::before { background-image: url("/shop/35-medium_default/taralli-pugliesi-ai-cereali.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/13-"]::before { background-image: url("/shop/173-medium_default/composta-artigianale-di-cipolla-rossa-aceto-balsamico-e-prugna.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/18-"]::before { background-image: url("/shop/163-medium_default/orecchiette-pugliesi-tradizionali-integrali-pasta-secca.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/15-"]::before { background-image: url("/shop/65-medium_default/fave-intere-pugliesi.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a[href*="/17-"]::before { background-image: url("/shop/171-medium_default/pomodori-secchi-pugliesi-200g.jpg"); } /* 12.1 the menu must stay on one line next to the icons: step the type down on narrower desktops */ @media (min-width: 1200px) and (max-width: 1359.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 14px; letter-spacing: 1px; padding-left: 6px; padding-right: 6px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { margin: 0 1px; } #desktop_logo a { gap: 10px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 12.5px; letter-spacing: .8px; padding-left: 4px; padding-right: 4px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { margin: 0 1px; } #desktop-header .col-header-right > .row { padding-right: 92px; } } /* 12.2 two more steps so the row never wraps between 992 and 1279 px */ @media (min-width: 1200px) and (max-width: 1279.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 13px; letter-spacing: .8px; padding-left: 4px; padding-right: 4px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { margin: 0; } #desktop-header .col-header-right > .row { padding-right: 100px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 11.5px; letter-spacing: .6px; padding-left: 3px; padding-right: 3px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { margin: 0; } #desktop-header .col-header-right > .row { padding-right: 88px; } #header .header-nav #language_selector .dropdown-menu .dropdown-item::before, #header .header-nav #language_selector .dropdown-menu li + li::before { font-size: 13px; } } /* 13. Shop polish 16/9: keep the language control centred inside the actual sticky header. */ @media (min-width: 992px) { #header #language_selector.mm-header-language { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 10; } #header .mm-header-language .expand-more, #header .mm-header-language img { display: none !important; } #header .mm-header-language .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto; position: static !important; transform: none !important; min-width: 0; padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; } #header .mm-header-language .dropdown-menu ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } #header .mm-header-language .dropdown-menu li { display: flex; align-items: center; } #header .mm-header-language .dropdown-item { display: flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; padding: 0 5px; border: 0; font-size: 0; line-height: 1; color: var(--mm-ink); background: none; } #header .mm-header-language .dropdown-item::before { content: attr(data-mm-lang); font: 600 16px/1 var(--mm-sans); letter-spacing: 1.12px; opacity: .62; } #header .mm-header-language li.current .dropdown-item::before, #header .mm-header-language .dropdown-item:hover::before { opacity: 1; } #header .mm-header-language li + li::before { content: '/'; color: #b8afa3; margin: 0 3px; font: 400 16px/1 var(--mm-sans); } #header .mm-header-language .dropdown-item:focus-visible { outline: 1px solid var(--mm-olive); outline-offset: 0; } .sticky-desktop-wrapper #desktop-header.stuck-header .col-header-right > .row { padding-right: 112px; } #desktop_logo a::after { width: 109.3px; } } @media (min-width: 992px) and (max-width: 1279.98px) { #header .mm-header-language .dropdown-item::before { font-size: 13px; letter-spacing: .8px; } #header .mm-header-language .dropdown-item { min-width: 30px; } .sticky-desktop-wrapper #desktop-header.stuck-header .col-header-right > .row { padding-right: 88px; } } /* Quiet photo navigation, using the existing Swiper instance (no second slider library). */ body#index .elementor-element-u07z3ss { position: relative; } .mm-hero-controls { position: absolute; right: 36px; bottom: 24px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px 7px; color: var(--mm-ink); background: rgba(255,251,240,.97); border: 1px solid rgba(85,69,54,.18); box-shadow: 0 2px 14px #0000000b; } .mm-hero-control { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: 400 17px/1 var(--mm-sans); transition: color .2s, background .2s; } .mm-hero-control:hover { color: var(--mm-accent); background: #eee8d8; } .mm-hero-control:focus-visible { outline: 2px solid var(--mm-olive); outline-offset: -3px; } .mm-hero-next svg { transform: rotate(180deg); } .mm-hero-count { min-width: 48px; text-align: center; font: 600 12px/1 var(--mm-sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; } .mm-hero-pause { border-left: 1px solid #d8d0c2; margin-left: 3px; } @media (max-width: 767.98px) { .mm-hero-controls { right: 14px; bottom: 14px; gap: 0; padding: 2px 4px; } } /* The selected photos: real produce, sensible crops, no duplicated images from the main site. */ body#cms .elementor-element-aqqd0ga .elementor-image img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; object-position: center 55%; border-radius: 28px 0 28px 0; } body#cms .elementor-element-4ev9651 .elementor-image img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; object-position: center 50%; } body#cms .elementor-element-4quor8c .elementor-image img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; object-position: center 77%; border-radius: 28px 0 28px 0; } body#cms .elementor-element-ut0h41h h2, body#cms .elementor-element-exmve12 h2, body#cms .elementor-element-xy0y1un h2 { font: 400 clamp(25px,2.2vw,32px)/1.2 var(--mm-serif); color: var(--mm-ink); } /* Keep percentages unchanged, but separate readable labels from the tiny decorative bar. */ body#cms .elementor-widget-progress .elementor-progress-wrapper { position: relative; height: 3px; line-height: 1; overflow: visible; margin: 42px 0 14px; background: #e9e6da !important; border-radius: 0; } body#cms .elementor-widget-progress .elementor-progress-bar { height: 3px; position: static; background: var(--mm-olive) !important; border-radius: 0; } body#cms .elementor-progress-text, body#cms .elementor-progress-percentage { position: absolute; bottom: 12px; color: var(--mm-ink); font: 600 13px/1.3 var(--mm-sans); letter-spacing: .035em; padding: 0; white-space: normal; } body#cms .elementor-progress-text { left: 0; right: 50px; } body#cms .elementor-progress-percentage { right: 0; font-weight: 400; } @media (prefers-reduced-motion: reduce) { .mm-hero-control { transition: none; } } @media (max-width: 991.98px) { #header .header-nav #language_selector .dropdown-menu .dropdown-item { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } #header .header-nav #language_selector .dropdown-menu .dropdown-item::before { font-size: 14px; line-height: 1; } #header .header-nav #language_selector .dropdown-menu li + li::before { font-size: 14px; } } /* ───────────────────────── 13. Hero height (16/9, 14:30): the whole photograph must fit a laptop screen without scrolling ── */ @media (min-width: 992px) { body#index .elementor-element-u07z3ss .swiper-slide img, body#index .elementor-element-u07z3ss .swiper-slide-inner img { width: 100%; height: clamp(360px, calc(100vh - 100px - 110px), 560px); object-fit: cover; object-position: 50% 55%; } body#index .elementor-element-u07z3ss .swiper-slide { height: auto; } } .mm-hero-control svg { display: block; } .mm-hero-pause svg { width: 18px; height: 18px; } /* 13.1 the theme keeps height:auto on the slide image with !important: repeat the cap with the same weight */ @media (min-width: 992px) { body#index .elementor-element-u07z3ss .swiper-slide img, body#index .elementor-element-u07z3ss .swiper-slide-inner img { height: clamp(360px, calc(100vh - 100px - 110px), 560px) !important; } } /* ───────────────────────── 14. Brand mark size = main site (16/9, 15:10): the oval PNG is 1.37:1; the site shows it 112×82, the shop box was 82×82 (oval drawn 82×60). Same box, same wordmark, same gap. Sticky: 77×56. ──────────────────────────────── */ @media (min-width: 992px) { #desktop_logo a { gap: 12px; } #desktop_logo a::before { width: 112px; height: 82px; } .sticky-desktop-wrapper #desktop-header.stuck-header #desktop_logo a::before { width: 77px; height: 56px; } } /* ───────────────────────── 15. No white strip under the header on the home (16/9, 15:45): the theme's #wrapper padding (20 px) minus the first Elementor section's own -7 px margin left a 13 px white band between the header row and the hero photograph. 7 px of padding cancels the negative margin exactly: the photograph starts on the header's bottom line. Desktop only (mobile has no band). */ @media (min-width: 992px) { body#index #wrapper { padding-top: 7px !important; } } /* 15.1 WhatsApp bubble a little higher (16/9, 15:45): the theme pins .top-visible to bottom:0 !important, so the 22 px offset of §7 never applied and the bubble touched the Windows taskbar. Same weight, real offset; the hover lift stays. */ a.top-visible.btn, a.top-visible.btn:hover, a.top-visible.btn:focus, a.top-visible.btn:active { bottom: 30px !important; } @media (max-width: 991.98px) { a.top-visible.btn, a.top-visible.btn:hover { bottom: 20px !important; } } /* ───────────────────────── 16. Sticky: the row shrinks as smoothly as the marks (16/9, 15:20, from the adversarial check): #desktop_logo a jumped 82→56 px in one frame while ::before/::after eased over .35 s, so menu, icons and IT/EN dropped 14 px at once and the symbol overflowed the 74 px bar for ~19 frames. Same curve and duration on the link's height; nothing else changes. */ @media (min-width: 992px) { #desktop_logo a { transition: height .35s cubic-bezier(.2, .7, .2, 1), gap .35s cubic-bezier(.2, .7, .2, 1); } } @media (prefers-reduced-motion: reduce) { #desktop_logo a, #desktop_logo a::before, #desktop_logo a::after, #desktop-header, #desktop-header .header-top { transition: none; } } /* ───────────────────────── 17. Menu panels (16/9, 16:15): every drop-down starts on the header's bottom line; «Produzione» becomes a real panel with three photo tiles ──────────────────────────────────────────────────────────────────────────────────────────── Owner (16/9 15:35): the «Shop» panel opened inside the header row (y 76 at 1440×900) under a 3 px olive rule he read as «a very thick black bar»; the «Produzione» drop-down was a bare list of three links in a 360 px box — «not serious» next to the Shop tiles. Measured before this section: header 0–102 (its own 1 px line at 101–102), row container y 10–92, menu items y 26–76; stuck header 0–74 (1 px shadow line at 74), container 9–65, items 12–62. The theme puts .cbp-hrsub at its static position (top: auto → right under the item) and forces `padding: 0 !important` on it; the item
  • is static, so the only positioned ancestor is #desktop-header-container (§12). Mechanism (17.1): .cbp-hrsub is anchored to the container's bottom (top: 100%) with a transparent 9 px top padding, so the white box (.cbp-hrsub-inner) starts on the header line in every state — at rest (101), stuck (74) and on the two-line row the theme still produces at 1200/1024 px (IT) and 1280 px (EN, longer labels since menu2.php). The gap between the item and the panel (16 px at rest, 3 px stuck, 50 px on the two-line row) is bridged by a transparent ::after on the open item's own (the theme makes it position: relative): as wide as the item only, 64 px tall, painted under the panel — so the pointer never leaves the
  • on its way down and the menu stays open, while sliding sideways along the text line still switches to the neighbouring item. No dark bar: 1 px var(--mm-line) (it overlaps the header's own line), soft shadow, 10 px bottom corners. 17.2: the «Produzione» panel (li#cbp-hrmenu-tab-7, same id in IT and EN) is a 760 px panel aligned with the right edge of the header content (36 px, like the Shop panel; never off-screen down to 992 px), small-caps heading, three cream tiles with a photograph (600×420, /shop/img/cms/mm-tile-*.jpg; the cream field stays if a file is missing), serif title, «Scopri»/«Discover» on hover — the language of the «Shop» tiles (§9.2, §12). Links keyed by CMS id (/content/9-, /content/10-, /content/11-), valid for IT and EN. Desktop only (≥ 992 px): the mobile menu is untouched. Evidence: proposal/shop-fix-20260916/REPORT-menu-panels.md. */ @media (min-width: 992px) { /* 17.1 every panel: anchored to the container's bottom, transparent padding up to the header line; the open item's grows a transparent bridge under itself (its own width only) so the hover survives the gap in every state */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub { top: 100% !important; padding: 9px 0 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-has-submeu.cbp-hropen > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 64px; background: transparent; pointer-events: auto; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub > .cbp-hrsub-inner { background: var(--mm-paper); border: 0; border-top: 1px solid var(--mm-line); border-radius: 0 0 10px 10px; box-shadow: 0 18px 44px rgba(85, 69, 54, .16); overflow: hidden; } /* 17.2 «Produzione»: a 760 px panel on the right edge of the header content, three photo tiles */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 > .cbp-hrsub { left: auto !important; right: 36px !important; width: 760px !important; max-width: calc(100vw - 72px) !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 .cbp-hrsub-inner { padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 .iqitmegamenu-submenu-container { padding: 0; margin: 0; max-width: none; width: auto; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 .menu_row { margin: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 .cbp-menu-column { flex: 0 0 100%; max-width: 100%; padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 .cbp-menu-column-inner { padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 20px 30px 26px; list-style: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links::before { content: "Produzione"; grid-column: 1 / -1; font-family: var(--mm-sans); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent); padding-bottom: 10px; border-bottom: 1px solid var(--mm-line); } html:lang(en) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links::before { content: "Our produce"; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li { display: block; float: none; width: auto; margin: 0; padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li::before { display: none; content: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a { display: block; padding: 0; margin: 0; color: var(--mm-ink); text-decoration: none; text-align: center; font-family: var(--mm-serif); font-size: 1rem; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: normal; transition: color .25s ease; } /* the tile: the theme's chevron pseudo-element becomes the photo field (cream when the photograph is missing) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::before { content: ""; display: block; position: static; left: auto; top: auto; width: auto; height: auto; font-size: 0; line-height: 0; aspect-ratio: 10 / 7; margin: 0 0 11px; border-radius: 12px; background: var(--mm-cream) center / cover no-repeat; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a:hover { color: var(--mm-accent); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a:hover::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a:focus-visible::before { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(85, 69, 54, .14); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::after { content: "Scopri"; display: block; font-family: var(--mm-sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); margin-top: 6px; opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; } html:lang(en) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::after { content: "Discover"; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a:hover::after, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a:focus-visible::after { opacity: 1; transform: none; } /* the photographs (owner's own, used nowhere else on site or shop — 16/9 check on the live pages): hen on the nest, green beans on the Ape, jars of preserves in the farm shop; keyed by CMS id so the same rule serves /shop/content/9-… and /shop/en/content/9-… */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a[href*="/content/9-"]::before { background-image: url("/shop/img/cms/mm-tile-azienda.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a[href*="/content/10-"]::before { background-image: url("/shop/img/cms/mm-tile-filiera.jpg"); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a[href*="/content/11-"]::before { background-image: url("/shop/img/cms/mm-tile-trasformazione.jpg"); } } @media (min-width: 992px) and (prefers-reduced-motion: reduce) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::after { transition: none; } } /* 17.3 (coordinator, 16:20): the §12 side padding (36 px) also reached the inner menu container (.container-iqitmegamenu is a .container too), so the row wrapped to two lines at 1280 px in English («Our produce», «Experiences») and at 1200/1024 px in Italian. The inner container needs no side padding of its own: the outer one already keeps the 36 px from the edges. */ @media (min-width: 992px) { #desktop-header .container-iqitmegamenu { padding-left: 0 !important; padding-right: 0 !important; } } /* ───────────────────────── 18. CMS photo strips (16/9, evening — Claude, task B): the Elementor image-carousel in «La storia» showed three 413 px tiles with the theme's arrows inside the photographs — «molto sito anni 2000» (owner). The main site's approved gallery («Gli ulivi della Masseria», cinema-v9/ulivi-foto.css) is one large photograph at a time, natural proportions (object-fit: contain on a cream field), native scroll-snap without a visible bar, discreet round arrows above right, no dots. Same language here, ported to the CMS content column (1219 px at 1440; 372 px at 390). The strip has ONE height (clamp, like the model) and every photograph keeps its own width; on phones one photograph at a time (max-width 86 %) with the height tied to the width so a 3:2 photo fills it. The markup (.mm-strip) is built by the JS section «CMS photo strips» of mm-v9-negozio.js on body#cms only; rules are prefixed so they never touch the home hero or product galleries. */ body#cms .elementor-widget-image-carousel .elementor-swiper-button, body#cms .elementor-widget-image-carousel .swiper-pagination { display: none !important; } /* the theme's arrows never show, even during the ~0.5 s before the rebuild */ .mm-strip { margin: clamp(20px, 3vw, 40px) 0 0; min-width: 0; } .mm-strip__head { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 0 0 12px; } .mm-strip__nav { display: flex; gap: 6px; } .mm-strip__nav[hidden] { display: none; } .mm-strip__nav button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px; height: 38px; margin: 0; padding: 0 0 3px; background: none; border: 1px solid var(--mm-line-soft, rgba(72, 72, 48, .3)); border-radius: 50%; box-shadow: none; color: var(--mm-ink, #554536); font: 400 1.5rem/1 var(--mm-sans, "Lato", "Source Sans 3", "Helvetica Neue", Arial, sans-serif); cursor: pointer; transition: border-color .25s cubic-bezier(.2, .7, .2, 1), color .25s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; } .mm-strip__nav button:hover { background: none; border-color: var(--mm-accent, #806330); color: var(--mm-accent, #806330); } .mm-strip__nav button:focus-visible { outline: 2px solid var(--mm-accent, #806330); outline-offset: 3px; } .mm-strip__nav button:disabled { opacity: .3; cursor: default; } .mm-strip__list { display: flex; gap: clamp(12px, 2vw, 24px); margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mm-strip__list::-webkit-scrollbar { display: none; } .mm-strip__item { flex: 0 0 auto; max-width: min(78%, 900px); margin: 0; padding: 0; min-width: 0; list-style: none; scroll-snap-align: start; } .mm-strip__item::before, .mm-strip__item::after { content: none; } .mm-strip__item figure { margin: 0; padding: 0; } .mm-strip__item a { display: block; } /* every photograph keeps its own proportions (no crop, no zoom): the strip has one height, widths follow the photo. No `aspect-ratio` declaration here on purpose: the width/height attributes copied from the theme give the browser the ratio BEFORE the photo loads (an author `aspect-ratio: auto` would override that hint and the strip would start 0 px wide, then widen photo by photo). */ .mm-strip .mm-strip__item img { display: block; width: auto; max-width: 100%; height: clamp(320px, 62vh, 600px); object-fit: contain; border: 0; border-radius: 4px; box-shadow: none; background: var(--mm-cream, #fff9e8); } @media (prefers-reduced-motion: no-preference) { .mm-strip__list { scroll-behavior: smooth; } } @media (max-width: 760px) { .mm-strip { margin-top: 20px; } .mm-strip__head { margin-bottom: 10px; } .mm-strip__item { max-width: 86%; } /* 54vw: at 390 px a 3:2 photograph is 316 px wide, inside the 86 % (320 px) cap — no cream bars; taller photos are contained */ .mm-strip .mm-strip__item img { height: clamp(200px, 54vw, 460px); } .mm-strip__nav button { width: 34px; height: 34px; font-size: 1.35rem; } } /* 18.1 (coordinator, 16:20): no layout jump — for the ~0.5 s before the rebuild the theme's carousel is invisible and its box already reserves the strip's height (head + list), so the text below does not move when the strip appears. */ body#cms .elementor-widget-image-carousel:not([data-mm-strip]) .elementor-image-carousel-wrapper { visibility: hidden; min-height: calc(clamp(320px, 62vh, 600px) + 56px); } @media (max-width: 760px) { body#cms .elementor-widget-image-carousel:not([data-mm-strip]) .elementor-image-carousel-wrapper { min-height: calc(clamp(200px, 54vw, 460px) + 50px); } } /* ───────────────────────── 17.4 Panel hover zone (coordinator, 16/9 22:20, adversarial check): the theme closes a panel on any mouseover outside its
  • ; the 9 px zone of §17.1 plus the item-wide bridge left a dead band between the row (items end at y 76 at rest, 62 sticky) and the white box, so diagonal paths towards a far tile closed the panel. Now the panel's transparent top padding starts right under the items and is as wide as the panel: every path stays inside the
  • . Row geometry from §12: container 10–92 (bottom padding 16 px), items 26–76; sticky container 9–65 (bottom 3 px), items 12–62; white box still on the header line (101 / 74). */ @media (min-width: 992px) { #header #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub { top: calc(100% - 16px) !important; padding-top: 25px !important; } #header .sticky-desktop-wrapper #desktop-header.stuck-header #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub { top: calc(100% - 3px) !important; padding-top: 12px !important; } /* 17.5 small texts of both panels were under 10 px (root 14 px: .66rem = 9,2 px, .62rem = 8,7 px) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links::before { font-size: 11px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 ul.cbp-links > li > a::after, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a::after { font-size: 10.5px; } } /* ───────────────────────── 18.2 CMS strip (coordinator, 16/9 22:20, adversarial check): the reserved box of §18.1 lacked the strip's own top margin, so the footer still moved 40 px at the rebuild — reserve the margin too; on tablets in portrait the 62vh height left cream bands above and below a 3:2 photo capped at 78 % of the column — tie the height to the width as well. */ body#cms .elementor-widget-image-carousel:not([data-mm-strip]) .elementor-image-carousel-wrapper { margin-top: clamp(20px, 3vw, 40px); } @media (max-width: 760px) { body#cms .elementor-widget-image-carousel:not([data-mm-strip]) .elementor-image-carousel-wrapper { margin-top: 20px; } } @media (min-width: 761px) { .mm-strip .mm-strip__item img { height: min(clamp(320px, 62vh, 600px), 46vw); } } /* ───────────────────────── 19. Mobile panel links + list-view badge (coordinator, 16/9 23:00, adversarial check) ─────────────────── */ #iqitmegamenu-mobile .mm-mobile-panel-link > a { display: block; padding: .55rem 0 .7rem; margin-bottom: .35rem; font-family: var(--mm-serif, "Fraunces", Georgia, serif); font-size: 1.05rem; color: var(--mm-accent, #806330); border-bottom: 1px solid var(--mm-line, rgba(128, 99, 48, .22)); } /* 19.1 list view: the card padding is wider than in the grid, keep the badge on the photo field */ .products-list .product-miniature .product-availability { left: 43px; top: 43px; } @media (max-width: 767.98px) { .products-list .product-miniature .product-availability { left: 24px; top: 24px; } } /* 17.6 (16/9 23:00): «L'azienda agricola» tile — the owner did not want the hen; the estate seen from the field (the old shop's home1.jpeg: crops, century-old olive trees, the white masseria, the Selva hill) says «azienda agricola». Old file kept on the server. */ @media (min-width: 992px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 ul.cbp-links > li > a[href*="/content/9-"]::before { background-image: url("/shop/img/cms/mm-tile-azienda-2.jpg"); } } /* ───────────────────────── 20-pre (coordinator, 16/9 23:20): «Home» enters the shop menu first (menu3.php), so every rule that addressed the «Shop» tab as `li:first-child` now addresses it by id (`li#cbp-hrmenu-tab-3`, same in IT and EN): a global replacement in this file, 47 occurrences, before the parity section below. */ /* ───────────────────────── 20. Parità del menu con il sito principale (16/9 sera, compito D — Claude) ───────────────────────── Il titolare: «uniforma il menu dello shop con quello del sito principale: stesso font, stesse dimensioni, tutto uguale». Riferimento misurato sul sito (header.site-header, 1440/1366/1280/1200, IT ed EN): Source Sans 3, 16 px, 600, maiuscolo, spaziatura 1,12 px (.07em), inchiostro #554536; riquadro voce = riga 25,6 px + 12 px sopra e sotto (49,6 px), nessun riempimento laterale; distanza fra i testi = gap 1,15vw (16,56 / 15,71 / 14,72 / 13,8 px), gruppo centrato sulla finestra (griglia 1fr auto 1fr); voce attiva: colore oliva #484830 e filetto 1 px oliva a 8 px sotto il riquadro (21,6 px sotto il testo); al passaggio: colore invariato, filetto 1 px nel colore del testo che cresce da sinistra in .25 s; niente chevron; blocco lingua «IT / EN» (sulle pagine EN «EN / IT»): stesso carattere, tutto inchiostro pieno, separatore in 600, riquadro con 4 px laterali a 2,5vw dal bordo (36 / 34,15 / 32 / 30 px), riga come le voci. Stato del negozio prima di questa sezione: il tema fissa `.cbp-tab-title { font-size: 1.07rem }` (radice 14 px → 14,98 px di glifo, non i 16 px dati alla dal §12), riga 50 px, 9 px + 3 px per lato (24 px fra i testi, 45 con i chevron), filetto del tema 1 px accento subito sotto il testo, gruppo spostato di 3,5 px a sinistra (colonne laterali disuguali), IT/EN con EN al 62 %, separatore grigio 400, 13 / 10 px attorno alla barra. Sotto i 1200 px il sito passa al menu a panino: lì il negozio conserva una riga compatta propria (§20.7); il menu mobile (< 992 px) non è toccato. Ordine e voci (manca «Home») si cambiano nel database (menu3.php), non qui. */ @media (min-width: 992px) { /* 20.1 riga della testata: colonne laterali uguali (come la griglia 1fr auto 1fr del sito) → il menu è centrato sulla finestra e non sulla propria colonna; la colonna del menu si stringe al contenuto; 3 px di riempimento in basso spostano il riquadro delle voci di 1,5 px verso l'alto (la riga del negozio è centrata a 51 px, quella del sito a 49,5) */ #desktop-header .header-top .row.align-items-center > .col-header-left, #desktop-header .header-top .row.align-items-center > .col-header-right { flex: 1 1 0%; } #desktop-header .header-top .row.align-items-center > .col-header-center { flex: 0 0 auto; width: auto; max-width: 100%; padding-bottom: 3px; } /* 20.2 elenco e voci: riquadro identico al sito (riga 1,6 + 12 px sopra e sotto, nessun riempimento laterale) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 0; padding: 0; float: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li { display: block; float: none; margin: 0; padding: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { display: block; position: relative; margin: 0; padding: 12px 0; height: auto; line-height: 1.6; white-space: nowrap; font-family: var(--mm-sans); font-weight: 600; text-transform: uppercase; color: var(--mm-ink); text-decoration: none; background: none; box-shadow: none; border: 0; } /* il titolo eredita il corpo dalla (il tema lo fissava a 1,07rem) e torna in linea, senza riquadro proprio */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a .cbp-tab-title, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink .cbp-tab-title { display: inline; position: static; margin: 0; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; vertical-align: baseline; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a .cbp-tab-title::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a .cbp-tab-title::after { display: none; content: none; } /* 20.3 niente chevron su «Shop» e «Produzione» (il sito non ne ha) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a .cbp-submenu-aindicator, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a i.fa-angle-down { display: none !important; } /* 20.4 filetto come sul sito: 1 px, 8 px sotto il riquadro, nel colore del testo, cresce da sinistra in .25 s (la ::after della resta al ponte del §17.1: qui si usa la ::before, libera) */ #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a::before { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: currentColor; transition: right .25s ease; pointer-events: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:hover::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:focus-visible::before, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hropen > a::before { right: 0; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:hover, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:focus, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hropen > a { color: var(--mm-ink); background: none; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 4px; } /* 20.5 Le CMS agricole 9/10/11 appartengono a Produzione, anche se ospitate da PrestaShop. ID identici in IT/EN; funziona anche senza JavaScript. */ body:not(.cms-id-9):not(.cms-id-10):not(.cms-id-11) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 > a, body#cms:is(.cms-id-9, .cms-id-10, .cms-id-11) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 > a { color: var(--mm-olive); } body:not(.cms-id-9):not(.cms-id-10):not(.cms-id-11) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-3 > a::before, body#cms:is(.cms-id-9, .cms-id-10, .cms-id-11) #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 > a::before { right: 0; background: var(--mm-olive); } /* 20.6 blocco lingua = «.language» del sito: 4 px laterali, a 2,5vw dal bordo (36 / 34,15 / 32 / 30 px), riga 1,6 + 12 px, corpo clamp(14,4px, 11,2px + .4vw, 16px) = 16 px da 1200 in su, tutto inchiostro pieno; la lingua corrente viene prima (IT / EN sulle pagine italiane, EN / IT su quelle inglesi, come sul sito); separatore «/» in 600 con uno spazio (.27em) per lato */ #header #language_selector.mm-header-language { right: clamp(20px, 2.5vw, 48px); top: calc(50% - 1.5px); transform: translateY(-50%); padding: 0 4px; } #header .mm-header-language .dropdown-menu ul { display: flex; align-items: center; margin: 0; padding: 0; } #header .mm-header-language .dropdown-menu li { display: flex; align-items: center; } #header .mm-header-language li.current { order: -1; } #header .mm-header-language .dropdown-item { display: block; min-width: 0; min-height: 0; padding: 12px 0; font-size: 0; line-height: 1; color: var(--mm-ink); } #header .mm-header-language .dropdown-item::before { display: block; font: 600 clamp(14.4px, 11.2px + .4vw, 16px) / 1.6 var(--mm-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--mm-ink); opacity: 1; } #header .mm-header-language li.current .dropdown-item::before, #header .mm-header-language .dropdown-item:hover::before { opacity: 1; } #header .mm-header-language li + li::before { content: none; } #header .mm-header-language li:not(.current)::before { content: "/"; display: block; margin: 0 .27em; font: 600 clamp(14.4px, 11.2px + .4vw, 16px) / 1.6 var(--mm-sans); letter-spacing: .07em; color: var(--mm-ink); opacity: 1; } #header .mm-header-language .dropdown-item:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 4px; } } /* 20.7 corpo e distanze per larghezza. Il sito tiene 16 px / 1,12 px e gap 1,15vw fino a 1200 px (clamp(.9rem, .7rem + .4vw, 1rem) = 16 px da 1200 in su) e sotto passa al menu a panino: i gradini 14 / 13 px del §12 a 1200–1359 non esistono sul sito e vengono superati. Fra 992 e 1199 non c'è un riferimento: riga compatta propria del negozio (12 px, .7 px, 10 px fra i testi: sta su una riga anche in inglese a 992 px, con ~10 px di margine dopo l'aggiunta di «Home»), con lo stesso filetto, colori e blocco lingua. */ @media (min-width: 1200px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul { gap: clamp(11.2px, 1.15vw, 18.4px); } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 16px; letter-spacing: 1.12px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul { gap: 10px; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a, #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > .cbp-empty-mlink { font-size: 12px; letter-spacing: .7px; } } /* 20.8 (coordinator, 16/9 23:30): with the site's item box (49,6 px, §20.2) the items end at y 74,3 at rest and 61,8 sticky, so the panel's transparent padding of §17.4 (top 76 / 62) left a 1–2 px strip outside the
  • and a shallow diagonal towards a far tile still closed the panel. Start the padding 1 px inside the item; the white box stays on the header line (101 / 74). */ @media (min-width: 992px) { #header #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub { top: calc(100% - 19px) !important; padding-top: 28px !important; } #header .sticky-desktop-wrapper #desktop-header.stuck-header #iqitmegamenu-horizontal .cbp-hrmenu > ul > li.cbp-hrmenu-tab > .cbp-hrsub { top: calc(100% - 5px) !important; padding-top: 14px !important; } } /* ───────────────────────── 21. «Produzione»: il pannello con le tessere al PRIMO passaggio (17/9/2026 — Claude, titolare: «voglio che il menu con le foto mi appaia SEMPRE quando mi posiziono su Produzione, a prescindere») Misura su staging (Chrome, 1366x768 e 1920x1080, sola lettura, 59 aperture): le tessere sono sfondi CSS del §17.2/§17.6 su un pannello che il tema tiene a `display:none` finché non lo apre (`.cbp-show`). Un ramo a display:none non scarica gli sfondi: i tre file /shop/img/cms/mm-tile-*.jpg (67+63+70 kB) partono solo alla prima apertura, e il riscaldamento di mm-v9-negozio.js parte solo a `requestIdleCallback` (misurato da 2,8 s a 29,6 s, mediana ~5 s). Risultato: al primo passaggio le tessere restano campi crema da 0,13 a 4,4 s; passando prima da «Shop» si guadagna il secondo che serve. Rimedio: il pannello resta nell'albero di rendering ma invisibile e non raggiungibile (il tema gli dà già visibility:hidden, opacity:0, position:absolute), così il browser scarica le tre foto insieme alla pagina (misurato: partenza a 0,79 s e 1,48 s invece che a 29,6 s). Verificato: niente traboccamento orizzontale, scrollHeight invariato, elementFromPoint al centro del pannello chiuso restituisce la foto dell'hero, i tre link restano fuori dall'ordine di tabulazione e non prendono il fuoco. Effetto voluto: anche la prima apertura ora sfuma in 300 ms come le successive. Per annullare: cancellare questo blocco. */ @media screen and (min-width: 992px) { #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7 > .cbp-hrsub { display: block !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li#cbp-hrmenu-tab-7:not(.cbp-hropen) > .cbp-hrsub { pointer-events: none !important; } } /* ── 22. Piede di pagina: stessa lingua di quello del sito ──────────────────────────────────────── */ /* 22.1 il marchio in testa alla colonna «Contatti», come la prima colonna del piede del sito */ #footer .block-iqitcontactpage .contact-rich::before { content: ""; display: block; width: 132px; height: 97px; margin: 0 0 16px; background: url("/wp-content/themes/masseria-monte-cinema/assets/logo/logo-masseria-monte-trasparente-320.png") left top / contain no-repeat; } /* 22.2 titoli delle colonne come nel sito: oliva, 12 px, stessa spaziatura */ #footer .block-title { color: var(--mm-olive); font-size: 12px; letter-spacing: .14em; } html:lang(it) #footer .block-social-links .block-title span::before { color: var(--mm-olive); } /* 22.3 social dentro pastiglie tonde da 44 px, come nel sito */ #footer .social-links._footer { display: flex; gap: 10px; } #footer .social-links._footer li { margin: 0; } #footer .social-links._footer li a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--mm-line-soft); border-radius: 50%; color: var(--mm-ink); background: none; transition: border-color .25s ease, color .25s ease; } #footer .social-links._footer li a:hover { border-color: var(--mm-olive); color: var(--mm-olive); } #footer .social-links._footer li a:focus-visible { outline: 2px solid var(--mm-olive); outline-offset: 3px; } /* ── 23. Piede di pagina piu' marcato (17/9, richiesta del titolare: «se no non si vede»): gradino da 1,05:1 a 1,26:1 ── */ #footer { background: #ece5d3; border-top: 1px solid var(--mm-line-soft); } #footer-copyrights { background: #e3dac4 !important; border-top: 1px solid var(--mm-line-soft); } #footer-copyrights .copyright-txt { color: var(--mm-ink); } #footer-copyrights .copyright-img::before { color: var(--mm-olive); } #footer-copyrights .copyright-img::after { color: var(--mm-ink); } /* ── 24. Fascia dello slider della home piu alta sui monitor larghi (17/9, richiesta del titolare: «le foto non possono essere ridotte un po, cioe non cosi tanto allargate?»). Misurato: le sei fotografie NON sono deformate (rapporto disegnato 2,000:1 identico al file a 1366, 1600, 1920 e su telefono), sono ritagliate sopra e sotto perche la cassa e alta al massimo 560 px su tutta la larghezza: a 1920 px la finestra e 3,43:1 e si vede il 58,3% della foto. Alzando il tetto a 700 px la finestra diventa 2,74:1 e si vede il 72,9% (a 1600 px: dal 70,0% all 87,5%; a 1366 px non cambia nulla, li comanda gia la formula). Per annullare: cancellare questo blocco. */ @media screen and (min-width: 992px) { body#index .elementor-element-u07z3ss .swiper-slide img, body#index .elementor-element-u07z3ss .swiper-slide-inner img { height: clamp(360px, calc(100vh - 100px - 110px), 700px) !important; } } /* ── 25. Accessibilità (18/9/2026). Misurata con axe-core WCAG 2.1 A/AA su 16 rilevazioni del negozio: sei tipi di violazione, di cui quattro gravi. Qui c'è solo la classe di servizio; le correzioni vere stanno nel §23 del file JavaScript, perché sono attributi da mettere su elementi che il tema genera da sé. Testo riservato ai lettori di schermo: invisibile a video, ma presente nella pagina e nella scaletta dei titoli. NON si usa display:none né visibility:hidden, che lo toglierebbero anche ai lettori di schermo. */ .mm-solo-lettori { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ── 26. Il grigio del testo secondario, allineato al sito (18/9/2026) ───────────────────────────── Il sito ha abbandonato #70604e il 17 settembre, dopo una ricerca su undici siti di masserie e alberghi (contrasto mediano 15,8:1): quel grigio dava 5,75:1 su fondo crema, contro i 13,5:1 del nero caldo #2f2a22 che lo ha sostituito. Il negozio era rimasto indietro: la variabile --mm-muted sta in mm-v9-brand.css, che e' caricato PRIMA di questo foglio, quindi basta ridichiararla qui senza toccare quel lotto. Trovato dalla verifica avversaria della notte, che ha confrontato riga per riga i due fogli. */ :root { --mm-muted: #2f2a22; } /* ── 27. WhatsApp sopra il pulsante delle preferenze Iubenda (19/9/2026, segnalazione G03 del titolare) ───────── Dopo la scelta nel banner, Iubenda mostra in basso a destra il pulsante delle preferenze (38x38 px a 16 px dai bordi, z-index massimo): copriva il quarto in basso a destra del tondo WhatsApp (58 px a 22/30 px dai bordi; 54 px a 16/20 px su telefono). Misurato con il browser su /shop/ e /shop/en/ a 1366 e 390 px. Si sposta WhatsApp, non il pulsante della privacy, che deve restare raggiungibile: il tondo sale sopra (16 + 38 + 12 px d'aria; 10 su telefono) e rispetta il bordo sicuro dei telefoni. L'etichetta al passaggio si apre verso sinistra e il tondo sale di 3 px: nessuna delle due cose torna sopra il pulsante di Iubenda. Stessa specificita' del §15.1, piu' in basso: vince. */ /* 24/9: iubenda e' ora a sinistra; WhatsApp torna vicino al bordo inferiore. */ a.top-visible.btn, a.top-visible.btn:hover, a.top-visible.btn:focus, a.top-visible.btn:active { bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 991.98px) { a.top-visible.btn, a.top-visible.btn:hover, a.top-visible.btn:focus, a.top-visible.btn:active { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── 28. Le tre pagine di Produzione (CMS 9, 10, 11) nella lingua del sito (19/9/2026, segnalazione G09 del titolare) ───── Passo 1: solo questo foglio, nessun dato toccato. (a) Il titolo non si ripete: nelle CMS 10 e 11 l'H1 del tema diventa la riga piccola in maiuscolo sopra il titolo grande del testo (lo schema «overline + titolo» del sito; resta l'unico H1); nella CMS 9 l'H1 e il titolo del testo dicono le stesse parole, quindi resta l'H1 e si toglie dalla vista il doppione. (b) Il testo ha una misura leggibile (68 battute) e lo stesso respiro del sito. (c) «I nostri prodotti»: le barre con percentuali ereditate dal vecchio tema (90 %, 80 %…) non dicono nulla di misurabile: restano le cinque voci, con un filo sotto, senza numeri (il dato originale resta nel costruttore). (d) Comandi della striscia: area di tocco di almeno 44 px senza ingrandire il segno. Rollback: togliere questo paragrafo e rifare css-refine. */ body#cms.cms-id-10 .page-header, body#cms.cms-id-11 .page-header { margin: 0; padding: clamp(26px, 4vw, 44px) 0 0; border: 0; } body#cms.cms-id-10 h1.page-title, body#cms.cms-id-11 h1.page-title { margin: 0; padding: 0 15px; border: 0; font: 600 12px/1.3 var(--mm-sans, "Source Sans 3", "Helvetica Neue", Arial, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--mm-accent, #806330); } body#cms.cms-id-10 h1.page-title span, body#cms.cms-id-11 h1.page-title span { font: inherit; letter-spacing: inherit; color: inherit; } body#cms.cms-id-10 .page-cms .elementor-top-section:first-of-type, body#cms.cms-id-11 .page-cms .elementor-top-section:first-of-type { padding-top: 10px !important; } body#cms.cms-id-9 .page-cms .elementor-element-jg6bw6f .rte-content > h2:first-child { display: none; } body#cms.cms-id-9 .page-cms .rte-content h2, body#cms.cms-id-10 .page-cms .rte-content h2, body#cms.cms-id-11 .page-cms .rte-content h2 { margin: 0 0 .7em; font-family: var(--mm-serif, "Fraunces", Georgia, serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -.03em; color: var(--mm-ink, #554536); } body#cms.cms-id-9 .page-cms .rte-content p, body#cms.cms-id-10 .page-cms .rte-content p, body#cms.cms-id-11 .page-cms .rte-content p { max-width: 68ch; margin: 0 0 1em; font-size: 17px; line-height: 1.7; color: var(--mm-muted, #2f2a22); } /* (c) le cinque voci senza percentuali */ body#cms.cms-id-9 .elementor-widget-progress { margin-bottom: 0 !important; } body#cms.cms-id-9 .elementor-widget-progress .elementor-widget-container { margin: 0 !important; } body#cms.cms-id-9 .elementor-widget-progress .elementor-progress-wrapper { height: auto; overflow: visible; border-radius: 0; background: none !important; box-shadow: none; border-bottom: 1px solid var(--mm-line-soft, rgba(72, 72, 48, .3)); } body#cms.cms-id-9 .elementor-widget-progress .elementor-progress-bar { display: block; width: 100% !important; height: auto; padding: 13px 0 12px; background: none !important; box-shadow: none; transition: none; } body#cms.cms-id-9 .elementor-widget-progress .elementor-progress-text { position: static; display: block; padding: 0; font: 600 12.5px/1.4 var(--mm-sans, "Source Sans 3", "Helvetica Neue", Arial, sans-serif); letter-spacing: .1em; color: var(--mm-ink, #554536); } body#cms.cms-id-9 .elementor-widget-progress .elementor-progress-percentage { display: none; } /* Le voci prodotto portano alla Bottega: riga cliccabile e focus evidente, stessa tipografia. Nessuna percentuale/dato del catalogo modificato. */ body#cms.cms-id-9 .elementor-widget-progress .elementor-progress-bar.mm-product-category-row { padding: 0; } body#cms.cms-id-9 .elementor-widget-progress a.mm-product-category-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 13px 2px 12px 0; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; } body#cms.cms-id-9 .elementor-widget-progress a.mm-product-category-link::after { content: "\2192"; flex: 0 0 auto; font-size: 18px; font-weight: 400; } body#cms.cms-id-9 .elementor-widget-progress a.mm-product-category-link:hover { color: var(--mm-accent); text-decoration: underline; text-underline-offset: 4px; } body#cms.cms-id-9 .elementor-widget-progress a.mm-product-category-link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 3px; } #iqitmegamenu-mobile .mobile-menu__link[aria-current="location"] { color: var(--mm-olive); text-decoration: underline; text-underline-offset: 5px; } /* su telefono le colonne vanno una sotto l'altra: i titoli non devono toccare la fotografia o l'elenco che li precede */ @media (max-width: 767px) { body#cms.cms-id-9 .page-cms .elementor-top-section + .elementor-top-section .elementor-column .rte-content > h2:first-child, body#cms.cms-id-9 .page-cms .elementor-column + .elementor-column .rte-content > h2:first-child { margin-top: 30px; } } /* passo 2 (19/9): fotografia d'apertura della CMS 11, creata dallo script (cmsTrasformazioneApertura): stessa forma di quella della CMS 9 */ body#cms.cms-id-11 .mm-apertura .elementor-image img { display: block; aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; object-position: center 50%; border-radius: 28px 0 28px 0; } @media (max-width: 767px) { body#cms.cms-id-11 .mm-apertura { margin-top: 18px; } } /* (d) area di tocco: cerchi visibili invariati (34px mobile), target rettangolari reali 44px. Lo pseudo-elemento parte dal padding box: -6px compensa i due bordi da 1px. Gap12 evita sovrapposizioni fra frecce. */ .mm-strip__nav { gap: 12px; } .mm-strip__nav button { position: relative; } .mm-strip__nav button::after { content: ""; position: absolute; inset: -6px; border-radius: 0; } /* G09, revisione Codex 19/9: anche l'apertura Filiera usa il taglio dei due angoli di Azienda/Trasformazione. Rapporto naturale e inquadratura restano invariati. */ body#cms.cms-id-10 #content .elementor-top-section:first-child .elementor-widget-image img { border-radius: 28px 0 28px 0; } /* footer-shop.css — proposta append-only per il piè di pagina del negozio (Warehouse 4.8.2). Da accodare DOPO mm-v9-negozio.css (ultimo foglio caricato: theme cache, brand, shop, hero-lang, negozio), così le regole a pari specificità vincono per ordine. Solo telefono: @media (max-width: 767.98px), desktop identico. Misura di partenza (Codex, 20/9): 1121 px a 390 px (blocchi 885 + pagamenti/copyright 235). Qui: Contatti a tutta larghezza, Informazioni e Account affiancati, Seguici su una riga, righe da 44 px, spazi ridotti nel blocco pagamenti. Nessun display:none su dati, link o pagamenti; il toggle nativo dei blocchi (.js-block-toggle / .block-content) non viene toccato. Nessun testo generato aggiunto. */ @media (max-width: 767.98px) { /* 1. Cornice e riga dei blocchi: meno padding, distanza fissa fra i blocchi invece dei margini del tema. */ #footer .footer-container { padding-top: 24px; padding-bottom: 12px; } #footer .footer-container .container > .row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 14px; } #footer .footer-container .container > .row > .block { margin: 0; padding-top: 0; padding-bottom: 0; } #footer .footer-container .container > .row > .col-12 > .block { margin: 0; padding-top: 0; padding-bottom: 0; } /* 2. Larghezze: Contatti a tutta larghezza (email da 176 px), Informazioni e Account al 50 %, Seguici a tutta larghezza. Le due colonne dei link cedono 9 px di padding interno verso il centro per le etichette lunghe. */ #footer .footer-container .row > .col.block-iqitcontactpage, #footer .footer-container .row > .col-12 { flex: 0 0 100%; max-width: 100%; } #footer .footer-container .row > .col.block-links { flex: 0 0 50%; max-width: 50%; min-width: 0; } #footer .footer-container .row > .col.block-iqitlinksmanager-1 { padding-right: 6px; } #footer .footer-container .row > .col.block-iqitlinksmanager-2 { padding-left: 6px; } /* 3. Titoli dei blocchi più vicini al contenuto. */ #footer .footer-container .block-title { margin: 0 0 6px; font-weight: 700; } /* 4. Contatti: separatori e parti più stretti; l'email diventa una riga da 44 px. Il telefono è un

    , non un link. */ #footer .contact-rich hr { margin: 6px 0; } #footer .contact-rich .part { margin: 0; } #footer .contact-rich .part p { margin: 0; } #footer .contact-rich .data.email a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; } /* Root: selettore verificato in mm-v9-negozio.css, sezione22. Il marchio rimane visibile ma affianca i recapiti, invece di aggiungere una riga alta113px. */ #footer .block-iqitcontactpage .contact-rich { position: relative; padding-right: 100px; } #footer .block-iqitcontactpage .contact-rich::before { position: absolute; top: 0; right: 0; width: 84px; height: 62px; margin: 0; background-size: contain; background-position: right top; } /* 5. Elenchi Informazioni e Account: ogni voce è una riga da 44 px, senza padding aggiunto dal tema. Si omettono le frecce decorative che vanno sopra al testo. Etichette lunghe a capo dentro la riga. */ #footer .footer-container .block-links ul { margin: 0; padding: 0; } #footer .footer-container .block-links li { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; } #footer .footer-container .block-links li a::before { content: none; } #footer .footer-container .block-links li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; line-height: 1.25; overflow-wrap: anywhere; } /* 6. Seguici: titolo e tre icone (già 44×44) sulla stessa riga invece di due righe. */ #footer .footer-container .block-social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; } #footer .footer-container .block-social-links .block-title { margin: 0; } #footer .footer-container .block-social-links .block-content { flex: 0 0 auto; } #footer .footer-container .social-links._footer { margin: 0; } /* 7. Pagamenti e copyright: stessi contenuti (titolo «Pagamenti sicuri», loghi, nota PayPal, ragione sociale), spazi verticali ridotti. Il pulsante WhatsApp è position: fixed e non occupa altezza; il suo

    vuoto sì. */ #footer-copyrights { padding: 16px 0 18px; } #footer-copyrights .copyright-img { gap: 6px; padding-right: 64px; } #footer-copyrights .copyright-img img { padding: 6px 10px; width: 300px; max-width: 100%; } #footer-copyrights .copyright-img::after { margin-top: 0; } #footer-copyrights .copyright-txt { margin-top: 8px; line-height: 1.45; } #footer-copyrights .copyright-txt { padding-right: 64px; } #footer-copyrights .copyright-txt p { margin: 0; } } /* 21/9/2026 — mobile navbar: all controls in one 68px row, shared language selector, centred brand. Applied only after the existing language node moves successfully. Desktop and no-JS fallback keep their layout. */ @media (max-width: 991.98px) { #header.mm-mobile-onebar .header-nav { display: none; } #header.mm-mobile-onebar { border-top: 0; border-bottom: 0; } #header.mm-mobile-onebar #mobile-header { height: 68px; border: 0; background: #fff; box-shadow: inset 0 -1px 0 var(--mm-line); } #header.mm-mobile-onebar #mobile-header-sticky { padding: 0; border: 0; background: #fff; } #header.mm-mobile-onebar #mobile-header-sticky > .container { width: 100%; max-width: none; padding: 0 8px; } #header.mm-mobile-onebar .mobile-main-bar { padding: 0; border: 0; } #header.mm-mobile-onebar .row-mobile-header { display: grid; grid-template-columns: 32px 32px 32px minmax(0, 1fr) 64px 32px; align-items: center; height: 68px; min-height: 68px; padding: 0; margin: 0; } #header.mm-mobile-onebar .row-mobile-header > .col { width: auto; min-width: 0; max-width: none; padding: 0; margin: 0; } #header.mm-mobile-onebar .col-mobile-btn > .m-nav-btn, #header.mm-mobile-onebar #mobile-cart-toogle { display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; min-height: 44px; padding: 0; margin: 0; color: var(--mm-ink); line-height: 1; } #header.mm-mobile-onebar .col-mobile-btn .m-nav-btn > i { font-size: 18px; line-height: 1; } #header.mm-mobile-onebar .col-mobile-btn .m-nav-btn > span { display: none; } #header.mm-mobile-onebar .col-mobile-logo { display: flex; align-items: center; justify-content: center; height: 68px; } #header.mm-mobile-onebar .col-mobile-logo a { display: inline-flex; width: 112px; max-width: 100%; height: 48px; padding: 0; gap: 8px; } #header.mm-mobile-onebar .col-mobile-logo a::before { width: 42px; height: 42px; background-size: contain; } #header.mm-mobile-onebar .col-mobile-logo a::after { display: block; width: 62px; height: 32px; background-size: contain; } #header #language_selector.mm-mobile-language { position: static; width: 64px; height: 44px; margin: 0; padding: 0; transform: none; } #header .mm-mobile-language .expand-more, #header .mm-mobile-language img { display: none !important; } #header .mm-mobile-language .language-selector-wrapper, #header .mm-mobile-language .language-selector { display: block !important; width: 64px; height: 44px; } #header .mm-mobile-language .dropdown-menu { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: none !important; min-width: 0; padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; } #header .mm-mobile-language .dropdown-menu ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } #header .mm-mobile-language .dropdown-menu li { display: flex; align-items: center; margin: 0; padding: 0; } #header .mm-mobile-language .dropdown-item { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; font-size: 0; line-height: 1; color: var(--mm-ink); background: transparent; } #header .mm-mobile-language .dropdown-item::before { content: attr(data-mm-lang); min-width: 0; font: 600 13px/1 var(--mm-sans); letter-spacing: .5px; opacity: .62; } #header .mm-mobile-language li.current .dropdown-item::before, #header .mm-mobile-language .dropdown-item:hover::before { opacity: 1; } #header .mm-mobile-language li + li::before { content: '/'; width: 8px; margin: 0; color: #b8afa3; font: 400 12px/1 var(--mm-sans); text-align: center; } #header .mm-mobile-language .dropdown-item:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: -2px; } } @media (max-width: 359.98px) { #header.mm-mobile-onebar .col-mobile-logo a { width: 96px; gap: 6px; } #header.mm-mobile-onebar .col-mobile-logo a::before { width: 36px; height: 36px; } #header.mm-mobile-onebar .col-mobile-logo a::after { width: 54px; height: 28px; } } /* 21/9/2026 - checkout: ritocco visivo leggero, senza cambiare flusso o funzioni. */ body#checkout #checkout-payment-step .payment-options > div { margin-bottom: 9px; } body#checkout #checkout-payment-step .payment-option { display: flex; align-items: center; min-height: 58px; padding: 11px 14px; border: 1px solid rgba(85, 69, 54, .18); border-radius: 10px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } body#checkout #checkout-payment-step .payment-option:hover { border-color: rgba(128, 99, 48, .52); } body#checkout #checkout-payment-step .payment-option:has(input:checked) { border-color: var(--mm-accent, #806330); background: #fffaf0; box-shadow: 0 0 0 2px rgba(128, 99, 48, .10); } body#checkout #checkout-payment-step .payment-option label { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; margin: 0; color: var(--mm-ink, #554536); font-weight: 600; line-height: 1.35; cursor: pointer; } body#checkout #checkout-payment-step .payment-option label img { flex: 0 0 auto; width: auto; max-width: 142px; max-height: 30px; object-fit: contain; } body#checkout #checkout-payment-step .payment-option .custom-radio { flex: 0 0 auto; margin-right: 11px; } body#checkout #checkout-payment-step .additional-information { margin: -2px 0 10px; padding: 12px 15px; border: 1px solid rgba(85, 69, 54, .12); border-top: 0; border-radius: 0 0 10px 10px; background: #fffdf7; } body#checkout #conditions-to-approve { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(85, 69, 54, .16); border-radius: 10px; background: #faf6eb; } body#checkout #conditions-to-approve ul, body#checkout #conditions-to-approve li { margin: 0; padding: 0; } body#checkout #conditions-to-approve .custom-checkbox { display: flex; align-items: flex-start; gap: 10px; } body#checkout #conditions-to-approve .js-terms { margin: 0; line-height: 1.5; } body#checkout #payment-confirmation .btn-primary { min-height: 50px; border-radius: 8px; font-weight: 700; letter-spacing: .02em; } /* Il vecchio collage dei pagamenti viene sostituito dal JS con i marchi correnti del modulo ufficiale. */ #footer-copyrights .mm-payment-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px 14px; max-width: 620px; margin: 0 auto; } #footer-copyrights .mm-payment-marks img { display: block; width: auto; height: 24px; min-width: 24px; max-width: 86px; padding: 4px 7px; border: 1px solid rgba(85, 69, 54, .18); border-radius: 7px; background: #fff; box-sizing: content-box; object-fit: contain; } #footer-copyrights .mm-payment-bank { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 9px; border: 1px solid rgba(85, 69, 54, .24); border-radius: 7px; color: var(--mm-ink, #554536); background: #fff; font-size: 12px; font-weight: 700; line-height: 1; } @media (max-width: 767.98px) { body#checkout #checkout-payment-step .payment-option { min-height: 56px; padding: 10px 11px; } body#checkout #checkout-payment-step .payment-option label { gap: 8px; font-size: 14px; } body#checkout #checkout-payment-step .payment-option label img { max-width: 104px; max-height: 25px; } body#checkout #conditions-to-approve { padding: 12px; } #footer-copyrights .mm-payment-marks { gap: 8px 11px; padding-right: 54px; } #footer-copyrights .mm-payment-marks img { height: 21px; max-width: 72px; padding: 4px 6px; } } /* ── Area cliente 2026-09-22: accesso, registrazione, recupero e pagine account ── */ body.page-customer-account #wrapper { background: #fbfaf6; } body.page-customer-account #content-wrapper { padding-bottom: 52px; } body.page-customer-account #main > .page-header { max-width: 960px; margin: 42px auto 28px; text-align: center; border: 0; } body.page-customer-account #main > .page-header::before { content: "AREA CLIENTI"; display: block; margin-bottom: 10px; color: var(--mm-olive); font-family: var(--mm-sans); font-size: .68rem; font-weight: 700; letter-spacing: .2em; } html:lang(en) body.page-customer-account #main > .page-header::before { content: "CUSTOMER AREA"; } body.page-customer-account #main > .page-header .page-title { margin: 0; border: 0; color: var(--mm-ink); font-family: var(--mm-serif); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; } body.page-customer-account #main > #content.page-content { max-width: 960px; margin: 0 auto; padding: 42px 48px; border: 1px solid var(--mm-line); border-radius: 16px; background: var(--mm-paper); box-shadow: 0 18px 48px rgba(66, 55, 35, .07); } #authentication #main > .page-header, #authentication #main > #content, #password #main > .page-header, #password #main > #content { max-width: 720px; } body.page-customer-account .page-content form .form-group { margin-bottom: 22px; } body.page-customer-account .page-content .col-form-label { margin-bottom: 8px; color: var(--mm-ink); font-family: var(--mm-sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } body.page-customer-account .page-content .form-control { min-height: 52px; padding: 12px 15px; border: 1px solid #d9d2c3; border-radius: 8px; background: #fff; color: var(--mm-ink); font-size: 1rem; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } body.page-customer-account .page-content .form-control:focus { border-color: var(--mm-olive); background: #fff; box-shadow: 0 0 0 3px rgba(82, 90, 55, .12); } body.page-customer-account .page-content .input-group-append .btn { min-width: 54px; border-color: #d9d2c3; border-radius: 0 8px 8px 0; background: #f8f5ed; color: var(--mm-ink); } body.page-customer-account .page-content .form-control-comment { display: block; margin-top: 7px; color: var(--mm-muted); font-size: .75rem; line-height: 1.45; } body.page-customer-account .page-content .btn-primary, body.page-customer-account .page-content .form-control-submit { min-height: 50px; padding: 12px 28px; border-radius: 999px; background: var(--mm-olive); border-color: var(--mm-olive); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(82, 90, 55, .18); } body.page-customer-account .page-content .btn-primary:hover, body.page-customer-account .page-content .btn-primary:focus { background: var(--mm-accent); border-color: var(--mm-accent); } body.page-customer-account .page-content a { color: var(--mm-olive); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Accesso: una card compatta, gerarchia chiara e azioni a tutta larghezza. */ #authentication .login-form { max-width: 520px; margin: 0 auto; } #authentication #login-form .form-group.row { display: block; margin: 0 0 20px; } #authentication #login-form .form-group.row > label, #authentication #login-form .form-group.row > .js-input-column { display: block; width: 100%; max-width: none; padding: 0; } #authentication #login-form .form-group.row > .form-control-comment:last-child { display: none; } #authentication .mm-login-password-label { display: block; margin: 0 0 8px; color: var(--mm-ink); font-family: var(--mm-sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #authentication .forgot-password { margin: 18px 0 24px; text-align: right; } #authentication #submit-login { width: 100%; } #authentication .page-content > hr { margin: 34px 0 24px; border-color: var(--mm-line); } #authentication .no-account { padding: 17px 20px; border-radius: 10px; background: var(--mm-cream); text-align: center; } #authentication .no-account a { font-weight: 600; } /* Registrazione e modifica dati: campi allineati, consenso leggibile. */ #registration .register-form > p { margin: 0 0 30px; padding: 15px 18px; border-radius: 9px; background: var(--mm-cream); } #registration #customer-form > div > .form-group.row, #registration #customer-form .field-password-policy > .form-group.row, #identity #customer-form > div > .form-group.row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 22px; align-items: start !important; margin: 0 0 22px; } #registration #customer-form .form-group.row > label, #registration #customer-form .field-password-policy > .form-group.row > label, #identity #customer-form .form-group.row > label { width: auto; max-width: none; padding: 14px 0 0; } #registration #customer-form .form-group.row > .js-input-column, #registration #customer-form .field-password-policy > .form-group.row > .js-input-column, #identity #customer-form .form-group.row > .js-input-column { width: auto; max-width: none; padding: 0; } #registration #customer-form .form-group.row > .form-control-comment:not(label), #registration #customer-form .field-password-policy > .form-group.row > .form-control-comment:not(label), #identity #customer-form .form-group.row > .form-control-comment:not(label) { grid-column: 2; width: auto; max-width: none; padding: 0; } #registration #customer-form .form-group.row:has(.custom-checkbox), #identity #customer-form .form-group.row:has(.custom-checkbox) { display: block; margin: 12px 0; padding: 17px 18px; border: 1px solid var(--mm-line); border-radius: 10px; background: #fbfaf6; } #registration #customer-form .form-group.row:has(.custom-checkbox) > label, #identity #customer-form .form-group.row:has(.custom-checkbox) > label { display: none; } #registration #customer-form .custom-checkbox, #identity #customer-form .custom-checkbox { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; } #registration #customer-form .custom-checkbox label, #identity #customer-form .custom-checkbox label { margin: 0; line-height: 1.55; } #registration #customer-form .custom-checkbox em, #identity #customer-form .custom-checkbox em { display: block; margin-top: 7px; color: var(--mm-muted); font-size: .78rem; line-height: 1.65; } #registration .mm-recaptcha-branding { margin: 18px 0; color: var(--mm-muted); font-size: .72rem; line-height: 1.5; } #registration .form-footer { margin-top: 26px; } /* Recupero password. */ #password .page-content > p { margin: 0 0 24px; color: var(--mm-muted); font-size: 1rem; line-height: 1.65; } #password .page-content .form-inline { display: block; } #password .page-content .form-inline .form-group { display: block; width: 100%; } #password .page-content .form-inline .form-control { width: 100%; } #password .page-content .form-inline .btn { margin-top: 15px; } #password .page-footer { max-width: 720px; margin: 20px auto 0; } /* Area autenticata: scorciatoie, indirizzi e tabelle nello stesso linguaggio. */ #my-account #content.page-content { padding: 0; border: 0; background: transparent; box-shadow: none; } #my-account .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #my-account .links a { width: auto; margin: 0; padding: 0; } #my-account .links a span { display: flex; min-height: 150px; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 25px 18px; border: 1px solid var(--mm-line); border-radius: 14px; background: var(--mm-paper); color: var(--mm-ink); box-shadow: 0 10px 30px rgba(66,55,35,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } #my-account .links a:hover span, #my-account .links a:focus span { transform: translateY(-3px); border-color: var(--mm-olive); box-shadow: 0 14px 36px rgba(66,55,35,.10); } #my-account .links a i { margin: 0; color: var(--mm-olive); font-size: 2rem; } body.page-customer-account .address, body.page-customer-account .orders, body.page-customer-account .table-wrapper { border-color: var(--mm-line); border-radius: 12px; overflow: hidden; background: var(--mm-paper); box-shadow: 0 10px 30px rgba(66,55,35,.05); } body.page-customer-account .table thead th { background: var(--mm-cream); color: var(--mm-ink); border-color: var(--mm-line); } body.page-customer-account .table td { border-color: var(--mm-line); } @media (max-width: 767.98px) { body.page-customer-account #content-wrapper { padding-bottom: 30px; } body.page-customer-account #main > .page-header { margin: 26px 0 20px; text-align: left; } body.page-customer-account #main > .page-header::before { margin-bottom: 7px; } body.page-customer-account #main > .page-header .page-title { font-size: 2rem; } body.page-customer-account #main > #content.page-content { padding: 24px 18px; border-radius: 12px; } #authentication .forgot-password { text-align: left; } #authentication .page-content > hr { margin: 28px 0 20px; } #registration #customer-form > div > .form-group.row, #registration #customer-form .field-password-policy > .form-group.row, #identity #customer-form > div > .form-group.row { display: block; } #registration #customer-form .form-group.row > label, #identity #customer-form .form-group.row > label { display: block; padding: 0; } #registration #customer-form .form-group.row > .form-control-comment:not(label), #identity #customer-form .form-group.row > .form-control-comment:not(label) { padding: 0; } #registration #customer-form .form-group.row:has(.custom-checkbox), #identity #customer-form .form-group.row:has(.custom-checkbox) { padding: 15px 14px; } #my-account .links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #my-account .links a span { min-height: 126px; padding: 18px 12px; } body.page-customer-account .table-responsive { border: 0; border-radius: 10px; } /* Sui moduli il pulsante fisso coprirebbe campi/consensi durante lo scorrimento. I contatti restano nel footer. */ body#authentication a.top-visible.btn, body#registration a.top-visible.btn, body#password a.top-visible.btn, body#identity a.top-visible.btn, body#address a.top-visible.btn { display: none !important; } } @media (max-width: 380px) { #my-account .links { grid-template-columns: 1fr; } } /* Area account: la riga password e' annidata in .field-password-policy. Usa le stesse colonne dei campi nome, cognome ed e-mail. */ #identity #customer-form .field-password-policy > .form-group.row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 22px; align-items: start !important; margin: 0 0 22px; } #identity #customer-form .field-password-policy > .form-group.row > label { width: auto; max-width: none; padding: 14px 0 0; } #identity #customer-form .field-password-policy > .form-group.row > .js-input-column { width: auto; max-width: none; min-width: 0; padding: 0; } #identity #customer-form .field-password-policy > .form-group.row > .form-control-comment:not(label) { grid-column: 2; width: auto; max-width: none; padding: 0; } #identity #customer-form .field-password-policy .input-group { width: 100%; min-width: 0; } @media (max-width: 767.98px) { #identity #customer-form .field-password-policy > .form-group.row { display: block; } #identity #customer-form .field-password-policy > .form-group.row > label, #identity #customer-form .field-password-policy > .form-group.row > .form-control-comment:not(label) { display: block; padding: 0; } } /* Keep the legal text clear of the fixed WhatsApp and privacy controls. */ #footer-copyrights .copyright-txt { min-width: 0; padding-inline-end: calc(100px + env(safe-area-inset-right, 0px)); } #footer-copyrights .copyright-txt p:first-child { white-space: normal; overflow-wrap: break-word; } /* CMS 9 only: remove the obsolete product-list column, preserving catalogue data. */ body#cms.cms-id-9 .page-cms .elementor-element-xmn0tor, body#cms.cms-id-9 .page-cms .elementor-element-h7rx1zi { display: none !important; } body#cms.cms-id-9.lang-it .page-cms .elementor-element-if5p5ee, body#cms.cms-id-9.lang-en .page-cms .elementor-element-zpflq8u { width: 100% !important; flex-basis: 100%; max-width: 100%; } @media (max-width: 767.98px) { #footer-copyrights .copyright-img, #footer-copyrights .copyright-txt { padding-inline-end: calc(88px + env(safe-area-inset-right, 0px)); } } /* Family farm: two editorial continuation links, CMS9 only. */ body#cms:is(.cms-id-9,.cms-id-10,.cms-id-11) .mm-farm-next { display:flex; flex-wrap:wrap; gap:24px 40px; padding-block:20px; border-top:1px solid #d7cdbb; } body#cms:is(.cms-id-9,.cms-id-10,.cms-id-11) .mm-farm-next a { color:#65523e; font-size:12px; font-weight:600; line-height:1.7; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-block:10px; } body#cms:is(.cms-id-9,.cms-id-10,.cms-id-11) .mm-farm-next a:focus-visible { outline:2px solid currentColor; outline-offset:5px; } /* Transformation: top-aligned square crop; original photo preserved. */ body#cms.cms-id-11 .elementor-element-a0vryos .elementor-image img { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; object-position:50% 0%; border-radius:28px 0 28px 0; } /* Colour-only presentation on original labelled photos: no regenerated lettering. */ body#cms.cms-id-11 img[src*="transform-cc819409-20260927.webp"] { filter:saturate(1.08) contrast(1.025) brightness(1.02); } body#cms.cms-id-11 img[src*="transform-6f89b4b3-20260927.webp"] { filter:saturate(1.08) contrast(1.035); } /* Shop invitation and compact short-supply-chain panel, 27 September 2026. */ body#index .elementor-element-06mom09 { padding-block:56px !important; } body#index .elementor-element-06mom09 > .elementor-container { max-width:800px; } body#index .elementor-element-06mom09 .elementor-column-wrap { padding:36px 42px !important; } body#index .elementor-element-06mom09 .elementor-widget-heading .elementor-heading-title { font-size:38px !important; line-height:1.15; } body#index .elementor-element-fdplacd .rte-content, body#index .elementor-element-fdplacd .rte-content p { font-size:15px !important; line-height:1.65 !important; } body#index .elementor-element-06mom09 .elementor-element-wejo4x9 { margin-top:20px !important; } @media(max-width:767px) { body#index .elementor-element-szg2sh7 { padding-bottom:32px !important; } body#index .elementor-element-szg2sh7 .elementor-element-kdd440f { order:1; } body#index .elementor-element-szg2sh7 .elementor-element-2xzna87 { order:2; } body#index .elementor-element-06mom09 { background-image:url('/shop/img/cms/mm-campo-cicoria.jpg') !important; background-attachment:scroll !important; background-position:center center !important; background-size:cover !important; padding:40px 20px !important; } body#index .elementor-element-06mom09 .elementor-column-wrap { padding:25px 22px !important; background-color:rgba(255,253,247,.82) !important; } body#index .elementor-element-06mom09 .elementor-widget-heading .elementor-heading-title { font-size:30px !important; } body#index .elementor-element-fdplacd .rte-content, body#index .elementor-element-fdplacd .rte-content p { font-size:14px !important; line-height:1.65 !important; } } /* Shop mobile: explicit order works with a forward column, not the legacy reverse. */ @media(max-width:767px) { body#index .elementor-element-szg2sh7 > .elementor-container > .elementor-row { flex-direction:column; } } /* Shop 27/9: eight category entrances, compact introduction and in-person invitation. */ body#index .elementor-element-rinluyu .elementor-heading-title { font-size:18px !important; line-height:1.4 !important; letter-spacing:.025em !important; text-transform:none !important; } body#index .elementor-element-w51w15y .rte-content,body#index .elementor-element-w51w15y p { font-size:15px !important; line-height:1.7 !important; } body#index .mm-category-collection { padding:60px 0 70px; } body#index .mm-category-collection > h2 { margin:0 0 38px; text-align:center; font:400 clamp(30px,3vw,44px)/1.2 var(--mm-serif); color:var(--mm-ink); } body#index .mm-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 26px; } body#index a.mm-category-card { display:block; text-decoration:none; color:var(--mm-ink); } body#index .mm-category-card__image { display:block; overflow:hidden; background:#f6f3e9; border-radius:42px 0 32px 0; aspect-ratio:1; } body#index .mm-category-card img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:14px; transition:transform .45s ease; } body#index .mm-category-card h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0 0; font:400 clamp(18px,1.7vw,23px)/1.25 var(--mm-serif); color:inherit; } body#index .mm-category-card h3 span { font:400 23px/1 var(--mm-sans); flex-shrink:0; } body#index .mm-category-card:hover img { transform:scale(1.035); } body#index .mm-category-card:focus-visible { outline:2px solid var(--mm-olive); outline-offset:7px; border-radius:2px; } body#index .mm-shop-visit { display:grid; grid-template-columns:1.25fr 1fr; gap:48px; padding:48px; margin:24px 0 52px; background:#f5f2e8; border-top:1px solid #d8ceba; } body#index .mm-shop-visit h2 { margin:0 0 16px; font:400 clamp(30px,3vw,42px)/1.2 var(--mm-serif); } body#index .mm-shop-visit p { max-width:520px; margin:0; font-size:16px; line-height:1.7; } body#index .mm-shop-visit h3 { margin:0 0 18px; font-size:18px; } body#index .mm-shop-visit dl { margin:0; font-size:15px; } body#index .mm-shop-visit dl > div { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:12px 0; border-top:1px solid #d8ceba; } body#index .mm-shop-visit dt { font-weight:600; } body#index .mm-shop-visit dd { margin:0; line-height:1.7; } /* Taller photographs with quiet controls on their own line below, never over the image. */ body#index .elementor-element-u07z3ss .swiper-slide img { width:100%; height:clamp(620px,80vh,860px) !important; object-fit:cover; object-position:50% 55%; } body#index .elementor-element-u07z3ss .mm-hero-controls { position:static; width:max-content; max-width:100%; margin:16px auto 0; padding:0 7px; border:0; background:transparent; box-shadow:none; } body#index .elementor-element-u07z3ss img[src*="shop-slide-"] { filter:saturate(1.10) contrast(1.025) brightness(1.035); } body#index .elementor-element-u07z3ss img[src*="shop-slide-3-"] { filter:saturate(1.07) contrast(1.02) brightness(1.02); } body#index .elementor-element-u07z3ss img[src*="shop-slide-6-"] { object-position:50% 65%; } body#index .elementor-element-u07z3ss img[src*="shop-slide-8-"] { filter:saturate(1.04) brightness(1.025); } @media(max-width:991px) { body#index .mm-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px) { body#index .elementor-element-rinluyu .elementor-heading-title { font-size:16px !important; } body#index .elementor-element-w51w15y .rte-content,body#index .elementor-element-w51w15y p { font-size:14px !important; } body#index .mm-category-collection { padding:35px 6px 45px; } body#index .mm-category-collection > h2 { margin-bottom:26px; } body#index .mm-category-grid { gap:26px 16px; } body#index .mm-category-card__image { border-radius:28px 0 22px 0; } body#index .mm-category-card img { padding:8px; } body#index .mm-category-card h3 { font-size:18px; } body#index .mm-category-card h3 span { display:none; } body#index .mm-shop-visit { grid-template-columns:1fr; gap:26px; padding:30px 23px; margin:10px 0 30px; } body#index .mm-shop-visit p { font-size:15px; } body#index .elementor-element-u07z3ss .swiper-slide img { height:clamp(440px,64svh,620px) !important; object-fit:cover; } } @media(prefers-reduced-motion:reduce) { body#index .mm-category-card img { transition:none; } } /* Shop editorial sequence: entrance, story, landscape slider, categories, reassurance, km0, hours, evening. */ body#index .elementor-element-mmentry927, body#index .elementor-element-mmnight927 { padding:0 !important; } body#index .elementor-element-mmentry927 .elementor-column-wrap, body#index .elementor-element-mmnight927 .elementor-column-wrap { padding:0 !important; } body#index .elementor-element-mmentry927 img { display:block; width:100%; max-height:680px; height:52vw; object-fit:cover; object-position:50% 47%; border-radius:0 !important; } body#index .elementor-element-szg2sh7 { padding:48px 20px 54px !important; } body#index .elementor-element-szg2sh7 > .elementor-container { max-width:940px; } body#index .elementor-element-kdd440f { width:100% !important; } body#index .elementor-element-kdd440f > .elementor-column-wrap { padding:0 !important; } body#index .elementor-element-l6jbgy2 { margin-top:0 !important; margin-bottom:0 !important; } body#index .elementor-element-tcowobx > .elementor-column-wrap { margin:0 !important; } body#index .elementor-element-u07z3ss .swiper-slide img, body#index .elementor-element-u07z3ss .swiper-slide-inner img { width:100%; height:auto !important; aspect-ratio:21 / 9; object-fit:cover; } body#index .elementor-element-6v737so { padding:0 16px 54px !important; } body#index .elementor-element-rtzouxl { width:100% !important; } body#index .elementor-element-rtzouxl > .elementor-column-wrap { padding:0 !important; margin:0 !important; } body#index .elementor-element-mmnight927 img { display:block; width:100%; height:auto; max-height:680px; object-fit:cover; border-radius:0 !important; } @media(max-width:767px) { body#index .elementor-element-mmentry927 img { height:auto; max-height:none; object-fit:contain; } body#index .elementor-element-szg2sh7 { padding:32px 22px 38px !important; } body#index .elementor-element-u07z3ss .swiper-slide img, body#index .elementor-element-u07z3ss .swiper-slide-inner img { height:auto !important; aspect-ratio:16 / 9; } body#index .elementor-element-6v737so { padding:0 12px 36px !important; } }