/* =Child-Theme responsive styles
--------------------------------------------------------------
 * GENERATED FILE — DO NOT EDIT BY HAND.
 * Regenerate with:  python tools\regen_responsive.py   (then deploy both files)
 *
 * Everything below this header is a verbatim copy of fb49-grid.css. It is
 * duplicated here because the two files occupy different slots in the cascade
 * and both are needed:
 *
 *   fb49-grid.css    enqueued by the child functions.php with the theme's last
 *                    responsive handle as a dependency, media="all". That is
 *                    the authoritative copy and it covers every screen width.
 *
 *   responsive.css   enqueued by the PARENT at wp_enqueue_scripts priority 2500
 *                    with media="(max-width:1679px)". The parent controls this
 *                    handle, so the safest thing it can contain is exactly the
 *                    same rules — then whichever of the two the cascade happens
 *                    to resolve last, the result is identical.
 *
 * A stale copy here is not harmless: because it loads last on every viewport up
 * to 1679px it silently overrides fb49-grid.css on essentially every real
 * screen. It happened again on 2026-09-21 (the card redesign) — hence this
 * script, and the ?ver=<filemtime> that mu-plugins/49books-cards.php now adds to
 * this file's URL so the CDN cannot keep serving an old copy either.
 -------------------------------------------------------------- */
/**
 * 49Books — product grid card.
 *
 * Enqueued from the child functions.php with media="all". `!important` is used
 * on the geometry and colour properties because six parent/plugin stylesheets
 * print after this one (trx_addons/__responsive.css,
 * woocommerce.responsive.css, skins/default/css/__responsive.css,
 * woocommerce-responsive.css, woocommerce-extensions-responsive.css and the
 * child responsive.css) and set competing widths, floats, heights and colours
 * inside media queries up to 1679px. None of them use `!important` on these
 * selectors, so equal-specificity `!important` here wins everywhere.
 *
 * The shape of a card (the theme's real markup, product_style_default):
 *
 *   li.product                       grid cell, flex column, stretched to row height
 *     .post_item.post_layout_thumbs  flex column, fills the cell
 *       .post_featured.hover_shop    THE FRAME — fixed 1:1.15, very thin light outline
 *         span.fb49-backdrop > img   the same cover, enlarged, blurred, faded
 *         a > img                    the real cover, "contain", centred, shadow
 *         .mask / .icons             hover overlay (left as the theme built it)
 *       .post_data
 *         .post_data_inner           flex row, wrapping
 *           .post_header             line 1 — title, at most two lines
 *           .price_wrap              line 2, left  — orange price badge (logo orange)
 *           a.button.add_to_cart_…   line 2, right — orange cart icon button
 *           .added_to_cart           line 3 — "View basket", after AJAX
 */

/* ---- Layout variables, so every card is driven by the same numbers ---- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	--fb49-cols: 4;
	--fb49-title-line-height: 1.3em;   /* tight, so the half-leading does not eat the 1–2 mm gaps */
	--fb49-title-lines: 2;

	/* Cover frame (redesigned 2026-09-21, second version)
	   Every card gets the same fixed frame. Its background is the book's own
	   cover, enlarged to fill the frame, blurred and faded (.fb49-backdrop,
	   printed by mu-plugins/49books-cards.php); the real cover sits centred on
	   top of it with a soft shadow. */

	/* 1 : 1.15 is sized for the covers the shop actually has, with a narrow 4%
	   margin: the 24 × 21 cm HANO books (H/W ≈ 1.14) fill ~91% of the frame
	   height, a taller cover like Perav (≈1.41) ~93%, and a square cover uses the
	   full width (the most it can without cropping). */
	--fb49-cover-ratio: 20 / 23;
	/* The narrow margin between the cover and the frame edge. */
	--fb49-frame-inset: 4%;
	--fb49-frame-radius: 4px;
	--fb49-frame-outline: rgba(0, 0, 0, 0.09);   /* very thin, light */
	/* Backdrop: how soft and how faded the enlarged cover behind the cover is. */
	--fb49-backdrop-blur: 14px;
	--fb49-backdrop-opacity: 0.5;

	/* The whole gap budget of the card: frame -> title -> price (≈1.5 mm). */
	--fb49-card-gap: 6px;

	/* Price badge */
	--fb49-badge-bg: #f6ae42;   /* the 49books logo orange */
	--fb49-badge-sale-bg: #cf2e36;
	--fb49-badge-fg: #ffffff;

	/* Cart icon button */
	--fb49-cart-size: 38px;
	--fb49-cart-border: #f6ae42;

	--fb49-actions-gap: 8px;

	display: grid !important;
	grid-template-columns: repeat(var(--fb49-cols), minmax(0, 1fr)) !important;
	column-gap: 24px;
	row-gap: 40px;
	align-items: stretch !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}

