/*
 * AR button.
 *
 * A real stylesheet rather than an inline <style>, for the same reason as
 * room.css: the shortcode can render more than once per request — an excerpt or
 * meta-description pass runs do_shortcode and throws the result away — and a
 * print-once static guard then spends the CSS on output nobody sees. That is
 * what killed the room tabs when [ofir_room] moved into the product
 * description, and [ofir_ar] sits in exactly the same place.
 *
 * Built to disappear into the host theme rather than to look like itself: font
 * family, size and line-height are INHERITED, and the box geometry (6px/20px
 * padding, 3px radius, 2px border) is the theme's own add-to-cart metric —
 * which lands both buttons on the same 50px height. It is deliberately outlined
 * rather than filled: "Tilføj til kurv" is the primary action on this page and
 * AR must not compete with it.
 */

.ofir-ar { margin: 1.5em 0; }

.ofir-ar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	max-width: 100%;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.7;
	padding: 6px 20px;
	border: 2px solid #252525;
	border-radius: 3px;
	background: transparent;
	color: #252525;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ofir-ar__btn:hover,
.ofir-ar__btn:focus-visible { background: #252525; color: #fff; }
.ofir-ar__btn:focus-visible { outline: 2px solid #252525; outline-offset: 2px; }

/*
 * Kept for the one case that still warrants it — a product whose meta carries
 * no usable variant at all. A button that is merely WAITING for a choice is no
 * longer disabled: see ar.js.
 */
.ofir-ar__btn.is-disabled { opacity: .4; pointer-events: none; }

.ofir-ar__hint { margin: .5em 0 0; font-size: .8em; line-height: 1.4; opacity: .7; }

/*
 * The waiting state. The button works before a size is picked, but it is then
 * showing a size nobody chose — so this has to read as "do something", not as
 * a caption. Full opacity, a size up from the footnote, and the theme's own
 * error red rather than a shout: it sits beside "Tilføj til kurv" and must not
 * look like the page has failed.
 */
.ofir-ar__hint.is-warn {
	opacity: 1;
	font-size: .875em;
	font-weight: 600;
	color: #b3261e;
}

/*
 * Hidden on a mouse-driven desktop, where the button can only ever say "open
 * this on your phone" — a dead end dressed as an action, sitting next to a room
 * preview that works. Matched on pointer/hover rather than width alone so a
 * touch laptop and an iPad still get AR.
 */
@media (min-width: 1025px) and (pointer: fine) and (hover: hover) {
	.ofir-ar { display: none; }
}

/*
 * No breakpoint of its own beyond that, on purpose. The theme keeps add-to-cart
 * inline at every width, so a full-width AR button on a phone would end up
 * WIDER than the primary action and pull rank on it. Measured at 375 / 768 /
 * 1280: 50px tall throughout, matching add-to-cart, no horizontal overflow.
 */