/**
 * Category bestsellers.
 *
 * Inherits Woodmart's design tokens rather than defining a parallel system:
 * --wd-primary-color, --wd-title-*, --wd-text-*, --wd-brd-radius (0 — the
 * theme is square-cornered throughout), --wd-gap-lg. The v1 stylesheet
 * hardcoded #7b9f35 and rounded corners, which read as a bolt-on widget next
 * to Woodmart's own product grid.
 *
 * The rank number is the single emphatic element; everything else stays quiet.
 */

.hms-bestsellers {
	/*
	 * woocommerce_before_shop_loop places this inside Woodmart's
	 * `.wd-shop-tools` FLEX bar. A flex item defaults to min-width:auto and so
	 * refuses to shrink below its content — the section measured 2472px inside
	 * an 887px parent, which made Swiper believe nothing overflowed. These
	 * three lines are what keep it inside the column.
	 */
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;

	--hms-bs-rule: rgb(0 0 0 / 9%);
	--hms-bs-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M7 0.5l1.7 3.6 3.9 0.5-2.9 2.6 0.8 3.8L7 9.2 3.5 11l0.8-3.8L1.4 4.6l3.9-0.5z' fill='%23000'/%3E%3C/svg%3E");
	margin-block: 0 40px;
	padding-block-end: 34px;
	border-block-end: 1px solid var(--hms-bs-rule);
}

/* ---------- header ---------- */

.hms-bestsellers__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-block-end: 22px;
}

