/** Shopify CDN: Minification failed
Line 2614:0 Expected "}" to go with "{"
**/
/* Keep Symmetry from painting the gray gradient band */
.section-header { --transparent-header-bg-gradient: none; }
/* Dropdown / mega menus: solid white with a soft shadow */
.navigation__dropdown,
.navigation__tier-2-container,
.navigation__tier-2,
.navigation__item--with-mega-menu .mega-menu {
background: #fff;
box-shadow: 0 12px 28px rgba(255, 255, 255, 0.08); /* fixed from white shadow */
}
/* No global forced size for the league logos */
.league-bar__img { height: auto; }
/* === League Bar Clean Centered Style === */
/* Sit just under the header */
.shopify-section-group-header-group > .shopify-section[id*="league"]{
margin-top: 8px !important;
}
/* Tighten padding */
.league-bar-section{
padding: 8px 0 !important;
background: transparent !important;
}
/* Center the whole row */
.league-bar,
.league-bar__list{
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 16px;
}
/* FIX: Center the text headings (Fan Gear by League, Global Soccer) */
[id*="league-bar"] .section-header,
[id*="league-bar"] h2,
[id*="league-bar"] h3,
.league-bar-section .section-header {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Make logo size respect slider */
.league-bar__img{
height: var(--league-size) !important;
width: auto;
display: block;
}
/* Remove the circular chip background */
.league-bar__item a{
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Kill top/bottom borders if theme injects them */
.league-bar__border-top,
.league-bar__border-bottom{ display: none !important; }
/* ----- League logo bar: mobile fixes ----- */
@media (max-width: 769px){
.shopify-section-group-header-group .league-bar-section{
margin-top: 6px;
padding: 8px 0 !important;
z-index: 3;
}
.league-bar{ padding: 0 12px; }
.league-bar__list{
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.league-bar__list::-webkit-scrollbar{ display: none; }
.league-bar__list{ scroll-snap-type: x mandatory; }
.league-bar__item{ flex: 0 0 auto; scroll-snap-align: center; }
.league-bar__img{ height: calc(var(--league-size, 28px)); width: auto; }
.league-bar__item a{ padding: 6px; border-radius: 999px; }
.league-bar__border-top,
.league-bar__border-bottom{ display: none; }
}
/* --- Team facet: make the list scroll (no JS needed) --- */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list {
max-height: 140px;
overflow-y: auto;
padding-right: 6px;
}
/* TEAM facet: scrollbar alignment + better states */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list {
padding-right: 6px;
margin-right: 0;
scrollbar-width: thin;
scrollbar-color: #c9c9c9 transparent;
}
/* WebKit */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar { width: 8px; }
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb {
background: #c9c9c9; border-radius: 4px;
}
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb:hover,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb:hover {
background: #999; width: 10px;
}
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb:active,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb:active {
background: #666; width: 12px;
}
/* The swatch list is the ONLY scroller */
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list{
max-height: 105px;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
padding-left: 10px;
margin-left: -10px;
padding-right: 20px;
margin-right: 0;
scrollbar-width: thin;
scrollbar-color: #c9c9c9 transparent;
}
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items::-webkit-scrollbar,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list::-webkit-scrollbar{ width: 6px; }
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items::-webkit-scrollbar-thumb,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list::-webkit-scrollbar-thumb{
background: #c9c9c9; border-radius: 4px;
}
/* Color facet shouldn't clip the tooltip */
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__content { overflow: visible; }
/* Hide the default inline hover label under Color swatches */
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__item__text { display: none !important; }
.filter-group:has(input[name="filter.v.option.team"]) { margin-bottom: 30px; }
/* Scroll fade masks */
:root { --facet-fade: 16px; }
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list {
position: relative;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--facet-fade), #000 calc(100% - var(--facet-fade)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--facet-fade), #000 calc(100% - var(--facet-fade)), transparent 100%);
}
/* “Scroll” helper cue */
.filter-group .filter-group__content,
.filter-group .filter-group__items,
.filter-group .filter-group__list { position: relative; }
.filter-group .filter-group__content::after,
.filter-group .filter-group__items::after,
.filter-group .filter-group__list::after {
content: "Scroll";
position: absolute;
right: 8px; top: 6px;
font-size: 12px; /* fixed from 0 */
letter-spacing: .02em;
background: rgba(0,0,0,.06);
color: rgba(0,0,0,.6);
padding: 2px 6px;
border-radius: 999px;
pointer-events: none;
opacity: .6;
transition: opacity .2s;
}
.filter-group .filter-group__content:hover::after,
.filter-group .filter-group__content:focus-within::after,
.filter-group .filter-group__items:hover::after,
.filter-group .filter-group__items:focus-within::after,
.filter-group .filter-group__list:hover::after,
.filter-group .filter-group__list:focus-within::after { opacity: 0; }
/* Cart pennant */
.cart-link{ position: relative; display:inline-flex; align-items:center; }
.pennant-bubble{
position: absolute; top: 0px; right: -5px;
background: #a42036; color:#fff; font-weight:700; font-size:10px;
line-height:1; min-width:16px; height:16px; padding:0 4px;
border-radius:999px; display:flex; align-items:center; justify-content:center;
box-shadow: 0 1px 2px rgba(0,0,0,.15); z-index:1;
}
@media (max-width:1450px){ .pennant-bubble{ right:40px; } }
@media (max-width:990px){ .pennant-bubble{ top:3px; right:-5px; } }
@media (max-width:768px){ .pennant-bubble{ top:4px; right:12px; min-width:15px; height:15px; } }
.pennant-bubble[data-count-over="99"]::after{ content:'99+'; }
.icon-pennant{ display:block; transform:translateY(-3px) translateX(-4px); width:35px; height:35px; }
.header__icon--cart .icon-pennant{ width:35px; height:35px; }
/* MOBILE — shrink the flag icon */
@media (max-width: 768px) {
.icon-pennant {
width: 28px !important;
height: 28px !important;
transform: translateY(-2px) translateX(-2px); /* adjust alignment */
}
}
/* Search icon */
.search-icon-A{ display:block; transform:translateY(-3px); }
@media (max-width:749px){ .search-icon-A{ transform:translateY(-4px); } }
/* Cross-page promos */
.cross-page-promos .icon-with-caption__icon svg,
.cross-page-promos .icon-with-caption__image-icon img { width:100px; height:100px; }
.cross-page-promos .icon-with-caption__icon{ margin-bottom:8px; }
@media (max-width:749px){
.cross-page-promos .icon-with-caption__icon svg,
.cross-page-promos .icon-with-caption__image-icon img { width:75px; height:75px; }
.cross-page-promos .icon-with-caption__icon{ margin-bottom:10px; }
}
/* Reviews strip */
.reviews-strip { --rev-star:#B0182D; --rev-text:#111; --rev-muted:#6b7280; }
.reviews-strip .container { text-align:center; }
.reviews-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2rem - 60px)/2); gap:2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem 60px 1rem .5rem; -webkit-overflow-scrolling:touch; }
.reviews-track::-webkit-scrollbar { display:none; }
.reviews-track > .review-card{ scroll-snap-align:start; }
.review-card{ margin-inline:auto; background:#fff; border:1px solid #eee; border-radius:12px; padding:1.5rem; }
.review-card .stars{ display:inline-flex; gap:.25rem; margin-bottom:.5rem; }
.review-card .stars svg{ width:20px; height:20px; fill:var(--rev-star); }
.review-card blockquote{ font-weight:800; font-size:clamp(20px,2.6vw,32px); line-height:1.2; margin:0 .25rem .5rem; color:var(--rev-text); }
.review-card .meta{ color:var(--rev-muted); font-size:clamp(14px,1.5vw,16px); }
.review-card .meta .name::before{ content:"— "; }
@media (max-width:768px){ .reviews-track{ grid-auto-columns:calc(100% - 48px); padding-right:48px; gap:1rem; } }
/* Unified swatches */
.uw__label{font-weight:700;margin:0 0 .5rem}
.uw__list{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:.25rem 0 1rem;padding:0}
.uw__swatch{width:36px;height:36px;border:2px solid #ddd;border-radius:999px;display:inline-flex;overflow:hidden}
.uw__swatch.is-active{border-color:#111;box-shadow:0 0 0 2px #111 inset}
.uw__swatch.is-soldout{opacity:.45}
.uw__chip{width:100%;height:100%;background-size:cover;background-position:center;border-radius:inherit}
.uw__chip--fallback{background:linear-gradient(45deg,#eee,#ddd)}
@media (max-width:640px){ .uw__list{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.25rem} .uw__swatch{scroll-snap-align:center} }
/* Sibling chips */
.sibling-chips{ margin:0 0 1rem; }
.sibling-chips__label{ font-weight:800; margin-bottom:.5rem; }
.sibling-chips__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:3rem; }
.sibling-chip{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 1.5rem; border:2px solid #e5e7eb; border-radius:9999px; background:#fff; color:inherit; text-decoration:none; font-weight:500; font-size:.95rem; line-height:1; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.sibling-chip:hover{ border-color:#111; }
.sibling-chip:focus-visible{ outline:2px solid #111; outline-offset:2px; }
@media (max-width:680px){ .sibling-chip{ padding:.75rem .85rem; font-size:.78rem; } }
.sibling-chip.is-active{ border-color:#111; background:#111; color:#fff; pointer-events:none; }
/* Badge */
.product-block__image{ position:relative; }
.badge--colors{ position:absolute; top:.5rem; left:.5rem; z-index:2; background:#111; color:#fff; font-weight:700; font-size:12px; line-height:1; padding:.35rem .5rem; border-radius:9999px; box-shadow:0 2px 6px rgba(0,0,0,.18); pointer-events:none; letter-spacing:.2px; }
@media (max-width:480px){ .badge--colors{ font-size:11px; padding:.3rem .45rem; } }
/* Swatches + more-label rules */
@media (max-width:749px){ .product-block-options__inner .product-block-options__item:nth-of-type(n+4){ display:none; } .product-block-options__more-label.more--d{ display:none; } }
@media (min-width:750px){ .product-block-options__inner .product-block-options__item:nth-of-type(n+6){ display:none; } .product-block-options__more-label.more--m{ display:none; } }
/* Product titles */
.template-collection .product-block__title{ font-weight:700; text-transform:capitalize; font-size:1.2rem; }
.template-index .product-block__title{ font-weight:700; font-size:1.15rem; text-transform:capitalize; line-height:1.2; margin-bottom:.25rem; }
/* Cart icon sizing */
.header__icon--cart .icon-pennant{ display:block; width:35px; height:35px; }
/* More colors block spacing */
.sibling-chips{ margin-top:1rem; }
/* PDP installments spacing */
@media (min-width:750px){ .installments-after-atc{ margin-top:20px; } }
@media (max-width:749px){ .installments-after-atc{ margin-top:.5rem; } }
.cc-rating-custom-caption{ opacity:.85; font-size:.95rem; }
/* Optional: nudge mobile row down a hair */
.title-row--mobile + .price-container--mobile{ margin-top:.25rem; }
/* ===== PATCH: Cart pennant icon + bubble (restore variants) ===== */
/* Cart link as positioning context */
.cart-link{ position: relative; display:inline-flex; align-items:center; }
/* Bubble defaults */
.pennant-bubble{
position: absolute;
top: 0px;
right: -5px;
background: #a42036;
color: #fff;
font-weight: 700;
font-size: 10px;
line-height: 1;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
z-index: 1;
}
/* Small desktops */
@media (max-width: 1450px){
.pennant-bubble{
top: 0px;
right: 40px;
font-size: 10px;
min-width: 16px;
height: 16px;
padding: 0 3px;
}
}
/* Tablet */
@media (max-width: 990px){
.pennant-bubble{
top: 3px;
right: -5px;
font-size: 10px;
min-width: 16px;
height: 16px;
padding: 0 3px;
}
}
/* Small phones */
@media (max-width: 768px){
.pennant-bubble{
top: 4px;
right: 12px;
font-size: 10px;
min-width: 15px;
height: 15px;
padding: 0 3px;
}
}
.pennant-bubble[data-count-over="99"]::after{ content: '99+'; }
/* Base pennant SVG (used in multiple places) */
.icon-pennant{
display: block;
transform: translateY(-3px) translateX(-4px);
width: 35px;
height: 35px;
}
/* Header cart-specific pennant size (kept distinct) */
.header__icon--cart .icon-pennant{
width: 24px; /* restore smaller cart glyph if theme expects it */
height: 24px;
}
/* Mobile header cart may need the bigger glyph */
@media (max-width: 768px){
.header__icon--cart .icon-pennant{
transform: translateY(-2px) translateX(-15px);
width: 35px;
height: 35px;
}
}
/* ===== PATCH: Filters – only Teams scrolls, no cues, no fades ===== */
/* 0) Remove ALL “Scroll” helper badges everywhere */
.filter-group .filter-group__content::after,
.filter-group .filter-group__items::after,
.filter-group .filter-group__list::after{
content: none !important;
display: none !important;
}
/* 1) Teams is the ONLY scrolling facet */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list{
max-height: 140px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 6px;
margin-right: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #c9c9c9 transparent;
}
/* WebKit scrollbar for Teams */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar { width: 8px; }
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb {
background: #c9c9c9; border-radius: 4px;
}
/* 2) NO fades on Teams (remove any masks completely) */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list{
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* 3) Everything else: no scrolling, no masks */
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__content,
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__items,
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__list{
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* (color was already un-scrolled in your file; this reinforces it) */
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list{
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
padding-left: 0 !important; margin-left: 0 !important;
padding-right: 0 !important; margin-right: 0 !important;
}
/* ==== 3) FACETS — Only TEAMS scrolls, add Scroll chip (Teams only), no top fade ==== */
/* Reset ALL groups to non-scrolling first */
.filter-group .filter-group__content,
.filter-group .filter-group__items,
.filter-group .filter-group__list{
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* TEAMS = the ONLY scroller */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list{
max-height: 140px !important; /* tweak height as you like */
overflow-y: auto !important;
padding-right: 6px;
margin-right: 0;
scrollbar-width: thin;
scrollbar-color: #c9c9c9 transparent;
/* bottom-only fade (no fade at top) */
-webkit-mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%) !important;
mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%) !important;
}
/* WebKit scrollbar for Teams */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar{ width:8px; }
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb{
background:#c9c9c9;border-radius:4px;
}
/* “Scroll” helper — TEAMS ONLY */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::after{
content:"Scroll";
position:absolute;
right:8px;
top:6px;
font-size:12px;
letter-spacing:.02em;
background:rgba(0,0,0,.06);
color:rgba(0,0,0,.6);
padding:2px 6px;
border-radius:999px;
pointer-events:none;
opacity:.6;
transition:opacity .2s;
}
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content:hover::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content:focus-within::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items:hover::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items:focus-within::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list:hover::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list:focus-within::after{ opacity:0; }
/* Ensure Color / others NEVER scroll */
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.color"]) .filter-group__list{
overflow: visible !important;
max-height: none !important;
}
/* ==== 4) HEADER CART — Pennant icon + bubble, robust breakpoints ==== */
/* Base: make the cart icon a positioning context */
.cart-link{ position:relative; display:inline-flex; align-items:center; }
/* Pennant SVG size (default desktop) */
.icon-pennant{
display:block;
width:35px; height:35px;
transform: translateY(-3px) translateX(-4px);
}
/* Badge bubble (base) */
.pennant-bubble{
position:absolute;
top:0px; /* tweak per breakpoint below */
right:-5px;
background:#a42036;
color:#fff;
font-weight:700;
font-size:10px;
line-height:1;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 1px 2px rgba(0,0,0,.15);
z-index:1;
}
/* Large desktop ≥1450px: a touch more breathing room */
@media (min-width: 1450px){
.icon-pennant{ width:35px; height:35px; transform: translateY(-3px) translateX(-4px); }
.pennant-bubble{ top:0px; right:-5px; }
}
/* Desktop 990–1449px */
@media (min-width: 990px) and (max-width: 1449px){
.icon-pennant{ width:32px; height:32px; transform: translateY(-2px) translateX(-2px); }
.pennant-bubble{ top:0px; right:-4px; }
}
/* Tablet 750–989px */
@media (min-width: 750px) and (max-width: 989px){
.icon-pennant{ width:30px; height:30px; transform: translateY(-1px) translateX(-2px); }
.pennant-bubble{ top:2px; right:-4px; }
}
/* Mobile ≤749px */
@media (max-width: 749px){
.icon-pennant{ width:35px; height:35px; transform: translateY(-2px) translateX(-15px); }
.pennant-bubble{ top:4px; right:12px; }
}
/* Optional clamp for huge counts */
.pennant-bubble[data-count-over="99"]::after{ content:"99+"; }
/* === Reviews + Price: final tidy === */
/* Mobile: show ONLY the mobile header row; hide any others to avoid dupes */
@media (max-width: 749px){
/* show the mobile row under the title */
.price-container--mobile{ display:block !important; }
.price-container--mobile .theme-product-reviews{ display:inline-flex; margin-left:0; }
/* hide any other review widgets on the page (right column, etc.) */
.detail .theme-product-reviews{ display:none !important; }
/* if the price snippet itself outputs a star .rating, hide that too */
.price-container--mobile .rating{ display:none !important; }
}
/***** Facets: ONLY Team scrolls, with a small “Scroll” cue; no top fade *****/
/* remove any generic cues everywhere by default */
.filter-group .filter-group__content::after,
.filter-group .filter-group__items::after,
.filter-group .filter-group__list::after{ content:none !important; }
/* Team: scrolling pane */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list{
max-height: 140px;
overflow-y: auto;
padding-right: 6px;
margin-right: 0;
-webkit-overflow-scrolling: touch;
/* bottom-only fade (no fade at the top) */
-webkit-mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%);
mask-image: linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%);
}
/* Team: bring back the small “Scroll” pill at top-right of the scrolling pane */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::after{
content: "Scroll";
position: absolute;
right: 8px;
top: 6px;
font-size: 12px;
letter-spacing: .02em;
background: rgba(0,0,0,.06);
color: rgba(0,0,0,.6);
padding: 2px 6px;
border-radius: 999px;
pointer-events: none;
opacity: .6;
}
/* Everything else (Product type, Brand, Color, Size, Price, etc): NO scrolling */
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__content,
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__items,
.filter-group:not(:has(input[name="filter.v.option.team"])) .filter-group__list{
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/***** FIX 3 — Facets: ONLY “Team” scrolls; show a small “Scroll” pill on Team; no top fade *****/
/* reset everyone to non-scrolling */
.filter-group .filter-group__content,
.filter-group .filter-group__items,
.filter-group .filter-group__list{
max-height:none !important;
overflow:visible !important;
-webkit-mask-image:none !important; mask-image:none !important;
}
/* Team = the ONLY scroller (bottom fade only) */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__content,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list{
max-height:140px !important; overflow-y:auto !important; padding-right:6px; margin-right:0;
scrollbar-width:thin; scrollbar-color:#c9c9c9 transparent;
-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%) !important;
mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%) !important;
}
/* Teams: small “Scroll” chip */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::after,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::after{
content:"Scroll"; position:absolute; right:8px; top:6px; font-size:12px; letter-spacing:.02em;
background:rgba(0,0,0,.06); color:rgba(0,0,0,.6); padding:2px 6px; border-radius:999px; pointer-events:none; opacity:.6;
}
/* WebKit scrollbar for Teams */
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar{ width:8px; }
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__items::-webkit-scrollbar-thumb,
.filter-group:has(input[name="filter.v.option.team"]) .filter-group__list::-webkit-scrollbar-thumb{ background:#c9c9c9; border-radius:4px; }
/* MOBILE: hide the duplicate price/reviews that render under the gallery */
@media (max-width: 749px){
/* 1) Hide ALL review widgets + price by default… */
.detail .theme-product-reviews,
.detail [class*="spr-"], /* Shopify PR / Stamped / Yotpo badges */
.detail .rating,
.detail .product-info__price{
display: none !important;
}
/* 2) …then re-show ONLY the header row (the one next to the price at the top) */
.detail .product-column-right .price-container--mobile .theme-product-reviews,
.detail .product-column-right .price-container--mobile .product-info__price{
display: inline-flex !important;
}
/* if your top price isn’t inside price-container--mobile, this keeps it visible */
.detail .product-column-right .product-info__price{
display: inline-flex !important;
}
}
/* === Mobile only: keep ONE Judge.me badge (in price row), hide the rest === */
@media (max-width: 749px){
/* 1) Nuke any Judge.me widgets in/under the gallery */
.media-gallery [class^="jdgm"],
.media-gallery [class*=" jdgm"],
.media-gallery [data-jdgm],
.product__media [class^="jdgm"],
.product__media [class*=" jdgm"],
.product__media [data-jdgm],
.product__media-list [class^="jdgm"],
.product__media-list [class*=" jdgm"],
.product__media-list [data-jdgm]{
display: none !important;
}
/* 2) By default, hide ALL Judge.me badges on mobile */
.jdgm-widget,
.jdgm-preview-badge,
.jdgm-prev-badge,
.jdgm-rev-widg,
.jdgm-reviews-widget,
.jdgm-all-reviews-widget,
[data-jdgm-widget],
[data-jdgm-widget-type]{
display: none !important;
}
/* 3) Allow ONLY the one inside the mobile price row */
.price-container--mobile .jdgm-widget,
.price-container--mobile .jdgm-preview-badge,
.price-container--mobile [data-jdgm-widget],
.price-container--mobile [data-jdgm-widget-type="preview-badge"]{
display: inline-flex !important;
align-items: center;
}
/* (optional) ensure the price row behaves like a single line */
.price-container--mobile .price-and-reviews{
display: flex;
align-items: center;
gap: .5rem;
}
}
/* Tighten space between title and the price/reviews row */
@media (max-width: 749px){
/* if your title is followed by the mobile price container */
h1 + .price-container--mobile{ margin-top: .15rem !important; }
.title-row--mobile{ margin-bottom: -1rem !important; } /* safety */
.price-container--mobile .price-and-reviews{ gap: .4rem !important; }
}
/* [Deleted "Hide Thumbnails" block to restore functionality] */
/* Remove the empty gap some themes leave when the strip is hidden */
.media-gallery,
.product__media,
.product__gallery{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Ensure next/prev buttons and/or dots are visible */
.media-gallery .slider-buttons,
.product__media .slider-buttons,
.product__gallery .slider-buttons,
.media-gallery .slider-counter,
.product__media .slider-counter,
.product__gallery .slider-counter{
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Give buttons a little more tappable size, if present */
.media-gallery .slider-button,
.product__media .slider-button,
.product__gallery .slider-button{
width: 40px; height: 40px; border-radius: 999px;
}
/* ---------- SIZE group: header row + link alignment ---------- */
.pdp-size-group .pdp-size-header{
display:flex;
align-items:center;
gap:.75rem;
margin-bottom:.35rem;
}
.pdp-size-group .pdp-size-header a,
.pdp-size-group .pdp-size-header button{
margin-left:auto; /* push "Size guide" to the right */
background:none;
border:0;
padding:0;
font:inherit;
color:#b05a23; /* your copper/orange link color */
text-decoration:underline;
cursor:pointer;
}
/* ---------- SIZE bubbles: make them fill the row evenly ---------- */
/* We don’t rely on theme class names—target the fieldset inside our tagged group */
.pdp-size-group fieldset{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); /* tweak min size */
gap: 14px;
}
.pdp-size-group fieldset label{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
/* Make sure the inner text span stretches and centers */
.pdp-size-group fieldset label .label__text-beside-input,
.pdp-size-group fieldset label span{
width:100%;
text-align:center;
}
/* grid the Size option buttons so rows fill the width */
.option-selector[data-selector-type="listed"][data-option-name="Size"] .option-selector__list,
.variant-picker [data-option-name="Size"] .option-selector__list,
.variant-picker [data-option-name="Size"] .option-values,
.product-form [data-option-name="Size"] .option-values{
display:grid !important;
grid-template-columns: repeat(4, minmax(0,1fr)); /* desktop: 4 across */
gap: 14px;
}
/* make each pill stretch to its grid cell */
.option-selector__btn,
.option-selector .option-value,
.product-form .option-value{
width:100% !important;
justify-content:center;
}
/* tighten on mobile */
@media (max-width: 749px){
.option-selector[data-option-name="Size"] .option-selector__list,
.variant-picker [data-option-name="Size"] .option-selector__list,
.variant-picker [data-option-name="Size"] .option-values,
.product-form [data-option-name="Size"] .option-values{
grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 across on phones */
gap: 12px;
}
}
/***** SIZE BUBBLES: make them fill the row edge-to-edge *****/
/* Clean Canvas usually uses __btns; some builds use __list or .option-values — cover them all */
.option-selector[data-option-name*="Size" i] .option-selector__btns,
.option-selector[data-option-name*="Size" i] .option-selector__list,
.option-selector[data-option-name*="Size" i] .option-values,
.variant-picker [data-option-name*="Size" i] .option-selector__btns,
.product-form [data-option-name*="Size" i] .option-selector__btns{
display:grid !important;
grid-template-columns: repeat(4, minmax(0,1fr)); /* desktop */
gap:14px;
}
/* make each pill stretch to its grid cell */
.option-selector .option-selector__btn,
.option-selector .option-value,
.product-form .option-value{
width:100% !important;
justify-content:center;
}
/* mobile: 3 across */
@media (max-width: 749px){
.option-selector[data-option-name*="Size" i] .option-selector__btns,
.option-selector[data-option-name*="Size" i] .option-selector__list,
.option-selector[data-option-name*="Size" i] .option-values{
grid-template-columns: repeat(3, minmax(0,1fr));
gap:12px;
}
}
/* MOBILE: Size buttons as a tidy grid (ONLY the Size option) */
@media (max-width: 749px){
.option-selector[data-selector-type="listed"][data-option*="size" i] .option-selector__btns{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.option-selector[data-selector-type="listed"][data-option*="size" i] .option-selector__btns > *,
.option-selector[data-selector-type="listed"][data-option*="size" i] .option-selector__btn{
width: 100% !important;
justify-content: center;
}
}
/* If you prefer 5 per row on smaller phones, add this too: */
/*
@media (max-width: 600px){
.option-selector[data-selector-type="listed"][data-option*="size" i] .option-selector__btns{
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
*/
/* --- SIZE GUIDE: force clickable + on top (debug) --- */
.option-selector__header{ /* the row that contains SIZE + link */
position: relative;
z-index: 10; /* above pills below */
display: flex;
align-items: center;
gap: .5rem;
}
.option-selector__header .small-feature-link,
.option-selector__header .size-chart-link,
.option-selector__header a[href*="size" i],
.option-selector__header [data-size-chart],
.option-selector__header button{
position: relative;
z-index: 11; /* above anything in the header */
display: inline-flex;
align-items: center;
gap: .35rem;
color: #B75B21 !important;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
pointer-events: auto !important; /* accept clicks */
}
/* if any pseudo overlays were added earlier, kill them here */
.option-selector legend.label::before,
.option-selector legend.label::after{ content: none !important; }
/* (temporary) make its hitbox visible so we can confirm clicks land */
.option-selector__header .size-chart-link,
.option-selector__header .small-feature-link{ outline: 1px dashed rgba(183,91,33,.35); }
/* brute-force: ensure nothing covers the header row */
.product-form [data-option-name="Size"],
.variant-picker [data-option-name="Size"]{ position: relative; z-index: 5; }
/* --- SIZE GUIDE: icon-only, still clickable --- */
.option-selector__header .small-feature-link,
.option-selector__header .size-chart-link,
.option-selector__header a[href*="size" i],
.option-selector__header [data-size-chart],
.option-selector__header button{
position: relative;
z-index: 11;
display: inline-flex;
width: 20px;
height: 20px;
text-indent: -9999px; /* hide the text, keep clicks */
overflow: hidden;
white-space: nowrap;
color: #B75B21;
text-decoration: none;
pointer-events: auto !important;
outline: none; /* remove the dashed debug outline */
}
.option-selector__header .small-feature-link::before,
.option-selector__header .size-chart-link::before,
.option-selector__header a[href*="size" i]::before,
.option-selector__header [data-size-chart]::before,
.option-selector__header button::before{
content:"";
position:absolute; inset:0; margin:auto;
width:18px; height:18px; background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
}
/* Size header stays above the grid of pills */
.option-selector .label.size-row,
.option-selector legend.label {
position: relative;
z-index: 5;
}
/* The interactive link itself */
.size-guide-link {
position: relative;
z-index: 6;
display: inline-flex;
align-items: center;
gap: .35rem;
color: #B75B21;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
pointer-events: auto !important;
}
/* Ensure the buttons area doesn’t overlay the header */
.option-selector__btns { position: relative; z-index: 1; }
/* Kill any theme pseudo-elements that might cover it */
.option-selector legend.label::before,
.option-selector legend.label::after { content: none !important; }
/* Button that looks like a link */
.size-guide-link{
display:inline-flex;
align-items:center;
gap:.35rem;
color:#B75B21;
background:none;
border:0;
padding:0;
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer;
}
.size-guide-link .size-guide-icon svg{ width:18px; height:18px; display:block; }
/* Ensure header stays above the pills so it’s clickable */
.option-selector .label.size-row,
.option-selector legend.label{ position:relative; z-index:5; }
.option-selector__btns{ position:relative; z-index:1; }
/* Kill any theme pseudo-icons that could overlap */
.option-selector legend.label::before,
.option-selector legend.label::after{ content:none !important; }
/* Link-as-button styling */
.size-guide-link{
display:inline-flex; align-items:center; gap:.35rem;
color:#B75B21; background:none; border:0; padding:0;
text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
/* Our new icon wrapper – keep it clean */
.size-guide-link .chart-icon svg{ width:18px; height:18px; display:block; }
/* Nuke any legacy icon masks that might still target generic names */
.size-guide-link::before,
.size-guide-link::after,
.size-guide-link .size-guide-icon{ /* old class, just in case */
content:none !important; background:none !important;
-webkit-mask:none !important; mask:none !important;
}
/* Keep header clickable above the pills */
.option-selector .label.size-row,
.option-selector legend.label{ position:relative; z-index:5; }
.option-selector__btns{ position:relative; z-index:1; }
/* Keep header/link above the size pills so it's clickable */
.option-selector .label.size-row,
.option-selector legend.label { position: relative; z-index: 5; }
.option-selector__btns { position: relative; z-index: 1; }
/* Strip any theme-added pseudo ruler so only our inline SVG shows */
.size-guide-link::before,
.size-guide-link::after,
.option-selector legend.label::before,
.option-selector legend.label::after,
.label--with-size-guide .label::before,
.label--with-size-guide .label::after {
content: none !important;
background: none !important;
-webkit-mask: none !important;
mask: none !important;
}
/* Button that looks like a link */
.size-guide-link{
display:inline-flex;
align-items:center;
gap:.35rem;
color:#B75B21;
background:none;
border:0;
padding:0;
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer;
}
/* Make sure the inline SVG renders at the right size and adopts the text color */
.size-guide-icon svg{ width:18px; height:18px; display:block; }
.size-guide-link {
color:rgb(0, 0, 0); /* brand accent */
}
.size-guide-link {
display: inline-flex;
align-items: center;
gap: .25rem; /* space between icon and “Chart” */
}
.size-guide-icon {
display: flex;
align-items: center;
justify-content: center;
}
.size-guide-icon svg {
width: 18px; /* size */
height: 18px;
vertical-align: middle; /* nudge baseline */
position: relative;
top: 1px; /* move up/down */
}
/* ---- Make the SIZE header a real row ---- */
/* Listed (legend) version */
fieldset.option-selector > legend.label.size-row{
display:flex !important;
align-items:center !important;
width:100% !important;
}
/* Dropdown (div) version */
.size-row{
display:flex !important;
align-items:center !important;
width:100% !important;
}
/* ---- Push the link to the right ---- */
legend.label.size-row .size-label-text{ margin-right:auto !important; }
.size-row > .label{ margin-right:auto !important; } /* when it's a */
/* The link itself remains inline-flex */
.size-row .size-guide-link,
legend.label.size-row .size-guide-link{
display:inline-flex;
align-items:center;
gap:.25rem;
}
legend.label.size-row,
.size-row {
margin-bottom: .5rem; /* space below header row */
}
.size-guide-link {
font-weight: 500; /* a touch bolder if you want */
text-decoration: underline;
text-underline-offset: 2px;
}
/* DESKTOP ONLY: force price + reviews onto the same row */
@media (min-width: 750px){
/* Make the lane flex, single row */
[id^="ProductInfo-"] .price-container .price-and-reviews{
display: flex !important;
align-items: baseline !important;
gap: .6rem !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
/* Price: don't stretch */
[id^="ProductInfo-"] .price-container .product-info__price{
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
clear: none !important;
}
/* Reviews: kill full-width/grid/clear/float rules some themes add */
[id^="ProductInfo-"] .price-container a.theme-product-reviews{
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
float: none !important;
clear: none !important;
grid-column: auto !important;
white-space: nowrap !important;
}
/* If stars/count inside the link were forced block */
[id^="ProductInfo-"] .price-container a.theme-product-reviews > *{
display: inline-flex !important;
}
}
/* PDP price row — kill any naked text like "4.86 / 5.0" but keep stars + "7 reviews" */
.price-container .theme-product-reviews{
display:inline-flex;
align-items:center;
gap:.4rem;
font-size:0 !important; /* hides stray text nodes */
}
/* restore sizes for the parts we DO want visible */
.price-container .theme-product-reviews .cc-rating-custom-caption,
.price-container .theme-product-reviews .rating,
.price-container .theme-product-reviews .rating__stars,
.price-container .theme-product-reviews .jdgm-prev-badge__stars{
font-size:16px !important; /* adjust if you want smaller/larger */
line-height:1.1;
}
/* make sure SVG stars don’t collapse when parent font-size is 0 */
.price-container .theme-product-reviews svg{
width:1.1em; height:1.1em;
}
/* Align review stars with price */
.price-container .theme-product-reviews .rating__stars,
.price-container .theme-product-reviews .jdgm-prev-badge__stars {
position: relative;
top: -1px; /* bump up slightly */
}
/* Optional: also adjust SVGs directly if needed */
.price-container .theme-product-reviews svg {
width: 1.2em;
height: 1.2em;
position: relative;
top: -3px;
}
.uw__chip{
width:100%; height:100%;
border-radius:inherit;
background:
var(--c2)
? linear-gradient(135deg, var(--c1) 50%, var(--c2) 0)
: var(--c1);
background-size:cover; background-position:center;
}
.uw__chip{ background: var(--c1, #ddd); }
.uw__swatch[style*="--c2"] .uw__chip{
background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 0);
}
/* Force theme chips to use the vars set by swatches.css.liquid */
[data-swatch],
[data-swatch] .swatch__chip,
.swatch__chip,
.option-value__swatch,
.color-swatch {
background-color: var(--swatch-background-color, transparent) !important;
background-image: var(--swatch-background-image, none) !important;
background-size: cover !important;
background-position: center !important;
}
/* Force bold product-card titles on all layouts + mobile */
.product-block__title,
.card__information .card__heading,
.product-card .card__heading,
.grid-product__title,
.card__heading {
font-family: 'Montserrat', sans-serif !important;
font-weight: 650 !important; /* ExtraBold; falls back to bold if 800 not loaded */
-webkit-font-smoothing: antialiased;
}
/* Don’t let anchor styles override the weight */
.card__heading a,
.product-block__title a,
.grid-product__title a {
font-weight: inherit !important;
}
/* ===== Size Chart Modal (desktop table + mobile cards) ===== */
.scm__overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.scm__overlay[hidden]{display:none}
.scm__sheet{background:#fff;border-radius:16px;max-width:min(1100px,95vw);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:20px 20px 28px}
.scm__title{font-weight:800;font-size:clamp(20px,2.4vw,28px);margin:4px 0 14px}
.scm__close{position:sticky;top:0;float:right;border:0;background:none;font-size:34px;line-height:1;color:#111;cursor:pointer;margin:-6px -6px 0 0}
.scm__content{--pad:14px}
.scm__content table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px}
.scm__content thead th{position:sticky;top:0;background:#fff;box-shadow:inset 0 -1px #eee, 0 1px #eee;font-weight:700}
.scm__content td, .scm__content th{padding:14px 12px;border-bottom:1px solid #eee;text-align:left}
.scm__content tr:nth-child(even) td{background:rgba(0,0,0,.015)}
.scm__content caption{caption-side:top;font-weight:700;text-align:left;margin:10px 0 6px}
/* sticky first column on wide screens */
@media (min-width: 900px){
.scm__content tbody th[scope="row"]{position:sticky;left:0;background:#fff;z-index:1}
.scm__content thead th:first-child{position:sticky;left:0;z-index:2;background:#fff}
}
/* ---- Mobile: turn each row into a card ---- */
@media (max-width: 749px){
.scm__sheet{width:100%;padding:16px}
.scm__content table{display:none} /* hide classic tables */
.scm__content .scm__cards{display:grid;gap:12px}
.scm-card{border:1px solid #eee;border-radius:12px;padding:12px 12px 10px;background:#fff}
.scm-card__title{font-weight:800;margin:0 0 8px;font-size:16px}
.scm-kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:14px}
.scm-kv dt{color:#6b7280}
.scm-kv dd{margin:0}
.scm__section{margin:14px 0 6px}
.scm__section-title{font-weight:800;margin:4px 0 10px;font-size:15px}
}
/* small swipe hint when the original table overflows horizontally */
.scm__rich{position:relative}
.scm__rich:has(table){overflow:auto;padding-bottom:4px}
.scm__rich:has(table)::after{
content:"Scroll →";
position:absolute;right:8px;top:4px;font-size:12px;color:rgba(0,0,0,.55);
background:rgba(0,0,0,.06);padding:2px 6px;border-radius:999px
}
/* ===================================== */
/* FAN GEAR + MILITARY ICON SYSTEM */
/* ===================================== */
:root{
--league-icon: 28px;
}
/* === League / Military icons ONLY (no layout shifting) === */
.navigation__tier-2-container
a[href*="/collections/nfl" i],
.navigation__tier-2-container
a[href*="/collections/mlb" i],
.navigation__tier-2-container
a[href*="/collections/nba" i],
.navigation__tier-2-container
a[href*="/collections/nhl" i],
.navigation__tier-2-container
a[href*="/collections/ncaa" i],
.navigation__tier-2-container
a[href*="/collections/mls" i],
.navigation__tier-2-container
a[href*="/collections/wnba" i],
.navigation__tier-2-container
a[href*="/collections/us-soccer" i],
.navigation__tier-2-container
a[href*="/collections/us-swimming" i],
.navigation__tier-2-container
a[href*="/collections/professional-bull-riders" i],
.navigation__tier-2-container
a[href*="/collections/tgl" i],
.navigation__tier-2-container
a[href*="/collections/us-army" i],
.navigation__tier-2-container
a[href*="/collections/navy" i],
.navigation__tier-2-container
a[href*="/collections/air-force" i],
.navigation__tier-2-container
a[href*="/collections/us-coast-guard" i],
.navigation__tier-2-container
a[href*="/collections/space-force" i]{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding-left: 0 !important;
}
/* MLS */
.navigation__tier-2-container
a[href*="/collections/major-league-soccer" i],
.navigation__tier-2-container
a[href*="/collections/mls" i]{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Int. Soccer Club */
.navigation__tier-2-container
a[href*="/collections/intl-soccer" i],
.navigation__tier-2-container
a[href*="/collections/int-soccer" i],
.navigation__tier-2-container
a[href*="/collections/intlsoccer" i]{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
/* National Teams */
.navigation__tier-2-container
a[href*="/collections/national-teams" i],
.navigation__tier-2-container
a[href*="/collections/national" i]{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.navigation__tier-2-container
.navigation__tier-3 > .navigation__item > a.navigation__link[href^="/collections/"]::before{
content:"";
position: relative !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
width: var(--league-icon);
height: var(--league-icon);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
/* ===== Core Leagues ===== */
.navigation__tier-2-container
a[href*="/collections/nfl-metallic-collection" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/NFL_160x_png_385f8171-92e2-4a1c-9477-4ea932adb9a6.avif?v=1756163521&width=240");
}
.navigation__tier-2-container
a[href*="/collections/mlb" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/MLB_160x_png_509f85a0-db12-4c3e-85b8-0e49c84e75ed.avif?v=1756175435&width=240");
}
.navigation__tier-2-container
a[href*="/collections/nba" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/NBA_160x_png_6fe296c9-58d6-4989-80ad-d1f814623688.avif?v=1756175479&width=240");
}
.navigation__tier-2-container
a[href*="/collections/nhl" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/NHL_160x_png_84668863-9010-4135-8c88-ef333a321570.avif?v=1756175518&width=240");
}
.navigation__tier-2-container
a[href*="/collections/ncaa" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/NCAA_fcda07fd-d8a7-46ca-a958-693a756deb45_160x_png.avif?v=1755991048&width=240");
}
/* ===== Fan Gear Leagues ===== */
/* MLS – cover both handles */
.navigation__tier-2-container
a[href*="/collections/major-league-soccer" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/MLS_160x_468d44a5-14e3-40f5-a56f-1ce8dcf88a95_160x_png.avif?v=1755991048&width=240") !important;
}
.navigation__tier-2-container
a[href*="/collections/wnba" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/WNBA_League_Logo_160x_png.avif?v=1755991048&width=240");
}
.navigation__tier-2-container
a[href*="/collections/us-soccer" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/US-soccer_160x_png.avif?v=1756189844&width=240");
}
.navigation__tier-2-container
a[href*="/collections/us-swimming" i]::before{ background-image:url("https://antiguaapparelshop.com/cdn/shop/files/USA_Swimming_160x_png.avif?v=1755991048&width=240");
}
.navigation__tier-2-container
a[href*="/collections/professional-bull-riders" i]::before{
background-image:url("https://antiguaapparelshop.com/cdn/shop/files/PBR_2b771622-e509-4806-a0ec-ed6cccdeff36_160x_png.avif?v=1755991048&width=240");
}
.navigation__tier-2-container
a[href*="/collections/tgl" i]::before{ background-image:url("https://antiguaapparelshop.com/cdn/shop/files/TGL_160x_png.avif?v=1755991048&width=240");
}
.navigation__tier-2-container
a[href*="/collections/intl-soccer" i]::before{ background-image:url("/cdn/shop/files/intsoccericonnew_19922f28-110a-4dcb-b010-dd4c654723ca.svg?v=1771953383");
}
.navigation__tier-2-container
a[href*="/collections/national" i]::before{ background-image:url("/cdn/shop/files/natsoccericonnew.svg?v=1771953557");
}@media (max-width: 990px){
#pageheader .navigation__tier-2 a[href*="/collections/"]::before{ display:none !important; }
#pageheader .navigation__tier-2 a[href*="/collections/"]{ padding-left: 0 !important; }
}
/* Mobile menu drawer - add left padding for logo + text */
@media (max-width: 768px) {
/* The entire mobile fan gear list */
#NavigationTier2-4-mob .navigation__tier-3 .navigation__item {
padding-left: 24px !important;
}
/* Make link behave like icon + text row */
#NavigationTier2-4-mob .navigation__tier-3 .navigation__link {
display: flex !important;
align-items: center !important;
gap: 12px !important; /* space between logo + label */
}
/* Adjust logo itself */
#NavigationTier2-4-mob .navigation__tier-3 img,
#NavigationTier2-4-mob .navigation__tier-3 svg {
width: 32px;
height: auto;
flex-shrink: 0;
}
}
/* Mobile Fan Gear drawer – give icons breathing room */
@media (max-width: 768px) {
/* The slide-out panel wrapper */
.drawer .navigation__tier-3 .navigation__item a {
display: inline-flex;
align-items: center;
gap: 12px; /* space between logo + text */
padding-left: 24px; /* move entire row away from edge */
}
/* Make sure the icon itself isn’t shoved further left */
.drawer .navigation__tier-3 .navigation__item img,
.drawer .navigation__tier-3 .navigation__item svg {
margin-left: 0 !important;
flex-shrink: 0;
}
}
.team-hero__bg-lighten {
position: absolute;
left: 0;
top: 0;
width: 38%; /* adjust if needed */
height: 100%;
background: linear-gradient(
to right,
rgba(255,255,255,0.55),
rgba(255,255,255,0.32),
rgba(255,255,255,0)
);
mix-blend-mode: lighten;
pointer-events: none;
z-index: 1;
}
/* Mobile override */
@media (max-width: 768px) {
.team-hero__bg-lighten {
width: 100%;
height: 55%; /* was 45% */
left: 0;
top: 0;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.60),
rgba(255,255,255,0.38),
rgba(255,255,255,0)
);
mix-blend-mode: lighten;
}
}
.icon-user {
position: relative;
top: -2px;
right: -3px;
}
@media (max-width: 768px) {
.icon-user {
right: 10px;
width: 30px !important;
height: 30px !important;
}
}
/* Move second-level menu items right on mobile */
@media (max-width: 768px) {
.navigation__child-tier,
.navigation__tier-2-container {
padding-left: 20px !important; /* adjust spacing */
}
}
/* [Removed FORCE block to allow theme to filter thumbnails by color] */
/* === MILITARY LOGOS === */
/* Army */
.navigation__tier-2-container
a[href*="/collections/us-army" i]::before{
background-image: url("/cdn/shop/files/200310-A-UM169-001.png?v=1770667451");
}
/* Navy */
.navigation__tier-2-container
a[href*="/collections/navy" i]::before{
background-image: url("/cdn/shop/files/Emblem_of_the_United_States_Navy.png?v=1770667451");
}
/* Air Force */
.navigation__tier-2-container
a[href*="/collections/air-force" i]::before{
background-image: url("/cdn/shop/files/images.png?v=1770667451");
}
/* Coast Guard */
.navigation__tier-2-container
a[href*="/collections/us-coast-guard" i]::before{
background-image: url("/cdn/shop/files/040811-A-YG824-003.jpg?v=1770667451");
}
/* Space Force */
.navigation__tier-2-container
a[href*="/collections/space-force" i]::before{
background-image: url("/cdn/shop/files/Seal_of_the_United_States_Space_Force.png?v=1770667451");
}
.header__menu .menu-item > a[href="#"] {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
color: #777;
pointer-events: none;
margin-bottom: 8px;
display: block;
}
/* === FIXED: League Bar Centering (FINAL - NO GHOSTS) === */
@media (min-width: 669px) {
/* 1. Target the Container: Kill ID-based alignment & Scrolling */
body [id*="league-bar"] .league-bar,
body .league-bar-section .league-bar {
display: flex !important;
flex-direction: row !important; /* Side-by-Side */
justify-content: center !important; /* Center the group */
align-items: center !important;
text-align: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
/* Disable slider behavior */
overflow: visible !important;
scroll-snap-type: none !important;
}
/* 2. Target the List: Kill the 40px Ghost Spacers */
body [id*="league-bar"] .league-bar__list::before,
body [id*="league-bar"] .league-bar__list::after,
.league-bar__list::before,
.league-bar__list::after {
content: none !important; /* DELETE THE GHOSTS */
display: none !important;
flex: 0 0 0 !important;
width: 0 !important;
}
/* 3. Target the List: Force Centering & Tighten Gap */
body [id*="league-bar"] .league-bar__list,
.league-bar__list {
display: flex !important;
justify-content: center !important; /* Force items to middle */
align-items: center !important;
gap: 16px !important; /* Space between logos */
margin: 0 !important;
padding: 0 !important; /* Kill list padding */
width: auto !important; /* Shrink to fit items */
flex-wrap: nowrap !important; /* Keep on one line */
}
/* 4. Fix the Heading Text */
body [id*="league-bar"] .league-bar__heading,
body [id*="league-bar"] h2 {
width: auto !important;
margin: 0 24px 0 0 !important; /* Space between Title and Icons */
padding: 0 !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
}
}
/* ================================================== */
/* 3. HOMEPAGE LEAGUE BAR TWEAKS */
/* ================================================== */
/* A. Prevent Logos from Shrinking (Forces scroll sooner on small screens) */
.league-bar__list img,
.league-bar__item,
.league-bar__img {
flex-shrink: 0 !important;
max-width: none !important;
}
/* B. Reduce Padding on Mobile */
@media (max-width: 768px) {
/* Tighten up the section padding */
.league-bar-section,
[id*="league-bar"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Ensure the list has just enough bottom space for the bar */
.league-bar__list {
padding-bottom: 20px !important;
}
}
/* ================================================== */
/* MEGA MENU – STABLE CENTERED SYSTEM */
/* ================================================== */
/* -------------------------------------------------- */
/* 0. WIDTH FIX (Men/Women mega only) */
/* -------------------------------------------------- */
.navigation__dropdown:has(a[href*="hide.com"])
.navigation__tier-2-container{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* -------------------------------------------------- */
/* 1. Hide COL1 / COL2 / COL3 labels */
/* -------------------------------------------------- */
.navigation__tier-2 > .navigation__item > a[href*="hide.com"]{
display: none !important;
}
/* -------------------------------------------------- */
/* 2. CENTERED FLEX COLUMN SYSTEM */
/* -------------------------------------------------- */
/* Center entire dropdown */
@media (min-width: 1360px){
.navigation__dropdown:has(a[href*="hide.com"]) > .container{
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
}
}
/* Tier 2 layout */
.navigation__tier-2-container .navigation__tier-2{
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
gap: clamp(40px, 5vw, 40px) !important;
flex-wrap: wrap !important;
}
/* Desktop — keep tight columns */
@media (min-width: 1361px){
.navigation__tier-2-container
.navigation__tier-2 > .navigation__item{
width: max-content !important;
flex: 0 0 auto !important;
}
}
/* Below 1360px — allow shrink */
@media (max-width: 1360px){
.navigation__tier-2-container
.navigation__tier-2 > .navigation__item{
width: auto !important; /* key change */
flex: 0 1 auto !important;
min-width: 0 !important;
}
}
/* -------------------------------------------------- */
/* 3. REMOVE LEAGUE ICON INDENT (Men/Women only) */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* 4. SECTION HEADERS (# links) */
/* -------------------------------------------------- */
.navigation__tier-2-container
.navigation__tier-3 a[href="#"]{
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-top: 14px !important;
margin-bottom: 10px !important;
line-height: 1.1 !important;
pointer-events: none !important;
cursor: default !important;
}
.navigation__tier-3 .navigation__item:first-child > a[href="#"]{
margin-top: 0 !important;
}
/* -------------------------------------------------- */
/* 5. STANDARD LINKS */
/* -------------------------------------------------- */
.navigation__dropdown:has(a[href*="hide.com"])
.navigation__tier-3 .navigation__item > a:not([href="#"]){
font-size: 14px !important;
font-weight: 400 !important;
padding: 2px 0 !important;
line-height: 1.2 !important;
}
/* -------------------------------------------------- */
/* 6. "ALL MEN'S PRODUCTS" STYLE */
/* -------------------------------------------------- */
/* Desktop only */
@media (min-width: 991px){
.navigation__tier-3 a[href*="all-products" i]{
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
line-height: 1.1 !important;
}
}
.navigation__dropdown:has(a[href*="http://hide.com"])
.navigation__tier-3 {
margin-top: 10px !important;
}
/* Mobile: undo the desktop styling */
@media (max-width: 990px){
.drawer .navigation__tier-3 a[href*="all-products" i]{
font-size: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
line-height: inherit !important;
}
}
/* Desktop only */
@media (min-width: 991px){
.navigation__tier-3 a[href*="bottoms" i]{
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
line-height: 1.1 !important;
}
}
.navigation__dropdown:has(a[href*="http://hide.com"])
.navigation__tier-3 {
margin-top: 10px !important;
}
/* Mobile: undo the desktop styling */
@media (max-width: 990px){
.drawer .navigation__tier-3 a[href*="bottoms" i]{
font-size: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
line-height: inherit !important;
}
}
/* ------------------------------------------- */
/* PROMO COLUMN – responsive behavior */
/* ------------------------------------------- */
/* PROMO COLUMN – responsive scaled, smaller overall */
.navigation__column--promotion{
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
flex: 0 1 clamp(220px, 16vw, 260px) !important;
max-width: clamp(220px, 16vw, 260px) !important;
}
.navigation__column--promotion img{
width: 100% !important;
height: auto !important;
display: block;
}
/* Reduce spacing between the two promo images */
.navigation__column--promotion{
display: flex !important;
flex-direction: column !important;
gap: -10px !important;
}
/* Hide promo BEFORE layout collapse */
@media (max-width: 1350px){
.navigation__column--promotion{
display: none !important;
}
}
.navigation__tier-2{
justify-content: center !important;
}
/* ====================================== */
/* FAN GEAR – ROBUST 5-COLUMN GRID (V6 - TIGHT PACK) */
/* ====================================== */
/* 1. DESKTOP MODE (Image is Visible) */
#NavigationTier2-4 .navigation__tier-2 {
display: grid !important;
/* FIX 1: Use 'max-content' instead of 'minmax'.
This kills the "extra space" after short words like NFL. */
grid-template-columns: repeat(6, max-content) 340px !important;
padding-bottom: 30px !important;
/* FIX 2: Even spacing between all columns */
column-gap: 40px !important;
row-gap: 10px !important;
align-items: start !important;
justify-content: center !important;
/* FIX 3: Balance the 340px image.
Since the text block is tighter now, we need less padding to center it.
Try 100px. Adjust up/down if needed. */
padding-left: 100px !important;
width: 100% !important;
}
/* 2. RESPONSIVE "SHRINK" MODE (Screen < 1350px, Image is hidden) */
@media (max-width: 1350px) {
#NavigationTier2-4 .navigation__tier-2 {
/* Remove image column */
grid-template-columns: repeat(7, max-content) !important;
/* Remove balancing padding */
padding-left: 0 !important;
}
#NavigationTier2-4 .navigation__column--promotion {
display: none !important;
}
}
/* 2. RESPONSIVE "SHRINK" MODE (Screen < 1350px, Image is hidden) */
@media (max-width: 950px) {
#NavigationTier2-4 .navigation__tier-2 {
/* Remove image column */
grid-template-columns: repeat(6, max-content) !important;
/* Remove balancing padding */
padding-left: 0 !important;
}
#NavigationTier2-4 .navigation__column--promotion {
display: none !important;
}
}
/* Ensure links are compact */
#NavigationTier2-4 .navigation__tier-3 a.navigation__link {
padding: 3px 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
min-height: 0 !important;
white-space: nowrap !important;
}
/* Lock the promo image to the far right column */
#NavigationTier2-4 .navigation__column--promotion {
grid-column: 7 !important;
grid-row: 1 / span 10 !important;
/* FIX 4: Don't use negative margins. Let the grid gap handle spacing. */
margin-left: 0 !important;
align-self: start !important;
}
/* Flatten the lists */
#NavigationTier2-4 .navigation__tier-2 > .navigation__item,
#NavigationTier2-4 .navigation__tier-3 {
display: contents !important;
}
/* ====================================== */
/* FAN GEAR – FIX LINK GHOST HEIGHT ONLY */
/* ====================================== */
#NavigationTier2-4
.navigation__tier-3 a.navigation__link{
min-height: unset !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
line-height: 1.2 !important;
}
/* === FIX: Keep Icon Visible on Active Page (FINAL) === */
/* 1. Force the Container Layout */
#NavigationTier2-4 a[aria-current="page"],
#NavigationTier2-4 a.active,
.navigation__tier-2-container a[aria-current="page"] {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
padding-left: 0 !important;
text-indent: 0 !important;
opacity: 1 !important;
}
/* 2. Force the ICON (Pseudo-element) to stay visible */
#NavigationTier2-4 a[aria-current="page"]::before,
#NavigationTier2-4 a.active::before,
.navigation__tier-2-container a[aria-current="page"]::before {
content: "" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
/* Re-assert dimensions in case theme zeroes them out */
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
/* Ensure spacing exists */
margin-right: 10px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ====================================== */
/* MILITARY – SINGLE ROW, 5 BRANCHES (V2 - FLEX FIX) */
/* ====================================== */
#NavigationTier2-6 .navigation__tier-2 {
display: flex !important; /* Flex is better for centering a single row */
flex-wrap: nowrap !important;
justify-content: center !important; /* Perfect Center */
align-items: center !important;
gap: 60px !important; /* Space between branches */
/* Reset spacing/padding */
padding-top: 30px !important; /* Reduced from default */
padding-bottom: 30px !important;
padding-left: 25px !important; /* Kill inherited offsets */
padding-right: 0 !important;
margin-top: 0 !important;
width: 100% !important;
}
/* Ensure the links themselves don't add extra height */
#NavigationTier2-6 .navigation__tier-3 a.navigation__link {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 5px 0 !important; /* Minimal padding around text */
}
/* HIDE the promo image column for Military */
#NavigationTier2-6 .navigation__column--promotion {
display: none !important;
}
/* Flatten lists so flex works directly on items */
#NavigationTier2-6 .navigation__tier-2 > .navigation__item,
#NavigationTier2-6 .navigation__tier-3 {
display: contents !important;
}
/* ================================================== */
/* LEAGUE BAR MOBILE SWIPE INDICATOR */
/* ================================================== */
@media (max-width: 768px) {
/* 1. Ensure the list scrolls properly */
.league-bar__list,
[id*="league-bar"] .league-bar__list {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
padding-bottom: 20px !important; /* Make room for the bar */
/* Attach the scroll timeline */
scroll-timeline-name: --leagueMobileScroll;
scroll-timeline-axis: inline;
}
/* 2. Create the Gray Track */
.league-bar__list::before {
content: "" !important;
position: absolute;
left: 20px; right: 20px; bottom: 5px; /* Adjust vertical pos */
height: 3px;
background: rgba(0,0,0,0.1);
border-radius: 2px;
z-index: 2;
pointer-events: none;
/* Override any previous "Ghost Spacer" styles */
flex: none !important;
width: auto !important;
display: block !important;
}
/* 3. Create the Black Active Thumb */
.league-bar__list::after {
content: "" !important;
position: absolute;
left: 20px; bottom: 5px;
height: 3px;
width: 0%; /* Will grow via animation */
background: #000;
border-radius: 2px;
z-index: 3;
pointer-events: none;
/* Override any previous "Ghost Spacer" styles */
flex: none !important;
display: block !important;
/* Animate width based on scroll */
animation: league-swipe-grow 1s linear both;
animation-timeline: --leagueMobileScroll;
}
/* 4. Define the Animation */
@keyframes league-swipe-grow {
from { width: 0%; }
to { width: calc(100% - 40px); } /* 100% minus the L/R margins */
}
/* 5. Ensure the Container is Relative so bars position correctly */
[id*="league-bar"] .league-bar,
.league-bar-section {
position: relative !important;
}
}
/* === HIDE LEAGUE BAR TITLE AT SPECIFIC SIZE === */
@media (max-width: 880px) { /* <-- Change this number to your desired "spot" */
[id*="league-bar"] h2,
[id*="league-bar"] h3,
[id*="league-bar"] .league-bar__heading,
[id*="league-bar"] .section-header,
.league-bar-section h2,
.league-bar-section .section-header {
display: none !important;
}
}
/* ================================================== */
/* LEAGUE BAR MOBILE SWIPE INDICATOR */
/* ================================================== */
@media (max-width: 768px) {
/* 1. Ensure the list scrolls properly */
.league-logo-bar-group__list,
[id*="league-logo-bar-group"] .league-logo-bar-group__list {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
padding-bottom: 40px !important; /* Make room for the bar */
/* Attach the scroll timeline */
scroll-timeline-name: --leagueMobileScroll;
scroll-timeline-axis: inline;
}
/* 2. Create the Gray Track */
.league-logo-bar-group__list::before {
content: "" !important;
position: absolute;
left: 20px; right: 20px; bottom: 5px; /* Adjust vertical pos */
height: 3px;
background: rgba(0,0,0,0.1);
border-radius: 2px;
z-index: 2;
pointer-events: none;
/* Override any previous "Ghost Spacer" styles */
flex: none !important;
width: auto !important;
display: block !important;
}
/* 3. Create the Black Active Thumb */
.league-logo-bar-group__list::after {
content: "" !important;
position: absolute;
left: 20px; bottom: 5px;
height: 3px;
width: 0%; /* Will grow via animation */
background: #000;
border-radius: 2px;
z-index: 3;
pointer-events: none;
/* Override any previous "Ghost Spacer" styles */
flex: none !important;
display: block !important;
/* Animate width based on scroll */
animation: league-swipe-grow 1s linear both;
animation-timeline: --leagueMobileScroll;
}
/* 4. Define the Animation */
@keyframes league-swipe-grow {
from { width: 0%; }
to { width: calc(100% - 40px); } /* 100% minus the L/R margins */
}
/* 5. Ensure the Container is Relative so bars position correctly */
[id*="league-logo-bar-group"] .league-logo-bar-group,
.league-logo-bar-group-section {
position: relative !important;
}
}
/* Default = off-white nav strip (site-wide) */
main-navigation#main-nav,
main-navigation#main-nav .navigation,
main-navigation#main-nav .navigation.navigation--main,
main-navigation#main-nav .navigation__tier-1,
main-navigation#main-nav .navigation__tier-1 > ul{
background:#fbfbfb !important;
}
/* Keep dropdowns WHITE */
.navigation__dropdown,
.navigation__tier-2-container,
.navigation__tier-2,
.navigation__item--with-mega-menu .mega-menu{
background: #fff !important;
}
/* ===================================== */
/* MOBILE NAV – DISABLE ICON PSEUDOS */
/* ===================================== */
@media (max-width: 990px){
/* kill the ::before icons inside mobile nav */
[id$="mobMobileNav"] a.navigation__link::before{
content: none !important;
display: none !important;
background-image: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
/* reset link layout so it doesn't reserve icon space */
[id$="mobMobileNav"] a.navigation__link{
display: block !important;
gap: 0 !important;
padding-left: 0 !important;
}
}
/* ===================================== */
/* MOBILE NAV – FORCE SINGLE COLUMN LIST */
/* (Fixes the "gap after every 3 items") */
/* ===================================== */
@media (max-width: 990px){
/* Target your mobile submenu containers (your IDs end with mobMobileNav) */
[id$="mobMobileNav"] .navigation__tier-2.navigation__columns{
display: block !important;
/* in case the theme uses CSS columns */
column-count: 1 !important;
-webkit-column-count: 1 !important;
column-gap: 0 !important;
-webkit-column-gap: 0 !important;
columns: auto !important;
}
/* Force each "column" wrapper to behave like a normal full-width row */
[id$="mobMobileNav"] .navigation__tier-2.navigation__columns > li,
[id$="mobMobileNav"] .navigation__tier-2.navigation__columns > .navigation__item,
[id$="mobMobileNav"] .navigation__tier-2.navigation__columns > .navigation__column{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
/* remove “column block” spacing */
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* Make sure the link list itself isn't inheriting weird spacing */
[id$="mobMobileNav"] .navigation__tier-3{
margin: 0 !important;
padding: 0 !important;
}
}
/* TOP NAV (tier-1) — force weight */
@media (min-width: 990px){
main-navigation#main-nav .navigation__tier-1 > .navigation__item > a.navigation__link,
main-navigation#main-nav .navigation__tier-1 > .navigation__item > a.navigation__link *{
font-weight: 700 !important;
}
}
@media (min-width: 990px){
main-navigation#main-nav .navigation__tier-1 > .navigation__item > a.navigation__link{
letter-spacing: 0.02em; /* try 0, 0.01em, 0.03em */
padding-left: 20px;
padding-right: 20px;
}
}
/* Remove active underline/indicator under thumbnails */
.slider__item.is-active::after,
.thumbnails a.thumbnail::after{
display: none !important;
}
/* ================================================================= */
/* 🏁 FINAL FIX: GALLERY LAYOUT, SIZE & SPACING */
/* ================================================================= */
/* 1. LAYOUT: Horizontal Slider for the Container */
html body carousel-slider.thumbnails .slider__grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
/* Kill Scrollbars */
scrollbar-width: none !important;
-ms-overflow-style: none !important;
border: none !important;
}
/* Hide Webkit Scrollbars */
html body carousel-slider.thumbnails .slider__grid::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* 2. ITEM SIZING: Bigger Thumbs (85px) */
/* We do NOT force 'display: block' here to allow filtering to work. */
html body carousel-slider.thumbnails .slider__item {
width: 120px !important; /* Increased from 65px */
flex: 0 0 120px !important;
max-width: 120px !important;
}
/* 3. SPACING: Tighten gap between Main Image and Thumbnails */
/* Remove bottom margin from the main image slider */
.main-image carousel-slider:not(.thumbnails) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Reduce top margin of the thumbnail slider */
carousel-slider.thumbnails {
margin-top: 10px !important; /* Adjust this to 5px or 15px if needed */
padding-top: 0 !important;
}
/* 4. SAFETY NET: Enforce Hiding */
html body carousel-slider.thumbnails .slider__item[style*="display: none"],
html body carousel-slider.thumbnails .slider__item.hidden,
html body carousel-slider.thumbnails .slider__item.is-hidden,
html body carousel-slider.thumbnails .slider__item[hidden] {
display: none !important;
}
/* 5. POLISH: Remove active underline & leftover borders */
html body carousel-slider.thumbnails .slider__item.is-active::after {
content: none !important;
display: none !important;
}
.product-breadcrumbs { margin: 0 0 20px; }
.product-breadcrumbs .breadcrumbs { padding: 0; }
@media (min-width: 768px){
/* Tighten the gutter between thumbs and main image */
.media-gallery--layout-carousel-beside .thumbnails{
padding-inline-end: 14px !important; /* was effectively ~40px */
width: 160px !important; /* give room for bigger thumbs */
}
.media-gallery--layout-carousel-beside .main-image{
width: calc(100% - 160px) !important;
}
/* Bigger thumbnails */
.media-gallery--layout-carousel-beside .thumbnails .slider__item{
width: 160px !important;
}
}
@media (max-width: 749px) {
.breadcrumbs,
nav.breadcrumbs,
nav[aria-label="breadcrumbs"] {
margin-top: 14px !important;
}
}
@media (max-width: 749px) {
/* Kill the theme’s left-column top offset now that title/price live above the gallery */
.section-main-product .product-column-left,
.section-main-product media-gallery,
.section-main-product .media-gallery__inner,
.section-main-product .main-image {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Tight, controlled spacing for your inserted mobile header bits */
.section-main-product .title-row--mobile {
margin: 8px 0 0 !important;
}
.section-main-product .price-container--mobile {
margin: 6px 0 10px !important;
}
/* Optional: if the carousel itself has a top margin */
.section-main-product .main-image carousel-slider {
margin-top: 0 !important;
}
}
/* ================================
PDP MOBILE — Reviews: force size + fix alignment
(Judge.me + theme wrapper safe overrides)
================================ */
@media (max-width: 749px){
/* 1) Add breathing room ABOVE breadcrumbs (top of PDP content) */
.section-main-product .product-column-right{
padding-top: 10px !important; /* tweak 6–16px */
}
/* If your breadcrumbs are inside a wrapper, this is the cleanest place to tune */
.section-main-product .product-breadcrumbs,
.section-main-product nav.breadcrumbs,
.section-main-product nav[aria-label="breadcrumbs"]{
margin-top: 2px !important; /* tweak */
}
/* 2) Force the reviews block to actually inherit the small font size */
.price-container--mobile .theme-product-reviews{
display: inline-flex !important;
align-items: center !important; /* centers stars + text */
gap: 6px !important;
margin-left: auto !important;
white-space: nowrap !important;
font-size: 3px !important; /* your target size */
line-height: 1.1 !important;
}
/* Kill any “font-size:0” tricks higher up + override Judge.me hard-coded sizes */
.price-container--mobile .theme-product-reviews *{
font-size: inherit !important;
line-height: inherit !important;
}
/* 3) Judge.me specific: make the badge a single aligned row */
.price-container--mobile .jdgm-prev-badge,
.price-container--mobile .jdgm-preview-badge{
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.price-container--mobile .jdgm-prev-badge__stars,
.price-container--mobile .jdgm-prev-badge__stars *{
display: inline-flex !important;
align-items: center !important;
}
/* Review text (“13 reviews”) baseline fix */
.price-container--mobile .jdgm-prev-badge__text,
.price-container--mobile .cc-rating-custom-caption{
display: inline-block !important;
vertical-align: middle !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4) Star sizing + vertical alignment */
.price-container--mobile .theme-product-reviews svg,
.price-container--mobile .jdgm-prev-badge__stars svg{
width: 10px !important;
height: 10px !important;
vertical-align: middle !important;
position: relative !important;
top: 0 !important; /* cancels earlier top:-3px rules */
}
}
@media (max-width: 749px){
/* Breadcrumb -> Title gap (make smaller/larger by changing 6px) */
html body.template-product .breadcrumbs,
html body.template-product nav[aria-label="breadcrumbs"],
html body.template-product .product-breadcrumbs {
margin: 0 0 6px 0 !important;
}
/* Title -> Price gap */
html body.template-product h1,
html body.template-product .product-title,
html body.template-product .product__title {
margin: 0 0 -10px 0 !important;
}
}
@media (max-width: 749px){
/* Force the whole badge to behave like one line */
.price-container--mobile .theme-product-reviews,
.price-container--mobile .jdgm-prev-badge{
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
line-height: 1 !important;
}
/* ================================================================= */
/* ↔️ STOP MENU WRAPPING: "MAKE IT FIT" PATCH */
/* ================================================================= */
/* Apply this fix to laptops/tablets (between 990px and 1450px) */
@media (min-width: 900px) and (max-width: 1650px) {
/* 1. Aggressively reduce the gap between links */
/* Currently it is 30px + 30px = 60px. We are cutting it to 16px total. */
main-navigation#main-nav .navigation__tier-1 > .navigation__item > a.navigation__link {
padding-left: 8px !important;
padding-right: 8px !important;
/* 2. Slightly reduce font size to buy more space */
font-size: 13px !important;
letter-spacing: 0 !important;
}
/* 3. Force the menu to stay on one line (prevent wrapping) */
main-navigation#main-nav .navigation__tier-1 {
display: flex !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
justify-content: center !important; /* Keep it centered */
}
/* 4. Ensure the container allows the squeeze */
main-navigation#main-nav .navigation__tier-1 > .navigation__item {
flex-shrink: 1 !important; /* Allow items to shrink if needed */
}
}
/* =========================================
League Logo Bar — center when short,
but NEVER start mid-scroll when long
========================================= */
/* Desktop: do NOT use scroll snapping (prevents center-start bug) */
@media (min-width: 769px){
.league-logo-bar__list{
justify-content: center; /* keeps short rows centered */
scroll-snap-type: none !important;
}
.league-logo-bar__item{
scroll-snap-align: unset !important;
}
}
/* Mobile: snapping is fine, but align START (not center) */
@media (max-width: 768px){
.league-logo-bar__list{
justify-content: flex-start; /* standard mobile swipe behavior */
scroll-snap-type: x mandatory;
scroll-padding-left: 14px; /* optional: keeps first logo from kissing edge */
}
.league-logo-bar__item{
scroll-snap-align: start; /* critical: prevents “first logo half offscreen” */
}
}
/* Filters: make ACTIVE color swatches pop */
.filter-group--swatch .filter-group__item{
position: relative;
}
/* selected ring */
.filter-group--swatch .filter-group__item--active{
box-shadow: 0 0 0 3px #111 inset !important;
border-radius: 999px !important;
}
/* optional: tiny check indicator */
.filter-group--swatch .filter-group__item--active::after{
content: "";
position: absolute;
right: -2px;
top: -2px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #111;
box-shadow: 0 0 0 2px #fff;
}