/*
Theme Name: Jampaa
Theme URI: https://www.jampaa.it/
Description:  Tema Jampaa
Author:  Jampaa
Author URI: https://www.jampaa.it/
Template:  hello-elementor
Version:  1.33

--------------------------------------------------------------
>>> INDICE STILI
--------------------------------------------------------------
*	1.0 ROOT & DESIGN TOKENS
    * 1.1 button
    * 1.2 colors
*	2.0 SETTINGS & BASE TYPOGRAPHY
*	3.0 GLOBAL LAYOUT & UTILITIES
*	4.0 HEADER
*	5.0 FOOTER
*	6.0 HOMEPAGE & COMPONENTI (tabs, badge, loop item, caroselli)
*	7.0 SCHEDA CAMERA (header camere, gallery, servizi, card)
--------------------------------------------------------------
*/


/*
*   1.0 ROOT & DESIGN TOKENS
*/
/* Font Manrope e Newsreader caricati da Elementor (font globali del Kit): nessun @import bloccante qui */

:root {
    /* Font family */
    --font-family-primary: 'Newsreader', Georgia, serif;
    --font-family-secondary: 'Manrope', sans-serif;
    --font-family-menu: 'Manrope', sans-serif;
    --font-family-buttons: 'Manrope', sans-serif;

    /* Colors (palette Figma Design System) */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-primary: #899084;
    /* salvia */
    --color-secondary: #EEE9DF;
    /* beige */
    --color-tertiary: #A47768;
    /* terracotta */
    --color-quaternary: #C9C3B8;
    /* greige */
    --color-dark: #514B44;
    /* marrone scuro */
    --color-text: #292723;
    /* testo (pagine Figma) */
    --color-menu: #FFFFFF;

    /* CTA states */
    --color-primary-hover: #514B44;
    --color-secondary-hover: #C9C3B8;

    /* H1 - Newsreader 64 */
    --colore-h1: var(--color-text);
    --font-size-h1: clamp(40px, 28px + 1.875vw, 64px);
    --font-weight-h1: 400;

    /* H2 - Newsreader 42 */
    --colore-h2: var(--color-text);
    --font-size-h2: clamp(30px, 24px + 0.9375vw, 42px);
    --font-weight-h2: 400;

    /* H3 - Newsreader 36 */
    --colore-h3: var(--color-text);
    --font-size-h3: clamp(26px, 20px + 0.8333vw, 36px);
    --font-weight-h3: 400;

    /* H4 - Newsreader 28 */
    --colore-h4: var(--color-text);
    --font-size-h4: clamp(22px, 18px + 0.5208vw, 28px);
    --font-weight-h4: 400;

    /* H5 - Newsreader 25 */
    --colore-h5: var(--color-text);
    --font-size-h5: clamp(20px, 17px + 0.4167vw, 25px);
    --font-weight-h5: 400;

    /* Paragraphs - Manrope */
    --colore-p: var(--color-text);

    /* Body extralarge 20/28 */
    --font-size-p-xl: clamp(17px, 15px + 0.2604vw, 20px);
    --font-weight-p-xl: 400;
    --line-height-p-xl: clamp(26px, 24px + 0.2083vw, 28px);

    /* Body large 18/28 */
    --font-size-p-l: clamp(16px, 15px + 0.1563vw, 18px);
    --font-weight-p-l: 400;
    --line-height-p-l: clamp(24px, 22px + 0.3125vw, 28px);

    /* Body regular 16/24 */
    --font-size-p-r: clamp(15px, 14px + 0.1042vw, 16px);
    --font-weight-p-r: 400;
    --line-height-p-r: clamp(22px, 21px + 0.1563vw, 24px);

    --font-size-p-s: clamp(14px, 14px + 0vw, 14px);
    --font-weight-p-s: 400;
    --line-height-p-s: clamp(20px, 20px + 0vw, 20px);

    --font-size-p-xs: clamp(13px, 12px + 0.15vw, 14px);
    --font-weight-p-xs: 400;
    --line-height-p-xs: clamp(18px, 17px + 0.25vw, 20px);

    /* Span */
    --colore-span: var(--color-text);
    --font-size-span: clamp(15px, 14px + 0.1042vw, 16px);
    --font-weight-span: 400;

    /* Link */
    --colore-a: var(--color-primary);
    --font-size-a: clamp(15px, 14px + 0.1042vw, 16px);
    --font-weight-a: 700;

    /* Menu Desktop - Manrope Medium 16 */
    --colore-voce-menu: var(--color-menu);
    --font-size-menu: clamp(15px, 14px + 0.1042vw, 16px);
    --font-weight-menu: 500;
}


