/* mn-ux-fixes.css */
/* =====================================================================================================
   MiamiNuts usability fixes (2026-10-12) — 10 issues, minimal overrides, no redesign.
   Loaded after the theme + Elementor + mn-* styles (see miaminuts-wp/mu-plugins/mn-ux-fixes.php), so
   !important is used only where Elementor's per-element CSS or an existing !important rule would win.
   ===================================================================================================== */

/* ---------- 1. Type scale: 9 steps (7 fixed + 2 fluid heading tokens) ---------- */
:root{
  --mn-fs-12:12px;  /* labels, eyebrows, tags, fine print            (was 9.5 / 11 / 11.5) */
  --mn-fs-13:13px;  /* secondary text, legal line, header nav         (was 12.5) */
  --mn-fs-14:14px;  /* small body, footer links, facts                (was 13.5 / 14.5) */
  --mn-fs-16:16px;  /* body                                           (was 15) */
  --mn-fs-18:18px;  /* lead text, card titles, footer wordmark        (was 17) */
  --mn-fs-20:20px;  /* product row names, logo                        (was 21) */
  --mn-fs-24:24px;  /* step numerals                                  (was 22) */
  --mn-fs-h2:clamp(26px, 23.87px + 0.565vw, 32px);   /* section headings: 26 at <=375 -> 32 at >=1440 (both ends land exactly on the cap) */
  --mn-fs-h1:clamp(34px, 30.47px + 0.94vw, 44px);    /* stat numerals, shop heading: 34 at <=375 -> 44 at >=1440 */
  --mn-fs-hero:clamp(34px, 5vw, 72px);               /* home hero headline (2026-10-25 review item 7): 34 on phones, 72 at >=1440 */
}
/* 12 */
.elementor-element-128e143 .elementor-field-label,
p.elementor-heading-title{font-size:var(--mn-fs-12) !important;}
/* 13 (2026-10-25 review item 4: the New badge and Soon tags moved up from 12; the ledger labels went to 14 with their values) */
.mn-line-new, .mn-soon-tag,
.mn-footer-legal, .mn-footer-legal span, .mn-footer-legal a,
.elementor-location-header .menu-item > a, header .menu-item > a{font-size:var(--mn-fs-13) !important;}
/* 14 */
.mn-footer-col, .mn-footer-col a, .mn-footer-wa, .mn-line-facts dt, .mn-line-facts dd, .mn-line-facts dd a{font-size:var(--mn-fs-14) !important;}
/* 16 — Elementor text widgets that were 15px */
.elementor-element-herosub, .elementor-element-herosub p,
.elementor-element-jrn1d, .elementor-element-jrn2d, .elementor-element-jrn3d, .elementor-element-jrn4d,
.elementor-element-jrn1d p, .elementor-element-jrn2d p, .elementor-element-jrn3d p, .elementor-element-jrn4d p,
.elementor-element-std1d, .elementor-element-std2d, .elementor-element-std3d, .elementor-element-std4d,
.elementor-element-std1d p, .elementor-element-std2d p, .elementor-element-std3d p, .elementor-element-std4d p,
.elementor-element-tstr, .elementor-element-tstr p, .elementor-element-ctap, .elementor-element-ctap p,
.mn-line-price{font-size:var(--mn-fs-16) !important;}
/* 18 — the hero lead was 17px at >=768 */
@media(min-width:768px){.elementor-element-herosub, .elementor-element-herosub p{font-size:var(--mn-fs-18) !important;}}
.mn-footer-brand{font-size:var(--mn-fs-18) !important;}
/* 20 */
.mn-line-name{font-size:var(--mn-fs-20) !important;}
/* 24 */
.elementor-element-jrn1n .elementor-heading-title, .elementor-element-jrn2n .elementor-heading-title,
.elementor-element-jrn3n .elementor-heading-title, .elementor-element-jrn4n .elementor-heading-title{font-size:var(--mn-fs-24) !important;}
/* fluid headings (clamp for headings only) */
.elementor-element-philh2 .elementor-heading-title, .elementor-element-jrnh .elementor-heading-title,
.elementor-element-feath .elementor-heading-title, .elementor-element-ctah .elementor-heading-title{font-size:var(--mn-fs-h2) !important;}
.elementor-element-std1n .elementor-heading-title, .elementor-element-std2n .elementor-heading-title,
.elementor-element-std3n .elementor-heading-title, .elementor-element-std4n .elementor-heading-title,
/* same specificity as the older mn-brand.php rules (".home … heroh1", ".elementor-element-std1 h3…"), printed later, so the token wins */
.elementor-element-std1 h3.elementor-heading-title{font-size:var(--mn-fs-h1) !important;}
.elementor-element-heroh1 .elementor-heading-title,
.home .elementor-element-heroh1 .elementor-heading-title{font-size:var(--mn-fs-hero) !important;}

/* ---------- 2, 3, 5. Long all-caps -> sentence case; uppercase + tracking kept only on short labels ---------- */
/* announcement bar: the source copy is already sentence case ("Your first order ships free · Cash on Delivery across India") */
.mn-announce, .mn-announce a, .mn-announce span{text-transform:none !important;letter-spacing:normal !important;}
/* (2026-10-12) the hero eyebrow is now typed in sentence case in Elementor ("Roasted makhana · Clean label") and the
   "Why we are different" section was replaced by "Our standards", so no lowercase workaround is needed any more. */
/* short labels that stay in capitals (THE JOURNEY, THE COLLECTION, footer heads): tracking within .08em at 12px */
p.elementor-heading-title{letter-spacing:.08em !important;}
.elementor-element-heroeye .elementor-heading-title, .elementor-element-stde .elementor-heading-title{letter-spacing:.02em !important;}

/* ---------- 4. Small text: >= 12px everywhere (see 1); hero text legible over the video ---------- */
.elementor-element-heroeye .elementor-heading-title,
.elementor-element-herosub, .elementor-element-herosub p{text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.25);}
/* measured: cream text over the bright marble fell to ~1.5–2.6:1 at 1440 px, so a scrim sits behind the text column only
   (fades out before the bowl). It is a pseudo-element above the video and below the content; clicks pass through. */
/* desktop: the background video sits in the same container as the text, so the scrim goes ON the video container
   (above the video, below the text) */
.elementor-element-hero1 .elementor-background-video-container::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(16,16,16,.62) 0%, rgba(16,16,16,.46) 34%, rgba(16,16,16,.12) 58%, rgba(16,16,16,0) 70%);}
/* phones/tablets: no video (no autoplay), the section's still image shows — a soft even tint behind the text */
@media(max-width:1024px){
  .elementor-element-hero1{position:relative;}
  .elementor-element-hero1::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(16,16,16,.5) 0%, rgba(16,16,16,.38) 60%, rgba(16,16,16,.2) 100%);}
}

/* ---------- 4b. (owner, 2026-10-12) 12 px minimum on every other page too ----------
   Inline-styled labels inside Elementor HTML widgets (About steps, Subscription card, Journal meta) are matched by their
   exact inline size; the rest are the classes that set 10–11.5 px. Uppercase labels keep caps, with tracking <= .08em
   so the larger text keeps roughly the same width (seals, plates and pills don't wrap). */
