/*
 * Styles for markup rebuilt for WoodMart 8 (loads after style.css).
 */

/* ---------------------------------------------------------------------------
 * Reg-search banner
 * ------------------------------------------------------------------------- */
.reg-attention-container {
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.reg-attention-container .reg-attention-close {
	cursor: pointer;
	color: #333;
	border: 0;
	min-height: 0;
	line-height: 1.2;
	text-transform: none;
}

.reg-attention-close-icon {
	margin-left: 5px;
	font-size: 16px;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Regnummer page
 * ------------------------------------------------------------------------- */
.single-regnummer .wd-page-title {
	margin-bottom: 0;
}

.single-regnummer .wd-page-content > .wd-content-layout {
	padding-top: 20px;
}

.regnummer-content .reg-section-title {
	text-align: center;
	font-size: 36px;
}

/* Accordion */
.regnummer-content .reg-acc-button {
	display: flex;
	align-items: center;
	justify-content: center; /* text and chevron centred, as on WoodMart 5 */
	gap: 8px;
	width: 100%;
	min-height: 42px;
	padding: 10px 15px;
	margin-bottom: 20px;
	border: 0;
	background-color: #00680a;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.regnummer-content .reg-acc-button:hover,
.regnummer-content .reg-acc-button:focus {
	background-color: #005308;
	color: #fff;
}

.regnummer-content .reg-acc-button .reg-category-name {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
}

/* CSS chevron (replaces Font Awesome 4 angle icons) */
.regnummer-content .reg-acc-icon {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.regnummer-content .reg-acc-button.reg-acc-open .reg-acc-icon {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.regnummer-content .reg-acc-hide {
	display: none;
}

.regnummer-content .reg-acc-show {
	display: block;
	margin-bottom: 20px;
}

/* Attribute filter */
.reg-filter-form {
	margin-bottom: 15px;
}

.reg-filter-groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 30px;
}

@media (min-width: 576px) {
	.reg-filter-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.reg-filter-group {
	margin-bottom: 15px;
}

.reg-filter-group .widget-title {
	margin-bottom: 10px;
}

.reg-filter-list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 280px;
	overflow-y: auto;
}

.reg-filter-list li {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.reg-filter-list input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}

.reg-filter-list label {
	margin: 0;
	padding-left: 8px;
	cursor: pointer;
	line-height: 1.3;
}

.reg-filter-actions .reg-filter-reset {
	padding: 0;
	min-height: 0;
	border: 0;
	background: none;
	color: var(--wd-primary-color, #00680a);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.reg-filter-actions .reg-filter-reset::before {
	content: "\00d7";
	margin-right: 5px;
	text-decoration: none;
	display: inline-block;
}

.reg-product-content {
	position: relative;
	min-height: 60px;
}

.reg-lazy-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 20px 0;
	color: #333;
	font-weight: 500;
}

/* Spinner while the grid loads (regnummer.js adds .reg-loading; the error text has no spinner) */
.reg-loading .reg-lazy-note::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #ccc;
	border-top-color: #00680a;
	border-radius: 50%;
	animation: prinova-spin .8s linear infinite;
}

@keyframes prinova-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Header AJAX search: quantity + "Köp"
 * ------------------------------------------------------------------------- */
.wd-suggestion .prinova-search-buy {
	position: relative;
	z-index: 3; /* above WoodMart's a.wd-fill product link */
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.wd-suggestion .prinova-search-buy input.qty {
	width: 60px;
	min-width: 0;
	height: 36px;
	padding: 0 5px;
	text-align: center;
}

.wd-suggestion .prinova-search-buy .prinova-search-buy-btn {
	min-height: 36px;
	padding: 5px 16px;
	background-color: #00680a;
	color: #fff;
}

.wd-suggestion .prinova-search-buy .prinova-search-buy-btn:hover {
	background-color: #005308;
	color: #fff;
}

.wd-suggestion .prinova-search-buy .prinova-search-buy-btn.loading {
	opacity: .6;
	cursor: wait;
}

.wd-suggestion .prinova-search-buy .added_to_cart {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Mobile accessibility (2026-11-08). Measured with axe-core 4.10 + headless Chrome at 390 px:
 * card −/+ were 15/21 px wide (WCAG 2.5.8 minimum 24, Apple/Google 44–48), inputs under 16 px
 * make iOS zoom the page on tap, and the product page price was body-text size.
 * ------------------------------------------------------------------------- */

/* Product cards: WoodMart's "quantity overlap" draws −, qty, + over the left part of the buy
 * button. WoodMart's own card CSS (woo-product-loop-quick.css) is printed in <body>, after this
 * file, so these selectors repeat its own plus `body` to win.
 * Desktop (hover bar): --quantity-space wide enough for 36 px −/+ next to "KÖP NU". */
body .wd-product.wd-quantity-overlap {
	--quantity-space: 112px;
}

.wd-hover-quick.wd-quantity-overlap div.quantity .btn {
	min-width: 36px;
	font-size: 18px;
}

.wd-quantity-overlap div.quantity input.qty {
	width: 40px;
}

/* "KÖP NU" centred on one line in what's left of narrow desktop cards (67 px at 1100 px wide wrapped it) */
body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .wd-action-text {
	padding-inline: 4px;
	white-space: nowrap;
}

/* Phones/tablets (2026-11-09): WoodMart fixes the bar at 120 px with − 1 + squeezed into 80 px and the
 * cart icon on the left, so it neither followed the card width nor matched desktop (− 1 + then "KÖP NU").
 * Now the bar fills the image width at any size, in the desktop order: − qty + on the left (a shade
 * darker, WoodMart's brightness filter), the cart button on the right with about a third of the bar
 * (right-thumb side). At 320/390/430 px: cart 50/62/70 px, −/+ 31/39/43 px, number 26/33/37 px. */
@media (max-width: 1024px) {
	body .wd-product.wd-hover-quick.wd-quantity-overlap {
		--prinova-buy-width: max(48px, 36%);
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .quantity:not(.hidden) + .product_type_simple {
		width: 100%;
		padding-inline: 0;
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .quantity:not(.hidden) + .product_type_simple .wd-action-icon {
		inset-inline-start: auto;
		inset-inline-end: 0;
		width: var(--prinova-buy-width);
		padding-inline-end: 0;
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .quantity:not(.hidden) + .product_type_simple .wd-action-icon:after {
		inset-inline-start: calc(50% - .5em);
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn div.quantity {
		inset-inline-start: 0;
		inset-inline-end: var(--prinova-buy-width);
		display: flex;
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn div.quantity .btn,
	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn div.quantity input.qty {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	body .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn div.quantity input.qty {
		flex-grow: .85;
	}
}

/* Start page "Populära kategorier": the row has a dark background. On desktop the name sits on the image
 * in white; below 769 px WoodMart moves it under the image in dark grey (#333 on ~#3c3c3c, unreadable). */
@media (max-width: 768.98px) {
	body .startpage-products-section .cat-design-center .wd-entities-title,
	body .startpage-products-section .cat-design-center .wd-entities-title a {
		color: #fff;
	}

	body .startpage-products-section .cat-design-center :is(.more-products, .wd-cat-count),
	body .startpage-products-section .cat-design-center :is(.more-products, .wd-cat-count) a {
		color: rgba(255, 255, 255, .9);
	}
}

/* "Betalning & frakt" logos (custom HTML widgets 6 footer, 7 sidebar-1, 8 sidebar-shop; 2026-11-09).
 * Equal white tiles, 2 × 2 in sidebars and the desktop footer, one row of four on phones. The logo
 * files have different proportions and padding (PostNord is a JPG with a white box), so heights are
 * set per logo to make them look the same size. */
body .prinova-pay-ship__title {
	margin: 0 0 8px;
	color: #555;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body .prinova-pay-ship__logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .prinova-pay-ship__logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	background: #fff;
}

body .prinova-pay-ship__logos img {
	width: auto;
	max-width: 100%;
	height: 24px;
	object-fit: contain;
}

body .prinova-pay-ship__logos .pps-postnord {
	height: 38px; /* the JPG has white margins around the logo */
}

body .prinova-pay-ship__logos .pps-dhl {
	height: 18px;
}

@media (max-width: 768.98px) {
	body .footer-container .prinova-pay-ship__logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}

	body .footer-container .prinova-pay-ship__logos li {
		height: 44px;
		padding: 4px 6px;
	}
}

/* Only the slideout cart while it is open (WoodMart also opens the header dropdown after "Köp"; see
 * prinova.js). */
body:has(.cart-widget-side.wd-opened) .wd-dropdown-cart {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Accented buttons (card bar, "Lägg i varukorg", "Till kassan"…) hovered to Theme Settings' #9e9e9e:
 * white on light grey (2.7:1, below WCAG's 4.5:1), and on phones the grey stuck after a tap because touch
 * keeps :hover. A darker shade of the Prinova green instead. :root:root beats the settings file's :root. */
:root:root {
	--btn-accented-bgcolor-hover: #004f08;
}

/* Product page price: the amount stands out; "Inkl./Exkl. moms" stays small and grey.
 * Overrides style.css `span.amount.product-tax span { font-size: 15px }` only in the summary's
 * main price (the B2B "Ordinarie pris" line is a separate .reg-amount outside p.price). */
body.single-product .summary-inner p.price span.amount.product-tax {
	color: #555;
	font-size: 14px;
}

body.single-product .summary-inner p.price span.amount.product-tax .woocommerce-Price-amount,
body.single-product .summary-inner p.price span.amount.product-tax .woocommerce-Price-amount span {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

body.single-product .summary-inner p.price del span.amount.product-tax .woocommerce-Price-amount,
body.single-product .summary-inner p.price del span.amount.product-tax .woocommerce-Price-amount span {
	font-size: 18px;
	font-weight: 400;
}

body.single-product .summary-inner p.price {
	margin-bottom: 6px;
}

@media (max-width: 768px) {
	body.single-product .summary-inner p.price span.amount.product-tax .woocommerce-Price-amount,
	body.single-product .summary-inner p.price span.amount.product-tax .woocommerce-Price-amount span {
		font-size: 26px;
	}

	/* Buy row: 44 px −/+ and a button that fills the rest of the row */
	body.single-product .summary-inner form.cart:not(.variations_form) {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	body.single-product .summary-inner form.cart div.quantity .btn {
		min-width: 44px;
		height: 48px;
	}

	body.single-product .summary-inner form.cart input.qty {
		width: 52px;
		height: 48px;
	}

	body.single-product .summary-inner form.cart .single_add_to_cart_button {
		flex: 1 1 140px;
		min-height: 48px;
		margin: 0;
	}
}

/* Cart: −/+ and remove as real touch targets */
@media (max-width: 1024px) {
	.woocommerce-cart-form div.quantity .btn {
		min-width: 40px;
		height: 40px;
	}

	.woocommerce-cart-form div.quantity input.qty {
		width: 44px;
		height: 40px;
	}

	.woocommerce-cart-form a.remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}
}

/* iOS Safari zooms the page when a field under 16 px gets focus */
@media (max-width: 1024px) {
	input.qty,
	/* not the reg-number box: it is bigger already (33 px hero, 24 px side menus); 16 px made "ABC123" tiny */
	input[type="text"]:not(.hitta-reg input),
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* GDPR Cookie Compliance's floating gear covered card buy buttons and menu items on mobile.
 * Phones get the "Cookie-inställningar" link in the footer instead (inc/assets.php). */
@media (max-width: 1024px) {
	#moove_gdpr_save_popup_settings_button {
		display: none !important;
	}
}

/* WoodMart fades the card buy bar to 0.8 until hover; where it is shown without hover (phones, related
 * products) that left white on green at 3.5:1. It stays hidden via visibility until shown. */
body .wd-product.wd-hover-quick .wd-add-btn {
	opacity: 1;
}

/* Side cart: the × per item was 20×20 px */
body .widget_shopping_cart .mini_cart_item a.remove {
	width: 32px;
	height: 32px;
	line-height: 32px;
}

/* Mini cart subtotal row (a flex row, so spaces between the parts collapsed: "Delsumma:5,485.00 krInkl. moms").
 * Amount and woocommerce-tax's "Inkl./Exkl. moms" label on the right, like the cart page. */
body .widget_shopping_cart .woocommerce-mini-cart__total {
	align-items: baseline;
	gap: 6px;
}

body .widget_shopping_cart .woocommerce-mini-cart__total > strong {
	margin-inline-end: auto;
}

body .widget_shopping_cart .woocommerce-mini-cart__total .wctax-subtotal-label {
	color: #555;
	font-size: 13px;
	font-weight: 400;
}