/* === base.css === */
/* ==========================================================================
   Bedouin — base: font, design token, reset.
   Valori misurati sugli stili calcolati di bedouin.it (Chrome, 21-09-2026),
   non copiati dallo spec: dove i due divergono vince il sito vivo.
   ========================================================================== */

/* --- Font self-hosted ----------------------------------------------------
   Inter: file variabile, asse wght 100–900 (il CSS usa da 100 a 900). Nessun intervallo di peso
   dichiarato, come sul vivo: Chrome applica comunque il peso richiesto tramite l'asse.

   Il file intero (190 KB, 900 caratteri, assi opsz+wght) era la richiesta piu' pesante della pagina
   e in preload rubava la banda ai CSS che sbloccano il disegno (FCP 3,6 s). Diviso in due
   sottoinsiemi con unicode-range, come fa Google Fonts: le pagine italiane e inglesi scaricano solo
   il primo. L'asse opsz e' fissato a 14 (il suo valore di default) perche' nessuna regola usa
   font-optical-sizing o font-variation-settings.
     latin     64 KB  — tutto il sito tranne due caratteri
     latin-ext 75 KB  — solo dove compare "ā" (/prodotti/)
   Rigenerare dopo un aggiornamento di Inter: scripts/build_fonts.py */
@font-face {
  font-family: "Inter Display";
  src: url("../../fonts/InterVariable-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2264, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Display";
  src: url("../../fonts/InterVariable-latinext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Mono: i 12 file che Elementor scaricava da Google Fonts (latin + latin-ext). */
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-75f3f285.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-9a087a1b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-32e9ba6a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-cb2a35ab.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-719d7d41.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-c32e5a77.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-63d829a7.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-c5d273fb.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-9ad76cd0.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-a175863f.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-36c1af8e.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-6a59878c.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }

/* artifex-hand-cf arriva da Adobe Fonts (kit hci5pck), caricato in functions.php. */

/* --- Design token --------------------------------------------------------
   Breakpoint (le media query non leggono le variabili: valori da ripetere a mano)
     mobile   ≤ 767px    Elementor mobile
     tablet   768–1024   Elementor tablet
     desktop  ≥ 1025px
     header   ≤ 991px    solo l'header passa a hamburger qui, non a 1024
   Il sito vivo NON ha breakpoint laptop/widescreen attivi: 1440 e 1920
   condividono gli stessi valori, cambia solo lo spazio disponibile. */
:root {
  /* colori del kit Elementor 15 */
  --color-beige: #fffae7;          /* Beige: sfondi chiari, testo su scuro */
  --color-nero: #1c1d20;           /* Nero: sezioni scure, footer */
  --color-mattone: #91441e;        /* Mattone: CTA */
  /* colori scritti a mano nei widget */
  --color-mattone-caldo: #8b4528;  /* testo CTA header, hover sottomenu */
  --color-testo: #1a1917;          /* testo su beige nelle pagine */
  --color-beige-supporto: #cec9b8; /* bordi, divisori */
  --color-ardesia: #2c313a;        /* voci sottomenu desktop, chiudi menu mobile, header crema */
  --color-header-line: #e5e5e5;    /* filo sotto l'header crema */
  --color-footer-label: #868582;   /* etichette colonne footer */
  --color-footer-credit: #929088;  /* "Designed by" */
  --color-body: #333;              /* testo di default (reset Hello Elementor) */
  --color-link: #c36;              /* link di default (reset Hello Elementor) */
  --color-link-hover: #336;
  --color-bg: #fff;                /* sfondo body: si vede nella fascia di 20px sopra la prima sezione */

  /* famiglie */
  --font-display: "artifex-hand-cf", "Artifex Hand CF", serif;
  --font-sans: "Inter Display", "Inter", sans-serif;
  --font-mono: "DM Mono", monospace;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* scala tipografica misurata (header, menu, footer) */
  --fs-nav: 0.85rem;          /* 13.6px voci menu desktop, lingua */
  --fs-subnav: 0.8rem;        /* 12.8px sottomenu desktop e mobile */
  --fs-cta-header: 0.95rem;   /* 15.2px "Preventivo" */
  --fs-offcanvas: 1.6rem;     /* 25.6px voci menu mobile */
  --fs-footer-claim: 69px;    /* "Nomadic art of life" */
  --fs-footer-claim-m: 30px;
  --fs-footer-link: 18px;
  --fs-footer-link-m: 14px;
  --fs-footer-label: 12px;
  --fs-footer-legal: 14px;
  --fs-footer-legal-m: 12px;
  /* scala dei titoli di pagina (censimento del CSS Elementor sulle 19 pagine):
     ogni widget ha il suo valore in px, questi sono i piu' ricorrenti.
     Le pagine (milestone 3) useranno i valori esatti di ogni sezione. */
  --fs-title-xl: 61px;
  --fs-title-l: 50px;
  --fs-title-m: 29px;
  --fs-title-l-tablet: 46px;
  --fs-title-m-mobile: 24px;

  /* spaziature */
  --space-container: 10px;    /* padding di default dei container Elementor */
  --gap-container: 20px;      /* gap di default dei container Elementor */
  --gutter: 50px;             /* margine laterale delle fasce (desktop e tablet) */
  --gutter-mobile: 20px;
  --header-pad-y: 30px;
  --header-pad-x: 40px;
  --header-pad-mobile: 20px;

  /* movimento */
  --ease-out-power2: cubic-bezier(0.215, 0.61, 0.355, 1); /* = GSAP power2.out */
}

/* --- Reset ---------------------------------------------------------------
   Sottoinsieme del reset di Hello Elementor che il sito vivo eredita: le misure
   di header e footer dipendono da queste regole (line-height 1.5, colori link). */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0.5rem 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

p {
  margin-block: 0 0.9rem;
}

a {
  background-color: transparent;
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-link-hover);
}

b,
strong {
  font-weight: bolder;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
}

ul,
ol,
li {
  margin-block: 0;
}

button {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* Lenis (scorrimento morbido, assets/js/smooth-scroll.js): regole della libreria */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* "Riduci movimento": cambi di stato istantanei (header crema, menu mobile, hover).
   Anche il ritardo va azzerato, altrimenti il pannello chiuso resta visibile 0.45s. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}

/* === header.css === */
/* ==========================================================================
   Header: barra fissa trasparente + menu mobile off-canvas.
   Fonte: CSS dei due widget HTML del template 13629 + il "CSS personalizzato"
   Elementor del secondo widget. Le due fonti si contraddicevano: qui c'e' il
   risultato finale della cascata, verificato sugli stili calcolati del sito vivo.
   ========================================================================== */

/* Contenitore di header e off-canvas: contiene solo elementi fissi, quindi e' alto 0.
   CORREZIONE rispetto al sito vivo: li' il container Elementor e' alto 20px (gap tra due
   widget vuoti) e lascia una fascia bianca sopra la prima sezione da 768px in su.
   Qui la fascia non c'e': nei confronti usare --ref-crop-top 20@768,1024,1440,1920.
   Lo z-index crea il contesto di impilamento (99999, da mobile 99, come sul vivo). */
.bedouin-header-wrap {
  position: relative;
  z-index: 99999;
}

/* Sentinella per header-sticky.js: quando esce dallo schermo si e' scrollato oltre 120px
   (la soglia "sticky start" impostata nel template Animation Addons). */
.bedouin-header-sentinel {
  position: absolute;
  top: 120px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --- Barra ---------------------------------------------------------------
   Trasparente in cima alla pagina, crema dopo lo scroll (.is-scrolled, header-sticky.js).
   CORREZIONE rispetto al sito vivo: li' le regole dello stato crema esistono ma nessuno
   script le attiva, e sopra le sezioni beige il menu bianco sparisce. */
.bedouin-site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: var(--header-pad-y) var(--header-pad-x);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, padding 0.4s ease, border-bottom-color 0.4s ease;
}

.bedouin-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bedouin-header-logo {
  position: relative;
  display: block;
  height: 36px;
}

.bedouin-header-logo img {
  display: block;
  width: auto;
  height: 100%;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

/* logo scuro sovrapposto, visibile solo nello stato crema */
.bedouin-header-logo .logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.bedouin-header-logo:hover img {
  transform: scale(1.05);
}

/* --- Menu desktop -------------------------------------------------------- */
.bedouin-desktop-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.bedouin-desktop-nav a.menu-item,
.bedouin-desktop-nav .menu-item-wrapper > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-beige);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease;
}

