/* Skeleton loaders for Whafix Solar - responsive, low-cost shimmer */
:root{
  --skeleton-bg:#e9eef6;
  --skeleton-accent:#f1f5fb;
  --skeleton-radius:16px;
  --skeleton-animation-duration:1.2s;
}

@keyframes wh-skeleton-shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

.skeleton{
  display:block;
  background:linear-gradient(90deg,var(--skeleton-bg) 0%, var(--skeleton-accent) 50%, var(--skeleton-bg) 100%);
  background-size:200% 100%;
  border-radius:var(--skeleton-radius);
  animation:wh-skeleton-shimmer var(--skeleton-animation-duration) linear infinite;
  will-change:background-position,opacity,transform;
}

.skeleton--none{background:transparent;animation:none}

.skeleton--mounted{position:relative}
.skeleton--mounted .skeleton{opacity:1;visibility:visible}

.skeleton-row{display:block;height:14px;border-radius:8px}
.skeleton-rect{display:block;width:100%;height:100%;}

.skeleton-card{
  padding:12px;background:transparent;border-radius:14px;overflow:hidden;
}

.product-skeleton{display:grid;grid-template-rows:auto 1fr;gap:12px}
.product-skeleton .skeleton-image{height:180px;border-radius:12px}
.product-skeleton .skeleton-title{height:18px;width:70%}
.product-skeleton .skeleton-price{height:18px;width:38%}
.product-skeleton .skeleton-rating{height:14px;width:30%}
.product-skeleton .skeleton-btn{height:38px;width:100px;border-radius:10px}

.product-grid-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}

.pd-skeleton{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
.pd-gallery{display:grid;gap:12px}
.pd-gallery .skeleton-image{height:420px;border-radius:12px}
.pd-side .skeleton-title{height:28px;width:90%}
.pd-side .skeleton-price{height:26px;width:40%}
.pd-side .skeleton-line{height:14px;width:100%;margin-bottom:12px}

.cart-skeleton .cart-row{display:grid;grid-template-columns:80px 1fr 100px;gap:12px;align-items:center;padding:12px}
.cart-skeleton .cart-image{height:64px;width:80px;border-radius:10px}
.cart-skeleton .cart-title{height:16px;width:70%}
.cart-skeleton .cart-qty{height:32px;width:80px;border-radius:8px}

.review-skeleton{display:grid;grid-template-columns:56px 1fr;gap:12px}
.review-skeleton .avatar{height:48px;width:48px;border-radius:999px}
.review-skeleton .name{height:14px;width:30%}
.review-skeleton .text{height:12px;width:100%;margin-bottom:8px}

.table-row-skeleton{display:flex;gap:12px;align-items:center;padding:10px}
.table-row-skeleton .cell{height:14px;flex:1}

.dashboard-card-skeleton{height:100px;border-radius:12px}
.chart-skeleton{height:220px;border-radius:12px}

/* Accessibility helpers */
[aria-busy="true"]{position:relative}

/* Responsive tweaks */
@media (max-width: 900px){
  .pd-skeleton{grid-template-columns:1fr}
  .pd-gallery .skeleton-image{height:300px}
}