/* ==========================================================================
   Maison Carré - front-end fixes
   Loaded by mu-plugins/mc-site-fixes.php
   Everything here is additive. Delete the mu-plugin and the site is exactly
   as it was before.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gift price "/ 1"
   Fixed at the source instead of here: the meta key
   woodmart_price_unit_of_measure was set to "1" on the 7 Gift Set products
   (1338, 1370, 1389, 1398, 1406, 1411, 1785) and the theme prints a "/"
   before that value via .wd-price-unit::before. Those 7 values were cleared
   to match the other 41 products, so there is no CSS needed and the theme's
   price-unit feature still works if it is ever wanted.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Product grid - equal card heights, aligned prices
   Measured before: card heights ranged 387px-434px inside a single row, so
   the prices sat at different levels across the row.
   Cards are turned into full-height flex columns and the price is pushed to
   the bottom, so every price in a row lines up regardless of title length.
   -------------------------------------------------------------------------- */
.wd-products-element .wd-product,
.products .wd-product,
.products .product-grid-item {
	display: flex;
}

.wd-product > .product-wrapper,
.product-grid-item > .product-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wd-product .product-element-bottom,
.product-grid-item .product-element-bottom {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* price always sits at the bottom of the card */
.wd-product .product-element-bottom > .price,
.product-grid-item .product-element-bottom > .price {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   3. Product titles - no mid-word breaks, consistent height
   Before: "ALLEE IMPRESSIONNISTE" wrapped to 2 lines on desktop and 3 on
   mobile, and on mobile it split mid-word into "IMPRESSIONNI / STE".
   Two lines are reserved for every card so short and long names align, and
   word-break is disabled so words are never cut in half.
   -------------------------------------------------------------------------- */
.wd-product .wd-entities-title,
.product-grid-item .wd-entities-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2em * 1.3);
	line-height: 1.3;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* --------------------------------------------------------------------------
   4. Mobile - fit the longest product name on one or two clean lines
   At 390px wide with a 2-column grid each card is roughly 165px of usable
   width. The current title size cannot fit "IMPRESSIONNISTE", which is what
   forces the mid-word break. Stepping the size down on small screens only
   lets the longest name wrap naturally.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* The theme sets 21px here from its own generated stylesheet, which wins on
	   specificity, so this one property is forced. At 21px the word needs 191px
	   and the card is only 155px wide - that gap is what caused the mid-word
	   break. 16px brings the longest name down to ~145px so it fits cleanly. */
	.wd-products-element .wd-product .wd-entities-title,
	.products .wd-product .wd-entities-title,
	.products .product-grid-item .wd-entities-title,
	.wd-product .wd-entities-title a,
	.product-grid-item .wd-entities-title a {
		font-size: 16px !important;
		letter-spacing: 0.02em;
	}

	.wd-product .wd-product-cats,
	.product-grid-item .wd-product-cats {
		font-size: 11px;
	}
}

/* --------------------------------------------------------------------------
   5. Floating elements overlapping the product cards on mobile
   The currency switcher was sitting on top of the grid. Kept visible but
   pushed behind nothing important and out of the card area.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.wmc-currency-switcher-wrapper,
	.wmc-currency-wrapper {
		z-index: 99;
	}

	.grecaptcha-badge {
		bottom: 70px !important;
	}
}

/* --------------------------------------------------------------------------
   6. Contact form - match the brand instead of the browser default
   The Elementor form fields were rendering in Roboto 16px, which is the
   fallback font, not the site font. Inheriting the theme font here so the
   form stops looking bolted on.
   -------------------------------------------------------------------------- */
/* Elementor's global kit sets Roboto on form fields through a CSS variable,
   which beats a plain rule here - hence !important. "inherit" resolves to the
   body font (currently Lato), so if the theme font is ever changed the form
   follows it automatically instead of being pinned to a hardcoded name. */
