/* =========================================================
   S.E.M.N.S. Creations — stylesheet
   Palette: legno, beige, panna, marrone caldo + accento terracotta (filo)
   ========================================================= */

:root {
  /* Palette base */
  --cream:        #F7F1E6;
  --cream-deep:   #EFE4D1;
  --beige:        #E3D3B8;
  --beige-deep:   #D4BE97;
  --wood-light:   #C69A6D;
  --wood:         #A9744E;
  --wood-deep:    #7C4F32;
  --brown-dark:   #4A3324;
  --text-main:    #3D2B1F;
  --text-soft:    #6B5644;
  --white-soft:   #FFFDF9;

  /* Accenti "da cucito" — restano in famiglia calda/naturale */
  --thread:       #B5563C;   /* terracotta — cuciture, icone, dettagli */
  --thread-soft:  #E7C4B4;
  --status-ok:    #6F7F4A;   /* oliva — disponibile */
  --status-order: #B8862F;   /* ocra — su ordinazione */
  --status-off:   #8C7B6D;   /* tortora — esaurito */
  --postit:       #F0DDA1;   /* giallo carta invecchiata — bigliettino "novità" */

  --shadow-soft:  0 10px 30px rgba(74, 51, 36, 0.12);
  --shadow-card:  0 6px 18px rgba(74, 51, 36, 0.10);

  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Caveat', cursive;

  --radius: 14px;
  --header-h: 78px;
}

* { box-sizing: border-box; }

/* Garantisce che l'attributo hidden vinca sempre, anche su elementi
   la cui classe imposta un display esplicito (es. .btn, .admin-modal-overlay) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background:
    repeating-linear-gradient(45deg, rgba(169,116,78,0.025) 0 2px, transparent 2px 14px),
    var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--brown-dark);
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.2;
}

p { margin: 0 0 1em; color: var(--text-soft); }

a { color: var(--wood-deep); text-decoration: none; }
a:hover { color: var(--brown-dark); }

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

.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 100px 32px;
  position: relative;
}
/* Cornice leggera "a cucitura": la stessa linea a punto irregolare dello
   .stitch-divider fra le sezioni, qui pero' verticale e molto piu' tenue
   (resta un dettaglio di sfondo, non un elemento a cui guardare). Corre
   lungo i due margini di ogni sezione, sempre dentro il padding cosi' da
   non toccare mai testo o immagini. */
.section-inner::before,
.section-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='46'%3E%3Cpath d='M12,0 C4,5 3,10 10,14 C15,17 17,19 13,23 C7,28 4,32 11,37 C15,40 16,42 12,46' stroke='%23B5563C' stroke-width='2.1' fill='none' stroke-linecap='round' stroke-dasharray='0.5 5 2.5 6 1 5.5'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 12px 46px;
  opacity: 0.2;
  pointer-events: none;
}
.section-inner::before { left: 4px; }
.section-inner::after { right: 4px; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--thread);
  font-weight: 500;
  margin-bottom: 0.9em;
}
.section-eyebrow .icon { width: 18px; height: 18px; }

.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.4em;
}

.section-lead {
  font-size: 1.1rem;
  max-width: 640px;
  color: var(--text-soft);
  margin-bottom: 2.5em;
}

.subsection-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  margin-top: 2.2em;
  color: var(--wood-deep);
  border-bottom: 1px solid var(--beige-deep);
  padding-bottom: 0.5em;
}
.icon-sub { width: 22px; height: 22px; color: var(--thread); }

/* variante "metro da sarta": tacche invece di una linea piena */
.subsection-title-ruler {
  border-bottom: none;
  padding-bottom: 14px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--wood) 0px, var(--wood) 1.5px,
    transparent 1.5px 8px
  );
  background-position: left bottom;
  background-size: 100% 9px;
  background-repeat: repeat-x;
}

