/*
 Theme Name:   Electro Child - HudHud
 Theme URI:    https://hudhud.us
 Description:  HudHud Halal Marketplace — Shipt-Inspired Complete Redesign v3.0
 Author:       HudHud Team
 Template:     electro
 Version:      3.0.0
 Text Domain:  electro-child
*/

/* ============================================================
   DESIGN TOKENS — matches Shipt's clean palette
   ============================================================ */
:root {
  --hh-orange:        #F5A623;
  --hh-orange-dark:   #E09015;
  --hh-orange-light:  #FFF8ED;
  --hh-dark:          #1A1A1A;
  --hh-text:          #1A1A1A;
  --hh-text-muted:    #666666;
  --hh-text-light:    #999999;
  --hh-white:         #FFFFFF;
  --hh-gray-50:       #F7F7F7;
  --hh-gray-100:      #F0F0F0;
  --hh-gray-200:      #E0E0E0;
  --hh-border:        #EBEBEB;
  --hh-green:         #2E7D32;
  --hh-green-light:   #E8F5E9;
  --hh-halal-green:   #1B5E20;
  --hh-ebt-amber:     #F5A623;
  --hh-ebt-bg:        #FFF8ED;
  --hh-card-shadow:   0 2px 12px rgba(0,0,0,0.08);
  --hh-card-shadow-hover: 0 8px 28px rgba(0,0,0,0.14);
  --hh-radius:        10px;
  --hh-radius-sm:     8px;
  --hh-radius-lg:     14px;
  --hh-radius-full:   999px;
  --hh-font:          'Inter', system-ui, -apple-system, sans-serif;
  --hh-container:     1280px;
  --hh-header-h:      70px;
  --hh-transition:    all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box !important; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--hh-font) !important; color: var(--hh-text) !important; background: var(--hh-white) !important; -webkit-font-smoothing: antialiased !important; overflow-x: hidden !important; line-height: 1.6 !important; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; transition: var(--hh-transition); }
