/* LAYOUT STABILITY PATCH (prevents shifting/jumps while navigating) */
*{box-sizing:border-box}
html{scrollbar-gutter:stable both-edges}
body{overflow-x:hidden}

/* Make images reserve space & avoid layout shift */
img{max-width:100%;height:auto;display:block}
.card .img{display:block;overflow:hidden;border-radius:16px;aspect-ratio:4/3;background:rgba(15,23,42,.06)}
.card .img img{width:100%;height:100%;object-fit:cover}
.mini-img{overflow:hidden;border-radius:14px;aspect-ratio:4/3;background:rgba(15,23,42,.06)}
.mini-img img{width:100%;height:100%;object-fit:cover}

/* Stabilize product cards */
.card.prod .title{min-height:44px} /* 2 lines-ish */
.card.prod .meta{min-height:28px}
.card.prod .actions{min-height:44px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Stabilize sliders/banner heights (desktop+mobile) */
.hero .slider{min-height:260px}
@media (max-width: 640px){
  .hero .slider{min-height:210px}
}

/* Avoid tiny shifts from focus outlines */
:focus-visible{outline:2px solid rgba(249,115,22,.55);outline-offset:2px}

/* If any element accidentally causes horizontal scroll */
.layout,.main,.card{max-width:100%}