/** Shopify CDN: Minification failed

Line 238:0 Unexpected "}"

**/
/* Biketart custom layer */

/* ── Cart stock urgency ────────────────────────────────────────────────────── */
.btk-cart-urgency {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #c0392b;
  margin-top: 0.5rem;
}
.btk-cart-urgency::before {
  content: '';
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #c0392b;
  flex-shrink: 0;
}
/* ── End cart stock urgency ────────────────────────────────────────────────── */


/* ── Cart cross-sell strip ─────────────────────────────────────────────────── */
.btk-crosssell {
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid #e5e5e5;
}
.btk-crosssell__heading {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}
.btk-crosssell__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}
.btk-crosssell__viewport::-webkit-scrollbar { display: none; }
.btk-crosssell__track {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.btk-crosssell__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 16rem;
  gap: 0.6rem;
}
@media (min-width: 1024px) {
  .btk-crosssell__card { flex: 0 0 18rem; }
}
.btk-crosssell__img-link { display: block; }
.btk-crosssell__img-wrap {
  position: relative;
  aspect-ratio: 1/1;
  background: #f5f5f5;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.btk-crosssell__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.btk-crosssell__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1;
}
.btk-crosssell__info { flex: 1; }
.btk-crosssell__vendor {
  font-size: 1.1rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.2rem;
}
.btk-crosssell__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.btk-crosssell__title a {
  color: inherit;
  text-decoration: none;
}
.btk-crosssell__title a:hover { text-decoration: underline; }
.btk-crosssell__price {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
}
.btk-crosssell__compare {
  color: #999;
  font-weight: 400;
  margin-right: 0.4rem;
}
.btk-crosssell__atc,
.btk-crosssell__viewopts {
  font-size: 1.2rem !important;
  padding: 0.8rem 1rem !important;
  min-height: 3.6rem !important;
  margin-top: auto;
  text-align: center;
  text-decoration: none !important;
}

/* Skeleton loading state */
.btk-crosssell__card--skeleton .btk-crosssell__img-wrap {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: btk-shimmer 1.4s infinite;
}
.btk-crosssell__skel-line {
  height: 1.2rem;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: btk-shimmer 1.4s infinite;
  border-radius: 3px;
  margin-bottom: 0.6rem;
}
.btk-crosssell__skel-line--short { width: 60%; }
@keyframes btk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ── End cart cross-sell strip ─────────────────────────────────────────────── */

/* ── Mobile sticky checkout bar ───────────────────────────────────────────── */
.btk-sticky-checkout {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* iPhone notch */
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
@media (max-width: 1023px) {
  .btk-sticky-checkout {
    display: block;
  }
  .btk-sticky-checkout.is-visible {
    transform: translateY(0);
  }
}
.btk-sticky-checkout__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
}
.btk-sticky-checkout__total {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
}
.btk-sticky-checkout__label {
  font-size: 1.1rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.btk-sticky-checkout__amount {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.btk-sticky-checkout__btn {
  flex: 1;
  min-height: 48px !important;
  font-size: 1.5rem !important;
}
/* ── End mobile sticky checkout bar ───────────────────────────────────────── */

/* BikeMatrix collection result — defined once here instead of per card */
.bm-collection-result {
  font-size: 12px;
}

:root { --btk-gap: 0.75rem; }
/* Add tiny utility classes here as we go */

/* === Tighter spacing above the product grid on collections === */
.template-collection .shopify-section--collection {
  /* Most Juno builds use these CSS vars for vertical spacing */
  --block-padding: 16px;   /* was ~48px/80px */
  --row-spacing: 12px;     /* soften extra gaps */
}

/* Nudge down the description/title spacing as well */
.template-collection .shopify-section--collection h1,
.template-collection .shopify-section--collection .rte {
  margin-bottom: 8px;
}

/* Bike Matrix app is active again; keeping old collapse rules here for reference:

.shopify-section--app-wrapper.btk-collapse {
  --block-padding: 0 !important;
  --row-spacing: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: none; /* fully remove the empty band */
}

*/


/* ========================================================================== */
/* PDP Add to Basket (bt-atc) — CLEAN FINAL + attribute-based spinner         */
/* ========================================================================== */

.bt-atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;                  /* big tap target */
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  border-radius: 0;                  /* square corners */
  border: 1px solid #222;
  background: #222;
  color: #fff;
  transition: transform .04s ease,
              filter .15s ease,
              background .15s ease,
              border-color .15s ease,
              color .15s ease;
  position: relative;                /* required for spinner positioning */
}

