/**
 * QM Set Cards 0.3.2
 *
 * Everything hangs off body.qmsc, added by qm_set_cards_body_class().
 *
 * SPECIFICITY BUDGET (measured, see 00-ARCHITECTURE-REPORT.md section 5.4). The rules we have
 * to beat, all of them !important:
 *   (0,5,2)  .et_pb_gutters3.et_right_sidebar.woocommerce-page ul.products li.product { width:20%!important }
 *   (0,4,2)  .woocommerce-page ul.products li.product:nth-child(n) { width:28.333%!important; float:left!important }   768-980
 *   (0,4,2)  .woocommerce-page ul.products li.product:nth-child(n) { width:45.25%!important }                          <=767
 *   (0,4,2)  .woocommerce-page ul.products li.product:nth-child(n) { width:100%!important }                            <=479
 *   (0,4,2)  .woocommerce ul.products li.product .price { color:#ffb456!important }
 *   (0,4,2)  .woocommerce ul.products li.product .price/.price del { color:#666!important; margin:0!important }
 *   (0,4,2)  .woocommerce ul.products li.product .button { width:100%!important }
 *   (0,3,4)  .woocommerce ul.products li.product a img { box-shadow:none!important; margin:0 0 9px!important }
 * Our card selector is
 *   body.qmsc.woocommerce-page ul.products li.product.qmsc-card   ->  (0,5,3)
 * which outranks every one of them, and we still add !important because an inline !important
 * inside a media query cannot be beaten by specificity alone.
 *
 * Two 0.3.0 notes on that budget:
 *   - the section 2b :has() rules land at (0,4,4) on li.product -- :has() contributes the
 *     specificity of its most specific argument, li.qmsc-card = (0,1,1) -- so they still clear
 *     the (0,4,2) inline float/width block.
 *   - .button{width:100%!important} is the one rule we no longer fight: 0.3.0 wants the CTA at
 *     the full width of the purchase column, which is exactly what that declaration produces.
 *
 * BREAKPOINTS are Divi's and only Divi's: >=981, 768-980, <=767, <=479 (report section 5.2).
 * Introducing a 992 or 1024 band would create a range where Divi's rules and ours half-apply.
 *
 * 0.3.0 LAYOUT: three columns above 767px -- media | body | purchase. The purchase column is a
 * sibling of the body column (not nested inside it, as the 0.2.0 buy row was) and is the
 * same fixed width on every card, so prices and CTAs line up vertically down the page.
 *
 * 0.3.0-a (client feedback, 28 Aug) -- CSS only, no PHP or template change:
 *   - killed WooCommerce's ul clearfix pseudos on our lists (they were becoming grid/flex ITEMS:
 *     an empty first cell in the item lists and a 16px indent before the first trust badge)
 *   - media 220->190 and purchase 210->192 to widen the content column; title 24->22,
 *     subtitle 15->14, list items 14.5->13.5 so phrases stop breaking mid-line
 *   - purchase column centres its contents vertically (the CTA is no longer pinned to the bottom,
 *     so CTAs no longer share a baseline across cards of differing height -- deliberate)
 *   - trust badges stack when the CONTENT COLUMN is narrow (@container, not viewport: the same
 *     screen gives a 411px column on a sidebar archive and a 682px column on /products/)
 *   - <=767 trust badges stack start-aligned, and the purchase block centres
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 *
 * Structure and rhythm follow public-site-prep/sets-landscape-mockup.html
 * (design draft, 2 Jul 2026). Colour and type deliberately do NOT: the draft's
 * teal/Avenir palette appears nowhere on qmagnets.com, so every value below is
 * the site's own (Rubik headings, Source Sans body, navy #1f4567, blue #203c73,
 * orange #ffb456, green #015f45) and the card reads as part of the site.
 * ---------------------------------------------------------------------- */

