/**
 * Collection grid — portrait tiles, 1px column gutters.
 * Greg Natale — added Sep 2026.
 *
 * Loaded on the same pages as the FILTER drawer
 * (is_product_category / is_product_tag / is_shop) — see
 * gn_collection_grid_assets() in functions.php.
 */

/* ---------------------------------------------------------------
   1. Every tile is portrait (3:4)

   The theme builds the image window as a ratio box —
   `.grid-item .product-image { height: 0; padding-bottom: 100% }`
   (styles.css) — which is a SQUARE. app-new.css then fights it with
   `min-height: 469px` above 768px and `max-height: 300px` below, so the
   shape changed with the viewport: square at some widths, letterboxed at
   others.

   Source images are already portrait — 789–960 wide by 1200 tall, i.e.
   0.66–0.80 — with a single 1200x1200 outlier. 3:4 (0.75) sits in the
   middle of that range, so `cover` crops almost nothing on the real
   portraits and only trims the sides of the square one.

   The min/max-heights have to be cleared or they keep overriding the box.
   --------------------------------------------------------------- */

.collections-products-layout .grid-item .product-image,
.products-grid .grid-item .product-image,
body.template-collection .newmain .products-grid .grid-item .product-image {
	height: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-bottom: 133.3333% !important;   /* 3 / 4 */
	overflow: hidden;
	position: relative;
	display: block !important;
}

/* The ratio box has no usable height of its own, so the image layer has to
   be pulled out of flow and stretched over it. */

.collections-products-layout .grid-item .product-image .image-item,
.collections-products-layout .grid-item .product-image > a.product-grid-image,
.products-grid .grid-item .product-image .image-item,
.products-grid .grid-item .product-image > a.product-grid-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.collections-products-layout .grid-item .product-image .image-item a.product-grid-image,
.products-grid .grid-item .product-image .image-item a.product-grid-image {
	display: block;
	width: 100%;
	height: 100%;
}

.collections-products-layout .grid-item .product-image img,
.products-grid .grid-item .product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------------
   2. 2px between columns, existing gap above and below

   Tiles carry `padding: 10px` all round, so the gutter between two images
   is 20px horizontally and 20px vertically. Sam wants the horizontal one
   down to 2px and the vertical one left alone. (Tried 1px first — too
   tight to read as a gutter at all.)

   Side padding drops to 1px (1 + 1 = 2px between neighbours). The 9px that
   comes off each outer edge is given back on the row wrapper, so the first
   and last image still line up with the FILTER / SORT BY bar above them —
   that bar sits at the same 10px inset.
   --------------------------------------------------------------- */

.collections-products-layout {
	padding-left: 9px;
	padding-right: 9px;
}

.collections-products-layout > .grid-item.product-item {
	padding-left: 1px;
	padding-right: 1px;
}