/* FIX176 — Premium Header + Icon polish for Spaceland Home only */
body.sp-ios-home{
  --sp176-ink:#111827;
  --sp176-text:#1f2937;
  --sp176-subtle:#6b7280;
  --sp176-line:#e7eaf0;
  --sp176-soft:#f7f8fb;
  --sp176-surface:#ffffff;
  --sp176-brand:#f36b2d;
  --sp176-brand-soft:#fff2ea;
  --sp176-deep:#0f172a;
  --sp176-glow:0 18px 44px rgba(15,23,42,.10);
  --sp176-soft-shadow:0 10px 26px rgba(15,23,42,.08);
  --sp176-header-radius:28px;
  --sp176-control-radius:22px;
  --sp176-btn-size:58px;
  --sp176-safe-top:max(10px, env(safe-area-inset-top, 0px));
}

/* Header shell */
body.sp-ios-home .sl-online-header{
  position:sticky!important;
  top:0!important;
  z-index:180!important;
  padding:var(--sp176-safe-top) 0 14px!important;
  border:0!important;
  background:
    linear-gradient(180deg, rgba(247,248,251,.96) 0%, rgba(247,248,251,.92) 84%, rgba(247,248,251,.68) 100%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  transition:padding .2s ease, box-shadow .2s ease, background .2s ease!important;
}
body.sp-ios-home .sl-online-header::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.10), rgba(15,23,42,0));
  pointer-events:none;
}
body.sp-ios-home.sp176-header-scrolled .sl-online-header{
  padding-top:max(6px, env(safe-area-inset-top, 0px))!important;
  box-shadow:0 12px 34px rgba(15,23,42,.08)!important;
}
body.sp-ios-home .sl-online-header-inner{
  width:min(calc(100% - 38px), 1320px)!important;
  max-width:1320px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:84px!important;
  margin-inline:auto!important;
  padding:10px!important;
  border:1px solid rgba(226,230,238,.85)!important;
  border-radius:var(--sp176-header-radius)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:var(--sp176-glow)!important;
}

/* Logo */
body.sp-ios-home .sl-header-logo-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:74px!important;
  min-height:74px!important;
  padding:8px!important;
  border:1px solid rgba(243,107,45,.14)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0%, rgba(255,248,240,.92) 42%, rgba(255,239,227,.88) 100%)!important;
  box-shadow:0 12px 30px rgba(243,107,45,.10), inset 0 1px 0 rgba(255,255,255,.8)!important;
  transition:transform .16s ease, box-shadow .16s ease!important;
}
body.sp-ios-home .sl-header-logo-link:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 18px 34px rgba(243,107,45,.14), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body.sp-ios-home .sl-header-logo-link,
body.sp-ios-home .sl-header-logo{
  width:58px!important;
  height:58px!important;
}
body.sp-ios-home .sl-header-logo{
  object-fit:contain!important;
  filter:drop-shadow(0 6px 14px rgba(243,107,45,.14))!important;
}

