/* ==========================================================================
   Qurbani Animal Shares — frontend styles
   --------------------------------------------------------------------------
   Design system:
     primary green   #1f7a3a   accent for available / progress / CTAs
     amber           #c47b00   partially donated state
     neutral 800     #1d2327   headings & strong text
     neutral 600     #50575e   body
     neutral 200     #e4e4e7   borders
     surface         #ffffff
     surface alt     #f9f8f4   page sections / soft backgrounds
   All single-page rules are scoped to body.qas-single-product to avoid
   bleeding into other WooCommerce products.
   ========================================================================== */

:root {
	/* Configurable settings — overridden by inline <style> from QAS_Frontend
	   based on saved settings. Defaults match Helper::default_settings(). */
	--qas-primary-color:   #006db8;
	--qas-secondary-color: #dbeafe;
	--qas-accent-color:    #005494;

	/* Legacy variable names alias the configurable ones so existing rules
	   inherit the user's chosen palette automatically. */
	--qas-green:        var(--qas-primary-color);
	--qas-green-soft:   var(--qas-secondary-color);

	--qas-amber:        #c47b00;
	--qas-amber-soft:   #fcf3df;
	--qas-grey-900:     #1d2327;
	--qas-grey-700:     #2c2f33;
	--qas-grey-500:     #50575e;
	--qas-grey-300:     #c3c4c7;
	--qas-grey-200:     #e4e4e7;
	--qas-grey-100:     #f1f0eb;
	--qas-surface-alt:  #f9f8f4;
	--qas-radius:       12px;
	--qas-radius-sm:    8px;
	--qas-shadow:       0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
	--qas-shadow-hover: 0 6px 24px rgba(0,0,0,0.08);
}

/* Inline SVG icon size */
.qas-svg-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--qas-green);
}
.qas-svg-icon svg { width: 100%; height: 100%; }

/* ==========================================================================
   Status pills
   ========================================================================== */
.qas-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.4;
}
.qas-status-available         { background: var(--qas-green-soft);  color: var(--qas-green); }
.qas-status-partially_donated { background: var(--qas-amber-soft);  color: var(--qas-amber); }
.qas-status-donated           { background: #f0f0f1;                color: #50575e; }

/* ==========================================================================
   SINGLE PAGE
   Scoped to body.qas-single-product to keep regular WC products untouched
   ========================================================================== */
body.qas-single-product .product_title.qas-product-title {
	font-size: clamp(1.6rem, 2.5vw, 2.1rem);
	margin: 0 0 14px;
	line-height: 1.25;
	color: var(--qas-grey-900);
}

body.qas-single-product .qas-summary-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--qas-grey-200);
}
body.qas-single-product .qas-price-block {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
body.qas-single-product .qas-price-amount {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--qas-grey-900);
}
body.qas-single-product .qas-price-amount bdi { color: inherit; }
body.qas-single-product .qas-price-suffix {
	color: var(--qas-grey-500);
	font-size: 14px;
}

/* Detail cards grid */
body.qas-single-product .qas-detail-grid {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}
body.qas-single-product .qas-detail-card {
	background: var(--qas-surface-alt);
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
body.qas-single-product .qas-detail-icon  { color: var(--qas-green); margin-bottom: 2px; }
body.qas-single-product .qas-detail-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--qas-grey-500);
	font-weight: 600;
}
body.qas-single-product .qas-detail-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--qas-grey-900);
	word-break: break-word;
}

/* Progress section */
body.qas-single-product .qas-progress {
	background: var(--qas-surface-alt);
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	padding: 14px 16px;
	margin: 0 0 20px;
}
body.qas-single-product .qas-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 14px;
	gap: 8px;
	flex-wrap: wrap;
}
body.qas-single-product .qas-progress-meta strong { color: var(--qas-grey-900); }
body.qas-single-product .qas-progress-meta span   { color: var(--qas-grey-500); }
body.qas-single-product .qas-progress .qas-progress-bar {
	background: #e6e8e6;
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
}
body.qas-single-product .qas-progress .qas-progress-bar span {
	display: block;
	height: 100%;
	background: var(--qas-primary-color);
	transition: width 0.4s ease;
	border-radius: 999px;
}
body.qas-single-product .qas-progress-donated .qas-progress-bar span {
	background: #888;
}

/* Donation widget */
body.qas-single-product .qas-donation-widget,
.qas-donation-widget {
	background: #fff;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius);
	padding: 18px;
	box-shadow: var(--qas-shadow);
}
.qas-quick-shares {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.qas-quick-btn {
	border: 1px solid var(--qas-grey-200);
	background: #fff;
	color: var(--qas-grey-700);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.2;
}
.qas-quick-btn:hover {
	border-color: var(--qas-green);
	color: var(--qas-green);
}
.qas-quick-btn.is-active {
	background: var(--qas-green);
	color: #fff;
	border-color: var(--qas-green);
}

.qas-share-selector {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.qas-selector-label {
	font-weight: 600;
	color: var(--qas-grey-900);
	flex: 1 1 100%;
	margin: 0 0 4px;
}

/* Stepper */
.qas-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	overflow: hidden;
	background: #fff;
}
.qas-stepper button {
	background: var(--qas-surface-alt);
	border: 0;
	width: 38px;
	font-size: 18px;
	font-weight: 600;
	color: var(--qas-grey-700);
	cursor: pointer;
	transition: background 0.15s ease;
	line-height: 1;
}
.qas-stepper button:hover { background: var(--qas-green-soft); color: var(--qas-green); }
.qas-stepper input.qas-quantity {
	border: 0;
	border-left: 1px solid var(--qas-grey-200);
	border-right: 1px solid var(--qas-grey-200);
	width: 60px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	background: #fff;
	padding: 8px 4px;
	color: var(--qas-grey-900);
	-moz-appearance: textfield;
}
.qas-stepper input.qas-quantity::-webkit-outer-spin-button,
.qas-stepper input.qas-quantity::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.qas-stepper input.qas-quantity:focus {
	outline: 2px solid var(--qas-green);
	outline-offset: -2px;
}
.qas-available-tag {
	font-size: 12px;
	color: var(--qas-grey-500);
	background: var(--qas-surface-alt);
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 500;
}

/* Names fields */
.qas-names-wrap { margin-bottom: 16px; }
.qas-names-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--qas-grey-900);
}
.qas-names {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.qas-name-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.qas-name-field label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--qas-grey-500);
	font-weight: 600;
}
.qas-name-field input {
	padding: 10px 12px;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	font-size: 14px;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qas-name-field input:focus {
	outline: none;
	border-color: var(--qas-green);
	box-shadow: 0 0 0 3px var(--qas-green-soft);
}
.qas-names-help {
	font-size: 12px;
	color: var(--qas-grey-500);
	margin-top: 8px;
	margin-bottom: 0;
}

/* Total + submit */
.qas-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0 12px;
	border-top: 1px dashed var(--qas-grey-200);
	margin-bottom: 14px;
}
.qas-total-label  { color: var(--qas-grey-500); font-size: 14px; }
.qas-running-total-value { font-size: 22px; font-weight: 700; color: var(--qas-green); }
.qas-running-total-value bdi { color: inherit; }

