/* Horeka Quick OS — search → PDP transition (public/js/hq-pdp-transition.js).
   The skeleton mirrors the real PDP layouts (product-page.css) so the flying
   photo lands where the real photo paints. Transform/opacity only. */

/* ── Leaving the search page ─────────────────────────────────────────── */

html.hq-pt-lock, html.hq-pt-lock body { overflow: hidden; }

.hq-pt-skel {
    position: fixed;
    inset: 0;
    z-index: 1000000;               /* above the search overlay (999999) */
    background: #fff;
    opacity: 0;
    transition: opacity .22s ease;
    overflow: hidden;
    pointer-events: none;
}
.hq-pt-skel.is-in { opacity: 1; }

/* Shimmer blocks */
.hq-pt-line, .hq-pt-box, .hq-pt-img, .hq-pt-d-thumbs i, .hq-pt-m-head i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f3f5 0%, #f8f9fa 40%, #f1f3f5 80%) 0 0 / 200% 100%;
    animation: hq-pt-shimmer 1.2s linear infinite;
}
.hq-pt-line { height: 12px; margin: 0 0 10px; }
.hq-pt-box  { margin: 0 0 12px; border-radius: 10px; }
.hq-pt-line.w30 { width: 30%; } .hq-pt-line.w40 { width: 40%; } .hq-pt-line.w50 { width: 50%; }
.hq-pt-line.w60 { width: 60%; } .hq-pt-line.w70 { width: 70%; } .hq-pt-line.w80 { width: 80%; }
.hq-pt-line.w90 { width: 90%; } .hq-pt-line.w100 { width: 100%; }
.hq-pt-line.h18 { height: 18px; } .hq-pt-line.h22 { height: 22px; }
.hq-pt-line.h26 { height: 26px; } .hq-pt-line.h30 { height: 30px; }
.hq-pt-box.h38 { height: 38px; } .hq-pt-box.h40 { height: 40px; } .hq-pt-box.h46 { height: 46px; }
.hq-pt-box.h52 { height: 52px; } .hq-pt-box.h60 { height: 60px; } .hq-pt-box.h64 { height: 64px; }
.hq-pt-box.h70 { height: 70px; } .hq-pt-box.h120 { height: 120px; }
.hq-pt-box.green { background: #eef7ea; animation: none; }
.hq-pt-skel .gap { margin-top: 18px !important; }

@keyframes hq-pt-shimmer { to { background-position: -200% 0; } }

/* Desktop skeleton — same bands and grid as the real desktop PDP */
.hq-pt-skel--d {
    background:
        linear-gradient(#2C8515, #2C8515) 0 0 / 100% 78px no-repeat,     /* header   */
        linear-gradient(#fffbeb, #fffbeb) 0 78px / 100% 48px no-repeat,  /* promo    */
        linear-gradient(#fff, #fff) 0 126px / 100% 50px no-repeat,       /* crumbs   */
        #f8f9fb;
}
.hq-pt-d-wrap { max-width: 1280px; margin: 0 auto; padding: 142px 28px 0; }
.hq-pt-crumb { width: 320px; margin-bottom: 44px; }
.hq-pt-d-grid { display: grid; grid-template-columns: 1.4fr 1fr 290px; gap: 28px; align-items: start; }
.hq-pt-d-gal { display: flex; gap: 12px; }
.hq-pt-d-thumbs { flex: 0 0 76px; display: flex; flex-direction: column; gap: 10px; }
.hq-pt-d-thumbs i { height: 76px; border-radius: 10px; }
.hq-pt-d-gal .hq-pt-img { flex: 1; aspect-ratio: 1 / 1; min-height: 420px; border-radius: 12px; }
.hq-pt-d-side { background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

/* Mobile skeleton — product header, then the hero split */
.hq-pt-m-head { display: flex; align-items: center; gap: 8px; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; }
.hq-pt-m-head i { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; }
.hq-pt-m-head .hq-pt-box { flex: 1; margin: 0; border-radius: 22px; }
.hq-pt-m-hero { display: flex; gap: 12px; padding: 12px; }
.hq-pt-m-hero .hq-pt-img { flex: 0 0 46%; aspect-ratio: 1 / 1; border-radius: 12px; }
.hq-pt-m-info { flex: 1; min-width: 0; padding-top: 4px; }
.hq-pt-m-rest { padding: 0 12px; }

/* The photo in flight */
.hq-pt-flight {
    position: fixed;
    z-index: 1000001;
    margin: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
}
.hq-pt-flight.is-flying {
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), box-shadow .42s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

/* The tapped card dips so the lift reads as coming from it */
.hq-pt-picked { transform: scale(.97); transition: transform .18s ease; }

/* ── Arriving on the PDP ─────────────────────────────────────────────
   html.hq-arrive is set by an inline <head> script from the sessionStorage
   flag, before first paint. CSS animations (not JS toggles) so the page
   always ends fully visible. */

@keyframes hq-arrive-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hq-arrive-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hq-arrive-img  { from { transform: scale(.985); } to { transform: none; } }

html.hq-arrive .hqd-pdp-main-img-wrap,
html.hq-arrive .hqm-pdp-hero-left .hq-main-image { animation: hq-arrive-img .5s cubic-bezier(.2, .8, .2, 1) both; }

html.hq-arrive .hqd-pdp-info > *,
html.hq-arrive .hqm-pdp-hero-right > * { animation: hq-arrive-up .45s cubic-bezier(.2, .8, .2, 1) both; }
html.hq-arrive .hqd-pdp-info > :nth-child(1), html.hq-arrive .hqm-pdp-hero-right > :nth-child(1) { animation-delay: .04s; }
html.hq-arrive .hqd-pdp-info > :nth-child(2), html.hq-arrive .hqm-pdp-hero-right > :nth-child(2) { animation-delay: .08s; }
html.hq-arrive .hqd-pdp-info > :nth-child(3), html.hq-arrive .hqm-pdp-hero-right > :nth-child(3) { animation-delay: .12s; }
html.hq-arrive .hqd-pdp-info > :nth-child(4), html.hq-arrive .hqm-pdp-hero-right > :nth-child(4) { animation-delay: .16s; }
html.hq-arrive .hqd-pdp-info > :nth-child(5), html.hq-arrive .hqm-pdp-hero-right > :nth-child(5) { animation-delay: .20s; }
html.hq-arrive .hqd-pdp-info > :nth-child(n+6), html.hq-arrive .hqm-pdp-hero-right > :nth-child(n+6) { animation-delay: .24s; }

html.hq-arrive .hqd-pdp-sidebar { animation: hq-arrive-up .5s .18s cubic-bezier(.2, .8, .2, 1) both; }
html.hq-arrive .hqd-pdp-thumb-strip,
html.hq-arrive .hqm-pdp-thumb-row { animation: hq-arrive-fade .4s .22s ease both; }

@media (prefers-reduced-motion: reduce) {
    .hq-pt-skel, .hq-pt-flight.is-flying { transition: none; }
    .hq-pt-line, .hq-pt-box, .hq-pt-img, .hq-pt-d-thumbs i, .hq-pt-m-head i { animation: none; }
    html.hq-arrive * { animation: none !important; }
}