/* PDP boot skeleton — mirrors gallery + info + tabs */

.at-pdp-boot {
    position: relative;
}

.at-pdp-skel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px 0 40px;
    background: #fff;
    min-height: min(100vh, 860px);
    display: none;
}
html.at-pdp-booting .at-pdp-skel:not([hidden]) {
    display: block;
}
.at-pdp-skel[hidden] {
    display: none !important;
}

.at-pdp-skel__inner {
    width: min(1200px, calc(100% - 24px));
    margin: 0 auto;
}

.at-pdp-skel__crumb {
    width: min(280px, 60%);
    height: 14px;
    border-radius: 6px;
    margin: 8px 0 20px;
}

.at-pdp-skel__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 36px;
}

.at-pdp-skel__gallery {
    flex: 0 0 45%;
    max-width: 45%;
}
.at-pdp-skel__main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    margin-bottom: 14px;
}
.at-pdp-skel__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.at-pdp-skel__thumb {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.at-pdp-skel__info {
    flex: 0 0 calc(55% - 40px);
    max-width: calc(55% - 40px);
    display: grid;
    gap: 12px;
    align-content: start;
}
.at-pdp-skel__brand {
    width: 88px;
    height: 14px;
    border-radius: 6px;
}
.at-pdp-skel__title {
    width: 88%;
    height: 28px;
    border-radius: 8px;
}
.at-pdp-skel__title.is-2 {
    width: 62%;
    height: 22px;
}
.at-pdp-skel__chip {
    width: min(320px, 90%);
    height: 36px;
    border-radius: 10px;
}
.at-pdp-skel__meta {
    width: 55%;
    height: 14px;
    border-radius: 6px;
}
.at-pdp-skel__price {
    width: 42%;
    height: 32px;
    border-radius: 8px;
    margin-top: 6px;
}
.at-pdp-skel__swatches {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.at-pdp-skel__swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.at-pdp-skel__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}
.at-pdp-skel__btn {
    height: 48px;
    border-radius: 10px;
}
.at-pdp-skel__delivery {
    height: 110px;
    border-radius: 12px;
    margin-top: 8px;
}

.at-pdp-skel__tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.at-pdp-skel__tab {
    width: 110px;
    height: 18px;
    border-radius: 6px;
}
.at-pdp-skel__panel {
    height: 120px;
    border-radius: 12px;
}

.at-pdp-shimmer {
    background: linear-gradient(90deg, #f1f1f3 18%, #e6e6ea 50%, #f1f1f3 82%);
    background-size: 200% 100%;
    animation: at-pdp-shimmer 1.05s linear infinite;
}

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

/* Related skeleton shimmer (was missing without .at-lazy-skeleton parent) */
.at-related-skeleton .shimmer,
.at-lazy-skeleton .shimmer {
    background: linear-gradient(90deg, #f1f1f3 18%, #e6e6ea 50%, #f1f1f3 82%);
    background-size: 200% 100%;
    animation: at-pdp-shimmer 1.05s linear infinite;
    border-radius: 8px;
}

.at-pdp-content {
    opacity: 1;
    transition: opacity 0.26s ease;
}
html.at-pdp-booting .at-pdp-content:not(.is-ready) {
    opacity: 0;
    pointer-events: none;
}
.at-pdp-content.is-ready {
    opacity: 1;
}

/* Hide sticky bar until content ready */
html.at-pdp-booting .at-mobile-sticky-bar {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 991px) {
    .at-pdp-skel__grid {
        gap: 18px;
    }
    .at-pdp-skel__gallery,
    .at-pdp-skel__info {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .at-pdp-skel__main {
        border-radius: 8px;
    }
    .at-pdp-skel__thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
}