.qas-submit-btn,
body.qas-single-product .qas-submit-btn {
	width: 100%;
	background: var(--qas-green) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	padding: 14px 20px !important;
	border-radius: var(--qas-radius-sm) !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	text-transform: none !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
}
.qas-submit-btn:hover,
body.qas-single-product .qas-submit-btn:hover {
	background: var(--qas-accent-color) !important;
	color: #fff !important;
}

/* Donated card (single page) */
.qas-donated-card {
	background: var(--qas-surface-alt);
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius);
	padding: 28px 22px;
	text-align: center;
}
.qas-donated-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--qas-grey-900);
	margin: 0 0 8px;
	letter-spacing: 0.5px;
}
.qas-donated-msg {
	color: var(--qas-grey-500);
	margin: 0;
	font-size: 14px;
}

/* ==========================================================================
   Trust section: "Your Qurbani Includes"
   ========================================================================== */
.qas-trust {
	margin: 36px 0 24px;
	padding: 28px 22px;
	background: var(--qas-surface-alt);
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius);
}
.qas-trust-title {
	font-size: 1.4rem;
	margin: 0 0 18px;
	color: var(--qas-grey-900);
	text-align: center;
}
.qas-trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.qas-trust-item {
	background: #fff;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.qas-trust-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--qas-green-soft);
	color: var(--qas-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}
.qas-trust-icon .qas-svg-icon { width: 20px; height: 20px; }
.qas-trust-item-title {
	font-size: 14px;
	margin: 0;
	color: var(--qas-grey-900);
	font-weight: 600;
}
.qas-trust-item-text {
	font-size: 13px;
	color: var(--qas-grey-500);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   Custom product tabs (replaces WC tabs on qurbani singles)
   ========================================================================== */
body.qas-single-product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--qas-grey-200);
	padding: 0;
	margin: 0 0 20px;
}
body.qas-single-product .woocommerce-tabs ul.tabs::before { display: none; }
body.qas-single-product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.qas-single-product .woocommerce-tabs ul.tabs li a {
	padding: 12px 18px !important;
	color: var(--qas-grey-500) !important;
	font-weight: 600 !important;
	border-bottom: 2px solid transparent !important;
	transition: color 0.15s ease, border-color 0.15s ease !important;
	text-decoration: none !important;
}
body.qas-single-product .woocommerce-tabs ul.tabs li.active a,
body.qas-single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--qas-green) !important;
	border-bottom-color: var(--qas-green) !important;
}
body.qas-single-product .woocommerce-Tabs-panel { padding: 8px 0; }
body.qas-single-product .woocommerce-Tabs-panel > h2:first-child { display: none; }

.qas-tab-content { color: var(--qas-grey-700); line-height: 1.65; }
.qas-tab-content p { margin: 0 0 1em; }
.qas-tab-content ul { padding-left: 1.2em; }

.qas-steps { padding-left: 0; counter-reset: qas-step; list-style: none; margin: 0; }
.qas-steps li {
	counter-increment: qas-step;
	padding: 14px 16px 14px 56px;
	margin: 0 0 10px;
	background: var(--qas-surface-alt);
	border-radius: var(--qas-radius-sm);
	position: relative;
	color: var(--qas-grey-700);
	border: 1px solid var(--qas-grey-200);
}
.qas-steps li::before {
	content: counter(qas-step);
	position: absolute;
	left: 14px;
	top: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--qas-green);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qas-faqs { margin: 0; }
.qas-faqs dt {
	font-weight: 600;
	color: var(--qas-grey-900);
	padding: 12px 0 6px;
	border-top: 1px solid var(--qas-grey-200);
}
.qas-faqs dt:first-child { border-top: 0; }
.qas-faqs dd {
	margin: 0 0 4px;
	color: var(--qas-grey-500);
	font-size: 14px;
	line-height: 1.6;
}

/* Hide WC product meta (categories/tags/sku block) on qurbani singles */
body.qas-single-product .product_meta,
body.qas-single-product .posted_in {
	display: none !important;
}

/* Tighten WC's stock label on qurbani singles (we render our own progress) */
body.qas-single-product .stock { display: none !important; }

/* ==========================================================================
   ARCHIVE / LIST
   ========================================================================== */
.qas-archive {
	margin: 1.5em 0;
	color: var(--qas-grey-700);
}
.qas-archive-header {
	text-align: center;
	margin-bottom: 24px;
}
.qas-archive-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin: 0 0 8px;
	color: var(--qas-grey-900);
}
.qas-archive-intro {
	color: var(--qas-grey-500);
	max-width: 640px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
}

/* ==========================================================================
   Filter / sort bar — premium custom select styling
   --------------------------------------------------------------------------
   Layout: CSS grid, all controls on one row at desktop, stacks at ≤ 768px.
   The grid columns are sized so the search input takes the largest share
   and the dropdowns share the remaining width evenly.

   NOTE on dropdowns:
   The CLOSED state of <select> is fully restyled here — custom border,
   rounded corners, chevron, focus ring. The OPENED option list is rendered
   by the browser/OS itself and cannot be CSS-styled (this is by spec, not
   a plugin limitation). Building a custom JS dropdown was deliberately
   avoided to preserve native accessibility (keyboard nav, screen readers,
   mobile picker UI). Closed-state styling is what gives the bar its
   "premium" look across breakpoints.
   ========================================================================== */

