/*
 * r9 brand pass (Jay 18 Oct 2026, STAGING ONLY until approved).
 * Greige #ebeae5, black #121212, Helvetica Neue grotesque, square corners, editorial spacing.
 * Shop and category listings, product cards and product page chrome, the Help template, the basket, the empty basket,
 * and a light checkout pass (fonts and colours only; payment fields and their behaviour untouched).
 */
:root { --mg-g: #ebeae5; --mg-k: #121212; --mg-rule: rgba(18,18,18,.18); --mg-eyebrow: .75rem; }

/* ---------- Shared eyebrow ---------- */
.mg-pagehead__eyebrow, .mg-cartempty__eyebrow, .mg-shop__bar .wc-block-product-results-count, .mg-pcard__sku, .mg-product .mg-kicker,
.mg-shop .mg-filter__title, .mg-shop__cats summary {
	font-size: var(--mg-eyebrow) !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}

/* ---------- Category / shop header: black box, generous spacing (kept), bigger grotesque title ---------- */
.mg-banner--dark { padding-top: clamp(3rem, 7vw, 6rem) !important; padding-bottom: clamp(2.75rem, 6vw, 5rem) !important; border-bottom: 0; }
.mg-banner--dark .mg-crumbs ol { font-size: var(--mg-eyebrow); letter-spacing: .14em; text-transform: uppercase; }
.mg-banner--dark h1, .mg-banner--dark .wp-block-query-title { margin-top: 1.25rem !important; margin-bottom: 1rem !important; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem) !important; font-weight: 500 !important; line-height: .98 !important; letter-spacing: -.04em !important; }
.mg-banner--dark .wp-block-term-description, .mg-banner--dark .mg-lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 40rem; }

