/**
 * Video Reels — homepage section (front end)
 * Compact "Story row" layout matching the HotCard reference: small 9:16
 * cards with a transparent wrapper and a thin orange border only (no
 * orange fill/background/frame behind the poster), dark centered
 * captions below (never inside a colored block), and a row that hugs
 * its own content instead of stretching/leaving blank carousel space.
 * Matches the site's existing carousel container width (max-width
 * 1400px, 20px side padding) and orange accent (#f6623c).
 */

.ax-reels-section {
	margin: 16px 0;
}

.ax-reels-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
}

.ax-reels-header {
	margin-bottom: 12px;
}

.ax-reels-title {
	font-size: 20px;
	font-weight: 700;
	color: #333333;
	font-family: 'FiraGO-SemiBold', sans-serif;
	margin: 0;
}

/* Hugs the row's own content (fit-content) instead of always spanning the
   full container — with few Reels this keeps the nav arrows right next
   to the actual cards instead of floating in empty space at the far
   edge of the section, and keeps the row left-aligned. */
.ax-reels-wrapper {
	position: relative;
	width: fit-content;
	max-width: 100%;
	/* No overflow:hidden here — the track (below) is the actual scroll
	   region and clips its own content; hiding overflow on the wrapper
	   too would clip the nav arrows, which intentionally sit partly
	   outside it (.prev/.next use a negative offset). */
}

.ax-reels-track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px;
}

.ax-reels-track::-webkit-scrollbar {
	display: none;
}

/* Card: compact 9:16 poster + short caption below, fixed aspect-ratio to
   prevent CLS. Sized like a Story/Reels preview, not a product card.
   `.ax-reel-card` is a <button> for accessibility, which makes it a
   target of mu-plugins/axalia-custom.css's sitewide button branding
   rule (`.woocommerce .button, button, input[type="button"], ... {
   background-color:#f6623c!important; border-color:#f6623c!important }`,
   ~line 264) — a real, intentional rule for actual UI buttons
   (Add to Cart, form submits, etc.) that also happens to match every
   plain <button>. It's !important, so it silently overrides the
   background:none below regardless of load order — the orange never
   actually disappears and reappears; it's present in the gap+title
   strip beneath the poster from the very first paint, just easy to miss
   at a glance until you look for it. Fixed here (only for this Reels
   selector, not by touching that sitewide rule) by using !important
   ourselves — .ax-reel-card's class selector outranks a bare `button`
   element selector even within the !important tier, so this wins. */
.ax-reel-card {
	flex: 0 0 156px;
	width: 156px;
	scroll-snap-align: start;
	background: transparent !important;
	border: none !important;
	outline: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font: inherit;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}

.ax-reel-card:focus-visible {
	outline: 2px solid #f6623c;
	outline-offset: 3px;
	border-radius: 20px;
}

/* Same sitewide button rule (see comment above) also has a `button:hover`
   variant that sets a darker orange !important — guard the hover state too. */
.ax-reel-card:hover {
	background: transparent !important;
	border-color: transparent !important;
}

/* Outer ring only — transparent background, thin orange border, sitting
   OUTSIDE the poster with a visible gap (padding) rather than flush
   against it, like an Instagram-story ring. The gap area itself has no
   fill (the page's white shows through); overflow:hidden here is just a
   containment safety net, since the poster is padded fully inside it
   and never actually reaches the ring. */
.ax-reel-poster-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	overflow: hidden;
	box-sizing: border-box;
	background: transparent;
	border: 1.5px solid #f6623c;
	padding: 5px;
	transition: transform 0.2s ease;
}

.ax-reel-card:hover .ax-reel-poster-wrap {
	transform: translateY(-2px);
}

/* The poster itself: its own smaller radius (nested inside the ring's),
   and its own neutral placeholder background/fill for while it loads —
   previously this lived on the wrap, but now the wrap's own background
   is the gap, so the placeholder moves to the image it's standing in for. */
.ax-reel-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 14px;
	background: #e9e9e9;
}

/* Small and subtle — a play hint, not a button that covers the poster. */
.ax-reel-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f6623c;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.ax-reel-play svg {
	width: 14px;
	height: 14px;
	margin-left: 1px;
}

/* Dark text on the page's white background — never inside a colored
   block — centered under its card, clamped to two lines. */
.ax-reel-card-title {
	font-size: 12px;
	line-height: 1.3;
	color: #333333;
	font-family: 'FiraGO-SemiBold', sans-serif;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
}

/* Desktop nav arrows, hugging the actual row edges (see .ax-reels-wrapper).
   Also a <button>, also caught by the same sitewide button rule described
   above on .ax-reel-card — !important here for the same reason. */
