/*
Theme Name: Maison Barbier
Description: Chocolate-and-gold storefront for Maison Barbier, a French retailer of religious articles. A child theme of Storefront, so all WooCommerce templates, cart, checkout and filtering are inherited and battle-tested; this stylesheet reskins them in the client's requested chocolate palette.
Author: Maison Barbier rebuild
Template: storefront
Version: 1.3.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maison-barbier
Tags: e-commerce, woocommerce, chocolate, gold
*/

/* ==========================================================================
   1. Palette
   Chocolate is the client's requirement. The scale runs from near-black
   espresso (for headings and the footer) through cocoa and milk chocolate to
   caramel, warmed against cream paper rather than pure white so the whole page
   reads as one material. Gold is held back for accents only - prices, the sale
   badge, rules - because using it broadly is what makes this palette look
   cheap. Text colours are all >= 4.5:1 on their backgrounds.
   ========================================================================== */
:root {
	--mb-espresso:      #2A1710;
	--mb-cocoa:         #3E2418;
	--mb-chocolate:     #5A3320;
	--mb-chocolate-mid: #7A4A2C;
	--mb-chocolate-soft:#96603C;
	--mb-caramel:       #C68B59;
	--mb-gold:          #A9861C;
	--mb-gold-bright:   #C9A227;
	--mb-cream:         #FBF5EC;
	--mb-cream-deep:    #F3E7D6;
	--mb-paper:         #FFFDFA;
	--mb-ink:           #2E1C12;
	--mb-muted:         #7A6353;
	--mb-line:          #E7D9C8;
	--mb-line-strong:   #D6C1A8;

	--mb-font-serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
	--mb-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body,
.storefront-full-width-content.single-product div.product .woocommerce-tabs,
.woocommerce-breadcrumb {
	background-color: var(--mb-cream);
	color: var(--mb-ink);
}

body {
	font-family: var(--mb-font-sans);
	font-size: 16px;
	line-height: 1.65;
	background-color: var(--mb-cream);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title {
	font-family: var(--mb-font-serif);
	color: var(--mb-espresso);
	font-weight: 600;
	letter-spacing: .01em;
}

/* Headings scale with the viewport rather than stepping at a breakpoint. A flat
   2.6rem h1 is cramped against a 320px edge and small in the middle of a 2560px
   screen; `clamp()` moves it smoothly between the two. The middle term is written as
   `rem + vw` so it keeps responding to the user's own text-size setting instead of
   overriding it, and the bounds stop it from ever becoming unreadable or absurd. */
h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3.05rem); line-height: 1.14; }
h2 { font-size: clamp(1.5rem, 1.16rem + 1.3vw, 2.35rem); line-height: 1.2; }
h3 { font-size: clamp(1.18rem, 1.02rem + .55vw, 1.5rem); }

a {
	color: var(--mb-chocolate);
	text-decoration: none;
	transition: color .18s ease;
}
a:hover,
a:focus { color: var(--mb-gold-bright); }