.elementor-form .elementor-field-textual,
.elementor-form .elementor-field-textual::placeholder,
.elementor-form select.elementor-field-textual {
	font-family: inherit !important;
}

.elementor-form .elementor-field-textual {
	font-size: 15px;
	letter-spacing: 0.01em;
}

/* stop the number-field spinner arrows showing on the phone field */
.elementor-form input[type="number"]::-webkit-outer-spin-button,
.elementor-form input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.elementor-form input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* --------------------------------------------------------------------------
   7. Newsletter sign-up form
   It was rendering completely unstyled: default input box, default checkbox
   and a grey system button, and on the contact and shop pages it was cut
   off at the bottom. Styled to match the brand and given room to breathe.
   -------------------------------------------------------------------------- */
.tnp-subscription {
	max-width: 480px;
	margin: 0;
}

.tnp-subscription .tnp-field {
	margin-bottom: 14px;
}

.tnp-subscription .tnp-field-email label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* the plugin's own grey was almost unreadable on the blue panel */
	color: rgba(255, 255, 255, 0.85);
}

.tnp-subscription input[type="email"],
.tnp-subscription input[type="text"] {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.tnp-subscription input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.tnp-subscription input[type="email"]:focus {
	outline: none;
	border-color: #fff;
	background: rgba(255, 255, 255, 0.2);
}

/* Privacy checkbox. The plugin nests the checkbox inside the label, which is
   why it was rendering jammed against the text with no alignment. */
.tnp-subscription .tnp-privacy-field {
	margin-bottom: 20px;
}

.tnp-subscription .tnp-privacy-field label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

.tnp-subscription .tnp-privacy-field a {
	color: #fff;
	text-decoration: underline;
}

.tnp-subscription .tnp-privacy-field input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.7);
	accent-color: #1a1a1a;
	cursor: pointer;
}

.tnp-subscription .tnp-submit {
	width: auto;
	min-width: 180px;
	height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #1a1a1a;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.tnp-subscription .tnp-submit:hover {
	opacity: 0.85;
}

/* the section the form sits in was clipping the button off at the bottom */
.tnp-subscription {
	padding-bottom: 10px;
}
/* ==========================================================================
   Product page - two-column layout with a sticky buy box
   Prototype: injected and measured against the live pages before deploying.

   The three single-product templates (Twillies, Gift Sets, everything else)
   all share the same structure:

     row .e-con                     display:flex
       +- image column              50%
       +- gallery column            50%
            +- gallery widget
            +- buy box   position:absolute   <- desktop, floats over the photos
            +- buy box   display:none        <- mobile copy

   The buy box is a grandchild of the row, so it cannot be a column of that
   row on its own. "display: contents" on the gallery column removes that
   wrapper from the layout without removing it from the document, which
   promotes the gallery widget and the buy box to real columns of the row.
   Nothing is deleted and nothing is reparented in the page structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

	/* the row holding images + buy box */
	body.single-product .e-con:has(> .e-con > .e-con > .elementor-widget-woocommerce-product-add-to-cart) {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 32px;
	}

	/* dissolve the gallery column so its children become columns of the row */
	body.single-product .e-con:has(> .e-con > .elementor-widget-woocommerce-product-add-to-cart):has(> .elementor-widget-gallery) {
		display: contents;
	}

	/* left: the single large image */
	body.single-product .e-con:has(> .e-con > .e-con > .elementor-widget-woocommerce-product-add-to-cart)
		> .e-con:not(:has(.elementor-widget-woocommerce-product-add-to-cart)) {
		flex: 0 0 30%;
		max-width: 30%;
		/* without this the column stretches to the height of the tallest one
		   and its background shows as a grey band under the photo */
		align-self: flex-start;
	}

	/* middle: the gallery of remaining shots */
	body.single-product .e-con:has(> .e-con > .elementor-widget-woocommerce-product-add-to-cart) > .elementor-widget-gallery {
		flex: 0 0 30%;
		max-width: 30%;
	}

	/* right: the buy box, out of absolute positioning and made sticky */
	body.single-product .e-con:has(> .elementor-widget-woocommerce-product-add-to-cart) {
		position: sticky !important;
		top: 110px;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		flex: 0 0 34%;
		max-width: 34%;
		align-self: flex-start;
		z-index: 5;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   The mobile copy of the buy box sits after the full gallery, which put
   Add to Cart roughly three screens down. Moving it above the gallery puts
   the price and the button straight after the first photo.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	body.single-product .e-con:has(> .elementor-widget-gallery):has(> .e-con > .elementor-widget-woocommerce-product-add-to-cart) {
		display: flex;
		flex-direction: column;
	}

	body.single-product .e-con:has(> .elementor-widget-gallery):has(> .e-con > .elementor-widget-woocommerce-product-add-to-cart)
		> .e-con:has(> .elementor-widget-woocommerce-product-add-to-cart) {
		order: -1;
	}
}
/* ==========================================================================
   Currency switcher - mobile
   Before: a fixed panel parked 190px off-screen at 30% height, z-index
   2147483647 (above everything, including the menu), that expanded into a
   515px-tall alphabetical list floating over the products.
   After: a compact pill docked bottom-right showing the active currency,
   which opens as a proper bottom sheet with a capped height.
   ========================================================================== */
