/*
 * Wagz pack selector (under the header) and the shared pack colours.
 * The same three treatments are used by the selector, hero tabs, pack cards and landing pages:
 * Puppy Welcome = sage with forest text, Walk & Play = forest with cream text,
 * Treat Discovery = mint with forest text.
 */
:root {
	--wagz-pack-puppy-bg: var(--wagz-sage);
	--wagz-pack-puppy-fg: var(--wagz-forest);
	--wagz-pack-walk-bg: var(--wagz-forest);
	--wagz-pack-walk-fg: var(--wagz-cream);
	--wagz-pack-treat-bg: var(--wagz-mint);
	--wagz-pack-treat-fg: var(--wagz-forest);
}
.is-puppy { --pack-bg: var(--wagz-pack-puppy-bg); --pack-fg: var(--wagz-pack-puppy-fg); --pack-ring: var(--wagz-forest); }
.is-walk { --pack-bg: var(--wagz-pack-walk-bg); --pack-fg: var(--wagz-pack-walk-fg); --pack-ring: var(--wagz-mint); }
.is-treat { --pack-bg: var(--wagz-pack-treat-bg); --pack-fg: var(--wagz-pack-treat-fg); --pack-ring: var(--wagz-forest); }

.wagz-pack-bar { background: var(--wagz-cream); border-bottom: 1px solid var(--wagz-sage); padding-block: .6rem; margin-block-start: 0 !important; }
.wagz-pack-selector { margin: 0 auto; }
.wagz-pack-selector__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.wagz-pack-pick {
	box-sizing: border-box; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: .75rem;
	min-height: 62px; padding: .5rem .8rem .5rem .5rem; border-radius: 14px;
	background: var(--pack-bg); color: var(--pack-fg); text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(13, 59, 46, .14);
	transition: transform .15s ease, box-shadow .15s ease;
}
.wagz-pack-pick:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(13, 59, 46, .14), 0 8px 18px -12px rgba(13, 59, 46, .6); color: var(--pack-fg); }
.wagz-pack-pick:focus-visible { outline: 3px solid var(--wagz-forest); outline-offset: 3px; }
.wagz-pack-pick__img { line-height: 0; }
.wagz-pack-pick__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: #fff; display: block; }
.wagz-pack-pick__text { display: grid; gap: .1rem; min-width: 0; }
.wagz-pack-pick__name { font-weight: 700; font-size: .98rem; line-height: 1.2; }
.wagz-pack-pick__label { font-size: .82rem; line-height: 1.25; opacity: .88; }
.wagz-pack-pick__icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.is-walk .wagz-pack-pick__icon { background: rgba(255, 255, 255, .14); }
/* Current pack: a thick inner ring and a tick (not colour alone), plus aria-current="page". */
.wagz-pack-pick.is-current { box-shadow: inset 0 0 0 3px var(--pack-ring); }
.wagz-pack-pick.is-current .wagz-pack-pick__icon { background: var(--pack-ring); color: var(--pack-bg); }
@media (prefers-reduced-motion: reduce) { .wagz-pack-pick, .wagz-pack-pick:hover { transition: none; transform: none; } }

@media (max-width: 781px) {
	.wagz-pack-bar { padding: .5rem 12px; }
	.wagz-pack-selector__list { gap: .4rem; }
	.wagz-pack-pick { grid-template-columns: 30px minmax(0, 1fr); gap: .4rem; min-height: 48px; padding: .35rem .45rem; border-radius: 12px; }
	.wagz-pack-pick__thumb { width: 30px; height: 30px; border-radius: 7px; }
	.wagz-pack-pick__name { font-size: .74rem; line-height: 1.15; }
	.wagz-pack-pick__label { display: none; }
	.wagz-pack-pick__icon { display: none; }
}