/* ---------- Stitch divider between sections (punto a mano, irregolare) ---------- */
.stitch-divider {
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22'%3E%3Cpath d='M0,12 C5,4 10,3 14,10 C17,15 19,17 23,13 C28,7 32,4 37,11 C40,15 42,16 46,12' stroke='%23B5563C' stroke-width='2.1' fill='none' stroke-linecap='round' stroke-dasharray='0.5 5 2.5 6 1 5.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.55;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
}
.btn-icon { width: 16px; height: 16px; }

.btn-primary {
  background: var(--wood-deep);
  color: var(--white-soft) !important;
}
.btn-primary:hover { background: var(--brown-dark); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  border-color: var(--wood-deep);
  color: var(--wood-deep) !important;
}
.btn-outline:hover { background: var(--wood-deep); color: var(--white-soft) !important; }

.btn-small {
  padding: 9px 22px;
  font-size: 0.85rem;
  background: var(--beige-deep);
  color: var(--brown-dark) !important;
}
.btn-small:hover { background: var(--wood-light); color: var(--white-soft) !important; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(247, 241, 230, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige-deep);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon {
  height: 34px;
  width: auto;
  display: block;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-mark {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brown-dark);
  letter-spacing: 0.03em;
}
.logo-sub {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wood);
}

.main-nav {
  display: flex;
  gap: 34px;
}
.main-nav a {
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--thread);
  transition: width 0.25s ease;
}
.main-nav a:hover::after { width: 100%; }
/* Voce di menu della sezione attualmente a schermo: una piccola cucitura
   a punto, sempre visibile invece del filo pieno dell'hover. */
.main-nav a.is-active { color: var(--wood-deep); }
.main-nav a.is-active::after {
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--thread) 0 3px, transparent 3px 6px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.lang-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.lang-btn[aria-pressed="true"] {
  color: var(--white-soft);
  background: var(--wood-deep);
}
.lang-sep { color: var(--beige-deep); }

/* Accesso rapido all'area riservata: discreto, un'icona muta senza testo,
   così non attira l'attenzione di chi visita il sito ma resta a un click
   da qualunque pagina (il link per esteso rimane anche in fondo al footer). */
.header-admin-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--beige-deep);
  border-radius: 50%;
  flex-shrink: 0;
}
.header-admin-link .icon { width: 16px; height: 16px; }
.header-admin-link:hover { color: var(--wood); background: var(--cream); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--brown-dark);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 70px 32px 90px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(198, 154, 109, 0.30), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(212, 190, 151, 0.38), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(181, 86, 60, 0.05), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  z-index: -1;
}
.hero-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  justify-content: center;
  width: 100%;
}
.hero-logo {
  width: min(320px, 78%);
  height: auto;
  margin: 0 auto 0.3em;
  display: block;
}
.hero-tagline {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--wood-deep);
  margin-bottom: 2em;
}
.hero-text {
  text-align: left;
  background: var(--white-soft);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 2.4em;
  border-top: 3px dashed var(--thread-soft);
}
.hero-text h2 { font-size: 1.5rem; }
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-photo-slot {
  max-width: 780px;
  margin: 60px auto 0;
}

/* ---------- Photo placeholders ---------- */
[data-photo-placeholder] {
  background: repeating-linear-gradient(
    135deg,
    var(--beige) 0px, var(--beige) 14px,
    var(--cream-deep) 14px, var(--cream-deep) 28px
  );
  border: 2px dashed var(--thread-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-photo-placeholder] img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Foto vere al posto di un segnaposto: stesso ingombro/angoli arrotondati
   della sezione (aspect-ratio definito dalla classe .xxx-slot), ma senza
   il bordo tratteggiato e lo sfondo a righe, che restano solo per gli
   spazi ancora vuoti. */
.photo-filled {
  overflow: hidden;
  border-radius: var(--radius);
  border: none;
  background: none;
}
.photo-slot-small.photo-filled { border-radius: 10px; }
.photo-filled img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo-slot.photo-filled img { object-position: center 25%; }
.photo-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  color: var(--wood-deep);
}
.photo-icon {
  width: 34px; height: 34px;
  color: var(--wood);
  fill: currentColor;
  stroke: none;
}
.photo-frame span {
  font-size: 0.82rem;
  max-width: 220px;
  color: var(--text-soft);
}

