/* Glou — espace client WooCommerce */
body.glou-account-page {
	--glou-beige: #E5D7C3;
	--glou-cream: #FFF8E8;
	--glou-green: #1E5631;
	--glou-mocha: #9F7E69;
	--glou-brown: #7D5C4D;
	--glou-blue: #2A4B9B;
	--glou-violet: #8A4FBD;
	--glou-pink: #E569A2;
	--glou-rule: rgba(125, 92, 77, .28);
	color: var(--glou-green);
	font-family: 'Poppins', Arial, sans-serif;
}

body.glou-account-page .woocommerce {
	box-sizing: border-box;
	width: min(100% - 32px, 1040px);
	max-width: 1040px;
	margin: 28px auto 48px;
}

body.glou-account-page .woocommerce * { box-sizing: border-box; }
body.glou-account-page .woocommerce-MyAccount-navigation { display: none !important; }
body.glou-account-page .woocommerce-MyAccount-content { float: none; width: 100%; }
body.glou-account-dashboard-page .woocommerce-MyAccount-content > p:nth-of-type(-n+2) { display: none !important; }

.glou-account-topbar {
	position: relative;
	min-height: 68px;
	padding: 0 29px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--glou-beige);
	border: 1px solid var(--glou-rule);
	border-radius: 18px 18px 0 0;
}

.glou-account-label {
	flex: 0 0 auto;
	color: var(--glou-green);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-decoration: none;
	white-space: nowrap;
}

.glou-account-nav {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2vw, 22px);
}

.glou-account-nav a {
	position: relative;
	padding: 26px 0 24px;
	color: var(--glou-brown);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.glou-account-nav a:hover,
.glou-account-nav a.is-active { color: var(--glou-green); }

.glou-account-nav a.is-active::after {
	position: absolute;
	right: 0;
	bottom: 15px;
	left: 0;
	height: 3px;
	border-radius: 4px;
	background: var(--glou-green);
	content: '';
}

.glou-account-profile { position: relative; flex: 0 0 auto; }
.glou-account-profile summary {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--glou-green);
	color: var(--glou-cream);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	list-style: none;
}
.glou-account-profile summary::-webkit-details-marker { display: none; }
.glou-profile-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 20;
	min-width: 175px;
	padding: 7px;
	border: 1px solid var(--glou-rule);
	border-radius: 12px;
	background: var(--glou-cream);
	box-shadow: 0 10px 28px rgba(53, 32, 20, .12);
}
.glou-profile-menu a {
	display: block;
	padding: 10px 11px;
	border-radius: 8px;
	color: var(--glou-green);
	font-size: 12px;
	text-decoration: none;
}
.glou-profile-menu a:hover { background: rgba(30, 86, 49, .08); }

.glou-account {
	padding: 28px 38px 20px;
	border-radius: 0 0 18px 18px;
	background: var(--glou-beige);
	color: var(--glou-green);
}
.glou-account h1,
.glou-account h2,
.glou-account h3 {
	margin-top: 0;
	color: var(--glou-green);
	font-family: 'Lilita One', system-ui, sans-serif;
	font-weight: 400;
}
.glou-welcome {
	margin-bottom: 20px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
}
.glou-welcome h1 { margin: 0; font-size: clamp(32px, 4vw, 40px); line-height: 1; }
.glou-welcome h1::first-letter { color: var(--glou-green); }
.glou-welcome p {
	max-width: 400px;
	margin: 0 0 2px;
	color: var(--glou-brown);
	font-size: 13px;
	line-height: 1.7;
}

.glou-subscription-hero {
	position: relative;
	min-height: 244px;
	padding: 22px 25px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 42% 34% 24%;
	align-items: center;
	border-radius: 2px;
	background: var(--glou-green);
	color: var(--glou-cream);
}
.glou-hero-copy { position: relative; z-index: 2; max-width: 295px; }
.glou-eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--glou-green);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.4;
}
.glou-eyebrow-light { color: var(--glou-cream); }
.glou-account .glou-hero-copy h2 {
	margin: 0 0 10px;
	color: var(--glou-cream);
	font-size: 35px;
	line-height: 1.02;
}
.glou-hero-copy p {
	max-width: 285px;
	margin: 0 0 15px;
	color: var(--glou-cream);
	font-size: 13px;
	line-height: 1.55;
}
.glou-pill {
	min-height: 42px;
	padding: 4px 5px 4px 15px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--glou-green);
	border-radius: 99px;
	color: var(--glou-green);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.glou-pill-light { border-color: var(--glou-cream); color: var(--glou-cream); }