.hms-bestsellers__title {
	margin: 0;
	color: var(--wd-title-color, #242424);
	font-family: var(--wd-title-font, "Poppins", sans-serif);
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: var(--wd-title-font-weight, 600);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.hms-bestsellers__subtitle {
	margin: 0;
	color: var(--wd-text-color, rgb(118 118 118));
	font-family: var(--wd-text-font, "Lato", sans-serif);
	font-size: 14px;
	line-height: 1.5;
	max-width: 62ch;
}

/* ---------- carousel: one row, Woodmart's own Swiper ---------- */

.hms-bestsellers__carousel {
	position: relative;
	overflow: hidden;

	/*
	 * Swiper measures its container to decide whether slides overflow. Without
	 * an explicit width the flex track sized the container to its CONTENT
	 * (2472px for 12 slides), so it always reported "everything fits", locked
	 * itself and hid the arrows. Pin it to the available width.
	 */
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.hms-bestsellers__track {
	display: flex;
	gap: var(--wd-gap-lg, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hms-bestsellers__item {
	flex: 0 0 auto;
	width: 186px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Swiper positions slides itself and drives spacing through spaceBetween, so
 * the flex gap must not double up once it takes over.
 */
.hms-bestsellers__carousel.is-swiper .hms-bestsellers__track {
	gap: 0;
	width: auto;
	max-width: none;
}

/*
 * Fallback when Swiper is unavailable: a native scroll-snap strip. Still one
 * row, still swipeable — just without arrow buttons.
 */
.hms-bestsellers__carousel:not(.is-swiper) .hms-bestsellers__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-block-end: 6px;
}

.hms-bestsellers__carousel:not(.is-swiper) .hms-bestsellers__item {
	scroll-snap-align: start;
}

/* ---------- arrows ---------- */

/*
 * Woodmart's own `button` rules win on specificity and reset position to
 * relative, which dropped these into normal flow as grey boxes below the row.
 * Scoping to the carousel raises specificity above the theme's bare element
 * selector without resorting to !important.
 */
.hms-bestsellers__carousel .hms-bestsellers__nav,
.hms-bestsellers__nav {
	position: absolute;
	inset-block-start: calc(50% - 42px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--hms-bs-rule);
	border-radius: var(--wd-brd-radius, 0);
	background: #fff;
	color: var(--wd-title-color, #242424);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hms-bestsellers__nav:hover,
.hms-bestsellers__nav:focus-visible {
	background: var(--wd-primary-color, #83b735);
	border-color: var(--wd-primary-color, #83b735);
	color: #fff;
}

.hms-bestsellers__nav:focus-visible {
	outline: 2px solid var(--wd-primary-color, #83b735);
	outline-offset: 2px;
}

.hms-bestsellers__nav--prev {
	inset-inline-start: 6px;
}

.hms-bestsellers__nav--next {
	inset-inline-end: 6px;
}

/* Quiet by default; the arrows appear on hover or keyboard focus. */
.hms-bestsellers__carousel.is-swiper .hms-bestsellers__nav {
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	box-shadow: 0 1px 6px rgb(0 0 0 / 12%);
}

.hms-bestsellers__carousel.is-swiper:hover .hms-bestsellers__nav,
.hms-bestsellers__carousel.is-swiper:focus-within .hms-bestsellers__nav {
	opacity: 1;
}

/* Hidden when everything fits, when Swiper is absent, or when disabled —
   also while hovered (a tap leaves touch screens in :hover). Visibility, not
   opacity: Woodmart forces opacity .6 !important on disabled buttons. */
.hms-bestsellers__carousel:not(.is-swiper) .hms-bestsellers__nav,
.hms-bestsellers__carousel.is-swiper.is-locked .hms-bestsellers__nav,
.hms-bestsellers__carousel.is-swiper .hms-bestsellers__nav.swiper-button-disabled {
	visibility: hidden;
	pointer-events: none;
}

/* Touch screens swipe; the arrows would only cover the cards. */
@media (hover: none) {
	.hms-bestsellers__carousel .hms-bestsellers__nav {
		display: none;
	}
}

/* ---------- card ---------- */

.hms-bestsellers__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--wd-brd-radius, 0);
}

.hms-bestsellers__card-image {
	position: relative;
	overflow: hidden;
	background: #fff;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--hms-bs-rule);
	border-radius: var(--wd-brd-radius, 0);
}

.hms-bestsellers__card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	padding: 12px;
	box-sizing: border-box;
	transition: transform 0.25s ease;
}

.hms-bestsellers__card:hover .hms-bestsellers__card-image img,
.hms-bestsellers__card:focus-visible .hms-bestsellers__card-image img {
	transform: scale(1.04);
}

/* The one bold element: sales position, set in the title face. */
.hms-bestsellers__rank {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	min-width: 30px;
	padding: 3px 8px;
	background: var(--wd-primary-color, #83b735);
	color: #fff;
	font-family: var(--wd-title-font, "Poppins", sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.hms-bestsellers__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	padding-block-start: 11px;
}

.hms-bestsellers__card-title {
	margin: 0;
	color: var(--wd-entities-title-color, #333);
	font-family: var(--wd-entities-title-font, "Poppins", sans-serif);
	font-size: 14px;
	font-weight: var(--wd-entities-title-font-weight, 500);
	line-height: 1.4;
	transition: color 0.15s ease;

	/* Two lines keeps every card in a row the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hms-bestsellers__card:hover .hms-bestsellers__card-title,
.hms-bestsellers__card:focus-visible .hms-bestsellers__card-title {
	color: var(--wd-entities-title-color-hover, rgb(51 51 51 / 65%));
}

/* ---------- rating ---------- */

.hms-bestsellers__card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wd-text-font, "Lato", sans-serif);
	font-size: 12px;
	color: var(--wd-text-color, rgb(118 118 118));
}

/* Star row drawn as a masked overlay so half-stars are exact. */
.hms-bestsellers__stars {
	position: relative;
	display: inline-block;
	width: 68px;
	height: 12px;
	flex: none;
	background: currentColor;
	opacity: 0.22;
	-webkit-mask: var(--hms-bs-star) repeat-x left center / 13.6px 12px;
	mask: var(--hms-bs-star) repeat-x left center / 13.6px 12px;
}

.hms-bestsellers__stars > span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	background: var(--wd-alternative-color, #fbbc34);
	-webkit-mask: var(--hms-bs-star) repeat-x left center / 13.6px 12px;
	mask: var(--hms-bs-star) repeat-x left center / 13.6px 12px;
}

.hms-bestsellers__card-price {
	margin-block-start: auto;
	padding-block-start: 3px;
	color: var(--wd-title-color, #242424);
	font-family: var(--wd-text-font, "Lato", sans-serif);
	font-size: 15px;
	font-weight: 700;
}

.hms-bestsellers__card-price del {
	margin-inline-end: 5px;
	font-weight: 400;
	opacity: 0.5;
}

/* ---------- trust row ---------- */

.hms-bestsellers__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--wd-text-font, "Lato", sans-serif);
	font-size: 13px;
	color: var(--wd-text-color, rgb(118 118 118));
}

.hms-bestsellers__trust-item {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.hms-bestsellers__check {
	flex: none;
	color: var(--wd-primary-color, #83b735);
}

/* ---------- focus + motion ---------- */

.hms-bestsellers__card:focus-visible {
	outline: 2px solid var(--wd-primary-color, #83b735);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hms-bestsellers__card-image img,
	.hms-bestsellers__card-title {
		transition: none;
	}

	.hms-bestsellers__card:hover .hms-bestsellers__card-image img {
		transform: none;
	}
}

@media (max-width: 480px) {
	.hms-bestsellers__item {
		width: 148px;
	}

	.hms-bestsellers__carousel:not(.is-swiper) .hms-bestsellers__track {
		gap: var(--wd-gap-sm, 10px);
	}
}