.bt-atc:hover { filter: brightness(1.06); }
.bt-atc:active { transform: translateY(1px); }
.bt-atc:focus-visible { outline: 2px solid #A2C037; outline-offset: 2px; }

/* Disabled/unavailable */
.bt-atc[disabled]{
  background: #e5e5e5;
  border-color: #e5e5e5;
  color: #9b9b9b;
  cursor: not-allowed;
  transform: none;
}

/* === Attribute-based spinner (no overlay element required) === */
.bt-atc[data-bt-loading="1"] { position: relative; }

/* Hide the text while loading so the spinner is clear */
.bt-atc[data-bt-loading="1"] > span:first-child { visibility: hidden; }

/* Centered spinner pseudo-element */
.bt-atc[data-bt-loading="1"]::after {
  content: "";
  position: absolute;
  inset: 0;                          /* fill the button, we’ll center via margins */
  width: 22px;
  height: 22px;
  margin: auto;                      /* centers the 22x22 spinner */
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;            /* visible on dark background */
  animation: bt-spin 0.9s linear infinite;
  z-index: 1;
}

/* Spinner animation */
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* ========================================================================== */
/* End PDP Add to Basket                                                      */
/* ========================================================================== */

/* === Collection description: Read more toggle (button-based) === */
.btk-cdesc {
  display: flex;
  flex-direction: column-reverse; /* puts the toggle below visually */
  gap: .5rem;
  margin: 0 0 1rem;
}
.btk-cdesc__body { line-height: 1.6; }

/* collapsed state: clamp height + soft fade */
.btk-cdesc:not(.is-open) .btk-cdesc__body {
  max-height: 12rem;              /* use this to change how much of the desc shoes. ~6 lines depending on font/line-height */
  overflow: hidden;
  position: relative;
}
.btk-cdesc:not(.is-open) .btk-cdesc__body::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* toggle styles */
.btk-cdesc__toggle {
  display: inline-flex;
  align-self: flex-start;
  cursor: pointer;
  color: #111;
  font-weight: 600;
  padding: 0;
  border: 0;
  background: none;
}
.btk-cdesc__toggle:focus-visible { outline: 2px solid #A2C037; outline-offset: 2px; }

/* label swap */
.btk-cdesc__label-less { display: none; }
.btk-cdesc.is-open .btk-cdesc__label-more { display: none; }
.btk-cdesc.is-open .btk-cdesc__label-less { display: inline; }

/* Keep whole-word wrapping on collection pages */
.template-collection .content__overline,
.template-collection .content__heading,
.template-collection .content__text,
.template-collection .rte,
.template-collection .rte p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto;
}

/* === Cart stock message: collapse when empty === */
[data-btk-cart-stock]:empty { 
  display: none !important; 
  margin: 0 !important; 
  padding: 0 !important; 
}

/* === Cart: make the Checkout button match ATC === */
.template-cart button[name="checkout"],
.template-cart input[name="checkout"]{
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  border-radius: 0;

  background: #222 !important;
  border: 1px solid #222 !important;
  color: #fff !important;

  transition: transform .04s ease,
              filter .15s ease,
              background .15s ease,
              border-color .15s ease,
              color .15s ease;
}

.template-cart button[name="checkout"]:hover,
.template-cart input[name="checkout"]:hover { filter: brightness(1.06); }

.template-cart button[name="checkout"]:active,
.template-cart input[name="checkout"]:active { transform: translateY(1px); }

.template-cart button[name="checkout"]:focus-visible,
.template-cart input[name="checkout"]:focus-visible {
  outline: 2px solid #A2C037; /* same focus style as ATC */
  outline-offset: 2px;
}

/* === Mini-cart drawer: Checkout button (match black ATC) === */
.btk-checkout{
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  border-radius: 0;

  background: #222 !important;
  border: 1px solid #222 !important;
  color: #fff !important;

  transition: transform .04s ease,
              filter .15s ease,
              background .15s ease,
              border-color .15s ease,
              color .15s ease;
}
.btk-checkout:hover{ filter: brightness(1.06); }
.btk-checkout:active{ transform: translateY(1px); }
.btk-checkout:focus-visible{
  outline: 2px solid #A2C037;
  outline-offset: 2px;
}

/* === PDP: Dynamic checkout button (Shopify .shopify-payment-button) === */
/* Container spacing & width (works even with branded iframe buttons) */
.shopify-payment-button {
  margin-top: 8px !important;  /* small gap under ATC */
  width: 100% !important;
}

/* Ensure the rendered button fills full width */
.shopify-payment-button__button,
.shopify-payment-button__button--branded,
.shopify-payment-button__button--unbranded {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 0 !important;
}

/* Optional: slightly downsize the branded button to feel secondary */
.shopify-payment-button__button--branded {
  transform: scale(0.98);
  transform-origin: center;
}

/* Hide the tiny "More payment options" link if shown */
.shopify-payment-button__more-options {
  display: none !important;
}

/* PDP: intro (short description) always occupies its own full row */
.template-product .bt-intro{
  display:block !important;
  width:100% !important;
  flex:0 0 100% !important;   /* forces price onto the next line even if intro is tiny */
}

.template-product .bt-intro product-description-preview{
  display:block !important;   /* custom element defaults to inline */
  width:100% !important;
}

/* === PDP: Harden full HTML description =============================== */
.template-product .bt-desc{
  display: flow-root;          /* contains floats; isolates layout */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;     /* long URLs/strings won’t blow layout */
}

/* basic rhythm */
.template-product .bt-desc :where(p, ul, ol, table, blockquote, pre){
  margin: 0 0 1rem;
}

/* media containment */
.template-product .bt-desc img,
.template-product .bt-desc video,
.template-product .bt-desc iframe{
  max-width: 100%;
  height: auto;
}

/* tables */
.template-product .bt-desc table{
  max-width: 100%;
  width: auto;
  border-collapse: collapse;
}
.template-product .bt-desc th,
.template-product .bt-desc td{ padding: .5rem .6rem; }

/* normalize lists (covers Slack’s p-rich_text_list too) */
.template-product .bt-desc ul,
.template-product .bt-desc .p-rich_text_list{
  display: block !important;
  list-style: disc !important;
  padding-left: 1.25rem;
}
.template-product .bt-desc ol{ list-style: decimal; padding-left: 1.25rem; }
.template-product .bt-desc li{ display: list-item !important; }

/* links inherit body text */
.template-product .bt-desc a{
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

/* keep pasted utility classes from escaping */
.template-product .bt-desc .w-fit{ width: auto !important; }
.template-product .bt-desc .float-left,
.template-product .bt-desc .float-right{ float: none !important; }

/* safety */
.template-product .bt-desc > *{ max-width: 100%; }


/* ==========================================================================
   PDP: Brand (vendor) ↔ Product title spacing + text styling
   --------------------------------------------------------------------------
   Controls both the spacing and appearance of the vendor name above titles.
   You can safely tweak these values or text styles later.
   ========================================================================== */

.bt-vendor-tight {
  /* === Spacing control === */
  margin-bottom: -6px;  /* tighten space under brand on mobile (more negative = closer) */

  /* === Text styling === */
  /* text-transform: uppercase;  /* uncomment this line if you want UPPER case */
  /* font-style: italic; */    /* uncomment this line if you want it italicized */
}

/* Optional: slightly tighter spacing on larger screens */
@media (min-width: 768px) {
  .bt-vendor-tight {
    margin-bottom: -8px;  /* adjust for desktop; more negative = closer */
  }
}



/* PDP: ensure only our Read more shows.
   ProductDescriptionPreview custom element generates its own link dynamically:
   - href="#ProductDescriptionDesktop" when innerWidth > 1280px
   - href="#ProductDescriptionMobile"  when innerWidth ≤ 1280px
   Hide both so only our static .content__link remains. */
.template-product product-description-preview a.pl-2 { display: none !important; }

/* --- Read more: make it look like a link --- */
.template-product .bt-intro .content__link{
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* --- EMERGENCY: bring back the Add to Basket button --- */
.template-product .o-button.o-button--full.bt-atc,
.template-product button[name="add"],
.template-product .product-form__submit{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  background: #222 !important;
  color: #fff !important;
  border: 1px solid #222 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: static !important;
}

/* If a wrapper collapsed or hid the form, reopen it */
.template-product product-form,
.template-product .product-form{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === Restore ATC styling exactly (high specificity, minimal overrides) === */
.template-product .product form[action*="/cart/add"] .o-button.o-button--full.bt-atc{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* your original look */
  background: #222 !important;
  border: 1px solid #222 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .2px !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
  width: 100% !important;

  /* ensure it can’t be hidden */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ========================================================================== */
/* Bikart: Sticky Collection Filters (v15 - Polished & Hardened)              */
/* ========================================================================== */

/* FIX 1: THE OVERRIDE
  Surgically scoped to *only* collection and search templates
  to avoid side-effects on modals or other parts of the site.
*/
body.template-collection,
body.template-search {
  overflow-x: visible !important;
}

body.template-collection main#MainContent,
body.template-search main#MainContent {
  overflow: visible !important;
}

/* FIX 2: THE STICKY RULE (ONE RULE FOR ALL SIZES)
  This sticks the entire .js-facets container.
*/
.template-collection .js-facets,
.template-search .js-facets {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height, 100px); /* Use JS variable */
  z-index: 39; /* Layer it just below the main header */
  background-color: #ffffff;
  
  /* Add a bottom border to look clean when sticky */
  border-bottom: 1px solid var(--border-light, #e5e5e5);
}

/* ==========================================================================
   Collection Card: Vendor styling
   --------------------------------------------------------------------------
   Make the brand clear and consistent. Tweak here as you like.
   ========================================================================== */
.bt-card-vendor{
  display:block;
  margin-bottom: .25rem;      /* tighten gap before title */
  font-size: 1.5rem;           /* slightly larger than tiny caption */
  font-weight: 550;           /* stronger to anchor the card */
  text-transform: uppercase;  /* brand in ALL CAPS */
  letter-spacing: .03em;      /* subtle tracking for readability */
  color: #111;                /* strong contrast */
  line-height: 1.1;
  text-decoration: none;      /* when it's a link */
}
.product-card:hover .bt-card-vendor{ color:#000; } /* optional hover nudge */

/* If you want the brand even bolder/larger, try:
   .bt-card-vendor { font-size: .95rem; font-weight:700; }
*/


/* Cart: vendor label above title */
.bt-cart-vendor{
  font-size: 1rem;          /* small, secondary */
  text-transform: uppercase; /* match collection/PDP vendor */
  letter-spacing: .02em;
  color: var(--color-text-secondary, #666);
  margin-bottom: 2px;        /* snug to the title */
  line-height: 1.1;
}


/* ================= Mini-cart (dialog) polish ===================
   Works with dialog-drawer-cart.liquid. We scope to common wrappers:
   - dialog IDs that contain "Cart" or "drawer-cart"
   - utility classes used by dialog drawers
   -------------------------------------------------------------- */

dialog[id*="Cart"],
dialog[id*="cart"],
dialog[id*="drawer-cart"],
.dialog-drawer-cart,
.dialog--drawer-cart,
#Cart-Drawer,
#Cart-Drawer-Form,
#DrawerCart,
.cart-drawer {
  /* nothing here; this line only establishes the scope above */
}

/* Vendor line (above title) */
dialog[id*="Cart"] .bt-cart-vendor,
dialog[id*="cart"] .bt-cart-vendor,
dialog[id*="drawer-cart"] .bt-cart-vendor,
.dialog-drawer-cart .bt-cart-vendor,
.dialog--drawer-cart .bt-cart-vendor,
#Cart-Drawer .bt-cart-vendor,
#Cart-Drawer-Form .bt-cart-vendor,
#DrawerCart .bt-cart-vendor,
.cart-drawer .bt-cart-vendor{
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--color-text-secondary, #666);
  margin-bottom: 2px;
  line-height: 1.1;
}

/* Title constraints (prevent messy wrapping) */
dialog[id*="Cart"] .cart-item__name,
dialog[id*="cart"] .cart-item__name,
dialog[id*="drawer-cart"] .cart-item__name,
.dialog-drawer-cart .cart-item__name,
.dialog--drawer-cart .cart-item__name,
#Cart-Drawer .cart-item__name,
#Cart-Drawer-Form .cart-item__name,
#DrawerCart .cart-item__name,
.cart-drawer .cart-item__name{
  line-height: 1.25;
  display: block;
  max-width: 22rem;          /* adjust to taste */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;        /* remove this if you prefer wrapping */
}

/* The small “Colour / Size” list under the title */
dialog[id*="Cart"] .cart-item__options,
dialog[id*="cart"] .cart-item__options,
dialog[id*="drawer-cart"] .cart-item__options,
.dialog-drawer-cart .cart-item__options,
.dialog--drawer-cart .cart-item__options,
#Cart-Drawer .cart-item__options,
#Cart-Drawer-Form .cart-item__options,
#DrawerCart .cart-item__options,
.cart-drawer .cart-item__options{
  margin-top: 2px;
  font-size: .85rem;
  color: var(--color-text-secondary, #666);
}

/* Align price to the top of the details block (if your layout supports it) */
dialog[id*="Cart"] .cart-item__details + .cart-item__price,
dialog[id*="cart"] .cart-item__details + .cart-item__price,
dialog[id*="drawer-cart"] .cart-item__details + .cart-item__price,
.dialog-drawer-cart .cart-item__details + .cart-item__price,
.dialog--drawer-cart .cart-item__details + .cart-item__price,
#Cart-Drawer .cart-item__details + .cart-item__price,
#Cart-Drawer-Form .cart-item__details + .cart-item__price,
#DrawerCart .cart-item__details + .cart-item__price,
.cart-drawer .cart-item__details + .cart-item__price{
  align-self: start;
}

/* ================= Search placeholder contrast (predictive bar) =============== */
/* Scope to the modal container so it won't affect other inputs */
#search-container .o-input__field::placeholder { 
  color: rgba(0,0,0,.72) !important;   /* increase contrast on light bg */
}

/* Cross-browser variants */
#search-container .o-input__field::-webkit-input-placeholder { 
  color: rgba(0,0,0,.72) !important; 
}
#search-container .o-input__field::-moz-placeholder { 
  color: rgba(0,0,0,.72) !important; 
}
#search-container .o-input__field:-ms-input-placeholder { 
  color: rgba(0,0,0,.72) !important; 
}
#search-container .o-input__field:-moz-placeholder { 
  color: rgba(0,0,0,.72) !important; 
}

/* Optional: if your search modal ever sits on a dark background, flip it */
/*
#search-container[data-theme="dark"] .o-input__field::placeholder { 
  color: rgba(255,255,255,.8) !important; 
}
*/



/* ==========================================================================
   Predictive Search — refined 2-col layout (Biketart v5, condensed)
   ========================================================================== */
:root{
  --ps-max: 1200px;
  --ps-gap: 28px;
  --ps-thumb: 96px;  /* was 72px — larger for better product recognition */
}

.predictive-search{
  padding-top: .5rem !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Two main columns: products + collections */
.predictive-search__results-groups-wrapper{
  max-width: var(--ps-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  column-gap: var(--ps-gap);
  align-items: start;
}

/* Product list: two columns */
.predictive-search__products-list{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(340px,1fr));
  gap: 10px var(--ps-gap);
}

/* Each result row: [thumb][text] */
.predictive-search__item{
  display: grid;
  grid-template-columns: var(--ps-thumb) 1fr;
  gap: 10px;
  align-items: center !important;
  padding: 6px 0 !important;
}

/* Thumbnail */
.predictive-search__item img{
  width: var(--ps-thumb) !important;
  height: var(--ps-thumb) !important;
  object-fit: contain;
  border-radius: 4px;
  background-color: #f5f5f5;  /* frame white-background product shots cleanly */
  flex-shrink: 0;
}

/* Remove default <p> spacing inside the details stack */
.predictive-search__item-details p{ margin: 0 !important; }

/* Vendor — treated as a small muted label above the title */
.predictive-search__item-vendor{
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  color: #888;          /* was #000 — muted so title dominates */
  letter-spacing: 0.04em;
  margin-bottom: 0 !important;
  line-height: 1.05;
  padding-top: 0 !important;
}

/* Title — heavier weight creates clear hierarchy vs muted vendor label */
.predictive-search .predictive-search__item-heading{
  font-weight: 600 !important;  /* was 400 */
  font-size: 1.28rem;
  color: #000;
  line-height: 1.18;
  letter-spacing: .005em;
  margin: 0 0 1px !important;
}

/* Price lines */
.ps-price__now{
  font-size: 1.12rem;   /* current/“from” price */
  font-weight: 600;
  color: #000;
}
.ps-price__rrp{
  margin-top: 2px;
  font-size: 1.02rem;   /* RRP + Save % line */
  color: #6b6b6b;
}
.ps-price__rrp .ps-price__save{
  margin-left: .5ch;
  color: #c30000;
  font-weight: 600;
}

/* Kill any extra margin injected by theme price blocks */
.predictive-search .price{ margin-top: 0 !important; }

/* Collections header tone */
.predictive-search__heading{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* Align the “View all results” row with the grid */
.predictive-search__footer{
  max-width: var(--ps-max);
  margin: 12px auto 0;
  padding-left: 0;
  text-align: left;
}

/* Mobile: stack columns */
@media (max-width: 1024px){
  .predictive-search__results-groups-wrapper{
    grid-template-columns: 1fr;
    row-gap: 18px;
    max-width: 92vw;
  }
  .predictive-search__products-list{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Optional: upsize slightly on wide screens */
@media (min-width: 1200px){
  .predictive-search .predictive-search__item-heading{ font-size: 1.32rem; }
  .predictive-search .ps-price__now{ font-size: 1.16rem; }
  .predictive-search .ps-price__rrp{ font-size: 1.06rem; }
}

/* (Optional safety) ensure the media area is the positioning context */
.product__media { position: relative; }

/* PDP: anchor badge containers over the gallery without affecting layout */
.product__media { position: relative; }

.product__media > .product__media-badge{
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;      /* don’t block gallery swipes/clicks */
}
.product__media > .product__media-badge *{ pointer-events: auto; }

/* Nudge our sticker container slightly below the metafield badge */
.product__media > .product__media-badge.bt-stickers{ top: 3.25rem; }

/* Allow clicking through overlay text to the image link */
.shopify-section--collection-banner .btk-cdesc,
.shopify-section--collection-banner [data-cdesc],
.shopify-section--collection-banner .content {
  pointer-events: none;
}

/* But keep buttons/links inside the overlay clickable */
.shopify-section--collection-banner a,
.shopify-section--collection-banner button {
  pointer-events: auto;
}

/* Grid banner: let the image link be clickable even with overlay captions */
.banner-section .col-img .caption {
  pointer-events: none;
}

/* But keep buttons/links inside the caption clickable */
.banner-section .col-img .caption a,
.banner-section .col-img .caption button {
  pointer-events: auto;
}

/* Even if the overlay isn’t the problem, it’s good practice to ensure the anchor fills the image container. */ 
.banner-section .col-img .image > a.link {
  display: block;
}
.banner-section .col-img .image > a.link picture,
.banner-section .col-img .image > a.link img {
  display: block;
  width: 100%;
}


/* ===== Megamenu dropdown (CLS-safe + properly centred) ===== */

@media (min-width: 992px) {
  header.header-group #navigation li.level0 {
    position: relative;
  }

  header.header-group #navigation .nav-drop {
    position: absolute;
    top: 100%;
    z-index: 999;

    /* Center relative to viewport instead of parent */
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: 100vw;

    /* IMPORTANT: keep X centering while animating Y */
    transform: translateX(-50%) translateY(8px);

    contain: layout paint;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    will-change: transform, opacity;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
    transition-property: opacity, transform, visibility !important;
  }

  header.header-group #navigation li.level0:hover > .nav-drop,
  header.header-group #navigation li.level0.is-open > .nav-drop,
  header.header-group #navigation .nav-drop.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}


[role="tooltip"] {
  position: absolute !important;
  top: 100%;
  left: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

/* Show tooltip when theme toggles it open (keep whichever matches your markup) */
[role="tooltip"]:not([hidden]),
[role="tooltip"][data-state="open"],
[role="tooltip"].is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}


.footer-logo img {
  display: block;
  width: 81px;
  height: 20px;
}

.footer-bottom {
  min-height: 40px;
}


/* Reserve space for Klarna badge to prevent CLS */

klarna-placement {
  display: block;
  min-height: 30px;
}

.badge-container {
  min-height: 30px;
}

/* Grid banner: reserve space for responsive <picture> to prevent CLS */
.banner-section .image picture{
  display:block;
  width:100%;
  aspect-ratio: var(--ar-mobile);
}
@media (min-width: 992px){
  .banner-section .image picture{
    aspect-ratio: var(--ar-desktop);
  }
}
.banner-section .image picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

#PBarNextFrameWrapper {
  min-height: 60px; /* start here */
}

/* Improve Accessibility Contrast for Sale Badges */
.product-details .badges .badge, 
[data-sticker="sale"] { 
  color: #111111 !important; 
  font-weight: 700 !important;
}

/* CLS Fix: Reserve space for product grid images */
.product-card .image-wrapper,
.product-card .product-image,
.template-collection .product-item .image {
  aspect-ratio: 1 / 1; /* Forces a square aspect ratio before load */
  background: #f9f9f9; /* Subtle placeholder color */
  display: block;
  width: 100%;
}

/* Ensure the image fills the reserved square perfectly */
.product-card img {
  object-fit: contain;
  width: 100% !important;
  height: 100% !important;
}



/* Accessibility: Stealth 'Hit-Area' for Card Variants */
.product-card .js-product-card-variants {
  display: flex !important;
  flex-wrap: nowrap !important;   /* Force single tidy row */
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 32px !important;         /* Fixed height to prevent 'sinking' */
  gap: 8px !important;             /* Visual gap between icons */
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.product-card .js-product-card-variants li {
  position: relative !important;
  width: 20px !important;           /* Visual size of the icon container */
  height: 20px !important;
  flex: 0 0 auto !important;
}

/* THE STEALTH HIT AREA: Expands the touchable zone to 44px 
   without pushing other icons away visually. */
.product-card .js-product-card-variants li::before {
  content: "" !important;
  position: absolute !important;
  top: -12px; bottom: -12px; left: -12px; right: -12px; 
  z-index: 1;
  background: transparent !important;
}

/* The visual part of the dot/icon */
.product-card .js-product-card-variants span {
  position: relative !important;
  display: block;
  z-index: 2;
  width: 20px !important;           /* Your preferred visual size */
  height: 20px !important;
  border-radius: 50%;
  border: 1px solid #eee;
  /* Resets theme positioning */
  left: auto !important; top: auto !important; transform: none !important;
}

/* Hide the radio input but keep it functional */
.js-product-card-variant {
  position: absolute !important;
  opacity: 0 !important;
  inset: 0 !important;
  z-index: 3;
  margin: 0 !important;
  cursor: pointer;
}

/* Active State: Clean ring around the icon */
.product-card .js-product-card-variants input:checked + span {
  outline: 1.5px solid #111;
  outline-offset: 2px;
}

/* === BikeMatrix bikon: align with other header icons === */
bikematrix-bikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* === Header section styles (moved from inline <style> in header.liquid) === */
.shopify-section-group-header-group {
  z-index: 1000000;
}

.header__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 6px;
  color: inherit;
  text-align: center;
  z-index: 40;
}

@media screen and (max-width: 991px) {
  .header__icon {
    padding: 10px;
  }
}

.header__icon svg {
  width: 44px;
  height: 44px;
}

.col-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media screen and (max-width: 480px) {
  .shopify-section--header .nav-functions a {
    padding: 29px 10px;
  }
  .header__icon {
    padding: 10px 0 10px 10px;
  }
}
/* === End header styles === */

/* === Recently Viewed Products slider — item widths ===
   The Juno slider system uses --slides and --col-gap on the track to calculate
   item width. Since recently-viewed-products is a custom slider name not in
   main.min.css, we define its breakpoints here. */
:where(.slider--recently-viewed-products) .slider__track,
:where(.slider--recently-viewed-products) .slider__thumbnails-track {
  --col-gap: 1.6rem;
  --slides: 1.5;
}
@media (min-width: 640px) {
  :where(.slider--recently-viewed-products) .slider__track,
  :where(.slider--recently-viewed-products) .slider__thumbnails-track {
    --slides: 2.5;
  }
}
@media (min-width: 1024px) {
  :where(.slider--recently-viewed-products) .slider__track,
  :where(.slider--recently-viewed-products) .slider__thumbnails-track {
    --col-gap: 2.4rem;
    --slides: 4;
  }
}
/* === End Recently Viewed slider === */

/* Force all external fonts to swap behavior */
@font-face {
  font-family: 'Google Sans';
  font-display: swap !important;
}

/* === Lightbox navigation arrows === */
.btk-lb-arrows {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
  z-index: 20;
}
.btk-lb-nav {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.42);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.btk-lb-nav:hover {
  background: rgba(0, 0, 0, 0.72);
}

/* === Gallery image count badge === */
/* Ensure the slide li that holds the badge has a positioning context */
li:has(.btk-gallery-count) {
  position: relative;
}
.btk-gallery-count {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 5;
  line-height: 1;
}
/* === Gallery thumbnail strip: scrollable fallback === */
/* Prevents the strip overflowing when a product has many images */
.slider--media-gallery .slider__thumbnails-viewport {
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.slider--media-gallery .slider__thumbnails-viewport::-webkit-scrollbar {
  height: 4px;
}
.slider--media-gallery .slider__thumbnails-viewport::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}

/* === Fix gallery viewport overflowing product column ===
   The juno-slider CSS grid uses `1fr` for its column which resolves to a
   larger value than the actual element width at wide viewports, causing all
   grid children (.slider__viewport, .slider-arrows, .slider__thumbnails) to
   be wider than the product media column and overlap into the description area.
   Clamp everything to the element's own width. */
juno-slider.slider--media-gallery {
  overflow: hidden;
  max-width: 100%;
  display: block;
}
juno-slider.slider--media-gallery .slider__viewport,
juno-slider.slider--media-gallery .slider-arrows,
juno-slider.slider--media-gallery .slider__thumbnails {
  max-width: 100% !important;
  width: 100% !important;
}
juno-slider.slider--media-gallery .slider__thumbnails {
  box-sizing: border-box;
}

/* === Lightbox: dark background ===
   Turns the empty white space around the image into deliberate dark framing,
   giving a focused, premium viewing experience. Thumbnails get a matching
   dark treatment so they don't float on white. Close button inverted to white. */
.dialog--modal[modal-style=lightbox] [role=document] {
  background-color: #111 !important;
}
.dialog--modal[modal-style=lightbox] [data-dialog-element=close] {
  color: #fff !important;
  opacity: 0.75;
  right: 1.6rem !important;
  top: 1.2rem !important;
}
.dialog--modal[modal-style=lightbox] [data-dialog-element=close]:hover {
  opacity: 1 !important;
}
/* The SVG icon inside the close button needs an explicit stroke/fill override */
.dialog--modal[modal-style=lightbox] [data-dialog-element=close] svg {
  stroke: #fff;
  color: #fff;
  fill: none;
}
/* Thumbnail borders on dark bg */
.lightbox__thumbnails-item {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.lightbox__thumbnails-item.is-selected {
  border-color: #fff !important;
}

/* === Lightbox: full screen, image centred, our zoom (Biketart, 14 Oct 2026) ===
   Replaces the older "Maximise lightbox image size" rules (square 1:1 viewport, arrows sized to a square).
   Mobile: image fills the space under the close button; prev / thumbnails / next sit in a row BELOW the image.
   Desktop: thumbnails column on the left; arrows sit in 72px side gutters the image never enters.
   .btk-lb-zoom is the zoom layer created by sections/dialog-modal-lightbox.liquid. */
.dialog--modal[modal-style=lightbox] [data-dialog-element=main] {
  padding: 0 !important;
  height: 100%;
  max-height: none !important; /* the generic modal caps main at 70vh with overflow:auto, which cut the lightbox off */
  overflow: hidden !important;
}
#ModalLightbox .lightbox {
  grid-template: "main main main" minmax(0, 1fr) "prev thumbnails next" auto / 52px minmax(0, 1fr) 52px !important;
  gap: 12px 0 !important;
  width: 100%;
  height: 100dvh;
  padding: 60px 0 12px;
  box-sizing: border-box;
  place-content: stretch !important;
  align-items: stretch !important;
}
#ModalLightbox .lightbox__viewport {
  grid-area: main;
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  touch-action: pan-y;
}
#ModalLightbox .lightbox__track { height: 100%; }
#ModalLightbox .lightbox__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#ModalLightbox .btk-lb-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
#ModalLightbox .lightbox__thumbnails { grid-area: thumbnails; align-self: center; }
#ModalLightbox .btk-lb-arrows { display: contents; }
#ModalLightbox .js-lb-prev { grid-area: prev; justify-self: center; align-self: center; }
#ModalLightbox .js-lb-next { grid-area: next; justify-self: center; align-self: center; }
@media (min-width: 768px) {
  #ModalLightbox .lightbox {
    grid-template: "thumbnails main" minmax(0, 1fr) / 80px minmax(0, 1fr) !important;
    gap: 0 16px !important;
    padding: 16px;
  }
  #ModalLightbox .lightbox__viewport { touch-action: pan-x; }
  #ModalLightbox .lightbox__item { padding: 0 72px; }
  #ModalLightbox .btk-lb-arrows {
    grid-area: main;
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: auto !important;
    margin: 0 !important;
    padding: 0 12px !important;
    pointer-events: none;
    z-index: 20;
  }
  #ModalLightbox .js-lb-prev,
  #ModalLightbox .js-lb-next { grid-area: auto; }
}
/* Zoom layer */
#ModalLightbox .btk-lb-zoom {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: #111;
  cursor: zoom-out;
  touch-action: none;
}
#ModalLightbox .btk-lb-zoom__img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  background: #fff;
}
#ModalLightbox [data-dialog-element=close] { z-index: 40; }
/* Third-party floaters that sit above the lightbox: hide them while it is open (apps untouched).
   Smile.io rewards pop-up, and the Google "Top Quality Store" merchant badge. */
