/* Related products.

   The cards are the theme's catalogue miniatures, so there is deliberately no
   card styling here — only the grid around them. .grid-container already gives
   display:grid from the theme; the column count is ours because the catalogue
   takes it from the shopper's grid/list switch, which this block does not
   have. */

.mdrelated {
    margin: 40px 0;
}

.mdrelated__title {
    margin: 0 0 20px;
}

.mdrelated__grid {
    grid-template-columns: repeat(var(--mdrel-cols, 4), minmax(0, 1fr));
    gap: 20px;
}

.mdrelated--cols-2 .mdrelated__grid { --mdrel-cols: 2; }
.mdrelated--cols-3 .mdrelated__grid { --mdrel-cols: 3; }
.mdrelated--cols-4 .mdrelated__grid { --mdrel-cols: 4; }
.mdrelated--cols-5 .mdrelated__grid { --mdrel-cols: 5; }
.mdrelated--cols-6 .mdrelated__grid { --mdrel-cols: 6; }

/* The miniature sets its own width for the catalogue list view; inside a grid
   cell it has to fill the cell instead.

   opacity/transform are reset on purpose. In the catalogue the theme hides
   miniatures and animates them in with the listing script; that script does
   not run on a product page, so anything inheriting that behaviour here would
   stay invisible. This block shows its cards immediately. */
.mdrelated__grid .product-miniature {
    width: 100%;
    max-width: 100%;
    margin: 0;
    opacity: 1;
    transform: none;
}

@media (max-width: 1024px) {
    .mdrelated__grid { --mdrel-cols: 2; }
}

@media (max-width: 575px) {
    .mdrelated__grid { --mdrel-cols: 1; }
}