/* ==========================================================================
   Product Add-Ons Ultimate – Rekomaskin
   Ersätter den gamla "PEWC CSS" (ta bort den från Customizer/Woodmart Custom CSS).
   ========================================================================== */

   :root {
	--pewc-accent: #e20000;          /* rött: vald ram, checkbox */
	--pewc-heading-bg: #000000;      /* rubrikboxen */
	--pewc-text: #222222;
	--pewc-text-muted: #777777;
	--pewc-hover-bg: #f2f2f2;
	--pewc-border: #dddddd;          /* kortets ram i grundläget */
	--pewc-radius: 0;
	--pewc-active-bar: 10px;         /* tjocklek på vänsterkanten i valt läge */
	--pewc-thumb: 64px;              /* miniatyrbild */
	--pewc-font: 'Heebo', sans-serif;
}

/* --------------------------------------------------------------------------
   Grupp & rubrik
   -------------------------------------------------------------------------- */
.pewc-group-wrap {
	padding-bottom: 0;
	margin-bottom: 20px;
}

.pewc-group-heading-wrapper h3 {
	margin: 0 0 8px;
	padding: 10px 10px 6px 20px;
	font-size: 24px !important;
	background-color: var(--pewc-heading-bg);
	color: #fff !important;
	box-shadow: inset var(--pewc-active-bar) 0 0 var(--pewc-accent);
}

.pewc-group-description {
	display: none;
}

.pewc-group-radio h4 {
	display: none !important;
}

ul.pewc-product-extra-groups {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Mobil: Grupp & rubrik
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.pewc-group-heading-wrapper h3 {
		font-size: 18px !important;
	}
}

/* --------------------------------------------------------------------------
   Checkbox-kort (li)
   Display sätts inte här – pluginet döljer fält via .pewc-hidden-field.
   -------------------------------------------------------------------------- */
.pewc-product-extra-groups li.pewc-item-checkbox {
	position: relative;
	margin: 0;
	padding: 10px 10px;
	border: 1px solid var(--pewc-border);
	border-radius: var(--pewc-radius);
	background: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pewc-product-extra-groups li.pewc-item-checkbox.pewc-has-field-image {
	align-items: center;
	gap: 16px;
}

.pewc-product-extra-groups li.pewc-item-checkbox:hover {
	background-color: var(--pewc-hover-bg);
}

/* Valt läge: tunn ram runt om + tjockare vänsterkant.
   Vänsterkanten är en inset-skugga så att innehållet inte hoppar i sidled. */
.pewc-product-extra-groups li.pewc-item-checkbox.pewc-active-field {
	border-color: var(--pewc-accent);
	background-color: #fff;
	box-shadow: inset var(--pewc-active-bar) 0 0 var(--pewc-accent);
}
.pewc-product-extra-groups li.pewc-item-checkbox:has(input:checked) {
	border-color: var(--pewc-accent);
	background-color: #fff;
	box-shadow: inset var(--pewc-active-bar) 0 0 var(--pewc-accent);
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-item-field-wrapper {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Produktbild + förhandsbild vid hover
   -------------------------------------------------------------------------- */
.pewc-product-extra-groups li.pewc-item-checkbox .pewc-item-field-image-wrapper {
	position: relative;
	flex: 0 0 var(--pewc-thumb);
	width: var(--pewc-thumb);
	margin: 0;
	border: 0;
	border-radius: 0;
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-item-field-image-wrapper > img {
	display: block;
	width: 100%;
	height: var(--pewc-thumb);
	object-fit: contain;
	border: 0;
}

.pewc-image-preview {
	display: none;
}

@media (hover: hover) and (min-width: 1025px) {
	.pewc-image-preview {
		display: block;
		position: absolute;
		z-index: 50;
		top: 50%;
		left: calc(100% + 12px);
		width: 240px;
		padding: 12px;
		background: #fff;
		border-radius: var(--pewc-radius);
		box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-50%) scale(.96);
		transform-origin: left center;
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	}

	.pewc-image-preview__img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pewc-item-field-image-wrapper:hover .pewc-image-preview {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) scale(1);
		transition-delay: 0s;
	}
}

/* --------------------------------------------------------------------------
   Label: text | pris | checkbox
   -------------------------------------------------------------------------- */
.pewc-product-extra-groups .pewc-checkbox-price {
	font-weight: bold;
}
.pewc-product-extra-groups li.pewc-item-checkbox label.pewc-checkbox-form-label {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: 0; /* döljer   som pluginet lägger efter input */
	margin: 0;
	padding: 0;
	font-family: var(--pewc-font);
	cursor: pointer;
}

.pewc-product-extra-groups li.pewc-item-checkbox label.pewc-checkbox-form-label > span:not(.pewc-theme-element) {
	display: flex;
	flex: 1 1 auto;
	margin-right: 16px;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-cb-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-cb-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pewc-text);
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-cb-description {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--pewc-text-muted);
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-cb-meta {
	display: flex;
	flex: 0 0 auto;
	align-items: baseline;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: #444444;
	white-space: nowrap;
}

.pewc-product-extra-groups li.pewc-item-checkbox .pewc-cb-meta .pewc-separator {
	margin: 0 1px 0 0;
	font-weight: bold;
}

/* --------------------------------------------------------------------------
   Checkboxen (rund)
   -------------------------------------------------------------------------- */
.pewc-product-extra-groups li.pewc-item-checkbox span.pewc-theme-element {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 26px;
	display: block !important; /* skyddar mot äldre regler som sätter display på alla spans */
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e6e6e6;
}

.pewc-product-extra-groups li.pewc-item-checkbox:hover span.pewc-theme-element {
	background: #d8d8d8;
}

.pewc-product-extra-groups li.pewc-item-checkbox input:checked ~ span.pewc-theme-element {
	background: var(--pewc-accent);
}

.pewc-product-extra-groups li.pewc-item-checkbox span.pewc-theme-element:after {
	content: "";
	display: none;
	position: absolute;
	top: 5px !important;
	left: 9px !important;
	width: 6px;
	height: 11px;
	margin: 0;
	box-sizing: content-box;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.pewc-product-extra-groups li.pewc-item-checkbox input:checked ~ span.pewc-theme-element:after {
	display: block;
}

/* Tangentbordsfokus */
.pewc-product-extra-groups li.pewc-item-checkbox input:focus-visible ~ span.pewc-theme-element {
	outline: 2px solid var(--pewc-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobil: pris under texten
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	:root {
		--pewc-thumb: 48px;
	}

	.pewc-product-extra-groups li.pewc-item-checkbox {
		padding: 12px 14px;
	}

	.pewc-product-extra-groups li.pewc-item-checkbox.pewc-has-field-image {
		gap: 12px;
	}

	.pewc-product-extra-groups li.pewc-item-checkbox label.pewc-checkbox-form-label > span:not(.pewc-theme-element) {
		margin-right: 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* --------------------------------------------------------------------------
   Övriga fält (från gamla CSS:en)
   -------------------------------------------------------------------------- */
.pewc-item.pewc-item-number .pewc-item-field-wrapper {
	display: flex;
}

.pewc-number-field {
	width: 35px !important;
	height: 25px !important;
	padding: 0 0 0 5px !important;
}

.pewc-total-field-wrapper {
	padding: 20px;
	background: #f9f9f9;
	font-weight: 600;
}