/* Can-Am product pages — hand-edited DMCMB tweaks layered over the
   machine-generated canam-product.css (do not edit that file by hand; it is
   rebuilt by tools/css-prune-scope.py in the dmc repo). */

/* BRP's CSS offsets sticky elements by its site chrome heights; none of that
   chrome exists here. */
:root {
	--brp-alert-height: 0px;
	--brp-breadcrumb-height: 0px;
	--brp-navHead-height: 0px;
	--brp-pageLevelNav-height: 0px;
}

/* Base text: BRP's default paragraph face (Adobe Fonts kit). Components that
   set their own family (Can-Am Gothic headings etc.) override this. */
.canam-product {
	font-family: neue-haas-unica, "Helvetica Neue", Arial, sans-serif;
	background: #fff;
}

/* The wrapper inherited html{height:100%} semantics it doesn't need. */
.canam-product {
	height: auto;
}

/* Fallback in case the server-side sidebar removal is ever bypassed. */
.single-product .canam-product-wrap ~ #secondary.shop-sidebar,
.single-product body:has(.canam-product) #secondary.shop-sidebar {
	display: none;
}

/* Feature carousel: BRP's AEM JS positions all slides side-by-side with
   inline styles; our minimal JS swaps an active class instead. Without this,
   a later "display:block" rule shows all 5 slides stacked in a 2000px black
   void. Only the active slide participates in layout. */
.canam-product .cmp-carousel__item {
	display: none !important;
}
.canam-product .cmp-carousel__item--active {
	display: block !important;
	height: auto !important;
}
.canam-product .next-gen .carousel .cmp-carousel,
.canam-product .next-gen .carousel .cmp-carousel__item--active {
	height: auto !important;
}

/* Breadcrumb: same treatment as the MV Agusta new-bikes pages. This file
   only loads on Can-Am product pages, so the .woocommerce scope is safe. */
.woocommerce .woocommerce-breadcrumb {
	background: #000;
	margin: 0;
	padding: 0 0 20px 20px;
	font-size: 0.9em;
}

/* FAIL-SAFE: restatement of the trim-expander layout rules from the
   machine-generated canam-product.css. A user report showed the expander
   rendering at card width (rules not applied) while the generated file on
   the server was correct — this file gets a fresh ?ver on every push, so a
   copy here can never be served stale. Keep in sync if the grid changes. */
@media (min-width:768px) {
	.canam-product .next-gen .model-trim-selection .card__expander {
		display: block;
		height: 1px;
		left: 0;
		margin-left: -1.125rem;
		position: relative;
		width: calc(300% + 2.25rem);
		z-index: -1;
	}
	.canam-product .next-gen .model-trim-selection .is-expanded .card__expander {
		height: auto;
		overflow: visible;
		z-index: 10;
	}
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(3n) .card__expander { margin-left: calc(-200% - 1.125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(3n-1) .card__expander { margin-left: calc(-100% - 1.125rem); }
}
@media (min-width:1025px) {
	.canam-product .next-gen .model-trim-selection .card__expander {
		margin-top: -1px;
		width: calc(400% + 2.25rem);
	}
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(3n) .card__expander { margin-left: auto; }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(3n-1) .card__expander { margin-left: -1.125rem; }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n) .card__expander { margin-left: calc(-300% - 1.125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-1) .card__expander { margin-left: calc(-200% - 1.125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-2) .card__expander { margin-left: calc(-100% - 1.125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-3) .card__expander { margin-left: -1.125rem; }
}
@media (min-width:1700px) {
	.canam-product .next-gen .model-trim-selection .card__expander {
		margin-left: -2.8125rem;
		width: calc(600% + 5.625rem);
	}
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n) .card__expander,
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-1) .card__expander,
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-2) .card__expander,
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(4n-3) .card__expander { margin-left: auto; }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n) .card__expander { margin-left: calc(-500% - 2.8125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n-1) .card__expander { margin-left: calc(-400% - 2.8125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n-2) .card__expander { margin-left: calc(-300% - 2.8125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n-3) .card__expander { margin-left: calc(-200% - 2.8125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n-4) .card__expander { margin-left: calc(-100% - 2.8125rem); }
	.canam-product .next-gen .model-trim-selection .card:nth-of-type(6n-5) .card__expander { margin-left: -2.8125rem; }
}

/* THE expander-width bug (2026-07-23, root cause): the theme's sitewide
   foundation.min.css ships a .card component with overflow:hidden, and BRP's
   trim cards use the same class name — the full-width expander was laid out
   correctly but visually CLIPPED to the card box. BRP's own CSS leaves .card
   overflow at the default, so restore that inside the fragment. The JS also
   sets overflow:visible inline on the expanded card as a failsafe. */
.canam-product .card {
	overflow: visible;
}

/* carousel-v2 (100% CHARGED ADVANTAGES etc.): BRP mounts these with swiper.
   Statically we lay the slides out as a scrollable card row — the builder
   strips the unmounted-swiper spinner state. */
.canam-product .cmp-carousel-v2 .cmp-carousel-v2__content {
	display: flex;
	gap: 24px;
	overflow-x: scroll;
	padding-bottom: 16px;
	-webkit-overflow-scrolling: touch;
	/* macOS overlay scrollbars hide by default — keep a visible track like
	   BRP's progress bar */
	scrollbar-width: thin;
	scrollbar-color: #000 #d9d9d9;
}
.canam-product .cmp-carousel-v2 .cmp-carousel-v2__content::-webkit-scrollbar {
	height: 6px;
	-webkit-appearance: none;
}
.canam-product .cmp-carousel-v2 .cmp-carousel-v2__content::-webkit-scrollbar-track {
	background: #d9d9d9;
	border-radius: 3px;
}
.canam-product .cmp-carousel-v2 .cmp-carousel-v2__content::-webkit-scrollbar-thumb {
	background: #000;
	border-radius: 3px;
}
.canam-product .cmp-carousel-v2 .cmp-carousel-v2__item {
	flex: 0 0 auto;
	width: min(380px, 85vw) !important;
	height: auto;
}

/* Hotspot section (EQUIP YOUR RIDE): BRP renders this via JS from a JSON
   blob; the builder synthesizes a static image + heading instead. */
.canam-product .canam-hotspot-static {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	padding: 48px 24px;
}
.canam-product .canam-hotspot-static img {
	flex: 1 1 480px;
	max-width: 720px;
	width: 100%;
	height: auto;
}
.canam-product .canam-hotspot-static__info {
	flex: 1 1 300px;
}
.canam-product .canam-hotspot-static__info h2,
.canam-product .canam-hotspot-static__info h3 {
	font-family: 'Can-Am Gothic', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 8px 0;
}
.canam-product .canam-hotspot-static__info h2 { font-size: 3rem; line-height: 1.1; }
.canam-product .canam-hotspot-static__info h3 { font-size: 1.5rem; }

/* DMC theme/Foundation bleed guards: Foundation styles tables and lists
   globally; reset the bits that visibly clash inside the fragment. */
.canam-product table.trim-table {
	margin-bottom: 0;
	border: 0;
}
.canam-product ul {
	list-style: none;
	margin-left: 0;
}