/**
 * Site header — search + cart icon buttons.
 * Single source: edit here only.
 * Next.js: imported from home-overrides.css + inner-route.css
 * WP shop: enqueued in inc/shop-shell.php
 */

#siteHead .site-head-icon-btn,
#siteHead .btn-open-folat-search.site-head-icon-btn,
#siteHead .site-head-cart-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px;
  min-height: 50px;
  padding: 0 !important;
  border-radius: 12px;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1 !important;
  box-sizing: border-box;
  vertical-align: middle;
}

#siteHead button.site-head-icon-btn,
#siteHead button.btn-open-folat-search.site-head-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
}

#siteHead .site-head-icon-btn svg,
#siteHead .btn-open-folat-search.site-head-icon-btn svg,
#siteHead .site-head-cart-btn svg {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  pointer-events: none;
}

#siteHead .site-head-cart-btn .site-head-cart__badge {
  position: absolute;
  top: -0.35rem;
  inset-inline-start: -0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #96f207;
  color: #0a0a0a;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  pointer-events: none;
}

/* Light theme — white icons on gray (same contrast idea as dark) */
body.light-mode #siteHead.site-head-inner .site-head-icon-btn,
body.light-mode #siteHead.site-head-inner .btn-open-folat-search.site-head-icon-btn,
body.light-mode #siteHead.site-head-inner .site-head-cart-btn,
body.light-mode #siteHead.position-absolute .site-head-icon-btn,
body.light-mode #siteHead.position-absolute .btn-open-folat-search.site-head-icon-btn,
body.light-mode #siteHead.position-absolute .site-head-cart-btn {
  color: #fff !important;
  background: #6b6b6b !important;
  border: 1px solid #5a5a5a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

body.light-mode #siteHead.site-head-inner .site-head-icon-btn:hover,
body.light-mode #siteHead.site-head-inner .btn-open-folat-search.site-head-icon-btn:hover,
body.light-mode #siteHead.site-head-inner .site-head-cart-btn:hover,
body.light-mode #siteHead.position-absolute .site-head-icon-btn:hover,
body.light-mode #siteHead.position-absolute .btn-open-folat-search.site-head-icon-btn:hover,
body.light-mode #siteHead.position-absolute .site-head-cart-btn:hover {
  color: #b8ff3d !important;
  background: rgba(150, 242, 7, 0.35) !important;
  border-color: rgba(150, 242, 7, 0.55) !important;
}

/* Dark theme — white icons */
body:not(.light-mode) #siteHead.site-head-inner .site-head-icon-btn,
body:not(.light-mode) #siteHead.site-head-inner .btn-open-folat-search.site-head-icon-btn,
body:not(.light-mode) #siteHead.site-head-inner .site-head-cart-btn,
body:not(.light-mode) #siteHead.position-absolute .site-head-icon-btn,
body:not(.light-mode) #siteHead.position-absolute .btn-open-folat-search.site-head-icon-btn,
body:not(.light-mode) #siteHead.position-absolute .site-head-cart-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body:not(.light-mode) #siteHead.site-head-inner .site-head-icon-btn:hover,
body:not(.light-mode) #siteHead.site-head-inner .btn-open-folat-search.site-head-icon-btn:hover,
body:not(.light-mode) #siteHead.site-head-inner .site-head-cart-btn:hover,
body:not(.light-mode) #siteHead.position-absolute .site-head-icon-btn:hover,
body:not(.light-mode) #siteHead.position-absolute .btn-open-folat-search.site-head-icon-btn:hover,
body:not(.light-mode) #siteHead.position-absolute .site-head-cart-btn:hover {
  color: #b8ff3d !important;
  background: rgba(150, 242, 7, 0.22) !important;
  border-color: rgba(150, 242, 7, 0.55) !important;
}