/* =========================================================
   RICCI 1895 — Pagina Shop ("L'Oro di Famiglia")
   Usa i token colore e i font definiti in home.css
========================================================= */

/* spazio verticale tra i blocchi a celle */
.shop-section + .shop-section { margin-top: 22px; }

/* ---------- Celle immagine ---------- */
.shop-media { padding: 0; overflow: hidden; min-height: 340px; background: #e8e4de; }
.shop-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }

/* ---------- Pannello testo colorato ---------- */
.shop-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(28px, 4vw, 64px);
}
.shop-panel h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: .5rem; letter-spacing: .02em; }
.shop-panel .subtitle { font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 1.2rem; }
.shop-panel p { line-height: 1.8; margin-bottom: 1rem; }
.shop-panel .formati-label { margin-bottom: .15rem; }
.shop-panel .formati { letter-spacing: .05em; margin-bottom: 1.8rem; }
.shop-panel .btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }

.shop-panel.dark  { background: var(--ric-brown); color: #fff; }
.shop-panel.dark h2, .shop-panel.dark .subtitle { color: #fff; }
.shop-panel.dark p { color: rgba(255, 255, 255, .85); }

.shop-panel.cream { background: var(--ric-cream); color: var(--ric-dark); }
.shop-panel.cream p { color: var(--ric-muted); }

.shop-panel.green { background: var(--ric-green); color: #fff; }
.shop-panel.green h2 { color: #fff; }
.shop-panel.green p { color: rgba(255, 255, 255, .9); }

/* ---------- Sezione 3: mosaico (immagine | testo | immagine) ---------- */
.shop-mosaic .shop-media { min-height: 300px; }
.shop-mosaic .shop-media img { min-height: 300px; }
.shop-mosaic .shop-panel { padding: 48px clamp(24px, 3vw, 44px); }

/* ---------- "Come acquistare" (scoped alla pagina shop) ---------- */
.shop-page .sec-canali .ric-container {
  background: var(--ric-cream); border-radius: 10px;
  padding-top: 64px; padding-bottom: 64px;
  padding-left: clamp(20px, 4vw, 60px); padding-right: clamp(20px, 4vw, 60px);
}
.shop-page .sec-canali .row > [class*="col-"] { padding: 0 1.5rem; }
.shop-page .sec-canali img { width: 56px; height: 56px; margin: 0 auto 1.2rem; display: block; }
.shop-page .sec-canali h3 { font-size: 1.3rem; margin-bottom: .8rem; color: var(--ric-dark); }
.shop-page .sec-canali p { color: var(--ric-muted); line-height: 1.7; margin-bottom: .4rem; }
.shop-page .sec-canali p a { color: var(--ric-orange); text-decoration: none; }
.shop-page .sec-canali p a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .shop-panel { padding: 40px 28px; }
  .shop-media, .shop-media img { min-height: 240px; }
  .shop-mosaic .shop-media, .shop-mosaic .shop-media img { min-height: 220px; }
}