/*
 * Theme Studio — the master product grid, shared by every design.
 *
 * Every product listing (home featured, category, search, new products ...)
 * is a grid of EQUAL columns, and every product picture sits in a plate of
 * the SAME size, the product centred in it: a cut-out is contained (never
 * cropped, never stretched), a photo fills the plate. No design may stagger,
 * offset or resize individual cards; uneven cards read as broken.
 *
 * A design chooses only these, on its body class:
 *   --studio-plate-ratio   plate shape, e.g. 1 (square, default) or 4 / 5
 *   --studio-gap           row and column gap, e.g. 32px 20px
 *   --studio-cols-wide     columns when the listing has the full width (default 4)
 * Colour, corners and type of the cards stay the design's own.
 *
 * The selectors carry two ids so they outrank any design's listing rules
 * (which carry one), whatever order the stylesheets load in.
 */

body.studio #columns #center_column ul.product_list.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--studio-gap, 32px 20px);
  margin: 0;
  padding: 0;
}
body.studio.index #columns #center_column ul.product_list.grid,
body.studio.hide-left-column #columns #center_column ul.product_list.grid {
  grid-template-columns: repeat(var(--studio-cols-wide, 4), minmax(0, 1fr));
}
body.studio #columns #center_column ul.product_list.grid::before,
body.studio #columns #center_column ul.product_list.grid::after { display: none; }

/* Every card takes the next cell: no spans, no offsets, no floats. */
body.studio #columns #center_column ul.product_list.grid > li {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  min-width: 0;
  margin: 0;
  float: none;
  transform: none;
}

/* One plate size for every picture. */
body.studio #columns #center_column ul.product_list .product-image-container {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: var(--studio-plate-ratio, 1);
  overflow: hidden;
}
body.studio #columns #center_column ul.product_list .product_img_link,
body.studio #columns #center_column ul.product_list .product_img_link picture {
  display: block;
  width: 100%;
  height: 100%;
}
body.studio #columns #center_column ul.product_list .product_img_link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
body.studio #columns #center_column ul.product_list .product_img_link img.mo-cut {
  object-fit: contain;
}

@media (max-width: 1100px) {
  body.studio.index #columns #center_column ul.product_list.grid,
  body.studio.hide-left-column #columns #center_column ul.product_list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  body.studio #columns #center_column ul.product_list.grid,
  body.studio.index #columns #center_column ul.product_list.grid,
  body.studio.hide-left-column #columns #center_column ul.product_list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}

/* ------------------------------------------------------------------ */
/* One product box for every cut-out, everywhere.                       */
/*                                                                      */
/* Wherever a transparent product image shows (listings, product page,  */
/* related products, cart drawer, "added to cart", thumbnails), it sits  */
/* in the same invisible SQUARE centred in its plate, filling            */
/* --studio-cut-fit (default 80%) of the plate's shorter side. Wide,     */
/* tall and square products then read at the same size, whatever the     */
/* plate's shape, and no design pads them differently. A design may set  */
/* --studio-cut-fit only. (!important: the designs' older per-place      */
/* padding and sizing rules must not win here.)                          */
/* ------------------------------------------------------------------ */

body.studio ul.product_list .product-image-container,
body.studio #image-block,
body.studio #thumbs_list li,
body.studio #productscategory_list .product-image,
body.studio #crossselling_list .lnk_img,
body.studio .accessories-block .product_img_link,
body.studio .mo-drawer .cart-images,
body.studio #layer_cart .layer_cart_img,
body.studio .cart_block .cart-images {
  container-type: size;
  position: relative;
}

body.studio ul.product_list .product_img_link img.mo-cut,
body.studio #image-block img.mo-cut,
body.studio #thumbs_list li img.mo-cut,
body.studio #productscategory_list img.mo-cut,
body.studio #crossselling_list img.mo-cut,
body.studio .accessories-block img.mo-cut,
body.studio .mo-drawer .cart-images img.mo-cut,
body.studio #layer_cart .layer_cart_img img.mo-cut,
body.studio .cart_block .cart-images img.mo-cut {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: calc(min(100cqw, 100cqh) * var(--studio-cut-fit, .8)) !important;
  height: calc(min(100cqw, 100cqh) * var(--studio-cut-fit, .8)) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
}