body:has(#ModalLightbox[aria-hidden="false"]) iframe[title="Loyalty program pop-up with offers and actions"],
body:has(#ModalLightbox[aria-hidden="false"]) #google-merchantwidget-iframe-wrapper {
  display: none !important;
}

/* === Bike PDP gallery: 3:2 crop (Biketart, gallery Phase B, 14 Oct 2026) ===
   Only on bike products: snippets/product_media-gallery.liquid adds .btk-gallery--crop to the slider and, at render time,
   btk-crop-cover (media ID listed in the metafield biketart.gallery_crop) or btk-crop-contain to each photo.
   Fixed 3:2 box (size from CSS, so no layout shift). Mobile: no arrow row (swipe + thumbnails). Thumbnails, lightbox and
   JSON-LD untouched. */
.btk-gallery--crop .slider__track .slider__item { aspect-ratio: 3 / 2; }
.btk-gallery--crop img.btk-crop-cover { object-fit: cover !important; object-position: 50% 50%; }
.btk-gallery--crop img.btk-crop-contain { object-fit: contain !important; }
@media (max-width: 767px) {
  .btk-gallery--crop .slider-arrows { display: none !important; }
}

/* === End lightbox & gallery improvements === */



/* ============================================================
   Brands Directory page  (.btk-brands-dir)
   Template: page.brands-directory  |  Section: page-brands-directory
   ============================================================ */

.btk-brands-dir {
  padding: 3rem 0 5rem;
}

/* Replaces .wrapper — avoids Juno's float clearfix which collapses on mobile */
.btk-brands-dir__inner {
  max-width: 1744px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (min-width: 600px) {
  .btk-brands-dir__inner { padding: 0 3rem; }
}
@media (min-width: 1024px) {
  .btk-brands-dir__inner { padding: 0 4rem; }
}

/* ── Header ── */
.btk-brands-dir__header {
  margin-bottom: 2rem;
}
.btk-brands-dir__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 .4rem;
}
.btk-brands-dir__subheading {
  color: #666;
  margin: 0;
}

/* ── A–Z sticky bar ── */
.btk-brands-dir__az-bar {
  position: sticky;
  top: var(--header-height, 112px);
  z-index: 20;
  background: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: .5rem 0;
  margin-bottom: 2.5rem;
}
.btk-brands-dir__az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
}
.btk-brands-dir__az-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  font-size: 1.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  border-radius: 2px;
  transition: background .15s, color .15s;
}
.btk-brands-dir__az-link:hover {
  background: #A2C037;
  color: #fff;
}
.btk-brands-dir__az-link--empty {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

/* ── Letter groups ── */
.btk-brands-dir__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.btk-brands-dir__group {
  scroll-margin-top: calc(var(--header-height, 112px) + 8rem); /* header + sticky A-Z bar */
}
.btk-brands-dir__letter-head {
  font-size: 2rem;
  font-weight: 700;
  color: #A2C037;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid #A2C037;
  padding-bottom: .5rem;
  margin: 0 0 1.5rem;
}

/* ── Brand list — responsive columns ── */
.btk-brands-dir__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
@media (min-width: 600px) {
  .btk-brands-dir__list { columns: 3; }
}
@media (min-width: 900px) {
  .btk-brands-dir__list { columns: 4; }
}
@media (min-width: 1200px) {
  .btk-brands-dir__list { columns: 5; }
}
.btk-brands-dir__item {
  break-inside: avoid;
  padding: .8rem 0;
}
.btk-brands-dir__link {
  color: #111;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color .15s;
}
.btk-brands-dir__link:hover {
  color: #A2C037;
}

/* ── Mobile tweaks ── */
@media (max-width: 599px) {
  .btk-brands-dir__az-link {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
  }
  .btk-brands-dir__letter-head {
    font-size: 1.7rem;
  }
  .btk-brands-dir__link {
    font-size: 1.4rem;
  }
  .btk-brands-dir__title {
    font-size: 2rem;
  }
}

/* ============================================================
   Brands nav dropdown
   ============================================================ */

/* "View all brands" link — bold */
a.brands-view-all {
  font-weight: 700 !important;
}

/* Fix Juno :nth-child(2) rule — makes first Tier 2 column 18px/weight 400, inconsistent with rest */
@media (max-width: 1149px) {
  .shopify-section--navigation .nav-drop .col-sub.level2:nth-child(2) a {
    font-size: 16px;
  }
  .shopify-section--navigation .nav-drop .col-sub.level2:nth-child(2) a.level1 {
    font-size: 16px;
    font-weight: 500;
  }
}

/* Mobile: make brand links look like standard tier-2 nav items (consistent with rest of menu) */
@media (max-width: 1149px) {
  /* Each brand is a col-sub with 24px padding — that's 48px overhead × 20 brands. Remove it. */
  .shopify-section--navigation .nav-primary .brands .nav-drop .col-sub {
    padding: 0;
  }
  /* Remove border-top separator between each brand item */
  .shopify-section--navigation .nav-primary .brands .nav-drop .col-sub.level2 {
    border-top: none;
  }
  /* Juno styles a.level1 as a column heading (line-height: 1.1, margin-bottom: 18px, weight 500).
     Override to match a.level2 sub-items used elsewhere: line-height: 2.5 for natural spacing. */
  .shopify-section--navigation .nav-primary .brands .nav-drop .col-sub.level2 a.level1,
  .shopify-section--navigation .nav-primary .brands .nav-drop .col-sub.level2:nth-child(2) a.level1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 2.5;
    margin-bottom: 0;
  }
}

