/* PRODUKT — must be plain CSS (this file is loaded via <link rel="stylesheet">).
   Live also inlines a copy; keep rules here so local cards get the same chrome. */

.product-card .product-thumb:hover {
	transform: translateY(-1px);
	border: 1px solid #000000;
}

.product-card .product-thumb .image {
	text-align: center;
	margin-bottom: 5px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.product-card .product-thumb .image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	transition: transform 0.25s ease;
	background-color: #f4f4f4;
	filter: brightness(95%);
}

.product-img-list {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.product-card .product-thumb:hover .image img {
	transform: scale(1);
}

.product-card .product-thumb h4 {
	font-size: 13px;
	margin-bottom: 5px;
}

.product-card .product-thumb h4 a {
	color: #333 !important;
	text-decoration: none;
}

.product-card .price {
	font-weight: bold;
	margin-bottom: 0;
}

.product-card .price-old {
	text-decoration: line-through;
	margin-right: 5px;
}

.product-card .price-new {
	color: #efefef;
}

/* caption längst ner för jämna höjder */
.product-card .product-thumb .caption {
	display: flex;
	flex-direction: column;
	margin-top: 5px;
	padding: 5px;
	min-height: 90px;
}

/* Live BS3 .row + display:flex defaults to nowrap. BS5 .row wraps, so the
   brand logo dropped under the price and left a ~45px gap before the name. */
.product-card .product-meta.row {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
	margin-left: 0;
	margin-right: 0;
}
.product-card .product-meta > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
	flex-shrink: 1;
}
.product-card .product-meta .product-price {
	width: auto;
	flex: 0 1 auto;
}
.product-card .product-meta .product-brand {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.product-card .product-thumb {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
	padding: 3px;
}

.product-card .product-thumb:nth-child(1) {
	transition-delay: 0.0s;
}

.product-card .product-thumb:nth-child(2) {
	transition-delay: 0.05s;
}

.product-card .product-thumb:nth-child(3) {
	transition-delay: 0.1s;
}

.product-card .product-thumb:nth-child(4) {
	transition-delay: 0.15s;
}

/* Gör mellanrummet mellan product-cards.
   −15px matches live BS3 / .all-product-show 15px padding. Parent must pad ≥15px
   (see oc4-parity .container-fluid:has(> .row.product-card-row)) or the page overflows. */
.row.product-card-row {
	margin-left: -15px;
	margin-right: -15px;
}

.row.product-card-row .product-card {
	padding-left: 2px;
	padding-right: 2px;
}

.product-card-row-padding {
	padding-left: 0px;
	padding-right: 0px;
}

@media (min-width: 1200px) {
	.product-card-row-padding {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Colour swatches — live: right-aligned on RAD 4, not a BS column (BS5 col-md-6 shifted them). */
.product-card .product-new-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 35px;
	width: 100%;
	margin-top: auto;
}
.product-card .product-new-text {
	flex: 0 1 auto;
	min-width: 0;
}
.product-card .product-new-label {
	font-size: 11px;
	font-weight: 700;
	color: #000;
}
.product-card .product-color-selection {
	margin-left: auto;
	text-align: right;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding: 0;
}
.product-card .product-colors {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 0;
}
.product-card .color-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 3px;
	border: 1px solid #efefef;
	box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
	vertical-align: middle;
	flex: none;
}
.product-card .color-more {
	display: inline-block;
	font-size: 12px;
	margin-left: 4px;
	color: #555;
}

/* end PRODUKT */