/* A hairline gold rule under section headings - the theme's recurring motif. */
.mb-section-title {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem);
	color: var(--mb-espresso);
	text-align: center;
	margin: 0 0 .35em;
}
.mb-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin: .6rem auto 0;
	background: linear-gradient(90deg, transparent, var(--mb-gold-bright), transparent);
}
.mb-section-sub {
	text-align: center;
	color: var(--mb-muted);
	max-width: 46em;
	margin: 0 auto 2.2rem;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header {
	background: var(--mb-espresso);
	border-bottom: 3px solid var(--mb-gold-bright);
}
.site-header .site-title a,
.site-header .site-description,
.site-header .site-title {
	color: var(--mb-cream) !important;
}
.site-header .site-title {
	font-family: var(--mb-font-serif);
	font-size: 2rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.site-header .site-description {
	color: var(--mb-caramel) !important;
	font-size: .82rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

/* The shop's own gold logo, recovered from the archive, replaces the typeset
   wordmark. It is drawn on a transparent ground so it sits directly on the
   espresso header; it is capped in height rather than width so a very wide
   upload cannot push the navigation off the bar. */
.site-header .custom-logo-link { display: inline-block; }
.site-header img.custom-logo {
	max-height: 64px;
	width: auto;
	height: auto;
}
@media (max-width: 767px) {
	.site-header img.custom-logo { max-height: 44px; }
}
/* With a real logo present, the tagline underneath it is noise on small screens. */
@media (max-width: 767px) {
	.site-header .site-description { display: none; }
}

/* Storefront paints its nav bar white; override to cocoa. */
.storefront-primary-navigation,
.main-navigation ul.menu,
.site-header .main-navigation {
	background: var(--mb-cocoa) !important;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.storefront-primary-navigation .main-navigation a {
	color: var(--mb-cream) !important;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
	color: var(--mb-gold-bright) !important;
}
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
	border-bottom: 2px solid var(--mb-gold-bright);
}

/* Search, cart bubble and account links in the header bar. */
.site-header .site-search input[type="search"],
.site-header .widget_product_search input[type="search"] {
	background: rgba(251, 245, 236, .08);
	border: 1px solid rgba(201, 162, 39, .4);
	color: var(--mb-cream);
}
.site-header .site-search input::placeholder { color: rgba(251,245,236,.55); }
.site-header .site-header-cart .cart-contents,
.site-header .site-header-cart .amount,
.site-header .site-header-cart .count { color: var(--mb-cream) !important; }
.site-header-cart .widget_shopping_cart {
	background: var(--mb-paper);
	border-top: 3px solid var(--mb-gold-bright);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wc-block-components-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--mb-chocolate) !important;
	color: var(--mb-cream) !important;
	border: 1px solid var(--mb-chocolate) !important;
	border-radius: 2px;
	font-family: var(--mb-font-sans);
	font-size: .78rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: .85em 1.6em;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--mb-espresso) !important;
	border-color: var(--mb-gold-bright) !important;
	color: var(--mb-gold-soft, #E6CE8A) !important;
}

/* ==========================================================================
   5. Shop archive: product grid and cards
   ========================================================================== */
ul.products li.product,
.wc-block-grid__product {
	text-align: center;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price {
	padding-left: 0;
	padding-right: 0;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--mb-espresso);
	margin-top: .8rem;
	min-height: 2.7em;
}
ul.products li.product .price,
ul.products li.product .price .amount,
.wc-block-grid__product-price {
	color: var(--mb-gold) !important;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .02em;
}
ul.products li.product .price del,
ul.products li.product .price del .amount {
	color: var(--mb-muted) !important;
	font-weight: 400;
	opacity: .75;
}
ul.products li.product .price ins { text-decoration: none; }

/* Card treatment: paper on cream with a hairline, lifting on hover. */
ul.products li.product {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
	padding: .9rem .9rem 1.2rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: var(--mb-line-strong);
	box-shadow: 0 14px 30px -18px rgba(42, 23, 16, .45);
}
ul.products li.product img {
	border-radius: 2px;
	background: var(--mb-cream-deep);
}

/* Uniform media frames.
   Recovered archive images are 247px square thumbnails while the branded
   placeholders are 640px square, and a handful of originals are portrait. Left
   alone that makes the grid ragged, so every card's media is pinned to one
   aspect ratio and cropped to fill. `object-fit` degrades gracefully on the very
   old browsers that ignore it: the image simply scales instead of cropping. */
ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product a {
	display: block;
}
ul.products li.product img,
ul.products li.product .woocommerce-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* WooCommerce marks placeholders with a light grey background; drop it so the
   engraved tile is not sitting on a pale rectangle. */
ul.products li.product img.woocommerce-placeholder,
.woocommerce-placeholder {
	background: transparent;
	box-shadow: none;
}

/* The single-product gallery uses the same tile, so it needs the same
   treatment rather than stretching to the panel width. */
.single-product div.product .woocommerce-product-gallery img.woocommerce-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
}

/* Sale badge in gold rather than Storefront's blue. */
ul.products li.product .onsale,
.single-product div.product .onsale,
span.onsale {
	background-color: var(--mb-gold-bright) !important;
	color: var(--mb-espresso) !important;
	border-radius: 2px;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	min-height: 0;
	line-height: 2.1;
	padding: 0 .7em;
}

/* ==========================================================================
   6. Page furniture
   ========================================================================== */
.woocommerce-breadcrumb {
	color: var(--mb-muted);
	font-size: .78rem;
	letter-spacing: .05em;
	background: transparent;
}
.woocommerce-breadcrumb a { color: var(--mb-chocolate-mid); }

.woocommerce-products-header__title.page-title,
.page-title {
	font-family: var(--mb-font-serif);
	color: var(--mb-espresso);
}
.woocommerce-result-count,
.woocommerce-ordering select {
	font-size: .82rem;
	color: var(--mb-muted);
}
.woocommerce-ordering select {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line-strong);
	color: var(--mb-ink);
	padding: .5em .8em;
	border-radius: 2px;
}

/* Pagination. */
.woocommerce-pagination ul.page-numbers li .page-numbers {
	border: 1px solid var(--mb-line-strong);
	color: var(--mb-chocolate);
	background: var(--mb-paper);
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
	background: var(--mb-chocolate);
	border-color: var(--mb-chocolate);
	color: var(--mb-cream);
}