.qas-archive-controls {
	display: grid;
	grid-template-columns:
		minmax(280px, 3.2fr)   /* search — ~45% of bar width */
		minmax(130px, 1fr)     /* animal type */
		minmax(130px, 1fr)     /* location */
		minmax(120px, 0.9fr)   /* status */
		minmax(140px, 1fr);    /* sort */
	column-gap: 10px;
	row-gap: 8px;
	align-items: end;
	padding: 14px 16px;
	margin-bottom: 24px;
	background: #fff;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius);
	box-shadow: var(--qas-shadow);
}

/* When location dropdown is absent (no animals have a location yet) the
   grid will still render correctly because the column is implicit; missing
   children just collapse their column. */

.qas-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.qas-control-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
	color: var(--qas-grey-500);
}

/* Custom select — pill-shaped premium chip.
   Closed state: 40px tall, fully rounded (pill), soft filled background,
   custom chevron. Choices.js wraps this <select> on init to render a fully
   custom opened option list (see .choices.qas-choice rules below). */
.qas-control select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 40px;
	padding: 8px 36px 8px 16px;
	border: 1px solid var(--qas-grey-200);
	border-radius: 999px;
	background-color: var(--qas-surface-alt);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--qas-grey-900);
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	box-sizing: border-box;
	font-family: inherit;
}

/* Strip the IE/Edge native arrow */
.qas-control select::-ms-expand {
	display: none;
}

.qas-control select:hover {
	border-color: var(--qas-grey-300);
	background-color: #fff;
}

.qas-control select:focus,
.qas-control select:focus-visible {
	outline: none;
	border-color: var(--qas-primary-color);
	background-color: #fff;
	box-shadow: 0 0 0 3px var(--qas-secondary-color);
}

.qas-control select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Apply button — matches select height/radius for a cohesive toolbar */
.qas-controls-apply {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 24px;
	min-height: 46px;
	background: var(--qas-primary-color);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	font-family: inherit;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.qas-controls-apply:hover,
.qas-controls-apply:focus-visible {
	background: var(--qas-accent-color);
	color: #fff;
	outline: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.qas-controls-apply:active {
	transform: translateY(1px);
}

/* Card grid — desktop 3 cols, tablet 2 cols, mobile 1 col */
.qas-grid {
	display: grid;
	gap: 24px;
	margin: 1em 0;
}
.qas-cols-1 { grid-template-columns: 1fr; }
.qas-cols-2 { grid-template-columns: repeat(2, 1fr); }
.qas-cols-3 { grid-template-columns: repeat(3, 1fr); }
.qas-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
	.qas-cols-3, .qas-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.qas-cols-2, .qas-cols-3, .qas-cols-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Card
   ========================================================================== */
.qas-card {
	background: #fff;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: var(--qas-shadow);
}
.qas-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--qas-shadow-hover);
}
.qas-card.is-donated { opacity: 0.95; }

/* Image with floating availability badge */
.qas-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--qas-grey-100);
}
.qas-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.qas-card:hover .qas-card-media img { transform: scale(1.04); }

/* Floating availability badge — top-right, color shifts with inventory state */
.qas-card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.3;
	background: #fff;
	color: var(--qas-grey-900);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	backdrop-filter: saturate(150%);
}
.qas-card-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
/* Plenty available — primary color treatment, white pill */
.qas-card-badge-available {
	color: var(--qas-primary-color);
	background: #fff;
}
.qas-card-badge-available::before { background: var(--qas-primary-color); }

/* Low stock (= 2 shares) — amber pulse */
.qas-card-badge-low {
	color: #92400e;
	background: #fef3c7;
}
.qas-card-badge-low::before {
	background: var(--qas-amber);
	animation: qas-pulse 1.5s ease-in-out infinite;
}

/* Last share — red, urgent */
.qas-card-badge-last {
	color: #b32d2e;
	background: #fde8e8;
}
.qas-card-badge-last::before {
	background: #b32d2e;
	animation: qas-pulse 1.2s ease-in-out infinite;
}

/* Donated — neutral, slightly translucent */
.qas-card-badge-donated {
	color: var(--qas-grey-700);
	background: rgba(255, 255, 255, 0.92);
}
.qas-card-badge-donated::before { background: var(--qas-grey-300); }

@keyframes qas-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.4); }
}

/* Card body — clean vertical rhythm */
.qas-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.qas-card-title {
	font-size: 18px;
	margin: 0;
	line-height: 1.3;
	font-weight: 700;
}
.qas-card-title a { color: var(--qas-grey-900); text-decoration: none; }
.qas-card-title a:hover { color: var(--qas-primary-color); }

.qas-card-location {
	color: var(--qas-grey-500);
	font-size: 13px;
	margin: 0;
}

.qas-card-price {
	margin: 8px 0 4px;
	display: flex;
	align-items: baseline;
}
.qas-card-price-amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--qas-grey-900);
}
.qas-card-price-amount bdi { color: inherit; }
.qas-card-price-suffix {
	color: var(--qas-grey-500);
	font-size: 14px;
	font-weight: 500;
}

/* Progress: text first, bar below */
.qas-card-progress {
	margin: 8px 0 14px;
}
.qas-card-progress-text {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--qas-grey-500);
	font-weight: 500;
}
.qas-card-progress .qas-progress-bar {
	background: var(--qas-grey-100);
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
}
.qas-card-progress .qas-progress-bar span {
	display: block;
	height: 100%;
	background: var(--qas-primary-color);
	transition: width 0.4s ease;
	border-radius: 999px;
}
.qas-card.is-donated .qas-progress-bar span { background: #888; }

/* CTA — Donate Now button or disabled Donated state */
.qas-card-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--qas-primary-color);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--qas-radius-sm);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s ease;
	border: 0;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	line-height: 1.3;
}
.qas-card-cta:hover,
.qas-card-cta:focus {
	background: var(--qas-accent-color);
	color: #fff;
}
.qas-card-cta-disabled,
.qas-card-cta:disabled {
	background: var(--qas-grey-200);
	color: var(--qas-grey-500);
	cursor: not-allowed;
	pointer-events: none;
}

/* Pagination */
.qas-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0 8px;
}
.qas-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--qas-grey-200);
	border-radius: var(--qas-radius-sm);
	text-decoration: none;
	color: var(--qas-grey-700);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
}
.qas-pagination .page-numbers:hover {
	border-color: var(--qas-green);
	color: var(--qas-green);
}
.qas-pagination .page-numbers.current {
	background: var(--qas-green);
	color: #fff;
	border-color: var(--qas-green);
}
.qas-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
}

