/* ==========================================================================
   single-product.css
   Enskild produktsida – styling för WooCommerce-produktsidan
   ========================================================================== */


/* ============================= KÖPKNAPP + TILLÄGGSPRODUKTER (WOOBT) ============================= */

.product .woobt-wrap input[type=checkbox] {
	position: static !important;
}

.woobt-products .woobt-product .woobt-price {
	max-width: 120px;
	flex: 0 0 120px;
}

.woobt-summary .woobt-additional {
	display: none !important;
}

.woobt-summary .woobt-total {
	display: none !important;
}

.woobt-product .woosq-link {
	color: #767676;
}

.woobt-product .woosq-link:hover {
	text-decoration: underline !important;
}

.woobt-product .woocommerce-Price-amount {
	color: #767676 !important;
	font-size: initial;
}

.woobt-wrap .woobt-text, .woobt-wrap .woobt-products {
	margin: -25px 0 30px 0;
}

.woocommerce div.product p.price {
	margin: 0 0 15px;
}


/* ============================= WOOBT MOBILANPASSNING ============================= */

@media (max-width: 767px) {
	.woobt-wrap-responsive .woobt-products .woobt-product {
		padding: 10px 0 !important;
		flex-direction: row;
		justify-content: initial;
		gap: 6px;
	}

	.woobt-wrap-responsive .woobt-products .woobt-product .woobt-thumb img {
		max-width: 30px !important;
	}

	.woobt-wrap-responsive .woobt-products .woobt-product .woobt-title {
		text-align: left;
		word-break: break-word;
	}

	.woobt-wrap-responsive .woobt-products .woobt-product .variations_form .variations {
		display: initial;
	}

	.woobt-wrap-responsive .woobt-quantity input {
		width: 2em !important;
		padding-left: 0 !important;
	}

	.woobt-wrap-responsive .woobt-quantity .woobt-quantity-input-minus,
	.woobt-wrap-responsive .woobt-quantity .woobt-quantity-input-plus {
		width: 30px;
		flex: 0 0 30px;
	}

	.woobt-product .woobt-quantity-input .qty, .woobt-product .woobt-quantity-input .woobt-qty {
		min-width: 30px;
	}

	.woobt-wrap-responsive .woobt-products .woobt-product .woobt-price {
		min-width: max-content;
	}
}


/* ============================= PRODUKTBILD BAKGRUND OCH GALLERI ============================= */

.woocommerce div.product div.images img,
.woocommerce-page ul.products li.product a img {
	background-color: #f4f4f4;
}

@media (min-width: 1023px) {
	.woocommerce div.product.heightSet div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a {
		top: 50%;
		translate: 0 -50%;
		position: relative;
	}

	.woocommerce .product .images .flex-viewport {
		height: var(--_product-image-height, initial);
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
		background-color: #f4f4f4;
		height: var(--_product-image-height, initial);
	}
}


/* ============================= DÖLJ TAGGAR OCH PRODUKT-ID I META ============================= */

.product_meta > .tagged_as,
.product_meta > .product_id {
	display: none !important;
}


/* ============================= KLARNA BETALMEDDELANDE ============================= */

klarna-placement {
	display: block;
	margin-bottom: 14px;
}

klarna-placement::part(osm-container) {
	font-family: "DM Sans", sans-serif;
	border: none;
	min-height: 40px;
	text-align: left;
	padding: 3px 0 5px;
	font-size: 16px;
}

klarna-placement::part(osm-cta) {
	color: #e60023;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
}


/* ============================= PRODUKTBESKRIVNING CHECKLISTA ============================= */

.s4-product-description-list {
	list-style: none;
	padding: 20px;
	margin: 0;
	background-color: #f5f5f5;
}

.s4-product-description-list li {
	position: relative;
	padding-left: 30px;
	font-size: 15px;
}

.s4-product-description-list li::before {
	content: "\2714";
	position: absolute;
	left: 0;
	top: 5px;
	color: white;
	background-color: #70c782;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	letter-spacing: -2px;
	padding-right: 1px;
}


/* ============================= LAGERSTATUS OCH LEVERANSINFO ============================= */

.woocommerce div.product .summary .s4-in-stock {
	font-weight: 600;
}

.woocommerce div.product .summary .stock::after {
	border-bottom: initial;
}


/* ============================= TILLBEHÖRS-SLIDER (UP-SELLS / SLICK) ============================= */

section.up-sells ul.products[class*="columns-"] li.product {
	padding: 0 15px 35px;
}

section.up-sells > ul {
	margin: 0 30px !important;
}

section.up-sells > ul:not(.slick-initialized) {
	flex-wrap: nowrap;
	overflow: hidden;
}

@media (min-width: 768px) {
	section.up-sells > ul:not(.slick-initialized).products[class*="columns-"] li.product {
		flex: 1 0 25%;
	}
}

@media (max-width: 768px) {
	section.up-sells > ul:not(.slick-initialized).products[class*="columns-"] li.product {
		flex: 1 0 50%;
	}
}

@media (max-width: 479px) {
	.woocommerce-page section.up-sells.products > ul li.product {
		width: calc(50vw - 40px) !important;
	}

	section.up-sells li.product img {
		max-width: 630px;
		max-height: 630px;
	}

	section.up-sells > ul {
		margin: initial !important;
	}

	section.up-sells ul.products[class*="columns-"] li.product {
		padding: 0 0 25px 0;
		margin: 0 10px;
	}
}


/* ============================= VARIANTVÄLJARE (TOGGLE) ============================= */

.s4-variant-toggle {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.s4-variant-card {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 14px 18px;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	color: #333;
	text-decoration: none;
	transition: border-color 0.2s;
	cursor: default;
}

a.s4-variant-card {
	cursor: pointer;
	color: #666;
}

a.s4-variant-card:hover {
	border-color: #c4161c;
	text-decoration: none;
	color: #333;
}

.s4-variant-card.s4-variant-active {
	border-color: #c4161c;
}

.s4-variant-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	text-transform: capitalize;
}

.s4-variant-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.s4-variant-sku {
	font-size: 13px;
	opacity: 0.8;
}

.s4-variant-price {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.s4-variant-card .s4-variant-price .woocommerce-Price-amount {
	color: inherit !important;
}

@media (max-width: 480px) {
	.s4-variant-toggle {
		flex-direction: column;
	}
}