/**
 * Italy country catalog — scoped redesign.
 *
 * All rules are scoped to `.newcataloge-italy-page` so this stylesheet
 * cannot leak to /country/germany/, /country/spain/, etc. Every class
 * uses the `newcataloge-` prefix to avoid collision with `dmc-*`,
 * Tailwind utilities, and WP core.
 */

.newcataloge-italy-page {
    --nc-bg-page:        #faf7f0;
    --nc-bg-card:        #ffffff;
    --nc-bg-section:     #f5f1e6;
    --nc-navy:           #1a2540;
    --nc-navy-soft:      #2c3e7d;
    --nc-gold:           #e9a82a;
    --nc-gold-soft:      #f0d398;
    --nc-gold-bg:        #fff8e1;
    --nc-border:         rgba(26, 37, 64, 0.1);
    --nc-border-strong:  rgba(26, 37, 64, 0.18);
    --nc-text-muted:     #6b7280;
    --nc-text-faint:     #9ca3af;

    --nc-pill-service-bg:   #f0f3fa;
    --nc-pill-service-text: #2c3e7d;
    --nc-pill-verified-bg:  #ecf6ee;
    --nc-pill-verified-text:#1d6e2f;
    --nc-pill-years-bg:     #fff3d9;
    --nc-pill-years-text:   #80591a;
    --nc-pill-mice-bg:      #f3eafc;
    --nc-pill-mice-text:    #5a2db4;

    background: var(--nc-bg-page);
    color: var(--nc-navy);
    font-weight: 400;
}

.newcataloge-italy-page * { box-sizing: border-box; }

/* ── Container ─────────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Breadcrumbs ───────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-breadcrumbs {
    padding: 16px 0 8px;
    font-size: 13px;
    color: var(--nc-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.newcataloge-italy-page .newcataloge-breadcrumbs a {
    color: var(--nc-text-muted);
    text-decoration: none;
    transition: color .15s ease;
}
.newcataloge-italy-page .newcataloge-breadcrumbs a:hover { color: var(--nc-navy); }
.newcataloge-italy-page .newcataloge-breadcrumbs .newcataloge-bc-sep {
    color: var(--nc-text-faint);
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-breadcrumbs .newcataloge-bc-current {
    color: var(--nc-navy);
    font-weight: 500;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-hero {
    background: var(--nc-bg-page);
    padding: 8px 0 56px;
}
/* Two-column hero layout — text left, decorative image right. Only
   kicks in when the country has an image configured (--with-image
   class). Mobile-first: single column by default, side-by-side from
   1024px up. The image itself is hidden on mobile to preserve the
   space for breadcrumbs / cities / CTAs. */
.newcataloge-italy-page .newcataloge-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-hero--with-image .newcataloge-hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 48px;
        align-items: center;
    }
}
.newcataloge-italy-page .newcataloge-hero-image {
    display: none;
}
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-hero-image {
        display: block;
    }
}
.newcataloge-italy-page .newcataloge-hero-image picture {
    display: block;
    width: 100%;
}
.newcataloge-italy-page .newcataloge-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    object-position: center;
}
.newcataloge-italy-page .newcataloge-hero-titlerow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 14px;
}
.newcataloge-italy-page .newcataloge-hero-flag {
    width: 28px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    display: inline-block;
}
.newcataloge-italy-page .newcataloge-hero-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}
.newcataloge-italy-page .newcataloge-hero-title {
    font-family: inherit;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 500;
    color: var(--nc-navy);
    letter-spacing: -0.01em;
    margin: 0;
}
@media (min-width: 768px) {
    .newcataloge-italy-page .newcataloge-hero-title { font-size: 52px; }
}
.newcataloge-italy-page .newcataloge-hero-stat {
    font-size: 15px;
    color: var(--nc-text-muted);
    margin: 0 0 16px;
}
.newcataloge-italy-page .newcataloge-hero-stat strong {
    font-weight: 500;
    color: var(--nc-navy);
    border-bottom: 1px solid var(--nc-navy);
    padding-bottom: 1px;
}
/* On dark hero background — white text + golden underline */
.newcataloge-italy-page .newcataloge-hero .newcataloge-hero-stat {
    color: rgba(255, 255, 255, 0.7);
}
.newcataloge-italy-page .newcataloge-hero .newcataloge-hero-stat strong {
    color: #fff;
    border-bottom-color: #e9a82a6e;
}
.newcataloge-italy-page .newcataloge-hero-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--nc-navy);
    max-width: 780px;
    margin: 0 0 28px;
}
/* Category hero: wider text block since no image on right */
.dmc-category-landing .newcataloge-hero .newcataloge-hero-desc {
    color: rgba(255, 255, 255, 0.85);
    max-width: 780px;
}

