/* ==========================================================================
   Healthcare DME — Archive grid and product card
   --------------------------------------------------------------------------
   Breakpoints, as specified:
     mobile   1 product per row, filters ABOVE the grid
     tablet   3 per row, filters in a left column
     desktop  4 per row, filters in a left column
   ========================================================================== */

/* Filters move to a left column from tablet up, not only on desktop. */
@media (min-width: 768px) {
	.hdme-archive__body { grid-template-columns: 264px minmax(0, 1fr); }
}
@media (min-width: 1280px) {
	.hdme-archive__body { grid-template-columns: 286px minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.hdme-archive__body { grid-template-columns: 1fr; }
	.hdme-archive__aside { order: -1; }
	.hdme-filter-toggle { display: inline-flex; }
	.hdme-archive__filters { display: none; }
	.hdme-archive__filters.is-open { display: block; }
}
@media (min-width: 768px) {
	.hdme-filter-toggle { display: none; }
	.hdme-archive__filters { display: block !important; }
}

/*
 * `display: grid` has to be declared here, not inherited.
 *
 * The base `.hdme-grid` rule lives in layout-home.css, which is only enqueued on
 * the front page. On archives the template-columns applied but `display` never
 * did, so the <ul> stayed a block list and every card rendered full width — one
 * product per row at every breakpoint, measured at 842px wide on desktop while
 * the computed grid-template-columns correctly read repeat(4, …).
 */
.hdme-grid--archive {
	display: grid;
	gap: var(--hdme-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .hdme-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hdme-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .hdme-grid--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Card
   ========================================================================== */

.hdme-pcard {
	display: flex;
	flex-direction: column;
	background: var(--hdme-surface);
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	overflow: hidden;
	transition: border-color var(--hdme-transition), box-shadow var(--hdme-transition), transform var(--hdme-transition);
}
.hdme-pcard:hover {
	border-color: var(--hdme-blue-300);
	box-shadow: var(--hdme-shadow);
	transform: translateY(-2px);
}

.hdme-pcard__media {
	position: relative;
	isolation: isolate;
	display: block;
	padding: var(--hdme-space-3);
	background: var(--hdme-surface);
}
.hdme-pcard__media > a {
	position: relative;
	z-index: 1;
}
.hdme-pcard__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--hdme-grey-25);
	border-radius: var(--hdme-radius);
	mix-blend-mode: multiply;
}

/* ---- Badges ------------------------------------------------------------- */

.hdme-pcard__flag {
	position: absolute;
	top: var(--hdme-space-3);
	z-index: 10;
	padding: 3px var(--hdme-space-3);
	border-radius: var(--hdme-radius-pill);
	font-size: var(--hdme-text-xs);
	font-weight: var(--hdme-weight-bold);
	letter-spacing: 0.02em;
	line-height: 1.5;
	color: #fff;
}
.hdme-pcard__flag--out,
.hdme-pcard__flag--back,
.hdme-pcard__flag--in {
	left: var(--hdme-space-3);
	right: auto;
	width: auto;
	max-width: calc(100% - (2 * var(--hdme-space-3)));
	padding: 2px 0.65rem;
	line-height: 1.35;
	white-space: nowrap;
}
.hdme-pcard__flag--out  { background: #d92d20; }
.hdme-pcard__flag--back { background: #f59e0b; color: #3d2600; }
.hdme-pcard__flag--in   { background: #16834a; }

/* ---- Quick view --------------------------------------------------------- */

.hdme-pcard__quick {
	position: absolute;
	left: 50%;
	bottom: var(--hdme-space-4);
	transform: translate(-50%, 6px);
	z-index: 2;
	min-height: 38px;
	padding: 0 var(--hdme-space-4);
	border: 1px solid var(--hdme-border-strong);
	border-radius: var(--hdme-radius-pill);
	background: rgba(255, 255, 255, 0.96);
	color: var(--hdme-grey-800);
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-semi);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--hdme-transition), transform var(--hdme-transition);
}
.hdme-pcard:hover .hdme-pcard__quick,
.hdme-pcard__quick:focus-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.hdme-pcard__quick:hover {
	background: #fff;
	border-color: var(--hdme-blue-400);
	color: var(--hdme-blue-700);
}
/* There is no hover on a touch screen, so show it quietly instead of never. */
@media (hover: none) {
	.hdme-pcard__quick { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
}

/* ---- Body --------------------------------------------------------------- */

.hdme-pcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--hdme-space-2);
	padding: 0 var(--hdme-space-4) var(--hdme-space-3);
	flex: 1 1 auto;
}
.hdme-pcard__title {
	font-size: var(--hdme-text-sm);
	font-weight: var(--hdme-weight-medium);
	line-height: var(--hdme-leading-snug);
	color: var(--hdme-grey-800);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hdme-pcard__title:hover { color: var(--hdme-blue-700); }

/* ---- Star rating --------------------------------------------------------
   Two stacked runs of ★ with the filled one clipped to a percentage width, so
   a fractional rating (4.3 of 5) renders exactly rather than being rounded to
   the nearest whole star. Characters rather than an SVG data URI: they inherit
   font metrics, scale with the type, and need no encoding. */

.hdme-pcard__rating {
	display: flex;
	align-items: center;
	gap: var(--hdme-space-2);
	min-height: 18px;
}
.hdme-stars {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	white-space: nowrap;
	color: var(--hdme-grey-300);
}
.hdme-stars::before {
	content: "\2605\2605\2605\2605\2605";
}
.hdme-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: #d98b00;
	white-space: nowrap;
}
.hdme-stars__fill::before {
	content: "\2605\2605\2605\2605\2605";
}
.hdme-pcard__reviews {
	font-size: var(--hdme-text-xs);
	color: var(--hdme-text-muted);
}
.hdme-pcard__reviews--none { font-style: italic; }

/* ---- Price -------------------------------------------------------------- */

.hdme-pcard__price {
	margin: 0;
	font-size: 1rem !important;
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
	line-height: 1.25;
}
.hdme-pcard__price .woocommerce-Price-amount,
.hdme-pcard__price bdi,
.hdme-pcard__price .woocommerce-Price-currencySymbol {
	font-size: 1rem !important;
}
.hdme-pcard__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin-top: auto;
}
.hdme-pcard__price del {
	position: relative;
	display: inline-block;
	font-size: 0.78rem !important;
	font-weight: var(--hdme-weight-normal) !important;
	color: #d92d20;
	opacity: 1;
	text-decoration: none !important;
}
.hdme-pcard__price del .woocommerce-Price-amount,
.hdme-pcard__price del bdi,
.hdme-pcard__price del .woocommerce-Price-currencySymbol {
	font-size: inherit !important;
	font-weight: var(--hdme-weight-normal) !important;
}
.hdme-pcard__price del::after {
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 2px;
	background: #d92d20;
	content: "";
	transform: rotate(-6deg);
	transform-origin: center;
}
.hdme-pcard__price ins { text-decoration: none; color: var(--hdme-grey-900); }
.hdme-sale-badge {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0.18rem 0.5rem;
	border-radius: var(--hdme-radius-pill);
	background: #16834a;
	color: #fff;
	font-size: 0.68rem;
	font-weight: var(--hdme-weight-bold);
	line-height: 1.15;
	white-space: nowrap;
}

