:root { 
      --primary-color: #7D8C71;       /* Sage/Olive desaturato premium */
      --accent-color: #C5A880;        /* Oro antico per accenti e hover */
      --text-dark: #2C302E;           /* Antracite morbido */
      --background-light: #FAF9F6;    /* Bianco avorio caldissimo */
    }
    body { 
      font-family: 'Montserrat', sans-serif; 
      background-color: var(--background-light); 
      color: var(--text-dark); 
      letter-spacing: 0.02em;
    }
    h1, h2, h3, .font-display { 
      font-family: 'Cormorant Garamond', serif; 
      color: var(--primary-color); 
      letter-spacing: 0.01em;
    }
    .text-primary{ color: var(--primary-color); } 
    .bg-primary{ background-color: var(--primary-color); } 
    .border-primary{ border-color: var(--primary-color); }
    .text-accent{ color: var(--accent-color); }

    /* HERO */
    .hero { background-position: center; background-size: cover; }
    .hero::before{ content: ""; position: absolute; inset: 0; background: rgba(20, 24, 22, 0.45); }

    /* Main Carousel Custom Styling */
    #main-carousel .splide__slide {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    }
    #main-carousel .splide__slide img {
      width: 100%;
      height: 60vh;
      object-fit: cover;
      display: block;
    }

    /* Splide controls */
    .splide__arrow {
      background-color: rgba(255, 255, 255, 0.95) !important;
      color: var(--primary-color) !important;
      width: 52px; height: 52px; border-radius: 9999px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      transition: all .3s ease;
    }
    .splide__arrow:hover { background-color: #ffffff !important; color: var(--accent-color) !important; transform: scale(1.05); }
    .splide__arrow svg { fill: currentColor !important; transition: fill .3s ease; }

    /* Thumbnails Custom Styling */
    .thumbnails { margin: 1.5rem auto 0; padding: 0; }
    .thumbnail {
      list-style: none;
      cursor: pointer;
      opacity: 0.5;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      border: 2px solid transparent;
    }
    .thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .thumbnail:hover { opacity: 0.85; }
    .thumbnail.is-active {
      opacity: 1;
      border-color: var(--accent-color);
      transform: scale(1.03);
      box-shadow: 0 4px 15px rgba(197, 168, 128, 0.2);
    }