/* ==========================================
   Wilgraaghebben Design Tokens & Theme
   ========================================== */

:root {
	/* ---- Core palette ---- */
	--wgh-primary:            #2563eb;
	--wgh-primary-hover:      #1d4ed8;
	--wgh-primary-foreground:  #ffffff;
	--wgh-primary-soft:        rgba(37, 99, 235, 0.1);
	--wgh-primary-softer:      rgba(37, 99, 235, 0.05);

	/* ---- Neutrals ---- */
	--wgh-foreground:          #0f172a;
	--wgh-foreground-muted:    #64748b;
	--wgh-background:          #ffffff;
	--wgh-surface:             #f8fafc;
	--wgh-border:              #e2e8f0;
	--wgh-input-border:        #e2e8f0;

	/* ---- Semantic ---- */
	--wgh-success:             #16a34a;
	--wgh-success-foreground:  #ffffff;
	--wgh-danger:              #dc2626;
	--wgh-danger-foreground:   #ffffff;

	/* ---- Wishlist sticky note ---- */
	--wgh-wishlist-bg:         #fef9c3;
	--wgh-wishlist-border:     #fde047;
	--wgh-wishlist-text:       #713f12;

	/* ---- Navbar & Footer ---- */
	--wgh-navbar-bg:           #1e293b;
	--wgh-navbar-fg:           #f8fafc;
	--wgh-navbar-fg-muted:     rgba(248, 250, 252, 0.6);
	--wgh-navbar-fg-hover:     rgba(248, 250, 252, 1);
	--wgh-navbar-border:       rgba(248, 250, 252, 0.1);

	/* ---- Hero themed backgrounds ---- */
	--wgh-hero-blue:           #dbeafe;
	--wgh-hero-pink:           #fce7f3;
	--wgh-hero-red:            #fecaca;
	--wgh-hero-yellow:         #fefce8;

	/* ---- Border radius ---- */
	--wgh-radius-sm:           0.375rem;
	--wgh-radius-md:           0.5rem;
	--wgh-radius-lg:           0.75rem;
	--wgh-radius-xl:           1rem;
	--wgh-radius-full:         9999px;

	/* ---- Shadows ---- */
	--wgh-shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.05);
	--wgh-shadow-md:           0 4px 6px rgba(0, 0, 0, 0.07);
	--wgh-shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.1);

	/* ---- Spacing (8px grid) ---- */
	--wgh-space-1:  0.25rem;
	--wgh-space-2:  0.5rem;
	--wgh-space-3:  0.75rem;
	--wgh-space-4:  1rem;
	--wgh-space-5:  1.5rem;
	--wgh-space-6:  2rem;
	--wgh-space-7:  3rem;
	--wgh-space-8:  4rem;
	--wgh-space-9:  6rem;
}

/* ==========================================
   Typography
   ========================================== */

html {
	overflow-x: clip;
}

body {
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wgh-foreground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	color: var(--wgh-foreground);
}

h1 {
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 1.875rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 600;
}

h4 {
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 600;
}

h5 {
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 600;
}

@media (min-width: 768px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 2.25rem; }
}

@media (min-width: 992px) {
	h1 { font-size: 3.75rem; }
}

/* Utility classes */
.text-sm {
	font-size: 0.875rem;
	line-height: 1.5;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1.4;
}

.text-muted {
	color: var(--wgh-foreground-muted) !important;
}

/* ==========================================
   Lucide icon defaults
   ========================================== */

.lucide-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	stroke-width: 2;
}

/* Spin animation (replaces bi-spin) */
@keyframes lucide-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.lucide-spin {
	animation: lucide-spin 1s linear infinite;
}

/* ==========================================
   Navbar
   ========================================== */

.wgh-navbar {
	background: var(--wgh-navbar-bg);
	min-height: 64px;
	padding: 0;
	border: none;
	box-shadow: none;
}

.wgh-navbar .navbar-brand {
	padding: 0;
	margin-right: 1.5rem;
}

.wgh-brand-text {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wgh-navbar-fg);
	letter-spacing: -0.01em;
}

/* Nav links */
.wgh-navbar .navbar-nav .nav-link {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--wgh-navbar-fg-muted);
	padding: 8px 16px;
	border-radius: var(--wgh-radius-md);
	transition: color 0.15s, background-color 0.15s;
}

.wgh-navbar .navbar-nav .nav-link:hover,
.wgh-navbar .navbar-nav .nav-link:focus {
	color: var(--wgh-navbar-fg-hover);
	background-color: rgba(248, 250, 252, 0.1);
}

.wgh-navbar .navbar-nav .nav-item.active > .nav-link {
	color: var(--wgh-navbar-fg);
}

/* Right-side nav */
.wgh-navbar-right .nav-link .lucide-icon {
	width: 17px;
	height: 17px;
	vertical-align: -2px;
}

/* Auth buttons (desktop) */
.wgh-navbar-right {
	align-items: center;
}

.wgh-navbar-right .nav-link {
	font-size: 0.8rem;
}

.wgh-btn-register {
	background: var(--wgh-primary) !important;
	color: var(--wgh-primary-foreground) !important;
	border: none;
	padding: 5px 14px !important;
	border-radius: var(--wgh-radius-md);
	font-weight: 600;
	transition: background-color 0.15s;
}

.wgh-btn-register:hover {
	background: var(--wgh-primary-hover) !important;
	color: var(--wgh-primary-foreground) !important;
}

/* Mobile auth buttons (inside offcanvas) */
.wgh-mobile-login {
	display: block;
	text-align: center;
	border: 1px solid var(--wgh-navbar-fg-muted);
	border-radius: var(--wgh-radius-md);
	padding: 10px 20px !important;
	margin-bottom: 8px;
}

.wgh-mobile-register {
	display: block;
	text-align: center;
	background: var(--wgh-primary);
	color: var(--wgh-primary-foreground) !important;
	border-radius: var(--wgh-radius-md);
	padding: 10px 20px !important;
	font-weight: 600;
}

.wgh-mobile-register:hover {
	background: var(--wgh-primary-hover);
}

/* Offcanvas mobile menu */
.wgh-offcanvas {
	background: var(--wgh-navbar-bg) !important;
}

.wgh-offcanvas .offcanvas-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--wgh-navbar-border);
}

@media (max-width: 767.98px) {
	.wgh-offcanvas .offcanvas-body .navbar-nav .nav-link {
		padding: 12px 0;
		border-radius: 0;
	}

	.wgh-offcanvas .offcanvas-body .navbar-nav .nav-link:hover {
		background-color: transparent;
	}
}

/* Dropdown in navbar */
.wgh-navbar .dropdown-menu {
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-md);
	box-shadow: var(--wgh-shadow-md);
}

/* Navbar toggler */
.wgh-navbar .navbar-toggler {
	border: none;
	padding: 8px;
}

.wgh-navbar .navbar-toggler:focus {
	box-shadow: none;
}

/* ==========================================
   Footer
   ========================================== */

.wgh-footer {
	background: var(--wgh-navbar-bg);
	color: var(--wgh-navbar-fg);
	padding: 48px 0 0;
	margin-top: 32px;
}



.wgh-footer-col {
	margin-bottom: 32px;
}

.wgh-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.wgh-footer-about {
	font-size: 0.875rem;
	color: var(--wgh-navbar-fg-muted);
	line-height: 1.6;
	max-width: 320px;
	margin: 0;
}