/* Search */
body.sp-ios-home .sl-header-search{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  height:62px!important;
  min-width:0!important;
  padding-inline:18px!important;
  border:1px solid var(--sp176-line)!important;
  border-radius:var(--sp176-control-radius)!important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfcfe 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 4px 18px rgba(15,23,42,.04)!important;
  overflow:hidden!important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease!important;
}
body.sp-ios-home .sl-header-search::before{
  content:"⌕";
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-inline-start:2px;
  border-radius:12px;
  color:#94a3b8;
  font-size:20px;
  font-weight:700;
  background:linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
body.sp-ios-home .sl-header-search:focus-within{
  border-color:rgba(243,107,45,.38)!important;
  box-shadow:0 0 0 4px rgba(243,107,45,.09), 0 12px 26px rgba(243,107,45,.10)!important;
  transform:translateY(-1px)!important;
}
body.sp-ios-home .sl-header-search-input{
  flex:1 1 auto!important;
  min-width:0!important;
  height:100%!important;
  padding-inline:14px 6px!important;
  border:0!important;
  background:transparent!important;
  color:var(--sp176-text)!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
body.sp-ios-home .sl-header-search-input::placeholder{
  color:#94a3b8!important;
  font-size:18px!important;
  font-weight:700!important;
}
body.sp-ios-home .sl-header-search-input:focus{
  outline:none!important;
}

/* Header icon buttons */
body.sp-ios-home .sl-header-scan,
body.sp-ios-home .sl-header-cart{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:var(--sp176-btn-size)!important;
  min-width:var(--sp176-btn-size)!important;
  height:var(--sp176-btn-size)!important;
  padding:0!important;
  border:1px solid rgba(15,23,42,.06)!important;
  border-radius:20px!important;
  background:
    linear-gradient(180deg, rgba(17,24,39,.98) 0%, rgba(15,23,42,.96) 100%)!important;
  color:#ffffff!important;
  box-shadow:0 14px 28px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.08)!important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease!important;
}
body.sp-ios-home .sl-header-scan:hover,
body.sp-ios-home .sl-header-cart:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg, #141c2e 0%, #0f172a 100%)!important;
}
body.sp-ios-home .sl-header-scan svg,
body.sp-ios-home .sl-header-cart svg,
body.sp-ios-home .sl-header-scan i,
body.sp-ios-home .sl-header-cart i{
  width:24px!important;
  height:24px!important;
  font-size:24px!important;
  color:currentColor!important;
}
body.sp-ios-home .sl-header-scan::after,
body.sp-ios-home .sl-header-cart::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

/* Cart count / badges: support multiple existing runtimes */
body.sp-ios-home .sl-header-cart .cart-badge,
body.sp-ios-home .sl-header-cart .badge,
body.sp-ios-home .sl-header-cart .count,
body.sp-ios-home .sl-header-cart .cart-count,
body.sp-ios-home .sl-header-cart .sl-cart-badge,
body.sp-ios-home .sl-header-cart .sl-header-badge,
body.sp-ios-home .sl-header-cart > span:not(:only-child),
body.sp-ios-home .sl-header-scan .badge{
  position:absolute!important;
  top:-6px!important;
  left:-6px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:23px!important;
  height:23px!important;
  padding-inline:6px!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ff553d 0%, #ef2f2a 100%)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 12px 22px rgba(239,47,42,.22)!important;
  z-index:3!important;
}

