:root { --v1-logo: url("https://www.carratellire.com/media/9D7BLkNNNlAr"); }
html { scroll-behavior: smooth; }
/* Ported V1 affordances: inline anchors need the same centering as buttons. */
.v1-static .btn, .v1-static .btn-outline, .v1-static .btn-icon { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.v1-static .btn-icon { flex: 0 0 60px; width: 60px; height: 60px; padding: 0; }
.v1-static .btn-icon i { line-height: 1; }
.v1-static .our-services .icon-box { min-width: 0; }
.v1-static .our-services .icon-box .icon { display: inline-block; width: 80px; height: 70px; }
.v1-static .our-services .icon picture, .v1-static .our-services .icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v1-static .v1-property-card .name { display: block; font-family: var(--fontCardo); font-size: 20px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; overflow-wrap: anywhere; }
.v1-static .v1-property-card .prices :is(h2,h3,h4) { font-size: 16px; line-height: 1.4; letter-spacing: 1px; }
.v1-static .category-detail p { overflow-wrap: anywhere; }
.v1-static .site-footer-static img.footer-logo { width: 100%; height: auto !important; max-height: none !important; aspect-ratio: 1000 / 234; object-fit: contain; }
.v1-static .child-banner .banner-bg:not(.v1-generic-cover) { height: clamp(400px, 33vw, 626px); }
.v1-form-modal:not(.is-open) { visibility: hidden; opacity: 0; pointer-events: none; }
.v1-form-modal.is-open { display: flex; visibility: visible; opacity: 1; pointer-events: auto; overflow-y: auto !important; padding: 2rem; background: #0009 !important; }
/* Angular encapsulated these styles. The static template must scope them so
the AI/virtual-tour modal's fullscreen rules cannot reshape contact forms. */
.v1-form-modal > .modal-wrap { position: relative !important; display: block !important; flex: none !important; width: 100% !important; max-width: 1100px !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: auto !important; padding: 2rem; background: #fff !important; transform: none !important; }
.v1-form-modal .modal-body { display: block !important; width: 100% !important; height: auto !important; padding: 2rem; background: transparent !important; }
.v1-form-modal .modal-title { text-align: left; }
.v1-form-modal .form-input, .v1-proposal-form .form-input { width: 100%; }
.v1-form-modal form h3, .v1-proposal-form form h3 { font-size: 20px; }
.v1-form-modal form .input-group .form-select { width: 100px; flex: 0 0 100px; }
.v1-form-modal form .input-group .form-input { min-width: 0; }
.v1-form-modal .form-action { text-align: center; }
.v1-phone-field { margin-bottom: 17px; }
.v1-phone-field .form-input { min-width: 0; }
.v1-phone-field .hp_countrycodes .dropdown-menu { width: min(300px, 80vw) !important; min-width: 0 !important; max-width: min(300px, 80vw) !important; left: auto !important; right: 0 !important; overflow-y: auto; }
.v1-phone-field .hp_countrycodes .dropdown:not(.active) .dropdown-menu { display: none !important; }
.v1-phone-field .hp_countrycodes .dropdown-menu .country-option { display: flex; align-items: center; padding: 8px; width: 100%; text-align: left; }
.v1-phone-field .dcc_name { margin-inline: 10px auto; }
@media (max-width: 767px) {
.v1-static .btn-icon { flex-basis: 40px; width: 40px; height: 40px; }
.v1-static .our-services .icon-box .icon { height: 80px; }
.v1-phone-field .hp_countrycodes .dropdown-menu { left: 0 !important; right: auto !important; }
.v1-static .header .logo { min-width: 0; max-width: 140px; }
.v1-static .header .logo img { width: 100%; height: auto !important; object-fit: contain; }
.v1-static .child-banner .caption h1 { font-size: 24px; overflow-wrap: anywhere; }
.v1-static .child-banner .breadcrumbs { flex-wrap: wrap; }
.v1-static .header .navbar_menu:not(.expanded) { visibility: hidden; }
.v1-form-modal.is-open { padding: 1rem; }
.v1-form-modal > .modal-wrap { padding: 1rem; }
.v1-form-modal .modal-body { padding: 2rem .25rem 1rem; }
.v1-form-modal .modal-title h2 { font-size: 28px; }
}
body.v1-static { min-width: 320px; overflow-x: hidden; }
body.v1-static dialog { color: var(--color-secondary); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; background: #fff; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.v1-static .header .navbar_menu a { text-decoration: none; }
.v1-static .header button, .v1-static .header a { cursor: pointer; }
.v1-static .video-background { z-index: 0; background-color: #000; background-image: var(--sellup-hero-poster, none); background-position: 50% 50%; background-size: cover; }
.v1-static .video-background video { position: absolute; inset: -100%; z-index: 0; width: 100%; height: 100%; margin: auto; object-fit: cover; }
.v1-static .banner .caption { margin-left: auto; align-self: flex-end; max-width: 620px; text-align: right; color: #fff; text-transform: uppercase; }
.v1-static .banner .caption h1 { color: #fff; font: 400 clamp(28px, 3vw, 42px)/1.25 var(--fontCardo); letter-spacing: .12em; text-shadow: 0 4px 4px #0007; }
/* V1 sizes the detail banner from the cover image itself: the 1920x634 asset is
capped at 626px tall and then scaled to the banner width, which lands a few
pixels above the clamp the static build used to apply. */
.v1-static .child-banner { height: auto; min-height: 400px; overflow: hidden; }
.v1-static .child-banner .banner-bg.v1-generic-cover { aspect-ratio: 1920 / 634; height: auto; max-height: 626px; }
.v1-static .child-banner .banner-bg, .v1-static .child-banner .banner-bg picture, .v1-static .child-banner .banner-bg img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.v1-static .child-banner .caption, .v1-static .child-banner .caption h1, .v1-static .child-banner .breadcrumbs, .v1-static .child-banner .breadcrumbs a { color: #fff; }
.v1-static .child-banner .caption h1 { text-shadow: 0 4px 4px #0007; }
/* The logo keeps its intrinsic ratio but must be allowed to shrink. */
.v1-static .header .logo img, .v1-static .site-footer-static .logo img { max-width: 100%; height: auto; }
.v1-static .v1-generic-cover { background: url("cat-bg.638d2aa15d639df0.jpg") center / cover no-repeat; }
.v1-static:has(.banner-gallery) .header .navbar { --tw-bg-opacity: 1; }
/* The V1 search form keeps its Angular component stylesheet verbatim: only the
geolocation affordance, which does not exist in the V1 markup, is additive. */
.v1-static main > .sec-search { margin-bottom: 0; }
.v1-geolocate { position: absolute; z-index: 3; top: 50%; right: 10px; width: 30px; height: 30px; color: var(--color-primary); transform: translateY(-50%); }
.v1-search-form .location-search .form-input { padding-right: 46px; }
.v1-dual-range { position: relative; height: 6px; margin: 34px 0; user-select: none; }
.v1-dual-range .v1-range-control { position: absolute; z-index: 6; inset: -12px 0 auto; width: 100%; height: 30px; margin: 0; opacity: 0; pointer-events: none; }
.v1-dual-range .v1-range-control::-webkit-slider-thumb { width: 20px; height: 30px; pointer-events: auto; appearance: none; cursor: ew-resize; }
.v1-dual-range .v1-range-control::-moz-range-thumb { width: 20px; height: 30px; pointer-events: auto; border: 0; cursor: ew-resize; }
.v1-dual-range .minSlider { left: 0; }
.v1-dual-range .maxSlider { left: calc(100% - 8px); }
.v1-dual-range .tooltip-text { top: -30px; }
.v1-property-carousel, .v1-category-carousel { position: relative; min-width: 0; }
/* V1 lets the slick track content bleed, but clips it with the slider's own
overflow; the rail must not widen the container, or the whole document grows. */
/* V1's slick track is 1272px wide (three 424px cells) inside a 1240px
container, so the cards keep that width and the rail carries the overflow. */
.v1-property-carousel { margin: 0; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.v1-property-carousel::-webkit-scrollbar { display: none; }
/* V1's featured rail is a 1272px slick track inside a 1240px container, so the
cells keep 424px and the rail scrolls horizontally like the original. */
.v1-static .v1-property-rail > .slide { flex: 0 0 424px; max-width: 424px; }
.v1-property-carousel { min-height: 729px; }
.v1-property-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 424px; align-items: start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v1-property-rail::-webkit-scrollbar, .v1-category-rail::-webkit-scrollbar { display: none; }
.v1-property-rail > .slide { min-width: 0; scroll-snap-align: start; }
.v1-carousel-prev, .v1-carousel-next { position: absolute; z-index: 5; top: 50%; width: 60px; height: 60px; border-radius: 999px; color: var(--color-primary); background: #fff; box-shadow: 0 0 23px #00000024; font-size: 32px; line-height: 1; transform: translateY(-50%); }
/* The V1 carousels keep their arrows inside the track gutter; a negative offset
would extend the document and add a horizontal scrollbar. */
.v1-carousel-prev { left: 0; }
.v1-carousel-next { right: 0; }
.v1-static .tabs-head ul { overflow-x: auto; scrollbar-width: thin; }
.v1-static .tabs-head button, .v1-static .tabs-head a { white-space: nowrap; }
/* V1 floors every card at 688px and lets taller copy grow it (its tallest card
is 705px). `.card{height:100%}` would instead collapse them all to the row
height, so the floor is expressed as a min-height. */
.v1-property-card { height: auto !important; min-height: 688px; align-self: start; }
.v1-property-card > .img picture,
.v1-property-card > .img picture img { display: block; width: 100%; height: 100%; }
.v1-property-card > .img picture img { object-fit: cover; }
.v1-property-card .details { flex: 0 0 auto; }
/* V1 lets the detail block grow with its copy; the 413px floor created a gap
above the dimension list on short cards. */
.v1-property-card .details { min-height: 0; margin-bottom: 1rem; }
.v1-property-card .address_text img { width: 14px; height: 18px; }
.v1-property-card .v1-dimension-icon { width: 33px; height: 33px; max-height: none; margin-inline: auto; }
.v1-property-card .prices { gap: 15px; }
.v1-property-card .prices h3:first-child { overflow-wrap: anywhere; }
.v1-property-card .btn-fav { text-shadow: 0 1px 6px #000; }
.v1-static .sec-details a.btn-outline[href$="/sell/"] { display: inline-flex; align-items: center; justify-content: center; }
.v1-category-carousel, .v1-category-rail { height: 632px; }
.v1-category-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v1-category-rail .slide { flex: 0 0 min(410px, 82vw); height: 100%; scroll-snap-align: start; }
.v1-category-rail .categories, .v1-category-rail .categories .img, .v1-category-rail .categories picture, .v1-category-rail .categories img { height: 100%; min-height: 632px; }
.v1-category-rail .categories h3 { color: #fff; }
.v1-static .sec-category .category-details h2, .v1-static .sec-category .category-details p { color: #fff; }
.v1-static .v1-category-carousel > .v1-carousel-prev,
.v1-static .v1-category-carousel > .v1-carousel-next { width: 42px; height: 42px; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font-size: 20px; text-shadow: 0 1px 4px #0008; }
.v1-static .v1-category-carousel .categories .overlay .btn-icon,
.v1-static .v1-category-carousel .categories:hover .overlay .btn-icon { display: grid; place-items: center; transform: translate(-50%, -50%); }
/* The V1 tabs contract lives in the compiled component stylesheet; the static
build only keeps the horizontal-scroll affordance. */
.v1-static .tabs-head ul { overflow-x: auto; scrollbar-width: thin; }
.v1-static .tabs-head button, .v1-static .tabs-head a { white-space: nowrap; }
/* V1 renders the featured tabs as buttons, so the shared tabs rule only targets
`button`. The static build keeps real anchors for crawlability and mirrors the
same metrics on `a` in the same cascade position. */
.v1-static .sec-properties .tabs-head ul li a { position: relative; display: inline-block; padding-top: .75rem; padding-bottom: .75rem; padding-left: 0; padding-right: 0; text-align: left; text-transform: uppercase; letter-spacing: .2em; font-size: 18px; font-family: var(--fontCardo); }
.v1-static .sec-properties .tabs-head ul li a::after { content: ""; position: absolute; display: inline-block; background-color: var(--color-primary); height: 1px; width: 70%; left: 0; bottom: 0; opacity: 0; }
.v1-static .sec-properties .tabs-head ul li a.selected { color: var(--color-primary); font-weight: 700; }
.v1-static .sec-properties .tabs-head ul li a.selected::after { opacity: 1; }
.v1-static .sec-services .btn-outline { margin-left: auto; }
.v1-static .sec-services .flip-front { height: 100%; }
.v1-static .sec-services .flip-card, .v1-static .sec-services .flip-content, .v1-static .sec-services .flip-front { overflow: hidden; }
.v1-static .sec-services .icon-box { min-width: 0; }
.v1-static .sec-services .icon-box .icon { flex: 0 0 60px; width: 60px; height: 60px; overflow: hidden; }
.v1-static .sec-services .icon-box .details { min-width: 0; }
.v1-static .sec-services .icon picture, .v1-static .sec-services .icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* V1 renders these value-proposition icons as a bare inline ![]()
; the static
build wraps them in , which contributes no line box, so the icon
wrapper collapsed to zero height and pulled the copy 70px up. */
.v1-static .top-searches .icon-box .icon, .v1-static .sec-top-services .icon-box .icon { width: 100px; height: 70px; }
.v1-static .top-searches .icon-box .icon picture, .v1-static .top-searches .icon-box .icon img,
.v1-static .sec-top-services .icon-box .icon picture, .v1-static .sec-top-services .icon-box .icon img { display: block; max-width: 100%; max-height: 70px; object-fit: contain; }
.v1-static .sec-uptodate { margin-top: 0; background-image: url("cat-bg.638d2aa15d639df0.jpg"); }
/* V1 leaves 60px between an article and the newsletter. The card itself is
raised by 80px; without this space it covers the final sidebar links. Keep
the correction scoped to article detail so home and archive stay unchanged. */
.v1-static .news-detail + .sec-uptodate { margin-top: 60px; }
.v1-static .sec-details .white-card .btn-outline, .v1-static .sec-uptodate .white-card .btn { margin-top: 3rem; }
.v1-static main > .top-searches h2, .v1-static main > .sec-properties h2, .v1-static main > .sec-category h2, .v1-static main > .sec-services h2, .v1-static main > .sec-details h2, .v1-static main > .sec-customers h2, .v1-static main > .sec-uptodate h2, .v1-static main > .sec-join-group h2 { line-height: 1.4; letter-spacing: 3px; font-family: var(--fontCardo); }
/* V1's slider sizes each slide to its own content; a plain grid would stretch
every row to the tallest review, so the rows are pinned to content height. */
/* V1 lays the reviews on a 1209px slick track regardless of the visible
container, which is what fixes the cell width at 403px. */
.v1-review-rail { display: grid; grid-template-columns: repeat(3, 403px); grid-auto-rows: min-content; align-items: start; margin: 0 -1rem; }
.v1-review-rail > .slide { min-width: 0; padding: 0 1rem; }
.v1-review-rail .quote img { width: auto; height: auto; max-width: 80px; }
/* V1 renders the shared quote glyph at 70px wide; the intrinsic ratio then
gives the 62px box that sets the slider's height. */
.v1-static .sec-customers .icon-box .quote img { width: 70px; max-width: 70px; height: auto; max-height: none; margin-inline: auto; }
.v1-static .sec-customers .v1-review-rail > .slide { align-self: start; }
/* Keep the reviews on one row without letting the page scroll sideways: the
rail itself carries the horizontal overflow, as V1's slider viewport does. */
.v1-review-rail { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.v1-review-rail::-webkit-scrollbar { display: none; }
@media (max-width: 991px) {
.v1-review-rail { grid-template-columns: repeat(3, minmax(300px, 1fr)); }
}
.v1-catalog-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-top: 40px; padding-bottom: 30px; }
.v1-catalog-toolbar .catalog-summary { margin-right: auto; text-transform: uppercase; letter-spacing: .09em; }
/* Contatti: V1 alternates the map and the office details row by row and keeps
the map iframe at a fixed height. */
/* The cover ships with the Angular app rather than this bundle; the test build
serves every other media asset from the production host, so this one too. */
.v1-static .v1-contact-cover { background: url("../img/contact.jpg") center / cover no-repeat; }
.v1-static .sec-contact { padding: 0; }
.v1-static .sec-contact .map { background-color: #f4f4f4; }
.v1-static .sec-contact .map iframe { width: 100%; border: 0; height: 592px; vertical-align: top; }
.v1-static .sec-contact .flex { align-items: center; }
.v1-static .sec-contact .flex .details { padding: 2rem 3rem; }
.v1-static .sec-contact .flex.mobile-flip { flex-direction: row-reverse; }
.v1-static .sec-contact .contact-list li { margin-top: .5rem; margin-bottom: .5rem; }
.v1-static .sec-contact .contact-list li a:hover { color: var(--color-primary); }
@media (max-width: 767px) {
.v1-static .sec-contact .flex.mobile-flip { flex-direction: column-reverse; }
.v1-static .sec-contact .map iframe { height: 320px; }
}
.v1-static .sec-news .news-grid > .slide { width: 33.333333%; padding: 0 1rem; margin-top: 1.5rem; }
.v1-load-more { display: block; margin: 40px auto 0; }
.v1-static .empty-state { padding: 60px 0; text-align: center; }
.v1-static [hidden] { display: none !important; }
/* The listing surface reuses the V1 category component contract: the banner
keeps the V1 ratio, the header banner stays full-bleed and the search form is
the same component as the homepage. Only the static-only anchors are added.
The cover stays in flow so its aspect ratio keeps driving the banner height;
the overlay is the only absolutely positioned layer. */
.v1-static .child-banner .banner-overlay { position: absolute; inset: 0; padding-top: var(--headerHeight); padding-bottom: var(--secSpace); }
.v1-static .child-banner .banner-overlay > .container-fluid { display: flex; align-items: center; justify-content: center; height: 100%; }
.v1-search-spacer { margin-bottom: 130px; }
.v1-listing-page [data-catalog-root] { scroll-margin-top: calc(var(--headerHeight) + 16px); }
.v1-static .v1-listing-page .sec-news > .container-fluid { display: block; width: 100%; }
.v1-static .v1-listing-page [data-catalog-grid] { display: flex; flex-direction: row; flex-wrap: wrap; width: calc(100% + 2rem); margin-inline: -1rem; }
/* V1 pins the card copy panel to a fixed box so a two-line title cannot change
the height of a card in the row (and therefore of the whole section). The
listing cards already carry their own height from the property-card component,
so this applies only to the blog/news surface. */
.v1-static .news-grid.v1-blog-grid > div > .card { height: auto; }
.v1-static .news-grid.v1-blog-grid > div > .card > .details { height: auto; }
/* The catalogue grid keeps one card box for every row: V1 renders all cards at
a uniform height, so a long title or address cannot stretch its row. */
/* V1 lets the catalogue cards grow with their content (its tallest is 705px
against the 688px base), so a fixed height would shorten the whole section. */
/* V1 lets the cards grow with their content: its tallest card is 705px against
the 688px base, so both the card and its detail block size to content. */
.v1-static [data-catalog-grid] > .slide > .v1-property-card { height: auto; }
.v1-static [data-catalog-grid] > .slide > .v1-property-card > .details { height: auto; }
/* V1 shows the description in full; clamping it shortened the cards. */
.v1-property-card .details > p:not(.address_text) { display: block; -webkit-line-clamp: none; overflow: visible; }
.v1-static .v1-article-grid > div { margin-bottom: 28px; }
.v1-static .v1-news-card .img { height: 375px; }
.v1-static .v1-news-card .img picture, .v1-static .v1-news-card .img img { width: 100%; height: 100%; object-fit: cover; }
.v1-static .v1-news-card .details { min-height: 250px; box-shadow: 0 0 23px #0000001c; }
.v1-static .v1-news-card .action { padding-top: 1.5rem; margin-top: auto; }
.v1-static .news-grid.v1-article-detail { max-width: none; min-width: 0; }
.v1-static .child-banner.v1-news-article-banner .banner-bg:not(.v1-generic-cover) { height: clamp(400px, 43.5vw, 626px); }
.v1-static .news-detail .news-category { display: flex; flex-wrap: wrap; margin-bottom: 2rem; }
.v1-static .news-detail .news-category > * { font-weight: 600; margin-right: .5rem; margin-bottom: .5rem; white-space: nowrap; }
.v1-static .news-detail .news-grid > p, .v1-static .news-detail .v1-news-body p { margin: 2rem 0; font-weight: 500; }
.v1-static .news-detail .v1-news-body h3 { margin: 2.5rem 0; font-family: inherit; letter-spacing: normal; }
/* V1 lets this lead and the service intro wrap at full width; the compiled
sheet caps them, which costs a line and shifts everything below. */
.v1-static .sec-contact-form .v1-contact-lead, .v1-static .our-services > .container > p { max-width: none; }
/* The AJAX status line is a static-build addition; V1 has no such node, so it
must not occupy space until it actually has something to report. */
.v1-form-status:empty { display: none; }
.v1-content-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 80px); margin: 54px 0; }
.v1-content-block.is-reversed figure { order: 2; }
.v1-content-block figure, .v1-content-block figure picture, .v1-content-block figure img { display: block; width: 100%; }
.v1-content-block figure img { max-height: 560px; object-fit: cover; }
.v1-service-detail { max-width: 1280px; margin: 0 auto; }
.v1-static .banner-gallery .featured-banner, .v1-static .banner-gallery .featured-banner .image_cont, .v1-static .banner-gallery .featured-banner picture, .v1-static .banner-gallery .featured-banner img { width: 100%; height: 100vh; display: block; object-fit: cover; }
.v1-static .banner-gallery .featured-banner picture > picture { height: 100%; }
.v1-static .bottom-left { position: absolute; z-index: 3; left: 30px; bottom: 32px; }
.v1-static .bottom-left ul { display: flex; gap: 10px; }
.v1-static .bottom-left button { width: 44px; height: 44px; color: var(--color-primary); background: #f0f0f0; border-radius: 6px; }
.v1-static .bottom-left button.selected { color: #fff; background: var(--color-primary); }
.v1-static .v1-facts > div { padding: 14px 0; border-bottom: 1px solid var(--color-secondary); }
.v1-static .v1-facts dt { font-weight: 700; text-transform: uppercase; }
.v1-static .v1-facts dt i { width: 0; overflow: hidden; }
.v1-static .v1-facts dd { margin: 2px 0 0; }
.v1-static .property-main .left h1 { margin-left: 0; text-align: left; }
.v1-static .v1-property-tabs { margin-top: 36px; }
.v1-static .v1-property-tabs .features-list { flex-wrap: wrap; }
.gallery-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: 20px 16px; border: 0; background: #002349; color: #fff !important; margin: 0; }
.gallery-modal[open], .gallery-modal.is-open { display: block !important; position: fixed; inset: 0; z-index: 10000; }
.gallery-modal::backdrop { background: #002349; }
.gallery-modal__toolbar { position: absolute; z-index: 2; inset: 16px 16px auto auto; }
.gallery-modal__toolbar button { color: #fff; font-size: 18px; background: #b7b5b557; border-radius: 50%; width: 40px; height: 40px; }
.gallery-modal__stage { display: flex; align-items: center; position: relative; width: 76%; height: 100%; margin: auto; }
.gallery-modal__stage > button { position: absolute; left: -55px; z-index: 1; color: #fff; font-size: 28px; background: #b7b5b557; border-radius: 50%; width: 42px; height: 42px; }
.gallery-modal__stage > button[data-gallery-next] { left: auto; right: -55px; }
.gallery-modal__stage > button:hover, .gallery-modal__toolbar button:hover { background: var(--color-primary); }
.gallery-modal__stage figure { width: 100%; height: 100%; display: grid; place-items: center; }
.gallery-modal__stage img { max-width: 100%; max-height: calc(100dvh - 40px); width: auto; object-fit: contain; }
.gallery-modal__thumbnails { display: none; }
.v1-static [data-share-menu][hidden], .v1-static [data-property-banner] [hidden] { display: none !important; }
.v1-static [data-share-menu]:not([hidden]) { display: block; }
.v1-static .add-to-wishlist { position: relative; }
.v1-property-request.is-open { display: flex; overflow-y: auto !important; overflow-x: hidden !important; padding: calc(var(--headerHeight) + 1rem) 1rem; background: #0009 !important; }
.v1-property-request > .modal-wrap { position: relative !important; display: block !important; flex: none !important; width: 100% !important; max-width: 900px !important; height: auto !important; max-height: none !important; min-height: 200px !important; margin: auto !important; padding: 2rem !important; background: #D9D9D9 !important; transform: none !important; }
.v1-property-request .modal-body { display: block !important; padding: 0 !important; height: auto !important; background: transparent !important; }
.v1-property-request .sec-contact-form { background: transparent; }
.v1-property-request .container-fluid { padding-inline: 0; }
.v1-property-request .v1-request-schedule > div { width: 33.333333%; min-width: 0; }
@media (max-width: 767px) {
.v1-property-request > .modal-wrap { padding: 1rem !important; }
.v1-property-request h2 { font-size: 26px; line-height: 1.35; overflow-wrap: anywhere; }
.v1-property-request .v1-request-schedule > div { width: 100%; }
.v1-property-request .sec-contact-form .btn-outline { min-width: 0; width: 100%; }
}
.v1-static .banner-gallery.is-alternate-media { height: calc(39.13vw + var(--headerHeight)); min-height: 0; padding-top: var(--headerHeight); }
.v1-static .banner-gallery.is-alternate-media .property-alternate { height: 100%; top: 0; position: relative; background: #f1f1ef; }
.property-alternate [data-property-stage] { width: 100%; height: 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: auto; }
.property-alternate img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.property-alternate .is-zoomed img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }
@media (hover: hover) and (pointer: fine) {
.property-alternate [data-property-stage]:has(img):hover { overflow: hidden; }
.property-alternate [data-property-stage]:not(.is-zoomed):hover img { transform: scale(3); }
}
.property-alternate iframe { width: 100%; height: 100%; border: 0; }
.property-alternate [data-banner-move] { position: absolute; top: 50%; left: 24px; color: white; background: #3339; border-radius: 50%; font-size: 36px; width: 45px; height: 45px; }
.property-alternate [data-banner-move="1"] { left: auto; right: 24px; }
.property-alternate [data-banner-counter] { position: absolute; bottom: 16px; left: 50%; color: #fff; }
.v1-static [data-property-banner] .bottom-left { z-index: 3; left: auto; bottom: auto; pointer-events: none; }
/* V1 places these controls at top/right. Opposite legacy insets stretched
their transparent wrapper over Gallery and intercepted pointer/touch input. */
.v1-static [data-property-banner] .bottom-left button,
.v1-static [data-property-banner] .bottom-left a { pointer-events: auto; }
.v1-static [data-property-banner] .bottom-left a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.v1-static [data-property-banner] .bottom-left a img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 1150px) { .gallery-modal__stage { width: 98%; } }
@media (max-width: 1200px) { .gallery-modal__toolbar button { width: 26px; height: 26px; font-size: 14px; } }
@media (max-width: 768px) { .v1-static .banner-gallery.is-alternate-media { height: calc(56.25vw + var(--headerHeight)); } }
@media (max-width: 1023px) {
.gallery-modal { padding: 20px 0; }
.gallery-modal__stage { width: 100%; height: calc(100dvh - 135px); grid-template-columns: minmax(0, 1fr); }
.gallery-modal__stage > button { display: none; }
.gallery-modal__stage img { max-height: calc(100dvh - 105px); }
.gallery-modal__thumbnails { display: flex; height: 95px; justify-content: center; align-items: center; gap: 12px; overflow: hidden; }
.gallery-modal__thumbnails button { flex: 0 0 77px; height: 51px; border: 1px solid transparent; }
.gallery-modal__thumbnails button.selected { border-color: var(--color-primary); }
.gallery-modal__thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.gallery-modal__toolbar button { width: 26px; height: 26px; font-size: 14px; }
}
.v1-static .site-footer-static { position: relative; background: url("footer-bg.837e99bd6efcf7ef.jpg") top left / cover no-repeat; }
.v1-static .sticky-social li a { color: #fff; text-shadow: 0 1px 3px #0008; }
.v1-static .sticky-social li.separator { background: #fff; }
.v1-static .sticky-social.is-sticky li a { color: var(--color-secondary); text-shadow: none; }
.v1-static .sticky-social.is-sticky li.separator { background: var(--color-secondary); }
.v1-static .sticky-social li a:hover { color: var(--color-primary); }
html.gallery-open, body.gallery-open { overflow: hidden !important; }
html.site-dialog-open, body.site-dialog-open { overflow: hidden !important; }
html.modal-open, body.modal-open { overflow: hidden !important; }
.v1-runtime-notification { position: fixed; z-index: 10000; top: 92px; right: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 15px 20px; color: #fff; background: #333c4c; box-shadow: 0 6px 24px #0004; opacity: 0; transform: translateY(-8px); }
.v1-runtime-notification.is-success { background: #198a2d; }
.v1-runtime-notification.is-danger { background: #b92323; }
.v1-runtime-notification.is-visible { opacity: 1; transform: none; }
.v1-runtime-status[hidden] { display: none; }
.ai-assistant-modal [hidden] { display: none !important; }
.ai-assistant-modal:not(.is-open) { display: none !important; visibility: hidden !important; opacity: 0 !important; }
.ai-assistant-modal.is-open { display: flex !important; padding: 0 !important; overflow: unset !important; visibility: visible !important; opacity: 1 !important; }
.ai-assistant-modal.is-open > .modal-wrap { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: #f9f9fa !important; }
/* Keep the assistant independent from the generic mobile dialog's flex row. */
.ai-assistant-modal.is-open > .modal-wrap { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ai-assistant-modal .chatbot-header { flex: 0 0 auto; width: 100%; min-width: 0; }
.ai-assistant-modal .modal-content { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; height: auto; }
.ai-assistant-modal .modal-content .content-wrap,
.ai-assistant-modal .modal-content .content-wrap .left-content { min-width: 0; min-height: 0; }
.ai-assistant-modal .modal-content .content-wrap .left-content .center-content-main,
.ai-assistant-modal .suggestion-boxes,
.ai-assistant-modal .search-container { min-width: 0; max-width: 100%; }
/*
* Angular applicava gli stili delle modali ai soli componenti proprietari.
* Il build statico mantiene quel confine con gli id, evitando che lo stile
* full-screen dell'assistente sovrascriva login e registrazione.
*/
#login-modal,
#register-modal {
inset: 0 !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
max-height: 100vh !important;
padding: calc(var(--headerHeight) + 1rem) 1rem !important;
align-items: center !important;
justify-content: center !important;
overflow-y: auto !important;
background: rgba(0, 0, 0, .55) !important;
font-size: 15px !important;
line-height: 24px !important;
}
#login-modal:not(.is-open),
#register-modal:not(.is-open) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#login-modal.is-open,
#register-modal.is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#login-modal > .modal-wrap,
#register-modal > .modal-wrap {
position: relative !important;
display: block !important;
flex: none !important;
width: 100% !important;
max-width: 760px !important;
height: auto !important;
max-height: none !important;
min-height: 200px !important;
margin: auto !important;
padding: 2rem !important;
overflow: visible !important;
background: #fff !important;
box-shadow: 0 4px 4px rgba(0, 0, 0, .25) !important;
transform: translateY(1rem) !important;
}
#login-modal.is-open > .modal-wrap,
#register-modal.is-open > .modal-wrap { transform: translateY(0) !important; }
#login-modal .modal-body,
#register-modal .modal-body {
display: block !important;
width: 100% !important;
height: auto !important;
padding: 2.25rem 1.25rem !important;
background: transparent !important;
}
#login-modal .modal-title,
#register-modal .modal-title { display: block !important; margin-bottom: 2rem !important; text-align: left !important; }
#login-modal .modal-title h2,
#register-modal .modal-title h2 { margin: 0 !important; text-align: left !important; }
#login-modal .modal-title p,
#register-modal .modal-title p { margin-top: 1rem !important; text-align: left !important; }
#login-modal .form-wrap,
#register-modal .form-wrap {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#login-modal .form-fieldset,
#register-modal .form-fieldset { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#login-modal .form-fieldset > div,
#register-modal .form-fieldset > div { background: transparent !important; }
#register-modal .form-fieldset label { margin-bottom: 0 !important; font-size: 15px !important; line-height: 24px !important; }
#register-modal .form-checkbox {
flex: 0 0 33px !important;
width: 33px !important;
height: 33px !important;
margin: 0 !important;
}
#register-modal [data-address-suggestions] {
top: 100% !important;
z-index: 9999 !important;
width: 100% !important;
max-height: 320px !important;
margin-top: 6px !important;
overflow-y: auto !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
}
#register-modal [data-address-suggestions] button { min-height: 42px; text-align: left; }
#register-modal [data-address-suggestions] button:hover,
#register-modal [data-address-suggestions] button:focus { color: var(--color-primary); background: #f2f2f2; }
#login-modal input.form-input,
#register-modal input.form-input {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 47px !important;
padding: .75rem !important;
border: 1px solid #ababab !important;
border-radius: 0 !important;
color: #374151 !important;
background: #fff !important;
box-shadow: none !important;
}
#login-modal .modal-footer {
display: block !important;
width: 100% !important;
height: auto !important;
margin-top: 1rem !important;
padding: 2.25rem 1.25rem !important;
border-top: 1px solid #ababab !important;
background: transparent !important;
}
#login-modal button.modal-close,
#register-modal button.modal-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
z-index: 2 !important;
display: inline-grid !important;
place-items: center !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border: 2px solid #fff !important;
border-radius: 50px !important;
color: #515151 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Componenti fissi e icone della V1: stessi colori e glifi della produzione. */
.v1-static .sticky-right .btn-whatsapp.btn-assistant { background-color: #9522dc !important; }
.v1-static .togglemenu .fa-bars::before { content: "\f0c9" !important; }
.v1-static .togglemenu .fa-times::before { content: "\f00d" !important; }
.v1-static .togglemenu .far { font-family: "Font Awesome 6 Pro" !important; font-weight: 400 !important; }
.ai-assistant-modal .property-card-title,
.ai-assistant-modal .property-card-price { color: #374151 !important; }
.ai-assistant-modal .property-card-description { color: #6b7280 !important; }
.v1-static [data-account-login-control][hidden],
.v1-static [data-account-profile-control][hidden],
.v1-static [data-profile-panel][hidden] { display: none !important; }
#delete-modal {
inset: 0 !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
max-height: 100vh !important;
padding: calc(var(--headerHeight) + 1rem) 1rem !important;
align-items: center !important;
justify-content: center !important;
overflow-y: auto !important;
background: rgba(0, 0, 0, .55) !important;
}
#delete-modal:not(.is-open) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#delete-modal.is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#delete-modal > .modal-wrap {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 760px !important;
height: auto !important;
margin: auto !important;
padding: 2rem !important;
overflow: visible !important;
background: #fff !important;
box-shadow: 0 4px 4px rgba(0, 0, 0, .25) !important;
}
#delete-modal .modal-body { display: block !important; width: 100% !important; height: auto !important; padding: 2.25rem 1.25rem !important; background: transparent !important; }
#delete-modal .modal-title { display: block !important; margin-bottom: 2rem !important; text-align: left !important; }
#delete-modal .form-wrap { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
#delete-modal button.modal-close { position: absolute !important; top: 1rem !important; right: 1rem !important; z-index: 2 !important; display: inline-grid !important; place-items: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; color: #515151 !important; background: transparent !important; }
.v1-profile-banner .banner-bg picture,
.v1-profile-banner .banner-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v1-profile .tabs-head ul { display: flex; gap: clamp(24px, 5vw, 72px); overflow-x: auto; }
.v1-profile .tabs-head button { position: relative; display: block; padding: .75rem 0; white-space: nowrap; letter-spacing: .18em; font-family: var(--fontCardo); font-size: 18px; }
.v1-profile .tabs-head button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 1px; background: var(--color-primary); opacity: 0; }
.v1-profile .tabs-head button.selected::after { opacity: 1; }
.v1-profile .tabs-body { padding-top: 3rem; }
.v1-profile .full-title { display: flex; align-items: center; margin-bottom: 2.5rem; }
.v1-profile .form-wrap + .full-title,
.v1-profile form + .full-title { margin-top: 4rem; }
.v1-profile .form-wrap { margin-bottom: 3rem; }
.v1-profile .form-wrap label { margin-bottom: 2.75rem; }
.v1-profile .form-wrap label h3 { font-weight: 600; text-transform: none; }
.v1-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.v1-profile .form-input.input-underline { width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid #ababab; border-radius: 0; background: transparent; }
.v1-profile-address-label { margin-bottom: .5rem !important; }
.v1-address-suggestions { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.v1-address-suggestions button { display: block; width: 100%; min-height: 42px; padding: .6rem 1rem; text-align: left; }
.v1-profile .btn-colums { display: flex; flex-wrap: wrap; margin-top: 3rem; }
.v1-profile .btn-colums .right { margin-left: auto; }
.v1-profile-address { padding: 1.5rem 0; border-bottom: 1px solid #aeaeab; }
.v1-profile-address h3 { margin-bottom: 1.25rem; }
.v1-profile-address h3 button:hover { color: var(--color-primary); }
.v1-profile-status { margin-top: 2rem; text-align: center; }
.v1-profile-status[hidden] { display: none; }
@media (max-width: 575px) {
.v1-static .header .navbar .container-fluid .logo {
display: flex !important;
flex: 1 1 79px !important;
min-width: 0 !important;
padding-right: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.v1-static .header .logo a,
.v1-static .header .logo img { display: block !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; }
.v1-static .header .icon-menu { display: flex !important; flex: 0 1 auto !important; min-width: 0 !important; }
.v1-static .header .lang-dropdown { display: list-item !important; visibility: visible !important; opacity: 1 !important; }
}
@media (max-width: 639px) {
#login-modal,
#register-modal { align-items: flex-start !important; padding: calc(var(--headerHeight) + .5rem) .75rem !important; }
#login-modal > .modal-wrap,
#register-modal > .modal-wrap { padding: 1.25rem !important; }
#login-modal .modal-body,
#register-modal .modal-body { padding: 2.25rem .25rem 1rem !important; }
#login-modal .modal-footer { padding: 1.5rem .75rem !important; }
#delete-modal { align-items: flex-start !important; padding: calc(var(--headerHeight) + .5rem) .75rem !important; }
#delete-modal > .modal-wrap { padding: 1.25rem !important; }
#delete-modal .modal-body { padding: 2.25rem .25rem 1rem !important; }
.v1-profile-grid { grid-template-columns: 1fr; }
.v1-profile .btn-colums { display: block; }
.v1-profile .btn-colums .right { margin-top: 1.5rem; }
.v1-profile .btn-colums .right button { display: block; width: 100%; margin: 1rem 0 0 !important; }
}
.v1-modal { width: min(930px, calc(100% - 32px)); max-width: 930px; max-height: calc(100vh - 32px); padding: clamp(30px, 5vw, 70px); border: 0; color: var(--color-secondary); background: #fff; overflow: auto; }
.v1-modal::backdrop { background: #000a; }
.v1-modal .modal-close { position: absolute; top: 22px; right: 24px; color: var(--color-secondary); font-size: 24px; }
.v1-form-wrap { width: min(100%, 1080px); margin: 0 auto; padding: clamp(24px, 4vw, 54px); background: #fff; box-shadow: 0 0 23px #0000001c; }
.v1-modal .v1-form-wrap { padding: 0; box-shadow: none; }
.v1-form-wrap > h2 { margin: 0 0 12px; text-align: left; }
.v1-action-form { display: grid; gap: 22px; margin-top: 32px; }
.v1-action-form label { display: grid; gap: 8px; font-weight: 600; }
.v1-action-form .form-input { background: #fff; border: 0; border-bottom: 1px solid #777; border-radius: 0; }
.v1-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.v1-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 12px !important; font-weight: 400 !important; }
.v1-check input { flex: 0 0 auto; margin-top: 5px; }
.v1-form-status { min-height: 1.5em; color: var(--color-primary); }
.v1-form-wrap[data-form-kind="newsletter"] > p { display: none; }
.v1-form-wrap[data-form-kind="newsletter"] > h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: .05em; }
.v1-form-wrap[data-form-kind="newsletter"] .v1-action-form { gap: 25px; }
.v1-form-wrap[data-form-kind="newsletter"] .v1-check { align-items: center; }
.v1-form-wrap[data-form-kind="newsletter"] .v1-check input { width: 30px; height: 30px; margin: 0; accent-color: var(--color-primary); }
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); gap: 12px; align-items: stretch; }
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row label { min-width: 0; }
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row .form-input { height: 56px; border: 1px solid #b8b8b8; padding: 12px 16px; }
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row .form-action { margin: 0; }
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row button { width: 100%; height: 56px; background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; text-transform: uppercase; }
.v1-modal[data-site-dialog="newsletter"] { border-left: 3px solid #303843; border-bottom: 3px solid #303843; }
.v1-form-wrap[data-form-kind="careers"] .v1-action-form { gap: 20px; }
.v1-form-wrap[data-form-kind="careers"] .v1-form-grid { gap: 20px 28px; }
.v1-form-wrap[data-form-kind="careers"] .v1-form-grid label,
.v1-form-wrap[data-form-kind="careers"] .v1-action-form > label:not(.v1-check) { text-transform: uppercase; letter-spacing: .08em; font-family: var(--fontCardo); }
.v1-form-wrap[data-form-kind="careers"] .v1-cv-control input { display: block; width: 100%; margin-top: 9px; font-family: sans-serif; text-transform: none; letter-spacing: normal; }
.v1-form-wrap[data-form-kind="careers"] .form-action { text-align: right; }
.v1-modal[data-site-dialog="careers"] { border-right: 2px solid #c2c2c2; border-bottom: 2px solid #c2c2c2; }
@media (max-width: 767px) {
.v1-form-wrap[data-form-kind="newsletter"] .newsletter-contact-row,
.v1-form-wrap[data-form-kind="careers"] .v1-form-grid { grid-template-columns: 1fr; }
}
/* V1 renders pagination as