.wgh-footer-heading {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(248, 250, 252, 0.4);
	margin-bottom: 16px;
}

.wgh-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wgh-footer-links a {
	font-size: 0.875rem;
	color: var(--wgh-navbar-fg-muted);
	text-decoration: none;
	transition: color 0.15s;
}

.wgh-footer-links a:hover {
	color: var(--wgh-navbar-fg);
}

.wgh-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0;
	margin-top: 16px;
	border-top: 1px solid var(--wgh-navbar-border);
	font-size: 0.75rem;
	color: rgba(248, 250, 252, 0.4);
}

@media (max-width: 575.98px) {
	.wgh-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 4px;
	}
}

/* Hide hr.soften on pages with new section layout */
.wgh-hero ~ hr.soften,
.wgh-section ~ hr.soften,
.wgh-dashboard-hero ~ hr.soften,
.wgh-page-header ~ hr.soften,
.wgh-stats-bar ~ hr.soften,
.wgh-static-page ~ hr.soften,
.wgh-cta-blue ~ hr.soften,
.wgh-shops-page ~ hr.soften,
.wgh-shop-search-page ~ hr.soften,
.wgh-error-page ~ hr.soften,
.wgh-form-page ~ hr.soften {
	display: none;
}

/* ==========================================
   Utility: Breakout
   ========================================== */

.wgh-breakout {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* ==========================================
   Section spacing
   ========================================== */

.wgh-section {
	padding: 64px 0;
}

@media (min-width: 768px) {
	.wgh-section { padding: 96px 0; }
}

.wgh-section-surface {
	background: var(--wgh-surface);
}

/* ==========================================
   Hero
   ========================================== */

.wgh-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to bottom, var(--wgh-hero-blue), var(--wgh-background));
	padding: 64px 0;
}

@media (min-width: 768px) {
	.wgh-hero { padding: 96px 0; }
}

@media (min-width: 992px) {
	.wgh-hero { padding: 128px 0; }
}

.wgh-hero-title {
	max-width: 720px;
	margin: 24px auto 0;
}

.wgh-hero-accent {
	color: var(--wgh-primary);
}

.wgh-hero-subtitle {
	font-size: 1.125rem;
	color: var(--wgh-foreground-muted);
	max-width: 560px;
	margin: 16px auto 0;
	line-height: 1.6;
}

/* Badge pill */
.wgh-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wgh-primary);
	background: var(--wgh-primary-softer);
	border: 1px solid rgba(37, 99, 235, 0.2);
	border-radius: var(--wgh-radius-full);
}

.wgh-badge-pill .lucide-icon {
	width: 16px;
	height: 16px;
}

/* Hero buttons */
.wgh-hero-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.wgh-btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 32px;
	background: var(--wgh-primary);
	color: var(--wgh-primary-foreground);
	border: none;
	border-radius: var(--wgh-radius-md);
	font-size: 1rem;
	font-weight: 600;
	transition: background-color 0.15s;
}

.wgh-btn-hero-primary:hover {
	background: var(--wgh-primary-hover);
	color: var(--wgh-primary-foreground);
}

.wgh-btn-hero-primary .lucide-icon {
	width: 18px;
	height: 18px;
}

.wgh-btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 32px;
	background: transparent;
	color: var(--wgh-foreground);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-md);
	font-size: 1rem;
	font-weight: 600;
	transition: border-color 0.15s, background-color 0.15s;
}

.wgh-btn-hero-secondary:hover {
	border-color: var(--wgh-foreground-muted);
	background: var(--wgh-surface);
	color: var(--wgh-foreground);
}

/* Social proof */
.wgh-hero-proof {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 48px;
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	flex-wrap: wrap;
}

.wgh-proof-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--wgh-success);
	border-radius: var(--wgh-radius-full);
	margin-right: 4px;
	vertical-align: middle;
}

.wgh-proof-sep {
	color: var(--wgh-border);
}

/* ==========================================
   Step cards (Zo werkt het)
   ========================================== */

.wgh-step-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.wgh-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	background: var(--wgh-primary);
	color: var(--wgh-primary-foreground);
	font-size: 1.125rem;
	font-weight: 700;
	border-radius: var(--wgh-radius-full);
}

.wgh-step-header .lucide-icon {
	width: 22px;
	height: 22px;
	color: var(--wgh-muted);
	flex-shrink: 0;
}

.wgh-step-header h3 {
	margin: 0;
}

#hoe-werkt-het .img-fluid {
	max-height: 450px;
	width: auto;
	display: block;
	margin: 0 auto;
}

/* ==========================================
   Explainer steps (Bekijk een voorbeeld)
   ========================================== */

.wgh-explainer-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wgh-explainer-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.wgh-explainer-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wgh-radius-lg);
	flex-shrink: 0;
}

.wgh-explainer-icon .lucide-icon {
	width: 20px;
	height: 20px;
}

.wgh-explainer-icon--primary {
	background: var(--wgh-primary-soft);
	color: var(--wgh-primary);
}

.wgh-explainer-icon--primary .lucide-icon {
	color: var(--wgh-primary);
}

.wgh-explainer-icon--success {
	background: rgba(22, 163, 74, 0.1);
	color: var(--wgh-success);
}

.wgh-explainer-icon--success .lucide-icon {
	color: var(--wgh-success);
}

.wgh-explainer-icon--danger {
	background: rgba(220, 38, 38, 0.1);
	color: var(--wgh-danger);
}

.wgh-explainer-icon--danger .lucide-icon {
	color: var(--wgh-danger);
}

.wgh-explainer-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wgh-foreground);
	margin-bottom: 4px;
}

.wgh-explainer-desc {
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	line-height: 1.5;
	margin-bottom: 0;
}

/* Example wishlist preview (landing pages) */
.wgh-example-preview {
	max-width: 900px;
	margin: 0 auto;
}

.wgh-example-preview__hero {
	padding: 24px 20px;
	margin-bottom: 20px;
}

.wgh-example-preview__hero .wgh-list-hero__title {
	font-size: 1.25rem;
}

.wgh-example-preview__hero .wgh-list-hero__description {
	font-size: 0.875rem;
}

.wgh-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--wgh-radius-sm);
	vertical-align: baseline;
}

.wgh-pill--success {
	background: rgba(22, 163, 74, 0.1);
	color: var(--wgh-success);
}

.wgh-pill--danger {
	background: rgba(220, 38, 38, 0.1);
	color: var(--wgh-danger);
}

/* ==========================================
   Occasion cards (Voor elke gelegenheid)
   ========================================== */

.wgh-occasion-card {
	padding: 24px;
	border-radius: var(--wgh-radius-lg);
	border: 1px solid;
	transition: box-shadow 0.2s ease;
	overflow: hidden;
	height: 100%;
}

.wgh-occasion-card:hover {
	box-shadow: var(--wgh-shadow-md);
}

.wgh-occasion-card h3 {
	margin-top: 16px;
	margin-bottom: 8px;
}

/* Per-occasion theming */
.wgh-occasion-blue {
	background: var(--wgh-hero-blue);
	border-color: rgba(37, 99, 235, 0.2);
}

.wgh-occasion-pink {
	background: var(--wgh-hero-pink);
	border-color: rgba(236, 72, 153, 0.2);
}

.wgh-occasion-yellow {
	background: var(--wgh-hero-yellow);
	border-color: rgba(251, 191, 36, 0.3);
}