/* The card variables again on any product list, so a loop rendered outside a
   `.woocommerce` wrapper still gets a real frame instead of invalid values. */
ul.products {
	--fb49-title-line-height: 1.3em;
	--fb49-title-lines: 2;
	--fb49-cover-ratio: 20 / 23;
	--fb49-frame-inset: 4%;
	--fb49-frame-radius: 4px;
	--fb49-frame-outline: rgba(0, 0, 0, 0.09);
	--fb49-backdrop-blur: 14px;
	--fb49-backdrop-opacity: 0.5;
	--fb49-card-gap: 6px;
	--fb49-badge-bg: #f6ae42;   /* the 49books logo orange */
	--fb49-badge-sale-bg: #cf2e36;
	--fb49-badge-fg: #ffffff;
	--fb49-cart-size: 38px;
	--fb49-cart-border: #f6ae42;
	--fb49-actions-gap: 8px;
}

/* The theme clears floats with pseudo-elements; as grid items they would
   become phantom cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 1023px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--fb49-cols: 3;
		column-gap: 20px;
		row-gap: 32px;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--fb49-cols: 2;
		column-gap: 16px;
		row-gap: 28px;
	}
}

/* ---- The card: no border, no box, just the content ---- */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product[class*="column-"],
.woocommerce-page ul.products li.product[class*="column-"],
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.woocommerce ul.products li.product > .post_item,
.woocommerce-page ul.products li.product > .post_item {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none !important;
}

/* ---- THE COVER AREA ----
   Two jobs that pull against each other, so they are split across two
   elements:

     .post_featured   a fixed-size, invisible box. Every card gets exactly the
                      same one, which is what keeps the titles and the price
                      rows of a row lined up no matter what shape — or whether —
                      the cover is.

     img              the visible thing. It carries the thin grey border and
                      the white padding, so the border wraps the artwork itself
                      rather than drawing a box around empty space.

   The cover is sized with max-width/max-height rather than
   width:100% + object-fit:contain, because object-fit letterboxes *inside* the
   element box — the element would stay full-size and the border would be back
   around the empty space. Constraining the intrinsic size instead makes the
   <img> shrink-wrap the artwork, which is the same "contain" geometry with a
   box that actually fits. The leftover slack is white on white and invisible. */

/* Selectors are deliberately not scoped to `.woocommerce`: the same card is
   rendered by the product shortcodes on the front page and by related
   products, which are not always inside a `.woocommerce` wrapper. */
ul.products li.product .post_featured,
.woocommerce ul.products li.product .post_featured,
.woocommerce-page ul.products li.product .post_featured {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;

	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: var(--fb49-cover-ratio) !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 0 var(--fb49-card-gap) 0 !important;

	box-sizing: border-box !important;
	padding: var(--fb49-frame-inset) !important;
	border: 1px solid var(--fb49-frame-outline) !important;
	border-radius: var(--fb49-frame-radius) !important;
	background: #ffffff !important;   /* the faded backdrop fades toward white */
	box-shadow: none !important;
	overflow: hidden !important;
	isolation: isolate !important;    /* keeps the stacking below inside the frame */
	font-size: 0 !important;   /* kills the inline-image baseline gap */
	line-height: 0 !important;
}

/* The backdrop: the book's own cover, enlarged past the frame edges (so the
   blur has no soft rim), blurred and faded. Decorative, never clickable. */
