/* =========================================================
       V7 — CRYSTAL / LIQUID REFINEMENT
       Mantiene palette, testi e struttura; cambia solo il linguaggio visivo.
       ========================================================= */

    :root {
      --crystal-bg: rgba(255, 252, 240, 0.68);
      --crystal-bg-strong: rgba(255, 252, 240, 0.84);
      --crystal-green: rgba(226, 236, 212, 0.62);
      --crystal-border: rgba(255, 255, 255, 0.62);
      --crystal-border-dark: rgba(79, 125, 59, 0.15);
      --crystal-shadow: 0 18px 50px rgba(52, 65, 43, 0.10);
      --crystal-shadow-hover: 0 22px 62px rgba(52, 65, 43, 0.14);
      --liquid-radius-a: 30px 30px 30px 14px;
      --liquid-radius-b: 24px 24px 12px 24px;
      --liquid-radius-c: 34px 16px 34px 34px;
    }

    body {
      background:
        linear-gradient(
          180deg,
          rgba(255, 250, 240, 0.96) 0%,
          var(--color-bg) 22%,
          var(--color-bg) 100%
        );
    }

    /* ---------- HEADER ---------- */

    .site-header {
      border-bottom: 1px solid rgba(79, 125, 59, 0.10);
      background: rgba(255, 250, 240, 0.76);
      backdrop-filter: blur(20px) saturate(1.18);
      -webkit-backdrop-filter: blur(20px) saturate(1.18);
      box-shadow: 0 8px 30px rgba(52, 65, 43, 0.035);
    }

    .header-inner {
      position: relative;
    }

    .header-inner::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(79, 125, 59, 0.18),
        transparent
      );
      pointer-events: none;
    }

    .menu-toggle,
    .header-contact {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* ---------- BUTTONS ---------- */

    .button {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border-radius: 999px;
      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
    }

    .button::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: -55%;
      left: -20%;
      width: 48%;
      height: 190%;
      opacity: 0;
      transform: rotate(18deg) translateX(-120%);
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.34),
        transparent
      );
      transition: transform 420ms ease, opacity 220ms ease;
      pointer-events: none;
    }

    .button:hover::before {
      opacity: 1;
      transform: rotate(18deg) translateX(300%);
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button--primary {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 10px 24px rgba(47, 90, 43, 0.16);
    }

    .button--secondary {
      background: rgba(255, 255, 255, 0.66);
      border-color: rgba(79, 125, 59, 0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    /* ---------- HERO ---------- */

    .hero {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,249,233,.98), rgba(251,247,232,.95));
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(
          circle at 10% 12%,
          rgba(186, 219, 157, 0.20),
          transparent 28%
        );
      opacity: .85;
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -5%;
      bottom: -28%;
      width: 34%;
      aspect-ratio: 1;
      border: 1px solid rgba(79, 125, 59, 0.08);
      border-radius: 45% 55% 58% 42% / 52% 46% 54% 48%;
      transform: rotate(-8deg);
      pointer-events: none;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      text-wrap: balance;
    }

    .hero h1 .accent::after {
      height: .065em;
      border-radius: 999px;
      opacity: .9;
    }

    .hero-note {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.62);
      background: rgba(255, 252, 240, .58);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 10px 28px rgba(52,65,43,.06);
    }

    /* ---------- FOTO NEGOZIO ---------- */

    .store-figure {
      position: relative;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: var(--liquid-radius-c);
      background: rgba(255,255,255,.38);
      box-shadow:
        0 28px 64px rgba(47,62,40,.16),
        inset 0 1px 0 rgba(255,255,255,.78);
      transform: none;
    }

    .store-figure::before {
      content: "";
      position: absolute;
      z-index: 3;
      top: 0;
      left: 0;
      width: 42%;
      height: 30%;
      border-radius: inherit;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,.30),
        rgba(255,255,255,0)
      );
      pointer-events: none;
    }

    .store-figure img {
      border-radius: inherit;
      transition: transform 600ms cubic-bezier(.2,.7,.2,1);
    }

    .store-figure:hover img {
      transform: scale(1.012);
    }

    .store-caption {
      padding: .78rem .9rem;
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 18px;
      background: rgba(23, 59, 33, .38);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    /* ---------- STRISCIA INFORMAZIONI ---------- */

    .intro-strip-inner {
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.74);
      border-radius: var(--liquid-radius-a);
      background: rgba(255, 252, 240, .72);
      backdrop-filter: blur(16px) saturate(1.05);
      -webkit-backdrop-filter: blur(16px) saturate(1.05);
      box-shadow:
        var(--crystal-shadow),
        inset 0 1px 0 rgba(255,255,255,.78);
    }

    .intro-item {
      position: relative;
      background: transparent;
    }

    .intro-item::after {
      content: "";
      position: absolute;
      right: 1rem;
      bottom: .7rem;
      width: 28px;
      height: 10px;
      border-radius: 50%;
      background: rgba(79,125,59,.06);
      filter: blur(6px);
      pointer-events: none;
    }

    /* ---------- SEZIONI ---------- */

    .section--soft {
      position: relative;
      background:
        linear-gradient(
          180deg,
          rgba(244,237,205,.86),
          rgba(244,237,205,.94)
        );
    }

    .section-heading {
      position: relative;
    }

    .section-heading::after {
      content: "";
      display: block;
      width: 52px;
      height: 1px;
      margin-top: 1.4rem;
      background: rgba(79,125,59,.22);
    }

    /* ---------- CARD REPARTI ---------- */

    .department-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.76);
      border-radius: var(--liquid-radius-b);
      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.76),
          rgba(255,250,240,.52)
        );
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        0 10px 26px rgba(54,69,44,.055),
        inset 0 1px 0 rgba(255,255,255,.82);
      transition:
        transform 220ms cubic-bezier(.2,.7,.2,1),
        box-shadow 220ms ease,
        border-color 220ms ease;
    }

    .department-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 42%;
      height: 34%;
      background:
        linear-gradient(
          135deg,
          rgba(255,255,255,.24),
          rgba(255,255,255,0)
        );
      pointer-events: none;
    }

    .department-card::after {
      width: 88px;
      height: 88px;
      right: -30px;
      bottom: -30px;
      border: 1px solid rgba(79,125,59,.09);
      background: rgba(186,219,157,.05);
      border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%;
    }

    .department-card:hover {
      transform: translateY(-4px);
      border-color: rgba(79,125,59,.20);
      box-shadow:
        var(--crystal-shadow-hover),
        inset 0 1px 0 rgba(255,255,255,.92);
    }

    .department-card--feature {
      border-color: rgba(255,255,255,.14);
      background:
        linear-gradient(
          145deg,
          rgba(23,59,33,.98),
          rgba(33,75,44,.98)
        );
      box-shadow:
        0 18px 42px rgba(23,59,33,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
    }

    .department-index {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 6px 14px rgba(52,65,43,.06);
    }

    /* ---------- SERVIZI ---------- */

    .service-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.74);
      border-radius: var(--liquid-radius-a);
      background:
        linear-gradient(
          145deg,
          rgba(237,243,226,.82),
          rgba(226,236,212,.68)
        );
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        0 14px 36px rgba(54,69,44,.075),
        inset 0 1px 0 rgba(255,255,255,.82);
    }

    .service-panel::after {
      content: "";
      position: absolute;
      right: -48px;
      top: -52px;
      width: 130px;
      height: 130px;
      border: 1px solid rgba(79,125,59,.10);
      border-radius: 58% 42% 62% 38% / 46% 62% 38% 54%;
      pointer-events: none;
    }

    /* ---------- GUIDE / MARCHI ---------- */

    .guide-feature,
    .guide-card,
    .brand-slot {
      border-color: rgba(255,255,255,.70);
      box-shadow:
        0 10px 28px rgba(54,69,44,.055),
        inset 0 1px 0 rgba(255,255,255,.72);
    }

    .guide-card,
    .brand-slot {
      background: rgba(255,252,240,.64);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .brand-slot {
      border-radius: 18px;
    }

    /* ---------- CHI SIAMO ---------- */

    #chi-siamo .about-copy {
      position: relative;
      padding: clamp(1.2rem, 3vw, 2rem);
      border: 1px solid rgba(255,255,255,.72);
      border-radius: var(--liquid-radius-c);
      background: rgba(255,252,240,.58);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        0 14px 36px rgba(54,69,44,.055),
        inset 0 1px 0 rgba(255,255,255,.76);
    }

    #chi-siamo .about-copy::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 36%;
      height: 18%;
      border-radius: inherit;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,.24),
        rgba(255,255,255,0)
      );
      pointer-events: none;
    }

    /* ---------- SOCIAL ---------- */

    .social-follow-inner {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--liquid-radius-a);
      background:
        linear-gradient(
          135deg,
          rgba(23,59,33,.98),
          rgba(35,77,45,.98)
        );
      box-shadow:
        0 22px 56px rgba(23,59,33,.16),
        inset 0 1px 0 rgba(255,255,255,.10);
    }

    .social-follow-inner::before {
      content: "";
      position: absolute;
      top: -45%;
      right: -8%;
      width: 44%;
      aspect-ratio: 1;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 43% 57% 61% 39% / 57% 42% 58% 43%;
      transform: rotate(18deg);
      pointer-events: none;
    }

    .social-button {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.50);
      background: rgba(255,250,240,.86);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
    }

    .social-button:hover {
      background: rgba(255,255,255,.96);
    }

    /* ---------- CONTATTI ---------- */

    .contact-shell {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.76);
      border-radius: var(--liquid-radius-a);
      background: rgba(255,253,246,.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow:
        0 22px 60px rgba(54,69,44,.09),
        inset 0 1px 0 rgba(255,255,255,.80);
    }

    .contact-shell::before {
      content: "";
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 42%;
      height: 18%;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,0)
      );
      pointer-events: none;
    }

    .hours-season {
      border: 1px solid rgba(255,255,255,.68);
      background: rgba(255,250,240,.62);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 8px 20px rgba(54,69,44,.04);
    }

    .hours-note {
      border-left-width: 2px;
      background: rgba(226,236,212,.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .map-placeholder {
      position: relative;
      overflow: hidden;
    }

    .map-placeholder::after {
      content: "";
      position: absolute;
      right: -16%;
      bottom: -22%;
      width: 52%;
      aspect-ratio: 1;
      border: 1px solid rgba(79,125,59,.09);
      border-radius: 55% 45% 58% 42% / 47% 60% 40% 53%;
      pointer-events: none;
    }

    .map-placeholder-inner {
      position: relative;
      z-index: 2;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.58);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        0 12px 32px rgba(54,69,44,.08),
        inset 0 1px 0 rgba(255,255,255,.72);
    }

    /* ---------- FOOTER ---------- */

    .site-footer {
      border-top: 1px solid rgba(79,125,59,.10);
      background:
        linear-gradient(
          180deg,
          rgba(243,235,202,.92),
          rgba(243,235,202,1)
        );
    }

    /* ---------- MOBILE ACTION BAR ---------- */

    .mobile-actions {
      border: 1px solid rgba(255,255,255,.74);
      background: rgba(255,250,240,.76);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
      box-shadow:
        0 14px 38px rgba(36,49,36,.14),
        inset 0 1px 0 rgba(255,255,255,.82);
    }

    /* ---------- RESPONSIVE ---------- */

    @media (max-width: 919px) {
      .site-header {
        background: rgba(255,250,240,.80);
      }

      .mobile-menu {
        border-bottom: 1px solid rgba(79,125,59,.10);
        background: rgba(255,250,240,.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .store-figure {
        border-radius: 28px 28px 28px 12px;
      }

      .intro-strip-inner,
      .service-panel,
      .contact-shell,
      .social-follow-inner {
        border-radius: 24px 24px 24px 12px;
      }

      #chi-siamo .about-copy {
        border-radius: 24px 24px 14px 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .button::before {
        display: none;
      }

      .store-figure img,
      .department-card {
        transition: none !important;
      }
    }


/* V21 — didascalia foto negozio più compatta */
.store-caption{
  left:.9rem;
  right:.9rem;
  bottom:.8rem;
  padding:.46rem .68rem;
  border-radius:14px;
}
.store-caption strong{
  font-size:.86rem;
  line-height:1.15;
}
.store-caption .store-address{
  display:block;
  margin-top:.08rem;
  color:rgba(255,255,255,.86);
  font-size:.69rem;
  line-height:1.22;
}
#dove-siamo{
  scroll-margin-top:110px;
}


/* V28 — recapiti nella tab della foto iniziale */
.store-caption-copy{display:block;min-width:0}
.store-caption .store-phone{display:inline-block;margin-top:.16rem;color:#fff;font-size:.72rem;font-weight:780;text-decoration:none}
.store-caption .store-phone:hover,.store-caption .store-phone:focus-visible{text-decoration:underline;text-underline-offset:3px}