[style*="font-size:12px"], [style*="font-size:12px"], [style*="font-size:12px"], [style*="font-size:12px"]{font-size:var(--mn-fs-12) !important;letter-spacing:.08em !important;}
.mn-batch-status, .mn-batch-pdf,
.elementor-field-group .elementor-field-label, /* breadcrumbs left this list 2026-10-26: sentence case at 13 px (mn-brand.php) */
.woocommerce #reviews .comment-form-rating label, .woocommerce #reviews .woocommerce-review__published-date,
.mn-chip, .mn-size-chip .mn-size-tag, .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart,
.mn-pb-eyebrow, .mn-pb-soon, .mn-new-eyebrow, .mn-new-seal, .mn-plate-sub, .mn-wa-product,
.mn-wl-pick legend, .mn-wl-eyebrow, .mn-wl-seal, .mn-wl-honest{font-size:var(--mn-fs-12) !important;}
.mn-batch-status, .mn-batch-pdf,
.elementor-field-group .elementor-field-label, .mn-pb-eyebrow, .mn-pb-soon, .mn-new-eyebrow, .mn-new-seal, .mn-plate-sub,
.mn-wl-pick legend, .mn-wl-eyebrow, .mn-wl-seal{letter-spacing:.08em !important;}
@media(max-width:600px){.mn-plate-sub{display:flex;flex-direction:column;align-items:center;gap:4px;}.mn-plate-dot{display:none;}}
.elementor-element-sbcard span[style*="font-size:12px"]{white-space:nowrap;}
.mn-cart-count{font-size:var(--mn-fs-12) !important;min-width:18px !important;height:18px !important;line-height:18px !important;border-radius:999px !important;top:-7px !important;right:-9px !important;}

/* ---------- 6. Our standards: see our-standards.html (Elementor sections std1 + tst1 to delete) ---------- */

/* ---------- 7. "Join the list": solid pill, same as the SHOP buttons (cream on the dark plaster) ---------- */
.mn-plaster.mn-plaster.mn-plaster .elementor-form .elementor-field-type-submit .elementor-button:disabled,
.mn-plaster.mn-plaster.mn-plaster .elementor-form .elementor-field-type-submit .elementor-button[aria-disabled="true"],
.elementor-form-waiting .elementor-field-type-submit .elementor-button{opacity:.55 !important;cursor:not-allowed !important;}

/* ---------- 8. Footer: centred 1100px container. 2026-10-26 (owner, SmoothUI Footer Complex as the model): brand block (4/12) +
   four link columns (8/12, .mn-footer-links in mn-brand.php) from 1025 px; below that the brand block on top, the links under it ---------- */
.mn-footer-cols{max-width:1100px !important;margin-left:auto !important;margin-right:auto !important;
  grid-template-columns:minmax(0,1fr) !important;gap:44px !important;}
@media(min-width:1025px){.mn-footer-cols{grid-template-columns:minmax(0,4fr) minmax(0,8fr) !important;gap:64px !important;}}
.mn-footer-legal{max-width:1100px !important;margin-left:auto !important;margin-right:auto !important;
  flex-direction:column;align-items:center;justify-content:center !important;text-align:center;gap:6px 12px !important;}

/* ---------- 9. Video pause control: bottom-left, clear of the WhatsApp button (bottom-right) ---------- */
.mn-video-toggle{right:auto !important;left:calc(16px + env(safe-area-inset-left, 0px)) !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;min-width:44px;min-height:44px;z-index:5;}
.mn-video-toggle:focus-visible{outline:2px solid var(--mn-cream) !important;outline-offset:2px !important;}

/* ---------- 10. Product rows: each row is a clear, clickable card ---------- */
/* 2026-10-25 taste-skill review: the card is a fill one tone below the page (the "How ordering works" surface), not a 1 px
   outline; hover goes one tone deeper. Secondary text var(--mn-grey) stays >= 4.8:1 on both tones. */
.mn-line-list{border-top:0 !important;display:grid;gap:10px;}
.mn-line-item a{padding:18px 20px !important;border:0 !important;border-radius:var(--mn-radius-sm);
  background:var(--mn-sand);cursor:pointer;
  transition:background-color .2s var(--mn-ease);}
.mn-line-item a:hover{padding-left:20px !important;background:var(--mn-sand-dark);}
.mn-line-item a:focus-visible{outline:2px solid var(--mn-green) !important;outline-offset:2px !important;border-color:var(--mn-green) !important;}
.mn-line-cta{display:inline-block;transition:transform .2s var(--mn-ease);}
.mn-line-item a:hover .mn-line-cta, .mn-line-item a:focus-visible .mn-line-cta{transform:translateX(4px);}
@media(max-width:600px){.mn-line-item a{padding:16px !important;}.mn-line-item a:hover{padding-left:16px !important;}}
@media(prefers-reduced-motion:reduce){.mn-line-item a, .mn-line-cta{transition:none !important;}
  .mn-line-item a:hover .mn-line-cta, .mn-line-item a:focus-visible .mn-line-cta{transform:none !important;}}

/* ---------- MN-AUD-013 (2026-10-13): the sticky header must not cover what keyboard focus or an anchor link scrolls to ----------
   #site-header is position:sticky and opaque: 81 px tall on desktop, 64-71 px at 1024 px and below (measured). One token for
   its height; scroll-padding keeps focused controls (Tab / Shift+Tab) and #anchor targets clear of it, with 16 px air.
   The admin bar (logged-in only) adds its own height via WordPress's --wp-admin--admin-bar--height. */
:root{--mn-header-h:81px;}
@media(max-width:1024px){:root{--mn-header-h:71px;}}
html{scroll-padding-top:calc(var(--mn-header-h) + 16px + var(--wp-admin--admin-bar--height, 0px));}
/* the skip-link target takes focus programmatically (tabindex=-1): no outline box around the whole page section */
#content:focus:not(:focus-visible), #main:focus:not(:focus-visible), [role="main"]:focus:not(:focus-visible){outline:none;}

