/**
 * Skeleton Loader - Template Styles
 *
 * CSS for skeleton overlays. PHP renders templates, CSS styles them.
 *
 * @package Skeleton_Loader
 * @since   3.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	--wsskl-bone-color: #e2e5ea;
	/* Translucent highlight: the shimmer reads as a soft pass of light over
	   the surface, not as a hard white bar moving across grey. This is the
	   single biggest difference between "looks like a placeholder" and
	   "looks like a polished loading state". */
	--wsskl-bone-highlight: rgba(255, 255, 255, 0.55);
	--wsskl-bone-edge: rgba(255, 255, 255, 0.5);
	--wsskl-overlay-bg: #f7f8fa;
	--wsskl-animation-duration: 1.5s;
	/* Tiered border-radius — different surfaces get different curves so the
	   eye reads them as different content types. Overridden per element below. */
	--wsskl-border-radius: 4px;
	--wsskl-radius-image: 8px;
	--wsskl-radius-pill: 9999px;
	--wsskl-grid-gap: 20px;
	--wsskl-container-width: 1200px;
	--wsskl-card-ratio: 1.3;
	--wsskl-reveal-duration: 0.35s;
	--wsskl-reveal-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme. Bone is lifted to gray-600 over a gray-900 surface so bones
   read clearly without being aggressive. The highlight stays translucent
   for the same shimmer rationale as light mode. */
body.wsskl-theme-dark {
	--wsskl-bone-color: #4b5563;
	--wsskl-bone-highlight: rgba(255, 255, 255, 0.08);
	--wsskl-bone-edge: rgba(255, 255, 255, 0.04);
	--wsskl-overlay-bg: #0f172a;
}

/* ==========================================================================
   Overlay Base
   ========================================================================== */

.wsskl-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	/* Solid base for cards/header/footer to reuse via --wsskl-overlay-bg,
	   then a barely-perceptible vertical gradient on top adds depth without
	   tinting anything that re-reads the variable. */
	background-color: var(--wsskl-overlay-bg);
	background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.015) 100% );
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	transition: opacity var(--wsskl-reveal-duration) var(--wsskl-reveal-easing),
				visibility var(--wsskl-reveal-duration);
	display: flex;
	flex-direction: column;
}

/* WordPress admin bar adjustment */
body.admin-bar .wsskl-overlay {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wsskl-overlay {
		top: 46px;
	}
}

/* Hide overlay when revealing */
body.skeleton-revealing .wsskl-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Remove overlay completely after reveal */
body:not(.skeleton-loading) .wsskl-overlay {
	display: none;
}

/* ==========================================================================
   Skeleton Header
   ========================================================================== */

.wsskl-skeleton-header {
	background: var(--wsskl-overlay-bg);
	border-bottom: 1px solid var(--wsskl-bone-color);
	padding: 15px 20px;
	flex-shrink: 0;
}

.wsskl-skeleton-header-inner {
	max-width: var(--wsskl-container-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.wsskl-skeleton-logo {
	height: 40px;
	width: 120px;
	flex-shrink: 0;
}

.wsskl-skeleton-nav {
	display: flex;
	gap: 25px;
	flex: 1;
	justify-content: center;
}

.wsskl-skeleton-nav-item {
	height: 16px;
	width: 70px;
}

.wsskl-skeleton-header-actions {
	display: flex;
	gap: 15px;
	flex-shrink: 0;
}

.wsskl-skeleton-header-icon {
	height: 24px;
	width: 24px;
	border-radius: 50%;
}

@media (max-width: 768px) {
	.wsskl-skeleton-nav {
		display: none;
	}

	.wsskl-skeleton-header-inner {
		justify-content: space-between;
	}
}

/* ==========================================================================
   Skeleton Footer
   ========================================================================== */

.wsskl-skeleton-footer {
	background: var(--wsskl-overlay-bg);
	border-top: 1px solid var(--wsskl-bone-color);
	padding: 40px 20px 30px;
	flex-shrink: 0;
	margin-top: auto;
}

.wsskl-skeleton-footer-inner {
	max-width: var(--wsskl-container-width);
	margin: 0 auto;
}

.wsskl-skeleton-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-bottom: 30px;
}

@media (max-width: 768px) {
	.wsskl-skeleton-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wsskl-skeleton-footer-grid {
		grid-template-columns: 1fr;
	}
}

.wsskl-skeleton-footer-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wsskl-skeleton-footer-title {
	height: 16px;
	width: 80px;
	margin-bottom: 5px;
}

.wsskl-skeleton-footer-link {
	height: 12px;
	width: 100px;
}

.wsskl-skeleton-footer-link:nth-child(odd) {
	width: 85px;
}

.wsskl-skeleton-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--wsskl-bone-color);
}

.wsskl-skeleton-copyright {
	height: 12px;
	width: 200px;
}

.wsskl-skeleton-social {
	display: flex;
	gap: 10px;
}

