/* === Design tokens & base (light) === */
:root{
  --utility-h: 35px;  /* fallback: height utility bar */
  --header-h: 64px;   /* fallback: height header */

  --bg: #F8F4EA;
  --surface: #992d1d;
  --text: #2A2A2A;
  --muted: #ddceab;
  --accent: #d29b2e;
  --accent-2: #2F4F9B;
  --commontext: #411403;
  --radius: 16px;
  --container: 1100px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --gap: clamp(16px, 2vw, 28px);
  --step-0: clamp(14px, .9vw, 16px);
  --step-1: clamp(18px, 1.4vw, 22px);
  --step-2: clamp(24px, 2.2vw, 32px);
  --step-3: clamp(32px, 3.2vw, 46px);
  --step-4: clamp(40px, 4.6vw, 64px);
  --utility-bg: color-mix(in oklab, var(--accent), white 90%);
  --utility-border: color-mix(in oklab, var(--accent), transparent 75%);
}

*{ box-sizing: border-box }
html{ scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  *{ animation: none !important; transition: none !important }
}
html, body{ overflow-x: hidden }

body{
  margin:0;
  font-family: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

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

.container{ width:min(100% - 32px, var(--container)); margin-inline:auto }
.section{ padding-block: clamp(56px, 8vw, 120px); position: relative; margin-block: clamp(28px, 6vw, 72px); }
.section__head{ margin-bottom: clamp(20px, 4vw, 40px) }
h1{ font-size: var(--step-4); line-height:1.1; margin:0 0 12px }
h2{ font-size: var(--step-3); line-height:1.15; margin:0 0 8px }
h3{ font-size: var(--step-2); line-height:1.2; margin:0 0 8px }
p, li{ font-size: var(--step-0) }
.muted{ color: var(--muted) }
.accent{ color: var(--accent) }

.section--tight{ padding-top: clamp(10px, 2.5vw, 24px) }

.products__text__title {color: var(--accent)}
.products__text {
	color: var(--commontext);
	font-weight: normal;
}
.products__card__text {color: var(--accent)}

/* Utility bar (fixed) */
.utility{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  background: var(--accent);
  border-bottom: 1px solid var(--utility-border);
  color: var(--commontext);
}
.utility__inner{ display:flex; align-items:center; justify-content:space-between; min-height: 34px; gap: 10px; }
.utility__left, .utility__right{ display:flex; align-items:center; gap: 10px; }
.social{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius: 8px;
  color: var(--text); background: color-mix(in oklab, var(--muted), transparent 94%);
  border: 1px solid color-mix(in oklab, var(--muted), transparent 82%);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.social:hover{ background: color-mix(in oklab, var(--muted), transparent 90%); border-color: color-mix(in oklab, var(--muted), transparent 70%); transform: translateY(-1px); }
.contact{ display:inline-flex; align-items:center; gap:8px; color: var(--text); font-size: var(--step-0); }
.contact a{ color: inherit; text-decoration: none;}
.contact a:hover{ border-bottom-color: color-mix(in oklab, var(--muted), transparent 50%); }

/* Header / Nav (fixed beneath utility) */
.header{
  position: fixed; top: var(--utility-h, 0px); left: 0; right: 0; z-index: 1100;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--surface), transparent 10%);
  border-bottom: 1px solid color-mix(in oklab, var(--muted), transparent 70%);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap: 12px; min-height:64px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.brand__logo{ display:block; width:28px; height:28px; border-radius:50%;
  background: radial-gradient(30% 30% at 30% 30%, var(--accent), transparent 60%),
              radial-gradient(30% 30% at 70% 60%, var(--accent-2), transparent 55%),
              #F1EAD6;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.brand__text{ font-weight:800; letter-spacing:.4px; }
.nav__list{ display:flex; gap: 10px; list-style:none; margin:0; padding:0 }
.nav__link{ text-decoration:none; color:var(--muted); padding:10px 14px; border-radius:10px; }
.nav__link[aria-current="page"], .nav__link:hover{ color:var(--commontext); background: linear-gradient(135deg, var(--accent), #F1D27A); color:#2A2A2A }

/* Hamburger */
.nav__toggle{ position:relative; width:36px; height:36px; display:none; place-items:center; border-radius:10px; background:none; border:0; padding:0 }
.nav__bar{ position:absolute; left:8px; right:8px; height:2px; background:var(--text); border-radius:2px; transition: transform .35s cubic-bezier(.2,.6,.2,1), top .35s cubic-bezier(.2,.6,.2,1), opacity .2s ease }
.nav__bar:nth-child(1){ top:12px } .nav__bar:nth-child(2){ top:18px } .nav__bar:nth-child(3){ top:24px }
.nav__toggle.is-open .nav__bar:nth-child(1){ top:18px; transform:rotate(45deg) }
.nav__toggle.is-open .nav__bar:nth-child(2){ opacity:0; transform:translateX(-6px) }
.nav__toggle.is-open .nav__bar:nth-child(3){ top:18px; transform:rotate(-45deg) }
@media (prefers-reduced-motion: reduce){ .nav__bar{ transition:none } }

/* Mobile overlay FULL-SCREEN */
@media (max-width: 820px){
  .nav__toggle{ display:grid; z-index:5001 }
  .nav__toggle.is-open{ position: fixed; top: calc(var(--utility-h, 0px) - 22px); right: 5px; }
  .nav__list{
    position: fixed; inset: 0; z-index: 5000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px; padding: 32px; margin: 0; list-style: none;
    background: var(--bg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s step-end;
    height: 100dvh; min-height: 100dvh; overflow: auto;
  }
  .nav__list.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .nav__link{ font-size: clamp(22px, 6vw, 32px); color: var(--text); padding: 10px 16px; border-radius: 12px; }
  .nav__link:hover{ background: color-mix(in oklab, var(--muted), transparent 92%) }
}
body.menu-open{ overflow: hidden; }

/* Hero */
.hero{/* grid moved to .hero .hero__inner in v19.3 */}
.hero__subtitle{ color: var(--commontext); max-width: 60ch }
.hero__ctas{ display:flex; gap: 12px; margin-top: 16px }
.hero__visual{ position:relative; aspect-ratio: 1; min-height: 220px; border-radius: var(--radius);
  background: radial-gradient(800px 600px at 30% 20%, rgba(199,154,46,.18), transparent 50%),
              radial-gradient(700px 500px at 70% 60%, rgba(47,79,155,.12), transparent 50%);
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; min-height: 180px }
}

/* Grid / Cards */
.grid{ display:grid; gap: var(--gap) }
.grid--2{ grid-template-columns: repeat(2, 1fr) }
.grid--3{ grid-template-columns: repeat(3, 1fr) }
@media (max-width: 820px){
  .grid--2, .grid--3 { grid-template-columns: 1fr }
}

.card{
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--muted), transparent 80%);
  border-radius: var(--radius); padding: clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow);
}
.card--feature img{ width:100%; height:auto; display:block; border-radius: 12px; margin-bottom: 12px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 12px; text-decoration:none; font-weight:700;
  border:1px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) }
