/* Page-transition progress line + skeletons */

#ax-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000002;
	width: 0;
	height: 3px;
	background: #f7e9cc;
	box-shadow: 0 0 10px rgba(247, 233, 204, 0.65);
	pointer-events: none;
	opacity: 0;
	transform: scaleY(1);
	transform-origin: left center;
}

body.admin-bar #ax-progress { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #ax-progress { top: 46px; }
}

html.ax-loading #ax-progress {
	opacity: 1;
	width: var(--ax-bar, 18%);
}

html.ax-loading.ax-progress-go #ax-progress {
	width: 86%;
	transition: width 7.5s cubic-bezier(0.12, 0.7, 0.15, 1);
}

html.ax-loading.ax-progress-done #ax-progress {
	width: 100%;
	opacity: 0;
	transition: width 0.22s ease, opacity 0.28s ease 0.12s;
}

#ax-skel {
	display: none;
	position: fixed;
	top: 145px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90000;
	overflow: hidden;
	background: #f7f5f1;
	padding: 28px 32px 40px;
	pointer-events: none;
}

@media (max-width: 991px) {
	#ax-skel { top: 70px; padding: 18px 16px 32px; }
}

html.ax-loading.ax-sk-home #ax-skel,
html.ax-loading.ax-sk-shop #ax-skel,
html.ax-loading.ax-sk-product #ax-skel,
html.ax-loading.ax-sk-page #ax-skel { display: block; }

.ax-skel-view { display: none; height: 100%; }
html.ax-sk-home .ax-skel-home,
html.ax-sk-shop .ax-skel-shop,
html.ax-sk-product .ax-skel-product,
html.ax-sk-page .ax-skel-page { display: block; }

.ax-bone {
	background: linear-gradient(90deg, #e7e2d8 0%, #f6f1e6 42%, #e7e2d8 84%);
	background-size: 220% 100%;
	animation: ax-shimmer 1.25s ease-in-out infinite;
	border-radius: 10px;
}

@keyframes ax-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.ax-skel-hero {
	height: min(42vh, 360px);
	border-radius: 16px;
	margin-bottom: 28px;
}

.ax-skel-row,
.ax-skel-grid {
	display: grid;
	gap: 18px;
}

.ax-skel-row { grid-template-columns: repeat(4, 1fr); }
.ax-skel-grid { grid-template-columns: repeat(4, 1fr); }

.ax-skel-card { min-width: 0; }
.ax-skel-img { aspect-ratio: 1 / 1.05; margin-bottom: 12px; }
.ax-skel-line { height: 14px; margin-bottom: 8px; }
.ax-skel-line.short { width: 58%; }
.ax-skel-line.mid { width: 78%; }
.ax-skel-btn { width: 92px; height: 34px; border-radius: 999px; margin-top: 10px; }

.ax-skel-pills { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.ax-skel-pill { width: 92px; height: 36px; border-radius: 999px; }
.ax-skel-pill.wide { width: 140px; }

html.ax-sk-product #ax-skel { padding: 0; }

html.ax-loading.ax-sk-product nav.woocommerce-breadcrumb,
html.ax-loading.ax-sk-product nav.woocommerce-breadcrumb *,
html.ax-loading.ax-sk-product .ax-product-gallery {
	visibility: hidden !important;
}

.ax-skel-crumb {
	position: fixed;
	top: 109px;
	left: max(16px, calc((100% - 1360px) / 2));
	z-index: 90001;
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(1360px, calc(100% - 32px));
	height: 34px;
	padding: 0 2px;
	background: #fff;
	pointer-events: none;
}
.ax-skel-crumb-bit { width: 72px; height: 14px; border-radius: 4px; }
.ax-skel-crumb-bit.mid { width: 96px; }
.ax-skel-crumb-bit.long { width: 148px; }
.ax-skel-crumb-sep {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: #e4dfd6;
	flex: 0 0 auto;
}

.ax-skel-product {
	display: block;
	max-width: none;
	margin: 0;
	height: auto;
}
.ax-skel-gallery {
	width: 100%;
	height: min(640px, 58vh);
	border-radius: 0;
}
.ax-skel-product-body {
	max-width: 1360px;
	margin: 22px auto 0;
	padding: 0 20px 32px;
}
.ax-skel-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}
.ax-skel-ptitle { height: 22px; width: min(520px, 48%); border-radius: 6px; }
.ax-skel-buy-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.ax-skel-qty { width: 116px; height: 40px; border-radius: 999px; }
.ax-skel-pprice { width: 168px; height: 40px; border-radius: 999px; }
.ax-skel-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
}
.ax-skel-tabs { display: flex; gap: 22px; margin-bottom: 16px; }
.ax-skel-tab { width: 150px; height: 16px; border-radius: 4px; }
.ax-skel-tab.is-wide { width: 130px; }
.ax-skel-spec { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8px; margin-bottom: 8px; }
.ax-skel-cell { height: 38px; border-radius: 6px; }
.ax-skel-pline { height: 16px; width: 72%; margin-bottom: 12px; border-radius: 4px; }
.ax-skel-pline.short { width: 46%; }
.ax-skel-field { height: 46px; border-radius: 12px; margin-bottom: 14px; }
.ax-skel-title { height: 28px; width: 72%; margin-bottom: 16px; }
.ax-skel-price { height: 22px; width: 28%; margin: 18px 0; }
.ax-skel-cta { height: 46px; width: 180px; border-radius: 999px; margin-top: 22px; }

.ax-skel-page { max-width: 820px; }
.ax-skel-page .ax-skel-title { height: 36px; width: 46%; margin-bottom: 22px; }
.ax-skel-page .ax-skel-line { height: 12px; margin-bottom: 12px; }

@media (max-width: 991px) {
	.ax-skel-row,
	.ax-skel-grid { grid-template-columns: repeat(2, 1fr); }
	.ax-skel-gallery { height: 280px; }
	.ax-skel-crumb { top: 74px; left: 16px; width: calc(100% - 32px); height: 28px; background: #fff; }
	.ax-skel-crumb-bit.long { width: 110px; }
	.ax-skel-product-body { margin-top: 16px; }
	.ax-skel-buy { flex-wrap: wrap; }
	.ax-skel-ptitle { width: 100%; }
	.ax-skel-split { grid-template-columns: 1fr; gap: 22px; }
	.ax-skel-hero { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
	.ax-bone { animation: none; }
	html.ax-loading.ax-progress-go #ax-progress,
	html.ax-loading.ax-progress-done #ax-progress { transition: none; }
}