/*
Theme Name: Bridge Child — Store 3 (Apple & Mobile Accessories)
Description: Store 3 storefront styling on top of Bridge. Palette: Graphite & Volt.
Template: bridge
Version: 3.0.0
*/

/* ============================================================================
 * STORE 3 PALETTE — "Graphite & Volt"
 * ----------------------------------------------------------------------------
 * Converted from KiKi Meow's coral + teal on warm cream by
 * scripts/store3-palette-map.py (family-based: 204 hexes + 22 rgb triples across
 * 71 files). The script is NOT idempotent and refuses to run twice.
 *
 * Mapping rule:
 *   coral / warm   -> graphite   (primary CTA is now dark graphite, so the
 *                                 existing white button text stays readable)
 *   teal / cyan    -> steel
 *   gold / amber   -> volt
 *   warm neutrals  -> cool neutrals
 *   semantic reds / greens -> PRESERVED (error / sale / in-stock)
 *
 * The --km-* names below are KEPT as aliases because ~900 rules reference them.
 * Prefer the --s3-* names in new work.
 * ========================================================================= */
:root {
  /* --- Store 3 tokens --- */
  --s3-volt:         #C6F24E;   /* accent — dark text only, never white */
  --s3-volt-tint:    #EEF9D6;
  --s3-volt-deep:    #7E9A2E;
  --s3-graphite:     #262D34;   /* primary CTA fill */
  --s3-graphite-dk:  #1B2127;
  --s3-graphite-deep:#171B1F;   /* brand dark / headings */
  --s3-ink:          #1C2126;   /* body text */
  --s3-ink-soft:     #383F47;
  --s3-ink-muted:    #616971;
  --s3-steel:        #4A5560;   /* secondary */
  --s3-steel-dk:     #3A444D;
  --s3-steel-deep:   #222A31;
  --s3-cream:        #F3F5F4;   /* page tint */
  --s3-surface:      #F2F4F2;
  --s3-line:         #D7DDD9;
  --s3-white:        #FFFFFF;

  /* --- legacy aliases (KiKi names, Store 3 values) --- */
  --km-coral: #262D34;
  --km-coral-dark: #1B2127;
  --km-coral-light: #EFF2F0;
  --km-teal: #4A5560;
  --km-teal-dark: #3A444D;
  --km-teal-light: #E3E7E4;
  --km-ink: #1C2126;
  --km-ink-soft: #383F47;
  --km-ink-muted: #616971;
  --km-cream: #F3F5F4;
  --km-surface: #F2F4F2;
  --km-line: #D7DDD9;
  --km-white: #FFFFFF;
  --km-radius: 16px;
  --km-radius-sm: 12px;
  --km-shadow: 0 8px 30px rgba(28, 33, 38, 0.08);
  --km-shadow-lg: 0 18px 48px rgba(28, 33, 38, 0.12);
}

/* ============ Global reset / base ============ */
body.kikimeow,
.kikimeow body {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important;
  color: var(--km-ink) !important;
  background: var(--km-white) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

body.kikimeow h1,
body.kikimeow h2,
body.kikimeow h3,
body.kikimeow h4,
body.kikimeow h5,
body.kikimeow h6 {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif !important;
  color: var(--km-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

body.kikimeow a {
  color: var(--km-teal) !important;
}

body.kikimeow a:hover {
  color: var(--km-coral) !important;
}

body.kikimeow .content {
  background: var(--km-white) !important;
}

body.kikimeow .content .content_inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.kikimeow .container_inner,
body.kikimeow .container {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kikimeow * {
  box-sizing: border-box !important;
}

/* ============ WooCommerce store notice ============ */
body.kikimeow .woocommerce-store-notice,
body.kikimeow p.woocommerce-store-notice,
body.kikimeow .woocommerce-demo-store .woocommerce-store-notice,
body.kikimeow .demo_store {
  display: none !important;
}

/* ============ Custom promo bar ============ */
body.kikimeow .header_top {
  background: var(--km-teal) !important;
  border-bottom: none !important;
}

body.kikimeow .header_top .header_top_inner {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.kikimeow .header_top .header-widget,
body.kikimeow .header_top .textwidget {
  color: var(--km-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}

/* Reliable promo / trust bar injected via wp_body_open (Bridge has no top bar
   without a top-header widget config). */
body.kikimeow .km-promo-bar {
  background: var(--km-teal) !important;
  color: var(--km-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  padding: 9px 16px !important;
  line-height: 1.3 !important;
}

/* ============ Header / nav ============ */
body.kikimeow .header_bottom {
  background: var(--km-white) !important;
  border-bottom: 1px solid var(--km-line) !important;
  box-shadow: 0 2px 12px rgba(28, 33, 38, 0.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

body.kikimeow .header_bottom .container_inner {
  position: relative !important;
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Re-order header children so desktop reads: logo | nav | cart/currency.
   Bridge outputs .header_inner_right before .main_menu in the DOM; flex order
   fixes the visual sequence without touching parent templates. */
body.kikimeow .header_inner_left {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  order: 1 !important;
  flex: 0 0 auto !important;
}

body.kikimeow .main_menu {
  order: 2 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kikimeow .header_inner_right {
  order: 3 !important;
  flex: 0 0 auto !important;
}

/* Hide the mobile off-canvas list ONLY on desktop. Bridge's stylesheet
   shows nav.mobile_menu at <=1000px and slides the inner <ul> open via JS
   (.mobile_menu_button > span). An earlier build had display:none !important
   at all widths, which overrode that and silently killed the mobile menu. */
@media screen and (min-width: 1001px) {
  body.kikimeow .mobile_menu {
    order: 4 !important;
    display: none !important;
  }
}

body.kikimeow .main_menu > ul {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.kikimeow .logo_wrapper {
  height: auto !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

body.kikimeow .q_logo {
  height: auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* Bridge outputs FOUR KiKi Meow logo variants (normal/dark/sticky/mobile) inside
   one anchor. They are the SAME svg, so stack them at the exact same spot and
   show all at opacity:1 — only one is ever visible. Forcing them static side-by-side
   previously produced the "4 logos" bug. .light is Bridge's white logo for dark
   headers and must stay hidden (our header is always white). */
body.kikimeow .q_logo a {
  position: relative !important;
  display: block !important;
  height: 50px !important;
  width: 205px !important;
  line-height: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
}

body.kikimeow .q_logo img.normal,
body.kikimeow .q_logo img.dark,
body.kikimeow .q_logo img.sticky,
body.kikimeow .q_logo img.mobile {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-height: 50px !important;
  max-width: 220px !important;
  opacity: 1 !important;
}

body.kikimeow .q_logo img.light {
  display: none !important;
}

body.kikimeow .main_menu > ul > li {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

body.kikimeow .main_menu > ul > li > a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--km-ink) !important;
  padding: 0 12px !important;
  height: 72px !important;
  line-height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

body.kikimeow .main_menu > ul > li > a .plus {
  display: none !important;
}

body.kikimeow .main_menu > ul > li.menu-item-has-children > a::after {
  content: "\f107" !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  margin-left: 6px !important;
  opacity: 0.7 !important;
}

body.kikimeow .main_menu > ul > li > ul {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(28, 33, 38, 0.1) !important;
  border: 1px solid rgba(28, 33, 38, 0.06) !important;
  padding: 8px 0 !important;
  min-width: 180px !important;
  margin-top: 8px !important;
}

body.kikimeow .main_menu > ul > li > ul li a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--km-ink) !important;
  padding: 8px 18px !important;
}

body.kikimeow .main_menu > ul > li > ul li a:hover,
body.kikimeow .main_menu > ul > li > ul li.current-menu-item a {
  color: var(--km-coral) !important;
  background: var(--km-cream) !important;
}

body.kikimeow .main_menu > ul > li > a:hover,
body.kikimeow .main_menu > ul > li.current-menu-item > a,
body.kikimeow .main_menu > ul > li.current-menu-parent > a,
body.kikimeow .main_menu > ul > li.current-menu-ancestor > a {
  color: var(--km-coral) !important;
}

body.kikimeow .shopping_cart_header,
body.kikimeow .side_menu_button {
  margin-left: 12px !important;
}

body.kikimeow .side_menu_button a {
  color: var(--km-ink) !important;
  font-size: 20px !important;
}

/* Hide side-menu hamburger on all sizes; mobile uses left hamburger only */
body.kikimeow .header_inner_right .side_menu_button {
  display: none !important;
}

/* Mobile menu button styling (only when Bridge shows it) */
@media (max-width: 1000px) {
  body.kikimeow .mobile_menu_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--km-radius-sm) !important;
    background: var(--km-cream) !important;
    color: var(--km-ink) !important;
    margin-left: 6px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    /* KM-MOBHDR (2026-09-28): Bridge's responsive.min.css shifts .q_logo a by
       -50% of its box. We override the width to a fixed 150px but never overrode
       `left`, so -50% resolved to a permanent -75px and the logo landed ON TOP of
       this button (invisible at <=370px; off-screen at 320-360). left:0 on
       .q_logo a fixes the geometry; this z-index is the belt-and-braces so the
       button always wins hit-testing wherever the two still overlap. */
    position: relative !important;
    z-index: 20 !important;
  }

  body.kikimeow .mobile_menu_button span,
  body.kikimeow .mobile_menu_button i {
    color: var(--km-ink) !important;
    font-size: 18px !important;
  }

  /* KM-MOBHDR (2026-09-28): Bridge binds the menu toggle to this <span>, NOT to
     the 44px button — so the live tap target measured only 19x17 px. Fill the
     button with the span; the whole 44x44 is then tappable (WCAG 2.5.5 / Apple
     HIG 44x44 minimum). */
  body.kikimeow .mobile_menu_button span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide Bridge's default white `.light` logo variant (we only use the SVG) */
  body.kikimeow .q_logo img.light { display: none !important; }

  /* Center the logo and keep it inside the mobile container */
  body.kikimeow .header_inner_left {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
  }
  body.kikimeow .logo_wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 150px !important;
    text-align: center !important;
  }
  /* KM-MOBHDR (2026-09-28): Bridge responsive.min.css declares
     `.q_logo a{left:-50%;width:auto!important}` inside @media (max-width:1000px)
     — a centring trick that only works while the anchor is exactly as wide as its
     wrapper. We pin the width to 150px, so -50% resolved against OUR 150px box =
     a permanent -75px shift (measured computed left: -75px). Undo it. */
  body.kikimeow .q_logo a { width: 150px !important; height: 40px !important; left: 0 !important; }
  body.kikimeow .q_logo img.normal,
  body.kikimeow .q_logo img.dark,
  body.kikimeow .q_logo img.sticky,
  body.kikimeow .q_logo img.mobile { width: auto !important; max-height: 40px !important; }

  /* Compact header on mobile so it doesn't take too much vertical space */
  body.kikimeow .header_bottom { padding: 8px 0 !important; }
  body.kikimeow .header_bottom .container_inner { min-height: 56px !important; }

  /* Push the cart to the right edge on mobile so the logo can sit centered */
  body.kikimeow .header_inner_right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.kikimeow .shopping_cart_outer {
    display: flex !important;
    align-items: center !important;
  }

  /* --- Mobile navigation: make the slide-down menu actually render ---
     Bridge keeps nav.mobile_menu hidden by default and slides the inner <ul>
     open via JS. We let it become a full-width block that wraps onto its own
     row below the header bar (so it doesn't squeeze the logo row), then style
     the list. NOTE: do NOT set display:!important on the inner <ul> — Bridge's
     slideDown sets inline display which a stylesheet !important would beat. */
  body.kikimeow .header_bottom .container_inner {
    flex-wrap: wrap !important;
  }
  body.kikimeow .mobile_menu {
    display: block !important;
    order: 5 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.kikimeow .mobile_menu > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 4px 8px !important;
    width: 100% !important;
  }
  body.kikimeow .mobile_menu > ul > li {
    border-top: 1px solid rgba(28, 33, 38, 0.07) !important;
  }
  body.kikimeow .mobile_menu > ul > li:first-child { border-top: 0 !important; }
  body.kikimeow .mobile_menu > ul > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 6px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: var(--km-ink) !important;
  }
  body.kikimeow .mobile_menu > ul > li > a:hover {
    color: var(--km-coral-text, #171B1F) !important;
  }
  /* Product thumbnails inside the By Type sub-list */
  body.kikimeow .mobile_menu img.km-nav-thumb {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background: #EEF0EE !important;
  }
}

/* Currency switcher in header right (CURCY layout5: flag + currency code) */
body.kikimeow .header_bottom_right_widget_holder {
  display: flex !important;
  align-items: center !important;
}
body.kikimeow .header_bottom_right_widget_holder .widget_text {
  margin: 0 !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency {
  display: inline-flex !important;
  align-items: center !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency .wmc-currency {
  margin: 0 !important;
}

/* Compact flag + code dropdown */
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 {
  position: relative !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-currency-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--km-cream) !important;
  border: 1px solid rgba(28, 33, 38, 0.08) !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--km-ink) !important;
  line-height: 1 !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency .vi-flag-64 {
  width: 22px !important;
  height: 15px !important;
  background-size: cover !important;
  border-radius: 2px !important;
  transform: none !important;
  margin: 0 !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-open-dropdown-currencies {
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 4px solid var(--km-ink) !important;
  margin-left: 2px !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-sub-currency {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(28, 33, 38, 0.1) !important;
  border: 1px solid rgba(28, 33, 38, 0.06) !important;
  padding: 8px 0 !important;
  min-width: 130px !important;
  display: none !important;
  z-index: 1001 !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5:hover .wmc-sub-currency,
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-currency-wrapper:hover .wmc-sub-currency {
  display: block !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-sub-currency .wmc-currency a {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  color: var(--km-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-sub-currency .wmc-currency a:hover {
  background: var(--km-cream) !important;
  color: var(--km-coral) !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-sub-currency .vi-flag-64 {
  width: 20px !important;
  height: 14px !important;
  background-size: cover !important;
  border-radius: 2px !important;
}

@media (max-width: 1000px) {
  body.kikimeow .header_bottom_right_widget_holder {
    display: none !important; /* hide currency switcher on mobile header */
  }
}

/* ============ Title bar — hide on commerce pages ============ */
body.kikimeow.archive .title_outer,
body.kikimeow.single-product .title_outer,
body.kikimeow.woocommerce-page .title_outer,
body.kikimeow.home .title_outer,
body.kikimeow.page-id-33 .title_outer,
body.kikimeow .title_outer {
  display: none !important;
}

/* Breadcrumbs re-injected into commerce content (Bridge only shows them in the
   hidden .title_outer). Helps navigation + SEO, mirroring Chewy-style trails. */
body.kikimeow .km-breadcrumb,
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb {
  font-family: 'Nunito', "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--km-ink) !important;
  letter-spacing: 0.01em !important;
  max-width: 1200px !important;
  margin: 22px auto 0 !important;
  padding: 0 28px !important;
}

body.kikimeow .km-breadcrumb a,
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb a {
  color: var(--km-ink) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

body.kikimeow .km-breadcrumb a:hover,
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb a:hover {
  color: var(--km-coral) !important;
}

body.kikimeow .km-breadcrumb .km-crumb-sep,
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb .km-crumb-sep {
  color: var(--km-teal) !important;
  margin: 0 6px !important;
  font-weight: 700 !important;
}

/* ============ Homepage custom sections ============ */
body.kikimeow .km-hero {
  padding: 80px 28px 72px;
  background: linear-gradient(135deg, var(--km-cream) 0%, #ECEFED 55%, #E6EAE7 100%);
  border-radius: 0 0 var(--km-radius) var(--km-radius);
  margin: 0 0 0;
}

body.kikimeow .km-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

body.kikimeow .km-hero-content {
  text-align: left;
}

body.kikimeow .km-hero .km-kicker {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--km-teal);
  font-size: 12px;
  margin-bottom: 18px;
}

body.kikimeow .km-hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 52px;
  line-height: 1.08;
  color: var(--km-ink);
  margin: 0 0 18px;
  font-weight: 800;
}

body.kikimeow .km-hero h1 em {
  color: var(--km-coral);
  font-style: normal;
}

body.kikimeow .km-hero p {
  font-size: 18px;
  color: var(--km-ink-soft);
  max-width: 520px;
  margin: 0 0 28px;
  line-height: 1.6;
}

body.kikimeow .km-hero-search {
  position: relative;
  max-width: 480px;
  margin-bottom: 28px;
}

body.kikimeow .km-hero-search input[type="search"],
body.kikimeow .km-hero-search input[type="text"] {
  width: 100% !important;
  padding: 16px 56px 16px 22px !important;
  border: 2px solid var(--km-white) !important;
  border-radius: 999px !important;
  background: var(--km-white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  color: var(--km-ink) !important;
  box-shadow: 0 4px 20px rgba(28,33,38,0.06) !important;
  outline: none !important;
}

body.kikimeow .km-hero-search input:focus {
  border-color: var(--km-coral) !important;
}

body.kikimeow .km-hero-search button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--km-coral);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.kikimeow .km-hero-image {
  position: relative;
  border-radius: var(--km-radius);
  overflow: hidden;
  min-height: 360px;
  background: var(--km-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(74, 85, 96, 0.18);
}

body.kikimeow .km-hero-image::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(38, 45, 52, 0.12), transparent 60%),
              radial-gradient(circle at 70% 80%, rgba(74, 85, 96, 0.10), transparent 55%);
  z-index: 0;
  pointer-events: none;
}

body.kikimeow .km-hero-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--km-radius);
}

body.kikimeow .km-hero-image .km-hero-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  background: var(--km-white);
  padding: 12px 18px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--km-ink);
  box-shadow: var(--km-shadow);
  z-index: 2;
}

body.kikimeow .km-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--km-coral);
  color: #fff !important;
  padding: 15px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(38,45,52,0.28);
}

body.kikimeow .km-cta:hover {
  background: var(--km-coral-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(38,45,52,0.35);
}

body.kikimeow .km-cta.alt {
  background: var(--km-white);
  color: var(--km-ink) !important;
  border: 2px solid var(--km-line);
  box-shadow: none;
}

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

body.kikimeow .km-cta svg {
  width: 18px;
  height: 18px;
}

/* Trust strip */
body.kikimeow .km-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px 24px;
  background: var(--km-white);
  border-bottom: 1px solid var(--km-line);
}

body.kikimeow .km-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--km-ink);
}

body.kikimeow .km-trust-item .km-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--km-coral-light);
  color: var(--km-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Sections */
body.kikimeow .km-sec {
  padding: 70px 0 30px;
}

body.kikimeow .km-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

body.kikimeow .km-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 36px;
  flex-wrap: wrap;
  gap: 14px;
}

body.kikimeow .km-sec-head-left {
  text-align: left;
}

body.kikimeow .km-sec-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--km-ink);
}

body.kikimeow .km-sec-head p {
  color: var(--km-ink-soft);
  margin: 0;
  font-size: 16px;
}

body.kikimeow .km-sec-head a {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--km-coral) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.kikimeow .km-sec-head a:hover {
  color: var(--km-coral-dark) !important;
}

body.kikimeow .km-sec.km-center-head .km-sec-head {
  justify-content: center !important;
}
body.kikimeow .km-sec.km-center-head .km-sec-head-left {
  text-align: center !important;
}

/* Shop by pet */
body.kikimeow .km-pets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

body.kikimeow .km-pet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--km-radius);
  padding: 30px 16px;
  text-decoration: none;
  color: #fff;
  min-height: 150px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--km-shadow);
}

body.kikimeow .km-pet:hover {
  transform: translateY(-6px);
  box-shadow: var(--km-shadow-lg);
  color: #fff !important;
}

body.kikimeow .km-pet .km-emoji {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 12px;
}

body.kikimeow .km-pet .km-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 17px;
}

body.kikimeow .km-pet .km-count {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 5px;
  font-weight: 600;
}

/* Guarantee band */
body.kikimeow .km-guar {
  margin: 56px 0 12px;
  background: var(--km-ink);
  color: #fff;
  border-radius: var(--km-radius);
  padding: 52px 32px;
  text-align: center;
}

body.kikimeow .km-guar h3 {
  margin: 0 0 12px;
  color: var(--km-coral);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 28px;
}

body.kikimeow .km-guar p {
  max-width: 640px;
  margin: 0 auto 26px;
  color: #C3CAC7;
  font-size: 16px;
  line-height: 1.65;
}

body.kikimeow .km-guar-badges {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

body.kikimeow .km-guar-badges span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

/* Newsletter */
body.kikimeow .km-newsletter {
  background: var(--km-teal-light);
  border-radius: var(--km-radius);
  padding: 52px 32px;
  text-align: center;
  margin: 56px 0 0;
}

body.kikimeow .km-newsletter h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--km-ink);
}

