/* ===========================================================
   Il Gusto — Ristorante · Pizzeria (est. 1998)
   Elegant, lightweight stylesheet. No frameworks.
   Brand: deep green + gold on warm cream / charcoal.
   =========================================================== */

:root {
  --green: #14523a;
  --green-deep: #0e3a29;
  --gold: #c9a24b;
  --gold-soft: #e3c986;
  --cream: #faf6ee;
  --cream-2: #f3ebdc;
  --ink: #20211d;
  --ink-soft: #4b4d45;
  --charcoal: #161712;
  --line: rgba(20, 82, 58, .14);
  --shadow: 0 18px 50px -22px rgba(14, 58, 41, .55);
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: .01em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 14px;
}
.eyebrow.dark { color: var(--green); }

.section { padding: 96px 0; }
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); color: var(--green-deep); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; margin: 16px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; font-size: .78rem;
  padding: 14px 30px; border-radius: 2px; cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  border: 1px solid transparent;
}
.btn-gold { background: var(--gold); color: var(--charcoal); }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(201,162,75,.7); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn-outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(250, 246, 238, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; gap: 34px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: #fff; position: relative; padding: 4px 0; transition: color .25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }
.scrolled .nav-links a { color: var(--ink); }
.scrolled .brand-text, .scrolled .brand-sub { color: var(--green-deep); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-text { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: .02em; }
.brand-sub { display: block; font-family: var(--sans); font-size: .56rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-soft); margin-top: 3px; }

.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 60; position: relative; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: transform .32s ease, opacity .25s ease, background .3s ease; transform-origin: center; }
.scrolled .nav-toggle span { background: var(--ink); }
/* Hamburger morphs into an X when open */
.nav-toggle.open span { background: #fff; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Dimmed backdrop behind the slide-in panel */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(11,22,17,.55);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.nav-backdrop.show { pointer-events: auto; }
/* While the slide-in menu is open, drop the header's backdrop-filter. A filtered
   ancestor becomes the containing block for the fixed panel, which collapsed it to
   the header's height (only the first link showed). Removing it lets the panel fill
   the viewport again. */
body.nav-locked .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav-backdrop.show { opacity: 1; visibility: visible; }
body.nav-locked { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  color: #fff; text-align: center; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,58,41,.55) 0%, rgba(11,30,22,.62) 45%, rgba(11,22,17,.82) 100%),
              url("img/grill-platter.jpg") center/cover no-repeat;
  transform: scale(1.05); z-index: -1;
}
.hero-inner { max-width: 820px; margin: 0 auto; padding: 120px 24px 90px; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); letter-spacing: .01em; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.9); margin: 22px auto 38px; max-width: 600px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-divider { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; color: var(--gold-soft); letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; }
.hero-divider::before, .hero-divider::after { content: ""; width: 42px; height: 1px; background: var(--gold); opacity: .7; }
.hero-aic {
  position: absolute; top: 104px; right: 26px; z-index: 5; display: block; line-height: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  transition: transform .3s ease;
}
.hero-aic:hover { transform: translateY(-3px); }
.hero-aic img { width: 190px; height: auto; display: block; }
@media (max-width: 720px) {
  .hero-aic { top: 84px; right: 12px; }
  .hero-aic img { width: 130px; }
}
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* ---------- About ---------- */
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.about-copy h2 { font-size: clamp(2rem, 4.2vw, 3rem); color: var(--green-deep); margin-bottom: 20px; }
.about-copy p { color: var(--ink-soft); margin: 0 0 18px; }
.about-figure { position: relative; }
.about-figure img { border-radius: 4px; box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; }
.about-figure .badge {
  position: absolute; bottom: -26px; left: -26px; background: var(--green); color: #fff;
  padding: 22px 26px; border-radius: 4px; text-align: center; box-shadow: var(--shadow);
}
.about-figure .badge strong { font-family: var(--serif); font-size: 2.4rem; display: block; color: var(--gold-soft); line-height: 1; }
.about-figure .badge span { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.aic-cert {
  display: flex; align-items: center; gap: 18px; margin: 8px 0 22px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.aic-cert img { width: 150px; height: auto; flex: 0 0 auto; border-radius: 4px; }
.aic-cert p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 560px) { .aic-cert { flex-direction: column; text-align: center; gap: 12px; } }

/* ---------- Highlights ---------- */
.highlights { background: var(--charcoal); color: #fff; }
.highlights .section-head h2 { color: #fff; }
.highlights .section-head p { color: rgba(255,255,255,.66); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  position: relative; border-radius: 4px; overflow: hidden; min-height: 380px;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate;
}
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%); }
.feature:hover img { transform: scale(1.07); }
.feature-body { padding: 28px; }
.feature-body h3 { font-size: 1.6rem; color: #fff; }
.feature-body p { font-size: .92rem; color: rgba(255,255,255,.78); margin: 8px 0 0; }
.feature-body .tag { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); }

/* ---------- Gallery ---------- */
.gallery { background: var(--cream); }
.masonry { columns: 3; column-gap: 16px; }
.masonry img {
  width: 100%; height: auto; margin: 0 0 16px; border-radius: 4px; break-inside: avoid;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); transition: transform .4s ease, filter .4s ease; cursor: pointer;
}
.masonry img:hover { transform: scale(1.02); filter: brightness(1.05); }

