/* ==========================================================================
   Gorenje Italia - Custom CSS Overrides
   Loaded after gorenje_common_responsive.css to fix paths and add WP-specific styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font-face overrides: Fix paths from original Hybris structure to theme assets
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'gorenje-icons';
    src: url('../../fonts/gorenje-icons.eot');
    src: url('../../fonts/gorenje-icons.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/gorenje-icons.ttf') format('truetype'),
         url('../../fonts/gorenje-icons.woff') format('woff'),
         url('../../fonts/gorenje-icons.svg#gorenje-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../fonts/glyphicons-halflings-regular.eot');
    src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   WordPress-specific overrides
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Fixed main header — always visible, edge-to-edge of the viewport, never
   un-sticks. The vendor CSS already declares
       .header { position: fixed; top:0; left:0; width:100%; z-index:30;
                  background:#fff; border-bottom:1px solid #dde4e8 }
   so we don't override it; we only ensure it stays fixed even on the
   short-viewport media query (vendor falls back to position:absolute there,
   which would let the header scroll away).

   The <main> below is pushed down by the exact rendered header height via
   inline style (set by main.js). The CSS fallback below avoids the initial
   flash where content would be hidden behind the header before JS runs.
   -------------------------------------------------------------------------- */
@media screen and (max-height: 685px) {
    .header.mainNavigationHeader {
        position: fixed !important;
    }
}

/* Account for WP admin bar when logged in */
body.admin-bar .header.mainNavigationHeader {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .header.mainNavigationHeader {
        top: 46px;
    }
}

/* Initial padding-top approximating the header height (vendor sets
   .header__main .container { height: 89px }). Overridden by main.js with the
   exact rendered value as soon as DOM is ready, so this is just to prevent
   the initial flash where the first content row would sit under the fixed
   header.

   NOTE: no admin-bar offset added here. WP's `html { margin-top: 32px }`
   already pushes <body> (and <main>) down by the admin bar height, so
   from main's reference frame the header still occupies the top H pixels
   regardless of whether the admin bar is shown. */
main {
    padding-top: 90px;
}

/* --------------------------------------------------------------------------
   Megamenu hover card — fixed position, doesn't follow the hovered row.
   The vendor anchors `.general-menu__photo` to each `.general-menu__item`
   (its parent), so hovering the last item makes the card appear at the
   BOTTOM of the list and overflow the flyout. We move the anchor up to
   `.general-menu` (the UL) so every card lands in the SAME top-right slot,
   regardless of which row is hovered. Only the card belonging to the
   hovered row is shown (via the vendor `:hover > .general-menu__photo`
   display:block rule).

   The hover bridge is also anchored to the UL: an invisible rectangle on
   the right of the list covers the gap so the cursor can travel from any
   row up to the card area without losing the :hover state.
   -------------------------------------------------------------------------- */
.general-menu {
    position: relative;  /* containing block for the cards and the bridge */
}

.general-menu__item {
    position: static;    /* DO NOT make items positioned, otherwise cards
                            would re-anchor to each individual row again */
}

/* Pin every card to the top-right of the UL (subito a destra della lista).
   Override the vendor `left:0; margin-left:32.4rem` which referenced the
   item's box. z-index sits ABOVE the hover bridge so clicks on the CTA /
   image are not absorbed by the invisible rectangle. */
.general-menu .general-menu__photo,
.general-menu .general-menu__photo--bottom-right {
    top: 0 !important;
    left: 100% !important;
    margin-left: 0 !important;
    z-index: 5;
}

/* Wide invisible bridge to the right of the UL — covers the whole area
   where the card lives, from top to bottom of the list, so the cursor
   never crosses an un-hovered zone while moving from a row to the card.
   z-index:1 keeps it ABOVE adjacent rows (so it intercepts mousemove
   during transit) but BELOW the card itself (so clicks still land on
   the card's links). */
.general-menu__item:hover::after {
    content: '';
    position: absolute;  /* relative to .general-menu (the UL) */
    top: 0;
    bottom: 0;
    left: 100%;
    width: 35rem;        /* slightly wider than the card (530px ≈ 33rem) */
    z-index: 1;
}

/* Card stays visible while the cursor is on it. */
.general-menu__photo:hover {
    display: block !important;
}

/* Bold rows + gray separators on every megamenu list — the vendor scopes
   them to `.general-menu--products` only; extend the same look to the
   ACF-driven flyouts (design lines, life simplified, assistenza) so all
   megamenus match B2C/B2B. The :hover variant is needed because this
   3-class selector outweighs the vendor's generic
   `.general-menu__link:hover` turquoise border rule. */
.general-menu--design-lines > .general-menu__item > .general-menu__link,
.general-menu--life-simplified > .general-menu__item > .general-menu__link,
.general-menu--assistenza > .general-menu__item > .general-menu__link {
    position: relative;
    border-bottom-color: #dde4e8;
    font-family: NeueHelveticaPaneuropean75Bold, sans-serif;
}

.general-menu--design-lines > .general-menu__item > .general-menu__link:hover,
.general-menu--life-simplified > .general-menu__item > .general-menu__link:hover,
.general-menu--assistenza > .general-menu__item > .general-menu__link:hover {
    border-bottom-color: #00b9ad;
}

/* --------------------------------------------------------------------------
   Megamenu inner padding — vendor sets `.flyout__inner { padding-top: .5rem }`
   which leaves the list flush against the header line. Add breathing room
   at top/bottom of the panel so the layout feels balanced.
   -------------------------------------------------------------------------- */
.flyout.mainNavigationFlyout > .flyout__inner {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   Footer upper (green "Seguici su:" bar) — vendor `.footer-upper--align`
   is `text-align: right`; we add `.footer-upper--left` to anchor the
   label + social icons to the left side of the bar.
   Font: NeueHelveticaPaneuropean55Roman (same as the rest of the site).
   -------------------------------------------------------------------------- */
.footer-upper .footer-upper--left {
    text-align: left;
}

.footer-upper .social-icons--text {
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    margin: 0 0.75rem 0 0;
    vertical-align: middle;
}

.footer-upper .social-icons {
    vertical-align: middle;
}

/* Il footer sta dentro <main>: senza questa regola le icone social
   ereditano il turchese di `main a` e spariscono sul fondo #00b9ad.
   Bianche come da vendor (cerchio bianco 50%, pieno in hover). */
.footer-upper a,
.footer-upper a:hover,
.footer-upper a:focus {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Megamenu anchoring — the vendor declares `.flyout { position:absolute;
   width:100% }` without left/right/top. Without those anchors, the absolute
   element falls back to its "static position", which lands inside the
   centered .container/.row and starts at top:0 of the header.

   Pin both axes explicitly:
     • left:0; right:0; width:auto → flyout spans the full viewport width
       so the inner `.container` (Bootstrap centered) sits under the logo.
     • top:100% → flyout opens just BELOW the header (under .header__main,
       which is the closest positioned ancestor), instead of overlapping it.
   -------------------------------------------------------------------------- */
.flyout.mainNavigationFlyout {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
}

/* Backdrop overlay (`.flyout--overlay::before`) starts BELOW the fixed
   header so the logo + nav remain visible/clickable while the megamenu
   is open. Vendor sets it to top:0 (covering everything). Uses the
   --site-header-height variable published by main.js. Admin-bar adds
   another 32px (46px on mobile breakpoints). */
.flyout.mainNavigationFlyout.flyout--overlay::before {
    top: var(--site-header-height, 90px) !important;
}

body.admin-bar .flyout.mainNavigationFlyout.flyout--overlay::before {
    top: calc(var(--site-header-height, 90px) + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .flyout.mainNavigationFlyout.flyout--overlay::before {
        top: calc(var(--site-header-height, 90px) + 46px) !important;
    }
}

/* --------------------------------------------------------------------------
   Breadcrumb: full-width bottom border, no top border (header line is enough)
   -------------------------------------------------------------------------- */
.breadcrumbs {
    border-top: 0 !important;       /* override vendor border-top:1px #dde4e8 */
    border-bottom: 1px solid #dde4e8;
    margin: 0;                      /* sit flush against the header */
}

/* Product sticky tabs: pin under the sticky header instead of vendor's
   hard-coded top:125px. The CSS variable is set by product-gallery.js. */
.menu--stick {
    top: var(--site-header-height, 125px) !important;
    z-index: 20; /* below .header (30) so the header always covers the menu when scrolled */
}

body.admin-bar .menu--stick {
    top: calc(var(--site-header-height, 125px) + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .menu--stick {
        top: calc(var(--site-header-height, 125px) + 46px) !important;
    }
}

/* Ensure main content has minimum height (footer pushed down) */
main {
    min-height: calc(100vh - 200px);
}

/* --------------------------------------------------------------------------
   Body/html: let document grow with content (no fixed 100% which would
   constrain position:sticky on the header to a single viewport).
   The hero slider sets its own height (see override below) — no need for
   html/body height chain.
   -------------------------------------------------------------------------- */

/* Hero slider standalone height.
   Vendor uses `.intro-full-height { height: calc(100% - 125px); margin-top: 125px }`
   which assumed `html, body { height: 100% }` AND a 125px-tall header. Our setup
   has neither (no body height chain — main already gets padding-top equal to the
   actual header height). Without an explicit height the slider collapses to ~1px.
   We anchor to the viewport instead and zero out the redundant margin-top
   (the spacing below the header is already provided by `main { padding-top: 90px }`). */
.intro-full-height,
.intro_full_home {
    height: calc(100vh - var(--site-header-height, 90px));
    margin-top: 0;
}

@media screen and (max-width: 1099px) {
    .intro-full-height,
    .intro_full_home {
        height: calc(100vh - var(--site-header-height, 80px));
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .intro-full-height,
    .intro_full_home {
        /* Mobile image is portrait (750x1200) — give a taller hero */
        height: calc(100vh - var(--site-header-height, 60px));
        margin-top: 0;
    }
}

/* Admin-bar compensation for the hero slider.
   When logged in, WP's admin bar covers the top 32px (>=782px viewport) or
   46px (<782px viewport) of the page. Our `calc(100vh - header)` doesn't
   know about that, so the hero overflows below the fold by exactly the
   admin-bar height. Subtract it explicitly per breakpoint.
   Header offset stays variable via `--site-header-height` (set by main.js). */
body.admin-bar .intro-full-height,
body.admin-bar .intro_full_home {
    height: calc(100vh - var(--site-header-height, 90px) - 32px);
}

@media screen and (max-width: 1099px) {
    body.admin-bar .intro-full-height,
    body.admin-bar .intro_full_home {
        height: calc(100vh - var(--site-header-height, 80px) - 32px);
    }
}

/* WP switches admin-bar height from 32 to 46 at <=782px (not at 767). */
@media screen and (max-width: 782px) {
    body.admin-bar .intro-full-height,
    body.admin-bar .intro_full_home {
        height: calc(100vh - var(--site-header-height, 80px) - 46px);
    }
}

@media screen and (max-width: 767px) {
    body.admin-bar .intro-full-height,
    body.admin-bar .intro_full_home {
        height: calc(100vh - var(--site-header-height, 60px) - 46px);
    }
}

/* --------------------------------------------------------------------------
   Hero slider layout: image on top, white footer strip below.

   Per slide:
     ┌─────────────────────────────────┐
     │                                 │  <- image (cover, top portion)
     │  Title (overlay)                │
     │  [Turquoise subtitle pill]      │  <- anchored to bottom edge of image
     ├─────────────────────────────────┤  <- white strip starts here
     │  [Magenta CTA bar]              │  <- col-md-4 width, aligned with subtitle
     │            ● ○ ○ ○ ○            │  <- slick dots, centered inside strip
     └─────────────────────────────────┘
   -------------------------------------------------------------------------- */
:root {
    --hero-footer-height: 5rem; /* 80px desktop */
}

@media screen and (max-width: 767px) {
    :root { --hero-footer-height: 4.375rem; /* 70px mobile */ }
}

.home-intro__slider .intro-slider__slide {
    position: relative;
    background: #fff; /* the strip below the image */
}

/* Image fills the slide EXCEPT the bottom strip */
.home-intro__slider .img-as-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--hero-footer-height);
    overflow: hidden;
}

.home-intro__slider .img-as-background picture,
.home-intro__slider .img-as-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Title+subtitle overlay layer — stops above the white strip so the
   subtitle pill ends flush with the image bottom edge.
   Outer wrapper is absolute (preserves Bootstrap .container's
   margin:auto centering). */
.home-intro__slider .intro-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--hero-footer-height);
    z-index: 2;
}

.home-intro__slider .intro-slider__overlay > .container {
    height: 100%;
}

/* `.transparent-box--main-title` (custom, mirrors pl.gorenje.com):
   the title pill has NO background and NO padding — plain white display
   typography overlaid on the image, with a fixed 450px width that caps
   to the column on narrow viewports. */
.home-intro__slider .transparent-box--main-title {
    background: transparent;
    padding: 0;
    width: 450px;
    max-width: 100%;
}

.home-intro__slider .transparent-box--main-title .transparent-box__title {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    text-transform: none;
    font-size: 48px;
    line-height: 52px;
    display: block;
}

/* Subtitle pill: smaller typography per the design spec.
   The turquoise background is already the vendor default
   (`.transparent-box--turquoise { background-color: #00b9ad }`). */
.home-intro__slider .transparent-box--turquoise .transparent-box__title {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
}

/* White footer strip — full-width below the image. Hosts the magenta CTA
   bar (col-md-4 width, mirrors the subtitle pill geometry above) and the
   slick dots centered along the bottom. */
.home-intro__slider .intro-slider__cta-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hero-footer-height);
    background: #fff;
    z-index: 2;
}