/* ── Cities row ────────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-cities {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.newcataloge-italy-page .newcataloge-cities-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nc-text-muted);
    font-weight: 500;
    margin-right: 8px;
}
.newcataloge-italy-page .newcataloge-city-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--nc-bg-card);
    border: 1px solid var(--nc-border);
    color: var(--nc-navy);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.newcataloge-italy-page .newcataloge-city-pill:hover {
    border-color: var(--nc-border-strong);
}
.newcataloge-italy-page .newcataloge-city-count {
    font-size: 12px;
    color: var(--nc-text-muted);
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-city-pill--more {
    border: 1px solid var(--nc-gold);
    color: var(--nc-gold);
    background: var(--nc-bg-card);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}
.newcataloge-italy-page .newcataloge-city-pill--more:hover {
    background: var(--nc-gold-bg);
}
.newcataloge-italy-page .newcataloge-city-pill--more svg {
    width: 12px;
    height: 12px;
}

/* ── Toolbar (sticky filter strip) ─────────────────────────────── */
.newcataloge-italy-page .newcataloge-toolbar {
    background: var(--nc-bg-card);
    border-top: 1px solid var(--nc-border);
    border-bottom: 1px solid var(--nc-border);
    /* Desktop: only sticky when at least one filter is active (the
       chips bar adds real value to keep visible). When no filters are
       set, the toolbar would just be a static sort + search row, so
       letting it scroll out frees the reading area. The class is
       toggled by JS in syncChips() based on activeFilterCount(). */
    position: static;
    top: 0;
    z-index: 30;
}
.newcataloge-italy-page .newcataloge-toolbar.has-active-filters {
    position: sticky;
}
@media (max-width: 1023px) {
    /* Mobile: keep sticky always — the [Filters] button needs to be
       reachable from anywhere on the page. */
    .newcataloge-italy-page .newcataloge-toolbar {
        position: sticky;
    }
}
.newcataloge-italy-page .newcataloge-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    flex-wrap: wrap;
}
.newcataloge-italy-page .newcataloge-toolbar-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
}
.newcataloge-italy-page .newcataloge-toolbar-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--nc-text-muted);
    pointer-events: none;
}
.newcataloge-italy-page .newcataloge-toolbar-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 6px;
    border: 1px solid var(--nc-border);
    background: var(--nc-bg-card);
    color: var(--nc-navy);
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.newcataloge-italy-page .newcataloge-toolbar-search input:focus {
    border-color: var(--nc-navy-soft);
    box-shadow: 0 0 0 3px rgba(44, 62, 125, 0.1);
}
.newcataloge-italy-page .newcataloge-toolbar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.newcataloge-italy-page .newcataloge-toolbar-sort select {
    height: 40px;
    padding: 0 32px 0 14px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: var(--nc-bg-card);
    color: var(--nc-navy);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.newcataloge-italy-page .newcataloge-toolbar-count {
    font-size: 14px;
    color: var(--nc-text-muted);
}
.newcataloge-italy-page .newcataloge-toolbar-count strong {
    color: var(--nc-navy);
    font-weight: 500;
}
.newcataloge-italy-page .newcataloge-toolbar-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 0 12px;
    margin: 0;
}
.newcataloge-italy-page .newcataloge-toolbar-chips:empty { display: none; }
.newcataloge-italy-page .newcataloge-toolbar-sort-label {
    font-size: 14px;
    color: var(--nc-text-muted);
}
.newcataloge-italy-page .newcataloge-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--nc-pill-service-bg);
    color: var(--nc-pill-service-text);
    font-size: 12px;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    transition: background .15s;
}
.newcataloge-italy-page .newcataloge-chip-active:hover {
    background: #e4e9f5;
}
.newcataloge-italy-page .newcataloge-chip-active span.x {
    color: var(--nc-text-muted);
    font-weight: 400;
}

/* Mobile chip summary: instead of rendering each chip on the toolbar
   (which eats vertical space when names are long), show a single
   compact pill: "N filters selected · View all". Tapping expands to
   the full chip list, with a "Hide all" pill at the end to collapse.
   Desktop: toggle hidden, chips wrap freely.

   Sizing intentionally tight (height ~32px) so the sticky toolbar
   stays slim on mobile screens. */
.newcataloge-italy-page .newcataloge-chips-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--nc-pill-service-bg);
    color: var(--nc-navy);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    line-height: 1.3;
}
.newcataloge-italy-page .newcataloge-chips-toggle strong {
    font-weight: 700;
}
.newcataloge-italy-page .newcataloge-chips-toggle:hover {
    background: #e4e9f5;
    border-color: #466a9f;
}
/* Show/hide the two label spans depending on container state. */
.newcataloge-italy-page .newcataloge-chips-toggle .newcataloge-chips-toggle-label-hide,
.newcataloge-italy-page .newcataloge-toolbar-chips.is-expanded
    .newcataloge-chips-toggle .newcataloge-chips-toggle-label-show {
    display: none;
}
.newcataloge-italy-page .newcataloge-toolbar-chips.is-expanded
    .newcataloge-chips-toggle .newcataloge-chips-toggle-label-hide {
    display: inline;
}

@media (max-width: 1023px) {
    /* Collapsed state — hide every individual chip; only the summary
       toggle pill is visible. */
    .newcataloge-italy-page .newcataloge-toolbar-chips:not(.is-expanded)
        .newcataloge-chip-active {
        display: none;
    }
    /* Expanded state — let chips wrap naturally on multiple lines. */
    .newcataloge-italy-page .newcataloge-toolbar-chips.is-expanded {
        flex-wrap: wrap;
    }
}
@media (min-width: 1024px) {
    /* Desktop: chips wrap freely, toggle button is unnecessary. */
    .newcataloge-italy-page .newcataloge-chips-toggle {
        display: none;
    }
}

