/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--evo-tracking-wide);
	border: 2px solid transparent;
	border-radius: var(--evo-radius-sm);
	cursor: pointer;
	transition: background var(--evo-speed-fast) var(--evo-ease), color var(--evo-speed-fast) var(--evo-ease), transform var(--evo-speed-fast) var(--evo-ease), border-color var(--evo-speed-fast) var(--evo-ease);
}
.btn--primary { background: var(--evo-accent); color: #fff; }
.btn--primary:hover { background: var(--evo-accent-light); transform: translateY(-1px); }
.btn--outline { background: transparent; border-color: var(--evo-text); color: var(--evo-text); }
.btn--outline:hover { border-color: var(--evo-accent); color: var(--evo-accent); }
.btn--outline-light { background: transparent; border-color: var(--evo-border-on-dark); color: #fff; }
.btn--outline-light:hover { border-color: #fff; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ==========================================================================
   Category tiles (homepage "Shop by Category")
   ========================================================================== */
.category-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.category-tile {
	position: relative;
	display: block;
	aspect-ratio: 3/4;
	border-radius: var(--evo-radius-md);
	overflow: hidden;
	background: var(--evo-dark);
}
.category-tile__media {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 8s var(--evo-ease);
}
.category-tile:hover .category-tile__media { transform: scale(1.12); }
.category-tile__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,22,28,0.05) 30%, rgba(20,22,28,0.9) 100%);
}
.category-tile__label,
.category-tile__cta {
	position: absolute; left: 24px; z-index: 1; color: #fff;
}
.category-tile__label { bottom: 56px; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.category-tile__cta {
	bottom: 24px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--evo-tracking-wide);
	color: var(--evo-accent-light);
	display: inline-flex; align-items: center; gap: 6px;
}
.category-tile__cta::after { content: '\2192'; transition: transform var(--evo-speed-fast) var(--evo-ease); }
.category-tile:hover .category-tile__cta::after { transform: translateX(4px); }

/* ==========================================================================
   Swatch grid ("Shop by Color" / "Shop by Finish")
   ========================================================================== */
.swatch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 18px;
}
.swatch-grid__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.swatch-grid__swatch {
	display: block;
	width: 56px; height: 56px;
	border-radius: 50%;
	border: 2px solid var(--evo-border);
	background: var(--evo-bg);
	transition: transform var(--evo-speed-fast) var(--evo-ease), border-color var(--evo-speed-fast) var(--evo-ease);
}
.swatch-grid__item:hover .swatch-grid__swatch,
.shop-filters__swatch:hover { transform: scale(1.08); border-color: var(--evo-accent); }
.swatch-grid__label { font-size: 0.8rem; font-weight: 600; }

/* Best-effort named-color mapping for swatch dots; falls back to a neutral
   grey if a term slug isn't in this list — safe to extend as new colors
   get added in wp-admin. */
[data-term="black"] { background: #0c0d0f; }
[data-term="white"] { background: #f4f4f4; }
[data-term="blue"] { background: #1f4fd8; }
[data-term="brown"] { background: #6b4226; }
[data-term="color-shift"] { background: linear-gradient(135deg, #7b2ff7, #35c2e8, #f7d354); }
[data-term="gold"] { background: #c9a227; }
[data-term="gray-silver"], [data-term="silver"], [data-term="gray"] { background: #9aa0a6; }
[data-term="green"] { background: #1f7a3d; }
[data-term="orange"] { background: #ea6a1e; }
[data-term="pink"] { background: #e457a0; }
[data-term="purple"] { background: #6a35b0; }
[data-term="red"] { background: #cc1f2a; }
[data-term="yellow"] { background: #f2c318; }
[data-term="gloss"], [data-term="matte"], [data-term="satin"] { background: linear-gradient(135deg, var(--evo-accent), var(--evo-dark)); }

/* ==========================================================================
   Forms
   ========================================================================== */
.newsletter-form { display: flex; gap: 8px; margin-top: 16px; }
.newsletter-form input[type="email"] {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--evo-border-on-dark);
	background: rgba(255,255,255,0.06);
	color: #fff;
	border-radius: var(--evo-radius-sm);
}
.newsletter-form input::placeholder { color: var(--evo-text-on-dark-muted); }

.search-form { display: flex; gap: 8px; width: 100%; }
.search-form__field { flex: 1; padding: 13px 16px; border: 1px solid var(--evo-border); border-radius: var(--evo-radius-sm); }
.search-form__submit { padding: 13px 20px; background: var(--evo-dark); color: #fff; border: none; border-radius: var(--evo-radius-sm); cursor: pointer; }

/* Quantity stepper */
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--evo-border); border-radius: var(--evo-radius-sm); overflow: hidden; }
.quantity .qty-btn { background: var(--evo-bg); border: none; width: 36px; height: 42px; cursor: pointer; font-size: 1rem; }
.quantity .qty-btn:hover { background: var(--evo-border); }
.quantity input.qty { width: 48px; text-align: center; border: none; height: 42px; -moz-appearance: textfield; }
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Trust bar */
.trust-bar { background: var(--evo-white); border-bottom: 1px solid var(--evo-border); }
.trust-bar__list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
	list-style: none; padding: 18px 0; margin: 0;
	font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Stat callout row */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; }
.stat-row__number { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); font-weight: 900; color: var(--evo-accent-light); display: block; }
.stat-row__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--evo-tracking-wide); color: var(--evo-text-on-dark-muted); }

/* Feature grid (Bodyfence-style "Why HEXIS PPF" 4-up) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.feature-card { text-align: left; }
.feature-card__icon { width: 44px; height: 44px; margin-bottom: 18px; color: var(--evo-accent-light); }
.feature-card__title { font-size: 1.05rem; margin-bottom: 8px; }