/* ============================================================
   SKELETON LOADING SYSTEM
   Shimmer-based placeholders used while: initial product grids load,
   AJAX filters run, AJAX search results stream in, quick view fetches
   product data, and mini-cart fragments refresh.
   ============================================================ */
@keyframes arShimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
.sk{
  position:relative;overflow:hidden;border-radius:var(--r-sm);
  background:linear-gradient(90deg,#eef0ee 25%,#f7f8f7 37%,#eef0ee 63%);
  background-size:800px 100%;
  animation:arShimmer 1.4s ease-in-out infinite;
}

/* ---- Product card skeleton (grid / slider) ---- */
.sk-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  display:flex;flex-direction:column;gap:14px;
}
.sk-card .sk-thumb{height:150px;border-radius:var(--r-md)}
.sk-card .sk-line{height:12px;border-radius:6px}
.sk-card .sk-line.w-80{width:80%}
.sk-card .sk-line.w-60{width:60%}
.sk-card .sk-line.w-40{width:40%}
.sk-card .sk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.sk-card .sk-circle{width:38px;height:38px;border-radius:50%}

.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.sk-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Search result row skeleton ---- */
.sk-result-row{display:flex;align-items:center;gap:14px;padding:12px 6px}
.sk-result-row .sk-thumb-sm{width:52px;height:52px;border-radius:var(--r-sm);flex-shrink:0}
.sk-result-row .sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-result-row .sk-line{height:10px;border-radius:6px}

/* ---- Mini-cart item skeleton ---- */
.sk-cart-item{display:flex;gap:12px;padding:14px 0}
.sk-cart-item .sk-thumb-sm{width:64px;height:64px;border-radius:var(--r-sm);flex-shrink:0}
.sk-cart-item .sk-lines{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}

/* ---- Quick view skeleton ---- */
.sk-qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.sk-qv-grid .sk-thumb{height:340px;border-radius:var(--r-lg)}
@media(max-width:700px){.sk-qv-grid{grid-template-columns:1fr}}

/* ---- Hero / banner skeleton (used until first paint on very slow connections) ---- */
.sk-hero{height:440px;border-radius:var(--r-xl)}

/* ---- Generic text-line skeleton helper ---- */
.sk-text{height:10px;border-radius:6px;margin-bottom:8px}

/* ---- Category slider skeleton ---- */
.sk-cat-slide{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sk-cat-slide .sk-circle{width:52px;height:52px;border-radius:50%}
.sk-cat-slide .sk-line{width:70%;height:10px;border-radius:6px}

/* fade the skeleton out smoothly once real content is injected */
.sk-fade-out{animation:arSkFadeOut .35s ease forwards}
@keyframes arSkFadeOut{to{opacity:0;transform:scale(.98)}}