.home-intro__slider .intro-slider__cta-bar > .container {
    height: 100%;
    position: relative;
}

.home-intro__slider .intro-slider__cta-bar .row {
    height: 100%;
}

.home-intro__slider .intro-slider__cta-bar .col-md-4 {
    position: relative; /* containing block for the absolute button below */
    height: 100%;
}

/* `.btn--magenta` (custom): solid magenta CTA bar with the SAME geometry
   as `.transparent-box__wrapper.stick-bottom--push-left` above —
   `position: absolute; left: 0.625rem; width: 100%` of the col-md-4 box.
   This produces identical left+right edges to the turquoise subtitle
   pill above, with the same inner padding (1.25rem) for text alignment. */
.home-intro__slider .intro-slider__cta-bar .btn--magenta,
.home-intro__slider .intro-slider__cta-bar .btn--magenta.transparent-box--turquoise-transparent {
    position: absolute;
    top: 0;
    left: 0.625rem; /* matches `.stick-bottom--push-left` */
    width: 100%;    /* 100% of col-md-4 box = same width as wrapper above */
    height: 40px;
    line-height: 40px;
    margin: 0 !important;
    padding: 0 1.25rem !important; /* matches `.transparent-box { padding: 1.25rem }` */
    background-color: #ec008c !important;
    border-color: #ec008c !important;
    color: #fff !important;
    text-align: left;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: background-color .15s ease, color .15s ease;
}

.home-intro__slider .intro-slider__cta-bar .btn--magenta:hover,
.home-intro__slider .intro-slider__cta-bar .btn--magenta:focus {
    background-color: #fff !important;
    color: #ec008c !important;
}

/* Arrow icon pinned to the right edge of the CTA */
.home-intro__slider .intro-slider__cta-bar .btn--magenta .btn--icon {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Slick dots inside the white strip — anchored to its bottom, centered. */
.home-intro__slider .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-intro__slider .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
}

.home-intro__slider .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgb(157, 166, 171);
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease;
}

.home-intro__slider .slick-dots li button:before {
    content: none;
}

.home-intro__slider .slick-dots li.slick-active button {
    background: rgb(157, 166, 171);
    border-color: rgb(157, 166, 171);
}

/* --------------------------------------------------------------------------
   Image path overrides for vendor CSS references
   -------------------------------------------------------------------------- */

/* Fix background-image paths that referenced Hybris _ui/ structure */
.loading-spinner,
.loading {
    background-image: url('../../images/loading.gif') !important;
}

/* --------------------------------------------------------------------------
   Additional WordPress integration styles
   -------------------------------------------------------------------------- */

/* ACF flexible content spacing */
.homepage-section {
    margin-bottom: 0;
}

/* Ensure WordPress images are responsive */
.wp-post-image,
.wp-block-image img,
.entry-content img {
    max-width: 100%;
    height: auto;
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* Screen reader text (accessibility) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* --------------------------------------------------------------------------
   Category archive (taxonomy-gorenje_category)
   Layout: full-width hero slider on top, 2-column body (filters sidebar +
   product grid). Reference: Sorgente HQ/products/.../godish01.html
   -------------------------------------------------------------------------- */
.category-archive__title {
    text-align: center;
    margin: 2.5rem 0 1rem;
    font-size: 2rem;
    font-weight: 400;
}

.category-archive__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.25rem;
    color: #5a6870;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.product-listing-hero__slider {
    margin: 0 0 2.5rem;
    background: #f3f5f6;
}

.product-listing-hero__slider .intro-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.product-listing-hero__slider .img-as-background picture,
.product-listing-hero__slider .img-as-background img {
    display: block;
    width: 100%;
    height: auto;
}

.product-listing-hero__slider .intro-image__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 0;
    color: #fff;
}

.category-archive {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}

/* Category-archive sidebar — uses the Hybris filter pattern verbatim:
   .filters__list > .facet-list > .expandable with .expandable__text--filters
   header and .filers__sublist.expandable__data body. The vendor CSS already
   styles all of those. We only add a few sidebar-context tweaks the vendor
   didn't anticipate (it was designed for the bottom .search-result__filters
   horizontal layout). */

.category-archive__sidebar {
    padding-right: 1.5rem;
}

/* Align the sidebar header with the products toolbar. The toolbar block is
   8px padding + 44px select + 20px padding = 72px to its underline; the
   sidebar title sat higher because the vendor adds padding-top:1.6875rem to
   the column and renders the title as a bare <p>. Reset the column padding
   and size the title block to 63px so the first group's border-top (the
   visible line, + .facet-list 10px margin) lands at 73px = toolbar line. */
@media screen and (min-width: 1100px) {
    .category-archive__sidebar.search-result__filters {
        padding-top: 0;
    }
    .category-archive__sidebar .search-result__filters--top {
        display: flex;
        align-items: center;
        min-height: 63px;
        padding: 0; /* vendor keeps padding-bottom:1.25rem, which would push the centred title upward */
    }
    .category-archive__sidebar .search-result__filters--top p {
        margin: 0;
    }
}

/* Mobile (<992px, sidebar stacked full-width): collapse the filters behind a
   "Filtra i prodotti" CTA (accordion). Desktop keeps the body always visible. */
@media (max-width: 991px) {
    .category-archive__sidebar {
        padding-right: 15px;     /* reset desktop padding-right:1.5rem */
        margin-bottom: 1.5rem;
    }

    /* Title -> bordered, tappable CTA (like the reference) */
    .category-archive__sidebar .search-result__filters--top {
        display: block;
        margin: 0;
        padding: .9375rem 1.25rem;
        border: 1px solid #dde4e8;
        text-align: center;
        cursor: pointer;
    }
    .category-archive__sidebar .search-result__filters--top p {
        margin: 0;
        color: #5a6870;
    }

    /* Collapsible body: closed by default, opens on .filters-open */
    .category-archive__filters-body {
        overflow: hidden;
        max-height: 0;
        transition: max-height .3s ease;
    }
    .category-archive__sidebar.filters-open .category-archive__filters-body {
        max-height: 2500px;
        padding: 1rem 1.25rem 0;
        border: 1px solid #dde4e8;
        border-top: 0;
    }
}

