/*
 * Home page (store): tighter spacing between sections, and the square category tiles.
 * Loaded on its own, after the main stylesheet, so it needs no asset build.
 *
 * The square category tiles are switched on with CATEGORY_DESIGN=1 in .env (config/app.php):
 * the home page then adds the class "category_design_square" to the category section.
 * Without it the categories keep their original round design.
 */

/* ------------------------------------------------------------------------------------------
 * Categories: each one is a square-cornered tile, with a bigger picture
 * ------------------------------------------------------------------------------------------ */
.category_section {
  padding: 36px 0;
}
.category_section .section_header {
  margin-bottom: 22px;
}
.category_design_square .category_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 8px;
  padding: 14px 10px 12px;
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}
.category_design_square .category_card:hover {
  border-color: #3881ef;
}
.category_design_square .category_card .card_icon {
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;          /* square, was a circle */
  background-color: #f3f5fb;
  border: 0;
  overflow: hidden;
}
.category_design_square .category_card:hover .card_icon {
  border: 0;
}
/* the picture fills the whole square (a square picture is shown edge to edge) */
.category_design_square .category_card .card_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category_design_square .category_card h5 {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}
/* tiles in the row share one height, whatever the length of the names */
.category_design_square .category_slider .slick-track {
  display: flex;
}
.category_design_square .category_slider .slick-slide {
  display: flex;
  height: auto;
}
.category_design_square .category_slider .slick-slide > div,
.category_design_square .category_slider .slider_item {
  display: flex !important;
  width: 100%;
}
/* room kept before the slider starts, so the page does not jump */
.category_design_square .category_slider:not(.slick-initialized) {
  min-height: 210px;
}

/* The same square tiles on the products page, for the row of subcategories above the list.
   Seven fit across there, so the picture is a little smaller than on the home page. */
.product_tools .category_design_square .category_card {
  margin: 0 6px;
  padding: 10px 8px 10px;
}
.product_tools .category_design_square .category_card .card_icon {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.product_tools .category_design_square .category_card .card_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product_tools .category_design_square .category_card h5 {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.3;
}
.category_design_square .category_slider_listing .slick-track {
  display: flex;
}
.category_design_square .category_slider_listing .slick-slide {
  display: flex;
  height: auto;
}
.category_design_square .category_slider_listing .slick-slide > div,
.category_design_square .category_slider_listing .slider_item {
  display: flex !important;
  width: 100%;
}
.category_design_square .category_slider_listing:not(.slick-initialized) {
  min-height: 0;
  max-height: 200px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .product_tools .category_design_square .category_card {
    margin: 0 4px;
    padding: 8px 6px;
  }
  .product_tools .category_design_square .category_card .card_icon {
    max-width: 96px;
    border-radius: 10px;
  }
  .product_tools .category_design_square .category_card h5 {
    margin-top: 8px;
    font-size: 0.84rem;
  }
}

/* ------------------------------------------------------------------------------------------
 * Less empty space between the sections
 * ------------------------------------------------------------------------------------------ */
.header_offer_slider_wrapp {
  margin-top: 36px;
}
.header_offer_slider_wrapp .header_offer_slider {
  margin-bottom: 24px !important;
}
.products_section {
  padding: 32px 0;
}
.products_section .section_header {
  margin-bottom: 22px;
}
/* a section shows two rows of products: the space between them */
.products_section .slick-slider.mb-5,
.products_section .slick-slider[style*="margin-bottom"] {
  margin-bottom: 20px !important;
}
.our_brnads {
  margin-top: 36px;
}
.our_brnads .section_header {
  margin-bottom: 26px;
}
.buynow_paylater {
  margin-top: 44px;
  padding: 48px 0;
}

/* phones */
@media (max-width: 600px) {
  .category_section {
    padding: 22px 0;
  }
  .category_section .section_header {
    margin-bottom: 14px;
  }
  .category_design_square .category_card {
    margin: 0 4px;
    padding: 8px 6px 8px;
    border-radius: 12px;
  }
  .category_design_square .category_card .card_icon {
    width: 100%;
    max-width: 110px;
    height: auto;
    border-radius: 10px;
  }
  .category_design_square .category_card h5 {
    margin-top: 8px;
    font-size: 0.86rem;
  }
  .category_design_square .category_slider:not(.slick-initialized) {
    min-height: 150px;
  }
  .header_offer_slider_wrapp {
    margin-top: 22px;
  }
  .header_offer_slider_wrapp .header_offer_slider {
    margin-bottom: 18px !important;
  }
  .products_section {
    padding: 20px 0;
  }
  .products_section .section_header {
    margin-bottom: 14px;
  }
  .products_section .slick-slider.mb-5,
  .products_section .slick-slider[style*="margin-bottom"] {
    margin-bottom: 12px !important;
  }
  .our_brnads {
    margin-top: 22px;
  }
  .our_brnads .section_header {
    margin-bottom: 14px;
  }
  .buynow_paylater {
    margin-top: 28px;
    padding: 32px 0;
  }
}


/* ------------------------------------------------------------------------------------------
 * Main banner slider (shown when the dashboard has more than one banner)
 * ------------------------------------------------------------------------------------------ */
.home_banner {
  position: relative;
}
.home_banner .home_banner_item,
.home_banner picture {
  display: block;
  width: 100%;
}
/* The space of the banner is kept before its picture arrives, so the page below does not jump:
   2368 x 800 on desktop and 720 x 400 on phones, the recommended sizes. "auto" lets a picture
   of another shape use its own shape once it has loaded. */
.home_banner picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 2368 / 800;
}
@media (max-width: 600px) {
  .home_banner picture img {
    aspect-ratio: auto 720 / 400;
  }
}
/* slides move on their own layer, which keeps the slide animation smooth */
.home_banner_slider .slick-track {
  will-change: transform;
}
/* before the slider starts: only the first banner, so the page does not jump */
.home_banner_slider:not(.slick-initialized) .header_offer_img:not(:first-child) {
  display: none;
}
.home_banner_slider .slick-slide {
  line-height: 0;
}
/* no gap under the banner: it sits right on the line that follows */
.home_banner_slider,
.home_banner_slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}


