/*!
 * Madras Mart storefront additions (Phase 6C, 2026-09-28).
 * Loaded after css/madrasmart.css. Uses the theme's own tokens (--mm-*); the theme file is unchanged.
 */

/* ---------------------------------------------------------------- demo content is never shown
   Areas that js/mm-storefront.js fills from the POS keep their original (demo) markup invisible until
   the script marks them data-mm-ready. Without JavaScript they stay empty rather than show demo data. */
[data-mm-slot]:not([data-mm-ready]) > * { visibility: hidden; }
#mmDeptList:not([data-mm-ready]) > li { visibility: hidden; }
.mm-side-links:not([data-mm-ready]) li:has(> details) { display: none; }
.mm-footer-products:not([data-mm-ready]) { visibility: hidden; }
.mm-footer-links:not([data-mm-ready]) a[href^="shop.html#"] { display: none; }
select[name="cat"]:not([data-mm-ready]) option:not([value=""]) { display: none; }
/* No POS data exists for these (deals, offers, ratings, countdowns). */
[data-mm-unsupported], .mm-footer-ad, a[href$="#deals"] { display: none !important; }

/* ---------------------------------------------------------------- loading / empty / error */
.mm-state { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; width: 100%;
  grid-column: 1 / -1; padding: 2.5rem 1rem; color: var(--mm-muted); text-align: center; font-size: 15px; }
.mm-state-error { color: var(--mm-red); }
.mm-state-page { flex-direction: column; padding: 4rem 1rem; color: var(--mm-ink); }
.mm-state-page p { color: var(--mm-muted); margin: 0 0 .5rem; }
.mm-band-panel .mm-state { min-height: 200px; }
.mm-band-more { text-align: center; margin: 0; padding: 1rem; border-top: 1px solid var(--mm-line); }

/* ---------------------------------------------------------------- product data display */
.mm-img-ph { background: var(--mm-soft); }
.mm-ph-note { text-align: center; color: var(--mm-muted); font-size: 13px; margin: .6rem 0 0; }
.mm-unit { font-size: .62em; font-weight: 400; color: var(--mm-muted); margin-left: .25rem; white-space: nowrap; }
.mm-mini em .mm-unit { font-size: 12px; }
.mm-badge-oos { z-index: 1; }
.mm-card.is-oos .mm-card-img img, .mm-list-card.is-oos .mm-list-img img { opacity: .5; }
.mm-add[disabled], .mm-add[disabled]:hover { background: #e6e6e6; color: var(--mm-muted); cursor: not-allowed; }
.mm-grid-cards > .mm-card { border-radius: 0; border-right: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); }
.mm-grid-4.mm-grid-cards > .mm-card:nth-child(4n) { border-right: 0; }
.mm-subcat span small { display: block; color: var(--mm-muted); font-size: 12px; margin-top: .15rem; }
.mm-tile img[src$="placeholder-category.svg"] { max-width: 110px; border-radius: var(--mm-radius); }
.mm-pd-main .mm-img-ph { border-radius: var(--mm-radius); }

@media (max-width: 1199.98px) {
  .mm-grid-4.mm-grid-cards > .mm-card:nth-child(4n) { border-right: 1px solid var(--mm-line); }
  .mm-grid-4.mm-grid-cards > .mm-card:nth-child(3n) { border-right: 0; }
}
@media (max-width: 991.98px) {
  .mm-grid-4.mm-grid-cards > .mm-card:nth-child(3n) { border-right: 1px solid var(--mm-line); }
  .mm-grid-4.mm-grid-cards > .mm-card:nth-child(2n) { border-right: 0; }
}

