/* ITF Płynne ładowanie — kolory i wysokość paska przychodzą ze zmiennych w <head> (ustawienia wtyczki). */

/* Pasek ładowania przy przechodzeniu między podstronami.
   Klasę is-loading dodaje front.js. Pasek szybko dojeżdża do ~30%, potem coraz wolniej
   do 90% — resztę „dokańcza” wczytanie nowej strony. */
.itfsl-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000; /* nad paskiem admina (99999) i przyklejonym nagłówkiem Bricksa */
    height: var(--itfsl-bar-h, 3px);
    background: linear-gradient(90deg, var(--itfsl-bar-1), var(--itfsl-bar-2));
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
}
.itfsl-bar.is-loading {
    opacity: 1;
    animation: itfsl-bar 8s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes itfsl-bar {
    0% { transform: scaleX(0); }
    10% { transform: scaleX(.3); }
    100% { transform: scaleX(.9); }
}

/* Szkielet strony przy przechodzeniu między podstronami (wstawia go front.js).
   Zasłania treść pod nagłówkiem; po wczytaniu nowej strony płynne przejście przenika go w prawdziwą treść. */
.itfsl-page {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990; /* pod paskiem admina i paskiem ładowania */
    overflow: hidden;
    background: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.itfsl-page.is-shown { opacity: 1; }

.itfsl-page, .itfsl-page * { box-sizing: border-box; }
.itfsl-wrap {
    max-width: var(--itfsl-w, 1180px);
    margin: 0 auto;
    padding: 40px 20px;
}

.itfsl-b {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--itfsl-sk-1) 25%, var(--itfsl-sk-2) 50%, var(--itfsl-sk-1) 75%) 0 0/200% 100%;
    animation: itfsl-sk 1.4s linear infinite;
}
.itfsl-line { height: 14px; margin-bottom: 12px; }
.itfsl-line--short { width: 60%; }
.itfsl-title { height: 32px; width: 55%; margin-bottom: 20px; }
.itfsl-title--center { margin-left: auto; margin-right: auto; width: 40%; }
.itfsl-sub { height: 18px; width: 35%; margin-bottom: 24px; }
.itfsl-price { height: 28px; width: 25%; margin-bottom: 28px; }
.itfsl-btn { height: 48px; width: 45%; margin-top: 28px; border-radius: 999px; }
.itfsl-hero { height: clamp(200px, 35vh, 380px); margin-bottom: 36px; }
.itfsl-media { aspect-ratio: 4 / 3; margin-bottom: 16px; }

/* Produkt: zdjęcie + kolumna z opisem */
.itfsl-product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Listing: siatka kart */
.itfsl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

@media (max-width: 1024px) {
    .itfsl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .itfsl-product { gap: 28px; }
}
@media (max-width: 767px) {
    .itfsl-wrap { padding: 24px 16px; }
    .itfsl-product { grid-template-columns: 1fr; gap: 20px; }
    .itfsl-grid { grid-template-columns: 1fr; }
    .itfsl-title, .itfsl-title--center { width: 75%; }
    .itfsl-btn { width: 100%; }
}

/* Szkielet: pulsujące tło za obrazkiem / wideo / kontenerem wideo w tle, dopóki się nie wczyta (reguły z selektorami w <head>). */
@keyframes itfsl-sk {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Wariant przejścia „przesunięcie”. */
@keyframes itfsl-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes itfsl-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    .itfsl-sk img, .itfsl-sk video, .itfsl-b { animation: none !important; }
    .itfsl-page { transition: none; }
}