/* ==========================================================================
   Tree archive card — the designbook product card (UX.5, 28 Sep 2026)

   Same component as the 2026 homepage, so the shop stops carrying two card
   systems. Values come from the designbook (ux/homepage-2026-prototype-v037/
   designbook): card radius 12, button radius 6, spacing scale, colour tokens,
   and the card roles product-subtitle 13/400 muted, product-price 16/600,
   product-size-label 11/600, ms-button--small + ms-button--subtle full width
   (v0.4.4-v0.4.6). Nothing here invents a new value.

   Scope: body.mason-catalog-cards, so it cannot reach other templates.
   ========================================================================== */

body.mason-catalog-cards {
	--ms-color-brand: #284915;
	--ms-color-brand-hover: #355612;
	--ms-color-brand-pressed: #1C340F;
	--ms-color-text: #212121;
	--ms-color-muted: #5D645A;
	--ms-color-white: #FFFFFF;
	--ms-color-sage: #E7ECDF;
	--ms-color-border: #D8DED2;
	--ms-color-focus: #245CBD;
	--ms-radius-card: 12px;
	--ms-radius-button: 6px;
	--ms-radius-badge: 4px;
	--ms-space-4: 4px;
	--ms-space-8: 8px;
	--ms-space-12: 12px;
	--ms-space-16: 16px;
	--ms-font-heading: "Montserrat", Arial, sans-serif;
	--ms-font-body: "Raleway", Arial, sans-serif;
}

/* Card shell ------------------------------------------------------------- */
/* Every tile in a row is the same height, whatever the length of the name or the description
   (Gabriela, 29 Sep 2026). The column, its inner wrapper and the card all stretch, the text block
   grows, and the CTA is pushed to the bottom edge so the buttons line up across the row — the
   designbook's rule that price and CTA stay aligned between cards. */
body.mason-catalog-cards :is(.products, .row) > .product-small.col { display: flex; }
body.mason-catalog-cards :is(.products, .row) > .product-small.col > .col-inner { display: flex; width: 100%; }
body.mason-catalog-cards :is(.products, .row) .product-small .box {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
body.mason-catalog-cards :is(.products, .row) .product-small .box-text { flex: 1 1 auto; }
/* The price sits in the same place on every card in a row, and the CTA keeps a fixed 12 px under
   it (designbook: price and CTA align between cards, and the slack from different text lengths
   falls BEFORE the price). Gabriela, 29 Sep 2026.
   The theme nests the description inside .price-wrapper, so the wrapper itself has to grow and the
   price is pinned to its bottom — pushing the wrapper alone would still let a longer description
   move the price down. */
body.mason-catalog-cards :is(.products, .row) .product-small .price-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
body.mason-catalog-cards :is(.products, .row) .product-small .price-wrapper .price { margin-top: auto; }
body.mason-catalog-cards :is(.products, .row) .product-small .mason-view-tree { margin-top: var(--ms-space-12); }

body.mason-catalog-cards :is(.products, .row) .product-small .box {
	background: var(--ms-color-white);
	border: 1px solid var(--ms-color-border);
	border-radius: var(--ms-radius-card);
	overflow: hidden;
	height: 100%;
	min-width: 0;
	transition: border-color 160ms ease;
}
body.mason-catalog-cards :is(.products, .row) .product-small .box-image {
	position: relative;
	border-radius: 0;
}
body.mason-catalog-cards :is(.products, .row) .product-small .box-text {
	position: relative;
	padding: var(--ms-space-16);
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-4);
}

/* Height range on the photo (designbook v0.4.5/v0.4.6) -------------------- */
/* Flatsome fires the hook this tag prints on inside .box-text, not inside the image, so the tag
   is anchored to the top edge of the text box and lifted 12 px into the photo above it — the
   designbook's 12 px from the photo's bottom edge, without overriding a theme template. */
body.mason-catalog-cards .mason-card-photo-tag {
	position: absolute;
	left: var(--ms-space-12);
	bottom: calc(100% + var(--ms-space-12));
	z-index: 2;
	padding: var(--ms-space-4) var(--ms-space-8);
	border-radius: var(--ms-radius-badge);
	background: var(--ms-color-white);
	color: var(--ms-color-text);
	font: 600 11px/1.5 var(--ms-font-body);
	pointer-events: none;
}

