/* ============================================================
   VENDOME — Pagina boutique
   Lomazzi Federico
   Mobile-first. Un solo markup per tutti i device.
   ============================================================ */

.page-stores{
  --vb-nero:       #111111;
  --vb-oro:        #A4630D;
  --vb-blu:        #0B3FA8;
  --vb-blu-chiaro: #EEF3FC;
  --vb-riga:       #E5E3DF;
  --vb-fondo-lato: #F7F6F4;
  --vb-testo:      #2A2A2A;
  --vb-testo-soft: #6E6A66;

  --vb-sp:       clamp(1.25rem, 3vw, 2.25rem);
  --vb-card-gap: clamp(2rem, 5vw, 3.5rem);

  color: var(--vb-testo);
}

.page-stores *{ box-sizing: border-box; }

/* ---------- introduzione ---------- */
.boutique-intro{
  max-width: 68ch;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.boutique-intro p{
  margin: 0 0 .75rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--vb-testo-soft);
  text-transform: none;
}
.boutique-intro strong{ color: var(--vb-testo); font-weight: 600; }

/* ============================================================
   ELENCO E CARD
   ============================================================ */
.boutique-list{
  display: flex;
  flex-direction: column;
  gap: var(--vb-card-gap);
}

.boutique{
  border-top: 1px solid var(--vb-nero);
  padding-top: var(--vb-sp);
}

.boutique__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vb-sp);
}