.bedouin-desktop-nav .menu-item-parent,
.bedouin-desktop-nav .menu-item-parent:hover {
  color: inherit;
  text-decoration: none;
}

/* sottolineatura che si allarga */
.bedouin-desktop-nav a.menu-item::after,
.bedouin-desktop-nav .menu-item-wrapper > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-beige);
  transition: width 0.3s ease, background-color 0.4s ease;
}

.bedouin-desktop-nav a.menu-item:hover::after,
.bedouin-desktop-nav .menu-item-wrapper:hover > span::after,
.bedouin-desktop-nav .menu-item-wrapper:focus-within > span::after {
  width: 100%;
}

/* Voce con sottomenu. Il padding compensato dal margine negativo tiene aperto il
   sottomenu mentre il mouse scende. Vale anche per le voci del menu mobile (stessa classe). */
.bedouin-menu-item-has-children {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.bedouin-desktop-dropdown-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-dropdown-arrow,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-desktop-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 180px;
  padding: 20px 25px;
  background-color: var(--color-beige);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-submenu,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bedouin-desktop-submenu a {
  font-family: var(--font-sans);
  font-size: var(--fs-subnav);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ardesia);
  text-decoration: none;
  transition: color 0.3s ease;
}

.bedouin-desktop-submenu a:hover {
  color: var(--color-mattone-caldo);
}

/* --- Selettore lingua (markup di TranslatePress) --------------------------
   Gli !important battono il CSS del plugin, che arriva con selettori propri. */
.bedouin-lang-switcher {
  display: flex;
  align-items: center;
}

.desktop-lang::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  margin-right: 25px;
  margin-left: -5px;
  background-color: var(--color-beige);
  opacity: 0.4;
  transition: background-color 0.4s ease;
}

.bedouin-lang-switcher .trp-language-switcher {
  position: relative;
  border: none !important;
  background: transparent !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-current-language {
  display: none !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-language {
  display: block !important;
  position: static !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bedouin-lang-switcher a,
.bedouin-lang-switcher a span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-nav) !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--color-beige) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: opacity 0.3s ease, color 0.4s ease !important;
}

.bedouin-lang-switcher a:hover {
  opacity: 0.6;
}

.mobile-lang {
  display: none;
}

.desktop-lang {
  display: flex;
}

/* --- Azioni: CTA e hamburger --------------------------------------------- */
.bedouin-header-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.bedouin-header-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: var(--fs-cta-header);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-mattone-caldo);
  background-color: var(--color-beige);
  border: 1px solid var(--color-beige);
  transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease, border-color 0.4s ease;
}

/* riempimento mattone da sinistra all'hover */
.bedouin-header-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-mattone-caldo);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-header-cta:hover {
  color: var(--color-beige);
}

.bedouin-header-cta:hover::before {
  transform: scaleX(1);
}

.bedouin-hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.bedouin-hamburger-btn:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-hamburger-btn span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-beige);
  transition: transform 0.3s ease, background-color 0.4s ease;
}

.bedouin-hamburger-btn:hover span:first-child {
  transform: translateY(-2px);
}

.bedouin-hamburger-btn:hover span:last-child {
  transform: translateY(2px);
}

/* --- Stato crema (dopo 120px di scroll) -----------------------------------
   Regole dello stato ".wcf-sticky-header" scritte nel widget 4e57ad56 del sito vivo. */
.bedouin-header-wrap.is-scrolled .bedouin-site-header {
  padding: 15px var(--header-pad-x);
  background-color: var(--color-beige);
  border-bottom-color: var(--color-header-line);
}

.is-scrolled .bedouin-header-logo .logo-light {
  opacity: 0;
}

.is-scrolled .bedouin-header-logo .logo-dark {
  opacity: 1;
}

.is-scrolled .bedouin-desktop-nav a.menu-item,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span {
  color: var(--color-ardesia);
}

.is-scrolled .bedouin-desktop-nav a.menu-item::after,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span::after {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-hamburger-btn span {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-header-cta {
  color: var(--color-mattone-caldo);
  background-color: transparent;
  border-color: var(--color-mattone-caldo);
}

/* Sul vivo la regola sopra (con !important) batteva anche l'hover: testo mattone sul
   riempimento mattone, cioe' "Preventivo" invisibile al passaggio del mouse. Corretto. */
.is-scrolled .bedouin-header-cta:hover {
  color: var(--color-beige);
}

.is-scrolled .bedouin-lang-switcher a,
.is-scrolled .bedouin-lang-switcher a span {
  color: var(--color-ardesia) !important;
}

.is-scrolled .desktop-lang::before {
  background-color: var(--color-ardesia);
}

@media (max-width: 991px) {
  .bedouin-site-header {
    padding: var(--header-pad-mobile);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .bedouin-header-wrap.is-scrolled .bedouin-site-header {
    padding: 15px var(--header-pad-mobile);
  }

  .bedouin-hamburger-btn {
    display: flex;
  }

  .bedouin-desktop-nav,
  .bedouin-header-cta,
  .desktop-lang {
    display: none;
  }

  .mobile-lang {
    display: flex;
  }

  .bedouin-header-actions {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .bedouin-header-wrap {
    z-index: 99;
  }
}

/* ==========================================================================
   Menu mobile off-canvas
   ========================================================================== */
.bedouin-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28, 29, 32, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.bedouin-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Pannello che scorre da destra, in apertura e in chiusura.
   CORREZIONE rispetto al sito vivo: li' due regole in conflitto (right:-100% animato +
   translateX(100%) non animato) lo facevano aprire scorrendo e chiudere di scatto.
   Qui un solo meccanismo, transform (niente ricalcolo del layout).
   visibility nascosta a pannello chiuso, con ritardo pari alla transizione: l'ombra non
   sborda sul bordo destro della pagina e i link del menu chiuso escono dal giro del Tab. */
.bedouin-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  width: 340px;
  max-width: 85vw;
  height: 100%;
  overflow-y: auto;
  background-color: var(--color-beige);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0.45s;
}

.bedouin-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0s;
}

@media (min-width: 992px) {
  .bedouin-offcanvas,
  .bedouin-offcanvas-overlay {
    display: none;
  }
}

.bedouin-offcanvas-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  padding: 2.5rem 2rem;
}

body.bedouin-menu-open {
  overflow: hidden;
  touch-action: none;
}

.bedouin-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-block;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ardesia);
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-menu-close:hover {
  opacity: 0.5;
}

.bedouin-menu-nav {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.bedouin-menu-nav > a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  color: var(--color-nero);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  transition: opacity 0.3s ease;
}

.bedouin-menu-nav > a:hover,
.bedouin-submenu-toggle:hover {
  color: var(--color-nero);
  opacity: 0.5;
}

.bedouin-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-nero);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  /* raggio ereditato sul sito vivo dallo stile pulsanti del kit Elementor:
     incurva appena le estremita' del filo inferiore */
  border-radius: 4px;
  box-shadow: none;
  appearance: none;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-submenu-toggle:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-dropdown-arrow {
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-submenu {
  max-height: 300px;
  margin-top: 20px;
}

.bedouin-submenu a {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-subnav);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.bedouin-submenu a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
  padding-bottom: 30px;
}

.bedouin-menu-socials {
  display: flex;
  gap: 1rem;
  margin-bottom: 32px;
}

.bedouin-menu-socials a {
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.bedouin-menu-socials a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-socials svg {
  width: 20px;
  height: 20px;
}

.bedouin-menu-cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 1.1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-beige);
  background-color: var(--color-nero);
  border: 1px solid var(--color-nero);
  transition: color 0.3s ease;
}

/* velo beige che entra da sinistra all'hover ed esce a destra */
.bedouin-menu-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-beige);
  transform: translateX(-101%);
}

.bedouin-menu-cta:hover {
  color: var(--color-nero);
}

.bedouin-menu-cta:hover::before {
  animation: bedouinMenuSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.bedouin-menu-cta:not(:hover)::before {
  animation: bedouinMenuSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bedouinMenuSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}

@keyframes bedouinMenuSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}

