/* FIX171 — Spaceland Adaptive Storefront Architecture
   Corrects FIX170's mobile-only desktop scaling. Visual/responsive layer only. */

body.sp-ios-storefront{
  --sp171-content:1480px;
  --sp171-gutter:clamp(12px,2.1vw,32px);
  --sp171-card-radius:24px;
  --sp171-block-radius:30px;
  --sp171-line:rgba(29,29,31,.075);
  --sp171-shadow:0 12px 40px rgba(20,20,24,.055);
  --sp171-shadow-hover:0 18px 48px rgba(20,20,24,.10);
  --sp171-ease:cubic-bezier(.2,.75,.25,1);
}
body.sp-ios-storefront .shell,
body.sp-ios-storefront .container,
body.sp-ios-storefront .page{min-width:0}
body.sp-ios-home .shell{direction:rtl;width:min(calc(100% - (2 * var(--sp171-gutter))),var(--sp171-content))!important}
body.sp-ios-home .shell :is(h1,h2,h3,h4,p,strong,span,a){text-align:start}
body.sp-ios-home :is(.sp-ios-featured-copy strong,.product-card .title,.sp-ios-post-copy strong,.sp-ios-reel-copy strong){unicode-bidi:plaintext}
body.sp-ios-home .sp-ios-featured-price{unicode-bidi:isolate;direction:rtl}

/* Keep mixed Arabic/English search input readable even when header visual order is LTR. */
body.sp-ios-home .sl-header-search-input,
body.sp-ios-home #productSearchMob{direction:auto;text-align:start}

