/* ═══════════════════════════════════════════════════════════════
   "Vitrin" product list — rows of large photos (one product's photos, or
   different products side by side). The photo with its name, price and "+"
   is a ProductTile (see its stylesheet); here only the rows are laid out.
   Set by the component on each .psg-row: --psg-n and, per layout,
   --psg-ratio-d / --psg-gap-d / --psg-bottom-d / --psg-width-d (from 1024px up) and
   --psg-ratio-m / --psg-gap-m / --psg-bottom-m (below 1024px).
   ═══════════════════════════════════════════════════════════════ */

.cc_JsHSjQyQmG_Vd8SWQHLUC .psg, .cc_JsHSjQyQmG_ZklZT4T7lv .psg {
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

.cc_JsHSjQyQmG_Vd8SWQHLUC .psg-row, .cc_JsHSjQyQmG_ZklZT4T7lv .psg-row {
  display: grid;
  grid-template-columns: repeat(var(--psg-n, 3), minmax(0, 1fr));
  gap: var(--space-md) var(--psg-gap-d, 8px);
  width: var(--psg-width-d, 100%);
  margin: 0 auto var(--psg-bottom-d, 64px);
}

.cc_JsHSjQyQmG_Vd8SWQHLUC .psg-row:last-of-type, .cc_JsHSjQyQmG_ZklZT4T7lv .psg-row:last-of-type { margin-bottom: 0; }

@media not all and (min-width: 1024px) {
  .cc_JsHSjQyQmG_Vd8SWQHLUC .psg-row, .cc_JsHSjQyQmG_ZklZT4T7lv .psg-row {
    gap: var(--space-sm) var(--psg-gap-m, 4px);
    width: 100%;
    margin-bottom: var(--psg-bottom-m, 40px);
  }

  /* A row of three: one large photo, two side by side below it */
  .cc_JsHSjQyQmG_Vd8SWQHLUC .psg-row--n3, .cc_JsHSjQyQmG_ZklZT4T7lv .psg-row--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc_JsHSjQyQmG_Vd8SWQHLUC .psg-row--n3 > .psg-cell:first-child, .cc_JsHSjQyQmG_ZklZT4T7lv .psg-row--n3 > .psg-cell:first-child { grid-column: 1 / -1; }
}