/* ============================================
   PRODUCT SIMPLE VIEW
   ============================================ */

.produkt--simple a.clickable-parent {
	text-decoration: none !important;
}
.samuraj-inner-section + .samuraj-inner-section > .produkter-feed--simple {
	margin-top: var(--space-m);
}
.samuraj-inner-section.fh > figure,
.samuraj-inner-section.fh > figure img {
	height: 100%;
	object-fit: cover;
}

.produkt--simple__image {
	overflow: hidden;
}
@media screen and (min-width: 1026px) {
	.produkt--simple__image {
		aspect-ratio: 460 / 516;
	}
}

.produkt--simple__image img {
	display: block;
	width: 100%;
	height: 100%;
	transform: translateZ(0);
	border-radius: var(--radius-m);
	transition: 0.3s ease-out;
	object-fit: cover;
}

@media screen and (max-width: 1025px) {
	.produkt--simple__image img {
		height: 400px;
	}
}
@media screen and (min-width: 1026px) {
	.produkt--simple:has(a.clickable-parent:is(:hover, :focus-visible)) .produkt--simple__image img {
		transform: translateZ(0) scale(1.05);
	}
}

.produkt--simple__decorative {
	height: 1px;
	width: 100%;
	background: var(--primary);
	margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
	.produkt--simple__decorative {
		margin-bottom: 3px;
	}
}

.produkt--simple.is-animating .produkt--simple__decorative {
	animation: decorative-grow 0.85s var(--animation-bezier) forwards;
}

.produkt--simple__content {
	padding-top: 16px;
}
@media screen and (max-width: 1025px) {
	.produkt--simple__content {
		position: relative;
		gap: 12px;
	}
	.produkt--simple__content > p {
		padding-top: 4px;
		padding-bottom: 16px;
	}
	.product-item__read-more {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
@media screen and (max-width: 1025px) {
	.produkter-feed--simple:has(.produkt--heading) {
		gap: var(--space-m) !important;
	}
	.produkter-feed--simple:has(.produkt--heading) .produkt--simple + .produkt--simple {
		margin-top: var(--space-m);
	}
}

/* ============================================
   PRODUCT COMPLEX VIEW
   ============================================ */

.produkt--complex {
	padding: 15px;
	border-top-left-radius: var(--radius-m);
	border-top-right-radius: var(--radius-m);
}

.produkt--complex a.clickable-parent {
	text-decoration: none !important;
}

.produkt-complex__image {
	overflow: hidden;
	height: 215px;
	position: relative;
}
@media screen and (max-width: 1025px) {
	.produkt-complex__image {
		width: 100%;
		height: 142px;
	}
}

.produkt-complex__image a {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 9;
}

.produkt-complex__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0);
	transition: 0.3s ease-out;
}

@media screen and (min-width: 1026px) {
	.produkt--complex:has(a:hover) .produkt-complex__image img {
		transform: translateZ(0) scale(1.05);
	}
}

.produkt--complex__title-text {
	position: relative;
	color: var(--primary-ultra-dark);
}

.produkt--complex__title-text::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--primary-ultra-dark);
	opacity: 0;
	transition: 0.3s ease-out;
}
.produkt--complex:has(a:hover) .produkt--complex__title-text::before {
	opacity: 1;
	transition: 0s ease-out;
}

.produkt--complex__title-text.is-animating::before {
	animation: title-swoop 0.85s var(--animation-bezier) forwards;
}

.produkt--complex__content {
	color: var(--primary-dark);
}
/* ============================================
   PRODUCT SPEC TABLE
   ============================================ */

.product-spec {
	position: relative;
}
.product-spec::after {
	content: "";
	position: absolute;
	top: 0;
	background: var(--primary);
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 99;
	transition: 0.3s ease-out;
}

@media screen and (min-width: 1026px) {
	.product-spec {
		transition: 0.2s ease-out;
	}
	.product-spec:hover {
		background: white;
	}
}
.product-spec__cell {
	padding: 15px;
}

.product-spec:last-child .current-product {
	border-bottom-left-radius: var(--radius-m);
	border-bottom-right-radius: var(--radius-m);
}

/* ============================================
   CURRENT PRODUCT HIGHLIGHTING
   ============================================ */

.current-product {
	background-color: white;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes decorative-grow {
	0%,
	5% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

@keyframes title-swoop {
	0%,
	5% {
		width: 0;
		left: 0;
	}

	100% {
		width: 100%;
		left: 0;
	}
}

@media screen and (max-width: 1025px) {
	.produkt--complex,
	.product-spec__cell {
		width: 230px;
	}
	.produkter-feed--complex,
	.product-spec {
		width: max-content;
	}

	.samuraj-section:has(.produkter-feed--complex) {
		padding-right: 0;
		padding-left: 0;
		padding-top: 0;
		width: fit-content;
		overflow: scroll;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}
	.samuraj-section:has(.produkter-feed--complex)::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera */
	}

	.product-spec__label,
	.produkter-feed--mobile-part {
		width: 130px;
		position: sticky;
		left: 0;
		background: var(--primary-light);
		z-index: 99;
		padding-left: 22px;
	}
}

.product-spec__label {
	color: var(--primary-dark);
}