.wsskl-skeleton-social-icon {
	height: 20px;
	width: 20px;
	border-radius: 50%;
}

@media (max-width: 480px) {
	.wsskl-skeleton-footer-bottom {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.wsskl-main-content {
	flex: 1 0 auto;
	/* Explicit full width: the overlay is a flex column, but some themes style
	   the <main> element (which this reuses) so it shrink-wraps its content
	   instead of stretching — collapsing the Pipeline-2 templates (shop/archive/
	   search/…) into a narrow centred column. width:100% + border-box forces it
	   to fill the viewport regardless of the active theme's <main> styling. */
	width: 100%;
	box-sizing: border-box;
	min-height: 400px;
	padding-top: 30px;
	padding-bottom: 40px;
}

.wsskl-main-content > .wsskl-container {
	min-height: 350px;
}

/* ==========================================================================
   Container
   ========================================================================== */

.wsskl-container {
	max-width: var(--wsskl-container-width);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	width: 100%;
}

/* ==========================================================================
   Skeleton Bone (Base Element)
   ========================================================================== */

.wsskl-bone {
	background-color: var(--wsskl-bone-color);
	border-radius: var(--wsskl-border-radius);
	position: relative;
	overflow: hidden;
	display: block;
	/* Subtle 1px top edge highlight. Reads as a faint bevel and makes the
	   surface feel like material rather than a filled rectangle. The trick
	   high-end skeletons use that you can't quite put your finger on. */
	box-shadow: inset 0 1px 0 var(--wsskl-bone-edge);
}

/* Border radius variants */
body.wsskl-radius-none .wsskl-bone {
	border-radius: 0;
}

body.wsskl-radius-rounded .wsskl-bone {
	border-radius: 8px;
}

/* Staggered animation: a small per-position delay turns a synchronized
   animation into a wave passing across the layout. Costs nothing in
   performance and removes the "everything blinking in lockstep" tell of
   cheaper skeletons. Cascades over the first 8 children of any common
   skeleton container, then wraps.

   NOTE: these are animation-delay offsets only — inert under the free Static
   style (the bone ::after is display:none, so nothing animates). They enhance
   the Pro animations, whose keyframes (shimmer, pulse, wave, …) live in
   includes/pro/assets__premium_only/css/pro-animations.css and load for Pro
   only. The shimmer keyframes that used to sit here were removed when shimmer
   became a Pro style — pro-animations.css already defines the canonical,
   higher-specificity version. */
.wsskl-card:nth-child(8n+1) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+1),
.wsskl-skeleton-footer-link:nth-child(8n+1),
.wsskl-search-item:nth-child(8n+1) .wsskl-bone::after { animation-delay: 0s; }

.wsskl-card:nth-child(8n+2) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+2),
.wsskl-skeleton-footer-link:nth-child(8n+2),
.wsskl-search-item:nth-child(8n+2) .wsskl-bone::after { animation-delay: 0.08s; }

.wsskl-card:nth-child(8n+3) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+3),
.wsskl-skeleton-footer-link:nth-child(8n+3),
.wsskl-search-item:nth-child(8n+3) .wsskl-bone::after { animation-delay: 0.16s; }

.wsskl-card:nth-child(8n+4) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+4),
.wsskl-skeleton-footer-link:nth-child(8n+4),
.wsskl-search-item:nth-child(8n+4) .wsskl-bone::after { animation-delay: 0.24s; }

.wsskl-card:nth-child(8n+5) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+5),
.wsskl-skeleton-footer-link:nth-child(8n+5),
.wsskl-search-item:nth-child(8n+5) .wsskl-bone::after { animation-delay: 0.32s; }

.wsskl-card:nth-child(8n+6) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+6),
.wsskl-skeleton-footer-link:nth-child(8n+6),
.wsskl-search-item:nth-child(8n+6) .wsskl-bone::after { animation-delay: 0.4s; }

.wsskl-card:nth-child(8n+7) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+7),
.wsskl-skeleton-footer-link:nth-child(8n+7),
.wsskl-search-item:nth-child(8n+7) .wsskl-bone::after { animation-delay: 0.48s; }

.wsskl-card:nth-child(8n+8) .wsskl-bone::after,
.wsskl-skeleton-nav-item:nth-child(8n+8),
.wsskl-skeleton-footer-link:nth-child(8n+8),
.wsskl-search-item:nth-child(8n+8) .wsskl-bone::after { animation-delay: 0.56s; }

/* Stagger paragraphs across the post body too. */
.wsskl-paragraph:nth-child(2) .wsskl-content-line::after { animation-delay: 0.05s; }
.wsskl-paragraph:nth-child(3) .wsskl-content-line::after { animation-delay: 0.1s; }
.wsskl-paragraph:nth-child(4) .wsskl-content-line::after { animation-delay: 0.15s; }
.wsskl-paragraph:nth-child(5) .wsskl-content-line::after { animation-delay: 0.2s; }
.wsskl-paragraph:nth-child(6) .wsskl-content-line::after { animation-delay: 0.25s; }
.wsskl-paragraph:nth-child(7) .wsskl-content-line::after { animation-delay: 0.3s; }
.wsskl-paragraph:nth-child(8) .wsskl-content-line::after { animation-delay: 0.35s; }