body.kikimeow .km-newsletter p {
  color: var(--km-ink-soft);
  margin: 0 auto 24px;
  max-width: 460px;
}

body.kikimeow .km-newsletter form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}

body.kikimeow .km-newsletter input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 14px 22px !important;
  border: 2px solid var(--km-white) !important;
  border-radius: 999px !important;
  background: var(--km-white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
}

body.kikimeow .km-newsletter button {
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  background: var(--km-teal);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  cursor: pointer;
}

/* ============ Hero search button + trust rating ============ */
/* WooCommerce product search form rendered in the hero (Amazon/Taobao pattern). */
body.kikimeow .km-hero-search form {
  position: relative;
  max-width: 480px;
}
body.kikimeow .km-hero-search label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}
body.kikimeow .km-hero-search input[type="search"] {
  width: 100% !important;
  padding: 16px 56px 16px 22px !important;
  border: 2px solid var(--km-white) !important;
  border-radius: 999px !important;
  background: var(--km-white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  color: var(--km-ink) !important;
  box-shadow: 0 4px 20px rgba(28,33,38,0.06) !important;
  outline: none !important;
}
body.kikimeow .km-hero-search input[type="search"]:focus {
  border-color: var(--km-coral) !important;
}
body.kikimeow .km-hero-search button[type="submit"] {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--km-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: 20px 20px !important;
  font-size: 0 !important;
  cursor: pointer !important;
}

body.kikimeow .km-hero-rating {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 26px !important;
}
body.kikimeow .km-hero-rating .km-stars {
  color: #C6F24E !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}
body.kikimeow .km-hero-rating .km-rating-text {
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  color: var(--km-ink-soft) !important;
}
body.kikimeow .km-hero-rating .km-rating-text strong {
  color: var(--km-ink) !important;
}

/* ============ Deal of the Day (Taobao 秒杀 / Pinduoduo / Amazon) ============ */
body.kikimeow .km-deal {
  background: linear-gradient(135deg, #EFF2F0 0%, #DFE4E0 100%);
  padding: 42px 0;
}
body.kikimeow .km-deal-inner {
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  gap: 36px !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: var(--km-radius) !important;
  padding: 28px !important;
  box-shadow: var(--km-shadow) !important;
}
body.kikimeow .km-deal-media {
  position: relative !important;
}
/* Product image only — keep WordPress emoji-replacement flag icon small. */
body.kikimeow .km-deal-media > a > img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  display: block !important;
}
body.kikimeow .km-deal-flag img {
  width: 1em !important;
  height: 1em !important;
  display: inline !important;
  vertical-align: -0.1em !important;
  border-radius: 0 !important;
}
body.kikimeow .km-deal-flag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: var(--km-coral) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(38,45,52,0.35) !important;
}
body.kikimeow .km-deal-eyebrow {
  display: block !important;
  color: var(--km-teal) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}
body.kikimeow .km-deal-body h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}
body.kikimeow .km-deal-body h2 a {
  color: var(--km-ink) !important;
  text-decoration: none !important;
}
body.kikimeow .km-deal-body h2 a:hover {
  color: var(--km-coral) !important;
}
body.kikimeow .km-deal-price {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  font-family: 'Poppins', sans-serif !important;
}
body.kikimeow .km-deal-price .price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--km-coral) !important;
  margin: 0 !important;
}
body.kikimeow .km-deal-price del {
  color: var(--km-ink-muted) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}
body.kikimeow .km-deal-save {
  background: var(--km-teal-light) !important;
  color: var(--km-teal) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}
body.kikimeow .km-countdown {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
body.kikimeow .km-cd-box {
  background: var(--km-ink) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  min-width: 64px !important;
}
body.kikimeow .km-cd-num {
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
body.kikimeow .km-cd-lbl {
  display: block !important;
  font-size: 11px !important;
  opacity: 0.85 !important;
  margin-top: 4px !important;
}
body.kikimeow .km-deal-cta {
  margin-top: 4px !important;
}

/* ============ Trending rail ============ */
body.kikimeow .km-trending {
  background: var(--km-white);
}

/* ============ Reviews / social proof (Chewy / Amazon) ============ */
body.kikimeow .km-reviews {
  background: var(--km-cream);
  padding: 64px 0 12px;
}
body.kikimeow .km-review-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  margin-top: 8px !important;
}
body.kikimeow .km-review {
  background: #fff !important;
  border-radius: var(--km-radius) !important;
  padding: 26px !important;
  box-shadow: var(--km-shadow) !important;
  border: 1px solid var(--km-line) !important;
  text-align: left !important;
}
body.kikimeow .km-review-stars {
  color: #C6F24E !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
}
body.kikimeow .km-review-stars .km-review-dim {
  color: #C4CBC8 !important;
}
body.kikimeow .km-review-text {
  font-size: 15px !important;
  color: var(--km-ink-soft) !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
}
body.kikimeow .km-review-by {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
body.kikimeow .km-review-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--km-coral) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  flex: none !important;
}
body.kikimeow .km-review-by strong {
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: var(--km-ink) !important;
}
body.kikimeow .km-review-pet {
  display: block !important;
  font-size: 12px !important;
  color: var(--km-ink-muted) !important;
}

/* ============ Responsive for new landing sections ============ */
@media (max-width: 980px) {
  body.kikimeow .km-deal-inner { grid-template-columns: 1fr !important; }
  body.kikimeow .km-deal-media { max-width: 320px !important; margin: 0 auto !important; }
  body.kikimeow .km-review-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  body.kikimeow .km-hero-search { max-width: 100% !important; }
  body.kikimeow .km-deal { padding: 28px 0 !important; }
  body.kikimeow .km-deal-inner { padding: 20px !important; }
}

/* ============ Elementor homepage (km- section classes) ============ */
/* These sections are built in Elementor. Elementor's own style generation is not
   triggered by raw _elementor_data injection, so the Wild One palette is applied here.
   The section classes (km-hero / km-trust / km-best / km-pet / km-guarantee) are set
   via Elementor's "css_classes" so this stays editable in the Elementor editor. */
body.kikimeow .elementor-section.km-hero {
  background: var(--km-cream) !important;
  padding: 72px 0 !important;
}
body.kikimeow .elementor-section.km-trust {
  background: var(--km-teal) !important;
  padding: 28px 0 !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-title,
body.kikimeow .elementor-section.km-trust .elementor-icon-box-description,
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon {
  color: #fff !important;
}
body.kikimeow .elementor-section.km-best {
  background: #fff !important;
  padding: 56px 0 !important;
}
body.kikimeow .elementor-section.km-pet {
  background: var(--km-cream) !important;
  padding: 56px 0 !important;
}
body.kikimeow .elementor-section.km-guarantee {
  background: var(--km-ink) !important;
  padding: 48px 0 !important;
}
body.kikimeow .elementor-section.km-guarantee .elementor-heading-title,
body.kikimeow .elementor-section.km-guarantee .elementor-widget-text-editor {
  color: #fff !important;
}
body.kikimeow .km-hero .elementor-heading-title {
  font-size: 44px !important;
  font-weight: 800 !important;
  color: var(--km-ink) !important;
  line-height: 1.1 !important;
}
body.kikimeow .km-hero .elementor-widget-text-editor { font-size: 17px !important; color: #383F47 !important; }
body.kikimeow .km-hero .elementor-button,
body.kikimeow .km-pet .elementor-button {
  background-color: var(--km-coral) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
body.kikimeow .km-best .elementor-heading-title,
body.kikimeow .km-pet .elementor-heading-title { color: var(--km-ink) !important; }

/* Trust band icons — Bridge's FA5 CSS gates the glyph rules behind a .fa5
   class prefix (.fa5.fa-shipping-fast::before) that Elementor's icons don't
   carry, so the <i> falls back to Nunito and renders no glyph. Force the FA5
   font + the correct ::before content for the 4 trust icons. */
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i::before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i.fa-shipping-fast::before { content: "\f48b"; }
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i.fa-clock::before { content: "\f017"; }
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i.fa-shield-alt::before { content: "\f3ed"; }
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon i.fa-paw::before { content: "\f1b0"; }

/* Trust band alignment: icon above, everything centered and evenly sized */
body.kikimeow .elementor-section.km-trust .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 38px !important;
  margin-bottom: 10px !important;
  margin-right: 0 !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-content {
  flex: 0 0 auto !important;
  text-align: center !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}
body.kikimeow .elementor-section.km-trust .elementor-icon-box-description {
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: 0.92 !important;
}

/* ============ Shop archive ============ */
body.kikimeow.archive.woocommerce .content .content_inner,
body.kikimeow.woocommerce-page .content .content_inner {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

/* Wild One-style shop hero */
body.kikimeow .km-shop-hero {
  background: var(--km-cream);
  border-radius: 14px;
  padding: 44px 24px 38px;
  text-align: center;
  margin: 0 0 30px;
}
body.kikimeow .km-shop-hero-title {
  font-family: 'Poppins', 'Nunito', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--km-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
body.kikimeow .km-shop-hero-sub {
  font-size: 16px;
  color: #383F47;
  margin: 0;
}

body.kikimeow .woocommerce-products-header {
  margin-bottom: 28px !important;
}

body.kikimeow .woocommerce-products-header h1.page-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--km-ink) !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
}

body.kikimeow .woocommerce-products-header .term-description {
  color: var(--km-ink-soft) !important;
  font-size: 16px !important;
}

/* Category filter pills */
body.kikimeow .km-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

body.kikimeow .km-filter-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--km-surface);
  color: var(--km-ink) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

body.kikimeow .km-filter-bar a:hover,
body.kikimeow .km-filter-bar a.active {
  background: var(--km-coral);
  color: #fff !important;
}

/* Sort / result toolbar */
body.kikimeow .woocommerce-ordering,
body.kikimeow .woocommerce-result-count {
  margin-bottom: 24px !important;
}

body.kikimeow .woocommerce-ordering select {
  padding: 10px 36px 10px 16px !important;
  border: 1px solid var(--km-line) !important;
  border-radius: 999px !important;
  background: var(--km-white) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  color: var(--km-ink) !important;
  appearance: none !important;
}

body.kikimeow .woocommerce-result-count {
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  color: var(--km-ink-muted) !important;
}

/* Product grid */
body.kikimeow ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.kikimeow ul.products li.product {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  border-radius: var(--km-radius) !important;
  background: var(--km-white) !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 1px solid var(--km-line) !important;
  box-shadow: var(--km-shadow) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

body.kikimeow ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--km-shadow-lg) !important;
}

body.kikimeow ul.products li.product .top-product-section {
  margin: 0 !important;
  position: relative !important;
}

body.kikimeow ul.products li.product .top-product-section a.product-category {
  display: block !important;
  margin: 0 !important;
}

body.kikimeow ul.products li.product .image-wrapper {
  display: block !important;
  background: var(--km-cream) !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

body.kikimeow ul.products li.product .image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 18px !important;
  transition: transform 0.45s ease !important;
}

body.kikimeow ul.products li.product:hover .image-wrapper img {
  transform: scale(1.05) !important;
}

body.kikimeow ul.products li.product .add-to-cart-button-outer {
  position: absolute !important;
  bottom: 14px !important;
  left: 14px !important;
  right: 14px !important;
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

body.kikimeow ul.products li.product .add-to-cart-button-inner {
  display: block !important;
}

body.kikimeow ul.products li.product a.add-to-cart-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 14px !important;
  padding: 12px !important;
  background: var(--km-teal) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(74,85,96,0.28) !important;
}

body.kikimeow ul.products li.product a.add-to-cart-button:hover {
  background: var(--km-coral) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(38,45,52,0.32) !important;
}

body.kikimeow ul.products li.product .product-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 18px 18px 16px !important;
  color: var(--km-ink) !important;
  text-align: left !important;
}

