/* Mirror & Glass: WooCommerce styling (theme 0.2.0). Mobile first, system fonts, square corners. */
:root {
	--mg-ink: var(--wp--preset--color--contrast, #111);
	--mg-stone: var(--wp--preset--color--base, #eae7e1);
	--mg-white: var(--wp--preset--color--surface, #fff);
	--mg-line: var(--wp--preset--color--line, #d3cec5);
	--mg-muted: var(--wp--preset--color--muted, #4a473f);
	--mg-alert: var(--wp--preset--color--alert, #8f4a30);
}

/* ---------- Header: nav + mini basket ---------- */
.mg-header__right { align-items: center; }
.wc-block-mini-cart__button { padding: .4rem; color: var(--mg-ink); }
.wc-block-mini-cart__badge { background: var(--mg-ink) !important; color: var(--mg-white) !important; border-color: var(--mg-stone) !important; font-size: .7rem; }
.wc-block-mini-cart__quantity-badge svg { width: 26px; height: 26px; }
.mg-header--checkout .mg-header__back { margin: 0; }
.mg-header--checkout .mg-header__back a { color: inherit; }

/* ---------- Breadcrumbs, notices ---------- */
.woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs { color: var(--mg-muted); margin-bottom: 1rem; }
.wp-block-woocommerce-breadcrumbs a { color: inherit; }
.wc-block-components-notice-banner { border-radius: 0 !important; border-width: 1px !important; font-size: var(--wp--preset--font-size--small); }
.wc-block-components-notice-banner.is-error { border-color: var(--mg-alert) !important; background: #fff !important; }
.wc-block-components-notice-banner > svg { border-radius: 0 !important; }

/* ---------- Generic Woo controls ---------- */
.wc-block-components-button:not(.is-link), .wp-block-woocommerce-product-button .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	border-radius: 0 !important; background: var(--mg-ink) !important; color: var(--mg-white) !important; border: 1px solid var(--mg-ink) !important;
	font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; min-height: 3rem;
}
.wc-block-components-button:not(.is-link):hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--mg-muted) !important; border-color: var(--mg-muted) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input, .wc-blocks-components-select__select,
.wc-block-components-textarea, .wc-block-components-address-form input, .woocommerce form .input-text, .woocommerce form select {
	border-radius: 0 !important; border-color: #b9b4ab !important; background: #fff !important;
}
.wc-block-components-text-input.is-active input:focus, .wc-block-components-text-input input:focus { box-shadow: inset 0 0 0 1px var(--mg-ink) !important; border-color: var(--mg-ink) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { border-radius: 0; }
.wc-block-components-panel, .wc-block-components-totals-wrapper { border-color: var(--mg-line) !important; }

/* ---------- Shop / category listing ---------- */
.mg-shop .wp-block-query-title { margin-bottom: .5rem; }
.mg-shop__layout { flex-wrap: wrap !important; }
.mg-shop__side { flex-basis: 100% !important; }
.mg-shop__cats { border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); padding: .75rem 0; }
.mg-shop__cats summary { cursor: pointer; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--subtle, #6a665e); }
.mg-shop__cats ul { list-style: none; padding-left: 0; margin: .5rem 0 0; }
.mg-shop__cats ul ul { padding-left: 1rem; margin: 0; }
.mg-shop__cats li { margin: .2rem 0; }
.mg-shop__cats a { color: var(--mg-ink); text-decoration: none; }
.mg-shop__cats a:hover { text-decoration: underline; }
.mg-shop__cats .wc-block-product-categories-list-item-count { color: var(--mg-muted); font-size: .85em; }
.mg-shop__bar { font-size: var(--wp--preset--font-size--small); color: var(--mg-muted); margin-bottom: 1rem; align-items: center; }
.mg-shop__bar select { border-radius: 0; border: 1px solid #b9b4ab; padding: .45rem .6rem; background: #fff; }
@media (min-width: 900px) {
	.mg-shop__layout { flex-wrap: nowrap !important; }
	.mg-shop__side { flex-basis: 240px !important; position: sticky; top: 6rem; align-self: flex-start; }
}

.mg-products .wc-block-product-template { gap: 1rem !important; }
.mg-pcard { height: 100%; box-sizing: border-box; background: var(--mg-white); border: 1px solid var(--mg-line); padding: 1rem; gap: .5rem !important; }
.mg-pcard__img { margin: 0 0 .25rem !important; background: #f4f2ee; aspect-ratio: 1 / 1; overflow: hidden; }
.mg-pcard__img img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mg-pcard__title { font-size: var(--wp--preset--font-size--small) !important; font-weight: 500; line-height: 1.35; margin: 0 !important; }
.mg-pcard__title a { color: var(--mg-ink); text-decoration: none; }
.mg-pcard__title a:hover { text-decoration: underline; }
.mg-pcard__sku { font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); margin: 0 !important; }
.mg-pcard__price { font-size: var(--wp--preset--font-size--x-small) !important; color: var(--mg-muted); margin: 0 !important; }
.mg-pcard__btn { margin-top: auto !important; }
.mg-pcard__btn .wp-block-button__link { width: 100%; }
.mg-price-note { font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); font-weight: 400; }
.wp-block-query-pagination { margin-top: 2rem; font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a { color: var(--mg-ink); }

/* ---------- Single product ---------- */
.mg-product__top { align-items: flex-start; }
.mg-product .woocommerce-product-gallery__image, .mg-product .woocommerce-product-gallery__wrapper img,
.mg-product .wc-block-components-product-image img, .mg-product .woocommerce-product-gallery img {
	background: linear-gradient(135deg, #f4f2ee 0%, #dcd8d0 100%);
}
/* Real product imagery: show full image, no tint overlay, no forced crop */
.mg-product .woocommerce-product-gallery img { background: #f4f2ee; opacity: 1; mix-blend-mode: normal; }
.mg-product .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.mg-product .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: cover; }
.mg-product .wp-block-post-title { margin-top: .25rem; }
.mg-product .wp-block-woocommerce-product-price { margin: .5rem 0; }
.mg-product .wp-block-woocommerce-product-meta { margin-top: 1rem; }
.mg-product .wp-block-woocommerce-product-sku { font-size: inherit; }
.mg-product .wp-block-woocommerce-product-details .wc-tabs { padding: 0; border-bottom: 1px solid var(--mg-line); }
.mg-product .wp-block-woocommerce-product-details .wc-tabs li a { color: var(--mg-ink); }
@media (max-width: 781px) { .mg-product__top { gap: 1rem !important; } }

/* ---------- Cart & checkout blocks ---------- */
.mg-cart .wp-block-post-title { margin-bottom: 1.5rem; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-size: var(--wp--preset--font-size--small); }
.wc-block-cart-items, .wc-block-cart .wc-block-cart__totals-title { border-color: var(--mg-line) !important; }
.wc-block-cart-items__row { background: transparent; }
.wc-block-components-product-name { color: var(--mg-ink) !important; font-weight: 500; text-decoration: none; font-size: var(--wp--preset--font-size--small) !important; }
.wc-block-components-product-details { font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); margin: .4rem 0 0 !important; display: grid; gap: .1rem; }
.wc-block-components-product-details li { margin: 0 !important; }
.wc-block-components-product-details__name { font-weight: 500; color: var(--mg-ink); }
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { background: #dcd8d0; }
.wc-block-components-sidebar .wc-block-components-panel, .wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--mg-white); border: 1px solid var(--mg-line); padding: 0 1rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: var(--wp--preset--font-size--medium); }
.wc-block-components-quantity-selector { border-radius: 0 !important; }
.wc-block-components-quantity-selector::after { border-radius: 0 !important; border-color: #b9b4ab !important; }
.wc-block-checkout__no-payment-methods-notice, .wc-block-components-checkout-step__container .wc-block-components-notice-banner { font-size: var(--wp--preset--font-size--small); }
.wc-block-components-checkout-step__title { font-size: var(--wp--preset--font-size--large) !important; }
.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option { border-radius: 0 !important; }

/* ---------- My account (shortcode) ---------- */
.woocommerce-account.logged-in .woocommerce { display: grid; gap: 2rem; }
@media (min-width: 900px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 220px minmax(0, 1fr); } }
.woocommerce-account:not(.logged-in) .woocommerce form.login, .woocommerce-account:not(.logged-in) .woocommerce form.register { background: var(--mg-white); border: 1px solid var(--mg-line); border-radius: 0; padding: 1.5rem; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--mg-line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mg-line); }
.woocommerce-MyAccount-navigation a { display: block; padding: .7rem 0; color: var(--mg-ink); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { font-weight: 600; }
.woocommerce-account .woocommerce form .form-row { display: grid; gap: .3rem; margin-bottom: 1rem; }
.woocommerce-account .woocommerce form .input-text { padding: .75rem .8rem; border: 1px solid #b9b4ab; font: inherit; }
.woocommerce-account h2 { font-size: var(--wp--preset--font-size--x-large); }
.woocommerce-account .u-columns { display: grid; gap: 2rem; }
@media (min-width: 782px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { background: var(--mg-white); border: 1px solid var(--mg-line); padding: 1.5rem; }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-info { border-radius: 0; }

/* ---------- Configurator in product page ---------- */
.mg-cfg__product--locked .mg-cfg__locked { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.mg-cfg__product--locked .mg-code { margin-left: .4rem; font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); }
.mg-cfg__cta[aria-disabled=false] { opacity: 1; cursor: pointer; }
.mg-cfg__title { grid-column: 1 / -1; margin: var(--wp--preset--spacing--60, 3rem) 0 1.25rem; }
.mg-price-jump { display: block; margin-top: .35rem; font-size: var(--wp--preset--font-size--small); color: var(--mg-ink); }
@media (max-width: 781px) { .mg-product .woocommerce-product-gallery { max-width: 70%; } }
/* One option per line in basket/checkout; hide the inline " / " separators. */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }

/* 0.4.0: "From £X inc. VAT" on cards and product pages */
.mg-price-from { display: inline; color: var(--wp--preset--color--contrast); font-weight: 400; }
.mg-price-from__amount { font-weight: 600; }
.mg-price-from__vat { font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); }
.mg-pcard__price .mg-price-note { display: none; }
.mg-product .wp-block-woocommerce-product-price .mg-price-from { font-size: var(--wp--preset--font-size--large); }
.mg-product .wp-block-woocommerce-product-price .mg-price-note { display: block; margin-top: .2rem; }

/*
 * 0.4.1 REGRESSION FIX: WooCommerce prints the gallery with inline opacity:0 and only fades it in once
 * its deferred gallery JS (jQuery + FlexSlider + PhotoSwipe + single-product.js) has run. Until then
 * the main image is an empty box with faint thumbnails, and it stays that way if that JS is slow,
 * blocked or fails. Show the gallery straight away; before FlexSlider has built its viewport, show
 * only the first image so the slides don't stack. FlexSlider and the lightbox work as before.
 */
.mg-product .woocommerce-product-gallery { opacity: 1 !important; }
/* 0.4.2: keyed on FlexSlider's own inline style on the wrapper (set the moment it initialises), not :has(),
   so the rule can never still match once the slider is running (0.4.1's version stopped thumbnail changes for QA). */
.mg-product .woocommerce-product-gallery__wrapper:not([style]) > .woocommerce-product-gallery__image:not(:first-child) { display: none; }

/* 0.4.1: "Supply only or supply & fit" line under the product page From price */
.mg-price-service { margin: .35rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--mg-muted); }

/* 0.4.2: lightbox trigger (added by assets/js/gallery.js; WooCommerce only adds it when hover zoom is on) */
.mg-product .woocommerce-product-gallery { position: relative; }
.mg-product .woocommerce-product-gallery__trigger { position: absolute; top: .75rem; right: .75rem; z-index: 9; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--wp--preset--color--contrast, #111); font-size: 0; }
.mg-product .woocommerce-product-gallery__trigger::before { content: ""; width: .8rem; height: .8rem; border: 2px solid currentColor; border-radius: 50%; transform: translate(-2px, -2px); }
.mg-product .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; width: 2px; height: .45rem; background: currentColor; transform: translate(6px, 6px) rotate(-45deg); }
.mg-product .woocommerce-product-gallery__trigger:hover, .mg-product .woocommerce-product-gallery__trigger:focus-visible { background: #fff; }
.mg-product .woocommerce-product-gallery__trigger img { display: none !important; }