/* Buy-button product page look (inc/pdp-buttons.php).
   Colours come from CSS custom properties set per product on .nn-pb itself. */

.nn-pb {
	--nn-pb-accent: #2D4838;
	--nn-pb-accent-text: #ffffff;
	--nn-pb-selected-bg: #f4f9f3;
	--nn-pb-bg: #ffffff;
	--nn-pb-border: #cccccc;
	--nn-pb-text: #231f20;
	--nn-pb-muted: #434343;
	--nn-pb-radius: 8px;
	margin: 0 0 20px;
}

.nn-pb-heading {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nn-pb-text);
	text-align: center;
}

.nn-pb-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-pb-item {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.nn-pb-list .nn-pb-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	background: var(--nn-pb-bg);
	border: 1px solid var(--nn-pb-border);
	border-radius: var(--nn-pb-radius);
	color: var(--nn-pb-text);
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.nn-pb-list .nn-pb-btn:hover {
	border-color: var(--nn-pb-accent);
}

/* The radio stays in the DOM for keyboard and screen readers. */
.nn-pb-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.nn-pb-item:has(.nn-pb-input:checked) .nn-pb-btn,
.nn-pb-item.is-selected .nn-pb-btn {
	background: var(--nn-pb-selected-bg);
	border-color: var(--nn-pb-accent);
	box-shadow: inset 0 0 0 1px var(--nn-pb-accent);
}

/* On the item, not the label inside it. Chrome treats a mouse click on a radio
   as focus-visible, so a ring around the label drew a second rounded rectangle
   inside the one-time card - which reads as a duplicated border, not as focus.
   Around the whole option it reads as what it is. */
.nn-pb-item:has(.nn-pb-input:focus-visible) {
	outline: 2px solid var(--nn-pb-accent);
	outline-offset: 2px;
	border-radius: var(--nn-pb-radius);
}

.nn-pb-item.is-out-of-stock .nn-pb-btn {
	cursor: not-allowed;
	opacity: 0.55;
}

.nn-pb-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nn-pb-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--nn-pb-text);
}

/* Beside the plan name the pill reads as part of the offer, not of the price.
   The title is bold at 15px, so the pill has to opt out of both. */
.nn-pb-pill--title {
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	vertical-align: 2px;
}

.nn-pb-meta {
	font-size: 13px;
	color: var(--nn-pb-muted);
}

/* Capped at half the row so the plan name keeps room on a phone: unshrinkable,
   the first-order line ("177,80kr. i dag, og derefter 190,50kr.") took its full
   one-line width and squeezed the title to a letter per line. min-content keeps
   a plain price from shrinking under its own width. */
.nn-pb-prices {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-width: min-content;
	max-width: 50%;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
}

/* Price and struck regular. Both layouts ship the same markup in the same order
   (price first, which is also the order it should be read out); only this
   differs, so nothing that rewrites prices has to know which one is on. */
.nn-pb-amounts {
	display: flex;
	flex-wrap: wrap;
}

/* One line, the price first and the old price struck beside it. */
.nn-pb--price-inline .nn-pb-amounts {
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
}

/* Or stacked. The markup is price then struck price, so "below" is the natural
   order and "above" is the one that flips it. */
.nn-pb--price-stacked .nn-pb-amounts,
.nn-pb--price-stacked-below .nn-pb-amounts {
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
}

.nn-pb--price-stacked .nn-pb-del {
	order: -1;
}

.nn-pb-prices .nn-pb-del {
	font-size: 13px;
	color: var(--nn-pb-muted);
	text-decoration: line-through;
}

.nn-pb-prices .nn-pb-price {
	font-size: 16px;
	font-weight: 600;
	color: var(--nn-pb-text);
}

/* "£10.00 today, then £15.65" stands in for the price line on plans a sale or
   an AWDR rule undercuts for the first order: today's price carries the price
   styling, the renewal is the quieter half. */
.nn-pb-amounts--first {
	align-items: baseline;
	gap: 4px;
	font-size: 12px;
	color: var(--nn-pb-muted);
}

/* The stacked layout turns .nn-pb-amounts into a column, which would break
   this sentence into three right-aligned rows. It is one line whatever the
   price layout is set to. */
.nn-pb--price-stacked .nn-pb-amounts--first,
.nn-pb--price-stacked-below .nn-pb-amounts--first {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 4px;
}

