/* Lightcutdesign — vetrina statica.
   Palette e proporzioni riprese dal vecchio negozio; il CSS è scritto da zero. */

@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --testo: #49220d;
  --sfondo: #ffffff;
  --crema: #f5f4f0;
  --legno: #b0998a;
  --legno-scuro: #aa8f80;
  --testata: #303030;
  --testata-testo: #faf5ef;
  --linea: rgba(73, 34, 13, 0.15);
  --raggio-media: 10px;
  --raggio-bottone: 4px;
  --larghezza: 1600px;
  --margine: clamp(1.5rem, 4vw, 5rem);
  --titoli: "Raleway", system-ui, sans-serif;
  --corpo: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--corpo); font-size: 1rem; line-height: 1.6; letter-spacing: 0.04em; color: var(--testo); background: var(--sfondo); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titoli); font-weight: 400; line-height: 1.25; letter-spacing: 0.06em; margin: 0 0 1rem; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--sfondo); padding: .5rem 1rem; z-index: 10; }

.pagina { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }
.pagina--stretta { max-width: 72rem; }
.sezione { padding-top: 3rem; padding-bottom: 3rem; }
.sezione__titolo { font-size: 1.6rem; margin-bottom: 2rem; }
.titolo-pagina { font-size: clamp(2rem, 4vw, 3rem); }
.sopratitolo { text-transform: uppercase; font-size: .8rem; letter-spacing: .15em; opacity: .75; margin: 0 0 .5rem; }
.centrato { text-align: center; }
.conteggio { font-size: .9rem; opacity: .75; }
.intro { max-width: 60rem; margin-bottom: 1.5rem; }