.glou-arrow-disc,
.glou-outline-arrow {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(110deg, var(--glou-blue), var(--glou-violet) 50%, var(--glou-pink));
	color: var(--glou-cream);
	font-size: 16px;
	line-height: 1;
}
.glou-hero-art { position: relative; height: 220px; overflow: visible; }
.glou-form { position: absolute; display: block; }
.glou-form-pink {
	width: 205px;
	height: 160px;
	top: 25px;
	left: 7px;
	transform: rotate(-13deg);
	border-radius: 57% 43% 63% 37% / 45% 57% 43% 55%;
	background: color-mix(in srgb, var(--glou-pink) 44%, var(--glou-cream));
}
.glou-form-blue {
	width: 155px;
	height: 128px;
	right: 0;
	bottom: 15px;
	transform: rotate(16deg);
	border-radius: 42% 58% 38% 62% / 59% 43% 57% 41%;
	background: color-mix(in srgb, var(--glou-blue) 34%, var(--glou-cream));
}
.glou-box-status {
	position: relative;
	z-index: 2;
	min-height: 105px;
	padding-left: 17px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	border-left: 1px solid rgba(255, 248, 232, .45);
}
.glou-box-status strong { color: var(--glou-cream); font-size: 14px; font-weight: 600; }
.glou-box-status small { color: var(--glou-cream); font-size: 10px; line-height: 1.5; }

.glou-quick-links {
	margin-top: 25px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.glou-quick-link {
	position: relative;
	min-height: 148px;
	padding: 12px 24px 10px 2px;
	color: var(--glou-green);
	text-decoration: none;
}
.glou-quick-link + .glou-quick-link { padding-left: 23px; border-left: 1px solid var(--glou-rule); }
.glou-link-label { display: block; margin-bottom: 11px; color: var(--glou-brown); font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.glou-account .glou-quick-link h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.05; }
.glou-quick-link p { margin: 0; color: var(--glou-brown); font-size: 12px; line-height: 1.55; }
.glou-outline-arrow { position: absolute; top: 11px; right: 17px; }
.glou-quick-link:hover h3,
.glou-text-link:hover { color: var(--glou-brown); }

.glou-account-footer {
	margin-top: 3px;
	padding-top: 13px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--glou-rule);
	color: var(--glou-brown);
	font-size: 12px;
}
.glou-account-footer p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.glou-account-footer strong { color: var(--glou-green); font-weight: 600; }
.glou-account-footer a { color: var(--glou-green); font-weight: 600; text-decoration: none; }
.glou-account-footer p a { text-decoration: underline; text-underline-offset: 3px; }
.glou-account-footer .glou-logout { margin-left: auto; }

