/* ============================================================================
   MAXIVO — Audit fixes (2026-09-07). Enqueued LAST so it wins the cascade.
   Each block is tagged with its audit-report finding id.
   ============================================================================ */

/* [b2][ty6] The Lookbook is DESIGNED dark (light text, ink figures) but body.maxivo's
   background beat .maxivo-dark on specificity, so it rendered on a LIGHT ground with
   light text (washed-out hero + faint nav). Enforce the intended dark ground. */
body.maxivo.maxivo-dark { background: var(--mx-ink) !important; color: var(--mx-cream); }
/* Dark-context headings rendered dark-on-dark (Glozin's global heading colour beat the
   inherited cream). Force light on every dark surface. */
.maxivo-dark h1, .maxivo-dark h2, .maxivo-dark h3, .maxivo-dark h4 { color: var(--mx-cream) !important; }
body.maxivo .mx-editorial-panel h2 { color: var(--mx-cream) !important; }
body.maxivo .mx-drop-copy h2 { color: var(--mx-cream) !important; }

/* [b1][b4] Hero legibility over the bright photo: stronger scrim + light text. */
body.maxivo .mx-hero-inner { background: linear-gradient(to top, rgba(18,18,17,.9), rgba(18,18,17,.5) 55%, rgba(18,18,17,.08)) !important; }
body.maxivo .mx-hero-copy, body.maxivo .mx-hero-copy h1 { color: var(--mx-cream-2) !important; }
body.maxivo .mx-hero-eyebrow { color: var(--mx-cream-2) !important; opacity: .92 !important; }
body.maxivo .mx-hero-aside, body.maxivo .mx-hero-aside p { color: var(--mx-cream) !important; }

/* [b1] Force the light button label to ink (Glozin overrides link colour → faint "Voir la collection"). */
body.maxivo .mx-btn--light { color: var(--mx-ink) !important; }

/* [b3] Drop-bar CTA was light-on-light (invisible). Accent fill, ink label. */
body.maxivo .mx-drop-cta { background: var(--mx-accent) !important; color: var(--mx-ink) !important; border: 0 !important; }
body.maxivo .mx-drop-cta:hover { opacity: .92; color: var(--mx-ink) !important; }

/* [b12] Size-guide tables: give a min-width so .mx-table-wrap truly scrolls on mobile
   (previously the table just crushed itself to fit → header truncation). */
body.maxivo .mx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { body.maxivo .mx-size-table { min-width: 560px; } }

/* [b13] "Comment mesurer" measure labels broke mid-word → keep on one line. */
body.maxivo .mx-measure-row > span:first-child { white-space: nowrap; }

/* [b5][b6][b7][b8] Cart / checkout: square + flat; kill rounded pills & shadows. */
body.maxivo .woocommerce .coupon input, body.maxivo #coupon_code,
body.maxivo .woocommerce .quantity, body.maxivo .woocommerce .quantity input.qty {
  border-radius: 0 !important; box-shadow: none !important;
}
body.maxivo .cart-collaterals .cart_totals, body.maxivo .woocommerce .cart_totals,
body.maxivo .woocommerce-checkout #order_review, body.maxivo .woocommerce-checkout-review-order,
body.maxivo .woocommerce-additional-fields, body.maxivo .woocommerce .cart-collaterals {
  border-radius: 0 !important; box-shadow: none !important;
}
body.maxivo button[name="update_cart"], body.maxivo input[name="update_cart"] {
  background: transparent !important; color: var(--mx-ink) !important;
  border: 1px solid var(--mx-ink) !important; opacity: 1 !important;
}

/* [ty1] Unify the PDP breadcrumb with the category one (mono caps, slash feel). */
body.maxivo .woocommerce-breadcrumb, body.maxivo .site-breadcrumb {
  font: 400 10px var(--mx-mono) !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--mx-mut-2) !important;
}

/* [ty3] PDP section headings left-aligned + uppercase like home/about. */
body.maxivo .related > h2, body.maxivo .up-sells > h2, body.maxivo .cross-sells > h2,
body.maxivo section.related h2, body.maxivo .products.related h2 {
  text-align: left !important; text-transform: uppercase !important;
}

/* [ty4] About numbered process subheads: Big Shoulders reads too small here → Manrope. */
body.maxivo .mx-how-row h3, body.maxivo .mx-how-row h4 {
  font-family: var(--mx-ptitle) !important; font-weight: 800 !important; letter-spacing: -.01em;
}

