/* ==========================================================================
   KiKi Meow — accessibility layer (WCAG contrast + mobile ergonomics)
   Created 2026-09-21.  Loaded LAST (after style.css and km-shop.css) so that
   equal-specificity rules here always win the cascade.
   --------------------------------------------------------------------------
   PART 1 (§1-§10)  colour contrast — measured with diag-contrast-sweep.cjs
   PART 2 (§11)     mobile tap targets + minimum text size —
                    measured with diag-tap-targets.cjs at a 390x844 viewport
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   style.css carries several global `!important` rules that were intended as
   brand defaults but silently defeated every later, more specific rule:

     style.css:40-48   body.kikimeow h1..h6 { color: var(--km-ink) !important }
     style.css:51-53   body.kikimeow a       { color: var(--km-teal) !important }
     style.css:54-56   body.kikimeow a:hover { color: var(--km-coral) !important }
     style.css:1734-46 body.kikimeow button  { background: var(--km-coral) !important;
                                               color: #fff !important }

   Those four rules produced most of the failures below — e.g. the dark ink
   "30-Day Happiness Guarantee" heading was forced to ink-on-ink (1.00:1), and
   the white carousel arrows were repainted coral (2.57:1) despite their own
   rule asking for white/ink.

   HOW THE FAILURES WERE MEASURED
   A headless-Chromium sweep (diag-contrast-sweep.cjs) walks every element with
   visible text, verifies it is actually rendered (checkVisibility, because
   getComputedStyle still reports colours for display:none subtrees), resolves
   the EFFECTIVE background by compositing translucent ancestors, then applies
   the WCAG 2.1 formula (4.5:1 normal, 3:1 large >=24px, or >=18.66px bold).

   PRINCIPLE — minimum visual change to reach AA.
   The vivid brand colours stay everywhere they are purely decorative (borders,
   icon fills, hairline rules). Wherever a brand colour carries TEXT, or carries
   WHITE TEXT as a surface, we switch to the AA-safe derived value:

     --km-teal-text     #14655D   6.90:1 on #fff   (was #1F8A80 = 4.20:1)
     --km-coral-text    #C2410C   5.18:1 on #fff   (was #FF7A59 = 2.57:1)
     --km-ink-muted     #6B6B6B   5.33:1 on #fff   (was #8A8A8A = 3.45:1)
     --km-mint-on-ink   #7FE3D6   9.35:1 on #2B2B2B (light text on dark bands)

   Note this file deliberately RESTORES intent rather than inventing a new
   look: km-shop.css:212-217 already asks for a teal product-card button, and
   style.css:2203 already asks for white/ink carousel arrows. Both were being
   overridden by the global `!important` rules above.
   ========================================================================== */

:root {
  --km-teal-text: #14655D;
  --km-coral-text: #C2410C;
  --km-mint-on-ink: #7FE3D6;
  /* --km-ink-muted is a TEXT-ONLY token (19 uses, every one a `color:`), so
     redefining it here fixes all of them at once. 3.45:1 -> 5.33:1 on white. */
  --km-ink-muted: #6B6B6B;
}

/* ==========================================================================
   1. LINKS on light surfaces
   `body.kikimeow a` painted every link #1F8A80 (4.20:1). This single change
   resolves ~25 failures across home, shop and PDP (card titles, "Shop all",
   category labels, article links). Dark-surface links are re-overridden in §3.
   ========================================================================== */
body.kikimeow a { color: var(--km-teal-text) !important; }
body.kikimeow a:hover { color: var(--km-coral-text) !important; }

/* ==========================================================================
   2. THE INVISIBLE GUARANTEE HEADING  (1.00:1 — heading was not readable at all)
   `.km-guar` renders on a #2B2B2B band, but style.css:40-48 forces every h1-h6
   to ink. The paragraph and the check badges were already light; only the
   heading was lost.
   ========================================================================== */
