/* ── Base colors — adapt to your dark theme ── */
:root {
  --sk-base:    #2a2a2a;   /* dark bg matching your theme */
  --sk-shine:   #3a3a3a;
  --sk-radius:  6px;
}

/* ── Skeleton wrapper ── */
.special-products--lazy  .special-products__skeleton { display: block; }
.special-products--loaded .special-products__skeleton { display: none; }

.special-products__skeleton {
  padding: 1.5rem 0;
}

/* ── Brand block skeleton: image left + info right (mirrors real layout) ── */
.sk-brand-wrapper {
  margin-bottom: 3.5rem;
}

.sk-brand-row {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0 15px;
}

/* col-md-7 equivalent */
.sk-brand-img {
  flex: 0 0 58.333%;
  height: 320px;          /* matches your webp images aspect ~804×398 */
  border-radius: var(--sk-radius);
  background: var(--sk-base);
}

/* col-md-5 equivalent */
.sk-brand-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sk-line {
  height: 13px;
  border-radius: 4px;
  background: var(--sk-base);
}
.sk-line--title { height: 32px; width: 55%; }
.sk-line--short { width: 38%; }

.sk-btn {
  height: 42px;
  width: 160px;
  border-radius: 4px;
  background: var(--sk-base);
  margin-top: 8px;
}

/* ── Product cards row ── */
.sk-products-row {
  display: flex;
  gap: 1rem;
  padding: 0 15px;
  overflow: hidden;       /* clip to same width as real carousel */
}

.sk-product-card {
  flex: 0 0 calc(16.666% - 0.85rem); /* ~6 cards visible on desktop */
  min-width: 0;
  height: 310px;
  border-radius: var(--sk-radius);
  background: var(--sk-base);
}

/* ── Shimmer animation ── */
@keyframes sk-shimmer {
  0%   { background-position: -1200px 0; }
  100% { background-position:  1200px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  );
  background-size: 1200px 100%;
  animation: sk-shimmer 1.6s infinite linear;
}

/* ── Mobile ── */
@media (max-width: 991px) {
  .sk-brand-row       { flex-direction: column; }
  .sk-brand-img       { flex: none; width: 100%; height: 220px; }
  .sk-product-card    { flex: 0 0 calc(50% - 0.5rem); height: 260px; }
}

@media (max-width: 575px) {
  .sk-product-card    { flex: 0 0 calc(50% - 0.5rem); }
  .sk-brand-img       { height: 180px; }
}

/* ── Error state ── */
.special-products--error { padding: 1rem; }