/* Home page experiment. Connected to the main page and index_2027.php. */

body.iw-home-page {
  background: #f7f4ef;
}

body.iw-home-page .mainPage {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  box-sizing: border-box;
}

/* main gift banner */
body.iw-home-page .banner-top {
  margin-bottom: 1.5rem;
  border: 1px solid rgba(160, 83, 55, .14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 48%, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(90deg, #fff 0%, #fff 52%, #f4e1cf 80%, #d9b08f 100%);
  box-shadow: 0 10px 28px rgba(47, 52, 78, .05);
}

body.iw-home-page .banner-top.banner-gift {
  background:
    radial-gradient(circle at 88% 48%, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(90deg, #fff 0%, #faf6f0 52%, #f4e1cf 80%, #d9b08f 100%) !important;
}

body.iw-home-page .banner-top .title {
  color: var(--iw-cat-text);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
}

body.iw-home-page .banner-top .left {
  padding: clamp(1.5rem, 4vw, 3rem);
}

body.iw-home-page .banner-top .right img {
  height: 21rem;
  object-fit: cover;
}

/* mosaic cards: keep the owner's colours, soften the frame */
body.iw-home-page .top-cards a.item {
  border: 1px solid rgba(160, 83, 55, .1);
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(47, 52, 78, .035);
  transition: transform .18s ease, box-shadow .18s ease;
}

body.iw-home-page .top-cards a.item:hover {
  box-shadow: 0 10px 24px rgba(47, 52, 78, .08);
  transform: translateY(-2px);
}

body.iw-home-page .top-cards a.item .title {
  color: var(--iw-cat-text);
  font-size: 1.08rem;
}

/* section titles */
body.iw-home-page .mainPage h2,
body.iw-home-page .mainPage h2 a {
  color: var(--iw-cat-text);
}

body.iw-home-page .mainPage h2 {
  margin: 2rem 0 1rem !important;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
}

body.iw-home-page .mainPage h2 a {
  text-decoration: none;
}

body.iw-home-page .mainPage h2 a:hover {
  color: var(--iw-cat-green);
}

/* subcategory tiles */
body.iw-home-page .catalog-grid {
  gap: 14px;
  margin-bottom: 1.5rem;
}

body.iw-home-page .catalog-grid a.item {
  overflow: hidden;
  padding-bottom: .85rem;
  border: 1px solid var(--iw-cat-border);
  border-radius: 14px;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(47, 52, 78, .03);
}

body.iw-home-page .catalog-grid .item .title {
  padding: .8rem .9rem 0;
  color: var(--iw-cat-text);
  font-size: .96rem;
}

body.iw-home-page .catalog-grid .item img {
  border-radius: 10px 10px 0 0;
}

/* keep the catalog product sliders on the same warm rhythm */
body.iw-home-page .bx_catalog_list_home {
  margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
  body.iw-home-page .mainPage {
    padding-right: 16px;
    padding-left: 16px;
  }

  body.iw-home-page .banner-top {
    border-radius: 18px;
  }

  body.iw-home-page .banner-top .title {
    font-size: 2rem;
  }

  body.iw-home-page .banner-top .right img {
    height: auto;
  }

  body.iw-home-page .top-cards {
    gap: 10px;
  }
}

/* intermediate widths: keep the cards and slider at a readable scale */
@media (min-width: 768px) {
  body.iw-home-page .top-cards {
    gap: 20px;
  }

  body.iw-home-page .swiper-container .bx_catalog_item {
    max-width: clamp(190px, 16vw, 240px) !important;
  }

}

@media (min-width: 768px) and (max-width: 991px) {
  body.iw-home-page .banner-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.iw-home-page .banner-top .right {
    grid-row: auto;
  }

  body.iw-home-page .banner-top .right img {
    height: 20rem;
  }

  body.iw-home-page .banner-top .left {
    padding: 1.5rem;
  }

  body.iw-home-page .banner-top .title {
    font-size: 2rem;
    line-height: 1.1;
  }
}

/* keep the mosaic at five columns on 992–1199 instead of stretching four */
@media (min-width: 992px) and (max-width: 1199px) {
  body.iw-home-page .top-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.iw-home-page .top-cards a.item-1 { grid-area: 1 / 1 / 2 / 2; }
  body.iw-home-page .top-cards a.item-2 { grid-area: 1 / 2 / 2 / 3; }
  body.iw-home-page .top-cards a.item-3 { grid-area: 1 / 3 / 2 / 5; aspect-ratio: 2.07 / 1; }
  body.iw-home-page .top-cards a.item-4 { grid-area: 2 / 1 / 4 / 3; }
  body.iw-home-page .top-cards a.item-5 { grid-area: 1 / 5 / 2 / 6; }
  body.iw-home-page .top-cards a.item-6 { grid-area: 2 / 3 / 3 / 4; }
  body.iw-home-page .top-cards a.item-7 { grid-area: 2 / 4 / 3 / 6; aspect-ratio: 2.07 / 1; }
  body.iw-home-page .top-cards a.item-8 { grid-area: 3 / 3 / 4 / 4; }
  body.iw-home-page .top-cards a.item-9 { grid-area: 3 / 4 / 4 / 5; }
  body.iw-home-page .top-cards a.item-10 { grid-area: 3 / 5 / 4 / 6; }
}


@media (min-width: 577px) and (max-width: 767px) {
  body.iw-home-page .swiper-container .bx_catalog_item {
    max-width: clamp(170px, 24vw, 190px) !important;
  }
}

/* 700–767: use the compact tablet layout before the 768 breakpoint */
@media (min-width: 700px) and (max-width: 767px) {
  body.iw-home-page .banner-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.iw-home-page .banner-top .right {
    grid-row: auto;
  }

  body.iw-home-page .banner-top .right img {
    height: 20rem;
  }

  body.iw-home-page .banner-top .left {
    padding: 1.5rem;
  }

  body.iw-home-page .banner-top .title {
    font-size: 2rem;
    line-height: 1.1;
  }

  body.iw-home-page .top-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px;
  }

  body.iw-home-page .top-cards a.item-4 { grid-area: 1 / 1 / 3 / 3; }
  body.iw-home-page .top-cards a.item-3 { grid-area: 1 / 3 / 2 / 5; }
  body.iw-home-page .top-cards a.item-1 { grid-area: 2 / 3 / 3 / 4; }
  body.iw-home-page .top-cards a.item-2 { grid-area: 2 / 4 / 3 / 5; }
  body.iw-home-page .top-cards a.item-5 { grid-area: 3 / 1 / 4 / 2; }
  body.iw-home-page .top-cards a.item-6 { grid-area: 3 / 2 / 4 / 3; }
  body.iw-home-page .top-cards a.item-7 { grid-area: 3 / 3 / 4 / 5; aspect-ratio: 2.07 / 1; }
  body.iw-home-page .top-cards a.item-8 { grid-area: 4 / 1 / 5 / 3; aspect-ratio: 2.07 / 1; }
  body.iw-home-page .top-cards a.item-9 { grid-area: 4 / 3 / 5 / 4; }
  body.iw-home-page .top-cards a.item-10 { grid-area: 4 / 4 / 5 / 5; }
}

/* 768–789: four slides must fit without clipping the fourth card */
@media (min-width: 768px) and (max-width: 789px) {
  body.iw-home-page .swiper-container .bx_catalog_item {
    max-width: calc(100% / 4) !important;
  }
}