/* Static animation (no movement) */
body.wsskl-static .wsskl-bone::after {
	display: none;
}

/* Material-y bones don't want a top-edge highlight when there's no
   animation underneath them — it just looks like a stuck reflection. */
body.wsskl-static .wsskl-bone {
	box-shadow: none;
}

/* Accessibility: honor prefers-reduced-motion (WCAG 2.3.3). The skeleton still
 * renders — the bones stay visible — only the looping motion is removed, so the
 * loading state is a flat, static placeholder instead of an animated one. The
 * Pro animation styles drive either a ::before (pulse / breathing) or a ::after
 * (shimmer / wave / slide / spotlight / ripple / scan / rainbow) overlay, so we
 * stop every animation AND drop those overlay pseudo-elements on the skeleton
 * bones, leaving the bone's flat base colour. `!important` so it wins over the
 * Pro animation rules regardless of stylesheet order; a harmless no-op for the
 * free (static-only) build, which has no animation to suppress. Lives in the
 * always-loaded base CSS so the guard applies even when the Pro animation sheet
 * is present. */
@media (prefers-reduced-motion: reduce) {
	body.skeleton-loading *,
	body.skeleton-loading *::before,
	body.skeleton-loading *::after {
		animation: none !important;
	}
	body.skeleton-loading .wsskl-bone::before,
	body.skeleton-loading .wsskl-bone::after,
	body.skeleton-loading .wsskl-img-wrapper::before,
	body.skeleton-loading .wsskl-img-wrapper::after,
	body.skeleton-loading .wsskl-video-wrapper::before,
	body.skeleton-loading .wsskl-video-wrapper::after,
	body.skeleton-loading .wsskl-button::before,
	body.skeleton-loading .wsskl-button::after {
		display: none !important;
	}
}

/* ==========================================================================
   Grid System - Data-Driven Responsive
   ========================================================================== */

.wsskl-grid {
	display: grid;
	gap: var(--wsskl-grid-gap);
	min-height: 300px;
	width: 100%;
	/* --grid-columns is set per-grid via inline style="..." in the
	   skeleton templates. The 4 column fallback only fires for grids
	   that ship without the inline style (legacy / custom callers). */
	grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
}

/* Fallback class-based columns if custom properties not set */
.wsskl-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive grid using data-driven columns */
@media (max-width: 1024px) {
	.wsskl-grid[data-columns-tablet] {
		grid-template-columns: repeat(var(--grid-columns-tablet, 3), 1fr);
	}
}

@media (max-width: 768px) {
	.wsskl-grid[data-columns-mobile] {
		grid-template-columns: repeat(var(--grid-columns-mobile, 2), 1fr);
	}
}

@media (max-width: 480px) {
	.wsskl-grid {
		grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
	}
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.wsskl-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 250px;
}

.wsskl-card-image {
	width: 100%;
	height: 0;
	padding-bottom: calc(100% / var(--wsskl-card-ratio));
	position: relative;
	min-height: 150px;
	border-radius: var(--wsskl-radius-image);
}

.wsskl-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 5px;
}

.wsskl-badge {
	height: 24px;
	width: 50px;
	border-radius: var(--wsskl-radius-pill);
}

.wsskl-card-title {
	height: 20px;
	min-height: 20px;
	width: 85%;
}

/* Vary title widths */
.wsskl-card:nth-child(2n) .wsskl-card-title { width: 70%; }
.wsskl-card:nth-child(3n) .wsskl-card-title { width: 90%; }
.wsskl-card:nth-child(5n) .wsskl-card-title { width: 75%; }


.wsskl-card-price {
	height: 18px;
	min-height: 18px;
	width: 35%;
}

/* Vary price widths */
.wsskl-card:nth-child(2n) .wsskl-card-price { width: 45%; }
.wsskl-card:nth-child(4n) .wsskl-card-price { width: 30%; }

.wsskl-card-meta {
	height: 12px;
	min-height: 12px;
	width: 100px;
}

.wsskl-card-excerpt {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wsskl-excerpt-line {
	height: 12px;
}

.wsskl-excerpt-line:nth-child(1) { width: 100%; }
.wsskl-excerpt-line:nth-child(2) { width: 85%; }

/* ==========================================================================
   Shop Template
   ========================================================================== */

.wsskl-shop-header {
	/* Top gap mirrors the breathing room WooCommerce themes leave between the
	   site header and the breadcrumb; bottom gap separates title from toolbar. */
	margin: 34px 0 36px;
}

/* WooCommerce shows a breadcrumb above the archive title by default. */
.wsskl-breadcrumb {
	height: 24px;
	min-height: 24px;
	width: 180px;
	margin-bottom: 15px;
}

.wsskl-page-title {
	height: 50px;
	min-height: 50px;
	width: 220px;
}

/* Toolbar mirrors WooCommerce: result-count on the left, ordering on the
   right, on its own full-width row above the grid. */
.wsskl-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 40px;
}