/*
*	2.0 SETTINGS & BASE TYPOGRAPHY
*/

/* fonts */
h1 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-h1) !important;
    line-height: normal !important;
    color: var(--colore-h1) !important;
}

h2 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-h2) !important;
    line-height: normal !important;
    color: var(--colore-h2) !important;
}

h3 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-h3) !important;
    line-height: normal !important;
    color: var(--colore-h3) !important;
}

h4 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-h4) !important;
    line-height: normal !important;
    color: var(--colore-h4) !important;
}

h5 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-h5) !important;
    line-height: normal !important;
    color: var(--colore-h5) !important;
}

p {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: var(--font-weight-p-l) !important;
    line-height: var(--line-height-p-l) !important;
    color: var(--colore-p) !important;
}

p.paragraph-xl {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-xl) !important;
    font-weight: var(--font-weight-p-xl) !important;
    line-height: var(--line-height-p-xl) !important;
    color: var(--colore-p) !important;
}

p.paragraph-l {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: var(--font-weight-p-l) !important;
    line-height: var(--line-height-p-l) !important;
    color: var(--colore-p) !important;
}

p.paragraph-r {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-r) !important;
    font-weight: var(--font-weight-p-r) !important;
    line-height: var(--line-height-p-r) !important;
    color: var(--colore-p) !important;
}

p.paragraph-s {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-s) !important;
    font-weight: var(--font-weight-p-s) !important;
    line-height: var(--line-height-p-s) !important;
    color: var(--colore-p) !important;
}

.paragraph-s p {
    font-size: 14px !important;
}

p.paragraph-xs {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-xs) !important;
    font-weight: var(--font-weight-p-xs) !important;
    line-height: var(--line-height-p-xs) !important;
    color: var(--colore-p) !important;
}

span {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-span) !important;
    font-weight: var(--font-weight-span) !important;
    line-height: 24px !important;
    color: var(--colore-span) !important;
}

a {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-a) !important;
    font-weight: var(--font-weight-a) !important;
    line-height: 24px !important;
    color: var(--colore-a) !important;
    text-decoration: none !important;
}

#menu-principale a {
    font-family: var(--font-family-menu) !important;
    font-size: var(--font-size-menu) !important;
    font-weight: var(--font-weight-menu) !important;
    line-height: 24px !important;
    color: var(--colore-voce-menu) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    background: transparent !important;
}

p.iubenda-cs-preferences-link {
    margin: 0px;
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-m) !important;
    font-weight: var(--font-weight-p-l) !important;
    line-height: var(--line-height-p-l) !important;
    color: var(--colore-a) !important;
}

/* 1.1 button */
.button-primary {
    width: fit-content;
    padding: 14px 24px !important;
    border-radius: 0px;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-family-buttons) !important;
}

.button-primary:hover {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
}

.button-secondary {
    width: fit-content;
    padding: 14px 24px !important;
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-family-buttons) !important;
}

.button-secondary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.button-header {
    font-size: var(--font-size-p-s) !important;
    white-space: nowrap;
    height: fit-content;
}