/* ── Body layout ───────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-body {
    padding: 28px 0 80px;
}
.newcataloge-italy-page .newcataloge-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 1023px) {
    .newcataloge-italy-page .newcataloge-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-sidebar {
    align-self: start;
}
@media (max-width: 1023px) {
    .newcataloge-italy-page .newcataloge-sidebar-inner {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
        min-height: auto !important;
        will-change: auto !important;
    }
}
/* Desktop only — sticky + internal scroll. Mobile uses a fixed
   drawer override further down in this file.

   Wheel-scroll behaviour:
     - overflow-y: scroll           — force scroll container ON
                                       always (even when content
                                       fits) so wheel events bind
                                       to the sidebar reliably
     - scrollbar-width: none / ::-webkit-scrollbar { width: 0 }
                                     — hide the visible bar in every
                                       browser; wheel still works
     - overscroll-behavior: contain — wheel events stay inside the
                                       sidebar at top/bottom edges,
                                       don't bubble to the page
     - scroll-behavior: smooth      — wheel + keyboard scroll feels
                                       polished, not jumpy
     - touch-action: pan-y          — touch devices honour vertical
                                       drag without quirks
     - hover the sidebar → wheel up/down scrolls filter list directly. */
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-sidebar {
        position: sticky !important;
        top: 80px !important;
        max-height: calc(100vh - 100px) !important;
        max-height: calc(100dvh - 100px) !important;
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .newcataloge-italy-page .newcataloge-sidebar-inner {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        will-change: transform;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .newcataloge-italy-page .newcataloge-sidebar-inner::-webkit-scrollbar { display: none; }
    .newcataloge-italy-page .nc-scroll-indicator { display: none; }
}
.newcataloge-italy-page .newcataloge-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0 12px;
    margin-bottom: 4px;
}
.newcataloge-italy-page .newcataloge-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nc-text-muted);
    font-weight: 500;
}
.newcataloge-italy-page .newcataloge-clear-all {
    font-size: 12px;
    color: var(--nc-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color .15s;
}
.newcataloge-italy-page .newcataloge-clear-all:hover { color: var(--nc-navy); }
.newcataloge-italy-page .newcataloge-clear-all:disabled {
    color: var(--nc-text-faint);
    cursor: not-allowed;
}

.newcataloge-italy-page .newcataloge-fgroup {
    border-top: 1px solid var(--nc-border);
    padding: 14px 0;
}
.newcataloge-italy-page .newcataloge-fgroup-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    color: var(--nc-navy);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}
.newcataloge-italy-page .newcataloge-fgroup-summary::-webkit-details-marker { display: none; }
.newcataloge-italy-page .newcataloge-fgroup-summary::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
    transition: transform .2s ease;
}
.newcataloge-italy-page .newcataloge-fgroup[open] .newcataloge-fgroup-summary::after {
    transform: rotate(180deg);
}
.newcataloge-italy-page .newcataloge-fgroup-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.newcataloge-italy-page .newcataloge-fgroup-list li { margin: 0; padding: 0; }
/* Items beyond the visible-by-default cutoff (e.g. regions #6-20) are
   tucked away. Toggling `is-expanded` on the <ul> reveals them. */
.newcataloge-italy-page .newcataloge-fgroup-list .newcataloge-fitem.is-extra {
    display: none;
}
.newcataloge-italy-page .newcataloge-fgroup-list.is-expanded .newcataloge-fitem.is-extra {
    display: block;
}
/* "Show all N regions" / "Show fewer" toggle button — small, quiet,
   sits below the list inside the same details. */
.newcataloge-italy-page .newcataloge-fgroup-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 8px 0 4px;
    margin: 0;
    color: var(--nc-gold);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.newcataloge-italy-page .newcataloge-fgroup-more:hover {
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-fgroup-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--nc-navy);
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-fgroup-list input[type="checkbox"],
.newcataloge-italy-page .newcataloge-fgroup-list input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--nc-gold);
    cursor: pointer;
    flex: 0 0 auto;
}
.newcataloge-italy-page .newcataloge-fgroup-list label > span:first-of-type { flex: 1; }
.newcataloge-italy-page .newcataloge-fgroup-list .newcataloge-fcount {
    color: var(--nc-text-muted);
    font-size: 12px;
    font-weight: 400;
    flex: 0 0 auto;
}
.newcataloge-italy-page .newcataloge-fgroup-list label:has(input:disabled) {
    color: var(--nc-text-faint);
    cursor: not-allowed;
}
.newcataloge-italy-page .newcataloge-fgroup-soon {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--nc-text-faint);
    font-style: italic;
}