@media (max-width: 1024px) {

	/* Max z-index meant it painted over the mobile menu and the cart drawer.
	   9990 keeps it above page content but below the theme's own overlays. */
	body .woocommerce-multi-currency.wmc-sidebar {
		z-index: 9990 !important;
		transform: none !important;
		transition: none !important;
		/* the plugin pads the panel to make room for its slide-out tab; that
		   padding is what made the collapsed pill 100px tall and left a strip
		   of empty green above the sheet heading */
		padding: 0 !important;
		margin: 0 !important;
	}

	/* ---------- collapsed: a pill in the bottom-right corner ----------
	   The panel holds two separate parts: the currency row and the plugin's
	   own open/close toggle. Stacked they came to 100px tall, so they are
	   laid out side by side and the pill styling moved onto the panel, which
	   keeps the toggle working - it is the element that opens the list. */
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) {
		top: auto !important;
		bottom: 74px !important;          /* clear of the reCAPTCHA badge */
		right: 12px !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		display: flex !important;
		align-items: center !important;
		background: #183d33 !important;
		border-radius: 999px !important;
		overflow: hidden !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28) !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-sidebar-open {
		width: 30px !important;
		height: 46px !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency-content-right {
		display: flex !important;
		align-items: center !important;
		height: auto !important;
	}

	/* the toggle is a child of the list, not a sibling of it, so the row
	   layout has to be applied here for the two to sit side by side */
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-list-currencies {
		display: flex !important;
		align-items: center !important;
		width: auto !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* only the currency in use is shown when collapsed */
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-title,
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency:not(.wmc-active) {
		display: none !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency.wmc-active {
		display: block !important;
		width: auto !important;
		height: auto !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency.wmc-active a {
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		width: auto !important;
		height: 46px !important;
		padding: 0 16px 0 12px !important;
	}

	/* The flags come from one sprite sheet, each flag found by a background
	   offset tuned to a 60x40 cell. Shrinking the box and the sheet together
	   throws those offsets out and the flag disappears, so the box is left at
	   its natural size and scaled visually instead - the same approach the
	   plugin uses for its own header switcher. The negative margin reclaims
	   the width the scaled-down flag no longer occupies. */
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency.wmc-active .vi-flag-64 {
		transform: scale(0.5) !important;
		transform-origin: left center !important;
		margin: 0 -30px 0 0 !important;
	}

	/* ---------- expanded: bottom sheet ---------- */
	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover {
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: 62vh !important;
		border-radius: 14px 14px 0 0 !important;
		overflow: hidden !important;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3) !important;
		/* the panel's own background is a translucent white, which let the page
		   show through the part of the sheet the list did not fill */
		background: #183d33 !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover .wmc-list-currencies {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 62vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		/* the plugin offsets the list upwards so it opens above the collapsed
		   tab. Anchored to the sheet instead, or the top rows are clipped. */
		position: relative !important;
		top: 0 !important;
		bottom: auto !important;
		left: 0 !important;
		margin: 0 !important;
		transform: none !important;
	}

	/* the heading stays put while the list scrolls under it */
	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover .wmc-title {
		position: sticky !important;
		top: 0 !important;
		z-index: 2 !important;
		padding: 14px 16px !important;
		font-size: 13px !important;
		letter-spacing: 0.12em !important;
		text-transform: uppercase !important;
	}

	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover .wmc-currency {
		display: block !important;
		width: 100% !important;
		float: none !important;
	}

	/* 46px keeps every row a comfortable tap target */
	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover .wmc-currency a {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		min-height: 46px !important;
		padding: 0 16px !important;
	}
}

/* --------------------------------------------------------------------------
   Currency code alongside the symbol
   Australian, Canadian and US dollars all render as a bare "$", so the list
   gave three identical-looking rows. The plugin puts the code in a data
   attribute on the link, so it can be shown without touching the plugin.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	body .woocommerce-multi-currency.wmc-sidebar.wmc-hover .wmc-currency-redirect::after {
		content: attr(data-currency);
		margin-left: 10px;
		font-size: 12px;
		letter-spacing: 0.1em;
		opacity: 0.75;
	}

	/* and on the collapsed pill, so the shopper can see what they are in */
	body .woocommerce-multi-currency.wmc-sidebar:not(.wmc-hover) .wmc-currency.wmc-active .wmc-currency-redirect::after {
		content: attr(data-currency);
		margin-left: 6px;
		font-size: 12px;
		letter-spacing: 0.08em;
		opacity: 0.9;
	}
}

/* --------------------------------------------------------------------------
   8. PO Box warning at checkout
   A note, not an error - the order is never blocked - so it is styled as a
   caution rather than in the red the checkout uses for genuine failures.
   -------------------------------------------------------------------------- */
#mc-pobox-notice .mc-pobox-warning {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 3px solid #b8862b;
	background: #fdf6e7;
	color: #4a3a15;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   9. Import duties notice in the cart and checkout totals
   Deliberately quiet - it belongs with the small print, not shouted.
   -------------------------------------------------------------------------- */
tr.mc-duties td {
	padding-top: 12px !important;
	font-size: 13px;
	line-height: 1.5;
	color: #6b6b6b;
	border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* --------------------------------------------------------------------------
   10. Newsletter opt-in at checkout
   Sits just above the pay button, so it needs to read as a quiet choice
   rather than another required field competing with the checkout.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .form-row.mc-optin {
	margin: 4px 0 16px;
	padding: 0;
}

.woocommerce-checkout .form-row.mc-optin label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	line-height: 1.45;
	color: #4a4a4a;
	cursor: pointer;
}

.woocommerce-checkout .form-row.mc-optin input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
}