/* Bottone outline salvia (Figma: 303x54 / 386x54, bordo 1.5px, raggio 10, Manrope 18) */
.button-outline .elementor-button {
    display: flex;
    width: 100%;
    min-height: 54px;
    padding: 9px 20px !important;
    justify-content: center;
    align-items: center;
    background-color: transparent !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: 10px !important;
    transition: background-color .3s ease, color .3s ease;
}

.button-outline .elementor-button,
.button-outline .elementor-button span {
    font-family: var(--font-family-buttons) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: 400 !important;
    line-height: 35px !important;
    color: var(--color-primary) !important;
    text-transform: none;
}

.button-outline .elementor-button:hover {
    background-color: var(--color-primary) !important;
}

.button-outline .elementor-button:hover span {
    color: var(--color-white) !important;
}

/* Bottone pieno salvia (CTA principale: colori e raggio impostati nel widget Elementor) e bottone dei form.
   Le regole globali su "span" (sezione 2.0) impongono colore e corpo con !important:
   qui il testo eredita dal bottone, quindi serve !important per sovrascriverle. */
.button-solid .elementor-button-text,
.form-contatti .elementor-button-text {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.button-solid .elementor-button,
.form-contatti .elementor-button {
    transition: background-color .3s ease;
}

/* Form contatti: focus visibile e checkbox privacy allineata al testo */
.form-contatti .elementor-field-textual:focus {
    border-color: var(--color-primary) !important;
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.form-contatti .elementor-field-option {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
}

.form-contatti .elementor-field-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--color-primary);
}

.form-contatti .elementor-message {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-p-r);
}

/* Recapiti pagina contatti: link della lista con la tipografia del widget (annulla le regole globali su "a") */
.lista-contatti a,
.lista-contatti .elementor-icon-list-text {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--color-text) !important;
}

.lista-contatti a:hover .elementor-icon-list-text {
    color: var(--color-primary) !important;
}

/* 1.2 colors */
.white,
.white p,
.white h1,
.white h2,
.white h3,
.white h4,
.white a,
.white span {
    color: var(--color-white) !important;
}

.black,
.black p,
.black h1,
.black h2,
.black h3,
.black h4,
.black a,
.black span {
    color: var(--color-black) !important;
}

.color-secondary,
.color-secondary p,
.color-secondary h1,
.color-secondary h2,
.color-secondary h3,
.color-secondary h4,
.color-secondary a,
.color-secondary span {
    color: var(--color-secondary) !important;
}

.color-primary,
.color-primary p,
.color-primary h1,
.color-primary h2,
.color-primary h3,
.color-primary h4,
.color-primary a,
.color-primary span {
    color: var(--color-primary) !important;
}

.color-tertiary,
.color-tertiary p,
.color-tertiary h1,
.color-tertiary h2,
.color-tertiary h3,
.color-tertiary h4,
.color-tertiary a,
.color-tertiary span {
    color: var(--color-tertiary) !important;
}


/*
*	3.0 GLOBAL LAYOUT & UTILITIES
*/

div.full-width-box {
    max-width: 1920px !important;
    margin: auto !important;
}

body:not(.home) header .hero-img-container {
    height: auto !important;
    min-height: 83vh !important;
    /* Figma pagine interne: 895px su 1080 */
}

.elementor-widget-container {
    word-break: break-word;
}

.error404 .hero-image {
    display: none;
}

ul.room-occupancy-list {
    list-style: none;
    padding: 0;
    display: inline-flex;
    gap: 5px;
}

ul.room-occupancy-list li {
    display: list-item;
    padding-left: 10px;
}

ul.room-occupancy-list li:not(:first-child) {
    border-left: 1px solid #DCDFE5;
}

/* Ancore del menu (#servizi-posizione, #gallery, #eventi, #footer): spazio per l'header fisso (~80px dopo lo scroll) */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 96px;
}


/*
*	4.0 HEADER
*/

.hero-img-container {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Header fisso: stato iniziale trasparente, stato scroll salvia (Figma "Scroll") */
.header {
    transition: background-color .3s ease;
}

.header .header-inner {
    transition: padding .3s ease;
}

.header #logo-header img {
    transition: width .3s ease;
}