.wgh-occasion-red {
	background: var(--wgh-hero-red);
	border-color: rgba(239, 68, 68, 0.2);
}

.wgh-occasion-red-light {
	background: rgba(254, 202, 202, 0.6);
	border-color: rgba(239, 68, 68, 0.15);
}

/* Icon container */
.wgh-occasion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--wgh-radius-lg);
	box-shadow: var(--wgh-shadow-sm);
}

.wgh-occasion-icon .lucide-icon {
	width: 24px;
	height: 24px;
}

.wgh-occasion-blue .wgh-occasion-icon .lucide-icon { color: var(--wgh-primary); }
.wgh-occasion-pink .wgh-occasion-icon .lucide-icon { color: #ec4899; }
.wgh-occasion-yellow .wgh-occasion-icon .lucide-icon { color: #d97706; }
.wgh-occasion-red .wgh-occasion-icon .lucide-icon { color: #ef4444; }
.wgh-occasion-red-light .wgh-occasion-icon .lucide-icon { color: #ef4444; }

/* Domain preview */
.wgh-occasion-domain {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: var(--wgh-radius-md);
	font-size: 0.75rem;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	color: var(--wgh-foreground-muted);
}

/* ==========================================
   CTA Banner
   ========================================== */

.wgh-cta-banner {
	background: var(--wgh-navbar-bg);
	border-radius: var(--wgh-radius-xl);
	padding: 48px 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.wgh-cta-banner { padding: 64px 48px; }
}

.wgh-cta-banner h2 {
	color: var(--wgh-navbar-fg);
	max-width: 560px;
	margin: 0 auto;
}

.wgh-cta-banner p {
	color: rgba(248, 250, 252, 0.7);
	max-width: 448px;
	margin: 16px auto 0;
}

.wgh-cta-banner .wgh-btn-hero-primary {
	margin-top: 32px;
}

/* ==========================================
   Form pages (auth, contact, settings)
   ========================================== */

.wgh-form-page {
	max-width: 480px;
	margin: 0 auto;
	padding: 48px 0;
}

@media (min-width: 768px) {
	.wgh-form-page { padding: 80px 0; }
}

/* Card container */
.wgh-form-card {
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-xl);
	padding: 32px 28px;
	background: var(--wgh-background);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

@media (min-width: 576px) {
	.wgh-form-card { padding: 40px 36px; }
}

/* Brand header */
.wgh-form-brand {
	text-align: center;
	margin-bottom: 28px;
}

.wgh-form-brand h1 {
	font-size: 1.5rem;
	margin-bottom: 4px;
}

.wgh-form-brand p {
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	margin: 0;
}

/* Input styling */
.wgh-input {
	height: 44px;
	padding: 8px 12px;
	font-size: 1rem;
	border: 1px solid var(--wgh-input-border);
	border-radius: var(--wgh-radius-md);
	color: var(--wgh-foreground);
	background: var(--wgh-background);
	width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wgh-input:focus {
	border-color: var(--wgh-primary);
	box-shadow: 0 0 0 3px var(--wgh-primary-soft);
	outline: none;
}

.wgh-input::placeholder {
	color: var(--wgh-foreground-muted);
}

textarea.wgh-input {
	height: auto;
	min-height: 120px;
	resize: vertical;
}

select.wgh-input {
	appearance: auto;
}

/* Password toggle */
.wgh-password-wrap {
	position: relative;
}

.wgh-password-wrap .wgh-input {
	padding-right: 44px;
}

.wgh-password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--wgh-foreground-muted);
	cursor: pointer;
	padding: 4px;
}

.wgh-password-toggle:hover {
	color: var(--wgh-foreground);
}

.wgh-password-toggle .lucide-icon {
	width: 18px;
	height: 18px;
}

/* Form labels */
.wgh-form-page .form-label {
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 6px;
}

/* Form label row with right-aligned link */
.wgh-label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.wgh-label-row a {
	font-size: 0.75rem;
	color: var(--wgh-primary);
	text-decoration: none;
}

.wgh-label-row a:hover {
	text-decoration: underline;
}

/* Submit button */
.wgh-btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding: 0 24px;
	background: var(--wgh-primary);
	color: var(--wgh-primary-foreground);
	border: none;
	border-radius: var(--wgh-radius-md);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.wgh-btn-submit:hover {
	background: var(--wgh-primary-hover);
	color: var(--wgh-primary-foreground);
}

/* Form error state */
.wgh-input.is-invalid {
	border-color: var(--wgh-danger);
}

.wgh-input.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.wgh-form-error {
	font-size: 0.75rem;
	color: var(--wgh-danger);
	margin-top: 4px;
}

/* Below-form card */
.wgh-form-alt {
	text-align: center;
	padding: 16px;
	margin-top: 24px;
	background: var(--wgh-surface);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
}

.wgh-form-alt a {
	color: var(--wgh-primary);
	font-weight: 600;
	text-decoration: none;
}

.wgh-form-alt a:hover {
	text-decoration: underline;
}

/* Terms text */
.wgh-form-terms {
	text-align: center;
	font-size: 0.75rem;
	color: var(--wgh-foreground-muted);
	margin-top: 16px;
}

.wgh-form-terms a {
	color: var(--wgh-primary);
	text-decoration: none;
}

.wgh-form-terms a:hover {
	text-decoration: underline;
}

/* Form hint (help text below input) */
.wgh-form-hint {
	font-size: 0.75rem;
	color: var(--wgh-foreground-muted);
	margin-top: 4px;
}

/* Static (read-only) form value */
.wgh-form-static {
	padding: 8px 12px;
	font-size: 1rem;
	color: var(--wgh-foreground-muted);
	background: var(--wgh-surface);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-md);
}

/* Danger submit button */
.wgh-btn-danger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding: 0 24px;
	background: var(--wgh-danger);
	color: #fff;
	border: none;
	border-radius: var(--wgh-radius-md);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.wgh-btn-danger:hover {
	background: #b91c1c;
	color: #fff;
}

/* Alt-link separator */
.wgh-form-alt-sep {
	margin: 0 8px;
	color: var(--wgh-border);
}

/* Fieldset / legend styling */
fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

legend {
	font-size: 1.25rem;
	font-weight: 600;
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--wgh-border);
	width: 100%;
}

/* JS-driven error/success states (name availability check) */
.mb-3.error .form-control,
.mb-3.error .form-select {
	border-color: var(--wgh-danger);
}

.mb-3.error .wgh-form-error,
.mb-3.error .wgh-form-hint {
	color: var(--wgh-danger);
}

.mb-3.success .form-control,
.mb-3.success .form-select {
	border-color: #16a34a;
}

.mb-3.success .wgh-form-error,
.mb-3.success .wgh-form-hint {
	color: #16a34a;
}

/* ==========================================
   Wishlist Hero (themed header per list)
   ========================================== */

.wgh-list-hero {
	position: relative;
	padding: 32px 24px;
	border-radius: var(--wgh-radius-xl);
	margin-bottom: 24px;
	overflow: hidden;
	background: #dbeafe url('/images/theme/blauw-bg.jpg') center / cover no-repeat;
}

/* Overlay gradient for text readability */
.wgh-list-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
}