/* [ty5] Demote the standard add-to-cart to a secondary (ghost) so the COD form is the single
   primary (loads after commerce.css → wins at equal specificity). The COD button (.button.alt in
   .utopia-fast-bottom-set) is unaffected and stays the solid ink primary. */
body.maxivo .single_add_to_cart_button {
  background: transparent !important; color: var(--mx-ink) !important; border: 1px solid var(--mx-ink) !important;
}
body.maxivo .single_add_to_cart_button:hover {
  background: var(--mx-accent) !important; color: var(--mx-cream) !important; border-color: var(--mx-accent) !important; opacity: 1 !important;
}
/* Primary WooCommerce/Glozin buttons (.button.alt: add-to-cart, "Commander maintenant",
   cart/checkout actions) must hover to the brand accent — never Glozin's demo gold. High
   specificity to beat `.woocommerce button.button.alt:hover`, and the slide-overlay recoloured. */
body.maxivo a.button.alt:hover,
body.maxivo button.button.alt:hover,
body.maxivo input.button.alt:hover,
body.maxivo .woocommerce a.button.alt:hover,
body.maxivo .woocommerce button.button.alt:hover,
body.maxivo .woocommerce input.button.alt:hover {
  background-color: var(--mx-accent) !important; background-image: none !important;
  color: var(--mx-cream) !important; border-color: var(--mx-accent) !important;
}
body.maxivo a.button.alt:hover::before, body.maxivo a.button.alt:hover::after,
body.maxivo button.button.alt:hover::before, body.maxivo button.button.alt:hover::after,
body.maxivo .woocommerce button.button.alt:hover::before, body.maxivo .woocommerce button.button.alt:hover::after,
body.maxivo .single_add_to_cart_button:hover::before, body.maxivo .single_add_to_cart_button:hover::after {
  background: var(--mx-accent) !important; background-image: none !important;
}
/* The Utopia fast-checkout plugin HARDCODES #c39348 (gold) on add-to-cart hover states with very
   high specificity; these overrides exceed it so the accent wins. (The option handles var-based rules.) */
body.maxivo.single-product div.product .single_add_to_cart_button:not(.loading)::after,
body.maxivo.single-product div.product .single_add_to_cart_button:not(.loading):hover::after {
  background-color: var(--mx-accent) !important; border-color: var(--mx-accent) !important;
}
body.maxivo .variations_button button.single_add_to_cart_button.button.alt:hover {
  background: var(--mx-accent) !important; border-color: var(--mx-accent) !important; color: var(--mx-cream) !important;
}
body.maxivo button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed:hover {
  background-color: var(--mx-mut-2) !important; border-color: var(--mx-mut-2) !important;
}
body.maxivo .check_ui_popop_after_submit .popup-content .close-btn:hover { background: var(--mx-accent) !important; }

/* Post-order "Retour à l'accueil" CTA on the fast-checkout /track-order/ confirmation page: the
   theme link colour was overriding the plugin's white text → invisible dark-on-dark at rest.
   Force brand colours — ink at rest, accent on hover, cream text, square to match the site. */
body.maxivo .ufc-ty-cta { background: var(--mx-ink) !important; color: var(--mx-cream) !important; border: 0 !important; border-radius: 0 !important; }
body.maxivo .ufc-ty-cta:hover { background: var(--mx-accent) !important; color: var(--mx-cream) !important; }

/* [ty7] Login/account form: constrain to a centred column (was full ~1400px width). */
body.maxivo.woocommerce-account .woocommerce-form-login,
body.maxivo.woocommerce-account .u-column1 { max-width: 460px; margin-left: auto; margin-right: auto; }

/* [mo1] Home category tiles: one per row on small screens (were 3-across, cramped). */
@media (max-width: 640px) { body.maxivo .mx-cats { grid-template-columns: 1fr !important; } }

/* [mo2] Product cards: stack price under the title on mobile (was same row). */
@media (max-width: 640px) {
  body.maxivo li.product .price { display: block !important; margin-top: 4px !important; }
  body.maxivo .mx-card-meta { display: block !important; }
  body.maxivo .mx-card-price { display: block !important; margin-top: 3px !important; }
}