/* Stato scroll compatto (~80px desktop, ~72px tablet, ~64px mobile).
   Selettori con #header (id presente in tutti i template header) per superare le regole Elementor senza !important;
   il padding agisce sulle variabili --padding-* usate dai container Flexbox di Elementor. */
#header.scrolled {
    background-color: rgba(137, 144, 132, .8);
}

#header.scrolled .header-inner {
    --padding-top: 8px;
    --padding-bottom: 8px;
}

#header.scrolled #logo-header img {
    width: 90px;
}

/* CTA header visibile solo dopo lo scroll */
.header:not(.scrolled) .button-header {
    display: none !important;
}

/* Voci menu con ombra come da Figma (regole base del menu nella sezione 2.0) */
#menu-principale .sub-menu a {
    text-transform: none;
    text-shadow: none;
}

/* Voci menu (Figma: padding 10px, freccia 13x7 a 5px dal testo) */
#menu-principale .elementor-nav-menu--main>.elementor-nav-menu>li>a.elementor-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

#menu-principale .elementor-nav-menu--main .elementor-item .sub-arrow {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

#menu-principale .elementor-nav-menu--main .elementor-item .sub-arrow .e-font-icon-svg {
    width: 13px;
    height: 13px;
    fill: var(--color-white);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25));
}

/* DE e PL: voci di menu più lunghe. Nell'header compatto (dopo lo scroll) compare anche la CTA e il menu
   andava a capo: si riducono padding delle voci, spazio testo-freccia e padding orizzontale della CTA. */
html[lang^="de"] #header.scrolled #menu-principale .elementor-nav-menu--main>.elementor-nav-menu>li>a.elementor-item,
html[lang^="pl"] #header.scrolled #menu-principale .elementor-nav-menu--main>.elementor-nav-menu>li>a.elementor-item {
    /* ~2px a 1200px, 5px da 1800px in su (senza media query) */
    padding-left: clamp(1px, calc(.5vw - 4px), 5px);
    padding-right: clamp(1px, calc(.5vw - 4px), 5px);
    gap: 3px;
}

/* !important: necessario per superare il padding con !important di .button-white .elementor-button */
html[lang^="de"] #header.scrolled .button-white .elementor-button,
html[lang^="pl"] #header.scrolled .button-white .elementor-button {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Bottone bianco a pillola (CTA header) */
.button-white .elementor-button {
    background-color: var(--color-white) !important;
    border-radius: 50px !important;
    padding: 9px 24px !important;
}

.button-white .elementor-button,
.button-white .elementor-button span {
    font-family: var(--font-family-buttons) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    color: var(--color-primary) !important;
    text-transform: none;
}

.button-white .elementor-button:hover {
    background-color: var(--color-secondary) !important;
}

/* Ombra testi su immagine */
.ombra h1,
.ombra h2,
.ombra p,
.ombra span,
.ombra strong {
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* Voucher regalo */
.voucher-regalo {
    transition: transform .3s ease;
}

.voucher-regalo:hover {
    transform: scale(1.05);
}


/*
*	5.0 FOOTER
*/

/* Link del footer: ereditano la tipografia del widget (annulla le regole globali su "a") */
.footer a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    transition: opacity .3s ease;
}

.footer a:hover {
    opacity: .8;
}

.footer .footer-main a {
    color: var(--color-white) !important;
}

.footer a.footer-link-underline {
    text-decoration: underline !important;
    text-underline-position: from-font;
}

/* Lista "Potrebbe interessarti": interlinea 20px come da grafica */
.footer .footer-list .elementor-icon-list-text {
    font-size: 16px !important;
    line-height: 20px !important;
    color: var(--color-white) !important;
}

/* Freccia sottile come da Figma (5x9px, linea 1,5px) al posto della chevron piena di Font Awesome;
   testo a 18px dall'inizio della freccia (5px freccia + 8px "Rientro testo" del widget + 5px padding del testo di Elementor) */