body.kikimeow ul.products li.product .product-info h6 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  color: var(--km-ink) !important;
  text-transform: none !important;
  text-align: left !important;
  min-height: 41px !important;
}

body.kikimeow ul.products li.product .price {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--km-coral) !important;
  margin: 0 0 8px !important;
  order: 2 !important;
  margin-top: auto !important;
}

body.kikimeow ul.products li.product .price del {
  color: var(--km-ink-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-right: 6px !important;
}

body.kikimeow ul.products li.product .price ins {
  text-decoration: none !important;
}

body.kikimeow ul.products li.product .km-shipping-tag {
  font-size: 12px !important;
  color: var(--km-teal) !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  order: 3 !important;
}

body.kikimeow ul.products li.product .onsale,
body.kikimeow span.onsale {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: var(--km-coral) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  z-index: 5 !important;
}

/* ============ Single product ============ */
body.kikimeow.single-product .content .content_inner {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

body.kikimeow.woocommerce div.product .product_title.entry-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--km-ink) !important;
  text-transform: none !important;
  margin: 0 0 14px !important;
}

body.kikimeow.woocommerce div.product .summary .price {
  color: var(--km-coral) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 18px !important;
}

body.kikimeow.woocommerce div.product .summary .price del {
  color: var(--km-ink-muted) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
}

body.kikimeow.woocommerce div.product p.stock {
  color: var(--km-teal) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 18px !important;
}

/* Quantity stepper */
body.kikimeow.woocommerce div.product form.cart div.quantity {
  border: 1px solid var(--km-line) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-right: 14px !important;
}

body.kikimeow.woocommerce div.product form.cart div.quantity .minus,
body.kikimeow.woocommerce div.product form.cart div.quantity .plus {
  background: var(--km-surface) !important;
  color: var(--km-ink) !important;
  border: none !important;
  font-weight: 700 !important;
  width: 36px !important;
}

body.kikimeow.woocommerce div.product form.cart div.quantity .input-text.qty {
  border: none !important;
  font-weight: 700 !important;
  color: var(--km-ink) !important;
}

body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--km-coral) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  box-shadow: 0 8px 24px rgba(38,45,52,0.28) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--km-coral-dark) !important;
  transform: translateY(-2px) !important;
}

/* Trust badges on product page */
body.kikimeow .km-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--km-line);
}

body.kikimeow .km-trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--km-ink-soft);
  font-weight: 600;
}

body.kikimeow .km-trust-badges svg {
  width: 20px;
  height: 20px;
  color: var(--km-teal);
}

/* Product meta */
body.kikimeow.woocommerce div.product .product_meta {
  border-top: 1px solid var(--km-line) !important;
  padding-top: 18px !important;
  margin-top: 22px !important;
  color: var(--km-ink-soft) !important;
  font-size: 14px !important;
}

body.kikimeow.woocommerce div.product .product_meta a {
  color: var(--km-teal) !important;
  font-weight: 700 !important;
}

/* Tabs / accordion */
body.kikimeow.woocommerce div.product .q_accordion_holder.woocommerce-accordion {
  border: none !important;
  margin-top: 34px !important;
}

body.kikimeow.woocommerce div.product .q_accordion_holder.woocommerce-accordion .title-holder {
  background: var(--km-surface) !important;
  border: 1px solid var(--km-line) !important;
  border-radius: var(--km-radius-sm) !important;
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
}

body.kikimeow.woocommerce div.product .q_accordion_holder.woocommerce-accordion .title-holder .tab-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--km-ink) !important;
}

body.kikimeow.woocommerce div.product .q_accordion_holder.woocommerce-accordion .accordion_content {
  border: 1px solid var(--km-line) !important;
  border-top: none !important;
  border-radius: 0 0 var(--km-radius-sm) var(--km-radius-sm) !important;
  padding: 20px !important;
  background: var(--km-white) !important;
  color: var(--km-ink-soft) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body.kikimeow.woocommerce div.product .q_accordion_holder.woocommerce-accordion .accordion_content p {
  margin-bottom: 12px !important;
}

/* Related / upsells heading */
body.kikimeow .related.products > h2,
body.kikimeow .upsells.products > h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 56px 0 28px !important;
  text-transform: none !important;
}

/* ============ Buttons (global) ============ */
body.kikimeow .button,
body.kikimeow button,
body.kikimeow input[type="submit"],
body.kikimeow.woocommerce a.button,
body.kikimeow.woocommerce button.button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--km-coral) !important;
  color: #fff !important;
  border: none !important;
  text-transform: none !important;
}

body.kikimeow .button:hover,
body.kikimeow button:hover,
body.kikimeow.woocommerce a.button:hover,
body.kikimeow.woocommerce button.button:hover {
  background: var(--km-coral-dark) !important;
  color: #fff !important;
}

/* ============ Pagination / messages ============ */
body.kikimeow.woocommerce nav.woocommerce-pagination ul li a,
body.kikimeow.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 999px !important;
  border: 1px solid var(--km-line) !important;
  color: var(--km-ink) !important;
  font-weight: 700 !important;
}

body.kikimeow.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--km-coral) !important;
  color: #fff !important;
  border-color: var(--km-coral) !important;
}

body.kikimeow .woocommerce-message,
body.kikimeow .woocommerce-info,
body.kikimeow .woocommerce-error {
  border-radius: var(--km-radius-sm) !important;
  font-size: 15px !important;
  border-left-width: 4px !important;
}

/* ============ Responsive ============ */
@media (max-width: 1200px) {
  body.kikimeow ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  body.kikimeow .km-hero-inner { grid-template-columns: 1fr; text-align: center; }
  body.kikimeow .km-hero-content { text-align: center; }
  body.kikimeow .km-hero p { margin-left: auto; margin-right: auto; }
  body.kikimeow .km-hero-search { margin-left: auto; margin-right: auto; }
  body.kikimeow .km-hero-image { min-height: 280px; }
  body.kikimeow .km-pets { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  body.kikimeow .km-hero { padding: 56px 20px 48px; }
  body.kikimeow .km-hero h1 { font-size: 36px; }
  body.kikimeow .km-trust { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 22px 16px; }
  body.kikimeow .km-trust-item { justify-content: flex-start; font-size: 13px; }
  body.kikimeow .km-pets { grid-template-columns: repeat(2, 1fr); }
  body.kikimeow .km-sec-head { flex-direction: column; align-items: flex-start; }
  body.kikimeow .km-guar { padding: 36px 22px; }
  body.kikimeow .km-guar-badges { gap: 18px; }
}

@media (max-width: 680px) {
  body.kikimeow ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  body.kikimeow ul.products li.product .product-info { padding: 14px !important; }
  body.kikimeow ul.products li.product .product-info h6 { font-size: 14px !important; min-height: 38px !important; }
  body.kikimeow ul.products li.product .price { font-size: 15px !important; }
  body.kikimeow ul.products li.product a.add-to-cart-button { padding: 10px !important; font-size: 13px !important; }
  body.kikimeow .woocommerce-products-header h1.page-title { font-size: 28px !important; }
  body.kikimeow.woocommerce div.product .product_title.entry-title { font-size: 24px !important; }
  body.kikimeow .q_logo a { width: 150px !important; height: 40px !important; }
  body.kikimeow .q_logo img.normal,
  body.kikimeow .q_logo img.dark,
  body.kikimeow .q_logo img.sticky,
  body.kikimeow .q_logo img.mobile { width: auto !important; max-height: 40px !important; }
  body.kikimeow .woocommerce-ordering,
  body.kikimeow .woocommerce-result-count {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.kikimeow .woocommerce-ordering { margin-bottom: 8px !important; }
  body.kikimeow .woocommerce-ordering select { width: 100% !important; }
  body.kikimeow .woocommerce-result-count { text-align: left !important; }
}

/* ============ KiKi Meow footer ============ */
body.kikimeow .km-footer { background: var(--km-ink); color: #fff; font-family: 'Nunito', sans-serif; }
body.kikimeow .km-footer * { box-sizing: border-box; }
body.kikimeow .km-footer-newsletter { background: var(--km-coral); color: #fff; padding: 34px 0; }
body.kikimeow .km-footer-newsletter-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
body.kikimeow .km-nl-copy h3 { margin: 0 0 4px; font-size: 22px; font-weight: 800; font-family: 'Poppins', sans-serif; }
body.kikimeow .km-nl-copy p { margin: 0; font-size: 15px; opacity: .95; }
body.kikimeow .km-nl-form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 280px; max-width: 480px; }
body.kikimeow .km-nl-form input[type=email] { flex: 1; padding: 13px 16px; border: none; border-radius: 8px; font-size: 15px; color: var(--km-ink); }
body.kikimeow .km-nl-form button { background: var(--km-ink); color: #fff; border: none; border-radius: 8px; padding: 13px 20px; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
body.kikimeow .km-nl-form button:hover { background: #000; }
body.kikimeow .km-nl-msg { font-size: 13px; margin-left: 4px; }
body.kikimeow .km-nl-msg.km-nl-ok { color: #fff; }
body.kikimeow .km-nl-msg.km-nl-err { color: #DFE4E0; }

body.kikimeow .km-footer-main { padding: 52px 0 40px; }
body.kikimeow .km-footer-cols { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
body.kikimeow .km-footer-logo { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: #262D34 !important; text-decoration: none; margin-bottom: 12px; }
body.kikimeow .km-footer-brand p { font-size: 14px; line-height: 1.6; color: #A9B0B3; margin: 0 0 14px; max-width: 320px; }
body.kikimeow .km-footer-social { display: flex; gap: 16px; }
body.kikimeow .km-footer-social a { color: #C9D0CC; font-size: 14px; text-decoration: none; }
body.kikimeow .km-footer-social a:hover { color: var(--km-coral); }
body.kikimeow .km-footer-col h4 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 14px; }
body.kikimeow .km-footer-desc { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55); margin: 0 0 16px; max-width: 250px; }
body.kikimeow .km-footer-col ul { list-style: none; margin: 0; padding: 0; }
body.kikimeow .km-footer-col li { margin-bottom: 9px; }
body.kikimeow .km-footer-col li a { color: #A9B0B3; font-size: 14px; text-decoration: none; }
body.kikimeow .km-footer-col li a:hover { color: var(--km-coral); }

body.kikimeow .km-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; padding: 18px 0; }
body.kikimeow .km-footer-bottom-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.kikimeow .km-footer-bottom-inner span { font-size: 13px; color: #80888F; }
body.kikimeow .km-footer-pay { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
body.kikimeow .km-pay-note { font-size: 12px; color: #80888F; }
/* Brand marks are inline SVG (was: brand names set in bordered boxes). line-height:0 stops the
   inline-flex wrapper adding descender space under each logo. */
body.kikimeow .km-pay { display: inline-flex; align-items: center; line-height: 0; opacity: .9; transition: opacity .15s ease; }
body.kikimeow .km-pay:hover { opacity: 1; }
body.kikimeow .km-pay svg { height: 26px; width: auto; display: block; }
@media (max-width: 980px) {
  body.kikimeow .km-footer-pay { gap: 13px; }
  body.kikimeow .km-pay svg { height: 22px; }
}

/* ============ KiKi Meow clean content pages (page-clean.php) ============ */
/* The template uses .pv-clean-* (legacy "PV" prefix). CSS was never written,
   so the hero, subtitle, content wrapper and last-updated line all rendered
   plain. This block gives About / Contact / FAQ / Shipping & Returns /
   Returns & Refunds / Privacy / Terms / Cookie / Payment methods a hero
   card and a readable content column, matching the shop hero aesthetic. */
body.kikimeow .pv-clean-main { background: var(--km-cream); }
body.kikimeow .pv-clean-hero { background: var(--km-cream); padding: 64px 24px 36px; text-align: center; }
body.kikimeow .pv-clean-hero-inner { max-width: 760px; margin: 0 auto; }
body.kikimeow .pv-clean-hero h1 { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 800; color: var(--km-ink); margin: 0 0 12px; line-height: 1.15; }
body.kikimeow .pv-clean-subtitle { font-size: 17px; line-height: 1.55; color: var(--km-ink-soft); margin: 0 auto; max-width: 640px; }
body.kikimeow .pv-clean-content { background: var(--km-cream); padding: 8px 24px 72px; }
body.kikimeow .pv-clean-wrap { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 36px 44px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body.kikimeow .pv-clean-wrap h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; color: var(--km-ink); margin: 36px 0 14px; letter-spacing: .02em; text-transform: uppercase; }
body.kikimeow .pv-clean-wrap h2:first-child { margin-top: 4px; }
body.kikimeow .pv-clean-wrap h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--km-ink); margin: 22px 0 8px; }
body.kikimeow .pv-clean-wrap p { font-size: 15px; line-height: 1.7; color: var(--km-ink-soft); margin: 0 0 14px; }
body.kikimeow .pv-clean-wrap ul, body.kikimeow .pv-clean-wrap ol { font-size: 15px; line-height: 1.7; color: var(--km-ink-soft); margin: 0 0 16px 20px; padding: 0; }
body.kikimeow .pv-clean-wrap li { margin-bottom: 6px; }
body.kikimeow .pv-clean-wrap a { color: var(--km-teal); text-decoration: underline; text-underline-offset: 2px; }
body.kikimeow .pv-clean-wrap a:hover { color: var(--km-coral); }
body.kikimeow .pv-clean-updated { margin-top: 28px; padding-top: 16px; border-top: 1px solid #eee; font-size: 13px; color: #888; font-style: italic; }
@media (max-width: 720px) {
  body.kikimeow .pv-clean-hero { padding: 48px 22px 28px; }
  body.kikimeow .pv-clean-hero h1 { font-size: 30px; }
  body.kikimeow .pv-clean-subtitle { font-size: 16px; }
  body.kikimeow .pv-clean-content { padding: 8px 16px 56px; }
  body.kikimeow .pv-clean-wrap { padding: 26px 22px; border-radius: 12px; }
  body.kikimeow .pv-clean-wrap h2 { font-size: 19px; }
}

/* ============ KiKi Meow shop + product cards ============ */
body.kikimeow .km-shop-hero { text-align: center; padding: 56px 24px 28px; background: var(--km-cream); }
body.kikimeow .km-shop-hero-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 800; color: var(--km-ink); margin: 0 0 10px; }
body.kikimeow .km-shop-hero-sub { font-size: 17px; color: var(--km-ink-soft); max-width: 640px; margin: 0 auto; }

body.kikimeow .km-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 18px 24px 28px; background: var(--km-cream); border-bottom: 1px solid #eee; }
body.kikimeow .km-filter-bar a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--km-ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid #D7DCD8; transition: all .15s ease; }
body.kikimeow .km-filter-bar a:hover { border-color: var(--km-teal); color: var(--km-teal); }
body.kikimeow .km-filter-bar a.active { background: var(--km-teal); border-color: var(--km-teal); color: #fff; }

body.kikimeow.woocommerce ul.products,
body.kikimeow .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; margin: 0; padding: 36px 0; border: none; }
body.kikimeow.woocommerce ul.products::before,
body.kikimeow.woocommerce ul.products::after { display: none; }
body.kikimeow.woocommerce ul.products li.product,
body.kikimeow .woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; clear: none !important; float: none !important; }

body.kikimeow .km-product-card .km-card-inner { background: #fff; border: 1px solid #eee; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.04); transition: transform .2s ease, box-shadow .2s ease; height: 100%; display: flex; flex-direction: column; }
body.kikimeow .km-product-card .km-card-inner:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }

body.kikimeow .km-card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #F4F6F4; overflow: hidden; }
body.kikimeow .km-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
body.kikimeow .km-card-inner:hover .km-card-media img { transform: scale(1.05); }
body.kikimeow .km-card-badge { position: absolute; top: 12px; left: 12px; background: var(--km-coral); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; z-index: 2; }

body.kikimeow .km-card-body { padding: 16px 16px 8px; flex: 1; display: flex; flex-direction: column; }
body.kikimeow .km-product-card a.km-card-title { display: -webkit-box; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--km-ink) !important; line-height: 21px; text-decoration: none; margin: 0 0 8px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
body.kikimeow .km-product-card a.km-card-title:hover { color: var(--km-teal) !important; }
body.kikimeow .km-card-price { font-size: 16px; font-weight: 700; color: var(--km-ink); margin-top: auto; }
body.kikimeow .km-card-price del { font-size: 13px; color: #999; font-weight: 400; margin-right: 6px; }
body.kikimeow .km-card-price ins { text-decoration: none; color: var(--km-coral); }

body.kikimeow .km-card-actions { padding: 0 16px 16px; margin-top: auto; }
body.kikimeow a.km-card-atc { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; text-align: center; background: var(--km-ink); color: #fff; border-radius: 10px; padding: 0; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; transition: background .2s ease; border: none; }
body.kikimeow a.km-card-atc:hover { background: var(--km-coral); color: #fff; }
body.kikimeow a.km-card-atc.added { background: var(--km-teal); }
body.kikimeow .km-card-oos { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; text-align: center; background: #D7DCD8; color: #777; border-radius: 10px; padding: 0; font-size: 14px; font-weight: 700; }

/* Hide Bridge's loop overlay button artifacts */
body.kikimeow .add-to-cart-button-outer,
body.kikimeow .add-to-cart-button-inner,
body.kikimeow .top-product-section .qbutton,
body.kikimeow ul.products li.product .product-info h6 { display: none !important; }

body.kikimeow .woocommerce-result-count { color: var(--km-ink-soft); font-size: 14px; }
body.kikimeow .woocommerce-ordering select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; }

body.kikimeow .woocommerce nav.woocommerce-pagination { margin: 24px 0 60px; }
body.kikimeow .woocommerce nav.woocommerce-pagination ul { border: none; }
body.kikimeow .woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0 4px; }
body.kikimeow .woocommerce nav.woocommerce-pagination ul li a,
body.kikimeow .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--km-ink-soft); background: #fff; border: 1px solid #D7DCD8; }
body.kikimeow .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--km-cream); color: var(--km-teal); border-color: var(--km-teal); }
body.kikimeow .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--km-teal); color: #fff; border-color: var(--km-teal); }

@media (max-width: 991px) {
  body.kikimeow.woocommerce ul.products,
  body.kikimeow .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  body.kikimeow.woocommerce ul.products,
  body.kikimeow .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  body.kikimeow .km-shop-hero-title { font-size: 30px; }
  body.kikimeow .km-filter-bar { gap: 8px; }
  body.kikimeow .km-filter-bar a { padding: 6px 12px; font-size: 13px; }
}

/* Mobile: footer stacks, hero scales down */
@media (max-width: 767px) {
  body.kikimeow .km-footer-newsletter-inner { flex-direction: column; align-items: flex-start; }
  body.kikimeow .km-nl-form { max-width: 100%; width: 100%; }
  body.kikimeow .km-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  body.kikimeow .km-footer-brand { grid-column: 1 / -1; }
  body.kikimeow .km-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  body.kikimeow .km-hero .elementor-heading-title { font-size: 32px !important; }
}

/* ============ Enhanced single-product page ============ */
body.kikimeow .km-size-care h3 { font-size: 18px; margin: 18px 0 8px; font-family: 'Poppins', sans-serif; }
body.kikimeow .km-size-care p { font-size: 15px; color: var(--km-ink-soft); margin: 0 0 10px; }
body.kikimeow .km-size-care ul { margin: 0 0 10px; padding-left: 20px; }
body.kikimeow .km-size-care li { font-size: 15px; color: var(--km-ink-soft); margin-bottom: 4px; }
body.kikimeow .km-size-care-note { font-size: 14px; color: var(--km-teal); font-weight: 600; margin-top: 6px; }

/* ============ Clean content page template ============ */
body.kikimeow .km-clean-main { font-family: 'Nunito', sans-serif; color: var(--km-ink); }
body.kikimeow .km-clean-hero { background: var(--km-cream); padding: 72px 24px 54px; text-align: center; }
body.kikimeow .km-clean-hero-inner { max-width: 900px; margin: 0 auto; }
body.kikimeow .km-clean-hero h1 { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 800; color: var(--km-ink); margin: 0 0 14px; line-height: 1.15; }
body.kikimeow .km-clean-subtitle { font-size: 18px; color: var(--km-ink-soft); margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.55; }
body.kikimeow .km-clean-content { padding: 60px 24px 80px; background: #fff; }
body.kikimeow .km-clean-wrap { max-width: 920px; margin: 0 auto; }
body.kikimeow .km-clean-wrap h2 { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color: var(--km-ink); margin: 48px 0 16px; }
body.kikimeow .km-clean-wrap h3 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--km-ink); margin: 30px 0 10px; }
body.kikimeow .km-clean-wrap p { font-size: 16px; line-height: 1.7; color: var(--km-ink-soft); margin: 0 0 16px; }
body.kikimeow .km-clean-wrap ul,
body.kikimeow .km-clean-wrap ol { margin: 0 0 20px; padding-left: 22px; }
body.kikimeow .km-clean-wrap li { font-size: 16px; line-height: 1.7; color: var(--km-ink-soft); margin-bottom: 8px; }
body.kikimeow .km-clean-wrap a { color: var(--km-teal); text-decoration: underline; }
body.kikimeow .km-clean-wrap a:hover { color: var(--km-coral); }
body.kikimeow .km-clean-updated { font-size: 14px; color: #999; margin-top: 40px; font-style: italic; }

body.kikimeow .km-clean-lead { font-size: 18px; line-height: 1.7; color: var(--km-ink); margin-bottom: 28px; }
body.kikimeow .km-clean-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
body.kikimeow .km-clean-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 32px 0; }
body.kikimeow .km-clean-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
body.kikimeow .km-clean-card h3 { margin-top: 0 !important; }
body.kikimeow .km-clean-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--km-cream); color: var(--km-teal); font-size: 22px; margin-bottom: 14px; }
body.kikimeow .km-clean-card p { margin-bottom: 0; }
body.kikimeow .km-clean-highlight { background: var(--km-cream); border-left: 4px solid var(--km-coral); padding: 22px 26px; border-radius: 0 12px 12px 0; margin: 28px 0; }
body.kikimeow .km-clean-highlight p { margin: 0; font-size: 17px; color: var(--km-ink); }

/* Contact page */
body.kikimeow .km-clean-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
body.kikimeow .km-clean-contact-info { display: flex; flex-direction: column; gap: 18px; }
body.kikimeow .km-clean-contact-info .km-clean-card { padding: 22px 24px; }
body.kikimeow .km-clean-contact-info h4 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; margin: 0 0 6px; }
body.kikimeow .km-clean-contact-info p { font-size: 15px; margin: 0; }
body.kikimeow .km-clean-wrap .wpcf7 { background: var(--km-cream); padding: 32px; border-radius: 16px; }
body.kikimeow .km-clean-wrap .wpcf7-form label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--km-ink); }
body.kikimeow .km-clean-wrap .wpcf7-form input[type=text],
body.kikimeow .km-clean-wrap .wpcf7-form input[type=email],
body.kikimeow .km-clean-wrap .wpcf7-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; font-family: 'Nunito', sans-serif; margin-bottom: 14px; background: #fff; }
body.kikimeow .km-clean-wrap .wpcf7-form input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--km-coral);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 28px;
  height: 46px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