ul.products li.product .post_featured > .fb49-backdrop {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	display: block !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

ul.products li.product .post_featured > .fb49-backdrop > img {
	position: absolute !important;
	top: -12% !important;
	left: -12% !important;
	width: 124% !important;
	height: 124% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	filter: blur(var(--fb49-backdrop-blur)) saturate(1.05) !important;
	opacity: var(--fb49-backdrop-opacity) !important;
	transform: none !important;
}

/* The link holding the real cover fills the frame's inner box and sits above
   the backdrop, so the cover is centred on it. */
ul.products li.product .post_featured > a,
.woocommerce ul.products li.product .post_featured > a,
.woocommerce-page ul.products li.product .post_featured > a {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

/* The theme's hover mask and icons must stay above the cover. */
ul.products li.product .post_featured > .mask {
	z-index: 2 !important;
}
ul.products li.product .post_featured > .icons {
	z-index: 3 !important;
}

/* The real cover: never cropped. max-width/max-height shrink-wraps the artwork
   to "contain" geometry inside the frame (the frame's padding is the narrow
   margin); object-fit:contain is the safety net if a theme rule ever forces an
   explicit size. No border — a soft shadow lifts it off the backdrop. */
ul.products li.product .post_featured > a img,
.woocommerce ul.products li.product .post_featured > a img,
.woocommerce-page ul.products li.product .post_featured > a img {
	display: block !important;
	box-sizing: border-box !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	margin: 0 !important;

	padding: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: none !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
	transform: none !important;   /* the theme zooms the cover on hover, which
	                                 would push it out of its own frame */
}

/* ---- Cards with no cover at all ----
   Three of the products currently in the catalogue have no featured image, and
   WooCommerce/the theme renders an empty .post_featured for them. The box
   above already reserves the height, so the row stays aligned; this just fills
   it with a neutral placeholder instead of leaving a blank hole.

   :has() does the detection so no PHP is involved. Where it is unsupported the
   card simply shows an empty area of the right height — the alignment, which
   is the part that matters, still holds. */

.woocommerce ul.products li.product .post_featured:not(:has(img))::after,
.woocommerce-page ul.products li.product .post_featured:not(:has(img))::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;

	border: 0 !important;
	border-radius: var(--fb49-frame-radius) !important;
	background-color: #f5f5f5 !important;
	/* a muted book glyph, so an empty card reads as "no cover" and not "broken" */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2c2c2' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h9a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4z'/%3E%3Cpath d='M20 4.5h-2a3 3 0 0 0-2 1'/%3E%3Cpath d='M20 4.5v13.5a2.5 2.5 0 0 0-2.5 2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 42px 42px !important;
}

/* Hover overlay stays square inside the frame. */
.woocommerce ul.products li.product .post_featured .mask,
.woocommerce ul.products li.product .post_featured .icons {
	border-radius: 0 !important;
}

/* ---- Text block ----
   A wrapping flex row packed to the top: the title sits directly under the
   frame, and the price badge (with the cart button beside it) directly under
   the title. Every gap is --fb49-card-gap; nothing is pushed apart to fill the
   card. The covers already line up because the frames are all the same size. */

.woocommerce ul.products li.product .post_data,
.woocommerce-page ul.products li.product .post_data {
	display: flex !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	text-align: center !important;
}

.woocommerce ul.products li.product .post_data .post_data_inner,
.woocommerce-page ul.products li.product .post_data .post_data_inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: flex-start !important;
	row-gap: var(--fb49-card-gap) !important;
	column-gap: var(--fb49-actions-gap) !important;
	text-align: center !important;
}

/* The theme assigns `order` to some children but not to the add-to-cart button,
   which would otherwise float to the front of the flex row. Set all of them. */
.woocommerce ul.products li.product .post_data .post_data_inner .post_header {
	order: 1 !important;
}

.woocommerce ul.products li.product .post_data .post_data_inner .star-rating {
	order: 2 !important;
	flex: 0 0 100% !important;
}

.woocommerce ul.products li.product .post_data .post_data_inner .price_wrap,
.woocommerce ul.products li.product .post_data .post_data_inner > .price {
	order: 3 !important;
}

.woocommerce ul.products li.product .post_data .post_data_inner > a.button,
.woocommerce ul.products li.product .post_data .post_data_inner .add_to_cart_wrap {
	order: 4 !important;
}

.woocommerce ul.products li.product .post_data .post_data_inner .added_to_cart {
	order: 5 !important;
	flex: 0 0 100% !important;
}