.wsskl-result-count {
	height: 16px;
	min-height: 16px;
	width: 120px;
}

.wsskl-orderby {
	height: 40px;
	min-height: 40px;
	width: 180px;
}

.wsskl-products-grid {
	margin-bottom: 40px;
	min-height: 600px;
}

/* Card image ratio is set inline on .wsskl-products-grid from the detected
   WooCommerce catalog thumbnail ratio (WSSKL_Content_Analyzer::get_catalog_image_aspect_ratio).
   Custom properties inherit, so the grid-level value reaches .wsskl-card-image.
   When detection yields nothing, the :root --wsskl-card-ratio default applies. */

/* Pagination */
.wsskl-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.wsskl-page-number {
	height: 40px;
	width: 40px;
}

/* ==========================================================================
   Product Template
   ========================================================================== */

.wsskl-product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 60px;
}

@media (max-width: 768px) {
	.wsskl-product-layout {
		grid-template-columns: 1fr;
	}
}

.wsskl-gallery {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.wsskl-main-image {
	width: 100%;
	padding-bottom: 100%;
	border-radius: var(--wsskl-radius-image);
}

.wsskl-thumbnails {
	display: flex;
	gap: 10px;
}

.wsskl-thumbnail {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: var(--wsskl-radius-image);
}

.wsskl-product-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wsskl-product-title {
	height: 36px;
	width: 90%;
}

.wsskl-product-price {
	height: 32px;
	width: 120px;
}

.wsskl-product-description {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wsskl-text-line {
	height: 14px;
}

.wsskl-text-line:nth-child(1) { width: 100%; }
.wsskl-text-line:nth-child(2) { width: 95%; }
.wsskl-text-line:nth-child(3) { width: 85%; }
.wsskl-text-line:nth-child(4) { width: 70%; }

.wsskl-add-to-cart {
	height: 50px;
	width: 200px;
	margin-top: 10px;
}

.wsskl-meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.wsskl-meta-line {
	height: 14px;
	width: 150px;
}

/* Related products */
.wsskl-related {
	margin-top: 60px;
}

.wsskl-section-title {
	height: 28px;
	width: 180px;
	margin-bottom: 25px;
}

/* ==========================================================================
   Archive Template (Grid)
   ========================================================================== */

.wsskl-archive-header {
	margin-bottom: 30px;
}

.wsskl-posts-grid {
	min-height: 400px;
}

/* ==========================================================================
   Archive Template (List)
   ========================================================================== */

.wsskl-posts-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wsskl-post-item {
	display: flex;
	gap: 25px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--wsskl-bone-color);
}

.wsskl-post-item:last-child {
	border-bottom: none;
}

.wsskl-post-item .wsskl-post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wsskl-post-item .wsskl-post-meta {
	height: 12px;
	width: 150px;
}

.wsskl-post-item .wsskl-post-title {
	height: 28px;
	width: 80%;
}

.wsskl-post-excerpt {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wsskl-post-excerpt .wsskl-text-line {
	height: 14px;
}

/* Leading thumbnail for list-layout archives, rendered only when the queried
   posts actually carry featured images (see archive_has_post_images). */
.wsskl-post-thumb {
	flex: 0 0 240px;
	height: 160px;
	align-self: flex-start;
	border-radius: var(--wsskl-radius-image);
}

@media (max-width: 768px) {
	.wsskl-post-item {
		flex-direction: column;
	}
	.wsskl-post-thumb {
		flex-basis: auto;
		width: 100%;
		height: 180px;
	}
}

/* ==========================================================================
   Single Post Template
   ========================================================================== */

.wsskl-article {
	max-width: 800px;
	margin: 0 auto;
}

.wsskl-content-wrapper:not(.wsskl-has-sidebar) .wsskl-article {
	max-width: 800px;
}

.wsskl-content-wrapper.wsskl-has-sidebar .wsskl-article {
	max-width: none;
}

.wsskl-featured-image {
	width: 100%;
	padding-bottom: 50%;
	margin-bottom: 30px;
	border-radius: var(--wsskl-radius-image);
}

.wsskl-article .wsskl-post-title {
	height: 42px;
	width: 80%;
	margin-bottom: 15px;
}

.wsskl-article .wsskl-post-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

.wsskl-meta-item {
	height: 14px;
	width: 100px;
}

.wsskl-article .wsskl-post-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.wsskl-paragraph {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wsskl-content-line {
	height: 14px;
	width: 100%;
}

/* Width variance: an 8-step cycle keeps the pattern from synchronising
   across multiple paragraphs. Real prose has irregular line breaks, so a
   skeleton that pulls each line to the same width-pair (100% / 60%) reads
   as mechanical. The :last-child rule still wins (paragraph endings). */
.wsskl-content-line:nth-child(8n+1) { width: 100%; }
.wsskl-content-line:nth-child(8n+2) { width: 96%; }
.wsskl-content-line:nth-child(8n+3) { width: 92%; }
.wsskl-content-line:nth-child(8n+4) { width: 88%; }
.wsskl-content-line:nth-child(8n+5) { width: 100%; }
.wsskl-content-line:nth-child(8n+6) { width: 94%; }
.wsskl-content-line:nth-child(8n+7) { width: 98%; }
.wsskl-content-line:nth-child(8n+8) { width: 90%; }

.wsskl-content-line:last-child {
	width: 60%;
}

/* ==========================================================================
   Page Template
   ========================================================================== */

.wsskl-content {
	max-width: 900px;
	margin: 0 auto;
	min-height: 400px;
}

.wsskl-content-wrapper.wsskl-has-sidebar .wsskl-content {
	max-width: none;
}

.wsskl-heading {
	height: 36px;
	min-height: 36px;
	width: 60%;
	margin-bottom: 25px;
}

.wsskl-text-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
	min-height: 80px;
}

.wsskl-text-row {
	height: 16px;
	min-height: 16px;
	width: 100%;
}

.wsskl-text-row:nth-child(2) { width: 95%; }
.wsskl-text-row:nth-child(3) { width: 88%; }
.wsskl-text-row:last-child { width: 65%; }

/* ==========================================================================
   Home Template
   ========================================================================== */

.wsskl-home-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 60px;
	min-height: 400px;
	width: 100%;
}

@media (max-width: 768px) {
	.wsskl-home-hero {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.wsskl-hero-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 200px;
}

.wsskl-hero-title {
	height: 48px;
	min-height: 48px;
	width: 90%;
}

.wsskl-hero-subtitle {
	height: 24px;
	min-height: 24px;
	width: 70%;
}

.wsskl-hero-image {
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	min-height: 250px;
	border-radius: 12px;
}

/* ==========================================================================
   Content Wrapper with Sidebar
   ========================================================================== */

.wsskl-content-wrapper {
	display: block;
	width: 100%;
}

.wsskl-content-wrapper.wsskl-has-sidebar {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
}

/* Left sidebar - sidebar comes first in grid */
.wsskl-content-wrapper.wsskl-has-sidebar.wsskl-sidebar-left {
	grid-template-columns: 300px 1fr;
}

@media (max-width: 1024px) {
	.wsskl-content-wrapper.wsskl-has-sidebar {
		grid-template-columns: 1fr 250px;
		gap: 30px;
	}
	.wsskl-content-wrapper.wsskl-has-sidebar.wsskl-sidebar-left {
		grid-template-columns: 250px 1fr;
	}
}

@media (max-width: 768px) {
	.wsskl-content-wrapper.wsskl-has-sidebar,
	.wsskl-content-wrapper.wsskl-has-sidebar.wsskl-sidebar-left {
		grid-template-columns: 1fr;
	}
	/* On mobile, content comes first regardless of sidebar position */
	.wsskl-content-wrapper.wsskl-has-sidebar.wsskl-sidebar-left .wsskl-sidebar {
		order: 2;
	}
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.wsskl-sidebar {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-height: 300px;
}

.wsskl-widget {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wsskl-widget-title {
	height: 20px;
	width: 70%;
	margin-bottom: 5px;
}

.wsskl-widget-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ==========================================================================
   Form Skeleton
   ========================================================================== */

.wsskl-form-skeleton {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px;
	background: var(--wsskl-overlay-bg);
	border: 1px solid var(--wsskl-bone-color);
	border-radius: 8px;
	min-height: 200px;
}

.wsskl-form-field {
	height: 44px;
	width: 100%;
	border-radius: 6px;
}

.wsskl-form-textarea {
	height: 120px;
	width: 100%;
	border-radius: 6px;
}

.wsskl-form-button {
	height: 48px;
	width: 140px;
	margin-top: 10px;
	border-radius: 6px;
}

/* ==========================================================================
   Theme Lazy Loading Suppression
   ==========================================================================
   The per-selector lazy-load suppression rules are emitted inline by
   WSSKL_Frontend::output_skeleton_overlay() from a single PHP source so the
   wsskl_lazyload_selectors filter governs both the active-state and the
   <noscript> fallback together. The structural visibility rules below still
   live in the CSS file because they're not selector-list-driven. */

/* Hide real page content while the skeleton is showing. The overlay itself
   and everything inside it is forced back to visible via the rule below;
   :not() can't host a complex selector like `.wsskl-overlay *`, so we rely
   on the !important cascade in the next rule to keep overlay descendants
   visible regardless. */
body.skeleton-loading main:not(.wsskl-main-content),
body.skeleton-loading #main,
body.skeleton-loading #content,
body.skeleton-loading .site-content,
body.skeleton-loading .woocommerce {
	visibility: hidden;
}

/* While the recorder walks the DOM it adds .wsskl-recording to <body>. Un-hide
   the real content for that brief window so its geometry is measurable even
   before the reveal fires — otherwise the recorder skips every visibility:hidden
   element and captures an empty body. The overlay still covers the content
   (higher stacking context), so there is no visual flash; lazy-load images are
   also un-suppressed so they're captured as image bones. */
body.skeleton-loading.wsskl-recording main:not(.wsskl-main-content),
body.skeleton-loading.wsskl-recording #main,
body.skeleton-loading.wsskl-recording #content,
body.skeleton-loading.wsskl-recording .site-content,
body.skeleton-loading.wsskl-recording .woocommerce {
	visibility: visible !important;
}
body.skeleton-loading.wsskl-recording img {
	opacity: 1 !important;
}

.wsskl-overlay,
.wsskl-overlay * {
	visibility: visible !important;
}

body.skeleton-revealing main,
body.skeleton-revealing #main,
body.skeleton-revealing #content,
body.skeleton-revealing .site-content,
body.skeleton-revealing .woocommerce {
	visibility: visible;
}

/* Print-mode recovery (overlay hidden, content visible) is emitted inline by
   WSSKL_Frontend::output_skeleton_overlay() inside the same <style> block as
   the wsskl_lazyload_selectors active-state suppression, so a single PHP
   source governs both visibility paths. */

/* ==========================================================================
   404 Page Template
   ========================================================================== */

.wsskl-404-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 400px;
	padding: 60px 20px;
	gap: 25px;
}

.wsskl-404-icon {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.wsskl-404-title {
	height: 60px;
	width: 200px;
}

.wsskl-404-message {
	height: 24px;
	width: 350px;
	max-width: 100%;
}

.wsskl-404-search {
	height: 50px;
	width: 400px;
	max-width: 100%;
	border-radius: 25px;
}

.wsskl-404-button {
	height: 50px;
	width: 180px;
	border-radius: 8px;
	margin-top: 10px;
}

/* ==========================================================================
   Search Results Template
   ========================================================================== */

.wsskl-search-header {
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wsskl-search-title {
	height: 32px;
	width: 300px;
}

.wsskl-search-form {
	height: 50px;
	width: 100%;
	max-width: 600px;
	border-radius: 8px;
}

.wsskl-search-results {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1;
}

.wsskl-search-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--wsskl-bone-color);
}

.wsskl-search-item:last-child {
	border-bottom: none;
}

.wsskl-search-item-title {
	height: 24px;
	width: 70%;
}

.wsskl-search-item-url {
	height: 14px;
	width: 250px;
}

.wsskl-search-item-excerpt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.wsskl-search-item-excerpt .wsskl-text-line:nth-child(1) { width: 100%; }
.wsskl-search-item-excerpt .wsskl-text-line:nth-child(2) { width: 85%; }

/* Result thumbnail variant — only emitted when the results carry images.
   The item becomes a row: [thumb] [title/url/excerpt]. */
.wsskl-search-item--media {
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.wsskl-search-thumb {
	flex: 0 0 140px;
	height: 96px;
	border-radius: var(--wsskl-radius-image);
}

.wsskl-search-item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (max-width: 768px) {
	.wsskl-search-item--media {
		flex-direction: column;
	}
	.wsskl-search-thumb {
		flex-basis: auto;
		width: 100%;
		height: 160px;
	}
}

/* ==========================================================================
   Contact Page Template
   ========================================================================== */

.wsskl-contact-header {
	margin-bottom: 40px;
	text-align: center;
}

.wsskl-contact-header .wsskl-page-title {
	margin: 0 auto 20px;
}

.wsskl-contact-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	max-width: 600px;
	margin: 0 auto;
}

.wsskl-contact-intro .wsskl-text-row {
	width: 80%;
}

.wsskl-contact-intro .wsskl-text-row:last-child {
	width: 60%;
}

.wsskl-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
}

@media (max-width: 768px) {
	.wsskl-contact-layout {
		grid-template-columns: 1fr;
	}
}

.wsskl-contact-form {
	min-height: 400px;
}

.wsskl-contact-form .wsskl-form-skeleton {
	height: 100%;
}

/* ==========================================================================
   Blueprint regions and leaf primitives (rendered by WSSKL_Blueprint_Renderer).

   The renderer emits one .wsskl-region per captured region (header/body/footer)
   with the region's captured pixel height inline. Each leaf inside is
   absolutely positioned via inline left/top/width/height — left/width are
   percent-of-region, top/height are pixels. See spec §6.
   ========================================================================== */

.wsskl-region {
	position: relative;
	width: 100%;
}

/* When Pipeline 1 owns a region, the surrounding wrapper element must not
   add padding or border — the recorder captured leaf positions relative to
   the wrapper's border-box top, so any wrapper padding would push every leaf
   down by that amount when rendered. */
.wsskl-skeleton-header.wsskl-bp-chrome,
.wsskl-skeleton-footer.wsskl-bp-chrome {
	padding: 0;
	border: 0;
	background: transparent;
	margin: 0;
}
.wsskl-skeleton-header.wsskl-bp-chrome > .wsskl-region,
.wsskl-skeleton-footer.wsskl-bp-chrome > .wsskl-region {
	margin: 0;
	padding: 0;
}

/* Body region: when blueprint replay is rendering the page, strip the
   main-content padding so captured pixel-Y values aren't offset down by
   the skeleton wrapper's design padding. */
.wsskl-overlay.wsskl-page-blueprint .wsskl-main-content {
	padding: 0;
	min-height: 0;
}

.wsskl-leaf {
	position: absolute;
	box-sizing: border-box;
}

/* Text leaves stack their line bones vertically inside the leaf box. Each bone
   is sized to ~glyph height (set inline from the captured font-size) and
   vertically centered within its line slot via inline margin (slot = captured
   line-height). This keeps slim text runs — e.g. nav links whose line-height
   equals the header height for centering — from rendering as tall blocks. */
.wsskl-leaf--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	/* Clip line bones to the leaf's own box. Defends against a blueprint that
	   over-counted lines — e.g. a nav item whose hidden dropdown submenu links
	   were captured as 30+ lines — so the excess bones are clipped instead of
	   overflowing down the page. The recorder no longer over-counts (it ignores
	   text outside the element's box), but this keeps already-captured
	   blueprints rendering sanely without a re-record. */
	overflow: hidden;
}
.wsskl-leaf--text .wsskl-leaf-line {
	flex: 0 0 auto;
}

/* Control: real buttons/inputs render as a single rounded bone. The renderer
   sets border-radius inline from the captured `r` when present; the default
   here covers leaves where `r` wasn't recorded. */
.wsskl-leaf--control {
	border-radius: 6px;
}

/* Image: bone with a subtle image-tint so it reads as media vs. text on
   light themes. The captured aspect ratio is advisory — width/height are
   honored verbatim from the captured rect. */
.wsskl-leaf--image {
	background-color: var(--wsskl-bone-color);
}

/* Media (video/iframe embed): bone with a centered play triangle. */
.wsskl-leaf--media {
	background-color: var(--wsskl-bone-color);
}
.wsskl-leaf--media .wsskl-leaf-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-left: 22px solid rgba(0, 0, 0, 0.35);
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
}