.nn-pb--price-stacked.nn-pb--grid-2 .nn-pb-amounts--first,
.nn-pb--price-stacked.nn-pb--grid-3 .nn-pb-amounts--first,
.nn-pb--price-stacked-below.nn-pb--grid-2 .nn-pb-amounts--first,
.nn-pb--price-stacked-below.nn-pb--grid-3 .nn-pb-amounts--first {
	justify-content: flex-start;
}

.nn-pb-amounts--first .nn-pb-then {
	font-weight: 600;
	color: var(--nn-pb-text);
	white-space: nowrap;
}

.nn-pb-prices .nn-pb-day {
	font-size: 12px;
	color: var(--nn-pb-muted);
}

/* Save pill, shown only when plan discounts escalate between buttons. Outlined
   so it stays distinct from the solid corner flag. */
.nn-pb-pill {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid var(--nn-pb-accent);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--nn-pb-accent);
	background: transparent;
}

/* Under the price the column's 1px gap left the pill touching the struck price
   or the "then" line above it. */
.nn-pb-prices > .nn-pb-pill {
	margin-top: 6px;
}

.nn-pb-media {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 6px;
}

.nn-pb-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Corner flag. */
.nn-pb-flag {
	position: absolute;
	top: -9px;
	right: 12px;
	z-index: 1;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--nn-pb-accent);
	color: var(--nn-pb-accent-text);
}

.nn-pb-flag--sale,
.nn-pb-flag--oos {
	background: var(--nn-pb-muted);
}

/* Layout: stacked rows. */
.nn-pb--rows .nn-pb-list,
.nn-pb--rows-image .nn-pb-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* At 320 "Engangskøb" broke mid-word beside the image and price. */
@media (max-width: 360px) {
	.nn-pb--rows-image .nn-pb-list .nn-pb-btn {
		gap: 10px;
		padding-right: 12px;
		padding-left: 12px;
	}

	.nn-pb--rows-image .nn-pb-media {
		width: 44px;
		height: 44px;
	}
}

/* Layout: grid. */
.nn-pb--grid-2 .nn-pb-list,
.nn-pb--grid-3 .nn-pb-list {
	display: grid;
	gap: 18px 10px;
}

.nn-pb--grid-2 .nn-pb-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nn-pb--grid-3 .nn-pb-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nn-pb--grid-2 .nn-pb-list .nn-pb-btn,
.nn-pb--grid-3 .nn-pb-list .nn-pb-btn {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	padding: 16px 14px;
}

.nn-pb--grid-2 .nn-pb-prices,
.nn-pb--grid-3 .nn-pb-prices {
	align-items: flex-start;
	max-width: none;
	margin-top: auto;
	text-align: left;
}

.nn-pb--grid-2 .nn-pb-amounts,
.nn-pb--grid-3 .nn-pb-amounts {
	justify-content: flex-start;
	align-items: flex-start;
}

/* A grid card is too narrow to hold the quantity box (50px input plus a 34px
   stepper hanging off it) and a button side by side: the button collapses to
   about 50px and pushes out of the card. Stack them instead. */
.nn-pb--grid-2 .nn-pb-buy,
.nn-pb--grid-3 .nn-pb-buy {
	flex-wrap: wrap;
	gap: 10px 0;
}

.nn-pb--grid-2 .nn-pb-cta-slot,
.nn-pb--grid-3 .nn-pb-cta-slot {
	flex: 1 1 100%;
}

@media (max-width: 560px) {
	.nn-pb--grid-3 .nn-pb-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Layout: segmented control, with the selected option detailed underneath. */
.nn-pb--segmented .nn-pb-list {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--nn-pb-border);
	border-radius: var(--nn-pb-radius);
}

.nn-pb--segmented .nn-pb-item {
	flex: 1 1 0;
	min-width: 0;
}

/* Four or five plans never fit one strip: measured overflow ran from 19px at
   768 up to 108px at 320, and the list clips what does not fit. Wrapping keeps
   every option reachable - two per row on a phone, three on a tablet - which a
   clipped strip does not. Titles keep their own rows rather than being squeezed
   into 54px columns three lines deep. */
@media (max-width: 1023px) {
	.nn-pb--segmented .nn-pb-list {
		flex-wrap: wrap;
	}

	.nn-pb--segmented .nn-pb-item {
		flex: 1 0 33.333%;
		border-top: 1px solid var(--nn-pb-border);
	}

	.nn-pb--segmented .nn-pb-item:nth-child(-n+3) {
		border-top: 0;
	}
}

