/* Mewoo Mobile UX v1.1.3 (2026-09-16)
 * Loaded after theme.css / product-details.css / WooCommerce CSS.
 * Every rule here exists because a mobile Lighthouse or DOM audit flagged it.
 */

/* ---------- 1. Layout stability (CLS) ---------- */
/* Home hero: the <img> carries the desktop 1672x941 box, but phones swap in a
 * portrait 941x1672 source, so the section below jumped 0.35 CLS when it loaded.
 * Reserve the correct box per breakpoint. */
.mewoo-hero--artwork .mewoo-hero__media img { aspect-ratio: 1672 / 941; width: 100%; height: auto; }
@media (max-width: 767px) {
  .mewoo-hero--artwork .mewoo-hero__media img { aspect-ratio: 941 / 1672; }
}

/* WooCommerce product gallery: the flexslider is disabled (see mewoo-mobile-ux.php),
 * so the gallery is a static main image + thumbnail row. Square photos, fixed boxes. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child { margin-bottom: 8px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { width: calc(25% - 6px); margin-right: 8px; vertical-align: top; border-radius: 10px; overflow: hidden; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2):nth-child(4n+1) { margin-right: 0; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { transition: none; }
.woocommerce div.product div.images { opacity: 1 !important; }

/* Archive thumbnails and related cards already declare a ratio; article body images keep width/height. */

