/* =====================================================================================================
   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:22px !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);}    /* Himalayan Pink Salt: bronze */
li.post-17, body.postid-17{--mn-flavour:#B65A48;}    /* Smoky Peri-Peri: brick */
li.post-18, body.postid-18{--mn-flavour:#7B8A4A;}    /* Cheddar & Herbs: olive */
li.post-217, body.postid-217{--mn-flavour:#4A4843;}  /* Cracked Black Pepper: charcoal */
li.post-216, body.postid-216{--mn-flavour:#C27A2C;}  /* Hot Honey & Chilli: amber */
li.post-220, body.postid-220{--mn-flavour:#6E8B5B;}  /* Cardamom & Honey: green */
@media(max-width:600px){.woocommerce ul.products li.product .mn-card-frame{border-radius:12px !important;}
  .woocommerce ul.products li.product .mn-card-frame .mn-plate{border-radius:12px !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);}