/* FIX179 — Responsive single-line header
   Goal: logo + search + camera + cart always stay in ONE row on phones/tablets. */

body.sp-ios-home{
  --sp179-header-gap:clamp(4px,1.2vw,10px);
  --sp179-edge:clamp(5px,1.8vw,12px);
  --sp179-logo-slot:clamp(34px,10.2vw,48px);
  --sp179-action-slot:clamp(34px,9.8vw,46px);
  --sp179-control-h:clamp(36px,10.8vw,48px);
  --sp179-radius:clamp(12px,3.4vw,17px);
}

/* Phones and small tablets */
@media (max-width:899px){
  body.sp-ios-home .sl-online-header{
    padding:5px 0 6px!important;
  }

  body.sp-ios-home .sl-online-header-inner{
    box-sizing:border-box!important;
    width:calc(100% - (var(--sp179-edge) * 2))!important;
    max-width:none!important;
    min-width:0!important;
    min-height:calc(var(--sp179-control-h) + 10px)!important;
    margin-inline:var(--sp179-edge)!important;
    padding:5px!important;

    display:grid!important;
    grid-template-columns:
      var(--sp179-logo-slot)
      minmax(0,1fr)
      var(--sp179-action-slot)
      var(--sp179-action-slot)!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:column!important;

    gap:var(--sp179-header-gap)!important;
    align-items:center!important;

    border:1px solid rgba(15,23,42,.055)!important;
    border-radius:calc(var(--sp179-radius) + 3px)!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(15,23,42,.045)!important;

    overflow:visible!important;
    transform:none!important;
  }

  /* LOGO SLOT */
  body.sp-ios-home .sl-header-logo-link{
    box-sizing:border-box!important;
    grid-column:1!important;
    grid-row:1!important;

    width:var(--sp179-logo-slot)!important;
    min-width:var(--sp179-logo-slot)!important;
    max-width:var(--sp179-logo-slot)!important;
    height:var(--sp179-control-h)!important;
    min-height:var(--sp179-control-h)!important;
    max-height:var(--sp179-control-h)!important;

    margin:0!important;
    padding:clamp(2px,.7vw,4px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:0!important;
    border-radius:var(--sp179-radius)!important;
    background:#fff6ef!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:hidden!important;
  }

  body.sp-ios-home .sl-header-logo{
    width:min(100%, calc(var(--sp179-control-h) - 6px))!important;
    height:min(100%, calc(var(--sp179-control-h) - 6px))!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    filter:none!important;
  }

  /* SEARCH SLOT — owns all remaining width */
  body.sp-ios-home .sl-header-search{
    box-sizing:border-box!important;
    grid-column:2!important;
    grid-row:1!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--sp179-control-h)!important;
    min-height:var(--sp179-control-h)!important;
    max-height:var(--sp179-control-h)!important;

    margin:0!important;
    padding-inline:clamp(6px,1.8vw,10px)!important;
    display:flex!important;
    align-items:center!important;

    border:1px solid #edf0f4!important;
    border-radius:var(--sp179-radius)!important;
    background:#f7f8fa!important;
    box-shadow:none!important;
    overflow:hidden!important;
    transform:none!important;
  }

  body.sp-ios-home .sl-header-search::before{
    content:""!important;
    width:clamp(14px,3.8vw,17px)!important;
    min-width:clamp(14px,3.8vw,17px)!important;
    height:clamp(14px,3.8vw,17px)!important;
    flex:0 0 clamp(14px,3.8vw,17px)!important;

    margin:0 clamp(2px,.7vw,4px)!important;
    border:0!important;
    border-radius:0!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E")!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    box-shadow:none!important;
  }

  body.sp-ios-home .sl-header-search-input{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;

    padding:0 clamp(3px,1vw,7px)!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;

    color:#283447!important;
    font-size:clamp(11px,3.25vw,14px)!important;
    font-weight:750!important;
    line-height:1!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  body.sp-ios-home .sl-header-search-input::placeholder{
    font-size:clamp(10px,3vw,13px)!important;
    font-weight:650!important;
    color:#9aa3b2!important;
  }

  /* CAMERA + CART */
  body.sp-ios-home .sl-header-scan{
    grid-column:3!important;
    grid-row:1!important;
  }
  body.sp-ios-home .sl-header-cart{
    grid-column:4!important;
    grid-row:1!important;
  }

  body.sp-ios-home .sl-header-scan,
  body.sp-ios-home .sl-header-cart{
    box-sizing:border-box!important;
    width:var(--sp179-action-slot)!important;
    min-width:var(--sp179-action-slot)!important;
    max-width:var(--sp179-action-slot)!important;
    height:var(--sp179-control-h)!important;
    min-height:var(--sp179-control-h)!important;
    max-height:var(--sp179-control-h)!important;

    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:0!important;
    border-radius:var(--sp179-radius)!important;
    background:#111827!important;
    color:#fff!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:visible!important;
  }

  body.sp-ios-home .sl-header-scan svg,
  body.sp-ios-home .sl-header-cart svg{
    width:clamp(17px,4.9vw,22px)!important;
    height:clamp(17px,4.9vw,22px)!important;
    flex:0 0 auto!important;
  }

  /* Counter scales with screen, but never pushes the row */
  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:clamp(-5px,-1.1vw,-3px)!important;
    left:clamp(-5px,-1.1vw,-3px)!important;
    min-width:clamp(17px,4.7vw,21px)!important;
    height:clamp(17px,4.7vw,21px)!important;
    padding-inline:4px!important;
    font-size:clamp(8px,2.4vw,10px)!important;
    line-height:1!important;
  }
}