body.qmsc {
	--qmsc-navy: #1f4567;
	--qmsc-blue: #203c73;
	--qmsc-green: #015f45;
	--qmsc-orange: #ffb456;
	--qmsc-peach: #ef8f61;
	--qmsc-ink: #2c3a45;
	--qmsc-muted: #64747f;
	--qmsc-line: #e3e8eb;
	--qmsc-line-soft: #eef1f3;
	--qmsc-surface: #fff;
	--qmsc-panel: #f6f8f9;
	--qmsc-tint-navy: #eaf0f5;
	--qmsc-bonus-bg: #fdf4e3;
	--qmsc-bonus-ink: #9a5b10;
	--qmsc-bonus-block: #f8faf9;

	/* Price stays the site's existing orange: inherit the look, do not redesign it. */
	--qmsc-price: var(--qmsc-orange);

	--qmsc-media-size: 190px;
	/* One number for the purchase column, so every card's CTA sits on the same vertical line. */
	--qmsc-purchase-w: 192px;
	--qmsc-purchase-pad: 22px 20px 20px;
	--qmsc-price-size: 28px;
	--qmsc-gap: 0px;
	--qmsc-body-pad: 22px 24px 20px;
	--qmsc-radius: 14px;
	--qmsc-shadow: 0 1px 2px rgba(31, 69, 103, .05), 0 12px 30px -18px rgba(31, 69, 103, .22);
}

/* -------------------------------------------------------------------------
 * 2. The landscape card shell (term 43 only)
 * ---------------------------------------------------------------------- */

body.qmsc.woocommerce ul.products li.product.qmsc-card,
body.qmsc.woocommerce-page ul.products li.product.qmsc-card {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: var(--qmsc-gap) !important;
	position: relative !important;
	overflow: hidden !important;
	text-align: left !important;
	background: var(--qmsc-surface) !important;
	border: 1px solid var(--qmsc-line) !important;
	border-radius: var(--qmsc-radius) !important;
	box-shadow: var(--qmsc-shadow) !important;
	list-style: none !important;
	font-size: 16px;
	line-height: 1.55;
	color: var(--qmsc-ink);
}

/* .qmsc-card--landscape is the layout modifier the template emits next to .qmsc-card. The row
   itself hangs off .qmsc-card so a card still renders if a future variant drops the modifier;
   this rule is what the modifier actually means, and the <=767 block reverses it. */
body.qmsc ul.products li.product.qmsc-card.qmsc-card--landscape {
	flex-direction: row !important;
}

/* A sale flash can still appear the moment someone sets a sale price (report 10.9).
   Keep it out of the badge's lane rather than fighting its ten !important declarations. */
body.qmsc.woocommerce ul.products li.product.qmsc-card span.onsale,
body.qmsc.woocommerce-page ul.products li.product.qmsc-card span.onsale {
	top: auto !important;
	bottom: 12px !important;
	left: 12px !important;
}

/* -------------------------------------------------------------------------
 * 2b. Defensive list reset for any ul.products that contains a card (task G)
 *
 * :has() support: Chrome/Edge 105+, Safari 15.4+, Firefox 121+ (about 93% of global traffic).
 * A browser without :has() simply drops these three rules and nothing breaks, because the card's
 * own float:none / clear:both / width:100% !important declarations in section 2 already produce
 * the correct layout on their own. This block is defensive only: it covers surfaces we have not
 * inventoried (Divi Shop modules, [products] shortcode grids) where a floated portrait neighbour
 * could otherwise tuck itself alongside a full-width card and leave a hole in the grid.
 * ---------------------------------------------------------------------- */

body.qmsc ul.products:has(li.qmsc-card) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start;
}

body.qmsc ul.products:has(li.qmsc-card) > li.product {
	float: none !important;
	clear: none !important;
}

body.qmsc ul.products:has(li.qmsc-card) > li.product.qmsc-card {
	flex: 0 0 100% !important;
	width: 100% !important;
}

/* -------------------------------------------------------------------------
 * 3. Media panel — a full-height column with its own ground, per the draft
 * ---------------------------------------------------------------------- */