.hero-photo-slot .photo-frame { padding: 60px 30px; }
.hero-photo-slot { aspect-ratio: 16 / 7; }

.photo-slot-small {
  aspect-ratio: 1;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px dashed var(--thread-soft);
  background: repeating-linear-gradient(135deg, var(--beige) 0px, var(--beige) 12px, var(--cream-deep) 12px, var(--cream-deep) 24px);
}
.photo-icon-sm { width: 24px; height: 24px; color: var(--wood); fill: currentColor; stroke: none; }

/* ---------- About ---------- */
.about { background: var(--white-soft); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}
/* La foto va nella colonna di destra e il testo in quella di sinistra,
   cosi' il paragrafo di "Chi sono" inizia allo stesso margine sinistro
   dei paragrafi (a larghezza piena) di "Il progetto" e "Alcune cose che
   amo" qui sotto, invece di restare rientrato accanto alla foto. */
.about-grid .about-photo-slot { grid-column: 2; grid-row: 1; }
.about-grid .about-text { grid-column: 1; grid-row: 1; }
.about-photo-slot { aspect-ratio: 15/14; } /* altezza ridotta del 30% rispetto al precedente 3/4, a parità di larghezza */
.about-text p { font-size: 1.02rem; }
/* "Il progetto" e "Alcune cose che amo" non hanno la foto accanto,
   quindi occupano tutta la larghezza della sezione (fino al bordo
   destro della foto di "Chi sono" qui sopra), invece di fermarsi a
   una misura fissa piu' stretta. */
.about-text-wide { max-width: 100%; }

.about-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 3em;
  /* Occupa tutta la larghezza della sezione (come il testo di "Alcune
     cose che amo" qui sopra) invece di restare bloccata a 700px. */
  max-width: 100%;
}

/* Testo introduttivo di "Le mie creazioni" (sezione Galleria): stesso
   trattamento di "Il progetto"/"Alcune cose che amo", con un margine
   sotto per staccarlo bene dalla griglia di foto che segue. */
#creazioniText { margin-bottom: 2.5em; }

/* ---------- Shop ---------- */
.shop { background: var(--cream); }

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 1.2em;
  padding: 20px 22px;
  background: var(--white-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1.5px solid var(--beige-deep);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--wood);
  flex: 1 1 220px;
  min-width: 200px;
}
.filter-search .icon { width: 17px; height: 17px; }
.filter-search input {
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-main);
  width: 100%;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-pill {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--wood); color: var(--wood-deep); }
.filter-pill.active {
  background: var(--wood-deep);
  border-color: var(--wood-deep);
  color: var(--white-soft);
}
.filter-pill.technique-pill.active { background: var(--thread); border-color: var(--thread); }

/* Filtro "Cresce con te": a differenza di categoria/tecnica è un
   interruttore singolo (sì/no), non un gruppo di valori — e resta visibile
   anche sotto i 768px (niente tendina di riserva: un solo pulsante ci sta
   comodo anche su schermi stretti, vedi .filter-group più sopra). */
.filter-group-grow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Etichetta "Cresce con te" sulla scheda prodotto: un chip inline (non un
   bigliettino sulla foto) per non affollare gli angoli già occupati da
   stato/novità/cuoricino/contatore foto. */
.grow-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  background: var(--thread-soft);
  color: var(--wood-deep);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  margin: 0 0 0.6em;
}
.grow-chip .icon { width: 13px; height: 13px; flex-shrink: 0; }

/* Versione a tendina dei filtri, mostrata al posto dei pulsanti sotto i
   768px (vedi la media query più in basso) — più comoda da toccare su
   schermi stretti quando le categorie/tecniche sono tante. */
.filter-select-group {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-main);
  flex: 1 1 160px;
}

.filter-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 1.6em;
}

.filter-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.filter-sort select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--beige-deep);
  background: var(--white-soft);
  color: var(--text-main);
}