/* Avatar: forced circle regardless of captured `r`. */
.wsskl-leaf--avatar {
	border-radius: 50%;
}

/* Icon / divider: no shimmer (the renderer omits .wsskl-bone on these).
   Background paints the captured rectangle directly. Icons get a small
   rounded square; dividers use a thin, lower-opacity line. */
.wsskl-leaf--icon {
	background-color: var(--wsskl-bone-color);
	border-radius: 4px;
}
.wsskl-leaf--divider {
	background-color: var(--wsskl-bone-color);
	opacity: 0.55;
}

/* Generic rect catch-all. Inherits .wsskl-bone for shimmer; the leaf itself
   needs no extra rules. */
.wsskl-leaf--rect {
	/* base .wsskl-bone applies */
}

/* ==========================================================================
   WooCommerce Cart Template
   ========================================================================== */

.wsskl-cart-header { margin-bottom: 28px; }

.wsskl-cart-empty {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 480px;
}
.wsskl-cart-empty-msg { height: 20px; width: 70%; }
.wsskl-cart-empty-btn { height: 44px; width: 180px; border-radius: var(--wsskl-radius-pill); }

.wsskl-cart-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.wsskl-cart-table { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.wsskl-cart-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--wsskl-bone-color);
}
.wsskl-cart-thumb { flex: 0 0 72px; height: 72px; border-radius: var(--wsskl-radius-image); }
.wsskl-cart-name { flex: 1; height: 18px; }
.wsskl-cart-price { flex: 0 0 70px; height: 16px; }
.wsskl-cart-qty { flex: 0 0 64px; height: 36px; border-radius: var(--wsskl-border-radius); }
.wsskl-cart-subtotal { flex: 0 0 70px; height: 16px; }

