/* Shared, layout-aware loading placeholders for API-driven content. */
.site-skeleton-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-load-error {
    max-width: 680px;
    margin: 96px auto;
    padding: 22px 24px;
    border: 1px solid rgba(123, 41, 43, .18);
    background: rgba(123, 41, 43, .055);
    color: #7b292b;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.site-skeleton {
    --skeleton-base: #e9e7e4;
    --skeleton-glint: rgba(255, 255, 255, .78);
    pointer-events: none;
    user-select: none;
}

.site-skeleton--dark {
    --skeleton-base: rgba(255, 255, 255, .105);
    --skeleton-glint: rgba(255, 255, 255, .13);
}

.site-skeleton__shape {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--skeleton-base);
    color: transparent !important;
}

.site-skeleton__shape::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(100deg, transparent 15%, var(--skeleton-glint) 48%, transparent 82%);
    animation: site-skeleton-shimmer 1.55s cubic-bezier(.4, 0, .2, 1) infinite;
}

.site-skeleton__line { height: 12px; border-radius: 999px; }
.site-skeleton__line--title { height: 20px; width: 68%; }
.site-skeleton__line--short { width: 42%; }
.site-skeleton__line--medium { width: 76%; }

.site-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(var(--skeleton-columns, 3), minmax(0, 1fr));
    gap: var(--skeleton-gap, 24px);
    width: 100%;
}

.site-skeleton-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(24, 24, 24, .065);
    border-radius: var(--skeleton-radius, 8px);
    background: rgba(255, 255, 255, .72);
}

.site-skeleton-card__media {
    width: 100%;
    aspect-ratio: var(--skeleton-media-ratio, 16 / 10);
}

.site-skeleton-card__body {
    display: grid;
    gap: 13px;
    padding: var(--skeleton-card-padding, 22px);
}

.site-skeleton-news {
    display: grid;
    grid-template-columns: minmax(112px, 30%) 1fr;
    gap: 24px;
    min-height: 190px;
    padding: 28px;
    border-radius: 6px;
    background: #fff;
}

.site-skeleton-news__media { width: 100%; aspect-ratio: 1; border-radius: 5px; }
.site-skeleton-news__body { display: grid; align-content: center; gap: 16px; }

.site-skeleton-list { display: grid; width: 100%; }
.site-skeleton-row {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(140px, .7fr) 42px;
    align-items: center;
    gap: 28px;
    min-height: 92px;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
}
.site-skeleton-row__copy { display: grid; gap: 11px; }
.site-skeleton-row__icon { width: 34px; height: 34px; border-radius: 50%; justify-self: end; }

.site-skeleton-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 48px;
}
.site-skeleton-pill { width: clamp(86px, 10vw, 136px); height: 24px; border-radius: 999px; }
.site-skeleton-pill:nth-child(2n) { width: clamp(108px, 12vw, 160px); }

.site-skeleton-product-info { display: grid; gap: 22px; width: min(420px, 100%); }
.site-skeleton-product-info__specs { display: grid; gap: 16px; }
.site-skeleton-product-info__item { display: grid; gap: 8px; }
.site-skeleton-product-info__actions { display: flex; gap: 12px; margin-top: 10px; }
.site-skeleton-product-info__button { width: 132px; height: 44px; border-radius: 2px; }
.site-skeleton-product-visual { width: min(650px, 88%); aspect-ratio: 16 / 8; border-radius: 4px; margin: auto; }

.site-skeleton-detail-copy { display: grid; gap: 15px; width: min(620px, 100%); }
.site-skeleton-detail-copy .site-skeleton__line--hero { width: 72%; height: clamp(32px, 4.5vw, 68px); border-radius: 4px; }
.site-skeleton-detail-specs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.site-skeleton-detail-specs .site-skeleton__shape { width: 118px; height: 54px; border-radius: 3px; }

@keyframes site-skeleton-shimmer {
    to { transform: translateX(110%); }
}

@media (max-width: 900px) {
    .site-skeleton-grid { --skeleton-columns: 2 !important; }
    .site-skeleton-news { min-height: 160px; padding: 20px; gap: 18px; }
}

@media (max-width: 600px) {
    .site-skeleton-grid { --skeleton-columns: 1 !important; }
    .site-skeleton-news { grid-template-columns: 92px 1fr; min-height: 132px; padding: 16px; gap: 14px; }
    .site-skeleton-row { grid-template-columns: minmax(0, 1fr) 34px; gap: 16px; min-height: 84px; }
    .site-skeleton-row > :nth-child(2) { display: none; }
    .site-skeleton-product-info__button { width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-skeleton__shape::after { animation: none; }
}