/* ==========================================================================
   7. Sidebar filters
   The shop's filtering is category + price + sort. The server-rendered widgets
   below still work on their own - they need no JavaScript - and
   assets/js/mb-filter.js layers an instant client-side filter over the top. The
   widgets are the fallback, not decoration: with JS off, or if the catalogue
   index fails to load, the shop behaves exactly as it does here.
   ========================================================================== */
.widget-area .widget,
.widget-area .widget-title {
	background: transparent;
}
.widget-area .widget {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
	padding: 1.1rem 1.2rem;
	margin-bottom: 1.4rem;
}
.widget-area .widget-title,
.widget-area .widgettitle {
	font-family: var(--mb-font-serif);
	font-size: 1.1rem;
	color: var(--mb-espresso);
	text-transform: none;
	letter-spacing: .01em;
	margin-bottom: .7rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--mb-line);
}
.widget-area ul li a,
.widget-area .product-categories a {
	color: var(--mb-ink);
	font-size: .9rem;
}
.widget-area ul li a:hover { color: var(--mb-gold); }
.widget-area .count { color: var(--mb-muted); }

/* Price slider in chocolate and gold. */
.widget_price_filter .ui-slider .ui-slider-range { background-color: var(--mb-chocolate-mid); }
.widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--mb-gold-bright); }
/* 0.72rem computed to 11.5px, which is below the readable floor and was the only
   text on the site under it. 0.8rem (12.8px) keeps the button small but legible. */
.widget_price_filter .price_slider_amount .button { font-size: .8rem; }

/* ==========================================================================
   8. Single product
   ========================================================================== */
.single-product div.product .product_title {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem);
	color: var(--mb-espresso);
}
.single-product div.product p.price,
.single-product div.product span.price,
.single-product div.product .price .amount {
	color: var(--mb-gold) !important;
	font-size: 1.6rem;
	font-weight: 600;
}
.single-product div.product p.price del .amount { color: var(--mb-muted) !important; font-size: 1.1rem; }
.single-product div.product .woocommerce-product-gallery img { border-radius: 3px; }
.single-product div.product .woocommerce-tabs ul.tabs li a {
	color: var(--mb-chocolate);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .12em;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mb-espresso); }
