/**
 * HiGuppy component primitives. Additive and namespaced for XStore/WooCommerce.
 */

:root {
	/* Component aliases intentionally point to the canonical Home/About tokens. */
	--hg-color-ink: var(--hg-navy);
	--hg-color-ink-soft: var(--hg-muted);
	--hg-color-ocean: var(--hg-blue);
	--hg-color-ocean-dark: var(--hg-navy);
	--hg-color-aqua: var(--hg-aqua);
	--hg-color-aqua-soft: var(--hg-aqua-soft);
	--hg-color-sand: var(--hg-cream);
	--hg-color-cream: var(--hg-cream);
	--hg-color-white: var(--hg-white);
	--hg-color-border: var(--hg-border);
	--hg-color-success: #2e8b70;
	--hg-color-warning: #f6c95d;
	--hg-color-danger: #d9534f;
	--hg-shadow-lg: 0 24px 70px rgba(20, 35, 74, .16);
	--hg-content-width: var(--hg-container);
}

.hg-container,
.higuppy-shop-shell,
.higuppy-product-shell {
	 width: min(100% - 2rem, var(--hg-content-width));
	 margin-inline: auto;
}

.hg-btn,
.higuppy-shop-shell .button,
.higuppy-shop-shell button,
.single-product .single_add_to_cart_button {
	 min-height: 44px;
	 border-radius: var(--hg-radius-sm);
	 transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.hg-btn-primary,
.hg-btn-primary .wp-block-button__link {
	 background: var(--hg-color-ocean);
	 color: var(--hg-color-white);
	 box-shadow: var(--hg-shadow-sm);
}

.hg-btn-primary:hover,
.hg-btn-primary:focus-visible,
.hg-btn-primary .wp-block-button__link:hover,
.hg-btn-primary .wp-block-button__link:focus-visible {
	 background: var(--hg-color-ocean-dark);
	 color: var(--hg-color-white);
}

.hg-btn-outline,
.hg-btn-outline .wp-block-button__link {
	 border: 1px solid currentColor;
	 color: var(--hg-color-ocean-dark);
	 background: transparent;
}

.hg-product-card,
.hg-category-card,
.hg-review-card,
.hg-stat-card,
.hg-care-card,
.higuppy-shop-shell ul.products li.product {
	 border: 1px solid var(--hg-color-border);
	 border-radius: var(--hg-radius-md);
	 background: var(--hg-color-white);
	 box-shadow: var(--hg-shadow-sm);
}

.hg-product-card:focus-within,
.hg-category-card:focus-visible,
.hg-care-card:focus-within,
.higuppy-shop-shell ul.products li.product:focus-within {
	 outline: 3px solid color-mix(in srgb, var(--hg-color-aqua) 70%, white);
	 outline-offset: 3px;
}

.hg-section-heading { max-width: 42rem; margin-bottom: var(--hg-space-3); }
.hg-section-heading__eyebrow { color: var(--hg-color-ocean); font-weight: var(--hg-font-weight-ui); letter-spacing: .08em; text-transform: uppercase; }
.hg-trust-badge { display: inline-flex; align-items: center; gap: .5rem; color: var(--hg-color-ink); }
.hg-guarantee-panel { padding: var(--hg-space-3); border-radius: var(--hg-radius-lg); background: var(--hg-color-aqua-soft); }
.hg-announcement-bar { padding: .6rem 1rem; background: var(--hg-color-ink); color: var(--hg-color-white); text-align: center; }
.hg-breadcrumb { margin-block: var(--hg-space-2); color: var(--hg-color-ink-soft); font-size: var(--hg-font-size-body); }

/* Shared Gutenberg pattern primitives. */
.hg-pattern-section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.hg-pattern-container {
	width: min(100% - 2rem, var(--hg-container));
	margin-inline: auto;
}

.hg-pattern-eyebrow {
	margin: 0 0 .75rem;
	color: var(--hg-orange);
	font-size: var(--hg-font-size-body);
	font-weight: var(--hg-font-weight-ui);
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hg-pattern-heading {
	max-width: 44rem;
	margin: 0 0 1rem;
}

.hg-pattern-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hg-space-3);
}

.hg-pattern-card,
.hg-pattern-link-card,
.hg-pattern-notice {
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-md);
	background: var(--hg-white);
	box-shadow: var(--hg-shadow-sm);
}

.hg-pattern-card,
.hg-pattern-link-card {
	padding: var(--hg-space-3);
}

.hg-pattern-notice {
	padding: var(--hg-space-3) var(--hg-space-4);
	background: var(--hg-aqua-soft);
}

.hg-pattern-trust-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hg-pattern-trust-row li {
	color: var(--hg-muted);
	font-size: var(--hg-font-size-body);
	font-weight: var(--hg-font-weight-ui);
}

.hg-pattern-steps {
	counter-reset: hg-step;
}

.hg-pattern-step {
	position: relative;
	padding-left: 3.5rem;
}

.hg-pattern-step::before {
	counter-increment: hg-step;
	content: counter(hg-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 50%;
	background: var(--hg-orange);
	color: var(--hg-white);
	font-weight: var(--hg-font-weight-ui);
}

@media (max-width: 760px) {
	.hg-pattern-grid-3 {
		grid-template-columns: 1fr;
	}

	.hg-pattern-notice {
		padding-inline: var(--hg-space-3);
	}
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--hg-color-aqua);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}