/* FIX173 — Premium desktop composition + refined tablet/mobile geometry.
   Loads after FIX170/FIX171/FIX172. Visual-only. */

body.sp-ios-storefront{
  --sp173-ink:#1d1d1f;
  --sp173-muted:#6e6e73;
  --sp173-canvas:#f6f6f8;
  --sp173-surface:#ffffff;
  --sp173-line:rgba(60,60,67,.10);
  --sp173-purple:#6b5ce7;
  --sp173-purple-soft:#f1efff;
  --sp173-shadow:0 10px 34px rgba(0,0,0,.055);
  --sp173-shadow-hover:0 18px 48px rgba(0,0,0,.10);
}

/* Shared section-heading discipline. */
body.sp-ios-home .sp-ios-block-head{
  align-items:center!important;
  margin-bottom:14px!important;
}
body.sp-ios-home .sp-ios-block-head h2{
  margin:0!important;
  color:var(--sp173-ink)!important;
  font-weight:900!important;
  letter-spacing:-.35px!important;
}
body.sp-ios-home .sp-ios-block-head p{
  margin:3px 0 0!important;
  color:var(--sp173-muted)!important;
  line-height:1.5!important;
}
body.sp-ios-home .sp-ios-block-head > a{
  display:inline-flex!important;
  min-height:34px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 13px!important;
  border-radius:999px!important;
  background:var(--sp173-purple-soft)!important;
  color:var(--sp173-purple)!important;
  font-size:12px!important;
  font-weight:850!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

/* Product-card geometry must be consistent no matter title length. */
body.sp-ios-home .sp-ios-featured-card{
  min-width:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid var(--sp173-line)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
body.sp-ios-home .sp-ios-featured-media{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%)!important;
}
body.sp-ios-home .sp-ios-featured-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:10px!important;
  box-sizing:border-box!important;
}
body.sp-ios-home .sp-ios-featured-copy{
  min-width:0!important;
  display:flex!important;
  flex:1!important;
  flex-direction:column!important;
}
body.sp-ios-home .sp-ios-featured-copy strong{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:#171719!important;
}
body.sp-ios-home .sp-ios-featured-price{
  margin-top:auto!important;
  padding-top:8px!important;
  color:#111!important;
  font-weight:900!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}