/* ---------- 2. Colour contrast (WCAG AA 4.5:1) ---------- */
/* Eyebrow labels were #37b8ff on light panels (2.09:1). Keep electric blue only on dark panels. */
.mewoo-eyebrow { color: #0a6bb5; }
.mewoo-hero .mewoo-eyebrow,
.mewoo-hero-intro .mewoo-eyebrow,
.mewoo-section--dark .mewoo-eyebrow,
.mewoo-section-heading--light .mewoo-eyebrow,
.mewoo-seasonal .mewoo-eyebrow,
.mewoo-cta .mewoo-eyebrow,
.mewoo-footer .mewoo-eyebrow,
.mewoo-tier-card--featured .mewoo-eyebrow,
.mewoo-side-card--shop .mewoo-eyebrow,
.mewoo-company-profile .mewoo-eyebrow,
.mewoo-hc .mewoo-eyebrow,
.mewoo-carousel .mewoo-eyebrow,
.mewoo-contact-card--wa .mewoo-eyebrow { color: var(--mewoo-electric); }

/* Outline button: violet text on paper was 3.99:1. */
.mewoo-button--outline { color: #5b32c9; border-color: #5b32c9; }

/* WooCommerce prices default to #77a464 (2.89:1). */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price,
.woocommerce .price ins { color: #256b33; font-weight: 800; }

/* WhatsApp CTAs (header pill, footer button, mobile bottom dock, added in theme 1.5.0):
 * white on WhatsApp green #25d366 is 1.98:1. WhatsApp's own dark teal keeps the brand cue at 5.2:1. */
.mewoo-button--whatsapp, .mewoo-header__wa, .mewoo-contact-dock__wa, .mewoo-lead-success__check { background: #0f7a6e; border-color: #0f7a6e; color: #fff; }
.mewoo-button--whatsapp:hover, .mewoo-header__wa:hover, .mewoo-contact-dock__wa:hover { background: #0b6b5c; border-color: #0b6b5c; color: #fff; }
.mewoo-button--whatsapp, .mewoo-button--whatsapp span, .mewoo-contact-dock__wa span, .mewoo-header__wa span { color: #fff; }
.mewoo-button--whatsapp { box-shadow: 0 12px 30px rgba(15, 122, 110, 0.28); }

/* Product-template buttons and active tab: white on #8b5cf6 was 4.23:1. */
.mpd { --mpd-primary: #5b32c9; }

/* ---------- 3. Tap targets (>= 44x44 or well spaced) ---------- */
.mewoo-footer ul li { margin: 0; }
.mewoo-footer ul li a { display: inline-block; padding: 8px 0; }
.mewoo-footer__legal nav { gap: 28px; }
.mewoo-footer__legal nav a { display: inline-block; padding: 10px 0; }

/* Pagination numbers were 9x21 px. */
.mewoo-content .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mewoo-content .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid #dfe3ef; border-radius: 12px; background: #fff;
  color: var(--mewoo-ink); font-weight: 700; text-decoration: none;
}
.mewoo-content .nav-links .page-numbers.current { color: #fff; background: var(--mewoo-navy); border-color: var(--mewoo-navy); }
.mewoo-content .nav-links .page-numbers.dots { border: 0; background: transparent; min-width: 24px; }

/* Article table of contents links were 21 px tall and stacked. */
.mb-toc li { margin: 0; }
.mb-toc li a { display: inline-block; padding: 6px 0; }

/* Category link above the article title was 16 px tall. */
.mewoo-entry__header .mewoo-eyebrow a { display: inline-block; padding: 8px 0; margin: -8px 0; }

/* Lead-form consent checkbox was 13x13 px and its label 11.8 px. */
.mewoo-lead-form__consent input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mewoo-violet); }
.mewoo-lead-form__consent label { font-size: 0.8rem; gap: 10px; }
.mewoo-side-card .mewoo-lead-form__consent label,
.mpd .quickQuote .mewoo-lead-form__consent label { font-size: 0.78rem; }

/* Product-template slider arrows were 13x26 px. */
.mpd .slick-arrow { width: 44px; height: 44px; margin-top: -22px; background-size: 13px 26px; background-position: center; }
.mpd .productSliderPagerWrap { padding: 0 40px; }
.mpd .slick-prev { left: -8px; }
.mpd .slick-next { right: -8px; }
.mpd .img3SliderWrap { padding: 0 44px; }
.mpd .img3SliderWrap .slick-arrow { width: 44px; height: 44px; background-position: center; }
.mpd .img3SliderWrap .slick-prev { left: 0; }
.mpd .img3SliderWrap .slick-next { right: 0; }

/* Link-only list items on the block-built guide pages ("Related pages" lists) were 21 px tall and stacked. */
.mewoo-entry li > a:first-child:last-child { display: inline-block; padding: 6px 0; }
/* Privacy link inside the consent banner was 17 px tall. */
.mewoo-analytics-consent p a { display: inline-block; padding: 6px 0; margin: -6px 0; }

/* WooCommerce product meta (category / tag links) and shop pagination. */
.woocommerce div.product .product_meta a { display: inline-block; padding: 6px 2px; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li { border: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #dfe3ef; border-radius: 12px; background: #fff; color: var(--mewoo-ink); font-weight: 700; line-height: 1; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current { color: #fff; background: var(--mewoo-navy); border-color: var(--mewoo-navy); }
/* Home catalog card titles and contact-card phone link. */
.mewoo-hc-card__title a { display: inline-block; padding: 4px 0; }
.mewoo-contact-card__meta a { display: inline-block; padding: 6px 0; margin: -6px 0; }

/* Mobile nav toggle: keep the 44px box even when the header shrinks. */
.mewoo-nav-toggle { min-width: 44px; }

/* ---------- 4. Legible text (>= 12 px) ---------- */
/* Homepage carousel caption (mu-plugin mewoo-carousel.css) is 10px Arial. */
main .mewoo-carousel .mewoo-carousel__caption { font: 700 12px/1.5 Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; font-weight: 500; }
@media (max-width: 767px) { main .mewoo-carousel .mewoo-carousel__caption { font-size: 12px; padding: 0 14px 10px; } }
/* Home catalog filter pills drop to 11.5px on narrow phones (catalog.css loads after this file). */
@media (max-width: 520px) { .mewoo-hc .mewoo-hc-tabs .mewoo-hc-tab { font-size: 0.75rem; letter-spacing: 0.06em; } }
/* Home catalog cards (catalog.css loads later, so selectors carry extra specificity): badge 10.6px, spec labels 9.9px, chips 11.2px. */
.mewoo-hc .mewoo-hc-grid .mewoo-hc-card__badge { font-size: 0.75rem; }
.mewoo-hc .mewoo-hc-grid .mewoo-hc-card__specs dt { font-size: 0.75rem; letter-spacing: 0.06em; }
.mewoo-hc .mewoo-hc-grid .mewoo-hc-card__specs dd { font-size: 0.88rem; }
.mewoo-hc .mewoo-hc-grid .mewoo-hc-card__tags li { font-size: 0.75rem; padding: 4px 10px; }
/* Consent-banner privacy link: the padding rule needs to beat theme.css's `.mewoo-analytics-consent p a`. */
section.mewoo-analytics-consent p a { display: inline-block; padding: 8px 0; margin: -8px 0; }
/* Lead-form helper text inside labels was 10.9px. */
.mewoo-lead-form label small { font-size: 0.78rem; }
/* Review card "verified" badge is 10.6px on desktop; hidden on phones already. */
.mewoo-hr-verified { font-size: 0.72rem; }

.mewoo-announcement { font-size: 0.78rem; }
.mewoo-tier-card__badge { font-size: 0.75rem; }
.mewoo-cart-count { font-size: 0.75rem; }
@media (max-width: 767px) {
  .mewoo-announcement { font-size: 0.75rem; letter-spacing: 0.06em; }
  .mewoo-announcement p { padding: 7px 14px; }
}

/* ---------- 4b. Mobile navigation: 52 links in a panel anchored to the sticky header ---------- */
/* The open menu is position:absolute inside the sticky header, so page scrolling never reveals
 * the part below the fold (2441 px tall when the mega groups are expanded). Make the panel itself
 * scroll within the viewport. */
@media (max-width: 960px) {
  .mewoo-nav.is-open {
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 32px;
  }
}

/* ---------- 5. Consent banner: keep it small on phones (was 145 px of an 823 px viewport) ---------- */
@media (max-width: 767px) {
  /* With the WhatsApp dock (71 px) below it, the banner + dock + sticky header covered 31% of the
   * viewport. One compact row: text left, two 38 px buttons right. */
  .mewoo-analytics-consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; }
  .mewoo-analytics-consent p { margin: 0; font-size: 0.78rem; line-height: 1.35; }
  .mewoo-analytics-consent div { display: grid; gap: 6px; }
  .mewoo-analytics-consent button { min-height: 38px; font-size: 0.8rem; }
  .mewoo-analytics-consent .mewoo-button { padding: 6px 14px; box-shadow: none; }
  .mewoo-analytics-consent__reject { padding: 6px 12px; }
}

/* ---------- 6. Archive / blog listing cards with thumbnails ---------- */
.mewoo-archive .mewoo-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.mewoo-archive .mewoo-entry > * { min-width: 0; }
.mewoo-archive__thumb { order: -1; margin: 0 0 14px; }
.mewoo-archive__thumb a { display: block; }
.mewoo-archive__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mewoo-radius); box-shadow: 0 12px 36px rgba(35, 39, 73, 0.08); }
.mewoo-archive .mewoo-entry h2 a { display: inline-block; padding: 2px 0; }
@media (min-width: 768px) {
  .mewoo-archive .mewoo-entry { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .mewoo-archive__thumb { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .mewoo-archive .mewoo-entry > :not(.mewoo-archive__thumb) { grid-column: 2; }
}

/* ---------- 7. Small mobile polish ---------- */
@media (max-width: 767px) {
  /* Product-template banner: text block gets breathing room under the 220px image. */
  .mpd .pc3Banner .bannerContent { padding: 22px 15px 28px; }
  /* Tab headers on the product template read as a vertical list; make them look tappable. */
  .mpd .tabsWrapper ul.tabs li { padding: 12px 10px; margin: 0 0 8px; border: 1px solid var(--mpd-border); border-radius: 8px; border-bottom-width: 1px; }
  .mpd .tabsWrapper ul.tabs li.current { color: #fff; background: var(--mpd-primary); border-color: var(--mpd-primary); }
  /* Article body tables: hint that they scroll. */
  .mb-table-wrap { border-radius: 8px; box-shadow: inset -14px 0 14px -14px rgba(7, 11, 29, 0.25); }
  /* Sticky header takes 69px; give in-page anchors (TOC, #choose-your-box) room so headings are not hidden under it. */
  .mb-article h2[id], .mb-article h3[id], #choose-your-box { scroll-margin-top: 84px; }
}