/* ==========================================================================
   Techcyy smooth navigation, skeletons, infinite scroll, offline
   ========================================================================== */

/* Smooth page-to-page transition: header and tab bar stay in place, content cross-fades */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }
.lwhh-site-nav { view-transition-name: tc-header; }
.lwhh-mobile-bottom-bar { view-transition-name: tc-tabbar; }
#wpadminbar { view-transition-name: tc-adminbar; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Shimmer blocks: light grey on white, no borders */
.byte-skel {
  display: block; position: relative; overflow: hidden;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  background: #EFEFEF;
}
.byte-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
  animation: byteShimmer 1.2s linear infinite; will-change: transform;
}
@keyframes byteShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .byte-skel::after { animation: none; } }

/* Top progress bar */
.byte-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
  background: #2563EB; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  pointer-events: none;
}
html.byte-nav-busy .byte-progress { opacity: 1; animation: byteProgress 8s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes byteProgress { 0% { transform: scaleX(0); } 30% { transform: scaleX(.55); } 100% { transform: scaleX(.92); } }

/* Page skeleton (layout chosen per page type in smooth.js) */
.byte-page-skel {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; top: 64px; z-index: 9990;
  background: #FFFFFF; overflow: hidden;
}
html.admin-bar .byte-page-skel { top: 96px; }
html.byte-nav-slow .byte-page-skel { display: block; animation: byteFadeIn .15s ease-out; }
@keyframes byteFadeIn { from { opacity: 0; } to { opacity: 1; } }
.byte-page-skel .sk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; }
.byte-page-skel .sk-hero { display: flex; flex-direction: column; gap: 14px; padding: 40px 0 36px; }
.byte-page-skel .sk-sec { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 32px; }
.byte-page-skel .sk-narrow { max-width: 900px; width: 100%; margin: 0 auto; }
.byte-page-skel .sk-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.byte-page-skel .sk-pills { display: flex; gap: 10px; overflow: hidden; }
.byte-page-skel .sk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.byte-page-skel .sk-pad { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 0; }
.byte-page-skel .sk-card { display: flex; flex-direction: column; min-width: 0; }
.byte-page-skel .sk-box { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FAFAFA; }
.byte-page-skel .sk-row,
.byte-page-skel .sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.byte-page-skel .sk-grid--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.byte-page-skel .sk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.byte-page-skel .sk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.byte-page-skel .sk-split--cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.byte-page-skel .sk-line-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #F1F1F1; }
.byte-page-skel .sk-acc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; background: #FAFAFA; }

/* Infinite-scroll placeholder cards inside the product grid: no borders */
html body ul.products.products li.product.product.byte-skel-card,
.byte-skel-card {
  display: flex !important; flex-direction: column !important; list-style: none;
  padding: 0 !important; background: #FFFFFF !important;
  border: 0 !important; box-shadow: none !important; outline: 0 !important;
}
.byte-skel-card .byte-skel--img { aspect-ratio: 1 / 1; width: 100%; }
.byte-skel-body { padding: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.byte-skel--tag { width: 40%; height: 20px; }
.byte-skel--line { width: 100%; height: 14px; }
.byte-skel--line.short { width: 60%; }
.byte-skel--btn { width: 100%; height: 44px; }

/* Product images: shimmer behind each image until it has loaded */
html body ul.products li.product .astra-shop-thumbnail-wrap { background-color: #EFEFEF; }
html body ul.products li.product .astra-shop-thumbnail-wrap:has(img.byte-img-loading)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
  animation: byteShimmer 1.2s linear infinite;
}
img[data-byte-sk] { transition: opacity .25s ease; }
img.byte-img-loading { opacity: 0; }

/* Infinite scroll */
html.byte-infinite .woocommerce-pagination,
html.byte-infinite .ast-pagination,
html.byte-infinite .navigation.pagination { display: none !important; }
.byte-inf-sentinel { height: 1px; }
.byte-inf-status { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 26px auto 8px; text-align: center; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: .04em; }
.byte-inf-status:empty { display: none; }
.byte-inf-status.is-end span { display: inline-block; padding: 8px 14px; border: 3px solid #000000; background: #FFF4E0; box-shadow: 3px 3px 0 0 #000000; }
.byte-inf-status.is-offline span { display: inline-block; padding: 8px 14px; background: #000000; color: #FFFFFF; }
.byte-inf-status.is-error span { color: #B91C1C; }
.byte-inf-retry { font: inherit; font-weight: 800; text-transform: uppercase; background: #2563EB; color: #FFFFFF; border: 3px solid #000000; box-shadow: 3px 3px 0 0 #000000; padding: 8px 14px; cursor: pointer; }

/* Offline banner: fully hidden unless the device is offline */
.byte-offline {
  position: fixed; left: 50%; bottom: 24px; z-index: 100001;
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); white-space: nowrap;
  padding: 10px 16px; background: #000000; color: #FFFFFF; border: 3px solid #000000; box-shadow: 4px 4px 0 0 #2563EB;
  font-weight: 800; font-size: 0.85rem; letter-spacing: .02em; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.byte-offline__dot { width: 10px; height: 10px; background: #EF4444; border: 2px solid #FFFFFF; flex: 0 0 auto; }
html.byte-is-offline .byte-offline { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

@media (max-width: 1023px) {
  .byte-page-skel { top: 62px; }
  html.admin-bar .byte-page-skel { top: 108px; }
  .byte-page-skel .sk-wrap { padding: 0 16px 100px; }
  .byte-page-skel .sk-hero { padding: 32px 0 28px; }
  .byte-page-skel .sk-grid,
  .byte-page-skel .sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .byte-page-skel .sk-row { display: flex; gap: 16px; overflow: hidden; }
  .byte-page-skel .sk-row > .sk-card { flex: 0 0 78%; }
  .byte-page-skel .sk-split,
  .byte-page-skel .sk-split--cart,
  .byte-page-skel .sk-grid--blog { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .byte-offline { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) {
  .byte-page-skel .sk-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Phones and tablets: no cross-fade between pages, no image fade-in (feels instant) */
@media (max-width: 1023px) {
  @view-transition { navigation: none; }
  img.byte-img-loading { opacity: 1 !important; }
  img[data-byte-sk] { transition: none !important; }
  html.byte-nav-slow .byte-page-skel { animation: none; }
}