/* Shimmer / skeleton effects — shared by every page */
@keyframes aaral-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

:root {
  --sh-base: #eceef1;
  --sh-shine: #f8f9fb;
}

/* Images that are still loading (class added/removed by js/shimmer.js) */
img.sh-loading {
  background: linear-gradient(100deg, var(--sh-base) 30%, var(--sh-shine) 50%, var(--sh-base) 70%);
  background-size: 200% 100%;
  animation: aaral-shimmer 1.3s linear infinite;
}

/* Skeleton placeholder cards (product grids) */
.card-skeleton {
  background: linear-gradient(100deg, var(--sh-base) 30%, var(--sh-shine) 50%, var(--sh-base) 70%);
  background-size: 200% 100%;
  animation: aaral-shimmer 1.3s linear infinite;
  border-radius: 14px;
  aspect-ratio: 1 / 1.25;
}

/* Containers that JS fills later show a shimmer block until they have content */
.carousel-track:empty,
#shops-grid:empty,
#cart-list:empty,
#ls-cart-list:empty {
  min-height: 140px;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--sh-base) 30%, var(--sh-shine) 50%, var(--sh-base) 70%);
  background-size: 200% 100%;
  animation: aaral-shimmer 1.3s linear infinite;
}

/* Hide the browser's own clear button on type="search" so only ours shows */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Search box with clear (×) button — used on the Contacts page */
.sh-search-wrap { position: relative; display: flex; align-items: center; }
.sh-search-wrap input { width: 100%; padding-right: 36px; }
.sh-search-clear {
  display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0;
  background: #e5e7eb; color: #6b7280; cursor: pointer; align-items: center; justify-content: center;
}
.sh-search-clear.show { display: flex; }

@media (prefers-reduced-motion: reduce) {
  img.sh-loading, .card-skeleton, .carousel-track:empty, #shops-grid:empty, #cart-list:empty, #ls-cart-list:empty { animation: none; }
}
@media (prefers-color-scheme: dark) { :root { --sh-base: #2a2d33; --sh-shine: #363a42; } }