.wsskl-cart-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 8px; }
.wsskl-cart-coupon { height: 40px; width: 260px; border-radius: var(--wsskl-border-radius); }
.wsskl-cart-update { height: 40px; width: 150px; border-radius: var(--wsskl-radius-pill); }

.wsskl-cart-totals {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--wsskl-bone-color);
	border-radius: var(--wsskl-border-radius);
}
.wsskl-cart-totals-title { height: 22px; width: 50%; }
.wsskl-cart-totals-row { height: 16px; }
.wsskl-cart-totals-row:nth-child(3) { width: 80%; }
.wsskl-cart-checkout-btn { height: 48px; border-radius: var(--wsskl-radius-pill); margin-top: 8px; }

/* ==========================================================================
   WooCommerce Checkout Template
   ========================================================================== */

.wsskl-checkout-header { margin-bottom: 28px; }

.wsskl-checkout-layout {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}
.wsskl-checkout-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wsskl-checkout-section-title { height: 24px; width: 45%; margin-bottom: 6px; }
.wsskl-checkout-field { height: 46px; border-radius: var(--wsskl-border-radius); }
.wsskl-checkout-field:nth-child(2n) { width: 90%; }

.wsskl-checkout-review {
	flex: 0 0 360px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--wsskl-bone-color);
	border-radius: var(--wsskl-border-radius);
}
.wsskl-checkout-review-title { height: 22px; width: 55%; }
.wsskl-checkout-order-row { height: 16px; }
.wsskl-checkout-order-total { height: 22px; width: 70%; }
.wsskl-checkout-payment { height: 96px; border-radius: var(--wsskl-border-radius); margin-top: 8px; }
.wsskl-checkout-place-order { height: 48px; border-radius: var(--wsskl-radius-pill); }

