/*
 * SkillGrove portal: My Account area and sign-in card.
 * Ported from the L'Art d'Etre Humain account area (dgs-ladh/assets/css/frontend.css),
 * restyled with the SkillGrove palette (GreenShift Stylebook colours, with hex fallbacks).
 */
:root {
	--sga-ink: var(--gs-colorink, #13231b);
	--sga-muted: var(--gs-colorink-muted, #56665d);
	--sga-line: var(--gs-colorline, #d9e1da);
	--sga-line-strong: var(--gs-colorline-strong, #8a9a90);
	--sga-surface: var(--gs-colorsurface, #ffffff);
	--sga-ground: var(--gs-colorground, #f6f8f4);
	--sga-sunken: var(--gs-colorsurface-sunken, #edf2ed);
	--sga-canopy: var(--gs-colorcanopy, #1f5b45);
	--sga-canopy-hover: var(--gs-colorcanopy-hover, #174a37);
	--sga-on-canopy: var(--gs-coloron-canopy, #ffffff);
	--sga-forest: var(--gs-colorforest, #0f3d2c);
	--sga-on-forest: var(--gs-coloron-forest, #f6f8f4);
	--sga-moss: var(--gs-colormoss-soft, #ddede2);
	--sga-pollen-soft: var(--gs-colorpollen-soft, #fcebc0);
	--sga-danger: var(--gs-colordanger, #b42318);
	--sga-display: "Bricolage Grotesque", sans-serif;
}

/* Sign-in card (DGS Toolkit login block, shown by My Account when logged out). */
.sga-account .dgs-connexion-carte {
	background: var(--sga-surface);
	border: 1px solid var(--sga-line);
	border-radius: 24px 8px;
	box-shadow: 0 1px 2px rgba(19, 35, 27, 0.06), 0 8px 24px rgba(19, 35, 27, 0.08);
	padding: clamp(1.75em, 4vw, 2.5em);
	max-width: 480px;
	width: 100%;
	box-sizing: border-box;
}

.sga-account .woocommerce:has(> .dgs-connexion-carte) {
	justify-content: center;
	padding: clamp(24px, 6vw, 72px) 0;
}

.sga-account .dgs-connexion-titre {
	margin: 0 0 0.4em;
	color: var(--sga-ink);
	font-family: var(--sga-display);
	font-size: 2em;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sga-account .dgs-connexion-intro,
.sga-account .dgs-connexion-confirmation,
.sga-account .dgs-connexion-deja {
	color: var(--sga-muted);
	margin: 0 0 1.5em;
}

.sga-account .dgs-connexion-carte label {
	display: block;
	margin: 0 0 0.4em;
	color: var(--sga-ink);
	font-weight: 700;
}

.sga-account .dgs-formulaire-connexion p {
	margin: 0 0 1em;
}

.sga-account .dgs-formulaire-connexion input[type="email"],
.sga-account .dgs-formulaire-connexion input.dgs-connexion-code {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75em 1em;
	font: inherit;
	color: var(--sga-ink);
	background: var(--sga-surface);
	border: 1px solid var(--sga-line-strong);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sga-account .dgs-formulaire-connexion input.dgs-connexion-code {
	max-width: 260px;
	font-size: 1.6em;
	letter-spacing: 0.35em;
}

.sga-account .dgs-formulaire-connexion input:focus {
	outline: none;
	border-color: var(--sga-canopy);
	box-shadow: 0 0 0 3px rgba(31, 91, 69, 0.2);
}

.sga-account .dgs-connexion-erreur {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid var(--sga-danger);
	border-left-width: 4px;
	border-radius: 10px;
	background: var(--sga-surface);
	color: var(--sga-ink);
}

/* Welcome banner, logged-in customers. */
.sga-account-welcome {
	margin: 0 0 2em;
	padding: 1.1em 1.4em;
	background: var(--sga-moss);
	border-radius: 18px 6px;
}

.sga-account-welcome p {
	margin: 0;
	color: var(--sga-forest);
}

/* Layout: navigation + content of the current endpoint. */
.sga-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	align-items: flex-start;
}

/* WooCommerce caps this at 1000px without centring it (woocommerce-blocktheme.css). */
.woocommerce-account .sga-account .woocommerce {
	max-width: none;
}

.sga-account .woocommerce-notices-wrapper:empty {
	display: none;
}

.sga-account .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.sga-account .woocommerce-MyAccount-navigation {
	flex: 0 0 230px;
	background: var(--sga-surface);
	border: 1px solid var(--sga-line);
	border-radius: 18px 6px;
	padding: 0.6em;
	box-sizing: border-box;
}

.sga-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sga-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
	margin: 0;
	padding: 0;
}

.sga-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.65em 1em;
	border-radius: 10px;
	color: var(--sga-ink);
	text-decoration: none;
	font-weight: 700;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

.sga-account .woocommerce-MyAccount-navigation-link a:hover,
.sga-account .woocommerce-MyAccount-navigation-link a:focus {
	background: var(--sga-sunken);
	color: var(--sga-canopy);
}

.sga-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--sga-forest);
	color: var(--sga-on-forest);
}

.sga-account .woocommerce-MyAccount-content {
	flex: 1 1 420px;
	min-width: 0;
	box-sizing: border-box;
}

.sga-account .woocommerce-MyAccount-content h1,
.sga-account .woocommerce-MyAccount-content h2,
.sga-account .woocommerce-MyAccount-content h3 {
	color: var(--sga-ink);
	font-family: var(--sga-display);
	letter-spacing: -0.01em;
}

.sga-account .woocommerce-MyAccount-content mark {
	background: none;
	color: var(--sga-canopy);
	font-weight: 700;
}

/* Tables (Orders...). */
.sga-account table.shop_table,
.sga-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 1em;
	line-height: 1.6;
}

.sga-account table.shop_table th,
.sga-account table.woocommerce-orders-table th {
	text-align: left;
	color: var(--sga-ink);
	border-bottom: 2px solid var(--sga-line);
	padding: 0.6em 0.5em;
	vertical-align: middle;
}

.sga-account table.shop_table td,
.sga-account table.woocommerce-orders-table td {
	border-bottom: 1px solid var(--sga-line);
	padding: 0.6em 0.5em;
	vertical-align: middle;
}

.sga-account .woocommerce-MyAccount-content table .button {
	padding: 7px 14px;
	margin: 3px 6px 3px 0;
	font-size: 14px;
	white-space: nowrap;
}

/* Addresses. */
.sga-account .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sga-account .woocommerce-Address {
	flex: 1 1 260px;
	background: var(--sga-surface);
	border: 1px solid var(--sga-line);
	border-radius: 18px 6px;
	padding: 1.25em;
	box-sizing: border-box;
}

.sga-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.75em;
}

.sga-account .woocommerce-Address-title h2,
.sga-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.15em;
}

.sga-account .woocommerce-Address address {
	font-style: normal;
	color: var(--sga-muted);
}

/* Forms (Addresses, Account details). WooCommerce sizes fields with the theme's "small" preset. */
.sga-account {
	--wp--preset--font-size--small: 17px;
}

.sga-account .woocommerce-MyAccount-content > form,
.sga-account .woocommerce-MyAccount-content .woocommerce-address-fields {
	max-width: 640px;
}

.sga-account .woocommerce form .form-row {
	margin: 0 0 1.25em;
	padding: 0;
}

.sga-account .woocommerce form .form-row-first,
.sga-account .woocommerce form .form-row-last {
	width: calc(50% - 10px);
}

.sga-account .woocommerce form .form-row label {
	display: block;
	margin: 0 0 0.4em;
	color: var(--sga-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	opacity: 1;
}

.sga-account .woocommerce form .form-row .required {
	visibility: visible;
	color: var(--sga-canopy);
}

.sga-account .woocommerce form .form-row .optional {
	color: var(--sga-muted);
	font-weight: 400;
}

.sga-account .woocommerce form .form-row input.input-text,
.sga-account .woocommerce form .form-row input[type="text"],
.sga-account .woocommerce form .form-row input[type="email"],
.sga-account .woocommerce form .form-row input[type="tel"],
.sga-account .woocommerce form .form-row input[type="password"],
.sga-account .woocommerce form .form-row select,
.sga-account .woocommerce form .form-row textarea,
.sga-account .woocommerce form .form-row .select2-container .select2-selection--single {
	width: 100%;
	max-width: none;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 0.75em 1em;
	font: inherit;
	font-size: 17px;
	line-height: 1.4;
	color: var(--sga-ink);
	background-color: var(--sga-surface);
	border: 1px solid var(--sga-line-strong);
	border-radius: 10px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sga-account .woocommerce form .form-row input:focus,
.sga-account .woocommerce form .form-row select:focus,
.sga-account .woocommerce form .form-row textarea:focus,
.sga-account .woocommerce form .form-row .select2-container--focus .select2-selection--single,
.sga-account .woocommerce form .form-row .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--sga-canopy);
	box-shadow: 0 0 0 3px rgba(31, 91, 69, 0.2);
}

.sga-account .woocommerce form .form-row .select2-container {
	width: 100% !important; /* selectWoo writes an inline width. */
}

.sga-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 1.5em 0 0;
	line-height: 1.4;
	color: var(--sga-ink);
}

.sga-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 1em;
	height: 100%;
}

/* The open country/state menu is attached to <body>, outside the block. */
.woocommerce-account .select2-dropdown {
	border-color: var(--sga-line);
	border-radius: 10px;
	overflow: hidden;
	color: var(--sga-ink);
}

.woocommerce-account .select2-container .select2-results__option--highlighted[aria-selected],
.woocommerce-account .select2-container .select2-results__option--highlighted[data-selected] {
	background-color: var(--sga-canopy);
	color: var(--sga-on-canopy);
}

.sga-account #account_display_name_description {
	display: block;
	margin-top: 0.4em;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sga-muted);
}

.sga-account #account_display_name_description em {
	font-style: normal;
}

/* Password change is hidden: customers sign in with an email code. Empty fields still post (= keep current password). */
.sga-account .woocommerce-EditAccountForm fieldset {
	display: none;
}

.sga-account .woocommerce-MyAccount-content > form > p:last-of-type {
	clear: both;
	margin-top: 1.5em;
}

/* Buttons: same as the site's primary button (.sgx-btn-primary). The extra .woocommerce beats GreenLight's WooCommerce styles. */
.sga-account .woocommerce .button,
.sga-account .woocommerce button[type="submit"],
.sga-account .dgs-connexion-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--sga-canopy);
	color: var(--sga-on-canopy);
	border: none;
	border-radius: 14px 4px;
	padding: 12px 22px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease-out;
}

.sga-account .woocommerce .button:hover,
.sga-account .woocommerce .button:focus-visible,
.sga-account .woocommerce button[type="submit"]:hover,
.sga-account .woocommerce button[type="submit"]:focus-visible,
.sga-account .dgs-connexion-bouton:hover,
.sga-account .dgs-connexion-bouton:focus-visible {
	background: var(--sga-canopy-hover);
	color: var(--sga-on-canopy);
}

/* Notices. */
.sga-account .woocommerce-message,
.sga-account .woocommerce-error,
.sga-account .woocommerce-info {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 0;
	border-left: 4px solid var(--sga-canopy);
	border-radius: 10px;
	background: var(--sga-sunken);
	color: var(--sga-ink);
}

.sga-account .woocommerce-error {
	border-left-color: var(--sga-danger);
}

.sga-account .woocommerce-message::before,
.sga-account .woocommerce-error::before,
.sga-account .woocommerce-info::before {
	display: none;
}

/* WooCommerce Blocks notices (e.g. "No order has been made yet."): generic blue replaced by the palette. */
.sga-account .wc-block-components-notice-banner.is-info {
	background: var(--sga-sunken);
	border-color: var(--sga-canopy);
	color: var(--sga-ink);
}

.sga-account .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--sga-canopy);
}

/* No shop in the portal: hide the "Browse products" link inside empty-order notices. */
.sga-account .wc-block-components-notice-banner .wc-forward {
	display: none;
}

@media (max-width: 782px) {
	.sga-account .woocommerce-MyAccount-navigation {
		flex-basis: 100%;
	}

	.sga-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sga-account .woocommerce-Addresses {
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.sga-account .woocommerce form .form-row-first,
	.sga-account .woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}
}
/* ---------------------------------------------------------------------
 * Signed-out welcome (templates/woocommerce/myaccount/form-login.php).
 * ------------------------------------------------------------------- */
.sga-account .woocommerce:has(> .sga-entry) {
	display: block;
}

.sga-entry {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(8px, 2vw, 24px) 0 0;
}

.sga-entry-intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

.sga-eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sga-moss);
	color: var(--sga-forest);
	font-family: var(--font-mono, "Atkinson Hyperlegible Mono", monospace);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sga-entry-title {
	margin: 0 0 12px;
	color: var(--sga-ink);
	font-family: var(--sga-display);
	font-size: clamp(32px, 4.2vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.sga-entry-lead {
	margin: 0;
	color: var(--sga-muted);
	font-size: 18px;
	line-height: 1.55;
}

.sga-entry-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 32px);
	align-items: stretch;
}

