/* 1.8.470 — Awards + Glassware category archives (body.idx-eg-archive). Sits on top of shop-archive.css (SHOP panel, toolbar, grid).
   1.8.471 — material / type SWITCH replaces the subcategory tiles + back link.
   1.8.474 — switch restyled as swatch tiles (approved "version B"): 124px tiles, 76px material swatch, Oswald name, muted count,
             two-column grid (scroller | 44px arrow) so the edge fade never touches the arrow. */
.idx-eg-archive {
	--eg-navy: #0f143a; --eg-yellow: #F3C91A; --eg-line: #e2e0e8; --eg-muted: #5b6080;
}

/* ---- Switch shell: [scroller | arrow] ---- */
.idxeg-switch { position: relative; margin: 0 0 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 8px; }
.idxeg-switch.is-scrollable { grid-template-columns: minmax(0, 1fr) 44px; }
.idxeg-switch__scroller { position: relative; min-width: 0; grid-column: 1; }
.idxeg-switch__row {
	position: relative; list-style: none; margin: 0; padding: 6px 4px 10px; display: flex; flex-wrap: nowrap; gap: 12px; align-items: stretch;
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scrollbar-width: none;
}
.idxeg-switch__row::-webkit-scrollbar { display: none; }
/* Edge fade lives on the scroller's row, so the arrow (outside the row) is never faded */
.idxeg-switch__row.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.idxeg-switch__row.has-more-start { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
.idxeg-switch__row.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 72px), transparent); }
.idxeg-switch__item { margin: 0; flex: 0 0 124px; width: 124px; scroll-snap-align: start; scroll-margin-inline: .5rem; display: flex; }

/* Scroll arrow: 40px navy circle, yellow chevron, white ring */
.idxeg-switch__next {
	grid-column: 2; justify-self: end; width: 40px; height: 40px; padding: 0; margin: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--eg-navy); color: var(--eg-yellow); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(16, 20, 56, .22);
	transition: transform .2s ease, background-color .2s ease;
}
.idxeg-switch__next[hidden] { display: none; }
.idxeg-switch__next svg { display: block; transition: transform .2s ease; }
.idxeg-switch__next[data-dir="prev"] svg { transform: scaleX(-1); }
.idxeg-switch__next:hover { background: #1b2560; transform: scale(1.06); }
.idxeg-switch__next:focus-visible { outline: 3px solid var(--eg-yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--eg-navy); }

/* ---- Swatch tile ---- */
.idxeg-pill {
	position: relative; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; text-decoration: none; color: var(--eg-navy);
	background: #fff; border: 1.5px solid rgba(16, 20, 56, .12); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 20, 56, .05);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.idxeg-pill__swatch {
	position: relative; display: block; flex: 0 0 76px; height: 76px; background-color: var(--eg-navy); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.idxeg-pill__swatch::after { /* faint top catch so each sample sits in a tray */
	content: ""; position: absolute; inset: 0; pointer-events: none; border-bottom: 1px solid rgba(16, 20, 56, .08);
	background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 36%, transparent 100%);
}
.idxeg-pill__swatch--all::after { background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0, transparent 40%); }
.idxeg-pill__swatch--fallback { /* brand gradient, never a flat fill */
	background-image: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #c9d6f5 0%, #8fa8e6 52%, #4c6cc2 100%);
}
.idxeg-pill__icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: block; }
.idxeg-pill__icon--glass { width: 44px; height: 44px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 3px rgba(16, 20, 56, .25)); }
.idxeg-pill__meta { display: flex; flex-direction: column; justify-content: center; gap: .18rem; min-height: 52px; padding: .55rem .65rem .6rem; }
.idxeg-pill__name { font-family: "Oswald", "Montserrat", sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .02em; line-height: 1.15; color: var(--eg-navy); overflow-wrap: break-word; }
.idxeg-pill__count { font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; font-size: .7rem; line-height: 1; color: var(--eg-muted); }
.idxeg-pill__count.is-draft { font-style: italic; opacity: .85; } /* admin-only draft count: same muted text, italic */
.idxeg-pill:hover, .idxeg-pill:focus-visible { border-color: rgba(16, 20, 56, .35); box-shadow: 0 4px 14px rgba(16, 20, 56, .12); transform: translateY(-1px); }
.idxeg-pill:focus-visible { outline: 3px solid var(--eg-navy); outline-offset: 3px; }
/* Active = yellow ring + 3px yellow rule between swatch and label */
.idxeg-pill.is-active, .idxeg-pill.is-active:hover, .idxeg-pill.is-active:focus-visible {
	border-color: var(--eg-yellow); box-shadow: 0 0 0 2px var(--eg-yellow), 0 4px 14px rgba(16, 20, 56, .10); transform: none;
}
.idxeg-pill.is-active .idxeg-pill__meta { border-top: 3px solid var(--eg-yellow); padding-top: calc(.55rem - 3px); }
.idxeg-pill.is-pending { opacity: .7; }

/* Admin-only note when the draft preview flag is on */
.idxeg-preview-note { margin: -.4rem 0 1rem; padding: .4rem .7rem; background: #fff7d1; border-left: 4px solid var(--eg-yellow); color: var(--eg-navy); font: 600 .8rem/1.4 "Montserrat", system-ui, sans-serif; }

/* ---- Loading state while a category is fetched ---- */
.idxshop-main.is-loading > :not(.idxeg-switch):not(.idxeg-preview-note) { opacity: .35; pointer-events: none; transition: opacity .15s ease; }
.idxshop-main.is-loading .idxeg-switch__scroller::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; pointer-events: none;
	background: linear-gradient(90deg, transparent 0, var(--eg-yellow) 30%, var(--eg-navy) 70%, transparent 100%) 0 0 / 40% 100% no-repeat;
	animation: idxeg-load 1s ease-in-out infinite;
}
@keyframes idxeg-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Product cards: long supplier titles stay tidy; engrave/blank choice button is the standard square button */
.idx-eg-archive .idxshop-main ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idx-eg-archive .idxshop-main ul.products li.product a.button { white-space: normal; text-align: center; }

/* ---- Phones: same tiles, one scrolling row, arrow stays in its own column ---- */
@media (max-width: 600px) {
	.idxeg-switch__row { gap: 10px; padding-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) {
	.idxeg-pill, .idxeg-switch__next, .idxeg-switch__next svg { transition: none; }
	.idxeg-pill:hover, .idxeg-pill:focus-visible { transform: none; }
	.idxshop-main.is-loading .idxeg-switch__scroller::after { animation: none; background-position: 50% 0; }
}