/* Inside the sidebar each filter group is a stacked full-width block.
   Make .filers__sublist behave like a vertical list (vendor's default
   labels wrap inline + width-on-mobile rules collide with our column). */
.category-archive__sidebar .filers__sublist {
    padding-top: 0.25rem;
}
.category-archive__sidebar .filers__sublist .label {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    white-space: normal;
}
.category-archive__sidebar .filers__sublist .checkbox--custom + span {
    display: inline-block;
    width: calc(100% - 1.75rem);
    vertical-align: middle;
    line-height: 1.25rem;
}

/* Make the trigger row obviously clickable (vendor leaves it as a <p>). */
.category-archive__sidebar .expandable__text--filters {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
}

/* Vendor's expand toggle stops growing past 0.875rem on the inner icon —
   keep that, but make sure we never inherit pointer:none from elsewhere. */
.category-archive__sidebar .icon-plus--filters {
    pointer-events: none;
}

/* "Selezione corrente" box — Hybris pattern uses one <p> per active filter,
   with the X anchor on the left and the value text inline. The vendor styles
   the surrounding .filters__selection--selected but not the per-row spacing
   when there's no .search-result__filters--bottom wrapper. */
.category-archive__sidebar .filters__selection {
    margin-bottom: 1rem;
}
.category-archive__sidebar .filters__selection--selected p {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: #5a6870;
}
.category-archive__sidebar .selection-delete {
    color: #5a6870;
    text-decoration: none;
    margin-right: 0.375rem;
}
.category-archive__sidebar .selection-delete:hover {
    color: #00b9ad;
}
.category-archive__sidebar .selection-delete .icon--close-round {
    font-size: 0.875rem;
}

/* The "Reset all" anchor at the bottom of the form */
.category-archive__sidebar .filters__selection--reset {
    display: inline-block;
    margin-top: 0.75rem;
}

/* Subcategory chip list — kept simple as text links (no checkboxes) */
.category-archive__sidebar .filers__sublist .category-archive__subcat-item {
    padding-left: 0;
    margin-bottom: 0.25rem;
}

.category-archive__sidebar .filers__sublist .category-archive__subcat-item a {
    display: block;
    padding: 0.375rem 0;
    color: #5a6870;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1px solid #f3f5f6;
}

.category-archive__sidebar .filers__sublist .category-archive__subcat-item a:hover {
    color: #00b9ad;
}

.category-archive__filter-empty {
    color: #9da6ab;
    font-size: 0.8125rem;
    font-style: italic;
    margin: 0.25rem 0 0;
}

/* Product card padding — vendor sets width/height/float/border on
   .search-result__listing .product-listing__box but no internal padding.
   Without this the image hugs the left edge and the text touches the right. */
.search-result__listing .product-listing__box {
    padding: 1.25rem;
    box-sizing: border-box;
    position: relative;
}
.search-result__listing .product-listing__box {
    height: auto !important;
}
/* Image box: reserve a uniform 210px-tall stage so cards line up vertically
   regardless of the underlying PNG aspect ratio. Image is centered both
   axes and shrinks to fit (max-height 210px so it never grows past the box). */
.search-result__listing .product-listing__box .product-listing__slider {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-result__listing .product-listing__box .product-listing__slider img {
    max-width: 100%;
    height: auto;
    max-height: 210px;
    display: block;
    margin: 0 auto;
}
.search-result__listing .product-listing__box .table-product-info__title {
    display: block;
    margin-bottom: 0.25rem;
    line-height: 1.25rem;
}
.search-result__listing .product-listing__box .table-product-info__subtitle {
    display: inline-block;
    margin-bottom: 0.75rem;
    text-decoration: none;
}
.search-result__listing .product-listing__box .table-product-info__highlights {
    display: list-item;
    list-style: disc inside;
    margin-left: 0.25rem;
    color: #5a6870;
    text-decoration: none;
}
.search-result__listing .product-listing__box .table-product-info__highlights:hover {
    color: #00b9ad;
}
.search-result__listing .product-listing__box .listing_badges_row {
    margin-top: 0.5rem;
}
/* Energy label badge: fixed 40px height so all rows visually align even
   when the underlying class PNG aspect ratios differ (A vs A+++ etc). */
.search-result__listing .product-listing__box .table-product-info__icons.mainBadge img {
    height: 40px;
    width: auto;
    display: block;
}
/* Clear the floats so the Load More button sits below the grid (vendor's
   own .clearfix class works, but defensive override against legacy resets) */
.search-result__listing::after {
    content: "";
    display: table;
    clear: both;
}

/* Toolbar (.search-result__filters-button--top is the vendor wrapper) — make
   sure on desktop our toolbar is visible and aligned (vendor hides it on
   some breakpoints by default). The count sits on the left, the select on
   the right. */
.category-archive__toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dde4e8;
}

.category-archive__count {
    color: #5a6870;
    font-size: 0.9375rem;
}

.category-archive__toolbar .search-result__selection,
.category-archive__toolbar .search-result__selection--top {
    margin: 0;
    width: auto;
    float: none;
    display: inline-block;
}

.category-archive__toolbar .input---select {
    position: relative;
    margin: 0;
    background-color: #fff;
    border: 1px solid #dde4e8;
    min-width: 220px;
}

.category-archive__toolbar .input---select .form__select {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 1rem;
    background: transparent;
    border: 0;
    color: #5a6870;
    font-size: 0.9375rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Re-anchor the vendor's .select_dynamic chevron correctly (vendor uses
   float:right; margin-top:-37px which doesn't sit right inside a flex toolbar). */
.category-archive__toolbar .input---select .select_dynamic {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin: 0;
    transform: translateY(-50%);
    float: none;
    pointer-events: none;
}

.category-archive__main.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .2s ease;
}

.category-archive__load-more {
    text-align: center;
    margin: 2.5rem 0 1rem;
}

.category-archive__load-more .btn {
    min-width: 220px;
    padding: 0.875rem 1.75rem;
}

.category-archive__main {
    padding-left: 1.5rem;
}

.category-archive__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dde4e8;
}

.category-archive__count {
    color: #5a6870;
    font-size: 0.875rem;
}

.category-archive__sort .form__select {
    min-width: 200px;
    height: 40px;
    border: 1px solid #dde4e8;
    background: #fff;
    color: #5a6870;
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

.category-archive__cell {
    margin-bottom: 1.5rem;
}

.category-archive__empty {
    padding: 4rem 0;
    text-align: center;
    color: #9da6ab;
}

/* --------------------------------------------------------------------------
   Archive product card — horizontal layout (Hybris-style): image on the
   left, info column on the right with title, code, bullet list of features
   and energy label + link. Two cards per row on desktop (col-md-6).
   -------------------------------------------------------------------------- */
.product-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid #dde4e8;
    height: 100%;
    padding: 1.25rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.product-card:hover {
    border-color: #00b9ad;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.15);
}

.product-card__media {
    flex: 0 0 45%;
    max-width: 45%;
    text-align: center;
}

.product-card__image-link {
    display: block;
    margin-bottom: 0.75rem;
}

.product-card__image-link img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.product-card__energy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.product-card__energy img {
    max-height: 38px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.product-card__energy-link {
    color: #5a6870;
    font-size: 0.75rem;
    line-height: 1.2;
    text-decoration: underline;
}

.product-card__energy-link:hover {
    color: #00b9ad;
}

.product-card__body {
    flex: 1 1 55%;
    min-width: 0;
}

.product-card__title-link {
    color: inherit;
    text-decoration: none;
}

.product-card__title-link:hover {
    color: inherit;
    text-decoration: none;
}

.product-card__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 400;
    color: #333;
}

.product-card__title .first-word-bold {
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.product-card__code {
    margin: 0 0 0.75rem;
    color: #9da6ab;
    font-size: 0.8125rem;
}

.product-card__bullets {
    margin: 0;
    padding-left: 1.125rem;
    list-style: disc;
    color: #5a6870;
    font-size: 0.875rem;
    line-height: 1.5;
}

.product-card__bullets li {
    margin-bottom: 0.125rem;
}

/* --------------------------------------------------------------------------
   Sidebar — "Selezione corrente" chip box (Hybris .filters__selection--selected)
   -------------------------------------------------------------------------- */
.js-archive-selection {
    margin-bottom: 1.5rem;
}

.filters__selection-label {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    color: #333;
}

.filters__selection-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filters__selection-list li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    color: #5a6870;
    font-size: 0.8125rem;
}

.filters__selection-list li::before {
    content: "\00d7"; /* × close glyph */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #5a6870;
    color: #5a6870;
    font-size: 0.75rem;
    line-height: 1;
}

/* Accessibility helper */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Product page: hero section (gallery + details column)
   Match the reference (fr.gorenje.com) — white background, taller block,
   with a "Find a dealer" CTA below the product info.
   Vendor sets `.product-gallery { background-color: #f3f5f6; padding-top: 2.8125rem; padding-bottom: 2.8125rem }`.
   -------------------------------------------------------------------------- */
.product-gallery {
    background-color: #fff !important;
    padding-top: 3.75rem;     /* +1rem vs vendor */
    padding-bottom: 4.5rem;
}

.product-detail__store-locator {
    margin: 1.25rem 0 0.75rem;
}

/* White button with thin border + search icon to the right — matches the
   "Trouver un magasin" style on fr.gorenje.com (flat, minimal, regular
   weight). Explicitly does NOT inherit .btn--turquoise vendor styles. */
.btn--store-locator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    min-width: 12.5rem;
    background: #fff;
    border: 1px solid #dde4e8;
    border-radius: 0;
    color: #5a6870;
    font-size: 0.9375rem;
    font-weight: 400;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    line-height: 1.5;
    transition: border-color .2s ease, color .2s ease;
}

.btn--store-locator:hover,
.btn--store-locator:focus {
    border-color: #5a6870;
    color: #5a6870;
    text-decoration: none;
}