/* ------------------- PHONE ------------------- */
@media (max-width:599px){
  body.sp-ios-home .sp-ios-discovery{gap:24px!important}
  body.sp-ios-home .sp-ios-block-head h2{font-size:20px!important}

  body.sp-ios-home .sp-ios-featured-card{
    flex-basis:clamp(158px,45vw,184px)!important;
    border-radius:19px!important;
    box-shadow:0 3px 14px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-featured-media{aspect-ratio:4/5!important}
  body.sp-ios-home .sp-ios-featured-copy{padding:10px 10px 12px!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}
}

/* ------------------- SMALL TABLET / FOLDABLE ------------------- */
@media (min-width:600px) and (max-width:899px){
  body.sp-ios-home .sp-ios-discovery{gap:18px!important}
  body.sp-ios-home .sp-ios-block{padding:15px!important}
  body.sp-ios-home .sp-ios-block-head h2{font-size:21px!important}

  body.sp-ios-home .sp-ios-block--highlights{
    padding-bottom:13px!important;
  }
  body.sp-ios-home .sp-ios-highlights{
    justify-content:flex-start!important;
  }

  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.sp-ios-home .sp-ios-featured-card{border-radius:19px!important}
  body.sp-ios-home .sp-ios-featured-media{aspect-ratio:4/5!important}
  body.sp-ios-home .sp-ios-featured-copy{padding:10px 11px 12px!important}
}

@media (min-width:600px) and (max-width:699px){
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.sp-ios-home .sp-ios-block--featured .sp-ios-featured-card:nth-child(n+7){display:flex!important}
}

/* ------------------- TABLET / COMPACT DESKTOP ------------------- */
@media (min-width:900px) and (max-width:1199px){
  body.sp-ios-home .sp-ios-discovery{gap:24px!important}
  body.sp-ios-home .sp-ios-block-head h2{font-size:23px!important}
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.sp-ios-home .sp-ios-featured-card{border-radius:20px!important}
  body.sp-ios-home .sp-ios-featured-media{aspect-ratio:4/5!important}
  body.sp-ios-home .sp-ios-featured-copy{padding:11px 12px 13px!important}
}

/* ------------------- DESKTOP ------------------- */
@media (min-width:1200px){
  body.sp-ios-home{
    background:var(--sp173-canvas)!important;
  }

  body.sp-ios-home .sl-online-header-inner,
  body.sp-ios-home .shell{
    width:min(calc(100% - 48px),1440px)!important;
    max-width:1440px!important;
    margin-inline:auto!important;
  }

  body.sp-ios-home .sl-online-header-inner{
    min-height:72px!important;
    padding-block:8px!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-search{
    height:54px!important;
    border-radius:18px!important;
    box-shadow:0 2px 10px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sl-header-search-input{font-size:14px!important}

  body.sp-ios-home .shell{
    padding-top:26px!important;
    padding-bottom:70px!important;
  }
  body.sp-ios-home .sp-ios-discovery{
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr)!important;
    gap:30px 24px!important;
    align-items:start!important;
  }

  /* Compact highlights into one purposeful horizontal shelf. */
  body.sp-ios-home .sp-ios-block--highlights{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 260px!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    gap:18px!important;
    min-height:132px!important;
    padding:18px 22px!important;
    border:1px solid rgba(60,60,67,.075)!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 8px 30px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-block--highlights .sp-ios-block-head{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    align-self:center!important;
  }
  body.sp-ios-home .sp-ios-block--highlights .sp-ios-block-head h2{font-size:24px!important}
  body.sp-ios-home .sp-ios-highlights{
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:repeat(8,minmax(72px,1fr))!important;
    gap:10px!important;
    align-items:start!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.sp-ios-home .sp-ios-highlight{min-width:0!important}
  body.sp-ios-home .sp-ios-highlight-ring{width:58px!important;height:58px!important;margin-inline:auto!important}
  body.sp-ios-home .sp-ios-highlight strong{
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    max-width:104px!important;
    min-height:29px!important;
    margin:6px auto 0!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    text-align:center!important;
  }

  /* Featured should dominate first screen, but with 6 useful cards instead of 7 cramped cards. */
  body.sp-ios-home .sp-ios-block--featured{
    grid-column:1 / -1!important;
  }
  body.sp-ios-home .sp-ios-block--featured .sp-ios-block-head{
    margin-bottom:14px!important;
  }
  body.sp-ios-home .sp-ios-block--featured .sp-ios-block-head h2{font-size:26px!important}
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:16px!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    width:100%!important;
    min-height:0!important;
    border-radius:22px!important;
    box-shadow:0 4px 18px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-featured-media{
    aspect-ratio:4/5!important;
  }
  body.sp-ios-home .sp-ios-featured-copy{
    padding:12px 13px 14px!important;
  }
  body.sp-ios-home .sp-ios-featured-copy strong{
    min-height:40px!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  body.sp-ios-home .sp-ios-featured-price{font-size:14px!important}
  body.sp-ios-home .sp-ios-featured-card:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(107,92,231,.20)!important;
    box-shadow:var(--sp173-shadow-hover)!important;
  }

  /* Social-commerce content becomes a desktop bento instead of full-width phone rails. */
  body.sp-ios-home .sp-ios-block--reels,
  body.sp-ios-home .sp-ios-block--posts{
    grid-column:1!important;
  }
  body.sp-ios-home .sp-ios-block--offers,
  body.sp-ios-home .sp-ios-block--audio{
    grid-column:2!important;
  }
  body.sp-ios-home .sp-ios-block--reels,
  body.sp-ios-home .sp-ios-block--posts,
  body.sp-ios-home .sp-ios-block--offers,
  body.sp-ios-home .sp-ios-block--audio{
    padding:18px!important;
    border:1px solid var(--sp173-line)!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 6px 24px rgba(0,0,0,.035)!important;
  }
  body.sp-ios-home .sp-ios-block--reels .sp-ios-rail,
  body.sp-ios-home .sp-ios-block--posts .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    overflow:visible!important;
  }
  body.sp-ios-home .sp-ios-block--offers .sp-ios-rail,
  body.sp-ios-home .sp-ios-block--audio .sp-ios-rail{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    overflow:visible!important;
  }
  body.sp-ios-home .sp-ios-offer-card{
    width:100%!important;
    min-width:0!important;
    min-height:190px!important;
    border-radius:20px!important;
  }

  /* Legacy sections below the social area align with the new desktop content width. */
  body.sp-ios-home #categories,
  body.sp-ios-home #products,
  body.sp-ios-home .reveal{
    max-width:100%!important;
  }

  body.sp-ios-home .sp-floating-whatsapp{
    right:24px!important;
    bottom:24px!important;
    box-shadow:0 12px 34px rgba(18,181,117,.20)!important;
  }
}

/* At wide desktop the container grows, but card count stays 6 so the merchandise remains premium-sized. */
@media (min-width:1600px){
  body.sp-ios-home .sl-online-header-inner,
  body.sp-ios-home .shell{
    width:min(calc(100% - 72px),1520px)!important;
    max-width:1520px!important;
  }
  body.sp-ios-home .sp-ios-block--highlights{
    grid-template-columns:minmax(0,1fr) 280px!important;
  }
  body.sp-ios-home .sp-ios-highlights{
    grid-template-columns:repeat(8,minmax(82px,1fr))!important;
  }
  body.sp-ios-home .sp-ios-featured-copy strong{font-size:13.5px!important}
}

/* Product / Cart / Checkout: keep a shared desktop canvas and avoid skinny centered phone panels. */
@media (min-width:1200px){
  body.sp-ios-product,
  body.sp-ios-cart,
  body.sp-ios-checkout{background:var(--sp173-canvas)!important}

  body.sp-ios-product .container,
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{
    width:min(calc(100% - 48px),1320px)!important;
    max-width:1320px!important;
    margin-inline:auto!important;
  }
}

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