/* ==========================================================================
   Si.Ca. Alimentari — lo scaffale unico

   Un solo scaffale per tutti e due i marchi: il pesce lavorato a Riccia e
   gli alimentari dello stesso negozio, uno accanto all'altro. Il filtro in
   testa sceglie il marchio; il colore della scheda dice da quale banco
   arriva senza bisogno di leggerlo.

   Impianto ripreso da design-src/Shop.dc.html.

   Regola dal brief, non negoziabile: i prodotti stanno SEMPRE a griglia,
   2 per riga da telefono e 3-4 da scrivania. Mai uno sotto l'altro, mai in
   un carosello. E nessun prezzo, da nessuna parte.

   Si carica DOPO style.css e brand.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La testata dello scaffale — scorre con la pagina, non ci sta sopra
   -------------------------------------------------------------------------- */
.site-header--shop {
  position: sticky;
  background: rgba(5,11,13,.88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header--shop::before { display: none; }
.site-header--shop .site-header__bar { padding: 14px var(--gut); flex-wrap: wrap; gap: 16px; }

/* i due marchi affiancati: da qui si torna alla soglia */
.shop-brands {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
}
.shop-brands img { height: 44px; width: auto; }

.site-nav--shop {
  flex: 1;
  min-width: 0;
  gap: 18px;
}
.site-nav__on {
  color: #fff;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.site-nav--shop a { color: #9DB4BC; border-bottom-color: transparent; }
.site-nav--shop a:hover { color: #fff; border-bottom-color: transparent; }

.site-header--shop .site-header__cta { flex: none; }

/* i due marchi anche nel piede */
.site-footer__logos { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.site-footer__logos img { width: 88px; height: auto; }

/* --------------------------------------------------------------------------
   2. Il cappello
   -------------------------------------------------------------------------- */
.shop-head {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(50px, 7vw, 110px) var(--gut) clamp(30px, 4vw, 54px);
}
.shop-head__glow {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 22% 40%, rgba(58,122,142,.24), rgba(58,122,142,0) 55%),
    radial-gradient(ellipse at 82% 60%, rgba(179,40,46,.2), rgba(179,40,46,0) 55%);
  animation: deriva 30s ease-in-out infinite;
  pointer-events: none;
}
.shop-head__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}

.shop-head__top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 60px);
  align-items: flex-end;
  justify-content: space-between;
}
.shop-head__left { flex: 1 1 460px; }
.shop-head__flag { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.shop-head__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulsa 4s ease-in-out infinite;
}
.shop-head__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.shop-head__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 100px);
  line-height: .9;
  letter-spacing: -.045em;
  color: #fff;
  max-width: 11ch;
}
.shop-head__lead {
  flex: 0 1 400px;
  font-size: 16.5px;
  line-height: 1.62;
  color: #9DB4BC;
  max-width: 40ch;
}
.shop-head__accent { color: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. I filtri — prima il marchio, poi il reparto di quel marchio
   -------------------------------------------------------------------------- */
.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(28px, 3.4vw, 48px);
}
.shop-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-filters--sub {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.shop-filter {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #B7CBD2;
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: color .4s cubic-bezier(.16,.78,.28,1),
              background-color .4s cubic-bezier(.16,.78,.28,1),
              border-color .4s cubic-bezier(.16,.78,.28,1),
              transform .4s cubic-bezier(.16,.78,.28,1);
}
.shop-filter:hover { color: #fff; border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.shop-filter--on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
}
.shop-filter--on:hover { color: var(--gold-ink); }

/* il sotto-filtro dei reparti è più minuto: non compete col marchio */
.shop-filters--sub .shop-filter { font-size: 10.5px; padding: 9px 16px; letter-spacing: .16em; }

.shop-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6E8790;
}

/* --------------------------------------------------------------------------
   4. La griglia
   -------------------------------------------------------------------------- */
.shop {
  position: relative;
  background: var(--ink);
  padding: 0 var(--gut) clamp(60px, 8vw, 120px);
}
.shop__inner { max-width: var(--maxw); margin: 0 auto; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 320px), 1fr));
  align-items: start;
  gap: 3px;
}

.shop-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--b-muted);
  max-width: 68ch;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   5. La scheda — la fotografia è la scheda, il testo ci sta sopra
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
  overflow: hidden;
  height: clamp(300px, 32vw, 430px);
  background: var(--teal);
  color: #fff;

  /* i due colori del marchio, riscritti dalla scheda alimentari */
  --c-accent: var(--gold);
  --c-chip:   var(--gold);
}
.card--alto { height: clamp(360px, 40vw, 540px); }
.card--alimentari {
  background: #140B08;
  --c-accent: var(--red);
  --c-chip:   var(--rose);
}
.card:hover { color: #fff; }

.card__bg {
  position: absolute;
  inset: 0;
  transition: transform 1.5s cubic-bezier(.16,.78,.28,1), filter 1s ease;
}
.card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(.86) contrast(1.06);
}

