/* Shared homepage section rhythm: consistent spacing + heading style so every
   section (categories, products, promo, story, trust) reads as one system. */

.qg-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--qg-space-4);
	margin-bottom: var(--qg-space-5);
}

.qg-section-head__eyebrow {
	display: block;
	font-family: var(--qg-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--qg-tracking-label);
	color: var(--qg-color-accent);
	margin-bottom: 0.6rem;
}

.qg-section-head__title {
	font-family: var(--qg-font-heading);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 500;
	margin: 0;
	line-height: 1.2;
	color: var(--qg-color-ink);
}

.qg-section-head__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--qg-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--qg-color-ink);
	white-space: nowrap;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid var(--qg-color-ink);
	transition: opacity 0.2s var(--qg-ease);
}

.qg-section-head__link:hover {
	opacity: 0.6;
}

.qg-section-head__link:hover .qg-icon {
	transform: translate(2px, -2px);
}

.qg-section-head__link .qg-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--qg-ease);
}

section[class^='qg-'] {
	padding-block: clamp(2.5rem, 6vw, var(--qg-space-6));
}

section[class^='qg-'] + section[class^='qg-'] {
	border-top: 1px solid var(--qg-color-line);
}

@media (max-width: 767px) {
	.qg-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--qg-space-2);
	}
}

/* Buttons, shared by hero, product grids and any other section with a CTA. */

.qg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 2rem;
	border-radius: var(--qg-radius-sharp);
	font-family: var(--qg-font-body);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
	transition: transform 0.2s var(--qg-ease), background-color 0.2s var(--qg-ease), color 0.2s var(--qg-ease), border-color 0.2s var(--qg-ease);
	border: 1px solid transparent;
}

.qg-btn .qg-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--qg-ease);
}

.qg-btn:hover .qg-icon {
	transform: translateX(3px);
}

.qg-btn--primary {
	background: var(--qg-gradient-cta);
	color: #fff;
}

.qg-btn--primary:hover {
	background: var(--qg-gradient-cta-hover);
}

.qg-btn--ghost {
	background: transparent;
	border-color: var(--qg-color-ink);
	color: var(--qg-color-ink);
}

.qg-btn--ghost:hover {
	background: var(--qg-color-ink);
	color: var(--qg-color-surface);
}

/* Shared underline text-link — hero secondary CTA, editorial/promo
   sections. Dark backgrounds (the hero panel) override the color locally. */

.qg-link {
	display: inline-block;
	font-family: var(--qg-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--qg-color-ink);
	text-decoration: none;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--qg-color-line);
	transition: color 0.25s var(--qg-ease), border-color 0.25s var(--qg-ease);
}

.qg-link:hover {
	color: var(--qg-color-accent);
	border-color: var(--qg-color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.qg-btn,
	.qg-btn .qg-icon,
	.qg-link {
		transition: none;
	}
}

/* Scroll reveal: paired with assets/js/reveal.js. Items fade/slide in with a
   per-item stagger once their [data-qg-reveal] ancestor enters the viewport. */

[data-qg-reveal-item] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--qg-ease), transform 0.6s var(--qg-ease);
	transition-delay: var(--qg-reveal-delay, 0ms);
}

[data-qg-reveal][data-revealed] [data-qg-reveal-item] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-qg-reveal-item] {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* WooCommerce notices (errors, success messages, info) — used by the auth
   card, account-details save, addresses, cart and checkout. WooCommerce
   renders each as a plain <ul class="woocommerce-error|message|info"><li>
   (see wp-content/plugins/woocommerce/templates/notices/*.php); themed here
   once, globally, instead of per-page. */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var(--qg-space-4);
	padding: var(--qg-space-3) var(--qg-space-4);
	border-radius: var(--qg-radius);
	font-size: 0.88rem;
	line-height: 1.6;
	max-width: 440px;
	margin-inline: auto;
}

/* WooCommerce core's own default rule reserves space for this via
   `padding-left: 3.5em` and positions its checkmark/cross font-icon inside
   that gap (`::before { position: absolute; left: 1.5em; }`) — our padding
   above doesn't reserve that space, so the icon was overlapping the first
   couple of characters of the message instead (e.g. "Pr" of "Product
   successfully removed."). Colour + border already carry the
   success/error/info meaning, so the simplest correct fix is dropping the
   icon rather than re-reserving room for it. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-error {
	background: #fdeaea;
	color: var(--qg-color-danger);
	border: 1px solid rgba(196, 30, 30, 0.15);
}

.woocommerce-message {
	background: #e6f3ec;
	color: var(--qg-color-success);
	border: 1px solid rgba(47, 107, 79, 0.18);
}

.woocommerce-info {
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
	border: 1px solid rgba(255, 37, 37, 0.12);
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* Full-width variant for contexts outside the narrow auth card (account
   details, addresses, cart) where the 440px cap would look cramped. */
.qg-account .woocommerce-error,
.qg-account .woocommerce-message,
.qg-account .woocommerce-info,
.qg-cart .woocommerce-error,
.qg-cart .woocommerce-message,
.qg-cart .woocommerce-info {
	max-width: none;
	margin-inline: 0;
}