.filter-count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.filter-count-icon {
  width: 15px; height: 15px;
  color: var(--thread);
  transform-origin: 70% 30%;
}
@keyframes stitchPoke {
  0%   { transform: translateX(-2px) rotate(-18deg); opacity: 0.5; }
  45%  { transform: translateX(2px) rotate(10deg); opacity: 1; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.filter-count-icon.stitching { animation: stitchPoke 0.45s ease; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 30px;
}
.load-more-row { display: flex; justify-content: center; margin-top: 36px; }
.product-card {
  position: relative;
  background: var(--white-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1.5px dashed var(--thread-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover { border-color: var(--thread); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.product-card.is-soldout { opacity: 0.72; }

.product-photo-slot {
  aspect-ratio: 4/3;
  border-radius: 0;
  border: none;
  border-bottom: 2px dashed var(--thread-soft);
  position: relative;
}
/* angolo di stoffa ripiegato, come un campione di tessuto */
.product-photo-slot::after {
  content: "";
  position: absolute;
  right: 0; bottom: 2px;
  width: 30px; height: 30px;
  background: linear-gradient(-45deg, var(--white-soft) 50%, var(--cream-deep) 51%, var(--beige) 51%);
  box-shadow: -3px -2px 6px rgba(74, 51, 36, 0.18);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: 1;
}
/* Vetrinetta foto prodotto: la prima foto riempie lo spazio, con frecce
   per scorrere le altre (se il prodotto ne ha più di una) e un click che
   apre la lightbox per vederla ingrandita. */
.product-photo-viewer {
  position: absolute;
  inset: 0;
  cursor: zoom-in;
}
.product-photo-viewer:focus-visible { outline: 2px solid var(--thread); outline-offset: -2px; }
.product-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.82);
  color: var(--text-main);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}
.product-photo-nav svg { width: 15px; height: 15px; }
.product-photo-nav.prev { left: 9px; }
.product-photo-nav.next { right: 9px; }
.product-photo-nav:hover { background: var(--thread); color: var(--white-soft); }
.product-photo-count {
  position: absolute;
  bottom: 9px;
  right: 11px;
  background: rgba(61, 43, 31, 0.68);
  color: var(--white-soft);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 2;
}

.status-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--white-soft);
  z-index: 2;
}
.status-available   { background: var(--status-ok); }
.status-madeToOrder  { background: var(--status-order); }
.status-soldOut      { background: var(--status-off); }

/* Bigliettino "novità": un post-it scritto a mano, leggermente storto e
   con un pezzetto di nastro in cima, per gli articoli più recenti. */
.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: var(--postit);
  color: var(--brown-dark);
  font-family: var(--font-accent);
  font-size: 1.2rem;
  line-height: 1;
  padding: 7px 13px 8px;
  border-radius: 2px 8px 4px 9px;
  box-shadow: var(--shadow-card);
  transform: rotate(-6deg);
}
.new-badge::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 28px;
  height: 13px;
  background: rgba(255, 253, 249, 0.6);
  border-radius: 1px;
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 1px 2px rgba(74, 51, 36, 0.15);
}

.product-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.product-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.5em;
}
.product-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wood);
  font-weight: 600;
  margin: 0;
}
.product-code {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.product-body h3 { font-size: 1.35rem; margin-bottom: 0.3em; }
.product-desc { flex: 1; font-size: 0.95rem; }
.product-material {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 0 0 1em;
}
.product-material strong { color: var(--wood); font-weight: 600; }
.product-sizes {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.product-sizes li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--beige-deep);
}
.product-price {
  font-family: var(--font-head);
  font-style: italic;
  color: var(--wood-deep);
  font-size: 1.1rem;
  margin-bottom: 1em;
}
.product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* Pulsante "Condividi": solo icona, rotondo, per pesare meno del pulsante
   "Aggiungi alla richiesta" accanto a cui sta. */
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--beige-deep);
  background: transparent;
  color: var(--wood);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.share-icon-btn svg { width: 16px; height: 16px; }
.share-icon-btn:hover { background: var(--wood-deep); border-color: var(--wood-deep); color: var(--white-soft); }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
}
.empty-icon { width: 34px; height: 34px; color: var(--wood-light); margin-bottom: 0.6em; }