body.kikimeow .km-clean-wrap .wpcf7-form input[type=submit]:hover { background: var(--km-coral-dark); }
body.kikimeow .km-clean-wrap .wpcf7-not-valid-tip { font-size: 13px; color: #C0392B; }

@media (max-width: 767px) {
  body.kikimeow .km-clean-hero { padding: 52px 20px 38px; }
  body.kikimeow .km-clean-hero h1 { font-size: 32px; }
  body.kikimeow .km-clean-grid,
  body.kikimeow .km-clean-grid-2,
  body.kikimeow .km-clean-contact { grid-template-columns: 1fr; }
  body.kikimeow .km-clean-wrap .wpcf7 { padding: 22px; }
}

body.kikimeow .km-specs { margin: 14px 0 4px; padding: 14px 16px; background: var(--km-surface); border: 1px solid var(--km-line); border-radius: var(--km-radius-sm); }
body.kikimeow .km-specs-label { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--km-ink-muted); margin-bottom: 8px; }
body.kikimeow .km-specs ul { list-style: none; margin: 0; padding: 0; }
body.kikimeow .km-specs li { font-size: 14px; color: var(--km-ink-soft); padding: 3px 0; }
body.kikimeow .km-specs li strong { color: var(--km-ink); }

body.kikimeow .km-related-rail { background: var(--km-cream); margin-top: 8px; clear: both; width: 100%; display: block; }
body.kikimeow .km-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Force Elementor icon-box (and any Elementor) FA5 icons to render with Bridge's bundled font */
body.kikimeow .elementor-icon-box-icon i.fas,
body.kikimeow .elementor-icon-box-icon i.fa,
body.kikimeow .elementor-view-default i.fas,
body.kikimeow .elementor-icon i.fas {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

body.kikimeow .km-related-card { display: block; background: var(--km-white); border: 1px solid var(--km-line); border-radius: var(--km-radius); overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
body.kikimeow .km-related-card:hover { transform: translateY(-4px); box-shadow: var(--km-shadow); }
body.kikimeow .km-related-thumb { display: block; height: 130px; background-size: cover; background-position: center; background-color: var(--km-surface); }
body.kikimeow .km-related-title { display: block; font-size: 13px; font-weight: 600; color: var(--km-ink); padding: 12px 12px 4px; line-height: 1.35; }
body.kikimeow .km-related-price { display: block; padding: 0 12px 14px; font-weight: 700; color: var(--km-coral); font-size: 15px; }

body.kikimeow .km-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--km-white); border-top: 1px solid var(--km-line);
  box-shadow: 0 -8px 30px rgba(28,33,38,.12);
  transform: translateY(110%); transition: transform .25s ease;
}
body.kikimeow .km-sticky-bar.show { transform: translateY(0); }
body.kikimeow .km-sticky-bar.flash { background: var(--km-coral-light); }
body.kikimeow .km-sticky-inner { max-width: 1140px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
body.kikimeow .km-sticky-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--km-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.kikimeow .km-sticky-price { font-weight: 700; color: var(--km-coral); font-size: 17px; }
body.kikimeow .km-sticky-btn { background: var(--km-coral); color: #fff; border: none; border-radius: 10px; padding: 13px 26px; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
body.kikimeow .km-sticky-btn:hover { background: var(--km-coral-dark); }

@media (max-width: 767px) {
  body.kikimeow .km-related-grid { grid-template-columns: repeat(2, 1fr); }
  body.kikimeow .km-sticky-title { font-size: 13px; }
  body.kikimeow .km-sticky-price { font-size: 15px; }
  body.kikimeow .km-sticky-btn { padding: 11px 18px; font-size: 14px; }
}

/* ============ Elementor home engagement block (countdown / testimonials / pricing) ============ */
body.kikimeow .km-engagement { background: var(--km-cream); }
body.kikimeow .km-engagement .elementor-section .elementor-container { max-width: 1140px !important; }
body.kikimeow .km-engagement .elementor-widget-heading .elementor-heading-title { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; }

/* Countdown */
body.kikimeow .km-engagement .qodef-qi-countdown { justify-content: center !important; }
body.kikimeow .km-engagement .qodef-qi-countdown .qodef-digit-wrapper { background: var(--km-white) !important; border: 1px solid var(--km-line) !important; border-radius: 12px !important; box-shadow: var(--km-shadow) !important; }
body.kikimeow .km-engagement .qodef-qi-countdown .qodef-digit { color: var(--km-coral) !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; }
body.kikimeow .km-engagement .qodef-qi-countdown .qodef-label { color: var(--km-ink) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }

/* Testimonials carousel */
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_testimonials_slider .qodef-qi-testimonials-slider .swiper-slide {
  background: var(--km-white) !important; border: 1px solid var(--km-line) !important; border-radius: var(--km-radius) !important;
  padding: 28px 26px !important; box-shadow: var(--km-shadow) !important;
}
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_testimonials_slider .qodef-e-text { color: var(--km-ink) !important; font-size: 15px !important; line-height: 1.6 !important; }
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_testimonials_slider .qodef-e-author-name { color: var(--km-ink) !important; font-weight: 700 !important; }
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_testimonials_slider .qodef-e-author-job { color: var(--km-teal) !important; }

/* Pricing tables ("ways to save") */
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_pricing_table .qodef-qi-pricing-table {
  background: var(--km-white) !important; border: 1px solid var(--km-line) !important; border-radius: var(--km-radius) !important; box-shadow: var(--km-shadow) !important;
}
body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_pricing_table .qodef-qi-pricing-table.qodef-status--featured { border: 2px solid var(--km-coral) !important; }
body.kikimeow .km-engagement .qodef-qi-pricing-table .qodef-m-title { color: var(--km-ink) !important; font-weight: 700 !important; }
body.kikimeow .km-engagement .qodef-qi-pricing-table .qodef-m-price-value { color: var(--km-coral) !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; }
body.kikimeow .km-engagement .qodef-qi-pricing-table .qodef-m-label { background: var(--km-coral) !important; color: #fff !important; }
body.kikimeow .km-engagement .qodef-qi-pricing-table .qodef-m-button a { background: var(--km-coral) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important; }
body.kikimeow .km-engagement .qodef-qi-pricing-table .qodef-m-button a:hover { background: var(--km-coral-dark) !important; }

@media (max-width: 767px) {
  body.kikimeow .km-engagement .elementor-widget-qi_addons_for_elementor_pricing_table { margin-bottom: 16px !important; }
}

/* Product page custom tabs (Specs / Shipping & Returns) */
body.kikimeow .km-tab-specs table { width: 100%; max-width: 520px; border-collapse: collapse; margin-bottom: 12px; }
body.kikimeow .km-tab-specs th, body.kikimeow .km-tab-specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--km-line); font-size: 14px; }
body.kikimeow .km-tab-specs th { color: var(--km-ink); font-weight: 600; width: 38%; background: var(--km-cream); }
body.kikimeow .km-tab-specs td { color: var(--km-ink); }
body.kikimeow .km-tab-specs .km-tab-note { color: var(--km-teal); font-size: 14px; margin-top: 6px; }
body.kikimeow .km-tab-shipping h4 { margin: 0 0 6px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--km-ink); }
body.kikimeow .km-tab-shipping p { margin: 0 0 12px; color: var(--km-ink); font-size: 14px; line-height: 1.6; }
body.kikimeow .km-tab-shipping a { color: var(--km-coral); font-weight: 600; }

/* ============ v2.0.18 — vertical centering normalizer ============ */
/* Root cause of "text sits too low" buttons: the element sizes itself with
   padding + line-height (or a fixed height + padding under border-box), so the
   text's ink box is pushed down by the half-leading. Anything that renders a
   single line of centered text is converted to flex centering + line-height:1,
   which is independent of font metrics and of any inherited line-height. */