/* Empty state */
.qas-empty {
	padding: 40px 24px;
	background: var(--qas-surface-alt);
	border: 1px dashed var(--qas-grey-300);
	border-radius: var(--qas-radius);
	color: var(--qas-grey-500);
	text-align: center;
	font-size: 15px;
}
.qas-empty p { margin: 0; }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 768px) {
	body.qas-single-product .qas-summary-top {
		flex-direction: column;
		align-items: flex-start;
	}
	body.qas-single-product .qas-detail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Filter bar mobile rules now live in the v1.4.4 grid block below. */
	.qas-control select { width: 100%; }
}

@media (max-width: 480px) {
	body.qas-single-product .qas-detail-grid {
		grid-template-columns: 1fr 1fr;
	}
	body.qas-single-product .qas-detail-card {
		padding: 10px;
	}
	.qas-trust-list {
		grid-template-columns: 1fr;
	}
	.qas-quick-shares { gap: 6px; }
	.qas-quick-btn { padding: 7px 11px; font-size: 12px; }
}

/* ==========================================================================
   v1.2.2 — single-page grid layout (60/40, info-under-image, sticky donate)
   --------------------------------------------------------------------------
   Layout target:
     +------------------+----------+
     |     gallery      |          |
     +------------------+          |
     |    info-wrap     |  donate  |  ← donate is sticky on desktop
     +------------------+ (sticky) |
     |      trust       |          |
     +------------------+----------+
     |              tabs           |
     +-----------------------------+
   On mobile (≤ 900px) everything stacks: gallery → info → donate → trust → tabs.
   ========================================================================== */

body.qas-single-product div.product {
	display: grid !important;
	grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) !important;
	grid-template-areas:
		"gallery donate"
		"info    donate"
		"trust   donate"
		"tabs    donate" !important;
	column-gap: 32px !important;
	row-gap: 24px !important;
	max-width: 1200px !important;
	margin: 1.5em auto !important;
	padding: 0 1em !important;
	box-sizing: border-box !important;
	align-items: start !important;
}

body.qas-single-product div.product > .woocommerce-product-gallery {
	grid-area: gallery !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	min-width: 0 !important;
}
body.qas-single-product div.product > .qas-info-wrap {
	grid-area: info !important;
	margin: 0 !important;
	min-width: 0;
}
body.qas-single-product div.product > .qas-trust {
	grid-area: trust !important;
	margin: 0 !important;
	min-width: 0;
}
body.qas-single-product div.product > .summary,
body.qas-single-product div.product > div.summary,
body.qas-single-product div.product > .summary.entry-summary {
	grid-area: donate !important;
	align-self: start !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
}
/* Tabs / related / upsells now live in the LEFT column so they align with
   the gallery + info + trust width. They no longer span under the donate box. */
body.qas-single-product div.product > .woocommerce-tabs,
body.qas-single-product div.product > .related,
body.qas-single-product div.product > .upsells {
	grid-area: tabs !important;
	margin: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Sticky donation box on desktop only (≥ 1024px). The grid container has
   align-items: start, so sticky is bounded by the column track height —
   it stops naturally when the left-column content (which is taller, since
   it now also contains the tabs) ends.

   The offset is exposed as the CSS variable --qas-sticky-offset so themes
   with taller fixed headers can override it without editing this file:

       body.qas-single-product { --qas-sticky-offset: 140px; }
*/
@media (min-width: 1024px) {
	body.qas-single-product {
		--qas-sticky-offset: 120px;
	}
	body.qas-single-product div.product > .summary,
	body.qas-single-product div.product > div.summary,
	body.qas-single-product div.product > .summary.entry-summary {
		position: sticky !important;
		top: var(--qas-sticky-offset, 120px) !important;
	}
	/* If the WP admin bar is showing, push the sticky offset further. */
	body.admin-bar.qas-single-product {
		--qas-sticky-offset: 150px;
	}
}

/* Tablet (901–1023px): keep the two-column grid but no sticky. */
@media (max-width: 1023px) and (min-width: 901px) {
	body.qas-single-product div.product > .summary {
		position: static !important;
		top: auto !important;
	}
}

/* Mobile (≤ 900px): single column, gallery → info → donate → trust → tabs. */
@media (max-width: 900px) {
	body.qas-single-product div.product {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"gallery"
			"info"
			"donate"
			"trust"
			"tabs" !important;
		column-gap: 0 !important;
		row-gap: 18px !important;
	}
	body.qas-single-product div.product > .summary {
		position: static !important;
		top: auto !important;
	}
}

/* ----- Image: clean fixed aspect, no zoom, no overlay ----- */
body.qas-single-product .woocommerce-product-gallery {
	background: #f1f0eb !important;
	border-radius: var(--qas-radius) !important;
	overflow: hidden !important;
	opacity: 1 !important;
	position: relative !important;
}
body.qas-single-product .woocommerce-product-gallery__wrapper {
	margin: 0 !important;
	padding: 0 !important;
}
body.qas-single-product .woocommerce-product-gallery__image,
body.qas-single-product .woocommerce-product-gallery__image--placeholder {
	background: #f1f0eb !important;
	aspect-ratio: 4 / 3 !important;
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.qas-single-product .woocommerce-product-gallery__image > a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	cursor: default !important;
	text-decoration: none !important;
}
body.qas-single-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
	border-radius: 0 !important;
	max-width: 100% !important;
	max-height: none !important;
}
body.qas-single-product .woocommerce-product-gallery__image:hover img {
	transform: none !important;
}

/* Gallery thumbnails (when extra gallery images exist) */
body.qas-single-product .woocommerce-product-gallery .flex-control-thumbs,
body.qas-single-product .woocommerce-product-gallery ol.flex-control-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	background: #fff !important;
	padding: 10px !important;
	margin: 0 !important;
	list-style: none !important;
}
body.qas-single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: calc(25% - 6px) !important;
	margin: 0 !important;
	list-style: none !important;
	float: none !important;
}
body.qas-single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 6px !important;
	cursor: pointer !important;
	opacity: 0.7;
	transition: opacity 0.15s ease;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