.ax-reels-nav {
	position: absolute;
	top: 43%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 50%;
	cursor: pointer;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666666;
	transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.ax-reels-nav:hover {
	background: #f6623c !important;
	border-color: #f6623c !important;
	color: #ffffff;
}

.ax-reels-nav.prev {
	left: -14px;
}

.ax-reels-nav.next {
	right: -14px;
}

.ax-reels-nav:disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Set by JS when the row's content doesn't overflow the viewport — i.e.
   there is nothing to scroll to, so no arrow (not even a disabled one)
   should render. Covers the "single Reel" and "few Reels" cases. */
.ax-reels-wrapper.no-scroll .ax-reels-nav {
	display: none !important;
}

@media (max-width: 992px) {
	.ax-reels-nav {
		display: none !important;
	}
}

/* Mobile: several compact cards + a peek of the next, matching the
   HotCard story row. A single ~76px card width (with an 8px gap) works
   out to roughly 3 full cards + a peek at 320px and ~4 full cards + a
   peek at 375-430px, per the reference. */
@media (max-width: 767px) {
	.ax-reels-container {
		padding: 0 16px;
	}
	.ax-reel-card {
		flex-basis: 76px;
		width: 76px;
		gap: 5px;
	}
	.ax-reels-track {
		gap: 8px;
		scroll-snap-type: x mandatory;
	}
	.ax-reels-title {
		font-size: 17px;
	}
	.ax-reel-poster-wrap {
		border-radius: 14px;
		padding: 3px;
	}
	.ax-reel-poster {
		border-radius: 10px;
	}
	.ax-reel-play {
		width: 24px;
		height: 24px;
	}
	.ax-reel-play svg {
		width: 10px;
		height: 10px;
	}
	.ax-reel-card-title {
		font-size: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1200px) {
	.ax-reel-card {
		flex-basis: 140px;
		width: 140px;
	}
}

/* ===================== Fullscreen viewer / modal ===================== */

/* The theme's mobile bottom nav (.mobile-bottom-nav), mobile cart bar
   (.ax-mobile-cart-bar), and sticky site header (.fs-header /
   .fs-header-wrapper) are all set to z-index 2147483645-2147483648 —
   at or near the maximum possible value — specifically so they always
   sit above everything else on the page (header.css even calls its own
   rule a "nuclear option" / "last resort enforcement"). No z-index on
   this modal can ever reliably beat that, so instead all three are
   hidden outright while the popup is open (the body class is toggled in
   reels-front.js openAt()/close()). !important is needed since these
   rules are gated behind their own responsive display overrides (and in
   the header's case, are themselves !important), which this must
   outrank regardless of viewport width. */
body.ax-reels-modal-active .mobile-bottom-nav,
body.ax-reels-modal-active .ax-mobile-cart-bar,
body.ax-reels-modal-active .fs-header,
body.ax-reels-modal-active .fs-header-wrapper {
	display: none !important;
}

.ax-reels-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

.ax-reels-modal.is-open {
	display: flex;
}

.ax-reels-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.94);
}

.ax-reels-modal-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* This flex container spans the whole modal (so its content can be
	   centered), which would otherwise sit above the backdrop in z-index
	   and swallow every click meant to close the modal by clicking
	   outside the video. Turn clicks back on only for the actual
	   interactive pieces below. */
	pointer-events: none;
}

.ax-reels-modal-video-wrap,
.ax-reels-modal-controls,
.ax-reels-modal-btn,
.ax-reels-modal-product-btn {
	pointer-events: auto;
}

/* Sized as a true popup card on every screen size — shrunk in from the
   edges on both axes (not just letterboxed top/bottom while running
   edge-to-edge in width) so the dark backdrop is always visibly framing
   it, on mobile included. min()/calc() picks whichever axis is the
   tighter constraint for the current viewport shape, so the same rule
   naturally adapts between mobile portrait and desktop landscape. */
.ax-reels-modal-video-wrap {
	position: relative;
	height: min(90vh, calc(85vw * 16 / 9));
	max-height: 100vh;
	width: min(85vw, calc(90vh * 9 / 16));
	max-width: 100vw;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.ax-reels-modal-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	display: block;
}

.ax-reels-modal-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 18px 18px;
	color: #ffffff;
	font-family: 'FiraGO-SemiBold', sans-serif;
	font-size: 15px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.ax-reels-modal-title:empty {
	display: none;
}

/* When a product button is showing, give the title extra bottom padding
   so the (opaque) button doesn't sit on top of the title text. */
.ax-reels-modal.has-product-btn .ax-reels-modal-title {
	padding-bottom: 76px;
}

.ax-reels-modal-product-btn {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: block;
	text-align: center;
	background: #f6623c;
	color: #ffffff !important;
	font-family: 'FiraGO-SemiBold', sans-serif;
	font-size: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(246, 98, 60, 0.4);
}

.ax-reels-modal-controls {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}

.ax-reels-modal-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ax-reels-modal-btn:hover {
	background: rgba(246, 98, 60, 0.85);
	border-color: #f6623c;
}

.ax-reels-modal-btn:focus-visible {
	outline: 2px solid #f6623c;
	outline-offset: 2px;
}

.ax-reels-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
}

.ax-reels-modal-prev,
.ax-reels-modal-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.ax-reels-modal-prev {
	left: 16px;
}

.ax-reels-modal-next {
	right: 16px;
}

@media (max-width: 767px) {
	.ax-reels-modal-prev,
	.ax-reels-modal-next {
		display: none; /* mobile uses vertical swipe instead */
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-reels-track {
		scroll-behavior: auto;
	}
	.ax-reel-card,
	.ax-reel-poster-wrap {
		transition: none !important;
	}
}