/* ── Mobile drawer toggle ──────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--nc-border);
    background: var(--nc-bg-card);
    color: var(--nc-navy);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    height: 40px;
    flex: 0 0 auto;
}
@media (max-width: 1023px) {
    /* Sticky toolbar gets stripped down on mobile to: [Filters] [Sort],
       with active chips on a second row below. Search & result count
       are hidden — search lives in the drawer state, count is implicit
       from chip presence. */
    .newcataloge-italy-page .newcataloge-mobile-filter-btn { display: inline-flex; }
    /* Mobile toolbar: two rows. First row holds Filters + Sort; the
       search input drops to a full-width second row so it stays
       reachable without opening the filter drawer. */
    .newcataloge-italy-page .newcataloge-toolbar-inner {
        gap: 10px;
        padding: 10px 0;
        flex-wrap: wrap;
    }
    .newcataloge-italy-page .newcataloge-toolbar-count { display: none; }
    .newcataloge-italy-page .newcataloge-toolbar-sort-label { display: none; }
    .newcataloge-italy-page .newcataloge-toolbar-sort { margin-left: auto; }
    .newcataloge-italy-page .newcataloge-toolbar-sort select {
        height: 40px;
        padding: 0 28px 0 12px;
        font-size: 13px;
    }
    .newcataloge-italy-page .newcataloge-toolbar-search {
        order: 99;       /* push to second row regardless of DOM order */
        flex: 1 0 100%;
        max-width: none;
    }
    /* iOS Safari auto-zooms when an <input> has font-size < 16px on
       focus — disorienting + breaks scroll position. Bumping to 16px
       defeats the heuristic. Same fix applied to the cities-modal
       filter input below. */
    .newcataloge-italy-page .newcataloge-toolbar-search input,
    .newcataloge-italy-page .newcataloge-modal-search,
    .newcataloge-italy-page .newcataloge-toolbar-sort select {
        height: 40px;
        font-size: 16px;
    }
    /* Mobile cities-modal override now lives at the bottom of this
       file so it follows the base modal-grid rule in source order
       (equal specificity → last one wins). */
    .newcataloge-italy-page .newcataloge-toolbar-chips {
        padding: 0 0 10px;
    }
    .newcataloge-italy-page .newcataloge-sidebar {
        position: fixed;
        top: 0;
        /* Animate via `left` (not transform) so that `position: sticky`
           on children (the apply CTA) keeps working — transform on a
           sticky's ancestor breaks the sticky pinning in mobile browsers. */
        left: -110%;
        bottom: 0;
        width: min(340px, 92vw);
        height: 100vh;
        height: 100dvh;            /* dynamic viewport — handles iOS URL bar */
        max-height: 100vh;
        max-height: 100dvh;
        background: var(--nc-bg-card);
        z-index: 99999;
        padding: 64px 20px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;  /* momentum scroll on old iOS */
        overscroll-behavior: contain;       /* don't bubble scroll to body */
        transition: left .25s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,.18);
        touch-action: pan-y;
    }
    .newcataloge-italy-page .newcataloge-sidebar.is-open {
        left: 0;
    }
    /* Reserve room at the drawer's bottom so the last filter group
       isn't hidden under the sticky "View N results" CTA. JS adds
       .has-apply when the bar is visible (≥1 filter active). */
    .newcataloge-italy-page .newcataloge-sidebar.has-apply {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
    .newcataloge-italy-page .newcataloge-sidebar-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        margin: 0;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--nc-navy);
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        border-radius: 6px;
        z-index: 2;
    }
    .newcataloge-italy-page .newcataloge-sidebar-close:hover { background: var(--nc-bg-section); }
    .newcataloge-italy-page .newcataloge-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 99998;
        touch-action: none;        /* clicks/touches don't pass through to page */
    }
    /* Lock the page body when drawer is open. position:fixed survives
       iOS Safari better than overflow:hidden. */
    body.newcataloge-no-scroll {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
}
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-sidebar-close,
    .newcataloge-italy-page .newcataloge-sidebar-backdrop { display: none !important; }
}

/* ── Main column ───────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 6px;
    flex-wrap: wrap;
}
.newcataloge-italy-page .newcataloge-section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--nc-navy);
    display: flex;
    align-items: center;
    gap: 10px;
}
.newcataloge-italy-page .newcataloge-section-title svg {
    color: var(--nc-gold);
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.newcataloge-italy-page .newcataloge-section-meta {
    color: var(--nc-text-muted);
    font-size: 14px;
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-section-link {
    font-size: 13px;
    color: var(--nc-navy);
    font-weight: 500;
    text-decoration: none;
}
.newcataloge-italy-page .newcataloge-section-link:hover {
    color: var(--nc-navy-soft);
    text-decoration: underline;
}
.newcataloge-italy-page .newcataloge-section-sub {
    margin: 0 0 16px;
    color: var(--nc-text-muted);
    font-size: 14px;
}
.newcataloge-italy-page .newcataloge-rest-meta {
    margin: 0 0 16px;
    color: var(--nc-text-muted);
    font-size: 14px;
}

.newcataloge-italy-page .newcataloge-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

/* ── Card (shared base) ────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: start;
    background: var(--nc-bg-card);
    border-radius: 10px;
    border: 1px solid var(--nc-border);
    padding: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.newcataloge-italy-page .newcataloge-card:hover {
    border-color: var(--nc-border-strong);
    box-shadow: 0 2px 8px rgba(26, 37, 64, 0.04);
}
.newcataloge-italy-page .newcataloge-card[hidden] { display: none; }

.newcataloge-italy-page .newcataloge-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #466a9f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    flex: 0 0 auto;
    overflow: hidden;
}
/* Owner-uploaded logo present → white plate so transparent PNGs render correctly. */
.newcataloge-italy-page .newcataloge-card-avatar:has(img) {
    background: #ffffff;
    border: 1px solid var(--nc-border);
}
.newcataloge-italy-page .newcataloge-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 4px;
    box-sizing: border-box;
}
.newcataloge-italy-page .newcataloge-card--featured .newcataloge-card-avatar img {
    padding: 6px;
}

.newcataloge-italy-page .newcataloge-card-body { min-width: 0; }
.newcataloge-italy-page .newcataloge-card-titleline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.newcataloge-italy-page .newcataloge-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-card-title a {
    color: inherit;
    text-decoration: none;
}
.newcataloge-italy-page .newcataloge-card-title a:hover { color: var(--nc-navy-soft); }

.newcataloge-italy-page .newcataloge-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--nc-text-muted);
    font-weight: 400;
    flex-wrap: wrap;
}
.newcataloge-italy-page .newcataloge-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.newcataloge-italy-page .newcataloge-card-meta svg {
    width: 12px;
    height: 12px;
    color: var(--nc-text-muted);
    flex: 0 0 auto;
}

