/* Core Web Vitals: reserve image space (CLS) + stable fixed header shell */

/* Intrinsic dimensions from width/height attributes — avoids layout jump */
img[width][height] {
  height: auto;
  max-width: 100%;
}

.rings-premium-visual img,
.hero-visual .media img,
.hero-showcase-tile img,
.product-catalog-panel .product-image-wrapper img,
.catcard img {
  max-width: 100%;
}

/* Product grids: square frame is set in page CSS; images fill the box */
.rings-premium-img[width][height] {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Fixed header: constant footprint; scroll states use transform only (no height/padding shifts) */
header#hdr {
  box-sizing: border-box;
}

@media (min-width: 969px) {
  header#hdr {
    min-height: 138px;
  }
  header#hdr .brand-wrap {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    box-sizing: border-box;
  }
  header#hdr .cat-wrap {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    box-sizing: border-box;
  }
  body.menu-show header#hdr,
  body.header-hide header#hdr {
    min-height: 138px;
    max-height: 138px;
    padding-top: 0;
    padding-bottom: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      background-color 0.3s ease;
  }
  body.menu-show header#hdr .brand-wrap {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    margin: 0;
    padding: 0;
  }
  body.menu-show header#hdr .cat-wrap {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
  }
}

@media (max-width: 968px) {
  header#hdr,
  body.menu-show header#hdr,
  body.header-hide header#hdr {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out !important;
  }
}