.sga-entry-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sga-entry-label {
	margin: 0 0 10px 4px;
	color: var(--sga-canopy);
	font-family: var(--font-mono, "Atkinson Hyperlegible Mono", monospace);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Both cards: same size and shape. */
.sga-entry .dgs-connexion-carte,
.sga-entry-card {
	flex: 1 1 auto;
	max-width: none;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	padding: clamp(1.5em, 3.5vw, 2.25em);
	border-radius: 24px 8px;
}

.sga-entry .dgs-connexion-titre,
.sga-entry-card-title {
	margin: 0 0 0.4em;
	color: var(--sga-ink);
	font-family: var(--sga-display);
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sga-entry .dgs-connexion-intro {
	margin-bottom: 1.25em;
}

.sga-entry .dgs-formulaire-connexion p:last-of-type {
	margin-bottom: 1.25em;
}

.sga-entry-note {
	margin: 12px 4px 0;
	color: var(--sga-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* New customer card: forest green, so the two paths read as different at a glance. */
.sga-entry-card {
	background: var(--sga-forest);
	color: var(--sga-on-forest);
	display: flex;
	flex-direction: column;
}

.sga-entry-card .sga-entry-card-title {
	color: var(--sga-on-forest);
}

.sga-entry-card-text {
	margin: 0 0 1.1em;
	color: rgba(246, 248, 244, 0.8);
	line-height: 1.55;
}

.sga-entry-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sga-entry-list li {
	position: relative;
	padding-left: 28px;
	line-height: 1.5;
}

.sga-entry-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 16px;
	height: 16px;
	border-radius: 10px 3px;
	background: var(--gs-colorpollen, #f2b635);
}

.sga-entry-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.sga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 14px 4px;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out;
}

.sga-entry-card .sga-btn-primary {
	background: var(--gs-colorpollen, #f2b635);
	color: var(--gs-coloron-pollen, #2a2108);
}

.sga-entry-card .sga-btn-primary:hover,
.sga-entry-card .sga-btn-primary:focus-visible {
	background: var(--sga-pollen-soft);
	color: var(--gs-coloron-pollen, #2a2108);
}

.sga-entry-card .sga-btn-ghost {
	color: var(--sga-on-forest);
	box-shadow: inset 0 0 0 1.5px rgba(246, 248, 244, 0.45);
}

.sga-entry-card .sga-btn-ghost:hover,
.sga-entry-card .sga-btn-ghost:focus-visible {
	color: var(--sga-on-forest);
	box-shadow: inset 0 0 0 1.5px var(--sga-on-forest);
}

@media (max-width: 782px) {
	.sga-entry-grid {
		grid-template-columns: 1fr;
	}

	.sga-entry-intro {
		text-align: left;
	}
}