/* ==========================================================================
   1.8.404 — Reusable compact section banner (.idx-band, inc/section-band.php).
   Shop-category banner language: tone gradient, faded photo right (or pattern), dot texture,
   eyebrow with red/yellow accent, one-line white headline, yellow base rule.
   Tones: navy (#0f143a) · darkred (#8f1c2c) · gunmetal.
   ========================================================================== */
:root { --idx-band-pad: 60px; }
@media (max-width: 1100px) { :root { --idx-band-pad: 32px; } }
@media (max-width: 600px) { :root { --idx-band-pad: 20px; } }

.lfh.idx-band {
	display: block; width: 100%; min-height: 0; margin: 0 0 clamp(28px, 4vw, 48px); padding: 2.4rem 0 2.35rem;
	border-radius: 0; box-shadow: none; text-align: left; grid-template-columns: none;
	border-bottom: 4px solid #f3c91a;
}
.idx-band--navy::before { background: linear-gradient(115deg, #0f143a 0%, #1b2560 55%, #2d4a8a 100%); }
.idx-band--darkred::before { background: linear-gradient(115deg, #3a0f1a 0%, #8f1c2c 62%, #b0283c 110%); }
.idx-band--gunmetal::before { background: linear-gradient(115deg, #15181f 0%, #2b313b 55%, #48505c 100%); }
.idx-band--darkred::after { background: radial-gradient(closest-side, rgba(243, 201, 26, .22), transparent); }
.idx-band--gunmetal::after { background: radial-gradient(closest-side, rgba(156, 202, 245, .28), transparent); }

.idx-band .lfh__bg { opacity: .14; }
.idx-band__photo {
	position: absolute; inset: 0 0 0 auto; width: 58%; z-index: -2;
	background-size: cover; background-repeat: no-repeat; opacity: .5; filter: saturate(.85);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70%); mask-image: linear-gradient(90deg, transparent 0, #000 70%);
}
.idx-band__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 20, 58, .2), rgba(15, 20, 58, .55)); }
.idx-band--darkred .idx-band__photo::after { background: linear-gradient(90deg, rgba(90, 16, 30, .2), rgba(90, 16, 30, .55)); }
.idx-band--gunmetal .idx-band__photo::after { background: linear-gradient(90deg, rgba(21, 24, 31, .2), rgba(21, 24, 31, .55)); }

/* Patterns (no-photo banners): faded on the right like the photo */
.idx-band__pattern {
	position: absolute; inset: 0 0 0 auto; width: 62%; z-index: -2; opacity: .55;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 75%); mask-image: linear-gradient(90deg, transparent 0, #000 75%);
}
.idx-band--pat-diamond .idx-band__pattern { background: url("../images/backgrounds/footer-diamond.png") 0 0 / 260px auto repeat; opacity: .22; }
.idx-band--pat-lines .idx-band__pattern { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 14px); }
.idx-band--pat-grid .idx-band__pattern {
	background:
		linear-gradient(rgba(156, 202, 245, .16) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(156, 202, 245, .16) 1px, transparent 1px) 0 0 / 28px 28px;
}

.idx-band__inner { position: relative; padding-inline: var(--idx-band-pad); }
.idx-band .lfh__copy { max-width: 100%; }
.idx-band .idx-band__eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 .35rem; color: #f3c91a; font-size: .74rem; }
.idx-band .idx-band__eyebrow::before {
	content: ""; flex: none; width: 46px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, #8f1c2c 0 22px, transparent 22px 26px, #f3c91a 26px 46px);
}
.idx-band--darkred .idx-band__eyebrow::before { background: linear-gradient(90deg, #fff 0 22px, transparent 22px 26px, #f3c91a 26px 46px); }
.idx-band .idx-band__title,
.section .idx-band h2.idx-band__title {
	margin: 0; padding: 0; color: #fff; white-space: nowrap; max-width: none; width: auto; overflow: visible;
	font-weight: 600; line-height: 1.08; letter-spacing: -.01em; text-align: left;
	font-size: min(clamp(1.75rem, 3.6vw, 2.75rem), calc((100vw - 2 * var(--idx-band-pad)) / (var(--idx-len, 10) * .66)));
}
.section .idx-band h2.idx-band__title::after,
.section .idx-band h2.idx-band__title::before { display: none !important; content: none !important; }

/* Sections that open with a banner: banner sits flush at the top */
.section.has-idx-band { padding-top: 0 !important; }
.section.has-idx-band > .idx-band:first-child { margin-top: 0; }

@media (max-width: 760px) {
	.lfh.idx-band { padding: 1.4rem 0; }
	.idx-band__photo, .idx-band__pattern { width: 100%; opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 85%); mask-image: linear-gradient(90deg, transparent 0, #000 85%); }
	.idx-band--pat-diamond .idx-band__pattern { opacity: .16; }
	.idx-band .idx-band__title,
	.section .idx-band h2.idx-band__title { font-size: min(clamp(1.3rem, 7vw, 2.1rem), calc((100vw - 2 * var(--idx-band-pad)) / (var(--idx-len, 10) * .66))); }
}
/* Phones: very long headlines would drop below ~15px on one line, so they may wrap to two lines instead. */
@media (max-width: 600px) {
	.section .idx-band h2.idx-band__title--long { white-space: normal; text-wrap: balance; font-size: 1.3rem; line-height: 1.15; }
}

/* Molded page — Plating, Surface detail and Pattern library: full width, 60 / 32 / 20px side padding */
.molded-finish > .container.molded-finish__body {
	width: auto; max-width: none; margin-inline: 0; padding-top: 0;
	padding-left: var(--idx-band-pad); padding-right: var(--idx-band-pad);
}
.molded-finish .molded-finish__frame { max-width: 1280px; }
.molded-finish .molded-patterns__head,
.molded-finish .molded-finish__note { max-width: 64rem; }
@media (min-width: 1500px) { .molded-finish .molded-patterns__grid { gap: 18px; } }

/* Banners always run edge to edge, even in sections that carry their own side padding or inset containers. */
.section.has-idx-band > .lfh.idx-band {
	width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* Some section headings had page-specific navy colours by id; banner headlines are always white. */
.section .idx-band .idx-band__title { color: #fff !important; }

/* ==========================================================================
   1.8.405
   ========================================================================== */
/* Banner text never loses its left padding: clip (not a scroll container) so anchor jumps such as the hero
   scroll link can't shift the banner contents sideways; the headline is capped to the padded width. */
.lfh.idx-band { overflow: hidden; overflow: clip; }
.idx-band__inner { padding-left: max(var(--idx-band-pad), env(safe-area-inset-left)); padding-right: max(var(--idx-band-pad), env(safe-area-inset-right)); }
.idx-band .lfh__copy { width: 100%; min-width: 0; overflow: clip; }
.section .idx-band h2.idx-band__title { max-width: 100%; scroll-margin-top: 120px; }

/* Molded hero fades into the Overview banner instead of a hard edge; scroll cue stays on top. */
.molded-page .molded-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(90px, 16vh, 170px);
	background: linear-gradient(180deg, rgba(15, 20, 58, 0) 0%, rgba(15, 20, 58, .75) 55%, #0f143a 100%); pointer-events: none;
}
.molded-page .molded-hero__scroll { z-index: 6; }
.molded-overview > .lfh.idx-band::after {
	inset: 0 0 auto 0; top: 0; right: 0; width: 100%; height: 70%; border-radius: 0; z-index: -1;
	background: linear-gradient(180deg, #0f143a 0%, rgba(15, 20, 58, .6) 35%, rgba(15, 20, 58, 0) 100%);
}

/* Surface detail: texture graphic runs edge to edge, cropped top / bottom so the three coins stay centred and whole.
   Click / Enter still opens the full, uncropped original in the viewer. */
.molded-finish--textures .molded-finish__frame {
	max-width: none; margin-inline: calc(-1 * var(--idx-band-pad)); padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.molded-finish--textures .molded-finish__fig { border-radius: 0; background: #1b1e25; }
.molded-finish--textures .molded-finish__fig:hover,
.molded-finish--textures .molded-finish__fig:focus-visible { transform: none; box-shadow: none; }
.molded-finish--textures .molded-finish__fig:focus-visible { outline-offset: -4px; }
.molded-finish--textures .molded-finish__fig img {
	width: 100%; height: auto; aspect-ratio: 1728 / 1000; object-fit: cover; object-position: 50% 82.4%;
}
.molded-finish--textures .molded-finish__zoom { right: var(--idx-band-pad); }
@media (max-width: 600px) {
	.molded-finish--textures .molded-finish__fig img { aspect-ratio: 1728 / 1150; object-position: 50% 72.9%; }
}

/* 1.8.408 — optional light subtitle under the headline (idx_texas_section_band( array( 'subtitle' => … ) )). */
.section .idx-band .idx-band__subtitle {
	margin: .7rem 0 0; max-width: min(100%, 1320px); padding: 0;
	color: rgba(255, 255, 255, .85) !important; font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0;
	white-space: normal; text-wrap: pretty;
}
@media (max-width: 1100px) { .section .idx-band .idx-band__subtitle { font-size: 16px; } }
@media (max-width: 600px) { .section .idx-band .idx-band__subtitle { font-size: 15px; line-height: 1.5; margin-top: .55rem; } }