body.kikimeow .km-hero-badge,
body.kikimeow .km-card-badge,
body.kikimeow .km-filter-bar a,
body.kikimeow .km-card-atc,
body.kikimeow .km-nl-form button,
body.kikimeow .wpcf7-form input[type="submit"],
body.kikimeow .wpcf7-form input[type="button"],
body.kikimeow.woocommerce .woocommerce-Button,
body.kikimeow.woocommerce a.button,
body.kikimeow.woocommerce button.button,
body.kikimeow .button,
body.kikimeow .qbutton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Buttons that must stay full width keep their block/inline-block behaviour
   but still center their label on both axes. */
body.kikimeow .km-card-atc,
body.kikimeow.woocommerce a.button.alt,
body.kikimeow.woocommerce button.button.alt { line-height: 1 !important; }

/* Product page Add to cart: Bridge sets height:38px + line-height:35px while our
   rule adds 16px vertical padding (border-box) => content box 6px and the label
   spilled 6px below the pill. Release the fixed height and center with flex. */
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 14px 36px !important;
  min-height: 46px !important;
}

/* Keep the quantity field the same height as the Add to cart button */
body.kikimeow.woocommerce div.product form.cart div.quantity { height: 46px !important; }
body.kikimeow.woocommerce div.product form.cart div.quantity .qty { height: 46px !important; line-height: 1 !important; }
body.kikimeow.woocommerce div.product form.cart .quantity .qty { display: inline-flex; align-items: center; }

/* WooCommerce blocks (cart / checkout) — labels use their own text wrapper */
body.kikimeow .wc-block-components-button__text { line-height: 1 !important; }
body.kikimeow .wc-block-components-button { align-items: center !important; justify-content: center !important; }


/* ============ v2.0.19 — homepage modelled on Tuft + Paw ============ */
/* Module order: promo bar -> hero -> trust strip -> deal -> most-loved rail
   -> category squares -> brand story -> why-us -> new-in rail -> guarantee. */

/* Hero facts line (replaces the old fabricated rating) */
body.kikimeow .km-hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--km-ink-soft);
}
body.kikimeow .km-hero-facts .km-dot { color: var(--km-coral); }

/* ---- Product rail (Most-loved / New in) ---- */
body.kikimeow .km-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
body.kikimeow .km-sec-head-left h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--km-ink);
  text-transform: none;
}
body.kikimeow .km-sec-head-left p {
  margin: 0;
  color: var(--km-ink-soft);
  font-size: 15px;
}
body.kikimeow .km-rail-nav { display: flex; align-items: center; gap: 10px; }
body.kikimeow .km-sec-link {
  font-weight: 700;
  font-size: 14px;
  color: var(--km-teal);
  text-decoration: none;
  white-space: nowrap;
}
body.kikimeow .km-sec-link:hover { color: var(--km-teal-dark); }
body.kikimeow .km-rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--km-line);
  background: var(--km-white);
  color: var(--km-ink);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
body.kikimeow .km-rail-btn:hover { background: var(--km-cream); border-color: var(--km-coral); }

body.kikimeow .km-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.kikimeow .km-rail::-webkit-scrollbar { display: none; }

body.kikimeow .km-loved {
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  background: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.kikimeow .km-loved:hover { transform: translateY(-4px); box-shadow: var(--km-shadow-lg); }

body.kikimeow .km-loved-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--km-surface);
  overflow: hidden;
}
body.kikimeow .km-loved-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
body.kikimeow .km-loved:hover .km-loved-media img { transform: scale(1.04); }

body.kikimeow .km-loved-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.kikimeow .km-loved-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.kikimeow .km-loved-title a { color: var(--km-ink); text-decoration: none; }
body.kikimeow .km-loved-title a:hover { color: var(--km-teal); }

body.kikimeow .km-loved-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--km-ink-muted);
}
body.kikimeow .km-loved-rating .km-stars { color: #C6F24E; letter-spacing: 1px; }

body.kikimeow .km-loved-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--km-ink);
  margin-top: auto;
  margin-bottom: 12px;
}
body.kikimeow .km-loved-price del { color: var(--km-ink-muted); font-weight: 600; font-size: 14px; }
body.kikimeow .km-loved-price ins { text-decoration: none; color: var(--km-coral); }

body.kikimeow .km-loved-atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 40px;
  padding: 0 18px;
  width: 100%;
  background: var(--km-ink);
  color: var(--km-white);
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease;
}
body.kikimeow .km-loved-atc:hover { background: var(--km-coral); color: var(--km-white); }

/* ---- Category squares: see `body.kikimeow .km-cats-grid` further down this file.
   The old `.km-cats` / `.km-cat-img` / `.km-cat-name` / `.km-cat-count` rules that lived
   here were removed with the 6-tile white-card variant they styled. They had to go rather
   than be left in place: they also declared `body.kikimeow .km-cat` (a 1px border and a
   white background), which the new tile reuses as its class name — the leftover border
   would have shown on every new tile. ---- */

/* ---- Brand story ---- */
body.kikimeow .km-story { background: var(--km-cream); padding: 64px 0; }
body.kikimeow .km-story-inner { max-width: 760px; text-align: center; }
body.kikimeow .km-story h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--km-ink);
  margin: 0 0 18px;
  text-transform: none;
}
body.kikimeow .km-story p {
  color: var(--km-ink-soft);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 14px;
}
body.kikimeow .km-story-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--km-teal);
  text-decoration: none;
}
body.kikimeow .km-story-link:hover { color: var(--km-teal-dark); }

/* ---- Why us ---- */
body.kikimeow .km-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
body.kikimeow .km-why-card {
  background: var(--km-surface);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  padding: 24px 22px;
}
body.kikimeow .km-why-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--km-coral);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
body.kikimeow .km-why-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--km-ink);
  margin: 0 0 8px;
  text-transform: none;
}
body.kikimeow .km-why-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--km-ink-soft);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  body.kikimeow .km-loved { flex: 0 0 calc((100% - 40px) / 3); }
  body.kikimeow .km-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kikimeow .km-sec-head-left h2 { font-size: 26px; }
}

@media (max-width: 767px) {
  body.kikimeow .km-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.kikimeow .km-sec-head-left h2 { font-size: 23px; }
  body.kikimeow .km-rail { gap: 14px; padding: 4px 4px 12px; }
  body.kikimeow .km-loved { flex: 0 0 68%; }
  body.kikimeow .km-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body.kikimeow .km-story { padding: 44px 0; }
  body.kikimeow .km-story h2 { font-size: 25px; }
  body.kikimeow .km-rail-nav { width: 100%; justify-content: space-between; }
}

/* ============================================================
   v2.1.0 — product description accordion opens by default
   (see js/product-tabs.js; Bridge hides every panel inline)
   ============================================================ */
.q_accordion_holder.woocommerce-accordion > .title-holder.km-acc-open {
  background: var(--km-coral-light, #EFF2F0);
  color: var(--km-ink, #101418);
}
.q_accordion_holder.woocommerce-accordion > .title-holder.km-acc-open .tab-title {
  color: var(--km-ink, #101418);
}
.q_accordion_holder.woocommerce-accordion > .title-holder.km-acc-open::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--km-coral, #262D34);
}

/* Long-form product copy: readable measure + real headings */
.km-pd { max-width: 78ch; }
.km-pd .km-lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--km-ink, #101418);
  margin: 0 0 22px;
}
.km-pd h2 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 30px 0 12px;
  color: var(--km-ink, #101418);
}
.km-pd ul { margin: 0 0 8px; padding-left: 20px; }
.km-pd li { line-height: 1.7; margin-bottom: 8px; }
.km-pd p { line-height: 1.75; }
.km-pd table.km-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-size: 0.9375rem;
}
.km-pd table.km-specs th,
.km-pd table.km-specs td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E1E6E2;
  vertical-align: top;
}
.km-pd table.km-specs th {
  width: 34%;
  font-weight: 600;
  color: #383F47;
  background: #F7F8F7;
}
@media (max-width: 680px) {
  .km-pd .km-lead { font-size: 1rem; }
  .km-pd table.km-specs th { width: 42%; }
}
/* ============ v2.1.1 — "View cart" link was sliced off the card ============ */
/* After a successful AJAX add-to-cart WooCommerce appends
   <a class="added_to_cart wc-forward">View cart</a> right after the button.
   Both are inline-level boxes: the button is `display:flex; width:100%` (220px)
   and the link is `inline-block` at 118px. They fought over one line, 338px of
   content overflowed the 220px box, and the link landed at x = -22px — outside
   the card — where .km-card-inner's `overflow:hidden` sliced it to a sliver.
   The button also jumped 26px taller. Force a column so the link always stacks
   underneath the pill, and give it its own visible affordance. */
body.kikimeow .km-product-card .km-card-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px;
}
body.kikimeow .km-product-card .km-card-actions > a.km-card-atc {
  width: 100% !important;
  flex: 0 0 auto;
}

/* The link itself: a solid coral pill with a tick, so it reads as the clear
   next step and cannot be mistaken for a stray box. */
body.kikimeow .km-product-card .km-card-actions a.added_to_cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 36px;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  border: 0;
  border-radius: 999px;
  background: var(--km-coral);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1 !important;
  text-decoration: none !important;
  /* WooCommerce core uppercases .added_to_cart; the pill above it is sentence
     case, so two stacked buttons would disagree. Match the button. */
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.kikimeow .km-product-card .km-card-actions a.added_to_cart::before {
  content: "\2713\00a0";
  font-weight: 700;
}
body.kikimeow .km-product-card .km-card-actions a.added_to_cart:hover,
body.kikimeow .km-product-card .km-card-actions a.added_to_cart:focus {
  background: var(--km-coral-dark);
  color: #fff !important;
}

/* The button keeps its teal "added" state, but must not stretch to fill the
   column now that there are two children. */
body.kikimeow .km-product-card a.km-card-atc.added { background: var(--km-teal); }

/* Related-products rail uses its own anchor; same stacking contract. */
body.kikimeow .km-loved-card .km-loved-actions,
body.kikimeow .km-loved-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}


/* ============================================================
   v2.2.0 — PDP summary brandization (Wild One style: left-aligned,
   intentional) + Add-to-cart contrast fix.
   Root cause of the "plain / not-centered" feel: the .summary content
   fell back to Bridge default (17px uppercase left-shifted title, muted
   price). We brandize it so it reads as designed, not broken.
   ATC buttons were coral #262D34 on white text = 2.9:1 (fails WCAG AA).
   Switch to brand teal #4A5560 on white = 4.56:1 (passes AA).
   ============================================================ */
body.kikimeow.woocommerce div.product .summary {
  text-align: left !important;
}
body.kikimeow.woocommerce div.product .summary .product_title,
body.kikimeow.woocommerce div.product .entry-summary .product_title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 27px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--km-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 14px !important;
  text-wrap: balance;
}
body.kikimeow.woocommerce div.product .summary .price {
  font-family: 'Poppins', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--km-teal) !important;
  margin: 0 0 18px !important;
}
body.kikimeow.woocommerce div.product .summary .price del,
body.kikimeow.woocommerce div.product .summary .price ins {
  color: var(--km-ink-soft) !important;
  font-weight: 700 !important;
}
body.kikimeow.woocommerce div.product .summary .woocommerce-product-details__short-description,
body.kikimeow.woocommerce div.product .summary .description {
  color: var(--km-ink-soft) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 0 22px !important;
}
/* --- Add to cart: teal bg + white text (AA contrast) --- */
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--km-teal) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px 42px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  min-width: 230px;
  min-height: 50px !important;
}
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--km-teal-dark) !important;
  color: #fff !important;
}
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button.added {
  background: var(--km-teal-dark) !important;
}
body.kikimeow.woocommerce div.product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
  margin: 0 0 14px !important;
}
/* --- Sticky ATC bar button: same contrast fix --- */
body.kikimeow .km-sticky-btn {
  background: var(--km-teal) !important;
  color: #fff !important;
}
body.kikimeow .km-sticky-btn:hover {
  background: var(--km-teal-dark) !important;
}

/* ============================================================
   v2.3.0 — Product gallery & PhotoSwipe lightbox (2026-09-18)
   White lightbox so sparse supplier images do not float on black.
   ============================================================ */
body.kikimeow .pswp__bg{background:#FFFFFF !important;opacity:1 !important}
body.kikimeow .pswp__container,
body.kikimeow .pswp__item{background:#FFFFFF !important}
body.kikimeow .pswp__counter{color:#1C2126 !important}
body.kikimeow .pswp__top-bar{background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,0)) !important}
/* sprite buttons are white -> invert to dark for white bg */
body.kikimeow .pswp__button{filter:invert(1)}
/* brand coral arrows: keep as-is on white */
body.kikimeow .pswp__button--arrow--left,
body.kikimeow .pswp__button--arrow--right{filter:none !important}
/* main gallery images always sit on white, never stretch */
body.kikimeow.woocommerce div.product div.images{background:#fff}
body.kikimeow.woocommerce div.product div.images img{object-fit:contain;background:#fff}

/* ============================================================
   v2.5.0 — Gallery thumbnail carousel (2026-09-18)
   Main image on top + horizontally-scrollable thumbnail strip
   below, with prev/next arrow nav and a "View all N photos"
   button that opens the PhotoSwipe fullscreen gallery.
   ============================================================ */
.km-thumbs-wrap{position:relative;margin-top:14px}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs{
  display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:4px 0;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  -ms-overflow-style:none;scrollbar-width:none;
}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{display:none}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs li{
  float:none;width:auto;flex:0 0 auto;list-style:none;line-height:0;
}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs img{
  width:84px;height:84px;object-fit:cover;background:#fff;
  border:2px solid transparent;border-radius:12px;cursor:pointer;
  opacity:.6;scroll-snap-align:start;
  transition:opacity .15s ease,border-color .15s ease,transform .15s ease;
}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  opacity:1;border-color:#4A5560;
}
body.kikimeow.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:.9;transform:translateY(-2px);
}
/* arrow nav buttons */
.km-thumb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(28,33,38,.82);color:#fff;font:600 18px/34px system-ui,sans-serif;
  text-align:center;cursor:pointer;z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:background .15s ease,opacity .15s ease;
}
.km-thumb-nav:hover{background:#4A5560}
.km-thumb-nav.prev{left:-4px}
.km-thumb-nav.next{right:-4px}
.km-thumb-nav.is-hidden{display:none}
/* view all */
.km-view-all{
  display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;
  padding:8px 16px;border:1.5px solid #4A5560;border-radius:24px;
  background:#fff;color:#4A5560;font:600 13px/1 'Nunito',sans-serif;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.km-view-all:hover{background:#4A5560;color:#fff}
/* ============ v2.6.0 — Site-wide layout QA pass (2026-09-18) ============ */

/* --- 1. Mobile PDP: stack gallery above summary.
        Root cause: Woo/Bridge two-column float stayed side-by-side at
        390px (each column squeezed to 147px). --- */
@media (max-width: 768px) {
  body.kikimeow.woocommerce div.product div.images,
  body.kikimeow.woocommerce div.product div.summary {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.kikimeow.woocommerce div.product div.summary {
    margin-top: 18px;
  }
  body.kikimeow.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
  }
}

/* --- 2. Shop cards: uniform 1:1 cover images (supplier posters / size
        charts / white-void photos currently render at mixed ratios). --- */
body.kikimeow ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #fff;
}
body.kikimeow ul.products li.product {
  transition: transform 0.18s ease;
}
body.kikimeow ul.products li.product:hover {
  transform: translateY(-3px);
}
/* clamp card titles to 2 lines so grids stay level */
body.kikimeow ul.products li.product .woocommerce-loop-product__title,
body.kikimeow ul.products li.product h2.woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em;
}

/* --- 3. Buy button: teal glow to match teal fill (was coral glow on
        teal button — visually noisy). --- */
body.kikimeow.woocommerce div.product form.cart .single_add_to_cart_button {
  box-shadow: 0 8px 24px rgba(74, 85, 96, 0.30) !important;
}

/* --- 4. Mobile: tighten archive hero + page container paddings
        (breadcrumb sat ~253px down on phones). --- */
