/**
 * Scarlet Shop UX
 *
 * Presentational corrections over markup Woodmart and WooCommerce already
 * print. Nothing here changes page structure, so a renamed class makes a rule
 * inert rather than breaking a layout.
 *
 * Contents
 *   1.  Tokens
 *   2.  The loop buy button — an icon, not a sentence
 *   3.  The floating options panel
 *   4.  Variation chips
 *   5.  Inline field errors
 *   6.  The product gallery rail
 *   7.  The bottom furniture stack
 */

/* ------------------------------------------------------------------ 1. Tokens
 *
 * --scarlet-notice-h and --scarlet-toolbar-h are measured by shop-ux.js and
 * rewritten on resize, on orientation change and when the store notice is
 * dismissed. They are declared here so every rule that reads them has a real
 * length to work with before the script runs, and so the design builder's own
 * stylesheet can read them with a 0px fallback when this plugin is inactive.
 */

:root {
	--scarlet-notice-h: 0px;
	--scarlet-toolbar-h: 0px;
	/*
	 * Published once by shop-ux.js from env(safe-area-inset-bottom), never
	 * read live. The raw env() value changes while a phone scrolls, so
	 * anything that puts it in a height breathes under the finger.
	 */
	--scarlet-safe-bottom: 0px;

	/* The fixed furniture, floor upwards. Anything that docks to the bottom of
	   the viewport clears this. */
	--scarlet-bottom-stack: calc(var(--scarlet-toolbar-h) + var(--scarlet-notice-h));

	/* The same, plus anything docked on top of it — currently the design
	   builder's sticky bar. What a free-floating button has to clear. */
	--scarlet-float-clear: var(--scarlet-bottom-stack);

	/* How tall the floating options panel is allowed to get. */
	--scarlet-panel-max: min(56vh, 420px);

	--scarlet-ink: #7f0000;
	--scarlet-ink-deep: #5c0000;
	--scarlet-cream: #fff1cf;
	--scarlet-gold: #e1ac42;
	--scarlet-error: #cc1818;
}

/* ---------------------------------------------- 2. The loop buy button
 *
 * Woodmart prints "Select options" (variable) or "Add to cart" (simple) as a
 * text link with an empty icon span. On a two-column phone grid that sentence
 * is wider than the price beside it and reads as a caption rather than a
 * control. It becomes a square cart button.
 *
 * The text is hidden rather than removed, because the anchor's accessible name
 * comes from WooCommerce's own aria-label and the screen-reader description
 * beside it — both of which still say what the button does.
 *
 * **Match on `add-to-cart-loop`, not on `add_to_cart_button`.** WooCommerce
 * adds `add_to_cart_button` only when the product `is_purchasable()` *and*
 * `is_in_stock()` (wc-template-functions.php, woocommerce_template_loop_add_to_cart),
 * so a sold-out product never carries it — which is exactly how four sold-out
 * charms kept their "Select options" sentence while the rest of the grid
 * became icons. `add-to-cart-loop` is Woodmart's own class, hardcoded in
 * `woocommerce/loop/add-to-cart.php`, and is on the anchor in every state.
 *
 * Every loop button becomes the icon, in both states, so the grid lines up.
 * That is right for the only two product types this shop has — simple and
 * variable, 210 products, no external or grouped ones. If a grouped product is
 * ever added its button says "View products", which is navigation rather than
 * a purchase and would want a rule of its own here; an external product's
 * "Buy product" is a purchase, and the cart icon still reads true for it.
 */

.wd-product .wd-add-btn > a.add-to-cart-loop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	/* Woodmart's loop button is a text link with a transparent ground and a
	   colour of its own; both are declared strongly enough that the icon would
	   otherwise come out as dark grey on nothing. */
	background-color: var(--scarlet-ink) !important;
	color: #fff !important;
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	box-shadow: none;
}

.wd-product .wd-add-btn > a.add-to-cart-loop:hover,
.wd-product .wd-add-btn > a.add-to-cart-loop:focus-visible {
	background-color: var(--scarlet-ink-deep) !important;
	color: #fff !important;
}

.wd-product .wd-add-btn > a.add-to-cart-loop .wd-action-text,
.wd-product .wd-add-btn > a.add-to-cart-loop .wd-action-icon {
	display: none !important;
}

.wd-product .wd-add-btn > a.add-to-cart-loop::before {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='17' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='17' cy='20' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: opacity 0.2s ease;
}

/* Woodmart's own loading flag, so the button still says something is happening
   now that its spinner span is hidden. */