/* [mo3] PDP related/up-sells columns are handled by the grid-columns block above
   (4 on tablet+desktop, 2 on mobile — they are ul.products too). */

/* [mo5] Surface the result count on mobile too. */
body.maxivo .catalog-toolbar__result-count { display: block !important; }

/* [m5] Colour swatch chips on product cards (visual browse cue). */
body.maxivo .mx-swatches { display: flex; gap: 5px; margin: 5px 0 2px; }
body.maxivo .mx-sw { width: 13px; height: 13px; border: 1px solid var(--mx-line-2); display: inline-block; flex: 0 0 auto; }

/* [c5] Home category tiles read washed-out → gentle exposure correction; square corners (drop the 10px img radius). */
body.maxivo .mx-cat-img { filter: brightness(.93) contrast(1.06) saturate(1.04); border-radius: 0 !important; }

/* ===== Product-grid columns (client spec): home "Nouveautés" = 1/line on mobile,
   Shop + category = 2/line on mobile, and ALL product grids = 4/line on tablet + desktop.
   (Supersedes the earlier thin-category 2-up.) ===== */
@media (min-width: 768px) {
  body.maxivo .mx-prod-grid { grid-template-columns: repeat(4, 1fr) !important; }
  body.maxivo .woocommerce ul.products, body.maxivo.woocommerce ul.products {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important;
  }
}
@media (max-width: 767px) {
  body.maxivo .mx-prod-grid { grid-template-columns: 1fr !important; }
  body.maxivo .woocommerce ul.products, body.maxivo.woocommerce ul.products {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important;
  }
}
body.maxivo .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* Home product-card hover → fade to the 2nd (gallery) image, like the shop cards. */
body.maxivo .mx-card-media { position: relative; overflow: hidden; }
body.maxivo .mx-card-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; z-index: 1; }
body.maxivo .mx-card:hover .mx-card-hover { opacity: 1; }

/* Cart / checkout content: breathing room below the header (was flush). */
body.maxivo.woocommerce-cart .maxivo-main, body.maxivo.woocommerce-checkout .maxivo-main { padding-top: 48px !important; padding-bottom: 56px !important; }

/* Cart cross-sell "Choisir les options" CTA (added by maxivo-cart.js). */
body.maxivo .cross-sells .mx-xsell-cta { display: inline-block; margin-top: 9px; font: 600 10px var(--mx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mx-ink); border-bottom: 1px solid var(--mx-ink); padding-bottom: 2px; }
body.maxivo .cross-sells .mx-xsell-cta:hover { color: var(--mx-accent); border-color: var(--mx-accent); text-decoration: none; }

/* [t3] Buy-box trust strip. */
body.maxivo .mx-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--mx-line); }
body.maxivo .mx-trust li { font: 400 10px var(--mx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-mut-2); position: relative; padding-left: 15px; }
body.maxivo .mx-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--mx-accent); font-weight: 700; }

/* ===== Industrial typography (client picks): display voice = ARCHIVO (wider/clearer than the
   old condensed Big Shoulders — chosen 2026-09-07) across headings, nav, product titles AND the
   slider (via --mx-display in ds.css). The "code-like" Martian Mono is retired → Manrope.
   Single source: redefine the two tokens + a few retunes for Archivo's wider metrics. ===== */
:root {
  --mx-ptitle: 'Archivo', system-ui, sans-serif; /* product titles → display voice (Archivo) */
  --mx-mono:   'Manrope', system-ui, sans-serif; /* retire the monospace everywhere */
}
/* Nav → Archivo bold caps, matching the MAXIVO wordmark + hero slider (Archivo is wide, so a
   touch smaller than the condensed face was, and it still fits the desktop header) */
body.maxivo .mx-nav { font-family: var(--mx-display) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .02em !important; }
/* Product titles tuned for Archivo (wider face reads bigger at the same px → 15px, tracking 0) */
body.maxivo .mx-card-name { font-weight: 700 !important; letter-spacing: 0; font-size: 15px; }
body.maxivo .mx-pdp-summary h1, body.maxivo .mx-pdp-summary .product_title { font-weight: 800 !important; letter-spacing: -.005em; }
body.maxivo .mx-feat-name { font-weight: 700 !important; letter-spacing: 0; }
/* Big display titles: Archivo is wide, so relax the condensed-era tight tracking */
body.maxivo .mx-hero-copy h1, body.maxivo .mx-archive-title { letter-spacing: -.02em !important; }
/* Notification bar: clean letter-spaced caps (Manrope via --mx-mono), a touch bolder */
body.maxivo .mx-announce { font-weight: 600 !important; letter-spacing: .18em !important; }
/* Prices are proportional now — give them ink weight so they read as prices, not captions */
/* Prices BOLD everywhere (client request): shop loop, cart, checkout, order summary,
   totals, related/up-sells, mini-cart — every WooCommerce price amount reads bold. */