.footer .footer-list .elementor-icon-list-icon {
    width: 5px;
    min-width: 5px;
    box-sizing: content-box;
    justify-content: flex-start;
}

.footer .footer-list .elementor-icon-list-icon svg {
    display: none;
}

.footer .footer-list .elementor-icon-list-icon::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--color-white);
    border-right: 1.5px solid var(--color-white);
    transform: translateX(-3px) rotate(45deg);
}

div#icone-social-footer svg {
    width: 26px !important;
    height: 26px !important;
}

/* Newsletter: form Brevo, stile in template-parts/shortcodes/shortcode-newsletter-brevo/ */

/* Barra legale bianca */
.footer .footer-bottom a {
    color: var(--color-text) !important;
}

.footer .footer-bottom a.footer-jampaa {
    font-weight: 700 !important;
}

/* Email footer (dinamica da ACF Opzioni) sottolineata */
.footer .footer-underline a {
    text-decoration: underline !important;
    text-underline-position: from-font;
}


/*
*	6.0 HOMEPAGE & COMPONENTI
*/

/* Testi di sezione: spaziatura paragrafi come da Figma */
.testo-sezione p {
    margin: 0 0 15px;
}

.testo-scheda p {
    margin: 0 0 10px;
}

.testo-sezione p:last-child,
.testo-scheda p:last-child {
    margin-bottom: 0;
}

/* Testi delle schede: Manrope 18/24 */
.testo-scheda p.paragraph-l {
    line-height: 24px !important;
}

/* Link sottolineato salvia ("Lasciati sorprendere") */
a.link-sottolineato {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    text-underline-position: from-font;
}

/* Badge verdi (icone + testo #219653, Manrope 15/20) */
.badge-verdi .elementor-icon-list-text {
    font-family: var(--font-family-secondary) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #219653 !important;
}

.badge-centrati .elementor-icon-list-items {
    justify-content: center;
}

/* Schede (nested tabs) "Un giorno in Carnia" e "Territorio" */
.tabs-hotel {
    --n-tabs-title-gap: 111px;
    --n-tabs-gap: 0px;
}

.tabs-territorio {
    --n-tabs-title-gap: 81px;
}

.tabs-hotel .e-n-tabs-heading {
    justify-content: center !important;
    gap: 111px !important;
    border: none;
}

.tabs-territorio .e-n-tabs-heading {
    gap: 81px !important;
}

.tabs-hotel .e-n-tab-title {
    flex: 0 0 auto !important;
    width: auto !important;
}

.tabs-hotel .e-n-tab-title {
    position: relative;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.tabs-hotel .e-n-tab-title-text,
.tabs-hotel .e-n-tab-title-text * {
    font-family: var(--font-family-secondary) !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #4A4A4A !important;
    text-align: center;
    transition: color .3s ease;
}

.tabs-hotel .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.tabs-hotel .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text * {
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

.tabs-hotel .e-n-tab-title:hover .e-n-tab-title-text {
    color: var(--color-primary) !important;
}

/* Linee separatrici tra le schede (81px / 51px) */
.tabs-hotel .e-n-tab-title:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    width: 81px;
    height: 1px;
    background-color: #4A4A4A;
    pointer-events: none;
}

.tabs-territorio .e-n-tab-title:not(:last-child)::after {
    width: 51px;
}

.tabs-giornata .e-n-tabs-content {
    margin-top: 39px;
}

.tabs-territorio .e-n-tabs-content {
    margin-top: 51px;
}

/* Loop item: card camera */
.room-card-media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* Immagine a tutta larghezza della card (Figma 386x442, cover) */
.room-card-image,
.room-card-image a {
    display: block !important;
    width: 100% !important;
}

.room-card-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 442px !important;
    object-fit: cover !important;
    object-position: center center;
    border-radius: 10px;
}