/* ---------- Listing chrome ---------- */
.mg-shop { padding-top: clamp(2rem, 4vw, 3.5rem) !important; }
.mg-shop__bar { padding-bottom: 1rem; margin-bottom: 1.75rem !important; border-bottom: 1px solid var(--mg-k); color: var(--mg-k) !important; }
.mg-shop__bar select, .mg-shop__bar .wc-block-catalog-sorting select { border: 1px solid var(--mg-k) !important; border-radius: 0 !important; background: #fff; color: var(--mg-k); font: inherit; font-size: .875rem; padding: .55rem 2rem .55rem .75rem; }
.mg-shop__side { font-size: .9375rem; }
.mg-shop__side .wc-block-product-filters, .mg-shop__side .wp-block-woocommerce-product-filters { border-top: 1px solid var(--mg-k); }
.mg-shop__side :is(.wc-block-product-filter-checkbox-list__input, input[type=checkbox]) { border-radius: 0 !important; accent-color: var(--mg-k); }
.mg-shop__side details > summary, .mg-shop__side .wp-block-heading { color: var(--mg-k); }
.mg-shop__cats { border-top-color: var(--mg-k) !important; }
.mg-shop__cats summary { color: var(--mg-k) !important; }
.mg-shop__cats .wc-block-product-categories-list--depth-0 > li > a { font-weight: 600; letter-spacing: -.005em; }
.mg-shop__side .wc-block-product-filters__apply, .mg-shop__side button.wp-element-button { border-radius: 0 !important; background: var(--mg-k) !important; color: #fff !important; }

/* ---------- Product cards: editorial, borderless, greige image tile ---------- */
.mg-products .wc-block-product-template { row-gap: clamp(1.75rem, 3vw, 2.75rem) !important; }
.mg-pcard { border: 0 !important; padding: 0 !important; background: transparent !important; gap: .4rem !important; }
.mg-pcard__img { background: var(--mg-g) !important; margin: 0 0 .85rem !important; }
.mg-pcard__img img { transition: transform .5s ease; }
.mg-pcard:hover .mg-pcard__img img { transform: scale(1.03); }
.mg-pcard__sku { color: #5b574f !important; letter-spacing: .12em !important; }
.mg-pcard__title { font-size: 1.0625rem !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -.01em; }
.mg-pcard__price, .mg-pcard__price .mg-price-from { color: var(--mg-k) !important; font-size: .9375rem !important; }
.mg-pcard__btn .wp-block-button__link, .mg-pcard__btn .wc-block-components-product-button__button { min-height: 46px; font-weight: 500; letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) { .mg-pcard__img img { transition: none; } .mg-pcard:hover .mg-pcard__img img { transform: none; } }

/* Pagination as square chips */
.wp-block-query-pagination { gap: .35rem; }
.wp-block-query-pagination .page-numbers { display: inline-flex; min-width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--mg-rule); color: var(--mg-k); text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { background: var(--mg-k); color: #fff; border-color: var(--mg-k); }

/* Quote card at the foot of the listing */
.mg-shop .mg-quote-card { border-radius: 0; }

/* ---------- Single product chrome ---------- */
.mg-product .woocommerce-product-gallery img, .mg-product .woocommerce-product-gallery__image,
.mg-product .woocommerce-product-gallery__wrapper img, .mg-product .wc-block-components-product-image img { background: var(--mg-g) !important; }
.mg-product .mg-kicker { color: #5b574f; }
.mg-product__summary .wp-block-post-title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem) !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.04em !important; margin: .5rem 0 1rem !important; }
.mg-product .wp-block-woocommerce-product-price .mg-price-from { font-size: 1.5rem; letter-spacing: -.01em; }
.mg-product__summary details, .mg-product__summary .mg-acc, .mg-product__summary [class*="product-info"] details { border-color: var(--mg-k) !important; }
.mg-product__summary table th, .mg-product__summary table td, .mg-product__summary dl > div { border-color: var(--mg-rule) !important; }
.mg-product .flex-control-thumbs img { background: var(--mg-g); }
.mg-related { margin-top: clamp(3rem, 6vw, 5rem) !important; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--mg-k); }
.mg-related .mg-h-sm { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem) !important; font-weight: 500 !important; letter-spacing: -.03em; }

/* ---------- Help template: greige page head + editorial body ---------- */
.mg-helpx { margin-top: 0 !important; }
.mg-pagehead { background: var(--mg-g); color: var(--mg-k); padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-top: 0 !important; margin-bottom: 0 !important; }
.mg-pagehead .mg-crumbs ol { font-size: var(--mg-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: #5b574f; }
.mg-pagehead__eyebrow { margin-top: 2rem !important; margin-bottom: 1rem !important; color: #5b574f; }
.page-id-15 .mg-pagehead__eyebrow { display: none; }
.mg-pagehead__title, .mg-pagehead .wp-block-post-title { margin-top: 0 !important; margin-bottom: 0 !important; font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem) !important; font-weight: 500 !important; line-height: .98 !important; letter-spacing: -.04em !important; }
.page-id-15 .mg-pagehead .wp-block-post-title { margin-top: 2rem !important; }
.mg-helpx__body { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); margin-top: 0 !important; }
.mg-help__content { font-size: 1.0625rem; line-height: 1.65; }
.mg-help__content > .wp-block-post-content > p:first-child { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; letter-spacing: -.01em; }
.mg-help__content .wp-block-post-content > :is(h2, h3) { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mg-k); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.mg-help__content .mg-note { background: var(--mg-g) !important; border: 0 !important; border-left: 3px solid var(--mg-k) !important; border-radius: 0 !important; }
.mg-help__content table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.mg-help__content table :is(th, td) { border: 0 !important; border-bottom: 1px solid var(--mg-rule) !important; padding: .75rem .5rem .75rem 0 !important; text-align: left; }
.mg-help__content table thead th { border-bottom-color: var(--mg-k) !important; font-size: var(--mg-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.mg-helpnav ul { border-top-color: var(--mg-k) !important; }
.mg-helpnav li { border-bottom-color: var(--mg-rule) !important; }
.mg-helpnav a { color: var(--mg-k); }
.mg-helpnav [aria-current], .mg-helpnav .is-current, .mg-helpnav li.current a { background: var(--mg-g) !important; font-weight: 600; }
.mg-who2--inline { margin-top: clamp(3rem, 6vw, 5rem) !important; }
.mg-who2--inline .mg-who2__ctatile { padding: clamp(1.75rem, 3.5vw, 3rem); }
.mg-who2--inline .mg-still__text, .mg-who2 .mg-still__text { margin: 1rem 0 0; max-width: 36ch; }

/* ---------- Homepage teaser + dark outline button ---------- */
.mg-who2-band + .mg-who2-band, .mg-who2--teaser + .mg-who2 { margin-top: 0 !important; }
.mg-who2--teaser .mg-who2__row { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }
.mg-who2__index--label { justify-content: flex-start; }
.mg-who2__index--label .mg-who2__label { text-align: left; opacity: .8; }
.mg-who2__title--teaser { max-width: none; margin-bottom: 1.25rem; font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); }
.mg-who2__btn--dark { color: var(--mg-k); border-color: var(--mg-k); }
.mg-who2__btn--dark:hover, .mg-who2__btn--dark:focus-visible { background: var(--mg-k); color: #fff; }
.mg-who2__btn--inline { display: inline-flex; min-width: 15rem; margin-top: 1rem; text-decoration: none; }
.mg-who2 .mg-who2__btn { text-decoration: none; }

/* ---------- Basket ---------- */
.mg-cart .wp-block-post-title { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) !important; font-weight: 500 !important; letter-spacing: -.04em !important; line-height: 1 !important; margin-bottom: 2rem !important; padding-bottom: 1.25rem; border-bottom: 1px solid var(--mg-k); }
.wc-block-cart .wc-block-cart-items th, .wc-block-cart .wc-block-cart__totals-title { font-size: var(--mg-eyebrow) !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--mg-k) !important; }
.wc-block-cart .wc-block-cart-items { border-bottom: 1px solid var(--mg-rule) !important; }
.wc-block-cart .wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { background: var(--mg-g) !important; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block { background: var(--mg-g) !important; border: 0 !important; padding: 0 1.25rem .25rem !important; }
.wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper { border-color: rgba(18,18,18,.15) !important; }
.wc-block-cart .wc-block-cart__submit-button { min-height: 52px; letter-spacing: .14em; }
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 600; }

/* Empty basket (theme pattern mirror-glass/cart-empty) */
.wp-block-woocommerce-empty-cart-block { padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 4rem); }
.mg-cartempty__eyebrow { margin: 0 0 1rem; color: #5b574f; }
.mg-cartempty__title.wc-block-cart__empty-cart__title { margin: 0 0 2rem !important; text-align: left !important; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem) !important; font-weight: 500 !important; letter-spacing: -.035em; line-height: 1.02; }
.mg-cartempty__title.wc-block-cart__empty-cart__title::before { display: none !important; content: none !important; }
.mg-cartempty__links { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 52rem; }
@media (min-width: 700px) { .mg-cartempty__links { grid-template-columns: repeat(3, 1fr); } }
/* Hide the "Basket" page title when the basket is empty: the empty state carries its own heading. */
.mg-cart:has(.wp-block-woocommerce-empty-cart-block:not([hidden])) .wp-block-post-title { display: none; }

/* ---------- Checkout: fonts and colours only ---------- */
.mg-checkout, .wp-block-woocommerce-checkout { color: var(--mg-k); }
.wc-block-components-checkout-step__title, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text,
.wc-block-components-title.wc-block-components-title { font-weight: 500 !important; letter-spacing: -.02em !important; color: var(--mg-k) !important; }
.wp-block-woocommerce-checkout-order-summary-block { background: var(--mg-g) !important; border: 0 !important; }
.wp-block-woocommerce-checkout .wc-block-components-express-payment__title-container .wc-block-components-express-payment__title,
.wp-block-woocommerce-checkout .wc-block-components-express-payment-continue-rule { font-size: var(--mg-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: #5b574f; }
.wp-block-woocommerce-checkout a { color: var(--mg-k); }
.wc-block-components-checkout-place-order-button { letter-spacing: .14em; min-height: 52px; }

/* =====================================================================
 * r9 tweaks (Jay 18 Oct 2026, 19:31, STAGING ONLY), theme 0.9.11
 * ===================================================================== */

/* 1. Product grid: "Configure & price" always on one line, and buttons pinned to the card bottom so they line up across each row.
 *    The card fills its grid cell (li is a flex column, card flex:1), and the button wrapper takes margin-top:auto.
 *    Image sizes and spacing unchanged. Narrow cards (2-up on phones, 4-up related at tablet) use a container query
 *    to trim the side padding, letter-spacing and font size slightly. The label never wraps. */
.wc-block-product-template { align-items: stretch !important; }
.wc-block-product-template > li.wc-block-product:has(> .mg-pcard) { display: flex !important; flex-direction: column; }
.wc-block-product-template > li > .mg-pcard { flex: 1 1 auto; height: auto !important; container-type: inline-size; }
.mg-pcard > .mg-pcard__btn { margin-top: auto !important; padding-top: .85rem; width: 100%; }
.mg-pcard__btn .wp-block-button__link, .mg-pcard__btn .wc-block-components-product-button__button {
	display: flex !important; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box;
	white-space: nowrap !important; overflow: hidden; text-overflow: clip; line-height: 1.2 !important;
}
@container (max-width: 210px) {
	.mg-pcard__btn .wp-block-button__link, .mg-pcard__btn .wc-block-components-product-button__button { padding-left: .5rem !important; padding-right: .5rem !important; font-size: .75rem !important; letter-spacing: .07em !important; }
}
/* Safety net only: no current layout gives a card narrower than 163px (2-up at 375px). */
@container (max-width: 158px) {
	.mg-pcard__btn .wp-block-button__link, .mg-pcard__btn .wc-block-components-product-button__button { padding-left: .35rem !important; padding-right: .35rem !important; font-size: .6875rem !important; letter-spacing: .05em !important; }
}

/* 2. Product page: bigger main image. Desktop: gallery column 58% (was 52%), gallery fills it (WooCommerce caps it at 512px).
 *    Phones (up to 600px): the image runs edge to edge. Tablets: it fills the content width (was 70% below 782px). Thumbnails keep the page gutter. */
.mg-product .wp-block-woocommerce-product-image-gallery { max-width: none !important; width: 100% !important; }
.mg-product .woocommerce-product-gallery { max-width: none !important; width: 100% !important; float: none !important; }
@media (min-width: 782px) {
	.mg-product__top > .mg-product__media { flex-basis: 58% !important; }
	.mg-product__top > .mg-product__summary { flex-basis: 0 !important; flex-grow: 1 !important; min-width: 0; }
}
@media (max-width: 600px) {
	.mg-product .mg-product__media { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
	.mg-product .woocommerce-product-gallery .flex-control-thumbs { padding: 0 var(--wp--style--root--padding-right, 1rem) 0 var(--wp--style--root--padding-left, 1rem) !important; box-sizing: border-box; }
}
/*    Zoom: a plain magnifying glass in the corner. No circle, background or shadow box. White by default with a soft
 *    shadow for legibility; gallery.js switches it to black (.mg-zoom--dark) when the image corner is light. */
.mg-product .woocommerce-product-gallery__trigger {
	top: .5rem !important; right: .5rem !important; width: 2.75rem !important; height: 2.75rem !important;
	background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: #fff !important;
	filter: drop-shadow(0 0 1.5px rgba(0,0,0,.45)); transition: opacity .2s ease;
}
.mg-product .woocommerce-product-gallery__trigger.mg-zoom--dark { color: var(--mg-k) !important; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.6)); }
.mg-product .woocommerce-product-gallery__trigger::before {
	width: 24px !important; height: 24px !important; border: 0 !important; border-radius: 0 !important; transform: none !important; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='M15.5 15.5 21.5 21.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='M15.5 15.5 21.5 21.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mg-product .woocommerce-product-gallery__trigger::after { display: none !important; }
.mg-product .woocommerce-product-gallery__trigger:hover { background: transparent !important; opacity: .75; }
.mg-product .woocommerce-product-gallery__trigger:focus-visible { background: transparent !important; outline: 2px solid currentColor; outline-offset: -2px; }

/* 3. Product page: "Request a sample" as a compact secondary outline button (was full-size). */
.mg-product .mg-psamples__request {
	display: inline-flex !important; align-items: center; width: auto !important; min-height: 0 !important; min-width: 0 !important;
	padding: .5rem .85rem !important; font-size: .6875rem !important; font-weight: 500 !important; letter-spacing: .12em !important; line-height: 1.2 !important;
	border: 1px solid var(--mg-rule) !important; background: transparent !important; color: var(--mg-k) !important;
}
.mg-product .mg-psamples__request:hover, .mg-product .mg-psamples__request:focus-visible { border-color: var(--mg-k) !important; background: transparent !important; color: var(--mg-k) !important; text-decoration: underline; }

/* 4. Basket totals. Desktop: the greige panel had no top padding, so "Basket totals" sat on its top edge and looked
 *    clipped, and the coupon row was double-indented. Phones: the line-item row used WooCommerce's fixed 80px + 132px
 *    grid, which overflowed the screen at 320px and pushed the line price off the right edge. The sticky
 *    "Proceed to checkout" bar covering the totals is handled in assets/js/cart.js. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block { padding-top: 1.25rem !important; }
.wc-block-cart .wc-block-components-sidebar .wc-block-components-panel { padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; background: transparent !important; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
.wc-block-cart .wc-block-cart__totals-title { display: block !important; margin: 0 !important; padding: 0 0 .85rem !important; }
@media (max-width: 781px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) auto !important; column-gap: .85rem !important; }
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__image { padding-right: 0 !important; }
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__product { grid-column: 2 / 3 !important; min-width: 0; overflow-wrap: anywhere; }
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__total { grid-column: 3 / 4 !important; }
}
body.mg-cart-totals-in-view .wc-block-cart__submit-container--sticky { display: none !important; }

/* r10 (0.9.12): desktop thumbnail hover crossfade (gallery.js). Snapshot of the previous image fades out over the new one. */
.mg-product .flex-viewport .mg-gallery-snap { position: absolute; z-index: 3; margin: 0; object-fit: contain; pointer-events: none; opacity: 1; transition: opacity .18s ease-out; background: var(--mg-g); }
.mg-product .flex-viewport .mg-gallery-snap.is-out { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .mg-product .flex-control-thumbs li img { cursor: pointer; } }
/* r10: keep the main image box a stable square on desktop so hovering thumbnails never makes the gallery jump in height
   (and the thumbnails move under the pointer). Taller or wider photos sit whole inside the square on greige. Touch/mobile unchanged. */
@media (hover: hover) and (pointer: fine) and (min-width: 782px) {
	.mg-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; background: var(--mg-g); }
	.mg-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; }
	.mg-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}

/* 0.9.16 (r13): delivery-quote note under the delivery options in the block basket and checkout (MG Configurator 2.3.0). */
.mg-delivery-note { margin: .75rem 0 0; padding: .75rem 1rem; border-left: 2px solid var(--wp--preset--color--contrast, #121212); background: var(--wp--preset--color--surface, #f4f2ee); font-size: var(--wp--preset--font-size--small, .875rem); line-height: 1.5; }
.mg-delivery-note a { text-decoration: underline; text-underline-offset: .2em; }