@media (max-width: 768px) {
  body.kikimeow .km-shop-hero {
    padding: 30px 20px 22px !important;
    margin-bottom: 18px !important;
  }
  body.kikimeow .container_inner.default_template_holder {
    padding-top: 10px !important;
  }
  body.kikimeow .content_inner {
    padding-top: 6px !important;
  }
}

/* --- 5. PDP description accordion: white card + hairline border to
        match the rest of the page cards (was warm grey slab). --- */
body.kikimeow .title-holder.description_tab {
  background: #fff !important;
  border: 1px solid #eee;
}
body.kikimeow .accordion_content.description_content {
  background: #fff !important;
  border: 1px solid #eee;
  border-top: none;
}

/* ============ v2.7.0 (2026-09-18) — By Type mega menu + breadcrumb-to-top + no zoom magnifier ============ */

/* 1) Breadcrumb hugs the top on commerce pages (kill Bridge content top padding) */
body.kikimeow.woocommerce-page .content_inner {
  padding-top: 0 !important;
}
body.kikimeow.woocommerce-page .content .container .container_inner.default_template_holder {
  padding-top: 0 !important;
}
body.kikimeow .km-breadcrumb,
body.kikimeow .woocommerce-breadcrumb.km-breadcrumb {
  margin: 14px auto 0 !important;
}

/* 2) Remove the product-image zoom magnifier (lightbox stays via prettyPhoto) */
body.kikimeow .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* 3) "By Type" mega menu — desktop header only */
@media screen and (min-width: 1001px) {

  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 {
    position: relative;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second {
    width: 680px !important;
    left: -20px !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner {
    width: 680px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(28, 33, 38, 0.14) !important;
    border: 1px solid #DEE3DF !important;
    overflow: hidden;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px 14px !important;
    width: 100% !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    text-align: left !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    float: none !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li > a {
    display: block !important;
    height: auto !important;
    line-height: 1.35 !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #1C2126 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li > a:hover,
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li > a:focus {
    background: #F1F3F1 !important;
    color: #262D34 !important;
  }
  /* All Cat Supplies = full-width teal chip header row */
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li#nav-menu-item-577 {
    grid-column: 1 / -1 !important;
    margin-bottom: 6px !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li#nav-menu-item-577 > a {
    background: #4A5560 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li#nav-menu-item-577 > a:hover,
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li#nav-menu-item-577 > a:focus {
    background: #3A444D !important;
    color: #FFFFFF !important;
  }
}

/* ============ v2.7.1 (2026-09-18) — mega panel readability fixes ============ */
/* Bridge paints .second .inner ul with #191D22 and li with 190px width / 15px padding / uppercase */
@media screen and (min-width: 1001px) {
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul {
    background-color: #FFFFFF !important;
    background-image: none !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li {
    padding: 0 !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li > a {
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li > a > span {
    color: inherit !important;
  }
}

/* ============ v2.8.0 (2026-09-20) — UX audit: CTA + footer contrast, hide CJ SKU ============ */
/* Brand teal that actually passes WCAG AA: #3A444D on white = 5.9:1 (the old
   #4A5560 was only 4.20:1 and failed at 16px bold). */
:root{
  --km-cta:#3A444D;
  --km-cta-hover:#3A444D;
  --km-mint:#4A5560;
}

/* UX-01 cart "Proceed to Checkout": teal-on-charcoal 2.86:1 + square + weight 400.
   UX-05 "Place Order": coral-on-white 2.57:1.
   Both Woo *block* buttons that the child theme's pill rules never reached.
   The --full-width variant carries an extra class, so Woo's rule is (0,2,0);
   chaining .wc-block-components-button (+ .contained) lifts ours above it. */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button--full-width.contained,
.wc-block-components-button.wc-block-checkout__place-order-button{
  background:#3A444D !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  font-weight:700 !important;
  font-size:16px !important;
}
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button--full-width.contained:hover,
.wc-block-checkout__place-order-button:hover{
  background:#3A444D !important;
}

/* NEW (found during fix): the add-to-cart button was #4A5560 = 4.20:1 (fail). */
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button{
  background:#3A444D !important;
}
.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button:hover{
  background:#3A444D !important;
}

/* UX-03 newsletter button was identical to its coral container (1:1, invisible).
   Dark charcoal fill reads at 5.52:1 against the coral box, 14:1 for its text. */
.km-footer-newsletter button[type="submit"]{
  background:#1C2126 !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  font-weight:700 !important;
}

/* UX-18 footer links teal-on-#1C2126 was 3.37:1. Light mint teal = 7.6:1 (AAA). */
.km-footer a,
.km-footer .km-footer-col a{
  color:#4A5560 !important;
}
.km-footer a:hover{
  color:#FFFFFF !important;
}

/* UX-04 hide the CJ supplier SKU string on the storefront. The SKU value stays
   in the DB (substr($sku,2)=>CJ pid keeps auto-fulfilment working). */
.product_meta .sku_wrapper{
  display:none !important;
}
/* ==========================================================================
   KiKi Meow v3.0 (2026-09-21) — Zooplus-style redesign, phase 1
   1. Footer bottom navigation (native WP menus, 5 columns)
   2. Magazine (blog) index + article layout
   Uses the existing brand variables from style.css :root.
   ========================================================================== */

/* ---------- Footer: 5-column bottom navigation ---------- */
.km-footer-main { background: var(--km-white); }
.km-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 22px 8px;
}
.km-footer-col h4 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--km-ink);
  margin-bottom: 12px;
}
.km-footer-col .km-footer-menu,
.km-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.km-footer-col .km-footer-menu li,
.km-footer-col ul li { margin: 0; padding: 0; }
.km-footer-col .km-footer-menu a,
.km-footer-col ul a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--km-ink-muted);
  text-decoration: none;
}
.km-footer-col .km-footer-menu a:hover { color: var(--km-coral-dark); }

.km-footer-brand .km-footer-logo {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--km-ink);
  text-decoration: none;
}
/* The wordmark is now the real SVG (footer.php), not a text node. Fixed height
   so it can never outgrow the brand column (281px at 1280px); object-fit keeps
   the 262:64 ratio if max-width ever clamps it on a narrow screen. */
body.kikimeow .km-footer-brand .km-footer-logo img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}
.km-footer-brand p { font-size: 13px; color: var(--km-ink-muted); margin: 10px 0 12px; }
.km-footer-social { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Icon buttons, not text pills — 44x44 is the minimum tap target, and three
   icons fit the brand column on one row where three labelled pills wrapped. */
.km-footer-social a.km-fs-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 0;
  color: var(--km-ink);
  background: var(--km-surface);
  border: 1px solid var(--km-line);
  border-radius: 12px;
  text-decoration: none;
}
.km-footer-social a.km-fs-ic:hover { background: var(--km-coral); color: #fff; }
.km-footer-social a.km-fs-ic svg { display: block; width: 20px; height: 20px; }

.km-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.km-footer-legal a { color: var(--km-ink-muted); text-decoration: none; font-size: 12.5px; }
.km-footer-legal a:hover { color: var(--km-coral-dark); }

/* ---------- Magazine: index ---------- */
.km-mag { padding: 10px 0 40px; }
.km-mag-head { max-width: 780px; padding: 22px 0 6px; }
.km-mag-head h1 {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  margin: 0;
}
.km-mag-head p { color: var(--km-ink-muted); font-size: 14.5px; margin: 10px 0 0; }
.km-mag-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.km-mag-cats a {
  background: var(--km-coral-light);
  border: 1px solid var(--km-line);
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--km-ink);
  text-decoration: none;
}
.km-mag-cats a.is-active,
.km-mag-cats a:hover { background: var(--km-coral); border-color: var(--km-coral); color: #fff; }

.km-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.km-card {
  background: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.km-card-featured { grid-column: span 2; }
.km-card-thumb {
  display: block;
  background: var(--km-coral-light);
  height: 170px;
  overflow: hidden;
}
.km-card-featured .km-card-thumb { height: 300px; }
.km-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--km-coral-light);
}
.km-card-body { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.km-card-cat {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--km-teal);
}
.km-card-body h2 { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; }
.km-card-featured .km-card-body h2 { font-size: 22px; }
.km-card-body h2 a { color: var(--km-ink); text-decoration: none; }
.km-card-body h2 a:hover { color: var(--km-coral-dark); }
.km-card-body p { font-size: 13.5px; color: var(--km-ink-muted); margin: 0; }
.km-card-meta { font-size: 12px; color: var(--km-ink-muted); margin-top: auto; padding-top: 8px; }

/* ---------- Magazine: article ---------- */
.km-post { max-width: 760px; margin: 0 auto; padding: 22px 0 10px; }
.km-post-cat {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--km-teal);
}
.km-post-title {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin: 8px 0;
}
.km-post-meta { font-size: 13px; color: var(--km-ink-muted); }
.km-post-hero {
  margin: 18px 0 22px;
  border-radius: var(--km-radius);
  overflow: hidden;
  background: var(--km-coral-light);
}
.km-post-hero img { width: 100%; height: auto; display: block; }
.km-post-body { font-size: 16.5px; line-height: 1.75; color: #333; }
.km-post-body h2 { font-size: 19px; font-weight: 800; margin: 24px 0 8px; }
.km-post-body ul { padding-left: 22px; margin: 0 0 16px; }
.km-post-body li { margin-bottom: 6px; }
.km-post-body img { max-width: 100%; height: auto; border-radius: var(--km-radius-sm); }
.km-post-cta {
  margin: 26px 0;
  padding: 18px 20px;
  border-radius: var(--km-radius-sm);
  background: var(--km-coral-light);
  border: 1px solid var(--km-line);
  font-size: 14.5px;
}
.km-post-cta b { color: var(--km-coral-dark); }
.km-btn {
  display: inline-block;
  margin-left: 10px;
  background: var(--km-teal);
  color: #fff;
  border-radius: 22px;
  padding: 9px 20px;
  font-weight: 700;
  text-decoration: none;
}
.km-btn:hover { background: var(--km-teal-dark); color: #fff; }
.km-related { max-width: 1240px; margin: 34px auto 0; }
.km-related h2 { font-size: 21px; font-weight: 800; margin-bottom: 14px; }

/* ---------- Magazine: homepage block ---------- */
.km-mag-block { max-width: 1240px; margin: 34px auto 0; padding: 0 22px; }
.km-mag-block .km-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 12px;
}
.km-mag-block h2 { font-size: 21px; font-weight: 800; margin: 0; }
.km-mag-block .km-seeall { color: var(--km-coral-dark); font-weight: 700; font-size: 14px; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .km-footer-cols { grid-template-columns: repeat(3, 1fr); }
  .km-mag-grid { grid-template-columns: repeat(2, 1fr); }
  .km-card-featured { grid-column: span 2; }
}
@media (max-width: 900px) {
  .km-mag-grid { grid-template-columns: 1fr; }
  .km-card-featured { grid-column: span 1; }
  .km-card-featured .km-card-thumb { height: 230px; }
  .km-post-title { font-size: 26px; }
}
@media (max-width: 600px) {
  .km-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .km-footer-brand { grid-column: span 2; }
  .km-mag-head h1 { font-size: 26px; }
  .km-post { padding: 14px 0 0; }
}
/* ==========================================================================
   KiKi Meow v3.0.1 (2026-09-21) — footer grid specificity fix.
   The pre-existing rule `body.kikimeow .km-footer-cols` (4 columns) outranks a
   bare `.km-footer-cols`, so the 5-column Zooplus-style grid needs the same
   specificity prefix.
   ========================================================================== */

body.kikimeow .km-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 22px 8px;
}

@media (max-width: 1100px) {
  body.kikimeow .km-footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  body.kikimeow .km-footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  body.kikimeow .km-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  body.kikimeow .km-footer-brand { grid-column: span 2; }
}
/* ==========================================================================
   KiKi Meow v3.1 (2026-09-21) — header + global brand chrome.
   Note: after the brand rename the brand variables are --km-* and the
   body class is `body.kikimeow` (every rule below must keep that prefix).
   ========================================================================== */

/* ---------- 1. White nav bar (coral utility bar handled by .km-topbar) ---------- */
body.kikimeow header.page_header,
body.kikimeow .header_bottom,
body.kikimeow .header_bottom.clearfix {
  background-color: #FFFFFF !important;
  background-image: none !important;
  box-shadow: 0 1px 0 var(--km-line), 0 2px 10px rgba(28, 33, 38, .05) !important;
  border-bottom: 1px solid var(--km-line) !important;
}
body.kikimeow .header_bottom { min-height: 78px; }

/* logo: show the original colour KiKi Meow wordmark on the white nav */
body.kikimeow .q_logo img.normal,
body.kikimeow .q_logo img.dark { display: inline-block !important; opacity: 1 !important; }
body.kikimeow .q_logo img.light,
body.kikimeow .q_logo img.sticky,
body.kikimeow .q_logo img.mobile { display: none !important; opacity: 0 !important; }