/* --- Barra di amministrazione di WordPress (la vede solo chi è collegato) -------------------
   È fissa in alto con z-index 100000, sopra il nostro header fisso: senza questa regola copre
   logo e menu. Sotto i 783px WordPress la fa scorrere con la pagina, quindi lì l'header resta a 0
   (con un margine fisso resterebbe uno spazio vuoto appena si scorre). */
@media screen and (min-width: 783px) {
  body.admin-bar .bedouin-site-header,
  body.admin-bar .bedouin-offcanvas {
    top: 32px;
  }

  body.admin-bar .bedouin-offcanvas {
    height: calc(100% - 32px);
  }
}

/* === footer.css === */
/* ==========================================================================
   Footer (template Elementor 12793).
   Misure dei container Elementor riportate 1:1: larghezze in %, padding di default
   di 10px solo dove il sito vivo non lo azzerava, altezze minime in vh.
   ========================================================================== */

/* --- Fascia scura -------------------------------------------------------- */
.site-footer__main {
  display: flex;
  flex-direction: column;
  min-height: 75vh;
  padding: 0 var(--gutter);
  background-color: var(--color-nero);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-container);
  width: 100%;
  padding-top: 50px;
}

.site-footer__cols {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-container);
  width: 95%;
  min-width: 0;
  padding: var(--space-container);
}

.site-footer__brand,
.site-footer__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-container);
  min-width: 0;
}

/* le quattro colonne partono da 100% / 37% / 37% / 37% e si restringono in proporzione */
.site-footer__brand {
  width: 100%;
  padding: var(--space-container);
}

.site-footer__col {
  width: 37%;
}

.site-footer__col--1 {
  padding: var(--space-container);
}

.site-footer__claim {
  width: 368px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-claim);
  font-weight: 100;
  line-height: 1;
  color: var(--color-beige);
}

.site-footer__label {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-label);
  font-weight: 500;
  line-height: 1;
  color: var(--color-footer-label);
}

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

.site-footer__list li {
  position: relative;
  display: flex;
  align-items: center;
}

.site-footer__list li:not(:last-child) {
  padding-bottom: 5px;
}

.site-footer__list li:not(:first-child) {
  margin-top: 5px;
}

.site-footer__list a {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-footer-link);
  font-weight: 300;
}

.site-footer__list span {
  color: var(--color-beige);
  transition: color 0.3s;
}

/* --- Logotipo "bedouin" -------------------------------------------------- */
.site-footer__wordmark-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.site-footer__wordmark {
  width: 100%;
  margin-top: 50px;
  overflow: hidden;
  text-align: center;
}

/* SVG stirato alla misura del box, come sul sito vivo (object-fit: fill) */
.site-footer__wordmark img {
  display: inline-block;
  vertical-align: middle;
  width: 90vw;
  max-width: 100%;
  height: 31vh;
  object-fit: fill;
}

/* --- Barra legale beige -------------------------------------------------- */
.site-footer__bar {
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  background-color: var(--color-beige);
}

.site-footer__bar-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  gap: var(--gap-container);
  width: 95%;
  min-height: 97px;
}

.site-footer__legal,
.site-footer__credit {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-legal);
  font-weight: 600;
  line-height: 1;
}

.site-footer__credit {
  color: var(--color-footer-credit);
}

.site-footer__credit a,
.site-footer__credit a:hover {
  color: inherit;
}

/* --- Tablet (≤1024) ------------------------------------------------------ */
@media (max-width: 1024px) {
  .site-footer__inner {
    padding-top: 100px;
  }

  .site-footer__cols {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px 20px;
    width: 100%;
    padding: 0;
  }

  .site-footer__claim {
    width: 348px;
  }

  .site-footer__col {
    width: 32%;
    padding: 0;
  }

  .site-footer__col--2,
  .site-footer__col--3 {
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .site-footer__col--3 {
    width: 30%;
  }

  .site-footer__list li:not(:last-child) {
    padding-bottom: 2.5px;
  }

  .site-footer__list li:not(:first-child) {
    margin-top: 2.5px;
  }

  .site-footer__wordmark {
    margin-top: 100px;
  }

  .site-footer__wordmark img {
    width: 86vw;
    max-width: 88vw;
    height: 156px;
  }

  .site-footer__bar-inner {
    width: 100%;
    min-height: 64px;
  }
}

/* --- Mobile (≤767) ------------------------------------------------------- */
@media (max-width: 767px) {
  .site-footer__main {
    min-height: 49vh;
    padding: 0 var(--gutter-mobile);
  }

  .site-footer__inner {
    padding-top: 50px;
  }

  .site-footer__cols {
    justify-content: space-between;
    gap: 40px 20px;
    margin-bottom: -27px;
  }

  .site-footer__brand {
    width: 44%;
    padding: 0;
  }

  .site-footer__claim {
    width: 100%;
    font-size: var(--fs-footer-claim-m);
  }

  .site-footer__col {
    width: 46%;
    align-items: flex-start;
  }

  .site-footer__col--3 {
    width: 46%;
  }

  .site-footer__list li:not(:last-child) {
    padding-bottom: 2px;
  }

  .site-footer__list li:not(:first-child) {
    margin-top: 2px;
  }

  .site-footer__list a {
    font-size: var(--fs-footer-link-m);
  }

  .site-footer__wordmark {
    margin: 30px 0 -10px;
  }

  .site-footer__wordmark img {
    width: 93%;
    max-width: 92vw;
    height: 85px;
  }

  .site-footer__bar {
    padding: 10px var(--gutter-mobile);
  }

  .site-footer__bar-inner {
    flex-wrap: nowrap;
    gap: 0;
    min-height: 9px;
  }

  .site-footer__legal {
    width: 183px;
    max-width: 183px;
    font-size: var(--fs-footer-legal-m);
    line-height: 1.5em;
  }

  .site-footer__credit {
    width: 87px;
    max-width: 87px;
    font-size: var(--fs-footer-legal-m);
    line-height: 15px;
    text-align: end;
  }
}

/* --- Animazioni d'ingresso (footer-reveal.js) -----------------------------
   Le classi .reveal-pending le mette lo script: senza JS, o con "riduci movimento",
   il footer resta visibile e fermo. Equivalenti CSS delle animazioni GSAP del sito vivo. */
.reveal-pending[data-reveal="fade-left"] {
  opacity: 0;
  transform: translateX(-50px);
}

.reveal-pending[data-reveal="wipe"] {
  transform: translateY(-100%);
}

.reveal-pending[data-reveal="wipe"] img {
  transform: translateY(100%) scale(1.3);
}

.reveal-pending.is-revealed[data-reveal="fade-left"] {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.5s var(--ease-out-power2) var(--reveal-delay, 0s),
    transform 1.5s var(--ease-out-power2) var(--reveal-delay, 0s);
}

.reveal-pending.is-revealed[data-reveal="wipe"],
.reveal-pending.is-revealed[data-reveal="wipe"] img {
  transform: none;
  transition: transform 1.5s var(--ease-out-power2);
}

/* === components/reveal.css === */
/* ==========================================================================
   Animazioni d'ingresso allo scroll (reveal.js). Due meccanismi:

   1. [data-anim]  — l'elemento entra da una posizione spostata e trasparente.
      Rifa' il "fade" di Animation Addons (GSAP "from") e le animazioni d'ingresso di
      Elementor (es. fadeInRight). Si regola con variabili CSS nell'attributo style:
        --anim-x / --anim-y   spostamento di partenza (es. -40px, 50px, 100%)   default 0
        --anim-duration       durata                                          default 1s
        --anim-delay          ritardo                                         default 0s
        --anim-ease           curva            default power2.out di GSAP
      Parte quando l'elemento arriva all'85% dell'altezza dello schermo ("top 85%").
      data-anim-watch="parent" = osserva il genitore (per chi parte fuori dal suo box,
      es. spostato del 100%: altrimenti non entrerebbe mai nello schermo).

   2. [data-inview="0.15"] — lo script mette subito .inview-pending e aggiunge .is-inview
      quando l'elemento e' visibile per la frazione indicata. Lo stile dei due stati lo scrive
      il componente, e deve nascondere solo con .inview-pending (cosi' senza JS si vede):
        .x.inview-pending { opacity: 0; }   .x.inview-pending.is-inview { opacity: 1; }
      (es. .bdn-anim nei pannelli della home, copiato dal widget del vivo).

   Senza JS o con "riduci movimento": tutto visibile e fermo (le classi .anim-pending
   le mette solo lo script).
   ========================================================================== */
.anim-pending {
  opacity: 0;
  transform: translate(var(--anim-x, 0), var(--anim-y, 0));
}

.anim-pending.is-animated {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s),
    transform var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s);
}