/* Collection / product-card image fit — show whole product, no crop or distortion */
.js-product-card-media .o-img { object-fit: contain !important; }
/* Biketart (Cowork, 29 Sep 2026): on tablet/desktop the card price sits level with the brand + title.
   The brand is now the first item in the card's title/price grid (card_product.liquid). The price takes
   column 2, rows 1-2, top-aligned, so a plain price lines up with the brand and a sale price reads
   Was (beside the brand) / Now (beside the title). Phones (<768px) keep the stacked layout. */
/* Claude Code (29 Sep 2026): tuning after measuring on DEV.
   - The brand keeps Tailwind's col-span-2; inside the single-column phone grid that created a second, implicit
     column and squeezed title + price. grid-column:auto below 768px restores the old stacked phone layout.
   - Equal-height cards stretch the grid's rows; with the brand now in row 1 that row stretched too and pushed the
     title down. Row 1 is min-content, so spare height goes to the rows below it, as before.
   - The grid's 0.8rem row gap now sits between brand and title; the brand's own .25rem margin minus that gap keeps
     the original brand-to-title spacing. */
.js-product-card .grid:has(> .bt-card-vendor){grid-template-rows:min-content}
/* Biketart (Cowork, 1 Oct 2026): pack the card's text rows to the top. The grid is flex-grow (cards in a row are equal height), so on a
   card with fewer lines (e.g. no "2 colours") the spare height was being shared out between the rows, opening a gap above the spec line. */