body.qas-single-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
body.qas-single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* Hide the magnifying-glass trigger and any zoom containers. */
body.qas-single-product .woocommerce-product-gallery__trigger,
body.qas-single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger,
body.qas-single-product a.zoomImg,
body.qas-single-product img.zoomImg,
body.qas-single-product .zoomContainer,
body.qas-single-product .easyzoom-flyout,
body.qas-single-product .pswp {
	display: none !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* ----- Info wrap container: cards + progress under image ----- */
body.qas-single-product .qas-info-wrap {
	background: transparent;
}
body.qas-single-product .qas-info-wrap > .product_title.qas-product-title {
	margin: 8px 0 12px !important;
}
body.qas-single-product .qas-info-wrap .qas-summary-top {
	margin-bottom: 18px !important;
	padding-bottom: 16px !important;
}

/* Right column: donation widget needs a touch more breathing room */
body.qas-single-product div.product > .summary .qas-donation-widget {
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Trust section adjusted for left-column placement (less prominent than full-width) */
body.qas-single-product .qas-trust {
	margin: 0 !important;
	clear: none;
}

/* ----- Suppress breadcrumbs (theme-agnostic) ----- */
body.qas-single-product .woocommerce-breadcrumb,
body.qas-single-product nav.breadcrumb,
body.qas-single-product nav.breadcrumbs,
body.qas-single-product .breadcrumbs,
body.qas-single-product #breadcrumbs,
body.qas-single-product .breadcrumb-trail,
body.qas-single-product .yoast-breadcrumb,
body.qas-single-product .rank-math-breadcrumb,
body.qas-single-product .seopress-breadcrumb,
body.qas-single-product .nav-breadcrumb,
body.qas-single-product .ocean-breadcrumb,
body.qas-single-product .site-breadcrumbs,
body.qas-single-product .page-header .breadcrumb {
	display: none !important;
}

/* ----- Suppress WC categories / meta / SKU / stock / rating ----- */
body.qas-single-product .product_meta,
body.qas-single-product .posted_in,
body.qas-single-product .tagged_as,
body.qas-single-product .sku_wrapper,
body.qas-single-product .product-meta,
body.qas-single-product .product_categories,
body.qas-single-product .product-categories,
body.qas-single-product .product-cat,
body.qas-single-product .stock,
body.qas-single-product p.stock,
body.qas-single-product .availability,
body.qas-single-product .out-of-stock,
body.qas-single-product .woocommerce-product-rating,
body.qas-single-product .star-rating,
body.qas-single-product .woocommerce-review-link {
	display: none !important;
}

/* Hide any duplicated title rendered by theme/page templates. Our title has
   the .qas-product-title class — anything else gets hidden so users don't
   see two H1s or a theme-injected prefix. */
body.qas-single-product .summary > .product_title:not(.qas-product-title),
body.qas-single-product .entry-title:not(.qas-product-title),
body.qas-single-product header.entry-header h1:not(.qas-product-title),
body.qas-single-product header.page-header h1:not(.qas-product-title),
body.qas-single-product .page-header__title:not(.qas-product-title),
body.qas-single-product .post-title:not(.qas-product-title) {
	display: none !important;
}

/* ----- Optional tag for Qurbani names ----- */
.qas-optional-tag,
.qas-optional {
	font-size: 11px;
	font-weight: 500;
	color: var(--qas-grey-500);
	margin-left: 6px;
	letter-spacing: 0.2px;
	text-transform: none;
}

/* ----- Mobile/responsive polish for donation widget ----- */
@media (max-width: 540px) {
	.qas-donation-widget { padding: 14px !important; }
	.qas-quick-shares { gap: 6px; }
	.qas-quick-btn { padding: 7px 10px; font-size: 12px; flex: 1 1 calc(50% - 4px); text-align: center; }
	.qas-share-selector {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.qas-stepper { align-self: flex-start; }
	.qas-available-tag { align-self: flex-start; }
	.qas-names {
		grid-template-columns: 1fr;
	}
	body.qas-single-product .product_title.qas-product-title {
		font-size: 1.4rem !important;
	}
	body.qas-single-product .qas-detail-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* ==========================================================================
   Archive card: legacy v1.2.x rules removed in v1.3.2 — markup no longer
   uses .qas-card-availability or progress-meta justify-between; the new
   floating .qas-card-badge handles availability messaging.
   ========================================================================== */

/* ==========================================================================
   v1.3.0 — mobile centering fixes
   --------------------------------------------------------------------------
   Force every direct descendant of the qurbani product container to honor
   box-sizing and never overflow horizontally. Some themes set negative
   margins or transform: translateX on global elements that bleed into our
   layout — these rules neutralise that without affecting other pages.
   ========================================================================== */

body.qas-single-product div.product,
body.qas-single-product div.product *,
.qas-archive,
.qas-archive *,
.qas-single-shortcode,
.qas-single-shortcode * {
	box-sizing: border-box;
}

body.qas-single-product div.product {
	overflow-x: clip;
}

@media (max-width: 768px) {
	body.qas-single-product div.product {
		padding-left: 16px !important;
		padding-right: 16px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
	}
	.qas-archive {
		padding-left: 16px;
		padding-right: 16px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	.qas-donation-widget,
	.qas-info-wrap > *,
	body.qas-single-product .qas-trust {
		max-width: 100%;
	}
	/* Quick share buttons should wrap nicely without overflowing */
	.qas-quick-shares {
		flex-wrap: wrap;
	}
	/* Inputs, selects, and stepper inside cards never exceed container */
	body.qas-single-product input[type="number"],
	body.qas-single-product input[type="text"],
	body.qas-single-product select {
		max-width: 100%;
	}
}

/* Failsafe: prevent root-level horizontal scroll on a qurbani single page.
   Scoped to the body class so it cannot leak into other pages. */
body.qas-single-product {
	overflow-x: hidden;
}

/* ==========================================================================
   v1.3.1 — mobile conversion-focused optimizations (≤ 768px only)
   --------------------------------------------------------------------------
   Goal: shrink the pre-form scroll distance dramatically. Detail cards
   become inline pills, spacing tightens, progress block compresses, and a
   slim sticky "Donate Now" bar pins to the bottom of the viewport.
   Desktop layout (> 768px) stays exactly as-is.
   ========================================================================== */

@media (max-width: 768px) {

	/* --- Tighten outer spacing on the product container --- */
	body.qas-single-product div.product {
		row-gap: 12px !important;
		margin-top: 0.75em !important;
		margin-bottom: 0.75em !important;
	}

	/* --- Compact title, price, status row --- */
	body.qas-single-product .product_title.qas-product-title {
		font-size: 1.35rem !important;
		margin: 8px 0 8px !important;
		line-height: 1.25 !important;
	}
	body.qas-single-product .qas-summary-top {
		margin: 0 0 10px !important;
		padding: 0 0 10px !important;
		gap: 10px !important;
	}
	body.qas-single-product .qas-price-amount {
		font-size: 1.45rem;
	}

	/* --- Detail cards → inline compact pills --- */
	body.qas-single-product .qas-info-wrap > .qas-detail-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin: 0 0 10px !important;
		grid-template-columns: none !important;
	}
	body.qas-single-product .qas-info-wrap > .qas-detail-grid .qas-detail-card {
		flex-direction: row !important;
		align-items: center !important;
		gap: 4px !important;
		padding: 5px 10px !important;
		background: var(--qas-surface-alt) !important;
		border: 1px solid var(--qas-grey-200) !important;
		border-radius: 999px !important;
		font-size: 12px !important;
	}
	/* Hide the icon and the uppercase label on mobile; pill = value only,
	   prefixed by the label name when useful (e.g. "Code: COW-001"). */
	body.qas-single-product .qas-info-wrap > .qas-detail-grid .qas-detail-icon {
		display: none !important;
	}
	body.qas-single-product .qas-info-wrap > .qas-detail-grid .qas-detail-label {
		font-size: 11px !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		color: var(--qas-grey-500) !important;
		font-weight: 500 !important;
		margin: 0 !important;
	}
	body.qas-single-product .qas-info-wrap > .qas-detail-grid .qas-detail-label::after {
		content: ":";
		margin-right: 2px;
	}
	body.qas-single-product .qas-info-wrap > .qas-detail-grid .qas-detail-value {
		font-size: 12px !important;
		font-weight: 600 !important;
		color: var(--qas-grey-900) !important;
		word-break: normal !important;
	}

	/* --- Compact progress section --- */
	body.qas-single-product .qas-info-wrap > .qas-progress {
		padding: 10px 12px !important;
		margin: 0 0 12px !important;
	}
	body.qas-single-product .qas-info-wrap > .qas-progress .qas-progress-meta {
		font-size: 13px !important;
		gap: 8px !important;
		margin-bottom: 6px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	body.qas-single-product .qas-info-wrap > .qas-progress .qas-progress-meta strong {
		font-size: 13px;
	}
	body.qas-single-product .qas-info-wrap > .qas-progress .qas-progress-bar {
		height: 6px !important;
	}

	/* --- Donation widget: tighten internal padding to maximise above-fold visibility --- */
	body.qas-single-product .qas-donation-widget {
		padding: 14px !important;
		margin-bottom: 12px;
	}
	body.qas-single-product .qas-quick-shares {
		margin-bottom: 12px !important;
	}
	body.qas-single-product .qas-share-selector {
		margin-bottom: 12px !important;
	}
	body.qas-single-product .qas-names-wrap {
		margin-bottom: 12px !important;
	}
	body.qas-single-product .qas-total-row {
		padding-top: 10px !important;
		margin-bottom: 10px !important;
	}

	/* Reserve room at the bottom so the sticky bar never covers content. */
	body.qas-single-product {
		padding-bottom: 76px !important;
	}

	/* --- Trust section: compact on mobile --- */
	body.qas-single-product .qas-trust {
		padding: 16px 14px !important;
	}
	body.qas-single-product .qas-trust-title {
		font-size: 1.15rem !important;
		margin-bottom: 12px !important;
	}
	body.qas-single-product .qas-trust-item {
		padding: 12px !important;
	}

	/* --- Tabs become an accordion on mobile (JS adds .qas-tabs-as-accordion) --- */
	body.qas-single-product .qas-tabs-as-accordion ul.tabs {
		display: none !important;
	}
	body.qas-single-product .qas-tabs-as-accordion .qas-acc-panel {
		display: block !important;
		opacity: 1 !important;
		border: 1px solid var(--qas-grey-200);
		border-radius: var(--qas-radius-sm);
		margin-bottom: 8px;
		background: #fff;
		padding: 0 !important;
	}
	body.qas-single-product .qas-acc-header {
		all: unset;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 16px;
		font-weight: 600;
		font-size: 14px;
		color: var(--qas-grey-900);
		cursor: pointer;
		box-sizing: border-box;
	}
	body.qas-single-product .qas-acc-header:focus-visible {
		outline: 2px solid var(--qas-primary-color);
		outline-offset: -2px;
	}
	body.qas-single-product .qas-acc-icon {
		font-size: 20px;
		font-weight: 400;
		color: var(--qas-grey-500);
		line-height: 1;
		transition: transform 0.2s ease;
	}
	body.qas-single-product .qas-acc-panel.is-open .qas-acc-icon {
		transform: rotate(45deg); /* + becomes × */
		color: var(--qas-primary-color);
	}
	/* Collapse panel body except when open. We target everything *after* the header. */
	body.qas-single-product .qas-acc-panel > .qas-tab-content {
		max-height: 0;
		overflow: hidden;
		padding: 0 16px;
		transition: max-height 0.25s ease, padding 0.25s ease;
	}
	body.qas-single-product .qas-acc-panel.is-open > .qas-tab-content {
		max-height: 2000px;
		padding: 0 16px 16px;
	}
}

/* ==========================================================================
   Mobile sticky donate bar
   --------------------------------------------------------------------------
   Hidden by default; shown on ≤ 768px. JS adds .is-hidden when the donation
   form is in view (no need for a duplicate CTA at that point).
   ========================================================================== */
.qas-mobile-sticky-bar {
	display: none;
}

@media (max-width: 768px) {
	.qas-mobile-sticky-bar {
		display: flex !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px;
		background: #fff;
		border-top: 1px solid var(--qas-grey-200);
		box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	.qas-mobile-sticky-bar.is-hidden {
		transform: translateY(100%);
		opacity: 0;
		pointer-events: none;
	}
	.qas-msb-price {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		min-width: 0;
	}
	.qas-msb-amount {
		font-size: 16px;
		font-weight: 700;
		color: var(--qas-grey-900);
	}
	.qas-msb-amount bdi { color: inherit; }
	.qas-msb-suffix {
		font-size: 11px;
		color: var(--qas-grey-500);
	}
	.qas-msb-cta {
		flex-shrink: 0;
		background: var(--qas-primary-color);
		color: #fff !important;
		padding: 11px 22px;
		border-radius: var(--qas-radius-sm);
		font-weight: 700;
		font-size: 14px;
		text-decoration: none !important;
		box-shadow: 0 2px 6px rgba(0,0,0,0.12);
		transition: background 0.15s ease;
		white-space: nowrap;
	}
	.qas-msb-cta:hover,
	.qas-msb-cta:focus {
		background: var(--qas-accent-color);
		color: #fff !important;
	}

	/* iOS safe-area inset support */
	@supports (padding-bottom: env(safe-area-inset-bottom)) {
		.qas-mobile-sticky-bar {
			padding-bottom: calc(10px + env(safe-area-inset-bottom));
		}
		body.qas-single-product {
			padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
		}
	}
}

/* Mobile badge polish — slightly smaller, allow text to wrap on tiny screens */
@media (max-width: 480px) {
	.qas-card-badge {
		font-size: 11px;
		padding: 5px 10px;
		max-width: calc(100% - 20px);
		top: 10px;
		right: 10px;
	}
}

/* ==========================================================================
   v1.3.4 — single-page floating gallery badge
   --------------------------------------------------------------------------
   The gallery badge reuses the .qas-card-badge classes for state styling
   so archive cards and the single page stay visually in lockstep. Position
   is overridden because the single page image is larger.
   ========================================================================== */
.qas-gallery-badge {
	top: 16px !important;
	right: 16px !important;
	font-size: 13px;
	padding: 7px 14px;
	z-index: 5;
}
@media (max-width: 600px) {
	.qas-gallery-badge {
		top: 12px !important;
		right: 12px !important;
		font-size: 12px;
		padding: 6px 12px;
	}
}

/* ==========================================================================
   v1.3.5 — donation panel header (title + price moved into right column)
   --------------------------------------------------------------------------
   Title and price now live at the top of the donation widget. This balances
   the desktop two-column layout (no more empty space above the donate box)
   and naturally cascades to mobile, where the donate box sits below the
   image, info pills, and progress.
   ========================================================================== */

.qas-donate-header {
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--qas-grey-200);
}

.qas-donate-header-title {
	margin: 0 0 6px !important;
	font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--qas-grey-900) !important;
	letter-spacing: -0.01em;
}

.qas-donate-header-price {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
	line-height: 1.1;
}
.qas-dh-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--qas-primary-color);
}
.qas-dh-amount bdi { color: inherit; }
.qas-dh-suffix {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--qas-grey-500);
	white-space: nowrap;
}

.qas-donate-header-meta {
	margin: 6px 0 0;
	color: var(--qas-grey-500);
	font-size: 13px;
}

/* Inside a "donated" panel the header sits above the centered Donated card */
.qas-donation-widget-donated .qas-donate-header {
	border-bottom: 1px solid var(--qas-grey-200);
	margin-bottom: 16px;
	padding-bottom: 14px;
	text-align: left;
}
.qas-donation-widget-donated .qas-dh-amount {
	color: var(--qas-grey-700);
}

/* Mobile: scale header down slightly so it doesn't dominate the donation box */
@media (max-width: 600px) {
	.qas-donate-header {
		margin-bottom: 14px;
		padding-bottom: 12px;
	}
	.qas-donate-header-title {
		font-size: 1.35rem !important;
	}
	.qas-dh-amount   { font-size: 1.3rem; }
	.qas-dh-suffix   { font-size: 0.95rem; }
}

/* The summary-top block under the image is no longer rendered on the single
   page; this rule is a belt-and-braces hide in case a theme/plugin re-injects
   it through render_summary_top() being called externally. */
body.qas-single-product .qas-info-wrap > .qas-summary-top,
body.qas-single-product .qas-info-wrap > .product_title.qas-product-title {
	display: none !important;
}

/* ==========================================================================
   v1.3.7 — WooCommerce shop loop integration
   --------------------------------------------------------------------------
   When the plugin is rendering qurbani animals inside WC's shop loop (for
   blocks/Elementor/shop page), the parent <li class="product qas-loop-item">
   carries theme styling we want to strip so the card sits cleanly.
   ========================================================================== */

li.product.qas-loop-item,
.wc-block-grid__product.qas-loop-item,
.products .product.qas-loop-item {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	text-align: left !important;
}
li.product.qas-loop-item::before,
li.product.qas-loop-item::after {
	display: none !important;
}
/* Some themes apply a hover transform on the <li>; suppress it so our card's
   own hover effect is the only one. */
li.product.qas-loop-item:hover {
	transform: none !important;
	box-shadow: none !important;
}
/* Our card inside the loop should fill the cell width */
li.product.qas-loop-item > .qas-card,
.wc-block-grid__product.qas-loop-item > .qas-card {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* ==========================================================================
   v1.4.3 / v1.4.4 — search input + actions + mobile stack
   --------------------------------------------------------------------------
   Search input visually matches the custom selects (44px height, primary-
   color focus ring, soft border). The leading magnifier icon is absolutely
   positioned within the wrap. The reset link sits on its own grid row
   below the controls, taking the full width.
   ========================================================================== */

.qas-control-search {
	min-width: 0;
}

body .qas-archive-controls .qas-search-input-wrap {
	position: relative;
	display: block;
	width: 100%;
}

body .qas-archive-controls .qas-search-icon {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--qas-grey-500);
	pointer-events: none;
	z-index: 2;
}

body .qas-archive-controls input[type="search"].qas-search-input,
body .qas-archive-controls .qas-search-input {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 40px !important;
	padding: 8px 16px 8px 42px !important;
	border: 1px solid var(--qas-grey-200) !important;
	border-radius: 999px !important;
	background-color: var(--qas-surface-alt) !important;
	background-image: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--qas-grey-900) !important;
	line-height: 1.3 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	box-sizing: border-box !important;
	font-family: inherit !important;
	margin: 0 !important;
	box-shadow: none;
}
body .qas-archive-controls .qas-search-input::placeholder {
	color: var(--qas-grey-500) !important;
	opacity: 1;
}
body .qas-archive-controls .qas-search-input:hover {
	border-color: var(--qas-grey-300) !important;
	background-color: #fff !important;
}
body .qas-archive-controls .qas-search-input:focus,
body .qas-archive-controls .qas-search-input:focus-visible {
	outline: none !important;
	border-color: var(--qas-primary-color) !important;
	background-color: #fff !important;
	box-shadow: 0 0 0 3px var(--qas-secondary-color) !important;
}
body .qas-archive-controls .qas-search-input::-webkit-search-decoration,
body .qas-archive-controls .qas-search-input::-webkit-search-cancel-button,
body .qas-archive-controls .qas-search-input::-webkit-search-results-button,
body .qas-archive-controls .qas-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Action group (no Apply button anymore — kept for legacy markup) */
.qas-controls-actions {
	display: flex;
	align-items: end;
	min-width: 0;
}