.single-product div.product .woocommerce-tabs .panel {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
	padding: 1.4rem;
}
.woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--mb-line); }
.single-product div.product form.cart .quantity .qty {
	border: 1px solid var(--mb-line-strong);
	border-radius: 2px;
}
.stock.in-stock { color: #4F7A3A; }
.stock.out-of-stock { color: #9B3B2E; }

/* ==========================================================================
   9. Notices, cart, checkout
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--mb-cream-deep) !important;
	border-top-color: var(--mb-gold-bright) !important;
	color: var(--mb-ink) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--mb-gold) !important; }

.woocommerce table.shop_table,
.woocommerce-checkout #payment,
.cart_totals table {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
}
.woocommerce table.shop_table th { color: var(--mb-espresso); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--mb-cream-deep);
	color: var(--mb-ink);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--mb-cream-deep); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line-strong);
	color: var(--mb-ink);
	border-radius: 2px;
	padding: .7em .9em;
}

/* ==========================================================================
   10. Homepage sections
   ========================================================================== */
.mb-hero {
	position: relative;
	background-color: var(--mb-espresso);
	background-image: linear-gradient(135deg, var(--mb-espresso) 0%, var(--mb-chocolate) 55%, var(--mb-chocolate-mid) 100%);
	color: var(--mb-cream);
	padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1rem, .6rem + 1.4vw, 2rem);
	text-align: center;
	overflow: hidden;
}

/* Photographic hero.
   The recovered frame is warm and busy, so a chocolate scrim is layered over it
   at roughly 85% opacity: enough to hold the headline at full contrast, light
   enough that the photograph still reads as a photograph rather than a tinted
   panel. `--mb-hero-image` is set inline by front-page.php from the attachment
   the rebuild stored, and the whole rule is inert when it is absent. */
.mb-hero--photo {
	background-image:
		linear-gradient(135deg,
			rgba(42, 23, 16, .90) 0%,
			rgba(58, 33, 22, .82) 45%,
			rgba(90, 51, 32, .72) 100%),
		var(--mb-hero-image);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	padding: clamp(3.4rem, 2.2rem + 6vw, 7.5rem) clamp(1rem, .6rem + 1.4vw, 2rem);
}
.mb-hero::after {
	/* A faint woven texture, so the large chocolate field is not flat. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 5px 5px;
	pointer-events: none;
}
.mb-hero > * { position: relative; z-index: 1; }
.mb-hero__eyebrow {
	color: var(--mb-caramel);
	letter-spacing: .3em;
	text-transform: uppercase;
	font-size: .74rem;
	margin-bottom: 1rem;
}
.mb-hero h1 {
	color: var(--mb-cream);
	font-size: clamp(1.85rem, 1.4rem + 2.3vw, 3.4rem);
	margin: 0 auto .7rem;
	max-width: 20ch;
}
.mb-hero p {
	color: rgba(251, 245, 236, .82);
	max-width: 46em;
	margin: 0 auto 2rem;
	font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
}
.mb-hero .button {
	background-color: var(--mb-gold-bright) !important;
	border-color: var(--mb-gold-bright) !important;
	color: var(--mb-espresso) !important;
}
.mb-hero .button:hover {
	background-color: var(--mb-cream) !important;
	border-color: var(--mb-cream) !important;
	color: var(--mb-espresso) !important;
}

.mb-band { padding: clamp(2.2rem, 1.6rem + 2.4vw, 4.2rem) clamp(.9rem, .5rem + 1.2vw, 1.5rem); }
.mb-band--paper { background: var(--mb-paper); }
.mb-band--cream { background: var(--mb-cream); }
/* No cap of its own: the band should line up with the rest of the page, and the
   outer width is already governed by `.col-full`. Capping it here would make the
   homepage sections narrower than the header and footer above and below them. */
.mb-band__inner { max-width: 100%; margin: 0 auto; }

/* Category tiles. */
.mb-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}
.mb-cat {
	display: block;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
	padding: 1.6rem 1rem;
	text-align: center;
	color: var(--mb-espresso);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mb-cat:hover {
	border-color: var(--mb-gold-bright);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -20px rgba(42, 23, 16, .4);
	color: var(--mb-espresso);
}
.mb-cat__name {
	font-family: var(--mb-font-serif);
	font-size: 1.15rem;
	display: block;
	margin-bottom: .25rem;
}
.mb-cat__count { color: var(--mb-muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* Photographic category tiles.
   Each tile borrows a photograph from a product that really belongs to the
   category, so it always shows something the shop sells. The scrim runs bottom
   to top because the name sits at the bottom; it is lighter than the hero's so
   the product stays legible, and contrast is held by the shadow on the text
   rather than by darkening the whole picture. */
.mb-cat--photo {
	position: relative;
	background-image:
		linear-gradient(to top,
			rgba(42, 23, 16, .90) 0%,
			rgba(42, 23, 16, .62) 42%,
			rgba(42, 23, 16, .18) 100%),
		var(--mb-cat-image);
	background-size: cover, cover;
	background-position: center, center;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-color: rgba(201, 162, 39, .35);
	overflow: hidden;
}
.mb-cat--photo .mb-cat__name {
	color: var(--mb-cream);
	text-shadow: 0 1px 6px rgba(42, 23, 16, .85);
}
.mb-cat--photo .mb-cat__count {
	color: var(--mb-caramel);
	text-shadow: 0 1px 4px rgba(42, 23, 16, .8);
}
.mb-cat--photo:hover {
	border-color: var(--mb-gold-bright);
}

/* Trust strip. */
.mb-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.6rem;
	text-align: center;
}
.mb-trust__item { padding: 1.2rem .5rem; }
.mb-trust__icon {
	color: var(--mb-gold-bright);
	font-size: 1.5rem;
	display: block;
	margin-bottom: .4rem;
}
.mb-trust__title {
	font-family: var(--mb-font-serif);
	color: var(--mb-espresso);
	font-size: 1.08rem;
	margin-bottom: .25rem;
}
.mb-trust__text { color: var(--mb-muted); font-size: .88rem; margin: 0; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer,
.footer-widgets {
	background: var(--mb-espresso);
	color: rgba(251, 245, 236, .78);
	border-top: 3px solid var(--mb-gold-bright);
}
.site-footer a,
.footer-widgets a { color: var(--mb-caramel); }
.site-footer a:hover,
.footer-widgets a:hover { color: var(--mb-gold-bright); }
.site-footer .widget-title,
.footer-widgets .widget-title {
	color: var(--mb-cream);
	border-bottom-color: rgba(201, 162, 39, .35);
}
.site-info,
.site-info a { color: rgba(251, 245, 236, .6); }

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.mb-hero { padding: 3.4rem 1rem; }
	h1 { font-size: 2rem; }
	ul.products li.product .woocommerce-loop-product__title { min-height: 0; }
	.widget-area .widget { padding: .9rem 1rem; }
}

/* Storefront's handheld nav toggle on the cocoa bar. */
@media (max-width: 767px) {
	.storefront-handheld-footer-bar {
		background: var(--mb-espresso);
		border-top: 3px solid var(--mb-gold-bright);
	}
	.storefront-handheld-footer-bar a { color: var(--mb-cream); }
	.storefront-handheld-footer-bar a:hover { color: var(--mb-gold-bright); }
	button.menu-toggle {
		background: var(--mb-chocolate) !important;
		color: var(--mb-cream) !important;
		border-color: var(--mb-chocolate) !important;
	}
}

/* ==========================================================================
   13. Instant shop filter
   Rendered by inc/shop-filter.php and driven by assets/js/mb-filter.js. The
   section starts hidden and is only revealed once the catalogue index is in
   hand, so `mb-filter-active` on <body> is what swaps the paginated grid for
   the instant one - see the fallback rules at the end of this block.
   ========================================================================== */
.mb-filter {
	margin: 0 0 2.2rem;
}

.mb-filter__controls {
	display: grid;
	/* auto-fit against the container, not the viewport. Storefront puts a sidebar
	   beside the shop, so a 1440px window gives this about 790px to work with -
	   a fixed five-column template at that width overflows under the sidebar and
	   the last control becomes unclickable. Letting the columns wrap keeps the bar
	   inside whatever space it is actually given. */
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 1.1rem;
	align-items: start;
	padding: 1.3rem 1.4rem;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(42, 23, 16, .04);
}

.mb-filter__field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 0;
}

.mb-filter__field label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mb-muted);
}