/* ---------- Menu page ---------- */
.page-hero {
  position: relative; padding: 170px 0 90px; color: #fff; text-align: center;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(14,58,41,.72), rgba(11,22,17,.82)), url("img/interior.jpg") center/cover no-repeat;
}
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.page-hero p { color: rgba(255,255,255,.85); max-width: 560px; margin: 16px auto 0; }

.menu-section { padding: 80px 0 0; }
.menu-section:last-of-type { padding-bottom: 96px; }
.menu-cat-head { text-align: center; margin-bottom: 46px; }
.menu-cat-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--green-deep); }
.menu-cat-head .eyebrow { margin-bottom: 10px; }
.menu-list { max-width: 760px; margin: 0 auto; }
.menu-item { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.menu-item .mi-name { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); font-weight: 600; }
.menu-item .mi-desc { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: 3px; font-family: var(--sans); }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(20,82,58,.3); transform: translateY(-4px); min-width: 24px; }
.menu-item .mi-price { font-family: var(--serif); font-size: 1.25rem; color: var(--gold); font-weight: 600; white-space: nowrap; }
.menu-note { text-align: center; color: var(--ink-soft); font-size: .85rem; max-width: 620px; margin: 54px auto 0; font-style: italic; }

/* ---------- CTA strip ---------- */
.cta-strip {
  position: relative; color: #fff; text-align: center; padding: 90px 0;
}
.cta-strip::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(rgba(14,58,41,.82),rgba(14,58,41,.88)), url("img/dom-perignon-seafood.jpg") center/cover fixed no-repeat; }
.cta-strip h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.cta-strip p { color: rgba(255,255,255,.85); max-width: 540px; margin: 14px auto 30px; }