/* Very narrow phones: 320–359 */
@media (max-width:359px){
  body.sp-ios-home{
    --sp179-header-gap:3px;
    --sp179-edge:4px;
    --sp179-logo-slot:32px;
    --sp179-action-slot:32px;
    --sp179-control-h:34px;
    --sp179-radius:11px;
  }

  body.sp-ios-home .sl-online-header-inner{
    padding:4px!important;
  }

  body.sp-ios-home .sl-header-search{
    padding-inline:5px!important;
  }

  body.sp-ios-home .sl-header-search-input,
  body.sp-ios-home .sl-header-search-input::placeholder{
    font-size:10px!important;
  }

  body.sp-ios-home .sl-header-search::before{
    width:13px!important;
    min-width:13px!important;
    height:13px!important;
    flex-basis:13px!important;
  }

  body.sp-ios-home .sl-header-scan svg,
  body.sp-ios-home .sl-header-cart svg{
    width:16px!important;
    height:16px!important;
  }
}

/* Standard Android / iPhone widths */
@media (min-width:360px) and (max-width:430px){
  body.sp-ios-home{
    --sp179-logo-slot:clamp(36px,9.8vw,42px);
    --sp179-action-slot:clamp(36px,9.5vw,41px);
    --sp179-control-h:clamp(38px,10.2vw,44px);
  }
}

/* Large phones / foldables */
@media (min-width:431px) and (max-width:599px){
  body.sp-ios-home{
    --sp179-logo-slot:44px;
    --sp179-action-slot:43px;
    --sp179-control-h:46px;
    --sp179-header-gap:7px;
  }

  body.sp-ios-home .sl-online-header-inner{
    width:calc(100% - 16px)!important;
    margin-inline:8px!important;
  }
}

/* Tablet: still one line, but comfortable proportions */
@media (min-width:600px) and (max-width:899px){
  body.sp-ios-home{
    --sp179-logo-slot:50px;
    --sp179-action-slot:48px;
    --sp179-control-h:50px;
    --sp179-header-gap:9px;
    --sp179-edge:12px;
    --sp179-radius:16px;
  }

  body.sp-ios-home .sl-online-header-inner{
    width:min(calc(100% - 24px), 980px)!important;
    margin-inline:auto!important;
    padding:7px!important;
  }

  body.sp-ios-home .sl-header-search-input{
    font-size:14px!important;
  }
}

/* Desktop: retain the current premium desktop header. */
@media (min-width:900px){
  body.sp-ios-home .sl-online-header-inner{
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
  }
}