.btn--primary{ background: linear-gradient(135deg, var(--accent), #F1D27A); color:#2A2A2A }
.btn--primary:hover{ filter: brightness(1.04) }
.btn--ghost{ color: var(--commontext); background: linear-gradient(135deg, var(--accent), #F1D27A); color:#2A2A2A }
.btn--ghost:hover{filter: brightness(1.04)}

/* Carousel */
.carousel{ position:relative; overflow:hidden; border-radius: var(--radius); transparent 80%); }
.carousel__viewport{ width:100%; overflow:hidden; touch-action: pan-y; user-select: none; }
.carousel__track{ display:flex; will-change: transform; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.slide{ min-width: 100%; margin:0 }
.slide img{ width:100%; height:auto; display:block; -webkit-user-drag: none; }
.slide figcaption{ padding: 10px 14px; color: var(--muted); font-size: var(--step-0) }

.carousel__btn{
  position:absolute; top:50%; transform: translateY(-50%);
  background: color-mix(in oklab, var(--accent), transparent 5%);
  border:1px solid color-mix(in oklab, var(--muted), transparent 75%);
  width:42px; height:42px; border-radius: 50%;
  display:grid; place-items:center; color: var(--text); cursor:pointer;
}
.carousel__btn:hover{ background: color-mix(in oklab, var(--muted), transparent 92%) }
.carousel__btn--prev{ left: 12px } .carousel__btn--next{ right: 12px }

.carousel__dots{ position:absolute; bottom: 10px; left:50%; transform:translateX(-50%); display:flex; gap:8px }
.carousel__dot{
  width:10px; height:10px; border-radius:50%;
  border:1px solid color-mix(in oklab, var(--muted), transparent 70%);
  background: #f8f4ea);
}
.carousel__dot[aria-selected="true"]{ background: var(--accent) }

/* CTA */
.cta{
  text-align:center; padding: clamp(24px, 6vw, 48px);
}

/* Footer */
.footer{ padding: 20px 0; border-top:1px solid color-mix(in oklab, var(--muted), transparent 70%); background: #FBF6EC }
.footer__inner{ display:flex; align-items:center; justify-content:space-between }
.footer__contact__title{
	color: var(--accent)
}
.footer__contact__text{
	color: var(--commontext)
}

/* Parallax section backgrounds */
.parallax{
  background-image: var(--bg), linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
  background-size: cover, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center;
  border-radius: 18px;
  overflow: clip;
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translate3d(var(--reveal-x,0), var(--reveal-y,0), 0);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal[data-reveal="left"]{ --reveal-x: -24px }
.reveal[data-reveal="right"]{ --reveal-x: 24px }
.reveal[data-reveal="up"]{ --reveal-y: 16px }
.reveal.is-visible{ opacity: 1; transform: translate3d(0,0,0) }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none }
}
html:not(.js) .reveal{ opacity:1; transform:none }

/* Back-to-top */
.to-top-float{
  position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--muted), transparent 70%);
  background: color-mix(in oklab, var(--accent), transparent 30%);
  backdrop-filter: blur(4px);
  color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
  z-index: 2000;
}
.to-top-float .caret{ display:inline-block; transform: translateY(1px); }
.to-top-float:hover{ background: color-mix(in oklab, var(--muted), transparent 92%); border-color: color-mix(in oklab, var(--muted), transparent 60%); }
.to-top-float.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Offsets below fixed bars */
main{ padding-top: calc(var(--utility-h, 0px) + var(--header-h, 64px) + 12px); }

/* Desktop vs Mobile contacts */
.contact--icon{ display: none !important; }
.contact--text{ display: inline-flex !important; align-items: center; gap: 8px; }

@media (max-width: 820px){
  :root{ --utility-h: 38px; }
  .utility__inner{ min-height: 38px }
  .utility__right{ gap: 10px }
  .contact--icon{ display: inline-grid !important; }
  .contact--text{ display: none !important; }
}

/* Prevent initial overlap before JS sets heights */
html:not(.js) .header{ top: var(--utility-h); }

/* v5.2 — logo SVG */
.brand__logo{
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.hero__visual{ position: relative; }
.hero__visual .hero__logo{
  position: absolute; inset: 0; margin: auto;
  width: clamp(120px, 28vw, 260px); height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.08));
  pointer-events: none;
}


/* v5.2b — solo dimensione logo in Hero */
.hero__visual .hero__logo{
  width: 420px !important;
  height: auto;
  max-width: 92vw;
}


/* v5.2c — rimuovi sfondi in Hero */
.hero.parallax{ background: none !important; }
.hero__visual{ background: none !important; }


/* v5.2d — spazio laterale minimo dentro ogni sezione */
.section{ padding-inline: 8px; } /* ~un paio di px per lato */
@media (min-width: 1280px){
  .section{ padding-inline: 10px; } /* leggermente più comodo su desktop ampi */
}

.coloreOro{
	color: var(--accent)
}
.allineaCentro{
	text-align: center;
}
/* v5.2e — serif mix: Playfair Display (display) + Lora (text) */
h1, h2, h3, .brand__text, .nav__link{
  font-family: "Playfair Display", "Lora", ui-serif, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1{ font-weight: 700; }
h2, h3{ font-weight: 600; }

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Buttons stay readable with serif */
.btn{ font-family: "Lora", ui-serif, serif; font-weight: 700; }

/* Brand text sizing tweak next to logo */
.brand__text{ font-weight: 700; font-size: clamp(16px, 1.2vw, 18px); }


/* v5.2f — brand solo logo, più largo e cliccabile */
.brand{ gap: 0 !important; }
.brand__logo{
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
}
/* aumenta un filo l'area cliccabile senza cambiare layout */
.brand{ padding: 6px 0; }


/* v5.2g — brand logo più grande e responsivo */
.nav{ min-height: clamp(64px, 9vw, 100px); }
.brand__logo{
  width: clamp(48px, 6.8vw, 88px) !important;
  height: auto !important;
}
/* area clic migliorata senza allargare troppo */
.brand{ padding-block: 6px; }


/* v5.2h — Footer più scuro + contatti a destra */
.footer{
  background: #394050;
  border-top: 1px solid color-mix(in oklab, var(--muted), transparent 60%);
}
.footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer__copy{
  color: color-mix(in oklab, var(--text), black 10%);
  margin: 0;
  font-size: var(--step-0);
}
.footer__right{
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__mail{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface), transparent 10%);
  border: 1px solid color-mix(in oklab, var(--muted), transparent 78%);
}
.footer__mail:hover{
  background: color-mix(in oklab, var(--muted), transparent 92%);
}
.footer__social{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer .social{
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--text);
  background: color-mix(in oklab, var(--muted), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--muted), transparent 78%);
}
.footer .social:hover{
  background: color-mix(in oklab, var(--muted), transparent 88%);
}

/* Mobile: stack right-side items under copyright */
@media (max-width: 700px){
  .footer__inner{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__right{ width: 100%; justify-content: space-between; }
  .footer__mail{ padding: 8px 10px; }
}


/* v5.2j — Footer due colonne fisse + font piccolo leggibile */
.footer{
  padding-block: clamp(28px, 5.5vw, 56px);
}
.footer__grid{
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, .8fr);
  column-gap: clamp(28px, 8vw, 120px);
  row-gap: 0;
  align-items: start;
}
.footer__brand{ display:block; }
.footer__logo{ width: clamp(96px, 10vw, 140px); height: auto; margin: 0 0 12px 0; }

/* Tipografia footer: compatta ma leggibile */
.footer p,
.footer li,
.footer a,
.footer__desc,
.contact-list span{ font-size: clamp(12px, .95vw, 14px); }
.footer__contact h3{
  font-size: clamp(14px, 1.1vw, 16px);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

/* Contatti a righe con icona */
.contact-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-list li{
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--muted), transparent 80%);
}
.contact-list .icon{ display:grid; place-items:center; color: color-mix(in oklab, var(--text), black 12%); }
.contact-list a{ color: var(--text); text-decoration: none;}
.contact-list a:hover{ border-bottom-color: color-mix(in oklab, var(--muted), transparent 40%); }

/* Social compatti */
.footer__social{ display:inline-flex; gap:8px; align-items:center; }
.footer__social .social{ width: 26px; height: 26px; border-radius: 8px; }

/* Subfooter: copyright a sinistra, designer a destra */
.subfooter{
  background: var(--accent);
}
.subfooter__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: clamp(12px, .9vw, 13px);
}

