/* Account page refinements for page 434. */
body.page-id-434 {
	--nr-account-blue: #058343;
	--nr-account-muted: #046A36;
	--nr-account-line: rgba(24, 26, 27, 0.1);
}

.page-id-434 .account-intro-card {
	border-color: var(--nr-account-line) !important;
	box-shadow: 0 4px 8px rgba(24, 26, 27, 0.06) !important;
}

.page-id-434 .account-main-card,
.page-id-434 .account-note-card,
.page-id-434 .account-faq-item,
.page-id-434 .account-support-card {
	border-color: var(--nr-account-line) !important;
	box-shadow: none !important;
}

.page-id-434 .elementor-element.elementor-element-dc55f0e {
	display: none;
}

.page-id-434 .account-main-card > .account-note-card {
	width: 100%;
	max-width: none;
	margin: 2px 0 4px;
	padding: 18px 20px !important;
	border-radius: 5px !important;
	background: #fff7d8 !important;
}

.page-id-434 .account-content-stack > .account-note-card {
	order: -1;
	width: 100%;
	max-width: none;
	margin: 0 0 2px;
	padding: 18px 20px !important;
	border-radius: 5px !important;
	background: #fff7d8 !important;
}

.page-id-434 .account-intro-card .elementor-widget-text-editor,
.page-id-434 .account-main-card .elementor-widget-text-editor,
.page-id-434 .account-faq-section > .elementor-widget-text-editor,
.page-id-434 .account-support-card .elementor-widget-text-editor {
	max-width: 72ch;
}

.page-id-434 .nr-inline-label,
.page-id-434 .nr-note-copy,
.page-id-434 .nr-note-strong,
.page-id-434 .nr-support-copy {
	margin: 0;
}

.page-id-434 .nr-inline-label {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.page-id-434 .nr-note-copy,
.page-id-434 .nr-note-strong {
	color: #5c5030;
	font-size: 14px;
	line-height: 1.6;
}

.page-id-434 .account-faq-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.page-id-434 .account-faq-item {
	padding: 18px 20px 20px !important;
	gap: 10px !important;
	align-items: flex-start;
}

.page-id-434 .account-faq-item h3 {
	margin: 0;
	font-size: clamp(20px, 1.55vw, 24px);
	line-height: 1.08;
	text-wrap: balance;
}

.page-id-434 .account-faq-item p {
	margin: 0;
	color: var(--nr-account-muted);
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

.page-id-434 .account-support-card {
	text-align: center;
	padding-block: 40px !important;
}

.page-id-434 .account-support-card .elementor-heading-title {
	max-width: 14ch;
	margin-inline: auto;
	line-height: 0.98;
	text-wrap: balance;
}

.page-id-434 .account-support-card .elementor-button {
	padding: 14px 22px;
	border-radius: 4px;
	background: var(--nr-account-blue);
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.page-id-434 .account-support-card .elementor-button:hover,
.page-id-434 .account-support-card .elementor-button:focus {
	background: #25272A;
	color: #fff;
}

/* Buttons in the account content - Ordrer > Handlinger (Betal, Vis, Kanseller,
 * Angre kjøp), the order's own Handlinger, Bestill på nytt, previous/next:
 * white on green.
 * The account shortcode widget's custom CSS (Elementor, page 434, element
 * 2831b7c0, compiled into uploads/elementor/css/post-434.css) colours every
 * link in the content green, and that rule (specificity 0,6,2; with :hover or
 * :focus 0,7,2) outweighs the widget's own button rule (0,5,1): green text on
 * a green button. Nordisk fixed the same rule with a:not(.button) in the
 * widget. Here instead, so a regenerated post-434.css or a copied widget
 * cannot bring it back: the selectors name no Elementor ids, and the leading
 * "html" makes them 0,6,3 and 0,7,3 - just above that rule, without
 * !important. Without inline-flex the label sits at the top of the 40/50 px
 * tall button (line-height 1). */
html body.logged-in.woocommerce-account.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	background-color: #058343;
	color: #fff;
	text-decoration: none;
}

html body.logged-in.woocommerce-account.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button:hover,
html body.logged-in.woocommerce-account.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button:focus {
	background-color: #046b37;
	color: #fff;
	text-decoration: none;
}

/* Space between the buttons side by side (Betal, Vis, Avbryt, Angrerett) and
 * between rows when they wrap in the narrow Handlinger column. */
html body.logged-in.woocommerce-account.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button + a.button {
	margin-left: 8px;
}

html body.logged-in.woocommerce-account.woocommerce-page .woocommerce .woocommerce-MyAccount-content td a.button {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* Notices inside the account content (e.g. "Ordren din ble kansellert.")
 * take the content column width; responsive-fixes.css sizes every notice
 * wrapper to the page width (min(1280px, 100vw - 48px) !important), which made
 * them stick out of the box. */
html body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-notices-wrapper {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 0 20px !important;
}

@media (max-width: 1024px) {
	.page-id-434 .account-faq-grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	.page-id-434 .account-main-card > .account-note-card {
		margin: 0;
		padding: 18px !important;
	}

	.page-id-434 .account-support-card .elementor-heading-title {
		max-width: 16ch;
	}
}

@media (max-width: 767px) {
	.page-id-434 .account-intro-card,
	.page-id-434 .account-main-card,
	.page-id-434 .account-support-card {
		border-radius: 5px !important;
	}

	.page-id-434 .account-faq-item {
		padding: 16px 18px 18px !important;
	}

	.page-id-434 .account-faq-item h3 {
		font-size: 18px;
	}

	.page-id-434 .account-faq-item p,
	.page-id-434 .nr-note-copy,
	.page-id-434 .nr-note-strong,
	.page-id-434 .account-support-card .elementor-widget-text-editor p {
		font-size: 14px;
	}

	.page-id-434 .account-support-card {
		padding: 26px 18px !important;
	}

	.page-id-434 .account-support-card .elementor-heading-title {
		max-width: 11ch;
		font-size: 18px;
	}
}
