/* FIX172 — Spaceland Storefront Form-Factor UI
   Purpose: correct 600–767 viewport handling, compact native phone chrome,
   fix 3-item bottom navigation, align product-card geometry, and make desktop
   feel designed for mouse/large screens rather than like a stretched phone. */

body.sp-ios-storefront{
  --sp172-ink:#1d1d1f;
  --sp172-muted:#6e6e73;
  --sp172-surface:#fff;
  --sp172-canvas:#f5f5f7;
  --sp172-line:rgba(60,60,67,.10);
  --sp172-accent:#6b5ce7;
  --sp172-shadow:0 10px 34px rgba(0,0,0,.055);
  --sp172-shadow-hover:0 18px 46px rgba(0,0,0,.095);
  --sp172-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- shared correctness ---------- */
body.sp-ios-home .sp-ios-rail{
  min-width:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:inline proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
body.sp-ios-home .sp-ios-rail::-webkit-scrollbar{display:none}
body.sp-ios-home .sp-ios-rail > *{scroll-snap-align:start}

body.sp-ios-home .sp-ios-featured-card{
  overflow:hidden;
  background:#fff;
}
body.sp-ios-home .sp-ios-featured-media{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#fff!important;
}
body.sp-ios-home .sp-ios-featured-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:8px!important;
  box-sizing:border-box!important;
}
body.sp-ios-home .sp-ios-featured-copy{
  min-width:0;
}
body.sp-ios-home .sp-ios-featured-copy strong{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
body.sp-ios-home .sp-ios-featured-price{
  display:block;
  margin-top:auto;
  padding-top:8px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Existing page has exactly three nav destinations. Make the visual rail three equal tabs. */
body.sp-ios-home .bottom-nav{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.sp-ios-home .bottom-nav .nav-btn{
  min-width:0!important;
}

/* WhatsApp must never sit on top of products/offers. */
@media (max-width:1023px){
  body.sp-ios-home .sp-floating-whatsapp{
    position:fixed!important;
    right:14px!important;
    left:auto!important;
    bottom:calc(76px + var(--sp172-safe-bottom))!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    z-index:118!important;
  }
  body.sp-ios-home .sp-floating-whatsapp-text{display:none!important}
  body.sp-ios-home .sp-floating-whatsapp-icon{margin:0!important}
}

/* ---------- phone: <=599 ---------- */
@media (max-width:599px){
  body.sp-ios-home{
    background:#fff!important;
    padding-bottom:calc(76px + var(--sp172-safe-bottom))!important;
  }

  /* Native app bar rather than compressed desktop header. */
  body.sp-ios-home .sl-online-header{
    position:sticky!important;
    top:0!important;
    z-index:125!important;
    border-bottom:1px solid rgba(60,60,67,.08)!important;
    background:rgba(255,255,255,.90)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;
    backdrop-filter:blur(22px) saturate(1.5)!important;
  }
  body.sp-ios-home .sl-online-header-inner{
    width:100%!important;
    min-height:66px!important;
    padding:8px 12px!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  body.sp-ios-home .sl-header-logo-link{
    width:46px!important;height:46px!important;
  }
  body.sp-ios-home .sl-header-logo{
    width:46px!important;height:46px!important;
    object-fit:contain!important;
  }
  body.sp-ios-home .sl-header-search{
    height:46px!important;
    min-width:0!important;
    width:100%!important;
    border-radius:15px!important;
    background:#f2f2f7!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.sp-ios-home .sl-header-search-input{
    min-width:0!important;
    font-size:13px!important;
    font-weight:650!important;
    padding-inline:13px 48px!important;
  }
  body.sp-ios-home .sl-header-scan{
    width:38px!important;height:38px!important;
    border-radius:12px!important;
  }
  body.sp-ios-home .sl-header-cart{display:none!important}
  body.sp-ios-home .home-mobile-search-card{display:none!important}

  body.sp-ios-home .shell{
    width:100%!important;
    max-width:none!important;
    padding:12px 12px 24px!important;
    box-sizing:border-box!important;
  }
  body.sp-ios-home .sp-ios-discovery{
    gap:22px!important;
  }
  body.sp-ios-home .sp-ios-block{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.sp-ios-home .sp-ios-block-head{
    margin-bottom:10px!important;
    padding-inline:2px!important;
  }
  body.sp-ios-home .sp-ios-block-head h2{
    font-size:20px!important;
    letter-spacing:-.25px;
  }
  body.sp-ios-home .sp-ios-block-head p{
    margin-top:2px!important;
    color:var(--sp172-muted)!important;
  }

  body.sp-ios-home .sp-ios-highlights{
    gap:10px!important;
    margin-inline:-12px!important;
    padding-inline:12px 18px!important;
    scroll-padding-inline:12px!important;
  }
  body.sp-ios-home .sp-ios-highlight{
    flex:0 0 72px!important;
  }
  body.sp-ios-home .sp-ios-highlight-ring{
    width:62px!important;height:62px!important;
  }
  body.sp-ios-home .sp-ios-highlight strong{
    max-width:72px;
    min-height:30px;
    font-size:10.5px!important;
    line-height:1.35!important;
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    gap:10px!important;
    margin-inline:-12px!important;
    padding-inline:12px 18px!important;
    scroll-padding-inline:12px!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    flex:0 0 clamp(154px,44vw,184px)!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(60,60,67,.09)!important;
    border-radius:18px!important;
    box-shadow:0 3px 14px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-featured-media{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  body.sp-ios-home .sp-ios-featured-copy{
    display:flex!important;
    flex:1!important;
    flex-direction:column!important;
    padding:9px 10px 11px!important;
  }
  body.sp-ios-home .sp-ios-featured-copy strong{
    font-size:12px!important;
    line-height:1.45!important;
    min-height:35px!important;
  }
  body.sp-ios-home .sp-ios-featured-price{
    font-size:13px!important;
    font-weight:900!important;
  }

  body.sp-ios-home .sp-ios-offer-card{
    flex:0 0 calc(100vw - 36px)!important;
    min-height:172px!important;
    border-radius:22px!important;
  }

  body.sp-ios-home .bottom-nav{
    right:8px!important;
    left:8px!important;
    bottom:calc(8px + var(--sp172-safe-bottom))!important;
    width:auto!important;
    max-width:none!important;
    height:60px!important;
    padding:4px!important;
    border:1px solid rgba(60,60,67,.10)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.93)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.12)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;
    backdrop-filter:blur(22px) saturate(1.5)!important;
    overflow:hidden!important;
  }
  body.sp-ios-home .bottom-nav .nav-btn{
    min-height:50px!important;
    border-radius:16px!important;
    padding:4px 2px!important;
    gap:2px!important;
  }
  body.sp-ios-home .bottom-nav .nav-btn svg{
    width:20px!important;height:20px!important;
  }
  body.sp-ios-home .bottom-nav .nav-btn span{
    font-size:9.5px!important;
  }
}

/* ---------- small tablet / foldables: 600–899 ---------- */
@media (min-width:600px) and (max-width:899px){
  body.sp-ios-home{
    background:#f5f5f7!important;
    padding-bottom:calc(82px + var(--sp172-safe-bottom))!important;
  }
  body.sp-ios-home .sl-online-header{
    position:sticky!important;
    top:0!important;
    z-index:125!important;
    background:rgba(255,255,255,.92)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    backdrop-filter:blur(20px)!important;
  }
  body.sp-ios-home .sl-online-header-inner{
    width:100%!important;
    min-height:72px!important;
    padding:9px 16px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.sp-ios-home .sl-header-logo-link,
  body.sp-ios-home .sl-header-logo{width:52px!important;height:52px!important}
  body.sp-ios-home .sl-header-search{
    height:48px!important;
    border-radius:16px!important;
    max-width:none!important;
  }
  body.sp-ios-home .sl-header-cart{display:none!important}
  body.sp-ios-home .home-mobile-search-card{display:none!important}

  body.sp-ios-home .shell{
    width:100%!important;
    max-width:none!important;
    padding:16px 16px 28px!important;
    box-sizing:border-box!important;
  }
  body.sp-ios-home .sp-ios-discovery{gap:16px!important}
  body.sp-ios-home .sp-ios-block{
    padding:16px!important;
    border-radius:24px!important;
    border:1px solid rgba(60,60,67,.08)!important;
    background:#fff!important;
    box-shadow:0 6px 24px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-highlights{
    gap:12px!important;
    padding:2px 4px 6px!important;
  }
  body.sp-ios-home .sp-ios-highlight{flex:0 0 78px!important}
  body.sp-ios-home .sp-ios-highlight-ring{width:66px!important;height:66px!important}

  /* 633px viewport now behaves like a small tablet, not a widened phone. */
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    width:100%!important;
    min-width:0!important;
    flex:none!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(60,60,67,.09)!important;
    border-radius:18px!important;
  }
  body.sp-ios-home .sp-ios-featured-media{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  body.sp-ios-home .sp-ios-featured-copy{
    display:flex!important;
    flex:1!important;
    flex-direction:column!important;
    padding:9px 10px 11px!important;
  }
  body.sp-ios-home .sp-ios-featured-copy strong{
    min-height:36px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  body.sp-ios-home .sp-ios-block--featured .sp-ios-featured-card:nth-child(n+7){
    display:none!important;
  }

  body.sp-ios-home .products{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.sp-ios-home .bottom-nav{
    right:50%!important;
    left:auto!important;
    transform:translateX(50%)!important;
    width:min(calc(100% - 24px),520px)!important;
    height:62px!important;
    bottom:calc(10px + var(--sp172-safe-bottom))!important;
    padding:4px!important;
    border-radius:22px!important;
    border:1px solid rgba(60,60,67,.10)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.10)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    backdrop-filter:blur(22px)!important;
  }
}

/* ---------- medium tablet / compact desktop: 900–1199 ---------- */
@media (min-width:900px) and (max-width:1199px){
  body.sp-ios-home .shell{
    --sp171-content:1120px!important;
    --sp171-gutter:20px!important;
  }
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
    overflow:visible!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    display:flex!important;
    flex-direction:column!important;
  }
  body.sp-ios-home .sp-ios-featured-media{aspect-ratio:4/5!important}
  body.sp-ios-home .sp-ios-featured-copy{
    display:flex!important;flex:1!important;flex-direction:column!important;
  }
  body.sp-ios-home .products{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* ---------- desktop: >=1200 ---------- */
@media (min-width:1200px){
  body.sp-ios-home .sl-online-header{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    border-bottom:1px solid rgba(60,60,67,.07)!important;
    background:rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.35)!important;
    backdrop-filter:blur(24px) saturate(1.35)!important;
  }
  body.sp-ios-home .sl-online-header-inner{
    min-height:76px!important;
  }
  body.sp-ios-home .shell{
    padding-top:28px!important;
  }

  /* Remove the 'large empty white panel' feeling while keeping grouped sections. */
  body.sp-ios-home .sp-ios-discovery{
    gap:28px!important;
  }
  body.sp-ios-home .sp-ios-block{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.sp-ios-home .sp-ios-block--highlights{
    padding:18px 22px 16px!important;
    border:1px solid rgba(60,60,67,.075)!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 8px 30px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-highlights{
    grid-template-columns:repeat(8,minmax(84px,1fr))!important;
    gap:12px!important;
  }
  body.sp-ios-home .sp-ios-highlight-ring{
    width:66px!important;height:66px!important;
  }
  body.sp-ios-home .sp-ios-highlight strong{
    font-size:11px!important;
    min-height:30px!important;
  }

  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    display:flex!important;
    flex-direction:column!important;
    border:1px solid rgba(60,60,67,.09)!important;
    border-radius:20px!important;
    box-shadow:0 3px 12px rgba(0,0,0,.025)!important;
  }
  body.sp-ios-home .sp-ios-featured-media{
    aspect-ratio:4/5!important;
  }
  body.sp-ios-home .sp-ios-featured-copy{
    display:flex!important;
    flex:1!important;
    flex-direction:column!important;
    padding:11px 12px 13px!important;
  }
  body.sp-ios-home .sp-ios-featured-copy strong{
    min-height:38px!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  body.sp-ios-home .sp-ios-featured-price{
    font-size:14px!important;
  }

  body.sp-ios-home .products{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  body.sp-ios-home .product-card{
    box-shadow:0 3px 12px rgba(0,0,0,.025)!important;
  }
  body.sp-ios-home .product-card:hover,
  body.sp-ios-home .sp-ios-featured-card:hover{
    transform:translateY(-5px)!important;
    box-shadow:var(--sp172-shadow-hover)!important;
  }

  body.sp-ios-home .sp-floating-whatsapp{
    right:24px!important;
    bottom:24px!important;
  }
}

@media (min-width:1440px){
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
  body.sp-ios-home .products{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
}

@media (min-width:1800px){
  body.sp-ios-home .shell{--sp171-content:1560px!important}
  body.sp-ios-home .sl-online-header-inner{
    width:min(calc(100% - 72px),1560px)!important;
  }
}

/* ---------- product/cart/checkout screen-size correction ---------- */
@media (max-width:599px){
  body.sp-ios-product .container,
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{
    width:100%!important;
    padding-inline:12px!important;
    box-sizing:border-box!important;
  }
}
@media (min-width:600px) and (max-width:899px){
  body.sp-ios-product .container,
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{
    max-width:860px!important;
    padding-inline:18px!important;
  }
}
@media (min-width:900px) and (max-width:1199px){
  body.sp-ios-product .container,
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{
    max-width:1120px!important;
    padding-inline:22px!important;
  }
}
@media (min-width:1200px){
  body.sp-ios-product .container,
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{
    max-width:1320px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.sp-ios-storefront *,
  body.sp-ios-storefront *::before,
  body.sp-ios-storefront *::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}