/* ==========================================================================
   Kiddex storefront hardening + landing-page polish
   Loaded LAST so it can safely override theme styles.
   Goals:
   1. Kill the "broken flash" where product carousels render as giant,
      full-width placeholder cards before Owl Carousel (jQuery) initialises.
   2. Provide a permanent, clean grid fallback if the jQuery plugins fail.
   3. Make every product card image a uniform square so the cards look
      designed regardless of the (inconsistent) demo placeholder art.
   ========================================================================== */

/* --- 1 & 2 · Grid fallback for product "carousels" until Owl takes over --- */
.four-item-carousel:not(.owl-loaded),
.five-item-carousel:not(.owl-loaded) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  overflow: hidden;
}

/* Carousels that sit beside an ads block have less room -> 2-up fallback */
.content-box .four-item-carousel:not(.owl-loaded) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .four-item-carousel:not(.owl-loaded),
  .five-item-carousel:not(.owl-loaded) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .four-item-carousel:not(.owl-loaded),
  .five-item-carousel:not(.owl-loaded),
  .content-box .four-item-carousel:not(.owl-loaded) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .four-item-carousel:not(.owl-loaded),
  .five-item-carousel:not(.owl-loaded),
  .content-box .four-item-carousel:not(.owl-loaded) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.four-item-carousel:not(.owl-loaded) > *,
.five-item-carousel:not(.owl-loaded) > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* --- 3 · Product imagery polish ------------------------------------------
   The theme only ships tiny grayscale dimension-label placeholders
   (e.g. 235x235.png) — no real product photos exist. Rather than show
   "broken" gray boxes, we present every product as a clean, designed tile:
   a soft rotating pastel wash + a subtle motif. Drop-in real photos later by
   removing `opacity/mix-blend` on `.image img` and the `::after` motif. --- */
.shop-block-one .inner-box .image-box {
  position: relative;
}
.shop-block-one .inner-box .image-box .image {
  position: relative;
  display: block;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(150deg, #EAEFE3, #D8E2CC);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Decorative product motif (soft shopping bag) centred in the tile */
.shop-block-one .inner-box .image-box .image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%239A958D' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8Z'/><path d='M9 8a3 3 0 0 1 6 0'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  opacity: 0.6;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
/* Hide the grayscale placeholder text but keep the node for the lightbox */
.shop-block-one .inner-box .image-box .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.shop-block-one .inner-box:hover .image-box .image::after {
  transform: scale(1.06);
  opacity: 0.8;
}

/* Rotating pastel washes so a row of cards feels considered, not repetitive */
.shop-block-one:nth-of-type(5n + 1) .inner-box .image-box .image {
  background: linear-gradient(150deg, #EAEFE3, #D8E2CC);
}
.shop-block-one:nth-of-type(5n + 2) .inner-box .image-box .image {
  background: linear-gradient(150deg, #F2ECE2, #E6DBC9);
}
.shop-block-one:nth-of-type(5n + 3) .inner-box .image-box .image {
  background: linear-gradient(150deg, #F0E4D6, #E4CDB6);
}
.shop-block-one:nth-of-type(5n + 4) .inner-box .image-box .image {
  background: linear-gradient(150deg, #FAF7F2, #EDE6D9);
}
.shop-block-one:nth-of-type(5n + 5) .inner-box .image-box .image {
  background: linear-gradient(150deg, #E4EAE0, #CDD8C6);
}

/* Gentle card elevation so the whole grid feels soft and premium */
.shop-block-one .inner-box {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.shop-block-one .inner-box:hover {
  transform: translateY(-4px);
}

/* --- Hero: avoid a giant placeholder / empty hero before Owl loads --- */
.banner-style-two .banner-carousel:not(.owl-loaded) .slide-item:nth-child(n + 2) {
  display: none;
}
.banner-style-two .image-box .image img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Earthy palette cohesion (Panda Loves Bamboo)
   Brand: Bamboo Green #6D8B74 · Deep Forest #4A5D4F · Clay #C68B59
   ========================================================================== */

/* Primary CTA hover -> Deep Forest (theme fill animation + flat fallback) */
.theme-btn.btn-one:hover {
  background-color: #4A5D4F;
}
.theme-btn.btn-one:hover:before,
.theme-btn.btn-one:hover:after {
  background-color: #4A5D4F !important;
}

/* Soft, premium card hover ring in Bamboo Green */
.shop-block-one .inner-box:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}
.shop-block-one .inner-box .image-box .image {
  box-shadow: inset 0 0 0 1px #ECE6DC;
}

/* Keep large white panels on Warm Ivory so the site reads calm, not stark */
.boxed_wrapper {
  background: #FAF7F2;
}