/* ------------------------------------------------------------------------------------------
 * Before the sliders have started
 * Until its script runs, a slider is a plain stack of every item it holds (the category row
 * alone is 2,000px tall). The loading screen used to hide that. Each slider is now kept to
 * roughly its final height, so the page looks right even if it is seen before the scripts.
 * ------------------------------------------------------------------------------------------ */
.category_slider:not(.slick-initialized) {
  max-height: 230px;
  overflow: hidden;
}
[class*="products_section_slider"]:not(.slick-initialized) {
  max-height: 380px;
  overflow: hidden;
}
.header_offer_slider:not(.slick-initialized) {
  max-height: 34vw;
  overflow: hidden;
}
.our_brnads_logos ul:not(.slick-initialized) {
  max-height: 160px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .category_slider:not(.slick-initialized) {
    max-height: 170px;
  }
  [class*="products_section_slider"]:not(.slick-initialized) {
    max-height: 330px;
  }
  .header_offer_slider:not(.slick-initialized) {
    max-height: 56vw;
  }
}


/* ------------------------------------------------------------------------------------------
 * Category sections that are fetched on scroll
 * Until a section's products arrive, its title is shown above five soft blocks that hold the
 * space of its two rows of products, so nothing below moves when the products come in.
 * ------------------------------------------------------------------------------------------ */
.home_lazy_body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);   /* two rows, like the products that will replace them */
  grid-auto-rows: 0;                    /* blocks that do not fit the two rows take no space */
  gap: 20px;
  height: 716px;   /* close to the height of the two rows that replace it, so little moves */
  overflow: hidden;
}
.home_lazy_body span {
  border-radius: 20px;
  background: linear-gradient(90deg, #f3f5fb 0%, #e9edf7 50%, #f3f5fb 100%);
  background-size: 200% 100%;
  animation: home_lazy_shimmer 1.4s ease-in-out infinite;
}
@keyframes home_lazy_shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home_lazy_body span { animation: none; }
}
@media (max-width: 1150px) {
  .home_lazy_body { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .home_lazy_body { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .home_lazy_body { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .home_lazy_body { height: 560px; }
  .home_lazy_body span { border-radius: 16px; }
}
/* products that have just arrived fade in gently */
.home_lazy_section.is_loaded .products_section {
  animation: home_lazy_in 0.35s ease-out;
}
@keyframes home_lazy_in {
  from { opacity: 0; }
  to   { opacity: 1; }
}