/* Rails get optional desktop/tablet controls from FIX171 JS. */
.sp171-rail-frame{position:relative;min-width:0}
.sp171-rail-arrow{position:absolute;top:50%;z-index:8;display:none;width:42px;height:42px;place-items:center;border:1px solid rgba(229,229,234,.92);border-radius:50%;background:rgba(255,255,255,.94);color:#1d1d1f;box-shadow:0 10px 28px rgba(0,0,0,.10);backdrop-filter:blur(16px);cursor:pointer;transform:translateY(-50%);transition:opacity .18s ease,transform .18s ease}
.sp171-rail-arrow:hover{transform:translateY(-50%) scale(1.04)}
.sp171-rail-arrow[disabled]{opacity:0;pointer-events:none}
.sp171-rail-arrow--prev{right:-12px}
.sp171-rail-arrow--next{left:-12px}

/* ---------- Compact mobile: native-app mode ---------- */
@media (max-width:767px){
  body.sp-ios-home .shell{width:100%!important;padding-inline:12px!important}
  body.sp-ios-home .sp-ios-discovery{gap:18px!important}
  body.sp-ios-home .sp-ios-block{min-width:0}
  body.sp-ios-home .sp-ios-block-head{margin-bottom:10px}
  body.sp-ios-home .sp-ios-block-head h2{font-size:19px}
  body.sp-ios-home .sp-ios-block-head p{font-size:11px;line-height:1.55}
  body.sp-ios-home .sp-ios-highlights{gap:12px;padding-inline:1px}
  body.sp-ios-home .sp-ios-highlight{flex-basis:72px}
  body.sp-ios-home .sp-ios-highlight-ring{width:64px;height:64px}
  body.sp-ios-home .sp-ios-featured-card{flex:0 0 min(44vw,176px)}
  body.sp-ios-home .sp-ios-featured-media{height:min(44vw,176px)}
  body.sp-ios-home .sp-ios-reel-card{flex-basis:min(42vw,170px);height:258px}
  body.sp-ios-home .sp-ios-offer-card{flex-basis:min(88vw,370px)}
  body.sp-ios-home .sp-ios-post{flex-basis:min(86vw,350px)}
  body.sp-ios-home .sp-ios-audio-card{flex-basis:min(90vw,380px)}
  body.sp-ios-home .products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body.sp-ios-home .product-card .card-media{aspect-ratio:1/1.08!important}
  body.sp-ios-home .product-card .card-body{padding:10px!important}
  body.sp-ios-home .product-card .title{font-size:12.5px!important;line-height:1.5!important}
  body.sp-ios-home .product-card .price{font-size:14px!important}
  body.sp-ios-home .add-cart-btn{min-height:36px!important}

  body.sp-ios-product .container{padding-inline:12px!important}
  body.sp-ios-product .product-main-card{margin-inline:-12px!important}
  body.sp-ios-product .gallery-wrap{border-radius:0 0 28px 28px!important}
  body.sp-ios-product .details-wrap{padding-inline:16px!important}
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{padding-inline:12px!important}
}

@media (max-width:390px){
  body.sp-ios-home .shell{padding-inline:10px!important}
  body.sp-ios-home .sp-ios-featured-card{flex-basis:46vw}
  body.sp-ios-home .sp-ios-featured-media{height:46vw}
  body.sp-ios-home .sp-ios-highlight{flex-basis:68px}
  body.sp-ios-home .sp-ios-highlight-ring{width:59px;height:59px}
  body.sp-ios-home .products{gap:7px!important}
  body.sp-ios-home .product-card .card-media img{padding:9px!important}
  body.sp-ios-home .product-card .title{font-size:12px!important}
}

/* ---------- Tablet: touch-first, more information per viewport ---------- */
@media (min-width:768px) and (max-width:1023px){
  body.sp-ios-home .shell{--sp171-gutter:20px;--sp171-content:980px}
  body.sp-ios-home .sp-ios-discovery{gap:20px!important}
  body.sp-ios-home .sp-ios-block{padding:18px;border:1px solid var(--sp171-line);border-radius:26px;background:#fff}
  body.sp-ios-home .products{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  body.sp-ios-home .product-card .card-media{aspect-ratio:1/1.04!important}
  body.sp-ios-home .sp-ios-featured-card{flex-basis:190px}
  body.sp-ios-home .sp-ios-featured-media{height:190px}
  body.sp-ios-home .sp-ios-reel-card{flex-basis:180px;height:292px}
  .sp171-rail-arrow{display:grid}

  body.sp-ios-product .container{max-width:920px!important;padding-inline:20px!important}
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{max-width:940px!important;padding:20px!important}
}

/* ---------- Desktop: website mode, not a stretched phone ---------- */
@media (min-width:1024px){
  body.sp-ios-home{background:#f5f5f7!important}
  body.sp-ios-home .sl-online-header-inner{
    width:min(calc(100% - 48px),1480px)!important;
    min-height:84px!important;
    padding:8px 4px!important;
    grid-template-columns:76px minmax(420px,920px) 52px!important;
    gap:20px!important;
  }
  body.sp-ios-home .sl-header-logo-link{width:74px!important;height:74px!important}
  body.sp-ios-home .sl-header-logo{width:70px!important;height:70px!important}
  body.sp-ios-home .sl-header-search{width:100%!important;max-width:920px!important;height:54px!important}

  body.sp-ios-home .shell{--sp171-gutter:24px;--sp171-content:1480px;padding-top:24px!important}
  body.sp-ios-home .home-mobile-search-card{display:none!important}
  body.sp-ios-home .sp-ios-discovery{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:22px!important;
    margin-top:0!important;
  }
  body.sp-ios-home .sp-ios-block{
    grid-column:1/-1;
    min-width:0;
    padding:22px;
    border:1px solid var(--sp171-line);
    border-radius:var(--sp171-block-radius);
    background:rgba(255,255,255,.94);
    box-shadow:var(--sp171-shadow);
  }
  body.sp-ios-home .sp-ios-block-head{margin-bottom:16px}
  body.sp-ios-home .sp-ios-block-head h2{font-size:22px}
  body.sp-ios-home .sp-ios-block-head p{font-size:12px}

  /* Story/highlight shelf uses the whole desktop width. */
  body.sp-ios-home .sp-ios-block--highlights{padding:20px 24px}
  body.sp-ios-home .sp-ios-highlights{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
    gap:14px!important;
    overflow:visible!important;
    padding:2px 0!important;
  }
  body.sp-ios-home .sp-ios-highlight{width:auto!important;min-width:0!important;flex:none!important}
  body.sp-ios-home .sp-ios-highlight-ring{width:72px;height:72px}
  body.sp-ios-home .sp-ios-highlight strong{font-size:11.5px;white-space:normal;line-height:1.4;min-height:32px}

  /* Featured shelf becomes a real desktop product wall. */
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-featured-card{
    min-width:0!important;
    width:100%!important;
    flex:none!important;
    border:1px solid rgba(229,229,234,.82);
    border-radius:22px;
    transition:transform .22s var(--sp171-ease),box-shadow .22s var(--sp171-ease),border-color .22s ease;
  }
  body.sp-ios-home .sp-ios-featured-media{height:auto!important;aspect-ratio:1/1.08}
  body.sp-ios-home .sp-ios-featured-copy{display:block;padding:12px 12px 14px}
  body.sp-ios-home .sp-ios-featured-copy strong{min-height:39px;font-size:12.5px}

  /* Social bento: only split columns when both companion modules exist. */
  body.sp-ios-home .sp-ios-discovery.has-reels.has-offers .sp-ios-block--reels{grid-column:span 7}
  body.sp-ios-home .sp-ios-discovery.has-reels.has-offers .sp-ios-block--offers{grid-column:span 5}
  body.sp-ios-home .sp-ios-discovery.has-posts.has-audio .sp-ios-block--posts{grid-column:span 7}
  body.sp-ios-home .sp-ios-discovery.has-posts.has-audio .sp-ios-block--audio{grid-column:span 5}

  body.sp-ios-home .sp-ios-block--reels .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-reel-card{width:100%;height:auto;aspect-ratio:9/15.2;min-height:270px;max-height:350px;flex:none!important}
  body.sp-ios-home .sp-ios-block--reels .sp-ios-reel-card:nth-child(n+5){display:none}

  body.sp-ios-home .sp-ios-block--offers .sp-ios-rail{
    display:grid!important;
    grid-template-columns:1fr;
    gap:12px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-offer-card{width:100%;min-height:190px;flex:none!important}
  body.sp-ios-home .sp-ios-block--offers .sp-ios-offer-card:nth-child(n+3){display:none}

  body.sp-ios-home .sp-ios-block--posts .sp-ios-rail{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-post{width:100%;flex:none!important}
  body.sp-ios-home .sp-ios-post img{height:190px}
  body.sp-ios-home .sp-ios-block--posts .sp-ios-post:nth-child(n+5){display:none}

  body.sp-ios-home .sp-ios-block--audio .sp-ios-rail{
    display:grid!important;
    grid-template-columns:1fr;
    gap:12px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.sp-ios-home .sp-ios-audio-card{width:100%;flex:none!important}
  body.sp-ios-home .sp-ios-block--audio .sp-ios-audio-card:nth-child(n+4){display:none}

  /* Legacy category/offer/product modules now match the wide desktop rhythm. */
  body.sp-ios-home .reveal{margin-top:28px!important}
  body.sp-ios-home .banners{grid-auto-columns:min(55vw,720px)!important;gap:16px!important}
  body.sp-ios-home .banner-card{min-height:260px!important}
  body.sp-ios-home .products{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
  body.sp-ios-home .product-card{border:1px solid rgba(229,229,234,.82)!important;transition:transform .22s var(--sp171-ease),box-shadow .22s var(--sp171-ease),border-color .22s ease}
  body.sp-ios-home .product-card .card-media{aspect-ratio:1/1.08!important}
  body.sp-ios-home .product-card .card-body{padding:12px 12px 14px!important}
  body.sp-ios-home .product-card .title{font-size:13px!important}
  body.sp-ios-home .product-card .price{font-size:15px!important}

  /* Product page: large two-pane layout. */
  body.sp-ios-product .container{max-width:1280px!important;padding:28px 24px 48px!important}
  body.sp-ios-product .product-main-card{grid-template-columns:minmax(420px,.95fr) minmax(0,1.05fr)!important;gap:36px!important}
  body.sp-ios-product .gallery-wrap{position:sticky!important;top:104px!important;border-radius:30px!important}
  body.sp-ios-product .main-img-box{min-height:520px!important}
  body.sp-ios-product .main-img-box img{max-height:510px!important}
  body.sp-ios-product .details-wrap{padding:8px 0 0!important}
  body.sp-ios-product .sticky-bottom-bar{position:sticky!important;right:auto!important;left:auto!important;bottom:18px!important;width:100%!important;max-width:none!important;margin:0!important}

  /* Cart / Checkout: desktop transaction workspace with sticky summary. */
  body.sp-ios-cart .container,
  body.sp-ios-checkout .page{max-width:1280px!important;padding:28px 24px 48px!important}
  body.sp-ios-cart .grid-layout,
  body.sp-ios-checkout .layout{gap:22px!important}
  body.sp-ios-cart .mobile-sticky,
  body.sp-ios-checkout .mobile-sticky{display:none!important}
}

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

@media (min-width:1600px){
  body.sp-ios-home .shell{--sp171-content:1520px}
  body.sp-ios-home .sl-online-header-inner{width:min(calc(100% - 64px),1520px)!important}
  body.sp-ios-home .sp-ios-block--featured .sp-ios-rail{grid-template-columns:repeat(7,minmax(0,1fr))}
  body.sp-ios-home .products{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  body.sp-ios-home .sp-ios-highlight-ring{width:76px;height:76px}
}

/* Fine pointer: premium but restrained hover affordance. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  body.sp-ios-home .sp-ios-featured-card:hover,
  body.sp-ios-home .product-card:hover{transform:translateY(-4px);border-color:rgba(107,92,231,.18)!important;box-shadow:var(--sp171-shadow-hover)!important}
  body.sp-ios-home .sp-ios-featured-card:hover img,
  body.sp-ios-home .product-card:hover .card-media img{transform:scale(1.025)}
  body.sp-ios-home .sp-ios-featured-media img,
  body.sp-ios-home .product-card .card-media img{transition:transform .28s var(--sp171-ease)}
}

/* Standalone PWA: respect iPhone safe areas without changing browser mode. */
@media (display-mode:standalone){
  body.sp-ios-storefront{padding-top:env(safe-area-inset-top,0px)}
  body.sp-ios-home .bottom-nav{bottom:calc(6px + env(safe-area-inset-bottom,0px))!important}
}

/* Landscape phones/tablets: reduce fixed chrome so content remains usable. */
@media (max-height:560px) and (orientation:landscape) and (max-width:1023px){
  body.sp-ios-home .bottom-nav{min-height:52px!important}
  body.sp-ios-home .nav-btn{font-size:9px!important}
  body.sp-ios-product .main-img-box{min-height:280px!important}
  body.sp-ios-product .main-img-box img{max-height:270px!important}
}

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