body.qmsc ul.products li.product.qmsc-card .qmsc-card__media {
	flex: 0 0 var(--qmsc-media-size) !important;
	width: var(--qmsc-media-size) !important;
	max-width: var(--qmsc-media-size) !important;
	align-self: stretch !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 16px !important;
	background: var(--qmsc-panel);
	border-right: 1px solid var(--qmsc-line);
	border-radius: 0;
	line-height: 0;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: 200px;
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 8px;
}

/* -------------------------------------------------------------------------
 * 4. Body column (middle)
 *
 * A flex column, so the trust row can sit on the bottom edge of the card rather than
 * floating directly under a short bonus block.
 * ---------------------------------------------------------------------- */

body.qmsc ul.products li.product.qmsc-card .qmsc-card__body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--qmsc-body-pad) !important;
	/* Containment context for the trust row below. The card is narrow on a sidebar archive
	   and wide on /products/ at the SAME viewport width, so the trust row has to respond to
	   this column, not to the screen. Browsers without @container keep the wrapping row. */
	container-type: inline-size;
	container-name: qmscbody;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__head {
	margin: 0 0 14px;
}

/* Badge as a pill, the draft's .tag, in the site's navy rather than its teal. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__badge {
	display: inline-block;
	margin: 0 0 9px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--qmsc-tint-navy);
	color: var(--qmsc-navy);
	font-size: 11px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: middle;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__title {
	margin: 0 0 5px !important;
	padding: 0 !important;
	font-size: 22px !important;
	line-height: 1.22 !important;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--qmsc-navy) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__title a {
	color: inherit !important;
	text-decoration: none;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__title a:hover,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__title a:focus {
	color: var(--qmsc-blue) !important;
	text-decoration: underline;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__subtitle {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--qmsc-muted);
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__size {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 8px 0 0;
	line-height: 0;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__size svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* -------------------------------------------------------------------------
 * 5. Item lists and the "+N more" accordion
 * ---------------------------------------------------------------------- */

body.qmsc ul.products li.product.qmsc-card .qmsc-card__includes {
	margin: 0 0 12px;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__bonus {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--qmsc-line);
	border-radius: 10px;
	background: var(--qmsc-bonus-block);
}