.mb-filter__field input[type="search"],
.mb-filter__field input[type="number"],
.mb-filter__field select {
	width: 100%;
	max-width: 100%;
	padding: .58rem .72rem;
	font-family: var(--mb-font-sans);
	font-size: .95rem;
	color: var(--mb-ink);
	background: var(--mb-cream);
	border: 1px solid var(--mb-line-strong);
	border-radius: 2px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mb-filter__field input:focus,
.mb-filter__field select:focus {
	border-color: var(--mb-gold-bright);
	box-shadow: 0 0 0 2px rgba(201, 162, 39, .18);
	outline: none;
}

.mb-filter__field select[multiple] {
	/* A long list scrolls in place rather than stretching the bar. */
	height: 9.6rem;
	padding: .3rem;
}

.mb-filter__field select[multiple] option {
	padding: .3rem .45rem;
	border-radius: 2px;
}

.mb-filter__field select[multiple] option:checked {
	background: var(--mb-chocolate) linear-gradient(0deg, var(--mb-chocolate), var(--mb-chocolate));
	color: var(--mb-cream);
}

.mb-filter__range {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.mb-filter__range span {
	color: var(--mb-muted);
}

.mb-filter__field--check {
	justify-content: flex-start;
	gap: .7rem;
}

.mb-filter__field--check label {
	display: flex;
	align-items: center;
	gap: .5rem;
	/* The row is only as tall as the control plus its line box, which left a 23px
	   target - one pixel under the minimum. Give it room. */
	min-height: 1.75rem;
	font-size: .86rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mb-ink);
	cursor: pointer;
}

.mb-filter__reset {
	align-self: flex-start;
	margin-top: auto;
	padding: .5rem .9rem;
	font-family: var(--mb-font-sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--mb-chocolate);
	background: transparent;
	border: 1px solid var(--mb-line-strong);
	border-radius: 2px;
	cursor: pointer;
	transition: all .15s ease;
}

.mb-filter__reset:hover {
	color: var(--mb-cream);
	background: var(--mb-chocolate);
	border-color: var(--mb-chocolate);
}

.mb-filter__status {
	margin: 1.1rem 0 .2rem;
	font-size: .88rem;
	letter-spacing: .02em;
	color: var(--mb-muted);
}

.mb-filter__more {
	margin: 2rem 0 0;
	text-align: center;
}

/* Results grid. Mirrors the shop loop's card treatment so switching between the
   instant grid and the server-rendered one is not visually jarring. */
.mb-results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.6rem 1.3rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.mb-results::before,
.mb-results::after {
	content: none;
}

.mb-result {
	margin: 0;
	list-style: none;
}

.mb-result--empty {
	grid-column: 1 / -1;
	padding: 2.6rem 1rem;
	text-align: center;
	color: var(--mb-muted);
	background: var(--mb-paper);
	border: 1px dashed var(--mb-line-strong);
	border-radius: 3px;
}

.mb-result__link {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.mb-result__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mb-cream-deep);
	border: 1px solid var(--mb-line);
	border-radius: 3px;
}

.mb-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.mb-result__link:hover .mb-result__media img {
	transform: scale(1.045);
}

.mb-result__title {
	font-family: var(--mb-font-serif);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mb-espresso);
}

.mb-result__link:hover .mb-result__title {
	color: var(--mb-chocolate-mid);
}