/* ── Rating row ─────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--nc-text-muted);
}
.newcataloge-italy-page .newcataloge-stars,
.newcataloge-italy-page .newcataloge-stars .dmc-mini-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.newcataloge-italy-page .newcataloge-stars svg.dmc-mini-star {
    width: 13px;
    height: 13px;
}
.newcataloge-italy-page .newcataloge-stars .dmc-mini-star--full,
.newcataloge-italy-page .newcataloge-stars .dmc-mini-star--half { color: var(--nc-gold); }
.newcataloge-italy-page .newcataloge-stars .dmc-mini-star--empty { color: #e5e7eb; }
.newcataloge-italy-page .newcataloge-rating-num {
    color: var(--nc-navy);
    font-weight: 500;
    font-size: 13px;
}
.newcataloge-italy-page .newcataloge-rating-count { color: var(--nc-text-muted); }
.newcataloge-italy-page .newcataloge-rating-empty {
    color: var(--nc-text-faint);
    font-style: italic;
    font-size: 12px;
}

/* Certifications badge — re-uses verified palette but distinct */
.newcataloge-italy-page .newcataloge-badge--certs {
    background: #eef2ff;
    color: #3949ab;
}

.newcataloge-italy-page .newcataloge-card-excerpt {
    margin: 0 0 10px;
    color: var(--nc-navy);
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newcataloge-italy-page .newcataloge-card-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.newcataloge-italy-page .newcataloge-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--nc-pill-service-bg);
    color: var(--nc-pill-service-text);
    font-size: 11px;
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-chip--hidden { display: none; }
.newcataloge-italy-page .newcataloge-card-services.is-expanded .newcataloge-chip--hidden {
    display: inline-flex;
}
.newcataloge-italy-page .newcataloge-card-services.is-expanded .newcataloge-chip-more {
    display: none;
}
.newcataloge-italy-page button.newcataloge-chip-more {
    background: transparent;
    color: var(--nc-text-muted);
    padding: 4px 8px;
    font-weight: 400;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.newcataloge-italy-page button.newcataloge-chip-more:hover {
    background: var(--nc-pill-service-bg);
    color: var(--nc-navy);
}
span.newcataloge-chip-more {
    background: transparent;
    color: var(--nc-text-muted);
    padding: 4px 6px;
    font-weight: 400;
}

.newcataloge-italy-page .newcataloge-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.newcataloge-italy-page .newcataloge-badge svg { width: 11px; height: 11px; flex: 0 0 auto; }
.newcataloge-italy-page .newcataloge-badge--verified {
    background: var(--nc-pill-verified-bg);
    color: var(--nc-pill-verified-text);
}
.newcataloge-italy-page .newcataloge-badge--years {
    background: var(--nc-pill-years-bg);
    color: var(--nc-pill-years-text);
}
.newcataloge-italy-page .newcataloge-badge--mice {
    background: var(--nc-pill-mice-bg);
    color: var(--nc-pill-mice-text);
}
/* Headline company-type badge (Wedding Planner, Tour Operator, Yacht
   Charter, etc). Indigo so it's visually distinct from the warmer
   --mice/specialty badge — the two can sit side by side on a card. */
.newcataloge-italy-page .newcataloge-badge--type {
    background: #e0e7ff;
    color: #3730a3;
}

.newcataloge-italy-page .newcataloge-card-action {
    align-self: center;
}
.newcataloge-italy-page .newcataloge-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    background: var(--nc-bg-card);
    color: var(--nc-navy);
    border: 1px solid var(--nc-border-strong);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.newcataloge-italy-page .newcataloge-cta:hover {
    border-color: #466a9f;
}
.newcataloge-italy-page .newcataloge-cta svg { width: 12px; height: 12px; }

/* ── Featured card variant ─────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-card--featured {
    border: 1px solid var(--nc-gold-soft);
    padding: 20px;
    padding-top: 28px;
}
.newcataloge-italy-page .newcataloge-card--featured .newcataloge-card-avatar {
    width: 56px;
    height: 56px;
    font-size: 17px;
}
.newcataloge-italy-page .newcataloge-card--featured .newcataloge-cta {
    background: var(--nc-gold);
    color: #ffffff;
    border-color: var(--nc-gold);
    padding: 10px 18px;
    font-size: 13px;
}
.newcataloge-italy-page .newcataloge-card--featured .newcataloge-cta:hover {
    background: #cc8e1f;
    border-color: #cc8e1f;
}
.newcataloge-italy-page .newcataloge-card-flag {
    position: absolute;
    top: 0;
    left: 16px;
    transform: translateY(-50%);
    background: var(--nc-gold);
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
}

/* ── CTA card (in-grid promo) ──────────────────────────────────── */
.newcataloge-italy-page .newcataloge-cta-card {
    background: linear-gradient(135deg, #2c4875 0%, #314b72 100%);
    color: #ffffff;
    border: 1px solid #1a2d4d;
    padding: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
}
.newcataloge-italy-page .newcataloge-cta-card-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
}
.newcataloge-italy-page .newcataloge-cta-card-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}
.newcataloge-italy-page .newcataloge-cta-card-icon svg {
    width: 44px;
    height: 44px;
}
.newcataloge-italy-page .newcataloge-cta-card-body { min-width: 0; }
.newcataloge-italy-page .newcataloge-cta-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}
.newcataloge-italy-page .newcataloge-cta-card-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
.newcataloge-italy-page .newcataloge-cta-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--nc-gold);
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.newcataloge-italy-page .newcataloge-cta-card-btn:hover { background: #cc8e1f; }
.newcataloge-italy-page .newcataloge-cta-card:hover {
    border-color: #1a2540;
    box-shadow: 0 6px 16px rgba(26, 37, 64, 0.15);
}
@media (max-width: 640px) {
    .newcataloge-italy-page .newcataloge-cta-card-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
        padding: 20px 18px;
    }
    .newcataloge-italy-page .newcataloge-cta-card-icon { margin: 0 auto; }
    .newcataloge-italy-page .newcataloge-cta-card-btn { justify-content: center; }
}

