/* Shop pages: product page, handleliste (cart), forespørsel (checkout) and the order summary
   (utomhus_is_shop_page()). WooCommerce's own stylesheets load only where its markup is: the
   handleliste, the checkout, the order summary and the account; product and list pages are
   styled by the theme alone. Buttons and notices are in base.css and components.css; the product
   card is in components.css: it shows on every page. */

/* ---- WooCommerce's disabled buttons ---- */

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt:disabled {
	padding: 0.75em 1.4em;
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* ---- Product page ---- */

/* Full rows: gallery | summary, then specifications | downloads on the same columns (a
   subgrid). A lone details block spans the row. */
.product-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"media summary"
		"details details";
	align-items: start;
	gap: var(--wp--preset--spacing--60);
}

.product-page__media {
	grid-area: media;
}

.product-page__summary {
	grid-area: summary;
}

.product-page__details {
	grid-area: details;
	display: grid;
	grid-template-columns: subgrid;
	align-items: start;
	row-gap: 0;
}

.product-page__details > :only-child {
	grid-column: 1 / -1;
}

/* The right column ("Nedlastinger", "I esken") stacks its blocks. Without specifications it spans
   the row and its blocks sit side by side; a lone one spans the row. */
.product-page__details-side:only-child {
	display: grid;
	grid-template-columns: subgrid;
	align-items: start;
}

.product-page__details-side:only-child > :only-child {
	grid-column: 1 / -1;
}

/* Product gallery (template-parts/product-gallery.php; theme.js adds buttons and the full-size
   view). The frame takes the first photo's shape; other photos fit inside it uncropped. */
.product-gallery__frame {
	position: relative;
}

.product-gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	grid-template-rows: minmax(0, 1fr);
	aspect-ratio: var(--product-gallery-ratio, 4 / 3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.product-gallery__track::-webkit-scrollbar {
	display: none;
}

/* Positioned so each slide's screen-reader label stays inside the scrolling track. */
.product-gallery__slide {
	position: relative;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.product-gallery__open {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.product-gallery__slide img,
.product-gallery--empty img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-gallery--empty img {
	border-radius: var(--utomhus-radius);
}

.product-gallery .carousel__button {
	top: 50%;
	transform: translateY(-50%);
}

.product-gallery .carousel__button--prev {
	left: 0.75rem;
}

.product-gallery .carousel__button--next {
	right: 0.75rem;
}

.product-gallery__thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0 0 2px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.product-gallery__thumbs li {
	flex: none;
}

/* Positioned so each thumbnail's screen-reader label stays inside the scrolling strip, rather
   than widening the page on phones. */
.product-gallery__thumbs a {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: calc(var(--utomhus-radius) / 2);
	opacity: 0.7;
}

.product-gallery__thumbs a[aria-current="true"],
.product-gallery__thumbs a:hover {
	border-color: var(--wp--preset--color--primary);
	opacity: 1;
}

.product-gallery__thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-page__title {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.product-page__description {
	color: var(--wp--preset--color--text);
	font-size: 0.95rem;
}

/* Read more: theme.js clamps long descriptions and adds the toggle. */
.read-more__content {
	position: relative;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.read-more.is-clamped .read-more__content::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2.5em;
	background: linear-gradient(transparent, var(--wp--preset--color--white));
}

.read-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0.25rem 0 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.product-page__price {
	margin: 1rem 0;
	font-size: 2rem;
}

.usp-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.usp-list li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.usp-list .icon {
	color: var(--wp--preset--color--brand);
}

/* Surface panels: the handleliste box, the partner brand box, the cart totals and the order
   review. */
.cart-box,
.partner-box,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce form.checkout #order_review {
	padding: 1.25rem 1.5rem;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.cart-box__title {
	margin-bottom: 0.75rem;
	font-size: 1rem;
}

.woocommerce div.product .cart-box form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1rem;
}

.woocommerce .quantity .qty {
	width: 6rem;
	min-height: 2.9rem;
	text-align: center;
}

.woocommerce div.product form.cart .button {
	min-height: 2.9rem;
	padding-inline: 1.75rem;
	float: none;
}

.utomhus-live-total {
	min-width: 160px;
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.utomhus-live-total__sum {
	font-size: 1.15rem;
}

.utomhus-live-total__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-xs);
	font-weight: 400;
}

/* Busy while the form is sent in the background (utomhus-site add-to-cart.js). */
.woocommerce div.product form.cart .button.is-busy {
	opacity: 0.7;
	cursor: progress;
}

/* WooCommerce's message after adding, shown in the box instead of above the product. */
.cart-box__status .woocommerce-message,
.cart-box__status .woocommerce-error,
.cart-box__status .woocommerce-info {
	margin: 0 0 1rem;
	background: var(--wp--preset--color--white);
}

.cart-box__note {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-xs);
}

.cart-box__note .icon {
	color: var(--wp--preset--color--primary);
}

.partner-box {
	margin-top: 1.25rem;
}

.partner-box img {
	display: block;
	max-width: 200px;
	height: auto;
	margin-bottom: 1rem;
}

.partner-box p:last-child {
	margin-bottom: 0;
}

/* Specifications (woocommerce/single-product/product-attributes.php): label and value rows,
   tinted in turns like the document links beside them. "I esken" (.box-contents) uses the same
   rows with one item each. Alone in the details row, the rows flow in two columns from 1101 px,
   and each line of two is tinted together. */
.spec-list,
.box-contents {
	display: grid;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.box-contents {
	padding: 0 0 1rem;
	list-style: none;
	font-weight: 500;
}

.spec-list__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 1rem;
}

.spec-list__row,
.box-contents li {
	padding: 0.6rem 0.75rem;
	border-radius: var(--utomhus-radius-small);
}

.spec-list__row:nth-child(odd),
.box-contents li:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.spec-list dt {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.spec-list dd {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

.spec-list dd p {
	margin: 0;
}

@media (min-width: 1101px) {
	.product-page__details > :only-child .spec-list,
	.product-page__details-side:only-child > :only-child .box-contents {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--60);
	}

	.product-page__details > :only-child .spec-list__row:nth-child(odd),
	.product-page__details-side:only-child > :only-child .box-contents li:nth-child(odd) {
		background: none;
	}

	.product-page__details > :only-child .spec-list__row:is(:nth-child(4n + 1), :nth-child(4n + 2)),
	.product-page__details-side:only-child > :only-child .box-contents li:is(:nth-child(4n + 1), :nth-child(4n + 2)) {
		background: var(--wp--preset--color--surface);
	}
}

/* Related products (woocommerce/single-product/related.php) fill whole rows: where the list
   has 3 columns, the fourth card is left out. */
@media (min-width: 761px) and (max-width: 1100px) {
	.related-products .product-grid > :nth-child(n + 4) {
		display: none;
	}
}

/* FAQ: the section header (title, lead, contact link) on the left and the questions on the
   right, on the product page's columns. */
.product-faq .section-header > .section-header__link {
	grid-column: 1;
	grid-row: auto;
	margin-top: 1rem;
}

@media (min-width: 901px) {
	.product-faq {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--60);
	}

	.product-faq > .section-header {
		margin-bottom: 0;
	}
}

@media (max-width: 900px) {
	.product-page {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"summary"
			"details";
		row-gap: 1.25rem;
	}
}

/* ---- Handleliste (cart) ---- */

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: none;
}

