/* ---- Tiles and Featured slider (lifted from bowlersmart-ball-collections v3.8.3) ---- */
.bm-module { margin: 0; }
.bm-row-label {
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: #8a93a0; margin: 0 2px 10px;
}

.bm-tiles { display: grid; gap: 10px; margin: 0 0 20px; }
.bm-tiles--collection { grid-template-columns: repeat(2, 1fr); }
.bm-tiles--balltype, .bm-tiles--chips { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 550px) {
  .bm-tiles--collection { grid-template-columns: repeat(4, 1fr); }
  .bm-tiles--balltype, .bm-tiles--chips { grid-template-columns: repeat(3, 1fr); }
  .bm-tiles.bm-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .bm-tiles.bm-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .bm-tiles.bm-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .bm-tiles.bm-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

.bm-tile {
  display: flex; align-items: center; gap: 10px; background: #f4f6f9; border: 1px solid #e6e9ee;
  border-radius: 12px; padding: 10px 12px; text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.bm-tile-img { flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.bm-tile-img img { width: 46px; height: 46px; object-fit: contain; }
.bm-tile-name { font: 800 13px/1.15 system-ui, sans-serif; color: #102338; text-transform: uppercase; letter-spacing: .02em; }
.bm-tile-name .bm-short { display: none; }
.bm-tile::after { content: "\203A"; margin-left: auto; padding-left: 10px; font: 400 20px/1 system-ui, sans-serif; color: #b0b8c1; }

@media (max-width: 549px) {
  .bm-tiles--balltype, .bm-tiles--chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 9px; margin: 0 0 20px; padding-bottom: 4px; scrollbar-width: none;
  }
  .bm-tiles--balltype::-webkit-scrollbar, .bm-tiles--chips::-webkit-scrollbar { display: none; }
  .bm-tiles--balltype .bm-tile, .bm-tiles--chips .bm-tile { flex: 0 0 auto; border-radius: 999px; padding: 5px 14px 5px 5px; gap: 7px; }
  .bm-tiles--balltype .bm-tile-img, .bm-tiles--chips .bm-tile-img { flex: 0 0 30px; width: 30px; height: 30px; }
  .bm-tiles--balltype .bm-tile-img img, .bm-tiles--chips .bm-tile-img img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }
  .bm-tiles--balltype .bm-tile-name, .bm-tiles--chips .bm-tile-name { font-size: 12px; }
  .bm-tiles--balltype .bm-tile-name .bm-full, .bm-tiles--chips .bm-tile-name .bm-full { display: none; }
  .bm-tiles--balltype .bm-tile-name .bm-short, .bm-tiles--chips .bm-tile-name .bm-short { display: inline; }
  .bm-tiles--balltype .bm-tile::after, .bm-tiles--chips .bm-tile::after { display: none; }
}

.bm-featured-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 12px; }
.bm-featured-head h3 { margin: 0; font: 800 18px/1 system-ui, sans-serif; color: #102338; }

.bm-featured-wrap { position: relative; }
.bm-featured {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; margin: 0 0 8px;
  padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bm-featured::-webkit-scrollbar { display: none; }
.bm-fnav {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e6e9ee; background: #fff;
  color: #102338; font: 400 24px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16,35,56,.18); display: none; align-items: center; justify-content: center;
}
.bm-fprev { left: -6px; }
.bm-fnext { right: -6px; }
@media (min-width: 850px) { .bm-fnav { display: flex; } }
.bm-fcard {
  flex: 0 0 46%; scroll-snap-align: start; text-decoration: none; background: #fff;
  border: 1px solid #e6e9ee; border-radius: 12px; padding: 14px;
  transition: box-shadow .15s, transform .15s;
}
@media (min-width: 550px) { .bm-fcard { flex-basis: 22%; } }

/* ---- Tokens ---- */
/* Also declared on :root so tile and card pieces rendered off-archive (e.g. a Featured slider embedded outside the catalog archive) still resolve colours. */
:root{--bmc-ink:#0F1B2E;--bmc-ink2:#555;--bmc-ink3:#7C8798;--bmc-navy:#0F1B2E;--bmc-red:#C8102E;--bmc-gold:#D4A93C;--bmc-steel:#2E6DB4;--bmc-line:#E5E5E5;--bmc-wash:#F5F7FA;--bmc-rs:10px;--bmc-szw:56.5px;--bmc-sh:0 1px 2px rgba(15,27,46,.06),0 8px 24px -12px rgba(15,27,46,.18)}
.woocommerce.archive{--bmc-ink:#0F1B2E;--bmc-ink2:#555;--bmc-ink3:#7C8798;--bmc-navy:#0F1B2E;--bmc-red:#C8102E;--bmc-gold:#D4A93C;--bmc-steel:#2E6DB4;--bmc-line:#E5E5E5;--bmc-wash:#F5F7FA;--bmc-rs:10px;--bmc-szw:56.5px;--bmc-sh:0 1px 2px rgba(15,27,46,.06),0 8px 24px -12px rgba(15,27,46,.18)}

/* ---- Sidebar ---- */
.bmc-side{font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--bmc-ink)}
.bmc-nav{padding-bottom:12px}
.bmc-nav h3,.bmc-grp summary{font-size:13px;font-weight:800;margin:0;color:var(--bmc-ink);text-transform:none;letter-spacing:0}
.bmc-nav ul,.bmc-terms{list-style:none;margin:6px 0 0;padding:0}
.bmc-nav li a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:13.5px;color:var(--bmc-steel);font-weight:700}
.bmc-nav li a .bmc-cnt{color:var(--bmc-ink3);font-weight:400;font-size:12px}
.bmc-grp{border-top:1px solid var(--bmc-line);padding:10px 0 12px}
.bmc-grp summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.bmc-grp summary::-webkit-details-marker{display:none}
.bmc-grp summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--bmc-ink3);border-bottom:2px solid var(--bmc-ink3);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.bmc-grp[open] summary::after{transform:rotate(-135deg)}
.bmc-terms{display:flex;flex-direction:column;gap:2px}
.bmc-term{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13.5px;color:var(--bmc-ink)}
.bmc-box{width:16px;height:16px;border:1.5px solid #b9c2cf;border-radius:4px;flex:none;display:grid;place-items:center;background:#fff}
.bmc-term.is-on .bmc-box{background:var(--bmc-navy);border-color:var(--bmc-navy)}
.bmc-term.is-on .bmc-box::after{content:"";width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-2px}
.bmc-term:focus-visible{outline:2px solid var(--bmc-steel);outline-offset:2px}
.bmc-lab{flex:1}
.bmc-cnt{font-size:12px;color:var(--bmc-ink3);font-variant-numeric:tabular-nums}
.bmc-hidden{display:none}
.bmc-grp.is-expanded .bmc-hidden{display:list-item}
/* In stock toggle, above every group. Reads as a switch, behaves as a link. */
.bmc-stock{display:flex;align-items:center;gap:9px;padding:9px 0 12px;margin:0 0 4px;border-bottom:1px solid var(--bmc-line);font-size:13.5px;font-weight:700;color:var(--bmc-ink)}
/* On an archive with no child categories the first group sits directly under the
   toggle, and its border-top doubled the toggle's border-bottom into two lines. */
.bmc-stock + .bmc-grp{border-top:0}
.bmc-sw{position:relative;flex:none;width:32px;height:18px;border-radius:999px;background:#CBD2DC;transition:background .15s}
.bmc-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(15,27,46,.3)}
.bmc-stock.is-on .bmc-sw{background:var(--bmc-navy)}
.bmc-stock.is-on .bmc-sw::after{transform:translateX(14px)}
.bmc-stock:focus-visible{outline:2px solid var(--bmc-steel);outline-offset:2px}
/* Size chips. A grid, not a column: 20+ sizes are unreadable as a list, and this
   is the shape the PDP size picker already uses. */
.bmc-sizes{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,var(--bmc-szw));justify-content:start;gap:6px}
/* Flatsome sets margin-left:1.3em on list items. On a checkbox row that indent is
   the design; on the chip grid it squeezed each li to 35.7px inside a 56.5px track
   while the anchor kept its width, so every row overflowed the sidebar edge by 15px.
   The selector has to out-specify the theme's own, hence .bmc-side ul.bmc-sizes. */
.bmc-side ul.bmc-sizes li,.off-canvas ul.bmc-sizes li{margin:0;padding:0;list-style:none;width:auto}
.bmc-sz{display:flex;align-items:center;justify-content:center;width:var(--bmc-szw);min-height:40px;padding:6px 4px;border:1px solid var(--bmc-line);border-radius:8px;background:#fff;font:700 12.5px/14px Lato,sans-serif;color:var(--bmc-ink);font-variant-numeric:tabular-nums;text-align:center}
.bmc-sz.is-on{border-color:var(--bmc-navy);background:var(--bmc-navy);color:#fff}
.bmc-sz:focus-visible{outline:2px solid var(--bmc-steel);outline-offset:2px}
.bmc-note{font-size:11.5px;color:var(--bmc-ink3);margin:4px 0 0;font-weight:400}
/* Drawer: same fixed cell, taller for thumbs; auto-fill takes the extra width. */
.off-canvas .bmc-sz{min-height:44px;font-size:14px}
.bmc-more{background:none;border:0;padding:6px 0 0 25px;margin:0;color:var(--bmc-steel);font:700 12.5px Lato,sans-serif;cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:none}

/* ---- Results bar ---- */
.bmc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 14px;border-bottom:1px solid var(--bmc-line);margin-bottom:16px;font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.bmc-count{font-size:14px;font-weight:800;margin-right:6px;font-variant-numeric:tabular-nums;color:var(--bmc-ink)}
.bmc-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.bmc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bmc-line);background:var(--bmc-wash);border-radius:999px;padding:5px 9px 5px 11px;font-size:12.5px;font-weight:700;color:var(--bmc-ink)}
.bmc-chip b{font-weight:400;color:var(--bmc-ink3);font-size:14px;line-height:1}
.bmc-clear{font-size:12.5px;color:var(--bmc-steel);font-weight:700}
.bmc-sort{margin-left:auto}
.bmc-sort .woocommerce-ordering{margin:0}
.bmc-sort select.orderby{font:700 13px Lato,sans-serif;color:var(--bmc-ink);border:1px solid var(--bmc-line);border-radius:8px;padding:7px 30px 7px 10px;background:#fff;height:auto;margin:0}
@media (max-width:849px){.bmc-sort{display:none}}
/* Banner count + sort stay for mobile; hidden on desktop where the results bar owns them. */
@media (min-width:850px){.category-page-title .woocommerce-result-count,.category-page-title .woocommerce-ordering{display:none}}
/* The snippet-era "ALL <CATEGORY>" divider inside the UX blocks. */
.bm-catalog-divider{display:none}

/* Flatsome paints the off-canvas panel rgba(255,255,255,.95), so the page reads
   through it behind the filter list. Solid white, scoped to the panel that holds
   our sidebar so the mobile menu keeps the theme's own treatment. The selector
   mirrors Flatsome's own .off-canvas-left .mfp-content so it wins on specificity
   rather than source order, with no !important. */
.off-canvas-left .mfp-content:has(.bmc-side),.off-canvas-right .mfp-content:has(.bmc-side){background:#fff}

/* ---- Cards (Flatsome loop) ---- */
.woocommerce.archive .products .product-small > .col-inner{box-shadow:none;border-radius:var(--bmc-rs);background:transparent}
.woocommerce.archive .products .product-small .box{border:1px solid var(--bmc-line);border-radius:var(--bmc-rs);overflow:hidden;box-shadow:var(--bmc-sh);background:#fff}
.woocommerce.archive .products .product-small .box-image{background:radial-gradient(circle at 50% 42%,#fff 0,#fff 46%,#F5F7FA 74%,#EDF0F5 100%)}
.woocommerce.archive .products .product-small .box-image img{mix-blend-mode:multiply}
/* Flatsome's hover swap fades the second gallery image (.back-image) in OVER the
   first. With multiply on both, the cutaway's white areas go transparent and the
   blue ball shows through it. Hide the front image while the back is up, so the
   cutaway sits alone on the gradient. Only on cards that have a second image, or a
   single-image card would blank on hover. Pointer-gated like every other hover. */
@media (hover: hover) and (pointer: fine){
  .woocommerce.archive .products .product-small .box-image:has(.back-image):hover img:not(.back-image){opacity:0}
}
.woocommerce.archive .products .product-small .box-text{padding:10px 11px 12px;text-align:left;font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.woocommerce.archive .products .product-small .bmc-name{font-size:13px;font-weight:400;line-height:1.35;margin:0 0 6px;color:var(--bmc-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.woocommerce.archive .products .product-small .bmc-name a{color:var(--bmc-ink)}
.woocommerce.archive .products .product-small .price-wrapper{margin-top:6px}
.woocommerce.archive .products .product-small .price-wrapper .price.bmc-prow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}

/* ---- Card pieces (loop and Featured) ---- */
.bmc-rv{display:flex;align-items:center;gap:5px;line-height:1}
.bmc-rvstars{position:relative;display:inline-block;color:#D3D7DE;font-size:12px;letter-spacing:1px;line-height:1}
.bmc-rvstars::before{content:"\2605\2605\2605\2605\2605"}
.bmc-rvstars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:var(--pct);color:var(--bmc-gold);font-style:normal}
.bmc-rvstars i::before{content:"\2605\2605\2605\2605\2605"}
.bmc-rvn{font-size:11px;color:var(--bmc-ink3);font-variant-numeric:tabular-nums}
.bmc-rvempty{display:block;height:12px}
.bmc-prow{display:flex;align-items:baseline;gap:16px}
.bmc-now{font-size:15px;font-weight:800;color:var(--bmc-ink);font-variant-numeric:tabular-nums}
.bmc-was{font-size:13px;color:var(--bmc-ink3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.bmc-was .amount{color:inherit}

/* ---- Featured cards (new card look, slider geometry from the snippet) ---- */
.bm-featured .bmc-card{flex:0 0 46%;scroll-snap-align:start;background:#fff;border:1px solid var(--bmc-line);border-radius:var(--bmc-rs);overflow:hidden;box-shadow:var(--bmc-sh);display:flex;flex-direction:column;padding:0;transition:border-color .15s}
@media (min-width:550px){.bm-featured .bmc-card{flex-basis:calc((100% - 44px)/5)}}
.bmc-shot{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#fff 0,#fff 46%,#F5F7FA 74%,#EDF0F5 100%)}
.bmc-shot img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.bmc-meta{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1;font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.bmc-meta .bmc-name{font-size:13px;font-weight:400;line-height:1.35;color:var(--bmc-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmc-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
@media (hover: hover) and (pointer: fine) {
  .bm-tile:hover { box-shadow: 0 4px 14px rgba(16,35,56,.12); transform: translateY(-2px); }
  .bm-fnav:hover { background: #f4f6f9; }
  .bm-fcard:hover { box-shadow: 0 6px 18px rgba(16,35,56,.12); transform: translateY(-2px); }
  .bmc-term:hover .bmc-lab{color:var(--bmc-steel)}
  .bmc-more:hover{color:var(--bmc-navy);background:none}
  .bmc-chip:hover{border-color:var(--bmc-red)}
  .bmc-sz:hover{border-color:var(--bmc-navy)}
  .bmc-stock:hover .bmc-stock-lab{color:var(--bmc-steel)}
  /* Flatsome paints a shadow on the column on hover; the card owns its own edges. */
  .woocommerce.archive .products .product-small > .col-inner:hover{box-shadow:none;border-radius:var(--bmc-rs);background:transparent}
}

@media (prefers-reduced-motion:reduce){
  .bmc-grp summary::after,.bmc-card{transition:none}
  .bm-tile:hover,.bm-fcard:hover{transform:none}
}