/* ==========================================================================
   WooCommerce My Account Template
   ========================================================================== */

.wsskl-account-login {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 420px;
}
.wsskl-account-login-title { height: 24px; width: 50%; }
.wsskl-account-field { height: 46px; border-radius: var(--wsskl-border-radius); }
.wsskl-account-login-btn { height: 46px; width: 140px; border-radius: var(--wsskl-radius-pill); margin-top: 4px; }

.wsskl-account-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.wsskl-account-nav {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wsskl-account-nav-item { height: 18px; }
.wsskl-account-nav-item:nth-child(2n) { width: 80%; }
.wsskl-account-content { flex: 1; min-width: 0; }
.wsskl-account-heading { height: 28px; width: 40%; margin-bottom: 20px; }

@media (max-width: 768px) {
	.wsskl-cart-layout,
	.wsskl-checkout-layout,
	.wsskl-account-layout { flex-direction: column; }
	.wsskl-cart-totals,
	.wsskl-checkout-review,
	.wsskl-account-nav { flex-basis: auto; width: 100%; }
}

/* ==========================================================================
   WooCommerce Order-Received (Thank-You) Template
   ========================================================================== */

.wsskl-order-received {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 760px;
}
.wsskl-order-thanks { height: 28px; width: 60%; }

.wsskl-order-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--wsskl-bone-color);
	border-radius: var(--wsskl-border-radius);
}
.wsskl-order-overview-item { display: flex; flex-direction: column; gap: 10px; }
.wsskl-order-overview-label { height: 13px; width: 70%; }
.wsskl-order-overview-value { height: 17px; width: 90%; }

