/*
Theme Name:   Maison
Theme URI:    https://example.com/maison
Description:  A luxury-minimal WooCommerce child theme for Storefront, styled after high-fashion boutiques: pure-black header with white uppercase navigation, edge-to-edge imagery, borderless product cards, sharp corners, and Noto Sans typography. Monochrome by design.
Author:       Peter Man
Author URI:   https://example.com
Template:     storefront
Version:      1.2.8
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  maison
Tags:         woocommerce, e-commerce, fashion, minimal, custom-colors, custom-menu, featured-images
*/

/* ==========================================================================
   Design tokens — sampled from a high-fashion boutique storefront
   ========================================================================== */
:root {
	--ma-black:        #000000; /* header */
	--ma-ink:          #151515; /* text, buttons, footer, sale badge */
	--ma-white:        #ffffff;
	--ma-border:       #e2e2e2; /* hairlines */
	--ma-form-border:  #dedede;
	--ma-instock:      #279a4b;
	--ma-lowstock:     #fb9e5b;
	--ma-star:         #fd9a52;
	--ma-muted:        #767676;
	--ma-footer-bg:    #151515;
	--ma-footer-line:  #444444;
	--ma-radius:       0px;     /* sharp corners throughout */
	--ma-gold:         #b89b5e; /* restrained metallic accent */
	--ma-cream:        #f7f5f1; /* warm section background */
	--ma-serif:        "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Typography — Noto Sans, uppercase display headings
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ma-ink);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--ma-ink);
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* Elegant serif for large display moments */
.ma-serif { font-family: var(--ma-serif); font-weight: 500; letter-spacing: 0.01em; }

/* Section headings — refined serif with a short gold rule beneath */
.section-title,
.woocommerce .storefront-product-section .section-title,
.storefront-product-section h2,
.page-title,
.entry-title {
	font-family: var(--ma-serif);
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 500;
	text-align: center;
	font-size: clamp(30px, 3.4vw, 40px);
	margin: 0 0 1.3em;
}
.section-title::after {
	content: "";
	display: block;
	width: 46px;
	height: 1px;
	background: var(--ma-gold);
	margin: 0.55em auto 0;
}

a { color: var(--ma-ink); text-decoration: none; }
a:hover { color: #000; text-decoration: none; opacity: .7; }

/* ==========================================================================
   Announcement bar — black strip above everything
   ========================================================================== */
.ma-announcement {
	background: var(--ma-ink);
	color: #fff;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 10px 14px;
}
.ma-announcement a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ma-announcement a:hover { opacity: .75; }

/* ==========================================================================
   Header — pure black, white uppercase navigation
   ========================================================================== */
.site-header {
	background: var(--ma-black);
	border-bottom: 0;
	padding-top: 26px;
	padding-bottom: 26px;
}
.site-header,
.site-header a,
.site-branding .site-title a,
.site-header .site-title a {
	color: #fff;
}
.site-title { font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 26px; }

/* --- Custom header layout (header.php): brand centered, nav on its own row --- */
.ma-header .col-full { display: block; }
.ma-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}
.ma-header-left { justify-self: start; }
.ma-header-right { justify-self: end; }
.ma-header-brand { justify-self: center; text-align: center; }
.ma-header-brand .site-title { margin: 0; }
.ma-header-brand img { max-height: 46px; width: auto; }