/* WooCommerce appends "(optional)" to any non-required field. On a marketing
   tickbox that reads as clutter - the box being untickable is the point. */
.woocommerce-checkout .form-row.mc-optin .optional {
	display: none;
}

/* -------------------------------------------------------------------------
   11. Labour Day promotion - announcement bar + homepage flyer.
   Colours are lifted from the flyer itself so the two read as one piece.
   ------------------------------------------------------------------------- */
.mc-promo-bar {
	/* The theme pulls .main-page-wrapper up over the top of the page with a
	   negative margin, and its white background painted straight over this bar
	   - the bar was in the DOM, the right size, the right colour, and
	   completely invisible. Lift it out of that. */
	position: relative;
	z-index: 100;
	background: #2e2621;
	text-align: center;
	padding: 11px 16px;
	line-height: 1.4;
}

.mc-promo-bar a {
	color: #f3ece2;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: .11em;
	text-transform: uppercase;
	display: inline-block;
}

.mc-promo-bar a:hover,
.mc-promo-bar a:focus {
	color: #fff;
}

.mc-promo-bar strong {
	font-weight: 600;
	color: #fff;
}

.mc-promo-pct {
	color: #d8b877;
}

.mc-promo-sep {
	opacity: .45;
	margin: 0 3px;
}