.btn--store-locator i {
    font-size: 0.9375rem;
    line-height: 1;
}

/* Support tab CTA (PDP "Assistenza") — same turquoise button as the Assistenza
   page contact box, used in place of the phone when support_cta is set. */
.product-detail__support-cta {
    display: inline-block;
    margin-top: .75rem;
    padding: 1rem 2rem;
    background: #1ab3a3;
    color: #fff;
    text-transform: uppercase;
    font-size: .875rem;
    line-height: 1;
    letter-spacing: .05em;
    text-decoration: none;
    border: 1px solid #1ab3a3;
    transition: background-color .15s ease, color .15s ease;
}

.product-detail__support-cta:hover,
.product-detail__support-cta:focus {
    background: #fff;
    color: #1ab3a3;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Product page: Actions bar (stampa / condividi / scaricare)
   -------------------------------------------------------------------------- */
.product-actions-div {
    display: flex;
    align-items: center;
    padding: 1.25rem 0;
    font-size: .8125rem;
    color: #5a6870;
}

.product-actions-div .product-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-right: 1.25rem;
    margin-right: 1.25rem;
    border-right: 1px solid #dde4e8;
    text-decoration: none;
    color: #5a6870;
}

.product-actions-div .product-action:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.product-actions-div .product-action a {
    color: #5a6870;
    text-decoration: none;
    font-size: 1.125rem;
}

.product-actions-div .product-action a:hover,
.product-actions-div a.product-action:hover {
    color: #00b9ad;
}

.product-actions-div .product-action i {
    font-size: 1.125rem;
}

/* The placeholder is empty by default -> don't reserve vertical space for it
   (it was adding ~2.5rem of dead gap under the store-locator button). */
.product-actions-div:empty {
    display: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Product page — mobile refinements
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Less dead space at the bottom of the hero before the sticky tabs */
    .product-gallery {
        padding-bottom: 2rem;
    }

    /* Summary column was hugging the screen edge -> a bit more breathing room */
    .product-data-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Store-locator CTA: turquoise (like the other site CTAs) + full width */
    .btn--store-locator {
        width: 100%;
        background: #1ab3a3;
        border-color: #1ab3a3;
        color: #fff;
    }
    .btn--store-locator:hover,
    .btn--store-locator:focus {
        background: #148f83;
        border-color: #148f83;
        color: #fff;
    }
    .btn--store-locator i {
        color: #fff;
    }
}

/* --------------------------------------------------------------------------
   Product page: Fullscreen gallery button
   The vendor CSS positions it absolute at bottom:-25px; right:34px without
   a z-index, so it ends up under the thumbnail strip / slick overlay and
   becomes un-clickable. We wrap the main slider (.product-gallery__main-wrap)
   to anchor the button to just the main slider area, then bump z-index and
   add a clear click target. */
.product-gallery__main-wrap {
    position: relative;
}

.product-gallery__fullscreen {
    z-index: 5;
    cursor: pointer;
    padding: 6px 10px;
    pointer-events: auto;
}

.product-gallery__fullscreen:hover {
    color: #5a6870;
}

/* --------------------------------------------------------------------------
   Product page: Energy label info link
   -------------------------------------------------------------------------- */
.product-gallery__productInfo {
    margin-top: .9375rem;
    margin-bottom: .9375rem;
    font-size: .8125rem;
}

.product-gallery__productInfo a {
    color: #00b9ad;
    text-decoration: underline;
    margin-right: 1rem;
}

.product-gallery__productInfo a:hover {
    color: #5a6870;
}

/* --------------------------------------------------------------------------
   Product page: Gallery popup (override vendor centering for panzoom compat)
   -------------------------------------------------------------------------- */
.product-gallery-popup__image-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    transform: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 4rem 8rem;
}

.product-gallery-popup__image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
}

/* --------------------------------------------------------------------------
   Product Range Tabs (homepage section "Gamma prodotti")
   Schema ACF: groups[] -> tabs cliccabili (visible only when 2+ groups).
   Pannelli inattivi sono off-screen (visibility:hidden + left:-9999px) anziché
   display:none così Slick può misurarli al primo init; al click del tab il
   pannello target torna in flow e chiamiamo `slick('setPosition')` via JS.
   -------------------------------------------------------------------------- */
.home-product-range__wrapper {
    position: relative; /* containing block for off-screen panels */
}

.home-product-range__tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    text-align: center;
}