.mb-result__price {
	margin-top: auto;
	font-family: var(--mb-font-serif);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--mb-gold);
}

.mb-result__stock {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mb-muted);
}

/* The swap. Everything below is scoped to `mb-filter-active`, which the script
   only adds after the catalogue index has loaded - so no-JS visitors and crawlers
   keep the standard WooCommerce shop.

   Hidden individually rather than by hiding Storefront's `.storefront-sorting`
   wrapper: that wrapper is a container whose contents vary by Storefront version,
   and hiding it wholesale took the filter bar down with it when the two happened
   to nest. Naming the two controls that are actually duplicated is both narrower
   and safe wherever the markup ends up. */
body.mb-filter-active .woocommerce-result-count,
body.mb-filter-active .woocommerce-ordering,
body.mb-filter-active ul.products,
body.mb-filter-active .woocommerce-pagination {
	display: none;
}

/* ==========================================================================
   14. Store, story and marketing blocks
   Pages built from template-history.php and template-store.php, plus the
   [mb_*] shortcodes in inc/site-extras.php.
   ========================================================================== */
.mb-content-max,
.mb-story__body,
.mb-store-page__intro {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

.mb-story__hero,
.mb-store-page__hero {
	padding: 3.4rem 1.4rem 2.4rem;
	text-align: center;
	background: linear-gradient(180deg, var(--mb-cream-deep), var(--mb-cream));
	border-bottom: 1px solid var(--mb-line);
}

.mb-story__eyebrow {
	margin: 0 0 .5rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mb-gold);
}

.mb-story__title,
.mb-store-page__title {
	margin: 0;
	font-size: clamp(1.8rem, 1.32rem + 2.3vw, 3.1rem);
	line-height: 1.12;
}

.mb-story__subtitle,
.mb-store-page__address {
	margin: .7rem auto 0;
	max-width: 46ch;
	font-size: 1.06rem;
	color: var(--mb-muted);
}

.mb-story__figure {
	margin: 2.4rem auto;
	max-width: 62rem;
	padding: 0 1.4rem;
}

.mb-story__figure img {
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.mb-story__body {
	margin: 2.6rem auto;
	padding: 0 1.4rem;
	font-size: 1.08rem;
	line-height: 1.78;
}

.mb-story__body h2 {
	margin-top: 2.2rem;
	font-size: 1.7rem;
}

.mb-story__body p {
	margin-bottom: 1.2rem;
}

.mb-story__placeholder {
	padding: 1.4rem 0;
	opacity: .72;
}

.mb-story__footer,
.mb-store-page__section {
	max-width: 68ch;
	margin: 3rem auto;
	padding: 0 1.4rem;
}

.mb-story__footer h2,
.mb-store-page__section h2 {
	font-size: 1.65rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--mb-gold-bright);
	margin-bottom: 1.3rem;
}

/* --- Store details ------------------------------------------------------- */
.mb-store__list {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: .55rem 1.4rem;
	margin: 0 0 1.4rem;
}

.mb-store__list dt {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mb-muted);
	padding-top: .18rem;
}

.mb-store__list dd {
	margin: 0;
	color: var(--mb-ink);
}

.mb-store__list a {
	color: var(--mb-chocolate);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mb-hours__row {
	margin: 0;
	padding: .5rem 0;
	border-bottom: 1px dotted var(--mb-line-strong);
	color: var(--mb-ink);
}

.mb-hours__row:last-child {
	border-bottom: 0;
}

/* --- Location / Waze ----------------------------------------------------- */
.mb-location__map {
	margin-bottom: 1.3rem;
	overflow: hidden;
	background: var(--mb-cream-deep);
	border: 1px solid var(--mb-line-strong);
	border-radius: 3px;
	line-height: 0;
}

.mb-location__map iframe {
	display: block;
	width: 100%;
}

.mb-location__address {
	margin: 0 0 .9rem;
	font-size: 1.05rem;
	color: var(--mb-ink);
}

/* --- Social -------------------------------------------------------------- */
.mb-social {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
}

.mb-social li {
	margin: 0;
}

.mb-social__link {
	display: inline-block;
	padding: .5rem 1rem;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--mb-chocolate);
	background: var(--mb-paper);
	border: 1px solid var(--mb-line-strong);
	border-radius: 2px;
	text-decoration: none;
	transition: all .15s ease;
}

.mb-social__link:hover {
	color: var(--mb-cream);
	background: var(--mb-chocolate);
	border-color: var(--mb-chocolate);
}

/* --- Newsletter ---------------------------------------------------------- */
.mb-newsletter {
	margin: 0 0 1.8rem;
	padding: 1.4rem 1.5rem;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-left: 4px solid var(--mb-gold-bright);
	border-radius: 3px;
}