body.kikimeow .km-guar h2,
body.kikimeow .km-guar h3,
body.kikimeow .km-guar h4 { color: #fff !important; }

/* ==========================================================================
   3. FOOTER
   style.css has two competing footer designs. The v3.0 "Zooplus-style" block
   (style.css:2991) repainted .km-footer-main white and made the column
   headings ink, but the body copy, links and social pills kept the LIGHT
   colours that were designed for the older dark footer. Result: a white panel
   with #C9C9C9 / #4FD1C5 text (1.66-1.87:1) — effectively unreadable.
   This completes the light design instead of reverting it.
   ========================================================================== */
body.kikimeow .km-footer a,
body.kikimeow .km-footer .km-footer-col a,
body.kikimeow .km-footer .km-footer-col li a { color: var(--km-teal-text) !important; }
body.kikimeow .km-footer a:hover { color: var(--km-coral-text) !important; }
body.kikimeow .km-footer-logo { color: var(--km-coral-text) !important; }
body.kikimeow .km-footer-brand p { color: var(--km-ink-muted) !important; }
body.kikimeow .km-footer-desc { color: var(--km-ink-muted) !important; }

/* Social pills sit on a #FFF0EB chip — light mint on that was 1.68:1. */
body.kikimeow .km-footer-social a {
  color: var(--km-ink) !important;
  background: var(--km-surface) !important;
  border: 1px solid var(--km-line) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}
body.kikimeow .km-footer-social a:hover {
  color: #fff !important;
  background: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
}

/* The BOTTOM bar genuinely sits on dark ink, so its links must be light.
   style.css:2970 forces #4FD1C5 on every footer link; without this re-override
   the darker teal from §3 would land on dark and measure 2.06:1. */
body.kikimeow .km-footer-bottom a,
body.kikimeow .km-footer-bottom .km-footer-legal a,
body.kikimeow .km-footer-bottom-inner a { color: var(--km-mint-on-ink) !important; }
body.kikimeow .km-footer-bottom a:hover { color: #fff !important; }
body.kikimeow .km-footer-bottom-inner span { color: #B4B4B4 !important; }

/* Newsletter band: coral surface, and its heading + button are already ink
   (5.5:1). The subtitle was the odd one out at white-on-coral (2.57:1). */
body.kikimeow .km-footer-newsletter p,
body.kikimeow .km-footer-newsletter .km-nl-copy p { color: var(--km-ink) !important; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* 4a. Primary CTA — stays teal, darkened 4.20 -> 6.90:1 */
body.kikimeow .km-cta,
body.kikimeow a.km-cta {
  background-color: var(--km-teal-text) !important;
  color: #fff !important;
}
body.kikimeow .km-cta:hover {
  background-color: #0F5B54 !important;
  color: #fff !important;
}

/* 4b. Carousel arrows — RESTORE white/ink.
   style.css:2203 declares white bg + ink text, but the global `button` rule at
   style.css:1734 carries !important and repainted them coral (2.57:1). */
body.kikimeow .km-rail-btn {
  background: var(--km-white) !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
}
body.kikimeow .km-rail-btn:hover {
  background: var(--km-cream) !important;
  border-color: var(--km-coral) !important;
  color: var(--km-ink) !important;
}

/* 4c. Home-rail add-to-cart — designed ink + white, but `body.kikimeow a`
   was forcing teal text onto the ink fill (3.37:1). */
body.kikimeow .km-loved-atc {
  background: var(--km-ink) !important;
  color: #fff !important;
}
body.kikimeow .km-loved-atc:hover {
  background: var(--km-coral-text) !important;
  color: #fff !important;
}

/* 4d. Shop-grid / product-card add-to-cart — RESTORE the intended teal.
   km-shop.css:212-217 asks for teal, but the global coral `!important` rule
   won and rendered it coral (2.57:1). `product_type_` in that file is a typo
   for `product_type_simple`, so both forms are listed here. */
body.kikimeow .km-product-card a.add_to_cart_button,
body.kikimeow .km-product-card a.button.product_type_simple,
body.kikimeow .km-product-card a.button.product_type_,
body.kikimeow.woocommerce ul.products li.product a.button,
body.kikimeow.woocommerce ul.products li.product .button,
body.kikimeow a.km-card-atc {
  background-color: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
  color: #fff !important;
}
body.kikimeow .km-product-card a.add_to_cart_button:hover,
body.kikimeow .km-product-card a.button.product_type_simple:hover,
body.kikimeow.woocommerce ul.products li.product a.button:hover,
body.kikimeow a.km-card-atc:hover {
  background-color: #0F5B54 !important;
  border-color: #0F5B54 !important;
  color: #fff !important;
}

/* 4e. Sticky add-to-cart bar */
body.kikimeow .km-sticky-btn {
  background: var(--km-teal-text) !important;
  color: #fff !important;
}

/* 4f. Single-product + checkout buttons (teal surfaces under white text) */
body.kikimeow.woocommerce .single_add_to_cart_button,
body.kikimeow.woocommerce button.single_add_to_cart_button,
body.kikimeow.woocommerce .wc-block-components-button,
body.kikimeow.woocommerce .km-filter-bar .button,
body.kikimeow .km-shop-filters .woof .button {
  background-color: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
  color: #fff !important;
}

/* ==========================================================================
   5. CORAL SURFACES CARRYING WHITE TEXT  (2.57:1 -> 5.18:1)
   ========================================================================== */
body.kikimeow .km-topbar { background-color: var(--km-coral-text) !important; }
body.kikimeow .km-topbar,
body.kikimeow .km-topbar-inner { color: #fff !important; }

body.kikimeow .km-deal-flag,
body.kikimeow .km-card-badge,
body.kikimeow .km-sale-flag {
  background-color: var(--km-coral-text) !important;
  color: #fff !important;
}

/* ==========================================================================
   6. CORAL AS TEXT ON LIGHT  (2.57:1 -> 5.18:1)
   Decorative coral (borders, the 4px rule on .km-clean-highlight) is untouched.
   ========================================================================== */
body.kikimeow .km-hero h1 em,
body.kikimeow .km-sec-link,
body.kikimeow .km-why-num,
body.kikimeow .km-catsbanner-tx b,
body.kikimeow .km-edit-nm em,
body.kikimeow .km-seeall,
body.kikimeow .km-loved-price ins,
body.kikimeow .km-card-price ins { color: var(--km-coral-text) !important; }

/* "Shop all ->" lives inside .km-sec-head, and style.css:756 declares
   `body.kikimeow .km-sec-head a { color: var(--km-coral) !important }`.
   That selector is (0,2,2) while `.km-sec-link` alone is (0,2,1), so the vivid
   coral won on SPECIFICITY even though this file loads later. Match its weight. */
body.kikimeow .km-sec-head a,
body.kikimeow .km-sec-head a.km-sec-link { color: var(--km-coral-text) !important; }
/* style.css:767 uses --km-coral-dark (#E86946) on hover = 3.21:1. */
body.kikimeow .km-sec-head a:hover,
body.kikimeow .km-sec-link:hover { color: #9A3412 !important; }

/* Current-menu-item indicator was coral on white (2.57:1) */
body.kikimeow .current-menu-item > a,
body.kikimeow .current-menu-item > a span,
body.kikimeow a.current > span { color: var(--km-coral-text) !important; }

/* Header nav hover — km-shop.css:350 uses the vivid coral on white. */
body.kikimeow .header_bottom .main_menu li a:hover,
body.kikimeow .main_menu > ul > li > a:hover { color: var(--km-coral-text) !important; }

/* ==========================================================================
   7. TEAL AS TEXT ON LIGHT  (3.7-4.2:1 -> 6.90:1)
   These are <span>/<em> elements, so §1 does not reach them.
   ========================================================================== */
body.kikimeow .km-kicker,
body.kikimeow .km-deal-eyebrow,
body.kikimeow .km-deal-save,
body.kikimeow .km-card-cat,
body.kikimeow .km-post-cat,
body.kikimeow .km-story-link,
body.kikimeow ul.products li.product .km-shipping-tag,
body.kikimeow.woocommerce div.product p.stock,
body.kikimeow.woocommerce div.product .product_meta a,
body.kikimeow.woocommerce div.product .summary .price { color: var(--km-teal-text) !important; }

body.kikimeow .km-cta.alt:hover { color: var(--km-teal-text) !important; }

/* Breadcrumb separator — decorative but it is still text. */
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb .km-crumb-sep { color: var(--km-ink-muted) !important; }

/* ==========================================================================
   8. WOOF PRICE SLIDER
   The plugin ships ion.rangeSlider with its own #006CFA blue, which is off
   brand. Recolour the whole widget to the brand teal and make sure every
   label that sits ON the track is white (the tooltips are filled surfaces,
   not text on the page background — a first pass got this wrong and produced
   #5A5A5A on #006CFA = 1.49:1, so the two groups are kept separate here).
   ========================================================================== */

/* Tick numbers sit BELOW the track, on the white page background. */
body.kikimeow .woof_container .irs--round .irs-grid-text,
body.kikimeow .irs--round .irs-grid-text,
body.kikimeow .woof_container .irs--round .irs-min,
body.kikimeow .woof_container .irs--round .irs-max { color: var(--km-ink-soft) !important; }

/* Filled track + handles + value tooltips = brand teal surface, white text. */
body.kikimeow .woof_container .irs--round .irs-bar,
body.kikimeow .woof_container .irs--round .irs-bar-edge,
body.kikimeow .woof_container .irs--round .irs-handle,
body.kikimeow .woof_container .irs--round .irs-single,
body.kikimeow .woof_container .irs--round .irs-from,
body.kikimeow .woof_container .irs--round .irs-to,
body.kikimeow .irs--round .irs-bar,
body.kikimeow .irs--round .irs-single,
body.kikimeow .irs--round .irs-from,
body.kikimeow .irs--round .irs-to {
  background-color: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
  color: #fff !important;
}
body.kikimeow .woof_container .irs--round .irs-handle > i:first-child,
body.kikimeow .irs--round .irs-handle > i:first-child { background-color: var(--km-teal-text) !important; }
body.kikimeow .woof_container .irs--round .irs-line,
body.kikimeow .irs--round .irs-line { background-color: #E4E4E4 !important; }

/* ==========================================================================
   8b. ACTIVE CATEGORY CHIP in the shop filter bar.
   `.km-filter-bar a.active` renders teal-on-white-text at 4.20:1.
   ========================================================================== */
body.kikimeow .km-filter-bar a.active,
body.kikimeow .km-filter-bar a.active:hover {
  background-color: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
  color: #fff !important;
}

/* ==========================================================================
   9. SHOP RESULT COUNT + misc muted meta
   (#8A8A8A on #F6F6F6 was 3.19:1 — fixed by the --km-ink-muted token above,
   these two carry their own hard-coded grey.)
   ========================================================================== */
body.kikimeow .km-shop-result-count,
body.kikimeow .woocommerce-result-count { color: var(--km-ink-muted) !important; }
body.kikimeow .km-card-spec { color: var(--km-ink-soft) !important; }

/* ==========================================================================
   10. PRODUCT-DETAIL TABLES  (found on a real PDP; the first pass only swept a
   PDP URL that had since been renamed and 404'd, so these were missed)
   ========================================================================== */

/* 10a. `table.pv-specs` is hand-authored inside each product's post_content,
   but the Bridge PARENT theme paints generic table cells #888 on #F6F6F6
   (3.28:1) and that leaks straight through. Overriding in CSS is the right
   layer — rewriting the table in 500 products' post_content is not. */
body.kikimeow table.pv-specs th,
body.kikimeow table.pv-specs td,
body.kikimeow .km-pdp-extra .km-compare th,
body.kikimeow .km-pdp-extra .km-compare td { color: var(--km-ink) !important; }
body.kikimeow table.pv-specs td { background: transparent !important; }

/* 10b. The "KiKi Meow" column of the comparison table was vivid teal on
   #F6F6F6 (3.88:1). functions.php:646 hard-codes #1F8A80 inline. */
body.kikimeow .km-pdp-extra .km-compare .km-yes { color: var(--km-teal-text) !important; }

/* 10c. FAQ expand marker — a real glyph, so it is text. */
body.kikimeow .km-pdp-extra .km-faq summary:before { color: var(--km-coral-text) !important; }

/* 10d. Sticky bar price was vivid coral on white (2.57:1).
   style.css:2047 sets it with no !important, so this simply wins. */
body.kikimeow .km-sticky-price,
body.kikimeow .km-sticky-price .amount { color: var(--km-coral-text) !important; }

/* 10e. Single-product add-to-cart.
   style.css:2627 wins the cascade at (0,5,3) — `body.kikimeow.woocommerce
   div.product form.cart .single_add_to_cart_button` — which is why the two
   later rules at style.css:2951 (0,2,0) and :3304 (0,3,2) never took effect
   and the button stayed at #1F8A80 = 4.20:1. Match that specificity exactly;
   this file loads later, so equal weight wins. */
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--km-teal-text) !important;
  border-color: var(--km-teal-text) !important;
  color: #fff !important;
}
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button.added {
  background: #0F5B54 !important;
  border-color: #0F5B54 !important;
  color: #fff !important;
}

/* 10f. Sale badge on the PDP gallery.
   style.css:1554 declares `body.kikimeow span.onsale` at (0,2,2), which beats
   the (0,2,1) form used in section 5 — so it needs matching weight too. */
body.kikimeow span.onsale,
body.kikimeow ul.products li.product .onsale {
  background-color: var(--km-coral-text) !important;
  border-color: var(--km-coral-text) !important;
  color: #fff !important;
}

/* 10g. PDP gallery controls.
   These are <button> elements, so the global `body.kikimeow button` rule at
   style.css:1734 paints them coral with white text (2.57:1) and gives them a
   999px radius — three fake primary CTAs sitting on the gallery. Their own
   rules in style.css:2706-2728 carry no !important, so they never stood a
   chance. (The class names also did not match the JS until the same pass —
   see js/gallery-carousel.js.) */
body.kikimeow .km-thumb-nav {
  background: rgba(43, 43, 43, 0.82) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  font: 600 18px/34px system-ui, sans-serif !important;
  text-align: center !important;
}
body.kikimeow .km-thumb-nav:hover { background: var(--km-teal-text) !important; color: #fff !important; }
body.kikimeow .km-thumb-nav.is-hidden { display: none !important; }

body.kikimeow .km-view-all {
  background: var(--km-white) !important;
  color: var(--km-teal-text) !important;
  border: 1.5px solid var(--km-teal-text) !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
  font: 600 13px/1 'Nunito', sans-serif !important;
  width: auto !important;
  min-height: 0 !important;
}
body.kikimeow .km-view-all:hover {
  background: var(--km-teal-text) !important;
  color: #fff !important;
}

/* ==========================================================================
   PART 2 — MOBILE ERGONOMICS  (2026-09-21)
   --------------------------------------------------------------------------
   Measured at 390x844 (iPhone-class) with diag-tap-targets.cjs. WCAG 2.5.8
   (Target Size, AA) requires 24x24 CSS px; 2.5.5 (AAA) asks for 44x44, which
   is also the size Apple and Google publish as the comfortable minimum for
   touch. Most of the site already cleared 24px, so these bring the primary
   interactive elements up to the 44px comfort target and lift the last few
   sub-12px labels to a readable 12px.

   Links that sit inline inside a sentence or a breadcrumb trail are exempt
   under WCAG 2.5.8 and are deliberately left alone — padding them to 44px
   would wreck the line rhythm for no accessibility gain.
   ========================================================================== */
@media (max-width: 900px) {

  /* --- 11a. Footer navigation: 30px tall -> 44px --- */
  body.kikimeow .km-footer-col ul.km-footer-menu > li > a,
  body.kikimeow .km-footer .km-footer-col li a,
  body.kikimeow .km-footer-bottom .km-footer-legal a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body.kikimeow .km-footer-col li { margin-bottom: 0 !important; }

  /* Social pills were 96x36 */
  body.kikimeow .km-footer-social a {
    min-height: 44px !important;
    padding: 10px 18px !important;
  }
  body.kikimeow .km-footer-logo { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

  /* Newsletter field + submit were 43px — one pixel short of the target */
  body.kikimeow .km-footer-newsletter input[type="email"],
  body.kikimeow .km-footer-newsletter input[type="text"],
  body.kikimeow .km-footer-newsletter button[type="submit"] {
    min-height: 48px !important;
  }

  /* --- 11b. Product card add-to-cart: 38px -> 44px --- */
  body.kikimeow .km-product-card a.add_to_cart_button,
  body.kikimeow .km-product-card a.button,
  body.kikimeow a.km-card-atc,
  body.kikimeow .km-loved-atc {
    min-height: 44px !important;
  }

  /* --- 11c. Shop category chips: 27px -> 44px --- */
  body.kikimeow .km-filter-bar a,
  body.kikimeow .km-filter-bar .km-chip {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- 11d. Pagination: 38x38 -> 44x44 --- */
  body.kikimeow.woocommerce nav.woocommerce-pagination ul li a,
  body.kikimeow.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- 11e. FAQ accordion rows: 26px -> 44px --- */
  body.kikimeow .km-pdp-extra .km-faq summary {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* --- 11f. PDP gallery controls: 34px -> 44px --- */
  body.kikimeow .km-thumb-nav {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    font: 600 20px/44px system-ui, sans-serif !important;
  }
  body.kikimeow .km-view-all { min-height: 44px !important; padding: 12px 20px !important; }

  /* --- 11g. "Shop all ->" section link: 22px -> 44px --- */
  body.kikimeow .km-sec-head a,
  body.kikimeow .km-sec-link,
  body.kikimeow .km-seeall,
  body.kikimeow .km-story-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- 11h. Quantity stepper: keep the input >= 44px tall --- */
  body.kikimeow.woocommerce div.quantity input.qty,
  body.kikimeow.woocommerce div.product form.cart div.quantity input.qty {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* --- 11i. Minimum legible label size: 11px -> 12px --- */
  body.kikimeow .km-card-cat,
  body.kikimeow .km-card-meta,
  body.kikimeow .km-card-stock,
  body.kikimeow .km-card-badge,
  body.kikimeow .km-post-cat,
  body.kikimeow .km-post-meta {
    font-size: 12px !important;
  }
}

/* --- 11j. Shop sort dropdown was 22px tall on mobile --- */
@media (max-width: 900px) {
  body.kikimeow.woocommerce .woocommerce-ordering select,
  body.kikimeow .km-shop-main .woocommerce-ordering select,
  body.kikimeow.woocommerce form.woocommerce-ordering select {
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* Product-card title links are the second tap target in each card (42px). */
  body.kikimeow .km-product-card .km-card-title a,
  body.kikimeow ul.products li.product .km-card-title a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}

/* --- 11k. Breadcrumb links were 37x15 on mobile ---
   WCAG 2.5.8 has an "Inline" exception that exempts links sitting in a line of
   text, so this was never a formal failure. It is still an awkward tap on a
   phone, so the hit area is padded out to ~34px without moving the text. */
@media (max-width: 900px) {
  body.kikimeow .woocommerce-breadcrumb a {
    display: inline-block !important;
    min-height: 24px !important;
    line-height: 24px !important;
    padding: 5px 2px !important;
  }
  body.kikimeow .woocommerce-breadcrumb {
    line-height: 24px !important;
  }
}

/* ==========================================================================
   v3.2 (2026-09-24) — floating help widget + help strip contrast guards.
   The widget's "Email us" CTA is white text on dark teal; the global
   `body.kikimeow a { color: teal-text !important }` from §1 would otherwise
   repaint it dark-on-dark. Match that specificity to keep it white.
   ========================================================================== */
body.kikimeow .km-help-mail { color: #fff !important; }
body.kikimeow .km-help-fab { color: #fff !important; }