/* Theme background images */
.wgh-list-hero--blauw       { background-image: url('/images/theme/blauw-bg.jpg'); }
.wgh-list-hero--pink        { background-image: url('/images/theme/pink-bg.jpg'); }
.wgh-list-hero--boy         { background-image: url('/images/theme/boy-bg.jpg'); }
.wgh-list-hero--girl        { background-image: url('/images/theme/girl-bg.jpg'); }
.wgh-list-hero--married     { background-image: url('/images/theme/married-bg.jpg'); }
.wgh-list-hero--sinterklaas { background-image: url('/images/theme/sinterklaas-bg.jpg'); }
.wgh-list-hero--kerst       { background-image: url('/images/theme/kerst-bg.jpg'); }
.wgh-list-hero--party       { background-image: url('/images/theme/party-bg.jpg'); }

/* Dark-image themes already have contrast — lighter overlay */
.wgh-list-hero--sinterklaas::before,
.wgh-list-hero--kerst::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
}

/* Light-image themes: subtle overlay + frosted content area for dark text readability */
.wgh-list-hero--pink::before,
.wgh-list-hero--boy::before,
.wgh-list-hero--girl::before,
.wgh-list-hero--married::before,
.wgh-list-hero--party::before {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.25));
}

/* Light-image themes: frosted glass content background */
.wgh-list-hero--pink .wgh-list-hero__inner,
.wgh-list-hero--boy .wgh-list-hero__inner,
.wgh-list-hero--girl .wgh-list-hero__inner,
.wgh-list-hero--married .wgh-list-hero__inner,
.wgh-list-hero--party .wgh-list-hero__inner {
	background: rgba(255, 255, 255, 0.82);
	border-radius: var(--wgh-radius-lg);
	padding: 20px 24px;
}

.wgh-list-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.wgh-list-hero__photo {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border-radius: var(--wgh-radius-lg);
	overflow: hidden;
	position: relative;
	background: rgba(255, 255, 255, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.8);
}

.wgh-list-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wgh-list-hero__photo-actions {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	gap: 4px;
}

.wgh-list-hero__photo-actions button {
	width: 26px;
	height: 26px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--wgh-radius-sm);
	color: var(--wgh-foreground-muted);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.wgh-list-hero__photo-actions button:hover {
	background: #fff;
	color: var(--wgh-foreground);
}

.wgh-list-hero__photo-edit {
	position: absolute;
	bottom: 4px;
	right: 4px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: var(--wgh-radius-sm);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s;
}

.wgh-list-hero__photo-edit:hover {
	background: rgba(0, 0, 0, 0.8);
}

.wgh-list-hero__content {
	flex: 1;
	min-width: 0;
}

.wgh-list-hero__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wgh-foreground);
	margin: 0 0 8px;
	line-height: 1.2;
}

.wgh-list-hero__description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wgh-foreground-muted);
	margin: 0;
}

/* Light-image themes: dark text with white text-shadow for readability */
.wgh-list-hero--pink .wgh-list-hero__title,
.wgh-list-hero--boy .wgh-list-hero__title,
.wgh-list-hero--girl .wgh-list-hero__title,
.wgh-list-hero--married .wgh-list-hero__title,
.wgh-list-hero--party .wgh-list-hero__title {
	color: #1e293b;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.wgh-list-hero--pink .wgh-list-hero__description,
.wgh-list-hero--boy .wgh-list-hero__description,
.wgh-list-hero--girl .wgh-list-hero__description,
.wgh-list-hero--married .wgh-list-hero__description,
.wgh-list-hero--party .wgh-list-hero__description {
	color: #334155;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* Dark-image themes: white text with dark text-shadow for readability */
.wgh-list-hero--blauw .wgh-list-hero__title,
.wgh-list-hero--sinterklaas .wgh-list-hero__title,
.wgh-list-hero--kerst .wgh-list-hero__title {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wgh-list-hero--blauw .wgh-list-hero__description,
.wgh-list-hero--sinterklaas .wgh-list-hero__description,
.wgh-list-hero--kerst .wgh-list-hero__description {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.wgh-list-hero--blauw .btn-outline-secondary,
.wgh-list-hero--sinterklaas .btn-outline-secondary,
.wgh-list-hero--kerst .btn-outline-secondary {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5);
}

.wgh-list-hero--blauw .btn-outline-secondary:hover,
.wgh-list-hero--sinterklaas .btn-outline-secondary:hover,
.wgh-list-hero--kerst .btn-outline-secondary:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
	color: #ffffff;
}

.wgh-list-hero__actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

@media (max-width: 575.98px) {
	.wgh-list-hero {
		padding: 20px 16px;
	}
	.wgh-list-hero__inner {
		flex-direction: column;
		gap: 16px;
	}
	.wgh-list-hero__photo {
		width: 80px;
		height: 80px;
	}
	.wgh-list-hero__title {
		font-size: 1.25rem;
	}
}

/* ==========================================
   Wishlist Card (the "geeltje" / sticky note)
   ========================================== */

.wgh-wishlist {
	max-width: 768px;
	margin: 0 auto;
	border: 2px solid var(--wgh-wishlist-border);
	background: var(--wgh-wishlist-bg);
	border-radius: var(--wgh-radius-xl);
	box-shadow: var(--wgh-shadow-md);
	overflow: hidden;
}

.wgh-wishlist__header {
	padding: 20px 24px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wgh-wishlist__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wgh-wishlist-text);
	margin: 0;
}

.wgh-wishlist__toolbar {
	padding: 8px 24px;
	border-top: 1px solid rgba(253, 224, 71, 0.5);
	border-bottom: 1px solid rgba(253, 224, 71, 0.5);
	background: rgba(253, 224, 71, 0.15);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wgh-wishlist__counts {
	font-size: 0.8125rem;
	color: var(--wgh-wishlist-text);
	opacity: 0.8;
}

.wgh-wishlist__sort {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--wgh-wishlist-text);
}

.wgh-wishlist__sort select {
	padding: 4px 8px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wgh-wishlist-text);
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(253, 224, 71, 0.4);
	border-radius: var(--wgh-radius-md);
	cursor: pointer;
}

.wgh-wishlist__sort select:hover {
	background: rgba(255, 255, 255, 0.8);
}

.wgh-wishlist__items {
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wgh-wishlist__empty {
	text-align: center;
	padding: 32px 16px;
	color: var(--wgh-wishlist-text);
	opacity: 0.7;
	font-style: italic;
}

@media (max-width: 575.98px) {
	.wgh-wishlist__header {
		padding: 16px 16px 10px;
	}
	.wgh-wishlist__toolbar {
		padding: 8px 16px;
	}
	.wgh-wishlist__items {
		padding: 12px 16px;
	}
}

/* ==========================================
   Wish Item Card
   ========================================== */

.wgh-wish-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border: 1px solid rgba(253, 224, 71, 0.4);
	border-radius: var(--wgh-radius-lg);
	background: rgba(255, 255, 255, 0.6);
	transition: background 0.15s;
	align-items: center;
}

.wgh-wish-item:hover {
	background: rgba(255, 255, 255, 0.8);
}

.wgh-wish-item--purchased {
	opacity: 0.6;
}

/* Product image */
.wgh-wish-item__image {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--wgh-radius-md);
	overflow: hidden;
	background: var(--wgh-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wgh-wish-item__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wgh-wish-item--purchased .wgh-wish-item__image img {
	filter: grayscale(1);
}

/* Details */
.wgh-wish-item__details {
	flex: 1;
	min-width: 0;
}

.wgh-wish-item__name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wgh-foreground);
	margin: 0;
	line-height: 1.3;
}