body.maxivo .woocommerce-Price-amount, body.maxivo .amount, body.maxivo .price,
body.maxivo .mx-card-price, body.maxivo .mx-feat-price, body.maxivo .mx-price-label,
body.maxivo .cart_totals .amount, body.maxivo .order-total .amount,
body.maxivo table.shop_table .amount, body.maxivo .fc-shipping, body.maxivo [data-cd] {
  font-weight: 700 !important;
}
/* Product card price: bigger + ink */
body.maxivo .mx-card-price { font-size: 16px !important; color: var(--mx-ink) !important; }
/* Product-page main price: biggest + extra-bold (inner .amount too, so nothing dilutes it) */
body.maxivo .mx-pdp-price, body.maxivo .mx-pdp-price .amount,
body.maxivo .mx-pdp-summary .price, body.maxivo .mx-pdp-summary .price .amount {
  font-weight: 800 !important; font-size: 26px !important; color: var(--mx-ink) !important;
}
/* Feature block price */
body.maxivo .mx-feat-price { font-size: 18px !important; }

/* ===== PDP header/meta — this template is Glozin's DEFAULT summary
   (.entry-summary / .product_title / p.price / .product-featured-icons), NOT a custom
   .mx-pdp-summary, so we target the real classes here. ===== */

/* Title: tame the oversized size + keep it clear of the top-right ♡/compare icons */
body.maxivo .entry-summary .product_title,
body.maxivo .product_title.entry-title {
  font-family: var(--mx-display) !important; font-weight: 800 !important;
  font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1.03 !important;
  letter-spacing: -.01em !important; text-transform: uppercase !important; margin: 0 0 8px !important;
}
@media (min-width: 768px) {
  body.maxivo .entry-summary .product_title { padding-right: 128px; } /* clear the ♡ / compare icons */
}

/* Main price: bigger + bold (this is the price that still looked small) */
/* The real markup is .entry-summary > .glozin-product-price > p.price > .woocommerce-Price-amount,
   so target the amount span + bdi directly (the visible number was only 20px). */
body.maxivo .entry-summary .glozin-product-price .woocommerce-Price-amount,
body.maxivo .entry-summary .glozin-product-price .amount,
body.maxivo .entry-summary .glozin-product-price bdi,
body.maxivo .entry-summary p.price .woocommerce-Price-amount,
body.maxivo .entry-summary p.price .amount,
body.maxivo .entry-summary p.price bdi {
  font-size: 36px !important; font-weight: 800 !important; color: var(--mx-ink) !important; line-height: 1.12 !important;
}
body.maxivo .entry-summary .glozin-product-price, body.maxivo .entry-summary p.price { margin: 8px 0 18px !important; }

/* Regular ("was") price: the <del> element stayed 13px while its inner amount was forced to 36px, so
   the line-through was drawn by the del's small metrics and landed at the TOP of the big digits.
   Size the <del> and its amount together + mute it → the strike runs through the middle, and it now
   reads as a clean secondary price under the ink sale price. */
body.maxivo .entry-summary p.price del,
body.maxivo .entry-summary .glozin-product-price del {
  font-size: 22px !important; font-weight: 500 !important; color: var(--mx-mut-2) !important;
  text-decoration-color: var(--mx-mut-2); text-decoration-thickness: 2px; line-height: 1.2 !important;
}
body.maxivo .entry-summary p.price del .woocommerce-Price-amount,
body.maxivo .entry-summary p.price del .amount,
body.maxivo .entry-summary p.price del bdi,
body.maxivo .entry-summary .glozin-product-price del .woocommerce-Price-amount,
body.maxivo .entry-summary .glozin-product-price del .amount,
body.maxivo .entry-summary .glozin-product-price del bdi {
  font-size: 22px !important; font-weight: 500 !important; color: var(--mx-mut-2) !important;
}

