.trade-hub-slider .wd-carousel-item {
	height: auto;
	display: flex;
}

.trade-hub-slider .trade-hub-card {
	width: 100%;
}

/* Arrows — exact glyph from the Figma design instead of the theme's icon font. */
.trade-hub-slider .wd-nav-arrows {
	--wd-arrow-bg: transparent;
	--wd-arrow-bg-hover: transparent;
	--wd-arrow-brd: none;
	--wd-arrow-shadow: none;
	--wd-arrow-radius: 0;
	--wd-arrow-size: 22px;
	--wd-arrow-offset-h: 24px;
}

.trade-hub-slider .wd-prev .wd-arrow-inner:after,
.trade-hub-slider .wd-next .wd-arrow-inner:after {
	content: '' !important;
	display: block;
	width: 14px;
	height: 20px;
	font-size: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 30' fill='none'%3E%3Cpath d='M18.2 2.5 3.7 13.6c-1.7 1.3-1.6 3.8.2 4.9l14.3 9' stroke='%230B6A75' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.trade-hub-slider .wd-next .wd-arrow-inner:after {
	transform: scaleX(-1);
}

.trade-hub-slider .wd-disabled .wd-arrow-inner:after {
	opacity: .35;
}

/*
 * Woodmart hides the arrows by default on desktop and only reveals them on
 * :hover of the carousel container (base.min.css / lib-swiper-arrows.min.css,
 * `.wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow{opacity:0}`).
 * Keep them always visible instead.
 *
 * Woodmart also slides them in from the sides on that same hover — resting
 * transform is `translateX(±30px)` (off to the side, hidden by opacity:0),
 * hover sets `translateY(0)` (back in place) — same property, so whichever
 * rule wins replaces it outright. Pin both states to no offset so the
 * arrows stay fixed in place instead of sliding in.
 */
.trade-hub-slider .wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow {
	opacity: 1;
	pointer-events: unset;
	transform: none !important;
}

/* Pagination dots — exact size/color/gap from the Figma design. */
.trade-hub-slider .wd-nav-pagin-wrap {
	--wd-pagin-size: 11px;
	--wd-pagin-gap: 11px;
	--wd-pagin-brd: none;
	--wd-pagin-bg: #D9D9D9;
	--wd-pagin-bg-hover: #D9D9D9;
	--wd-pagin-bg-act: #1A484E;
	--wd-pagin-brd-color-act: #1A484E;
	margin-top: 32px;
	justify-content: center;
}

/*
 * Mobile — reveal a slice of the next card so it's clear the row scrolls
 * (Figma: node 1912-1491).
 *
 * Woodmart's carousel sets the mobile slide count via an inline custom
 * property (--wd-col-sm, e.g. "1") that its Swiper init script reads
 * straight off getComputedStyle() to build `slidesPerView`. With a fixed
 * count of 1 every slide fills the full width and there's nothing left
 * to peek. Swiper natively supports `slidesPerView: 'auto'` — sizing each
 * slide by its own CSS width — so overriding the property to the literal
 * string "auto" (only possible with !important, since it's competing with
 * an inline style) switches it into that mode; the width below then
 * becomes the actual peek amount.
 */
.trade-hub-slider .wd-carousel.wd-grid {
	--wd-col-sm: auto !important;
}

/*
 * A percentage width here would resolve against .wd-carousel-wrap, which in
 * `slidesPerView: 'auto'` mode is itself sized to fit the total width of all
 * slides — a circular reference that produces a bogus in-between size.
 * `vw` is resolved against the viewport instead, sidestepping that.
 * Woodmart's own `.wd-carousel-item` rule sets flex-basis/max-width via
 * `calc(100% / var(--wd-col))`, which needs beating with !important too.
 */
@media (max-width: 768.98px) {
	.trade-hub-slider .wd-carousel-item {
		flex: 0 0 85vw !important;
		max-width: 85vw !important;
	}
}