/* ==========================================================================
   Revoli 4BoxStore Skeleton / Shimmer Loading Placeholder
   Matches Woodmart 4BoxStore layout: 50/50 hero slider, features, categories, 1:1 products
========================================================================= */

@keyframes revoliShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes revoliFadeIn {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

.sk-bone {
  display: block !important;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%) !important;
  background-size: 300% 100% !important;
  animation: revoliShimmer 1.5s ease-in-out infinite !important;
  border-radius: 8px;
}

/* Hide real content until loaded, only reveal skeleton */
#spa-content:not(.spa-loaded) > :not(#spa-initial-skeleton):not(script):not(style) {
  display: none !important;
}

#spa-initial-skeleton {
  width: 100% !important;
  display: block !important;
  min-height: 80vh !important;
}

html.revoli-theme body.ga-product-page #spa-initial-skeleton {
  display: block !important;
}

#spa-content.spa-loaded {
  animation: revoliFadeIn 0.25s ease-out;
}

.revoli-sk-wrap {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 16px 20px 40px !important;
  direction: rtl !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .revoli-sk-wrap {
    padding: 12px 14px 30px !important;
  }
}

/* 1. Hero Grid Skeleton (50% / 50%) */
.revoli-sk-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 991px) {
  .revoli-sk-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.revoli-sk-hero-main {
  width: 100% !important;
  height: 420px !important;
  border-radius: 16px !important;
}

@media (max-width: 991px) {
  .revoli-sk-hero-main {
    height: 220px !important;
    aspect-ratio: 16 / 9 !important;
  }
}

.revoli-sk-hero-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  height: 420px !important;
}

@media (max-width: 991px) {
  .revoli-sk-hero-cards {
    height: auto !important;
  }
}

.revoli-sk-hero-cards .revoli-sk-hero-card:nth-child(1) {
  height: 190px !important;
  border-radius: 14px !important;
}

.revoli-sk-hero-cards .revoli-sk-hero-card:nth-child(2),
.revoli-sk-hero-cards .revoli-sk-hero-card:nth-child(3) {
  flex: 1 !important;
  min-height: 95px !important;
  border-radius: 14px !important;
}

/* 2. Features Bar Skeleton */
.revoli-sk-features {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 768px) {
  .revoli-sk-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
}

.revoli-sk-feature-card {
  height: 68px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.revoli-sk-feature-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

.revoli-sk-feature-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.revoli-sk-feature-line1 {
  width: 75% !important;
  height: 13px !important;
  border-radius: 4px !important;
}

.revoli-sk-feature-line2 {
  width: 50% !important;
  height: 10px !important;
  border-radius: 3px !important;
}

/* 3. Categories Skeleton (Circular Carousel) */
.revoli-sk-categories {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 768px) {
  .revoli-sk-categories {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
}

.revoli-sk-category-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.revoli-sk-category-thumb {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
}

@media (max-width: 768px) {
  .revoli-sk-category-thumb {
    width: 64px !important;
    height: 64px !important;
  }
}

.revoli-sk-category-text {
  width: 65px !important;
  height: 12px !important;
  border-radius: 6px !important;
}

/* 4. Products Grid Skeleton */
.revoli-sk-products-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}

.revoli-sk-title-bone {
  width: 180px !important;
  height: 26px !important;
  border-radius: 6px !important;
}

.revoli-sk-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 991px) {
  .revoli-sk-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

.revoli-sk-prod-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #ffffff !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

.revoli-sk-prod-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
}

.revoli-sk-prod-cat {
  width: 45% !important;
  height: 11px !important;
  border-radius: 4px !important;
}

.revoli-sk-prod-title {
  width: 85% !important;
  height: 15px !important;
  border-radius: 4px !important;
}

.revoli-sk-prod-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 4px !important;
}

.revoli-sk-prod-price {
  width: 50% !important;
  height: 18px !important;
  border-radius: 4px !important;
}

.revoli-sk-prod-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

/* 5. Shop Skeleton */
.revoli-sk-shop-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

.revoli-sk-shop-title {
  width: 200px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

.revoli-sk-shop-filter {
  width: 120px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

.revoli-sk-pills-bar {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.revoli-sk-pill {
  width: 90px !important;
  height: 34px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}

/* 6. Product Single Detail Skeleton */
.revoli-sk-prod-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 36px !important;
  margin-top: 16px !important;
}

@media (max-width: 991px) {
  .revoli-sk-prod-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

.revoli-sk-gallery-main {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
}

.revoli-sk-gallery-thumbs {
  display: flex !important;
  gap: 10px !important;
}

.revoli-sk-thumb {
  width: 65px !important;
  height: 65px !important;
  border-radius: 10px !important;
}

.revoli-sk-prod-info {
  display: flex !important;
  flex-direction: column !important;
}