/* The title takes only the height it needs (at most two lines, then an
   ellipsis), so a one-line title has the price right under it instead of an
   empty second line. */
ul.products li.product .post_header,
ul.products li.product .post_header.entry-header {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: auto !important;
	max-height: calc(var(--fb49-title-lines) * var(--fb49-title-line-height)) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .post_header h2,
ul.products li.product .post_header h3 {
	display: -webkit-box !important;
	-webkit-line-clamp: var(--fb49-title-lines) !important;
	line-clamp: var(--fb49-title-lines) !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;

	height: auto !important;
	max-height: calc(var(--fb49-title-lines) * var(--fb49-title-line-height)) !important;
	line-height: var(--fb49-title-line-height) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	text-align: center !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	display: inline !important;
}

/* ---- The price badge ---- */

.woocommerce ul.products li.product .price_wrap,
.woocommerce-page ul.products li.product .price_wrap {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	line-height: 0 !important;   /* no stray baseline under the inline badge */
}

/* The `.woocommerce` ancestor is deliberately left off these two selectors.
   The same loop markup is rendered by the theme's product shortcodes (the
   "latest additions" block on the front page, related products, category
   widgets), and those are not always inside a `.woocommerce` wrapper — without
   this the badge silently fell back to the theme's plain red link colour,
   which reads as if a sale style had been applied. `ul.products li.product` is
   still narrow enough to mean "a product loop card" and nothing else. */
ul.products li.product .price_wrap .price,
ul.products li.product .post_data .post_data_inner .price {
	display: inline-block !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	border-radius: 5px !important;
	background-color: var(--fb49-badge-bg) !important;
	color: var(--fb49-badge-fg) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	text-align: center !important;
	direction: ltr !important;
	unicode-bidi: isolate !important;
}

/* Everything WooCommerce nests inside .price — amount, <bdi>, currency symbol,
   and the del/ins pair on a sale price — has to take the badge's white.
   Both markups are covered: .price inside .price_wrap (shop and archives) and
   .price directly in .post_data_inner (the front-page product shortcodes, where
   the theme otherwise colours the amount red). */
ul.products li.product .price_wrap .price,
ul.products li.product .price_wrap .price span,
ul.products li.product .price_wrap .price bdi,
ul.products li.product .price_wrap .price ins,
ul.products li.product .price_wrap .price del,
ul.products li.product .price_wrap .price .amount,
ul.products li.product .price_wrap .price .woocommerce-Price-currencySymbol,
ul.products li.product .post_data_inner > .price,
ul.products li.product .post_data_inner > .price span,
ul.products li.product .post_data_inner > .price bdi,
ul.products li.product .post_data_inner > .price ins,
ul.products li.product .post_data_inner > .price del,
ul.products li.product .post_data_inner > .price .amount,
ul.products li.product .post_data_inner > .price .woocommerce-Price-currencySymbol {
	color: var(--fb49-badge-fg) !important;
	background: none !important;
}

/* ---- Sale prices, and only sale prices, turn the badge red ----
   Two independent tests, because either one can be the reliable one depending
   on how the price was rendered:

     li.product.sale        WooCommerce adds this class in wc_get_product_class()
                            when $product->is_on_sale().
     .price:has(del):has(ins)  the markup signature of a struck-out old price
                            next to a new one.

   A regular price matches neither, so it keeps #084e6d. This block sits after
   the base badge rule so it overrides it, and it only touches the background —
   the white text and the geometry are inherited from above. */
ul.products li.product.sale .price_wrap .price,
ul.products li.product.sale .post_data .post_data_inner .price,
ul.products li.product .price_wrap .price:has(del):has(ins),
ul.products li.product .post_data .post_data_inner .price:has(del):has(ins) {
	background-color: var(--fb49-badge-sale-bg) !important;
}

ul.products li.product .price_wrap .price del {
	opacity: 0.7 !important;
	font-size: 0.85em !important;
	margin-right: 0.4em !important;
	text-decoration: line-through !important;
}

ul.products li.product .price_wrap .price ins {
	text-decoration: none !important;
	font-weight: 600 !important;
}

/* ---- The add-to-cart icon button ----
   The theme hides this button unless the cover is hovered, with
   `.post_featured:not(.hover_none) + .post_data .product_type_simple {
   display: none }` (skins/default/plugins/woocommerce/woocommerce.css). That
   rule carries no `!important`, so bringing the button back is pure CSS — no
   template override and no woocommerce_after_shop_loop_item hook needed, and
   WooCommerce's own AJAX handler keeps working because this is still the
   button WooCommerce printed, with all of its data-* attributes intact.

   The "Buy now" label is collapsed with font-size:0 rather than removed, so it
   stays available to screen readers alongside the button's aria-label.

   Only `.add_to_cart_button` is un-hidden. An out-of-stock or variable product
   renders a plain "Read more" / "Select options" link in the same slot, and
   turning that into a cart icon would promise an action it does not perform —
   those keep the theme's behaviour. */

ul.products li.product:not(.outofstock) .post_featured:not(.hover_none) + .post_data a.button.add_to_cart_button,
ul.products li.product:not(.outofstock) .post_featured:not(.hover_none) + .post_data .post_data_inner > a.add_to_cart_button {
	display: inline-flex !important;
}

ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;

	box-sizing: border-box !important;
	width: var(--fb49-cart-size) !important;
	height: var(--fb49-cart-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;

	border: 1px solid var(--fb49-cart-border) !important;
	border-radius: 5px !important;
	background-color: var(--fb49-badge-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.5'/%3E%3Ccircle cx='17.5' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3.5h2.7l2.5 11.3h10.2l2.1-8.3H6.2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 21px 21px !important;
	box-shadow: none !important;

	font-size: 0 !important;   /* collapses the "Buy now" label, keeps it in the DOM */
	line-height: 0 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button:hover,
ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button:focus-visible {
	border-color: #e39a2d !important;
	background-color: #e39a2d !important;   /* a shade deeper on hover */
}

/* The theme animates a pseudo-element on its buttons, and WooCommerce injects
   a glyph for the loading and added states. At font-size:0 those render as
   artefacts, so the state is shown by dimming the button instead. */
ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button::before,
ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button::after {
	display: none !important;
	content: none !important;
	animation: none !important;
}

ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button.loading {
	opacity: 0.45 !important;
	pointer-events: none !important;
}

/* "View basket", which WooCommerce appends after a successful AJAX add. */
ul.products li.product .post_data .post_data_inner .added_to_cart {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: underline !important;
}

/* ---- Direction: centred in both scripts, each with its own direction ---- */

.woocommerce ul.products li.product.fb49-rtl-book .woocommerce-loop-product__title,
.woocommerce ul.products li.product.fb49-rtl-book .post_header h2,
.woocommerce ul.products li.product.fb49-rtl-book .post_header h3 {
	direction: rtl !important;
	unicode-bidi: isolate !important;
	text-align: center !important;
}

.woocommerce ul.products li.product:not(.fb49-rtl-book) .woocommerce-loop-product__title,
.woocommerce ul.products li.product:not(.fb49-rtl-book) .post_header h2,
.woocommerce ul.products li.product:not(.fb49-rtl-book) .post_header h3 {
	direction: ltr !important;
	unicode-bidi: isolate !important;
	text-align: center !important;
}

/* ---- Small screens ---- */

@media (max-width: 767px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .post_header h2,
	.woocommerce ul.products li.product .post_header h3 {
		font-size: 15px !important;
	}

	ul.products li.product .post_featured,
	.woocommerce ul.products li.product .post_featured,
	.woocommerce-page ul.products li.product .post_featured {
		margin-bottom: var(--fb49-card-gap) !important;
	}
}

/* Two columns on a phone leave roughly 150px per card, so the badge and the
   button are scaled down to keep them on one line. `flex-wrap` on the row is
   the safety net if a currency string is longer than expected. */
@media (max-width: 479px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--fb49-cart-size: 32px;
		--fb49-actions-gap: 6px;
		column-gap: 12px;
	}

	ul.products li.product .price_wrap .price,
	ul.products li.product .post_data .post_data_inner .price {
		padding: 6px 10px !important;
		font-size: 14px !important;
	}

	ul.products li.product .post_data .post_data_inner > a.button.add_to_cart_button {
		background-size: 18px 18px !important;
	}
}