/* The draft's rule-to-the-right section label. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__list-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qmsc-muted);
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__list-heading::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--qmsc-line);
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__bonus .qmsc-card__list-heading {
	color: var(--qmsc-bonus-ink);
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__bonus .qmsc-card__list-heading::after {
	background: #ecdfc6;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 20px;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item {
	margin: 0 !important;
	padding: 0 0 0 15px !important;
	position: relative;
	list-style: none !important;
	display: block !important;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--qmsc-ink);
	white-space: normal;
	overflow-wrap: anywhere;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.64em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--qmsc-navy);
}

/* Component links. The shop already links each item to its own product page; the card now
   keeps those links. Theme link styling (the site underlines every <p> link with a 0.1em
   border) is too loud at this size, so the link inherits the item's colour and earns a
   dotted underline that solidifies on hover. No new colour token. */
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item a {
	color: inherit !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	/* --qmsc-line is nearly invisible on white; --qmsc-muted reads as a link without shouting. */
	text-decoration-color: var(--qmsc-muted);
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item a:hover,
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item a:focus {
	color: var(--qmsc-blue) !important;
	text-decoration-style: solid;
	text-decoration-color: currentColor;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list li.qmsc-card__list-item a:focus-visible {
	outline: 2px solid var(--qmsc-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list--bonus li.qmsc-card__list-item::before {
	background: var(--qmsc-bonus-ink);
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__prose {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--qmsc-ink);
}

/* The accordion is a real <details>, so it works with JS off. assets/cards.js only adds
   aria-expanded and swaps the label between data-more and data-less. */
body.qmsc ul.products li.product.qmsc-card details.qmsc-card__more {
	display: block;
	margin: 6px 0 0;
}

/* Styled as the 0.2.0 "+N more" link was, because that is what it replaces. The default
   disclosure triangle is removed two ways: list-style for Firefox and modern Chrome, the
   -webkit pseudo-element for older WebKit. CSS never hides the summary text -- the label
   swap is the JS's job, and with JS off the label stays "+N more" and still works. */
body.qmsc ul.products li.product.qmsc-card summary.qmsc-card__more-toggle {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--qmsc-blue) !important;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
}

body.qmsc ul.products li.product.qmsc-card summary.qmsc-card__more-toggle::-webkit-details-marker {
	display: none;
}

body.qmsc ul.products li.product.qmsc-card summary.qmsc-card__more-toggle:hover {
	text-decoration: underline;
}

body.qmsc ul.products li.product.qmsc-card summary.qmsc-card__more-toggle:focus-visible {
	outline: 2px solid var(--qmsc-blue);
	outline-offset: 2px;
	border-radius: 3px;
	text-decoration: underline;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list.qmsc-card__list--more {
	margin-top: 2px !important;
}

/* -------------------------------------------------------------------------
 * 6. Purchase column (right) — replaces the 0.2.0 buy row
 *
 * Fixed width on every card, its own left hairline and padding, contents stacked top to
 * bottom, CTA pinned to the bottom edge with margin-top:auto.
 * ---------------------------------------------------------------------- */

body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase {
	box-sizing: border-box !important;
	flex: 0 0 var(--qmsc-purchase-w) !important;
	width: var(--qmsc-purchase-w) !important;
	max-width: var(--qmsc-purchase-w) !important;
	align-self: stretch !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 7px;
	margin: 0 !important;
	padding: var(--qmsc-purchase-pad) !important;
	border-left: 1px solid var(--qmsc-line);
	text-align: left !important;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__price {
	display: block !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
	font-size: var(--qmsc-price-size) !important;
	line-height: 1.1 !important;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--qmsc-price) !important;
	white-space: nowrap;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__price .woocommerce-Price-amount,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__price bdi,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__price .amount {
	color: inherit !important;
	font-size: inherit !important;
	white-space: nowrap;
}

/* The site's custom CSS pads the currency symbol by 5px, which at 28px reads as a gap.
   Setting the symbol smaller also keeps AU$1,279.00 inside a 210px column. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__price .woocommerce-Price-currencySymbol {
	padding-right: 1px !important;
	font-size: 0.66em;
	vertical-align: 0.14em;
	font-weight: 600;
}

/* The draft's amber bonus-value pill — clearly subordinate to the price. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__bonus-value {
	display: inline-block;
	margin: 0;
	padding: 5px 11px;
	border-radius: 8px;
	background: var(--qmsc-bonus-bg);
	color: var(--qmsc-bonus-ink);
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 600;
	white-space: nowrap;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__shipping {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--qmsc-green) !important;
	white-space: nowrap;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__shipping::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--qmsc-green);
	flex: 0 0 auto;
}

/* Solid CTA, full width of the column, pinned to its bottom edge, in the site's blue.
   Divi ships an ::after arrow on every .button; it has no place on a filled pill. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 13px 18px !important;
	flex: 0 0 auto;
	background: var(--qmsc-blue) !important;
	color: #fff !important;
	border: 1px solid var(--qmsc-blue) !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	text-align: center !important;
	text-transform: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button::after,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .qmsc-card__enquire::after {
	display: none !important;
	content: none !important;
}

body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button:hover,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button:focus {
	background: var(--qmsc-navy) !important;
	border-color: var(--qmsc-navy) !important;
	color: #fff !important;
	padding: 13px 18px !important;
}

/* WooCommerce's AJAX add-to-cart states put their spinner and tick in ::after; the blanket
   suppression above would eat both. */
body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button.added::after,
body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button.loading::after {
	display: inline-block !important;
	content: "" !important;
}

/* Enquiry-only cards: same pill, outline variant. These products have no price, so the CTA
   must not read as a purchase. Hover fills to match the add-to-cart button. */
body.qmsc ul.products li.product.qmsc-card.qmsc-card--enquiry .qmsc-card__purchase .qmsc-card__enquire {
	background: var(--qmsc-surface) !important;
	color: var(--qmsc-blue) !important;
	border: 1px solid var(--qmsc-blue) !important;
}

body.qmsc ul.products li.product.qmsc-card.qmsc-card--enquiry .qmsc-card__purchase .qmsc-card__enquire:hover,
body.qmsc ul.products li.product.qmsc-card.qmsc-card--enquiry .qmsc-card__purchase .qmsc-card__enquire:focus {
	background: var(--qmsc-blue) !important;
	border-color: var(--qmsc-blue) !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 7. Trust ticks — bottom of the BODY column
 * ---------------------------------------------------------------------- */

/* woocommerce.css carries
       .woocommerce .products ul::before, .woocommerce .products ul::after { content:" "; display:table }
   as a clearfix, and that selector matches EVERY ul inside .products -- including ours. Our lists are
   grid and flex containers, so those two pseudo-elements become real grid/flex items: a phantom empty
   first cell in the item lists, and a gap-width indent before the first trust badge. Kill them. */
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list::before,
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list::after,
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust::before,
body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust::after {
	content: none !important;
	display: none !important;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: auto 0 0 !important;
	padding: 14px 0 0 !important;
	list-style: none !important;
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust li.qmsc-card__trust-item {
	display: inline-flex !important;
	align-items: baseline;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--qmsc-muted);
}

body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust li.qmsc-card__trust-item::before {
	content: "\2713";
	color: var(--qmsc-green);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	flex: 0 0 auto;
}

/* When the content column is narrow the three badges wrap to a ragged two rows.
   Stack them instead. @container: Chrome/Edge 105+, Safari 16+, Firefox 110+; without it the
   badges keep the wrapping row, which is the 0.3.0 behaviour and is not broken, only tighter. */
@container qmscbody (max-width: 430px) {
	body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 6px;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * 8. Group headings (own <li>, deliberately NOT li.product)
 * ---------------------------------------------------------------------- */

body.qmsc.woocommerce ul.products li.qmsc-group-heading,
body.qmsc.woocommerce-page ul.products li.qmsc-group-heading {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	margin: 26px 0 14px !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
}

body.qmsc ul.products li.qmsc-group-heading:first-child {
	margin-top: 0 !important;
}

body.qmsc ul.products li.qmsc-group-heading h2 {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qmsc-navy) !important;
	border: 0 !important;
}

body.qmsc ul.products li.qmsc-group-heading h2::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--qmsc-line);
}

/* The heading is a disclosure. The <details> lives inside the heading <li> because a <ul>
   accepts nothing but <li>, so it cannot wrap the sibling cards; the cards are hidden by the
   generated per-group :has() rule in qm_set_cards_group_collapse_css() instead. */
body.qmsc ul.products li.qmsc-group-heading details.qmsc-group {
	margin: 0;
	padding: 0;
}

body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle {
	display: block;
	cursor: pointer;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle::-webkit-details-marker {
	display: none;
}

body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle:focus-visible {
	outline: 2px solid var(--qmsc-blue);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Marker: a chevron that rotates when the group opens. Drawn with borders so it needs no
   font, no icon set and no extra colour. */
body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle h2::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

body.qmsc ul.products li.qmsc-group-heading details.qmsc-group[open] summary.qmsc-group__toggle h2::before {
	transform: rotate(45deg);
}

body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle:hover h2 {
	color: var(--qmsc-blue) !important;
}

body.qmsc ul.products li.qmsc-group-heading .qmsc-group__count {
	flex: 0 0 auto;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--qmsc-muted);
}

@media (prefers-reduced-motion: reduce) {
	body.qmsc ul.products li.qmsc-group-heading summary.qmsc-group__toggle h2::before {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 8b. Responsive — Divi's breakpoints only
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 980px) {
	body.qmsc {
		--qmsc-media-size: 170px;
		--qmsc-purchase-w: 180px;
		--qmsc-purchase-pad: 18px 16px 18px;
		--qmsc-price-size: 24px;
		--qmsc-body-pad: 18px 20px 18px;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__title {
		font-size: 22px !important;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__media img {
		max-height: 160px;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button,
	body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button:hover,
	body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button:focus {
		padding: 12px 10px !important;
		font-size: 13.5px !important;
	}
}

@media (max-width: 767px) {
	body.qmsc {
		--qmsc-media-size: 100%;
		--qmsc-purchase-w: 100%;
		--qmsc-purchase-pad: 14px 16px 16px;
		--qmsc-price-size: 23px;
		--qmsc-body-pad: 16px 16px 16px;
		--qmsc-radius: 12px;
	}

	/* Stacked below the tablet band: image band on row 1, body on row 2, purchase on row 3.
	   Divi only forces float:left !important in the 768-980 band, but the reset is
	   repeated here so the rule survives independently of that band. */
	body.qmsc.woocommerce ul.products li.product.qmsc-card,
	body.qmsc.woocommerce-page ul.products li.product.qmsc-card {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		float: none !important;
		padding: 0 !important;
	}

	body.qmsc ul.products li.product.qmsc-card.qmsc-card--landscape {
		flex-direction: column !important;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__media {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		/* Capped so a square product shot does not become a full-width square. */
		height: 190px !important;
		padding: 12px !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--qmsc-line);
		border-radius: 0;
	}

	/* contain, not cover: these are product shots on a light ground and cropping
	   them cuts the magnet out of frame. The band is full width; the shot centres in it. */
	body.qmsc ul.products li.product.qmsc-card .qmsc-card__media img {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100%;
		object-fit: contain;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__title {
		font-size: 19px !important;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__subtitle {
		font-size: 14px;
	}

	body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Row 3: the purchase column becomes a full-width block under the body, its left
	   hairline swapped for a top one. Price / bonus / shipping stay stacked. */
	body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		align-items: center !important;
		text-align: center !important;
		border-left: 0 !important;
		border-top: 1px solid var(--qmsc-line);
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__purchase .button {
		width: 100% !important;
		margin: 6px 0 0 !important;
		text-align: center !important;
	}

	/* Stacked from 767 down: one badge per line, hard against the left edge. */
	body.qmsc ul.products li.product.qmsc-card ul.qmsc-card__trust {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 6px;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

@media (max-width: 479px) {
	body.qmsc {
		--qmsc-purchase-pad: 12px 14px 14px;
		--qmsc-body-pad: 14px 14px 14px;
	}

	/* Still stacked, just a shorter image band on the smallest phones. */
	body.qmsc ul.products li.product.qmsc-card .qmsc-card__media {
		height: 150px !important;
		padding: 10px !important;
	}

	body.qmsc ul.products li.product.qmsc-card .qmsc-card__title {
		font-size: 18px !important;
	}
}

/* -------------------------------------------------------------------------
 * 9. Light treatment for every OTHER card (category, search, Sets archives)
 *    The subtitle line is the only markup this adds; the rest is CSS only.
 * ---------------------------------------------------------------------- */

/* The M1 subtitle on portrait cards. Emitted by qm_set_cards_portrait_subtitle()
   only when the product actually has one, so there is no empty-state rule here. */
body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) .qmsc-sub,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) .qmsc-sub {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--qmsc-muted);
	/* Two lines maximum: these read as specs and some run long. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) .woocommerce-loop-product__title,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 0.4em 0 !important;
	line-height: 1.35em !important;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) [itemprop="description"],
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) [itemprop="description"] {
	position: relative;
	max-height: 7.6em;
	overflow: hidden;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) [itemprop="description"]::after,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) [itemprop="description"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.2em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) [itemprop="description"] ul,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) [itemprop="description"] ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) [itemprop="description"] li,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) [itemprop="description"] li {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) .price,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) .price {
	display: block;
	margin: 4px 0 8px !important;
	white-space: nowrap;
}

body.qmsc--light.woocommerce ul.products li.product:not(.qmsc-card) .free_shipping_text,
body.qmsc--light.woocommerce-page ul.products li.product:not(.qmsc-card) .free_shipping_text {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.4;
}