/* =====================================================================
   Matjari design layer v1.0.1 — the visible redesign.
   Loads after components.css and re-skins the storefront: editorial
   type, a dark footer, elevated cards, real buttons, styled WooCommerce
   surfaces (my-account, notices, cart), and the v1.0 elements
   (language pill, thank-you). Additive and variable-driven throughout.
   ===================================================================== */

:root {
  --mr-ink: var(--m-text, #231f1c);
  --mr-bg: var(--m-bg, #fffdfb);
  --mr-primary: var(--m-primary, #8b2c3e);
  --mr-accent: var(--m-accent, #e8c4a0);
  /* Alphas compose from the printed --m-*-rgb triplets (DS-17); the
     opaque --mr-soft is printed per store in #matjari-vars with a
     color-mix override below. Radii + motion come from tokens.css
     (--m-r-*, --m-t-*, --m-ease): the second scale and the duplicate
     curve are gone. PL-25/PL-26. */
  --mr-line: rgba(var(--m-text-rgb), .1);
  --mr-line-2: rgba(var(--m-text-rgb), .2);
  --mr-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(var(--m-text-rgb), .22);
  --mr-shadow-lg: 0 18px 50px -20px rgba(var(--m-text-rgb), .32);
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  :root {
    --mr-soft: color-mix(in srgb, var(--mr-ink) 4%, var(--mr-bg)); /* mirrors matjari_print_css_vars() */
  }
}

/* (Font smoothing lives in base.css; refine only re-tints ::selection —
   the soft primary wash over the text's own ink.) */
::selection { background: rgba(var(--m-primary-rgb), .22); }

/* ================= Type: an editorial scale ================= */
.m-title { font-size: clamp(26px, 6vw, 38px); line-height: 1.3; letter-spacing: -0.01em; }
.m-section__title {
  font-size: clamp(21px, 5vw, 30px);
  line-height: 1.35;
  margin-bottom: clamp(18px, 4vw, 28px);
}
.m-section { padding-block: clamp(40px, 8vw, 76px); }
.m-section + .m-section { padding-block-start: clamp(8px, 3vw, 24px); }

/* ================= Header micro-interactions =================
   (Skin lives solely in components' v1.5 block; refine only adds feel.) */
.m-nav a, .m-nav button { transition: color var(--m-t-fast) var(--m-ease), background var(--m-t-fast) var(--m-ease), transform var(--m-t-fast) var(--m-ease); }
.m-nav button:active, .m-nav a:active { transform: scale(.93); }
.m-nav__burger, [data-drawer-open], [data-minicart-open] { border-radius: var(--m-r-pill); }
.m-nav__burger:hover, [data-drawer-open]:hover, [data-minicart-open]:hover {
  background: rgba(var(--m-text-rgb), .06);
}
/* Gradients and tints below are @supports ENHANCEMENTS over a flat
   fallback. They must never be a second declaration in the same rule: a
   var()-bearing declaration wins the cascade, throws the flat value
   away, and only then fails substitution — leaving no background at
   all. Every enhancement keeps its exact pre-Phase-2.5 value. DS-17. */
.m-promo, .m-promobar {
  background: var(--mr-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}
.m-promo a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
[data-countdown] { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ================= Buttons: weight and light ================= */
.m-btn {
  border-radius: var(--m-r);
  font-weight: 700;
  letter-spacing: .005em;
  transition: transform var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-base) var(--m-ease),
              background var(--m-t-base) var(--m-ease), color var(--m-t-base) var(--m-ease),
              border-color var(--m-t-base) var(--m-ease), filter var(--m-t-base) var(--m-ease);
}
.m-btn:active { transform: scale(.965); }
.m-btn--primary {
  background: var(--mr-primary);
  box-shadow: 0 2px 4px -1px rgba(var(--m-primary-rgb), .5),
              0 10px 24px -8px rgba(var(--m-primary-rgb), .55),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.m-btn--primary:hover { filter: brightness(1.05) saturate(1.05); box-shadow: 0 4px 8px -2px rgba(var(--m-primary-rgb), .55), 0 16px 34px -10px rgba(var(--m-primary-rgb), .6), inset 0 1px 0 rgba(255,255,255,.22); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-promo, .m-promobar {
    background: linear-gradient(100deg, var(--mr-primary), color-mix(in srgb, var(--mr-primary) 72%, #000 10%));
  }
  .m-btn--primary {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--mr-primary) 92%, #fff 8%),
      var(--mr-primary) 55%,
      color-mix(in srgb, var(--mr-primary) 88%, #000 12%));
    /* THE WHITE FLASH FIX (UX-NOTES 2026-08-13, absorbed by Phase 3.1 — it is
       on the checkout's own submit button). The `background` shorthand above
       sets background-image AND resets background-COLOR to transparent. On
       hover, components' .m-btn--primary:hover (0,2,0) outranks this rule and
       replaces the whole thing with a flat colour: background-image cannot
       interpolate so the gradient drops instantly, while background-color
       animates UP from transparent — and for that ~240ms window the button is
       see-through against a near-white page. Restating the colour AFTER the
       shorthand (order matters — the shorthand would reset it again) means the
       colour layer is never transparent, so there is nothing to flash.
       Not a Phase 2.5 regression: the same cascade exists at 370f380; PL-25
       only made the window long enough to notice. */
    background-color: var(--mr-primary);
  }
}
.m-btn--ghost { border: 1.5px solid var(--mr-line-2); background: var(--mr-bg); }
.m-btn--ghost:hover { border-color: var(--mr-ink); }
.m-btn--wa { box-shadow: var(--m-wa-shadow), inset 0 1px 0 rgba(255,255,255,.2); }
.m-btn--wa:hover { filter: brightness(1.05); }
.m-btn.is-busy { opacity: .7; pointer-events: none; }

/* ================= Product cards ================= */
.m-card {
  border-radius: var(--m-r-l);
  overflow: clip;
  transition: transform var(--m-t-base) var(--m-ease), box-shadow var(--m-t-base) var(--m-ease);
}
.m-card__media, .m-card > a > .m-card__media { border-radius: 0; background: var(--mr-soft); }
.m-card img { transition: transform var(--m-t-slow) var(--m-ease); }
@media (hover: hover) {
  .m-card:hover { transform: translateY(-4px); box-shadow: var(--mr-shadow-lg); }
  .m-card:hover img { transform: scale(1.045); }
}
.m-card .price, .m-card__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-card .price del { opacity: .5; font-weight: 400; }
.m-card .price ins { text-decoration: none; color: var(--mr-primary); }
.m-card__dots i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ================= Chips (archive) ================= */
.m-chips { gap: 8px; padding-block: 6px 2px; }
.m-chip {
  border-radius: var(--m-r-pill);
  border: 1.5px solid var(--mr-line-2);
  font-weight: 700;
  padding-block: 8px;
  transition: all var(--m-t-fast) var(--m-ease);
}
.m-chip:hover { border-color: var(--mr-ink); transform: translateY(-1px); }
.m-chip.is-active { background: var(--mr-ink); border-color: var(--mr-ink); color: var(--mr-bg); box-shadow: 0 6px 16px -8px rgba(var(--m-text-rgb), .6); }
.m-shop__head { margin-bottom: clamp(16px, 4vw, 26px); }

/* ================= Product page buy box ================= */
.m-buy { gap: 14px; }
[data-price], .m-product__price { font-size: clamp(22px, 5vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; }
[data-price] del { opacity: .45; font-size: .72em; font-weight: 400; }
[data-price] ins { text-decoration: none; color: var(--mr-primary); }
.m-swatches label { transition: transform var(--m-t-fast) var(--m-ease); }
.m-swatches label:active { transform: scale(.94); }
.m-swatch__chip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.m-swatch__pill { border-radius: var(--m-r-pill); border: 1.5px solid var(--mr-line-2); font-weight: 700; transition: all var(--m-t-fast) var(--m-ease); }
.m-swatches input:checked + .m-swatch__pill,
.m-swatches input:checked ~ .m-swatch__pill { background: var(--mr-ink); border-color: var(--mr-ink); color: var(--mr-bg); }
.m-qty { border: 1.5px solid var(--mr-line-2); border-radius: var(--m-r); overflow: clip; background: var(--mr-bg); }
.m-qty input { font-weight: 700; font-size: var(--m-fs-base); }
.m-qty__btn { transition: background var(--m-t-fast) var(--m-ease); font-size: var(--m-fs-m); }
.m-qty__btn:hover { background: var(--mr-soft); }
.m-buy__stock { font-weight: 700; color: var(--mr-primary); }
.m-product__trust {
  border: 1px dashed var(--mr-line-2);
  border-radius: var(--m-r-l);
  padding: 14px 18px;
  background: var(--m-accent-wash);
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-product__trust { background: color-mix(in srgb, var(--mr-accent) 14%, var(--mr-bg)); }
}
.m-product__trust li { font-weight: 700; font-size: var(--m-fs-sm); padding-block: 4px; }
/* The ::marker tick that used to live here is GONE. It fought the ::before dot
   in components.css: two markers on one <li>, in two layers, neither
   cancelling the other. `list-style: none` suppresses the marker box in
   Chromium and Gecko, so the tick rendered on some engines and not others, and
   a ::marker cannot be positioned logically at all. One marker survives, in
   components.css, and it is a tick. UX-NOTES 2026-08-13. */
.m-sticky {
  background: rgba(var(--m-bg-rgb), .9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--mr-line);
  box-shadow: 0 -10px 30px -18px rgba(var(--m-text-rgb), .35);
}
.m-sticky__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-related { border-top: 1px solid var(--mr-line); margin-top: clamp(28px, 6vw, 48px); }

/* ================= THE DARK FOOTER ================= */
.m-footer {
  background: var(--mr-ink);
  color: #fff;
  margin-top: clamp(40px, 8vw, 72px);
  padding-top: clamp(36px, 7vw, 60px);
  border-top: 0;
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-footer {
    background: color-mix(in srgb, var(--mr-ink) 96%, var(--mr-primary) 4%);
    color: color-mix(in srgb, #fff 88%, var(--mr-accent));
  }
}
.m-footer a { color: inherit; opacity: .82; text-decoration: none; transition: opacity var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease); }
.m-footer a:hover { opacity: 1; color: var(--mr-accent); }
.m-footer__grid { gap: clamp(24px, 5vw, 40px); padding-bottom: clamp(28px, 6vw, 44px); }
.m-footer__brand { font-size: clamp(20px, 4.5vw, 26px); font-weight: 700; color: #fff; }
.m-footer__tagline { opacity: .7; max-width: 30ch; line-height: 1.9; }
.m-footer__head {
  font-size: var(--m-fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .55; margin-bottom: 14px;
}
.m-footer ul { display: flex; flex-direction: column; gap: 9px; }
.m-footer__plain { opacity: .72; font-size: var(--m-fs-sm); }
.m-footer__bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 16px;
  font-size: var(--m-fs-xs);
}
.m-footer__cod {
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--m-r-pill);
  padding: 6px 16px;
}
.m-footer__credit { opacity: .6; }
.m-footer__credit strong { color: #fff; opacity: 1; }
.m-footer__bar .m-langs { background: rgba(255,255,255,.08); }
.m-footer__bar .m-langs__item { color: #fff; opacity: .65; }
.m-footer__bar .m-langs__item.is-active { background: rgba(255,255,255,.16); opacity: 1; box-shadow: none; }

/* ================= Language pill (light contexts) ================= */
.m-langs { display: inline-flex; gap: 2px; padding: 3px; background: rgba(var(--m-text-rgb), .06); border-radius: var(--m-r-pill); }
.m-langs__item {
  min-width: 46px; padding: 5px 13px; border-radius: var(--m-r-pill);
  text-decoration: none; text-align: center; font-size: var(--m-fs-xs); font-weight: 700;
  color: rgba(var(--m-text-rgb), .62);
  transition: background var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
.m-langs__item:hover { color: var(--mr-ink); }
.m-langs__item.is-active { background: var(--mr-bg); color: var(--mr-ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.m-drawer__langs {
  margin-top: auto; padding: 18px 4px 8px;
  border-top: 1px solid var(--mr-line);
  display: flex; justify-content: center;
}

/* ================= Drawer & minicart panels ================= */
.m-drawer {
  border-start-end-radius: 0; border-end-end-radius: 0;
  box-shadow: var(--mr-shadow-lg);
}
.m-drawer a { font-weight: 700; border-radius: var(--m-r); transition: background var(--m-t-fast) var(--m-ease); }
.m-drawer a:hover { background: var(--mr-soft); }
.m-minicart { box-shadow: var(--mr-shadow-lg); }
.m-minicart__head strong { font-size: var(--m-fs-base); }
.m-minicart__item { border-radius: var(--m-r); transition: background var(--m-t-fast) var(--m-ease); }
.m-minicart__thumb { border-radius: var(--m-r); overflow: clip; background: var(--mr-soft); }
.m-minicart__thumb img { border-radius: var(--m-r); }
.m-minicart__checkout { min-height: 52px; font-size: var(--m-fs-base); }
.m-minicart__cartlink { font-weight: 700; opacity: .7; }
/* Each @supports block sits AFTER the rule it enhances (or it would lose
   to it) and BEFORE any same-specificity state modifier (or it would win
   against that). .is-done is compound and safe either way, but the split
   keeps the pattern honest. */
.m-freebar { border-radius: var(--m-r); padding: 12px 14px; background: var(--m-accent-wash); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-freebar { background: color-mix(in srgb, var(--mr-accent) 24%, var(--mr-bg)); }
}
.m-freebar.is-done { background: var(--m-success-bg); }
.m-freebar__track { border-radius: var(--m-r-pill); overflow: clip; background: rgba(var(--m-text-rgb), .1); height: 7px; display: block; }
.m-freebar__track i { display: block; height: 100%; border-radius: var(--m-r-pill); background: var(--mr-primary); transition: inline-size var(--m-t-slow) var(--m-ease); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-freebar__track i { background: linear-gradient(90deg, var(--mr-primary), color-mix(in srgb, var(--mr-primary) 55%, var(--mr-accent))); }
}

/* ================= WooCommerce notices (site-wide) ================= */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
ul.woocommerce-error, div.wc-block-components-notice-banner {
  border: 1px solid var(--mr-line) !important;
  border-inline-start: 4px solid var(--mr-primary) !important;
  border-radius: var(--m-r) !important;
  background: var(--mr-bg) !important;
  box-shadow: var(--mr-shadow);
  padding: 14px 18px !important;
  font-weight: 700;
  color: var(--mr-ink);
}
.woocommerce-message { border-inline-start-color: var(--m-success-ink) !important; }
.woocommerce-error, ul.woocommerce-error { border-inline-start-color: var(--m-danger-ink) !important; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a {
  color: var(--mr-primary); text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: inherit; }

/* ================= My-account: from raw list to product ================= */
.m-woopage .woocommerce-MyAccount-navigation { margin-bottom: 22px; }
.m-woopage .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 4px;
  display: flex; gap: 6px; overflow-x: auto;
  background: var(--mr-soft); border-radius: var(--m-r-pill);
  scrollbar-width: none;
}
.m-woopage .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.m-woopage .woocommerce-MyAccount-navigation li { margin: 0; flex: none; }
.m-woopage .woocommerce-MyAccount-navigation li a {
  display: block; padding: 9px 18px; border-radius: var(--m-r-pill);
  font-weight: 700; font-size: var(--m-fs-sm); text-decoration: none; color: var(--mr-ink);
  opacity: .7; transition: all var(--m-t-fast) var(--m-ease); white-space: nowrap;
}
.m-woopage .woocommerce-MyAccount-navigation li a:hover { opacity: 1; }
.m-woopage .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--mr-bg); opacity: 1; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.m-woopage .woocommerce-MyAccount-content {
  background: var(--mr-bg);
  border: 1px solid var(--mr-line);
  border-radius: var(--m-r-l);
  padding: clamp(18px, 4vw, 28px);
  box-shadow: var(--mr-shadow);
  line-height: 2;
}
.m-woopage .woocommerce-MyAccount-content a { color: var(--mr-primary); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 800px) {
  .m-woopage .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
  .m-woopage .woocommerce-MyAccount-navigation ul { flex-direction: column; border-radius: var(--m-r-l); padding: 8px; }
  .m-woopage .woocommerce-MyAccount-navigation li a { border-radius: var(--m-r); }
}

/* ================= Cart page ================= */
.m-woopage table.shop_table {
  border: 1px solid var(--mr-line) !important;
  border-radius: var(--m-r-l);
  overflow: clip;
  box-shadow: var(--mr-shadow);
}
.m-woopage table.shop_table th { background: var(--mr-soft); font-size: var(--m-fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.m-woopage table.shop_table td, .m-woopage table.shop_table th { border-color: var(--mr-line) !important; padding: 14px 16px; }
.m-woopage .product-thumbnail img { border-radius: var(--m-r); background: var(--mr-soft); }
.m-woopage .product-remove a {
  display: grid; place-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mr-soft); color: var(--mr-ink) !important;
  font-weight: 400; transition: all var(--m-t-fast) var(--m-ease);
}
.m-woopage .product-remove a:hover { background: var(--m-danger-bg); color: var(--m-danger-ink) !important; }
.m-woopage .quantity .qty { border-radius: var(--m-r); border: 1.5px solid var(--mr-line-2); min-height: 42px; text-align: center; font-weight: 700; }
.m-woopage .coupon .input-text { border-radius: var(--m-r) !important; min-height: 46px; border: 1.5px solid var(--mr-line-2) !important; }
.m-woopage .cart_totals { border-radius: var(--m-r-l); }
.m-woopage .cart_totals h2 { font-size: var(--m-fs-m); }
.m-woopage .checkout-button { width: 100%; min-height: 54px; font-size: var(--m-fs-base); border-radius: var(--m-r) !important; }

/* ================= Checkout ================= */
/* The three !important flags this rule used to carry (border-radius, padding,
   border) bought nothing — (0,3,1) already beats components'
   body.woocommerce-checkout input[type=text] at (0,2,2) — and cost the state
   layer everything: `border: … !important` outranks ANY non-important
   declaration regardless of specificity, so the new .m-invalid error border
   would have needed its own !important, propagating the disease. Removed;
   rendering is unchanged. */
.m-woopage .form-row input.input-text, .m-woopage .form-row textarea, .m-woopage .form-row select {
  border-radius: var(--m-r); padding: 12px 15px;
  min-height: 48px; font-size: var(--m-fs-base);
  border: 1.5px solid var(--mr-line-2);
  background: var(--mr-bg);
  transition: border-color var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease);
}
.m-woopage .form-row input.input-text:focus, .m-woopage .form-row textarea:focus, .m-woopage .form-row select:focus {
  border-color: var(--mr-primary);
  box-shadow: 0 0 0 3px rgba(var(--m-primary-rgb), .14);
  outline: none;
}
.m-woopage .form-row label { font-weight: 700; font-size: var(--m-fs-sm); }
.m-woopage .form-row.matjari-hidden { display: none !important; }
.m-woopage .m-cofm__h { margin-block: 24px 12px; }
.m-woopage .m-codelivery, .m-woopage .m-cophone-err { box-shadow: var(--mr-shadow); }
.matjari-nudge {
  margin: 0 0 16px; padding: 13px 16px;
  border-radius: var(--m-r); font-weight: 700; font-size: var(--m-fs-s);
  background: var(--m-accent-wash);
  border: 1px dashed var(--mr-line-2);
}
/* The flat fallback above is the nearest token (accent-wash 26%); this
   restores the exact original tint. The .matjari-delivery-estimate line that
   used to share this block is gone with the estimate paragraph itself.
   ORDER MATTERS: base rule -> @supports -> modifier. @supports adds no
   specificity, so this block must sit ABOVE .matjari-nudge--done or it
   would win the tie against it and repaint the success state with the
   plain accent tint on every modern browser. */
@supports (color: color-mix(in srgb, red 50%, red)) {
  .matjari-nudge { background: color-mix(in srgb, var(--mr-accent) 32%, var(--mr-bg)); }
}
.matjari-nudge--done { background: var(--m-success-bg); border-color: var(--m-success-line); }
.m-woopage #place_order {
  width: 100%; min-height: 56px; border-radius: var(--m-r);
  font-size: var(--m-fs-base); font-weight: 700;
  box-shadow: 0 12px 28px -10px rgba(var(--m-primary-rgb), .6);
}
/* On a phone the sticky bar is the primary CTA; the in-flow button stays for
   the no-JS path but must not read as a second, competing one. */
@media (max-width: 799px) {
  .m-woopage #place_order { box-shadow: none; }
}
.m-woopage .wc_payment_method label { font-weight: 700; }
.m-woopage .woocommerce-privacy-policy-text { font-size: var(--m-fs-xs); opacity: .7; }

/* ================= Thank-you ================= */
.m-thanks { max-width: 560px; text-align: center; padding-block: 34px 60px; }
.m-thanks__mark {
  width: 76px; height: 76px; margin: 6px auto 16px;
  display: grid; place-content: center; color: #fff; border-radius: 50%;
  background: var(--mr-primary);
  box-shadow: 0 14px 34px -10px rgba(var(--m-primary-rgb), .7),
              0 0 0 10px rgba(var(--m-primary-rgb), .09);
  animation: m-thanks-pop var(--m-t-slow) var(--m-ease);
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-thanks__mark { background: linear-gradient(160deg, color-mix(in srgb, var(--mr-primary) 90%, #fff 10%), var(--mr-primary)); }
}
@keyframes m-thanks-pop { from { transform: scale(.6); opacity: 0; } }
.m-thanks__title { font-size: clamp(24px, 6vw, 32px); margin: 0 0 4px; }
.m-thanks__number { margin: 0 0 12px; font-size: var(--m-fs-s); opacity: .75; }
.m-thanks__number strong { font-size: var(--m-fs-base); opacity: 1; }
.m-thanks__expect { margin: 0 auto 20px; max-width: 420px; font-size: var(--m-fs-s); line-height: 1.9; }
.m-thanks__wa { width: 100%; max-width: 380px; min-height: 52px; margin-bottom: 26px; }
.m-thanks__card {
  text-align: start; background: var(--mr-bg);
  border: 1px solid var(--mr-line); border-radius: var(--m-r-l);
  padding: 20px 20px 16px; box-shadow: var(--mr-shadow); margin-bottom: 22px;
}
.m-thanks__h { font-size: var(--m-fs-s); margin: 0 0 10px; }
.m-thanks__addr + .m-thanks__h, .m-thanks__items + .m-thanks__h { margin-top: 18px; }
.m-thanks__items { list-style: none; margin: 0 0 6px; padding: 0; }
.m-thanks__items li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: var(--m-fs-s); border-bottom: 1px solid var(--mr-line); }
.m-thanks__items li:last-child { border-bottom: 0; }
.m-thanks__items li.is-fee { opacity: .75; }
.m-thanks__items li.is-total { font-weight: 700; font-size: var(--m-fs-base); padding-top: 12px; }
.m-thanks__addr { margin: 0; font-size: var(--m-fs-s); line-height: 1.8; }
.m-thanks__back { min-width: 220px; }
.m-thanks__failed { font-weight: 700; padding: 30px 0 10px; }

/* ================= Popup, empty states, pagination ================= */
.m-popup__panel { border-radius: var(--m-r-l); box-shadow: var(--mr-shadow-lg); }
.m-popup--sheet .m-popup__panel { border-end-start-radius: 0; border-end-end-radius: 0; }
.m-popup__heading { font-weight: 700; font-size: var(--m-fs-m); }
.m-empty { padding-block: clamp(40px, 10vw, 72px); }
.m-empty__title { font-size: var(--m-fs-m); font-weight: 700; }
/* (Pagination lives in ONE rule set: components' v1.3.0 block, with
   refine's skin folded in. Phase 2.5 PL-21.) */

/* ================= LTR ================= */
/* (The focus ring lives in base.css — one branded ring, no radius
   override so pills keep their shape while focused. Reduced-motion
   lives in base.css too. Phase 2.5 consolidation.) */
html[lang="en"] body, :lang(en) { letter-spacing: .002em; }

/* ================= v1.0.2 hardening ================= */
[hidden] { display: none !important; }

/* Cart badge geometry lives in components.css's header system (PL-24);
   refine keeps only the bump animation minicart.js drives. */
.m-nav__count.is-bump { animation: m-count-bump var(--m-t-slow) var(--m-ease); }
@keyframes m-count-bump {
  30% { transform: scale(1.45); }
  60% { transform: scale(.9); }
}

/* Drawer is a column so the language pill can sit at its foot. */
#m-drawer, .m-drawer { display: flex; flex-direction: column; }

/* Footer bar: never collides, wraps gracefully. */
.m-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px;
}

/* Notices container above the product. */
.m-notices { padding-block-start: 14px; }
.m-notices:empty { display: none; }
.m-notices .woocommerce-message a.button, .m-notices .wc-forward {
  float: none; display: inline-block; margin-inline-start: 10px;
  background: none; color: var(--mr-primary); padding: 0; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ================= v1.1.0 — the cart page, finally owned =================
   components.css addressed `.cart_collaterals` (underscore); WooCommerce's
   real class is `.cart-collaterals` (hyphen), so the totals wrapper never
   had layout and slid under the floated form. Authoritative layout here. */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals {
  float: none !important; width: auto !important; position: static !important;
}
body.woocommerce-cart .m-woopage .woocommerce {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
/* .m-freebar joined this list in 1.8.1: core's nudge delegates to the theme's
   shared bar now, so the cart page emits .m-freebar and stopped matching the
   .matjari-nudge half — which left it outside the grid it is meant to span.
   The class stays listed for a core-standalone install, which still renders it. */
/* .m-empty joined this list in 1.8.4: an EMPTY cart has no .cart-collaterals
   to fill the 380px sidebar track, but the two-column rule below still
   applies, so the block was laid out in column 1 and centred within
   `width - 380 - gap` instead of within the page. Measured at 1000px and
   1280px: 204px off centre in both, which is exactly half of 380 + 28. */
body.woocommerce-cart .m-woopage .woocommerce-notices-wrapper,
body.woocommerce-cart .m-woopage .m-empty,
body.woocommerce-cart .m-woopage .m-freebar,
body.woocommerce-cart .m-woopage .matjari-nudge { grid-column: 1 / -1; margin: 0; }
body.woocommerce-cart .m-woopage .woocommerce-notices-wrapper:empty { display: none; }
@media (min-width: 1000px) {
  body.woocommerce-cart .m-woopage .woocommerce {
    grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start;
  }
  body.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
  /* One token for both sticky panels (the checkout's #order_review reads the
     identical one below). 92px was a guess that happened to clear the default
     nav and slid UNDER the editorial one, which is ~119px tall at this width. */
  body.woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky !important; top: var(--m-header-clear); }
}
body.woocommerce-cart .cart-collaterals {
  border: 1px solid var(--mr-line); border-radius: var(--m-r-l);
  background: var(--mr-bg); padding: 20px;
  box-shadow: var(--mr-shadow);
}
body.woocommerce-cart td.product-name { min-width: 200px; }
body.woocommerce-cart td.product-name a { font-weight: 700; display: inline-block; line-height: 1.6; }
body.woocommerce-cart td.product-name .variation { margin: 2px 0 0; font-size: var(--m-fs-xs); color: rgba(var(--m-text-rgb), .6); display: flex; gap: 6px; flex-wrap: wrap; }
body.woocommerce-cart td.product-name .variation dd { margin: 0; }
body.woocommerce-cart .quantity .qty { width: 58px; }
body.woocommerce-cart td.product-price, body.woocommerce-cart td.product-subtotal { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.woocommerce-cart td.product-subtotal { font-weight: 700; }

/* ================= Checkout: pro two-column ≥1000px ================= */
@media (min-width: 1000px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "notices notices" "details heading" "details review";
    gap: 8px 36px;
    align-items: start;
  }
  /* wc_checkout_form.submit_error() PREPENDS this group into form.checkout.
     Every named area is occupied, so without a placement of its own the
     error auto-placed into an implicit row BELOW the whole checkout — the
     buyer was told nothing where she was looking. */
  body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-area: notices; }
  body.woocommerce-checkout form.checkout #customer_details { grid-area: details; }
  body.woocommerce-checkout form.checkout #order_review_heading { grid-area: heading; margin-top: 0; }
  body.woocommerce-checkout form.checkout #order_review { grid-area: review; position: sticky; top: var(--m-header-clear); }
}
.m-checkout-reassure {
  display: inline-flex; align-items: center; gap: 8px;
  margin: -6px 0 18px; padding: 9px 16px;
  background: var(--m-accent-wash); /* the exact same formula — the token IS accent 26% on bg */
  border: 1px dashed var(--mr-line-2); border-radius: var(--m-r-pill);
  font-weight: 700; font-size: var(--m-fs-sm);
}

/* ================= Drawer: live quantities + shipping ================= */
.m-minicart__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.m-minicart__qty {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--mr-soft); border-radius: var(--m-r-pill); padding: 2px;
  transition: opacity var(--m-t-fast) var(--m-ease);
}
.m-minicart__qty.is-busy { opacity: .55; }
.m-minicart__qty button {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--mr-bg); color: var(--mr-ink);
  font-size: var(--m-fs-s); line-height: 1; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transition: color var(--m-t-fast) var(--m-ease), transform var(--m-t-fast) var(--m-ease);
}
.m-minicart__qty button:hover { color: var(--mr-primary); }
.m-minicart__qty button:active { transform: scale(.9); }
.m-minicart__qty b { min-width: 26px; text-align: center; font-size: var(--m-fs-sm); font-variant-numeric: tabular-nums; }
.m-minicart__price { font-size: var(--m-fs-sm); font-variant-numeric: tabular-nums; }
.m-minicart__ship {
  margin: 4px 0 10px; font-size: var(--m-fs-xs); font-weight: 700;
  color: rgba(var(--m-text-rgb), .68);
}

/* (Shop sort lives in ONE merged rule in components' v1.3.0 toolbar
   block — refine's re-skin used to erase its 44px touch target.
   Phase 2.5 PL-23.) */

/* §3.4b: the closed-store state on a product card. The grid used to lose its
   plus silently on simple products while variable ones still advertised
   options, so the same shelf told two stories. One state, said out loud. */
.m-card__quick--closed {
  opacity: 1; pointer-events: none;
  display: inline-flex; align-items: center;
  padding-inline: 10px; height: 30px;
  border-radius: var(--m-r-pill, 999px);
  background: var(--m-surface, #f4f2ef); color: var(--mr-ink);
  font-size: var(--m-fs-2xs); font-weight: 700; white-space: nowrap;
}