/* Sbaya Mobile — model landing pages (iPhone 17, 17 Pro, etc.) + Pre-Owned
   iPhones brand skin. Rebuilt as a single combined widget per page after
   two prior CSS-only fixes failed to address the real cause (Elementor's
   own container flex-wrap default letting a second widget wrap into an
   unpredictable position instead of stacking). With one widget as the
   sole flex child, that entire failure mode is now structurally
   impossible regardless of any inherited CSS variable. */

.mp-container{
  max-width:1440px !important;
  width:100% !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
  padding-top:clamp(48px,7vw,80px) !important;
  padding-bottom:clamp(48px,7vw,80px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.mp-page{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#0F1115;
}
.mp-hero{ max-width:720px; margin-bottom:16px; }
.mp-hero h1{
  font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; margin:0 0 14px;
}
.mp-hero p{ font-size:16px; line-height:1.7; color:#565E6B; }
.mp-faq{ max-width:720px; margin:40px 0; }
.mp-faq h2{ font-size:20px; font-weight:800; margin-bottom:16px; }
.mp-faq-item{
  background:#FFFFFF; border:1px solid #E5E6EC; border-radius:12px;
  padding:16px 20px; margin-bottom:10px;
}
.mp-faq-item h3{ font-size:15px; font-weight:700; margin-bottom:6px; }
.mp-faq-item p{ font-size:14px; line-height:1.6; color:#565E6B; margin:0; }

.mp-price-table{ max-width:800px; margin-bottom:60px; }
.mp-price-table table{
  width:100%; border-collapse:collapse; background:#FFFFFF;
  border:1px solid #E5E6EC; border-radius:14px; overflow:hidden;
}
.mp-price-table th{
  background:#0F1115; color:#fff; text-align:left; padding:12px 18px;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}
.mp-price-table td{
  padding:14px 18px; font-size:14px; border-top:1px solid #E5E6EC; color:#0F1115;
}
.mp-price-table tr:nth-child(even) td{ background:#FAFAFC; }

/* Product grid -- fully self-contained, doesn't depend on any Astra
   theme body class (confirmed those only exist on the real /shop/
   archive template, never on a plain WordPress page like this one). */
.mp-product-grid-wrap{ margin-top:24px; }
.mp-product-grid-wrap ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.mp-product-grid-wrap li.product{
  position:static !important;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:16px !important;
  background:#FFFFFF !important;
  border:1px solid #E5E6EC !important;
  border-radius:14px !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
}
.mp-product-grid-wrap .astra-shop-thumbnail-wrap{
  position:relative !important;
  display:block !important;
  width:100% !important;
}
.mp-product-grid-wrap li.product img{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  border-radius:10px !important;
  margin:0 auto !important;
}
.mp-product-grid-wrap .ast-on-card-button{
  position:static !important;
  display:block !important;
  width:100% !important;
  margin-top:10px !important;
  background:linear-gradient(100deg,#49E0FF,#29ABE2) !important;
  color:#02141F !important;
  border-radius:100px !important;
  padding:10px 16px !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
.mp-product-grid-wrap .ast-on-card-button svg,
.mp-product-grid-wrap .ast-card-action-tooltip{ display:none !important; }
.mp-product-grid-wrap .woocommerce-loop-product__title{
  font-size:14px !important; font-weight:700 !important;
  margin:10px 0 4px !important; color:#0F1115 !important;
  position:static !important; display:block !important;
}
.mp-product-grid-wrap .price{
  color:#29ABE2 !important; font-weight:700 !important; font-size:15px !important;
  position:static !important; display:block !important; margin-bottom:8px !important;
}
.mp-product-grid-wrap del{ color:#8DA0B3 !important; font-size:13px !important; margin-right:6px !important; }

@media(max-width:900px){
  .mp-product-grid-wrap ul.products{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
}