/* ============================================================
   CORTEZ — רוחב הקונטיינר
   ============================================================
   נקודה עיוורת של המדידה שלי: בדקתי תמיד 390/768/1440,
   וב-1440 הקונטיינר (max-width:1440) שווה בדיוק לרוחב המסך —
   אז הרווחים בצדדים היו אפס ומעולם לא ראיתי את הבעיה.
   נמדד ב-1920: הפאנל תפס 1376 מתוך 1920 = 72%, עם 272px ריקים מכל צד.
   (הוא היה סימטרי — האסימטריה בצילום היא סרגל הגלילה.)

   הפתרון: קונטיינר נוזלי עם תקרה גבוהה בהרבה, כך שהעמוד
   מנצל את המסך במקום לשבת בעמודה צרה באמצע.
   ============================================================ */

:root{--max:1800px;--pad:40px}

/* ההדר רחב יותר מהתוכן — שוליים צרים במכוון, כמו פאנל צף */
.hdr-in{max-width:none;padding:0 20px}
.hpanel{max-width:none}

/* הפס העליון מתיישר עם הפאנל */
.strip ul{max-width:none;padding-inline:40px}

@media (min-width:1600px){
  .hero{min-height:min(88vh,900px)}
  .hero-in{padding-bottom:72px}
  .tiles .tile:first-child,.tiles .tile:last-child{min-height:660px}
  .hot-stage{min-height:660px}
  .sw-stage{min-height:760px}
  .sw-stage img{max-height:680px}
  .story-pin{min-height:680px}
  .story-pin img{max-height:600px}
  .gal{grid-auto-rows:250px}
}

/* במסכים רחבים מאוד — עוד עמודה ברשת המוצרים במקום כרטיסים ענקיים */
@media (min-width:1900px){
  .mega-in{grid-template-columns:1fr 420px}
  .gal{grid-auto-rows:280px}
}

@media (max-width:900px){:root{--pad:20px}.hdr-in{padding:0 12px}.strip ul{padding-inline:20px}}
@media (max-width:640px){:root{--pad:16px}.hdr-in{padding:0 10px}.strip ul{padding-inline:16px}}