/* Drop the least important clause first, then the dates, rather than letting
   the bar grow to three lines on a phone. */
@media (max-width: 767px) {
	.mc-promo-bar a {
		font-size: 10.5px;
		letter-spacing: .07em;
	}
}

.mc-promo-flyer {
	/* This lands inside a flex .row, so without an explicit width it shrinks to
	   fit its contents and reads as a stray column rather than a band. */
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	/* The theme floats the header over the top of the page content on this
	   template, so this band is also the backdrop for the navigation. That
	   navigation is WHITE - it is built to sit over a dark hero photo. A cream
	   band measured 1.14:1 against it, which is invisible; this measures
	   14.8:1. Taken from the dark panel in the flyer itself. */
	background: #2e2621;
	text-align: center;
	/* Clearance for the floating header. Measured, not guessed: the header
	   occupies 42-184px at 1280, 42-200px at 1024, 56-183px at 768 and
	   52-158px at 390, while this band starts at roughly 34-48px. */
	padding: 150px 16px 34px;
}

@media (min-width: 768px) {
	.mc-promo-flyer {
		padding: 205px 16px 44px;
	}
}

.mc-promo-flyer a {
	display: inline-block;
	max-width: 380px;
	width: 100%;
	text-decoration: none;
}

.mc-promo-flyer img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.mc-promo-cta {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 34px;
	background: #d8b877;
	color: #2e2621;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background .2s ease;
}

.mc-promo-flyer a:hover .mc-promo-cta,
.mc-promo-flyer a:focus .mc-promo-cta {
	background: #f3ece2;
	color: #2e2621;
}

@media (max-width: 767px) {
	.mc-promo-flyer a {
		max-width: 300px;
	}
}

/* -------------------------------------------------------------------------
   12. Memory Tag explainer.
   Sits inside the buy box, so it has to earn its height - compact type, three
   short steps, no decoration that does not explain something.
   ------------------------------------------------------------------------- */

/* form.cart is already display:flex; flex-wrap:wrap on this theme, so ordering
   the children is free. Only the hidden inputs are left at the default 0, and
   they have no box. */
body.single-product form.cart .tc-extra-product-options { order: 1; }
body.single-product form.cart .mc-memory-explainer { order: 2; }
body.single-product form.cart .tc-totals-form { order: 3; }
body.single-product form.cart .quantity { order: 4; }
body.single-product form.cart .single_add_to_cart_button { order: 5; }

.mc-memory-explainer {
	width: 100%;
	margin: 14px 0 4px;
	padding: 15px 16px 13px;
	border: 1px solid rgba(46, 38, 33, .16);
	background: rgba(255, 255, 255, .55);
	color: #2e2621;
	text-align: left;
}

.mc-memory-title {
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #2e2621;
}

.mc-memory-lede {
	margin: 0 0 13px;
	font-size: 13px;
	line-height: 1.5;
}

.mc-memory-subtitle {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	opacity: .68;
}

.mc-memory-steps {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	counter-reset: mc-step;
}

.mc-memory-steps li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
}

.mc-memory-steps li:last-child {
	margin-bottom: 0;
}

.mc-memory-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #2e2621;
	color: #d8b877;
}

/* Numbering comes from the counter rather than the list marker, so the icon
   and the number can sit on the same line without the browser's own indent. */
.mc-memory-step-text {
	padding-top: 6px;
}