/* le schede senza fotografia portano il segno inciso del marchio:
   due sole foto del banco alimentari non bastano per dodici prodotti */
.card__bg--mark {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(179,40,46,.3), rgba(179,40,46,0) 62%),
    #1B0E0A;
}
.card__mark {
  width: 46%;
  max-width: 190px;
  aspect-ratio: 1;
  color: rgba(239,163,166,.34);
  transition: transform 1.5s cubic-bezier(.16,.78,.28,1), color 1s ease;
}

.card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(5,11,13,0) 34%,
              rgba(5,11,13,.44) 64%,
              rgba(5,11,13,.92) 100%);
}
.card--alimentari .card__veil {
  background: linear-gradient(180deg,
              rgba(20,11,8,0) 34%,
              rgba(20,11,8,.46) 64%,
              rgba(20,11,8,.94) 100%);
}

.card__top {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.card__cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-chip);
  border: 1px solid var(--c-chip);
  padding: 5px 9px;
  background: rgba(5,11,13,.45);
}
.card__n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.7);
  text-shadow: 0 2px 12px rgba(0,0,0,.95);
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 2.2vw, 32px);
}
.card__rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-accent);
  margin-bottom: 14px;
}
.card__name {
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.022em;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 4px 26px rgba(0,0,0,.9);
}
.card__note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.76);
  max-width: 34ch;
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}
.card__formats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.card__chip {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 8px;
  border: 1px solid var(--c-chip);
  color: var(--c-chip);
  background: rgba(5,11,13,.35);
}
.card__cta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
}
.card__arrow {
  display: inline-block;
  transition: transform .5s cubic-bezier(.16,.78,.28,1);
}

@media (hover: hover) {
  .card:hover .card__bg { transform: scale(1.07); }
  .card:hover .card__bg img { filter: saturate(1) contrast(1.06) brightness(1.08); }
  .card:hover .card__mark { transform: scale(1.06); color: rgba(239,163,166,.5); }
  .card:hover .card__arrow { transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   6. Il riquadro degli alimentari da completare
   -------------------------------------------------------------------------- */
.shop-panel {
  margin-top: 24px;
  border: 1px dashed rgba(239,163,166,.45);
  background: rgba(179,40,46,.07);
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.shop-panel__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}
.shop-panel__text {
  font-size: 16.5px;
  line-height: 1.6;
  color: #D8C4C0;
  max-width: 62ch;
}
.shop-panel__link {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--red);
  padding-bottom: 6px;
}
.shop-panel__link:hover { color: var(--rose); }

/* --------------------------------------------------------------------------
   7. Come si ordina
   -------------------------------------------------------------------------- */
.shop-how {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  padding: clamp(50px, 7vw, 110px) var(--gut);
}
.shop-how__waves {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  opacity: .3;
  pointer-events: none;
}
.shop-how__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.shop-how__copy { flex: 1 1 400px; }
.shop-how__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.shop-how__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: .94;
  letter-spacing: -.04em;
  margin: 16px 0 20px;
  color: #fff;
  max-width: 13ch;
}
.shop-how__text {
  font-size: 17px;
  line-height: 1.62;
  color: #A8BFC7;
  max-width: 44ch;
  margin-bottom: 10px;
}
.shop-how__text--accent { color: var(--gold); font-weight: 600; margin-bottom: 0; }
.shop-how__actions {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-how__actions .btn { text-align: center; }

/* --------------------------------------------------------------------------
   8. Adattamenti
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header--shop .site-header__bar { gap: 12px; }
  .site-nav--shop { order: 3; width: 100%; flex: 1 1 100%; gap: 16px; }
}

@media (max-width: 640px) {
  .shop-brands img { height: 36px; }
  .shop-count { margin-left: 0; width: 100%; }
  .card__note { display: none; }        /* da telefono conta il nome, non la nota */
  .card__formats { margin-bottom: 12px; }
}

@media (max-width: 420px) {
  .shop-filter { padding: 10px 14px; font-size: 10.5px; letter-spacing: .14em; }
  .card { height: clamp(260px, 58vw, 330px); }
  .card--alto { height: clamp(300px, 68vw, 390px); }
}

/* ----- Puntatori senza hover: comandi da 44 px -------------------------- */
@media (hover: none) {
  .shop-filter { padding: 14px 20px; }
  .shop-panel__link { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; }
  .shop-brands { padding: 4px 0; min-height: 44px; }
}

/* ----- Chi ha chiesto meno movimento ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .shop-head__glow,
  .shop-head__dot,
  .shop-how__waves .wave-strip { animation: none; }
}

/* ----- Il prezzo, quando c'è ------------------------------------------- */
/* Le regole di lavoro del progetto dicono: nessun prezzo in pagina, si
   chiede in chat. Il campo esiste comunque nel pannello, vuoto per tutto il
   banco: se un giorno serve scriverlo su una scheda, questa è la sua forma.
   Finché resta vuoto queste righe non disegnano niente. */
.card__prezzo {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-chip);
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}