/* ---------- 11. UX-09: muted ink #5A5A55 at full opacity instead of opacity dimming (failed AA on the cream ground); sizes unchanged ---------- */
.mn-batch-row span[style*="opacity:.55"],
.elementor-element-ctdetails span[style*="opacity:.5"],
.elementor-element-bbtrl p[style*="opacity:.4"]{opacity:1 !important;color:#5A5A55 !important;}
.elementor-element-bbtre .elementor-heading-title{color:#5A5A55 !important;}

/* ---------- 12. UX-18: tap targets >= 44 px (listed) / >= 24 px (rest). Hit areas grow by padding or min-size; negative margins keep
   every glyph and line exactly where it was — no visual change. ---------- */
/* cart remove ×: the 28 px circle is drawn by ::before; the link around it is 44×44 */
.woocommerce-cart table.shop_table.cart td.product-remove a.remove{position:relative;z-index:0;width:44px !important;height:44px !important;line-height:42px !important;margin:-8px;border-color:transparent !important;}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before{content:"";position:absolute;z-index:-1;inset:8px;border:1px solid rgba(16,16,16,.18);border-radius:50%;pointer-events:none;}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover{background:transparent !important;}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover::before{background:var(--mn-error);border-color:var(--mn-error);}
/* footer "Cookie settings" */
.mn-footer-cookie{display:inline-block;min-height:44px;padding:12px 2px;margin:-12px -2px;vertical-align:baseline;}
/* breadcrumbs */
.woocommerce-breadcrumb a,.rank-math-breadcrumb a{display:inline-block;padding:15px 3px;margin:-15px -3px;} /* 3 px: live's Jost made "Home" 42 px wide at 2 px */
/* header bag icon: 21×21 on desktop, 37 px wide on phones */
@media(min-width:1025px){.mn-cart-icon{min-width:44px;min-height:44px;justify-content:center;margin:-11.5px -11.5px -11.5px 6.5px;}}
@media(max-width:1024px){#site-header .mn-cart-icon{min-width:44px;justify-content:center;margin-right:-6.5px;}}
/* small inline-block links that sat under 24 px: cart product name, PDP category, PDP "Request this batch's report" */
.woocommerce-cart table.shop_table.cart td.product-name > a,.single-product .product_meta .posted_in a,.mn-logistics dd a{display:inline-block;padding:4px 0;margin:-4px 0;}
/* ---------- 13. UX-21: footer legal row — balanced wrap where the sentence is wider than the phone row (with the &nbsp; in "coming soon" in mn-brand.php) ---------- */
.mn-footer-legal > span{text-wrap:balance;}
/* owner 2026-10-17: phones drop the 0.05em tracking so each legal item fits on one line (the COD sentence needed 370 px of a 351 px row at 390) */
@media(max-width:767px){.mn-footer-legal,.mn-footer-legal span,.mn-footer-legal a{letter-spacing:0 !important;}}
/* 2026-10-24 (legal fixes): the home newsletter's required "I am 18 or older" tickbox (Elementor acceptance field) on the
   green band — bronze box, light label at the size of the consent line under the button */
.elementor-element-128e143 .elementor-field-type-acceptance .elementor-field-option{display:flex;align-items:center;gap:8px;}
.elementor-element-128e143 .elementor-acceptance-field{width:18px;height:18px;margin:0;flex:none;accent-color:var(--mn-bronze);}
.elementor-element-128e143 .elementor-field-type-acceptance label{font-size:13px;line-height:1.5;color:rgba(240,237,229,.85);text-transform:none;letter-spacing:normal;}

/* mn-ux-shop-fixes.css */
/* =====================================================================================================
   MiamiNuts /shop/ usability fixes (2026-10-12) — 10 issues, minimal overrides, no redesign.
   Reuses the :root type-scale tokens defined in miaminuts-fixes.css (mn-ux-fixes.css); nothing is redefined here.
   Loaded after mn-ux-fixes.css (same loader, mn-ux-fixes.php).
   ===================================================================================================== */

/* ---------- 1. Type scale: map the shop's off-scale sizes onto the existing tokens ---------- */
.mn-card-meta, .mn-card-meta *, .mn-unit{font-size:var(--mn-fs-13) !important;}                 /* was 12.5 */
.mn-pb-note, .mn-wl-chip span{font-size:var(--mn-fs-14) !important;}                              /* was 13.5 */
.mn-wl-note, .mn-wl-place, .mn-wl-few, .mn-wl-eta-card{font-size:var(--mn-fs-13) !important;}       /* was 12.5 (waitlist notes) */
.mn-shop-intro, .mn-pb-sub{font-size:var(--mn-fs-16) !important;}                                 /* was 15 */
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:var(--mn-fs-20) !important;}   /* was 19 */
.mn-pb-plate-name{font-size:var(--mn-fs-20) !important;}                                          /* was 17–21 */
.mn-card-frame .mn-plate-name{font-size:var(--mn-fs-18) !important;}                             /* was 17 (phones) */
@media(min-width:601px){.mn-card-frame .mn-plate-name{font-size:var(--mn-fs-24) !important;}}    /* was 26 (desktop) */
.mn-pb-title{font-size:var(--mn-fs-20,20px) !important;} @media(min-width:768px){.mn-pb-title{font-size:var(--mn-fs-24,24px) !important;}}                                                          /* 2026-10-25: group headings (h3) under "Coming soon" */
.woocommerce-products-header__title.page-title{font-size:var(--mn-fs-h1) !important;}             /* heading: 34 -> 44 */

/* ---------- 2–5. Long labels in sentence case, >= 12px, tracking only where caps remain ---------- */
.mn-card-frame .mn-plate-sub{text-transform:none !important;letter-spacing:.01em !important;font-size:var(--mn-fs-13) !important;}
.mn-pb-eyebrow{text-transform:none !important;letter-spacing:.01em !important;font-size:var(--mn-fs-13) !important;}
.mn-wl-pick legend{text-transform:none !important;letter-spacing:.01em !important;font-size:var(--mn-fs-13) !important;}

/* ---------- 6 + 7. One tile for every product ----------
   2026-10-25 shop review fix 1: was a tinted mat + an inner frame line + a shadowed tile (three frames). Now one flat tile:
   the photo, or the name plate on the shop's surface tone (var(--mn-sand), as the ordering band and the collection rows), with the
   flavour's colour as a strip along the bottom. Hover deepens the plate one tone (photos keep their zoom, mn-brand.php [8]). */
.woocommerce ul.products li.product .mn-card-frame{background:none !important;border:0 !important;
  border-radius:var(--mn-radius-sm) !important;padding:0;box-shadow:none !important;}
.woocommerce ul.products li.product .mn-card-frame img{display:block;}
.woocommerce ul.products li.product .mn-card-frame img,
.woocommerce ul.products li.product .mn-card-frame .mn-plate{border-radius:var(--mn-radius-sm) !important;box-shadow:none !important;}
.woocommerce ul.products li.product .mn-card-frame .mn-plate{background:var(--mn-sand) !important;color:var(--mn-ink) !important;overflow:hidden;transition:background-color .2s var(--mn-ease);}
.woocommerce ul.products li.product:hover .mn-card-frame .mn-plate{background:var(--mn-sand-dark) !important;}
.woocommerce ul.products li.product .mn-card-frame .mn-plate::before{display:none;}
.woocommerce ul.products li.product .mn-card-frame .mn-plate-name{color:var(--mn-ink) !important;}
.woocommerce ul.products li.product .mn-card-frame .mn-plate-sub{color:#6B5230 !important;}
.woocommerce ul.products li.product .mn-card-frame .mn-plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--mn-flavour,var(--mn-bronze));}
/* flavour accents: one list for the shop cards (li.post-ID) and the product page (body.postid-ID); 16–18 = the collection rows' dots */
li.post-16, body.postid-16{--mn-flavour:var(--mn-bronze);}    /* Rosa: bronze */
li.post-17, body.postid-17{--mn-flavour:#B65A48;}    /* Ember: brick */
li.post-217, body.postid-217{--mn-flavour:#4A4843;}  /* Midnight: charcoal */
li.post-216, body.postid-216{--mn-flavour:#C27A2C;}  /* Molten: amber */
@media(max-width:600px){.woocommerce ul.products li.product .mn-card-frame{border-radius:var(--mn-radius-sm,14px) !important;}
  .woocommerce ul.products li.product .mn-card-frame .mn-plate{border-radius:var(--mn-radius-sm,14px) !important;}}
@media(prefers-reduced-motion:reduce){.woocommerce ul.products li.product .mn-card-frame .mn-plate{transition:none;}}

/* ---------- 7b. (owner, 2026-10-12) the large name plate on the product page matches the shop cards ----------
   2026-10-25: flattened with them (one tile on var(--mn-sand), no mat, frame line or shadow) */
.single-product .woocommerce-product-gallery__image--placeholder{background:none !important;border:0 !important;border-radius:var(--mn-radius-sm);padding:0 !important;box-sizing:border-box;}
.single-product .mn-plate--big{background:var(--mn-sand) !important;color:var(--mn-ink) !important;border-radius:var(--mn-radius-sm);box-shadow:none;overflow:hidden;}
.single-product .mn-plate--big::before{display:none;}
.single-product .mn-plate--big::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--mn-flavour,var(--mn-bronze));}
.single-product .mn-plate--big .mn-plate-name{color:var(--mn-ink) !important;font-size:var(--mn-fs-h1) !important;}
.single-product .mn-plate--big .mn-plate-sub{color:#6B5230 !important;text-transform:none !important;letter-spacing:.01em !important;font-size:var(--mn-fs-14) !important;}
@media(max-width:600px){.single-product .woocommerce-product-gallery__image--placeholder,.single-product .mn-plate--big{border-radius:12px;}
  /* 2026-10-25 product page review: a square plate pushed Add to bag below the first screen on phones; a 220 px band keeps it in view */
  .single-product .mn-plate--big{aspect-ratio:auto;height:220px;max-height:none;padding:24px;}}

/* ---------- 7c. 2026-10-25 shop review fixes 2 + 3: the ordering band's place on the shop, and the coming-soon pick cards as filled
   tiles (were 1 px outlines): surface var(--mn-sand), hover one tone deeper, picked = a 2 px teal ring. The tick stays a form control. ---------- */
.mn-order--shop{margin:72px auto 0;}
.mn-pb .mn-wl-card{border:0 !important;background:var(--mn-sand) !important;}
.mn-pb .mn-wl-card:hover{background:var(--mn-sand-dark) !important;}
.mn-pb .mn-wl-card:has(.mn-wl-card-in:checked){background:var(--mn-sand) !important;box-shadow:inset 0 0 0 2px var(--mn-green) !important;}
@media(max-width:600px){.mn-order--shop{margin-top:56px;}}

/* ---------- 8. "Coming soon": plain muted label with a small leading dot, not a button ---------- */
.mn-pb-soon{border:0 !important;border-radius:0 !important;padding:0 !important;background:none !important;box-shadow:none !important;
  text-transform:none !important;letter-spacing:normal !important;font-style:italic;font-weight:400 !important;
  font-size:var(--mn-fs-13) !important;color:#5A5A55 !important;cursor:default !important;}
.mn-pb-soon::before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--mn-bronze);vertical-align:2px;}

/* ---------- 9. Main menu: the current page is marked by colour AND a 2px underline (WordPress already sets
   aria-current="page" on it — core nav walker, verified on /shop/) ---------- */
#menu-main > .current-menu-item > a, #menu-main > .current_page_item > a, #menu-main > .current-menu-ancestor > a{color:var(--mn-green) !important;}
#menu-main > .current-menu-item > a::after, #menu-main > .current_page_item > a::after, #menu-main > .current-menu-ancestor > a::after{
  transform:scaleX(1) !important;height:2px !important;background:var(--mn-bronze) !important;}

/* ---------- 10. Footer COMPANY list: one vertical rhythm ---------- */
.mn-footer-wa{margin-top:0 !important;}
.mn-footer-col .mn-soon-tag{line-height:1.2 !important;padding-top:1px !important;padding-bottom:1px !important;vertical-align:1px;}
@media(max-width:767px){.mn-footer-col > a{display:flex !important;align-items:center;min-height:44px;padding:0 !important;}}

/* ---------- 11. (owner, 2026-10-12) shop-card add-to-bag states ----------
   a) An "Added" button under the pointer filled teal while its "✓ Added" label stayed teal, so the button went blank.
      Hover / keyboard focus now fill teal with a light label (the same as every outline button's hover).
   b) "View bag" inherited the card button's 12px 22px padding, so its underline ran 22 px past the word on each side and the
      link sat at the left of the card. Now: no side padding (the underline is exactly the word), centred under the button,
      still a 44 px tap target. */
.woocommerce ul.products li.product .button.added:hover::before,
.woocommerce ul.products li.product .button.added:focus-visible::before{color:var(--mn-cream) !important;}
.woocommerce ul.products li.product .button.added:hover,
.woocommerce ul.products li.product .button.added:focus-visible{background:var(--mn-green) !important;border-color:var(--mn-green) !important;}
.woocommerce ul.products li.product:not(.post-74) a.added_to_cart{display:flex !important;align-items:center;width:max-content;min-height:44px;
  margin:4px auto 0 !important;padding:0 !important;border-bottom:0 !important;text-decoration:underline !important;
  text-decoration-thickness:1px !important;text-underline-offset:5px;}
.woocommerce ul.products li.product:not(.post-74) a.added_to_cart:hover{text-decoration-thickness:2px !important;}

/* ---------- 12. (owner, 2026-10-12) cart + checkout: overlap fixed, panels in the site's colours ----------
   a) Checkout: WooCommerce's own CSS makes the payment radio-control's ::after position:absolute (it is the "selected"
      outline in their design), so our "coming soon" line was pinned over the Cash on delivery radio. Back in flow, under
      the card, and worded so it doesn't contradict "pay by UPI when the box arrives" (that is UPI on delivery).
   b) Pure-white panels (#fff, square) on the paper page -> the site's panel: translucent paper-white, hairline, 14 px
      radius (as the sold-out panel and the waitlist cards). Free-shipping line in ink 14 px; bag-totals heading in the same
      Jost eyebrow as the items table header; shipping as a normal label/amount row; totals text on the type scale. */
/* ECOM-07 (2026-10-17): the payment-method ::after line is gone; the one payment sentence is real text (mn_cod_line in mn-conversion.php) */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option{background:rgba(255,255,255,.45) !important;border-radius:var(--mn-radius-sm) !important;}
.woocommerce-cart .mn-ship{background:var(--mn-sand) !important;border:0 !important;border-radius:var(--mn-radius-sm) !important;padding:18px 22px !important;} /* 2026-10-25: filled */
.woocommerce-cart .mn-ship-track{height:4px !important;border-radius:2px;background:rgba(16,16,16,.1) !important;overflow:hidden;}
.woocommerce-cart .mn-ship-fill{height:4px !important;border-radius:2px;}
.woocommerce-cart .mn-ship-label{margin-top:10px;font-size:var(--mn-fs-14,14px) !important;font-weight:500 !important;letter-spacing:0 !important;color:var(--mn-ink) !important;}
.woocommerce-cart .mn-ship-label .woocommerce-Price-amount{font-weight:600;}
.woocommerce-cart .cart_totals{background:var(--mn-sand) !important;border:0 !important;border-radius:var(--mn-radius-sm) !important;} /* 2026-10-25 bag & checkout review: filled */
.woocommerce-cart .cart-collaterals .cart_totals h2{font-family:'Marcellus',serif !important;font-size:22px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;color:var(--mn-ink) !important;border-bottom:0 !important;}
/* the flavour swatch thumbnails (mn-conversion.php mn_flavour_swatch_url) */
.woocommerce-cart table.shop_table.cart img.mn-swatch{width:64px !important;height:64px !important;border-radius:10px;border:0 !important;box-shadow:none !important;}
.woocommerce-checkout .wc-block-components-order-summary-item__image img[src*="/mn-brand/swatch/"]{border-radius:8px;border:0 !important;box-shadow:none !important;}
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,.woocommerce-checkout .wc-block-components-checkout-order-summary__content{border:0 !important;box-shadow:none !important;}
.woocommerce-cart .cart_totals table.shop_table th,.woocommerce-cart .cart_totals table.shop_table td{font-size:var(--mn-fs-14,14px) !important;}
.woocommerce-cart .cart_totals .woocommerce-shipping-totals th,.woocommerce-cart .cart_totals .woocommerce-shipping-totals td{display:table-cell !important;width:auto !important;padding:11px 0 !important;vertical-align:top;}
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td{text-align:right !important;}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{justify-content:flex-end;margin:0 !important;color:var(--mn-ink);font-weight:500;}
.woocommerce-cart .cart_totals .order-total th{font-size:var(--mn-fs-20,20px) !important;}
.woocommerce-cart .cart_totals .order-total td{font-size:var(--mn-fs-20,20px) !important;}
/* c) Phones: WooCommerce's responsive table (<= 768 px) printed "Subtotal:" / "Shipment:" labels through td::before and
      hid the row labels, so Shipment showed twice; the item row hid the thumbnail and right-aligned the name; the
      "Update bag" cell landed in the 76 px thumbnail column of the item grid, so its label spilled out of the pill. */
@media(max-width:880px){
  .woocommerce-cart table.shop_table.cart td.product-thumbnail{display:block !important;}
  .woocommerce-cart table.shop_table.cart td.product-name,.woocommerce-cart table.shop_table.cart td.product-quantity{text-align:left !important;}
  .woocommerce-cart table.shop_table.cart td.actions{grid-column:1 / -1 !important;width:auto !important;}
  .woocommerce-cart .cart_totals table.shop_table tr{display:table-row !important;}
  .woocommerce-cart .cart_totals table.shop_table th{display:table-cell !important;text-align:left !important;}
  .woocommerce-cart .cart_totals table.shop_table td{display:table-cell !important;text-align:right !important;}
  .woocommerce-cart .cart_totals table.shop_table td::before{display:none !important;content:none !important;}
}

/* ---------- 13. MN-AUD-002 (2026-10-12): checkout layout shift (CLS 0.78 phone / 0.71 desktop -> < 0.01) ----------
   WooCommerce links the checkout block's own stylesheet (checkout.css) late, in the page body. Until it arrives the block
   is a 59 px stub at the theme's alignwide width (1300 px: Hello's .alignwide{margin-inline:-80px}), then it snaps to its
   real height and to 1140 px and throws the footer out of view. This file prints inline in <head>, so these two rules hold
   from the first paint:
   a) the margins WooCommerce's checkout.css applies anyway (margin:0) — the block starts at its final width;
   b) while WooCommerce marks the block .is-loading, it reserves one screen of height, so nothing below it is in view to
      be pushed. The class is removed when the checkout has rendered, and with it the reservation. */
.wp-block-woocommerce-checkout.alignwide{margin-left:0;margin-right:0;}
.wp-block-woocommerce-checkout.is-loading{min-height:100vh;}

/* 2026-10-26 slice C (UX-16): the product page's plate carries the tasting cue and the ingredients while photos are pending */
.single-product .mn-plate--big{justify-content:center;}
.single-product .mn-plate--big .mn-plate-facts{display:flex;flex-direction:column;gap:6px;max-width:34ch;margin:22px auto 0;font:400 var(--mn-fs-14,14px)/1.5 'Jost',sans-serif;color:var(--mn-ink-soft);text-transform:none;letter-spacing:0;}
.single-product .mn-plate--big .mn-plate-cue{font-weight:500;color:var(--mn-ink);}
.single-product .mn-plate--big .mn-plate-ingr{color:var(--mn-grey);}
@media(max-width:600px){.single-product .mn-plate--big .mn-plate-facts{margin-top:14px;font-size:var(--mn-fs-13,13px);}}

/* 2026-10-27 CX: the at-a-glance line under the tasting note (mn_glance_facts, mn-conversion.php) */
.single-product .summary .mn-glance{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:6px 0 2px;padding:0;font-family:'Jost',sans-serif;font-size:13px;line-height:1.5;color:var(--mn-ink-soft);}
.single-product .summary .mn-glance li{display:inline;}
.single-product .summary .mn-glance li+li::before{content:"\00b7";margin:0 8px;color:var(--mn-grey);}
/* 2026-11-13 design audit: a "Coming soon" group with three or fewer cards (Velvet, Hearth) used two fifths of the row and left
   the rest empty. On desktop it now reads like the site's other split sections (gifting, the flavour list): the heading and its
   line on the left, the cards and the button on the right. A full group (the Garden Collection, five cards) keeps the full row. */
@media(min-width:861px){
  .mn-shop-soon .mn-pb:not(:has(.mn-wl-cards > :nth-child(4))){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:start;}
  .mn-shop-soon .mn-pb:not(:has(.mn-wl-cards > :nth-child(4))) .mn-pb-head{max-width:none;margin:0;}
  .mn-shop-soon .mn-pb:not(:has(.mn-wl-cards > :nth-child(4))) .mn-wl-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* mn-css/system.css */
/* ===== MiamiNuts design-system layer (2026-10-26, UX audit Phase 1 slice B) =====
   Printed after every other stylesheet (mn-ux-fixes.php, priority 999). One recipe for the site's buttons, in three voices:
   primary (green pill), secondary (outlined green pill), inverse (cream pill on the dark plaster). The per-file rules this
   replaced were deleted the same day (brand.css, conversion.css, mn-ux-fixes.css, mn-account, mn-contact, mn-bagsheet,
   mn-waitlist); a button is styled here or it is not a button. Tokens: mn-css/brand.css :root. */

/* 2026-10-28 owner chose button option C (docs/BUTTON-OPTIONS-2026-10-28.html): soft square, 10 px radius, .10em tracking.
   --mn-btn-radius is the button radius; tags, badges and status pills keep --mn-radius (999px). See the block at the end of this file. */
:root{--mn-btn-radius:10px;--mn-btn-edge:rgba(185,152,96,.55);} /* 2026-11-02 owner chose button colour option A (docs/BUTTON-COLOUR-OPTIONS-2026-11-02.html): teal with a brass edge */
/* --- shared bones: Jost 500 13px, .10em caps, soft square (option C), 52 px (56 on tablets and up), no shadow, the brand curve --- */
.woocommerce div.product form.cart button.single_add_to_cart_button,.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,.woocommerce-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.mn-bs .mn-bs-go,.woocommerce .mn-sticky button.mn-sticky-btn.button.alt,.mn-wl .mn-wl-btn,
.woocommerce-account .woocommerce-Button,.woocommerce-account .woocommerce-form-login__submit,.woocommerce-account .woocommerce-form-register__submit,
.mn-swap button.woocommerce-form-login__submit,.mn-swap button.woocommerce-form-register__submit,
.woocommerce #respond input#submit,.elementor-form .elementor-field-type-submit .elementor-button,
.mn-404-links a,.mn-post-cta-btn,.elementor-element-fqch a,.wp-block-button__link,.elementor-element-hero1 .elementor-button,
.woocommerce ul.products li.product .button,.mn-pb-cta,.search-form .search-submit,.elementor-element-cta1 a.elementor-button,.mn-pick-add,.mn-track-submit,.mn-eta-btn,.mn-oc-again,.mn-oc-link,
.elementor-element-stcb a.elementor-button,.elementor-element-gfcb a.elementor-button,.woocommerce-verify-email button.button{ /* 2026-11-02: WooCommerce's "Confirm email address" form; 2026-10-27: the week-1 surfaces (picker, Track page, PIN check) use the recipe, not their own; 2026-10-28 button audit: About / Plant-based / Gifts buttons (were Elementor's 12 px bold, 46–48 px) */
  display:inline-flex;align-items:center !important;justify-content:center !important;gap:10px; /* display is not !important: mn-ordergate.php hides the place-order button with display:none !important while orders are closed */box-sizing:border-box !important;
  min-height:52px !important;padding:0 28px !important;margin-top:0;
  font-family:'Jost',sans-serif !important;font-size:13px !important;font-weight:500 !important;line-height:1.2 !important;letter-spacing:.1em !important;text-transform:uppercase !important;text-decoration:none !important;
  border-radius:var(--mn-radius,999px) !important;border:1px solid transparent !important;box-shadow:none !important;cursor:pointer;
  transition:background-color var(--mn-t-base) var(--mn-ease),color var(--mn-t-base) var(--mn-ease),border-color var(--mn-t-base) var(--mn-ease),box-shadow var(--mn-t-base) var(--mn-ease),transform var(--mn-t-fast) var(--mn-ease) !important;}
@media(min-width:768px){
  .woocommerce div.product form.cart button.single_add_to_cart_button,.single_add_to_cart_button,
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,.woocommerce-cart .wc-block-cart__submit-button,
  .wc-block-checkout .wc-block-components-checkout-place-order-button,.woocommerce-checkout .wc-block-components-checkout-place-order-button,
  .woocommerce-account .woocommerce-form-login__submit,.woocommerce-account .woocommerce-form-register__submit,
  .mn-swap button.woocommerce-form-login__submit,.mn-swap button.woocommerce-form-register__submit,
  .elementor-form .elementor-field-type-submit .elementor-button,.elementor-element-hero1 .elementor-button,.elementor-element-cta1 a.elementor-button,.mn-track-submit{min-height:56px !important;}
}
/* --- primary: green --- */
.woocommerce div.product form.cart button.single_add_to_cart_button,.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,.woocommerce-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.mn-bs .mn-bs-go,.woocommerce .mn-sticky button.mn-sticky-btn.button.alt,.mn-wl .mn-wl-btn,
.woocommerce-account .woocommerce-Button,.woocommerce-account .woocommerce-form-login__submit,.woocommerce-account .woocommerce-form-register__submit,
.mn-swap button.woocommerce-form-login__submit,.mn-swap button.woocommerce-form-register__submit,
.woocommerce #respond input#submit,.elementor-form .elementor-field-type-submit .elementor-button,
.mn-404-links a:first-child,.elementor-element-fqch a:first-of-type,.wp-block-button__link,.search-form .search-submit,.mn-pick-add,.mn-track-submit,.mn-oc-again,.elementor-element-stcb a.elementor-button,.woocommerce-verify-email button.button,
.mn-plaster .mn-fc .elementor-form .elementor-field-type-submit .elementor-button{ /* 2026-10-28 button audit: a form card on the plaster (B2B "Your enquiry") keeps the primary voice — brand.css's outlined-cream newsletter rule (for a form sitting directly on the green) had made it cream on cream, 1.1:1 */
  background:var(--mn-green) !important;background-color:var(--mn-green) !important;color:var(--mn-cream) !important;border-color:var(--mn-green) !important;
  box-shadow:inset 0 0 0 1px var(--mn-btn-edge),inset 0 1px 0 rgba(255,255,255,.07) !important;} /* 2026-11-02 option A: a fine brass line inside the green */
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,.single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,.woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.mn-bs .mn-bs-go:hover,.woocommerce .mn-sticky button.mn-sticky-btn.button.alt:hover,.mn-wl .mn-wl-btn:hover,
.woocommerce-account .woocommerce-Button:hover,.woocommerce-account .woocommerce-form-login__submit:hover,.woocommerce-account .woocommerce-form-register__submit:hover,
.mn-swap button.woocommerce-form-login__submit:hover,.mn-swap button.woocommerce-form-register__submit:hover,
.woocommerce #respond input#submit:hover,.elementor-form .elementor-field-type-submit .elementor-button:hover,
.mn-404-links a:first-child:hover,.elementor-element-fqch a:first-of-type:hover,.wp-block-button__link:hover,.search-form .search-submit:hover,.mn-pick-add:hover,.mn-track-submit:hover,.mn-oc-again:hover,.elementor-element-stcb a.elementor-button:hover,.woocommerce-verify-email button.button:hover,
.mn-plaster .mn-fc .elementor-form .elementor-field-type-submit .elementor-button:hover{
  background:var(--mn-green-hover) !important;background-color:var(--mn-green-hover) !important;color:var(--mn-cream) !important;border-color:var(--mn-green-hover) !important;opacity:1 !important;
  box-shadow:inset 0 0 0 1px var(--mn-bronze),0 6px 16px rgba(0,40,38,.22) !important;} /* hover: the brass line comes up full and the button lifts a little */
/* --- secondary: outlined green (shop cards, WhatsApp, the other 404 links) --- */
.woocommerce ul.products li.product .button,.mn-pb-cta,.mn-404-links a:not(:first-child),.elementor-element-fqch a:not(:first-of-type),.mn-eta-btn,.mn-oc-link{ /* 2026-10-26: FAQ "Still stuck?": first link solid, the rest outlined (both solid hid the mailto link's text) */
  background:transparent !important;background-color:transparent !important;color:var(--mn-green) !important;border-color:rgba(0,70,67,.55) !important;}
.woocommerce ul.products li.product:not(.post-74) .button{border-color:rgba(0,70,67,.55) !important;} /* brand.css's shop-card rule out-ranks the list above */
.woocommerce ul.products li.product:not(.post-74) .button:hover{background:rgba(0,70,67,.06) !important;color:var(--mn-green) !important;border-color:var(--mn-green) !important;}
.woocommerce ul.products li.product .button:hover,.mn-pb-cta:hover,.mn-404-links a:not(:first-child):hover,.elementor-element-fqch a:not(:first-of-type):hover,.mn-eta-btn:hover,.mn-oc-link:hover{
  background:rgba(0,70,67,.06) !important;background-color:rgba(0,70,67,.06) !important;color:var(--mn-green) !important;border-color:var(--mn-green) !important;} /* 2026-11-02 option A: a wash, not a fill */
.woocommerce ul.products li.product .button{width:100%;}
/* --- inverse: cream on the dark plaster (hero, newsletter, journal band) --- */
.elementor-element-hero1 .elementor-button,.mn-post-cta-btn,.elementor-element-cta1 a.elementor-button,.elementor-element-gfcb a.elementor-button,
.mn-plaster .elementor-form .elementor-field-type-submit .elementor-button,.elementor-element-cta1 .elementor-form .elementor-field-type-submit .elementor-button,.mn-morph-form .mn-morph--nl:not(.is-open) .elementor-button,
.mn-plaster .elementor-widget-button .elementor-button,.elementor-element-labctab .elementor-button,.elementor-element-subctab .elementor-button,.mn-ftb .button.mn-ftb-btn,.elementor-element.elementor-element-jrcb .elementor-button{ /* 2026-11-02: brand.css's plaster buttons (journal, lab reports, subscription, First Taste Box) join the inverse voice */
  background:var(--mn-cream) !important;background-color:var(--mn-cream) !important;color:var(--mn-green) !important;border-color:var(--mn-cream) !important;
  box-shadow:inset 0 0 0 1px rgba(185,152,96,.75) !important;} /* 2026-11-02 option A: green text and a brass edge (was ink, and the newsletter was the one bronze button) */
.elementor-element-hero1 .elementor-button:hover,.mn-post-cta-btn:hover,.elementor-element-cta1 a.elementor-button:hover,.elementor-element-gfcb a.elementor-button:hover,
.mn-plaster .elementor-form .elementor-field-type-submit .elementor-button:hover,.elementor-element-cta1 .elementor-form .elementor-field-type-submit .elementor-button:hover,.mn-morph-form .mn-morph--nl:not(.is-open) .elementor-button:hover,
.mn-plaster .elementor-widget-button .elementor-button:hover,.elementor-element-labctab .elementor-button:hover,.elementor-element-subctab .elementor-button:hover,.mn-ftb .button.mn-ftb-btn:hover,.elementor-element.elementor-element-jrcb .elementor-button:hover{
  background:var(--mn-bronze) !important;background-color:var(--mn-bronze) !important;color:var(--mn-ink) !important;border-color:var(--mn-bronze) !important;box-shadow:0 6px 16px rgba(0,20,18,.28) !important;} /* hover warms to brass (ink on brass 7.0:1) */
/* the newsletter's closed button takes the recipe's type (brand.css gives every Elementor button bold 12 px) */
.mn-morph-form .mn-morph--nl .elementor-button{font-size:13px !important;font-weight:500 !important;letter-spacing:.1em !important;}
/* --- states --- */
.woocommerce div.product form.cart button.single_add_to_cart_button:active,.single_add_to_cart_button:active,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.wc-block-components-checkout-place-order-button:active,.mn-bs .mn-bs-go:active,.mn-wl .mn-wl-btn:active,.elementor-form .elementor-field-type-submit .elementor-button:active,
.mn-swap button.woocommerce-form-login__submit:active,.mn-swap button.woocommerce-form-register__submit:active,.woocommerce ul.products li.product .button:active{transform:scale(.985);}
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible,.single_add_to_cart_button:focus-visible,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible,.mn-bs .mn-bs-go:focus-visible,.mn-wl .mn-wl-btn:focus-visible,.woocommerce-account .woocommerce-Button:focus-visible,
.mn-swap button:focus-visible,.elementor-form .elementor-field-type-submit .elementor-button:focus-visible,.woocommerce ul.products li.product .button:focus-visible,.mn-404-links a:focus-visible,
.mn-pick-add:focus-visible,.mn-track-submit:focus-visible,.mn-eta-btn:focus-visible,.mn-oc-again:focus-visible,.mn-oc-link:focus-visible{
  outline:2px solid var(--mn-green) !important;outline-offset:3px !important;}
.mn-plaster :focus-visible,.elementor-element-cta1 :focus-visible,.elementor-element-hero1 :focus-visible{outline-color:var(--mn-cream) !important;}
.mn-wl .mn-wl-btn[disabled],.elementor-form-waiting .elementor-field-type-submit .elementor-button,.elementor-form .elementor-field-type-submit .elementor-button:disabled,.mn-pick-add[disabled]{opacity:.55 !important;cursor:not-allowed !important;}
/* the B2B form card: brand.css's plaster-newsletter rule also set a cream border and 16px 31px padding (the label wrapped to two lines at 292 px); this prints later at the same specificity */
.mn-plaster .mn-fc .elementor-form .elementor-field-type-submit .elementor-button{border:1px solid var(--mn-green) !important;padding:0 22px !important;white-space:nowrap;}
.mn-plaster .mn-fc .elementor-form .elementor-field-type-submit .elementor-button:hover{border-color:var(--mn-green-hover) !important;}
/* the product page's full-width button (pack slider on) and the plain form fallback */
form.cart.mn-ps-on .single_add_to_cart_button{width:100% !important;}
/* "Adding…" overlay (mn-css/brand.css) needs the relative box the recipe keeps */
.woocommerce div.product form.cart button.single_add_to_cart_button.loading{position:relative;}
/* --- the one number that is not a button: the order total is Marcellus 400, never a faux bold --- */
.woocommerce-cart .cart_totals .order-total td,.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{font-family:'Marcellus',serif !important;font-weight:400 !important;}
/* the cart total line: mn-ux-shop-fixes.css gives every totals cell 14px !important with a selector that outranks the 20px rule, so the total has read as small as the subtotal; this outranks both */
.woocommerce-cart .cart_totals table.shop_table .order-total th,.woocommerce-cart .cart_totals table.shop_table .order-total td{font-size:20px !important;}

/* --- 2026-10-27 CX week-1 surfaces: the small size, the chip and the line input (mn-eta.php, mn-picker.php, mn-orders.php) --- */
/* size modifier: a 44 px button that sits beside a 44 px field (the PIN "Check date") */
.mn-btn-sm,.mn-btn-sm.mn-eta-btn,.mn-btn-sm.mn-oc-again,.mn-btn-sm.mn-oc-link{min-height:44px !important;padding:0 18px !important;font-size:var(--mn-fs-13,13px) !important;} /* 2026-11-13 design audit: 13 like every other uppercase button (was 12) */
/* (the picker's answer chip moved into mn-picker.php with the 2026-11-02 redesign: cream segmented answers on the teal) */
/* line input: the site's field language (the checkout's bottom-rule fields, mn-css/conversion.css), for our own forms */
.mn-line-input{box-sizing:border-box;width:100%;min-height:44px;padding:0 2px;border:0;border-bottom:1px solid var(--mn-line-strong);border-radius:0;background:transparent;box-shadow:none;
  font-family:'Jost',sans-serif;font-size:16px;line-height:1.2;color:var(--mn-ink);transition:border-color var(--mn-t-base) var(--mn-ease);}
.mn-line-input:hover{border-bottom-color:rgba(16,16,16,.5);}
.mn-line-input:focus{outline:0;border-bottom:2px solid var(--mn-green);padding-bottom:0;}

/* ===== Button option C (2026-10-28, owner): soft square =====
   1. On every button-like control, the pill variable itself becomes the button radius, so every existing rule that rounds a button
      with var(--mn-radius) (brand.css keylines, the plaster newsletter, the First Taste Box, shop cards, 404 links, the PDP quantity
      box, the waitlist field…) resolves to 10 px whatever its specificity. Tags, badges, status pills and the bag's remove × are not
      in the list and stay round.
   2. The few rules that hard-code 999px are overridden here with `html body` (two extra element points, so they win regardless of
      print order). Inner pieces of a 4 px-inset control (the open morph field and button) take 7 px so the curves stay concentric. */
:is(.elementor-button,a.button,button.button,input.button,.wp-element-button,.wc-block-components-button,.wp-block-button__link,.search-submit,
  .mn-pb-cta,.mn-404-links a,.elementor-element-fqch a,.mn-post-cta-btn,.mn-ftb-btn,.mn-pick-add,.mn-track-submit,.mn-eta-btn,.mn-oc-again,.mn-oc-link,
  .mn-wl-btn,.mn-bs-go,.mn-sticky-btn,#respond input#submit,.mn-consent-btn,.mn-video-toggle,.mn-wa-product,.woocommerce-Button,.mn-prof-cancel,
  .mn-morph,.mn-wl-email,.single-product form.cart .quantity input.qty,button[name="update_cart"]){--mn-radius:var(--mn-btn-radius);}
html body .mn-consent-btn,html body .mn-morph,html body .mn-morph-form .mn-morph--nl .elementor-button,
html body .woocommerce-account .woocommerce-EditAccountForm .mn-prof-foot .woocommerce-Button,html body .woocommerce-account .woocommerce-EditAccountForm button.mn-prof-cancel,
html body.woocommerce .mn-pdp-reviews #review_form #respond .form-submit input#submit,html body .woocommerce .mn-pdp-reviews #review_form #respond .form-submit input#submit{border-radius:var(--mn-btn-radius) !important;}
html body .woocommerce .mn-pdp-reviews #review_form #respond .form-submit input#submit{letter-spacing:.1em !important;}
html body .mn-morph.is-open .mn-morph-in,html body .mn-morph.is-open .mn-morph-btn,html body .mn-morph-form .mn-morph--nl.is-open .elementor-button{border-radius:7px !important;}
html body .mn-rc-tear,html body .mn-rc-again{border-radius:8px;}

/* 2026-10-31 owner's screenshot: three buttons the 2026-10-28 button audit missed still spoke the old voice (bold 12 px, no
   side padding): Journal + Lab Reports "Shop the range" (jrcb, labctab) and Subscription "Tell me when it opens" (subctab).
   They take the shared bones above; their colours stay as they were. The selectors out-rank brand.css's older plaster rules.
   (The home "Join the list" is the morph control in mn-morph.php, with its own open/closed geometry; not this recipe.)
   Same evening, full UI sweep: the empty bag's "Back to the shop" (already green) was bold 12 px, 48 px tall; it joins too. */
.elementor-element.elementor-element-jrcb .elementor-button,.elementor-element.elementor-element-labctab .elementor-button,
.elementor-element.elementor-element-subctab .elementor-button,.woocommerce-cart .return-to-shop a.button.wc-backward{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
  min-height:52px !important;padding:0 28px !important;
  font-family:'Jost',sans-serif !important;font-size:13px !important;font-weight:500 !important;line-height:1.2 !important;letter-spacing:.1em !important;text-transform:uppercase !important;}

/* 2026-11-02 owner chose loader option A (docs/LOADER-OPTIONS-2026-11-02.html): WooCommerce's busy state (a black disc with a
   white dot spinning on a white veil: the bag updating, account forms, the classic checkout) becomes the logo's lotus in teal,
   gently breathing, on a cream veil. Same element WooCommerce draws (blockUI overlay / .loader ::before); reduced motion = still. */
.woocommerce .blockUI.blockOverlay{background:rgba(251,249,244,.62) !important;opacity:1 !important;}
.woocommerce .blockUI.blockOverlay::before,.woocommerce .loader::before{
  width:46px !important;height:32px !important;margin:-16px 0 0 -23px !important;font-size:16px !important;
  background:var(--mn-green) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M32 43 C24.1 42.3 7.4 31.7 4.8 17.9 C10.2 16.8 17.4 18.4 21.9 22.3 C26.9 27.3 30.2 35.1 32 43Z'/%3E%3Cpath d='M32 43 C39.9 42.3 56.6 31.7 59.2 17.9 C53.8 16.8 46.6 18.4 42.1 22.3 C37.1 27.3 33.8 35.1 32 43Z'/%3E%3Cpath d='M32 42.7 C26 36.2 22.2 27.3 22.3 17.8 C22.4 10.6 27.4 4.5 32.1 1 C36.8 4.5 41.8 10.6 41.7 17.8 C41.8 27.3 38 36.2 32 42.7Z'/%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 64 44' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M32 43 C24.1 42.3 7.4 31.7 4.8 17.9 C10.2 16.8 17.4 18.4 21.9 22.3 C26.9 27.3 30.2 35.1 32 43Z'/%3E%3Cpath d='M32 43 C39.9 42.3 56.6 31.7 59.2 17.9 C53.8 16.8 46.6 18.4 42.1 22.3 C37.1 27.3 33.8 35.1 32 43Z'/%3E%3Cpath d='M32 42.7 C26 36.2 22.2 27.3 22.3 17.8 C22.4 10.6 27.4 4.5 32.1 1 C36.8 4.5 41.8 10.6 41.7 17.8 C41.8 27.3 38 36.2 32 42.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:mnLotusBreathe 1.3s ease-in-out infinite alternate !important;}
@keyframes mnLotusBreathe{from{transform:scale(.9);opacity:.45;}to{transform:scale(1.04);opacity:1;}}
@media(prefers-reduced-motion:reduce){.woocommerce .blockUI.blockOverlay::before,.woocommerce .loader::before{animation:none !important;opacity:1;}}

/* ===== 2026-11-13 usability audit (consistency): one button system, the type scale, the radius tokens =====
   Buttons come in five roles: primary (filled) · outline · round media control · choice chip · text button.
   Radii: 10 px buttons and chips (--mn-btn-radius) · 14 px cards and panels (--mn-radius-sm) · 999 px pills and circles. */
/* primary: the hero button and the newsletter button are one size (they were 56 and 48 px tall) */
.elementor-element-hero1 .elementor-button,
.elementor-element-cta1 .elementor-form .elementor-field-type-submit .elementor-button,
.mn-morph-form .mn-morph--nl:not(.is-open) .elementor-button{min-height:52px !important;padding:0 28px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
/* text buttons have no corner (the Hello theme gives every button 3 px) */
#site-header .site-navigation-toggle,.mn-footer-cookie{border-radius:0 !important;}
/* the home page's Elementor text on the type scale (--mn-fs-*): 15 -> 14 (dispatch line) and 16 (newsletter line), 22 -> 20 (card
   headings); the 17 px paragraphs (brand.css) and the 50 px picker heading (mn-picker.php) were changed where they are set */
.mn-order-line,.mn-order-line > span{font-size:var(--mn-fs-14,14px) !important;} /* the dispatch / free-return chips only (the section also holds the gifting cards, which stay 16) */
.elementor-element-jrn1t .elementor-heading-title,.elementor-element-jrn2t .elementor-heading-title,.elementor-element-jrn3t .elementor-heading-title{font-size:var(--mn-fs-20,20px) !important;}
.elementor-element-ctanlp,.elementor-element-ctanlp p{font-size:var(--mn-fs-16,16px) !important;}
/* ===== 2026-11-13 shop-page audit (consistency). Buttons have three roles here: primary (filled), secondary (outline) and
   quiet (no fill, no border, square, 14 px Jost, the colour of its surface): the menu toggle, the bag sheet's Close and "Bag
   details" (mn-bagsheet.php) and the footer's Cookie settings. The theme gave the toggle its own grey tint, 3 px corners and
   8 px padding; it keeps its 44 px square tap area from brand.css. ===== */
#site-header .site-navigation-toggle{padding:0 !important;background:transparent !important;border:0 !important;color:var(--mn-ink) !important;font:400 14px/1 'Jost',sans-serif !important;letter-spacing:normal;text-transform:none;}
/* ===== 2026-11-13 front-end design audit (holes and text sizes; audit-output/taste-audit-2026-11-13.md) ===== */
/* Home: the dispatch / free-return chips floated alone, centred, in a tall empty band above the gifting row. On desktop they now
   sit on the right-hand column line the flavour list and the gifting cards share (5fr / 7fr, 64 px gap), about 60 px under the
   list, with space (not the divider line) before the gifting row. */
@media(min-width:861px){
  .home .elementor-element-feat1 > .e-con-inner{padding-bottom:16px !important;}
  .home .elementor-element-stds{border-top:0 !important;}
  .home .elementor-element-stds > .e-con-inner{padding-top:0 !important;}
  .home .elementor-element-stdsh .mn-order-line{justify-content:flex-start;max-width:none;margin:0 0 120px calc((100% - 64px) * 5 / 12 + 64px);}
}
/* About: a 100 px gap under the title, then the intro ran 1,260 px wide (about 180 characters a line) in 15 px grey. On desktop
   the lead and the story now sit side by side in two equal columns (about 70 characters a line), the story at 16 px in the
   reading colour. */
.elementor-element-stin2 p{font-size:var(--mn-fs-16,16px) !important;line-height:1.7 !important;color:var(--mn-ink-soft) !important;}
@media(min-width:1025px){
  .elementor-element-stin > .e-con-inner{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;align-items:start;padding-top:16px !important;}
  .elementor-element-stin1 p{font-size:var(--mn-fs-24,24px) !important;line-height:1.45 !important;}
}
/* Contact: the intro and the help text were 14.5 and 15 px; running text is 16 px everywhere else */
.elementor-element-ctlead p,.elementor-element-ct18tx p{font-size:var(--mn-fs-16,16px) !important;line-height:1.65 !important;}
/* 2026-11-14: the second "Shop the range" (the picker's fallback link, ctabtn) had no edge; the same cream button as the hero's */
html body .elementor-element-cta1 .elementor-element-ctabtn .elementor-button{border:1px solid var(--mn-cream,#F0EDE5) !important;} /* out-ranks the plaster rule's border:0 */
#form-field-website_url{border-radius:0 !important;} /* the newsletter's hidden spam-trap field: square, like the waitlist's */