/*
 *
 *         Made by Thomas Toma @ Codeable - https://www.codeable.io/developers/thomas-toma/
 *         Under MIT License
 *
 */

/* ADD custom CSS below here*/
.breadcrumbs {display:none;}
h1.page-heading {display:none;}

.header-logo-image {
top: auto !important;
transform: none !important;
}


.card-figcaption .button--primary {
	background-color: rgba(255,255,255,.6);
	color:black;
	border:1px solid black;
}

.card-figcaption .button--primary:hover {
	background-color: rgba(0,0,0,.2);
	border-color: rgba(0,0,0,.3);
	color:black;
}

.slick-vertical .slick-prev {
	top:-15px;
}

div[data-layout-name="pro_quality_text"] {
	font-family: 'VTRedzone-Classic' !important;
}

div[data-layout-name="page_heading"] p {
	font-family: 'VTRedzone-Classic' !important;
	line-height: 1.1em;
}

div[data-layout-name="page_heading_shadow"] p {
	font-family: 'VTRedzone-Classic' !important;
	line-height: 1.1em;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.80);
}

div[data-test-id="hero-image-title"] {
	font-family: 'VTRedzone-Classic' !important;
	line-height: 1em;
}


@media only screen and (max-width: 600px) {
	div[data-test-id="hero-image-title"] {color:rgba(233,36,41,1);}
	div[data-test-id="hero-image-subtitle"] {color:black;}
	div[data-test-id="hero-image-button"] {color:white;}
}


@media only screen and (min-width: 1025px) {
	.productGrid .product {
		width: -webkit-fill-available !important;
		max-width: 33%;
	}
}
.page #product-listing-container {
	width: 100% !important;
}

div[data-layout-name="5_column_layout"] > div {
    width: 20% !important;
    flex-basis: 20% !important;
    max-width: 20% !important;
}

@media only screen and (max-width: 600px) {
div[data-layout-name="5_column_layout"] > div {
    width: 80% !important;
    flex-basis: 80% !important;
    max-width: 80% !important;
}
}

/* ---------- Added 2026-10-01 ----------
   Re-declares the VT Redzone webfont with font-display: swap.
   The original @font-face in templates/layout/base.html has no
   font-display, so browsers hid every VT Redzone heading for up to
   3 seconds while the file downloaded. swap shows the fallback
   instantly and swaps VT Redzone in when it arrives (~164ms).
   Cost: ~400 bytes of CSS. Blocks nothing. To undo, delete this block. */
@font-face {
	font-family: "VTRedzone-Classic";
	src: url("https://cdn11.bigcommerce.com/s-huuabszhaz/content/VTRedzone-Classic.woff") format("woff");
	font-display: swap;
}


/* ---------- Added 2026-10-01 (b) ----------
   Two rules that could not be made to stick via the Page Builder widget.
   Both use !important because the widgets declare their own styles in
   inline <style> blocks in the body, which otherwise win on order.
   Cost: ~450 bytes on a stylesheet that already loads. No new requests,
   no render blocking, no fonts. To undo, delete this block. */

/* hero slideshow: remove the 1920px cap so it fills wide screens */
.hero-section-slideshow {
	max-width: none !important;
}

/* reviews heading: match the hero / roster banner headlines
   (was Montserrat 800 at 0.25px tracking) */
.mti-rev h2 {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(24px, 5vw, 40px) !important;
	letter-spacing: clamp(2px, 0.4vw, 6px) !important;
	text-transform: uppercase !important;
	line-height: 1.1 !important;
}


/* ---------- Added 2026-10-01 (c) ----------
   Drop the text-shadow on the roster heading on phones only.
   Below 600px an earlier rule turns this heading red; a heavy black
   blur behind red text reads as muddy. Above 600px the text is white
   over a photograph, where the shadow aids legibility - so it stays.
   Needs the `body` prefix to out-specify the widget's own !important
   rule, which is declared later in the document.
   Cost: ~160 bytes. No new requests, no render blocking. */
@media only screen and (max-width: 600px) {
	body div[data-test-id="hero-image-title"] {
		text-shadow: none !important;
	}
}