/* Text roles ------------------------------------------------------------- */
body.mason-catalog-cards :is(.products, .row) .product-small .product-title,
body.mason-catalog-cards :is(.products, .row) .product-small .name.product-title {
	font: 600 18px/1.3 var(--ms-font-heading);
	letter-spacing: -0.015em;
	margin: 0;
}
body.mason-catalog-cards :is(.products, .row) .product-small .product-title a { color: var(--ms-color-text); }
body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-desc {
	margin: 0;
	color: var(--ms-color-muted);
	font: 400 13px/1.5 var(--ms-font-heading);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}
/* Description density is a UX Builder setting, not an edit to product content.
   Product names are never clipped, and full details remain on the product page. */
@media (min-width: 850px) {
	body.mason-catalog-cards.mason-card-description-3 :is(.products, .row) .product-small .mason-card-desc { -webkit-line-clamp: 3; }
	body.mason-catalog-cards.mason-card-description-full :is(.products, .row) .product-small .mason-card-desc { display: block; overflow: visible; }
}

/* One predictable action: the card opens its product. Keep photography stable
   rather than covering it with a second action or swapping to a comparison chart. */
body.mason-catalog-cards :is(.products, .row) .product-small .quick-view,
body.mason-catalog-cards :is(.products, .row) .product-small .back-image { display: none !important; }
body.mason-catalog-cards :is(.products, .row) .product-small .box-image img:not(.back-image) {
	opacity: 1 !important;
	transform: none !important;
}
@media (hover: hover) and (pointer: fine) {
	body.mason-catalog-cards :is(.products, .row) .product-small:hover .box { border-color: var(--ms-color-brand); }
}
@media (prefers-reduced-motion: reduce) {
	body.mason-catalog-cards :is(.products, .row) .product-small .box { transition: none; }
}
body.mason-catalog-cards :is(.products, .row) .product-small .price,
body.mason-catalog-cards :is(.products, .row) .product-small .price .amount {
	/* Two points above the designbook's product-price role, at Gabriela's request (29 Sep). */
	font: 600 18px/1.3 var(--ms-font-heading);
	color: var(--ms-color-text);
}
body.mason-catalog-cards :is(.products, .row) .product-small .price del,
body.mason-catalog-cards :is(.products, .row) .product-small .price del .amount {
	font-weight: 400;
	color: var(--ms-color-muted);
	text-decoration: line-through;
}
body.mason-catalog-cards :is(.products, .row) .product-small .price ins,
body.mason-catalog-cards :is(.products, .row) .product-small .price ins .amount {
	text-decoration: none;
	font-weight: 600;
	color: var(--ms-color-text);
}

/* The card's CTA is the existing .mason-view-tree, restyled in tree-shop.css to the designbook
   button — one definition, not two. Only the focus ring for the rest of the card lives here. */
body.mason-catalog-cards :is(.products, .row) .product-small a:focus-visible {
	outline: 3px solid var(--ms-color-focus);
	outline-offset: 3px;
}

/* Real HTML link, outside the positioned text box, covers image and text alike.
   Existing title/image/CTA links remain available to keyboard and screen-reader users. */
body.mason-catalog-cards :is(.products, .row) > .product-small.col > .col-inner { position: relative; }
body.mason-catalog-cards .mason-card-overlay {
	position: absolute; inset: 0; z-index: 4; border-radius: var(--ms-radius-card);
}
body.mason-catalog-cards :is(.products, .row) .product-small .name.product-title a::after { content: none; }
body.mason-catalog-cards :is(.products, .row) .mason-view-tree,
body.mason-catalog-cards :is(.products, .row) .image-tools { position: relative; z-index: 5; }
body.mason-catalog-cards :is(.products, .row) .image-tools { position: absolute; }
body.mason-catalog-cards :is(.products, .row) > .product-small.col > .col-inner:has(a:focus-visible) {
	outline: 3px solid var(--ms-color-focus); outline-offset: 2px; border-radius: var(--ms-radius-card);
}

