/* Load AFTER the existing site CSS. Scoped to the price list only. */

/* Tabela z cennikiem */
#cennik {
    box-sizing: border-box;
    --cennik-accent: #4a6920; /* przyciski plus minus plus wertykalny znacznik w sekcji po kliknięciu plus */
    --cennik-heading: #4a6920; /*nagłówki głównych menu w tabeli np. I. PC-Market - program do obsĹ‚ugi skelpu ... #0dbf27*/
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#cennik table.cenniktab,
#cennik table.cenniktab * {
    box-sizing: border-box;
}

/* These base styles do NOT depend on JavaScript-added classes. */
#cennik table.cenniktab {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 24px 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #dbe4e9 !important;
    border-radius: 14px;
    overflow: hidden;
    background: #fff !important;
    color: #203341;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 8px 28px rgba(22, 62, 80, 0.07);
}

#cennik table.cenniktab.cennik-ready {
    table-layout: fixed !important;
}

#cennik table.cenniktab > tbody {
    display: table-row-group !important;
}

#cennik table.cenniktab > thead {
    display: table-header-group !important;
}

/** table row (tr) - format wiersza */
#cennik table.cenniktab > tbody > tr,
#cennik table.cenniktab > thead > tr {
    display: table-row !important;
    background: transparent !important;
}

/** table data (td) - pojedyncza komórka tabeli. table head (th) - nagłówek tabeli */
#cennik table.cenniktab > tbody > tr > td,
#cennik table.cenniktab > thead > tr > th {
    display: table-cell !important;
    float: none !important;
    height: auto !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ebef !important;
    background: #fff !important;
    color: #203341 !important;;
    vertical-align: middle !important;
    font: inherit;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* table head (th) - nagłówek tabeli */
#cennik table.cenniktab > thead > tr > th {
    background: #f3f6f8 !important;
    color: #516572 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

#cennik table.cenniktab > tbody > tr > td.item {
    width: auto !important;
    font-weight: 550;
    text-align: left !important;
}

#cennik table.cenniktab td.item.cennik-has-description {
    cursor: pointer;
}

#cennik table.cenniktab > tbody > tr > td.price,
#cennik table.cenniktab > thead > tr > th.cennik-price-head {
    width: 132px !important;
    text-align: right !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#cennik table.cenniktab > tbody > tr > td.cennik-action,
#cennik table.cenniktab > thead > tr > th.cennik-action-head {
    width: 68px !important;
    padding: 10px 12px !important;
    text-align: center !important;
}

#cennik table.cenniktab > tbody > tr > td.section {
    padding: 17px 20px !important;
    background: var(--cennik-heading) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 650;
    text-align: left !important;
}

#cennik table.cenniktab td.section a {
    color: #fff !important;
    text-decoration: none;
}

#cennik table.cenniktab td.section a:hover,
#cennik table.cenniktab td.section a:focus {
    text-decoration: underline;
}

#cennik table.cenniktab .comment {
    color: #62737e !important;
    font-size: 0.875em;
    font-weight: 400;
}

#cennik table.cenniktab > tbody > tr.cennik-open > td {
    background: #8cbd33 !important; /** kolor tła nazwy pozycji cennika po jej rozwinię™ciu i przesunię™ciu myszki poza aktywny obszar pozycji */
}

#cennik table.cenniktab .cennik-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #4a6920 !important; /* kolor obramowania na przycisku + - */
    border-radius: 10px;
    background: #fff !important;
    color: var(--cennik-accent) !important;
    box-shadow: none;
    font: 400 26px/1 Arial, sans-serif !important;
    cursor: pointer;
    touch-action: manipulation;
}

#cennik table.cenniktab .cennik-toggle[aria-expanded="true"] {
    background: var(--cennik-accent) !important;
    border-color: var(--cennik-accent) !important;
    color: #fff !important;
}

#cennik table.cenniktab .cennik-toggle:focus {
    outline: 3px solid #4a6920 !important; /* kolor obramowania kiedy klikamy plus / minus i ustawia się™ na nim focus */
    outline-offset: 3px;
}

/* Readable fallback before enhancement, or when JS is disabled. */
#cennik table.cenniktab td.item > div,
#cennik table.cenniktab .cennik-description {
    display: block !important;
    position: static !important;
    float: none !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #435865 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    text-align: left !important;
    cursor: text;
}

#cennik table.cenniktab > tbody > tr > td.cennik-detail-cell {
    padding: 0 !important;
    background: #fff !important; /** kolor tła w szczegół‚ach - po kliknięciu plus */
}

#cennik table.cenniktab .cennik-description {
    margin: 0 !important;
    padding: 18px 20px 22px !important;
    border-left: 3px solid var(--cennik-accent) !important;
}

/* Keep this AFTER the rule that sets all rows to table-row. */
#cennik table.cenniktab > tbody > tr.cennik-detail[hidden] {
    display: none !important;
}

@media (hover: hover) {
    #cennik table.cenniktab > tbody > tr.cennik-product:hover > td {
        background: #8cbd33 !important;
    }
    #cennik table.cenniktab .cennik-toggle:hover {
        border-color: var(--cennik-accent) !important;
    }
}

@media (max-width: 600px) {
    #cennik table.cenniktab {
        font-size: 14px;
        border-radius: 10px;
    }
    #cennik table.cenniktab > tbody > tr > td,
    #cennik table.cenniktab > thead > tr > th {
        padding: 13px 10px !important;
    }
    #cennik table.cenniktab > tbody > tr > td.price,
    #cennik table.cenniktab > thead > tr > th.cennik-price-head {
        width: 96px !important;
    }
    #cennik table.cenniktab > tbody > tr > td.cennik-action,
    #cennik table.cenniktab > thead > tr > th.cennik-action-head {
        width: 60px !important;
        padding: 10px 8px !important;
    }
    #cennik table.cenniktab > tbody > tr > td.section {
        padding: 15px 12px !important;
        font-size: 15px;
    }
    #cennik table.cenniktab .cennik-description {
        padding: 14px 12px 18px !important;
    }
    #cennik table.cenniktab > tbody > tr > td.cennik-detail-cell {
        padding: 0 !important;
    }
}

@media print {
    #cennik table.cenniktab { box-shadow: none; }
    #cennik table.cenniktab > tbody > tr.cennik-detail[hidden] {
        display: table-row !important;
    }

#cennik table.cenniktab .cennik-toggle { visibility: hidden; }
#cennik table.cenniktab > tbody > tr > td.section,
#cennik table.cenniktab td.section a { color: #000 !important; }
}