.home-product-range__tab {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    margin: 0 0.5rem;
    cursor: pointer;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #5a6870;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.home-product-range__tab:hover,
.home-product-range__tab.is-active {
    color: #1ab3a3;
    border-bottom-color: #1ab3a3;
}

.home-product-range__panel {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: -9999px;
    width: 100%;
    /* Fade-in when the panel becomes active. position/visibility/left are
       not in the transition list — they change instantly so the panel
       enters the flow before opacity animates from 0 to 1. */
    transition: opacity 0.3s ease;
}

.home-product-range__panel.is-active {
    position: static;
    visibility: visible;
    opacity: 1;
    left: auto;
}

/* --------------------------------------------------------------------------
   Language switcher (navbar right + flyout overlay)
   -------------------------------------------------------------------------- */
.menu__item-link--language {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu__item-link--language .icon--arrow-down-menu-item {
    margin-left: 0.375rem;
    font-size: 0.625rem;
    vertical-align: middle;
}

/* Language flyout overlay — replicates pl.gorenje.com pattern.
   Vendor already styles `.flyout--gray`, `.flyout__inner`, `.label__flyout`,
   `.form__select`, `.btn__wide`, `.js-action`, `.icon--close-round` —
   we only add minor spacing/sizing tweaks for the layout.

   The flyout is a sibling of <header> in the DOM (included in base.twig
   after the header partial), so its containing block is the viewport.
   Anchor it directly below the fixed navbar with `position: fixed`
   + `top: var(--site-header-height)` (set by main.js to the actual
   rendered header height; falls back to 90px for the first paint). */
.flyout.flyout__country {
    position: fixed !important;
    top: var(--site-header-height, 90px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 25; /* above main content; below the megamenu (30) */
}

/* Admin-bar offset (WP adds 32px / 46px above body content). */
body.admin-bar .flyout.flyout__country {
    top: calc(var(--site-header-height, 90px) + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .flyout.flyout__country {
        top: calc(var(--site-header-height, 90px) + 46px);
    }
}

/* Single-row layout: label + select + OK + close, all vertically centered.
   Bootstrap's default `.row` is block-with-floats, which made the label
   wrap onto two lines because its col-md-2 column was too narrow for
   "Seleziona la tua lingua". Flex with align-items:center + a wider
   label column fixes both the alignment and the wrap. */
.flyout__country .flyout__inner {
    padding: 0.75rem 0;
}

.flyout__country .flyout__inner > .container > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.flyout__country .offset-country-label {
    width: auto;     /* shrink to content so the label doesn't wrap */
    margin-left: 0;  /* drop the Bootstrap col-*-offset spacing */
    flex: 0 0 auto;
    padding: 0 1rem;
}

.flyout__country .label__flyout {
    line-height: 36px;
    font-size: 1rem;
    color: #5a6870;
    white-space: nowrap;
    margin: 0;
}

/* Native <select> styling — vendor only ships select2 styles, the raw
   element needs basic chrome to look like the design ref. */
.flyout__country #country-selector {
    height: 36px;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid #dde4e8;
    background: #fff;
    font-size: 1rem;
    color: #5a6870;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #5a6870 50%),
                      linear-gradient(135deg, #5a6870 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.flyout__country #country-selector:focus {
    outline: none;
    border-color: #1ab3a3;
}

/* OK button — `<input type="button">` doesn't honor `line-height` the
   way <button> does, so we use explicit padding-top/bottom to balance
   the text vertically inside the 36px tall control. */
.flyout__country .change_language_submit {
    height: 36px;
    padding: 0 1.25rem;
    line-height: 1;        /* avoid the user-agent line-height inflating the box */
    background-color: #1ab3a3;
    border: 0;
    color: #fff;
    text-transform: uppercase;
    font-family: NeueHelveticaPaneuropean75Bold, sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s ease;
}

.flyout__country .change_language_submit:hover,
.flyout__country .change_language_submit:focus {
    background-color: #0d8076;
    outline: none;
}

/* Close icon — the vendor `.icon--close-round` font glyph ALREADY
   draws a filled grey circle with an X inside. We use inline-flex
   with a fixed 36px height so it vertically centers alongside the
   36px-tall select + OK button via the parent flex row. */
.flyout__country .js-action__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #9da6ab;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    transition: color .15s ease;
}

.flyout__country .js-action__close:hover,
.flyout__country .js-action__close:focus {
    color: #5a6870;
    outline: none;
}

/* Triangle "tail" connecting the language flyout to the trigger in
   the navbar. The vendor draws this via
   `.menu__item-link--language.active::after` with
   `bottom:-0.5rem; left:101%`, which made the triangle sit BELOW the
   header link and bleed into the flyout in a half-visible way (the
   "freccia sotto al bottone dell'header" the user reported).

   Hide the vendor pseudo-elements on the link and redraw a clean
   upward-pointing triangle on the TOP of the flyout itself, aligned
   roughly under the language trigger on the right side of the navbar.
   Color matches the flyout background (#f3f5f6) so the triangle looks
   like a continuous tab/notch attached to the bar. */
.menu__item-link--language.active::before,
.menu__item-link--language.active::after {
    display: none !important;
}

.flyout.flyout__country::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 100px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f3f5f6;
    pointer-events: none;
}

/* Hide the col-md-1 wrapper's default padding so the close icon sits
   right next to the OK button instead of getting a full grid gap. */
.flyout__country .hidden-xs.col-md-1 {
    width: auto;
    flex: 0 0 auto;
    padding: 0 1rem;
}

/* Same shrink-to-content treatment for the OK button column. */
.flyout__country .col-xs-3.col-md-2.col-lg-1 {
    width: auto;
    flex: 0 0 auto;
    padding: 0 0.5rem;
}

/* And the select column — let it take its natural width up to ~260px. */
.flyout__country #gorenje-lang-form > .col-xs-9.col-md-3 {
    width: auto;
    flex: 0 0 auto;
    padding: 0 0.5rem;
}

.flyout__country #gorenje-lang-form > .col-xs-9.col-md-3 #country-selector {
    width: 260px;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Search flyout — minor adjustments on top of the vendor styles
   -------------------------------------------------------------------------- */
/* Search flyout — same anchoring as the language flyout: open BELOW
   the fixed header (sibling of <header> in the DOM, so its containing
   block is the viewport; without this it would land at top:0 over the
   header). Vendor `.flyout` is `position: absolute; width: 100%`
   without anchors. */
.flyout.flyout__search {
    position: fixed !important;
    top: var(--site-header-height, 90px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 25;
    /* Let the panel grow to its content; cap to remaining viewport so
       it never overflows the screen. Tall content scrolls only inside
       the inner wrap, but we generously oversize so 4 product cards fit
       without scroll on typical desktops. */
    max-height: calc(100vh - var(--site-header-height, 90px));
    overflow-y: auto;
}

/* Admin-bar offset for logged-in users (same pattern as flyout-country). */
body.admin-bar .flyout.flyout__search {
    top: calc(var(--site-header-height, 90px) + 32px);
    max-height: calc(100vh - var(--site-header-height, 90px) - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .flyout.flyout__search {
        top: calc(var(--site-header-height, 90px) + 46px);
        max-height: calc(100vh - var(--site-header-height, 90px) - 46px);
    }
}

.flyout__search--wrap {
    padding: 1.5rem 0;
}

.flyout__search--wrap .input-group {
    max-width: 720px;
    margin: 0 auto;
}

.flyout__search--wrap .search-flyout-title {
    display: block;
    margin-bottom: 1rem;
}

.flyout__search--wrap .list-images__product {
    padding: 1rem 0.5rem;
    margin-bottom: 1rem;
}

.flyout__search--wrap .images__product--img {
    max-height: 140px;
    object-fit: contain;
    margin: 0 auto 0.5rem;
}

.flyout__search--wrap .images__product--desc span {
    display: block;
    font-size: 0.875rem;
}

.flyout__search--wrap .images__product--desc span:first-child {
    font-family: NeueHelveticaPaneuropean75Bold, sans-serif;
}

.flyout__search--wrap .showSearchQuery {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Heading section (page_sections layout: heading)
   -------------------------------------------------------------------------- */
.gorenje-heading-wrap { padding: 2.5rem 0; }

.gorenje-heading {
    margin: 0;
    color: #5a6870;
    font-family: NeueHelveticaPaneuropean75Bold, sans-serif;
    line-height: 1.2;
}

.gorenje-heading--small  { font-size: 1.5rem;  }
.gorenje-heading--medium { font-size: 2.25rem; }
.gorenje-heading--large  { font-size: 3rem;    }
.gorenje-heading--xlarge { font-size: 3.75rem; }

.gorenje-heading--left   { text-align: left;   }
.gorenje-heading--center { text-align: center; }
.gorenje-heading--right  { text-align: right;  }

.gorenje-heading--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gorenje-heading--border {
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #dde4e8;
}

.gorenje-heading__eyebrow {
    display: block;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1ab3a3;
    margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
    .gorenje-heading--xlarge { font-size: 2.5rem;  }
    .gorenje-heading--large  { font-size: 2rem;    }
    .gorenje-heading--medium { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   WYSIWYG text section (page_sections layout: wysiwyg_text)
   -------------------------------------------------------------------------- */
.gorenje-wysiwyg-wrap { padding: 2rem 0; }

.gorenje-wysiwyg,
.gorenje-wysiwyg p {
    color: #5a6870;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.gorenje-wysiwyg p { margin: 0 0 1rem; }
.gorenje-wysiwyg p:last-child { margin-bottom: 0; }

.gorenje-wysiwyg h2,
.gorenje-wysiwyg h3,
.gorenje-wysiwyg h4 {
    font-family: NeueHelveticaPaneuropean75Bold, sans-serif;
    color: #5a6870;
    margin: 1.5rem 0 0.75rem;
}
.gorenje-wysiwyg h2 { font-size: 1.75rem; }
.gorenje-wysiwyg h3 { font-size: 1.375rem; }
.gorenje-wysiwyg h4 { font-size: 1.125rem; }

.gorenje-wysiwyg a {
    color: #1ab3a3;
    text-decoration: underline;
    transition: color .15s ease;
}
.gorenje-wysiwyg a:hover { color: #0d8076; }

.gorenje-wysiwyg ul,
.gorenje-wysiwyg ol { margin: 0 0 1rem 1.5rem; padding: 0; }
.gorenje-wysiwyg li { margin-bottom: 0.375rem; }

.gorenje-wysiwyg img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Page content section (page_sections layout: page_content)
   -------------------------------------------------------------------------- */
.gorenje-page-content-wrap { padding: 2rem 0; }

.gorenje-page-content > * { margin-bottom: 1rem; }
.gorenje-page-content > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Article grid — section title spacing (vendor `.title-section` already
   provides the centered light-grey regular look matching the design
   reference; we only add vertical spacing for the row above the cards).
   -------------------------------------------------------------------------- */
.home-world-gorenje__title {
    margin: 2.5rem 0 2rem;
}

/* Small card heading modifier (used in split_3 layout for the 2 narrow
   cards). The base `.home-article__heading` matches the large card; the
   `--small` modifier shrinks the font without changing the rest of the
   card chrome (clean white background, label/excerpt unchanged). */
.home-article__heading--small {
    font-size: 1.125rem;
    line-height: 1.375rem;
}

/* --------------------------------------------------------------------------
   Footer top spacing — give page_sections / archive content breathing
   room above the footer so blocks don't sit flush against the green
   "Seguici su:" bar.
   -------------------------------------------------------------------------- */
.footer {
    margin-top: 4rem;
}

@media (max-width: 767px) {
    .footer { margin-top: 2.5rem; }
}

/* ============================================================
   Archive filters — select / range / dual-range slider
   (scoped to the category archive sidebar)
   ============================================================ */
.category-archive__sidebar .js-archive-filter-select {
    width: 100%;
    min-height: 0; /* the vendor's `form select { min-height:38px }` would inflate it */
    padding: .45rem .6rem;
    border: 1px solid #dde4e8;
    background: #fff;
    font-size: .9rem;
}

.category-archive__sidebar .archive-range {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    flex-wrap: wrap;
}
.category-archive__sidebar .archive-range__input {
    width: 5rem;
    padding: .35rem .45rem;
    border: 1px solid #dde4e8;
    font-size: .9rem;
}
.category-archive__sidebar .archive-range__sep,
.category-archive__sidebar .archive-range__unit {
    color: #555;
    font-size: .85rem;
}

.category-archive__sidebar .archive-range-slider {
    position: relative;
    height: 56px; /* room for the values label below the thumbs */
    padding: 0 .35rem;
    margin-top: .25rem;
}
.category-archive__sidebar .archive-range-slider__track {
    position: absolute;
    top: 18px;
    left: .35rem;
    right: .35rem;
    height: 4px;
    background: #dde4e8;
    border-radius: 2px;
}
.category-archive__sidebar .archive-range-slider__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: #1ab3a3;
    border-radius: 2px;
}
.category-archive__sidebar .archive-range-slider__handle {
    position: absolute;
    top: 8px;
    left: .35rem;
    right: .35rem;
    width: calc(100% - .7rem);
    margin: 0;
    height: 24px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.category-archive__sidebar .archive-range-slider__handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1ab3a3;
    /* the vendor thumb rule declares box-shadow + margin-top:-17px — neutralize both */
    box-shadow: none;
    margin-top: 0;
    cursor: pointer;
}
.category-archive__sidebar .archive-range-slider__handle::-moz-range-thumb {
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1ab3a3;
    box-shadow: none; /* vendor thumb rule declares a glow */
    cursor: pointer;
}
.category-archive__sidebar .archive-range-slider__handle::-webkit-slider-runnable-track { background: none; }
.category-archive__sidebar .archive-range-slider__handle::-moz-range-track { background: none; }
.category-archive__sidebar .archive-range-slider__values {
    position: absolute;
    top: 34px; /* below the thumbs (which span up to ~29px) so the text is never covered */
    left: .35rem;
    font-size: .85rem;
    color: #555;
}

/* --------------------------------------------------------------------------
   PDP feature tabs (.pdp-features .menu--icons) — equal-height icon items.

   The feature icon strip is a Slick slider (slidesToShow:6). By default the
   slides are baseline-aligned and each keeps its own content height. When a
   feature label wraps to two lines (e.g. "Classe energetica E", "Compressore
   Inverter") that item grows taller, the slides stop lining up, and the active
   teal underline (border-bottom on .menu__item-link) ends up at a different
   height per item.

   Fix: turn the track into a flex row so every slide stretches to the tallest
   one (equal height), then let the chain slide -> item -> link grow to fill
   that height. The link's bottom border then always rests just above the
   container's thin 1px rule, identical for every item, while the icon + label
   keep flowing from the top. Robust to Slick's optional per-slide wrapper
   <div> (the `rows` option): both `.slick-slide > div` and `.menu__item` are
   stretched. Internal icon/label layout is left untouched.
   -------------------------------------------------------------------------- */
.pdp-features .menu--icons .slick-track {
    display: flex;
    align-items: stretch;
}
.pdp-features .menu--icons .slick-slide {
    height: auto; /* override Slick's height:100% so flex can equalize */
    display: flex;
    flex-direction: column;
}
.pdp-features .menu--icons .slick-slide > div {
    display: flex; /* Slick `rows` wrapper, or the .menu__item itself when rows:0 */
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}
.pdp-features .menu--icons .menu__item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%; /* fill the slide instead of the vendor 14% */
}
.pdp-features .menu--icons .menu__item-link {
    flex: 1 1 auto; /* fill the item height -> the bottom border hugs the thin rule */
}

/* --------------------------------------------------------------------------
   Footer — colonne dinamiche.

   Le colonne del footer sono generate da un repeater ACF (numero variabile).
   La griglia Bootstrap a col-md-3 reggeva solo fino a 4 colonne; questa griglia
   flex distribuisce N colonne in egual misura e le manda a capo quando la
   larghezza minima non basta, così funziona con qualsiasi quantità.
   La versione mobile (xs) usa la fisarmonica esistente, non questa griglia.
   -------------------------------------------------------------------------- */
.footer-lower__columns {
    display: flex;
    flex-wrap: wrap;
}
.footer-lower__col {
    flex: 1 1 200px;   /* distribuzione uniforme + wrap sotto i 200px */
    padding: 0 15px;   /* gutter come la col Bootstrap precedente */
}

/* =========================================================================
   Cookie consent — preference popup (presentational, hardcoded IT).
   Centered modal in palette Gorenje. Markup: partials/cookie-consent.twig,
   behaviour: assets/js/custom/cookie-consent.js. Caricato site-wide.
   ========================================================================= */
.gorenje-cookie {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .5);
    z-index: 100000;
}

.gorenje-cookie.cc-invisible {
    display: none;
}

.gorenje-cookie__bar {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    padding: 2.25rem 2.25rem 2rem;
    color: #5a6870;
    font-size: .9375rem;
    line-height: 1.6;
}

.gorenje-cookie__title {
    margin: 0 0 1.25rem;
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    color: #222;
}

.gorenje-cookie__text {
    margin: 0 0 1.25rem;
}

.gorenje-cookie__text a {
    color: #1ab3a3;
    text-decoration: underline;
}

/* ---- Pannello categorie ---- */
.gorenje-cookie__settings {
    margin: 0 0 .5rem;
    border-top: 1px solid #dde4e8;
}

.gorenje-cookie__settings[hidden] {
    display: none;
}

.gorenje-cookie__cat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #dde4e8;
}

.gorenje-cookie__cat-text {
    flex: 1 1 auto;
    min-width: 0;
}

.gorenje-cookie__cat-title {
    display: block;
    margin-bottom: .25rem;
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    color: #222;
}

.gorenje-cookie__cat-text p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
}

/* ---- Toggle ON/OFF ---- */
.gorenje-cookie__switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 26px;
    margin-top: .15rem;
}

.gorenje-cookie__switch input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.gorenje-cookie__slider {
    position: absolute;
    inset: 0;
    background: #c7ced2;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease;
}

.gorenje-cookie__slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 0;
    transition: transform .2s ease;
}

.gorenje-cookie__switch input:checked + .gorenje-cookie__slider {
    background: #1ab3a3;
}

.gorenje-cookie__switch input:checked + .gorenje-cookie__slider::before {
    transform: translateX(22px);
}

.gorenje-cookie__switch input:disabled + .gorenje-cookie__slider {
    cursor: not-allowed;
    opacity: .7;
}

/* ---- Azioni ---- */
.gorenje-cookie__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.gorenje-cookie__btn {
    flex: 0 0 auto;
    padding: .8rem 1.6rem;
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 0;
    border: 2px solid #1ab3a3;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.gorenje-cookie__btn--primary {
    background: #1ab3a3;
    color: #fff;
}

.gorenje-cookie__btn--primary:hover {
    background: #148f83;
    border-color: #148f83;
}

.gorenje-cookie__btn--ghost {
    background: #fff;
    color: #1ab3a3;
}

.gorenje-cookie__btn--ghost:hover {
    background: #1ab3a3;
    color: #fff;
}

.gorenje-cookie__btn[hidden] {
    display: none;
}

.gorenje-cookie__link {
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: #5a6870;
    font-size: .8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.gorenje-cookie__link:hover {
    color: #1ab3a3;
}

/* Trigger di riapertura nel footer */
.cookie-settings-link {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 575px) {
    .gorenje-cookie__bar    { padding: 1.5rem 1.25rem; }
    .gorenje-cookie__title  { font-size: 1.25rem; }
    .gorenje-cookie__btn    { flex: 1 1 auto; text-align: center; }
    .gorenje-cookie__link   { width: 100%; margin: .5rem 0 0; text-align: center; }
}

/* =========================================================================
   Mobile menu hamburger trigger.
   The vendor styles #menu-trigger's 4 <span> bars but never sets `position`
   on #menu-trigger itself, so the absolute-positioned spans had no containing
   block and the icon was invisible. Add position + a hamburger->X animation
   on .is-open (vendor ships no open state). Toggled by navigation.js. */
/* Vertically center the 3 mobile-bar columns (hamburger / logo / search) */
.header__mobile-icons .row {
    display: flex;
    align-items: center;
}

#menu-trigger {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
}

#menu-trigger span:first-child,
#menu-trigger span:nth-child(4) {
    transition: opacity .25s ease;
}

