/** Shopify CDN: Minification failed

Line 816:20 Expected identifier but found whitespace
Line 816:22 Unexpected "{"
Line 816:31 Expected ":"

**/


/* CSS from section stylesheet tags */
.announcementBar {width:100%; height:40px; display:block; padding-top:12px; position:fixed; top:0; left:0;  box-sizing:border-box; z-index:99999}
.announcementBar {text-align:center; font-family:var(--title-font); font-weight:bold; font-size:14px}
.announcementBar a {color:var(--off-black); text-transform:uppercase;  width:auto; margin:0 auto; text-decoration: none;}
.announcementBar .announcement-item {
    display: none; position:relative; top:-2px
}
.announcementBar .announcement-item:first-child {
    display: block; 
}
.announcement-holder {display:inline-block; width:300px; height:30px; overflow:hidden}
.arrow {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--off-black);
    display: inline-block;  
	position:relative;
	top: -16px;
	z-index:10
}
.arrow-left{left:20px}
.arrow-right{right:20px}


@media only screen and (max-width: 281px){
	.announcement-holder {display:inline-block; width:80%; height:30px; overflow:hidden}
	.announcementBar {font-size:12px}

}
.articleBody {box-sizing:border-box; padding:25px; padding-top:0; width:100%; max-width:768px; margin:0 auto}
 .articleBody p {margin-bottom:25px}
 .articleBody h3 {font-size:24px; margin:25px 0}
 .articleBody ul, .articleBody ol {margin-left:25px}
 .articleBody ul li, .articleBody ol li {line-height:2}
 .articleBody img {width:100%; height:auto}
 .articleBody iframe {width:100%; min-height:44vw; height:200px}
 
 @media only screen and (min-width: 939px){
 .articleBody iframe {min-height:404px; height:404px}
 }
.blogHeaderContainer {width:100%; max-width:1024px; margin:0 auto}
 .blogHeaderImage {width:100%; height:auto; display:block; }
 .blogHeaderImage picture {width:100%}
 .articleImage {width:100%; }
 .blogHeaderImage img {width:100%; height:auto;}

 @media only screen and (min-width: 1024px){
 .blogHeaderContainer {max-width:768px;}
	.blogHeaderImage {display:flex; overflow:hidden; width:100%; height:576px; align-items:center; margin-top:25px}
}
	 
 @media only screen and (min-width: 768px){
 .articleImage {width:100%;}


}
 .articleHeader {width:86%; text-align:center; padding:0px; box-sizing:border-box; max-width:1400px; margin:0 auto; display: grid;
  grid-template-columns: 50px auto 50px;
  grid-gap: 10px;}
  
  .articlePrev {-moz-transform: scale(-2, 2);
				-webkit-transform: scale(-2, 2);
				-o-transform: scale(-2, 2);
				-ms-transform: scale(-2, 2);
				transform: scale(-2, 2);
				 align-self: center; 
				}

  .articleNext {-moz-transform: scale(2, 2);
				-webkit-transform: scale(2, 2);
				-o-transform: scale(2, 2);
				-ms-transform: scale(2, 2);
				transform: scale(2, 2);
				 align-self: center; 
				}


 .articleHeader h1 {font-size:24px}
 .articleIntro {width:90%; text-align:center; padding:0 25px; box-sizing:border-box; max-width:800px;}
 .articleBlogTitle {width:auto; text-align:center; margin:20px auto; margin-bottom:0; font-family:var(--title-font); text-transform:uppercase; font-size:16px}
.overlay {width:100%; height:100%; display:block; position:relative; top:0; left:0; }
.zeroheight {width:100%; height:0; display:block}
.banner_image {width:100%; height:250px; display:block ;  background-size:150% auto;} 
.banner_image .bottom { position:relative; top:250px} 
.banner_image .center {width:auto; text-align:center; margin:0 auto; display:block}
.banner_image .vcenter {v-align:center; position:relative; top:40%}
.banner_image .floattext {height:0; position:relative; top:-150px}
.banner_image {background-position:center center;  background-repeat:no-repeat}  

/* Fade-in and move up animation */
.bannerFade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: bannerFadeInUp 0.5s forwards; 
}