.ma-nav { margin-top: 20px; }
.ma-nav ul.menu,
.ma-nav ul.ma-menu,
.ma-nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ma-nav li { margin: 0; }
.ma-nav a {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 400;
}
.ma-nav a:hover { color: #fff; opacity: 0.65; }
.ma-nav .current-menu-item > a { color: var(--ma-gold); opacity: 1; }

/* Compact, ghosted search on the dark bar */
.ma-header .site-search,
.ma-header-left form {
	margin: 0;
	max-width: 220px;
}
.ma-header .search-field,
.ma-header input[type="search"] {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 0;
	color: #fff;
	padding: 9px 12px;
	width: 100%;
	font-size: 13px;
}
.ma-header .search-field::placeholder { color: rgba(255,255,255,0.55); }
.ma-header .woocommerce-product-search button,
.ma-header .search-form .search-submit {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	border-left: 0;
	color: #fff;
	padding: 9px 12px;
}

/* Cart, white to match */
.ma-header .site-header-cart,
.ma-header .site-header-cart .cart-contents,
.ma-header .site-header-cart .amount,
.ma-header a.cart-contents {
	color: #fff;
}
.ma-header .site-header-cart { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 14px; }
.ma-header .site-header-cart li { margin: 0; }

@media (max-width: 768px) {
	.ma-header-inner { grid-template-columns: auto 1fr auto; }
	.ma-header .site-search, .ma-header-left form { max-width: 130px; }
	.ma-nav ul.menu, .ma-nav > ul { gap: 18px; }
	.ma-nav a { font-size: 12px; }
}

.storefront-primary-navigation { background: var(--ma-black); }
.main-navigation ul li a {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 400;
}
.main-navigation ul li a:hover { color: #fff; opacity: .65; }
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current-menu-item > a { color: #fff; opacity: 1; }

/* Header icons (cart, search) white */
.site-header .site-header-cart .cart-contents,
.site-header a.cart-contents,
.site-search .widget_product_search .search-field { color: #fff; }

/* ==========================================================================
   Buttons — solid black, square, uppercase, no fuss
   ========================================================================== */
button,
input[type="button"],
input[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--ma-ink);
	color: #fff;
	border: 1px solid var(--ma-ink);
	border-radius: var(--ma-radius);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	font-weight: 500;
	padding: 0.9em 2em;
	transition: background .2s ease, color .2s ease;
}
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: #fff;
	color: var(--ma-ink);
	border-color: var(--ma-ink);
}

/* Ghost variant for secondary actions */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 8px;
	background: transparent;
	color: var(--ma-ink);
	border-bottom: 1px solid var(--ma-ink);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 12px;
}

/* ==========================================================================
   Product grid — borderless, image-led, quiet type
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: center;
	margin-bottom: 3em;
}
.woocommerce ul.products li.product a img {
	border-radius: 0;
	margin-bottom: 14px;
	transition: opacity .3s ease;
}
.woocommerce ul.products li.product:hover a img { opacity: .82; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--ma-ink);
	padding: 0 6px 4px;
	line-height: 1.5;
}
.woocommerce ul.products li.product .price {
	color: var(--ma-ink);
	font-weight: 500;
	font-size: 14px;
}
.woocommerce ul.products li.product .price del { color: var(--ma-muted); font-weight: 400; }
.woocommerce ul.products li.product .star-rating { color: var(--ma-star); margin: 0 auto 6px; }

/* Add-to-cart appears as a quiet underlined action, not a heavy button */
.woocommerce ul.products li.product .button {
	background: transparent;
	color: var(--ma-ink);
	border: 0;
	border-bottom: 1px solid var(--ma-ink);
	padding: 2px 0;
	margin-top: 6px;
}
.woocommerce ul.products li.product .button:hover { background: transparent; color: #000; opacity: .6; }

/* Sale badge — small black square, not a colored pill */
.woocommerce span.onsale {
	background: var(--ma-ink);
	color: #fff;
	border-radius: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 7px 12px;
	top: 12px;
	left: 12px;
}

/* ==========================================================================
   Single product
   ========================================================================== */
.woocommerce div.product .product_title {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ma-ink); font-size: 22px; font-weight: 500; }
.woocommerce div.product .woocommerce-product-rating .star-rating { color: var(--ma-star); }

.woocommerce .stock.in-stock { color: var(--ma-instock); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.woocommerce .stock.out-of-stock { color: var(--ma-muted); }

/* Quiet tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 13px;
	font-weight: 500;
}

/* ==========================================================================
   Forms / cart / checkout — hairline borders, monochrome
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
	border: 1px solid var(--ma-form-border);
	border-radius: 0;
}
.woocommerce table.cart,
.woocommerce-checkout table {
	border: 1px solid var(--ma-border);
	border-radius: 0;
}

/* ==========================================================================
   Category showcase — full-bleed image tiles with centered labels
   ========================================================================== */
.ma-category-showcase-wrap { margin: 3.5em 0; }
.ma-category-showcase-wrap .section-title { margin-bottom: 1.6em; }

.ma-category-showcase {
	display: grid;
	grid-template-columns: repeat(var(--ma-cat-cols, 4), 1fr);
	gap: 8px;
}

.ma-cat-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #e7e7e4;
}
.ma-cat-tile .ma-cat-img,
.ma-cat-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.ma-cat-tile:hover img { transform: scale(1.05); }

/* No image overlay — labels rely on their own text-shadow for legibility. */
.ma-cat-label {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	font-size: clamp(15px, 1.4vw, 20px);
	text-align: center;
	padding: 0 10px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* Responsive: 2-up on tablets, still edge-to-edge on phones */
@media (max-width: 768px) {
	.ma-category-showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ma-category-showcase { grid-template-columns: 1fr; }
	.ma-cat-tile { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Homepage — hero, luxe rhythm, collections
   ========================================================================== */

/* Break an element out of Storefront's centered .col-full to full viewport.
   Uses symmetric negative margins (not width:100vw + left:50%) so it stays
   centered reliably inside Storefront's container and never leaves a gap. */
.ma-fullbleed {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Belt-and-braces: stop the 100vw math from creating a sideways scrollbar */
html,
body { overflow-x: hidden; }

/* The homepage must be TRUE full width, or Storefront constrains it to ~62%
   (reserving space for a sidebar) and the full-bleed bands compute against that
   narrow, left-shifted column — clipping one side. This forces 100%. */
.content-area.maison-front-page {
	width: 100%;
	float: none;
	margin: 0;
}
.maison-front-page .site-main { width: 100%; }

/* Generous vertical rhythm = luxury */
.ma-section { padding: 5em 0; }
.ma-section-cream { background: var(--ma-cream); }

/* Gold eyebrow used across hero + collections */
.ma-eyebrow {
	color: var(--ma-gold);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 12px;
	margin: 0 0 1em;
}

/* Hero slider — 4 fading slides, single Shop-now button each */
.ma-slider {
	position: relative;
	min-height: 82vh;
	overflow: hidden;
	background: #111111;
}
.ma-slides { position: absolute; inset: 0; }
.ma-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease;
}
.ma-slide.is-active { opacity: 1; pointer-events: auto; }
/* Overlay removed per request — slide images show at full brightness. */
.ma-slide-inner { position: relative; z-index: 2; text-align: center; }
.ma-slider .button { background: #fff; color: var(--ma-ink); border-color: #fff; padding: 1em 2.8em; }
.ma-slider .button:hover { background: transparent; color: #fff; border-color: #fff; }

.ma-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: transparent;
	color: #fff;
	border: 0;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	padding: 10px 18px;
	opacity: .7;
	transition: opacity .2s ease;
}
.ma-slider-arrow:hover { opacity: 1; background: transparent; color: #fff; border: 0; }
.ma-slider-prev { left: 6px; }
.ma-slider-next { right: 6px; }

.ma-slider-dots {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 11px;
}
.ma-dot {
	width: 9px;
	height: 9px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #fff;
	background: transparent;
	cursor: pointer;
	opacity: .85;
	transition: background .2s ease;
}
.ma-dot.is-active,
.ma-dot:hover { background: #fff; color: #fff; border-color: #fff; }

@media (max-width: 768px) {
	.ma-slider { min-height: 60vh; }
	.ma-slider-arrow { font-size: 30px; padding: 8px 12px; }
}

/* Hero (legacy single banner — kept for the [maison_hero] use case) */
.ma-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
/* Legacy hero overlay removed per request. */
.ma-hero-inner { position: relative; z-index: 2; padding: 2em; max-width: 760px; }
.ma-hero-title {
	font-family: var(--ma-serif);
	color: #fff;
	font-weight: 500;
	font-size: clamp(42px, 6vw, 80px);
	line-height: 1.04;
	letter-spacing: 0.02em;
	margin: 0 0 0.7em;
	text-transform: none;
}
.ma-hero .button { background: #fff; color: var(--ma-ink); border-color: #fff; }
.ma-hero .button:hover { background: transparent; color: #fff; border-color: #fff; }

/* Centered product rows regardless of full-bleed parent bands */
.ma-product-section {
	max-width: 1120px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.ma-demo-product img { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.ma-demo-note {
	text-align: center;
	color: var(--ma-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
	margin-top: 2em;
}

/* Collection feature banners */
.ma-collection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.ma-collection.reverse .ma-collection-media { order: 2; }
.ma-collection-media { min-height: 540px; overflow: hidden; }
.ma-collection-media img,
.ma-collection-media video {
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
	display: block;
}
.ma-collection-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2.5em, 5vw, 6em);
	background: #fff;
}
.ma-collection.dark .ma-collection-body { background: var(--ma-ink); color: #fff; }
.ma-collection.dark .ma-collection-title { color: #fff; }
.ma-collection-title {
	font-family: var(--ma-serif);
	font-size: clamp(30px, 3.6vw, 50px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0.02em;
	margin: 0.1em 0 0.5em;
}
.ma-collection-body p { max-width: 40ch; opacity: .85; margin: 0 0 1.8em; line-height: 1.7; }

@media (max-width: 768px) {
	.ma-collection { grid-template-columns: 1fr; }
	.ma-collection.reverse .ma-collection-media { order: 0; }
	.ma-collection-media { min-height: 360px; }
	.ma-section { padding: 3.2em 0; }
}

/* ==========================================================================
   Footer — deep charcoal, light text
   ========================================================================== */
.site-footer {
	background: var(--ma-footer-bg);
	color: #fff;
}
.site-footer a { color: #fff; }
.site-footer a:hover { opacity: .7; }
.site-footer .site-info { border-top: 1px solid var(--ma-footer-line); }

/* Footer brand logo */
.ma-footer-brand { text-align: center; padding: 2.6em 24px 0.6em; }
.ma-footer-brand img { height: 52px; width: auto; display: inline-block; }
.ma-footer-brand a { display: inline-block; opacity: 1; }
.ma-footer-brand a:hover { opacity: 0.75; }

/* Accepted-payment badges */
.ma-payments {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 2em 24px 0.5em;
	border-top: 1px solid var(--ma-footer-line);
}
.ma-payments-label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.55;
}
.ma-payments-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.ma-payments-list li { margin: 0; }
.ma-payments-list img {
	height: 29px;
	width: auto;
	display: block;
	border-radius: 5px;
}
.site-footer h1, .site-footer h2, .site-footer h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 14px;
}

/* ==========================================================================
   v1.2 — logo sizing, header/cart responsiveness, footer columns,
   full-width WooCommerce pages, and modern shop / cart / checkout styling
   ========================================================================== */

/* ---- Logo sizing (smaller, both header + footer) ---- */
.site-title { font-size: 20px; }
.ma-header-brand img { max-height: 34px; }
.ma-footer-brand img { height: 44px; }

/* ---- Remove the gap between header and hero on the homepage ---- */
.home .site-content { padding-top: 0; }
.maison-front-page .site-main > *:first-child { margin-top: 0; }

/* ---- Header: hamburger + responsive cart/search ---- */
.ma-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.ma-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.ma-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ma-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ma-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Keep the cart tidy and never let it overflow */
.ma-header .site-header-cart { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.ma-header .site-header-cart li { margin: 0; padding: 0; }
.ma-header .site-header-cart .cart-contents { display: inline-flex; align-items: center; gap: 6px; }
.ma-header .site-header-cart .count,
.ma-header .site-header-cart .amount { color: #fff; }

/* Tablet: tighten spacing so the three columns always fit */
@media (max-width: 1024px) {
	.ma-header .ma-search, .ma-header-left form { max-width: 170px; }
	.ma-nav ul.menu, .ma-nav > ul { gap: 20px; }
}

/* Mobile: collapse nav behind the hamburger */
@media (max-width: 768px) {
	.ma-header-inner { grid-template-columns: auto 1fr auto; }
	.ma-nav-toggle { display: flex; }
	.ma-header .ma-search, .ma-header-left .woocommerce-product-search, .ma-header-left form { display: none; }
	.ma-nav { margin-top: 16px; width: 100%; display: none; }
	.ma-nav.is-open { display: block; }
	.ma-nav ul.menu, .ma-nav > ul { flex-direction: column; align-items: center; gap: 14px; }
	.ma-header .site-header-cart .amount { display: none; } /* icon + count only on phones */
	.site-title { font-size: 17px; }
	.ma-header-brand img { max-height: 26px; }
	.ma-footer-brand img { height: 34px; }
}

/* ---- Products: two per row on mobile ---- */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin: 0;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: auto;
		float: none;
		margin: 0 0 1.4em;
		clear: none;
	}
	.woocommerce ul.products li.product .button { font-size: 12px; letter-spacing: .06em; }
}

/* ---- Full-width WooCommerce pages (sidebar removed in functions.php) ---- */
.maison-full .content-area,
.maison-full #primary {
	width: 100%;
	float: none;
	margin: 0;
}
.maison-full #secondary { display: none; }
.maison-full .site-content { padding-top: 2.5em; }

/* ---- Footer columns: menu / contact / socials ---- */
.ma-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 2.4em 0 1em;
	text-align: left;
}
.ma-footer-col h3 { color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; margin: 0 0 1.1em; }
.ma-footer-menu { list-style: none; margin: 0; padding: 0; }
.ma-footer-menu li { margin: 0 0 .6em; }
.ma-footer-menu a { color: #fff; opacity: .75; font-size: 13px; }
.ma-footer-menu a:hover { opacity: 1; }
.ma-footer-legal p { color: #fff; opacity: .75; font-size: 13px; line-height: 1.8; margin: 0 0 .5em; }
.ma-footer-legal a { color: #fff; }
.ma-socials { display: flex; gap: 14px; }
.ma-socials a { color: #fff; opacity: .8; display: inline-flex; }
.ma-socials a:hover { opacity: 1; color: var(--ma-gold); }
.ma-socials svg { width: 22px; height: 22px; display: block; }

@media (max-width: 768px) {
	.ma-footer-cols { grid-template-columns: 1fr; gap: 26px; text-align: center; }
	.ma-socials { justify-content: center; }
}

/* ==========================================================================
   Modern WooCommerce — shop, single product, cart, checkout
   ========================================================================== */

/* Page + section headings on WooCommerce pages */
.woocommerce .woocommerce-products-header__title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	font-family: var(--ma-serif);
	text-transform: none;
	letter-spacing: .02em;
	text-align: center;
	font-size: clamp(30px, 3.4vw, 42px);
}

/* Result count + ordering as quiet meta */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--ma-muted); font-size: 13px; }
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--ma-border);
	border-radius: 0;
	padding: 8px 12px;
	background: #fff;
}

/* --- Single product --- */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .entry-summary { margin: 0; }
.single-product div.product .product_title { margin-top: 0; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: 0; }
.single-product .single_add_to_cart_button { width: 100%; padding: 1.1em 2em; }
.single-product .quantity input.qty {
	border: 1px solid var(--ma-form-border);
	border-radius: 0;
	height: 48px;
	width: 72px;
	text-align: center;
}
.single-product form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.single-product .woocommerce-tabs { margin-top: 3em; }
.single-product .related.products,
.single-product .up-sells { margin-top: 3.5em; }

@media (max-width: 768px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Cart --- */
.woocommerce-cart .shop_table {
	border: 1px solid var(--ma-border);
	border-radius: 0;
}
.woocommerce-cart .shop_table thead th {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 12px;
	border-bottom: 1px solid var(--ma-border);
}
.woocommerce-cart .cart_item td { border-top: 1px solid var(--ma-border); }
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; }
.woocommerce-cart .cart_totals h2 { font-family: var(--ma-serif); font-size: 26px; text-transform: none; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 1.1em 2em; }
.woocommerce a.remove { color: var(--ma-ink) !important; border-radius: 0; }

/* --- Checkout ---
   form.checkout has THREE direct children: #customer_details,
   #order_review_heading and #order_review. Map them explicitly so the review
   (heading + payment) stacks in the right column instead of spilling onto a new
   row below (which looked like a duplicate "second form"). */
.woocommerce-checkout form.checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr) !important;
	column-gap: 48px;
	row-gap: 12px;
	align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1 !important; grid-row: 1 / span 2 !important; margin: 0; float: none !important; width: auto !important; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; margin: 0; }
.woocommerce-checkout form.checkout > #order_review { grid-column: 2 !important; grid-row: 2 !important; float: none !important; width: auto !important; }
.woocommerce-checkout #customer_details { margin: 0; }
.woocommerce-checkout h3 { font-family: var(--ma-serif); text-transform: none; font-size: 24px; letter-spacing: .02em; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection {
	border: 1px solid var(--ma-form-border);
	border-radius: 0;
	padding: 12px 14px;
	min-height: 48px;
}
.woocommerce-checkout #order_review {
	border: 1px solid var(--ma-border);
	padding: 24px;
	position: sticky;
	top: 24px;
	background: var(--ma-cream);
}
.woocommerce-checkout #order_review_heading { font-family: var(--ma-serif); text-transform: none; font-size: 24px; }
.woocommerce-checkout #place_order { width: 100%; padding: 1.15em 2em; margin-top: 12px; }

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { display: block; }
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: auto;
		grid-row: auto;
		width: 100%;
	}
	.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 1.5em; }
	.woocommerce-checkout #order_review { position: static; }
}

/* ==========================================================================
   v1.2.1 — kill white gaps, logo sizing, guaranteed 2-up products, cards
   ========================================================================== */

/* --- Remove white space between header/hero and last-section/footer --- */
.maison-front .site-content,
.home .site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
}
.maison-front #content,
.maison-front #masthead,
.maison-front .site-header { margin: 0 !important; }
.maison-front #primary,
.maison-front .site-main,
.maison-front-page,
.maison-front-page .site-main { margin-top: 0 !important; padding-top: 0 !important; }
.maison-front .site-footer { margin-top: 0 !important; }

/* --- Logo: reduce on desktop, tidy on mobile (beats Storefront/custom-logo) --- */
.ma-header .ma-header-brand img,
.ma-header-brand .custom-logo,
.ma-header .custom-logo {
	max-height: 42px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block;
}
@media (max-width: 768px) {
	.ma-header .ma-header-brand img,
	.ma-header-brand .custom-logo,
	.ma-header .custom-logo { max-height: 30px !important; }
}

/* --- Compact, inline header search on desktop --- */
.ma-header .woocommerce-product-search { display: flex; max-width: 220px; }
.ma-header .woocommerce-product-search .search-field { flex: 1; }

/* --- Products: ALWAYS two per row on mobile (override Storefront floats) --- */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
		margin: 0 !important;
	}
	/* WooCommerce's clearfix pseudo-elements become phantom grid cells and shove
	   the first product into row 1 / column 2 (leaving it "alone"). Remove them. */
	.woocommerce ul.products::before,
	.woocommerce ul.products::after,
	.woocommerce-page ul.products::before,
	.woocommerce-page ul.products::after,
	ul.products::before,
	ul.products::after {
		content: none !important;
		display: none !important;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	ul.products li.product {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		float: none !important;
		clear: none !important;
		margin: 0 0 1.4em !important;
		padding: 0 !important;
	}
}

/* --- Product cards: uniform portrait imagery + refined button --- */
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #f4f2ee;
	margin-bottom: 14px;
	transition: opacity .3s ease, transform .5s ease;
}
.woocommerce ul.products li.product:hover a img { opacity: .92; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	letter-spacing: .04em;
	margin: 0 0 4px;
	padding: 0 6px;
}
.woocommerce ul.products li.product .price { display: block; margin-bottom: 12px; }

/* Loop add-to-cart — bordered button that fills on hover (both states) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	background: transparent;
	color: var(--ma-ink);
	border: 1px solid var(--ma-ink);
	border-radius: 0;
	padding: .72em 1.7em;
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
	background: var(--ma-ink);
	color: #fff;
	opacity: 1;
}

/* ==========================================================================
   v1.2.2 — cart dropdown, footer link visibility, page design, announcements
   ========================================================================== */

/* --- Header cart hover dropdown (mini-cart) --- */
.ma-header .site-header-cart { position: relative; }
.ma-header .site-header-cart .widget_shopping_cart,
.ma-header .site-header-cart .cart-contents + .widget_shopping_cart {
	position: absolute;
	right: 0;
	top: 100%;
	width: 320px;
	max-width: 88vw;
	margin: 0;
	padding: 22px;
	background: #fff;
	color: var(--ma-ink);
	border: 1px solid var(--ma-border);
	box-shadow: 0 12px 30px rgba(0,0,0,.12);
	text-align: left;
	z-index: 200;
}
.ma-header .site-header-cart .widget_shopping_cart * { color: var(--ma-ink); }
.ma-header .site-header-cart .widget_shopping_cart a:not(.button) { color: var(--ma-ink); }
.ma-header .site-header-cart .widget_shopping_cart .buttons .button {
	background: var(--ma-ink);
	color: #fff;
	border: 1px solid var(--ma-ink);
	margin-bottom: 6px;
}
.ma-header .site-header-cart .widget_shopping_cart .buttons .button.checkout { background: transparent; color: var(--ma-ink); }
.ma-header .site-header-cart .widget_shopping_cart .amount { color: var(--ma-ink); }
/* keep it hidden until hover (Storefront toggles this, we just make sure) */
.ma-header .site-header-cart .widget_shopping_cart { display: none; }
.ma-header .site-header-cart:hover .widget_shopping_cart,
.ma-header .site-header-cart .widget_shopping_cart:hover { display: block; }
@media (max-width: 768px) {
	/* On phones let WooCommerce/Storefront handle the cart page instead of a dropdown */
	.ma-header .site-header-cart:hover .widget_shopping_cart { display: none; }
}

/* --- Footer menu: force readable light links (was black-on-black) --- */
.site-footer .ma-footer-cols a,
.site-footer .ma-footer-menu a,
.ma-footer-cols .ma-footer-menu a {
	color: #fff !important;
	opacity: .78;
}
.site-footer .ma-footer-cols a:hover,
.site-footer .ma-footer-menu a:hover { opacity: 1; color: #fff !important; }
.site-footer .ma-footer-col h3 { color: #fff !important; }

/* --- Announcement bar: rotating messages --- */
.ma-announcement { position: relative; }
.ma-ann-item { display: none; }
.ma-ann-item.is-active { display: inline-block; }

/* --- Content pages (About, Contact, etc.): clean, centered editorial --- */
.maison-page .page-header,
.maison-page .entry-header {
	text-align: center;
	padding: 3.5em 0 0;
	margin-bottom: 2em;
}
.maison-page .entry-title,
.maison-page .page-title {
	font-family: var(--ma-serif);
	font-weight: 500;
	text-transform: none;
	letter-spacing: .02em;
	font-size: clamp(34px, 4vw, 52px);
	margin: 0;
}
.maison-page .entry-header::after,
.maison-page .page-header::after {
	content: "";
	display: block;
	width: 46px;
	height: 1px;
	background: var(--ma-gold);
	margin: .7em auto 0;
}
.maison-page .entry-content,
.maison-page .page-content {
	max-width: 760px;
	margin: 0 auto;
	padding-bottom: 4em;
	font-size: 17px;
	line-height: 1.9;
}
.maison-page .entry-content h2,
.maison-page .entry-content h3 { font-family: var(--ma-serif); font-weight: 500; letter-spacing: .01em; margin-top: 1.6em; }
.maison-page .entry-content img { border-radius: 0; }
/* Contact form fields inherit the monochrome input styling */
.maison-page input[type="text"],
.maison-page input[type="email"],
.maison-page input[type="tel"],
.maison-page textarea {
	border: 1px solid var(--ma-form-border);
	border-radius: 0;
	padding: 12px 14px;
}

/* ==========================================================================
   v1.2.4 — checkout polish (readable order summary, white inputs, tablet stack)
   ========================================================================== */

/* Stack to a single column below 1024px so the order summary is full width and
   product names stop wrapping one word per line. */
@media (max-width: 1024px) {
	/* !important needed because the base grid rule is also !important */
	.woocommerce-checkout form.checkout {
		display: block !important;
		grid-template-columns: 1fr !important;
	}
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		float: none !important;
	}
	.woocommerce-checkout form.checkout > #order_review_heading { margin-top: 1.8em; }
	.woocommerce-checkout #order_review { position: static; }
}

/* Order summary as a clean white card (removes the offset grey box look) */
.woocommerce-checkout #order_review {
	background: #fff !important;
	border: 1px solid var(--ma-border);
	padding: 26px 28px;
}
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	margin: 0;
	width: 100%;
	table-layout: auto;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--ma-border);
	vertical-align: top;
	background: transparent;
}
.woocommerce-checkout #order_review .cart_item .product-name {
	width: 68%;
	line-height: 1.5;
	font-size: 14px;
	word-break: normal;
	overflow-wrap: break-word;
	padding-right: 14px;
}
.woocommerce-checkout #order_review .product-total,
.woocommerce-checkout #order_review .product-subtotal,
.woocommerce-checkout #order_review tfoot td,
.woocommerce-checkout #order_review tfoot th {
	text-align: right;
	white-space: nowrap;
}
.woocommerce-checkout #order_review tfoot th { text-align: left; font-weight: 500; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td { border-bottom: 0; padding-top: 16px; }
.woocommerce-checkout #order_review .order-total .amount { font-size: 18px; font-weight: 500; }