#menu-trigger.is-open span:first-child,
#menu-trigger.is-open span:nth-child(4) {
    opacity: 0;
}

#menu-trigger.is-open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#menu-trigger.is-open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Lock background scroll while the mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Mobile sub-panel "back" bar (vendor gives only height + bg) */
.flyout__mobile-menu__sub-menu__top-actions .row {
    display: flex;
    align-items: center;
    height: 100%;
}

.flyout__mobile-menu__sub-menu__menu-return {
    display: inline-block;
    color: #5a6870;
}

.flyout__mobile-menu__sub-menu__title {
    font-family: NeueHelveticaPaneuropean75Bold, Helvetica, Arial, sans-serif;
    color: #222;
}

/* Sub-panel items: indent from the panel edges. The sub-panel is positioned
   outside the menu body (which carries the 1.25rem padding), so without this
   the links sit flush against the screen edge. */
.flyout__mobile-menu__sub-menu .general-menu--mobile {
    margin: 0;
    padding: 0 1.25rem;
    list-style: none;
}

/* =========================================================================
   Footer mobile accordion (.footer-lower is visible-xs).
   Class-based open/close (toggled by navigation.js) so we don't depend on the
   vendor's contradictory .expandable__data--hidden rules. max-height animates. */
.footer-lower .expandable__text {
    cursor: pointer;
}

.footer-lower .expandable__data {
    display: block;
    overflow: hidden;
    max-height: 0;
    /* azzera il padding vendor (.9375rem 0): con max-height:0 lasciava una
       finestra in cui si intravedeva la prima riga del contenuto */
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height .3s ease, padding .3s ease;
}

.footer-lower .expandable.expandable--open .expandable__data {
    max-height: 600px;
    padding-top: .9375rem;
    padding-bottom: .9375rem;
}

/* Social bar (footer-upper): troppo alta su mobile -> riduci padding e margini */
@media (max-width: 767px) {
    .footer-upper {
        padding: .625rem 0;
    }
    .footer-upper .social-icons--footer {
        margin-top: .5rem;
    }
    .footer-upper .social-icons--text {
        margin-bottom: .25rem;
    }
}

/* =========================================================================
   Link colour inside <main>
   Plain text links use the site's water-turquoise. Links styled via a class
   (buttons/CTAs, breadcrumbs, product cards, nav) keep their own colour because
   a class selector (0,1,0) outranks this element-only rule (0,0,2). */
main a {
    color: #1ab3a3;
}

main a:hover,
main a:focus {
    color: #148f83;
}

/* =========================================================================
   Gravity Forms — stile condiviso per TUTTI i form del sito
   (Garanzia, Contattaci, ...). Spostato qui da page-internal.css, che veniva
   caricato solo su alcuni page template: cosi' ogni form e' identico ovunque.
   Scope `.gform_wrapper.gform-theme` = stessa specificita' del vecchio
   `.garanzia-form .gform_wrapper`, quindi il bilanciamento con il CSS di GF
   resta invariato. La classe gform-theme e' sempre presente in GF 2.10.
   ========================================================================= */

/* Larghezza del form: come il container della pagina Garanzia (880px), cosi'
   il layout label-a-sinistra ha le stesse proporzioni su qualsiasi pagina. */