/* Generic icon polish on home */
body.sp-ios-home .sp174-service-icon,
body.sp-ios-home .sp-ios-highlight-core{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.06)!important;
}
body.sp-ios-home .sp174-service-icon{
  border:1px solid rgba(243,107,45,.08)!important;
  background:linear-gradient(180deg,#fff8f3 0%, #ffffff 100%)!important;
}
body.sp-ios-home .sp-ios-highlight-core{
  background:linear-gradient(180deg,#ffffff 0%, #fbfbfe 100%)!important;
}
body.sp-ios-home .heroicon,
body.sp-ios-home .bottom-nav .nav-btn svg{
  stroke-width:1.9!important;
}
body.sp-ios-home .bottom-nav .nav-btn{
  border-radius:18px!important;
  box-shadow:0 12px 24px rgba(15,23,42,.08)!important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease!important;
}
body.sp-ios-home .bottom-nav .nav-btn:hover{
  transform:translateY(-1px)!important;
}
body.sp-ios-home .bottom-nav .nav-btn.active{
  background:linear-gradient(180deg,#111827 0%, #0f172a 100%)!important;
  color:#fff!important;
}

/* Compact states for medium screens */
@media (max-width:1200px){
  body.sp-ios-home .sl-online-header-inner{
    width:min(calc(100% - 24px), 1320px)!important;
    gap:12px!important;
    padding:8px!important;
    min-height:78px!important;
  }
  body.sp-ios-home .sl-header-logo-link{
    min-width:66px!important;
    min-height:66px!important;
    border-radius:22px!important;
  }
  body.sp-ios-home .sl-header-search{
    height:58px!important;
  }
  body.sp-ios-home .sl-header-search-input,
  body.sp-ios-home .sl-header-search-input::placeholder{
    font-size:16px!important;
  }
  body.sp-ios-home .sl-header-scan,
  body.sp-ios-home .sl-header-cart{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    border-radius:18px!important;
  }
}

/* Tablet / mobile */
@media (max-width:860px){
  body.sp-ios-home .sl-online-header{
    padding-bottom:10px!important;
  }
  body.sp-ios-home .sl-online-header-inner{
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
    gap:10px!important;
    min-height:72px!important;
    padding:8px!important;
    border-radius:24px!important;
  }
  body.sp-ios-home .sl-header-logo-link{
    min-width:58px!important;
    min-height:58px!important;
    padding:7px!important;
    border-radius:19px!important;
  }
  body.sp-ios-home .sl-header-logo-link,
  body.sp-ios-home .sl-header-logo{
    width:46px!important;
    height:46px!important;
  }
  body.sp-ios-home .sl-header-search{
    height:54px!important;
    border-radius:18px!important;
    padding-inline:14px!important;
  }
  body.sp-ios-home .sl-header-search::before{
    width:30px;height:30px;font-size:18px;border-radius:10px;
  }
  body.sp-ios-home .sl-header-search-input,
  body.sp-ios-home .sl-header-search-input::placeholder{
    font-size:15px!important;
  }
  body.sp-ios-home .sl-header-scan,
  body.sp-ios-home .sl-header-cart{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    border-radius:16px!important;
  }
  body.sp-ios-home .sl-header-scan svg,
  body.sp-ios-home .sl-header-cart svg{
    width:21px!important;
    height:21px!important;
  }
}

/* Narrow mobile: keep clean and balanced */
@media (max-width:560px){
  body.sp-ios-home .sl-online-header{
    padding:calc(6px + env(safe-area-inset-top,0px)) 0 8px!important;
  }
  body.sp-ios-home .sl-online-header-inner{
    width:min(calc(100% - 14px), 1320px)!important;
    gap:8px!important;
    padding:7px!important;
    min-height:68px!important;
  }
  body.sp-ios-home .sl-header-logo-link{
    min-width:52px!important;
    min-height:52px!important;
    border-radius:17px!important;
  }
  body.sp-ios-home .sl-header-logo-link,
  body.sp-ios-home .sl-header-logo{
    width:42px!important;
    height:42px!important;
  }
  body.sp-ios-home .sl-header-search{
    height:48px!important;
    border-radius:16px!important;
    padding-inline:11px!important;
  }
  body.sp-ios-home .sl-header-search::before{
    width:26px;height:26px;font-size:16px;border-radius:9px;margin-inline-start:1px;
  }
  body.sp-ios-home .sl-header-search-input,
  body.sp-ios-home .sl-header-search-input::placeholder{
    font-size:14px!important;
    padding-inline:10px 4px!important;
  }
  body.sp-ios-home .sl-header-scan,
  body.sp-ios-home .sl-header-cart{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    border-radius:14px!important;
    box-shadow:0 10px 22px rgba(15,23,42,.12)!important;
  }
  body.sp-ios-home .sl-header-scan svg,
  body.sp-ios-home .sl-header-cart svg{
    width:19px!important;
    height:19px!important;
  }
  body.sp-ios-home .sl-header-cart .cart-badge,
  body.sp-ios-home .sl-header-cart .badge,
  body.sp-ios-home .sl-header-cart .count,
  body.sp-ios-home .sl-header-cart .cart-count,
  body.sp-ios-home .sl-header-cart .sl-cart-badge,
  body.sp-ios-home .sl-header-cart .sl-header-badge,
  body.sp-ios-home .sl-header-cart > span:not(:only-child){
    top:-5px!important;
    left:-5px!important;
    min-width:20px!important;
    height:20px!important;
    font-size:10px!important;
  }
}