.wd-product .wd-add-btn > a.add-to-cart-loop.btn-loading::before,
.wd-product .wd-add-btn > a.add-to-cart-loop.loading::before {
	opacity: 0.35;
}

/*
 * Not buyable: the button keeps its shape so the grid still lines up, and
 * loses its colour so it does not promise a purchase.
 *
 * `:not(.add_to_cart_button)` is the test, rather than the card's `outofstock`
 * class, because it is WooCommerce's own answer to "is there anything to add
 * here" — and the two are not the same question. Sold-out products no longer
 * reach a listing at all (WooCommerce → Settings → Products → Inventory →
 * Out of stock visibility, set in the database, not here), but a product that
 * is *in stock and not purchasable* — a variable product with no price on its
 * variations, most commonly — still appears, and a solid red cart icon on one
 * of those would promise a purchase the shop cannot complete.
 *
 * So this is normally dormant. Do not delete it as dead code: it is what keeps
 * the icon honest, and it is what the loop looks like if that setting is ever
 * turned back off.
 */
.wd-product .wd-add-btn > a.add-to-cart-loop:not(.add_to_cart_button) {
	background-color: transparent !important;
	border: 1px solid rgba(127, 0, 0, 0.3);
	color: var(--scarlet-ink) !important;
}

.wd-product .wd-add-btn > a.add-to-cart-loop:not(.add_to_cart_button):hover,
.wd-product .wd-add-btn > a.add-to-cart-loop:not(.add_to_cart_button):focus-visible {
	background-color: rgba(127, 0, 0, 0.08) !important;
	color: var(--scarlet-ink) !important;
}

.wd-product .wd-add-btn > a.add-to-cart-loop:not(.add_to_cart_button)::before {
	opacity: 0.45;
}

