/* ── Spinner — small, corner, never blocks anything ── */
#pt-progress {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    z-index: 99999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#pt-progress.active {
    opacity: 1;
}
#pt-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(0, 157, 224, 0.2);
    border-top-color: #009DE0;
    animation: pt-spin 0.7s linear infinite;
    -webkit-animation: pt-spin 0.7s linear infinite;
}
@keyframes pt-spin {
    to { transform: rotate(360deg); }
}
@-webkit-keyframes pt-spin {
    to { -webkit-transform: rotate(360deg); }
}

/* ── Page transition ── */
main {
    transform-origin: top center;
    will-change: transform, opacity;
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

body.pt-leaving {
    overflow: hidden;
    height: 100vh;
}

body.pt-leaving main {
    animation: pt-leave var(--pt-out-dur, 250ms) var(--pt-ease, ease) forwards;
    pointer-events: none;
}

body.pt-entering main {
    animation: pt-enter var(--pt-in-dur, 350ms) var(--pt-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
    pointer-events: none;
}

body.pt-style-fade {
    --pt-out-dur: 250ms;
    --pt-in-dur:  300ms;
    --pt-ease: ease;
}
body.pt-style-fade.pt-leaving  main { animation-name: pt-fade-out; }
body.pt-style-fade.pt-entering main { animation-name: pt-fade-in; }

@keyframes pt-fade-out { to   { opacity: 0; } }
@keyframes pt-fade-in  { from { opacity: 0; } }

body.pt-style-up {
    --pt-out-dur: 250ms;
    --pt-in-dur:  350ms;
    --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.pt-style-up.pt-leaving  main { animation-name: pt-up-out; }
body.pt-style-up.pt-entering main { animation-name: pt-up-in; }

@keyframes pt-up-out { to   { opacity: 0; transform: translateY(-10px); } }
@keyframes pt-up-in  { from { opacity: 0; transform: translateY(16px);  } }

body.pt-style-slide {
    --pt-out-dur: 250ms;
    --pt-in-dur:  350ms;
    --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.pt-style-slide.pt-leaving  main { animation-name: pt-slide-out; }
body.pt-style-slide.pt-entering main { animation-name: pt-slide-in; }

@keyframes pt-slide-out { to   { opacity: 0; transform: translateX(-20px); } }
@keyframes pt-slide-in  { from { opacity: 0; transform: translateX(20px);  } }

body.pt-style-scale {
    --pt-out-dur: 250ms;
    --pt-in-dur:  350ms;
    --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.pt-style-scale.pt-leaving  main { animation-name: pt-scale-out; }
body.pt-style-scale.pt-entering main { animation-name: pt-scale-in; }

@keyframes pt-scale-out { to   { opacity: 0; transform: scale(0.97); } }
@keyframes pt-scale-in  { from { opacity: 0; transform: scale(1.03); } }

/* ── Staggered entrance ── */

body.pt-entering .woocommerce-products-header,
body.pt-entering .page-title,
body.pt-entering .woocommerce-breadcrumb {
    animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay: 20ms;
    opacity: 0;
}

body.pt-entering .site-sidebar,
body.pt-entering .widget-area {
    animation: pt-fade-in 0.4s ease forwards;
    animation-delay: 100ms;
    opacity: 0;
}

body.pt-entering .product-category:nth-child(1),
body.pt-entering .category-item:nth-child(1) { animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 30ms;  opacity: 0; }
body.pt-entering .product-category:nth-child(2),
body.pt-entering .category-item:nth-child(2) { animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 60ms;  opacity: 0; }
body.pt-entering .product-category:nth-child(3),
body.pt-entering .category-item:nth-child(3) { animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 90ms;  opacity: 0; }
body.pt-entering .product-category:nth-child(4),
body.pt-entering .category-item:nth-child(4) { animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 120ms; opacity: 0; }
body.pt-entering .product-category:nth-child(n+5),
body.pt-entering .category-item:nth-child(n+5) { animation: pt-up-in 0.3s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 150ms; opacity: 0; }

body.pt-entering .product-item:nth-child(1),
body.pt-entering .klbth-product:nth-child(1) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 40ms;  opacity: 0; }
body.pt-entering .product-item:nth-child(2),
body.pt-entering .klbth-product:nth-child(2) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 80ms;  opacity: 0; }
body.pt-entering .product-item:nth-child(3),
body.pt-entering .klbth-product:nth-child(3) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 120ms; opacity: 0; }
body.pt-entering .product-item:nth-child(4),
body.pt-entering .klbth-product:nth-child(4) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 160ms; opacity: 0; }
body.pt-entering .product-item:nth-child(5),
body.pt-entering .klbth-product:nth-child(5) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 200ms; opacity: 0; }
body.pt-entering .product-item:nth-child(6),
body.pt-entering .klbth-product:nth-child(6) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 240ms; opacity: 0; }
body.pt-entering .product-item:nth-child(n+7),
body.pt-entering .klbth-product:nth-child(n+7) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 280ms; opacity: 0; }

body.pt-entering .elementor-section:nth-child(1) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 0ms;   opacity: 0; }
body.pt-entering .elementor-section:nth-child(2) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 60ms;  opacity: 0; }
body.pt-entering .elementor-section:nth-child(3) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 120ms; opacity: 0; }
body.pt-entering .elementor-section:nth-child(n+4) { animation: pt-up-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: 180ms; opacity: 0; }

/* ── Tap-state micro-interactions ── */

.product-item,
.klbth-product,
.product {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.product-item:active,
.klbth-product:active,
.product:active {
    transform: scale(0.97);
}

.button,
.btn,
button,
[role="button"],
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.klbth-btn {
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.button:active,
.btn:active,
button:active,
[role="button"]:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.klbth-btn:active {
    transform: scale(0.95);
}

.header-mobile-nav a,
.product-categories a,
.widget_product_categories a,
.wc-block-product-categories a {
    display: inline-block;
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}
.header-mobile-nav a:active,
.product-categories a:active,
.widget_product_categories a:active,
.wc-block-product-categories a:active {
    transform: scale(0.96);
}

.category-item,
.klbth-category,
.product-category,
.banner-item {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.category-item:active,
.klbth-category:active,
.product-category:active,
.banner-item:active {
    transform: scale(0.97);
}

.ti-wishlist-add-button,
.tinvwl_add_to_wishlist_button,
.klbth-wishlist,
.klbth-quick-view,
.klbth-compare {
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}
.ti-wishlist-add-button:active,
.tinvwl_add_to_wishlist_button:active,
.klbth-wishlist:active,
.klbth-quick-view:active,
.klbth-compare:active {
    transform: scale(0.88);
}