/* Product meta: hide the empty "UGS : ND" row, align the rest as a clean 2-column list */
body.maxivo .entry-summary .product_meta {
  display: flex !important; flex-direction: column; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mx-line);
  font-family: var(--mx-body) !important; font-size: 13px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--mx-ink);
}
body.maxivo .entry-summary .product_meta > span { display: grid !important; grid-template-columns: 140px 1fr; align-items: baseline; margin: 0; }
body.maxivo .entry-summary .product_meta .meta__label { color: var(--mx-mut-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body.maxivo .entry-summary .product_meta .stock,
body.maxivo .entry-summary .product_meta .posted_in a { color: var(--mx-ink); font-weight: 600; }
body.maxivo .entry-summary .product_meta .posted_in a:hover { color: var(--mx-accent); text-decoration: none; }
body.maxivo .entry-summary .product_meta .sku_wrapper { display: none !important; } /* no real SKU (ND) */
@media (max-width: 480px) { body.maxivo .entry-summary .product_meta > span { grid-template-columns: 118px 1fr; } }

/* ===== Product cards: quick-add CTA (tap → size buttons → AJAX add), no colour swatches,
   no Glozin "Choisir les options" (client request, 2026-09-07). ===== */
/* custom card is now a container <div> with an inner .mx-card-link <a> */
body.maxivo .mx-card { position: relative; display: flex; flex-direction: column; }
body.maxivo .mx-card-link { display: block; color: inherit; text-decoration: none; }
body.maxivo .mx-card-link:hover { text-decoration: none; color: inherit; }
body.maxivo .mx-card:hover .mx-card-media img.mx-card-main,
body.maxivo .mx-card:hover .mx-card-media img.mx-zoom { transform: scale(1.05); }
/* remove colour swatches + Glozin's loop add-to-cart button everywhere */
body.maxivo .mx-swatches, body.maxivo .mx-sw { display: none !important; }
body.maxivo li.product .add_to_cart_button,
body.maxivo li.product .product-featured-icons--second { display: none !important; }

/* loop card price → ink, so shop/category cards match the homepage cards exactly */
body.maxivo li.product .price, body.maxivo li.product .price .amount, body.maxivo li.product .price bdi { color: var(--mx-ink) !important; }

body.maxivo .mx-qa { margin-top: 12px; position: relative; }
/* brand is flat/square — override Glozin's global rounded buttons */
body.maxivo .mx-qa-btn, body.maxivo .mx-qa-size, body.maxivo .mx-qa-done,
body.maxivo .mx-qa-toast, body.maxivo a.mx-qa-link { border-radius: 0 !important; }
body.maxivo .mx-qa-btn { display: block; width: 100%; background: var(--mx-ink); color: var(--mx-cream); border: 0; padding: 13px 14px; font-family: var(--mx-body); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-align: center; cursor: pointer; transition: opacity .15s; }
body.maxivo .mx-qa-btn:hover { background: var(--mx-accent); color: var(--mx-cream); opacity: 1; text-decoration: none; }
body.maxivo a.mx-qa-link { text-decoration: none; }
body.maxivo .mx-qa-sizes { display: none; }
body.maxivo .mx-qa.is-open .mx-qa-btn { display: none; }
body.maxivo .mx-qa.is-open .mx-qa-sizes { display: block; }
body.maxivo .mx-qa-hint { display: block; font-family: var(--mx-body); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-mut-2, #8a8884); margin-bottom: 7px; text-align: center; }
body.maxivo .mx-qa-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
body.maxivo .mx-qa-size { background: transparent; border: 1px solid var(--mx-line-2, #bdbcb9); padding: 11px 0; font-family: var(--mx-body); font-weight: 700; font-size: 12px; color: var(--mx-ink); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
body.maxivo .mx-qa-size:hover { background: var(--mx-ink); color: var(--mx-cream); border-color: var(--mx-ink); }
body.maxivo .mx-qa-size.is-oos { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
body.maxivo .mx-qa-done { display: none; background: #1d3a1d; color: #dff5df; text-align: center; padding: 13px; font-family: var(--mx-body); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
body.maxivo .mx-qa.is-done .mx-qa-btn, body.maxivo .mx-qa.is-done .mx-qa-sizes { display: none; }
body.maxivo .mx-qa.is-done .mx-qa-done { display: block; }
body.maxivo .mx-qa.is-loading { opacity: .65; pointer-events: none; }
body.maxivo .mx-qa-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px); background: var(--mx-ink); color: var(--mx-cream); padding: 14px 22px; font-family: var(--mx-body); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; z-index: 9999; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
body.maxivo .mx-qa-toast.in { opacity: 1; transform: translate(-50%, 0); }

/* Mobile: WooCommerce endpoint pages (account / cart / checkout) render raw WC templates with
   no side padding, so their content touched both screen edges on phones/tablets. Give them the
   standard page gutter (desktop already has room via the centered/max-width layouts). */
@media (max-width: 980px) {
  body.maxivo.woocommerce-account .maxivo-main,
  body.maxivo.woocommerce-cart .maxivo-main,
  body.maxivo.woocommerce-checkout .maxivo-main {
    padding-left: var(--mx-pad-x) !important; padding-right: var(--mx-pad-x) !important;
  }
}

/* Account "Créer un compte" register CTA: Glozin's .gz-button rendered dark-on-dark (invisible
   label) and as a rounded pill. Make it a readable, flat ink button like the login one. */
body.maxivo.woocommerce-account .gz-button {
  background: var(--mx-ink) !important; border: 0 !important; border-radius: 0 !important;
  padding: 17px 26px !important;
}
body.maxivo.woocommerce-account .gz-button,
body.maxivo.woocommerce-account .gz-button .glozin-button-text {
  color: var(--mx-cream) !important; font: 700 12px var(--mx-body) !important; letter-spacing: .12em; text-transform: uppercase;
}
body.maxivo.woocommerce-account .gz-button:hover { opacity: .9; }

/* NOUVEAU / badge chips: white text on the orange badge (was dark ink). */
body.maxivo .woocommerce-badge, body.maxivo .woocommerce-badges .woocommerce-badge, body.maxivo .mx-flag { color: #fff !important; }

/* Product cards: reserve a consistent 2-line title height so price + CTA line up across the row
   even when a title wraps (e.g. "Pantalon Baggy Coton"). */
body.maxivo li.product .woocommerce-loop-product__title,
body.maxivo .mx-card .mx-card-name { display: block; min-height: 2.4em; }

/* (Express-checkout tier price styling lives in maxivo-commerce.css #ufc-qp-notice — higher
   specificity via the ID; a class rule here can't win.) */

/* ============================================================================
   impeccable slop-list fixes (2026-09-08) — genuine defects only; the warm-gray
   palette + editorial eyebrows are documented, intentional brand identity (kept).
   ============================================================================ */

/* [undersized functional text] floor labels at 11px for legibility. */
body.maxivo .mx-mono-label, body.maxivo .mx-eyebrow, body.maxivo .mx-announce,
body.maxivo .mx-cat-num, body.maxivo .mx-qa-hint,
body.maxivo .mx-archive-crumb, body.maxivo .mx-pdp-crumb,
body.maxivo .woocommerce-breadcrumb, body.maxivo .site-breadcrumb,
body.maxivo .mx-foot-legal, body.maxivo .mx-pdp-count,
body.maxivo #ufc-qp-notice > p { font-size: 11px !important; }

/* [low contrast] breadcrumbs were too light on the warm-gray ground → warm dark grey (AA). */
body.maxivo .woocommerce-breadcrumb, body.maxivo .woocommerce-breadcrumb a,
body.maxivo .site-breadcrumb, body.maxivo .mx-pdp-crumb,
body.maxivo .mx-archive-crumb { color: #514f4b !important; } /* ~6:1 on #E4E3E1 */

/* [low contrast] NOUVEAU badge: keep WHITE label (client request) on a deeper accent so it
   meets WCAG AA (base accent fails with white); ≥11px. */
body.maxivo .mx-flag, body.maxivo .woocommerce-badge,
body.maxivo .woocommerce-badges .woocommerce-badge, body.maxivo .woocommerce-badges .new {
  background: var(--mx-badge) !important; color: #fff !important; font-size: 11px !important;
}

/* [image hover transform] remove the hover zoom on product/category/feature images
   (impeccable tell). The 2nd-image swap requested earlier stays. */
body.maxivo .mx-card:hover .mx-card-media img,
body.maxivo .mx-card:hover .mx-card-media img.mx-card-main,
body.maxivo .mx-card:hover .mx-card-media img.mx-zoom,
body.maxivo a.mx-card:hover .mx-card-media img,
body.maxivo .mx-cat:hover .mx-cat-img,
body.maxivo .mx-feat:hover img,
body.maxivo a:hover > .mx-fill .mx-zoom,
body.maxivo .mx-hoverzoom:hover .mx-zoom { transform: none !important; }

/* [undersized functional text] extend the 11px floor to the remaining fast-checkout + trust labels. */
body.maxivo .mx-trust li,
body.maxivo #utopia-fast-checkout h4,
body.maxivo #ufc-qp-notice [data-ufc-qty] > div:nth-last-child(2),
body.maxivo #ufc-qp-notice [data-ufc-best="1"] > div:first-child { font-size: 11px !important; }
/* cart-count bubble: a compact numeric micro-indicator — nudge 9px → 10px, keep the bubble small. */
body.maxivo .mx-bag-count { font-size: 10px !important; }

/* Side-cart: force-hide Glozin's in-cart recommended products (the grid-columns rule
   outranks a class selector, so use the drawer ID) + belt-and-suspenders on the extras. */
body.maxivo #mx-cartdrawer .woocommerce-loop-products,
body.maxivo #mx-cartdrawer [class*="glozin-note-estimate-coupon"],
body.maxivo #mx-cartdrawer .woocommerce-shipping-calculator { display: none !important; }

/* Side-cart button hierarchy: primary "Commande" = ink, secondary "Voir le panier" = outline
   (Glozin fills both; override via the drawer ID). */
body.maxivo #mx-cartdrawer .woocommerce-mini-cart__buttons a.checkout {
  background: var(--mx-ink) !important; color: var(--mx-cream) !important; border: 0 !important;
}
body.maxivo #mx-cartdrawer .woocommerce-mini-cart__buttons a:not(.checkout) {
  background: transparent !important; color: var(--mx-ink) !important; border: 1px solid var(--mx-ink) !important;
}

/* [cardalign 2026-09-10] Homepage product cards were not aligned.
   The grid is repeat(4,1fr), which resolves to minmax(auto,1fr): each track keeps an
   automatic minimum equal to its item min-content. The custom card price is
   white-space:nowrap, and an on-sale product renders TWO amounts
   ("79,800 DT 44,900 DT"), so that single card had a ~100px wider min-content. Its
   track — and with it the 3/4 image box and the CTA — grew wider/taller than its
   siblings (measured at a 900px viewport: 153px 174px 257px 176px). Let the tracks
   shrink and let the price wrap so every card keeps one identical width/height. */
body.maxivo .mx-prod-grid > .mx-card { min-width: 0; }
body.maxivo .mx-card-price { white-space: normal; }
/* Keep the homepage card rows aligned when a name or a sale price wraps: the meta
   must stay ONE flex row (letting it flex-wrap drops the price ~48px on wide cards,
   because line breaking uses max-content before shrinking), and the CTA is pinned to
   the card bottom so every button in the row lands on the same line. */
body.maxivo .mx-card > .mx-qa { margin-top: auto; }

/* [cardalign 2026-09-10 · tablet] In the narrow 4-up range (768-900px) a long name
   cannot share one row with the price: the name min-content (longest word) plus the
   price is wider than the column and the price visibly spilled past the card edge
   (measured +8px at 820px, +21px at 768px). Stack them like the mobile layout and
   reserve three title lines so the price still lands on the same line in the row. */
@media (min-width: 768px) and (max-width: 900px) {
  body.maxivo .mx-card-meta { display: block; }
  body.maxivo .mx-card-price { display: block; margin-top: 3px; }
  body.maxivo .mx-card .mx-card-name { min-height: 3.6em; }
}

/* [credit] Developer credit (Utopia). Kept on its own centred line under the legal bar:
   as a 4th item inside that row it landed under the floating "back to top" button on
   laptop widths, and the row itself is only balanced with three items. */
body.maxivo .mx-foot-credit { margin: 12px 0 0; text-align: center; font: 400 10px var(--mx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mx-foot-mut); }
body.maxivo .mx-foot-credit a { color: inherit; text-decoration: none; }
body.maxivo .mx-foot-credit a:hover { color: var(--mx-cream); text-decoration: underline; }
@media (max-width: 720px) { body.maxivo .mx-foot-credit { text-align: left; } }