.wgh-wish-item__name a {
	color: var(--wgh-primary);
	text-decoration: none;
}

.wgh-wish-item__name a:hover {
	text-decoration: underline;
}

.wgh-wish-item--purchased .wgh-wish-item__name {
	text-decoration: line-through;
	color: var(--wgh-foreground-muted);
}

.wgh-wish-item--purchased .wgh-wish-item__name a {
	color: var(--wgh-foreground-muted);
}

.wgh-wish-item__meta {
	font-size: 0.8125rem;
	color: var(--wgh-wishlist-text);
	opacity: 0.7;
	margin-top: 2px;
}

.wgh-wish-item__meta .wgh-wish-item__price {
	font-weight: 600;
	color: var(--wgh-foreground);
	opacity: 1;
}

/* Action buttons */
.wgh-wish-item__actions {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* Koop! button (green pill) */
.btn-wgh-koop {
	background: var(--wgh-success);
	color: var(--wgh-success-foreground);
	border: none;
	border-radius: var(--wgh-radius-full);
	padding: 5px 16px;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}

.btn-wgh-koop:hover {
	background: #15803d;
	color: #fff;
}

/* Oeps! button (red outline pill) */
.btn-wgh-oeps {
	background: transparent;
	color: var(--wgh-danger);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: var(--wgh-radius-full);
	padding: 4px 14px;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}

.btn-wgh-oeps:hover {
	background: rgba(220, 38, 38, 0.1);
	color: var(--wgh-danger);
}

/* "Naar winkel" link below buy button */
.wgh-wish-item__shop-link {
	font-size: 0.6875rem;
	color: var(--wgh-foreground-muted);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 3px;
}

.wgh-wish-item__shop-link:hover {
	color: var(--wgh-foreground);
}

/* ==========================================
   Owner View: Edit/Delete + Drag-and-Drop
   ========================================== */

.wgh-wish-item__owner-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.wgh-wish-item__drag-handle {
	cursor: grab;
	color: var(--wgh-foreground-muted);
	padding: 4px 2px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.wgh-wish-item__drag-handle:hover {
	opacity: 1;
}

.wgh-wish-item__drag-handle:active {
	cursor: grabbing;
}

.wgh-wish-item__edit-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wgh-wish-item__edit-actions a {
	color: var(--wgh-foreground-muted);
	padding: 2px;
	line-height: 1;
	transition: color 0.15s;
}

.wgh-wish-item__edit-actions a:hover {
	color: var(--wgh-foreground);
}

/* SortableJS drag states */
.wgh-wish-item.wish-drag-ghost {
	opacity: 0.4;
}

.wgh-wish-item.wish-drag-chosen {
	background: rgba(255, 255, 255, 0.9) !important;
	box-shadow: var(--wgh-shadow-lg);
}

/* ==========================================
   Wishlist Sidebar (public view explanation)
   ========================================== */

.wgh-list-sidebar {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wgh-foreground-muted);
}

.wgh-list-sidebar p {
	margin-bottom: 12px;
}

/* ==========================================
   Add Wish Form (owner sidebar)
   ========================================== */

.wgh-add-wish {
	background: var(--wgh-surface);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	padding: 20px;
}

.wgh-add-wish legend {
	font-size: 1rem;
	font-weight: 600;
	padding-bottom: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--wgh-border);
	width: 100%;
}

.wgh-add-wish label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wgh-foreground);
	margin-bottom: 4px;
	display: block;
}

.wgh-add-wish .form-control {
	font-size: 0.875rem;
	margin-bottom: 8px;
}

.wgh-add-wish .example,
.wgh-add-wish .wgh-form-hint {
	font-size: 0.6875rem;
	color: var(--wgh-foreground-muted);
	margin-top: -4px;
	margin-bottom: 8px;
}

/* ==========================================
   Wishlist Overview Card (index_list)
   ========================================== */

.wgh-list-card {
	background: var(--wgh-background);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	padding: 24px;
	margin-bottom: 24px;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

.wgh-list-card:hover {
	box-shadow: var(--wgh-shadow-sm);
}

.wgh-list-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.wgh-list-card__domain {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wgh-foreground);
	margin: 0;
}

.wgh-list-card__info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	font-size: 0.875rem;
	margin-bottom: 16px;
}

.wgh-list-card__info dt {
	font-weight: 600;
	color: var(--wgh-foreground);
}

.wgh-list-card__info dd {
	color: var(--wgh-foreground-muted);
	margin: 0;
}

.wgh-list-card__info dd a {
	color: var(--wgh-primary);
}

.wgh-list-card__info .wgh-form-hint {
	grid-column: 2;
}

.wgh-list-card__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* Themed banner strip at top of list card */
.wgh-list-card__banner {
	height: 80px;
	margin: -24px -24px 16px;
	background-size: cover;
	background-position: center;
}

.wgh-list-card__banner--blauw       { background-image: url('/images/theme/blauw-bg.jpg'); }
.wgh-list-card__banner--pink        { background-image: url('/images/theme/pink-bg.jpg'); }
.wgh-list-card__banner--boy         { background-image: url('/images/theme/boy-bg.jpg'); }
.wgh-list-card__banner--girl        { background-image: url('/images/theme/girl-bg.jpg'); }
.wgh-list-card__banner--married     { background-image: url('/images/theme/married-bg.jpg'); }
.wgh-list-card__banner--sinterklaas { background-image: url('/images/theme/sinterklaas-bg.jpg'); }
.wgh-list-card__banner--kerst       { background-image: url('/images/theme/kerst-bg.jpg'); }
.wgh-list-card__banner--party       { background-image: url('/images/theme/party-bg.jpg'); }

/* WhatsApp icon (Lucide doesn't include brand icons) */
.wgh-icon-whatsapp {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* WhatsApp share button */
.btn-whatsapp {
	background: #25d366;
	color: #fff;
	border: none;
}

.btn-whatsapp:hover {
	background: #1da851;
	color: #fff;
}

/* Share modal */
.share-modal-qr {
	text-align: center;
	margin-bottom: 16px;
}

.qr-container {
	display: inline-block;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-md);
}

.qr-container canvas,
.qr-container img {
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-sm);
}

.share-modal-download {
	font-size: 0.8125rem;
	color: var(--wgh-primary);
	text-decoration: none;
}

.share-modal-download:hover {
	text-decoration: underline;
}

.share-modal-divider {
	text-align: center;
	position: relative;
	margin: 16px 0;
}

.share-modal-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	border-top: 1px solid var(--wgh-border);
}

.share-modal-divider span {
	position: relative;
	background: var(--wgh-background);
	padding: 0 12px;
	font-size: 0.8125rem;
	color: var(--wgh-foreground-muted);
}

.share-modal-buttons .btn {
	font-size: 0.875rem;
	padding: 8px 12px;
}

.share-modal-buttons .btn .lucide-icon,
.share-modal-buttons .btn .wgh-icon-whatsapp {
	width: 16px;
	height: 16px;
	vertical-align: -2px;
}

.share-modal-buttons .share-btn-native {
	display: none;
}

.share-modal-link {
	font-size: 0.875rem;
}

.share-modal-link .form-control {
	font-size: 0.75rem;
	background-color: var(--wgh-surface);
}

