/* agrafpricing — frontend price display */

/* === Price label (before_price) === */

.agrafpricing-label {
    margin-bottom: 8px;
}

/* Strikethrough base price (Ostateczna) */
.agrafpricing-strikethrough {
    margin-top: 4px;
}

.agrafpricing-old-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

/* === Price extras (after_price) === */

.agrafpricing-extras {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Promo badge */
.agrafpricing-promo-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #e53935;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Netto/brutto secondary price */
.agrafpricing-netto-brutto {
    margin-top: 2px;
}

.agrafpricing-secondary-price {
    display: inline-block;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* === Listing (miniature) adjustments === */

.product-miniature .agrafpricing-label {
    margin-bottom: 4px;
}

.product-miniature .agrafpricing-old-price {
    font-size: 12px;
}

.product-miniature .agrafpricing-promo-badge {
    font-size: 10px;
    padding: 2px 6px;
}

.product-miniature .agrafpricing-secondary-price {
    font-size: 10px;
}

.product-miniature .agrafpricing-extras {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* === Responsive (mobile) === */

@media (max-width: 767px) {
    .agrafpricing-old-price {
        font-size: 12px;
    }

    .agrafpricing-promo-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .agrafpricing-secondary-price {
        font-size: 11px;
    }
}

/* Trello #120 / CU-869dz813c: wspólny styl obu komunikatów cenowych —
   "Jesteś firmą?" (katalog: listing + produkt) i "Jesteś pośrednikiem?" (formularz rejestracji).
   Nazwa neutralna: klasy są współdzielone przez dwa różne komunikaty, dawne .agraf-broker-notice*
   myliło na komunikacie firmowym.
   Stylistyka wg wzorca ze strony "Nadruki i hafty" (Elementor animated headline
   "Oto krótki przewodnik po metodach znakowania"): Roboto 700, near-black.
   Akcent "niższych cen" = zielony z szablonu + animowane czerwone podkreślenie (wg opisu karty). */
.agraf-price-notice {
    margin: 14px 0 18px;
}
.agraf-price-notice--center {
    text-align: center;
}
.agraf-price-notice__link {
    display: inline-block;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #282828;
    text-decoration: none;
}
.agraf-price-notice__link:hover,
.agraf-price-notice__link:focus {
    color: #282828;
    text-decoration: none;
}
/* Akcent "niższych cen": zielony z szablonu (--color-primary z nrtthemecustomizer, #b2ca04;
   Trello #120 — zmiana z szarego #aebcb9) + animowane czerwone podkreślenie. */
.agraf-price-notice__accent {
    color: var(--color-primary, #b2ca04);
    background-image: linear-gradient(#e30613, #e30613);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    padding-bottom: 2px;
    animation: agrafPriceNoticeUnderline 2.4s ease-in-out infinite;
}
@keyframes agrafPriceNoticeUnderline {
    0%   { background-size: 0% 2px; }
    45%  { background-size: 100% 2px; }
    55%  { background-size: 100% 2px; }
    100% { background-size: 0% 2px; }
}
@media (max-width: 575px) {
    .agraf-price-notice__link { font-size: 16px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .agraf-price-notice__accent {
        animation: none;
        background-size: 100% 2px;
    }
}

/* ============================================================================
   Trello #113 (https://trello.com/c/5Wlg51lG) / CU https://app.clickup.com/t/869e9a5bn
   ST2 — wskaźnik typu cennika w nagłówku: pigułka + dymek (tooltip).

   Znacznik renderuje motyw (override `themes/akira-modified/modules/axoncreator/
   views/templates/widgets/account.tpl`) — DWA razy w `#header-normal`: instancja
   desktopowa i mobilna, przełączane klasami `elementor-hidden-*` motywu na granicy
   1024/1025 px.

   Style celowo mieszkają w CSS MODUŁU (a nie motywu): ten plik jest rejestrowany na
   każdym kontrolerze frontu z bustingiem `?v=filemtime`, więc deploy unieważnia cache
   Cloudflare. CSS motywu bez bustingu potrafi wisieć w CF do 7 dni.
   ============================================================================ */

/* Kontener = kotwica dymka (`position: relative`) i jednocześnie element klastra ikon
   nagłówka. Wysokość 50 px + `vertical-align: top` zrównują środek pigułki ze środkiem
   ikony konta co do piksela (zmierzone: delta 0 px; `vertical-align: middle` daje +6 px
   w dół, bo `.btn-canvas-account` to inline-flex wyrównany do linii bazowej). */
.agraf-pricelist {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 50px;
    vertical-align: top;
}

/* Pigułka — gabaryt i typografia dobrane do sąsiednich ikon klastra
   (`.btn-canvas` / `.btn-canvas-account`: Roboto, wysokość wiersza 50 px, ikony 26 px).
   `max-width` + `text-overflow: ellipsis` na etykiecie to zabezpieczenie na wypadek
   odsłonięcia etykiety (patrz komentarz przy `.agraf-pricelist-pill__label`). */
.agraf-pricelist-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 28px;
    max-width: 200px;
    height: 28px;
    padding: 0 9px;
    border-radius: 14px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background-color: #5f6b7a;
    transition: background-color 0.15s ease;
}

.agraf-pricelist-pill:hover,
.agraf-pricelist-pill:focus {
    color: #fff;
    text-decoration: none;
}

.agraf-pricelist-pill:focus-visible {
    outline: 2px solid #282828;
    outline-offset: 2px;
}

.agraf-pricelist-pill i {
    font-size: 14px;
    line-height: 1;
}

/* Etykieta pigułki — schowana wizualnie, ale OBECNA dla czytników ekranu
   (bez niej link pigułki nie ma dostępnej nazwy: ikona ma `aria-hidden`).

   DLACZEGO NIE JEST WIDOCZNA NA DESKTOPIE (zmierzone na żywej stronie 2026-07-25):
   znacznik renderuje się WEWNĄTRZ widżetu „moje konto" (`axps-my-account`), w kolumnie
   nagłówka o stałej szerokości 240 px — kontener Elementora ma sztywne `max-width:1200px`,
   więc kolumna NIE rośnie z viewportem (tak samo przy 1440 i 1920 px). Klaster
   szukaj+koszyk+konto zajmuje 142 z 210 px szerokości `.elementor-widget-wrap`, czyli na
   pigułkę zostaje 68 px, a najkrótsza polska etykieta („Partnerski (cennik)") potrzebuje
   138 px. Szersza pigułka przepełnia linię flex (`flex-wrap: wrap`) i ikona konta spada do
   drugiego wiersza — czyli dokładnie defekt, który ten CSS ma usunąć. Nazwę cennika podaje
   dymek (`.agraf-pricelist-tip__name`).

   Po przeniesieniu znacznika w miejsce z zapasem miejsca (rekomendacja: górny pasek obok
   „Moja lista życzeń"/„Porównaj") wystarczy zamienić poniższy blok na `display:inline-block`
   — `max-width` i `text-overflow` są już przygotowane na najdłuższą etykietę
   („Партнёрский (прайс-лист)"). */
.agraf-pricelist-pill__label {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dymek — otwierany W DÓŁ (`top`), wyrównany do PRAWEJ krawędzi kontenera.
   Prawe wyrównanie jest wymogiem, nie kosmetyką: `body { overflow-x: hidden }` ucina
   wszystko, co wyjdzie poza viewport w poziomie, a pigułka siedzi przy prawej krawędzi.
   Otwarcie w dół jest istotne: dymek nad pigułką przykryłby ją i przechwycił kliknięcie.
   `z-index` jest realnie potrzebny — przy `z-index: 1` dolną część dymka przechwytuje
   slider nagłówka (żaden przodek klastra nie tworzy stacking-contextu, więc 1000 wystarcza).
   `text-align: left` zeruje `text-align: right` odziedziczone z kontenera widżetu. */
.agraf-pricelist-tip {
    position: absolute;
    top: calc(100% - 6px);
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: 280px;
    padding: 12px 14px;
    border-radius: 4px;
    border-top: 3px solid #5f6b7a;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #282828;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* `:focus-within` = obsługa z klawiatury (Tab na pigułkę odsłania dymek). */
.agraf-pricelist:hover .agraf-pricelist-tip,
.agraf-pricelist:focus-within .agraf-pricelist-tip {
    opacity: 1;
    visibility: visible;
}

.agraf-pricelist-tip__name {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

.agraf-pricelist-tip__desc {
    display: block;
    color: #666;
}

.agraf-pricelist-tip__link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    color: #282828;
    text-decoration: underline;
}

/* === Warianty per typ cennika (kolor tła pigułki + akcent dymka) ===
   Paleta stonowana, pięć wyraźnie różnych barw; tekst biały ma na każdej z nich
   kontrast >= 4,5:1 (WCAG AA). „Dystrybucyjny" (ceny na zapytanie, ceny ukryte) celowo
   grafitowy — ma czytać się jako „specjalny / zapytaj", a nie jako plakietka rabatowa. */
.agraf-pricelist--ostateczny .agraf-pricelist-pill {
    background-color: #5f6b7a;
}
.agraf-pricelist--ostateczny .agraf-pricelist-tip {
    border-top-color: #5f6b7a;
}

.agraf-pricelist--firmowy .agraf-pricelist-pill {
    background-color: #2f6fb2;
}
.agraf-pricelist--firmowy .agraf-pricelist-tip {
    border-top-color: #2f6fb2;
}

.agraf-pricelist--agencyjny .agraf-pricelist-pill {
    background-color: #0d7a70;
}
.agraf-pricelist--agencyjny .agraf-pricelist-tip {
    border-top-color: #0d7a70;
}

.agraf-pricelist--partnerski .agraf-pricelist-pill {
    background-color: #5b4bb7;
}
.agraf-pricelist--partnerski .agraf-pricelist-tip {
    border-top-color: #5b4bb7;
}

.agraf-pricelist--dystrybucyjny .agraf-pricelist-pill {
    background-color: #3f434a;
}
.agraf-pricelist--dystrybucyjny .agraf-pricelist-tip {
    border-top-color: #3f434a;
}

/* === Mobile / tablet ===
   Granica 1024, NIE 991: motyw pokazuje instancję mobilną do 1024 px włącznie, a
   desktopową od 1025 px. Przy 991 pasmo 992–1024 px renderowałoby kompaktowy nagłówek
   z pełną etykietą i rozpychało wiersz.
   Dymek wyłączony: na dotyku hover nie istnieje, a „lepki" hover po tapnięciu
   zasłaniałby nagłówek. */
@media (max-width: 1024px) {
    .agraf-pricelist-pill__label {
        display: none;
    }

    .agraf-pricelist-tip {
        display: none;
    }
}

/* ============================================================================
   #113 ST3 — blok „Twój cennik" na stronie Moje konto (pulpit)
   ----------------------------------------------------------------------------
   Znacznik: `templates/customer/my-account.tpl` w motywie `akira-modified`
   (`<section id="twoj-cennik" class="agraf-pricelist-box agraf-pricelist-box--<tier>">`).
   Style siedzą w CSS MODUŁU, nie motywu — powód jak wyżej: busting `?v=filemtime`
   unieważnia cache Cloudflare przy każdym deployu.

   DLACZEGO TEN BLOK JEST ISTOTNY, A NIE OZDOBNY: pigułka w nagłówku (ST2) jest
   ikoną bez etykiety, a dymek z nazwą i opisem cennika jest wyłączony poniżej
   1025 px. Na telefonie to JEDYNE miejsce, w którym klient zobaczy nazwę swojego
   cennika — stąd wyraźna, samodzielna ramka zamiast dyskretnej adnotacji.
   ============================================================================ */

/* Kolor akcentu (lewa krawędź + nagłówek) i tło = wariant per tier, zdefiniowane
   niżej. Wartości bazowe odpowiadają tierowi „ostateczny", więc blok bez
   rozpoznanego wariantu nadal wygląda kompletnie.

   `scroll-margin-top: 0` NIE jest wartością „na oko" — na tym sklepie ZMIERZONO
   (2026-07-25, konto grupy 19, 1440 px i 390 px), że przy górnej krawędzi okna nie
   ma ŻADNEGO widocznego elementu `position: fixed`: `#header-sticky` ma
   `height: 0`, `visibility: hidden`, a pozostałe elementy fixed to panele
   off-canvas (`opacity: 0`) oraz pasek cookie przyklejony do DOŁU. Lista
   przefiltrowana po widoczności = pusta, a `elementFromPoint(innerWidth/2, 3)`
   zwraca zwykłą kolumnę treści, nie nakładkę. Reguła jest tu zapisana jawnie
   jako zapis wyniku pomiaru: gdyby ktoś w przyszłości włączył lepki nagłówek,
   TU trzeba wpisać jego zmierzoną wysokość, a nie zgadywać. */
.agraf-pricelist-box {
    box-sizing: border-box;
    max-width: 100%;
    margin: 24px 0 8px;
    padding: 16px 18px;
    border: 1px solid #e2e5ea;
    border-left: 4px solid #5f6b7a;
    border-radius: 4px;
    background-color: #eff1f3;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: #282828;
    overflow-wrap: break-word;
    scroll-margin-top: 0;
}

/* Nagłówek „Twój cennik" — mały, wersalikowy, w kolorze akcentu. Marginesy zerowane
   jawnie, bo `h5` motywu wnosi własne `margin-bottom`, które rozjeżdżałoby odstęp
   do nazwy cennika. */
.agraf-pricelist-box h5 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5f6b7a;
}

/* Nazwa cennika = najważniejsza informacja w bloku, więc największy stopień pisma. */
.agraf-pricelist-box__name {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.3;
    color: #282828;
}

.agraf-pricelist-box__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5c6169;
}

/* === Warianty per typ cennika ===
   Akcent = dokładnie ten sam kolor co tło pigułki w nagłówku (ST2), żeby klient
   skojarzył ikonę w nagłówku z tym blokiem. Tło = jasny odcień tego samego koloru
   (ok. 10% na bieli) — dzięki temu tło REALNIE różni się między tierami, a nie
   tylko krawędź; tekst pozostaje ciemny na jasnym, więc kontrast >= 4,5:1. */
.agraf-pricelist-box--ostateczny {
    border-left-color: #5f6b7a;
    background-color: #eff1f3;
}
.agraf-pricelist-box--ostateczny h5 {
    color: #5f6b7a;
}

.agraf-pricelist-box--firmowy {
    border-left-color: #2f6fb2;
    background-color: #e8f0f8;
}
.agraf-pricelist-box--firmowy h5 {
    color: #2f6fb2;
}

.agraf-pricelist-box--agencyjny {
    border-left-color: #0d7a70;
    background-color: #e4f2f0;
}
.agraf-pricelist-box--agencyjny h5 {
    color: #0d7a70;
}

.agraf-pricelist-box--partnerski {
    border-left-color: #5b4bb7;
    background-color: #eeecf9;
}
.agraf-pricelist-box--partnerski h5 {
    color: #5b4bb7;
}

.agraf-pricelist-box--dystrybucyjny {
    border-left-color: #3f434a;
    background-color: #edeef0;
}
.agraf-pricelist-box--dystrybucyjny h5 {
    color: #3f434a;
}

/* Mobile — węższe wcięcia, żeby blok nie zjadał szerokości kolumny treści.
   Granica 575 px (a nie 1024 jak przy pigułce): tu chodzi o wąski ekran telefonu,
   nie o przełączenie instancji nagłówka. */
@media (max-width: 575px) {
    .agraf-pricelist-box {
        margin: 20px 0 8px;
        padding: 14px 14px 14px 12px;
    }

    .agraf-pricelist-box__name {
        font-size: 17px;
    }
}

/* ============================================================================
   #113 ST5 — linijka „Twój cennik: <nazwa>" na karcie produktu
   ----------------------------------------------------------------------------
   Znacznik: `themes/akira-modified/templates/catalog/_partials/product-prices.tpl`
   (`<p class="agraf-pricelist-line agraf-pricelist-line--<tier>">`), renderowany POD nazwą
   produktu i NAD blokiem `.product-prices` — poza fragmentem podmienianym przez AJAX (D5).

   Style siedzą w CSS MODUŁU, nie motywu — powód jak przy ST2/ST3: ten plik jest rejestrowany
   z bustingiem `?v=filemtime`, więc deploy unieważnia cache Cloudflare; CSS motywu bez
   bustingu potrafi wisieć w CF do 7 dni.
   ============================================================================ */

/* Stopień pisma CELOWO mniejszy od ceny: cena na tej karcie to 1.1em przy 16 px bazy
   (`.current-price-value` ma inline `font-size: 1.1em`), więc 13 px czyta się jako podpis
   kontekstowy, a nie jako druga liczba konkurująca z ceną.

   Marginesy dobrane tak, by NIE rozpychać bloku ceny: górny 0 (nad linijką jest już odstęp
   od nazwy/widżetu opinii), dolny 6 px — mniejszy niż odstęp, który `.product-prices` i tak
   wnosi od góry, więc suma nie przesuwa ceny w dół o cały wiersz.

   `overflow-wrap` — najdłuższa etykieta w RU („Партнёрский (прайс-лист)") przy 390 px
   nie mieści się w jednym wierszu; bez tego link wystawałby poza kolumnę i rozpychał
   `scrollWidth` (asercja mobilna). */
.agraf-pricelist-line {
    margin: 0 0 6px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: #6b7280;
    overflow-wrap: break-word;
}

/* Nazwa cennika = jedyny element klikalny. Kolor akcentu (wariant per tier niżej) plus
   podkreślenie kropkowane: samo kolorowanie nie wystarcza jako sygnał linku, gdy akcenty
   tierów są stonowane, a WCAG 1.4.1 zabrania kodowania informacji wyłącznie barwą. */
.agraf-pricelist-line a {
    font-weight: 600;
    color: #5f6b7a;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.agraf-pricelist-line a:hover,
.agraf-pricelist-line a:focus {
    text-decoration-style: solid;
}

.agraf-pricelist-line a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* === Warianty per typ cennika ===
   Kolor linku = DOKŁADNIE ten sam kolor, co tło pigułki w nagłówku (ST2) i akcent bloku na
   „Moim koncie" (ST3) — te trzy miejsca mówią o tej samej rzeczy, więc muszą mieć wspólny
   kod barwny. Tier `dystrybucyjny` nie jest tu wymieniony CELOWO: grupa 20 ma
   `show_prices = 0`, więc cały ten szablon (razem z linijką) siedzi pod `{if
   $product.show_price}` i dla niej się nie renderuje. Dopisanie mu wariantu byłoby martwym
   selektorem sugerującym, że taki przypadek istnieje. */
.agraf-pricelist-line--ostateczny a {
    color: #5f6b7a;
}

.agraf-pricelist-line--firmowy a {
    color: #2f6fb2;
}

.agraf-pricelist-line--agencyjny a {
    color: #0d7a70;
}

.agraf-pricelist-line--partnerski a {
    color: #5b4bb7;
}

/* Mobile — o stopień mniej, żeby linijka nie zjadała wiersza nad ceną na wąskim ekranie.
   Granica 575 px jak przy bloku ST3 (wąski telefon), nie 1024 (to granica instancji nagłówka). */
@media (max-width: 575px) {
    .agraf-pricelist-line {
        font-size: 12px;
        margin-bottom: 5px;
    }
}