.section-note {
  margin-top: 3em;
  padding: 20px 26px;
  background: var(--beige);
  border-radius: var(--radius);
  color: var(--text-main);
  font-size: 0.95rem;
  /* Occupa tutta la larghezza della sezione invece di fermarsi a 760px. */
  max-width: 100%;
}

/* ---------- Gallery ---------- */
.gallery { background: var(--white-soft); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 18px;
}
.gallery-slot { font-size: 0.8rem; }
.gallery-slot-lg { grid-column: span 2; grid-row: span 2; }
.gallery-slot img { cursor: zoom-in; }
.gallery-slot img:focus-visible { outline: 2px solid var(--thread); outline-offset: -2px; }

/* ---------- Lightbox (foto ingrandita: galleria + shop) ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(61, 43, 31, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 90px;
}
.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  background: var(--cream);
}
.lightbox-counter {
  margin-top: 16px;
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.lightbox-close,
.lightbox-nav {
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.14);
  color: var(--white-soft);
  border: 1.5px solid rgba(255, 253, 249, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 301;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close svg,
.lightbox-nav svg { width: 18px; height: 18px; }
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--thread); border-color: var(--thread); }
.lightbox-close { top: 20px; right: 24px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

/* ---------- Contact ---------- */
.contact { background: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
}
.contact-info { padding-top: 6px; }
.contact-item {
  margin-bottom: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--wood);
  font-weight: 600;
}
.contact-value {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--brown-dark) !important;
}
.contact-note { font-size: 0.92rem; margin-top: 1.5em; }

.contact-form {
  background: var(--white-soft);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  border-top: 3px dashed var(--thread-soft);
}
.contact-form h3 { font-size: 1.4rem; margin-bottom: 0.5em; }
.contact-form label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 5px;
  margin-top: 10px;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--beige-deep);
  background: var(--cream);
  color: var(--text-main);
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--thread);
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.contact-form-field {
  display: flex;
  flex-direction: column;
}
.contact-form .btn { margin-top: 16px; align-self: flex-start; }
.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--wood-deep);
  min-height: 1.2em;
}
/* Campo anti-spam: fuori dallo schermo, mai visibile per le persone. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brown-dark);
  color: var(--cream);
  padding: 56px 32px 34px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.footer-brand .logo-mark { color: var(--white-soft); display: block; font-size: 1.3rem; }
.footer-brand span:last-child { color: var(--wood-light); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a { color: var(--beige); font-size: 0.92rem; }
.footer-links a:hover { color: var(--white-soft); }
.footer-links .footer-instagram-link { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.footer-instagram-link .icon { width: 26px; height: 26px; }
.footer-admin-link {
  font-size: 0.72rem;
  color: var(--wood-light);
  letter-spacing: 0.04em;
}
.footer-admin-link:hover { color: var(--beige); }

/* ---------- Shop: stato di caricamento / errore ---------- */
.shop-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  font-size: 0.98rem;
}
.shop-message-error { color: var(--thread); }

/* Caricamento: un ago che cuce un filo tratteggiato, invece di un
   semplice testo. */