.wsskl-order-details { display: flex; flex-direction: column; gap: 16px; }
.wsskl-order-details-title { height: 22px; width: 40%; margin-bottom: 4px; }
.wsskl-order-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wsskl-bone-color);
}
.wsskl-order-item-name { height: 16px; flex: 1; max-width: 60%; }
.wsskl-order-item-total { height: 16px; flex: 0 0 80px; }
.wsskl-order-row--total { border-bottom: 0; }
.wsskl-order-row--total .wsskl-order-item-name { max-width: 30%; height: 20px; }
.wsskl-order-row--total .wsskl-order-item-total { height: 20px; }

.wsskl-order-addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 8px;
}
.wsskl-order-address { display: flex; flex-direction: column; gap: 12px; }
.wsskl-order-address-title { height: 20px; width: 45%; margin-bottom: 4px; }
.wsskl-order-address-line { height: 15px; }
.wsskl-order-address-line:nth-child(2) { width: 80%; }
.wsskl-order-address-line:nth-child(3) { width: 65%; }
.wsskl-order-address-line:nth-child(4) { width: 72%; }

.wsskl-order-lookup {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 460px;
}
.wsskl-order-lookup-line { height: 18px; width: 80%; }
.wsskl-order-lookup-field { height: 46px; border-radius: var(--wsskl-border-radius); }
.wsskl-order-lookup-btn { height: 46px; width: 160px; border-radius: var(--wsskl-radius-pill); margin-top: 4px; }

@media (max-width: 768px) {
	.wsskl-order-overview { grid-template-columns: repeat(2, 1fr); }
	.wsskl-order-addresses { grid-template-columns: 1fr; gap: 24px; }
}

/* Product category / tag description (first page only) — sits under the title. */
.wsskl-term-description {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 680px;
	margin: -14px 0 30px;
}

/* ==========================================================================
   Author Archive Header (avatar + name + short bio)
   ========================================================================== */

.wsskl-author-header {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-bottom: 36px;
}
.wsskl-author-avatar {
	flex: 0 0 88px;
	height: 88px;
	border-radius: 50%;
}
.wsskl-author-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wsskl-author-name { height: 30px; width: 200px; }
.wsskl-author-bio { display: flex; flex-direction: column; gap: 9px; }