/*
 * Customizacje wygladu esensiosklep.pl
 *
 * Plik NIE istnieje w masterze CMS Zielony — jest wgrywany tylko tej stronie, wiec
 * aktualizacje (deploy2 / _pull.php) nigdy go nie nadpisza ani nie zglosza jako
 * customizacji w SAFEMODE. Laduje sie sam: header.php robi glob('_style_*.css')
 * + natsort, a "200" wypada po "_style_100_custom.css", wiec te reguly wygrywaja
 * kaskada nad domyslnymi.
 *
 * Powstal 2026-07-28 przy przenosinach sklepu na aktualny CMS. Zrodlo tresci:
 * jej wlasny _style_100_custom.css (92 linie) sprzed wymiany plikow — przeniesiony
 * 1:1, plus style wyciete z inline <style> w s_producers.php i z customizacji
 * "SPRZEDANE" w s_box_produkt.php (oba pliki wrocily do wersji core).
 */

@media all {
    /* Styl nawigacji kafelkowej - Esensio Gold */
    .esensio-nav-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 50px;
    }
    .esensio-nav-btn {
        background: #fafafa;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 15px 5px;
        text-align: center;
        text-decoration: none;
        color: #333;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 90px;
    }
    .esensio-nav-btn:hover {
        background: #fff;
        border-color: #c5a021;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        color: #c5a021;
    }
    .esensio-nav-icon { font-size: 24px; margin-bottom: 8px; display: block; }
    .esensio-nav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; display: block; letter-spacing: 1px; }
}

@media (min-width: 768px) {
    .esensio-nav-grid { grid-template-columns: repeat(5, 1fr); gap: 15px; }
    .esensio-nav-btn { padding: 20px 10px; }
    .esensio-nav-title { font-size: 12px; }
}
/* --- Skompaktowana sekcja cen --- */
.store_price {
    padding: 10px 0; /* Zmniejszony padding */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 10px 0; /* Zmniejszony margines */
}

.price_print {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 5px; /* Mniejszy odstęp */
    color: #888;
}

/* Cena przekreślona */
.price_before {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
    margin-bottom: 0;
}

/* Nowa cena - mniejsza czcionka */
.price_after span {
    font-size: 22px; /* Zmniejszono z 28px */
    font-weight: 800;
    color: #000;
}

/* Wyrównanie w pionie */
.price_after_discount.brutto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Oszczędzasz - dyskretniej */
.price_discount {
    color: #d4af37;
    font-weight: 600;
    font-size: 11px;
    margin-top: 2px;
}

/* Ukrycie niepotrzebnych napisów netto/vat jeśli są "na kupie" */
.brutto_netto {
    font-size: 9px;
    display: inline-block;
    margin-left: 5px;
}


/* ============================================================
 * Lista producentow — "Zobacz wiecej" po 28 pozycjach
 * Sterowanie: modules/js/footer/esensio_producenci.php
 * (bylo: inline <style> w s_producers.php)
 * ============================================================ */

.producers .p.hidden-producer { display: none; }

.producers .show-more-btn { text-align: center; margin: 1rem 0; }

.producers .show-more-btn button {
    padding: .6rem 2rem;
    background: var(--mark);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: var(--font-family-text-medium);
}

.producers .show-more-btn button:hover { background: var(--mark-dark); }

/* ============================================================
 * Produkt niedostepny — plakietka "SPRZEDANE" na kafelku listingu
 *
 * Znacznik <i class="esensio-sold-out"> wstawia w kafelek hook
 * api/webhook/s_box_produkt_esensio_sprzedane.php (bylo: inline style=
 * + inline HTML w s_box_produkt.php).
 *
 * Kazda regula ma DWA selektory i to jest celowe:
 *   :has(> .esensio-sold-out) — dziala od razu przy renderze, zero mrugniecia,
 *   .is-sold-out-card         — klase dokleja JS (modules/js/footer/esensio_sprzedane.php)
 *                               dla przegladarek bez :has() (Firefox < 121).
 * Bez tego drugiego produkt niedostepny wygladalby u nich na dostepny i dalo
 * by sie go wrzucic do koszyka — to bylby blad dzialania, nie wygladu.
 * ============================================================ */

.product.is-sold-out-card .photo,
.product:has(> .esensio-sold-out) .photo { position: relative; }

.product.is-sold-out-card .photo img,
.product:has(> .esensio-sold-out) .photo img {
    filter: grayscale(100%);
    opacity: .5;
}

/* Plakietka. TU sie zmienia napis — content ponizej. Nie ma go w language/,
   bo ::after siedzi na .photo, a znacznik z hooka jest jej rodzenstwem i zmienna
   CSS by tu nie doszla (dziedziczenie idzie tylko w dol). Sklep jest jednojezyczny,
   wiec to wystarcza. */
.product.is-sold-out-card .photo::after,
.product:has(> .esensio-sold-out) .photo::after {
    content: "SPRZEDANE";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(220, 0, 0, .9);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    border: 2px solid #fff;
    z-index: 10;
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Bez mozliwosci zakupu chowamy koszyk — zostaje sama lupka (podglad produktu).
   Celujemy w link z onClick="s_cart_add(...)", bo tylko on dodaje do koszyka. */
.product.is-sold-out-card .icon a[onclick],
.product:has(> .esensio-sold-out) .icon a[onclick] { display: none; }

/* Sam znacznik jest techniczny — nigdy nie ma sie pokazac. */
.esensio-sold-out { display: none !important; }