.gform_wrapper.gform-theme {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
/* =========================================================================
   Gravity Forms — registrazione garanzia (allineato alla grafica del sito)
   GF 2.10 usa il tema "orbital" (palette blu #204ce5). Qui:
   - ri-tematizziamo le variabili --gf-* sul magenta/turchese Gorenje
   - input/label con font e bordi del sito
   - submit = identico alla CTA del sito (.garanzia-btn, magenta)
   - datepicker jQuery UI (iniettato in <body>) stilizzato a parte
   I !important battono lo <style> inline che GF stampa con specificità da #id.
   ========================================================================= */

/* --- Variabili tema orbital -> palette Gorenje (turchese / verde acqua) --- */
.gform_wrapper.gform-theme.gform-theme--orbital {
    --gf-color-primary: #1ab3a3 !important;
    --gf-color-primary-rgb: 26, 179, 163 !important;
    --gf-color-primary-contrast: #fff !important;
    --gf-color-primary-darker: #148f83 !important;
    --gf-color-primary-lighter: #3fd0c0 !important;
    --gf-color-in-ctrl-primary: #1ab3a3 !important;
    --gf-color-in-ctrl-primary-rgb: 26, 179, 163 !important;
    --gf-color-in-ctrl-primary-darker: #148f83 !important;
    --gf-color-in-ctrl-primary-lighter: #3fd0c0 !important;
    --gf-ctrl-border-color: #e3e6e8 !important;
    --gf-radius: 0 !important;
}

/* --- Font del sito su tutto il form --- */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme input,
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme button {
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   Layout label a sinistra (come reference): la label è posizionata in modo
   assoluto nella gutter sinistra; input + descrizione + validazione scorrono
   nella colonna destra. Le sezioni restano full-width.
   ========================================================================= */
.gform_wrapper.gform-theme .gform_fields {
    display: block;
}

.gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) {
    position: relative;
    clear: both;               /* nessun float puo' intrudere nella riga del campo */
    padding-left: 34%;
    margin-bottom: 1.1rem;
}

/* L'intestazione del form (titolo + descrizione + '"*" indica i campi
   obbligatori') deve contenere i propri float: senza questo, la legenda
   sconfinava nella prima riga e spingeva in basso il primo campo, lasciando
   la sua label piu' in alto (disallineata). */
.gform_wrapper.gform-theme .gform_heading {
    overflow: hidden;
    margin-bottom: 1rem;
}

.gform_wrapper.gform-theme .gform_required_legend {
    float: none;
    clear: both;
    margin: 0;
    text-align: right;
}

/* Alcuni form hanno un campo HTML finale con `style="float:right"` inline:
   va neutralizzato o sconfina sul footer (serve !important: e' inline). */
.gform_wrapper.gform-theme .gfield--type-html p[style*="float"] {
    float: none !important;
    margin: 0;
    text-align: right;
}

/* La label riempie in altezza tutta la riga del campo ed e' centrata
   verticalmente: cosi' resta allineata al controllo anche quando la label va
   su piu' righe (es. "Consenso al trattamento dei dati personali") o quando il
   controllo e' piu' alto (textarea, checkbox consenso). */
.gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) > .gfield_label,
.gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) > legend.gfield_label {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);   /* centrata verticalmente sul controllo */
    width: calc(34% - 1rem);
    margin: 0;
    padding: 0;
    text-align: right;
    color: #5a6870;
    font-weight: 400;
    line-height: 1.3;
}

/* L'asterisco non deve andare a capo da solo: resta attaccato all'ultima
   parola della label. */
.gform_wrapper.gform-theme .gfield_label .gfield_required {
    white-space: nowrap;
    padding-left: .15em;
}

/* Asterisco obbligatorio */
.gform_wrapper.gform-theme .gfield_required,
.gform_wrapper.gform-theme .gfield_required_asterisk {
    color: #ec008c;
}

/* --- Titoli di sezione (gsection): full-width separatori --- */
.gform_wrapper.gform-theme .gsection {
    border-bottom: 1px solid #dde4e8;
    margin: 1.75rem 0 1.25rem;
    padding-bottom: .5rem;
}

.gform_wrapper.gform-theme .gsection_title {
    font-size: 1.25rem;
    font-weight: 400;
    color: #222;
}

/* =========================================================================
   Campi: sfondo grigio (reference), focus turchese su bianco, 100% larghezza,
   testo centrato verticalmente (altezza uniforme per tutti i controlli).

   IMPORTANTE: usare `background-color` e NON la scorciatoia `background`.
   La scorciatoia azzera anche background-image/repeat/position/size, e siccome
   questa regola e' piu' specifica delle regole di Gravity Forms, imponeva
   `background-repeat: repeat` alla <select>: all'hover GF ri-applica l'icona
   della freccia, che veniva quindi TAPPEZZATA (effetto "zigzag").
   ========================================================================= */
.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="url"],
.gform_wrapper.gform-theme input[type="password"],
.gform_wrapper.gform-theme input[type="number"],
.gform_wrapper.gform-theme input.datepicker,
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto;              /* annulla l'altezza fissa --gf-ctrl-size di GF */
    min-height: 2.75rem;       /* stessa altezza per tutti i campi */
    padding: .65rem .85rem;
    background-color: #ebebeb;
    border: 1px solid #e3e6e8;
    border-radius: 0;
    box-shadow: none;
    color: #222;
    line-height: 1.4;
}

/* La select ha l'icona freccia a destra: spazio per non far passare il testo
   sotto l'icona (l'icona resta quella di GF, ora non piu' ripetuta). */
.gform_wrapper.gform-theme select {
    padding-right: 2.5rem;
}

/* Il testo della textarea parte dall'alto, non centrato */
.gform_wrapper.gform-theme textarea {
    min-height: 8rem;
    line-height: 1.6;
}

.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper.gform-theme textarea:focus {
    background-color: #fff;
    border-color: #1ab3a3;
    box-shadow: none;
    outline: none;
}

.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder {
    color: #9da6ab;
}

/* Descrizioni di campo allineate sotto l'input */
.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .gform_fileupload_rules {
    color: #5a6870;
    font-size: .8125rem;
    padding-top: .35rem;
}

/* =========================================================================
   Messaggi d'errore: testo rosso leggero, senza box rosso pieno di GF.
   (.gfield_validation_message ha anche .gfield_description: serve !important
   per battere il grigio della regola descrizioni qui sopra e lo stile orbital.)
   ========================================================================= */
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .gfield_error .gfield_validation_message {
    color: #e06b6b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .3rem 0 0 !important;
    font-size: .8125rem;
    font-weight: 400;
}

/* Bordo del campo in errore: rosso leggero invece del rosso pieno */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error select,
.gform_wrapper.gform-theme .gfield_error textarea {
    border-color: #e6a0a0 !important;
}

/* La label del campo in errore resta grigia (niente rosso pesante) */
.gform_wrapper.gform-theme .gfield_error .gfield_label {
    color: #5a6870 !important;
}

/* File upload: campo grigio + bottone "Sfoglia" turchese coerente con la CTA.
   display:flex + align-items:center centra il bottone verticalmente (spazi
   sopra/sotto simmetrici); height:auto annulla l'altezza fissa di GF.
   Il colore dell'input (= testo "Nessun file selezionato") è il grigio dei
   placeholder dei campi di testo. */
.gform_wrapper.gform-theme input[type="file"] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto !important;
    min-height: 2.75rem;       /* stessa altezza degli altri campi */
    padding: .45rem;
    background-color: #ebebeb; /* non shorthand, per coerenza con gli altri campi */
    border: 1px solid #e3e6e8;
    border-radius: 0;
    color: #9da6ab;
    font-size: .875rem;
}

.gform_wrapper.gform-theme input[type="file"]::file-selector-button,
.gform_wrapper.gform-theme input[type="file"]::-webkit-file-upload-button {
    flex: 0 0 auto;
    margin-right: 1rem;
    padding: .55rem 1.4rem;
    background: #1ab3a3;
    color: #fff;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .05em;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}

.gform_wrapper.gform-theme input[type="file"]::file-selector-button:hover,
.gform_wrapper.gform-theme input[type="file"]::-webkit-file-upload-button:hover {
    background: #148f83;
}

/* Campo data: input + icona calendario in una riga ordinata */
.gform_wrapper.gform-theme .ginput_container_date {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.gform_wrapper.gform-theme .ginput_container_date input.datepicker {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.gform_wrapper.gform-theme .ui-datepicker-trigger {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease;
}

.gform_wrapper.gform-theme .ui-datepicker-trigger:hover {
    opacity: 1;
}

/* --- Consenso privacy: accent turchese sulla checkbox --- */
.gform_wrapper.gform-theme .ginput_container_consent input[type="checkbox"] {
    accent-color: #1ab3a3;
}

/* =========================================================================
   Submit = CTA del sito, verde acqua e un po' più grande, allineato sotto
   la colonna dei campi.
   ========================================================================= */
/* Bottone invio a destra. `display:flex` perche' GF rende il footer un flex
   container: con il solo `text-align:right` il bottone restava a sinistra. */
.gform_wrapper.gform-theme .gform_footer,
.gform_wrapper.gform-theme .gform-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    clear: both;               /* non finire accanto a elementi flottati sopra */
    text-align: right;
    margin-top: 1.5rem;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper.gform-theme .gform-footer input[type="submit"],
.gform_wrapper.gform-theme .gform-footer .gform_button {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 1.15rem 3rem;
    background: #1ab3a3;
    color: #fff;
    text-transform: uppercase;
    font-size: .9375rem;
    letter-spacing: .05em;
    line-height: 1.2;
    border: 1px solid #1ab3a3;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:focus,
.gform_wrapper.gform-theme .gform-footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform-footer .gform_button:hover {
    background: #fff;
    color: #1ab3a3;
}

/* --- Mobile: label sopra il campo (stack) --- */
@media (max-width: 767px) {
    .gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) {
        padding-left: 0;
    }
    .gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) > .gfield_label,
    .gform_wrapper.gform-theme .gfield:not(.gfield--type-section):not(.gfield--type-honeypot) > legend.gfield_label {
        position: static;
        -webkit-transform: none;
        transform: none;
        width: 100%;
        text-align: left;
        padding-top: 0;
        margin-bottom: .35rem;
    }
    .gform_wrapper.gform-theme .gform_footer,
    .gform_wrapper.gform-theme .gform-footer {
        padding-left: 0;
    }
}

/* =========================================================================
   Datepicker jQuery UI (#ui-datepicker-div è appeso al <body>, va globale).
   Caricato solo dalle pagine interne, e solo Garanzia ha un date field.
   ========================================================================= */
#ui-datepicker-div.ui-datepicker {
    padding: .5rem;
    background: #fff;
    border: 1px solid #dde4e8;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    z-index: 1000;
}

#ui-datepicker-div .ui-datepicker-header {
    background: #f3f5f6;
    border: 0;
    border-radius: 0;
    padding: .35rem 0;
}

#ui-datepicker-div .ui-datepicker-title {
    margin: 0 2rem;
}

#ui-datepicker-div .ui-datepicker-title select {
    border: 1px solid #dde4e8;
    color: #222;
    padding: .15rem .25rem;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    cursor: pointer;
    top: .35rem;
}

#ui-datepicker-div th {
    color: #5a6870;
    font-weight: 700;
    padding: .4rem;
}

#ui-datepicker-div td a.ui-state-default,
#ui-datepicker-div td span.ui-state-default {
    text-align: center;
    padding: .35rem;
    border: 1px solid transparent;
    background: transparent;
    color: #222;
}