.glou-account-content { padding: 12px 0 25px; }
.glou-account-content > h2 { margin: 0 0 12px; font-size: 34px; line-height: 1.05; }
.glou-account-content > p { max-width: 650px; color: var(--glou-brown); font-size: 14px; line-height: 1.7; }
.glou-benefit-grid,
.glou-subscription-list { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.glou-content-card { padding: 22px; border: 1px solid var(--glou-rule); border-radius: 16px; background: rgba(255, 248, 232, .42); }
.glou-account .glou-content-card h3 { margin: 0 0 10px; font-size: 24px; }
.glou-content-card p { color: var(--glou-brown); font-size: 13px; line-height: 1.6; }
.glou-text-link { color: var(--glou-green); font-size: 12px; font-weight: 600; }
.glou-coffee-image { margin: -22px -22px 18px; overflow: hidden; border-radius: 16px 16px 0 0; }
.glou-coffee-image img { width: 100%; height: auto; display: block; }
.glou-note-body { color: var(--glou-brown); font-size: 13px; line-height: 1.7; }
.glou-note-body > *:last-child { margin-bottom: 0; }

/* WooCommerce order, address and account-detail screens within the same design system. */
body.glou-account-page .woocommerce table.shop_table { border-color: var(--glou-rule); border-radius: 12px; font-size: 13px; }
body.glou-account-page .woocommerce table.shop_table th { color: var(--glou-green); font-weight: 600; }
body.glou-account-page .woocommerce table.shop_table td { color: var(--glou-brown); }
body.glou-account-page .woocommerce a.button,
body.glou-account-page .woocommerce button.button { border: 1px solid var(--glou-green); border-radius: 99px; background: transparent; color: var(--glou-green); font-family: 'Poppins', Arial, sans-serif; font-weight: 600; }
body.glou-account-page .woocommerce a.button:hover,
body.glou-account-page .woocommerce button.button:hover { background: var(--glou-green); color: var(--glou-cream); }
body.glou-account-page .woocommerce input:not([type=checkbox]):not([type=radio]),
body.glou-account-page .woocommerce select,
body.glou-account-page .woocommerce textarea { border: 1px solid var(--glou-rule); border-radius: 8px; font-family: 'Poppins', Arial, sans-serif; }

@media (max-width: 900px) {
	.glou-account-topbar { padding: 0 18px; gap: 14px; }
	.glou-account-label { font-size: 10px; }
	.glou-account-nav { gap: 12px; }
	.glou-account-nav a { font-size: 11px; }
	.glou-account { padding-right: 24px; padding-left: 24px; }
	.glou-subscription-hero { grid-template-columns: 44% 30% 26%; }
	.glou-form-pink { width: 170px; height: 138px; }
	.glou-form-blue { width: 130px; height: 112px; }
}

@media (max-width: 680px) {
	body.glou-account-page .woocommerce { width: calc(100% - 20px); margin: 14px auto 28px; }
	.glou-account-topbar { min-height: 0; padding: 13px 14px 8px; flex-wrap: wrap; border-radius: 14px 14px 0 0; }
	.glou-account-label { order: 1; font-size: 10px; }
	.glou-account-profile { order: 2; margin-left: auto; }
	.glou-account-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; gap: 18px; padding: 2px 0 0; scrollbar-width: thin; }
	.glou-account-nav a { padding: 9px 0 12px; font-size: 11px; }
	.glou-account-nav a.is-active::after { bottom: 5px; }
	.glou-account { padding: 22px 16px 16px; border-radius: 0 0 14px 14px; }
	.glou-welcome { display: block; margin-bottom: 18px; }
	.glou-welcome h1 { font-size: 32px; }
	.glou-welcome p { margin-top: 8px; font-size: 12px; }
	.glou-subscription-hero { min-height: 430px; padding: 20px; display: block; border-radius: 2px; }
	.glou-account .glou-hero-copy h2 { max-width: 270px; font-size: 29px; }
	.glou-hero-copy p { max-width: 270px; }
	.glou-hero-art { width: 100%; height: 175px; margin-top: 8px; }
	.glou-form-pink { width: 165px; height: 128px; top: 17px; left: 10%; }
	.glou-form-blue { width: 126px; height: 104px; right: 8%; bottom: 9px; }
	.glou-box-status { position: absolute; right: 20px; bottom: 15px; left: 20px; min-height: 0; padding: 10px 0 0; gap: 5px; border-top: 1px solid rgba(255, 248, 232, .45); border-left: 0; }
	.glou-quick-links { grid-template-columns: 1fr; margin-top: 14px; }
	.glou-quick-link { min-height: 116px; padding: 12px 8px; }
	.glou-quick-link + .glou-quick-link { padding-left: 8px; border-top: 1px solid var(--glou-rule); border-left: 0; }
	.glou-account .glou-quick-link h3 { font-size: 22px; }
	.glou-outline-arrow { right: 10px; }
	.glou-account-footer { align-items: flex-start; flex-wrap: wrap; }
	.glou-account-footer p { max-width: calc(100% - 20px); }
	.glou-account-footer .glou-logout { margin-left: auto; }
	.glou-benefit-grid, .glou-subscription-list { grid-template-columns: 1fr; }
}