/* Performance overrides (reduce CLS / layout shifts) */

/* Reserve space for homepage slider before images load */
#box-slides .swiffy-slider .slider-container {
  aspect-ratio: 16 / 9;
  min-height: clamp(180px, 30vw, 420px);
  background: #f2f2f2;
  overflow: hidden;
}

@media (max-width: 767px) {
  #box-slides .swiffy-slider .slider-container {
    aspect-ratio: 4 / 3;
    min-height: clamp(160px, 52vw, 320px);
  }
}

#box-slides .swiffy-slider .slider-container > .item {
  height: 100%;
}

#box-slides .swiffy-slider .slider-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reserve space for right-side banner images on homepage */
.slod img,
.slad img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(120px, 18vw, 220px);
  object-fit: cover;
  background: #f2f2f2;
}

@media (max-width: 767px) {
  .slod img,
  .slad img {
    aspect-ratio: 4 / 3;
    min-height: clamp(120px, 40vw, 200px);
  }
}

/* About section images (reserve space to reduce CLS) */
.about img.img-responsive {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
}

/* Prevent logo layout shift while loading */
.logotype img {
  display: block;
  width: 150px;
  height: auto;
}

/* Installment hint under product price */
.ip-installment-hint {
  margin-top: 0.15rem !important;
  font-size: 0.78em !important;
  line-height: 1.2 !important;
  color: var(--primary-button-background-color, #2e9cd4) !important;
  opacity: 0.9 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 0.35em !important;
  width: 100% !important;
  flex: 0 0 100% !important; /* if parent is flex, force new line */
}
.ip-installment-hint strong {
  font-weight: 600 !important;
}

.ip-installment-hint .ip-inst-ico {
  width: 1.05em !important;
  height: 1.05em !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M18%204a4%204%200%201%200%200%208a4%204%200%200%200%200-8Zm0%202a2%202%200%201%201%200%204a2%202%200%200%201%200-4Zm-8%206a4%204%200%200%200-4%204v.5l-3.5%201.2a1.5%201.5%200%200%200-.9%201.9l.7%202A2%202%200%200%200%204.2%2020H14a4%204%200%200%200%204-4v-1h-6.6l-.3-.3a2.5%202.5%200%200%200-1.7-.7H10Zm0%202h.4c.2%200%20.5.1.7.3l.9.9H18v1a2%202%200%200%201-2%202H4.2l-.7-2L7%2016v-0.0a2%202%200%200%201%202-2Z%27%2F%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M19%206h-2V5h-1v2h-2v1h2v2h1V8h2V6Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain !important;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M18%204a4%204%200%201%200%200%208a4%204%200%200%200%200-8Zm0%202a2%202%200%201%201%200%204a2%202%200%200%201%200-4Zm-8%206a4%204%200%200%200-4%204v.5l-3.5%201.2a1.5%201.5%200%200%200-.9%201.9l.7%202A2%202%200%200%200%204.2%2020H14a4%204%200%200%200%204-4v-1h-6.6l-.3-.3a2.5%202.5%200%200%200-1.7-.7H10Zm0%202h.4c.2%200%20.5.1.7.3l.9.9H18v1a2%202%200%200%201-2%202H4.2l-.7-2L7%2016v-0.0a2%202%200%200%201%202-2Z%27%2F%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M19%206h-2V5h-1v2h-2v1h2v2h1V8h2V6Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain !important;
}

/* Slightly larger on product page */
#box-product .ip-installment-hint,
.buy_now .ip-installment-hint {
  font-size: 0.90em !important;
}

/* Make header/menu full-width and consistent across pages */
.header-top .container,
.header-center #header.container,
.desktop-navigation-menu > .container,
.desktop-navigation-menu .container.mofix {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--gutter-size) !important;
  padding-right: var(--gutter-size) !important;
}

@media (max-width: 767px) {
  .header-top .container,
  .header-center #header.container,
  .desktop-navigation-menu > .container,
  .desktop-navigation-menu .container.mofix {
    padding-left: calc(var(--gutter-size) / 2) !important;
    padding-right: calc(var(--gutter-size) / 2) !important;
  }
}