/* ==========================================================================
   ALLMEBLO. Wzornik tkanin: przyciski grup i animacja przelaczania.
   2026-08-11.

   GDZIE TO DZIALA
   Tresc strony CMS 29157 (/content/wzornik-dostepnych-tkanin.html) oraz ta
   sama tresc na karcie produktu jako zakladka leoextratab nr 4 (type=2,
   cms=29157, 427 produktow). Plik jest wpiety w layout-both-columns.tpl dla
   page_name cms i product, patrz komentarz w tym szablonie.

   CO BYLO NIE TAK
   Wzornik przelacza grupy bez JavaScriptu: piec <input type="radio"
   name="fwg"> plus selektory :checked i sasiedztwo. Grupy niewybrane
   dostawaly display: none, czyli podmiana byla natychmiastowa i bez zadnego
   sygnalu. Ukladu naglowka grupy BASIC i SMART niczym sie nie roznia, wiec
   klikniecie z pierwszej grupy na druga wygladalo, jakby nic sie nie stalo.

   JAK TO NAPRAWIONE, NADAL BEZ SKRYPTU
   Animacji nie da sie zrobic na display, ale przejscie z display: none na
   widoczny renderuje poddrzewo od nowa i URUCHAMIA animacje CSS od poczatku.
   Osobno kazda regula animacji jest napisana przez ten sam zestaw pieciu
   selektorow :checked co reszta wzornika, wiec zaczyna pasowac dopiero w
   chwili przelaczenia. Dzieki temu animacja odpala sie takze wtedy, gdy grupa
   byla juz widoczna, czyli przy przejsciu z "Wszystkie" na jedna grupe.

   TRZY WARSTWY SYGNALU
     1. sekcja grupy wjezdza z dolu i sie rozjasnia (fw-wejscie),
     2. naglowek grupy dostaje zielony rozblysk obwodki (fw-blysk),
     3. kafle tkanin wchodza po kolei, z opoznieniem 70 ms (fw-wejscie-kafel).

   KOLEJNOSC I SPECYFICZNOSC
   Plik wchodzi PO paczce CCC, w ktorej siedzi profile3635912023.css z
   podstawowymi regulami .fw-. Selektory maja tu te sama specyficznosc co tam
   (1,2,0 dla stanu wybranego), wiec o wyniku decyduje kolejnosc wpiec i
   dlatego zaden !important nie jest potrzebny.
   ========================================================================== */

/* --- przyciski grup ---------------------------------------------------- */

.alm-wzornik .fw-filter {
    position: relative;
    /* miejsce na wskaznik wyboru w prawym gornym rogu */
    padding-right: 40px;
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .22s ease, transform .18s ease;
}

/* Puste kolko po prawej. Wypelnia sie ptaszkiem, gdy grupa jest wybrana,
   a samo z siebie mowi "to jest do klikniecia". */
.alm-wzornik .fw-filter::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 19px;
    height: 19px;
    margin-top: -9.5px;
    border: 1.5px solid #d7cfc4;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    transition: border-color .18s ease, background-color .18s ease;
}

.alm-wzornik .fw-filter:hover {
    box-shadow: 0 6px 16px -8px rgba(42, 131, 0, .55);
    transform: translateY(-2px);
}
.alm-wzornik .fw-filter:hover::after {
    border-color: var(--gr);
}
.alm-wzornik .fw-filter:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -3px rgba(42, 131, 0, .5);
}

/* stan wybrany: ptaszek plus lekkie podniesienie */
#fw-all:checked     ~ .fw-filters .fw-filter--all::after,
#fw-basic:checked   ~ .fw-filters .fw-filter--basic::after,
#fw-smart:checked   ~ .fw-filters .fw-filter--smart::after,
#fw-premium:checked ~ .fw-filters .fw-filter--premium::after,
#fw-vip:checked     ~ .fw-filters .fw-filter--vip::after {
    border-color: #fff;
    background-color: #fff;
    /* ptaszek w kolorze --gr (#2a8300); znak # musi byc jako %23 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a8300' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7.2'/%3E%3C/svg%3E");
}
#fw-all:checked     ~ .fw-filters .fw-filter--all,
#fw-basic:checked   ~ .fw-filters .fw-filter--basic,
#fw-smart:checked   ~ .fw-filters .fw-filter--smart,
#fw-premium:checked ~ .fw-filters .fw-filter--premium,
#fw-vip:checked     ~ .fw-filters .fw-filter--vip {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(42, 131, 0, .75);
    /* jednorazowe drgniecie w chwili wyboru, zeby klikniecie mialo odzew
       w tym samym miejscu, w ktorym patrzy uzytkownik */
    animation: fw-odzew .34s ease-out;
}

/* Przycisk niewybrany, ale nadal czytelny jako klikalny. */
.alm-wzornik .fw-filter b { transition: color .18s ease; }

/* --- animacja wejscia grupy ------------------------------------------- */

#fw-all:checked     ~ .fw-groups .fw-group,
#fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"],
#fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"],
#fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"],
#fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"] {
    animation: fw-wejscie .46s cubic-bezier(.22, .7, .3, 1) both;
}

/* Rozblysk obwodki naglowka grupy. Osobny zestaw selektorow, a nie animacja
   dziedziczona po sekcji, bo animacje potomkow nie restartuja sie same, gdy
   przodek dostaje nowa animacje (a tak jest przy przejsciu z "Wszystkie"). */