/* === components/headline-rotate.css === */
/* ==========================================================================
   Titolo a parole rotanti (widget "animated-headline" di Elementor, stile "rotate",
   animazione "swirl" lettera per lettera). headline-rotate.js scompone le parole in
   lettere e le fa ruotare; senza JS o con "riduci movimento" resta la prima parola, ferma.
   Misure di default del widget; font, dimensione e colori li decide la sezione.
   ========================================================================== */
.headline-rotate {
  display: block;
  font-size: 43px;
  line-height: 1.2;
}

.headline-rotate__text,
.headline-rotate__words {
  vertical-align: bottom;
}

/* Contenitore delle parole: largo quanto la parola attiva (headline-rotate.js ne anima la larghezza). */
.headline-rotate__words {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: start;
  perspective: 300px;
  transition: width 0.5s;
}

.headline-rotate__word {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
}

.headline-rotate__word.is-active {
  position: relative;
  opacity: 1;
}

/* scomposto in lettere (headline-rotate.js): le parole restano visibili, decidono le lettere */
.headline-rotate.is-split .headline-rotate__word {
  opacity: 1;
}

.headline-rotate__letter {
  display: inline-block;
  opacity: 0;
}

.headline-rotate__letter.is-in {
  animation: headline-swirl-in 0.4s forwards;
}

.headline-rotate__letter.is-out {
  animation: headline-swirl-out 0.4s forwards;
}

/* keyframe dell'animazione "swirl" di Elementor */
@keyframes headline-swirl-in {
  0% { opacity: 0; transform: translateZ(-20px) rotateX(90deg); }
  60% { opacity: 1; transform: translateZ(-20px) rotateX(-10deg); }
  100% { opacity: 1; transform: translateZ(-20px) rotateX(0deg); }
}

@keyframes headline-swirl-out {
  0% { opacity: 1; transform: translateZ(-20px) rotateX(0); }
  60% { opacity: 0; transform: translateZ(-20px) rotateX(-100deg); }
  100% { opacity: 0; transform: translateZ(-20px) rotateX(-90deg); }
}

/* Titoli doppi IT/EN (classi testo-rotante-it / testo-rotante-en, come sul vivo):
   TranslatePress mette la lingua nel body, si mostra solo quello della lingua corrente.
   Sul vivo queste due regole stavano nel CSS aggiuntivo del Customizer di Hello Elementor,
   che col cambio di tema non si applica piu': per questo stanno qui. */
body.translatepress-it_IT .testo-rotante-en,
body.translatepress-en_GB .testo-rotante-it {
  display: none !important;
}

/* === components/text-path.css === */
/* ==========================================================================
   Testo su cerchio (widget "text-path" di Elementor), SVG che ruota su se stesso.
   Markup: .text-path > svg[viewBox] > path#id + text > textPath[href=#id] (> a).
   Dimensione con --text-path-size (larghezza dell'SVG, default 150px); font e posizione
   li decide la sezione. Con "riduci movimento" sta fermo.
   ========================================================================== */
.text-path svg {
  width: var(--text-path-size, 150px);
  max-width: 100%;
  height: auto;
  overflow: visible;
  animation: text-path-rotate 20s linear infinite;
}

.text-path path {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

@keyframes text-path-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .text-path svg {
    animation: none;
  }
}

/* === components/hscroll.css === */
/* ==========================================================================
   Scroll orizzontale fissato (horizontal-scroll di Animation Addons, pista "pista-orizzontale").
   La sezione resta ferma sullo schermo e, scorrendo in giu', i pannelli scorrono in orizzontale.
   Markup:
     section.hscroll[data-hscroll][data-hscroll-distance="3744"]
       > .hscroll__viewport > .hscroll__track > .hscroll__panel (x N, larghi 100vw, alti 100vh)
   data-hscroll-distance = quanti px di scroll verticale servono per attraversare tutta la pista
   (sul vivo "horizontal_scroll_end": 3744 px, uguale a ogni larghezza).

   Stato di base (senza JS, o con "riduci movimento"): nessun pin, la sezione e' alta uno
   schermo, si vede il primo pannello e gli altri si raggiungono scorrendo di lato (swipe,
   trackpad, shift+rotella), con aggancio ai pannelli. E' anche lo stato "a riposo" che il
   confronto pixel fotografa, uguale a quello del vivo con il pin sciolto.
   Stato attivo (.is-active, lo mette hscroll.js): sezione alta 100vh + distanza, finestra
   sticky, pista spostata con transform.
   ========================================================================== */
.hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.hscroll__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.hscroll__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

.hscroll.is-active {
  height: calc(100vh + var(--hscroll-distance, 0px));
}

.hscroll.is-active .hscroll__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  scroll-snap-type: none;
}

.hscroll.is-active .hscroll__track {
  transform: translate3d(var(--hscroll-x, 0px), 0, 0);
  will-change: transform;
}

/* === components/text-split.css === */
/* ==========================================================================
   Testo che entra lettera per lettera o parola per parola allo scroll (animazione di testo
   "char"/"word" di Animation Addons, GSAP SplitText). Comportamento in text-split.js.

     <h2 class="text-split" data-text-split="char" data-text-delay="0.15">…</h2>
     <div class="text-split" data-text-split="word" data-text-delay="0.25"><p>…</p></div>

   Valori del vivo: ogni pezzo parte spostato di 20px a destra e trasparente, 1s, 0.02s fra un
   pezzo e il successivo, curva power1.out (predefinita di GSAP), dopo data-text-delay secondi,
   quando il testo arriva all'85% dello schermo.

   A riposo il testo del vivo resta spezzato da SplitText in lettere inline-block: niente
   crenatura ne' legature fra le lettere. Le due regole qui sotto danno lo stesso disegno anche
   quando il testo non viene spezzato (senza JS, "riduci movimento"): stesso ingombro, stessi a capo.
   ========================================================================== */
.text-split {
  font-kerning: none;
  font-variant-ligatures: none;
}

.text-split__word,
.text-split__char {
  position: relative;
  display: inline-block;
}

.text-split.is-pending .text-split__unit {
  opacity: 0;
  transform: translateX(20px);
}

.text-split.is-pending.is-revealed .text-split__unit {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s);
}

/* === pages/page-prodotti.css === */
/* ==========================================================================
   Prodotti (pagina Elementor 12066). Valori dal CSS Elementor della pagina e dai widget HTML
   del vivo, verificati sugli stili calcolati.
   Struttura (vedi page-prodotti.php):
     .prodotti-pista  = container 0094d6e, scroll orizzontale (componente hscroll), da 768px
     .prodotti-lista  = container b52e1c4, le stesse slide impilate, fino a 1024px
     (su tablet si vedono entrambe, come sul vivo)
   Breakpoint del vivo: tablet ≤1024, mobile ≤767; i widget delle slide usano anche 768.
   ========================================================================== */

/* --- Hero (09460a5 nella pista, 6b0be95 nell'elenco) ------------------------ */
.prodotti-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  overflow: hidden;
  padding-top: 200px;
  background: url("https://bedouin.it/wp-content/uploads/2026/03/asdfg-1536x1121.jpg") center center / cover no-repeat;
}

.prodotti-hero--lista {
  padding-top: 100px;
  background-image: url("https://bedouin.it/wp-content/uploads/2026/03/asdfg.jpg");
}

/* Titolo a parole rotanti (animated-headline 1780d68/c5dcaae e gemelli): il widget heading
   di Elementor qui NON azzera i margini dell'h1/h2 (.5rem sopra, 1rem sotto). */
.prodotti-hero__headline {
  align-self: center;
  width: 718px;
  max-width: 100%;
}

.prodotti-hero .headline-rotate {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  text-align: center;
}

.prodotti-hero .headline-rotate__text,
.prodotti-hero .headline-rotate__word {
  color: var(--color-nero);
}

.prodotti-hero .headline-rotate__word {
  font-family: var(--font-display);
  font-weight: 900;
}