.woocommerce .woocommerce-cart-form {
	margin-bottom: 2rem;
}

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.85rem 0.5rem;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.woocommerce table.shop_table thead th {
	border-bottom: 2px solid var(--wp--preset--color--text);
}

.woocommerce table.cart img {
	width: 64px;
	border-radius: var(--utomhus-radius-small);
}

.woocommerce a.remove {
	color: var(--wp--preset--color--muted) !important;
	font-weight: 400;
}

.woocommerce a.remove:hover {
	background: var(--utomhus-error);
	color: var(--wp--preset--color--white) !important;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 420px;
	margin-left: auto;
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: 1.1rem;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	font-size: 1rem;
}

/* ---- Forespørsel (checkout) ---- */

.woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--60);
}

.woocommerce form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review {
	grid-column: 2;
}

.woocommerce form.checkout #order_review_heading {
	grid-row: 1;
	margin: 0;
	font-size: 1.1rem;
}

.woocommerce form.checkout #order_review {
	grid-row: 2;
	align-self: start;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce form .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce form .form-row .required {
	color: var(--utomhus-error);
	text-decoration: none;
}

.woocommerce-checkout #payment {
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--white);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--surface);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce #payment #place_order {
	width: 100%;
	font-size: 1rem;
}

@media (max-width: 900px) {
	.woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce form.checkout #order_review_heading,
	.woocommerce form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce form.checkout #order_review_heading {
		margin-top: 1.5rem;
	}
}

/* ---- Vent på svar (order summary) ---- */

.order-confirmation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--wp--preset--spacing--60);
}

.order-confirmation__lead {
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
}

/* The heading and text, spaced like blocks in the content. */
.order-confirmation__lead > * {
	margin-block: 0;
}

.order-confirmation__lead > * + * {
	margin-block-start: var(--wp--style--block-gap);
}

@media (max-width: 900px) {
	.order-confirmation {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Order tables (checkout and "Vent på svar") ---- */

.utomhus-order-table {
	font-size: var(--wp--preset--font-size--small);
}

.utomhus-order-table__product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.utomhus-order-table__product img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--utomhus-radius-small);
}

.utomhus-order-table__product a {
	color: inherit;
	text-decoration: none;
}

.utomhus-order-table .order-total th,
.utomhus-order-table .order-total td {
	border-top: 2px solid var(--wp--preset--color--text);
	font-weight: 600;
}

.order-confirmation__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.25rem;
	margin: 0;
}

.order-confirmation__details dt {
	font-weight: 600;
}

.order-confirmation__details dd {
	margin: 0;
}

/* ---- Checkout date field and picker ---- */

.woocommerce form .form-row #billing_date,
.woocommerce form .form-row .flatpickr-input {
	background: var(--wp--preset--color--white);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.flatpickr-day:hover {
	border-color: var(--wp--preset--color--brand);
	background: rgb(88 176 49 / 0.15);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	fill: var(--wp--preset--color--white);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: var(--wp--preset--color--white);
}

/* The cart and checkout shortcodes sit in page content; give them the wide width. */
.entry-content > .woocommerce {
	max-width: var(--wp--style--global--wide-size) !important;
}