#fw-all:checked     ~ .fw-groups .fw-group .fw-group__head,
#fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"] .fw-group__head,
#fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"] .fw-group__head,
#fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"] .fw-group__head,
#fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"] .fw-group__head {
    border-radius: 10px;
    animation: fw-blysk 1.1s ease-out both;
}

/* Kafle tkanin wchodza po kolei. */
#fw-all:checked     ~ .fw-groups .fw-group .fw-fabric,
#fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"] .fw-fabric,
#fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"] .fw-fabric,
#fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"] .fw-fabric,
#fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"] .fw-fabric {
    animation: fw-wejscie-kafel .44s cubic-bezier(.22, .7, .3, 1) both;
}

/* Opoznienia liczone w obrebie jednej sekcji, bo .fw-fabric to <article>,
   a naglowek i opis grupy to <div> i <p>, wiec nth-of-type startuje od 1
   w kazdej grupie osobno. Najwieksza grupa ma 4 tkaniny. */
.alm-wzornik .fw-fabric:nth-of-type(1) { animation-delay: .10s; }
.alm-wzornik .fw-fabric:nth-of-type(2) { animation-delay: .17s; }
.alm-wzornik .fw-fabric:nth-of-type(3) { animation-delay: .24s; }
.alm-wzornik .fw-fabric:nth-of-type(4) { animation-delay: .31s; }

@keyframes fw-wejscie {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fw-wejscie-kafel {
    from { opacity: 0; transform: translateY(11px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fw-blysk {
    0%   { box-shadow: 0 0 0 0 rgba(42, 131, 0, .34); }
    35%  { box-shadow: 0 0 0 8px rgba(42, 131, 0, .12); }
    100% { box-shadow: 0 0 0 0 rgba(42, 131, 0, 0); }
}
@keyframes fw-odzew {
    0%   { transform: translateY(-2px) scale(1); }
    45%  { transform: translateY(-2px) scale(1.045); }
    100% { transform: translateY(-2px) scale(1); }
}

/* --- pasek filtrow zostaje w polu widzenia ---------------------------- */

/* Tylko na stronie CMS i tylko od 992 px. Na karcie produktu ten sam wzornik
   siedzi w zakladce, gdzie przyklejony pasek nie ma sensu, a kontener
   zakladki moze miec overflow, ktory sticky i tak by wygasil.
   Naglowek motywu nie jest przyklejony (body nie ma klasy keep-header,
   floatHeader() w custom.js konczy sie od razu), wiec top: 0 jest poprawne. */
@media (min-width: 992px) {
    body#cms .alm-wzornik .fw-filters {
        position: sticky;
        top: 0;
        z-index: 5;
        /* tlo jest konieczne: bez niego kafle przewijaja sie pod paskiem */
        background: #fff;
        padding: 14px 0 12px;
        margin-top: 8px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--bdr);
    }
}

/* --- przyciski CTA w tresci (Zamow probki i podobne) ------------------ */

.alm-wzornik .am-btn {
    transition: background-color .18s ease, box-shadow .22s ease, transform .18s ease;
}
.alm-wzornik .am-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(42, 131, 0, .85);
}
.alm-wzornik .am-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px -5px rgba(42, 131, 0, .8);
}

/* --- kafel tkaniny: wyrazniejszy odzew na najechanie ------------------ */

.alm-wzornik .fw-sw__link {
    transition: border-color .18s ease, box-shadow .22s ease, transform .18s ease;
}
@media (hover: hover) {
    .alm-wzornik .fw-sw__link:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -12px rgba(61, 50, 40, .55);
    }
}

/* --- ograniczenie ruchu ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #fw-all:checked     ~ .fw-groups .fw-group,
    #fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"],
    #fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"],
    #fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"],
    #fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"],
    #fw-all:checked     ~ .fw-groups .fw-group .fw-group__head,
    #fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"] .fw-group__head,
    #fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"] .fw-group__head,
    #fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"] .fw-group__head,
    #fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"] .fw-group__head,
    #fw-all:checked     ~ .fw-groups .fw-group .fw-fabric,
    #fw-basic:checked   ~ .fw-groups .fw-group[data-grupa="basic"] .fw-fabric,
    #fw-smart:checked   ~ .fw-groups .fw-group[data-grupa="smart"] .fw-fabric,
    #fw-premium:checked ~ .fw-groups .fw-group[data-grupa="premium"] .fw-fabric,
    #fw-vip:checked     ~ .fw-groups .fw-group[data-grupa="vip"] .fw-fabric,
    #fw-all:checked     ~ .fw-filters .fw-filter--all,
    #fw-basic:checked   ~ .fw-filters .fw-filter--basic,
    #fw-smart:checked   ~ .fw-filters .fw-filter--smart,
    #fw-premium:checked ~ .fw-filters .fw-filter--premium,
    #fw-vip:checked     ~ .fw-filters .fw-filter--vip {
        /* animation: none musi zostawic tresc widoczna, bo fill-mode both
           trzymalby stan poczatkowy z opacity: 0 */
        animation: none;
        opacity: 1;
        transform: none;
    }
    .alm-wzornik .fw-filter,
    .alm-wzornik .am-btn,
    .alm-wzornik .fw-sw__link {
        transition: none;
    }
    .alm-wzornik .fw-filter:hover,
    .alm-wzornik .am-btn:hover,
    .alm-wzornik .fw-sw__link:hover {
        transform: none;
    }
}