.mb-newsletter__label {
	display: block;
	margin-bottom: .8rem;
	font-family: var(--mb-font-serif);
	font-size: 1.24rem;
	font-weight: 600;
	color: var(--mb-espresso);
}

.mb-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.mb-newsletter__row input[type="email"] {
	flex: 1 1 15rem;
	min-width: 0;
	padding: .68rem .8rem;
	font-size: .98rem;
	background: var(--mb-cream);
	border: 1px solid var(--mb-line-strong);
	border-radius: 2px;
}

.mb-newsletter__row input[type="email"]:focus {
	border-color: var(--mb-gold-bright);
	box-shadow: 0 0 0 2px rgba(201, 162, 39, .18);
	outline: none;
}

.mb-newsletter__note {
	margin: .8rem 0 0;
	font-size: .84rem;
	color: var(--mb-muted);
}

/* --- Podcast ------------------------------------------------------------- */
.mb-podcast__heading {
	font-size: 1.4rem;
	margin-bottom: 1.1rem;
}

.mb-episode {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--mb-line);
}

.mb-episode:last-child {
	border-bottom: 0;
}

.mb-episode__title {
	margin: 0 0 .3rem;
	font-size: 1.16rem;
	line-height: 1.35;
}

.mb-episode__meta {
	margin: 0 0 .7rem;
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mb-muted);
}

.mb-episode__player {
	width: 100%;
	max-width: 100%;
	height: 40px;
	margin: .2rem 0 0;
}

.mb-episode__desc {
	margin: .7rem 0 0;
	font-size: .94rem;
	color: var(--mb-muted);
}

/* --- Administrator-only setup notice ------------------------------------- */
.mb-setup-notice {
	padding: .85rem 1.1rem;
	margin: 1rem 0;
	font-size: .92rem;
	color: #5A3320;
	background: #FDF6E3;
	border: 1px dashed var(--mb-gold);
	border-left: 4px solid var(--mb-gold-bright);
	border-radius: 3px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
	.mb-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.mb-filter__controls {
		grid-template-columns: 1fr;
		gap: .9rem;
		padding: 1.1rem;
	}

	.mb-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.2rem .9rem;
	}

	.mb-story__hero,
	.mb-store-page__hero {
		padding: 2.4rem 1.1rem 1.8rem;
	}

	.mb-store__list {
		grid-template-columns: 1fr;
		gap: .15rem 0;
	}

	.mb-store__list dt {
		padding-top: .6rem;
	}

	.mb-newsletter__row {
		flex-direction: column;
	}

	.mb-location__map iframe {
		height: 320px;
	}
}

@media (max-width: 460px) {
	.mb-results {
		grid-template-columns: 1fr 1fr;
	}

	.mb-result__title {
		font-size: .94rem;
	}
}

/* ==========================================================================
   15. All viewports, not just the middle of the range
   The rules above were written for the middle of the range - a window between
   roughly 768px and 1440px - and they are correct there. This section covers the two
   ends, which is where the theme was quietly failing.

   Small screens. Storefront only assigns product-grid widths from 768px upward, so
   below that the fallback is one full-width card per row and a phone scrolls a
   single product per screen. Checkboxes measured 13px, the price filter's button
   11.5px, and text fields 15px - and iOS Safari zooms the entire page when a field
   under 16px takes focus, which made the filter bar unusable the moment a customer
   started typing into it.

   Large screens. Storefront caps `.col-full` at 66.4989378333em, which with its
   padding measures 1148px, and then stops growing. On a 1920px display the shop
   occupied 60% of the screen, on 2560px 45%, and on an ultrawide about a third. The
   cap is lifted in steps below, with `min(100% - gutter, cap)` so a gutter always
   survives no matter how wide the window gets.

   How large a card may become is decided by the files that actually exist, not by
   taste. Archived photography in the instant grid is served at 247px with no
   `srcset`, so that grid gains *columns* instead of growing cards past 247px - a
   247px file stretched across a 430px card is visibly soft. The homepage rows are
   exempt: those images carry a `srcset` up to 768w, so the browser simply fetches a
   larger file and the cards can grow.
   ========================================================================== */

/* --- A thirteen-item menu sharing a two-thirds bar ------------------------ */
/* The primary menu holds thirteen items, and Storefront gives it 73.9% of the
   container to share with the cart while padding every link at 1.618em vertically
   and 1em horizontally. Between 768px and roughly 1300px that wraps to three or
   four rows and the navigation bar alone measured 251px - a third of a tablet
   screen spent before any content appears. Tightening the padding and
   letter-spacing packs more items into a row and stops each wrapped row from being
   mostly empty space, taking that bar to roughly 90-135px. */