/* Claude Code, 1 Oct 2026 (option b, Adam): only on cards WITHOUT a swatch row. On accessory cards the stretch is what keeps the
   swatch row (self-end) level at the bottom across a row, so those cards keep their earlier row layout. */
.js-product-card > .grid.flex-grow:not(:has(> .js-product-card-variants)){align-content:start}
.js-product-card .bt-card-vendor{margin-bottom:calc(.25rem - .8rem)}
@media (max-width:767px){
  .js-product-card .bt-card-vendor{grid-column:auto}
}
/* Adam, 1 Oct 2026: the price-level-with-brand layout only from 1280px. At 768-1279px the cards keep the previous
   layout (as LIVE): the brand's col-span-2 makes it a full-width first row and the price sits beside the title.
   In narrower cards a long brand otherwise squeezed the price column into 4 lines. */
@media (min-width:1280px){
  .js-product-card .bt-card-vendor{grid-column:1;grid-row:1}
  .js-product-card .btk-card-price{grid-column:2;grid-row:1 / span 2;align-self:start}
}

/* Biketart (1 Oct 2026): collection pages, BikeMatrix app blocks - reserve their final height so the products are not pushed down
   when the app draws them (1-4 s after load). Only where the app renders them: the banner is server-rendered with data-show="true"
   exactly on the collections where both blocks draw (tyres, chains, wheels, ...); everywhere else both stay 0 px and nothing is reserved.
   Heights measured on LIVE for a visitor with no bike selected: banner 40px; compatible list 124px, 148px below 638px wide (its
   "No bike selected..." line wraps). min-height only, so a taller list (bike selected) still grows as before. App scripts untouched. */