/* Show native share button only on devices with navigator.share */
@media (pointer: coarse) {
	.share-modal-buttons .share-btn-native {
		display: block;
	}
}

/* ==========================================
   Dashboard Hero (logged-in homepage)
   ========================================== */

.wgh-dashboard-hero {
	background: linear-gradient(to bottom, var(--wgh-hero-blue), var(--wgh-background));
	padding: 48px 0 24px;
}

@media (min-width: 768px) {
	.wgh-dashboard-hero { padding: 56px 0 32px; }
}

.wgh-dashboard-hero__title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 12px;
}

@media (min-width: 768px) {
	.wgh-dashboard-hero__title { font-size: 2.5rem; }
}

.wgh-dashboard-hero__subtitle {
	font-size: 1.0625rem;
	color: var(--wgh-foreground-muted);
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.6;
}

.wgh-dashboard-content {
	padding: 24px 0 64px;
}

@media (min-width: 768px) {
	.wgh-dashboard-content { padding: 32px 0 64px; }
}

/* Dashboard cards (logged-in homepage) */

.wgh-dash-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: var(--wgh-background);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.wgh-dash-card:hover {
	border-color: var(--wgh-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	color: inherit;
}

.wgh-dash-card__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--wgh-primary-soft);
	border-radius: var(--wgh-radius-lg);
}

.wgh-dash-card__icon .lucide-icon {
	width: 22px;
	height: 22px;
	color: var(--wgh-primary);
}

.wgh-dash-card__icon--add {
	background: var(--wgh-surface);
	border: 2px dashed var(--wgh-border);
}

.wgh-dash-card--add:hover .wgh-dash-card__icon--add {
	border-color: var(--wgh-primary);
}

.wgh-dash-card__body {
	flex: 1;
	min-width: 0;
}

.wgh-dash-card__body h3 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wgh-dash-card__body p {
	font-size: 0.8125rem;
	color: var(--wgh-foreground-muted);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wgh-dash-card__arrow {
	flex-shrink: 0;
	color: var(--wgh-foreground-muted);
}

.wgh-dash-card__arrow.lucide-icon {
	width: 18px;
	height: 18px;
}


/* ==========================================
   Page Header (wishlist dashboard, etc.)
   ========================================== */

.wgh-page-header {
	background: var(--wgh-surface);
	border-bottom: 1px solid var(--wgh-border);
	padding: 32px 0;
}

@media (min-width: 768px) {
	.wgh-page-header { padding: 48px 0; }
}

.wgh-page-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wgh-page-header__content h1 {
	font-size: 1.75rem;
	margin: 0 0 4px;
}

.wgh-page-header__subtitle {
	font-size: 0.9375rem;
	color: var(--wgh-foreground-muted);
	margin: 0;
	line-height: 1.5;
}

.wgh-page-header__quicknav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.wgh-page-header__quicknav-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wgh-foreground-muted);
}

.wgh-quicknav-pill {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wgh-primary);
	background: var(--wgh-primary-softer);
	border: 1px solid rgba(37, 99, 235, 0.2);
	border-radius: var(--wgh-radius-full);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.wgh-quicknav-pill:hover {
	background: var(--wgh-primary-soft);
	border-color: rgba(37, 99, 235, 0.3);
	color: var(--wgh-primary);
}

@media (max-width: 575.98px) {
	.wgh-page-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.wgh-page-header__action {
		width: 100%;
	}
	.wgh-page-header__action .wgh-btn-hero-primary {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================
   Stats Bar (about page)
   ========================================== */

.wgh-stats-bar {
	background: var(--wgh-surface);
	border-top: 1px solid var(--wgh-border);
	border-bottom: 1px solid var(--wgh-border);
	padding: 32px 0;
}

.wgh-stat {
	padding: 16px 8px;
}

.wgh-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--wgh-primary-soft);
	border-radius: var(--wgh-radius-md);
	margin-bottom: 12px;
}

.wgh-stat__icon .lucide-icon {
	width: 20px;
	height: 20px;
	color: var(--wgh-primary);
}

.wgh-stat__value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wgh-foreground);
	line-height: 1.2;
}

.wgh-stat__label {
	font-size: 0.8125rem;
	color: var(--wgh-foreground-muted);
	margin-top: 4px;
}

/* ==========================================
   Feature Cards (about page mission section)
   ========================================== */

.wgh-feature-card {
	display: flex;
	gap: 16px;
	padding: 20px;
	background: var(--wgh-background);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	transition: box-shadow 0.2s;
	height: 100%;
}

.wgh-feature-card:hover {
	box-shadow: var(--wgh-shadow-sm);
}

.wgh-feature-card__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--wgh-primary-soft);
	border-radius: var(--wgh-radius-md);
}

.wgh-feature-card__icon .lucide-icon {
	width: 22px;
	height: 22px;
	color: var(--wgh-primary);
}

.wgh-feature-card h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 6px;
}

.wgh-feature-card p {
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================
   Theme Showcase Grid (about page)
   ========================================== */

.wgh-theme-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 767.98px) {
	.wgh-theme-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wgh-theme-card {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--wgh-radius-lg);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	transition: transform 0.2s, box-shadow 0.2s;
}

.wgh-theme-card:hover {
	transform: scale(1.03);
	box-shadow: var(--wgh-shadow-md);
}

.wgh-theme-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
}

.wgh-theme-card__name {
	position: absolute;
	bottom: 10px;
	left: 12px;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	z-index: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.wgh-theme-card--blauw       { background-image: url('/images/theme/blauw-bg.jpg'); }
.wgh-theme-card--pink        { background-image: url('/images/theme/pink-bg.jpg'); }
.wgh-theme-card--boy         { background-image: url('/images/theme/boy-bg.jpg'); }
.wgh-theme-card--girl        { background-image: url('/images/theme/girl-bg.jpg'); }
.wgh-theme-card--married     { background-image: url('/images/theme/married-bg.jpg'); }
.wgh-theme-card--sinterklaas { background-image: url('/images/theme/sinterklaas-bg.jpg'); }
.wgh-theme-card--kerst       { background-image: url('/images/theme/kerst-bg.jpg'); }
.wgh-theme-card--party       { background-image: url('/images/theme/party-bg.jpg'); }

/* ==========================================
   Theme Selector Swatches (add/edit forms)
   ========================================== */

.wgh-theme-selector {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

@media (max-width: 575.98px) {
	.wgh-theme-selector {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wgh-theme-swatch {
	cursor: pointer;
	text-align: center;
}

.wgh-theme-swatch input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wgh-theme-swatch__preview {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--wgh-radius-md);
	background-size: cover;
	background-position: center;
	border: 2px solid var(--wgh-border);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wgh-theme-swatch input[type="radio"]:checked + .wgh-theme-swatch__preview {
	border-color: var(--wgh-primary);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.wgh-theme-swatch:hover .wgh-theme-swatch__preview {
	border-color: var(--wgh-primary-hover);
}

.wgh-theme-swatch__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wgh-foreground-muted);
	margin-top: 4px;
}

.wgh-theme-swatch input[type="radio"]:checked ~ .wgh-theme-swatch__label {
	color: var(--wgh-primary);
	font-weight: 600;
}

.wgh-theme-swatch--blauw .wgh-theme-swatch__preview       { background-image: url('/images/theme/blauw-bg.jpg'); }
.wgh-theme-swatch--pink .wgh-theme-swatch__preview        { background-image: url('/images/theme/pink-bg.jpg'); }
.wgh-theme-swatch--boy .wgh-theme-swatch__preview         { background-image: url('/images/theme/boy-bg.jpg'); }
.wgh-theme-swatch--girl .wgh-theme-swatch__preview        { background-image: url('/images/theme/girl-bg.jpg'); }
.wgh-theme-swatch--married .wgh-theme-swatch__preview     { background-image: url('/images/theme/married-bg.jpg'); }
.wgh-theme-swatch--sinterklaas .wgh-theme-swatch__preview { background-image: url('/images/theme/sinterklaas-bg.jpg'); }
.wgh-theme-swatch--kerst .wgh-theme-swatch__preview       { background-image: url('/images/theme/kerst-bg.jpg'); }
.wgh-theme-swatch--party .wgh-theme-swatch__preview       { background-image: url('/images/theme/party-bg.jpg'); }

/* ==========================================
   Domain Cloud (about page)
   ========================================== */

.wgh-domain-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 768px) {
	.wgh-domain-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 992px) {
	.wgh-domain-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wgh-domain-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-size: 0.85rem;
	white-space: nowrap;
	color: var(--wgh-foreground);
	background: var(--wgh-background);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	text-align: left;
}

.wgh-domain-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--wgh-primary-soft);
	border-radius: var(--wgh-radius-md);
	flex-shrink: 0;
}