#ui-datepicker-div td a.ui-state-hover {
    background: #f3f5f6;
    border-color: #dde4e8;
}

#ui-datepicker-div td a.ui-state-highlight {
    background: #eafaf7;
    color: #148f83;
}

#ui-datepicker-div td a.ui-state-active {
    background: #1ab3a3;
    border-color: #1ab3a3;
    color: #fff;
}

/* =========================================================================
   Ninja Forms 3 — stessa grafica del blocco Gravity Forms qui sopra
   (label a sinistra 34%, campi grigi, focus/CTA turchese, errori rosso
   leggero). Scope `.nf-form-cont .nf-form-content` per battere il CSS
   "opinionated" di NF (Ninja Forms > Impostazioni > Stili: consigliato
   "Nessuno"; le regole funzionano comunque anche con "Light").
   Le sezioni sono campi HTML con <h3 class="nf-section-title"> (vedi
   docs/ninja-forms/*.nff).
   ========================================================================= */
.nf-form-cont {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.nf-form-cont,
.nf-form-cont input,
.nf-form-cont select,
.nf-form-cont textarea,
.nf-form-cont button {
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
}

/* Legenda "I campi contrassegnati con * sono obbligatori" */
.nf-form-cont .nf-form-fields-required {
    margin-bottom: 1rem;
    text-align: right;
    color: #5a6870;
}

.nf-form-cont .ninja-forms-req-symbol {
    color: #ec008c;
    white-space: nowrap;
    padding-left: .15em;
}

/* --- Layout label a sinistra: griglia label | controllo --- */
.nf-form-cont .nf-field-container {
    clear: both;
    margin-bottom: 1.1rem;
}

.nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .field-wrap {
    display: grid;
    grid-template-columns: calc(34% - 1rem) 1fr;
    column-gap: 1rem;
    align-items: center;
}

.nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .nf-field-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
    text-align: right;
}

/* Righe esplicite: NF da' un `order` alla descrizione che la metterebbe
   sopra il controllo. */
.nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .nf-field-element {
    grid-column: 2;
    grid-row: 1;
}

.nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .nf-field-description {
    grid-column: 2;
    grid-row: 2;
}

/* Il tema da' alle <label> il font 75Bold: qui serve il Roman come in GF.
   Il campo data usa uno <span> al posto della <label>. */
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label-span {
    margin: 0;
    color: #5a6870;
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.3;
}

/* Descrizioni ed errori sotto il controllo, nella colonna destra */
.nf-form-cont .nf-field-description {
    color: #5a6870;
    font-size: .8125rem;
    padding-top: .35rem;
}

.nf-form-cont .nf-field-description p {
    margin: 0;
}

.nf-form-cont .nf-after-field {
    padding-left: 34%;
}

/* --- Titoli di sezione (campi HTML) --- */
.nf-form-cont .html-container {
    margin: 1.75rem 0 1.25rem;
}

.nf-form-cont .nf-section-title {
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid #dde4e8;
    font-size: 1.25rem;
    font-weight: 400;
    color: #222;
}

/* --- Campi: sfondo grigio, focus turchese su bianco ---
   `background-color` e non la scorciatoia: vedi nota nel blocco GF. */
.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.nf-form-cont .nf-form-content select,
.nf-form-cont .nf-form-content textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto;              /* annulla i 50px fissi di NF */
    min-height: 2.75rem;
    padding: .65rem .85rem;
    background-color: #ebebeb;
    border: 1px solid #e3e6e8;
    border-radius: 0;
    box-shadow: none;
    color: #222;
    font-size: 1rem;
    line-height: 1.4;
}

.nf-form-cont .nf-form-content select {
    padding-right: 2.5rem;
}

.nf-form-cont .nf-form-content textarea {
    min-height: 8rem;
    line-height: 1.6;
}

.nf-form-cont .nf-form-content input:focus,
.nf-form-cont .nf-form-content select:focus,
.nf-form-cont .nf-form-content textarea:focus {
    background-color: #fff;
    border-color: #1ab3a3;
    box-shadow: none;
    outline: none;
}

.nf-form-cont .nf-form-content input::placeholder,
.nf-form-cont .nf-form-content textarea::placeholder {
    color: #9da6ab;
}

/* Select: lo stile "Light" di NF avvolge la select in un div con bordo e
   freccia propri; li neutralizziamo e usiamo una freccia sola. */
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div {
    background: transparent;
    border: 0;
}

.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div::after {
    display: none;
}

.nf-form-cont .nf-form-content .list-select-wrap select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6870' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 12px 8px;
}

/* --- Errori: testo e bordo rosso leggero, niente icone NF --- */
.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-form-errors .nf-error-msg {
    color: #e06b6b;
    padding-top: .3rem;
    font-size: .8125rem;
    font-weight: 400;
}

.nf-form-cont .nf-error .ninja-forms-field {
    border-color: #e6a0a0 !important;
}

.nf-form-cont .field-wrap .nf-field-element::after {
    display: none !important;  /* icone "!" rossa e spunta verde di NF */
}

.nf-form-cont .nf-error .nf-field-label label {
    color: #5a6870;
}

/* --- Consenso privacy: checkbox + testo nella colonna destra --- */
.nf-form-cont .checkbox-container .field-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .6rem;
    padding-left: 34%;
}

.nf-form-cont .checkbox-container .nf-field-element {
    order: 1;
    flex: 0 0 auto;
    width: auto;
}

.nf-form-cont .checkbox-container .nf-field-label {
    order: 2;
    flex: 1 1 0;
    padding: 0;
    text-align: left;
}

.nf-form-cont .checkbox-container .nf-field-description {
    order: 3;
    flex: 1 1 100%;
}

.nf-form-cont .checkbox-container .nf-field-label label::before,
.nf-form-cont .checkbox-container .nf-field-label label::after {
    display: none;             /* checkbox finta dello stile "Light" */
}

.nf-form-cont .checkbox-container input[type="checkbox"] {
    display: inline-block !important;
    width: 1rem;
    height: 1rem;
    margin: .15rem 0 0;
    opacity: 1 !important;
    accent-color: #1ab3a3;
}

/* --- File upload (add-on File Uploads): campo grigio + bottone turchese
   come il "Sfoglia" di GF; la barra di avanzamento e' una linea sottile. --- */
.nf-form-cont .file_upload-container .nf-field-element {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    min-height: 2.75rem;
    padding: .45rem;
    background-color: #ebebeb;
    border: 1px solid #e3e6e8;
}

.nf-form-cont .nf-error.file_upload-wrap .nf-field-element {
    border-color: #e6a0a0;
}

/* input file nascosto da NF (0x0): fuori dal flusso, niente gap fantasma */
.nf-form-cont .file_upload-container input[type="file"] {
    position: absolute;
}

.nf-form-cont .files_uploaded:empty {
    display: none;
}

.nf-form-cont .nf-fu-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.nf-form-cont .nf-fu-progress-bar {
    height: 100%;
    background: #1ab3a3;
    box-shadow: none;
}

.nf-form-cont .nf-fu-fileinput-button {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: .55rem 1.4rem;
    background: #1ab3a3;
    color: #fff;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background-color .15s ease;
}

.nf-form-cont .nf-fu-fileinput-button:hover {
    background: #148f83;
}

.nf-form-cont .files_uploaded {
    color: #5a6870;
    font-size: .875rem;
}

/* --- Submit = CTA del sito, a destra --- */
.nf-form-cont .submit-container .field-wrap,
.nf-form-cont .submit-container .nf-field-element {
    display: flex;
    justify-content: flex-end;
    margin-top: .4rem;
}

.nf-form-cont .nf-form-content .submit-container input[type="submit"],
.nf-form-cont .nf-form-content .submit-container input[type="button"],
.nf-form-cont .nf-form-content .submit-container button {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 1.15rem 3rem;
    background: #1ab3a3;
    color: #fff;
    text-transform: uppercase;
    font-size: .9375rem;
    letter-spacing: .05em;
    line-height: 1.2;
    border: 1px solid #1ab3a3;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nf-form-cont .nf-form-content .submit-container input[type="submit"]:hover,
.nf-form-cont .nf-form-content .submit-container input[type="submit"]:focus,
.nf-form-cont .nf-form-content .submit-container input[type="button"]:hover,
.nf-form-cont .nf-form-content .submit-container input[type="button"]:focus {
    background: #fff;
    color: #1ab3a3;
}

/* Messaggio di conferma dopo l'invio */
.nf-form-cont .nf-response-msg {
    padding: 1rem 1.25rem;
    background: #eafaf7;
    border-left: 3px solid #1ab3a3;
    color: #222;
}

.nf-form-cont .nf-response-msg:empty {
    display: none;
}

.nf-form-cont .nf-response-msg p {
    margin: 0;
}

/* --- Mobile: label sopra il campo --- */
@media (max-width: 767px) {
    .nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .field-wrap {
        display: block;
    }
    .nf-form-cont .nf-field-container:not(.submit-container):not(.html-container):not(.hr-container):not(.checkbox-container) .nf-field-label {
        text-align: left;
        margin-bottom: .35rem;
    }
    .nf-form-cont .nf-after-field,
    .nf-form-cont .checkbox-container .field-wrap {
        padding-left: 0;
    }
}

/* =========================================================================
   Datepicker Flatpickr di Ninja Forms (.flatpickr-calendar è appeso al
   <body>, va globale) — stessa palette del datepicker jQuery UI di GF.
   ========================================================================= */
.flatpickr-calendar {
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    font-family: NeueHelveticaPaneuropean55Roman, Helvetica, Arial, sans-serif;
}

.flatpickr-calendar .flatpickr-day {
    border-radius: 0;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: #1ab3a3;
}

.flatpickr-calendar .flatpickr-day:hover {
    background: #f3f5f6;
    border-color: #dde4e8;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
    background: #1ab3a3;
    border-color: #1ab3a3;
    color: #fff;
}