.prodotti-hero__text {
  align-self: center;
  width: 592px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-align: center;
  color: #45474d;
}

.prodotti-hero__text p {
  margin-block-end: 0;
}

/* "Scorri in basso" (text-path 9add41f): SVG inline in una riga alta 1.5 × 35px, come sul vivo. */
.prodotti-hero__textpath {
  --text-path-size: 150px;
  margin-top: 50px;
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

/* Freccia (image b86041d): risale dentro il cerchio con un margine negativo. */
.prodotti-hero__arrow {
  display: flex;
  justify-content: center;
  margin-top: -150px;
}

.prodotti-hero__arrow img {
  display: block;
  width: 76px;
  height: auto;
}

/* --- Pista orizzontale (0094d6e) --------------------------------------------
   A riposo (senza JS, "riduci movimento", cattura) il vivo con il pin sciolto mostra il primo
   pannello: la fascia è alta quanto la slide più alta (100vh su desktop, di più su tablet) e la
   hero, alta quanto il suo contenuto, sta al centro su fondo beige. Attiva (.is-active) la hero
   riempie lo schermo, come faceva lo stile inline "height: 100%" di Animation Addons. */
.prodotti-pista {
  background-color: var(--color-beige);
}

.prodotti-pista:not(.is-active) .hscroll__track {
  align-items: center;
  min-height: 100vh;
}

.prodotti-pista:not(.is-active) .hscroll__panel {
  height: auto;
}

.prodotti-pista.is-active .prodotti-hero {
  height: 100%;
}

/* --- Elenco verticale (b52e1c4) --------------------------------------------- */
.prodotti-lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-beige);
}

.prodotti-lista > * {
  width: 100%;
}

.prodotti-lista__item {
  display: flex;
  flex-direction: column;
}

/* --- Visibilità per larghezza ----------------------------------------------- */
@media (min-width: 1025px) {
  .prodotti-lista {
    display: none;
  }
}

@media (max-width: 1024px) {
  .prodotti-hero {
    min-height: 1144px;
    padding-top: 150px;
  }

  .prodotti-hero__headline {
    width: 550px;
  }

  .prodotti-hero__arrow {
    margin-top: -132px;
  }
}

@media (max-width: 767px) {
  .prodotti-pista {
    display: none;
  }

  .prodotti-hero {
    min-height: 780px;
    padding: 120px 15px 0;
  }

  .prodotti-hero__headline {
    width: 325px;
  }

  .prodotti-hero .headline-rotate {
    font-size: 33px;
  }

  .prodotti-hero__textpath {
    --text-path-size: 100px;
    margin-top: 20px;
  }

  .prodotti-hero__arrow {
    margin-top: -108px;
  }

  .prodotti-hero__arrow img {
    width: 48px;
  }
}

/* ==========================================================================
   Slide del catalogo: CSS dei 12 widget HTML del vivo, portato di peso e NELLO STESSO ORDINE
   (prima i 6 della pista, poi i 6 dell'elenco). Le due copie usano le stesse classi: come sul vivo
   i blocchi dell'elenco, che vengono dopo, valgono anche per la pista (es. il fondo scuro di Arya,
   le regole tablet che allungano le slide della pista su tablet). Non riordinare, non unire.
   Tolto solo l'@import di Google Fonts (DM Mono è già self-hosted in base.css).
   ========================================================================== */