.template-collection .shopify-section--app-wrapper:has(bikematrix-bikeselectorbanner[data-show="true"]){min-height:40px}
.template-collection:has(bikematrix-bikeselectorbanner[data-show="true"]) .shopify-section--app-wrapper:has(bikematrix-compatiblelist){min-height:124px}
@media (max-width:637px){
  .template-collection:has(bikematrix-bikeselectorbanner[data-show="true"]) .shopify-section--app-wrapper:has(bikematrix-compatiblelist){min-height:148px}
}
/* Biketart (1 Oct 2026): main.min.css names Graphik with no fallback on headings and form fields, so before the font loads they drew in
   Times. Add the metric-matched fallback from theme_head.liquid (same selectors, this file loads later). */
.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,input[type=email],input[type=password],input[type=search],input[type=tel],input[type=telephone],input[type=text],input[type=url],select,textarea{font-family:Graphik,"Graphik Fallback"}
/* Biketart (1 Oct 2026): collection/search product grid - let the columns keep their even 1fr share. A grid item's automatic
   minimum is its content width, and while the lazy-loader swaps a card image's source the image briefly reports a 300px intrinsic
   width (min-width:100% on .o-img), so on phones both columns jumped to 300px for ~0.4 s and back (layout shift). Final widths are
   unchanged. */
.section-grid.js-paginatable-list > li{min-width:0}

/* Biketart (5 Oct 2026): BikeMatrix per-card compatibility result (<bikematrix-collectionresult>, collection/search grids).
   It used to sit below the card text as a 38px pill and made every card taller when it arrived 2-5 s after load.
   Now it is out of flow, in the empty strip between the photo and the divider (photo bottom = card width minus about 3px; the strip is
   2.7rem), restyled small by biketart-core.js (shadow DOM). Guard: if the app's markup changes and that restyle stops matching,
   the default pill is clipped to the strip (max-height + overflow), so cards still don't grow and it never reaches the
   vendor/price rows. Hidden on cards with the "Finance available" badge (bikes), which uses the same strip. */
.section-grid.js-paginatable-list > li > product-card{container-type:inline-size;position:relative}
.section-grid.js-paginatable-list > li > product-card > div:has(> bikematrix-collectionresult){position:absolute;left:0;top:calc(100cqw - 2px);width:max-content;max-width:100%!important;max-height:2.4rem;overflow:hidden;padding:4px 4px 0 0;z-index:1}
.section-grid.js-paginatable-list > li > product-card:has(.btk-card-fin) > div:has(> bikematrix-collectionresult){display:none}