/* ── Empty-state (zero results) ────────────────────────────────── */
.newcataloge-italy-page .newcataloge-empty-state {
    text-align: center;
    padding: 56px 28px;
    background: var(--nc-bg-card);
    border: 1px solid var(--nc-gold-soft);
    border-radius: 12px;
}
.newcataloge-italy-page .newcataloge-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--nc-gold-bg);
    color: var(--nc-gold);
    margin-bottom: 18px;
}
.newcataloge-italy-page .newcataloge-empty-state__title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-empty-state__text {
    margin: 0 auto 22px;
    max-width: 480px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nc-text-muted);
}
.newcataloge-italy-page .newcataloge-empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--nc-gold);
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease;
}
.newcataloge-italy-page .newcataloge-empty-state__btn:hover { background: #cc8e1f; }
.newcataloge-italy-page .newcataloge-empty-state__hint {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--nc-text-faint);
    font-style: italic;
}

/* ── Old empty (kept for x-show fallback) ──────────────────────── */
.newcataloge-italy-page .newcataloge-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--nc-bg-card);
    border-radius: 10px;
    border: 1px dashed var(--nc-border);
}
.newcataloge-italy-page .newcataloge-empty svg {
    color: var(--nc-text-faint);
    margin-bottom: 12px;
}
.newcataloge-italy-page .newcataloge-empty h3 {
    margin: 0 0 6px;
    color: var(--nc-navy);
    font-size: 16px;
    font-weight: 500;
}
.newcataloge-italy-page .newcataloge-empty p {
    margin: 0 0 16px;
    color: var(--nc-text-muted);
    font-size: 14px;
}

/* ── Pagination ────────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 0;
    flex-wrap: wrap;
}
.newcataloge-italy-page .newcataloge-page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--nc-border);
    background: var(--nc-bg-card);
    color: var(--nc-navy);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s, color .15s;
}
.newcataloge-italy-page .newcataloge-page-link:hover:not(.is-active):not(:disabled) {
    border-color: var(--nc-border-strong);
}
.newcataloge-italy-page .newcataloge-page-link.is-active {
    background: var(--nc-gold);
    border-color: var(--nc-gold);
    color: #ffffff;
}
.newcataloge-italy-page .newcataloge-page-link:disabled {
    color: var(--nc-text-faint);
    cursor: not-allowed;
}
.newcataloge-italy-page .newcataloge-page-ellipsis {
    color: var(--nc-text-muted);
    padding: 0 4px;
    font-size: 14px;
}

/* ── Loading state ─────────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-results.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity .15s;
}

/* ── Modal (all cities) ────────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.newcataloge-italy-page .newcataloge-modal.is-open { display: flex; }
.newcataloge-italy-page .newcataloge-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 37, 64, 0.55);
}
.newcataloge-italy-page .newcataloge-modal-dialog {
    position: relative;
    background: var(--nc-bg-card);
    border-radius: 12px;
    padding: 28px;
    /* Match the page container width so the cities modal feels like
       part of the page rhythm rather than a centred card. Mobile keeps
       width:100% with the modal's outer 24px padding handling gutters. */
    max-width: 1240px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.newcataloge-italy-page .newcataloge-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--nc-text-muted);
    font-size: 22px;
    cursor: pointer;
    border-radius: 6px;
}
.newcataloge-italy-page .newcataloge-modal-close:hover { background: var(--nc-bg-section); }
.newcataloge-italy-page .newcataloge-modal-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--nc-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.newcataloge-italy-page .newcataloge-modal-title-count {
    font-size: 13px;
    color: var(--nc-text-muted);
    font-weight: 400;
}
.newcataloge-italy-page .newcataloge-modal-search {
    width: 100%;
    /* Touch-friendly target with proper vertical breathing room.
       font-size:16px also defeats iOS Safari's auto-zoom on focus. */
    height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 16px;
    outline: none;
}
.newcataloge-italy-page .newcataloge-modal-search:focus {
    border-color: var(--nc-navy-soft);
}
.newcataloge-italy-page .newcataloge-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}
.newcataloge-italy-page .newcataloge-modal-grid .newcataloge-city-pill {
    padding: 6px 12px;
    font-size: 12px;
    justify-content: space-between;
}

/* Modal grid is now grouped by region (regions sorted by total count
   DESC). Region headers act as visual anchors so the long-tail of
   tiny cities reads as "browse by region" rather than 117 random
   pills. Pills inside each region wrap inline like tags. Overrides
   the base `display: grid` rule above by source order. */
.newcataloge-italy-page .newcataloge-modal-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding-right: 4px;
}
.newcataloge-italy-page .newcataloge-modal-region-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--nc-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-modal-region-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--nc-text-muted);
}
.newcataloge-italy-page .newcataloge-modal-region-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Modal-body wrapper around the lazy-loaded content. Reserves vertical
   space so the dialog doesn't visibly resize when AJAX HTML lands. */