@media (min-width: 768px) and (max-width: 1500px) {
	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: .9rem .6rem;
		font-size: .78rem;
		letter-spacing: .08em;
	}
}

/* --- Large screens: lift Storefront's fixed container cap ----------------- */
@media (min-width: 1280px) {
	.col-full {
		box-sizing: border-box;
		max-width: min(calc(100% - 4rem), 1200px);
	}
}
@media (min-width: 1440px) {
	.col-full { max-width: min(calc(100% - 4rem), 1320px); }
}
@media (min-width: 1600px) {
	.col-full { max-width: min(calc(100% - 4rem), 1460px); }
}
@media (min-width: 1800px) {
	.col-full { max-width: min(calc(100% - 4rem), 1600px); }
}
@media (min-width: 2100px) {
	.col-full { max-width: min(calc(100% - 4rem), 1740px); }
}
@media (min-width: 2560px) {
	.col-full { max-width: min(calc(100% - 4rem), 1860px); }
}

/* From 768px up `.col-full` provides the page gutter itself, so the band's own
   horizontal padding was a second inset that pushed homepage sections about 20px
   inside the header and footer above and below them. Drop it so they line up. */
@media (min-width: 768px) {
	.mb-band { padding-left: 0; padding-right: 0; }
}

/* --- Product grids below Storefront's desktop breakpoint ------------------ */
/* Storefront sizes these only from 768px up, so each of the column classes needs a
   sub-768 answer rather than the single full-width fallback. */
@media (max-width: 767px) {
	ul.products li.product,
	ul.products.columns-2 li.product,
	ul.products.columns-3 li.product,
	ul.products.columns-4 li.product,
	ul.products.columns-5 li.product,
	ul.products.columns-6 li.product {
		float: left;
		width: 48%;
		margin-right: 4%;
		margin-bottom: 1.4rem;
	}
	ul.products li.product:nth-child(2n) { margin-right: 0; }
	ul.products li.product:nth-child(2n + 1) { clear: both; }
	/* An explicitly single-column grid stays single-column. */
	ul.products.columns-1 li.product { float: none; width: 100%; margin-right: 0; }
	ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; }
}

/* The cards above float, so the list itself has to contain them. */
ul.products::after { content: ""; display: table; clear: both; }

/* --- The instant shop grid gains columns rather than larger cards --------- */
/* Archived photography in this grid is served at 247px with no srcset, so the cards
   are kept near that width: four columns while the content area is wide enough for
   them, then a fifth and finally a sixth as the container grows. The step happens at
   1800px rather than 1600px because at 1600px four columns render at ~239px - almost
   exactly the source resolution - whereas a fifth column there would shrink every
   card to 187px for no gain in sharpness. */
@media (min-width: 1800px) {
	.mb-results { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2400px) {
	.mb-results { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Tap targets ---------------------------------------------------------- */
/* Checkboxes and radios rendered at 13px, which is a pinpoint on a phone. 1.5rem is
   the WCAG 2.2 minimum and the size that actually suits a thumb; the wrapping label
   is still the primary target, but the box itself has to be findable. */
input[type="checkbox"],
input[type="radio"] {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	vertical-align: middle;
}

/* Breadcrumb links measured 15px tall. */
.woocommerce-breadcrumb a {
	display: inline-block;
	padding: .4em 0;
}

/* Review stars are 1em anchors. Growing the box adds hit area without moving the
   glyph, because `::before` is absolutely positioned - but it then has to be
   re-centred, or the five stars spread apart. */
p.stars a { height: 1.5em; width: 1.5em; }
p.stars a::before { top: .25em; left: .25em; }

/* --- Legibility and the iOS focus zoom ----------------------------------- */
@media (max-width: 767px) {
	/* 16px is Safari's threshold for zooming on focus, not a preference: at 15px the
	   whole layout jumps as soon as a customer taps the search or price field. */
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	select,
	textarea,
	.woocommerce form .form-row input.input-text,
	.mb-filter__field input[type="search"],
	.mb-filter__field input[type="number"],
	.mb-filter__field select {
		font-size: 16px;
	}
}

/* The recovered catalogue contains titles that are single long tokens, which would
   otherwise force a card wider than its column. */
.woocommerce-loop-product__title,
.mb-result__title,
.single-product div.product .product_title,
.mb-cat__name,
.mb-episode__title {
	overflow-wrap: break-word;
}

/* Category tiles were a flat 190px tall, which reads as a strip on a wide screen
   and as a slab beside a 2-column grid on a narrow one. */
.mb-cat--photo { min-height: clamp(150px, 11vw, 230px); }