/* =============================================================
   WP Components — Shared Frontend Styles
   Skeleton loading placeholders + common frontend utilities.
   Enqueued by wp-brand-assets on the frontend.
   ============================================================= */

   /* ── Prevent flash on initial paint ────────────────────────── */
   /* Scope theme ready check so standard component animations remain functional */
   html:not([data-theme-ready]) .wpc-theme-flash-guard {
       animation: none !important;
       transition: none !important;
   }

/* ── Global Scrollbar Styling ────────────────────────────────
   Thin, brand-colored scrollbars - accessible & modern. */
html, body {
    scrollbar-gutter: stable;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--wpc-accent, #D4AF37) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--wpc-accent, #D4AF37);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #b8942e;
}
body.wcp-active * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Allow scrollbar on specific components that need it */
body.wcp-active .wcp-filter-panel,
body.wcp-active .woocommerce-MyAccount-content,
body.wcp-active .wpp-gallery__thumbs,
body.wcp-active .wcd-drawer__body,
body.wcp-active .wwl-drawer-body {
    scrollbar-width: thin;
    -ms-overflow-style: auto;
}
body.wcp-active .wcp-filter-panel::-webkit-scrollbar,
body.wcp-active .woocommerce-MyAccount-content::-webkit-scrollbar,
body.wcp-active .wpp-gallery__thumbs::-webkit-scrollbar,
body.wcp-active .wcd-drawer__body::-webkit-scrollbar,
body.wcp-active .wwl-drawer-body::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}

/* ── Skeleton shimmer keyframes ────────────────────────────── */
@keyframes wpc-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* ── Base skeleton ──────────────────────────────────────────── */
.wpc-skeleton {
    background: #e0e0e0;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200px 100%;
    animation: wpc-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    line-height: 1;
}

/* ── Variants ───────────────────────────────────────────────── */
.wpc-skeleton-card {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.wpc-skeleton-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
}

.wpc-skeleton-text {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
}

.wpc-skeleton-text--short {
    width: 50%;
}

.wpc-skeleton-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* ── Dark mode overrides ───────────────────────────────────── */
[data-theme="dark"] .wpc-skeleton {
    background: #2a2a2a;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200px 100%;
}