@media (max-width: 600px) {
	.nn-pb--segmented .nn-pb-item {
		flex: 1 0 50%;
	}

	.nn-pb--segmented .nn-pb-item:nth-child(3) {
		border-top: 1px solid var(--nn-pb-border);
	}
}

.nn-pb--segmented .nn-pb-item + .nn-pb-item {
	border-left: 1px solid var(--nn-pb-border);
}

.nn-pb--segmented .nn-pb-list .nn-pb-btn {
	justify-content: center;
	height: 100%;
	padding: 12px 10px;
	border: 0;
	border-radius: 0;
	text-align: center;
}

.nn-pb--segmented .nn-pb-item:has(.nn-pb-input:checked) .nn-pb-btn,
.nn-pb--segmented .nn-pb-item.is-selected .nn-pb-btn {
	box-shadow: none;
	background: var(--nn-pb-accent);
}

.nn-pb--segmented .nn-pb-item:has(.nn-pb-input:checked) .nn-pb-title,
.nn-pb--segmented .nn-pb-item.is-selected .nn-pb-title {
	color: var(--nn-pb-accent-text);
}

/* The selected tab is filled with the accent, so an accent-coloured pill on it
   would be invisible. */
.nn-pb--segmented .nn-pb-item:has(.nn-pb-input:checked) .nn-pb-pill--title,
.nn-pb--segmented .nn-pb-item.is-selected .nn-pb-pill--title {
	border-color: var(--nn-pb-accent-text);
	color: var(--nn-pb-accent-text);
}

.nn-pb--segmented .nn-pb-body {
	align-items: center;
}

.nn-pb--segmented .nn-pb-title {
	font-size: 14px;
}

/* The bar carries names only; everything else moves to the detail panel, flags
   included - they are shown there rather than dropped. */
.nn-pb--segmented .nn-pb-meta,
.nn-pb--segmented .nn-pb-prices,
.nn-pb--segmented .nn-pb-item > .nn-pb-btn .nn-pb-flag {
	display: none;
}

.nn-pb-detail .nn-pb-flag {
	position: static;
	align-self: center;
}

.nn-pb-details {
	margin-top: 12px;
}