.shop-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
}
.shop-loading .shop-message {
  padding: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--wood);
}
.shop-loading-stitch { width: 150px; height: 30px; overflow: visible; }
.shop-loading-track {
  fill: none;
  stroke: var(--thread-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  animation: shopLoadingThread 0.9s linear infinite;
}
.shop-loading-needle {
  fill: none;
  stroke: var(--wood-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: shopLoadingNeedle 2.4s ease-in-out infinite;
}
@keyframes shopLoadingThread {
  to { stroke-dashoffset: -20; }
}
@keyframes shopLoadingNeedle {
  0%   { transform: translate(4px, 17px) rotate(-10deg); }
  25%  { transform: translate(48px, 8px) rotate(8deg); }
  50%  { transform: translate(92px, 17px) rotate(-10deg); }
  75%  { transform: translate(136px, 8px) rotate(8deg); }
  100% { transform: translate(4px, 17px) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-loading-track, .shop-loading-needle { animation: none; }
}

/* ---------- Pulsante "aggiungi alla richiesta" sulle schede prodotto ---------- */
.wishlist-toggle.is-active {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--white-soft) !important;
}
.wishlist-toggle.is-active:hover { background: var(--brown-dark); border-color: var(--brown-dark); }

/* Cuoricino per la richiesta rapida, sempre visibile sulla foto (sia da
   desktop sia sulla scheda compatta da cellulare): il testo dello Shop
   invita a usarlo su tutti i dispositivi, quindi deve esserci ovunque. In
   basso a sinistra per non sovrapporsi al contatore foto (in basso a
   destra, vedi .product-photo-count) quando l'articolo ha più foto. */
.wishlist-icon-btn {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 249, 0.86);
  color: var(--wood);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.wishlist-icon-btn svg { width: 16px; height: 16px; }
.wishlist-icon-btn.is-active { background: var(--thread); color: var(--white-soft); }
.wishlist-icon-btn:active { transform: scale(0.9); }

/* ---------- Dettaglio prodotto a schermo intero (da cellulare) ----------
   Stessa impostazione della lightbox ma come "foglio" che sale dal basso,
   con tutte le informazioni della scheda (foto con frecce, descrizione,
   taglie/varianti, prezzo, pulsante "Aggiungi alla richiesta"). Lo z-index
   resta sotto la lightbox: toccando la foto qui dentro si apre comunque
   la lightbox per lo zoom, che deve comparire sopra. */
.product-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(61, 43, 31, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.product-detail-panel {
  position: relative;
  background: var(--cream);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}
.product-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 6;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(61, 43, 31, 0.72);
  color: var(--white-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.product-detail-close svg { width: 18px; height: 18px; }
.product-detail-content .product-photo-slot { aspect-ratio: 4/3; }
.product-detail-content .product-body { padding: 20px 22px 28px; }
body.product-detail-open { overflow: hidden; }

/* ---------- Barra flottante "N articoli nella richiesta" ---------- */
.wishlist-bar {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white-soft);
  border: 1.5px solid var(--thread-soft);
  border-radius: 999px;
  padding: 8px 10px 8px 16px;
  box-shadow: var(--shadow-soft);
  font-size: 0.85rem;
  color: var(--text-main);
  max-width: calc(100vw - 40px);
}
.wishlist-bar .icon { width: 16px; height: 16px; color: var(--thread); flex-shrink: 0; }
.wishlist-bar span { white-space: nowrap; }
.wishlist-bar .btn { white-space: nowrap; flex-shrink: 0; }

/* ---------- Riepilogo richiesta nel form contatti ---------- */
.wishlist-summary {
  background: var(--cream);
  border: 1.5px dashed var(--thread-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 6px;
}
.wishlist-title {
  font-weight: 600;
  color: var(--wood-deep);
  font-size: 0.9rem;
  margin: 0 0 0.6em;
}
.wishlist-empty { margin: 0; font-size: 0.88rem; color: var(--text-soft); }
.wishlist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wishlist-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-main);
  background: var(--white-soft);
  border-radius: 8px;
  padding: 8px 12px;
}
.wishlist-remove {
  background: none;
  border: none;
  color: var(--thread);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.wishlist-remove:hover { color: var(--brown-dark); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--thread);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; fill: var(--white-soft); }
.back-to-top:hover { background: var(--brown-dark); }

/* ---------- Rocchetto (indicatore di scorrimento) ---------- */
/* Un rocchetto fisso in alto e un filo verticale che si "svolge" verso il
   basso via via che si scorre la pagina, al posto della solita barra di
   avanzamento. Il tratto già percorso e' pieno (il filo srotolato), quello
   ancora da fare resta un tratteggio leggero (il filo ancora sul rocchetto). */
.scroll-spool {
  position: fixed;
  top: 110px;
  bottom: 110px;
  right: 22px;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 60;
  pointer-events: none;
}
.scroll-spool-icon {
  width: 19px;
  height: 25px;
  color: var(--wood-deep);
  flex-shrink: 0;
  margin-bottom: 6px;
  overflow: visible;
}
.scroll-spool-track {
  position: relative;
  flex: 1;
  width: 3px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(180deg, var(--thread-soft) 0 4px, transparent 4px 9px);
}
.scroll-spool-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-radius: 2px;
  background: var(--thread);
}
/* Sull'ultimo tratto svolto, un piccolo nodo (il capo del filo) */
.scroll-spool-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--thread);
  transform: translateX(-50%);
}
/* Su schermi stretti non c'e' spazio per tenerlo staccato dai contenuti
   senza rischiare sovrapposizioni: resta solo dai tablet in su. */
