/* =====================================================================================================
   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:9px !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;}