/* Mantieni le due colonne anche su schermi piccoli (layout sempre a colonne) */
@media (max-width: 760px){
  .footer__grid{
    grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr);
    column-gap: clamp(18px, 6vw, 48px);
  }
  .footer__logo{ width: clamp(84px, 16vw, 120px); }
}


/* v5.2k — Footer mobile: impila le colonne; social con icone visibili */
@media (max-width: 760px){
  .footer__grid{
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .footer__contact{ margin-top: 6px; }
}
.footer__social .social{
  display: grid;
  place-items: center;
  color: var(--text);
}


/* v5.4b — Empty gallery state */
.gallery-empty{
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: var(--step-0);
}


/* v5.5 — Gallery page grid + CTA */
.gallery__cta{ margin-top: 18px; display:flex; justify-content:center; }
.gallery-grid{
  --card: clamp(140px, 22vw, 240px);
  --gap: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card), 1fr));
  gap: var(--gap);
}
/* v5.5e — Prevent edge clipping of last card inside rounded/overflow-clipped sections */
.gallery-grid{ padding-inline: calc(var(--gap) + 16px); }

.gallery-card{
  transform-origin: center;
  width: 100%;
  border-radius: 16px;
  background: color-mix(in oklab, var(--accent), transparent 4%);
  border: 1px solid color-mix(in oklab, var(--muted), transparent 78%);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1);
  will-change: transform, box-shadow;
}
.gallery-card:hover, .gallery-card:focus-within{ transform: translateY(-8px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.gallery-thumb{
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  object-fit: cover;
  background: color-mix(in oklab, var(--muted), transparent 90%);
}
.gallery-caption{
  font-size: clamp(12px, .95vw, 14px);
  padding: 10px 12px;
  color: color-mix(in oklab, var(--text), black 8%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 36px;
  display: grid;
  place-items: center;
}
@media (max-width: 700px){
  .gallery-grid{ --card: clamp(118px, 44vw, 180px); --gap: 10px; }
  .gallery-card{
  transform-origin: center; border-radius: 14px; }
  .gallery-caption{ font-size: 12px; padding: 8px 10px; min-height: 30px; }
}


/* v5.5e-mobile — Fix gallery clipping & centering on small screens */
@media (max-width: 700px){
  /* Remove clipping from rounded parallax sections to avoid cutting card corners */
  .parallax{ overflow: visible; }

  /* Center the grid content and give breathing room from section edges */
  .gallery-grid{
    justify-items: center;
    padding-inline: clamp(16px, 6vw, 28px);
  }

  /* Keep single-column cards from stretching edge-to-edge */
  .gallery-card{
  transform-origin: center;
    max-width: 560px;
  }
}


/* v5.6 — Fullscreen Lightbox */
.lightbox{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:rgba(0,0,0,.7); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity .18s ease; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__dialog{ position:relative; max-width: min(96vw, 1400px); max-height: 90vh; display:grid; grid-template-rows: 1fr auto; gap:10px; }
.lightbox__imgwrap{ width:100%; height:100%; display:grid; place-items:center; background: #111; border-radius: 12px; overflow:hidden; }
.lightbox__img{ max-width:100%; max-height:100%; display:block; object-fit: contain; }
.lightbox__caption{ color:#fff; text-align:center; font-size: clamp(14px, 1.6vw, 18px); line-height:1.4; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.lightbox__btn:focus{ outline: 2px solid #fff; outline-offset: 2px; }




@media (max-width: 700px){
  .lightbox__btn{ width:40px; height:40px; }
  .lightbox__caption{ padding-inline: 10px; }
}
body.lightbox-open{ overflow: hidden; }


/* v5.6b — Lightbox pan/zoom UX */
.lightbox__imgwrap{ cursor: grab; touch-action: none; }
.lightbox__imgwrap.is-panning{ cursor: grabbing; }




/* v5.6l — Controls outside image area */
.lightbox__dialog{ position: relative; max-width: min(96vw, 1400px); max-height: 82vh; display:grid; grid-template-rows: 1fr auto; gap:10px; }
.lightbox__controls{}
.lightbox__btn{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}
@media (max-width: 700px){
  .lightbox__dialog{ max-height: 78vh; }
  .lightbox__btn{ width: 40px; height: 40px; }
  .lightbox__controls{ bottom: 10px; padding: 6px 8px; gap: 8px; }
}





/* v5.6n — Fixed controls bar */
.lightbox{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(0,0,0,.7); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity .18s ease; }
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox__dialog{
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1400px);
  max-height: 82vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}
.lightbox__imgwrap{ width:100%; height:100%; display:grid; place-items:center; background:#111; border-radius:12px; overflow:hidden; }
.lightbox__img{ max-width:100%; max-height:100%; display:block; object-fit:contain; }
.lightbox__caption{ color:#fff; text-align:center; font-size: clamp(14px, 1.6vw, 18px); line-height:1.4; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.lightbox__controls{
  position: fixed;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(92vw, 560px);
  height: clamp(52px, 7.5vh, 68px);
  display: grid;
  
  align-items: center;
  gap: 12px;
  
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}

.lightbox__btn{
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  user-select: none;
}


@media (max-width: 700px){
  .lightbox__dialog{ max-height: 78vh; }
  .lightbox__controls{ width: min(94vw, 460px); height: clamp(50px, 8vh, 64px); gap: 10px; padding: 6px 10px; }
  .lightbox__btn{ width: 44px; height: 44px; border-radius: 10px; }
}

/* v5.6o — fixed positions for controls */





/* v5.6o — no-bounce active */
.lightbox__btn{
  transform: translateZ(0);
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  top: 0;
  line-height: 1;
}
.lightbox__btn:active{
  transform: none;
  top: 0;
  opacity: .95;
}


/* v5.6p — lock control positions and neutralize offsets */
.lightbox__controls{
  position: fixed;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(92vw, 560px);
  height: clamp(52px, 7.5vh, 68px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  
  align-items: center;
  gap: 12px;
  
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}

.lightbox__btn{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  user-select: none;
  
  inset: auto !important;
  transform: none !important;
  margin: 0;
  line-height: 1;
}






.lightbox__btn:active{
  transform: none;
  top: 0;
  opacity: .95;
}

@media (max-width: 700px){
  .lightbox__controls{ width: min(94vw, 460px); height: clamp(50px, 8vh, 64px); gap: 10px; padding: 6px 10px; }
  .lightbox__btn{ width: 44px; height: 44px; border-radius: 10px; }
}

/* v5.6q — 3-col bar & fixed Close */




/* Close button fixed at top-right of overlay */
.lightbox__close{
  position: fixed !important;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.5);
  color: #fff;
  cursor: pointer;
}
@media (max-width: 700px){
  .lightbox__close{
    right: max(12px, env(safe-area-inset-right));
    width: 42px; height: 42px;
  }
}


/* v5.6r — 3-col control bar + fixed Close */
.lightbox__controls{
  position: fixed;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(92vw, 560px);
  height: clamp(52px, 7.5vh, 68px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}
.lightbox__controls .lightbox__prev{ justify-self: start; }
.lightbox__controls .lightbox__share{ justify-self: center; }
.lightbox__controls .lightbox__next{ justify-self: end; }

.lightbox__btn{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  user-select: none;
  
  inset: auto !important;
  transform: none !important;
  margin: 0;
  line-height: 1;
}
.lightbox__btn:active{ transform: none; top: 0; opacity: .95; }

/* Close fixed top-right of viewport */
.lightbox__close{
  position: fixed !important;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.5);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 700px){
  .lightbox__controls{ width: min(94vw, 460px); height: clamp(50px, 8vh, 64px); gap: 10px; padding: 6px 10px; }
  .lightbox__btn{ width: 44px; height: 44px; border-radius: 10px; }
}

/* v5.6s — scope static position to buttons inside the control bar */
.lightbox__controls .lightbox__btn{
  position: static !important;
}

/* v5.6s — force top-right close button */
.lightbox > .lightbox__close{
  position: fixed !important;
  z-index: 10000;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  align-self: start !important;
  justify-self: end !important;
  background: rgba(0,0,0,.55);
}
@media (max-width: 700px){
  .lightbox > .lightbox__close{ top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
}

/* v5.6s — align controls */
.lightbox__controls{ justify-items: stretch; }
.lightbox__controls .lightbox__prev{ justify-self: start; }
.lightbox__controls .lightbox__share{ justify-self: center; }
.lightbox__controls .lightbox__next{ justify-self: end; }

/* v5.6u — controls bg */
.lightbox__controls{
  background: rgba(0,0,0,.35) !important;
}


/* v5.7 — brand name next to the logo */
.header .brand{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.brand__name{
  font-weight: 600;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--ink, #1b1b1b);
  white-space: nowrap;
}
@media (max-width: 560px){
  .brand__name{ display: none; }
}

/* v5.7.1 — Prayer flyout */
.prayer-flyout{
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: max(150px, calc(env(safe-area-inset-top) + 124px));
  width: clamp(260px, 28vw, 420px);
  max-width: 92vw;
  z-index: 10001;
  background: color-mix( in oklab, var(--accent), transparent 10%);
  color: var(--ink, #1b1b1b);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  padding: 14px 16px 12px 16px;
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  backdrop-filter: blur(4px);
}
.prayer-flyout.is-visible{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.prayer-flyout.is-hidden{
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
}
.prayer-flyout__title{
  text-align: center;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  margin: 0 28px 6px 0;
}
.prayer-flyout__text{
  text-align: center;
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  line-height: 1.5;
  font-size: clamp(13px, 1.35vw, 16px);
}
.prayer-flyout__text p{ margin: 0; }
.prayer-flyout__close{
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  color: inherit;
  cursor: pointer;
}
@media (max-width: 720px){
  .prayer-flyout{
    top: max(62px, calc(env(safe-area-inset-top) + 56px));
    right: 8px;
    width: min(86vw, 360px);
  }
}
@media (prefers-reduced-motion: reduce){
  .prayer-flyout{ transition: none; transform: none; opacity: 1; }
}

/* v5.7.3 — prayer mobile trigger */
.prayer-trigger{
  position: fixed;
  right: 0;
  top: max(150px, calc(env(safe-area-inset-top) + 124px));
  z-index: 10000;
  width: 38px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.15);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: color-mix( in oklab, var(--accent), transparent 10%);
  color: var(--ink, #1b1b1b);
  box-shadow: -8px 8px 20px rgba(0,0,0,.15);
  cursor: pointer;
}
.prayer-trigger:active{ opacity:.9; }
@media (max-width: 720px){
  .prayer-trigger{ display: inline-flex; }
  .prayer-flyout.is-visible ~ .prayer-trigger{ opacity: 0; pointer-events: none; }
}

/* v5.7.5 — Home: Metodo section */
.section--method{ padding-block: clamp(32px, 6vw, 72px); }
.method__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2.4vw, 24px);
  margin-top: 10px;
}
@media (max-width: 900px){
  .method__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .method__grid{ grid-template-columns: 1fr; }
}
.method__card{
  padding: clamp(14px, 2.2vw, 18px);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f7f1af;
  backdrop-filter: blur(2px);
}
.method__title{
  font-weight: 600;
  margin: 0 0 6px;
  font-size: clamp(16px, 2vw, 18px);
}
.method__text__title{ margin: 0; color: var(--accent); }
.method__text{ margin: 0; color: var(--commontext); }

.method__excerpt{
  margin-top: clamp(18px, 3.5vw, 28px);
  max-width: 72ch;
}
.method__excerpt p{ margin: 0 0 10px; }
.method__details summary{
  cursor: pointer;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}
.method__full{ margin-top: 10px; color: #333; }

/* v5.8 — Sezione Chi Sono */
.section--about{ padding-block: clamp(36px, 6vw, 88px); }
.about{
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 40px);
  align-items: start;
}
.about__text__title {color: var(--accent)}
.about__text {color: var(--commontext)}
@media (max-width: 900px){
  .about{ grid-template-columns: 1fr; }
}
.about__photo{
  margin: 0;
}
.about__photo.is-placeholder .about__ph-box{
  aspect-ratio: 4/5;
  border-radius: 16px;
  border: 2px dashed rgba(0,0,0,.25);
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.03) 12px, rgba(0,0,0,.06) 12px, rgba(0,0,0,.06) 24px);
  display: grid;
  place-items: center;
}
.about__ph-text{
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.prose p{ margin: 0 0 12px; color: var(--commontext); }

/* a11y utility */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* v5.8.2 — Typography weight bump */
:root{
  --fw-base: 500;
  --fw-head: 700;
}
body{ font-weight: var(--fw-base); }
h1,h2,h3,h4,h5,h6,.section__head{ font-weight: var(--fw-head); }
.nav__link{ font-weight: 600; }
.brand__name{ font-weight: 700; }
.prose p, .card p, .method__text, .about p, figcaption{ font-weight: var(--fw-base); }


/* v5.8.2 — About alignment (flush columns) */
.about{ align-items: stretch; }
.about__media, .about__text{ display: block; }
.about__photo{ height: 100%; display: grid; }
.about__photo .about__ph-box{ width: 100%; height: 100%; }

/* On large screens, remove fixed aspect and stretch to match text height */
@media (min-width: 901px){
  .about__photo.is-placeholder .about__ph-box{ aspect-ratio: auto; height: 100%; }
}

/* On small screens, restore aspect ratio to avoid oversized placeholder */
@media (max-width: 900px){
  .about{ align-items: start; }
  .about__photo.is-placeholder .about__ph-box{ aspect-ratio: 4/5; height: auto; }
}

/* v5.8.3 — section background image */
.parallax::before{
  background-image: var(--bg, url('img/bg/parchment-corners.png')) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .18;
}
@media (max-width: 700px){
  .parallax::before{ opacity: .22; }
}

/* v5.8.4 — remove section backgrounds */
.parallax::before{
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* v5.8.6 — Metodo two-column with media */
.method{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px, 560px);
  gap: clamp(18px, 4vw, 40px);
  align-items: stretch;
}
.method__text{ min-width: 0; }
.method__media{
  margin: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.method__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px){
  .method{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .method__media{
    height: auto;
    aspect-ratio: 4/3;
  }
  .method__img{ height: 100%; }
}

/* v5.8.7 — Metodo wide + side-by-side fix */
.container--wide{
  max-width: min(1200px, 94vw);
}

.method{
  grid-template-columns: minmax(420px, 1.15fr) minmax(420px, .95fr);
}

.method__text{ min-width: 0; max-width: none; }

/* Prefer contain to avoid eccessivo crop; background neutro per le bande */
.method__img{
  object-fit: contain;
  background: #f5f2ea;
}

/* Se qualche stile globale restringe i paragrafi, annulliamolo qui */
.method__text p{ max-width: none; }


/* v5.8.8 — Metodo layout final */
.container.container--wide{ 
  max-width: min(1280px, 95vw) !important;
}

.method{
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(520px, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}

.method__text{ min-width: 0; max-width: none; }
.method__text .prose{ max-width: none; }

.method__media{
  margin: 0;
  align-self: stretch;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.method__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* riempi tutto senza lasciare bande */
  object-position: center;  /* inquadra il soggetto */
  background: none;
}

@media (max-width: 1100px){
  .method{
    grid-template-columns: 1fr 1fr; /* lascia due colonne finché possibile */
  }
}

@media (max-width: 900px){
  .method{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .method__media{
    aspect-ratio: 4/3;
  }
  .method__img{ height: 100%; object-fit: cover; }
}

/* v5.8.9 — Metodo side-by-side hard placement & equal height */
.container.container--wide{ max-width: min(1280px, 96vw) !important; }

.method{
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(480px, .9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.method__text{ grid-column: 1; min-width: 0; }
.method__media{ grid-column: 2; margin: 0; height: 100%; }

.method__media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.method__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1100px){
  .method{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px){
  .method{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .method__text{ grid-column: auto; }
  .method__media{ grid-column: auto; aspect-ratio: 4/3; height: auto; }
  .method__img{ height: 100%; }
}


/* v5.8.10 — Metodo: force side-by-side with flex (more robust) */
.container.container--wide{ --container: 1280px; }

.section--method .method{
  display: flex !important;
  flex-wrap: nowrap;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.section--method .method__text{
  flex: 1 1 0;
  min-width: 0;
}

.section--method .method__media{
  flex: 0 1 min(46vw, 620px);
  margin: 0;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.section--method .method__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px){
  .section--method .method{
    flex-direction: column;
  }
  .section--method .method__media{
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 4/3;
  }
  .section--method .method__img{ height: 100%; }
}

/* v5.8.11 — Metodo aligned like About (grid 2-col, image right) */
.section--method .method{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(420px, 560px);
  gap: clamp(18px, 4vw, 40px);
  align-items: stretch;
}
.section--method .method__text{ min-width: 0; }
.section--method .method__media{
  margin: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.section--method .method__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px){
  .section--method .method{
    grid-template-columns: 1fr !important;
    align-items: start;
  }
  .section--method .method__media{
    height: auto;
    aspect-ratio: 4/3;
  }
  .section--method .method__img{ height: 100%; }
}


/* v5.8.12 — Metodo 70/30 layout (text/media) */
.section--method .method{
  display: grid !important;
  grid-template-columns: 7fr 3fr; /* 70% testo, 30% immagine */
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch;
}
.section--method .about__media{ height: 100%; }
.section--method .method__media{
  margin: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.section--method .method__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1000px){
  .section--method .method{
    grid-template-columns: 1fr; /* stack su schermi più piccoli */
  }
  .section--method .method__media{
    height: auto;
    aspect-ratio: 4/3;
  }
  .section--method .method__img{ height: 100%; }
}


/* v5.8.13 — About mobile: text first, image second */
@media (max-width: 900px){
  .about{ 
    display: flex !important; 
    flex-direction: column; 
  }
  .about__text{ order: 1; }
  .about__media{ order: 2; }
}


/* v5.8.14 — About photo via config.js (robust sizing) */
.about__photo.has-image{ border: 0; }
.about__photo.has-image .about__ph-box{ display: none !important; }
.about__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}
@media (max-width: 900px){
  .about__photo{ height: auto; }
  .about__img{
    height: auto;
    aspect-ratio: 4/5;
    width: 100%;
    object-fit: cover;
  }
}

/* v5.8.18 — P.IVA in footer */
.contact-list .contact__piva-label{
  font-weight: 600;
  margin-right: .5rem;
}
.contact-list .contact__piva-value{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* v5.8.19 — P.IVA bold label */
.contact-list .contact__piva strong{
  font-weight: 700;
  margin-right: .5rem;
}

/* v5.8.20 — P.IVA without icon */
.contact-list .contact__piva{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  grid-template-columns: none;
}
.contact-list .contact__piva .contact__piva-value{ font-variant-numeric: tabular-nums; }

/* v5.9.1: spacing between P.IVA label and its value in footer */
.footer .contact-list li b + .js-piva { margin-left: 0.5rem; }

/* v5.9.1: ensure P.IVA label behaves like the old icon spacing */
.footer .contact-list li b { display: inline-block; margin-right: 0.4rem; }


/* v5.9.4 — Parallax support */
.parallax { will-change: transform; transform: translateZ(0); }
.parallax-wrap { overflow: visible; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .parallax { transform: none !important; }
}

/* v5.9.5 — Font update */
:root{
  --font-base: "Lora", serif;
  --font-hero: "Cinzel", serif;
}
html, body { font-family: var(--font-base); }
.hero__title, .hero__title .accent { font-family: var(--font-hero); }

/* v5.9.6 — Hero title/subtitle sizing tweaks */
.hero__title{
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.1;
}
.hero__subtitle{
  font-size: clamp(18px, 3.5vw, 20px);
  line-height: 1.25;
  font-style: italic;
}
@media (min-width: 1200px){
  .hero__title{ font-size: 48px; }
  .hero__subtitle{ font-size: 20px; }
}

/* v6.8 — Centered section divider element */
.section-divider{
  display:block;
  width: clamp(220px, 60vw, 920px);
  height: 1px;
  margin: clamp(24px, 3vw, 36px) auto;
  border: 0;
  background: rgba(0,0,0,.18);
  border-radius: 1px;
}
@supports (color: color-mix(in oklab, white, black)){
  .section-divider{
    background: color-mix(in oklab, var(--text, #111), transparent 84%);
  }
}

/* v6.3 — Footer prayer */
.footer__prayer{
  margin-top: 14px;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1.55;
  font-style: italic;
  color: var(--accent);
}
.footer__prayer p{ margin: 0; }
.footer__brand .footer__logo{ width: clamp(110px, 14vw, 160px); height: auto; margin-bottom: 10px; }


/* v13.2 contact form */
.contact-form__intro{ margin: 18px 0 8px; font-weight:700; }
.contact-form .req{ color:#D22; font-weight:700; }

.contact-form .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.contact-form .form-field{ display:grid; gap:8px; }
.contact-form .form-field--full{ grid-column: 1 / -1; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="subj"],
.contact-form textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font: inherit;
  outline:none;
}
.contact-form textarea{ resize:vertical; }

.contact-form .form-privacy{ border:none; padding:0; margin:4px 0 0; }
.contact-form .form-privacy legend{ font-weight:700; margin-bottom:8px; }
.contact-form .privacy-check{ display:flex; gap:10px; align-items:flex-start; }
.contact-form .privacy-check input[type="checkbox"]{ margin-top:4px; }

.contact-form .form-actions{ display:flex; justify-content:center; margin-top:14px; }
.btn--disabled{ background:#D5D5D5; color:#6B6B6B; cursor:not-allowed; }

@media (max-width: 720px){
  .contact-form .form-grid{ grid-template-columns: 1fr; }
}



/* v13.1.1 contact collapse */
.contact-form__toggle{ margin:18px 0 8px; }
.contact-form-panel{
  transition: height 260ms ease, opacity 220ms ease;
  opacity:0;
}
.contact-form-panel.is-open{ opacity:1; }

/* Input borders aligned with theme */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="subj"],
.contact-form textarea{
  border:1px solid var(--line);
  border-radius:10px;
}

/* Invalid state */
.contact-form .is-invalid{ border-color:#FF0000; box-shadow:0 0 0 2px rgba(255,0,0, 1); }


/* v13.1.3: center toggle button */
.contact-form__toggle-row{ display:flex; justify-content:center; }


/* v13.1.4 form spacing */
.contact-form{ margin-left: 20px; margin-right: 20px; }
@media (min-width: 900px){
  .contact-form{ margin-left: 32px; margin-right: 32px; }
}
@media (max-width: 480px){
  .contact-form{ margin-left: 12px; margin-right: 12px; }
}

/* v13.1.5 ensure label red */
.contact-form .form-field.has-error > span{ color:#FF0000; }

/* v13.1.5 ensure border red */
.contact-form .form-field.has-error input,
.contact-form .form-field.has-error textarea{ border-color:#FF0000; }


/* v14.1 — Fixed-height Gallery/Carousel (avoid resizing with portrait images) */
#gallery .carousel__viewport{ background: transparent; 
  /* Fixed responsive height: adjust as needed to your design */
  height: clamp(260px, 48vw, 520px);
}
#gallery .carousel__track{ height: 100%; align-items: stretch; }
#gallery .slide{ min-width: 100%; height: 100%; }
#gallery .slide img{
  width: 100%;
  height: 100% !important; /* override previous height:auto */
  object-fit: contain;
  display: block;
}
/* Optional: ensure the outer carousel never shrinks its height during transitions */
#gallery .carousel{ contain: layout paint; }


/* v14.3 — Gallery page: uniform thumbnails */
.gallery-grid{
  /* keep current grid, only document that --card controls width */
}
/* Fixed-height thumbnail area; portrait images crop from the TOP */
.gallery-card__img{
  width: 100%;
  height: clamp(140px, 22vw, 220px);
  display: block;
  object-fit: cover;
  object-position: top center;
  background: color-mix(in oklab, var(--muted), transparent 88%);
}
/* Optional: caption spacing */
.gallery-card__caption{
  padding: 10px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  color: color-mix(in oklab, var(--text), black 8%);
}



/* v19.1 — Hero background (parallax, full image without zoom) */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::before{ /* (opz.) layer di riempimento; non necessario con cover */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('img/herobg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(14px) brightness(0.95);
  transform: translateZ(0);
  z-index: 0;
  pointer-events: none;
}

.hero__content, .hero__visual{
  position: relative;
  z-index: 2;
}

/* v19.2 — Hero: immagine di sfondo full-cover, senza bande visibili */
.hero{ position: relative; overflow: hidden; }
.hero__bgimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* copre tutta la sezione, niente sfondo di base visibile */
  object-position: center;
  transform: translateZ(0);
  z-index: 0;
  pointer-events: none;
  will-change: transform; /* parallax via data-parallax nello script esistente */
  filter: brightness(65%);
}
.hero__content, .hero__visual{ position: relative; z-index: 1; }


/* v19.3 — Hero full-width come la header */
.hero.section{ margin-block-start: 0; } /* attacca alla header bar */
.hero{ position: relative; overflow: hidden; min-height: clamp(420px, 70vh, 820px); }
.hero .hero__inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap); align-items:center; }
.hero__bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position:center; z-index:0; }
.hero__content, .hero__visual{ position: relative; z-index: 1; }

/* v19.4 — Hero flush + no rounded corners on background */
.hero.section{ margin-block-start: 0 !important; } /* elimina stacco con header */
.hero__bgimg{ border-radius: 0 !important; }     /* niente angoli arrotondati sullo sfondo */

/* v19.5 — Hero aderente alla header, senza angoli arrotondati, più alta e immagine in basso */
body.has-hero header, body.has-hero .header{ border-bottom: 0 !important; }
.hero.parallax{ border-radius: 0 !important; overflow: visible !important; } /* elimina arrotondamenti della sezione */
.hero.section{ margin-block-start: 0 !important; }
.hero{ min-height: clamp(560px, 80vh, 980px); }   /* più alta per vedere la parte bassa dell'immagine */
.hero__bgimg{ object-position: center bottom !important; } /* mostra la parte bassa dell'immagine */

/* v19.6 — Hero: alza leggermente l'inquadratura per non coprire i testi */
.hero__bgimg{ object-position: center 80% !important; }      /* default */
@media (min-width: 1024px){
  .hero__bgimg{ object-position: center 78% !important; }    /* desktop */
}
@media (min-width: 1440px){
  .hero__bgimg{ object-position: center 75% !important; }    /* large desktop */
}
@media (max-width: 767px){
  .hero__bgimg{ object-position: center 60% !important; }    /* mobile */
}

/* v19.7 — Alza testo/logo e parallax più evidente */
.hero{ min-height: clamp(600px, 82vh, 1000px); }
@media (min-width: 1024px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-3.2vh); }
}
@media (min-width: 1440px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-4.2vh); }
}
@media (max-width: 767px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-1.2vh); }
}

/* v19.8 — Parallax solo sull'immagine; testo/logo più in alto; niente overflow */
.hero{ overflow: hidden !important; border-radius: 0 !important; }
@media (min-width: 1024px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-5vh); }
}
@media (min-width: 1440px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-6vh); }
}
@media (max-width: 767px){
  .hero .hero__content, .hero .hero__visual{ transform: translateY(-2vh); }
}

/* v19.9 — Mobile: prima il logo centrato, poi il testo (niente sovrapposizioni) */
.hero .hero__content{ grid-area: content; }
.hero .hero__visual{ grid-area: visual; }

/* Desktop/tablet default: contenuto a sinistra, logo a destra */
.hero .hero__inner{ grid-template-areas: "content visual"; }

/* Mobile: una colonna — prima logo, poi testo */
@media (max-width: 767px){
  .hero .hero__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "content";
    gap: clamp(12px, 4vw, 24px);
  }
  .hero .hero__visual{
    justify-self: center;
    text-align: center;
    transform: none !important;    /* annulla il lift su mobile */
  }
  .hero .hero__content{
    justify-self: center;
    text-align: center;
    padding-inline: clamp(16px, 6vw, 32px);
    transform: none !important;    /* annulla il lift su mobile */
  }
  /* Limita dimensioni del logo ed assicurane il centraggio */
  .hero .hero__visual img,
  .hero .hero__visual svg{
    display: block;
    margin: 0 auto;
    max-width: min(80vw, 420px);
    height: auto;
  }
}

/* v19.10 — Mobile fine-tuning: logo più a sinistra e leggermente più in alto */
@media (max-width: 767px){
  .hero .hero__visual{
    justify-self: start;          /* sposta a sinistra */
    text-align: left;
    margin-left: clamp(8px, 5vw, 24px);
    transform: translateY(-5vh) !important; /* alza un po' il logo */
  }
  .hero .hero__content{
    margin-top: clamp(8px, 2.5vw, 16px);    /* crea respiro sotto il logo */
    padding-inline: clamp(16px, 6vw, 32px);
    text-align: center;
  }
  /* Mantieni una dimensione equilibrata del logo */
  .hero .hero__visual img,
  .hero .hero__visual svg{
    max-width: min(78vw, 420px);
    height: auto;
  }
}

/* v19.11 — Hero mobile: centra i bottoni sotto al testo */
@media (max-width: 767px){
  .hero .hero__ctas{
    justify-content: center;
  }
}

/* v19.12 — Sfondo sezioni (esclusa la Hero) */
.section:not(.hero){
  background-color: #F8F4EA;
}

/* v19.13 — Sezioni senza angoli arrotondati */
.section{ border-radius: 0 !important; }
.hero{ border-radius: 0 !important; } /* per coerenza anche la hero */

/* v19.14 — Contattami: niente parallax + nessuna sovrapposizione al footer */
@media (max-width: 767px){
  #contact.section{ padding-bottom: clamp(28px, 8vw, 56px); color: var(--commontext);}
}

/* v19.15 — #contact senza parallax + spazio finale sicuro */
#contact.section{ padding-bottom: clamp(40px, 8vh, 96px); color: var(--commontext);}

/* v19.16 — Divisori di sezione sempre in primo piano */
.section-divider{
  position: relative;   /* crea stacking context */
  z-index: 999;         /* sopra sfondi/parallax dei blocchi adiacenti */
  pointer-events: none; /* evita di catturare click/scroll */
}

/* v19.17 — Mobile: evita sovrapposizioni tra sezioni disabilitando il parallax sulle section */
@media (max-width: 767px){
  .section.parallax,
  .section[data-parallax]{
    transform: none !important;
  }
}

/* v20.2 — Social icons unified sizing */
.social__icon{ width:28px; height:28px; display:inline-block; vertical-align:middle; }
.social__icon img{ width:100%; height:100%; display:block; }

/* v20.4 — Utility bar mobile: mostra icone telefono/email */
@media (max-width: 767px){
  .utility .contact--text{
    display: inline-flex !important; /* annulla il display:none precedente */
  }
  .utility .contact--text svg{
    width: 18px; height: 18px; display: inline-block;
  }
}

/* v20.5 — Utility bar mobile: solo icone (telefono/mail), testo nascosto ma clic restano attivi */
@media (max-width: 767px){
  .utility .contact--text{
    position: relative;
    display: inline-flex !important;
    align-items: center;
  }
  .utility .contact--text a{
    position: absolute;           /* l'anchor copre l'intero blocco */
    inset: 0;                     /* così clicchi l'icona */
    font-size: 0;                 /* nasconde il testo senza alterare il layout */
    color: transparent;
    text-shadow: none;
    overflow: hidden;
    white-space: nowrap;
  }
  .utility .contact--text svg{
    width: 20px;
    height: 20px;
    display: inline-block;
  }
}

/* v21.2 — Section divider uses custom Byzantine ornament image, centered and scaled */
.section-divider{
  position: relative;
  z-index: 999;
  pointer-events: none;
  display: block;
  height: clamp(70px, 12vw, 100px);
  margin: clamp(18px, 4vw, 36px) auto;
  border: 0;
  background: none;
}
.section-divider::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, 92vw);
  height: 100%;
  background-image: url("img/separatore.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* never use original pixel size */
  pointer-events: none;
}

/* v22.2 — Flush hero to header (remove gap/line) */
.header{ border-bottom: 0 !important; }
main{ padding-top: calc(var(--utility-h, 0px) + var(--header-h, 64px)) !important; }

/* v25 products list: minimal layout */
    [data-products-grid]{ display:block; }
    [data-products-grid] .product-group{ margin: 28px 0 20px; }
    .product-group__title{ margin:0 0 10px; font-size:1.2rem; }
    .product-line{ display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:start; padding:14px; border-bottom:1px solid var(--line, #eee); background:#f7f1af; }
    .product-line:last-child{ border-bottom:0; }
    .product-line__img{ width:120px; height:auto; object-fit:cover; border-radius:10px; background:#f6f6f6; }
    .product-line__main{ padding-top:2px; }
    .product-line__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
    .product-line__name{ margin:0; font-size:1.125rem; }
    .product-line__dep{ font-size:.95rem; color: var(--commontext); }
    .product-line__desc{ margin:.35rem 0 0; line-height:1.5; }
    @media (max-width: 720px){
      .product-line{ grid-template-columns: 84px 1fr; gap:12px; padding:12px; }
      .product-line__img{ width:84px; border-radius:8px; }
      .product-line__name{ font-size:1.05rem; }
    }
	
	.product-title{
		font-family: Cinzel;
		color: var(--accent);
	}
	.product-commontext{
		color: var(--commontext);
	}

/* === Commission Modal (products) === */
.commission-modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; z-index: 9999; }
.commission-modal.is-open{ display:flex; }
.commission-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.commission-modal__dialog{ position:relative; background:#f8f4ea; width:min(1100px,96vw); max-height:94vh; border-radius:12px; padding:20px; overflow:auto; display:grid; grid-template-columns: 1fr 1fr; gap:20px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
@media (max-width: 900px){ .commission-modal__dialog{ grid-template-columns: 1fr; } }
.commission-modal__close{ position:absolute; top:8px; right:12px; font-size:28px; line-height:1; background:transparent; border:0; cursor:pointer; color:#333; }
.commission-modal__img{ width:100%; height:auto; display:block; border-radius:8px; object-fit: contain; }
.commission-modal__summary{ display:flex; flex-direction:column; gap:6px; }
.commission-modal__name{ margin:0; }
.commission-modal__dep{ margin:0; color: var(--muted,#666); font-size: .95rem; }
.commission-modal__desc{ margin:0 0 8px 0; }
.commission-modal__privacy{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; }
.commission-modal__privacy input{ margin-top:.3em; }
.product-line__cta{ margin-top: 10px; }


/* === Commission Modal form alignment with home contact form === */
.commission-modal .contact-form{ margin:0; }
.commission-modal .form-grid{ gap:16px 24px; }
.commission-modal .commission-modal__privacy{ display:flex; align-items:flex-start; gap:10px; }
.commission-modal .commission-modal__privacy input{ margin-top:.3em; }


/* === Commission Modal input borders === */
.commission-modal .contact-form input[type="text"],
.commission-modal .contact-form input[type="email"],
.commission-modal .contact-form input[type="tel"],
.commission-modal .contact-form textarea{
  border: 1px solid var(--line);
  background: #fff;
}


/* === Commission Modal image vertical centering === */
.commission-modal__left{ display:flex; align-items:center; justify-content:center; }


/* === Modal zoom lens === */
.commission-modal__left{ position: relative; display:flex; align-items:center; justify-content:center; }
.zoom-lens{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.15);
  background-repeat:no-repeat;
  display:none;
  z-index: 2;
}


/* === Modal close button: golden, prominent === */
.commission-modal__close{
  background: var(--accent);
  color: #fff;
  border: 2px solid color-mix(in oklab, var(--accent), black 12%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.commission-modal__close:hover{
  transform: scale(1.05);
  background: color-mix(in oklab, var(--accent), black 10%);
  border-color: color-mix(in oklab, var(--accent), black 22%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.commission-modal__close:active{
  transform: scale(0.98);
}
.commission-modal__close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), black 30%), 0 6px 18px rgba(0,0,0,.18);
}


/* === Modal close button always on top === */
.commission-modal__close{ z-index: 5; }


/* === Hide close while zooming on mobile === */
@media (max-width: 900px){
  .commission-modal.is-zooming .commission-modal__close{
    opacity: 0;
    pointer-events: none;
  }
}


/* === Mobile: freeze modal scroll while zooming === */
@media (max-width: 900px){
  .commission-modal.is-zooming{
    touch-action: none;
  }
  .commission-modal.is-zooming .commission-modal__dialog{
    overflow: hidden;
  }
}


/* === Products: reveal from left === */
.product-reveal{
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .45s ease, transform .55s ease;
  will-change: transform, opacity;
}
.product-reveal.is-visible{
  opacity: 1;
  transform: translateX(0);
}


/* === Products — professional styling === */
[data-products-grid]{ display:block; }
[data-products-grid] .product-group{ margin: 32px 0 18px; }
.product-group__title{
  margin: 0 0 14px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.product-group__title::after{
  content: "";
  display: inline-block;
  height: 2px;
  width: 64px;
  background: var(--accent);
  border-radius: 2px;
  opacity: .7;
}

/* Card-like item */
.product-line{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  margin-bottom: 14px;
}
.product-line:hover{ 
  box-shadow: 0 10px 24px rgba(0,0,0,.09);
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--text), transparent 80%);
}
.product-line:last-child{ margin-bottom: 0; }

/* Image */
.product-line__img{
  width: 160px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: #f3f3f3;
  border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

/* Content */
.product-line__main{ align-self: center; }
.product-line__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.product-line__name{
  margin: 0;
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--commontext);
}
.product-line__dep{
  font-size: .9rem;
  padding: 2px 8px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--accent), white 86%);
  color: color-mix(in oklab, var(--accent), black 20%);
}
.product-line__desc{
  margin: .4rem 0 0;
  line-height: 1.5;
  color: var(--commontext);
}

/* CTA */
.product-line__cta{
  margin-top: 10px;
  min-width: 160px;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .product-line{
    grid-template-columns: 110px 1fr;
    gap: 12px 16px;
    padding: 12px;
    border-radius: 12px;
  }
  .product-line__img{ width: 110px; border-radius: 10px; }
  .product-line__name{ font-size: 1.05rem; }
}
@media (max-width: 560px){
  .product-line{ grid-template-columns: 96px 1fr; }
  .product-line__img{ width: 96px; }
  .product-line__cta{ width: 100%; }
}


/* === Products: reveal from left (card) === */
.product-reveal{
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .45s ease, transform .55s ease;
  will-change: transform, opacity;
}
.product-reveal.is-visible{
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .product-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* === Products group intro text === */
.product-group__intro{
  margin: 6px 0 12px;
  color: color-mix(in oklab, var(--text), transparent 25%);
  font-size: .98rem;
  line-height: 1.55;
}


/* === Products: replace title line with image separator === */
.product-group__title::after{ content: none !important; background: none !important; width: 0 !important; height: 0 !important; }

    /* v26.1 — Commission modal */
    .modal.hidden{display:none;}
    .modal{position:fixed; inset:0; z-index:10000;}
    .modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.6);}
    .modal__dialog{position:relative; margin:6vh auto; background:#fff; border-radius:14px; max-width: min(1000px, 92vw); box-shadow:0 20px 70px rgba(0,0,0,.35); overflow:hidden;}
    .modal__close{position:absolute; top:6px; right:10px; font-size:28px; line-height:1; background:transparent; border:0; cursor:pointer; color:#333; padding:6px 10px;}
    .modal__content{padding:20px;}
    .cm-grid{display:grid; grid-template-columns: 1fr 1.1fr; gap:18px; align-items:start;}
    .cm-media{margin:0;}
    .cm-media img{max-width:100%; height:auto; display:block; border-radius:10px; background:#f6f6f6;}
    .cm-summary{margin-bottom:12px;}
    .cm-name{margin:.2rem 0 .2rem; font-size:1.2rem;}
    .cm-depiction{margin:0 0 .3rem;}
    .cm-desc{margin:0;}
    .cm-form .form__row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
    .cm-form label{display:block;}
    .cm-form input[type="text"],
    .cm-form input[type="tel"],
    .cm-form input[type="email"],
    .cm-form textarea{width:100%;}
    .cm-form .privacy{display:flex; align-items:flex-start; gap:10px; margin:10px 0;}
    .cm-form .privacy input{margin-top:4px;}
    @media (max-width: 900px){
      .cm-grid{grid-template-columns: 1fr; gap:16px;}
      .modal__dialog{margin:3vh auto; max-width:94vw;}
      .cm-form .form__row{grid-template-columns: 1fr;}
    }

/* Fix: avoid overflow on replaced elements to silence View Transitions warning */
img, video, canvas{
  overflow: clip;
  overflow: hidden; /* fallback */
}


/* === Products: CTA after list === */
.products-cta{
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.products-cta__lead{
  margin: 0;
  font-size: .95rem;
  color: color-mix(in oklab, var(--commontext), transparent 30%);
}
.products-cta .btn{ min-width: 200px; }


/* === Gallery: reveal from bottom === */
.gallery-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .45s ease, transform .55s ease;
  will-change: transform, opacity;
}
.gallery-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .gallery-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.gallery-title{
	font-family: Cinzel;
	color: var(--accent);
}

.gallery-commontext{
	color: var(--commontext);
}


/* === Commission modal footer note === */
.commission-modal__footer{
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px 10px 2px;
  margin-top: -6px;
}
.commission-modal__footnote{
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--commontext, #333), transparent 40%);
}
@media (max-width: 900px){
  .commission-modal__footer{ padding-top: 6px; }
  .commission-modal__footnote{ font-size: .9rem; }
}


/* === Commission modal: constrain image height on desktop to avoid internal scroll === */
@media (min-width: 901px){
  .commission-modal__left{
    max-height: 72vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .commission-modal__img{
    max-height: 72vh;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .commission-modal__dialog{
    align-items: center; /* vertically center grid items within available height */
  }
}


/* === Commission modal: image caption === */
.commission-modal__caption{
  margin: 6px 0 0;
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
  color: color-mix(in oklab, var(--commontext, #333), transparent 42%);
}
@media (min-width: 901px){
  .commission-modal__left{
    flex-direction: column;
    gap: 8px;
  }
  .commission-modal__img{
    max-height: calc(72vh - 48px); /* leave room for caption */
  }
}


/* === v31.1: Modal image caption below image on mobile === */
@media (max-width: 900px){
  .commission-modal__left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .commission-modal__img{
    max-width: 100%;
    height: auto;
  }
  .commission-modal__caption{
    margin-top: 6px;
    text-align: center;
    width: 100%;
  }
}


/* v31.3: Modal footer spacing fix */
.commission-modal__footer{ margin-top: 12px !important; }


/* === Global Loading Overlay === */
#global-loading{ position:fixed; inset:0; z-index:9999; display:block; }
#global-loading[hidden]{ display:none; }
#global-loading .gl__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
#global-loading .gl__spinner{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:120px; height:120px; border-radius:16px; }
html.is-loading{ overflow:hidden; }


/* === Global Loading Overlay (CSS spinner, no background) === */
#global-loading{ position:fixed; inset:0; z-index:9999; display:block; }
#global-loading[hidden]{ display:none; }
#global-loading .gl__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
#global-loading .gl__spinner{ --gl-size: 96px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
html.is-loading{ overflow:hidden; }
.spinner.spinner--ring { position: relative; width: var(--gl-size); height: var(--gl-size); }
.spinner.spinner--ring div {
  animation: spinner-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: calc(var(--gl-size) / 2) calc(var(--gl-size) / 2);
}
.spinner.spinner--ring div:after {
  content: " "; display: block; position: absolute;
  width: calc(var(--gl-size) * 0.12); height: calc(var(--gl-size) * 0.12);
  border-radius: 50%;
  background: #fff;
  margin: calc(var(--gl-size) * -0.06) 0 0 calc(var(--gl-size) * -0.06);
}
.spinner.spinner--ring div:nth-child(1) { animation-delay: -0.036s; }
.spinner.spinner--ring div:nth-child(1):after { top: calc(var(--gl-size) * 0.78); left: calc(var(--gl-size) * 0.78); }
.spinner.spinner--ring div:nth-child(2) { animation-delay: -0.072s; }
.spinner.spinner--ring div:nth-child(2):after { top: calc(var(--gl-size) * 0.86); left: calc(var(--gl-size) * 0.64); }
.spinner.spinner--ring div:nth-child(3) { animation-delay: -0.108s; }
.spinner.spinner--ring div:nth-child(3):after { top: calc(var(--gl-size) * 0.90); left: calc(var(--gl-size) * 0.50); }
.spinner.spinner--ring div:nth-child(4) { animation-delay: -0.144s; }
.spinner.spinner--ring div:nth-child(4):after { top: calc(var(--gl-size) * 0.86); left: calc(var(--gl-size) * 0.36); }
.spinner.spinner--ring div:nth-child(5) { animation-delay: -0.180s; }
.spinner.spinner--ring div:nth-child(5):after { top: calc(var(--gl-size) * 0.78); left: calc(var(--gl-size) * 0.22); }
.spinner.spinner--ring div:nth-child(6) { animation-delay: -0.216s; }
.spinner.spinner--ring div:nth-child(6):after { top: calc(var(--gl-size) * 0.64); left: calc(var(--gl-size) * 0.14); }
.spinner.spinner--ring div:nth-child(7) { animation-delay: -0.252s; }
.spinner.spinner--ring div:nth-child(7):after { top: calc(var(--gl-size) * 0.50); left: calc(var(--gl-size) * 0.10); }
.spinner.spinner--ring div:nth-child(8) { animation-delay: -0.288s; }
.spinner.spinner--ring div:nth-child(8):after { top: calc(var(--gl-size) * 0.36); left: calc(var(--gl-size) * 0.14); }
@keyframes spinner-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (min-width: 1024px){
  #global-loading .gl__spinner{ --gl-size: 112px; }
}