/* Reset link sits as a separate grid row spanning every column.
   Anchored to the right edge on desktop, full width on mobile. Hidden
   when no filters are active (toggled by JS). */
.qas-controls-reset {
	grid-column: 1 / -1;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--qas-grey-500);
	text-decoration: none;
	padding: 4px 0 0;
	margin-top: 2px;
	transition: color 0.15s ease;
	white-space: nowrap;
	cursor: pointer;
}
.qas-controls-reset:hover,
.qas-controls-reset:focus-visible {
	color: var(--qas-primary-color);
	text-decoration: underline;
	outline: none;
}

/* Mobile: 2-column filter grid.
     Search   ──────────────  (full width)
     Type     │  Location
     Status   │  Sort By
*/
@media (max-width: 768px) {
	.qas-archive-controls {
		grid-template-columns: 1fr 1fr !important;
		column-gap: 10px !important;
		row-gap: 12px !important;
		padding: 14px !important;
	}
	.qas-control-search {
		grid-column: 1 / -1; /* search spans both columns */
	}
}

/* Very narrow: collapse to single column */
@media (max-width: 420px) {
	.qas-archive-controls {
		grid-template-columns: 1fr !important;
	}
	.qas-control-search {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   v1.4.6+ — Choices.js custom theme for filter dropdowns
   --------------------------------------------------------------------------
   Choices.js renders a wrapper around each <select>; we restyle that wrapper
   so both the closed pill and the opened option list match the plugin's
   design language. The native <select> stays in the DOM for accessibility
   and form submission.
   ========================================================================== */

/* Reset Choices' base container so it sits flush in the grid cell */
.qas-archive-controls .choices {
	margin-bottom: 0;
	width: 100%;
}

/* Closed pill — match our select chip exactly. Choices' own border styles
   are overridden with !important so the chip dimensions stay identical
   regardless of focus/open state. */
body .qas-archive-controls .choices__inner {
	min-height: 40px !important;
	padding: 8px 36px 8px 16px !important;
	background-color: var(--qas-surface-alt) !important;
	border: 1px solid var(--qas-grey-200) !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--qas-grey-900) !important;
	line-height: 1.3 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	font-family: inherit;
	display: flex !important;
	align-items: center !important;
	box-shadow: none;
}
body .qas-archive-controls .choices:hover .choices__inner {
	border-color: var(--qas-grey-300) !important;
	background-color: #fff !important;
}
body .qas-archive-controls .choices.is-focused .choices__inner,
body .qas-archive-controls .choices.is-open .choices__inner {
	border-color: var(--qas-primary-color) !important;
	background-color: #fff !important;
	box-shadow: 0 0 0 3px var(--qas-secondary-color);
}

/* The selected value text */
.qas-archive-controls .choices__list--single {
	padding: 0;
}
.qas-archive-controls .choices__list--single .choices__item {
	color: var(--qas-grey-900);
	font-weight: 500;
}

/* Custom chevron — replace Choices' default down-arrow */
.qas-archive-controls .choices[data-type*="select-one"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 12px;
	height: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(-50%);
	transition: transform 0.18s ease;
	pointer-events: none;
}
.qas-archive-controls .choices[data-type*="select-one"].is-open::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Hide the legacy Choices clear "x" button — we don't show clear icons */
.qas-archive-controls .choices__button {
	display: none !important;
}

/* Opened option list — overrides Choices defaults with explicit !important
   on the highlighted-item background to guarantee the soft secondary tint
   wins over Choices' default solid blue highlight. */
body .qas-archive-controls .choices__list--dropdown,
body .qas-archive-controls .choices__list[aria-expanded] {
	margin-top: 6px;
	border: 1px solid var(--qas-grey-200);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	z-index: 50;
}
body .qas-archive-controls .choices__list--dropdown .choices__list,
body .qas-archive-controls .choices__list[aria-expanded] .choices__list {
	max-height: 280px;
	padding: 6px;
}
body .qas-archive-controls .choices__list--dropdown .choices__item,
body .qas-archive-controls .choices__list[aria-expanded] .choices__item {
	padding: 9px 14px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--qas-grey-900) !important;
	cursor: pointer;
	line-height: 1.3 !important;
	background: transparent !important;
	transition: background 0.1s ease, color 0.1s ease;
}
body .qas-archive-controls .choices__list--dropdown .choices__item--selectable.is-highlighted,
body .qas-archive-controls .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: var(--qas-secondary-color) !important;
	color: var(--qas-primary-color) !important;
	font-weight: 600 !important;
}
body .qas-archive-controls .choices__list--dropdown .choices__item--selectable[data-select-text]::after,
body .qas-archive-controls .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
	display: none !important;
}