/* Placeholder grigio (Figma) solo per le camere senza immagine in evidenza */
.room-card-media:not(:has(img)) {
    min-height: 442px;
    background-color: #C4C4C4;
}

/* Archivio camere: card "Potrebbe interessarti anche" */
.card-interesse img {
    transition: transform .4s ease;
}

.card-interesse:hover img {
    transform: scale(1.03);
}

.card-interesse .elementor-widget-image {
    overflow: hidden;
    border-radius: 10px;
}

.room-card-badge:not(:has(.elementor-heading-title)),
.room-card-badge:has(.elementor-heading-title:empty) {
    display: none;
}

/* Offerte: titolo card (h2 semantico con il corpo dell'H4 di Figma) e titoli di sezione della singola (corpo H3).
   Le regole globali sugli heading (2.0) usano !important, quindi servono anche qui. */
.titolo-card .elementor-heading-title {
    font-size: var(--font-size-h4) !important;
}

.titolo-sezione-offerta .elementor-heading-title {
    font-size: var(--font-size-h3) !important;
}

.room-card h2 a,
.room-card h4 a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.room-card-occupancy .room-occupancy-text {
    font-family: var(--font-family-secondary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--color-text) !important;
}

/* Offerte: elenchi "Cosa include" / "Perché sceglierla" con pallino salvia, sottogruppi in grassetto */
.lista-offerta ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.lista-offerta li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 24px;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-p-l);
    line-height: 26px;
    color: var(--color-text);
}

.lista-offerta li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.lista-offerta p strong {
    color: var(--color-dark);
}

.lista-offerta ul:last-child {
    margin-bottom: 0;
}

/* Offerte: prezzo della card allineato sulla linea di base, etichetta periodo leggibile su foto */
.offerta-prezzo {
    align-items: baseline;
}

/*
.offerta-periodo .elementor-heading-title {
    box-shadow: 0 4px 14px rgba(41, 39, 35, .18);
}
*/

/* Manifestazioni: luogo + distanza nella card e nell'intestazione (!important: annulla la regola globale su "span") */
.meta-manifestazione .elementor-icon-list-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    color: var(--color-text) !important;
}

/* Manifestazioni: testo dell'articolo (contenuto WordPress) con spaziatura tra paragrafi */
.contenuto-manifestazione p {
    margin: 0 0 18px;
}

.contenuto-manifestazione p:last-child {
    margin-bottom: 0;
}

/* Esperienze: card tour (loop item 947, Figma "Tour in …").
   I link del titolo (H4 Newsreader 28) e di "Vedi dettaglio" (Manrope 18/35 salvia) ereditano lo stile del widget:
   !important necessario per annullare la regola globale su "a" (Manrope 16 bold). */
.card-tour h4 a,
.card-tour .link-dettaglio a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.card-tour h4 a:hover,
.card-tour .link-dettaglio a:hover {
    color: var(--color-dark) !important;
}

/* Manifestazioni: elenco vantaggi nella card di prenotazione, più compatto */
.lista-vantaggi li {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 24px;
}

.lista-vantaggi li::before {
    top: 8px;
}

/* Pagina Dati societari: stile delle righe impostato in Elementor; qui solo l'ultima riga senza separatore
   (!important: il bordo è impostato dal container Elementor con selettore più specifico) */
.riga-dato:last-child {
    border-bottom-width: 0 !important;
}

.valore-dato .elementor-heading-title {
    word-break: break-word;
}