.nn-pb-detail {
	display: none;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.nn-pb-detail.is-shown {
	display: flex;
}

.nn-pb-detail-prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.nn-pb-detail-prices .nn-pb-price {
	font-size: 20px;
	font-weight: 600;
	color: var(--nn-pb-text);
}

.nn-pb-detail-prices .nn-pb-del {
	font-size: 14px;
	color: var(--nn-pb-muted);
	text-decoration: line-through;
}

.nn-pb-detail-prices .nn-pb-day,
.nn-pb-detail-meta {
	font-size: 13px;
	color: var(--nn-pb-muted);
}

.nn-pb-detail-prices .nn-pb-pill {
	font-size: 12px;
}

/* Page chrome owned by this look. */
.nn-pdp-buttons .summary .product_title {
	margin-bottom: 8px;
}

.nn-pdp-buttons .summary .nn-look-price {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
}

.nn-pdp-buttons .summary .nn-look-price del {
	margin-right: 6px;
	font-weight: 400;
	opacity: 0.6;
}

.nn-pdp-buttons .summary .nn-look-sub-suffix {
	font-size: 14px;
	font-weight: 400;
	color: var(--nn-color-gray-text, #434343);
}

.nn-pdp-buttons .nn-look-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.nn-pdp-buttons .summary .woocommerce-product-details__short-description {
	margin-bottom: 16px;
}

/* WCS-ATT's own scheme inputs stay in the DOM and stay authoritative, but the
   buttons are the interface. */
.nn-pdp-buttons .summary .wcsatt-options-wrapper {
	display: none !important;
}

/* A plan button carries its own quantity and, on a variable product, its own
   size. Both controls stay hidden until the shopper picks one-time, which is
   the only option that needs them: JS puts .nn-pb-onetime on the form. */
.nn-pdp-buttons .summary form.cart .quantity,
.nn-pdp-buttons .summary form.cart .variations,
.nn-pdp-buttons .product .variations .reset_variations,
.nn-pdp-buttons .product .summary .reset_variations {
	display: none !important;
}

.nn-pdp-buttons .summary form.cart.nn-pb-onetime .quantity {
	display: block !important;
}

/* The buy row inside a button: the quantity box and, when the Add to cart
   button is set to sit inside the selection, the real button. Both are moved
   in by pdp-buttons.js. Only the selected button carries a row. */
.nn-pb-buy {
	display: none;
}

.nn-pb-item.has-buy:has(.nn-pb-input:checked) > .nn-pb-buy,
.nn-pb-item.has-buy.is-selected > .nn-pb-buy {
	display: flex;
	align-items: center;
	margin: 0 16px 14px;
	padding-top: 12px;
	border-top: 1px solid var(--nn-pb-border);
}

/* The size choices already drew that divider. */
.nn-pb-sizes--inside + .nn-pb-buy {
	padding-top: 0;
	border-top: 0;
}

.nn-pb-qty-slot {
	flex: 0 0 auto;
}

.nn-pb-qty-slot--below {
	display: none;
}

form.nn-pb-onetime .nn-pb-qty-slot--below {
	display: block;
	margin-top: 12px;
}

.nn-pb-cta-slot--below {
	display: none;
}

form.nn-pb-onetime .nn-pb-cta-slot--below {
	display: block;
	margin-top: 12px;
}

/* The theme hangs the stepper 34px past the right edge of the quantity box, so
   the box has to shrink to its input or the two drift apart. The margin hands
   that 34px back as layout space, which is also the gap to whatever follows. */
.nn-pb-qty-slot .quantity {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 46px 0 0 !important;
	float: none !important;
	vertical-align: top;
}

/* The theme sizes this input at 52px with the same specificity as a plain
   .nn-pb-qty-slot rule, and wins on order - so match the 48px button from
   inside the look's own scope. */
.nn-pdp-buttons .summary form.cart .nn-pb-qty-slot .quantity input.qty {
	height: 48px;
	margin: 0;
}

/* Add to cart, moved into the selected button. */
.nn-pb-cta-slot {
	flex: 1 1 auto;
	min-width: 0;
}

.nn-pb-cta-slot .single_add_to_cart_button {
	float: none !important;
	width: 100% !important;
	height: 48px;
	margin: 0 !important;
	line-height: 48px;
}

/* Segmented: the panel under the strip is where the selection's controls live,
   so the row is always on when the panel is. */
.nn-pb-detail .nn-pb-buy {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 12px;
}

.nn-pb-detail .nn-pb-sizes--inside {
	display: flex;
	width: 100%;
	margin: 12px 0 0;
	padding-top: 0;
	border-top: 0;
}

/* Nothing is left under the group once the button moves up into it. */
.nn-pdp-buttons .summary form.cart:has(.nn-pb--cta-inside) {
	margin-bottom: 0;
}

/* "Add to an existing subscription?" is WCS-ATT's own control and only means
   anything for a subscription - WCS-ATT hides it for one-time itself, but it
   re-renders on every variation change, so it flashed in while the shopper
   walked the sizes. Inline styles are what it toggles, hence !important. */
form.cart.nn-pb-onetime .wcsatt-add-to-subscription-wrapper {
	display: none !important;
}

/* WooCommerce's variation wrap is down to hidden machinery under this look - the
   variation price, WCS-ATT's inputs, the sticky-ATC intersector - plus the one
   control that is still real. Those emptied blocks are zero-height, but their
   margins collapse through the wrap as dead space above the checkbox, so the
   gap is set here deliberately instead. */
.nn-pdp-buttons .summary form.cart .woocommerce-variation-price,
.nn-pdp-buttons .summary form.cart .woocommerce-variation-description,
.nn-pdp-buttons .summary form.cart .woocommerce-variation-availability,
.nn-pdp-buttons .summary form.cart .wcsatt-add-to-subscription-action-label {
	margin-top: 0;
	margin-bottom: 0;
}

/* Nearly all of that dead space was one clearfix: the wrapper's ::before is
   display:table with a 2em top margin, which does not collapse and so pushed
   the checkbox 28px down a wrap that is otherwise empty under this look. The
   gap is set here instead. */
.nn-pdp-buttons .summary form.cart .wcsatt-add-to-subscription-wrapper::before {
	margin-top: 0;
}

.nn-pdp-buttons .summary form.cart .wcsatt-add-to-subscription-wrapper {
	margin-top: 12px;
}

/* The stock variation picker stays hidden even on one-time: the size chips
   inside the one-time button replace it. It remains in the DOM because
   WooCommerce reads the selects to resolve the variation. */

.nn-pb-from {
	font-size: 12px;
	font-weight: 400;
	color: var(--nn-pb-muted);
}

.nn-pb-item.is-one-time .nn-pb-btn {
	border-style: dashed;
}

.nn-pb-item.is-one-time:has(.nn-pb-input:checked) .nn-pb-btn,
.nn-pb-item.is-one-time.is-selected .nn-pb-btn {
	border-style: solid;
}

/* Sizes and the quantity live inside the one-time button: it is one control,
   not a button plus a second picker underneath. The item takes over the border
   so the nested controls sit within it. */
.nn-pb-item.has-sizes,
.nn-pb-item.has-qty {
	background: var(--nn-pb-bg);
	border: 1px dashed var(--nn-pb-border);
	border-radius: var(--nn-pb-radius);
}

/* A plan button only becomes a card while it is the one holding Add to cart,
   so the unselected plans keep their own outline. */
.nn-pb-item.has-sizes .nn-pb-btn,
.nn-pb-item.has-qty .nn-pb-btn,
.nn-pb-item.has-buy:has(.nn-pb-input:checked) .nn-pb-btn,
.nn-pb-item.has-buy.is-selected .nn-pb-btn {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.nn-pb-item.has-buy:has(.nn-pb-input:checked),
.nn-pb-item.has-buy.is-selected,
.nn-pb-item.has-sizes:has(.nn-pb-input:checked),
.nn-pb-item.has-sizes.is-selected {
	background: var(--nn-pb-selected-bg);
	border: 1px solid var(--nn-pb-accent);
	border-radius: var(--nn-pb-radius);
	box-shadow: inset 0 0 0 1px var(--nn-pb-accent);
}

.nn-pb-sizes {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
}

/* Nested in the one-time button, divided off from its own row. */
.nn-pb-sizes--inside {
	margin: 0 16px 14px;
	padding-top: 12px;
	border-top: 1px solid var(--nn-pb-border);
}

.nn-pb-item.has-sizes:has(.nn-pb-input:checked) .nn-pb-sizes--inside,
.nn-pb-item.has-sizes.is-selected .nn-pb-sizes--inside {
	display: flex;
}

/* Or as their own row under the whole group. The form carries nn-pb-onetime
   while one-time is the chosen option. */
.nn-pb-sizes--below {
	margin-top: 12px;
}

form.nn-pb-onetime .nn-pb-sizes--below {
	display: flex;
}

.nn-pb-sizes .nn-pb-size {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	padding: 7px 12px;
	background: var(--nn-pb-bg);
	border: 1px solid var(--nn-pb-border);
	border-radius: 6px;
	color: var(--nn-pb-text);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nn-pb-sizes .nn-pb-size:hover:not(:disabled) {
	border-color: var(--nn-pb-accent);
}

.nn-pb-sizes .nn-pb-size.is-selected {
	background: var(--nn-pb-accent);
	border-color: var(--nn-pb-accent);
}

.nn-pb-sizes .nn-pb-size.is-selected .nn-pb-size-name,
.nn-pb-sizes .nn-pb-size.is-selected .nn-pb-size-note {
	color: var(--nn-pb-accent-text);
}

.nn-pb-sizes .nn-pb-size:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.nn-pb-size-name {
	font-size: 13px;
	font-weight: 600;
}

/* Image style: the variation picture carries the choice, the name labels it. */
.nn-pb-sizes--images .nn-pb-size {
	align-items: center;
	padding: 8px;
	text-align: center;
}

.nn-pb-size-media {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
}

.nn-pb-size-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nn-pb-sizes--images .nn-pb-size-name {
	font-size: 12px;
}

.nn-pb-size-note {
	font-size: 11px;
	color: var(--nn-pb-muted);
}

.nn-pdp-buttons .summary form.cart .single_add_to_cart_button {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* CommerceKit's sticky add-to-cart is a full-height panel, not a thin bar, so
   the clone shows the whole group: the shopper can change plan from it and it
   stays in step with the main form through pdp-buttons.js. Its heading would
   repeat the panel's own title. */
.nn-pdp-buttons form.commercekit_sticky-atc .nn-pb-heading {
	display: none;
}