/* Payment box tidy */
.woocommerce-checkout #payment { background: var(--ma-cream); border-radius: 0; margin-top: 20px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ma-border); }

/* White inputs (were default grey) + consistent selects */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: #fff !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid var(--ma-form-border) !important;
	border-radius: 0;
}
.woocommerce-checkout .form-row label { font-size: 13px; letter-spacing: .02em; }

/* Coupon toggle spacing */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1.6em; }

/* ==========================================================================
   v1.2.6 — white header (dark menu/search/cart), larger logo
   ========================================================================== */

/* White background + hairline divider */
.site-header,
.ma-header,
.storefront-primary-navigation {
	background: #ffffff !important;
	border-bottom: 1px solid var(--ma-border);
	box-shadow: none;
}

/* Menu text -> dark ink so it's visible on white */
.site-header a,
.site-header .site-title a,
.ma-header .site-title a,
.main-navigation ul li a,
.ma-nav a {
	color: var(--ma-ink) !important;
}
.main-navigation ul li a:hover,
.ma-nav a:hover { color: var(--ma-ink) !important; opacity: .6; }
.ma-nav .current-menu-item > a { color: var(--ma-gold) !important; opacity: 1; }

/* Search on white */
.ma-header .search-field,
.ma-header input[type="search"] {
	background: #fff;
	border: 1px solid var(--ma-border);
	color: var(--ma-ink);
}
.ma-header .search-field::placeholder { color: var(--ma-muted); }
.ma-header .woocommerce-product-search button,
.ma-header .search-form .search-submit {
	background: #fff;
	color: var(--ma-ink);
	border: 1px solid var(--ma-border);
	border-left: 0;
}