.mc-memory-step-text::before {
	counter-increment: mc-step;
	content: counter(mc-step) ". ";
	font-weight: 600;
}

.mc-memory-foot {
	margin: 0;
	padding-top: 11px;
	border-top: 1px solid rgba(46, 38, 33, .13);
	font-size: 12px;
	opacity: .72;
}

@media (max-width: 767px) {
	.mc-memory-explainer {
		padding: 13px 14px 11px;
	}

	.mc-memory-lede,
	.mc-memory-steps li {
		font-size: 12.5px;
	}

	.mc-memory-icon {
		width: 30px;
		height: 30px;
	}

	.mc-memory-icon svg {
		width: 22px;
		height: 22px;
	}
}

/* The theme sets fill:currentColor and a width on every inline svg, and CSS
   beats the fill="none" presentation attribute - the line icons rendered as
   solid blobs, squashed to half width. Measured: fill came back as the gold,
   box as 13x26 instead of 26x26. */
.mc-memory-icon svg,
.mc-memory-icon svg * {
	fill: none !important;
	stroke: currentColor !important;
}

.mc-memory-icon svg {
	width: 26px !important;
	height: 26px !important;
	min-width: 26px;
	display: block;
}

@media (max-width: 767px) {
	.mc-memory-icon svg {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px;
	}
}

/* Small print under the subscribe popup's offer. */
.mc-coupon-note {
	margin-top: 8px !important;
	font-size: 12px !important;
	opacity: .7;
}

/* -------------------------------------------------------------------------
   13. Shop sidebar filter - drop the counts, and make the whole thing read
   like the rest of the brand rather than a default form.
   The block is woocommerce/product-filters (a block widget, not the old
   widget), so the count is its own element and can simply be hidden - no
   markup surgery, and the filter itself is untouched.
   ------------------------------------------------------------------------- */
.wc-block-product-filter-checkbox-list__count {
	display: none !important;
}

.sidebar-container .widget-area .wp-block-heading {
	margin: 0 0 16px !important;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(46, 38, 33, .14);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: #2e2621;
}

.sidebar-container .wc-block-product-filter-checkbox-list__item {
	margin-bottom: 13px;
}

.sidebar-container .wc-block-product-filter-checkbox-list__item:last-child {
	margin-bottom: 0;
}

.sidebar-container .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
	font-size: 14px;
	letter-spacing: .015em;
	color: #4a423b;
	transition: color .18s ease;
}

.sidebar-container .wc-block-product-filter-checkbox-list__label:hover {
	color: #2e2621;
}

/* A plain square outline rather than the browser's grey box. */
.sidebar-container .wc-block-product-filter-checkbox-list__input {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid rgba(46, 38, 33, .32);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.sidebar-container .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__input {
	border-color: rgba(46, 38, 33, .6);
}

.sidebar-container .wc-block-product-filter-checkbox-list__input:checked {
	background: #2e2621;
	border-color: #2e2621;
}

.sidebar-container .wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid #d8b877;
	outline-offset: 2px;
}

/* Same trap as the Memory Tag icons - the theme fills every inline svg with
   currentColor, which turns this tick into a solid block. */
.sidebar-container .wc-block-product-filter-checkbox-list__mark {
	fill: none !important;
	stroke: #d8b877 !important;
	color: #d8b877;
}

.sidebar-container .wc-block-product-filter-checkbox-list__text {
	line-height: 1.35;
}

/* The grey square is not the checkbox - it is a ::before on the wrapper,
   filled with currentColor at 10% opacity. And WooCommerce styles the input
   with `input[type="checkbox"].class`, which outranks a two-class selector,
   so my border was computing as transparent. Measured both rather than
   assuming mine had won. */
.sidebar-container .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.sidebar-container input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid rgba(46, 38, 33, .34);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.sidebar-container .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border-color: rgba(46, 38, 33, .62);
}

.sidebar-container input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: #2e2621;
	border-color: #2e2621;
}