/* nav menu links: dark on white, coral on hover */
body.kikimeow .main_menu > ul > li > a,
body.kikimeow .header_bottom .main_menu li a,
body.kikimeow .header_bottom .menu > li > a { color: var(--km-ink, #1C2126) !important; font-weight: 700; }
body.kikimeow .main_menu > ul > li > a:hover,
body.kikimeow .header_bottom .main_menu li a:hover { color: var(--km-coral, #262D34) !important; }
body.kikimeow .header_bottom .qode-search-opener,
body.kikimeow .header_bottom .header_cart_holder,
body.kikimeow .header_bottom .qode-cart-icon,
body.kikimeow .header_bottom .side_menu_opener,
body.kikimeow .header_bottom .header-wishlist { color: var(--km-ink, #1C2126) !important; }

/* nav links: white on coral, grey pill on hover */
body.kikimeow .main_menu ul li a,
body.kikimeow nav.main_menu > ul > li > a {
  color: #fff !important;
  font-weight: 600;
}
body.kikimeow .main_menu ul li a:hover,
body.kikimeow .main_menu ul li:hover > a {
  background: rgba(255, 255, 255, .16) !important;
  border-radius: 20px;
}
body.kikimeow .main_menu ul li.current-menu-item > a { background: rgba(255, 255, 255, .22) !important; border-radius: 20px; }

/* search field */
body.kikimeow .qode_search_form input,
body.kikimeow .header_bottom .search_field input,
body.kikimeow .qode_search_form_2 input {
  background: #fff !important;
  border-radius: 22px !important;
  color: var(--km-ink, #1C2126) !important;
}

/* cart button -> teal (brand primary action colour) */
body.kikimeow .header_cart,
body.kikimeow .header_cart_span,
body.kikimeow .shopping_cart_header_bundle,
body.kikimeow .header_bottom .widget_woocommerce-dropdown-cart .header_cart {
  background: var(--km-teal, #4A5560) !important;
  border-radius: 22px !important;
  color: #fff !important;
}
body.kikimeow .header_cart i,
body.kikimeow .header_cart .fa { color: #fff !important; }

/* ---------- 2. Actions: teal primary, coral accent ---------- */
body.kikimeow .km-cta,
body.kikimeow a.km-cta,
body.kikimeow .woocommerce a.button.alt,
body.kikimeow .woocommerce button.button.alt,
body.kikimeow .woocommerce input.button.alt,
body.kikimeow .woocommerce #respond input#submit.alt,
body.kikimeow .single_add_to_cart_button.button.alt {
  background-color: var(--km-teal, #4A5560) !important;
  border-color: var(--km-teal, #4A5560) !important;
  color: #fff !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
}
body.kikimeow .woocommerce a.button,
body.kikimeow .woocommerce button.button {
  border-radius: 24px !important;
  font-weight: 700 !important;
}
body.kikimeow .km-card-badge,
body.kikimeow .onsale {
  background: var(--km-coral, #262D34) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

/* ---------- 3. Consistent product image frame (no more mismatched crops) ---------- */
body.kikimeow .km-loved-media img,
body.kikimeow .products li img,
body.kikimeow ul.products li.product img {
  background: #fff;
  object-fit: contain;
}

/* ---------- 4. Responsive ---------- */
@media (max-width: 900px) {
  body.kikimeow .header_bottom { min-height: 64px; }
}
/* ==========================================================================
   KiKi Meow v3.2 (2026-09-21) — homepage Zooplus blocks:
   "Everything for Cats" banner, "Exclusive to KiKi Meow!" brand strip,
   Magazine block. Uses the renamed --km-* variables and body.kikimeow prefix.
   ========================================================================== */

body.kikimeow .km-catsbanner {
  margin: 34px auto 0;
  max-width: 1240px;
  padding: 0 22px;
}
body.kikimeow .km-catsbanner-tx {
  display: block;
  border-radius: 16px;
  background: #EEF9D6;
  padding: 34px 40px;
  text-decoration: none;
  min-height: 150px;
}
body.kikimeow .km-catsbanner-tx small {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--km-ink, #1C2126);
}
body.kikimeow .km-catsbanner-tx b {
  display: block;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 800;
  color: var(--km-coral-dark, #1B2127);
}
body.kikimeow .km-catsbanner-tx:hover b { color: var(--km-teal-dark, #3A444D); }

/* --- "Curated by KiKi Meow" collection medallions.
   Replaces the `.km-excl` / `.km-excl-bx` pill row: 8 invented house-brand names with line
   icons and no photos, three of which advertised ranges the store does not stock. See
   front-page.php `$km_edit` for the full rationale.
   Circular medallions are deliberate: the "Shop by category" grid above uses square
   photo tiles, so this band reads as a different component rather than a duplicate of it.
   Every source photo is natively 1:1, so the circle crops nothing. --- */
body.kikimeow .km-edit-sec { max-width: 1240px; margin: 34px auto 0; padding: 0 22px; }
body.kikimeow .km-edit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 34px;
}
body.kikimeow .km-edit-it {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 152px;
  text-align: center;
  text-decoration: none;
}
body.kikimeow .km-edit-ph {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--km-coral-light, #EFF2F0);
  box-shadow: 0 0 0 1px var(--km-line, #D7DDD9), 0 6px 16px rgba(34, 42, 49, .08);
  transition: box-shadow .22s ease, transform .22s ease;
}
body.kikimeow .km-edit-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.kikimeow .km-edit-it:hover .km-edit-ph {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--km-coral, #262D34), 0 12px 24px rgba(34, 42, 49, .16);
}
body.kikimeow .km-edit-nm { font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--km-ink, #1C2126); }
body.kikimeow .km-edit-nm em { font-style: normal; color: var(--km-coral-text, #171B1F); }
body.kikimeow .km-edit-ct {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--km-ink-muted, #616971);
}

body.kikimeow .km-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
body.kikimeow .km-block-head h2 { font-size: 21px; font-weight: 800; margin: 0; }
body.kikimeow .km-seeall { color: var(--km-coral-dark, #1B2127); font-weight: 700; text-decoration: none; font-size: 14px; }
/* --- Category strip: real product photography, one tile per real product_cat.
   (The separate "Exclusive to KiKi Meow!" pill strip that used to live lower down the
   page was 8 invented house-brand names with line icons and no photos — superseded by
   this section. See front-page.php km_cat_tiles() for why the image source changed.)
   Sizing note: every curated source photo is natively 1:1 (CJ shoots square), so a 1:1
   tile crops nothing — the old 4:3 box was cutting the sides off them.
   `woocommerce_single` (600px) is the source size: a 4-up tile is ~276px wide, and the
   300x300 `woocommerce_thumbnail` is too soft on retina. --- */
body.kikimeow .km-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
body.kikimeow .km-cat {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--km-coral-light, #EFF2F0);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(34, 42, 49, .07);
  transition: box-shadow .25s ease, transform .25s ease;
}
body.kikimeow .km-cat:hover { box-shadow: 0 12px 28px rgba(34, 42, 49, .18); transform: translateY(-2px); }
body.kikimeow .km-cat-ph { position: absolute; inset: 0; display: block; }
body.kikimeow .km-cat-ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
body.kikimeow .km-cat:hover .km-cat-ph img { transform: scale(1.07); }
/* Scrim so the white label stays legible over a light product photo. */
body.kikimeow .km-cat-tx {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 40px 16px 14px;
  background: linear-gradient(to top,
    rgba(34, 42, 49, .86) 0%, rgba(34, 42, 49, .52) 46%, rgba(34, 42, 49, 0) 100%);
  color: #fff;
}
body.kikimeow .km-cat-nm { font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
body.kikimeow .km-cat-ct { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; opacity: .82; }

body.kikimeow .km-mag-block { max-width: 1240px; margin: 34px auto 0; padding: 0 22px; }
body.kikimeow .km-mag-block .km-mag-grid { margin-top: 0; }

@media (max-width: 1100px) {
  body.kikimeow .km-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  body.kikimeow .km-cat-nm { font-size: 15px; }
  body.kikimeow .km-edit { gap: 26px 24px; }
  body.kikimeow .km-edit-it { width: 140px; }
  body.kikimeow .km-edit-ph { width: 118px; height: 118px; }
}
@media (max-width: 900px) {
  body.kikimeow .km-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.kikimeow .km-catsbanner-tx b { font-size: 40px; }
  body.kikimeow .km-catsbanner-tx { padding: 26px 24px; }
}
@media (max-width: 600px) {
  body.kikimeow .km-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.kikimeow .km-cat { border-radius: 13px; }
  body.kikimeow .km-cat-tx { padding: 30px 12px 11px; }
  body.kikimeow .km-cat-nm { font-size: 14px; }
  body.kikimeow .km-cat-ct { font-size: 11px; }
  body.kikimeow .km-catsbanner-tx b { font-size: 32px; }
  /* 5 medallions → 3 + 2, centred. Width in % keeps them even; gap stays generous
     so the circles never touch. */
  body.kikimeow .km-edit { gap: 22px 8px; }
  body.kikimeow .km-edit-it { width: 30%; min-width: 96px; gap: 7px; }
  body.kikimeow .km-edit-ph { width: 92px; height: 92px; }
  body.kikimeow .km-edit-nm { font-size: 13px; }
  body.kikimeow .km-edit-ct { font-size: 9.5px; letter-spacing: .9px; }
}

/* v1.35.1 — merged duplicate promo bars: coral km-topbar carries the message now */
body.kikimeow .km-promo-bar { display: none !important; }

/* ============ v3.2.1 (2026-09-23) — homepage catsbanner illustration ============ */

/* --- "Everything for Cats" banner: fill the empty right side with a teal cat-head
   mark so the banner reads as a complete composition instead of text floating in
   a wide peach rectangle. The ::after is pointer-events:none so the full-width
   anchor stays clickable across the whole banner. --- */
body.kikimeow .km-catsbanner-tx {
  position: relative !important;
  overflow: hidden;
}
body.kikimeow .km-catsbanner-tx::after {
  content: "";
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 132px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><path d='M22 78 L62 10 L86 70 Z' fill='%231F8A80'/><path d='M178 78 L138 10 L114 70 Z' fill='%231F8A80'/><ellipse cx='100' cy='105' rx='78' ry='50' fill='%231F8A80'/><circle cx='72' cy='100' r='4.5' fill='%23FFF8F0'/><circle cx='128' cy='100' r='4.5' fill='%23FFF8F0'/><path d='M94 118 L100 125 L106 118 Z' fill='%23FF7A59'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.88;
  pointer-events: none;
}
/* Hide the cat mark on narrow screens — keeps the banner clean on mobile. */
@media (max-width: 900px) {
  body.kikimeow .km-catsbanner-tx::after { display: none; }
}

/* ============ v3.1.0 (2026-09-23) — header polish: search button, cart icon + badge,
   currency globe, nav hover/current affordance ============ */

/* --- 1. Header search: real circular magnifier button.
   Root cause: Bridge's get_product_search_form filter rewrote WooCommerce's semantic
   <button> into <input type="submit" id="searchsubmit" value="&#xf002"> (a Font Awesome
   glyph). No icon font is applied to that input, so it rendered as a stray orange square
   below the field. functions.php now re-filters the form back to a real <button>; the
   #searchsubmit rule below is a defensive fallback if that filter is ever bypassed. --- */
body.kikimeow .km-product-search { position: relative !important; width: 100% !important; }
body.kikimeow .km-product-search input[type="search"],
body.kikimeow .km-product-search input[type="text"] {
  width: 100% !important;
  padding: 16px 62px 16px 22px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  color: var(--km-ink, #1C2126) !important;
  box-shadow: 0 4px 20px rgba(28,33,38,.06) !important;
  outline: none !important;
}
body.kikimeow .km-product-search input:focus { border-color: var(--km-coral, #262D34) !important; }
body.kikimeow .km-product-search .km-search-submit,
body.kikimeow .km-hero-search .km-search-submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--km-coral, #262D34) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background .18s ease !important;
}
body.kikimeow .km-product-search .km-search-submit:hover,
body.kikimeow .km-hero-search .km-search-submit:hover { background: var(--km-coral-dark, #1B2127) !important; }
body.kikimeow .km-product-search .km-search-submit svg,
body.kikimeow .km-hero-search .km-search-submit svg { width: 20px !important; height: 20px !important; display: block !important; }

/* Defensive: if Bridge's raw submit input ever comes back, make it look right anyway */
body.kikimeow .km-hero-search #searchsubmit,
body.kikimeow .km-product-search #searchsubmit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 50% !important;
  background-color: var(--km-coral, #262D34) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-3.6-3.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
}

/* --- 2. Header cart: bag icon + coral count badge.
   The cart was a bare 34x38 teal pill showing only a number — .header_cart::before was
   "none", i.e. no icon at all. Give it a real bag glyph and a proper badge. --- */
body.kikimeow .shopping_cart_header { display: inline-flex !important; align-items: center !important; margin-right: 16px !important; }
body.kikimeow .header_cart,
body.kikimeow .header_bottom .widget_woocommerce-dropdown-cart .header_cart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* flex:0 0 + min-width stop the inline-flex parent (~43px) from shrinking this
     into an ellipse; padding:0 clears the theme's stray 9px right padding. */
  flex: 0 0 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(28,33,38,.14) !important;
  transition: background .18s ease, border-color .18s ease !important;
}
body.kikimeow .header_cart::before {
  content: "" !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232B2B2B'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%208h12l-1%2012H7L6%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
body.kikimeow .header_cart:hover {
  background: var(--km-teal-light, #E3E7E4) !important;
  border-color: var(--km-teal, #4A5560) !important;
}
body.kikimeow .header_cart_span,
body.kikimeow .header_bottom .widget_woocommerce-dropdown-cart .header_cart .header_cart_span {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  left: auto !important;
  width: auto !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--km-coral, #262D34) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 19px !important;
  text-align: center !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* --- 3. Header currency: replace the broken flag sprite with a crisp globe icon.
   The plugin uses a 64px sprite (flags-64.png) positioned via background-position; the
   child theme forced background-size:cover, which destroys sprite math, so the flag
   rendered blank. A globe reads correctly as "region / currency" and is sprite-free. --- */
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency .vi-flag-64,
body.kikimeow .wmc-current-currency .vi-flag-64,
body.kikimeow .wmc-sub-currency .vi-flag-64 {
  width: 17px !important;
  height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231F8A80'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18M12%203a15%2015%200%200%201%200%2018M12%203a15%2015%200%200%200%200%2018'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency {
  background: #fff !important;
  border: 1px solid rgba(28,33,38,.14) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  height: 44px !important;
  gap: 8px !important;
  transition: border-color .18s ease !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency:hover {
  border-color: var(--km-teal, #4A5560) !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-current-currency-code {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  color: var(--km-ink, #1C2126) !important;
}
body.kikimeow .header_bottom_right_widget_holder .woo-multi-currency.layout5 .wmc-open-dropdown-currencies {
  border-top-color: var(--km-ink, #1C2126) !important;
}

/* --- 4. Header nav: coral underline affordance on hover + current item.
   Links are full header height, so a background pill would be a large block; an
   underline indicator gives a clear, layout-safe affordance. --- */
body.kikimeow nav.main_menu > ul > li > a,
body.kikimeow .main_menu ul li a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: color .16s ease !important;
}
body.kikimeow nav.main_menu > ul > li > a { position: relative !important; }
/* Use ::before, NOT ::after — Bridge renders the "By Type" dropdown caret on a::after,
   so an ::after underline would silently replace the caret. ::before is unused. */
body.kikimeow nav.main_menu > ul > li > a::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 20px !important;
  width: 55% !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--km-coral-text, #171B1F) !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .2s ease !important;
}
/* .header_bottom is included so this rule outranks the theme's own
   `body.kikimeow .header_bottom .main_menu li a:hover` (0,4,3) rather than
   being silently overridden. Colour matches that rule's --km-coral-text so the
   hover text and the underline are exactly the same hue. */
body.kikimeow nav.main_menu > ul > li > a:hover,
body.kikimeow .header_bottom .main_menu > ul > li > a:hover,
body.kikimeow .main_menu ul li a:hover,
body.kikimeow .main_menu ul li:hover > a {
  background: transparent !important;
  color: var(--km-coral-text, #171B1F) !important;
}
body.kikimeow nav.main_menu > ul > li > a:hover::before,
body.kikimeow nav.main_menu > ul > li.current-menu-item > a::before,
body.kikimeow nav.main_menu > ul > li.current-menu-ancestor > a::before,
body.kikimeow nav.main_menu > ul > li.current-menu-parent > a::before {
  transform: translateX(-50%) scaleX(1) !important;
}
body.kikimeow nav.main_menu > ul > li.current-menu-item > a,
body.kikimeow nav.main_menu > ul > li.current-menu-ancestor > a,
body.kikimeow nav.main_menu > ul > li.current-menu-parent > a {
  color: var(--km-coral-text, #171B1F) !important;
}

/* --- 5. Mobile/tablet header: keep the CART, drop only the currency switcher.
   A previous block hid the ENTIRE .header_bottom_right_widget_holder below 1000px
   to hide the currency switcher — but the cart lives in that same holder, so every
   screen under 1000px (phones AND tablets) had no cart at all. Re-show the holder,
   hide only the currency widget, and keep the cart compact. --- */
@media (max-width: 1000px) {
  body.kikimeow .header_bottom_right_widget_holder {
    display: flex !important;
    align-items: center !important;
  }
  /* currency switcher only — the cart keeps its own widget */
  body.kikimeow .header_bottom_right_widget_holder .header_bottom_widget.widget_text {
    display: none !important;
  }
  /* Bridge stretches the cart widget to the full 100px header height, pins the
     circle to its top, locks .shopping_cart_outer to 43px and offsets the inner
     by 12px — so the 40px circle overflowed its box and the currency pill sat on
     top of it. Collapse every wrapper to content size and centre the circle. */
  body.kikimeow .header_bottom_right_widget_holder .header_bottom_widget.widget_woocommerce-dropdown-cart {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
  }
  body.kikimeow .header_bottom_right_widget_holder .shopping_cart_outer,
  body.kikimeow .header_bottom_right_widget_holder .shopping_cart_inner,
  body.kikimeow .header_bottom_right_widget_holder .shopping_cart_header {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.kikimeow .header_cart,
  body.kikimeow .header_bottom .widget_woocommerce-dropdown-cart .header_cart {
    flex: 0 0 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  body.kikimeow .header_cart::before { width: 19px !important; height: 19px !important; }
}

/* Currency switcher returns on tablets (600-1000px), where there is room beside
   the cart. Phones keep the cart only, to protect the logo/menu space.
   The gap goes on the cart WIDGET (the flex item), not on an inner wrapper. */
@media (min-width: 600px) and (max-width: 1000px) {
  body.kikimeow .header_bottom_right_widget_holder .header_bottom_widget.widget_text {
    display: block !important;
  }
  body.kikimeow .header_bottom_right_widget_holder .header_bottom_widget.widget_woocommerce-dropdown-cart {
    margin-right: 14px !important;
  }
}

/* --- 6. "By Type" mega menu is now a live PRODUCT LIST (functions.php v1.37.0).
   The mega-menu shell (680px white card, shadow, 3-col grid) already existed and
   its selectors are MORE specific than a short one, so these rules deliberately
   mirror that same prefix and simply come later in the file. Only two things
   change: the grid goes to two roomier columns, and each row becomes
   thumbnail + name. The old `li#nav-menu-item-577` (All Cat Supplies chip) rule
   is now inert — that menu item is replaced by the product list. --- */
body.kikimeow img.km-nav-thumb {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: #EEF0EE !important;
}

@media screen and (min-width: 1001px) {
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px 16px !important;
  }
  body.kikimeow nav.main_menu.drop_down ul#menu-kikimeow-nav > li#nav-menu-item-573 > div.second > div.inner > ul > li.km-nav-product > a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    line-height: 1.3 !important;
    padding: 7px 10px !important;
  }
}

/* Mobile + fullscreen menus: plain thumbnail + name rows */
body.kikimeow .km-nav-product > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   v3.3.0 (2026-09-23) — homepage: trust strip alignment + Deal of the Day layout
   ========================================================================== */

/* --- Trust strip ----------------------------------------------------------
   Was: full-viewport bleed (measured 1440px at a 1440 viewport) with four 333px
   cells, while every other homepage section sits in a 1200px wrap — so the row
   read as detached from the page. Icons were raw OS emoji, which render in their
   own colours (the shield came out blue, the parcel brown) and differ per OS.
   Now: same 1200px measure as the rest of the page, teal line icons, hairline
   dividers, and one link per claim. */
body.kikimeow .km-trust {
  display: block;
  padding: 0;
  background: var(--km-white);
  border-top: 1px solid var(--km-line);
  border-bottom: 1px solid var(--km-line);
}
body.kikimeow .km-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.kikimeow .km-trust-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 20px 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--km-ink);
  text-decoration: none;
  border-right: 1px solid var(--km-line);
  transition: color .15s ease;
}
body.kikimeow .km-trust-inner > .km-trust-item:first-child { padding-left: 0; }
body.kikimeow .km-trust-inner > .km-trust-item:last-child { border-right: 0; padding-right: 0; }
body.kikimeow .km-trust-item:hover { color: var(--km-teal); }
body.kikimeow .km-trust-item .km-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--km-teal-light, #E0E5E1);
  color: var(--km-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .15s ease, color .15s ease;
}
body.kikimeow .km-trust-item:hover .km-icon { background: var(--km-teal); color: #fff; }
body.kikimeow .km-trust-item .km-icon svg { width: 19px; height: 19px; display: block; }
/* Neutralise any leftover WordPress emoji <img> from the old markup. */
body.kikimeow .km-trust-item .km-icon img { width: 19px; height: 19px; }

@media (max-width: 1000px) {
  body.kikimeow .km-trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 18px; }
  body.kikimeow .km-trust-item { padding: 15px 14px; font-size: 13px; }
  body.kikimeow .km-trust-inner > .km-trust-item:first-child { padding-left: 14px; }
  body.kikimeow .km-trust-inner > .km-trust-item:last-child { padding-right: 14px; }
  body.kikimeow .km-trust-item:nth-child(2) { border-right: 0; }
  body.kikimeow .km-trust-item:nth-child(1),
  body.kikimeow .km-trust-item:nth-child(2) { border-bottom: 1px solid var(--km-line); }
}
@media (max-width: 560px) {
  body.kikimeow .km-trust-inner { grid-template-columns: 1fr; }
  body.kikimeow .km-trust-item { border-right: 0; padding: 13px 14px; }
  body.kikimeow .km-trust-item:nth-child(1),
  body.kikimeow .km-trust-item:nth-child(2),
  body.kikimeow .km-trust-item:nth-child(3) { border-bottom: 1px solid var(--km-line); }
  body.kikimeow .km-trust-inner > .km-trust-item:last-child { border-bottom: 0; }
}

/* --- Deal of the Day ------------------------------------------------------
   Was: a 300x300 image inside a 1152px card with 28px of inner padding, and a
   body column (760px) whose content filled only its left third — measured 53%
   of the card carrying nothing. The coral flag sat absolutely at top:12 left:12
   over the product photo, colliding with the imagery.
   Now: full-bleed image panel on the left, no inner padding, and a body column
   filled with real rows (stock, actions, delivery note). */
body.kikimeow .km-deal-inner {
  display: grid !important;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--km-radius) !important;
}
body.kikimeow .km-deal-media {
  position: relative !important;
  background: #EEF0EE;
  min-height: 320px;
}
body.kikimeow .km-deal-media > a {
  display: block !important;
  width: 100%;
  height: 100%;
}
body.kikimeow .km-deal-media > a > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
}
body.kikimeow .km-deal-body {
  padding: 32px 38px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0;
}
body.kikimeow .km-deal-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
/* Flag moves out of the photo and into the text column. */
body.kikimeow .km-deal-flag {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  line-height: 1.3 !important;
}
body.kikimeow .km-deal-eyebrow { margin-bottom: 0 !important; }
body.kikimeow .km-deal-body h2 { font-size: 26px !important; }
body.kikimeow .km-deal-price { margin-bottom: 13px !important; }
body.kikimeow .km-deal-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--km-ink-soft, #40474F);
}
body.kikimeow .km-deal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FA36B;
  box-shadow: 0 0 0 3px rgba(47, 163, 107, .16);
  flex: none;
}
body.kikimeow .km-deal-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body.kikimeow .km-deal-more {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--km-teal);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
body.kikimeow .km-deal-more:hover { border-bottom-color: var(--km-teal); }
body.kikimeow .km-deal-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--km-ink-muted, #616971);
}

@media (max-width: 1100px) {
  body.kikimeow .km-deal-inner { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important; }
  body.kikimeow .km-deal-body { padding: 26px !important; }
  body.kikimeow .km-deal-body h2 { font-size: 22px !important; }
}
/* Must out-rank the earlier `max-width:320px; margin:0 auto` at this breakpoint. */
@media (max-width: 980px) {
  body.kikimeow .km-deal-inner { grid-template-columns: 1fr !important; }
  body.kikimeow .km-deal-media {
    max-width: none !important;
    margin: 0 !important;
    min-height: 0;
    aspect-ratio: 16 / 10;
    max-height: 320px;
  }
  body.kikimeow .km-deal-body { padding: 22px 20px !important; }
}
@media (max-width: 560px) {
  body.kikimeow .km-deal-media { aspect-ratio: 4 / 3; }
  body.kikimeow .km-deal-body h2 { font-size: 20px !important; }
  body.kikimeow .km-deal-actions { gap: 14px; }
}

/* ==========================================================================
   KiKi Meow v3.2 (2026-09-24) — Help & Service visibility
   1. "Need a hand?" strip (homepage + cart/checkout)
   2. Footer column icons + Top questions block
   3. Floating help widget (FAB + slide-up panel)
   ========================================================================== */

/* ---------- 1. Help & Service strip ---------- */
.km-help-bar { background: var(--km-teal-light); padding: 48px 0; }
.km-help-bar .km-wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.km-help-head { text-align: center; margin-bottom: 26px; }
.km-help-head h2 { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; color: var(--km-ink); margin: 0 0 6px; line-height: 1.2; }
.km-help-head p { font-size: 15px; color: var(--km-ink-soft); margin: 0; }
.km-help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.km-help-card {
  display: block;
  background: #fff;
  border: 1px solid var(--km-line);
  border-radius: 16px;
  padding: 22px 20px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.km-help-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74,85,96,.14); border-color: var(--km-teal); }
.km-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--km-teal-light); color: var(--km-teal); margin-bottom: 14px;
}
.km-help-icon svg { width: 24px; height: 24px; }
.km-help-title { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: var(--km-ink); margin-bottom: 6px; }
.km-help-desc { display: block; font-size: 13.5px; line-height: 1.55; color: var(--km-ink-soft); }

/* ---------- 2. Footer column icons + Top questions ---------- */
.km-footer-col h4 { display: flex; align-items: center; gap: 8px; }
.km-foot-ic { display: inline-flex; color: var(--km-teal); flex: none; }
.km-foot-ic svg { width: 18px; height: 18px; }
.km-foot-topq { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--km-line); }
.km-foot-topq-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--km-ink-muted); margin: 0 0 8px; }
.km-foot-topq ul { list-style: none; margin: 0; padding: 0; }
.km-foot-topq li { margin: 0; }
.km-foot-topq a { display: block; font-size: 13px; color: var(--km-teal-text); text-decoration: none; padding: 3px 0; }
.km-foot-topq a:hover { color: var(--km-coral-text); }

/* ---------- 3. Floating help widget ---------- */
.km-help-widget { position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: 'Nunito', sans-serif; }
.km-help-fab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--km-coral-text); color: #fff;
  border: none; border-radius: 999px;
  padding: 13px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.km-help-fab svg { width: 20px; height: 20px; flex: none; }
.km-help-fab-tx { white-space: nowrap; }
.km-help-panel {
  display: none;
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 290px; background: #fff; border: 1px solid var(--km-line);
  border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.22);
  padding: 18px; text-align: left;
}
.km-help-widget.open .km-help-panel { display: block; animation: kmHelpPop .16s ease-out; }
@keyframes kmHelpPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.km-help-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.km-help-panel-head h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 800; color: var(--km-ink); margin: 0; }
.km-help-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--km-ink-muted); cursor: pointer; padding: 0 4px; }
.km-help-panel-sub { font-size: 12.5px; color: var(--km-ink-soft); margin: 0 0 12px; }
.km-help-links { display: flex; flex-direction: column; gap: 2px; }
.km-help-links a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--km-teal-text);
  text-decoration: none; padding: 9px 8px; border-radius: 10px;
}
.km-help-links a:hover { background: var(--km-teal-light); }
.km-help-links a svg { width: 16px; height: 16px; flex: none; }
.km-help-mail {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 12px; padding: 11px; border-radius: 10px;
  background: var(--km-teal-text); color: #fff !important;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.km-help-mail svg { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .km-help-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .km-help-bar { padding: 36px 0; }
  .km-help-grid { grid-template-columns: 1fr; }
  .km-help-fab-tx { display: none; }
  .km-help-fab { padding: 14px; }
  .km-help-panel { width: calc(100vw - 32px); right: -4px; }
  .km-help-widget { right: 16px; bottom: 16px; }
}

/* ==========================================================================
   KiKi Meow v3.3 (2026-09-25) — Account icon + signed-in dropdown
   Replaces the "SIGN IN" text menu item with a teal person icon (matching the
   cart icon). Logged-in visitors get a dropdown with a greeting + account links.
   The link sits inside Bridge's .main_menu <li>, whose anchor carries
   `color: var(--km-ink) !important`, so we must out-rank it with a higher
   specificity !important rule. The <li> is made position:relative (via :has)
   so the absolute panel anchors to it.
   ========================================================================== */

/* The account icon link — beat Bridge's ink !important (desktop + mobile menus) */
body.kikimeow .main_menu > ul > li > a.km-acct-link,
body.kikimeow .mobile_menu > ul > li > a.km-acct-link {
  color: var(--km-teal) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 8px;
  text-decoration: none;
}
body.kikimeow .main_menu > ul > li > a.km-acct-link:hover,
body.kikimeow .mobile_menu > ul > li > a.km-acct-link:hover {
  color: var(--km-teal-dark) !important;
}
body.kikimeow .main_menu > ul > li > a.km-acct-link:focus-visible,
body.kikimeow .mobile_menu > ul > li > a.km-acct-link:focus-visible {
  color: var(--km-teal-dark) !important;
  outline: 2px solid var(--km-teal);
  outline-offset: 3px;
  border-radius: 8px;
}
.km-acct-ic { display: inline-flex; line-height: 0; }
.km-acct-ic svg { width: 22px; height: 22px; display: block; }

/* Anchor the dropdown to the account <li> (desktop + mobile menus) */
body.kikimeow .main_menu > ul > li:has(> a.km-acct-link),
body.kikimeow .mobile_menu > ul > li:has(> a.km-acct-link) {
  position: relative;
}

/* ---------- Signed-in dropdown panel ---------- */
.km-acct-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 250px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--km-line);
  border-radius: 14px;
  box-shadow: var(--km-shadow-lg);
  padding: 16px 14px 12px;
  text-align: left;
  z-index: 300;
  font-family: 'Nunito', sans-serif;
  animation: kmAcctPop .16s ease-out;
}
.km-acct-panel.open { display: block; }
@keyframes kmAcctPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.km-acct-hi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--km-ink);
}
.km-acct-paw { width: 18px; height: 18px; color: var(--km-coral); flex: none; }
.km-acct-sub { margin: 0 0 12px; font-size: 13px; color: var(--km-ink-soft); }
.km-acct-rule { display: block; height: 1px; background: var(--km-line); margin: 10px 0; }
.km-acct-lk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--km-ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.km-acct-lk svg { width: 18px; height: 18px; color: var(--km-teal); flex: none; }
.km-acct-lk:hover { background: var(--km-teal-light); color: var(--km-teal-dark); }
.km-acct-lk:hover svg { color: var(--km-teal-dark); }
/* Sign out — darker coral so 14px bold meets WCAG AA (>=4.5:1) on white.
   var(--km-coral-dark) #1B2127 only reaches 3.21:1 (AA-large only). */
.km-acct-out { color: #171B1F; }
.km-acct-out svg { color: #171B1F; }
.km-acct-out:hover { background: var(--km-coral-light); color: #0F1216; }
.km-acct-out:hover svg { color: #0F1216; }

/* ---------- Mobile: keep the icon + panel usable inside the hamburger menu ---------- */
@media (max-width: 980px) {
  /* Lone icon is unclear in a text list — add an "Account" label on mobile only */
  body.kikimeow .main_menu > ul > li > a.km-acct-link::after,
  body.kikimeow .mobile_menu > ul > li > a.km-acct-link::after {
    content: "Account";
    margin-left: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
  }
  body.kikimeow .main_menu > ul > li > a.km-acct-link,
  body.kikimeow .mobile_menu > ul > li > a.km-acct-link {
    display: flex !important;
    justify-content: flex-start;
    min-height: 44px;
    padding: 10px 6px;
  }
  /* Flow the panel under the icon instead of floating (avoids mobile-menu clipping) */
  body.kikimeow .main_menu > ul > li:has(> a.km-acct-link),
  body.kikimeow .mobile_menu > ul > li:has(> a.km-acct-link) { position: static; }
  .km-acct-panel {
    position: static;
    min-width: 0;
    width: 100%;
    margin: 8px 0 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--km-line);
    border-radius: 0;
    padding: 10px 4px 4px;
    animation: none;
  }
  .km-acct-hi { font-size: 15px; }
}

/* ---------- Account icon grouped with the cart (moved into the right-widget holder) ---------- */
/* On load the desktop menu's account <li> is relocated next to the cart so the two cluster.
   The moved <li> loses its id and gains .km-acct-inline to avoid a duplicate id with the
   mobile menu's own account item. */
body.kikimeow .header_bottom_right_widget_holder .km-acct-inline {
  list-style: none;
  margin: 0;
  /* Pull the moved account icon into the cart widget's left padding so the two read as one cluster. */
  margin-right: -12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: none;
  position: relative;
}
body.kikimeow .header_bottom_right_widget_holder .km-acct-inline > a.km-acct-link {
  color: var(--km-teal) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-decoration: none;
}
body.kikimeow .header_bottom_right_widget_holder .km-acct-inline > a.km-acct-link:hover {
  color: var(--km-teal-dark) !important;
}
body.kikimeow .header_bottom_right_widget_holder .km-acct-inline > a.km-acct-link:focus-visible {
  color: var(--km-teal-dark) !important;
  outline: 2px solid var(--km-teal);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Mobile keeps the account item inside the hamburger — hide the moved copy to avoid a duplicate */
@media (max-width: 1000px) {
  body.kikimeow .header_bottom_right_widget_holder .km-acct-inline { display: none; }
}