/* ========= HERO (1 big + 2 small) ========= */
#bx-hero2{
  display: flow-root !important; isolation: isolate !important;
  position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  clear: both !important; z-index: 0 !important;
}
/* hard reset any rogue theme rules inside */
#bx-hero2, #bx-hero2 *{
  box-sizing: border-box;
}
#bx-hero2, #bx-hero2 .bxh-grid, #bx-hero2 .bxh-main, #bx-hero2 .bxh-side,
#bx-hero2 .bxh-card, #bx-hero2 a.bxh-card{
  position: static !important; float: none !important; z-index: auto !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
  visibility: visible !important; opacity: 1 !important; height: auto !important;
  max-height: none !important; transform: none !important; min-width: 0 !important;
}

/* 2 columns: main (2fr) + side (1fr). Zero gap. */
#bx-hero2 .bxh-grid{
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

/* side column stacks two cards */
#bx-hero2 .bxh-side{
  display: grid !important;
  grid-auto-rows: 1fr !important;
  gap: 0 !important;
}

#bx-hero2 .bxh-card{
  display: block !important; width: 100% !important;
  text-decoration: none; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* unbreakable 4:3 height */
#bx-hero2 .bxh-card > .bxh-spacer{ display:block !important; padding-top:75% !important; }
@supports (aspect-ratio:1){
  #bx-hero2 .bxh-card{ aspect-ratio:4/3 !important; }
}

/* Mobile: make hero a single column so it never collapses */
@media (max-width: 768px){
  #bx-hero2 .bxh-grid{ grid-template-columns: 1fr !important; }
  #bx-hero2 .bxh-side{ grid-auto-rows: 1fr !important; }
}

/* ========= MATRIX (six tiles) ========= */
#bx-matrix2{
  display: flow-root !important; isolation: isolate !important;
  position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  clear: both !important; z-index: 0 !important;
}
#bx-matrix2, #bx-matrix2 *{
  box-sizing: border-box;
}
#bx-matrix2, #bx-matrix2 .bxm-grid, #bx-matrix2 .bxm-card, #bx-matrix2 a.bxm-card{
  position: static !important; float: none !important; z-index: auto !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
  visibility: visible !important; opacity: 1 !important; height: auto !important;
  max-height: none !important; transform: none !important; min-width: 0 !important;
}

/* 3-up desktop, zero gap */
#bx-matrix2 .bxm-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
}

#bx-matrix2 .bxm-card{
  display: block !important; width: 100% !important;
  text-decoration: none; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* unbreakable 4:3 height */
#bx-matrix2 .bxm-card > .bxm-spacer{ display:block !important; padding-top:75% !important; }
@supports (aspect-ratio:1){
  #bx-matrix2 .bxm-card{ aspect-ratio:4/3 !important; }
}

/* 2-up on mobile, still zero gap */
@media (max-width: 768px){
  #bx-matrix2 .bxm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ===== 8LogoGrid — zero gutters, collision-proof (final) ===== */
#LogoGrid8{
  display: flow-root !important; isolation: isolate !important;
  position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  clear: both !important; z-index: 0 !important;
}
#LogoGrid8, #LogoGrid8 *{ box-sizing: border-box; }

/* Neutralize rogue theme rules (DON'T include a.lg8-tile here) */
#LogoGrid8, #LogoGrid8 .lg8-grid{
  position: static !important; float: none !important; z-index: auto !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
  visibility: visible !important; opacity: 1 !important; height: auto !important;
  max-height: none !important; transform: none !important; min-width: 0 !important;
}

/* Grid: 8 across desktop, zero gap */
#LogoGrid8 .lg8-grid{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 0 !important; width: 100% !important; margin: 0 !important;
  min-width: 0 !important; min-height: 0 !important;
}

/* Tile: square, zero gutters, clickable */
#LogoGrid8 a.lg8-tile{
  position: relative !important;  /* <-- key fix */
  display: block !important; width: 100% !important; text-decoration: none;
  overflow: hidden; background: transparent;
}

/* Square height reservation (fallback) */
#LogoGrid8 .lg8-spacer{ display:block !important; padding-top:100% !important; }

@supports (aspect-ratio:1){
  #LogoGrid8 a.lg8-tile{ aspect-ratio: 1 / 1 !important; }
}

/* Logo image: no crop, centered inside the square */
#LogoGrid8 a.lg8-tile > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center; display: block;
}

/* Mobile: 4 across (two rows), zero gap */
@media (max-width: 768px){
  #LogoGrid8 .lg8-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ===== Top Picks (bxtp) — zero gutters, clash-proof ===== */
#TopPicks{
  display: flow-root !important; isolation: isolate !important;
  position: relative !important; width:100% !important; margin:0 !important; padding:0 !important;
  clear: both !important; z-index:0 !important;
}
#TopPicks, #TopPicks *{ box-sizing: border-box; }

/* Neutralize rogue theme rules */
#TopPicks, #TopPicks .bxtp-tabs, #TopPicks .bxtp-tab, #TopPicks .bxtp-panel, #TopPicks .bxtp-grid{
  position: static !important; float:none !important; z-index:auto !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
  visibility: visible !important; opacity: 1 !important; height:auto !important; max-height:none !important;
  transform:none !important; min-width:0 !important; min-height:0 !important;
}