/* The card's price row was laid out for a wide text button. */
.wd-product .wrap-price .swap-elements {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wd-product .wrap-price .swap-elements > .price {
	min-width: 0;
}

/* The site's own custom CSS hides the footer button on phones. Nothing here
   reverses that — it only styles the button where it is shown. */

/* ------------------------------------------- 3. The floating options panel
 *
 * Woodmart's quick shop appends the full variation form into .wd-product-thumb
 * and the panel is .wd-fill — absolutely inset 0 over the picture. So the
 * moment you asked for the attachment type, the charm you were choosing it for
 * disappeared behind the form.
 *
 * The panel now floats: anchored to the bottom edge of the picture, its own
 * width, allowed to overhang the card and its neighbours. The picture stays
 * where it is.
 *
 * Two mechanical notes:
 *
 *   The theme animates the panel with `transform: translate3d(0, 103%, 0)` and
 *   relies on .wd-product-thumb clipping it while it is hidden. Un-clipping the
 *   thumb would therefore leave the hidden panel on screen, so visibility is
 *   taken over here explicitly and the transform is left alone — it still
 *   provides the slide-in.
 *
 *   The thumb is only un-clipped while the panel is open, so the card's hover
 *   image behaves exactly as before the rest of the time.
 */

.wd-products:not([class*="wd-carousel"]) {
	overflow: visible;
}

.wd-product.quick-shop-shown {
	position: relative;
	z-index: 60;
}

.wd-product.quick-shop-shown .wd-product-wrapper,
.wd-product.quick-shop-shown .wd-product-thumb {
	overflow: visible;
}

/*
 * The thumb carries a transform from the theme's hover effects, and a
 * transform makes a stacking context — so the panel's own z-index is sealed
 * inside the picture and cannot reach over the price row below it, whose buy
 * button is positioned and comes later in the document. Lifting the thumb is
 * what actually raises the panel; lifting the panel alone did nothing.
 */
.wd-product.quick-shop-shown .wd-product-thumb {
	z-index: 40;
}

.wd-product .quick-shop-wrapper {
	/* Undo .wd-fill without touching .wd-fill itself. */
	position: absolute;
	inset: auto;
	top: 100%;
	left: 50%;
	z-index: 40;
	width: min(290px, calc(100vw - 32px));
	margin-top: 10px;
	margin-left: calc(min(290px, 100vw - 32px) / -2);
	max-height: var(--scarlet-panel-max);
	/* The scroll belongs to the form inside, not to the panel: the close
	   button is absolutely positioned against the panel, and scrolling the
	   panel itself would carry it up out of sight the moment the form is
	   taller than the box — which is exactly when a way out is wanted. */
	overflow: hidden;
	border: 1px solid var(--scarlet-gold);
	border-radius: 12px;
	background-color: var(--scarlet-cream);
	box-shadow: 0 14px 34px rgba(72, 26, 26, 0.24);

	/* The theme's transition stays; only who decides "shown" changes. */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.wd-product.quick-shop-shown .quick-shop-wrapper {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* The theme sizes the form to fill the picture. It now sizes to its content. */
.wd-product .quick-shop-wrapper .quick-shop-form {
	height: auto;
	max-height: var(--scarlet-panel-max);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 34px 12px 12px;
	text-align: left;
	overscroll-behavior: contain;
}

.wd-product .quick-shop-wrapper form.cart {
	display: block;
	height: auto;
}

/* Pinned to the panel while the form scrolls under it, so it needs a ground of
   its own or it sits on top of whatever has scrolled beneath. */
.wd-product .quick-shop-wrapper .quick-shop-close {
	opacity: 1;
	top: 4px;
	inset-inline-end: 6px;
	border-radius: 50%;
	background-color: var(--scarlet-cream);
	box-shadow: 0 0 0 4px var(--scarlet-cream);
}

.wd-product .quick-shop-wrapper .woocommerce-variation-add-to-cart {
	margin: 10px 0 0;
	overflow: visible;
}

.wd-product .quick-shop-wrapper .single_add_to_cart_button {
	border-radius: 8px !important;
	width: 100%;
}

/* ----------------------------------------------------- 4. Variation chips
 *
 * The parent theme's scarlet_variation_tabs() turns `attribute_type` into
 * chips and only `attribute_type`. Everything else stays a <select> — which on
 * this catalogue means the alphabet pendant's forty letters, the one product
 * with a second axis, hidden behind a dropdown inside a floating panel.
 *
 * shop-ux.js builds the same chips for every other axis. The markup mirrors the
 * theme's (.scarlet-variation-tabs / .scarlet-variation-tab) so both look
 * identical, but carries .scarlet-opt-chips as well so the theme's
 * MutationObserver and this script never fight over the same nodes.
 */

.scarlet-opt-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/* Forty letters is a grid, not a paragraph: cap it and let it scroll. */
.scarlet-opt-chips.scarlet-opt-chips--many {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	max-height: 168px;
	overflow-y: auto;
	padding-right: 4px;
}

.scarlet-opt-chips .scarlet-variation-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	min-width: 34px;
	padding: 6px 10px;
	border: 1px solid var(--scarlet-gold);
	border-radius: 5px;
	background-color: var(--scarlet-cream);
	color: #333;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.scarlet-opt-chips .scarlet-variation-tab:hover {
	border-color: var(--scarlet-ink);
}

.scarlet-opt-chips .scarlet-variation-tab.active {
	border-color: var(--scarlet-ink);
	background-color: var(--scarlet-ink);
	color: #fff;
}

/* Disabled means "not in stock with the other axis as it stands" — kept
   visible and struck through rather than removed, so the customer can see the
   combination exists and change the other axis to reach it. */
.scarlet-opt-chips .scarlet-variation-tab.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* The <select> the chips stand in for. Kept in the DOM — it is what
   WooCommerce reads, and what the chips write to. */
.scarlet-opt-chips-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* The label wants its own line. scarlet_variation_tabs() in the parent theme
   lays every variation row out as a flex row — right for one label and two
   attachment-type chips, wrong for one label and forty letters, which it
   squeezes into whatever is left of the line. Any row carrying chips of ours
   stacks instead, and inside the floating panel and the quick-view popup every
   row does, because neither is wide enough for a row of anything. */
.quick-shop-wrapper table.variations tr,
.wd-popup table.variations tr,
table.variations tr:has(.scarlet-opt-chips) {
	display: block !important;
}

table.variations tr:has(.scarlet-opt-chips) th.label,
table.variations tr:has(.scarlet-opt-chips) td.value {
	display: block;
	width: auto !important;
}

.quick-shop-wrapper table.variations th.label,
.wd-popup table.variations th.label {
	display: block;
	margin-bottom: 6px !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.quick-shop-wrapper table.variations td.value,
.wd-popup table.variations td.value {
	display: block;
}

.quick-shop-wrapper table.variations tr:not(:last-child) {
	margin-bottom: 12px;
}

/* ------------------------------------------------- 5. Inline field errors
 *
 * WooCommerce's add-to-cart-variation.js answers a click on a disabled buy
 * button with window.alert(). An alert stops the page, names no field, and on
 * a phone covers the very control it is complaining about. This is the
 * checkout's answer instead: red text under the field that is missing.
 */

.scarlet-field-error {
	display: block;
	margin: 6px 0 0;
	color: var(--scarlet-error);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.scarlet-field-error::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline-end: 5px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* `!important` because the parent theme's scarlet_variation_tabs() declares
   `border: 1px solid #E1AC42 !important` on .scarlet-variation-tab, and an
   important declaration outranks any specificity that is not also important.
   The chips here deliberately carry that same class so the two sets look
   identical, which means they inherit the problem along with the look. */
.scarlet-has-error .scarlet-opt-chips .scarlet-variation-tab,
.scarlet-has-error .scarlet-variation-tabs .scarlet-variation-tab {
	border-color: var(--scarlet-error) !important;
}

.scarlet-has-error > select {
	border-color: var(--scarlet-error);
}

/* The form-level message, for an unavailable combination — there is no one
   field to blame, so it sits with the button. */
.scarlet-form-error {
	display: block;
	margin: 0 0 8px;
	color: var(--scarlet-error);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

/* --------------------------------------------- 6. The product gallery rail
 *
 * Woodmart adds `wc-product-gallery-zoom` theme support but not
 * `wc-product-gallery-slider`, so WooCommerce's flexslider never initialises
 * and .woocommerce-product-gallery__wrapper renders as a vertical stack of
 * full-size images — a second photograph of a charm a whole screen below the
 * first, which reads as a broken page rather than as a gallery.
 *
 * It becomes a horizontal scroll-snap rail. No slider library: the browser's
 * own scrolling is the interaction, which keeps momentum, inertia and the
 * back-swipe gesture behaving natively on a phone, and the dots and arrows are
 * affordances over it rather than a state of their own.
 *
 * The inline `opacity: 0` on the gallery is flexslider's reveal hook. With no
 * flexslider it is only ever undone by a <noscript> rule, so it is undone here.
 */

.woocommerce-product-gallery {
	position: relative;
	opacity: 1 !important;
}

.woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.woocommerce-product-gallery__wrapper::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image--placeholder {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* A single image is not a gallery: no rail furniture, no snapping to nothing. */
.woocommerce-product-gallery.scarlet-gallery--single .scarlet-gallery-nav {
	display: none;
}

.scarlet-gallery-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.scarlet-gallery-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Two traps in one, and both of them silent.
 *
 * Woodmart styles every button on the site through
 * `:is(.btn, .button, button, [type="submit"], [type="button"])`. `:is()` takes
 * the specificity of its most specific argument, so that selector weighs
 * exactly as much as a single class — and the theme's stylesheet is printed
 * after this one, so a bare `.scarlet-gallery-dot` ties and loses. Hence the
 * `.scarlet-gallery-nav` prefix on everything in this block.
 *
 * The other trap is `min-height: 42px`, which beats a plain `height` and turns
 * an 8px dot into a 42px tile. Documented for the design builder's canvas
 * handles in docs/feature-builder.md §3.13: anything button-shaped and
 * deliberately small needs min- and max- in both axes.
 */
.scarlet-gallery-nav .scarlet-gallery-dot {
	width: 8px;
	min-width: 8px;
	max-width: 8px;
	height: 8px;
	min-height: 8px;
	max-height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(127, 0, 0, 0.25);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.scarlet-gallery-nav .scarlet-gallery-dot.is-active {
	background-color: var(--scarlet-ink);
	transform: scale(1.25);
}

/* Forty letters is forty gallery frames, and forty dots is a paragraph of
   punctuation. Past a handful the rail counts instead. */
.scarlet-gallery-nav .scarlet-gallery-count {
	min-width: 62px;
	color: var(--scarlet-ink);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.scarlet-gallery-nav .scarlet-gallery-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	min-width: 34px;
	max-width: 34px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
	padding: 0;
	border: 1px solid var(--scarlet-gold);
	border-radius: 50%;
	background-color: var(--scarlet-cream);
	color: var(--scarlet-ink);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.scarlet-gallery-nav .scarlet-gallery-arrow svg {
	width: 16px;
	height: 16px;
}

/* One chevron, drawn once, turned round for the other direction. */
.scarlet-gallery-nav .scarlet-gallery-arrow--next svg {
	transform: rotate(180deg);
}

.scarlet-gallery-nav .scarlet-gallery-arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* WooCommerce's zoom/lightbox trigger sits over the first frame; it belongs to
   whichever frame is on screen, so it is pinned to the gallery, not the rail. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	z-index: 3;
}

/* ----------------------------------------- 7. The bottom furniture stack
 *
 * Three things want the bottom of a phone screen, and before this they all
 * took it:
 *
 *   .woocommerce-store-notice   fixed, bottom 0, z-index 351
 *   .wd-toolbar                 fixed, bottom 0, z-index 350
 *   .scarlet-builder__bar       fixed, bottom 0, z-index 9999
 *
 * The notice therefore covered Home / Shop / Wishlist / Cart / Filters, and on
 * the builder page the design bar covered both. They are now stacked from the
 * floor up in that order — notice, toolbar, builder bar — by offsetting each
 * one by the measured height of everything beneath it.
 *
 * Measured, not assumed: the notice is two lines on a narrow phone and one on a
 * wide one, and it can be dismissed, at which point everything above it should
 * drop. shop-ux.js keeps the two custom properties current.
 */

.woocommerce-store-notice,
.woocommerce-store-notice.demo_store {
	bottom: 0;
	z-index: 349;
}

/*
 * !important, and not out of laziness: Woodmart prints its CSS parts inline
 * from `wp_head`/`wp_footer` at a priority no enqueued stylesheet can get
 * ahead of, so `.wd-toolbar { bottom: 0 }` and this rule tie on specificity
 * and the theme's wins on order. The same applies to the two rules below.
 */
.wd-toolbar {
	bottom: var(--scarlet-notice-h) !important;
}

/* Woodmart pads the page for its toolbar alone (`.sticky-toolbar-on`), and
   WooCommerce pads for the notice not at all. Both, now. The second rule
   matches the theme's two-class selector so it is not outranked on a product
   page that also carries the sticky add-to-cart bar. */
body.sticky-toolbar-on,
body.woocommerce-demo-store {
	padding-bottom: var(--scarlet-bottom-stack) !important;
}

body.sticky-toolbar-on.wd-sticky-btn-on,
body.sticky-toolbar-on.wd-sticky-btn-on-mb {
	padding-bottom: calc(var(--scarlet-bottom-stack) + var(--wd-sticky-btn-height, 0px)) !important;
}

/*
 * The WhatsApp button floats clear of the stack rather than landing on it.
 *
 * Tag-qualified on purpose. The site's own Appearance → Customise → Additional
 * CSS carries `@media (max-width: 767px) { .dc-whatsapp-float { bottom: 60px
 * !important } }` — a hand-measured nudge over the toolbar, from before any of
 * this was measured — and Customiser CSS prints inline at `wp_head` 101, after
 * every enqueued stylesheet. Equal specificity plus `!important` on both sides
 * means the later one wins, so this one needs the element name to outrank it.
 * That rule in the database is now redundant and can be deleted.
 */
a.dc-whatsapp-float,
.dc-whatsapp-float {
	bottom: calc(20px + var(--scarlet-float-clear)) !important;
}

/* Woodmart's own bottom-anchored furniture offsets itself by a hardcoded 55px
   — the toolbar's height, written down rather than measured. The measurement
   replaces the assumption, which also makes these correct when the notice is
   dismissed and the stack shrinks. Left inside `.sticky-toolbar-on` so nothing
   moves on a page the theme was not already offsetting. */
.sticky-toolbar-on .wd-sticky-btn {
	bottom: var(--scarlet-bottom-stack);
}

.sticky-toolbar-on .scrollToTop {
	bottom: calc(var(--scarlet-float-clear) + 12px);
}

.sticky-toolbar-on .wd-sticky-btn-shown.scrollToTop {
	bottom: calc(var(--scarlet-float-clear) + 12px + var(--wd-sticky-btn-height, 0px));
}

/* ---------------------------------------------------------------------------
   Icon-only buttons need a name a screen reader can reach.

   The theme writes a perfectly good label into every action button —

       <a class="wd-action-btn wd-style-icon …">
           <span class="wd-action-icon">…</span>
           <span class="wd-action-text">Add to wishlist</span>
       </a>

   — and then hides it with `display: none`. That does not merely hide it
   visually: it takes the text out of the accessibility tree, so the anchor is
   left with no accessible name at all. Lighthouse reported 28 such links on
   the shop page under "Links do not have a discernible name", and again under
   Agentic Browsing as "Accessibility tree is not well-formed" — one cause,
   two failing audits.

   Clipping instead of removing keeps the button looking identical while giving
   the link its name back. `position: absolute` and a 1px box mean it cannot
   affect the icon's layout.

   `!important` because the theme's rule has the same specificity and LiteSpeed
   combines the stylesheets in enqueue order, which puts base.css AFTER this
   file -- measured, not assumed: the theme's `display:none` sat 30 KB further
   down the combined sheet and won on source order alone. Specificity we could
   have matched; ordering we do not control.
   --------------------------------------------------------------------------- */
.wd-action-btn.wd-style-icon .wd-action-text,
.wd-product.wd-hover-quick .wd-add-btn .wd-action-text {
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
}