.container, .container-fluid, .site-container, .col-full { max-width: var(--hh-container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; width: 100% !important; }
.row { margin-left: 0 !important; margin-right: 0 !important; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
#hh-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--hh-orange); z-index: 99998; width: 0%; transition: width 0.3s ease; box-shadow: 0 0 8px rgba(245,166,35,0.6); }
#hh-progress-bar.loading { width: 80%; }
#hh-progress-bar.done { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.4s ease 0.1s; }

/* ============================================================
   PRELOADER
   ============================================================ */
#hh-preloader { position: fixed; inset: 0; background: #FFFFFF; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.5s ease, visibility 0.5s ease; }
#hh-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.hh-preloader-logo { width: 80px; height: 80px; object-fit: contain; animation: hh-wingflap 0.7s ease-in-out infinite alternate; transform-origin: center bottom; }
@keyframes hh-wingflap { 0% { transform: scaleY(1) rotate(-3deg); } 100% { transform: scaleY(0.85) rotate(3deg); } }
.hh-preloader-bar { width: 160px; height: 3px; background: var(--hh-gray-100); border-radius: 99px; overflow: hidden; }
.hh-preloader-bar-fill { height: 100%; background: var(--hh-orange); border-radius: 99px; animation: hh-bar-fill 1.2s ease-in-out infinite; }
@keyframes hh-bar-fill { 0% { width: 0%; margin-left: 0; } 50% { width: 70%; margin-left: 0; } 100% { width: 0%; margin-left: 100%; } }

/* ============================================================
   HEADER — Shipt-style (correct Electro selectors)
   Real HTML: .masthead.row > .header-logo-area + form.navbar-search.col + .header-icons
   ============================================================ */

/* ── Wrapper: site-header ─────────────────────────────────── */
#masthead,
header#masthead,
.site-header,
header.site-header.header-v1 {
  background: #fff !important;
  border-bottom: 1px solid #EBEBEB !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
#content.site-content { position: relative !important; z-index: 1 !important; }

/* Top bar */
.top-bar, .electro-top-bar {
  background: #1A1A1A !important; color: rgba(255,255,255,.7) !important;
  font-size: 12px !important; font-family: 'Inter',sans-serif !important; padding: 5px 0 !important;
}
.top-bar a, .electro-top-bar a { color: rgba(255,255,255,.65) !important; }
.top-bar a:hover, .electro-top-bar a:hover { color: #F5A623 !important; }

/* ── MASTHEAD ROW (.masthead.row is the real Bootstrap row) ── */
.masthead.row,
div.masthead.row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  min-height: 64px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── LOGO AREA ────────────────────────────────────────────── */
.header-logo-area {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 150px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  justify-content: flex-start !important;
}

/* Hide the off-canvas / hamburger toggle Electro puts next to logo */
.header-logo-area .off-canvas-toggle,
.header-logo-area .navbar-toggler,
.header-logo-area button { display: none !important; }

/* Kill site title + tagline text — only show the logo image */
.site-title,
p.site-title,
.site-description,
.header-site-branding .site-title,
.custom-logo-link + .site-title,
header .site-title,
header .site-description { display: none !important; }

/* Logo image — small like Shipt */
img.custom-logo,
a.custom-logo-link img,
.custom-logo-link img.custom-logo,
.site-header img.custom-logo,
.header-logo-area img {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  max-width: 130px !important;
  min-height: unset !important;
  min-width: unset !important;
  object-fit: contain !important;
  display: block !important;
}
a.custom-logo-link {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* ── SEARCH FORM: form.navbar-search.col ─────────────────── */
/* Bootstrap .col already does flex:1 but we reinforce it */
form.navbar-search,
form.navbar-search.col {
  flex: 1 1 0% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

/* The Bootstrap input-group wrapper */
form.navbar-search .input-group {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  height: 44px !important;
  border: 1.5px solid #EBEBEB !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #F7F7F7 !important;
  transition: border-color .2s, box-shadow .2s !important;
}
form.navbar-search .input-group:focus-within {
  border-color: #F5A623 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,.12) !important;
}

/* Input field */
form.navbar-search input[type="text"],
form.navbar-search input[type="search"],
form.navbar-search .product-search-field,
input.product-search-field,
input.search-field.form-control {
  flex: 1 1 0% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
  height: 44px !important;
  line-height: 44px !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}
form.navbar-search input::placeholder { color: #999 !important; }

/* Categories dropdown - sits on RIGHT of input, before submit */
.search-categories,
.input-group-addon.search-categories,
div.input-group-addon.search-categories {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  border-left: 1px solid #E0E0E0 !important;
  background: #F0F0F0 !important;
}
#electro_header_search_categories_dropdown,
.search-categories select,
select.postform.resizeselect {
  height: 42px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 28px 0 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #666 !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  min-width: 110px !important;
  max-width: 150px !important;
}

/* Submit button */
.input-group-btn,
div.input-group-btn { flex-shrink: 0 !important; }
form.navbar-search .input-group-btn button,
form.navbar-search button.btn.btn-secondary,
form.navbar-search button[type="submit"] {
  background: #F5A623 !important;
  border: none !important;
  border-radius: 0 999px 999px 0 !important;
  color: #fff !important;
  height: 44px !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  line-height: 1 !important;
}
form.navbar-search .input-group-btn button:hover { background: #E09015 !important; }

/* ── HEADER ICONS (right side) ────────────────────────────── */
.header-icons,
div.header-icons.col-auto {
  flex: 0 0 auto !important;
  padding: 0 !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.header-icons .header-icon a,
.header-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid #EBEBEB !important;
  color: #1A1A1A !important;
  font-size: 16px !important;
  transition: all .2s !important;
  text-decoration: none !important;
}
.header-icons .header-icon a:hover, .header-icons a:hover {
  background: #F5A623 !important;
  border-color: #F5A623 !important;
  color: #fff !important;
}
/* Counter badges */
.header-icon-counter,
.count.header-icon-counter {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: #F5A623 !important;
  color: #1A1A1A !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid #fff !important;
}
.header-icons .header-icon { position: relative !important; }

/* Cart icon specifically — give it orange fill */
.header-icons a[href*="cart"],
.header-icons .cart-contents {
  background: #F5A623 !important;
  border-color: #F5A623 !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
  padding: 0 14px !important;
  width: auto !important;
  gap: 6px !important;
}
.header-icons a[href*="cart"]:hover,
.header-icons .cart-contents:hover {
  background: #E09015 !important;
  border-color: #E09015 !important;
}

/* ── DELIVER-TO BAR (wherever it sits) ───────────────────── */
.hh-deliver-to,
#hh-deliver-to,
.hh-delivery-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #666 !important;
  cursor: pointer !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid #EBEBEB !important;
  background: #fff !important;
  white-space: nowrap !important;
  transition: all .2s !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.hh-deliver-to:hover { background: #F7F7F7 !important; }
.hh-deliver-to strong { color: #1A1A1A !important; font-weight: 700 !important; }
/* If it's in its own dedicated row above masthead, move it inline */
.hh-deliver-bar-row {
  display: none !important;
}

/* ── NAVIGATION ROW ──────────────────────────────────────── */
.electro-navigation,
div.electro-navigation.row {
  background: #fff !important;
  border-top: 1px solid #F0F0F0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Departments menu (All Items) */
.departments-menu-v2 {
  flex-shrink: 0 !important;
}
.departments-menu-v2-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #F5A623 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .2s !important;
  margin: 6px 0 !important;
}
.departments-menu-v2-title:hover { background: #E09015 !important; color: #fff !important; }

/* Secondary nav links */
.secondary-nav-menu,
div.secondary-nav-menu.col {
  flex: 1 !important;
  padding: 0 !important;
}
ul.secondary-nav,
.secondary-nav.yamm,
ul.secondary-nav.yamm {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center !important;
}
ul.secondary-nav > li > a,
.secondary-nav.yamm > li > a,
.secondary-nav > li.nav-item > a {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  transition: color .15s !important;
  text-decoration: none !important;
  border-radius: 8px !important;
}
ul.secondary-nav > li > a:hover,
.secondary-nav > li.nav-item > a:hover,
ul.secondary-nav > li.current-menu-item > a {
  color: #F5A623 !important;
  background: #FFF8ED !important;
}
/* Sub-menu dropdowns */
ul.secondary-nav .sub-menu,
.secondary-nav .yamm-content,
.secondary-nav .dropdown-menu {
  background: #fff !important;
  border: 1px solid #EBEBEB !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
  padding: 8px !important;
  min-width: 180px !important;
  z-index: 1001 !important;
}
ul.secondary-nav .sub-menu li a,
.secondary-nav .dropdown-menu li a {
  font-size: 13px !important;
  color: #1A1A1A !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  display: block !important;
}
ul.secondary-nav .sub-menu li a:hover { background: #F7F7F7 !important; color: #F5A623 !important; }

/* ============================================================
   LAYOUT — FULL WIDTH
   ============================================================ */
.woocommerce-sidebar, .shop-sidebar, .sidebar-wrapper, .widget-area,
aside.woocommerce-sidebar, #secondary.widget-area, .site-sidebar, .secondary-sidebar { display: none !important; }
#primary, .site-main, main#main, .woocommerce-page #primary, .content-area { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.site-content .col-full { display: block !important; }
.site-content .content-area { float: none !important; display: block !important; }
.hh-section { padding: 72px 0; }
.hh-section--sm { padding: 48px 0; }
.hh-section--lg { padding: 96px 0; }
.hh-section--white { background: var(--hh-white); }
.hh-section--gray { background: var(--hh-gray-50); }
.hh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.5s ease, transform 0.5s ease; }
.hh-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   HERO — SHIPT STYLE
   ============================================================ */
.hh-hero { background: linear-gradient(135deg, #1A1A2E 0%, #16213E 60%, #0F3460 100%); min-height: 560px; display: flex; align-items: center; overflow: hidden; position: relative; }
.hh-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(245,166,35,0.18) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,166,35,0.08) 0%, transparent 50%); pointer-events: none; }
.hh-hero__inner { position: relative; z-index: 2; max-width: var(--hh-container); margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; width: 100%; }
.hh-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,166,35,0.2); border: 1px solid rgba(245,166,35,0.4); color: #FFD070; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--hh-radius-full); margin-bottom: 20px; }
.hh-hero__title { font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.08; color: #FFFFFF; letter-spacing: -0.03em; margin: 0 0 20px; }
.hh-hero__title em { font-style: normal; color: var(--hh-orange); }
.hh-hero__sub { font-size: 18px; color: rgba(255,255,255,0.65); line-height: 1.65; margin: 0 0 36px; max-width: 460px; }
.hh-address-box { background: #FFFFFF; border-radius: var(--hh-radius-lg); padding: 28px; box-shadow: 0 24px 64px rgba(0,0,0,0.28); max-width: 440px; }
.hh-address-box__label { font-size: 13px; font-weight: 600; color: var(--hh-text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.hh-address-box__row { display: flex; gap: 8px; margin-bottom: 16px; }
.hh-address-input { flex: 1; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-sm) !important; padding: 12px 16px !important; font-family: var(--hh-font) !important; font-size: 14px !important; background: var(--hh-gray-50) !important; color: var(--hh-text) !important; outline: none !important; }
.hh-address-input:focus { border-color: var(--hh-orange) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(245,166,35,0.15) !important; }
.hh-btn-orange { background: var(--hh-orange) !important; color: #fff !important; border: none !important; border-radius: var(--hh-radius-sm) !important; padding: 12px 20px !important; font-family: var(--hh-font) !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important; }
.hh-btn-orange:hover { background: var(--hh-orange-dark) !important; }
.hh-address-trust { display: flex; gap: 16px; flex-wrap: wrap; }
.hh-address-trust span { font-size: 12px; color: var(--hh-text-muted); display: flex; align-items: center; gap: 4px; }
.hh-hero__visual { position: relative; }
.hh-hero__product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hh-hero__product-item { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--hh-radius); padding: 16px; text-align: center; backdrop-filter: blur(8px); transition: var(--hh-transition); }
.hh-hero__product-item:hover { background: rgba(255,255,255,0.12); transform: translateY(-4px); }
.hh-hero__product-item img { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 10px; }
.hh-hero__product-item .name { font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hh-hero__product-item .price { font-size: 13px; font-weight: 800; color: var(--hh-orange); margin-top: 4px; padding: 0 !important; }
.hh-hero__float { position: absolute; background: #fff; border-radius: var(--hh-radius); padding: 10px 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; animation: hh-float 3s ease-in-out infinite; z-index: 3; }
.hh-hero__float--tl { top: -16px; left: -24px; }
.hh-hero__float--br { bottom: -16px; right: -24px; animation-delay: 1.5s; }
@keyframes hh-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (max-width: 1024px) { .hh-hero__inner { grid-template-columns: 1fr; text-align: center; } .hh-hero__visual { display: none; } }

/* ============================================================
   CATEGORY STRIP
   ============================================================ */
.hh-category-strip { background: var(--hh-white); border-bottom: 1px solid var(--hh-border); padding: 0; position: sticky; top: var(--hh-header-h); z-index: 100; }
.hh-category-strip__inner { max-width: var(--hh-container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.hh-category-strip__inner::-webkit-scrollbar { display: none; }
.hh-category-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--hh-text-muted); border-bottom: 2px solid transparent; cursor: pointer; transition: var(--hh-transition); text-decoration: none; flex-shrink: 0; }
.hh-category-pill:hover, .hh-category-pill.active { color: var(--hh-orange); border-bottom-color: var(--hh-orange); }
.hh-category-pill.active { font-weight: 600; }

/* ============================================================
   SHOP CONTROLS
   ============================================================ */
.hh-shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 24px; flex-wrap: wrap; }
.woocommerce-result-count { font-size: 14px !important; color: var(--hh-text-muted) !important; margin: 0 !important; font-family: var(--hh-font) !important; }
.woocommerce-ordering select, .orderby { font-family: var(--hh-font) !important; font-size: 13px !important; padding: 8px 36px 8px 14px !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-sm) !important; background: var(--hh-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important; color: var(--hh-text) !important; outline: none !important; -webkit-appearance: none !important; cursor: pointer !important; }
.orderby:focus { border-color: var(--hh-orange) !important; background-color: #fff !important; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.woocommerce ul.products, ul.products, .products.columns-2, .products.columns-3, .products.columns-4, .products.columns-5 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important; list-style: none !important; padding: 0 !important;
  margin: 0 0 40px !important; float: none !important; width: 100% !important; align-items: stretch !important;
}

/* ============================================================
   PRODUCT CARD — COMPLETE ELECTRO OVERRIDE
   ============================================================ */
li.product, .product-grid-item {
  background: var(--hh-white) !important; border: 1.5px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; margin: 0 !important;
  padding: 0 !important; float: none !important; width: auto !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  position: relative !important; box-shadow: var(--hh-card-shadow) !important;
}
li.product:hover, .product-grid-item:hover { box-shadow: var(--hh-card-shadow-hover) !important; transform: translateY(-4px) !important; border-color: #ddd !important; }

li.product .product-inner, li.product .product-outer, li.product-card .product-inner {
  display: flex !important; flex-direction: column !important; height: 100% !important;
  border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}

li.product a.woocommerce-loop-product__link, li.product > a:first-child,
li.product .product-image-wrapper, li.product .product-media-object, li.product .media-object {
  display: block !important; background: var(--hh-gray-50) !important; overflow: hidden !important; flex-shrink: 0 !important;
}

/* Product images — uniform 200px height, white bg, contain */
li.product img, li.product img.attachment-woocommerce_thumbnail,
li.product .woocommerce-loop-product__link img, .product-grid-item img,
li.product .product-media-object img, li.product .media-object img {
  width: 100% !important; height: 200px !important; object-fit: contain !important;
  object-position: center center !important; padding: 16px !important;
  background: var(--hh-gray-50) !important; display: block !important;
  margin: 0 !important; border-radius: 0 !important; transition: transform 0.3s ease !important;
}
li.product:hover img { transform: scale(1.05) !important; }

/* HIDE SOLD/AVAILABLE PROGRESS BAR — Critical fix */
.woostify-product-countdown, .yith-wcctm-timer, .wpc-countdown-timer,
.product-stock-bar, .electro-stock-bar, .sold-progress-bar, .stock-progress,
.product-sold-count, .product-available-count, [class*="countdown-timer"],
[class*="flash-sale"], .yith-countdown, .deal-countdown, .special-offer-box,
.hot-deal-badge, li.product .product-stock-sold-purchased,
li.product .stock-sold-purchased, li.product .product-countdown,
.already-sold, .available-left, .sold-count, .available-count,
.stock-bar-wrap, .woocommerce-loop-product-stock-percentage { display: none !important; }

/* Badges */
.onsale, span.onsale { position: absolute !important; top: 10px !important; left: 10px !important; background: #E53935 !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: var(--hh-radius-full) !important; margin: 0 !important; min-height: unset !important; min-width: unset !important; line-height: 1.5 !important; z-index: 2 !important; }
.hh-badge-ebt { position: absolute !important; top: 10px !important; left: 10px !important; background: var(--hh-ebt-bg) !important; color: var(--hh-ebt-amber) !important; border: 1px solid #FFD54F !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; padding: 3px 9px !important; border-radius: var(--hh-radius-full) !important; z-index: 2 !important; }
.hh-badge-halal { position: absolute !important; top: 10px !important; right: 10px !important; background: var(--hh-green-light) !important; color: var(--hh-halal-green) !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: var(--hh-radius-full) !important; z-index: 2 !important; }

/* Category label */
li.product .product-categories, li.product .product-category-link, li.product .product-category {
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--hh-text-light) !important;
  padding: 10px 14px 2px !important; display: block !important; margin: 0 !important;
}

/* Title — 2 lines max */
.woocommerce-loop-product__title, li.product .woocommerce-loop-product__title,
h2.woocommerce-loop-product__title, li.product h2, li.product .product-title {
  font-family: var(--hh-font) !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--hh-text) !important; line-height: 1.4 !important; padding: 8px 14px 4px !important;
  margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* Price */
.price, li.product .price { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: var(--hh-text) !important; padding: 4px 14px 6px !important; margin: 0 !important; line-height: 1.3 !important; }
li.product .price del { font-size: 12px !important; font-weight: 400 !important; color: var(--hh-text-light) !important; margin-right: 4px !important; text-decoration: line-through !important; }
li.product .price ins { text-decoration: none !important; color: #C62828 !important; }

.star-rating { font-size: 12px !important; margin: 0 14px 6px !important; }
.star-rating::before, .star-rating span::before { color: #FFA000 !important; }

.hh-available-badge { font-size: 11px; color: var(--hh-text-light); padding: 0 14px 6px; display: flex; align-items: center; gap: 4px; }
.hh-available-badge strong { color: var(--hh-text-muted); font-weight: 600; }

/* ADD TO CART — FULL RECTANGLE, DESTROY ELECTRO CIRCLE */
.products > .product .add-to-cart-wrap, .owl-item > .product .add-to-cart-wrap,
li.product .add-to-cart-wrap, .product-card .add-to-cart-wrap {
  float: none !important; position: static !important; display: block !important;
  padding: 0 14px 14px !important; background: none !important;
  opacity: 1 !important; visibility: visible !important; width: 100% !important;
}

.products > .product .add-to-cart-wrap .button, .products > .product .add-to-cart-wrap a.button,
.products > .product .added_to_cart, .owl-item > .product .add-to-cart-wrap .button,
.owl-item > .product .added_to_cart, li.product .add-to-cart-wrap .button,
li.product .add-to-cart-wrap a.button, li.product .add-to-cart-wrap a.add_to_cart_button,
.add_to_cart_button, li.product .button, .woocommerce a.button.add_to_cart_button,
button.add_to_cart_button, li.product form.cart button, li.product .cart button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 10px 16px !important;
  background: var(--hh-orange) !important; color: #FFFFFF !important; border: none !important;
  border-radius: var(--hh-radius-sm) !important; font-family: var(--hh-font) !important;
  font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important;
  text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important;
  text-indent: 0 !important; box-shadow: none !important; float: none !important;
  height: auto !important; min-height: unset !important; line-height: 1.4 !important;
  aspect-ratio: unset !important; transition: var(--hh-transition) !important;
}

/* KILL Electro's ::before icon (the circle arrow) */
.products > .product .added_to_cart::before, .products > .product .add-to-cart-wrap .button::before,
.products > .product .add-to-cart-wrap a.button::before, .owl-item > .product .added_to_cart::before,
.owl-item > .product .add-to-cart-wrap .button::before, li.product .add-to-cart-wrap .button::before,
li.product .add-to-cart-wrap a.button::before, .add_to_cart_button::before, li.product .button::before {
  display: none !important; content: none !important;
}

.products > .product .add-to-cart-wrap .button:hover, li.product .add-to-cart-wrap .button:hover,
.add_to_cart_button:hover, li.product .button:hover {
  background: var(--hh-orange-dark) !important; color: #fff !important;
  box-shadow: 0 4px 16px rgba(245,166,35,0.35) !important; transform: none !important;
}
.add_to_cart_button.added, .add_to_cart_button.wc-forward { background: var(--hh-green) !important; }

/* Hide Electro hover overlays */
li.product .hover-area { display: none !important; }
.products > .product:not(.owl-loaded):hover > .product-outer { background: transparent !important; box-shadow: none !important; }
.products > .product:not(.owl-loaded) > .product-outer .add-to-cart-wrap,
.products > .product:not(.owl-loaded):hover > .product-outer .add-to-cart-wrap { opacity: 1 !important; visibility: visible !important; display: block !important; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.hh-section-header { margin-bottom: 40px; }
.hh-section-header--center { text-align: center; }
.hh-section-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hh-orange); margin-bottom: 10px; }
.hh-section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--hh-text); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; }
.hh-section-desc { font-size: 16px; color: var(--hh-text-muted); line-height: 1.7; max-width: 560px; }
.hh-section-header--center .hh-section-desc { margin: 0 auto; }
.hh-section-link { font-size: 14px; font-weight: 600; color: var(--hh-orange); display: inline-flex; align-items: center; gap: 4px; transition: var(--hh-transition); }
.hh-section-link:hover { gap: 8px; color: var(--hh-orange-dark); }

/* ============================================================
   STORES — HORIZONTAL SCROLL
   ============================================================ */
.hh-stores-scroll { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.hh-stores-scroll::-webkit-scrollbar { display: none; }
.hh-store-chip { flex-shrink: 0; background: var(--hh-white); border: 1.5px solid var(--hh-border); border-radius: var(--hh-radius-lg); padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 140px; text-align: center; cursor: pointer; transition: var(--hh-transition); scroll-snap-align: start; text-decoration: none; }
.hh-store-chip:hover { border-color: var(--hh-orange); box-shadow: 0 4px 16px rgba(245,166,35,0.14); transform: translateY(-3px); }
.hh-store-chip__logo { width: 56px; height: 56px; border-radius: var(--hh-radius); object-fit: contain; background: var(--hh-gray-50); padding: 6px; }
.hh-store-chip__name { font-size: 12px; font-weight: 700; color: var(--hh-text); line-height: 1.3; }
.hh-store-chip__meta { font-size: 11px; color: var(--hh-text-light); }
.hh-store-chip__halal { font-size: 10px; background: var(--hh-green-light); color: var(--hh-halal-green); padding: 2px 8px; border-radius: var(--hh-radius-full); font-weight: 700; }

/* ============================================================
   SHOP BY CATEGORY
   ============================================================ */
.hh-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.hh-cat-item { background: var(--hh-white); border: 1.5px solid var(--hh-border); border-radius: var(--hh-radius-lg); padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; cursor: pointer; transition: var(--hh-transition); text-decoration: none; }
.hh-cat-item:hover { border-color: var(--hh-orange); background: var(--hh-orange-light); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(245,166,35,0.14); }
.hh-cat-item__icon { width: 56px; height: 56px; background: var(--hh-gray-50); border-radius: var(--hh-radius); display: flex; align-items: center; justify-content: center; font-size: 26px; transition: background 0.2s ease; }
.hh-cat-item:hover .hh-cat-item__icon { background: rgba(245,166,35,0.15); }
.hh-cat-item__name { font-size: 12px; font-weight: 600; color: var(--hh-text); line-height: 1.3; }
.hh-cat-item__count { font-size: 11px; color: var(--hh-text-light); }

/* ============================================================
   BROWSE DEALS
   ============================================================ */
.hh-deals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hh-deals-col { background: var(--hh-white); border: 1.5px solid var(--hh-border); border-radius: var(--hh-radius-lg); overflow: hidden; }
.hh-deals-col__header { padding: 20px 24px 16px; border-bottom: 1px solid var(--hh-border); display: flex; align-items: center; justify-content: space-between; }
.hh-deals-col__header h3 { font-size: 16px; font-weight: 700; color: var(--hh-text); margin: 0; }
.hh-deals-col--spotlight { background: linear-gradient(135deg, #FFF8F3 0%, #FFF8ED 100%); border-color: rgba(245,166,35,0.2); }
.hh-deals-col--spotlight .hh-deals-col__header h3 { color: var(--hh-orange); }
@media (max-width: 768px) { .hh-deals-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HORIZONTAL PRODUCT ROW + SCROLL ARROWS
   ============================================================ */
.hh-products-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.hh-products-row::-webkit-scrollbar { display: none; }
.hh-products-row .hh-product-card { flex-shrink: 0; width: 200px; scroll-snap-align: start; }
.hh-scroll-wrapper { position: relative; }
.hh-scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1.5px solid var(--hh-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; font-size: 18px; color: var(--hh-text); transition: var(--hh-transition); box-shadow: var(--hh-card-shadow); }
.hh-scroll-arrow:hover { background: var(--hh-orange); color: #fff; border-color: var(--hh-orange); }
.hh-scroll-arrow--prev { left: -16px; }
.hh-scroll-arrow--next { right: -16px; }

/* ============================================================
   DISCOVER APP SECTION
   ============================================================ */
.hh-app-section { background: linear-gradient(135deg, var(--hh-dark) 0%, #2d2d2d 100%); padding: 64px 24px; text-align: center; border-radius: var(--hh-radius-lg); margin: 0 24px; }
.hh-app-section h2 { color: #fff; font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.hh-app-section p { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 480px; margin: 0 auto 28px; }
.hh-app-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hh-app-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--hh-radius); padding: 12px 24px; color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: var(--hh-transition); text-decoration: none; }
.hh-app-btn:hover { background: var(--hh-orange); border-color: var(--hh-orange); color: #fff; }

/* ============================================================
   ETHICS SIDEBAR
   ============================================================ */
#hh-ethics-sidebar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: #fff; border: 1.5px solid var(--hh-border); border-radius: var(--hh-radius-lg) 0 0 var(--hh-radius-lg); box-shadow: var(--hh-card-shadow-hover); padding: 24px; width: 280px; z-index: 500; max-height: 80vh; overflow-y: auto; transition: transform 0.3s ease; }
#hh-ethics-sidebar.hidden { transform: translateY(-50%) translateX(100%); }
.hh-ethics-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: var(--hh-orange); color: #fff; border-radius: var(--hh-radius) 0 0 var(--hh-radius); padding: 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; writing-mode: vertical-rl; cursor: pointer; z-index: 499; box-shadow: -2px 0 12px rgba(245,166,35,0.3); }
.hh-ethics-tab:hover { background: var(--hh-orange-dark); }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.single-product .site-sidebar, .single-product #secondary { display: none !important; }
.single-product .woocommerce div.product { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: start !important; }
.woocommerce div.product div.images { border-radius: var(--hh-radius-lg) !important; overflow: hidden !important; border: 1.5px solid var(--hh-border) !important; background: var(--hh-gray-50) !important; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img { height: 400px !important; width: 100% !important; object-fit: contain !important; padding: 24px !important; background: var(--hh-gray-50) !important; }
.woocommerce div.product div.summary { position: sticky !important; top: calc(var(--hh-header-h) + 24px) !important; }
.woocommerce div.product .product_title { font-size: 28px !important; font-weight: 800 !important; color: var(--hh-text) !important; letter-spacing: -0.02em !important; margin-bottom: 8px !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 28px !important; font-weight: 800 !important; color: var(--hh-text) !important; margin: 0 0 20px !important; padding: 0 !important; }
.klarna-payments-badge, .klarna-placement, .afterpay-payment-option, .affirm-element, [class*="klarna"], [class*="afterpay"], [class*="woopay"], [class*="affirm"], .wc-pay-later { display: none !important; }
.woocommerce div.product form.cart .qty { width: 60px !important; height: 48px !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-sm) !important; font-size: 16px !important; text-align: center !important; background: var(--hh-gray-50) !important; font-family: var(--hh-font) !important; }
.woocommerce div.product form.cart button[type="submit"], .single_add_to_cart_button { background: var(--hh-orange) !important; color: #fff !important; border: none !important; border-radius: var(--hh-radius-sm) !important; padding: 14px 32px !important; font-family: var(--hh-font) !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; height: 48px !important; text-transform: none !important; transition: var(--hh-transition) !important; }
.single_add_to_cart_button:hover { background: var(--hh-orange-dark) !important; box-shadow: 0 6px 24px rgba(245,166,35,0.3) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; border-bottom: 2px solid var(--hh-border) !important; display: flex !important; gap: 4px !important; margin-bottom: 28px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 14px !important; font-weight: 600 !important; color: var(--hh-text-muted) !important; padding: 12px 20px !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; display: block !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--hh-orange) !important; border-bottom-color: var(--hh-orange) !important; background: none !important; }
.related.products, .upsells.products { clear: both; width: 100% !important; margin-top: 48px !important; }
.related.products > h2, .upsells.products > h2 { font-size: 22px !important; font-weight: 800 !important; color: var(--hh-text) !important; margin-bottom: 24px !important; padding: 0 !important; }
.related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
@media (max-width: 768px) { .single-product .woocommerce div.product { grid-template-columns: 1fr !important; gap: 24px !important; } .woocommerce div.product div.summary { position: static !important; } }

/* ============================================================
   EMPTY CART — SAD BIRD
   ============================================================ */
.cart-empty { text-align: center !important; padding: 64px 24px !important; font-size: 18px !important; font-weight: 600 !important; color: var(--hh-text-muted) !important; }
.woocommerce .cart-empty::before { content: ''; display: block; width: 120px; height: 120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='56' fill='%23FFF8ED' stroke='%23FFD070' stroke-width='2'/%3E%3Cpath d='M38 55 Q60 35 82 55' stroke='%23F5A623' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='62' r='5' fill='%231A1A1A'/%3E%3Ccircle cx='72' cy='62' r='5' fill='%231A1A1A'/%3E%3Ccircle cx='49.5' cy='60.5' r='1.5' fill='white'/%3E%3Ccircle cx='73.5' cy='60.5' r='1.5' fill='white'/%3E%3Cpath d='M52 78 Q60 73 68 78' stroke='%231A1A1A' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; margin: 0 auto 20px; animation: hh-bob 2s ease-in-out infinite; }
.woocommerce .return-to-shop .button { background: var(--hh-orange) !important; color: #fff !important; border-radius: var(--hh-radius-full) !important; padding: 12px 28px !important; font-weight: 700 !important; font-family: var(--hh-font) !important; border: none !important; margin-top: 16px !important; display: inline-block !important; }
@keyframes hh-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce-checkout #customer_details, .woocommerce-checkout .col2-set { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
.woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout #order_review { background: var(--hh-white) !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-lg) !important; padding: 28px !important; }
.woocommerce-checkout h3 { font-size: 17px !important; font-weight: 700 !important; color: var(--hh-text) !important; margin: 0 0 20px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--hh-gray-100) !important; font-family: var(--hh-font) !important; }
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="number"], .woocommerce-checkout input[type="password"], .woocommerce-checkout select, .woocommerce-checkout textarea { width: 100% !important; padding: 11px 14px !important; font-size: 14px !important; font-family: var(--hh-font) !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-sm) !important; background: var(--hh-gray-50) !important; color: var(--hh-text) !important; outline: none !important; transition: var(--hh-transition) !important; -webkit-appearance: none !important; }
.woocommerce-checkout input:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { border-color: var(--hh-orange) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(245,166,35,0.15) !important; }
.woocommerce-checkout .form-row label { font-size: 12px !important; font-weight: 600 !important; color: var(--hh-text-muted) !important; margin-bottom: 5px !important; display: block !important; }
.woocommerce-checkout .required { color: var(--hh-orange) !important; }
#place_order { width: 100% !important; padding: 16px !important; background: var(--hh-orange) !important; color: #fff !important; border: none !important; border-radius: var(--hh-radius) !important; font-family: var(--hh-font) !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(245,166,35,0.3) !important; margin-top: 16px !important; transition: var(--hh-transition) !important; }
#place_order:hover { background: var(--hh-orange-dark) !important; transform: translateY(-1px) !important; }
@media (max-width: 768px) { .woocommerce-checkout #customer_details, .woocommerce-checkout .col2-set { grid-template-columns: 1fr !important; } }

/* ============================================================
   ACCOUNT PAGES
   ============================================================ */
.woocommerce-account .woocommerce { max-width: 480px !important; margin: 0 auto !important; padding: 48px 24px !important; }
.woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register { background: var(--hh-white) !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-lg) !important; padding: 36px !important; box-shadow: var(--hh-card-shadow) !important; }
.woocommerce-account .woocommerce form h2 { font-size: 24px !important; font-weight: 800 !important; color: var(--hh-text) !important; margin-bottom: 24px !important; }
.woocommerce-account .woocommerce input[type="text"], .woocommerce-account .woocommerce input[type="email"], .woocommerce-account .woocommerce input[type="password"] { width: 100% !important; padding: 13px 16px !important; font-size: 15px !important; font-family: var(--hh-font) !important; border: 1.5px solid var(--hh-border) !important; border-radius: var(--hh-radius-sm) !important; background: var(--hh-gray-50) !important; outline: none !important; }
.woocommerce-account .woocommerce input:focus { border-color: var(--hh-orange) !important; background: #fff !important; }
.woocommerce-account .woocommerce form .button, .woocommerce-account .button[type="submit"], .woocommerce-account input[type="submit"] { width: 100% !important; padding: 14px !important; background: var(--hh-orange) !important; color: #fff !important; border: none !important; border-radius: var(--hh-radius-sm) !important; font-size: 15px !important; font-weight: 700 !important; font-family: var(--hh-font) !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(245,166,35,0.3) !important; }
.woocommerce-account .woocommerce form label { font-size: 13px !important; font-weight: 600 !important; color: var(--hh-text-muted) !important; margin-bottom: 6px !important; display: block !important; }

/* ============================================================
   WC NOTICES, BREADCRUMB, PAGINATION
   ============================================================ */
.woocommerce-message, div.woocommerce-message { background: var(--hh-green-light) !important; color: var(--hh-green) !important; border-left: 4px solid var(--hh-green) !important; border-radius: var(--hh-radius-sm) !important; padding: 14px 18px !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }
.woocommerce-info { background: var(--hh-orange-light) !important; color: var(--hh-orange-dark) !important; border-left: 4px solid var(--hh-orange) !important; border-radius: var(--hh-radius-sm) !important; padding: 14px 18px !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }
.woocommerce-error { background: #FFF5F5 !important; color: #C62828 !important; border-left: 4px solid #C62828 !important; border-radius: var(--hh-radius-sm) !important; padding: 14px 18px !important; border-top: none !important; border-right: none !important; border-bottom: none !important; list-style: none !important; }
.woocommerce-breadcrumb { font-size: 13px !important; color: var(--hh-text-light) !important; padding: 16px 0 !important; margin-bottom: 0 !important; }
.woocommerce-breadcrumb a { color: var(--hh-text-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--hh-orange) !important; }
.woocommerce-pagination ul { display: flex !important; gap: 6px !important; justify-content: center !important; list-style: none !important; padding: 0 !important; margin: 32px 0 !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span { width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--hh-radius-sm) !important; border: 1.5px solid var(--hh-border) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--hh-text-muted) !important; transition: var(--hh-transition) !important; }
.woocommerce-pagination ul li a:hover { border-color: var(--hh-orange) !important; color: var(--hh-orange) !important; }
.woocommerce-pagination ul li span.current { background: var(--hh-orange) !important; color: #fff !important; border-color: var(--hh-orange) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer, footer.site-footer { background: var(--hh-dark) !important; color: rgba(255,255,255,0.7) !important; padding: 60px 0 32px !important; }
.site-footer a { color: rgba(255,255,255,0.7) !important; }
.site-footer a:hover { color: var(--hh-orange) !important; }
.site-footer h4, .site-footer .widget-title { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 16px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
.site-footer .widget ul li { padding: 4px 0 !important; font-size: 13px !important; }
.site-footer .site-info { border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 20px !important; margin-top: 40px !important; font-size: 12px !important; color: rgba(255,255,255,0.4) !important; }

/* ============================================================
   DELIVERY SLOTS + EBT BADGE
   ============================================================ */
.hh-delivery-slots-wrap { margin: 20px 0; }
.hh-delivery-slots-wrap h4 { font-size: 15px; font-weight: 700; color: var(--hh-text); margin-bottom: 12px; }
.hh-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.hh-slot-btn { border: 1.5px solid var(--hh-border); border-radius: var(--hh-radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 500; text-align: center; cursor: pointer; background: var(--hh-gray-50); color: var(--hh-text); transition: var(--hh-transition); }
.hh-slot-btn:hover, .hh-slot-btn.active { border-color: var(--hh-orange); background: var(--hh-orange-light); color: var(--hh-orange); font-weight: 700; }
.hh-slot-btn.full { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.hh-ebt-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--hh-ebt-bg); color: var(--hh-ebt-amber); border: 1px solid #FFD54F; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--hh-radius-full); position: absolute !important; top: 10px !important; left: 10px !important; z-index: 2 !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .hh-section { padding: 48px 0; }
  .hh-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hh-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SCROLLED HEADER + ANIMATED LOGO
   ============================================================ */
.hh-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important; }
.custom-logo-link:hover img, .site-branding a:hover img { animation: hh-logo-flutter 0.4s ease-in-out; }
@keyframes hh-logo-flutter { 0%{transform:rotate(0deg) scale(1)} 25%{transform:rotate(-3deg) scale(1.02)} 75%{transform:rotate(3deg) scale(1.02)} 100%{transform:rotate(0deg) scale(1)} }

/* ============================================================
   REVOLUTION SLIDER Z-INDEX FIX
   ============================================================ */
.rev_slider_wrapper, .rev_slider, .home-v1-hero, .home-hero, .tp-banner-container { z-index: 1 !important; position: relative !important; margin-top: 0 !important; }

/* ============================================================
   ELECTRO CARD-SPECIFIC CLEANUP
   ============================================================ */
li.product.product-card .card-body, li.product.product-card .card-body-inner { padding: 0 !important; border: none !important; background: transparent !important; }
li.product .product-media-object { display: block !important; }
li.product::after, li.product::before { display: none !important; }
ul.products::after, ul.products::before { display: none !important; }
li.product .price-cart-wrap, li.product .price-add-to-cart-wrap { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; }

/* ============================================================
   MICRO-ANIMATIONS & MOTION DESIGN
   ============================================================ */

/* ── Page entrance ── */
@keyframes hh-page-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#content, .site-content { animation: hh-page-fadein .45s ease both; }

/* ── Header slide-down on load ── */
@keyframes hh-header-drop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
#masthead.site-header { animation: hh-header-drop .5s cubic-bezier(.34,1.3,.64,1) both; }

/* ── Scrolled header — subtle shadow appears ── */
#masthead.hh-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important; transition: box-shadow .3s ease; }

/* ── Logo hover flutter (already partially in CSS, enhanced) ── */
@keyframes hh-logo-flutter {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-4deg) scale(1.04) translateY(-2px); }
  50%  { transform: rotate(3deg)  scale(1.04) translateY(-3px); }
  80%  { transform: rotate(-2deg) scale(1.02) translateY(-1px); }
  100% { transform: rotate(0deg) scale(1); }
}
.hh-logo-area a:hover img,
.custom-logo-link:hover img { animation: hh-logo-flutter 0.5s ease-in-out forwards !important; }

/* ── Product cards ── */
li.product, .product-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
li.product:hover, .product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.13) !important;
  z-index: 2 !important;
}

/* Product image zoom on hover */
li.product:hover .product-media-object img,
li.product:hover .attachment-woocommerce_thumbnail,
li.product:hover .wp-post-image {
  transform: scale(1.06) !important;
  transition: transform .35s ease !important;
}
li.product .product-media-object img,
li.product .attachment-woocommerce_thumbnail,
li.product .wp-post-image {
  transition: transform .35s ease !important;
  overflow: hidden;
}
li.product .product-media-object { overflow: hidden !important; }

/* ── Add to cart button pulse on hover ── */
@keyframes hh-btn-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
button[name="add-to-cart"]:hover { animation: hh-btn-ripple .55s ease-out !important; }

/* ── Nav links — underline slide in ── */
ul.secondary-nav > li > a,
.secondary-nav li > a { position: relative !important; }
ul.secondary-nav > li > a::after,
.secondary-nav li > a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px;
  background: var(--hh-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
  border-radius: 2px;
}
ul.secondary-nav > li > a:hover::after,
ul.secondary-nav > li.current-menu-item > a::after { transform: scaleX(1) !important; }

/* ── Category pill bounce on hover ── */
.hh-category-pill {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease !important;
}
.hh-category-pill:hover { transform: translateY(-3px) scale(1.05) !important; }

/* ── Search bar — gentle scale on focus ── */
form.navbar-search:focus-within .input-group {
  transform: scaleY(1.04) !important;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease !important;
}

/* ── Deliver-to pill — lift on hover ── */
.hh-deliver-to {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.hh-deliver-to:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
  border-color: var(--hh-orange) !important;
}

/* ── Scroll-reveal for page sections ── */
@keyframes hh-reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hh-reveal {
  opacity: 0;
  animation: hh-reveal-up .55s cubic-bezier(.4,0,.2,1) forwards;
}
.hh-reveal.hh-delay-1 { animation-delay: .08s; }
.hh-reveal.hh-delay-2 { animation-delay: .16s; }
.hh-reveal.hh-delay-3 { animation-delay: .24s; }
.hh-reveal.hh-delay-4 { animation-delay: .32s; }

/* ── Announcement ticker text ── */
.hh-tick-item { transition: opacity .5s ease !important; }

/* ── Top bar links ── */
.hh-top-nav-list li a {
  transition: color .15s ease !important;
  position: relative;
}

/* ── Preloader fade out ── */
@keyframes hh-preloader-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#hh-preloader.done { animation: hh-preloader-out .4s .3s ease forwards !important; }

/* ── Orange shimmer on buttons (CTA) ── */
@keyframes hh-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.button.alt, .wc-proceed-to-checkout .checkout-button,
.single_add_to_cart_button {
  background-size: 200% auto !important;
  background-image: linear-gradient(90deg, var(--hh-orange) 0%, #FFD080 40%, var(--hh-orange) 60%, var(--hh-orange-dark) 100%) !important;
  transition: background-position .4s ease !important;
}
.button.alt:hover, .wc-proceed-to-checkout .checkout-button:hover,
.single_add_to_cart_button:hover {
  background-position: right center !important;
}

/* ── Staggered product grid entrance ── */
@keyframes hh-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
ul.products li.product:nth-child(1)  { animation: hh-card-in .4s  .05s ease both; }
ul.products li.product:nth-child(2)  { animation: hh-card-in .4s  .10s ease both; }
ul.products li.product:nth-child(3)  { animation: hh-card-in .4s  .15s ease both; }
ul.products li.product:nth-child(4)  { animation: hh-card-in .4s  .20s ease both; }
ul.products li.product:nth-child(5)  { animation: hh-card-in .4s  .25s ease both; }
ul.products li.product:nth-child(6)  { animation: hh-card-in .4s  .30s ease both; }
ul.products li.product:nth-child(7)  { animation: hh-card-in .4s  .35s ease both; }
ul.products li.product:nth-child(8)  { animation: hh-card-in .4s  .40s ease both; }
ul.products li.product:nth-child(n+9){ animation: hh-card-in .4s  .45s ease both; }

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}