/* No hover states on touch: a phone has no pointer to hover with, and the sticky :hover that a tap
   leaves behind reads as a stuck, half-pressed button. (Gabriela, 29 Sep 2026) */
@media (hover: none) {
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-view-tree:hover {
		background: transparent !important;
		border-color: var(--ms-color-border) !important;
		color: var(--ms-color-brand) !important;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .box-image img,
	body.mason-catalog-cards :is(.products, .row) .product-small:hover .box-image img {
		transform: none !important;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .image-tools,
	body.mason-catalog-cards :is(.products, .row) .product-small .quick-view { display: none !important; }
}

/* Two cards share a 390 px screen, so every role steps down one notch — at the desktop sizes the
   name alone ate three lines of a 170 px column (Gabriela, 29 Sep 2026: "jakby wszystko zbyt duże").
   The name is 15 px here against the designbook's 18 px mobile H3; that is a deliberate exception
   for the two-column grid, and the description stays at 13 px, which is the designbook floor. */
@media (max-width: 849px) {
	body.mason-catalog-cards :is(.products, .row) .product-small .box-text {
		padding: var(--ms-space-12);
		gap: 2px;
	}
	/* Same selectors as the desktop rules above, or the two-class .name.product-title there wins. */
	body.mason-catalog-cards :is(.products, .row) .product-small .product-title,
	body.mason-catalog-cards :is(.products, .row) .product-small .name.product-title {
		font-size: 14px;
		line-height: 1.3;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .title-wrapper .product-subtitle,
	body.mason-catalog-cards :is(.products, .row) .product-small .product-subtitle {
		font-size: 10px;
		line-height: 14px;
		padding: 2px 6px;
		margin-bottom: 6px;
		white-space: nowrap;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-desc {
		font-size: 12px;
		line-height: 1.4;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .price,
	body.mason-catalog-cards :is(.products, .row) .product-small .price .amount { font-size: 16px; }
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-from { font-size: 13px; }
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-photo-tag {
		font-size: 9.5px;
		padding: 3px 6px;
		left: var(--ms-space-8);
		bottom: calc(100% + var(--ms-space-8));
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-view-tree {
		font-size: 12px;
		margin-top: var(--ms-space-8);
	}
}

/* Category shortcut tiles ("All Christmas Trees", "2026 Bestsellers", HDB/Condo…) -----------
   Same rounding as the product card, so the two tile shapes on one page stop disagreeing
   (Gabriela, 29 Sep 2026; designbook: card and standalone photo radius 12). These are Flatsome
   banner boxes, not products, hence the :not() guard. */
body.mason-catalog-cards .mason-tree-shop-block .box.box-text-bottom:not(.product-small) > .box-image,
body.mason-catalog-cards .mason-tree-shop-block .box.box-text-bottom:not(.product-small) > .box-image > div {
	border-radius: var(--ms-radius-card);
	overflow: hidden;
}

/* What the card carries (UX.5 clean-up approved by Gabriela, 29 Sep 2026) ------------------
   Out of the card, still on the product page: the repeated category label, the star rating with
   no review count, and the "1388+ bought in the past week" line, whose number no one can verify.
   The card keeps: photo, height range, delivery tag, name, one differentiating line, From price,
   one action — the designbook's card, in that order. */
body.mason-catalog-cards :is(.products, .row) .product-small .category,
body.mason-catalog-cards :is(.products, .row) .product-small .star-rating,
body.mason-catalog-cards :is(.products, .row) .product-small .week-purchases {
	display: none;
}

/* The subtitle is a neutral delivery note unless the product explicitly promises Same Day.
   The theme prints it as an <i>, hence the explicit font-style. */
body.mason-catalog-cards :is(.products, .row) .product-small .product-subtitle {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 var(--ms-space-4);
	padding: var(--ms-space-4) var(--ms-space-8);
	border-radius: var(--ms-radius-badge);
	background: var(--ms-color-white);
	color: var(--ms-color-muted);
	font: 600 12px/18px var(--ms-font-body);
	font-style: normal;
}
body.mason-catalog-cards :is(.products, .row) .product-small.mason-delivery-same-day .product-subtitle {
	background: var(--ms-color-sage);
	color: var(--ms-color-brand);
}

/* Reading order inside the card: tag, name, line, price, action. The theme nests the subtitle
   inside .title-wrapper, so that wrapper becomes a column and the tag is ordered above the name —
   the same sequence as the 2026 homepage card. */
body.mason-catalog-cards :is(.products, .row) .product-small .title-wrapper {
	display: flex;
	flex-direction: column;
	order: 2;
}
body.mason-catalog-cards :is(.products, .row) .product-small .title-wrapper .product-subtitle { order: -1; }
body.mason-catalog-cards :is(.products, .row) .product-small .title-wrapper .name { order: 0; }
body.mason-catalog-cards :is(.products, .row) .product-small .price-wrapper { order: 4; }
body.mason-catalog-cards :is(.products, .row) .product-small .mason-view-tree { order: 5; }

/* The theme puts the description INSIDE .price-wrapper, so the order for those two is set within
   that wrapper: the line first, the price last and pinned to the bottom. */
body.mason-catalog-cards :is(.products, .row) .product-small .price-wrapper .mason-card-meta { order: 1; }
body.mason-catalog-cards :is(.products, .row) .product-small .price-wrapper .price { order: 2; }

body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-from {
	color: var(--ms-color-muted);
	font-weight: 400;
}

/* Discount badge: a small disc inside the card, not a 45 px circle hanging off the corner at 16 px
   type (Gabriela, 29 Sep 2026, against Zalando's compact cards). The theme positions the container
   itself, so the offsets are set here too. */
body.mason-catalog-cards :is(.products, .row) .product-small .badge-container {
	top: var(--ms-space-8);
	left: var(--ms-space-8);
	width: auto;
	margin: 0;
}
body.mason-catalog-cards :is(.products, .row) .product-small .badge,
body.mason-catalog-cards :is(.products, .row) .product-small .badge-inner {
	/* Gabriela, 29 Sep: on desktop keep the badge the size it used to be. The only thing that
	   changes from the original is that it now sits inside the card instead of over its edge. */
	box-sizing: border-box;
	width: 45px;
	height: 45px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	font-size: 15px;
	line-height: 45px;
	font-weight: 600;
	letter-spacing: normal;
}

/* Between the desktop card and the phone card: three to four cards per row, so the roles sit one
   step down from desktop and one above the phone. */
@media (min-width: 850px) and (max-width: 1199px) {
	body.mason-catalog-cards :is(.products, .row) .product-small .product-title,
	body.mason-catalog-cards :is(.products, .row) .product-small .name.product-title { font-size: 16px; }
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-desc { font-size: 12.5px; }
	body.mason-catalog-cards :is(.products, .row) .product-small .price,
	body.mason-catalog-cards :is(.products, .row) .product-small .price .amount { font-size: 17px; }
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-from { font-size: 14px; }
}

/* Phone card, closer to the compact grids Gabriela compared us with (29 Sep 2026) ---------------
   - The button goes: the whole card is one link now, and 56 px of every card were spent repeating
     that. The button stays on tablet and desktop, where there is room for it.
   - The delivery line drops its filled box and stays as brand-coloured text, so the card has one
     coloured element (the discount disc) instead of three.
   - The description is held to two lines. This is a clamp, not a fixed container height: the card
     still grows with its content everywhere else, and the full text is on the product page, which
     the whole card now leads to. */
@media (max-width: 849px) {
	body.mason-catalog-cards :is(.products, .row) .product-small .mason-view-tree { display: none; }

	/* Keep the compact information tag, with colour tied to the actual delivery promise. */
	body.mason-catalog-cards :is(.products, .row) .product-small .title-wrapper .product-subtitle,
	body.mason-catalog-cards :is(.products, .row) .product-small .product-subtitle {
		padding: 2px 6px;
		border-radius: var(--ms-radius-badge);
		margin-bottom: 4px;
		font-size: 10px;
		line-height: 15px;
		white-space: nowrap;
	}

	body.mason-catalog-cards :is(.products, .row) .product-small .mason-card-desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* On a phone the discount is a small pill, not a disc eating a fifth of the photo
	   (Gabriela, 29 Sep 2026): same red, same text, about a third of the area. These rules live at
	   the end of the file on purpose — the desktop badge block above has the same specificity. */
	body.mason-catalog-cards :is(.products, .row) .product-small .badge-container {
		top: 6px;
		left: 6px;
	}
	body.mason-catalog-cards :is(.products, .row) .product-small .badge,
	body.mason-catalog-cards :is(.products, .row) .product-small .badge-inner {
		width: 30px;
		height: 30px;
		min-width: 0;
		padding: 0;
		border-radius: 999px;
		font-size: 9.5px;
		line-height: 30px;
	}
}

/* Vertical rhythm above the grid on phones: the block, the filter bar and the result count were
   spending 24 + 16 + 62 px on air before the first card (Gabriela, 29 Sep 2026). */
@media (max-width: 849px) {
	body.mason-catalog-cards .mason-tree-shop-block { margin-bottom: var(--ms-space-12); }
	/* The shortcut tiles kept ~37 px of air under their labels before the filter bar. */
	body.mason-catalog-cards .mason-tree-shop-block .box.box-text-bottom:not(.product-small) .box-text { padding-bottom: 0; }
	body.mason-catalog-cards .mason-tree-shop-block .box.box-text-bottom:not(.product-small) .box-text h4 { margin-bottom: 0; }
	body.mason-catalog-cards .mason-tree-shop-block .row { padding-bottom: 0; }
	body.mason-catalog-cards .mason-filter-controls { padding-bottom: var(--ms-space-8); }
	body.mason-catalog-cards .mason-result-count { margin: 0; }
	body.mason-catalog-cards .mason-filter-subbar { margin: var(--ms-space-8) 0 var(--ms-space-12); }
	body.mason-catalog-cards .shop-container :is(.products, .row) { margin-top: 0; }
	/* The theme's own "Filter by / Default sorting" row is 40 px of a control we already provide in
	   our own bar above (Filters + Sort by), so on these archives it only pushed the grid down. */
	body.mason-catalog-cards.mason-tree-shop .shop-container .filtering-sorting { display: none; }
	/* The grid's own wrapper carries 60 px of padding-top — the single biggest piece of the band
	   between "10 RESULTS" and the first card. */
	body.mason-catalog-cards .shop-container .facetwp-template { padding-top: var(--ms-space-16); }
	/* Tighter grid on a phone: a 10 px gutter instead of 20 and 10 px between rows instead of 16.
	   The row's negative margin is matched to the column padding, or the grid would push past the
	   container edges (Gabriela, 29 Sep 2026). */
	body.mason-catalog-cards .shop-container :is(.products, .row).row:has(> .product-small.col) {
		margin-left: -5px;
		margin-right: -5px;
	}
	body.mason-catalog-cards .shop-container :is(.products, .row) > .product-small.col {
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 10px;
	}
}

/* Landing-page product loops use Flatsome .row, not the archive's :is(.products, .row) class. */
body.mason-catalog-cards .row > .product-small.col { display: flex; }
body.mason-catalog-cards .row > .product-small.col > .col-inner { display: flex; width: 100%; position: relative; }
body.mason-catalog-cards .mason-view-tree { touch-action: manipulation; }
/* Long delivery labels must wrap instead of overflowing at 320 px. */
body.mason-catalog-cards :is(.products, .row) .product-small .product-subtitle { max-width: 100%; white-space: normal; }

/* Premium landing uses curated image boxes, not WooCommerce cards: preserve names/links,
   do not invent prices or imply that a decorations-only entry price includes the tree. */
body.page-premium-bundles .mason-premium-tile { display:flex; }
body.page-premium-bundles .mason-premium-tile > .col-inner { display:flex; width:100%; }
body.page-premium-bundles .mason-premium-tile .box {
	position:relative; display:flex; flex-direction:column; background:#fff;
	border:1px solid var(--ms-color-border); border-radius:12px; overflow:hidden;
}
body.page-premium-bundles .mason-premium-tile .box-text {
	background:#fff !important; padding:16px !important; flex:1; text-align:left;
}
body.page-premium-bundles .mason-premium-tile h4 { margin:0; font:600 18px/1.3 var(--ms-font-heading); }
body.page-premium-bundles .mason-premium-tile .box:has(a:focus-visible) { outline:3px solid var(--ms-color-focus); outline-offset:2px; }
@media(max-width:849px) {
	body.page-premium-bundles .mason-premium-tile { flex-basis:50%; max-width:50%; padding:0 5px 10px; }
	body.page-premium-bundles .mason-premium-tile .box-text { padding:12px !important; }
	body.page-premium-bundles .mason-premium-tile h4 { font-size:14px; }
}

/* Match the discount to the same available variation as the entry price. The old theme
   percentage can describe a different size/setup, and its script may inject duplicates. */
body.mason-catalog-cards .col-inner:has(> [data-mason-entry]) .badge-container { display:none; }
body.mason-catalog-cards .mason-entry-discount {
	position:absolute; top:8px; left:8px; z-index:3; pointer-events:none;
	width:45px; height:45px; border-radius:50%; background:#c92f36; color:#fff;
	text-align:center; font:600 15px/45px var(--ms-font-heading);
}
@media(max-width:849px) {
	body.mason-catalog-cards .mason-entry-discount { top:6px; left:6px; width:30px; height:30px; font-size:9.5px; line-height:30px; }
}

/* UX Builder had four rows of three; one grid avoids a lone centered card after every pair. */
body.page-premium-bundles .mason-premium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.page-premium-bundles .mason-premium-grid > .mason-premium-tile { width:100%; max-width:100%; padding:0; }
body.page-premium-bundles .mason-premium-tile h4 strong { font-weight:inherit; }
@media(max-width:849px) {
	body.page-premium-bundles .mason-premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

/* Keyboard focus only: focus-within also persisted after a touch on iOS (29 Sep review). */

/* Native-navigation feedback: compact ornaments in homepage brand/burgundy colours. */
body.mason-catalog-cards .mason-card-loading {
	position:absolute; inset:0; z-index:6; display:grid; place-items:center;
	background:rgba(255,255,255,.30); pointer-events:none;
}
body.mason-catalog-cards .mason-card-loading__pill {
	display:flex; flex-direction:column; align-items:center; gap:8px;
	padding:12px 18px; border:1px solid var(--ms-color-border); border-radius:8px;
	background:var(--ms-color-white); color:var(--ms-color-brand);
	box-shadow:0 2px 8px rgba(28,52,15,.10); font:600 12px/1.4 var(--ms-font-body);
}
body.mason-catalog-cards .mason-card-loading__baubles { display:flex; gap:8px; height:20px; align-items:flex-end; }
body.mason-catalog-cards .mason-card-loading__baubles i {
	position:relative; display:block; width:10px; height:10px; border-radius:50%;
	background:var(--ms-color-brand); transform-origin:50% -5px;
	animation:mason-bauble-loading 1s ease-in-out infinite;
}
body.mason-catalog-cards .mason-card-loading__baubles i::before {
	content:""; position:absolute; left:4px; top:-5px; width:2px; height:5px; background:currentColor;
}
body.mason-catalog-cards .mason-card-loading__baubles i:nth-child(2) { background:#74132A; color:#74132A; animation-delay:.12s; }
body.mason-catalog-cards .mason-card-loading__baubles i:nth-child(3) { animation-delay:.24s; }
@keyframes mason-bauble-loading { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce) {
	body.mason-catalog-cards .mason-card-loading__baubles i { animation:none; }
}

/* Shared catalog cards: Flatsome wraps the action, so order the wrapper after the price. */
body.mason-catalog-cards :is(.products, .row) .product-small .add-to-cart-button { order:5; }
body.mason-catalog-cards :is(.products, .row) .product-small .mason-catalog-details { order:1; margin-bottom:8px; }
body.mason-catalog-cards :is(.products, .row) .product-small .price { padding-top:8px; }
@media(max-width:849px) {
	body.mason-catalog-cards :is(.products, .row) .product-small .add-to-cart-button { display:none; }
}

/* Explain the entry price without adding another badge or truncating option names. */
body.mason-catalog-cards :is(.products, .row) .product-small .price .mason-card-price-options {
 display: block;
 margin-top: 4px;
 font-family: inherit;
 font-size: 12px;
 font-weight: 400;
 line-height: 1.5;
 color: #5D645A;
 white-space: normal;
 overflow-wrap: anywhere;
}