/* ==================================================
   Start: KZN Touch-style page-content skeleton
   ================================================== */
:root {
    --route-transition-top: 92px;
    --route-transition-bg: #f7f8f8;
    --route-skeleton-base: #e7eaeb;
    --route-skeleton-highlight: #f1f3f3;
    --route-transition-duration: 170ms;
}

.site-header {
    z-index: 1100;
}

.route-transition {
    position: fixed;
    inset: var(--route-transition-top) 0 0;
    z-index: 1000;
    overflow: auto;
    background: var(--route-transition-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--route-transition-duration) ease,
        visibility 0s linear var(--route-transition-duration);
}

html.page-transition-pending .route-transition,
.route-transition.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--route-transition-duration) ease;
}

.route-transition-progress {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: rgba(207, 32, 27, 0.12);
}

.route-transition-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-brand, #cf201b);
    transform: scaleX(0);
    transform-origin: left center;
}

html.page-transition-pending .route-transition-progress span,
.route-transition.is-visible .route-transition-progress span {
    animation: route-progress-fill 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.route-transition-stage {
    width: min(calc(100% - 2rem), var(--container, 1160px));
    min-height: calc(100vh - var(--route-transition-top));
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5.25rem) 0 clamp(4rem, 7vw, 6rem);
}

.route-skeleton-layout {
    display: none;
    gap: 0.9rem;
}

.route-transition[data-skeleton-type="home"] [data-skeleton-layout="home"],
.route-transition[data-skeleton-type="listing"] [data-skeleton-layout="listing"],
.route-transition[data-skeleton-type="product"] [data-skeleton-layout="product"],
.route-transition[data-skeleton-type="contact"] [data-skeleton-layout="contact"],
.route-transition[data-skeleton-type="article"] [data-skeleton-layout="article"] {
    display: grid;
}

.route-skeleton-shape {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(
        100deg,
        var(--route-skeleton-base) 18%,
        var(--route-skeleton-highlight) 34%,
        var(--route-skeleton-base) 52%
    );
    background-size: 240% 100%;
    animation: route-skeleton-soft-sweep 1.8s ease-in-out infinite;
}

.route-skeleton-shape.is-eyebrow {
    width: 88px;
    height: 8px;
    margin-bottom: 0.1rem;
}

.route-skeleton-shape.is-heading {
    width: min(420px, 62%);
    height: clamp(48px, 5vw, 68px);
}

.route-skeleton-shape.is-heading-wide {
    width: min(590px, 78%);
    height: clamp(54px, 6vw, 82px);
}

.route-skeleton-shape.is-copy-wide {
    width: min(760px, 86%);
    height: 12px;
}

.route-skeleton-shape.is-copy-medium {
    width: min(460px, 66%);
    height: 12px;
}

.route-skeleton-shape.is-hero-media {
    width: 100%;
    min-height: clamp(300px, 39vw, 500px);
    margin-top: 1rem;
}

.route-skeleton-shape.is-actions {
    width: min(300px, 52%);
    height: 46px;
    margin-top: 0.7rem;
}

.route-skeleton-shape.is-product-media {
    min-height: 380px;
}

.route-skeleton-shape.is-section-line {
    width: min(620px, 70%);
    height: 22px;
    margin: 2rem 0 0.7rem;
}

.route-skeleton-shape.is-card {
    min-height: 220px;
}

.route-skeleton-shape.is-product-card {
    min-height: 390px;
}

.route-skeleton-shape.is-document-card {
    min-height: 210px;
}

.route-skeleton-shape.is-content-block {
    min-height: 320px;
}

.route-skeleton-shape.is-article-block {
    width: 100%;
    min-height: 260px;
    margin-top: 1rem;
}

.route-skeleton-shape.is-short-block {
    min-height: 160px;
    margin-top: 0.6rem;
}

.route-skeleton-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: 1.3rem;
}

.route-skeleton-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-skeleton-grid.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-skeleton-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.route-skeleton-tabs {
    display: flex;
    gap: 1.35rem;
    margin-top: 1.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #dde0e1;
}

.route-skeleton-shape.is-tab {
    width: 132px;
    height: 30px;
}

.route-skeleton-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.route-skeleton-stack {
    display: grid;
    align-content: start;
    gap: 0.9rem;
}

@keyframes route-progress-fill {
    0% { transform: scaleX(0); }
    52% { transform: scaleX(0.7); }
    100% { transform: scaleX(0.92); }
}

@keyframes route-skeleton-soft-sweep {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
    :root {
        --route-transition-top: 78px;
    }

    .route-transition-stage {
        padding-top: 3rem;
    }

    .route-skeleton-grid.is-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .route-transition-stage {
        width: min(calc(100% - 1.5rem), var(--container, 1160px));
        padding-top: 2.3rem;
    }

    .route-skeleton-shape.is-heading,
    .route-skeleton-shape.is-heading-wide {
        width: 88%;
        height: 50px;
    }

    .route-skeleton-shape.is-copy-wide,
    .route-skeleton-shape.is-copy-medium {
        width: 94%;
    }

    .route-skeleton-shape.is-hero-media {
        min-height: 310px;
    }

    .route-skeleton-product-hero,
    .route-skeleton-grid.is-two,
    .route-skeleton-grid.is-three,
    .route-skeleton-grid.is-four {
        grid-template-columns: 1fr;
    }

    .route-skeleton-shape.is-product-media {
        min-height: 260px;
    }

    .route-skeleton-grid .route-skeleton-shape:nth-child(n + 3) {
        display: none;
    }

    .route-skeleton-tabs {
        overflow: hidden;
    }

    .route-skeleton-shape.is-tab {
        flex: 0 0 94px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-transition,
    .route-transition-progress span,
    .route-skeleton-shape {
        animation: none;
        transition: none;
    }

    .route-transition-progress span {
        transform: scaleX(0.92);
    }
}
/* ==================================================
   End: KZN Touch-style page-content skeleton
   ================================================== */