@media (min-width: 900px){
  .boutique__grid{
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,.95fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

/* ============================================================
   AVVISI
   ============================================================ */

/* banda sopra la card */
.page-stores .avviso{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--vb-sp);
  padding: .875rem 1.125rem;
  background: var(--vb-nero);
  color: #fff;
  font-size: .875rem;
  line-height: 1.5;
}
.page-stores .avviso--chiusura{ background: var(--vb-oro); }
.page-stores .avviso--promo{ background: var(--vb-blu); }

.avviso__tag{
  flex: 0 0 auto;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.avviso__corpo{ flex: 1 1 22ch; }
.avviso__corpo > :first-child{ margin-top: 0; }
.avviso__corpo > :last-child{ margin-bottom: 0; }
.avviso__corpo a{ color: inherit; text-decoration: underline; }

/* avviso che prende il posto degli orari */
.avviso-colonna{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avviso-colonna > :first-child{ margin-top: 0; }
.avviso-colonna > :last-child{ margin-bottom: 0; }

/* --- stile riquadro ferie (usato dal template "Chiusura estiva") --- */
.page-stores .ferie{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem,3vw,2rem) clamp(1rem,2.5vw,1.75rem);
  border: 1px solid var(--vb-blu);
  background: var(--vb-blu-chiaro);
  color: var(--vb-blu);
  height: 100%;
}
.page-stores .ferie__art{
  width: clamp(88px,18vw,124px);
  height: auto;
  margin-bottom: 1rem;
}
.page-stores .ferie__saluto{
  margin: 0 0 1.25rem;
  font-size: clamp(1.0625rem,2vw,1.25rem);
  font-weight: 600;
  letter-spacing: .06em;
}
.page-stores .ferie__eyebrow{
  margin: 0 0 .5rem;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .75;
}
.page-stores .ferie__date{
  margin: 0;
  font-size: clamp(1rem,2vw,1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.page-stores .ferie__nota{
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(11,63,168,.22);
  font-size: .8125rem;
  line-height: 1.55;
}

/* ============================================================
   GALLERIA — scroll-snap, funziona anche senza JS
   ============================================================ */
.galleria{ margin: 0; }

.galleria__pista{
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--vb-fondo-lato);
}
.galleria__pista::-webkit-scrollbar{ display: none; }

.galleria__pista figure{
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
}
.galleria__pista img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-stores .galleria__box{ position: relative; }

.page-stores .galleria__indici{
  display: flex !important;
  gap: 4px;
  margin: .5rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100%;
}

/* Il pulsante e' alto 14px per essere toccabile col dito,
   ma disegna solo un filetto di 2px al centro. */
.page-stores .galleria__indici .galleria__indice{
  flex: 1 1 0 !important;
  display: block !important;
  position: relative;
  width: auto !important;
  height: 14px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
}

/* il filetto vero e proprio */
.page-stores .galleria__indici .galleria__indice::before{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--vb-riga);
  transition: background .2s ease;
}

.page-stores .galleria__indici .galleria__indice:hover::before{
  background: var(--vb-testo-soft);
}
.page-stores .galleria__indici .galleria__indice[data-attivo]::before{
  background: var(--vb-nero);
}

.page-stores .galleria__indici .galleria__indice:focus{ outline: none; }
.page-stores .galleria__indici .galleria__indice:focus-visible::before{
  background: var(--vb-oro);
  height: 4px;
}

/* ---------- social ---------- */
.page-stores .social{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.125rem;
}
.page-stores .social a{
  display: inline-flex;
  color: var(--vb-nero);
  transition: opacity .18s ease;
}
.page-stores .social a:hover{ opacity: .55; }
.page-stores .social svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
.social__wa{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--vb-nero);
  text-decoration: none;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.social__wa:hover{ color: var(--vb-oro); }
.social__wa svg{ width: 18px; height: 18px; }

/* ============================================================
   DATI BOUTIQUE
   ============================================================ */
.page-stores .dati__nome{
  margin: 0 0 1rem;
  font-size: clamp(1.375rem,2.4vw,1.75rem);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--vb-nero);
}
.page-stores .dati__nome::after{
  content: "";
  display: block;
  width: 2.75rem;
  height: 1px;
  margin-top: .875rem;
  background: var(--vb-oro);
}

.dati__indirizzo{
  margin: 0 0 1.25rem;
  font-style: normal;
  color: var(--vb-testo-soft);
  line-height: 1.7;
}

.dati__contatti{
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.dati__contatti li{
  display: flex;
  gap: .625rem;
  padding: .375rem 0;
  border-bottom: 1px solid var(--vb-riga);
}
.dati__contatti li:last-child{ border-bottom: 0; }
.dati__contatti .et{
  flex: 0 0 3.25rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vb-testo-soft);
  padding-top: .25rem;
}
.dati__contatti a{
  color: var(--vb-testo);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dati__contatti a:hover{ color: var(--vb-oro); }

.page-stores .entra{
  display: inline-block;
  padding: .875rem 2.75rem;
  background: var(--vb-nero);
  color: #fff;
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .18s ease;
}
.page-stores .entra:hover,
.page-stores .entra:focus-visible{
  background: var(--vb-oro);
  color: #fff;
}

.dati__nota{
  margin: .875rem 0 0;
  font-size: .8125rem;
  color: var(--vb-testo-soft);
  max-width: 40ch;
}

/* ============================================================
   ORARI
   ============================================================ */
.page-stores .orari{
  background: var(--vb-fondo-lato);
  padding: clamp(1.25rem,2.5vw,1.75rem);
}
.orari__tit{
  margin: 0 0 1.125rem;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vb-testo-soft);
}
.orari__tab{
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.orari__tab th{
  width: 3.5rem;
  padding: .375rem .75rem .375rem 0;
  text-align: left;
  font-weight: 600;
  vertical-align: top;
  white-space: nowrap;
}
.orari__tab td{ padding: .375rem 0; vertical-align: top; }
.orari__tab tr:not(:last-child) th,
.orari__tab tr:not(:last-child) td{ border-bottom: 1px solid var(--vb-riga); }
.orari__tab ul{ margin: 0; padding: 0; list-style: none; }
.orari__chiuso{ color: var(--vb-testo-soft); }

.orari--appuntamento{
  display: flex;
  align-items: center;
  min-height: 8rem;
}
.orari--appuntamento p{
  margin: 0;
  font-size: .9375rem;
  letter-spacing: .04em;
}

/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */
.page-stores a:focus-visible{
  outline: 2px solid var(--vb-oro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .page-stores *,
  .galleria__pista{
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}