/* LF Catalog — product image gallery + zoom lightbox.
   ONE image layout for both product surfaces (native /product/{PN}/{slug} and on-demand /part/{id}),
   the same doctrine as lf_render_fitment_grid(): one component, both templates call it.
   Brand accent #00aeef appears ONLY on the dark lightbox chrome (7:1+); on the white page card the
   accent is #0077a8 — #00aeef on white fails contrast (known trap, 2026-07-18 audit). */

/* ---------- page-side gallery ---------- */
.lfcat-gal-main {
	display: block; width: 100%; padding: 0; margin: 0;
	border: 1px solid #e5e5e5; border-radius: 10px; background: #fff;
	position: relative; overflow: hidden; cursor: zoom-in;
	-webkit-appearance: none; appearance: none;
}
.lfcat-gal-main img { display: block; width: 100%; height: auto; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.lfcat-gal-main:hover img,
.lfcat-gal-main:focus-visible img { transform: scale(1.035); }
.lfcat-gal-main:focus-visible { outline: 3px solid #0077a8; outline-offset: 2px; }

.lfcat-gal-hint {
	position: absolute; right: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px; border-radius: 999px;
	background: rgba(13,16,19,.86); color: #fff;
	font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	font-family: var(--lm-head, "Oswald", system-ui, sans-serif);
	opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.lfcat-gal-main:hover .lfcat-gal-hint,
.lfcat-gal-main:focus-visible .lfcat-gal-hint { opacity: 1; transform: translateY(0); }
.lfcat-gal-hint svg { width: 13px; height: 13px; }

.lfcat-gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lfcat-gal-thumb {
	width: 74px; height: 74px; padding: 3px; margin: 0;
	border: 1px solid #ddd; border-radius: 6px; background: #fff;
	cursor: pointer; transition: border-color .18s, box-shadow .18s;
	-webkit-appearance: none; appearance: none;
}
.lfcat-gal-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lfcat-gal-thumb:hover { border-color: #9fb3bd; }
.lfcat-gal-thumb.is-active { border-color: #0077a8; box-shadow: 0 0 0 1px #0077a8; }
.lfcat-gal-thumb:focus-visible { outline: 3px solid #0077a8; outline-offset: 2px; }

/* ---------- lightbox ---------- */
.lfcat-lb {
	position: fixed; inset: 0; z-index: 2147483000;
	display: none; opacity: 0;
	font-family: var(--lm-body, "Saira", system-ui, sans-serif);
}
.lfcat-lb.is-open { display: block; }
.lfcat-lb.is-visible { opacity: 1; }
.lfcat-lb-backdrop {
	position: absolute; inset: 0; background: rgba(6,8,10,.975);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: opacity .28s ease;
}
.lfcat-lb, .lfcat-lb-backdrop { transition: opacity .28s ease; }

.lfcat-lb-stage {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0;
	display: grid; place-items: center;
	overflow: hidden; touch-action: none; cursor: zoom-in;
}
.lfcat-lb-stage.is-zoomed { cursor: grab; }
.lfcat-lb-stage.is-panning { cursor: grabbing; }
.lfcat-lb-img {
	display: block; max-width: none; transform-origin: center center;
	will-change: transform; user-select: none; -webkit-user-drag: none;
	border-radius: 4px; background: #fff;
	box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.lfcat-lb-img.is-idle { transition: transform .3s cubic-bezier(.2,.7,.3,1); }

/* chrome */
.lfcat-lb-bar {
	position: absolute; top: 0; left: 0; right: 0;
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; z-index: 3;
	background: linear-gradient(180deg, rgba(7,9,11,.92), rgba(7,9,11,0));
	pointer-events: none;
}
.lfcat-lb-bar > * { pointer-events: auto; }
.lfcat-lb-caption {
	flex: 1 1 auto; min-width: 0; color: #fff;
	font-family: var(--lm-head, "Oswald", system-ui, sans-serif);
	font-size: .95rem; letter-spacing: .02em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfcat-lb-count {
	flex: 0 0 auto; color: #00aeef; font-weight: 700; font-size: .85rem;
	font-family: var(--lm-head, "Oswald", system-ui, sans-serif); letter-spacing: .08em;
}
.lfcat-lb-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.lfcat-lb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
	background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
	transition: background .18s, border-color .18s, transform .18s, opacity .18s;
	-webkit-appearance: none; appearance: none;
}
.lfcat-lb-btn:hover { background: rgba(0,174,239,.22); border-color: #00aeef; }
.lfcat-lb-btn:active { transform: scale(.94); }
.lfcat-lb-btn:focus-visible { outline: 2px solid #00aeef; outline-offset: 2px; }
.lfcat-lb-btn[disabled] { opacity: .35; cursor: default; }
.lfcat-lb-btn[disabled]:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.lfcat-lb-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lfcat-lb-zoomval {
	min-width: 52px; text-align: center; color: #cfe9f5; font-size: .8rem;
	font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em;
}

/* prev / next */
.lfcat-lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; z-index: 3; padding: 0;  /* the theme pads every <button>; border-box
	                                                       would crush the icon to a sliver */
	border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
	background: rgba(13,16,19,.72); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .18s, border-color .18s, opacity .18s;
	-webkit-appearance: none; appearance: none;
}
.lfcat-lb-nav:hover { background: rgba(0,174,239,.3); border-color: #00aeef; }
.lfcat-lb-nav:focus-visible { outline: 2px solid #00aeef; outline-offset: 3px; }
.lfcat-lb-nav svg { width: 22px; height: 22px; flex: 0 0 auto; }
.lfcat-lb-prev { left: 18px; }
.lfcat-lb-next { right: 18px; }
.lfcat-lb-nav[hidden] { display: none; }

/* bottom thumbnail rail */
.lfcat-lb-rail {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	display: flex; justify-content: center; gap: 8px;
	padding: 16px; overflow-x: auto; scrollbar-width: none;
	background: linear-gradient(0deg, rgba(7,9,11,.92), rgba(7,9,11,0));
}
.lfcat-lb-rail::-webkit-scrollbar { display: none; }
.lfcat-lb-rail[hidden] { display: none; }
.lfcat-lb-rthumb {
	flex: 0 0 auto; width: 62px; height: 62px; padding: 3px;
	border: 1px solid rgba(255,255,255,.2); border-radius: 7px;
	background: rgba(255,255,255,.9); cursor: pointer; opacity: .55;
	transition: opacity .18s, border-color .18s, transform .18s;
	-webkit-appearance: none; appearance: none;
}
.lfcat-lb-rthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lfcat-lb-rthumb:hover { opacity: .85; }
.lfcat-lb-rthumb.is-active { opacity: 1; border-color: #00aeef; transform: translateY(-2px); }
.lfcat-lb-rthumb:focus-visible { outline: 2px solid #00aeef; outline-offset: 2px; }

/* the floating Build Advisor sits at z-index 9000 — park it while the viewer is up, or it
   shows through the blurred backdrop */
body.lfcat-lb-open .lm-chat-trigger,
body.lfcat-lb-open .lm-chat-panel { display: none !important; }

/* loading */
.lfcat-lb-spin {
	position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border: 3px solid rgba(255,255,255,.18); border-top-color: #00aeef; border-radius: 50%;
	animation: lfcat-lb-spin .8s linear infinite; z-index: 2; pointer-events: none;
}
.lfcat-lb-spin[hidden] { display: none; }
@keyframes lfcat-lb-spin { to { transform: rotate(360deg); } }

/* The store theme ships `button { background: var(--lm-blue) !important; color: … !important }`, which
   repaints EVERY <button> on the page — including this component's chrome (nav arrows came out solid
   blue on the live store). !important is the only lever that outranks it. Found on prod only: the
   lm2026 lab theme has drifted and lacks that rule, so local looked correct. Kept to the two
   properties the theme actually forces. */
.lfcat-gal-main { background: #fff !important; }
.lfcat-gal-thumb { background: #fff !important; }
.lfcat-lb-btn { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.lfcat-lb-btn:hover { background: rgba(0,174,239,.22) !important; }
.lfcat-lb-btn[disabled]:hover { background: rgba(255,255,255,.07) !important; }
.lfcat-lb-nav { background: rgba(13,16,19,.72) !important; color: #fff !important; }
.lfcat-lb-nav:hover { background: rgba(0,174,239,.3) !important; }
.lfcat-lb-rthumb { background: rgba(255,255,255,.9) !important; }

@media (max-width: 768px) {
	.lfcat-lb-nav { width: 44px; height: 44px; }
	.lfcat-lb-prev { left: 8px; }
	.lfcat-lb-next { right: 8px; }
	.lfcat-lb-caption { font-size: .82rem; }
	.lfcat-lb-zoomval { display: none; }
	.lfcat-lb-rthumb { width: 50px; height: 50px; }
	.lfcat-gal-hint { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lfcat-lb, .lfcat-lb-backdrop, .lfcat-lb-img.is-idle,
	.lfcat-gal-main img, .lfcat-gal-hint { transition: none !important; }
	.lfcat-gal-main:hover img { transform: none; }
}