.wgh-domain-card__icon .lucide-icon {
	width: 14px;
	height: 14px;
	color: var(--wgh-primary);
}

/* ==========================================
   CTA Blue (about page bottom CTA)
   ========================================== */

.wgh-cta-blue {
	background: var(--wgh-primary);
	padding: 64px 0;
}

@media (min-width: 768px) {
	.wgh-cta-blue { padding: 80px 0; }
}

.wgh-cta-blue h2 {
	color: #fff;
	max-width: 560px;
	margin: 0 auto 16px;
}

.wgh-cta-blue p {
	color: rgba(255, 255, 255, 0.8);
	max-width: 480px;
	margin: 0 auto;
}

.wgh-cta-blue__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.wgh-btn-cta-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wgh-primary);
	background: #fff;
	border: none;
	border-radius: var(--wgh-radius-md);
	text-decoration: none;
	transition: background 0.15s, box-shadow 0.15s;
}

.wgh-btn-cta-white:hover {
	background: #f0f4ff;
	color: var(--wgh-primary);
	box-shadow: var(--wgh-shadow-md);
}

.wgh-btn-cta-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--wgh-radius-md);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.wgh-btn-cta-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* ==========================================
   Static Pages (FAQ, legal, about)
   ========================================== */

.wgh-static-page {
	padding: 32px 0;
}

@media (min-width: 768px) {
	.wgh-static-page { padding: 48px 0; }
}

/* Sidebar navigation */
.wgh-sidebar-nav {
	background: var(--wgh-surface);
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-lg);
	padding: 16px;
	position: sticky;
	top: 80px;
}

.wgh-sidebar-nav__title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wgh-foreground-muted);
	padding: 0 8px 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--wgh-border);
}

.wgh-sidebar-nav__link {
	display: block;
	padding: 8px;
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	text-decoration: none;
	border-radius: var(--wgh-radius-sm);
	transition: color 0.15s, background 0.15s;
}

.wgh-sidebar-nav__link:hover {
	color: var(--wgh-foreground);
	background: rgba(0, 0, 0, 0.03);
}

.wgh-sidebar-nav__link--active {
	color: var(--wgh-primary);
	font-weight: 600;
	background: var(--wgh-primary-softer);
}

.wgh-sidebar-nav__link--active:hover {
	color: var(--wgh-primary);
	background: var(--wgh-primary-softer);
}

/* Wishlist sidebar navigation */
.wgh-listnav__link {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wgh-listnav__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wgh-listnav__domain {
	color: var(--wgh-foreground-muted);
	font-weight: 400;
	font-size: 0.75rem;
}

.wgh-sidebar-nav__link--active .wgh-listnav__domain {
	color: var(--wgh-primary);
	opacity: 0.7;
}

.wgh-listnav__count {
	flex-shrink: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--wgh-foreground-muted);
	background: rgba(0, 0, 0, 0.06);
	padding: 2px 7px;
	border-radius: var(--wgh-radius-full);
	line-height: 1.4;
}

.wgh-sidebar-nav__link--active .wgh-listnav__count {
	color: var(--wgh-primary);
	background: rgba(37, 99, 235, 0.12);
}

.wgh-list-panel {
	scroll-margin-top: 80px;
}

.wgh-listnav__add {
	margin-top: 4px;
	border-top: 1px solid var(--wgh-border);
	padding-top: 12px !important;
	color: var(--wgh-primary) !important;
	font-size: 0.8125rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Static content area */
.wgh-static-content {
	line-height: 1.7;
}

.wgh-static-content h2 {
	font-size: 1.375rem;
	font-weight: 700;
	margin: 32px 0 12px;
	padding-top: 8px;
}

.wgh-static-content h2:first-child {
	margin-top: 0;
}

.wgh-static-content h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 24px 0 8px;
}

.wgh-static-content p {
	margin-bottom: 12px;
}

.wgh-static-content a:not(.btn) {
	color: var(--wgh-primary);
}

.wgh-static-content a:not(.btn):hover {
	text-decoration: underline;
}

/* Legal content (terms, privacy, cookie) */
.wgh-legal-content {
	font-size: 0.9375rem;
}

.wgh-legal-content .table {
	font-size: 0.8125rem;
}

/* FAQ items */
.wgh-faq-item {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--wgh-border);
	scroll-margin-top: 80px;
}

.wgh-faq-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wgh-faq-item h2 {
	font-size: 1.25rem;
	margin: 0 0 12px;
	padding-top: 0;
}

/* Back to top link */
.wgh-back-to-top {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--wgh-border);
}

.wgh-back-to-top a {
	font-size: 0.875rem;
	color: var(--wgh-foreground-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wgh-back-to-top a:hover {
	color: var(--wgh-primary);
}

.wgh-back-to-top a .lucide-icon {
	width: 14px;
	height: 14px;
}

/* Mobile: hide sidebar, show as horizontal bar */
@media (max-width: 991.98px) {
	.wgh-sidebar-nav {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 12px;
	}
	.wgh-sidebar-nav__title {
		width: 100%;
		border-bottom: none;
		padding-bottom: 4px;
		margin-bottom: 0;
	}
	.wgh-sidebar-nav__link {
		padding: 6px 12px;
		font-size: 0.8125rem;
	}
	.wgh-listnav__domain {
		display: none;
	}
	.wgh-listnav__add {
		border-top: none;
		margin-top: 0;
		padding-top: 6px !important;
	}
}

/* ==========================================================================
   Shops Page
   ========================================================================== */
.wgh-shops-page {
	padding: 24px 0;
}

.wgh-shops-partner-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wgh-primary-softer);
	border: 1px solid rgba(37, 99, 235, 0.15);
	border-radius: var(--wgh-radius-md);
	padding: 14px 18px;
	margin-bottom: 32px;
	font-size: 0.875rem;
	color: var(--wgh-foreground);
	line-height: 1.5;
}

.wgh-shops-partner-banner i,
.wgh-shops-partner-banner svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--wgh-primary);
}