/* ---------------------------------------------------------------- cart price / availability checks */
.mm-cart-notice { margin-bottom: 1rem; }
.mm-cart-notice p, p.mm-note-info, p.mm-note-warn, p.mm-note-error { margin: 0 0 .5rem; padding: .65rem .9rem; border-radius: var(--mm-radius); font-size: 14px; }
.mm-note-info { background: #e2eefc; color: var(--mm-blue-dark); }
.mm-note-warn { background: #fff4e5; color: #8a4b00; }
.mm-note-error { background: #fdecec; color: var(--mm-red); }
.mm-cart-flag { display: block; font-style: normal; font-size: 12px; margin-top: .15rem; }
.mm-flag-price { color: #8a4b00; }
.mm-flag-oos { color: var(--mm-red); }
.mm-cart-row.is-oos img, .mm-minicart-row.is-oos img { opacity: .5; }
[data-cart-whatsapp].disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- Phase 6E */
/* Social profiles have no real URL yet (href="#"): hidden rather than shown as dead links. */
.mm-social a[href="#"] { display: none; }

/* ---------------------------------------------------------------- Phase 6H: accessibility + performance */
/* Contrast: the theme's muted grey #878787 is 3.6:1 on white (WCAG AA needs 4.5:1 for small text).
   #6b6b6b is 5.3:1 on white and 4.9:1 on the theme's #f5f5f5 panels — visually almost identical. */
:root { --mm-muted: #6b6b6b; }
/* WhatsApp buttons: white text on #1fae5b is 2.9:1; #13843f is 4.8:1 (still WhatsApp green). */
:root { --mm-whatsapp: #13843f; }
/* "Cart totals" is now an h2 (heading order); same look as the theme's `.mm-totals h3`. */
.mm-totals h2 { font-size: 20px; font-weight: 400; margin-bottom: 1rem; }
/* Links inside running text must not rely on colour alone (WCAG 1.4.1). Buttons and navigation are unaffected. */
main p a:not(.btn), main address a, main li p a:not(.btn), .mm-post-meta a { text-decoration: underline; text-underline-offset: 2px; }
/* <picture> wrappers added for WebP must not change the hero/banner flex layouts. */
.mm-hero picture, .mm-banner picture { display: contents; }
/* Unit labels ("/ kg") stay readable at small sizes. */
.mm-unit { font-size: max(.62em, 11px); }

/* ---------------------------------------------------------------- Phase 8B-1: POS Cash-on-Delivery checkout + tracking */
p.mm-note-ok { margin: 0 0 .5rem; padding: .65rem .9rem; border-radius: var(--mm-radius); font-size: 14px; background: #e7f6ec; color: #1e6b3a; }
.mm-q-notes:empty { display: none; }
.mm-gst-tag { display: block; font-size: 12px; font-weight: 400; color: var(--mm-muted); }
form.is-quoting .mm-totals strong { opacity: .45; transition: opacity .15s; }
.mm-co-loc, .mm-co-sched { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1rem; margin: 0; min-width: 0; }
.mm-co-loc legend, .mm-co-sched legend { float: none; width: auto; padding: 0 .35rem; margin: 0; font-size: 1.05rem; }
.mm-loc-status { margin: .6rem 0; font-size: 14px; color: var(--mm-muted); }
.mm-loc-status.is-ok { color: #1e6b3a; font-weight: 600; }
.mm-loc-status.is-bad { color: #8a4b00; }
.mm-loc-paste .input-group { flex-wrap: nowrap; }
.mm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mm-co-confirm { margin-top: .75rem; padding: 1rem; border: 2px solid var(--mm-blue); border-radius: var(--mm-radius); background: #f5f9ff; }
.mm-co-confirm [data-co-place].is-busy { cursor: progress; opacity: .8; }
[data-co-review][disabled] { cursor: not-allowed; }
.mm-co-done-card { max-width: 640px; margin: 0 auto 2rem; padding: 2rem 1.25rem; text-align: center; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
.mm-co-done-icon { font-size: 3rem; color: #1e8a47; margin-bottom: .75rem; }
.mm-co-done-card h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.mm-co-invoice strong { font-size: 1.15rem; letter-spacing: .02em; }
.mm-track-card { padding: 1.25rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); margin-bottom: 2rem; }
.mm-track-steps { list-style: none; display: flex; gap: .25rem; padding: 0; margin: 0 0 1.25rem; counter-reset: step; }
.mm-track-steps li { flex: 1 1 0; text-align: center; font-size: 13px; color: var(--mm-muted); position: relative; padding-top: 1.9rem; }
.mm-track-steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: 50%; background: var(--mm-soft); color: var(--mm-muted); font-weight: 600; }
.mm-track-steps li.is-done::before { content: "\2713"; background: #1e8a47; color: #fff; }
.mm-track-steps li.is-current { color: var(--mm-ink); font-weight: 600; }
.mm-track-steps li.is-current::before { background: var(--mm-blue); color: #fff; }
.mm-track-state.is-cancelled { color: var(--mm-red); font-weight: 600; }
.mm-track-meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.mm-track-meta dt { font-weight: 600; color: var(--mm-muted); }
.mm-track-meta dd { margin: 0; }
@media (max-width: 575.98px) {
  .mm-track-steps li { font-size: 11px; }
  .mm-loc-paste .input-group { flex-wrap: wrap; }
  .mm-loc-paste .input-group > .form-control { width: 100%; border-radius: var(--mm-radius) !important; margin-bottom: .5rem; }
  .mm-loc-paste .input-group > .btn { width: 100%; border-radius: var(--mm-radius) !important; }
}