/* ---------- Contact ---------- */
.contact { background: var(--cream); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-card h3 { font-size: 1.4rem; color: var(--green-deep); margin-bottom: 6px; }
.info-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-row .ic { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--green); color: var(--gold-soft); display: grid; place-items: center; }
.info-row .ic svg { width: 18px; height: 18px; }
.info-row b { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; font-weight: 600; }
.info-row span, .info-row a { color: var(--ink); font-size: 1.02rem; }
.info-row a:hover { color: var(--green); }
.hours-list { list-style: none; margin: 14px 0 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .96rem; }
.hours-list li span:last-child { color: var(--ink-soft); }
.hours-list li.today { font-weight: 600; }
.hours-list li.today span:last-child { color: var(--green); }
.map-wrap { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.map-embed { border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); min-height: 320px; flex: 1; border: 0; width: 100%; }
.map-cta { align-self: flex-start; }
@media (max-width: 920px) { .map-cta { align-self: stretch; justify-content: center; } }
.reserve-box { margin-top: 26px; padding: 22px 24px; border-radius: 6px; background: var(--cream); border: 1px solid var(--line); }
.reserve-box h3 { margin: 0 0 6px; font-size: 1.3rem; color: var(--green-deep); }
.reserve-box p { margin: 0 0 16px; color: var(--ink-soft); font-size: .96rem; }
.reserve-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.reserve-actions .btn { flex: 1 1 auto; justify-content: center; }
.contact-socials { display: flex; gap: 14px; margin-top: 22px; }
.contact-socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--green); transition: .25s; }
.contact-socials a:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.contact-socials svg { width: 19px; height: 19px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,.78); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.site-footer .brand-text { color: #fff; }
.site-footer p { font-size: .92rem; margin: 14px 0 0; max-width: 320px; }
.footer-col h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 16px; }
.footer-col a, .footer-col li { display: block; font-size: .94rem; padding: 5px 0; color: rgba(255,255,255,.78); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: rgba(255,255,255,.55); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(11,18,14,.92); display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-close { position: absolute; top: 22px; right: 28px; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .about-figure .badge { left: 24px; bottom: -20px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .section { padding: 70px 0; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 84px 36px 40px; gap: 2px; transform: translateX(105%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    box-shadow: -24px 0 60px rgba(0,0,0,.45);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { transform: none; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a, .scrolled .nav-links a {
    color: #fff; font-size: 1.05rem; letter-spacing: .16em; display: block; padding: 17px 2px;
  }
  .nav-links a::after { display: none; }
  /* Show the booking CTA inside the panel as a full-width gold button */
  .nav-cta { margin: 22px 0 0; display: block; }
  .nav-cta a, .scrolled .nav-cta a { color: var(--charcoal); padding: 16px; justify-content: center; letter-spacing: .14em; }
  .feature-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .footer-grid { grid-template-columns: 1fr; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-dots { display: none; }
}
@media (max-width: 420px) { .masonry { columns: 1; } }

/* ===========================================================
   Finesse layer — refinements for an elevated, editorial feel
   =========================================================== */

::selection { background: var(--gold); color: var(--charcoal); }

/* Slightly airier serif headings */
h1, h2, h3 { letter-spacing: .005em; }
.section-head h2, .menu-cat-head h2, .about-copy h2 { line-height: 1.06; }

/* Decorative gold flourish beneath centred section titles */
.section-head h2::after,
.menu-cat-head h2::after {
  content: "";
  display: block;
  width: 64px; height: 2px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.highlights .section-head h2::after { background: linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold-soft) 80%, transparent); }

/* Eyebrow gets a small leading tick for a refined, considered look */
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.section-head .eyebrow::before,
.section-head .eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; }

/* ---- Hero: thin inset frame + staggered entrance ---- */
.hero::after {
  content: ""; position: absolute; inset: 22px; pointer-events: none;
  border: 1px solid rgba(201,162,75,.32); z-index: 0;
}
.hero-inner { position: relative; z-index: 1; }
.hero-divider, .hero h1, .hero .lead, .hero-actions { opacity: 0; animation: heroUp 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-divider  { animation-delay: .15s; }
.hero h1       { animation-delay: .30s; }
.hero .lead    { animation-delay: .50s; }
.hero-actions  { animation-delay: .68s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) { .hero::after { inset: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-divider, .hero h1, .hero .lead, .hero-actions { animation: none; opacity: 1; }
  .scroll-cue { animation: none; }
}

/* ---- Buttons: finer weight + gentle gold glow ---- */
.btn { letter-spacing: .16em; font-weight: 400; }
.btn-gold { box-shadow: 0 8px 22px -14px rgba(201,162,75,.6); }

/* ---- Feature cards: hairline accent + smoother lift ---- */
.feature {
  box-shadow: 0 14px 40px -26px rgba(0,0,0,.8);
  transition: transform .45s ease, box-shadow .45s ease;
}
.feature::before {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; z-index: 1;
  transition: transform .5s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -30px rgba(0,0,0,.9); }
.feature:hover::before { transform: scaleX(1); }
.feature-body .tag { display: inline-block; margin-bottom: 6px; }

/* ---- About: refined image frame + drop accent on first line ---- */
.about-figure img { transition: transform .6s ease; }
.about-figure::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--gold);
  opacity: .4; border-radius: 4px; pointer-events: none; z-index: -1;
}

/* ---- Gallery: graceful reveal of colour on hover ---- */
.masonry img { filter: saturate(.92); transition: transform .5s ease, filter .5s ease, box-shadow .5s ease; }
.masonry img:hover { filter: saturate(1.08) brightness(1.04); box-shadow: 0 18px 44px -20px rgba(0,0,0,.6); }

/* ---- Menu items: considered hover ---- */
.menu-item { transition: padding-left .3s ease; }
.menu-item:hover { padding-left: 8px; }
.menu-item:hover .mi-name { color: var(--green); }
.menu-item .mi-name, .menu-item .mi-price { transition: color .3s ease; }

/* ---- Section rhythm: hairline transitions between light sections ---- */
.about + .highlights, .gallery { position: relative; }

/* ---- Header brand: a touch more refinement ---- */
.brand-text { letter-spacing: .03em; }
.brand-sub { letter-spacing: .36em; }

/* ---------- Assistant chat widget ---------- */
.ai-widget { position: fixed; right: 18px; bottom: 18px; z-index: 80; font-family: var(--sans); }
.ai-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: var(--green); color: var(--gold-soft); box-shadow: 0 14px 34px -10px rgba(0,0,0,.55); display: grid; place-items: center; transition: transform .2s ease, background .2s ease; }
.ai-fab:hover { transform: translateY(-2px); background: var(--green-deep); }
.ai-fab svg { width: 26px; height: 26px; }
.ai-fab .ic-close { display: none; }
.ai-open .ai-fab .ic-chat { display: none; }
.ai-open .ai-fab .ic-close { display: block; }
.ai-panel { position: absolute; right: 0; bottom: 72px; width: min(92vw, 360px); height: min(72vh, 540px);
  background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 26px 64px -22px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(.98);
  pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.ai-open .ai-panel { opacity: 1; transform: none; pointer-events: auto; }
.ai-head { background: linear-gradient(160deg, var(--green), var(--green-deep)); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 11px; }
.ai-head .ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #7ee0a6; box-shadow: 0 0 0 3px rgba(126,224,166,.25); flex: none; }
.ai-head b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.1; }
.ai-head small { display: block; opacity: .82; font-size: .68rem; letter-spacing: .05em; }
.ai-head .ai-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ai-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--cream); }
.ai-msg { max-width: 86%; padding: 10px 13px; border-radius: 13px; font-size: .92rem; line-height: 1.45; }
.ai-msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 3px; color: var(--ink); }
.ai-msg.user { background: var(--green); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-actions a { display: inline-block; padding: 8px 13px; border-radius: 22px; font-size: .82rem; font-weight: 500; text-decoration: none; border: 1px solid var(--green); color: var(--green); background: #fff; transition: .2s ease; }
.ai-actions a:hover { background: var(--green); color: #fff; }
.ai-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); background: #fff; }
.ai-chip { padding: 8px 12px; border-radius: 22px; font-size: .82rem; font-weight: 500; cursor: pointer; border: 1px solid var(--line); color: var(--green-deep); background: var(--cream); transition: .2s ease; font-family: var(--sans); }
.ai-chip:hover { background: var(--green); color: #fff; border-color: var(--green); }
.ai-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.ai-input input { flex: 1; border: 1px solid var(--line); border-radius: 22px; padding: 9px 14px; font-size: .9rem; font-family: var(--sans); outline: none; }
.ai-input input:focus { border-color: var(--green); }
.ai-input button { border: 0; background: var(--green); color: #fff; border-radius: 50%; width: 38px; height: 38px; flex: none; cursor: pointer; display: grid; place-items: center; }
.ai-input button svg { width: 18px; height: 18px; }
body.nav-locked .ai-widget { display: none; }
@media (max-width: 480px) { .ai-panel { width: 92vw; height: 76vh; } }

/* ---------- Language switch (IT / EN) ---------- */
.lang-switch { display: inline-flex; align-items: center; margin-left: auto; margin-right: 14px; border: 1px solid currentColor; border-radius: 20px; overflow: hidden; opacity: .85; }
.lang-switch button { background: none; border: 0; padding: 5px 10px; cursor: pointer; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: inherit; line-height: 1; transition: background .2s ease, color .2s ease; }
.lang-switch button.active { background: var(--gold); color: var(--charcoal); }
@media (max-width: 680px) { .lang-switch { margin-right: 10px; } }