/* ---- Actions ------------------------------------------------------------ */

.hdme-pcard__actions {
	display: flex;
	flex-direction: column;
	gap: var(--hdme-space-2);
	padding: 0 var(--hdme-space-4) var(--hdme-space-4);
}
.hdme-pcard__form {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: var(--hdme-space-2);
	width: 100%;
}
.hdme-pcard__qty-control {
	display: grid;
	grid-template-columns: 26px 32px 26px;
	width: 84px;
	height: 44px;
	border: 1px solid var(--hdme-blue-200);
	border-radius: var(--hdme-radius);
	background: #fff;
	overflow: hidden;
}
.hdme-pcard__qty-step {
	display: grid;
	place-items: center;
	width: 26px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-800);
	font-size: 1rem;
	font-weight: var(--hdme-weight-bold);
	cursor: pointer;
}
.hdme-pcard__qty-step:hover { background: var(--hdme-blue-100); }
.hdme-pcard__qty {
	width: 32px;
	min-width: 0;
	min-height: 42px;
	height: 42px;
	padding: 0;
	text-align: center;
	font-size: 16px;
	border: 0;
	border-inline: 1px solid var(--hdme-blue-100);
	border-radius: 0;
	background: #fff;
	appearance: textfield;
	-moz-appearance: textfield;
}
.hdme-pcard__qty::-webkit-inner-spin-button,
.hdme-pcard__qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.hdme-pcard__add {
	width: 100% !important;
	min-height: 44px !important;
	white-space: nowrap;
	padding-inline: 0.25rem !important;
	font-size: 0.75rem !important;
}
.hdme-pcard__buy { width: 100% !important; justify-content: center; }
.hdme-pcard__actions .hdme-btn {
	width: auto;
	min-height: 40px;
	align-self: flex-start;
	padding: 0.45rem 0.9rem;
	font-size: var(--hdme-text-sm);
}
.hdme-pcard__cta {
	display: inline-flex;
	width: 100% !important;
	justify-content: center;
}
.hdme-scope .hdme-pcard__qty {
	width: 32px !important;
	min-width: 0 !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 !important;
	border: 0 !important;
	border-inline: 1px solid var(--hdme-blue-100) !important;
	border-radius: 0 !important;
	appearance: textfield !important;
	-webkit-appearance: none !important;
}

@media (max-width: 767px) {
	.hdme-pcard__actions .hdme-btn,
	.hdme-pcard__qty { min-height: var(--hdme-tap-min); }
}

/* ==========================================================================
   Quick-view modal
   ========================================================================== */

.hdme-quickview[hidden] { display: none; }
.hdme-quickview {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: var(--hdme-space-4);
	background: rgba(20, 26, 31, 0.6);
}
.hdme-quickview__panel {
	position: relative;
	width: min(920px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--hdme-surface);
	border-radius: var(--hdme-radius-lg);
	box-shadow: var(--hdme-shadow-lg);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.hdme-quickview__close {
	position: absolute;
	z-index: 3;
	top: var(--hdme-space-3);
	right: var(--hdme-space-3);
	width: var(--hdme-tap-min);
	height: var(--hdme-tap-min);
	display: grid;
	place-items: center;
	border: 1px solid var(--hdme-border);
	border-radius: 50%;
	background: var(--hdme-surface);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.hdme-quickview__close:hover { background: var(--hdme-grey-50); }
.hdme-quickview__body { display: grid; gap: var(--hdme-space-5); }
@media (min-width: 720px) {
	.hdme-quickview__body { grid-template-columns: 1fr 1fr; align-items: start; }
}
.hdme-quickview__body img {
	width: 100%;
	height: auto;
	border-radius: var(--hdme-radius);
	mix-blend-mode: multiply;
}
.hdme-quickview__title {
	margin: 0 0 var(--hdme-space-3);
	font-size: var(--hdme-text-xl);
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
}
.hdme-quickview__price {
	font-size: var(--hdme-text-xl);
	font-weight: var(--hdme-weight-bold);
	margin-bottom: var(--hdme-space-4);
}
.hdme-quickview__loading {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--hdme-space-8);
	color: var(--hdme-text-muted);
}