@keyframes bannerFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media only screen and (min-width: 530px){
	.banner_image {height:40vw;  background-size:100% auto;}

}
@media only screen and (min-width: 768px){
	.banner_image {height:400px;}
.banner_image .floattext {top:-233px}
}
.blogHeader {width:100%; text-align:center; padding-bottom:0 !important;  box-sizing:border-box}
 .blogHeader h1 {font-size:26px; padding:0; padding-top:25px}
 
 @media only screen and (min-width: 768px) {
 .blogHeader h1 {font-size:36px}
 
 }
 
 .blogIntro {width:90%; text-align:center; padding:0 25px; box-sizing:border-box; max-width:800px;}
.blogHeader {width:100%; text-align:center; padding:25px; box-sizing:border-box}
 .blogIntro {width:90%; text-align:center; padding:0 25px; box-sizing:border-box; max-width:800px;}
.blog-posts {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.blog-post {
  display: flex; /* Helps with vertical alignment if needed */
  flex-direction: column;
}

.blog-post img {
  width: 100%;
  height: auto;
}

.blog-post h2 {
  text-transform: uppercase;
  /* The link color will be inherited, but we can ensure it's correct */
  color: var(--off-black);
}

.blog-posts p {
  margin: 20px 0;
  /* Ensure the paragraph text color is correct */
  color: var(--off-black);
}

/* This is the crucial new part */
a.blog-post__link,
a.blog-post__link:visited,
a.blog-post__link:link {
  text-decoration: none;
  color: var(--off-black); /* Set a base color for all text inside the link */
  display: block; /* Makes the link behave like a block element */
  height: 100%; /* Ensures the link fills the vertical space of the card */
}

/* Optional: Add a hover effect for the entire card */
a.blog-post__link:hover {
  text-decoration: none;
  opacity: 0.8; /* Example hover effect */
  color: var(--off-black);
}

/* The old .readmorelink class is no longer needed */
.blogHeader {width:100%; text-align:center; padding:25px; box-sizing:border-box}
.blogIntro {width:90%; text-align:center; padding:25px; box-sizing:border-box; max-width:800px; margin:25px auto}

.author {font-size:14px; font-family:var(--title-font); margin:10px 0; text-transform:uppercase}
.excerpt {padding-top:10px}
.blogImageCropper {width:100%; height:auto; display:block; overflow:hidden}
.blogImageCropper img {width:100%; height:auto; transition: transform 0.3s ease;}
.blogImageCropper:hover img {
    transform: scale(1.1); 
  }
  
.blogTileHolder {margin:25px auto; width:100%; max-width:1400px}
.blogPostTile  {box-sizing:border-box; flex: 1 0 calc(100% - 50px);     margin: 25px; }
	
.paginate {width:auto; text-align:center; margin:25px auto}	
.paginate span {border: 1px solid #000; border-radius:2px; padding:8px 16px; text-align:center}
.paginate a { }	
.paginate .page {border:1px solid #999; transition:border-color 0.4s ease}
.paginate .page:hover {border:1px solid #000}
.paginate .current {border:1px solid #000}
.paginate .next, .paginate .prev {border:none}
.readmore {font-family:var(--title-font); margin-top:20px}
.readmore svg {position:relative; top:6px}

@media only screen and (min-width: 768px){
	.blogImageCropper {}
	.blogPostTile  {flex: 1 0 calc(32% - 50px);}

}
.dealsContent {line-height:1.5; padding:25px; box-sizing:border-box;margin-bottom:25px;display:block; margin-top:50px; margin-bottom:0px}
 .dealsContent h1 {font-size:24px; width:auto; display:block; text-align:center; margin:0px auto; padding-bottom:0}
 .dealsContent h2 {font-size:50px; width:auto; display:block; text-align:center; margin:0px auto; padding-top:0}
.page {width:100%; box-sizing:border-box; max-width:1400px; padding:25px; line-height:1.5}
.page h1{text-align:center; width:auto; margin:25px auto; display:block}
.newsletterFlex {
        width: 100%;
        align-items: center; 
		flex-wrap: nowrap !important;
		padding:5px; border:1px solid #ccc;
		margin-top:30px
    }
    
    .newsletterFlex input {
        flex-grow: 1; /* Allow input to grow and take up remaining space */
        padding: 10px 5px;
        color: #fff;
        text-transform: uppercase;
		border:none; outline:none;
		background:none;
		width:75%
       
    }
    
    .newsletterFlex button {
        width: 48px; /* Set button width to 16px */
        flex-shrink: 0; /* Prevent button from shrinking */
        color: #fff;
        font-size: 34px;
        background: none;
        border: none;
        outline: none;
		position:relative;
		top:-4px;
		left:10px;
		cursor:pointer
    }
    
    .newsletterFlex input::placeholder {
        color: #999;
        font-weight: bold;
    }
.socialLinks a {display:inline-block; margin-right:10px}
.payment-icons ul {list-style:none}
.payment-icons li {display:inline-block; margin-right:5px}
.logo a img {position:relative; left:45px}
.mainMenuV2 .mobile-language-switcher {border-bottom:1px solid #999}
.mainMenuV2 .mobile-language-switcher a{border-bottom:none}
.languageSelect {width:80px; position:relative; top:-6px; left:38px}
.languageSelect select {padding:5px}

.fakesublinkV2  a {padding-left:30px !important}
.menuItem-training > span:first-child {padding-left: 20px;}
.menuItem-featured > span:first-child {padding-left: 20px;}
.menuItem-new-in > span:first-child {padding-left: 20px;}
.menuItem-more-sports > span:first-child {padding-left: 20px;}
.telNo {display:block; color:#fff; font-weight:bold;}
.telNo a {color:#fff}
.mobMenuFixer {width:100%; height:75px; display:block}
a.accopener:link, a.accopener:active, a.accopener:visited, a.accopener:hover {color:#fff}
.accountOpener a {color:#fff}
.searchBackground {width:100%; height:100%; position:fixed; z-index:999; background-color:#000; opacity:0.5; display:none; top:0; left:0}

.searchTitle {width:100%; flex:0; display:block}
.searchResultsArea {width:100%;  margin:0 auto; display:block; box-sizing:border-box}
.product-container {width:100%;  margin:0 auto; display:flex; flex-wrap:wrap; gap:20px; box-sizing:border-box; padding-bottom:150px}
.searchSuggestions {width:100%; padding-bottom:25px}
.searchProducts {display:flex; flex:1; gap:10px; flex-wrap:wrap; justify-content:space-between; max-height:400px}

.searchProduct {width:46%; box-sizing:border-box}
.searchProductImage {width:100%}
.searchProductImage img {width:100%; height:auto}
.searchProductTitle {font-family:var(--title-font); font-size:14px; padding-bottom:5px}
.searchUpsells {display:flex; max-width:1400px; margin:0 auto; gap:25px; flex-wrap:wrap}
.searchUpsell {width:46%; box-sizing:border-box}
.searchUpsellImage img {width:100%; height:auto}
.list-group { overflow-y: auto; z-index:9999999; max-height:100%;  scrollbar-width: none;
  -ms-overflow-style: none; }
.list-group::-webkit-scrollbar {
  width: 0; /* For WebKit browsers */
  display: none; /* For Safari and Chrome */
}
.searchProduct .discount {top:-50px; width:33px; height:0px; position:relative}
.searchProduct .discountBG {width:50px; height:33px; background-color:#fff}


.searchSuggestions ul {margin:25px 0; display:block}
.searchSuggestions li {line-height:2}
.result_box {width:100%; height:auto;}
picture {padding:0; margin:0}
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font-size: 16px; padding:0
}

.searchOpener {cursor:pointer}
.searchHolder {position:fixed; top:112px; z-index:9999; background-color:#fff; padding:20px; box-sizing:border-box; width:100%; height:auto; display:none; overscroll-behavior: contain}
.searchLabel {display:none}
.searchInput {width:100%; display:flex; border-bottom:1px solid #666}
.searchInput input {width:100%; border:none; outline:none; padding:10px 10px; box-sizing:border-box}
.searchInputHolder {width:calc(100% - 25px)}




.gorgias-chat-key-1spa6uy, .gorgias-chat-key-kz2tmc, .kl-teaser-V4r6SG {z-index:10 !important}


/* --- NEW MENU STYLES (v2) --- */

.menu-text-link {
  flex-grow: 1; /* Allows text to take up all available space */
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  text-transform: inherit;
  border: none;
	border-bottom:none !important;

  /* This prevents the text from wrapping */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  /* Apply the padding that was on the parent */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 35px; /* Default padding */
}
.menu-text-link:hover {
  color: #999; /* Keeps the hover effect */
}


.menu-toggle-area {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Prevents the arrow area from shrinking */
  cursor: pointer;

  /* Apply padding to the right side and for vertical height */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}

.menu-separator {
  display: block;
  width: 1px;
  background-color: #666; /* Color of the vertical line */
  height: 20px; /* Height of the line */
  margin-right: 15px; /* Space between separator and arrow */
}

/* --- END NEW MENU STYLES (v2) --- */





@media (min-width: 1024px) {
	.mainMenuV2 {
	background-color:var(--off-black); color:#fff; display:none;
	position:fixed;
	 top:112px;
	 height: calc(100% - 100px);
	 left:0;
	  width:100%;
	  z-index:9999;
	  overflow-y:auto;
	 visibility:hidden;
	 box-sizing:border-box;
	 opacity:0;
	 transition: opacity 0.5s ease
	 }

	.mainMenuV2--active {display:block; visibility:visible; opacity:1}
}

@media (max-width: 1023px) {

.mainMenuV2 {
  background-color: var(--off-black);
  color: #fff;
  position: fixed;
  top: 112px;
  left: 0;
  width: 100%;
  height: calc(100vh - 112px);
  z-index: 9999;
  overflow-y: auto;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-100%); /* Start off-screen */
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none; /* Prevent clicks when hidden */
}

.mainMenuV2--active {
  opacity: 1;
  transform: translateY(0); /* Slide into view */
  pointer-events: auto; /* Enable clicks */
}

}




.mainMenuV2::-webkit-scrollbar {
    width: 0; /* Hide scrollbar for WebKit browsers (Chrome, Safari, etc.) */
}

.mainMenuV2 {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mainMenuV2Sublinks--active {visibility:visible; opacity:1}

.fakelinkV2, .customlinkV2, .fakesublinkV2 {
  color:var(--white);
  font-family:var(--title-font);
  text-decoration:none;
  display: flex; /* CHANGED from block */
  justify-content: space-between; /* ADDED */
  align-items: center; /* ADDED */
  font-size:18px;
  text-transform:uppercase;
  width:100%;
  border-bottom:1px solid #999;
  /* PADDING REMOVED from here */
}

.mainMenuV2SubSublinks {border:none}

.fakesublinkV2 {border-bottom:1px solid #333}

.mainMenuV2 a {
  color: #fff;
  padding-left: 15px;
  cursor: pointer;
  font-size: 18px;
  padding: 20px;
  text-transform: uppercase;
  font-family: var(--title-font);
  display: block;
  border-bottom: 1px solid #999;
  transition: color 0.3s ease;
}
.mainMenuV2 a:hover, .fakelinkDT:hover, .fakelinkDTa:hover, .customlinkDT:hover {color:#999}

.mainMenuV2Sublinks {
    opacity: 1;
    transition: opacity 0.4s ease;
    background-color: #181818;
}

.customDropDown {
    opacity: 0;
    transition: opacity 0.4s ease;
    background-color: var(--off-black);
	width:100%; height:auto;
	position:relative;
	top: 0;
    left: 0;
    z-index: 999;
	visibility:hidden


}

@media (max-width: 1023px) {
	.customDropDown {
		opacity: 1;
		visibility:visible;
		display:none

	}

	.customDropDown--active {opacity: 1; visibility:visible; display:block}
	.mainMenuV2Sublinks {display:none}
}


.custom-flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  max-width:1400px; margin:0 auto; padding:0; box-sizing:border-box;
  line-height:0
}

.custom-flex-item {
  flex: 1 0 calc(50%);
  overflow: hidden;
  position: relative;
  margin:0 !important
}
.custom-flex-item img {width:100%; height:auto; transform: scale(1);
  transition: transform 0.5s ease-in-out;
}

.custom-flex-item img:hover {
 transform: scale(1.2);
}
@media (max-width: 350px) {
 .customOverlay {font-size:16px !important}
}

.customOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  justify-content: start;
  align-items: end;
   pointer-events: none;
   font-size:26px; font-family:var(--title-font);
   text-transform:uppercase;
   box-sizing:border-box;
   padding: 20px;
   text-align:left;
   line-height:1
}
.custom-flex-container a {padding:0px; overflow:hidden; position:relative; border:none}

.featuredRow1, .featuredRow2 {width:50%}
.featuredRow3 {width:100%}


@media (min-width: 1024px) {
.searchUpsell {width:20%}

.searchHolder {top:152px;}
	.customDropDown--active {opacity: 1; visibility:visible}
.searchSuggestions {width:250px; padding-right:25px}


	.custom-flex-container {
    justify-content: space-between;
	  gap: var(--flex-gap);
	  }

  .custom-flex-item {
    flex: 1 0 calc(33.33% - var(--flex-gap)); overflow:hidden; position: relative;    margin:0 !important; padding:0 !important
  }

	.customDropDown {
		position:fixed;
		top: 149px;
		left: 0;
		z-index: 999;
	}

	.custom-flex-container {padding:25px}
	.custom-flex-container a {padding:25px}

 	.mainMenuV2 {
		 opacity:1;
	}


}




.mainMenuV2Sublinks li a {border-bottom:1px solid #333; padding-left:30px}
.mainMenuV2SubSublinks a {font-family:var(--title-font); padding:20px; padding-left:45px; display:block; font-size:16px; text-transform:capitalise; background-color:#000}

.mainMenuV2SubSublinks li a {border:none; text-transform:revert; font-family:var(--body-font)}
.mainMenuV2SubSublinks {display:none;  background-color: #000;
    border-bottom: 1px solid #ccc;}

.extraPadding a{padding-left:45px !important}



.menuDtTitle {display:none}
.searchResultsArea, .product-container {display:flex; justify-content:space-between; gap:10px; }

@media only screen and (min-width: 1024px){
.searchResultsArea, .product-container {justify-content:flex-start;}
.searchProducts {justify-content:flex-start}
.searchProduct {width:14%}
.mainMenuV2Sublinks {
    opacity: 0; padding:20px; box-sizing:border-box
}

	.mainMenuV2 {display:flex; visibility:visible}

	.subMenuOpener, .menuOpener, .fakelinkV2, .fakelinkV2, .fakesublinkV2, .customlinkV2 {display:none}

.mainMenuV2Sublinks {
  visibility: hidden;
  position: fixed;
  top: 149px;
  left: 0;
  z-index: 999;
  height: auto;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: 20px;
  background-color: var(--off-black);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mainMenuV2Sublinks--active {
  visibility: visible;
  opacity: 1;
  display: flex !important; /* Keep display flex */
  transition: opacity 0.4s ease;
}

.mainMenuV2Sublinks li a {border-bottom:none;}

	.mainMenuV2SubSublinks {display:block; width:20%; background-color:var(--off-black); text-align:left; border:none}

	.mainMenuV2SubSublinks a {padding-left:0 !important}

	.mainMenuV2SubSublinks, .mainMenuV2SubSublinks li a {background-color:var(--off-black)}
	.menuDtTitle {font-size:18px; font-family:var(--title-font); padding:20px; padding-left:0;  padding-top:5px; text-transform:uppercase; border-bottom:1px solid #999; display:block}

	.mainMenuV2 ul {list-style:none !important}
	.mainMenuV2 a {padding:0; padding-top:5px; border:none; margin-right:40px}
	.mainMenuV2Sublinks a {padding:10px}
	.mainMenuV2Sublinks {padding-bottom:25px}
	.mainMenuV2 {display:flex; width:100%; text-align:center; height:40px;  justify-content: center; margin:0 auto }
}


/* menu */
.mobileMenuCloseSwitch {display:none}
.mainMenu {display:none; width:100%; height:100%; position:fixed; top:100px; left:0; z-index:110; background-color:var(--off-black); color:var(--white); box-sizing:border-box; padding:25px; justify-content: space-between;}
.mainMenu a, .fakelink {color:var(--white); font-family:var(--title-font); text-decoration:none; display:block; font-size:18px; text-transform:uppercase; width:100%; border-bottom:1px solid #bbb; padding:15px 0}
.fakelinkDT, .fakelinkDTa, .customlinkDT {color:#fff; font-family:var(--title-font); text-decoration:none; display:none; font-size:18px; text-transform:uppercase; width:100%; border-bottom:1px solid #bbb; padding:15px 0; cursor:pointer}

@media only screen and (max-width: 1023px){
.mobileHide {display:none !important}
}




@media only screen and (max-width: 450px){
.languageSelect {display:none !important}
.logo a img {position:relative; left:0px}

}


.mainMenu ul {display:block !important; width:100%; height:100%; position:fixed; top:100px; left:0; z-index:120; background-color:var(--off-black); color:var(--white); box-sizing:border-box; padding:25px; list-style:none; border:none}
.mainMenu ul li a, li .fakelink {border:none}
.noborder {border:none !important}
.goback {float:left;}

/* Using a more specific selector */
.menu-toggle-area .menuOpener,
.menu-toggle-area .subMenuOpener {
  z-index: 111;
  color: var(--white);
  transition: transform 0.4s;
  transform: rotate(90deg); /* Default state: points DOWN */
}

/* More specific selector for the active state */
.menu-toggle-area .menuOpener.rotated,
.menu-toggle-area .subMenuOpener.rotated {
  transform: rotate(-90deg); /* Active state: points UP */
}

.mobileMenuOpener, .searchOpener, .cartIcon, .accountOpener  {color:var(--white)}
.header {width:100%; padding:25px; background-color:var(--off-black); box-sizing:border-box; display:flex; height:72px; gap:0; position:fixed; top:40px; left:0; z-index:99999; color:#fff}

.submenuTitle {width:100%; text-align:center; font-family:var(--title-font); font-size:18px; text-transform:uppercase}
.logo img {max-width:150px; height:auto;}

.header .mobileMenuOpener, .header .searchOpener, .header .cartIcon, .header .accountOpener {
  width: 44px;
  height: 44px;
}
.header .logoCenterFix {width:40px; overflow:hidden}
.cartIcon,.searchOpener, .accountOpener {text-align:right; cursor:pointer}

.header .logo {
  flex-grow: 1; text-align:center; padding-top:3px
}

@media only screen and (min-width: 768px){
.logo img {max-width:200px}
}



.accountOpener {display:none}

@media only screen and (min-width: 1024px){
	.header .logoCenterFix {width:132px}
	.accountOpener {display:block}
    .mainMenu {display:flex !important; height:auto; width:100%; justify-content: center; padding:0 50px}

    .mobileMenuOpener, .menuOpener {display:none}
    .mainMenu a, .fakelink {display:inline-block; width:auto; border:none; padding:5px 0; margin-right:40px}
    .fakelinkDT, .fakelinkDTa, .customlinkDT {display:inline-block; width:auto; border:none; padding:5px 0; margin-right:40px}
    .fakelink {display:none}
    .mainMenu ul {width:100%; height:auto; top:135px}
    .submenuTitle {display:none}

    .menu_first_ul {display:flex;}
    .menu_first_ul div{position:relative;}
    .menu_first_ul ul {display:block; position:relative;}
    .menu_first_ul .fakelink{display:block; border-bottom:1px solid #fff}

}
.cartCount {width:19px; height:19px; background-color:#fff; color:#282828; position:relative; top:-37px; right:-35px; z-index:999; border-radius:50%; text-align:center}

@media only screen and (min-width: 370px){
.cartCount {top:-37px; right:-35px;}
}
.countAdjust {position:relative; top:-3px; font-size:12px; font-weight:bold}
.HCcontent {line-height:1.5; padding:0; box-sizing:border-box}
 .defaultPage h1 {width:auto; display:block; text-align:center; margin:25px auto}
.helpCenter {width:100%}
.imgs_with_text_hold {
  display: flex;
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
  justify-content: center; 
  padding-bottom:25px
}

.img_with_text {
  flex: 0 0 100vw; 
  scroll-snap-align: start; 
  box-sizing: border-box; 
}
.imgs_with_text_hold a {text-decoration:none;}
.img_with_text img {width:250px; height:250px; display:block; margin:45px auto;}
.imwt_title {font-size:32px; font-family:var(--title-font); width:100%; text-align:center}
.imwt_text {width:80%; margin:0 auto; text-align:center}
 
@media (min-width: 768px) {
  .img_with_text {
    flex: 0 0 auto;
    width: calc(100% / 3); 
  }
  .sliderflex { justify-content: center}
}



.imgs_with_text_hold {
  scrollbar-color: dark; /* For Firefox */
  scrollbar-width: thin; /* For Firefox */

  /* For Webkit browsers (Chrome, Safari) */
  &::-webkit-scrollbar {
    width: 2px; height:6px; background-color:#ccc
  }

  &::-webkit-scrollbar-thumb {
    background-color: #333; /* Darker color for the thumb */
	border-radius:4px;
  }
  margin-bottom:20px;
  	
}
.content {line-height:1.5; padding:25px; box-sizing:border-box}
 .defaultPage h1 {width:auto; display:block; text-align:center; margin:0px auto}
 .content {margin-bottom:25px;display:block}
 .content a {text-decoration:underline !important}
 .fakeH1 {width:100%; text-align:center; margin:10px auto; font-size:26px; text-transform:uppercase; font-family:var(--title-font);}
/* The .unique-video-section class is added by Shopify using the schema setting below */
  .unique-video-section .unique-video-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Modern way to handle aspect ratio: 16:9 ratio (9 / 16 * 100 = 56.25) */
    height: 56.25vw;
    max-height: 700px; /* Cap the height on very large screens */
    min-height: 300px; /* Ensure it's not too small on mobile */
    background-color: #000;
  }

  .unique-video-section .uvw__placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .unique-video-section .uvw__placeholder video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This is the key change: 'contain' prevents cropping */
    object-fit: contain;
    object-position: {{ section.settings.vertical_alignment }};
  }
.svt-section {
    width: 100%;
    background-color: #f5f5f5;
  }
  .svt-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 100%;
    margin: 0 auto;
  }
  .svt-column {
    flex: 1 1 50%;
    display: flex;
    min-width: 320px;
  }
  .svt-column--media {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #000;
  }
  .svt-media__placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  .svt-media__default-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  .svt-icon {
    width: 60px;
    height: 60px;
    color: rgba(255, 255, 255, 0.5);
  }
  .svt-media__placeholder video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .svt-column--text {
    justify-content: var(--text-align-horizontal, center);
    align-items: var(--text-align-vertical, center);
    padding: 40px 50px;
  }
  .svt-text__content {
    width: 100%;
    max-width: 500px;
    /* UPDATED: Uses the new CSS variable for text-align */
    text-align: var(--text-align-actual, left);
  }
  .svt-text__content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  .svt-text__richtext p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  @media screen and (max-width: 768px) {
    .svt-container {
      flex-direction: column;
    }
    .svt-column {
      flex-basis: 100%;
    }
    .svt-column--media {
      order: 0 !important;
    }
    .svt-column--text {
      padding: 30px 25px;
      min-height: 300px;
    }
  }
/* start */
.fullwidth_image_section {width:100%; height:350px; display:block;}  
.bottom{ margin-top:211px;}
@media only screen and (min-width: 768px){
	.fullwidth_image_section {height:550px;}
	.bottom{ margin-top:388px;}
}


.fullwidth_image_section {background-position:center center; background-size:185% auto; background-repeat:no-repeat; background-color:var(--off-black)}  
.left {float:left; margin-left:25px}
.right {float:right; text-align:right; margin-right:25px}
.right a {float:right}
.top {margin-top:20px}
.floattext {line-height:1.1}
.floattext div {margin:0; padding:0}

.heading {font-family:var(--title-font); font-size:18px; font-weight:bold; text-transform:uppercase }
.subheading {font-family:var(--title-font); font-size:28px; font-weight:bold; text-transform:uppercase }

@media only screen and (min-width: 370px){
.fullwidth_image_section {background-size:125% auto;}  
}

@media only screen and (min-width: 466px){
.fullwidth_image_section {background-size:100% auto;}  
}


@media only screen and (min-width: 768px){
.heading {font-size:24px;}
.subheading {font-size:50px;}
}