/* Index Page Styles - Main CSS file that imports all components */

/* Import all index component styles */
@import url('index/_categories.css');
@import url('index/_stores.css');
@import url('index/_featured_products.css');
@import url('index/_reviews.css');
@import url('index/_footer_text.css');
@import url('index/_mobile_optimizations.css');

/* Index-specific global styles */
.container {
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

/* Global mobile optimizations for index page */
@media (max-width: 768px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  /* Ensure no component causes horizontal overflow */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Touch-friendly interactions on mobile */
@media (hover: none) and (pointer: coarse) {
  .vertical-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(2,6,23,0.04);
  }
  
  .store-card:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(2,6,23,0.08);
  }
}

/* Smooth scrolling for mobile category carousel */
@supports (-webkit-overflow-scrolling: touch) {
  .categories-container {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .vertical-card {
    scroll-snap-align: center;
  }
}

.flower {
  --flower-size: 40px;
  --flower-speed: 5s;
  --flower-segment: calc(var(--flower-size) / 10);
  --flower-dot-size: calc(var(--flower-segment) * 4);
  --flower-petal: var(--brand, #fd8);
  --flower-center: rgba(var(--brand-rgb, 233, 150, 102), 0.85);

  font-family: sans-serif;
  font-weight: 100;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.flower::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: var(--flower-dot-size);
  height: var(--flower-dot-size);
  background: var(--flower-center);
  border-radius: 100%;
  box-shadow:
    white 0 0 15px 0,
    var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
    var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment);
  animation: flower var(--flower-speed) infinite ease-in-out;
  transform-origin: 50% 50%;
}

@keyframes flower {
  0% {
    transform: rotate(0deg);
    box-shadow:
      white 0 0 15px 0,
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment);
  }
  50% {
    transform: rotate(1080deg);
    box-shadow:
      white 0 0 15px 0,
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(-3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment),
      var(--flower-petal) calc(3 * var(--flower-segment)) calc(-3 * var(--flower-segment)) 0 var(--flower-segment);
  }
}

.image-loader {
  display: block;
  z-index: 5;
  pointer-events: none;
}

.image-loader-fill {
  height: 100%;
}

.image-loader-square {
  aspect-ratio: 1 / 1;
}