@media (max-width: 900px) {
  .scroll-spool { display: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .about-photo-slot,
  .about-grid .about-text { grid-column: auto; grid-row: auto; }
  .about-photo-slot { aspect-ratio: 16/9; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
  .gallery-slot-lg { grid-column: span 2; grid-row: span 2; }
  .lightbox-overlay { padding: 60px 56px; }
}

@media (max-width: 768px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--white-soft);
    flex-direction: column;
    padding: 20px 32px 30px;
    gap: 4px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--cream-deep); }
  .menu-toggle { display: flex; }
  .section-inner { padding: 70px 22px; }
  .hero { padding: 50px 20px 60px; }
  .hero-text { padding: 26px 24px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-slot-lg { grid-column: span 2; grid-row: span 1; }
  .about-gallery-strip { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .lightbox-overlay { padding: 50px 14px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .lightbox-prev { left: 8px; width: 38px; height: 38px; }
  .lightbox-next { right: 8px; width: 38px; height: 38px; }
  .product-photo-nav { width: 28px; height: 28px; }
  .shop-filters { flex-direction: column; align-items: stretch; }
  .filter-search { flex: 1 1 auto; min-width: 0; }
  /* Su mobile i pulsanti filtro diventano due tendine, più comode da toccare */
  .filter-group { display: none; }
  .filter-select-group { display: flex; }
  .filter-count-row { flex-direction: column; align-items: stretch; }
  .filter-sort { justify-content: space-between; }
}

/* =========================================================
   Shop da cellulare: griglia compatta a due colonne
   ---------------------------------------------------------
   Sotto i 640px la scheda prodotto mostra solo la foto (quadrata),
   il nome (una riga) e il prezzo, più un cuoricino per la richiesta
   rapida; toccando la scheda si apre il dettaglio a schermo intero
   con tutte le informazioni (vedi .product-detail-* più sopra e
   openProductDetail() in script.js). Da desktop/tablet non cambia
   nulla: qui sotto sono tutte regole scoped a .product-card.
   ========================================================= */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card { cursor: pointer; }
  .product-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .product-card .product-photo-slot { aspect-ratio: 1/1; }
  .product-card .product-photo-nav,
  .product-card .product-photo-count { display: none; }
  .product-card .status-badge { top: 6px; left: 6px; font-size: 0.58rem; padding: 3px 7px; }
  .product-card .new-badge { top: 4px; right: 4px; font-size: 0.85rem; padding: 4px 9px 5px; }
  /* Sulla scheda compatta il contatore foto è nascosto (vedi sopra), quindi
     qui il cuoricino può stare in basso a destra, un filo più piccolo. */
  .wishlist-icon-btn { left: auto; right: 8px; bottom: 8px; width: 30px; height: 30px; }
  .product-card .product-body { padding: 8px 10px 12px; gap: 2px; }
  .product-card .product-meta-row,
  .product-card .product-desc,
  .product-card .product-material,
  .product-card .grow-chip,
  .product-card .product-sizes,
  .product-card .product-actions { display: none; }
  .product-card .product-body h3 {
    font-size: 0.86rem;
    margin: 0 0 0.2em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card .product-price { font-size: 0.85rem; margin-bottom: 0; }
}

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

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; }
  .btn { text-align: center; justify-content: center; }
  .contact-form { padding: 26px 22px; }
  .wishlist-bar { left: 12px; right: 84px; bottom: 12px; max-width: none; }
  .wishlist-bar span { overflow: hidden; text-overflow: ellipsis; }
}