.wgh-shops-category {
	margin-bottom: 32px;
}

.wgh-shops-category h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wgh-border);
}

.wgh-shops-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.wgh-shop-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	min-height: 80px;
	border: 1px solid var(--wgh-border);
	border-radius: var(--wgh-radius-md);
	background: var(--wgh-card);
	text-decoration: none;
	color: var(--wgh-foreground);
	padding: 14px 40px 14px 16px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wgh-shop-card:hover {
	border-color: var(--wgh-primary);
	box-shadow: var(--wgh-shadow-sm);
	text-decoration: none;
	color: var(--wgh-foreground);
}

.wgh-shop-card__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 2px;
}

.wgh-shop-card__desc {
	font-size: 0.75rem;
	color: var(--wgh-foreground-muted);
	line-height: 1.4;
}

.wgh-shop-card__arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wgh-foreground-muted);
	opacity: 0;
	transition: opacity 0.15s;
}

.wgh-shop-card__arrow i,
.wgh-shop-card__arrow svg {
	width: 16px;
	height: 16px;
}

.wgh-shop-card:hover .wgh-shop-card__arrow {
	opacity: 1;
	color: var(--wgh-primary);
}

@media (max-width: 767.98px) {
	.wgh-shops-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.wgh-shops-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Shop Search Page (Bol.com)
   ========================================================================== */
.wgh-shop-search-page {
	padding: 24px 0;
}

.wgh-shop-search-form {
	max-width: 600px;
	margin-bottom: 32px;
}

.wgh-shop-search-form .form-label {
	font-weight: 600;
	margin-bottom: 8px;
}

/* Search result cards (used in both full search and suggestion dropdown) */
.wgh-search-result {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-bottom: 1px solid var(--wgh-border);
}

.wgh-search-result:last-child {
	border-bottom: none;
}

.wgh-search-result__image {
	flex-shrink: 0;
	width: 72px;
}

.wgh-search-result__image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: var(--wgh-radius-sm);
	background: var(--wgh-surface);
}

.wgh-search-result__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.wgh-search-result__title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}

.wgh-search-result__description {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--wgh-foreground-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 6px;
}

.wgh-search-result__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.wgh-search-result__price {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--wgh-foreground);
}

.wgh-search-result .add-suggestion {
	padding: 2px 12px;
	font-size: 0.75rem;
}

@media (max-width: 767.98px) {
	.wgh-search-result__image {
		width: 60px;
	}
	.wgh-search-result__image img {
		width: 60px;
		height: 60px;
	}
	.wgh-search-result__description {
		-webkit-line-clamp: 2;
	}
}

/* ==========================================================================
   Error Page
   ========================================================================== */
/* ---- Error pages ---- */

.wgh-error-page {
	text-align: center;
	padding: 60px 20px 80px;
	max-width: 480px;
	margin: 0 auto;
}

.wgh-error-page__visual {
	margin-bottom: 12px;
}

.wgh-error-page__code {
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 4px;
	background: linear-gradient(135deg, var(--wgh-primary) 0%, #7c3aed 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.wgh-error-page__title {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wgh-foreground);
	margin-bottom: 16px;
}

.wgh-error-page__message {
	color: var(--wgh-foreground-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 6px;
}

.wgh-error-page__message a {
	color: var(--wgh-primary);
	text-decoration: underline;
}

.wgh-error-page__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
}

.wgh-error-page__actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	font-weight: 500;
	border-radius: var(--wgh-radius-md);
}

/* ---- Icon circle (non-404 errors) ---- */

.wgh-error-page__icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--wgh-surface);
	border: 2px solid var(--wgh-border);
	animation: wgh-error-float 3s ease-in-out infinite;
}

.wgh-error-page__icon-circle i,
.wgh-error-page__icon-circle svg {
	width: 40px;
	height: 40px;
	color: var(--wgh-foreground-muted);
}

@keyframes wgh-error-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ---- 404: gift box ---- */

.wgh-error-page__gift-box {
	display: inline-block;
	position: relative;
	width: 100px;
	height: 90px;
	background: var(--wgh-primary);
	border-radius: 8px;
	animation: wgh-error-wobble 2.5s ease-in-out infinite;
}

.wgh-error-page__gift-lid {
	position: absolute;
	top: -16px;
	left: -8px;
	right: -8px;
	height: 20px;
	background: var(--wgh-primary);
	border-radius: 6px 6px 0 0;
	filter: brightness(0.85);
	animation: wgh-error-lid 2.5s ease-in-out infinite;
	transform-origin: center bottom;
}

.wgh-error-page__gift-ribbon {
	position: absolute;
	top: -16px;
	left: 50%;
	width: 14px;
	margin-left: -7px;
	height: calc(100% + 16px);
	background: rgba(255, 255, 255, 0.3);
}

.wgh-error-page__gift-ribbon::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 14px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-bottom: none;
	border-radius: 14px 14px 0 0;
}

.wgh-error-page__gift-question {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}

@keyframes wgh-error-wobble {
	0%, 100% { transform: rotate(0deg); }
	15% { transform: rotate(-4deg); }
	30% { transform: rotate(3deg); }
	45% { transform: rotate(-2deg); }
	60% { transform: rotate(0deg); }
}

@keyframes wgh-error-lid {
	0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
	20% { transform: rotate(-8deg) translateY(-6px); }
	40% { transform: rotate(5deg) translateY(-3px); }
}

/* ---- 403/401: locked ---- */

.wgh-error--locked .wgh-error-page__icon-circle {
	background: #fef2f2;
	border-color: #fecaca;
}

.wgh-error--locked .wgh-error-page__icon-circle i,
.wgh-error--locked .wgh-error-page__icon-circle svg {
	color: var(--wgh-danger);
}

.wgh-error--locked .wgh-error-page__icon-circle {
	animation: wgh-error-shake 0.6s ease-in-out infinite 3s;
}

@keyframes wgh-error-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

/* ---- 500/502: broken ---- */

.wgh-error--broken .wgh-error-page__icon-circle {
	background: #fefce8;
	border-color: #fde047;
}

.wgh-error--broken .wgh-error-page__icon-circle i,
.wgh-error--broken .wgh-error-page__icon-circle svg {
	color: #a16207;
	animation: wgh-error-spin 3s ease-in-out infinite;
}

@keyframes wgh-error-spin {
	0%, 80%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(45deg); }
	40% { transform: rotate(-30deg); }
	60% { transform: rotate(15deg); }
}

/* ---- 503: coffee break ---- */

.wgh-error--break .wgh-error-page__icon-circle {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.wgh-error--break .wgh-error-page__icon-circle i,
.wgh-error--break .wgh-error-page__icon-circle svg {
	color: var(--wgh-success);
}

/* ---- 504/408: timeout ---- */

.wgh-error--timeout .wgh-error-page__icon-circle i,
.wgh-error--timeout .wgh-error-page__icon-circle svg {
	animation: wgh-error-tick 1s steps(1) infinite;
}

@keyframes wgh-error-tick {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(12deg); }
}

/* ---- 400: confused ---- */

.wgh-error--confused .wgh-error-page__icon-circle {
	background: #fff7ed;
	border-color: #fed7aa;
}

.wgh-error--confused .wgh-error-page__icon-circle i,
.wgh-error--confused .wgh-error-page__icon-circle svg {
	color: #c2410c;
}