/* testata */
.testata { background: var(--testata); color: var(--testata-testo); position: sticky; top: 0; z-index: 5; }
.testata__riga { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.testata__logo img { width: 50px; height: auto; }
.menu { display: flex; gap: 1.75rem; flex: 1; }
.menu a { text-decoration: none; font-size: .95rem; padding: .25rem 0; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: currentColor; }
.menu-interruttore, .menu-icona { display: none; }
.social { display: flex; gap: 1rem; align-items: center; }
.social a { display: inline-flex; opacity: .9; }
.social a:hover { opacity: 1; }
.social svg { fill: currentColor; }

@media (max-width: 749px) {
  .testata__riga { flex-wrap: wrap; gap: 1rem; }
  .testata__logo { order: 1; flex: 1; }
  .menu-icona { display: block; order: 2; width: 28px; height: 20px; position: relative; cursor: pointer; }
  .menu-icona span, .menu-icona span::before, .menu-icona span::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
  .menu-icona span { top: 9px; } .menu-icona span::before { top: -8px; } .menu-icona span::after { top: 8px; }
  .menu { order: 3; flex-basis: 100%; flex-direction: column; gap: 0; display: none; padding-bottom: 1rem; }
  .menu a { padding: .75rem 0; border-bottom: 1px solid rgba(250, 245, 239, .15); }
  .menu-interruttore:checked ~ .menu { display: flex; }
  .social--testata { display: none; }
}

/* bottoni */
.bottone { display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; padding: .75rem 2rem; border-radius: var(--raggio-bottone); border: 2px solid var(--testo); background: var(--testo); color: var(--sfondo); text-decoration: none; font-size: 1rem; letter-spacing: .1em; transition: box-shadow .15s; }
.bottone:hover { box-shadow: 0 0 0 1px var(--testo); }
.bottone--secondario { background: transparent; color: var(--testo); }
.bottone--chiaro { background: var(--sfondo); border-color: var(--sfondo); color: var(--testo); }

/* griglia prodotti */
.griglia { display: grid; gap: 2.5rem 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 750px) { .griglia { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.5rem; } }
@media (min-width: 990px) { .griglia { grid-template-columns: repeat(4, 1fr); } }
.griglia--collezioni { grid-template-columns: 1fr; }
@media (min-width: 750px) { .griglia--collezioni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 990px) { .griglia--collezioni { grid-template-columns: repeat(3, 1fr); } }

.scheda__link { text-decoration: none; display: block; }
.scheda__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--raggio-media); background: var(--crema); }
.scheda__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform .6s; }
.scheda__seconda { opacity: 0; }
@media (hover: hover) {
  .scheda__link:hover .scheda__seconda { opacity: 1; }
  .scheda__link:hover .scheda__media img { transform: scale(1.03); }
}
.scheda__titolo { font-family: var(--corpo); font-size: 1rem; letter-spacing: .06em; margin: .9rem 0 .2rem; }
.scheda__link:hover .scheda__titolo { text-decoration: underline; text-underline-offset: .3rem; }
.scheda__prezzo { margin: 0; font-size: .95rem; }
.scheda--collezione .scheda__titolo { font-family: var(--titoli); font-size: 1.3rem; }
.etichetta { position: absolute; left: .75rem; bottom: .75rem; background: var(--legno-scuro); color: #fff; font-size: .75rem; padding: .2rem .8rem; border-radius: 40px; }
.etichetta--in-linea { position: static; vertical-align: middle; margin-left: .5rem; }

/* prodotto */
.prodotto { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2rem; }
@media (min-width: 990px) { .prodotto { grid-template-columns: 55fr 45fr; gap: 4rem; } .prodotto__info { position: sticky; top: 7rem; align-self: start; } }
.galleria__principale { border-radius: var(--raggio-media); overflow: hidden; background: var(--crema); }
.galleria__grande { width: 100%; }
.galleria__miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .6rem; margin-top: .8rem; }
.galleria__miniature button { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--crema); aspect-ratio: 1; width: 100%; }
.galleria__miniature button[aria-current="true"] { border-color: var(--testo); }
.galleria__miniature img { width: 100%; height: 100%; object-fit: cover; }
.prodotto__collezione { text-transform: uppercase; font-size: .8rem; letter-spacing: .15em; margin: 0 0 .5rem; opacity: .75; }
.prodotto__collezione a { text-decoration: none; }
.prodotto__titolo { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.prodotto__prezzo { font-size: 1.2rem; margin: 0 0 1.5rem; }
.prodotto__info .bottone { width: 100%; margin-bottom: .75rem; }
.prodotto__descrizione { margin-top: 1.5rem; }
.opzione { margin-bottom: 1.25rem; }
.opzione__nome { font-size: .85rem; margin: 0 0 .4rem; }
.opzione__valori { display: flex; flex-wrap: wrap; gap: .5rem; }
.opzione__valori li { border: 1px solid var(--linea); border-radius: 40px; padding: .35rem 1.1rem; font-size: .9rem; }
.varianti { border-collapse: collapse; margin-bottom: 1.5rem; width: 100%; font-size: .95rem; }
.varianti td { padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.varianti td:last-child { text-align: right; }
.varianti--esaurita { opacity: .55; }

/* testo libero (descrizioni, pagine, articoli) */
.testo { max-width: 65ch; }
.testo p { margin: 0 0 1rem; }
.testo img { border-radius: var(--raggio-media); margin: 1rem 0; }
.testo a { text-underline-offset: .2rem; }
.contatti { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* home */
.banner { position: relative; min-height: clamp(26rem, 70vh, 48rem); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.banner__testo { position: relative; z-index: 1; padding: 2rem var(--margine); max-width: 60rem; }
.banner__testo h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.fascia { background: var(--legno); color: #f5f5f5; text-align: center; }
.fascia .testo { margin: 0 auto; max-width: 50rem; font-size: 1.1rem; }
.fascia--crema { background: var(--crema); color: var(--testo); }
.sezione__piede { text-align: center; margin-top: 2.5rem; }
.articolo-breve { padding: 1.5rem 0; border-bottom: 1px solid var(--linea); }
.articolo-breve h2 { font-size: 1.5rem; }
.articolo-breve h2 a { text-decoration: none; }

/* piede */
.piede { background: var(--testata); color: var(--testata-testo); margin-top: 4rem; padding: 3rem 0 1.5rem; font-size: .95rem; }
.piede__griglia { display: grid; gap: 2rem; }
@media (min-width: 750px) { .piede__griglia { grid-template-columns: 2fr 1fr 1fr; } }
.piede p { margin: 0 0 .5rem; }
.piede__nome { font-family: var(--titoli); font-size: 1.4rem; }
.piede__titolo { font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; opacity: .7; }
.piede nav a { display: block; text-decoration: none; padding: .15rem 0; }
.piede nav a:hover { text-decoration: underline; }
.piede__piccolo { font-size: .8rem; opacity: .7; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* home: sezioni */
.contatti--centro { justify-content: center; }
.bottone--su-foto { color: #fff; border-color: #fff; }
.banner--basso { min-height: clamp(20rem, 50vh, 32rem); }
.racconto { display: grid; gap: 2rem; align-items: center; }
.racconto__media img { border-radius: var(--raggio-media); width: 100%; }
@media (min-width: 990px) {
  .racconto { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .racconto--inverso .racconto__media { order: 2; }
}
.griglia--collage { grid-template-columns: 1fr; }
@media (min-width: 750px) { .griglia--collage { grid-template-columns: 2fr 1fr; align-items: start; } }
.griglia--foto { grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 750px) { .griglia--foto { grid-template-columns: 1fr 1fr; } }