/* Loop item: card recensione */
.review-text {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-text p {
    margin: 0;
    font-size: 16px !important;
    line-height: 20px !important;
}

.review-more a {
    font-weight: 700 !important;
    color: var(--color-text) !important;
    text-decoration: underline !important;
    text-underline-position: from-font;
}

/* "Leggi tutto" nascosto se la recensione non ha una pagina collegata */
.review-more:not(:has(a)) {
    display: none;
}

/* Caroselli loop: frecce scure */
.carosello-camere .elementor-swiper-button,
.carosello-recensioni .elementor-swiper-button {
    color: var(--color-text);
}

/* Caroselli loop: ombra delle card recensione non tagliata */
.carosello-recensioni .swiper {
    padding: 10px 5px 25px;
}

/* Carosello stagioni: frecce sull'immagine (a metà dei 507px, 33px dai bordi) */
.carosello-stagioni .elementor-swiper-button {
    top: 253px;
    transform: translateY(-50%);
}

.carosello-stagioni .elementor-swiper-button-prev {
    left: 33px;
}

.carosello-stagioni .elementor-swiper-button-next {
    right: 33px;
}

.label-stagione .elementor-heading-title {
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* Comparatore: titolo nativo nascosto (c'è il titolo della sezione) */
.comparatore-home .pc_title {
    display: none !important;
}

/* Gallery cucina */
.gallery-cucina {
    overflow: hidden;
}

/* Hero: titolo "Hotel Gardel" Newsreader 80px (Figma) */
.hero-img-container h1 {
    font-size: clamp(48px, 30px + 2.6vw, 80px) !important;
    line-height: 1.1 !important;
}

/* Selettore lingua automatico WPML nel footer: non previsto in grafica */
.wpml-ls-statics-footer {
    display: none !important;
}

/* Schede: annulla sfondi e colori di default del kit Elementor */
.tabs-hotel {
    --n-tabs-title-background-color: transparent;
    --n-tabs-title-background-color-hover: transparent;
    --n-tabs-title-background-color-active: transparent;
    --n-tabs-title-border-width: 0;
}

.tabs-hotel .e-n-tab-title[aria-selected="true"],
.tabs-hotel .e-n-tab-title:hover {
    background-color: transparent !important;
}


/*
*	7.0 SCHEDA CAMERA (template Single camera - Figma "Suite")
*/

/* Header camere: sempre nello stato salvia (Figma: 116px, rgba(137,144,132,.8)) */
.header.header-camere {
    background-color: rgba(137, 144, 132, .8) !important;
}

.header.header-camere .header-inner {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.header.header-camere #logo-header img {
    width: 129px !important;
}

/* CTA sempre visibile nell'header camere da 1025px in su (tablet verticale e mobile: nascosta, vedi responsive-styles) */
.header.header-camere .button-header {
    display: block !important;
}

/* Titolo camera: Newsreader 56 */
.titolo-camera h1 {
    font-size: clamp(38px, 26px + 1.5625vw, 56px) !important;
}

/* Bottone "Torna alla panoramica": pillola bianca con bordo salvia */
.button-pill-outline .elementor-button {
    display: inline-flex;
    align-items: center;
    min-height: 45px;
    padding: 8px 20px 8px 14px !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 50px !important;
    transition: background-color .3s ease;
}

.button-pill-outline .elementor-button,
.button-pill-outline .elementor-button span {
    font-family: var(--font-family-buttons) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    color: var(--color-primary) !important;
    text-transform: none;
}

.button-pill-outline .elementor-button-icon svg,
.button-pill-outline .elementor-button-icon i {
    fill: var(--color-primary);
    color: var(--color-primary);
}

.button-pill-outline .elementor-button:hover {
    background-color: var(--color-primary) !important;
}

.button-pill-outline .elementor-button:hover span,
.button-pill-outline .elementor-button:hover i {
    color: var(--color-white) !important;
    fill: var(--color-white);
}

/* Gallery camera (shortcode [custom_gallery_camere]): 649 + 2x356, gap 15, altezza 574, raggio 15 */
.galleria-camera div.custom-gallery {
    grid-template-columns: 649fr 727fr;
    gap: 15px;
}

.galleria-camera div.custom-gallery:not(:has(.gallery-sub-column)) {
    grid-template-columns: 1fr;
}

.galleria-camera .gallery-column-2 {
    gap: 16px 15px;
}

.galleria-camera div.gallery-column {
    height: 574px;
}

.galleria-camera .gallery-sub-column {
    height: 279px;
    max-height: 279px;
}

.galleria-camera a.lightbox-link {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background-color: #D9D9D9;
}

.galleria-camera div.gallery-column img,
.galleria-camera div.gallery-sub-column img {
    border-radius: 15px;
    transition: transform .4s ease;
}

.galleria-camera a.lightbox-link:hover img {
    transform: scale(1.03);
}

.galleria-camera .gallery-sub-column.overlay-container img,
.galleria-camera .gallery-sub-column.overlay-container:hover img {
    filter: none;
}

.galleria-camera button.see-all-btn,
.galleria-camera button.see-all-btn:hover,
.galleria-camera button.see-all-btn:focus {
    min-width: 237px;
    min-height: 46px;
    padding: 9px 20px !important;
    border: 0 !important;
    border-radius: 50px;
    font-family: var(--font-family-buttons) !important;
    font-size: 18px !important;
    font-weight: 500;
    line-height: 28px;
    text-transform: none;
}

.galleria-camera button.see-all-btn {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.galleria-camera button.see-all-btn:hover,
.galleria-camera button.see-all-btn:focus {
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
}

/* Ospiti + metratura */
.room-occupancy-fino {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.room-occupancy-fino i {
    font-size: 20px;
    color: var(--color-text);
}

.room-occupancy-fino .room-occupancy-text {
    font-size: 16px !important;
    line-height: 28px !important;
}

/* Descrizione lunga: Manrope 18/26, paragrafi a 12px */
.testo-camera p {
    margin: 0 0 12px;
    font-size: var(--font-size-p-l) !important;
    line-height: 26px !important;
}

.testo-camera p:last-child {
    margin-bottom: 0;
}

.testo-camera strong,
.testo-camera b {
    font-weight: 700;
}

/* "Cosa troverai in camera" (shortcode [servizi_dotazioni]) su 2 colonne con pallino */
.servizi-camera .services-list {
    grid-template-columns: repeat(2, minmax(0, 299px)) !important;
    column-gap: 0;
    row-gap: 17px;
}

.servizi-camera .service-item {
    padding: 0;
    background: transparent;
    border-radius: 0;
    gap: 11px;
}

.servizi-camera .service-item:not(:has(.service-icon))::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #D9D9D9;
}

.servizi-camera .service-icon {
    margin-right: 0;
}

.servizi-camera .service-item.on-evidence {
    color: var(--color-text);
}

.servizi-camera span.service-label {
    font-size: var(--font-size-p-l) !important;
    line-height: 24px !important;
}

/* Card "Perché ti innamorerai" */
.card-innamorerai .elementor-widget-image {
    overflow: hidden;
    border-radius: 10px;
}

.card-innamorerai img {
    transition: transform .4s ease;
}

.card-innamorerai:hover img {
    transform: scale(1.03);
}


/*
*	8.0 PAGINE SAPORI (mezza pensione, colazione, cucina gourmet)
*/

/* Slider immagine + testo (Figma: 796x470, raggio 10, frecce bianche interne) */
.slider-split .swiper,
.slider-split .elementor-image-carousel-wrapper {
    border-radius: 10px;
    overflow: hidden;
}

.slider-split .swiper-slide-image {
    display: block;
    width: 100%;
    height: 470px;
    object-fit: cover;
    border-radius: 10px;
}

.slider-split .elementor-swiper-button {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.slider-split .elementor-swiper-button-prev {
    left: 25px;
}

.slider-split .elementor-swiper-button-next {
    right: 25px;
}


/*
*	9.0 RESPONSIVE
*	Le regole per breakpoint stanno in responsive-styles/ (caricati da functions.php con media allineate al Kit Elementor):
*	style-laptop.css 1201-1540 | style-tablet-orizzontale.css 1025-1200 | style-tablet-verticale.css 768-1024 | style-mobile.css <=767
*/