/* --- Tenda stretch Miraj: widget d070274 (pista desktop) --- */
.bs-bedouin-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #717462; color: #FFFAE7; overflow: hidden; }
.bs-slide-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-slide-text-left { margin-bottom: 25vh; }
.bs-slide-text-right { margin-top: 40vh; }
.bs-slide-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-stretch-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-stretch-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-stretch-cta:hover { color: #717462; }
.bs-stretch-cta:hover::before { animation: stretchSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-stretch-cta:not(:hover)::before { animation: stretchSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes stretchSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes stretchSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-slide-features-elegant { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-slide-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-slide-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-title-top { top: 0; right: -35%; }
.bs-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 768px) {
  .bs-bedouin-slide { flex-direction: column; height: auto; min-height: 100vh; padding: 40px 20px; justify-content: flex-start; gap: 15px; overflow-x: hidden; }
  .bs-slide-text { width: 100% !important; margin: 0 !important; text-align: center; order: 2; }
  .bs-slide-image-container { width: 85% !important; height: 320px !important; margin: 20px auto !important; order: 1; position: relative; flex-shrink: 0; }
  .bs-slide-title { font-size: 10vw !important; line-height: 1; width: max-content; z-index: 5; }
  .bs-title-top { top: 5%; right: -12% !important; text-align: right; }
  .bs-title-bottom { bottom: 5%; left: -12% !important; text-align: left; }
  .bs-slide-text-right { order: 3; margin-top: 10px !important; }
  .bs-slide-features-elegant { margin-top: 15px; text-align: left; }
  .bs-stretch-cta { display: block; width: 100%; margin: 30px 0 0 0; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box; }
}
.bs-bedouin-slide { position: relative; }
.bs-bedouin-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-bedouin-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Tenda Sailcloth Arya: widget 5e4b14f (pista desktop) --- */
.bs-silhouette-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #FFFAE7; color: #1C1D20; overflow: hidden; }
.bs-sil-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-sil-text-left { margin-bottom: 25vh; }
.bs-sil-text-right { margin-top: 40vh; }
.bs-sil-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; color: #1C1D20; }
.bs-sil-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; border: 1px solid #1C1D20; color: #1C1D20; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-sil-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1C1D20; z-index: -1; transform: translateX(-101%); }
.bs-sil-cta:hover { color: #FFFAE7; }
.bs-sil-cta:hover::before { animation: silSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-sil-cta:not(:hover):before { animation: silSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes silSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes silSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-sil-features { margin-top: 2.5rem; border-top: 1px solid rgba(28, 29, 32, 0.1); }
.bs-sil-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(28, 29, 32, 0.1); letter-spacing: 0.03em; opacity: 0.9; color: #1C1D20; }
.bs-sil-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-sil-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-sil-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-sil-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #1C1D20 !important; }
.bs-sil-title-top { top: 0; right: -45%; }
.bs-sil-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 768px) {
  .bs-silhouette-slide { flex-direction: column; height: auto; min-height: 100vh; padding: 40px 20px; justify-content: flex-start; gap: 15px; overflow-x: hidden; }
  .bs-sil-text { width: 100% !important; margin: 0 !important; text-align: center; order: 2; }
  .bs-sil-image-container { width: 85% !important; height: 320px !important; margin: 20px auto !important; order: 1; position: relative; flex-shrink: 0; }
  .bs-sil-title { font-size: 10vw !important; line-height: 1; width: max-content; z-index: 5; }
  .bs-sil-title-top { top: 5%; right: -12% !important; text-align: right; }
  .bs-sil-title-bottom { bottom: 5%; left: -12% !important; text-align: left; }
  .bs-sil-text-right { order: 3; margin-top: 10px !important; }
  .bs-sil-features { margin-top: 15px; text-align: left; }
  .bs-sil-cta { display: block; width: 100%; margin: 30px 0 0 0; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box; }
}
.bs-silhouette-slide { position: relative; }
.bs-silhouette-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-silhouette-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Tenda berbera: widget 4c722e7 (pista desktop) --- */
.bs-bed-slide-final { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #91441E; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-bed-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-bed-text-left { margin-bottom: 25vh; }
.bs-bed-text-right { margin-top: 40vh; }
.bs-bed-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-bed-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-bed-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-bed-cta:hover { color: #91441E; }
.bs-bed-cta:hover::before { animation: bedSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-bed-cta:not(:hover)::before { animation: bedSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes bedSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes bedSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-bed-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-bed-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-bed-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-bed-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-bed-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-bed-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-bed-title-top { top: 0; right: -35%; }
.bs-bed-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 768px) {
  .bs-bed-slide-final { flex-direction: column; height: auto !important; min-height: 100vh; padding: 20px 20px 40px; justify-content: flex-start; gap: 15px; overflow: visible !important; }
  .bs-bed-text { width: 100% !important; margin: 0 !important; text-align: center; order: 2; }
  .bs-bed-image-container { width: 85% !important; height: 320px !important; margin: 10px auto 25px !important; order: 1; position: relative; flex-shrink: 0; }
  .bs-bed-title { font-size: 10vw !important; line-height: 1; width: max-content; z-index: 5; }
  .bs-bed-title-top { top: 5%; right: -12% !important; text-align: right; }
  .bs-bed-title-bottom { bottom: 5%; left: -12% !important; text-align: left; }
  .bs-bed-text-right { order: 3; margin-top: 10px !important; }
  .bs-bed-features { margin-top: 15px; text-align: left; }
  .bs-bed-cta { display: block; width: 100%; margin: 30px 0 0 0; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box; }
}

/* --- Tepee Dār e Surya: widget baf0087 (pista desktop) --- */
.bs-tepee-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #1C1D20; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-tepee-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-tepee-text-left { margin-bottom: 25vh; }
.bs-tepee-text-right { margin-top: 40vh; }
.bs-tepee-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-tepee-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-tepee-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-tepee-cta:hover { color: #1C1D20; }
.bs-tepee-cta:hover::before { animation: tepeeSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-tepee-cta:not(:hover)::before { animation: tepeeSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes tepeeSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes tepeeSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-tepee-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-tepee-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-tepee-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-tepee-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-tepee-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-tepee-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-tepee-title-top { top: 0; right: -30%; }
.bs-tepee-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 768px) {
  .bs-tepee-slide { flex-direction: column; height: auto !important; min-height: 100vh; padding: 20px 20px 40px; justify-content: flex-start; gap: 15px; overflow: visible !important; }
  .bs-tepee-text { width: 100% !important; margin: 0 !important; text-align: center; order: 2; }
  .bs-tepee-text p { font-size: 0.95rem; line-height: 1.4; }
  .bs-tepee-image-container { width: 85% !important; height: 320px !important; margin: 10px auto 25px !important; order: 1; position: relative; flex-shrink: 0; }
  .bs-tepee-title { font-size: 10vw !important; line-height: 1; width: max-content; z-index: 5; }
  .bs-tepee-title-top { top: 5%; right: -12% !important; text-align: right; }
  .bs-tepee-title-bottom { bottom: 5%; left: -12% !important; text-align: left; }
  .bs-tepee-text-right { order: 3; margin-top: 10px !important; }
  .bs-tepee-features { margin-top: 15px; text-align: left; }
  .bs-tepee-cta { display: block; width: 100%; margin: 30px 0 0 0; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box; }
}

/* --- Tenda glamping: widget aa6e269 (pista desktop) --- */
.bs-glamp-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #717462; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-glamp-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-glamp-text-left { margin-bottom: 25vh; }
.bs-glamp-text-right { margin-top: 40vh; }
.bs-glamp-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-glamp-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-glamp-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-glamp-cta:hover { color: #717462; }
.bs-glamp-cta:hover::before { animation: glampSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-glamp-cta:not(:hover)::before { animation: glampSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes glampSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes glampSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-glamp-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-glamp-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-glamp-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-glamp-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-glamp-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-glamp-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-glamp-title-top { top: 0; right: -30%; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.15); }
.bs-glamp-title-bottom { bottom: 0; left: -35%; }
.bs-glamp-partnership { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFAE7; opacity: 0.4; text-align: center; margin-top: 0.6rem; }
@media (max-width: 1024px) {
  .bs-glamp-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-glamp-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-glamp-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-glamp-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-glamp-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-glamp-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-glamp-title-top { top: 3% !important; right: -22% !important; }
  .bs-glamp-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-glamp-text-right { order: 3; margin-top: 5px !important; }
  .bs-glamp-features { margin-top: 20px !important; text-align: left !important; }
  .bs-glamp-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-glamp-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-glamp-image-container { width: 60% !important; }
  .bs-glamp-title { font-size: 8vw !important; }
  .bs-glamp-title-top { right: -18% !important; }
  .bs-glamp-title-bottom { left: -18% !important; }
}
.bs-glamp-slide { position: relative; }
.bs-glamp-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-glamp-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Accessori e arredi: widget 817e4bf (pista desktop) --- */
.bs-acc-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #FFFAE7; color: #000000; overflow: hidden; position: relative; }
.bs-acc-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-acc-text-left { margin-bottom: 25vh; }
.bs-acc-text-right { margin-top: 40vh; }
.bs-acc-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; color: #000000; }
.bs-acc-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; border: 1px solid #000000; color: #000000; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-acc-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: -1; transform: translateX(-101%); }
.bs-acc-cta:hover { color: #FFFAE7; }
.bs-acc-cta:hover::before { animation: slideInLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-acc-cta:not(:hover)::before { animation: slideOutRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes slideInLeft {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-acc-features { margin-top: 2.5rem; border-top: 1px solid rgba(0, 0, 0, 0.2); }
.bs-acc-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); letter-spacing: 0.03em; opacity: 0.9; color: #000000; }
.bs-acc-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-acc-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-acc-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-acc-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #000000 !important; }
.bs-acc-title-top { top: 0; right: -30%; }
.bs-acc-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 768px) {
  .bs-acc-slide { flex-direction: column; height: auto !important; min-height: 100vh; padding: 20px 20px 40px; justify-content: flex-start; gap: 15px; overflow: visible !important; }
  .bs-acc-text { width: 100% !important; margin: 0 !important; text-align: center; order: 2; }
  .bs-acc-text p { font-size: 0.95rem; line-height: 1.4; }
  .bs-acc-image-container { width: 85% !important; height: 320px !important; margin: 10px auto 25px !important; order: 1; position: relative; flex-shrink: 0; }
  .bs-acc-title { font-size: 10vw !important; line-height: 1; width: max-content; z-index: 5; }
  .bs-acc-title-top { top: 5%; right: -12% !important; text-align: right; }
  .bs-acc-title-bottom { bottom: 5%; left: -12% !important; text-align: left; }
  .bs-acc-text-right { order: 3; margin-top: 10px !important; }
  .bs-acc-features { margin-top: 15px; text-align: left; }
  .bs-acc-cta { display: block; width: 100%; margin: 30px 0 0 0; padding: 1.5rem 1rem; text-align: center; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-slide-text p, .bs-sil-text p, .bs-bed-text p, .bs-tepee-text p, .bs-glamp-text p, .bs-acc-text p { text-align: left !important; }
  .bs-slide-features-elegant, .bs-sil-features, .bs-bed-features, .bs-tepee-features, .bs-glamp-features, .bs-acc-features { text-align: left !important; }
}

/* --- Tenda stretch Miraj: widget 0c8c90d (elenco tablet/mobile) --- */
.bs-bedouin-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #717462; color: #FFFAE7; overflow: hidden; }
.bs-slide-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-slide-text-left { margin-bottom: 25vh; }
.bs-slide-text-right { margin-top: 40vh; }
.bs-slide-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-stretch-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-stretch-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-stretch-cta:hover { color: #717462; }
.bs-stretch-cta:hover::before { animation: stretchSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-stretch-cta:not(:hover)::before { animation: stretchSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes stretchSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes stretchSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-slide-features-elegant { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-slide-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-slide-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-title-top { top: 0; right: -35%; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.15); }
.bs-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-bedouin-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-slide-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-slide-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-slide-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-slide-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-title-top { top: 3% !important; right: -22% !important; }
  .bs-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-slide-text-right { order: 3; margin-top: 5px !important; }
  .bs-slide-features-elegant { margin-top: 20px !important; text-align: left !important; }
  .bs-stretch-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-bedouin-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-slide-image-container { width: 60% !important; }
  .bs-slide-title { font-size: 8vw !important; }
  .bs-title-top { right: -18% !important; }
  .bs-title-bottom { left: -18% !important; }
}
.bs-bedouin-slide { position: relative; }
.bs-bedouin-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-bedouin-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Tenda Sailcloth Arya: widget e01e502 (elenco tablet/mobile) --- */
.bs-silhouette-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #3E3D3B; color: #FFFAE7; overflow: hidden; }
.bs-sil-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-sil-text-left { margin-bottom: 25vh; }
.bs-sil-text-right { margin-top: 40vh; }
.bs-sil-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; color: #FFFAE7; }
.bs-sil-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-sil-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-sil-cta:hover { color: #3E3D3B; }
.bs-sil-cta:hover::before { animation: silSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-sil-cta:not(:hover)::before { animation: silSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes silSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes silSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-sil-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-sil-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; color: #FFFAE7; }
.bs-sil-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-sil-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-sil-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-sil-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-sil-title-top { top: 0; right: -45%; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.15); }
.bs-sil-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-silhouette-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-sil-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-sil-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-sil-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-sil-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-sil-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-sil-title-top { top: 3% !important; right: -22% !important; }
  .bs-sil-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-sil-text-right { order: 3; margin-top: 5px !important; }
  .bs-sil-features { margin-top: 20px !important; text-align: left !important; }
  .bs-sil-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-silhouette-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-sil-image-container { width: 60% !important; }
  .bs-sil-title { font-size: 8vw !important; }
  .bs-sil-title-top { right: -18% !important; }
  .bs-sil-title-bottom { left: -18% !important; }
}
.bs-silhouette-slide { position: relative; }
.bs-silhouette-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-silhouette-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Tenda berbera: widget 61369b0 (elenco tablet/mobile) --- */
.bs-bed-slide-final { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #91441E; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-bed-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-bed-text-left { margin-bottom: 25vh; }
.bs-bed-text-right { margin-top: 40vh; }
.bs-bed-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-bed-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-bed-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-bed-cta:hover { color: #91441E; }
.bs-bed-cta:hover::before { animation: bedSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-bed-cta:not(:hover)::before { animation: bedSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes bedSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes bedSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-bed-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-bed-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-bed-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-bed-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-bed-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-bed-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-bed-title-top { top: 0; right: -35%; }
.bs-bed-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-bed-slide-final { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-bed-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-bed-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-bed-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-bed-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-bed-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-bed-title-top { top: 3% !important; right: -22% !important; }
  .bs-bed-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-bed-text-right { order: 3; margin-top: 5px !important; }
  .bs-bed-features { margin-top: 20px !important; text-align: left !important; }
  .bs-bed-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-bed-slide-final { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-bed-image-container { width: 60% !important; }
  .bs-bed-title { font-size: 8vw !important; }
  .bs-bed-title-top { right: -18% !important; }
  .bs-bed-title-bottom { left: -18% !important; }
}

/* --- Tepee Dār e Surya: widget 4f756e6 (elenco tablet/mobile) --- */
.bs-tepee-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #1C1D20; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-tepee-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-tepee-text-left { margin-bottom: 25vh; }
.bs-tepee-text-right { margin-top: 40vh; }
.bs-tepee-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-tepee-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-tepee-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-tepee-cta:hover { color: #1C1D20; }
.bs-tepee-cta:hover::before { animation: tepeeSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-tepee-cta:not(:hover)::before { animation: tepeeSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes tepeeSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes tepeeSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-tepee-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-tepee-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-tepee-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-tepee-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-tepee-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-tepee-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-tepee-title-top { top: 0; right: -30%; }
.bs-tepee-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-tepee-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-tepee-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-tepee-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-tepee-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-tepee-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-tepee-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-tepee-title-top { top: 3% !important; right: -22% !important; }
  .bs-tepee-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-tepee-text-right { order: 3; margin-top: 5px !important; }
  .bs-tepee-features { margin-top: 20px !important; text-align: left !important; }
  .bs-tepee-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-tepee-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-tepee-image-container { width: 60% !important; }
  .bs-tepee-title { font-size: 8vw !important; }
  .bs-tepee-title-top { right: -18% !important; }
  .bs-tepee-title-bottom { left: -18% !important; }
}

/* --- Tenda glamping: widget 5c593b3 (elenco tablet/mobile) --- */
.bs-glamp-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #717462; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-glamp-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-glamp-text-left { margin-bottom: 25vh; }
.bs-glamp-text-right { margin-top: 40vh; }
.bs-glamp-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; }
.bs-glamp-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-glamp-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-glamp-cta:hover { color: #717462; }
.bs-glamp-cta:hover::before { animation: glampSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-glamp-cta:not(:hover)::before { animation: glampSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes glampSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes glampSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-glamp-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-glamp-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; }
.bs-glamp-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-glamp-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-glamp-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-glamp-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-glamp-title-top { top: 0; right: -30%; }
.bs-glamp-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-glamp-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-glamp-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-glamp-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-glamp-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-glamp-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-glamp-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-glamp-title-top { top: 3% !important; right: -22% !important; }
  .bs-glamp-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-glamp-text-right { order: 3; margin-top: 5px !important; }
  .bs-glamp-features { margin-top: 20px !important; text-align: left !important; }
  .bs-glamp-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-glamp-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-glamp-image-container { width: 60% !important; }
  .bs-glamp-title { font-size: 8vw !important; }
  .bs-glamp-title-top { right: -18% !important; }
  .bs-glamp-title-bottom { left: -18% !important; }
}
.bs-glamp-slide { position: relative; }
.bs-glamp-slide .bs-slide-link { position: absolute; inset: 0; z-index: 10; }
.bs-glamp-slide > *:not(.bs-slide-link) { position: relative; z-index: 5; }

/* --- Accessori e arredi: widget d1fc456 (elenco tablet/mobile) --- */
.bs-acc-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; box-sizing: border-box; background-color: #3A3228; color: #FFFAE7; overflow: hidden; position: relative; }
.bs-acc-text { width: 22%; z-index: 2; font-family: 'Inter Display', sans-serif; }
.bs-acc-text-left { margin-bottom: 25vh; }
.bs-acc-text-right { margin-top: 40vh; }
.bs-acc-text p { font-size: 1rem; line-height: 1.5; margin: 0; font-weight: normal; color: #FFFAE7; }
.bs-acc-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 2.2rem; white-space: nowrap; border: 1px solid #FFFAE7; color: #FFFAE7; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; border-radius: 0; }
.bs-acc-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFAE7; z-index: -1; transform: translateX(-101%); }
.bs-acc-cta:hover { color: #3A3228; }
.bs-acc-cta:hover::before { animation: slideInLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.bs-acc-cta:not(:hover)::before { animation: slideOutRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes slideInLeft {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}
.bs-acc-features { margin-top: 2.5rem; border-top: 1px solid rgba(255, 250, 231, 0.2); }
.bs-acc-feature-item { font-size: 0.85rem; line-height: 1.4; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 250, 231, 0.2); letter-spacing: 0.03em; opacity: 0.9; color: #FFFAE7; }
.bs-acc-image-container { position: relative; width: 32%; height: 65vh; z-index: 1; }
.bs-acc-image-mask { width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.bs-acc-image-mask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-acc-title { position: absolute; font-family: 'artifex-hand-cf', serif !important; font-size: 4.5vw; line-height: 1.05; font-weight: normal; margin: 0; z-index: 3; white-space: nowrap; color: #FFFAE7 !important; }
.bs-acc-title-top { top: 0; right: -30%; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.15); }
.bs-acc-title-bottom { bottom: 0; left: -35%; }
@media (max-width: 1024px) {
  .bs-acc-slide { flex-direction: column !important; height: auto !important; min-height: 100vh; padding: 40px 8vw 50px !important; justify-content: flex-start !important; gap: 25px !important; overflow: visible !important; }
  .bs-acc-text { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align: center !important; order: 2; }
  .bs-acc-text p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .bs-acc-image-container { width: 50% !important; height: auto !important; margin: 0 auto 10px !important; order: 1; position: relative !important; flex-shrink: 0; }
  .bs-acc-image-mask { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3 !important; }
  .bs-acc-title { font-size: 6vw !important; line-height: 1 !important; width: max-content; }
  .bs-acc-title-top { top: 3% !important; right: -22% !important; }
  .bs-acc-title-bottom { bottom: 3% !important; left: -22% !important; }
  .bs-acc-text-right { order: 3; margin-top: 5px !important; }
  .bs-acc-features { margin-top: 20px !important; text-align: left !important; }
  .bs-acc-cta { display: block !important; width: 100% !important; margin: 25px 0 0 0 !important; padding: 1.3rem 1rem !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .bs-acc-slide { padding: 20px 5vw 40px !important; gap: 15px !important; }
  .bs-acc-image-container { width: 60% !important; }
  .bs-acc-title { font-size: 8vw !important; }
  .bs-acc-title-top { right: -18% !important; }
  .bs-acc-title-bottom { left: -18% !important; }
}
@media (max-width: 768px) {
  .bs-slide-text p, .bs-sil-text p, .bs-bed-text p, .bs-tepee-text p, .bs-glamp-text p, .bs-acc-text p { text-align: left !important; }
  .bs-slide-features-elegant, .bs-sil-features, .bs-bed-features, .bs-tepee-features, .bs-glamp-features, .bs-acc-features { text-align: left !important; }
}


/* ==========================================================================
   Ingresso delle slide della pista (al posto dello script GSAP inline di ogni widget).
   Sul vivo: IntersectionObserver al 40% della slide, poi una timeline GSAP. Qui reveal.js mette
   .inview-pending / .is-inview sull'<article data-inview="0.4"> e questi stati rifanno la stessa
   timeline con transizioni (tempi calcolati dalle posizioni "-=" della timeline):
     foto        0s    1.5s  scala 1.15→1       power3.out
     titoli      0.5s  1.2s  x ∓40px            power3.out
     partnership 0.9s  0.6s  y 5px, fino a .4   power2.out   (solo glamping)
     testi       0.9s / 1.1s  1s  y 30px        power2.out
     elenco      1.6s + 0.15s ciascuno, 0.8s, y 15px
     bottone     0.4s prima della fine dell'elenco, 0.8s, y 20px
   Sul vivo lo script animava solo la prima copia di ogni slide (querySelector): l'elenco
   tablet/mobile resta fermo, come qui. Senza JS e con "riduci movimento" tutto è visibile.
   ========================================================================== */
.prodotti-pista {
  --ps-ease-3: cubic-bezier(0.165, 0.84, 0.44, 1); /* = GSAP power3.out */
  --ps-ease-2: var(--ease-out-power2);
}

.prodotti-pista .inview-pending :is(.bs-image-mask, .bs-sil-image-mask, .bs-bed-image-mask, .bs-tepee-image-mask, .bs-glamp-image-mask, .bs-acc-image-mask) img {
  opacity: 0;
  transform: scale(1.15);
}

.prodotti-pista .inview-pending :is(.bs-title-top, .bs-sil-title-top, .bs-bed-title-top, .bs-tepee-title-top, .bs-glamp-title-top, .bs-acc-title-top) {
  opacity: 0;
  transform: translateX(-40px);
}

.prodotti-pista .inview-pending :is(.bs-title-bottom, .bs-sil-title-bottom, .bs-bed-title-bottom, .bs-tepee-title-bottom, .bs-glamp-title-bottom, .bs-acc-title-bottom) {
  opacity: 0;
  transform: translateX(40px);
}

.prodotti-pista .inview-pending .bs-glamp-partnership {
  opacity: 0;
  transform: translateY(5px);
}

.prodotti-pista .inview-pending :is(.bs-slide-text, .bs-sil-text, .bs-bed-text, .bs-tepee-text, .bs-glamp-text, .bs-acc-text) p {
  opacity: 0;
  transform: translateY(30px);
}

.prodotti-pista .inview-pending :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item) {
  opacity: 0;
  transform: translateY(15px);
}

.prodotti-pista .inview-pending :is(.bs-stretch-cta, .bs-sil-cta, .bs-bed-cta, .bs-tepee-cta, .bs-glamp-cta, .bs-acc-cta) {
  opacity: 0;
  transform: translateY(20px);
}

/* stato finale: come i valori inline lasciati da GSAP (l'elenco arriva a opacità 1, non .9) */
.prodotti-pista .is-inview :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item) {
  opacity: 1;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-image-mask, .bs-sil-image-mask, .bs-bed-image-mask, .bs-tepee-image-mask, .bs-glamp-image-mask, .bs-acc-image-mask) img {
  opacity: 1;
  transform: none;
  transition: opacity 1.5s var(--ps-ease-3), transform 1.5s var(--ps-ease-3);
}

.prodotti-pista .inview-pending.is-inview :is(.bs-title-top, .bs-sil-title-top, .bs-bed-title-top, .bs-tepee-title-top, .bs-glamp-title-top, .bs-acc-title-top, .bs-title-bottom, .bs-sil-title-bottom, .bs-bed-title-bottom, .bs-tepee-title-bottom, .bs-glamp-title-bottom, .bs-acc-title-bottom) {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ps-ease-3) 0.5s, transform 1.2s var(--ps-ease-3) 0.5s;
}

.prodotti-pista .inview-pending.is-inview .bs-glamp-partnership {
  opacity: 0.4;
  transform: none;
  transition: opacity 0.6s var(--ps-ease-2) 0.9s, transform 0.6s var(--ps-ease-2) 0.9s;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-slide-text, .bs-sil-text, .bs-bed-text, .bs-tepee-text, .bs-glamp-text, .bs-acc-text) p {
  --ps-delay: 0.9s;
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ps-ease-2) var(--ps-delay), transform 1s var(--ps-ease-2) var(--ps-delay);
}

.prodotti-pista .inview-pending.is-inview :is(.bs-slide-text-right, .bs-sil-text-right, .bs-bed-text-right, .bs-tepee-text-right, .bs-glamp-text-right, .bs-acc-text-right) p {
  --ps-delay: 1.1s;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item) {
  --ps-delay: 1.6s;
  transform: none;
  transition: opacity 0.8s var(--ps-ease-2) var(--ps-delay), transform 0.8s var(--ps-ease-2) var(--ps-delay);
}

.prodotti-pista .inview-pending.is-inview :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item):nth-child(2) {
  --ps-delay: 1.75s;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item):nth-child(3) {
  --ps-delay: 1.9s;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-feature-item, .bs-sil-feature-item, .bs-bed-feature-item, .bs-tepee-feature-item, .bs-glamp-feature-item, .bs-acc-feature-item):nth-child(4) {
  --ps-delay: 2.05s;
}

/* bottone: 2.45s dopo 4 voci (stretch, sailcloth), 2.3s dopo 3 (le altre) */
.prodotti-pista .inview-pending.is-inview :is(.bs-stretch-cta, .bs-sil-cta, .bs-bed-cta, .bs-tepee-cta, .bs-glamp-cta, .bs-acc-cta) {
  --ps-delay: 2.3s;
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ps-ease-2) var(--ps-delay), transform 0.8s var(--ps-ease-2) var(--ps-delay), color 0.3s ease;
}

.prodotti-pista .inview-pending.is-inview :is(.bs-stretch-cta, .bs-sil-cta) {
  --ps-delay: 2.45s;
}

/* ==========================================================================
   Tenda berbera (container 6df3243, widget HTML 4bac43a). id="tenda-berbera": ancora dei link
   interni. Il widget chiedeva "Inter" (non caricato dal sito): stessa dichiarazione.
   ========================================================================== */
/* Titolo della slide berbera: un solo H2 (il titolo SEO intero) che contiene i due pezzi in alto e
   in basso; i pezzi sono posizionati sul contenitore della foto come i titoli delle altre slide. */
.bs-bed-titles {
  margin: 0;
  font-size: inherit;
}

/* Slide tenda berbera con i testi del blocco SEO (22-09): piu' lunghi di quelli di prima. Nella
   pista l'elenco passa sotto il paragrafo di sinistra; a destra paragrafo e bottone, che partono
   sotto il titolo in alto come nelle altre slide. Grassetti a peso medio: le altre slide non ne hanno. */
.prodotti-pista .bs-bed-text-left {
  margin-bottom: 0;
}

.prodotti-pista .bs-bed-text-right {
  margin-top: 36vh;
}

.prodotti-pista .bs-bed-features {
  margin-top: 1.6rem;
}

.prodotti-pista .bs-bed-feature-item {
  padding: 0.6rem 0;
}

.prodotti-pista .bs-bed-cta {
  margin-top: 1.8rem;
}

.bs-bed-text strong {
  font-weight: 500;
}

/* schermi desktop bassi (1366x768, 1280x720): testo ed elenco piu' compatti, sotto l'header */
@media (min-width: 1025px) and (max-height: 800px) {
  .prodotti-pista .bs-bed-text p {
    font-size: 0.9rem;
  }

  .prodotti-pista .bs-bed-features {
    margin-top: 1rem;
  }

  .prodotti-pista .bs-bed-feature-item {
    padding: 0.45rem 0;
    font-size: 0.8rem;
  }

  .prodotti-pista .bs-bed-text-left {
    margin-top: 8vh;
  }
}