.newcataloge-italy-page .newcataloge-modal-body {
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.newcataloge-italy-page .newcataloge-modal-loading {
    margin: 40px auto;
    font-size: 13px;
    color: var(--nc-text-muted);
    text-align: center;
}

/* Mobile: tighter region pills inside the grouped layout. Modal-grid
   itself stays as a vertical stack of region sections (defined above
   in the unconditional rule); only the pill sizing is touched here. */
@media (max-width: 1023px) {
    .newcataloge-italy-page .newcataloge-modal-region-cities .newcataloge-city-pill {
        gap: 6px;
        padding: 6px 10px;
        justify-content: flex-start;
    }
}

/* ── Responsive card layout ────────────────────────────────────── */
@media (max-width: 640px) {
    .newcataloge-italy-page .newcataloge-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .newcataloge-italy-page .newcataloge-card-action {
        grid-column: 1 / -1;
    }
    .newcataloge-italy-page .newcataloge-cta {
        width: 100%;
        justify-content: center;
    }
    .newcataloge-italy-page .newcataloge-toolbar-chips {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Visually-hidden helper ────────────────────────────────────── */
.newcataloge-italy-page .newcataloge-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

[x-cloak] { display: none !important; }

/* ── Floating "back to top of results" button ────────────────────
   Appears bottom-right when filters are active AND the user has
   scrolled past the results section header. Saves a long manual
   scroll after ticking a sidebar checkbox far down the page.
   Hidden by default (HTML `hidden` attr); JS removes that and
   toggles `.is-visible` for the fade transition. */
.newcataloge-italy-page .newcataloge-scrolltop-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 14px;
    background: #466a9f;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(26, 37, 64, 0.28);
    font: 600 13px/1 inherit;
    cursor: pointer;
    /* Initial off-state: invisible + slid down so the appearance is
       a graceful slide-up rather than a hard pop-in. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease, background .15s ease;
}
.newcataloge-italy-page .newcataloge-scrolltop-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.newcataloge-italy-page .newcataloge-scrolltop-btn:hover {
    background: #3a5a89;  /* slight blue lift */
}
.newcataloge-italy-page .newcataloge-scrolltop-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.newcataloge-italy-page .newcataloge-scrolltop-btn svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    /* Mobile: lift above the iOS bottom safe-area + label-only icon
       to keep the FAB compact. */
    .newcataloge-italy-page .newcataloge-scrolltop-btn {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        padding: 11px 14px;
    }
    .newcataloge-italy-page .newcataloge-scrolltop-btn span {
        display: none;
    }
}

/* Desktop ≥1024px: hide the floating FAB — its sidebar twin is more
   discoverable since the sidebar is sticky and right under the user's
   eye while they pick filters. Below 1024px the sidebar is a drawer
   (hidden until the user opens it), so the FAB stays as the visible
   surface. */
@media (min-width: 1024px) {
    .newcataloge-italy-page .newcataloge-scrolltop-btn {
        display: none !important;
    }
}

/* ── Sidebar twin of the scroll-to-top button (desktop only) ─────
   Visually integrated with the sidebar — looks like the closing row
   of the filter list, not a foreign UI element.

   Design:
     - Soft cream-to-page-bg gradient (top → bottom) so the button
       feels like it's emerging from the sidebar surface
     - Frosted blur over content scrolling underneath
     - Top hairline matches filter-group dividers
     - Full-bleed: edge-to-edge with sidebar, no border-radius
     - Uppercase + letter-spacing reads as a "section divider"
       label rather than a button — same grammar the sidebar
       eyebrow already uses
     - Hover: warm-up, navy border accent, arrow lifts (delight
       without yanking the user's attention)

   Bottom-pinned with position: sticky inside the sidebar's
   overflow-y, so the sticky page toolbar above can't cover it.

   Visibility rule (filters active + scrolled past results header)
   is shared with the mobile FAB; both surfaces are toggled by the
   same JS via `.is-visible`. */
.newcataloge-italy-page .newcataloge-sidebar-scrolltop {
    /* Default off-state; JS removes the `hidden` attr after binding,
       then `.is-visible` swaps to flex. */
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 16px 0 0;
    padding: 16px 18px;
    /* Soft vertical gradient: lighter at top → page-bg at bottom,
       so the button looks like it's lifting out of the sidebar
       rather than sitting on top of it. */
        background: linear-gradient(180deg, rgb(245 241 230 / 9%) 0%, rgb(250 247 240 / 0%) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
            backdrop-filter: blur(10px) saturate(125%);
    color: var(--nc-navy);
    /* Top divider matches filter-group dividers exactly — feels
       like another row in the same visual list. */
    border: 0;
    border-top: 1px solid var(--nc-border);
    /* Full-bleed; welded to sidebar bottom. */
    border-radius: 0;
    /* Soft uplift shadow only at the very top edge — signals
       "above content" without dropping a heavy floating shadow. */
    box-shadow: 0 -10px 18px -10px rgba(26, 37, 64, 0.12);
    font: 600 11px/1 inherit;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .22s ease,
                border-top-color .22s ease,
                box-shadow .22s ease,
                color .15s ease;
    /* Sticky to the BOTTOM of the sidebar's overflow container so
       it stays pinned over the last filter group while the user
       is mid-page. */
    position: sticky;
    bottom: 0;
    z-index: 6;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    /* Older browsers: fall back to fully opaque sidebar tint. */
    .newcataloge-italy-page .newcataloge-sidebar-scrolltop {
        background: var(--nc-bg-section);
    }
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop.is-visible {
    display: inline-flex;
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop svg {
    /* Slightly larger + transition prepped so the hover lift looks
       deliberate (not an accidental jitter). */
    width: 13px;
    height: 13px;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:hover {
    /* Warm cream glow + navy accent on the divider — communicates
       affordance without breaking the sidebar palette. */
    background:
        linear-gradient(180deg,
            rgba(252, 247, 233, 1) 0%,
            rgba(245, 241, 230, 1) 100%);
    border-top-color: rgba(26, 37, 64, 0.28);
    box-shadow: 0 -12px 24px -10px rgba(26, 37, 64, 0.18);
    color: var(--nc-navy);
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:hover svg {
    transform: translateY(-3px);
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:active {
    background: rgba(245, 241, 230, 1);
    box-shadow: 0 -6px 12px -8px rgba(26, 37, 64, 0.15);
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:focus-visible {
    outline: 2px solid var(--nc-navy);
    outline-offset: -2px;
}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:hover {
    background: #243561;
    transform: translateY(-1px);
        color: white;

}
.newcataloge-italy-page .newcataloge-sidebar-scrolltop:focus-visible {
    outline: 2px solid var(--nc-navy);
    outline-offset: 3px;
}

/* Mobile: hide the sidebar twin — it lives inside the drawer, which
   is closed by default. The FAB above takes over below 1024px. */
@media (max-width: 1023px) {
    .newcataloge-italy-page .newcataloge-sidebar-scrolltop {
        display: none !important;
    }
}

/* ── Mobile "View N results" CTA inside the drawer ─────────────────
   Sticky bottom bar — pinned to the visible bottom of the drawer's
   internal scroll viewport so it stays reachable without thumb gymnastics
   no matter where in the filter list the user is. Only rendered on
   mobile (≤1023px) and only when at least one filter is active.
   Click → closeDrawer() + smooth-scroll to the results list. */
.newcataloge-italy-page .newcataloge-sidebar-apply {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Pinned to the bottom of the viewport with width matching the
       drawer (which has no transform now, so position:fixed children
       resolve against the actual viewport). Independent of the
       drawer's scroll, always welded to the bottom edge. The drawer
       gets extra padding-bottom via .has-apply so the last filter
       group isn't hidden behind this bar. */
    position: fixed;
    bottom: 0;
    left: 0;
    width: min(340px, 92vw);
    padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #1a2540;
    color: #ffffff;
    border: 0;
    border-radius: 0;
    font: 700 14px/1 inherit;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    z-index: 100000;
    box-shadow: 0 -10px 22px -10px rgba(26, 37, 64, 0.5);
    transition: background .18s ease;
}
.newcataloge-italy-page .newcataloge-sidebar-apply.is-visible {
    display: inline-flex;
}
.newcataloge-italy-page .newcataloge-sidebar-apply:hover,
.newcataloge-italy-page .newcataloge-sidebar-apply:focus-visible {
    background: #243561;
    outline: none;
}
.newcataloge-italy-page .newcataloge-sidebar-apply:active {
    background: #11192b;
}
.newcataloge-italy-page .newcataloge-sidebar-apply svg {
    flex-shrink: 0;
    transition: transform .2s ease;
}
.newcataloge-italy-page .newcataloge-sidebar-apply:hover svg {
    transform: translateX(3px);
}
.newcataloge-italy-page .newcataloge-sidebar-apply-label {
    font-weight: 700;
}
.newcataloge-italy-page .newcataloge-sidebar-apply-label #newcataloge-sidebar-apply-count {
    /* gold accent on the number itself — pops against navy bar */
    color: #e9a82a;
}
@media (min-width: 1024px) {
    /* Desktop sidebar is its own column with normal flow + scrolltop —
       no need for a "view results" CTA here, the list is visible. */
    .newcataloge-italy-page .newcataloge-sidebar-apply {
        display: none !important;
    }
}

/* ── Card-host mode — homepage + search ───────────────────────────
   When the body has the catalog page-class only as a styling host
   for cards, undo the catalog's page-level chrome so the rest of
   the host page (hero, sections, footer) renders untouched. */
body.newcataloge-italy-page.is-card-host-only {
    background: transparent;
    color: inherit;
    font-weight: inherit;
}
body.newcataloge-italy-page.is-card-host-only .newcataloge-cards {
    /* Constrain the card column to a sane width inside hosting
       sections that don't enforce their own container. */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ── 3-up grid variant ────────────────────────────────────────────
   Used on the homepage "Finest DMCs" section. Each card collapses
   to the stacked (avatar+content / action-below) layout regardless
   of viewport, because in a ~360px column the side-by-side
   avatar/content/CTA layout cramps. */
.newcataloge-italy-page .newcataloge-cards.newcataloge-cards--grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.newcataloge-italy-page .newcataloge-cards--grid-3 .newcataloge-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
}
.newcataloge-italy-page .newcataloge-cards--grid-3 .newcataloge-card-action {
    grid-column: 1 / -1;
}
.newcataloge-italy-page .newcataloge-cards--grid-3 .newcataloge-cta {
    width: 100%;
    justify-content: center;
}
@media (max-width: 960px) {
    .newcataloge-italy-page .newcataloge-cards.newcataloge-cards--grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .newcataloge-italy-page .newcataloge-cards.newcataloge-cards--grid-3 {
        grid-template-columns: 1fr;
    }
}