/* Tabs row (3 images, zero gap) */
#TopPicks .bxtp-tabs{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:0 !important; width:100% !important; margin:0 !important; padding:0 !important;
}
#TopPicks .bxtp-tab{
  display:block !important; margin:0 !important; padding:0 !important; border:0 !important;
  background:transparent !important; cursor:pointer; width:100% !important; outline-offset:2px;
}
#TopPicks .bxtp-tab img{ display:block; width:100%; height:auto; }

/* Active/focus (simple, non-intrusive) */
#TopPicks .bxtp-tab[aria-selected="true"]{ outline:2px solid rgba(0,0,0,.15); }
#TopPicks .bxtp-tab:focus-visible{ outline:3px solid #007aff; }

/* Panels */
#TopPicks .bxtp-panel{ margin:0 !important; padding:0 !important; }

/* Grid: 3-across desktop, 2-across mobile — zero gap */
#TopPicks .bxtp-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:0 !important; width:100% !important; margin:0 !important;
}

/* Cards are 4:3 with cover images */
#TopPicks .bxtp-card{
  position:relative !important; display:block !important; width:100% !important; text-decoration:none;
  overflow:hidden; background:transparent;
}
#TopPicks .bxtp-spacer{ display:block !important; padding-top:75% !important; } /* 4:3 */
#TopPicks .bxtp-card > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* Mobile: 2-up grid */
@media (max-width:768px){
  #TopPicks .bxtp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Top Picks — tabs at 60% on desktop, 100% on mobile */
@media (min-width: 769px){
  #TopPicks .bxtp-tabs{
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important; /* center the 3 tabs row */
  }
}
@media (max-width: 768px){
  #TopPicks .bxtp-tabs{
    width: 100% !important; /* full width on mobile */
  }
}

/* Remove the “selected” border highlight */
#TopPicks .bxtp-tab[aria-selected="true"]{
  outline: none !important;
  box-shadow: none !important; /* just in case any theme adds one */
  border: 0 !important;
}

/* ===== Standalone responsive image ===== */
#RespImage{
  display:block;
  width:100%;           /* mobile/default */
  margin:0; 
  padding:0;
}
#RespImage img{
  display:block;
  width:100%;           /* fill the wrapper */
  height:auto;
}

/* Desktop: shrink wrapper to 60% and center it */
@media (min-width:769px){
  #RespImage{
    width:60%;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== Shared: ensure any Top Picks module hides inactive panels ===== */
.bxtp-module .bxtp-panel[hidden] { display: none !important; }

/* ===== Mirror styles for the Footwear Top Picks block (match jackets) ===== */
#TopPicks-footwear{
  display: flow-root !important; isolation: isolate !important;
  position: relative !important; width:100% !important; margin:0 !important; padding:0 !important;
  clear: both !important; z-index:0 !important;
}
#TopPicks-footwear, #TopPicks-footwear *{ box-sizing: border-box; }

/* Neutralize rogue theme rules inside footwear module */
#TopPicks-footwear, 
#TopPicks-footwear .bxtp-tabs, 
#TopPicks-footwear .bxtp-tab, 
#TopPicks-footwear .bxtp-panel, 
#TopPicks-footwear .bxtp-grid{
  position: static !important; float:none !important; z-index:auto !important;
  top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
  visibility: visible !important; opacity: 1 !important; 
  height:auto !important; max-height:none !important;
  transform:none !important; min-width:0 !important; min-height:0 !important;
}

/* Tabs row (3 images, zero gap) */
#TopPicks-footwear .bxtp-tabs{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:0 !important; width:100% !important; margin:0 !important; padding:0 !important;
}
#TopPicks-footwear .bxtp-tab{
  display:block !important; margin:0 !important; padding:0 !important; border:0 !important;
  background:transparent !important; cursor:pointer; width:100% !important; outline-offset:2px;
}
#TopPicks-footwear .bxtp-tab img{ display:block; width:100%; height:auto; }

/* Active/focus */
#TopPicks-footwear .bxtp-tab[aria-selected="true"]{ outline:2px solid rgba(0,0,0,.15); }
#TopPicks-footwear .bxtp-tab:focus-visible{ outline:3px solid #007aff; }

/* Panels */
#TopPicks-footwear .bxtp-panel{ margin:0 !important; padding:0 !important; }

/* Grid: 3-across desktop, 2-across mobile — zero gap */
#TopPicks-footwear .bxtp-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:0 !important; width:100% !important; margin:0 !important;
}

/* Cards: 4:3 with cover images (match jackets) */
#TopPicks-footwear .bxtp-card{
  position:relative !important; display:block !important; width:100% !important; text-decoration:none;
  overflow:hidden; background:transparent;
}
#TopPicks-footwear .bxtp-spacer{ display:block !important; padding-top:75% !important; } /* 4:3 */
#TopPicks-footwear .bxtp-card > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* Mobile: 2-up grid */
@media (max-width:768px){
  #TopPicks-footwear .bxtp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Tabs at 60% on desktop, 100% on mobile (mirror jackets) */
@media (min-width: 769px){
  #TopPicks-footwear .bxtp-tabs{
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 768px){
  #TopPicks-footwear .bxtp-tabs{ width: 100% !important; }
}

/* Remove the “selected” border highlight (mirror jackets override) */
#TopPicks-footwear .bxtp-tab[aria-selected="true"]{
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
