/** Shopify CDN: Minification failed Line 1215:0 All "@import" rules must come first **/ /* Cache-bust: 202605131740 */ /* ============================================================================ VDB Editorial Layer — v5 (2026-04-27) Targets the ACTUAL header icons in the .header__top of the preview theme. v4 was wrong: it hid the header buttons and styled the Debora chat pills instead (which are the floating support widget at bottom of page). This rewrite undoes that and styles the real header. ============================================================================ */ :root { --vdb-ed-wine: #9a000b; --vdb-ed-wine-deep: #7a0009; --vdb-ed-ink-strong: #000000; --vdb-ed-cream: #faf7f2; --vdb-ed-line: #e1e1e1; } /* ============================================================================ v4 ROLLBACKS — restore what v4 broke ============================================================================ */ /* a) UN-hide legacy header icon buttons (they ARE the real header icons) */ .site-header .header-actions a.button.button--solid.button--icon[href*="/cart"], .site-header .header-actions a.button.button--outline.button--icon[href*="/account"], .site-header .header-actions a.button--solid.button--icon, .site-header .header-actions a.button--outline.button--icon { display: inline-flex !important; } /* b) Debora floating pills — square corners (was border-radius: 99px, fully rounded pills). Match the squared chat widget. */ .debora-floating-pills-row a.debora-floating-pill-h, a.debora-floating-pill-h { border-radius: 8px !important; } .debora-floating-pills-row a.debora-floating-pill-h .pill-icon-wrap, a.debora-floating-pill-h .pill-icon-wrap { border-radius: 6px !important; } /* ============================================================================ 1. CENTER THE SEARCH BAR in the top row of the desktop header ---------------------------------------------------------------------------- v5 used absolute positioning + transform — that BROKE the search overlay (transformed ancestor traps fixed-position descendants, so the overlay covered only half the page when search was focused). v6: pure flex layout. Search is centered within .header-actions via `margin: 0 auto`. No transform, no absolute, overlay works again. ============================================================================ */ @media screen and (min-width: 1024px) { /* Make .header__top a normal flex row */ .site-header .header__top { display: flex !important; align-items: center !important; gap: 24px !important; position: static !important; } /* Logo: natural size on the left */ .site-header .header__top > .logo { flex: 0 0 auto !important; } /* Header-actions: takes the remaining space */ .site-header .header__top .header-actions { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; position: static !important; } /* search-form: layout geometry. z-index: auto so it does NOT create a stacking context — the overlay inside participates in header__top's context where the handle (200000001) beats the overlay (199999999). */ .site-header .header__top search-form, .site-header .header-actions search-form { position: relative !important; transform: none !important; left: auto !important; top: auto !important; margin: 0 auto !important; width: 420px !important; max-width: 38vw !important; height: 42px !important; flex: 0 0 420px !important; z-index: auto !important; } /* Handle (the visible input bar): ABOVE the overlay (199999999) */ .site-header .header__top .site-search-handle, .site-header .header-actions .site-search-handle { position: relative !important; height: 42px !important; z-index: 200000001 !important; /* Premium editorial look */ display: flex !important; align-items: center !important; background: #fff !important; border: 1.5px solid #D4CCBF !important; border-radius: 0 !important; padding: 0 !important; width: 100% !important; cursor: text !important; transition: border-color 0.15s ease !important; } .site-header .header__top .site-search-handle:hover, .site-header .header-actions .site-search-handle:hover { border-color: #1A1A1A !important; } /* Search icon — left-inset, non-interactive */ .site-header .header__top .site-search-handle .button__icon, .site-header .header-actions .site-search-handle .button__icon { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; pointer-events: none !important; z-index: 2 !important; color: #888 !important; } /* Input inside the handle */ .site-header .header__top .site-search-handle input, .site-header .header-actions .site-search-handle input { display: block !important; width: 100% !important; height: 100% !important; background: transparent !important; border: none !important; outline: none !important; font-family: Inter, -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #1A1A1A !important; padding: 0 16px 0 44px !important; margin: 0 !important; caret-color: #9a000b !important; } .site-header .header__top .site-search-handle input::placeholder, .site-header .header-actions .site-search-handle input::placeholder { color: #A89F96 !important; font-size: 13px !important; font-style: italic !important; font-weight: 400 !important; opacity: 1 !important; } .site-header .header__top .site-search-handle input:focus, .site-header .header-actions .site-search-handle input:focus { box-shadow: none !important; } .site-header .header__top .site-search-handle:focus-within, .site-header .header-actions .site-search-handle:focus-within { border-color: #9a000b !important; box-shadow: 0 0 0 2px rgba(154,0,11,0.12) !important; } } /* ============================================================================ 2. Real header icons: account + cart — clean, square, icon centered These target ONLY buttons inside .site-header .header-actions ============================================================================ */ @media screen and (min-width: 1024px) { /* shared base */ .site-header .header-actions a.button--icon, .site-header .header-actions a.button.button--solid.button--icon, .site-header .header-actions a.button.button--outline.button--icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; /* kill the 0 20 0 53 mess */ border-radius: 999px !important; font-size: 0 !important; line-height: 1 !important; position: relative !important; overflow: visible !important; box-shadow: none !important; text-decoration: none !important; } /* Icon inside the button — center, not absolute, no negative margin */ .site-header .header-actions a.button--icon .button__icon, .site-header .header-actions a.button--icon svg, .site-header .header-actions a.button.button--solid.button--icon .button__icon, .site-header .header-actions a.button.button--outline.button--icon .button__icon { position: static !important; transform: none !important; margin: 0 !important; width: 20px !important; height: 20px !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; } .site-header .header-actions a.button--icon svg { width: 20px !important; height: 20px !important; margin: 0 !important; stroke-width: 1.7 !important; } /* Cart button (solid wine) */ .site-header .header-actions a.button.button--solid.button--icon[href*="/cart"], .site-header .header-actions a.button--solid.button--icon[href*="/cart"] { background: var(--vdb-ed-wine) !important; border: 1px solid var(--vdb-ed-wine) !important; color: #fff !important; } .site-header .header-actions a.button.button--solid.button--icon[href*="/cart"]:hover { background: var(--vdb-ed-wine-deep) !important; border-color: var(--vdb-ed-wine-deep) !important; } /* Account button (outline ink) */ .site-header .header-actions a.button.button--outline.button--icon[href*="/account"], .site-header .header-actions a.button--outline.button--icon[href*="/account"] { background: transparent !important; border: 1px solid var(--vdb-ed-ink-strong) !important; color: var(--vdb-ed-ink-strong) !important; } .site-header .header-actions a.button.button--outline.button--icon[href*="/account"]:hover { background: var(--vdb-ed-ink-strong) !important; color: #fff !important; } /* Cart count badge — small floating chip, not an oversized circle */ .site-header .header-actions [data-header-cart-count], .site-header .header-actions .cart-count, .site-header .header-actions a.button--solid [data-header-cart-count], .site-header .header-actions a.button.button--solid.button--icon [data-header-cart-count] { position: absolute !important; top: -6px !important; right: -6px !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; background: #fff !important; color: var(--vdb-ed-wine) !important; border: 1.5px solid var(--vdb-ed-wine) !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================================ Fix multi-line hover underline: box-decoration-break: clone makes every wrapped line get its own background sweep instead of just the widest line ============================================================================ */ .text-animation--underline, .text-animation--underline-thin { -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ============================================================================ 3. Announcement bar: KILL the underline on "Prepara le tue feste!" link AGGRESSIVELY — multiple selector patterns + neutralize text-animation classes ============================================================================ */ .announcement-bar a, .announcement-bar .announcement a, .announcement-bar__inner a, .announcement-bar__content a, .announcement-bar__slider a, .announcement-bar__slider .announcement a, .announcement-bar__message a, .announcement-bar p a, .announcement-bar span a, .announcement-bar [class*="announcement"] a, announcement-bar a { text-decoration: none !important; border-bottom: 0 !important; background: transparent !important; background-image: none !important; background-size: 0 0 !important; box-shadow: none !important; padding-bottom: 0 !important; } .announcement-bar a:hover, .announcement-bar .announcement a:hover, announcement-bar a:hover { text-decoration: none !important; opacity: 0.85 !important; } /* Kill the theme's text-animation--underline on links inside announcement */ .announcement-bar a *, .announcement-bar a .text-animation, .announcement-bar a [class*="text-animation"], .announcement-bar .text-animation, .announcement-bar [class*="text-animation"] { background-image: none !important; background-size: 0 0 !important; text-decoration: none !important; border-bottom: 0 !important; padding-bottom: 0 !important; } .announcement-bar mark, .announcement-bar .announcement-bar__highlight, .announcement-bar .text-highlight { background: transparent !important; color: inherit !important; padding: 0 !important; border: 0 !important; } /* Top-bar text legibility on multi-color backgrounds */ .announcement-bar, .announcement-bar__inner { color: #fff !important; } .announcement-bar a, .announcement-bar p, .announcement-bar span:not([class*="price"]) { color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,0.18); } /* ============================================================================ 4. Dropdown menus: lift them ABOVE everything including the announcement bar ============================================================================ */ /* Lower the announcement bar's z-index so dropdowns float over it */ .announcement-bar, .shopify-section .announcement-bar, announcement-bar, .mount-announcement-bar { z-index: 1 !important; position: relative !important; } /* Force visible overflow on every header container */ .site-header, .site-header .header__top, .site-header .header__bottom, .site-header .header-container, .site-header .header-container--bottom, .site-header .site-nav, .site-header .site-nav .link-list, .site-header .site-nav .has-submenu, .site-header .header-links, header-group, .shopify-section-header, .shopify-section-header-group, .shopify-section-group-header-group { overflow: visible !important; } /* Header stays above the search overlay (overlay = 199999999). The overlay lives INSIDE the header's stacking context, so every header row needs its own z-index above 199999999. */ .site-header, .site-header.shopify-section-header-sticky, .site-header[data-sticky="true"], .shopify-section-header, .shopify-section-group-header-group { z-index: 200000001 !important; position: relative !important; } /* header__top (search bar row) must paint ABOVE header__bottom (nav row). Both rows had z-index:200000000 and equal DOM depth; header__bottom appeared later so it was covering the search dropdown. Give the top row a higher value. Use compound class selectors to target only the top row's outer container. */ .site-header .header-container.header-container--top, .site-header .header__top { position: relative !important; z-index: 200000002 !important; } .site-header .header-container.header-container--bottom, .site-header .header-container--bottom, .site-header .header__bottom { position: relative !important; z-index: 200000000 !important; } /* Submenus float WAY above */ .site-header .site-nav .submenu, .site-header .site-nav .submenu.normal-menu, .site-header .site-nav .submenu.mega-menu, .site-header .site-nav .has-submenu .submenu, .site-header .site-nav .submenu .submenu-holder, .header__bottom .site-nav .submenu, .header__bottom .site-nav .submenu.normal-menu { z-index: 99999 !important; position: absolute !important; } /* Inside sticky header, submenu wins over everything */ .site-header.shopify-section-header-sticky .site-nav .submenu, .site-header[data-sticky="true"] .site-nav .submenu, .shopify-section-header-sticky .site-nav .submenu { z-index: 999999 !important; } /* Push main content stack BELOW header */ .shopify-section-group-main-group, .main-content, #main, main { position: relative !important; z-index: 1 !important; } /* ============================================================================ 5. PRODUCT BADGES — colored character pills (wine-character system) ---------------------------------------------------------------------------- Badges are colored by CHARACTERISTIC. The mapping is done by vdb-editorial.js which reads the badge text and adds a `.vdb-bd--{family}` class. Color families: potente = red (POTENTE / INTENSO / CORPOSO / STRUTTURATO) compl = amber/gold (COMPLESSO / AFFINATO / FRAGRANTE / RISERVA) fresco = teal (FRESCO / MINERALE / LEGGERO / CRISPY) fruttato = orange (FRUTTATO / FRUTTI ROSSI) elegante = purple (ELEGANTE / RICERCATO / PREGIATO / SIGNORILE) dolce = pink (DOLCE / RAFFINATO / DESSERT) sost = green (SOSTENIBILE / BIO / VEGAN / NATURAL) aromatico = violet (AROMATICO / FLOREALE / SPEZIATO) ============================================================================ */ /* Base badge style (size, shape, typography) — applies to ALL surfaces */ .product-item__badge, .product-item__badge.clickable-badge, .product-item__badge--left-only, [class*="debora-recently"] [class*="badge"]:not([class*="--sale"]), [class*="debora-upsell"] [class*="badge"]:not([class*="--sale"]), [class*="debora-recommended"] [class*="badge"]:not([class*="--sale"]), [data-debora-component] [class*="badge"]:not([class*="--sale"]), .upsell-cart [class*="badge"]:not([class*="--sale"]) { border-radius: 4px !important; font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 4px 10px !important; line-height: 1.3 !important; white-space: nowrap !important; box-shadow: none !important; text-decoration: none !important; } /* Mobile: scale down badges inside debora-upsell cards — compact upsell grid */ @media (max-width: 1023px) { [class*="debora-upsell"] [class*="badge"]:not([class*="--sale"]), [class*="debora-upsell"] .debora-badges [class*="badge"] { font-size: 9px !important; padding: 2px 6px !important; letter-spacing: 0.04em !important; } } /* Default fallback (badges without an inferred family) — neutral cream */ .product-item__badge:not([class*="vdb-bd--"]):not([class*="--sale"]):not([class*="--sold"]):not([class*="--soldout"]) { background: var(--vdb-ed-cream) !important; color: var(--vdb-ed-ink-strong) !important; border: 1px solid var(--vdb-ed-line) !important; } /* === Color families — applied by vdb-editorial.js based on badge text === v9: SOLID, vibrant fills with WHITE text. Catchy & editorial. Each family gets a deep, recognizable color + a soft drop shadow so they pop on any product image. */ .product-item__badge.vdb-bd--potente, span.vdb-bd--potente, .vdb-bd--potente { background: #9a000b !important; color: #fff !important; border: 1px solid #9a000b !important; } .product-item__badge.vdb-bd--compl, span.vdb-bd--compl, .vdb-bd--compl { background: #b88c38 !important; color: #fff !important; border: 1px solid #b88c38 !important; } .product-item__badge.vdb-bd--fresco, span.vdb-bd--fresco, .vdb-bd--fresco { /* Brighter, more cheerful sky/teal — was muted #167080 */ background: #1ba8c4 !important; color: #fff !important; border: 1px solid #1ba8c4 !important; } .product-item__badge.vdb-bd--fruttato, span.vdb-bd--fruttato, .vdb-bd--fruttato { background: #c75d18 !important; color: #fff !important; border: 1px solid #c75d18 !important; } .product-item__badge.vdb-bd--elegante, span.vdb-bd--elegante, .vdb-bd--elegante { background: #6d3e8f !important; color: #fff !important; border: 1px solid #6d3e8f !important; } .product-item__badge.vdb-bd--dolce, span.vdb-bd--dolce, .vdb-bd--dolce { background: #c43d76 !important; color: #fff !important; border: 1px solid #c43d76 !important; } .product-item__badge.vdb-bd--sost, span.vdb-bd--sost, .vdb-bd--sost { background: #2b5600 !important; color: #fff !important; border: 1px solid #2b5600 !important; } .product-item__badge.vdb-bd--aromatico, span.vdb-bd--aromatico, .vdb-bd--aromatico { background: #5b3aa8 !important; color: #fff !important; border: 1px solid #5b3aa8 !important; } /* Hover: subtle scale + shadow lift (color stays as the family's solid fill) */ .vdb-bd--potente:hover, .vdb-bd--compl:hover, .vdb-bd--fresco:hover, .vdb-bd--fruttato:hover, .vdb-bd--elegante:hover, .vdb-bd--dolce:hover, .vdb-bd--sost:hover, .vdb-bd--aromatico:hover { transform: translateY(-1px) !important; filter: brightness(1.08) !important; } /* === Sale and Sold-out badges — special, NOT color-mapped === */ .product-item__badge--sale, .product-item__badges .product-item__badge--sale, .product-badges__badge--sale, .product-card .product-item__badge--sale, .main-product .product-gallery-item .product-item__badge--sale { background: var(--vdb-ed-wine) !important; color: #fff !important; border: 1px solid var(--vdb-ed-wine) !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; } /* === Detached SOSTENIBILE / BIOLOGICO / BIO badges → TOP-RIGHT === */ /* JS moves any .vdb-bd--sost out of .product-item__badges into .card__image and adds .vdb-bd--sost-detached. Solid green, white text, top-right. */ .vdb-bd--sost-detached { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; margin: 0 !important; z-index: 6 !important; background: #2b5600 !important; color: #fff !important; border: 1px solid #2b5600 !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 4px 10px !important; line-height: 1.3 !important; white-space: nowrap !important; box-shadow: 0 2px 6px rgba(43,86,0,0.30) !important; } @media (max-width: 640px) { .vdb-bd--sost-detached { top: 6px !important; right: 6px !important; font-size: 9.5px !important; padding: 3px 7px !important; } } /* === Detached sale badge: pinned to BOTTOM-RIGHT of card image === */ /* The JS moves .product-item__badge--sale OUT of .product-item__badges into the .card__image / .product-item__image wrapper, then adds .vdb-bd--sale-detached. We style it as a wine-red circle in the bottom-right corner. */ .vdb-bd--sale-detached { position: absolute !important; bottom: 10px !important; right: 10px !important; top: auto !important; left: auto !important; margin: 0 !important; width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 50% !important; background: var(--vdb-ed-wine) !important; color: #fff !important; border: 1px solid var(--vdb-ed-wine) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; padding: 0 !important; line-height: 1 !important; text-transform: none !important; box-shadow: 0 2px 8px rgba(154,0,11,0.25) !important; z-index: 6 !important; white-space: nowrap !important; } @media (max-width: 640px) { .vdb-bd--sale-detached { width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 11px !important; bottom: 6px !important; right: 6px !important; } } /* === ESAURITO / Sold-out badge — must always be on TOP of the stack === */ .product-item__badge--sold, .product-item__badge--sold-out, .product-item__badge--soldout, .badge--sold, .badge--sold-out, [class*="sold-out"].product-item__badge, [class*="esaurito"] { background: var(--vdb-ed-ink-strong) !important; color: #fff !important; border: 1px solid var(--vdb-ed-ink-strong) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; /* push above the other character/sale badges via flex order */ order: -10 !important; /* and as a safety net, position-stick it to the top-left of the badges container */ align-self: flex-start !important; } /* Badges container: pin to top-left of card, flex column so `order: -10` stacks ESAURITO on top, sale stays below it. Constrained width so badges don't overflow horizontally past the card edge. */ .product-item .product-item__badges, .product-card .product-item__badges, .card .product-item__badges, .product-item__image-wrapper .product-item__badges, [class*="product-item"] .product-item__badges { position: absolute !important; top: 10px !important; left: 10px !important; right: 10px !important; /* constrain so badges don't overflow */ bottom: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; z-index: 5 !important; max-width: calc(100% - 20px) !important; pointer-events: none; } .product-item__badges > * { pointer-events: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Hide empty badges — caused the broken red square in mega-menu dropdowns */ .product-item__badge:empty, .product-item__badge--sale:empty, .badge:empty, [class*="product-item__badge"]:empty { display: none !important; } /* Sale badge: when standalone (without other badges), make sure it stays pinned top-left, not floating in the middle of the card image */ .product-item .product-item__badge--sale, .product-card .product-item__badge--sale, [class*="product-item"] .product-item__badge--sale { margin: 0 !important; } /* ============================================================================ 6. DROPDOWN vs ANNOUNCEMENT — bury the banner under the dropdown ---------------------------------------------------------------------------- v6 lowered announcement-bar to z-index: 1, but the dropdown still showed the banner cutting through (the banner has its own stacking context with a higher implied z). Push it FURTHER down + isolate header stack. ============================================================================ */ .announcement-bar, announcement-bar, .shopify-section .announcement-bar, .shopify-section-group-header-group .announcement-bar, .mount-announcement-bar, .mount-announcement-bar .announcement-bar { z-index: 0 !important; position: relative !important; isolation: auto !important; } /* The Shopify section that wraps the announcement-bar must NOT create a higher stacking context than the dropdown */ #shopify-section-sections--28741786173775__announcement_bar_rYE9hA, [id*="announcement_bar"] { z-index: 0 !important; position: relative !important; } /* Header container (which contains the nav + dropdowns) gets a stacking context HIGHER than the announcement, so dropdowns from it always win */ .shopify-section-header, .shopify-section-group-header-group > div:has(.site-header), header[role="banner"], .site-header { z-index: 500 !important; position: relative !important; } /* Re-affirm dropdown z-index higher than everything in case other CSS tries to set it lower */ .has-submenu .submenu, .site-nav .submenu, .site-nav .submenu.normal-menu, .site-nav .submenu.mega-menu, .header__bottom .submenu { z-index: 999999 !important; } /* ============================================================================ 7. DROPDOWN — nuclear option: force dropdown into its own top-layer stack ---------------------------------------------------------------------------- Even with high z-index, if the dropdown's ANCESTOR Shopify section has a lower z-index than the announcement section, it loses the stacking war. Solution: force `isolation: isolate` on the header section to create a stacking context, AND give the section itself an extreme z-index so its descendants always win. ============================================================================ */ /* The Shopify section wrapping the header gets the highest stacking */ .shopify-section-group-header-group { position: relative !important; z-index: 200000001 !important; isolation: auto !important; } .shopify-section-group-header-group > .shopify-section:not([id*="announcement"]) { position: relative !important; z-index: 200000001 !important; } /* Demote the announcement section to bottom */ .shopify-section-group-header-group > .shopify-section[id*="announcement"], .shopify-section[id*="announcement_bar"] { position: relative !important; z-index: 0 !important; isolation: isolate !important; } /* Section containing the actual header (with logo, nav, etc.) */ .shopify-section-header, .shopify-section[id*="header"]:not([id*="announcement"]):not([id*="footer"]) { position: relative !important; z-index: 200000001 !important; isolation: auto !important; } /* The actual
element */ .site-header { position: relative !important; z-index: 200000001 !important; } /* search-results-overlay z-index is set in vdb-brand-overrides.css (199999999). Do NOT set it here — the old 99999999 value was lower than the handle (200000001) so it worked, but 199999999 is the canonical value and is set in brand-overrides. */ /* As ultra-safety net, force the dropdown to position: fixed with computed top so it floats above absolutely everything. Trade-off: dropdown won't scroll with the page. Acceptable for short-lived hover state. */ .site-header .has-submenu:hover .submenu.normal-menu, .site-header .has-submenu.focus .submenu.normal-menu, .has-submenu:hover > .submenu, .has-submenu.focus > .submenu { z-index: 9999999 !important; } /* Ensure the parent has overflow: visible all the way up the tree */ body, html, main, #main, .main-content, .shopify-section, .shopify-section > div, .shopify-section-header, .shopify-section-group-header-group { overflow: visible !important; } /* Note: overflow: visible on body is normal, but Shopify sections are sometimes wrapped in containers that clip — this guarantees they don't */ /* ============================================================================ 8. DROPDOWN BACKGROUND — force white opaque bg (was rendering transparent) ---------------------------------------------------------------------------- v7's isolation/z-index gymnastics somehow let the submenu render with `background: rgba(0,0,0,0)` (transparent), so the menu items showed over whatever was behind them. Force the bg + border + shadow. ============================================================================ */ .site-nav .submenu, .site-nav .submenu.normal-menu, .site-nav .submenu.mega-menu, .has-submenu > .submenu, .has-submenu .submenu, .has-submenu .submenu.normal-menu, .has-submenu .submenu.mega-menu, .header__bottom .site-nav .submenu, .header__bottom .site-nav .submenu.normal-menu, .site-header .site-nav .submenu, .site-header .site-nav .submenu.normal-menu { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #E8E2D9 !important; border-radius: 8px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08) !important; padding: 8px 0 !important; min-width: 220px !important; } /* ul.submenu.normal-menu is a transparent 0-height shell — the visually styled box lives in .submenu-holder (position:absolute). Override the bg/border/padding set above so the ul ghost collapses to 0×0 in DevTools. */ .header__bottom .site-nav .submenu.normal-menu { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; } /* Inner submenu-holder (where the links live) */ .site-nav .submenu-holder, .site-nav .submenu .submenu-holder { background: #ffffff !important; background-color: #ffffff !important; } /* End of v8 (dropdown bg) */ /* ============================================================================ 9. STICKY HEADER COMPACT LAYOUT (desktop only) ---------------------------------------------------------------------------- When user scrolls past ~80 px, JS adds `.vdb-scrolled` to . The sticky header collapses into a SINGLE ROW: hamburger on far left, search in center, account/cart on right. Announcement bar hidden, bottom nav row hidden. Restored when user scrolls back up. ============================================================================ */ @media (min-width: 1024px) { /* Hide announcement-bar in sticky mode */ body.vdb-scrolled .announcement-bar, body.vdb-scrolled .mount-announcement-bar, body.vdb-scrolled [id*="announcement_bar"] { display: none !important; } /* Hide the bottom nav row (the categories) in sticky mode */ body.vdb-scrolled .header-container--bottom, body.vdb-scrolled .header__bottom { display: none !important; } /* Top row: collapse, with the search bar centered */ body.vdb-scrolled .site-header { box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; transition: box-shadow 0.2s ease !important; } body.vdb-scrolled .site-header .header__top { height: 56px !important; padding-top: 4px !important; padding-bottom: 4px !important; transition: height 0.2s ease !important; } /* Show hamburger on the far left in sticky mode */ body.vdb-scrolled .site-header .mobile-menu-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: 1px solid var(--vdb-ed-ink-strong) !important; border-radius: 999px !important; background: transparent !important; color: var(--vdb-ed-ink-strong) !important; margin-right: 12px !important; flex: 0 0 40px !important; order: -1 !important; } body.vdb-scrolled .site-header .mobile-menu-button:hover { background: var(--vdb-ed-ink-strong) !important; color: #fff !important; } body.vdb-scrolled .site-header .mobile-menu-button svg, body.vdb-scrolled .site-header .mobile-menu-button .button__icon { width: 18px !important; height: 18px !important; margin: 0 !important; } /* Hide the logo in sticky mode (the menu pill replaces the brand anchor — Daniele explicitly asked for "as in mobile") */ body.vdb-scrolled .site-header .header__top > .logo { /* keep the logo but make it small + clickable */ transform: scale(0.85) !important; transform-origin: left center !important; transition: transform 0.2s ease !important; } body.vdb-scrolled .site-header .header__top > .logo img { max-height: 28px !important; } /* Search bar — keep centered (already from section 1), but tighter */ body.vdb-scrolled .site-header .header__top search-form, body.vdb-scrolled .site-header .header__top .site-search-handle, body.vdb-scrolled .site-header .header-actions search-form, body.vdb-scrolled .site-header .header-actions .site-search-handle { height: 36px !important; width: 340px !important; } body.vdb-scrolled .site-header .site-search-handle input { height: 34px !important; } /* Header icons: tighter spacing in sticky mode */ body.vdb-scrolled .site-header .header-actions a.button--icon, body.vdb-scrolled .site-header .header-actions a.button.button--solid.button--icon, body.vdb-scrolled .site-header .header-actions a.button.button--outline.button--icon { width: 36px !important; height: 36px !important; } } /* ============================================================================ 9b. MOBILE HEADER COMPACT Real height drivers: mobile-menu-button + mobile-cart-button (hardcoded 40px in section-header.css) + search input padding. Override those directly. ============================================================================ */ @media (max-width: 1023px) { /* Top row: zero padding, button height alone controls row height */ .site-header .header__top { padding-top: 0 !important; padding-bottom: 0 !important; } /* Shrink the 40px icon buttons → main height driver for the top row */ .site-header .mobile-menu-button, .site-header .mobile-cart-button { width: 34px !important; height: 34px !important; } /* Smaller logo to match tighter row */ .site-header .header__top .logo img, .site-header .header__top .logo-img img { max-height: 26px !important; } /* Bottom row: zero padding */ .site-header .header__bottom { padding-top: 0 !important; padding-bottom: 0 !important; } .site-header .header__bottom .site-search-handle input, .site-header .header__bottom search-form input { padding-top: 5px !important; padding-bottom: 5px !important; } } /* ============================================================================ 9c. DESKTOP NAV DROPDOWN — transparent hover bridge to close the gap ---------------------------------------------------------------------------- The theme's .submenu has padding-top: calc(var(--header-vertical-space)/2) which creates a visual dead zone between the nav trigger and the dropdown. A transparent ::after on the trigger extends the hover zone downward so the cursor can cross the gap without dismissing the dropdown. ============================================================================ */ @media (min-width: 1024px) { .header__bottom .site-nav .has-submenu { position: relative !important; } .header__bottom .site-nav .has-submenu::after { content: ''; position: absolute; bottom: -18px; left: -8px; right: -8px; height: 18px; background: transparent; z-index: 9999998; pointer-events: all; } } /* End of v9 (sticky header compact) */ /* ============================================================================ 10. GIFT BANNER — sandwich menu LEFT + search RIGHT ---------------------------------------------------------------------------- The "REGALO SBLOCCATO" / free-gift banner gets a hamburger menu pill on the FAR LEFT and a search pill on the FAR RIGHT. Center keeps the existing unlock-message and "IL VINO DEL GIORNO È..." button. JS injects .vdb-gift-menu-btn and .vdb-gift-search-btn into the banner. ============================================================================ */ #vdb-gift-banner-wrapper { display: flex !important; align-items: center !important; gap: 14px !important; padding: 0 16px !important; } #vdb-gift-banner-wrapper > .vdb-gift-banner__content, #vdb-gift-banner-wrapper > .vdb-gift-banner { flex: 1 1 auto !important; min-width: 0 !important; } /* Sandwich menu button on the left */ .vdb-gift-menu-btn { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(255,255,255,0.45) !important; background: rgba(255,255,255,0.10) !important; color: #fff !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .vdb-gift-menu-btn:hover { background: #fff !important; color: #1d1d1d !important; border-color: #fff !important; } .vdb-gift-menu-btn svg { width: 18px !important; height: 18px !important; } /* Search pill on the right — WHITE pill with dark text so it's readable on the dark gift-banner background */ .vdb-gift-search-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #ffffff !important; border: 1px solid #ffffff !important; color: #1d1d1d !important; padding: 8px 18px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; max-width: 320px !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; } .vdb-gift-search-btn:hover { background: #f6f4ef !important; color: var(--vdb-ed-wine) !important; border-color: #f6f4ef !important; } .vdb-gift-search-btn svg { color: #1d1d1d !important; stroke: currentColor !important; } .vdb-gift-search-btn span { color: #1d1d1d !important; } .vdb-gift-search-btn svg { flex: 0 0 16px !important; } .vdb-gift-search-btn span { text-overflow: ellipsis !important; overflow: hidden !important; } @media (max-width: 768px) { .vdb-gift-search-btn span { display: none !important; } .vdb-gift-search-btn { padding: 7px 10px !important; } } /* End of v10 (gift banner left/right) */ /* ============================================================================ 11. Drawer/menu overlay — kill the backdrop blur ---------------------------------------------------------------------------- When the side menu drawer opens (triggered by sandwich pill in gift banner OR mobile hamburger), the theme's .site-overlay applies backdrop-filter: blur(3px) to the page. Daniele finds this blur visually noisy. Replace with a clean dim overlay (no blur). ============================================================================ */ .site-overlay, .site-overlay.active, .site-overlay.is-active { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,0.42) !important; } /* End of v11 (overlay no-blur) */ /* ============================================================================ 12. Hide gift-banner sandwich + search until scrolled ---------------------------------------------------------------------------- At the top of the page, the regular header has its own search and nav, so the menu+search pills inside the gift banner are redundant. Show them only when body has .vdb-scrolled. ============================================================================ */ @media (min-width: 1024px) { .vdb-gift-menu-btn, .vdb-gift-search-btn { display: none !important; } body.vdb-scrolled .vdb-gift-menu-btn, body.vdb-scrolled .vdb-gift-search-btn { display: inline-flex !important; } } /* ============================================================================ 13. Side menu drawer: ensure it can receive clicks above .site-header ---------------------------------------------------------------------------- v7 raised .site-header z-index to 1000 which can intercept clicks meant for the drawer when the drawer is open. Make sure the sidebar/drawer wins. ============================================================================ */ .sidebar, .site-sidebar, .sidebar.is-open, .sidebar[aria-hidden="false"], [data-sidebar], [data-sidebar][aria-hidden="false"], .menu-drawer, .menu-drawer.is-open { z-index: 1500 !important; pointer-events: auto !important; } .site-overlay, .site-overlay.active, .site-overlay.is-active { z-index: 1400 !important; } /* When sidebar is open, push everything else (including header) below */ body.sidebar-open .site-header, body.menu-open .site-header, body[class*="sidebar-open"] .site-header, body[class*="menu-open"] .site-header, body.sidebar-active .site-header { z-index: 100 !important; } /* End of v12-13 (gift pills toggle + drawer z-index) */ /* ============================================================================ 14. Nav row — fade gradient on edges + smooth scroll to indicate overflow ---------------------------------------------------------------------------- The category nav has many items (Regioni, Champagne, Bollicine, Rossi, Bianchi, Rosati, Passiti, Olio, Liquori, Chi siamo, Promo, Formati, Idee Regalo, Contatti, Programma Porta, Enoteca Mondovì) and overflows the viewport, getting cut off on both sides. Add fade indicators on left/right edges so users see there's more, plus smooth scroll. ============================================================================ */ @media (min-width: 1024px) { .header__bottom, .header-container--bottom { position: relative !important; } /* Nav links list — overflow:visible so babymenu can extend beyond the container's right edge. Scroll arrows are hidden via display:none so clip is not needed. */ .header__bottom .header-links, .header-container--bottom .header-links { overflow: visible !important; scrollbar-width: none !important; } } /* End of v14 (nav fade + scroll) */ /* ============================================================================ 15. PRODUCT CARD TITLE — red italic, more visible ---------------------------------------------------------------------------- Daniele asked: make the wine title (e.g. "Barolo DOCG 2018 Magnum") more visible. Red wine color + italic + larger so it pops. Loads Playfair Display from Google Fonts for the editorial look. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap'); .product-item__title, .product-item__title h4, .product-item__title a, .product-item__title h4 a, .card .product-item__title, [class*="product-item__title"] { font-family: 'Playfair Display', 'Newsreader', Georgia, serif !important; font-style: italic !important; font-weight: 700 !important; color: var(--vdb-ed-wine) !important; font-size: 1.05rem !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .product-item__title a:hover, .product-item__title h4 a:hover { color: var(--vdb-ed-wine-deep) !important; text-decoration: none !important; } /* Slightly bigger on larger viewports */ @media (min-width: 1024px) { .product-item__title, .product-item__title h4, .product-item__title a { font-size: 1.15rem !important; } } /* End of v15 (title red italic Playfair) */ /* ============================================================================ 16. v16 — kill remaining empty-red squares + softer overlay ---------------------------------------------------------------------------- - Empty sale badges that remain at original position get hidden too - Empty detached sale badges (no discount text) hidden - Overlay made VERY subtle (was still appearing as a heavy dim) ============================================================================ */ /* Empty badges everywhere (especially inside search-results-container) */ .search-results-container .product-item__badge:empty, .search-results-container .product-item__badge--sale:empty, .search-results-container .product-item__badges:empty, .search-results-container [class*="badge"]:empty, .product-item__badge:empty, .product-item__badge--sale:empty, .product-item__badges:empty, .vdb-bd--sale-detached:empty { display: none !important; } /* Detached sale-badge with only whitespace */ .vdb-bd--sale-detached:not(:has(*:not(:empty))) { /* fallback for empty detached sale */ } /* Overlay: nearly invisible so the sandwich-menu open state doesn't visually muffle anything (Daniele kept seeing it as "blurred") */ .site-overlay, .site-overlay.active, .site-overlay.is-active { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,0.08) !important; } /* Search-results "view more / cerca di piu" button: ensure it has visible text. Some themes render an empty wine-red square for this link when only the icon is loaded — force the label to show. */ .search-results-container a:empty, .search-results-container button:empty, .search-results-container [class*="search-more"]:empty, .search-results-container [class*="view-all"]:empty { position: relative; min-width: 140px !important; padding: 10px 18px !important; border-radius: 999px !important; } .search-results-container a:empty::after, .search-results-container button:empty::after, .search-results-container [class*="search-more"]:empty::after, .search-results-container [class*="view-all"]:empty::after { content: 'CERCA DI PIÙ →'; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #fff; white-space: nowrap; } /* Better path: target the actual "view all"/"see more" link by common class names — make it a proper text link, not a tiny red square */ .search-results-container .search-form__submit, .search-results-container .search__submit, .search-results-container .search__view-all, .search-results-container .search-results__view-all, .search-results-container [class*="view-all"], .search-results-container a[href*="/search?q="] { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 22px !important; background: var(--vdb-ed-wine) !important; color: #fff !important; text-decoration: none !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; min-width: 140px !important; width: auto !important; height: auto !important; margin: 12px !important; } .search-results-container .search-form__submit:hover, .search-results-container .search__submit:hover, .search-results-container [class*="view-all"]:hover, .search-results-container a[href*="/search?q="]:hover { background: var(--vdb-ed-wine-deep) !important; } /* End of v16 */ /* ============================================================================ 17. v21 — Force sidebar visible when classes are right ---------------------------------------------------------------------------- The theme JS sets display: grid as INLINE STYLE when the real .mobile-menu-button is clicked. Adding only the .sidebar--opened class doesn't trigger that. This rule provides the missing CSS so the sidebar shows whenever both body and sidebar have the open classes. When classes are removed (close), the rule stops matching and the sidebar reverts to its default display:none. ============================================================================ */ body.sidebar-opened--left .sidebar.sidebar--left.sidebar--opened, body.sidebar-opened .sidebar.sidebar--left.sidebar--opened { display: grid !important; visibility: visible !important; transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; left: 0 !important; } /* End of v17 (sidebar force display) */ /* ============================================================================ 18. v22 — .search-more button (CERCA DI PIÙ) ---------------------------------------------------------------------------- Confirmed actual class: .search-more.button.button--solid.button--regular.button--fullwidth Force readable white-on-wine pill with the label text. ============================================================================ */ .search-more, button.search-more, a.search-more, .search-more.button, .search-more.button--solid, .search-more.button--regular, .search-more.button--fullwidth { background: var(--vdb-ed-wine) !important; background-color: var(--vdb-ed-wine) !important; color: #ffffff !important; border: 1px solid var(--vdb-ed-wine) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 12px 24px !important; border-radius: 4px !important; text-decoration: none !important; text-indent: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 180px !important; height: auto !important; line-height: 1 !important; } .search-more:hover, .search-more.button:hover { background: var(--vdb-ed-wine-deep) !important; border-color: var(--vdb-ed-wine-deep) !important; color: #ffffff !important; } /* If the button is rendered empty (no text), inject the label */ .search-more:empty::after, .search-more.button:empty::after { content: 'CERCA DI PIÙ →'; color: #ffffff !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* Force any descendant text/span to white + visible size — covers .button__text wrapper, empty , etc. */ .search-more *, .search-more .button__text, .search-more span, .search-more svg, .search-more::before, .search-more::after { color: #ffffff !important; fill: currentColor !important; } .search-more, .search-more.button { font-size: 13px !important; /* override any font-size: 0 */ } /* ============================================================================ 19. v22 — Drawer items: ensure clicks navigate ---------------------------------------------------------------------------- The theme may be auto-closing the drawer on link click before navigation completes. Make sure pointer-events are auto and links are routed normally. ============================================================================ */ .sidebar.sidebar--left .sidebar__content a[href], .sidebar.sidebar--left a[href]:not([href="#"]):not([href^="javascript"]), .sidebar.sidebar--left .menu-link[href] { pointer-events: auto !important; cursor: pointer !important; } /* End of v18-v19 (search-more + drawer) */ /* ============================================================================ 20. v27 — SEARCH MODAL RESTYLE (desktop + mobile) ---------------------------------------------------------------------------- Cleaner predictive-search panel: editorial spacing, sharper product rows, prominent "CERCA DI PIÙ" button, dim backdrop, mobile-friendly. ============================================================================ */ /* The container that holds all search results when typing */ .search-results-container:not(:empty) { background: #ffffff !important; border: 1px solid var(--vdb-ed-line) !important; border-radius: 8px !important; box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.08) !important; padding: 12px 14px 14px !important; overflow: hidden !important; max-width: 540px !important; } /* Section heads inside results: "Prodotti", "Categorie", "Articoli del blog" */ .search-results-container > h3, .search-results-container > .search-results__section-title, .search-results-container [class*="section-title"], .search-results-container [class*="results-title"] { font-family: 'Newsreader', Georgia, serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--vdb-ed-muted, #6b6b6b) !important; margin: 8px 0 6px !important; padding-bottom: 4px !important; border-bottom: 1px solid var(--vdb-ed-line) !important; } .search-results-container > h3:first-child { margin-top: 0 !important; } /* Kill all spacing between rows — no margins, no padding, no separators */ .search-results-container ul, .search-results-container ol, .search-results-container li, .search-results-container .search-results__inner, .search-results-container [class*="results-list"], .search-results-container [class*="results__list"] { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; } .search-results-container li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--vdb-ed-line) !important; } .search-results-container li:last-child { border-bottom: 0 !important; } /* Each product/result row — micro-compact, ZERO outer spacing */ .search-results-container [class*="result-item"], .search-results-container .predictive-search__result-item, .search-results-container [class*="result"] > a, .search-results-container .search-results__item, .search-results-container .search-results__inner > a, .search-results-container > * > a, .search-results-container li > a { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 4px !important; margin: 0 !important; border-bottom: 1px solid var(--vdb-ed-line) !important; transition: background 0.15s ease !important; text-decoration: none !important; color: var(--vdb-ed-ink, #1d1d1d) !important; min-height: 0 !important; height: 36px !important; max-height: 36px !important; overflow: hidden !important; } /* Last row drops the bottom border */ .search-results-container li:last-child > a, .search-results-container [class*="result-item"]:last-child, .search-results-container .search-results__item:last-child { border-bottom: 0 !important; } /* Zero-out everything inside the row */ .search-results-container [class*="result"] > a *, .search-results-container .search-results__item * { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.05 !important; } .search-results-container [class*="result"] .product-item__title, .search-results-container [class*="result"] h4 { line-height: 1.05 !important; font-size: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .search-results-container [class*="result"] .product-price { line-height: 1.05 !important; font-size: 13px !important; } .search-results-container [class*="result-item"]:last-child, .search-results-container .predictive-search__result-item:last-child, .search-results-container .search-results__item:last-child { border-bottom: 0 !important; } .search-results-container [class*="result-item"]:hover, .search-results-container [class*="result"] > a:hover { background: var(--vdb-ed-cream, #faf7f2) !important; } /* Product image inside result row — micro 26x32 */ .search-results-container .product-item__image img, .search-results-container .search-result__image img { width: 26px !important; height: 32px !important; object-fit: contain !important; border-radius: 2px !important; background: var(--vdb-ed-cream, #faf7f2) !important; margin: 0 !important; display: block !important; } .search-results-container .product-item__image, .search-results-container .search-result__image { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Title and price text size in search modal — slightly smaller */ .search-results-container [class*="result"] .product-item__title, .search-results-container [class*="result"] h4, .search-results-container [class*="result"] [class*="title"] { font-size: 14px !important; line-height: 1.15 !important; } .search-results-container [class*="result"] .product-price, .search-results-container [class*="result"] [class*="price"] { font-size: 15px !important; line-height: 1.15 !important; } /* Result title — bigger, BLACK (not red), italic Playfair */ .search-results-container [class*="result"] .product-item__title, .search-results-container [class*="result"] h4, .search-results-container [class*="result"] [class*="title"] { font-family: 'Playfair Display', 'Newsreader', Georgia, serif !important; font-size: 16px !important; line-height: 1.3 !important; font-style: italic !important; color: #1d1d1d !important; font-weight: 700 !important; margin: 0 !important; } /* Price — bigger, wine red italic */ .search-results-container [class*="result"] .product-price, .search-results-container [class*="result"] [class*="price"] { font-family: 'Playfair Display', 'Newsreader', Georgia, serif !important; font-style: italic !important; font-weight: 700 !important; color: var(--vdb-ed-wine) !important; font-size: 18px !important; } .search-results-container [class*="result"] [class*="price"][class*="compare"], .search-results-container [class*="result"] [class*="price--compare"] { text-decoration: line-through !important; color: var(--vdb-ed-muted, #6b6b6b) !important; font-size: 12px !important; font-style: normal !important; } /* HIDE the theme's broken .search-more button (empty wine rectangle) */ .search-results-container .search-more, .search-results-container button.search-more, .search-results-container a.search-more, .search-results-container .search-more.button { display: none !important; } /* OUR CLEAN CERCA DI PIÙ — full-width footer spanning both grid columns */ .search-results-container .vdb-cerca-piu { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; background: var(--vdb-ed-wine) !important; color: #ffffff !important; border: none !important; border-top: 2px solid var(--vdb-ed-wine) !important; font-family: Inter, -apple-system, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 13px 22px !important; border-radius: 0 !important; text-decoration: none !important; margin: 0 !important; cursor: pointer !important; transition: background 0.15s ease !important; box-sizing: border-box !important; } .search-results-container .vdb-cerca-piu:hover { background: var(--vdb-ed-wine-deep, #7a0009) !important; color: #ffffff !important; } /* Mobile tweaks */ @media (max-width: 768px) { .search-results-container { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important; padding: 14px !important; max-width: 100% !important; } .search-results-container [class*="result-item"], .search-results-container [class*="result"] > a { padding: 8px 4px !important; gap: 10px !important; } .search-results-container [class*="result"] img, .search-results-container .product-item__image img { width: 44px !important; height: 56px !important; } .search-results-container [class*="result"] .product-item__title, .search-results-container [class*="result"] h4 { font-size: 13px !important; } .search-more, .search-more.button { padding: 12px 22px !important; font-size: 12px !important; } } /* End of v20 (search modal restyle) */ /* ============================================================================ 21. v36 — NUCLEAR compact for search rows. Limit EVERY descendant. ---------------------------------------------------------------------------- Previous layers were partially defeated by theme div/li wrappers that weren't matching my selectors. Apply max-height + zero margins to EVERY descendant of .search-results-container that could be a row. ============================================================================ */ /* Cap ANY image inside search results to 28x36 */ .search-results-container img { max-width: 28px !important; max-height: 36px !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* Force every direct child + grandchild that wraps a row to 0 padding/margin */ .search-results-container > *, .search-results-container > * > *, .search-results-container ul, .search-results-container ul *, .search-results-container [class*="result"], .search-results-container [class*="item"], .search-results-container [class*="list"] > * { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Cap row height aggressively */ .search-results-container li, .search-results-container ul > div, .search-results-container [class*="result"]:not(.search-results-container), .search-results-container [class*="item"]:not(.search-results-container) { min-height: 0 !important; max-height: 38px !important; height: 38px !important; overflow: hidden !important; } /* And the link/anchor that wraps each row content */ .search-results-container li > a, .search-results-container [class*="result"] > a, .search-results-container [class*="item"] > a { height: 38px !important; max-height: 38px !important; min-height: 0 !important; overflow: hidden !important; } /* End of v36 (nuclear search compact) */ /* ============================================================================ 22. v37 — Reset overly-aggressive height caps + shrink images directly ---------------------------------------------------------------------------- v36 max-height: 38px was cutting off entire products. Back off the caps and instead just shrink the actual images so rows naturally compress. ============================================================================ */ /* Reset the height caps from v36 (kept margin/padding zeroing) */ .search-results-container li, .search-results-container ul > div, .search-results-container [class*="result"]:not(.search-results-container), .search-results-container [class*="item"]:not(.search-results-container), .search-results-container li > a, .search-results-container [class*="result"] > a, .search-results-container [class*="item"] > a { height: auto !important; max-height: none !important; overflow: visible !important; } /* Add breathing room via the IMAGE — applies regardless of row markup */ .search-results-container img, predictive-search img, [class*="predictive-search"] img, [class*="search-results"] img { margin-top: 8px !important; margin-bottom: 8px !important; } /* Plus on any anchor that contains an image (catches all row markup variants) */ .search-results-container a { padding-top: 6px !important; padding-bottom: 6px !important; } /* Aggressively shrink every product image in any search-related container */ .search-results-container img, .search-results-container .product-item__image, .search-results-container .search-result__image, predictive-search img, [class*="predictive-search"] img, [class*="search-results"] img { width: 32px !important; max-width: 32px !important; height: 40px !important; max-height: 40px !important; object-fit: contain !important; background: var(--vdb-ed-cream, #faf7f2) !important; border-radius: 2px !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* Wrap the image cell tightly */ .search-results-container .product-item__image, .search-results-container .search-result__image, .search-results-container [class*="image"] { flex: 0 0 32px !important; width: 32px !important; max-width: 32px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; } /* End of v37 (image-shrink approach) */ /* ============================================================================ 23. v41 — Fixes from mobile audit ---------------------------------------------------------------------------- 1. PDP price overlap with vendor/region metadata 2. Mobile search bar click was no-op (pointer-events conflict) 3. -7% discount circle clipped on right edge of mobile cards 4. PDP cross-sell box card price/badge overlap ============================================================================ */ /* No PDP layout overrides — theme grid handles it */ /* (2) Mobile search bar: ensure clicks reach the input */ @media (max-width: 1023px) { .site-header .site-search-handle, .site-header .site-search-handle input, .site-header search-form, .site-header search-form input { pointer-events: auto !important; cursor: text !important; z-index: 5 !important; position: relative !important; } .site-header .site-search-handle .button__icon { pointer-events: none !important; } } /* (3) -7% discount circle — pull it slightly inward on mobile so it doesn't clip past the card right edge */ @media (max-width: 768px) { .vdb-bd--sale-detached { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 10.5px !important; bottom: 4px !important; right: 4px !important; } } /* (4) PDP cross-sell / "Box Degustazioni" cards: prevent badge overlap with price block */ .main-product .product-recommendations, .main-product .cart-recommendations, .main-product [class*="recommendations"] { padding: 0 12px !important; } .main-product [class*="recommendations"] .product-item .product-price, .main-product [class*="recommendations"] .product-item .product-price__compare { display: block !important; margin: 2px 0 !important; padding: 0 !important; white-space: nowrap !important; } /* End of v41 */ /* ============================================================================ 24. v42 — Blog post entries in search panel: consistent flat style ---------------------------------------------------------------------------- Some blog post results were rendering with wine-red bg + white text (looking like the CTA), others as plain text. Force them all to plain text rows with consistent styling. ============================================================================ */ .search-results-container [class*="article"], .search-results-container [class*="blog"], .search-results-container [class*="post"], .search-results-container .article-item, .search-results-container .blog-item { background: transparent !important; background-color: transparent !important; color: var(--vdb-ed-ink, #1d1d1d) !important; font-family: 'Newsreader', Georgia, serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 4px 0 !important; margin: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--vdb-ed-line, #e1e1e1) !important; text-decoration: none !important; display: block !important; line-height: 1.35 !important; } .search-results-container [class*="article"]:last-child, .search-results-container [class*="blog"]:last-child, .search-results-container [class*="post"]:last-child { border-bottom: 0 !important; } .search-results-container [class*="article"] *, .search-results-container [class*="blog"] *, .search-results-container [class*="post"] * { background: transparent !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } .search-results-container [class*="article"]:hover, .search-results-container [class*="blog"]:hover, .search-results-container [class*="post"]:hover { color: var(--vdb-ed-wine) !important; } /* Force the CERCA DI PIÙ button to square corners — extra-specificity in case anything overrides */ .search-results-container .vdb-cerca-piu, .search-results-container a.vdb-cerca-piu { border-radius: 0 !important; -webkit-border-radius: 0 !important; } /* End of v42 */ /* ============================================================================ 25. v44 — Mobile PDP price overlap. The REAL cause. ---------------------------------------------------------------------------- Live DOM inspection: the price block .vdb-price-avail-row__price is position: absolute inside a 28-px-tall .vdb-price-avail-row flex row. The price (39px tall, 87px wide) is absolutely positioned and extends ABOVE the row, overlapping the vendor/region metadata above it. Fix: force the price wrapper to position:relative so it stays in flex flow; let the row grow to fit; add proper align-items. ============================================================================ */ /* ============================================================================ PDP price/availability — SEPARATE mobile and desktop layouts ============================================================================ */ /* SHARED reset: kill the absolute positioning that causes overlap. The theme's Liquid