/* Cart on white */
.ma-header .site-header-cart,
.ma-header .site-header-cart a,
.ma-header .site-header-cart .cart-contents,
.ma-header .site-header-cart .amount,
.ma-header .site-header-cart .count {
	color: var(--ma-ink) !important;
}

/* Hamburger bars dark */
.ma-nav-toggle span { background: var(--ma-ink); }

/* ==========================================================================
   v1.2.8 — bag cart icon + count badge, mobile category slider
   ========================================================================== */

/* Minimal cart: bag icon with a count badge (replaces "£x  N items") */
.ma-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ma-ink);
	line-height: 0;
}
.ma-cart:hover { color: var(--ma-ink); opacity: .7; }
.ma-cart-icon svg { width: 26px; height: 26px; display: block; }
.ma-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--ma-ink);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.ma-cart-count.is-empty { display: none; }

/* Mobile category showcase -> swipeable slider with a peek of the next tile */
@media (max-width: 768px) {
	.ma-category-showcase {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding: 0 16px 6px;
		scrollbar-width: none;
	}
	.ma-category-showcase::-webkit-scrollbar { display: none; }
	.ma-category-showcase .ma-cat-tile {
		flex: 0 0 82%;
		scroll-snap-align: center;
		aspect-ratio: 3 / 4;
	}
}

/* Larger logo */
.ma-header .ma-header-brand img,
.ma-header-brand .custom-logo,
.ma-header .custom-logo { max-height: 56px !important; }
@media (max-width: 768px) {
	.ma-header .ma-header-brand img,
	.ma-header-brand .custom-logo,
	.ma-header .custom-logo { max-height: 40px !important; }
}

/* ==========================================================================
   v1.2.7 — tighter header (remove excess vertical whitespace)
   ========================================================================== */
.site-header,
.ma-header {
	padding-top: 12px !important;
	padding-bottom: 10px !important;
}
.ma-header-inner { align-items: center; }
.ma-nav { margin-top: 8px !important; }
.ma-nav ul.menu,
.ma-nav > ul { padding: 4px 0; }
/* keep the search box from forcing the row taller than the logo */
.ma-header .ma-search .search-field { padding-top: 8px; padding-bottom: 8px; }