/* The currently selected option in the dropdown panel */
body .qas-archive-controls .choices__item.is-selected,
body .qas-archive-controls .choices__item.choices__item--selectable.is-selected {
	color: var(--qas-primary-color) !important;
	font-weight: 600 !important;
	background: transparent !important;
}

/* Make sure the wrapper expands to fill its grid cell */
.qas-archive-controls .qas-control .choices {
	width: 100%;
}

/* Hide the native <select> when Choices has wrapped it */
.qas-archive-controls .choices > select.choices__input {
	display: none !important;
}

/* ==========================================================================
   v1.4.8 — AJAX live filtering helpers
   ========================================================================== */

.qas-results-wrap {
	position: relative;
	min-height: 120px;
}
.qas-results-wrap.is-loading .qas-grid,
.qas-results-wrap.is-loading .qas-empty,
.qas-results-wrap.is-loading .qas-pagination {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.qas-results-loading {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--qas-grey-200);
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	font-size: 13px;
	color: var(--qas-grey-700);
}

.qas-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--qas-grey-200);
	border-top-color: var(--qas-primary-color);
	border-radius: 50%;
	animation: qas-spin 0.7s linear infinite;
	display: inline-block;
}
@keyframes qas-spin {
	to { transform: rotate(360deg); }
}

/* Reset link inside the toolbar — sits as a small grid row below */
.qas-controls-reset[hidden] { display: none !important; }