/* Diskret ram runt produktkort i butiksrutnätet (shop/kategori-loop) */

.products li.product {
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	overflow: hidden; /* så innehållet respekterar de rundade hörnen */
	padding: 16px; /* avstånd så ramen inte nuddar knappar/innehåll */
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.products li.product:hover {
	border-color: #c2c2c2;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

/* Egen box runt bilden (+ badge/wishlist-knapp som ligger ovanpå den).
   Bilden görs faktiskt större i layouten (negativ marginal ut till kortets
   kant) istället för att bara visuellt förstoras med transform - det senare
   reserverar ingen plats och kan sluta överlappa titeln oförutsägbart
   beroende på hur mycket luft just den bildfilen har runt motivet.
   Kortets egen "overflow: hidden" (ovan) klipper snyggt vid de rundade
   hörnen; bilden själv "croppas" aldrig - den skalas bara till en exakt,
   förutsägbar storlek (kortets fulla bredd, kant i kant). */
.products li.product .np-product-thumb {
	position: relative;
	margin: -16px -16px 0; /* äter upp kortets padding runt bilden */
	overflow: hidden;
}

/* Länken runt bilden (till produktsidan) - "display: block" så den täcker
   hela bildytan klickbart, inte bara textradens höjd som en <a> annars
   skulle få som standard. */
.products li.product .np-product-thumb .woocommerce-loop-product__link {
	display: block;
}

.products li.product .np-product-thumb img {
	display: block;
	width: 100%;
	height: auto;
	/* --np-thumb-scale sätts per produkt (inline) i content-product.php,
	   uträknat från hur mycket luft just den bildfilen har runt motivet -
	   se inc/product-thumb-scale.php. .np-product-thumb ovan har egen
	   overflow: hidden, så eventuell överskjutande zoom klipps säkert
	   utan att någonsin läcka in i titeln under. */
	transform: scale( var( --np-thumb-scale, 1 ) );
	transform-origin: center;
}