/* ==========================================================================
   Para-Cord — warstwa bazowa
   Tokeny, reset, typografia, przyciski, pola formularzy, narzędzia.
   Prefiks klas: .pc-*  (Para-Cord)
   Kolory pobrane próbnikiem bezpośrednio z makiety.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeny
   -------------------------------------------------------------------------- */

:root {
    /* Granat — logo, bannery, stopka, przyciski koszyka */
    --pc-navy-900: #020b33;
    --pc-navy-800: #02143e;
    --pc-navy-700: #0b1d54;
    --pc-navy-600: #16276b;
    --pc-navy-500: #22367f;

    /* Róż — akcent marki */
    --pc-pink: #f7016a;
    --pc-pink-700: #c40054;
    --pc-pink-600: #d60059;
    --pc-pink-300: #ff7ab0;
    --pc-pink-50: #ffe9f2;

    /* Neutralne */
    --pc-ink: #061441;
    --pc-body: #4c5568;
    --pc-muted: #77839a;
    --pc-line: #e6ebf1;
    --pc-line-strong: #d6dee8;
    --pc-surface: #ffffff;
    --pc-surface-alt: #f0f3f6;
    --pc-surface-soft: #f7f9fb;
    --pc-page: #ffffff;

    /* Statusy */
    --pc-star: #feac07;
    --pc-green: #16a34a;
    --pc-red: #dc2626;

    /* Promienie */
    --pc-r-sm: 8px;
    --pc-r-md: 12px;
    --pc-r-lg: 16px;
    --pc-r-xl: 22px;
    --pc-r-pill: 999px;

    /* Cienie */
    --pc-shadow-xs: 0 1px 2px rgba(6, 20, 65, 0.06);
    --pc-shadow-sm: 0 2px 8px rgba(6, 20, 65, 0.07);
    --pc-shadow-md: 0 8px 24px rgba(6, 20, 65, 0.10);
    --pc-shadow-lg: 0 18px 44px rgba(6, 20, 65, 0.14);
    --pc-shadow-pink: 0 8px 20px rgba(247, 1, 106, 0.32);

    /* Układ */
    --pc-container: 1200px;
    --pc-gutter: 16px;
    /*
     * Rytm pionowy strony — dwie wartości i nic poza nimi.
     *
     * --pc-block-gap   odstęp od okruszków (albo poprzedniego bloku) do
     *                  pierwszego bloku treści w tej samej sekcji
     * --pc-section-gap odstęp między osobnymi sekcjami strony
     *
     * Wcześniej każdy arkusz miał własną wartość (12, 14, 16, 18, 20, 22, 24),
     * przez co ta sama strona miała inny rytm niż sąsiednia.
     */
    --pc-block-gap: 14px;
    --pc-section-gap: 30px;

    /* Typografia */
    --pc-font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pc-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Ruch */
    --pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pc-dur: 220ms;

    /* Warstwy */
    --pc-z-header: 60;
    --pc-z-dropdown: 70;
    --pc-z-drawer: 90;
    --pc-z-toast: 100;
}

@media (min-width: 768px) {
    :root {
        --pc-gutter: 24px;
        --pc-block-gap: 18px;
        --pc-section-gap: 38px;
    }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--pc-page);
    color: var(--pc-body);
    font-family: var(--pc-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Zabezpieczenie przed poziomym scrollem na wąskich ekranach */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--pc-font-display);
    color: var(--pc-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

svg {
    flex: none;
}

/* Widoczny, spójny focus dla klawiatury */
:focus-visible {
    outline: 3px solid var(--pc-pink);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   3. Układ
   -------------------------------------------------------------------------- */

.pc-container {
    width: 100%;
    max-width: calc(var(--pc-container) + 2 * var(--pc-gutter));
    margin-inline: auto;
    padding-inline: var(--pc-gutter);
}

.pc-section {
    margin-top: var(--pc-section-gap);
}

.pc-section--tight {
    margin-top: 18px;
}

/* Nagłówek sekcji: tytuł + różowa podkreślka + link "Zobacz wszystkie".
   Na wąskich ekranach link schodzi pod tytuł — inaczej tytuł łamałby się
   na trzy wiersze, żeby zrobić mu miejsce obok. */
.pc-section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

@media (min-width: 640px) {
    .pc-section-head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .pc-section-head .pc-section-link {
        margin-top: 6px;
    }
}

.pc-section-title {
    position: relative;
    padding-bottom: 10px;
    font-size: clamp(20px, 1.2rem + 1vw, 27px);
    font-weight: 700;
    color: var(--pc-ink);
}

.pc-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-pink);
}

.pc-section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-top: 0;
    font-family: var(--pc-font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--pc-ink);
    transition: color var(--pc-dur) var(--pc-ease);
}

.pc-section-link svg {
    color: var(--pc-pink);
    transition: transform var(--pc-dur) var(--pc-ease);
}

.pc-section-link:hover {
    color: var(--pc-pink);
}

.pc-section-link:hover svg {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. Przyciski
   -------------------------------------------------------------------------- */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--pc-r-pill);
    font-family: var(--pc-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    /* Zabezpieczenie: przycisk nigdy nie wychodzi poza swój kontener */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color var(--pc-dur) var(--pc-ease),
                color var(--pc-dur) var(--pc-ease),
                box-shadow var(--pc-dur) var(--pc-ease),
                transform var(--pc-dur) var(--pc-ease);
}

.pc-btn:active {
    transform: translateY(1px);
}

.pc-btn__arrow {
    transition: transform var(--pc-dur) var(--pc-ease);
}

.pc-btn:hover .pc-btn__arrow {
    transform: translateX(4px);
}

/* Różowy — główne CTA */
.pc-btn--pink {
    background: var(--pc-pink);
    color: #fff;
    box-shadow: var(--pc-shadow-pink);
}

.pc-btn--pink:hover {
    background: var(--pc-pink-600);
}

/* Granatowy — „Dodaj do koszyka”, prostokątny promień jak w makiecie */
.pc-btn--navy {
    border-radius: var(--pc-r-sm);
    background: var(--pc-navy-700);
    color: #fff;
}

.pc-btn--navy:hover {
    background: var(--pc-navy-600);
}

/* Biały — kafle kolekcji */
/* Wariant „ghost" — obramowanie zamiast wypełnienia. Używany wszędzie tam,
   gdzie przycisk jest drugą, równorzędną opcją (np. odmowa zgody na cookies). */
.pc-btn--ghost {
    border: 1px solid var(--pc-line-strong);
    border-radius: var(--pc-r-sm);
    background: #fff;
    color: var(--pc-ink);
}

.pc-btn--ghost:hover {
    border-color: var(--pc-pink);
    color: var(--pc-pink);
}

/* Obramowany, zaokrąglony — druga decyzja obok głównej (zgoda na cookies).
   Różni się od „ghost" promieniem: tam prostokąt, tu pigułka jak w przycisku
   różowym, bo oba stoją w jednym rzędzie. */
.pc-btn--outline {
    border: 1.5px solid var(--pc-line-strong);
    background: #fff;
    color: var(--pc-ink);
}

.pc-btn--outline:hover {
    border-color: var(--pc-navy-700);
    background: #fff;
}

/* Najcichszy wariant — trzecia, najmniej eksponowana decyzja.
   Nadal pełnowymiarowy przycisk, nie odnośnik pisany drobnym drukiem. */
.pc-btn--quiet {
    background: var(--pc-surface-alt);
    color: var(--pc-body);
}

.pc-btn--quiet:hover {
    background: var(--pc-line);
    color: var(--pc-ink);
}

.pc-btn--white {
    background: #fff;
    color: var(--pc-ink);
    box-shadow: var(--pc-shadow-sm);
}

.pc-btn--white:hover {
    background: var(--pc-pink);
    color: #fff;
}

.pc-btn--sm {
    padding: 8px 16px;
    font-size: 12.5px;
}

.pc-btn--lg {
    padding: 14px 28px;
    font-size: 15px;
}

.pc-btn--block {
    width: 100%;
}

/* Okrągły przycisk ikonowy (strzałki karuzeli, serduszka) */
.pc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--pc-r-pill);
    background: #fff;
    color: var(--pc-ink);
    box-shadow: var(--pc-shadow-sm);
    transition: background-color var(--pc-dur) var(--pc-ease),
                color var(--pc-dur) var(--pc-ease),
                transform var(--pc-dur) var(--pc-ease);
}

.pc-icon-btn:hover {
    background: var(--pc-pink);
    color: #fff;
}

.pc-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pc-icon-btn:disabled:hover {
    background: #fff;
    color: var(--pc-ink);
}

/* --------------------------------------------------------------------------
   5. Pola formularzy
   -------------------------------------------------------------------------- */

.pc-input {
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    background: #fff;
    font-size: 14px;
    color: var(--pc-ink);
    transition: border-color var(--pc-dur) var(--pc-ease),
                box-shadow var(--pc-dur) var(--pc-ease);
}

.pc-input::placeholder {
    color: var(--pc-muted);
}

.pc-input:focus {
    outline: none;
    border-color: var(--pc-pink);
    box-shadow: 0 0 0 3px var(--pc-pink-50);
}

.pc-input[aria-invalid='true'] {
    border-color: var(--pc-red);
}

/* --------------------------------------------------------------------------
   6. Okruszki (ścieżka nawigacji) — wspólne dla wszystkich podstron
   -------------------------------------------------------------------------- */

.pc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--pc-muted);
}

.pc-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pc-muted);
    transition: color var(--pc-dur) var(--pc-ease);
}

.pc-crumbs a:hover {
    color: var(--pc-pink);
}

/* Ikony w okruszkach nie mają atrybutów width/height — rozmiar nadajemy tutaj */
.pc-crumbs svg {
    width: 13px;
    height: 13px;
    opacity: 0.55;
}

.pc-crumbs a svg {
    opacity: 0.8;
}

.pc-crumbs [aria-current='page'] {
    color: var(--pc-ink);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Ocena gwiazdkowa
   -------------------------------------------------------------------------- */

.pc-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pc-rating__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--pc-star);
}

.pc-rating__count {
    font-size: 12px;
    color: var(--pc-muted);
}

/* --------------------------------------------------------------------------
   8. Kropki karuzeli
   -------------------------------------------------------------------------- */

.pc-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pc-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: var(--pc-r-pill);
    background: var(--pc-line-strong);
    transition: width var(--pc-dur) var(--pc-ease),
                background-color var(--pc-dur) var(--pc-ease);
}

.pc-dots button[aria-current='true'] {
    width: 22px;
    background: var(--pc-pink);
}

/* Kropki leżą na zdjęciu, które bywa jasne — stąd obrys cieniem */
.pc-dots--on-dark button {
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 1px 4px rgba(2, 11, 51, 0.45);
}

.pc-dots--on-dark button[aria-current='true'] {
    box-shadow: 0 1px 4px rgba(2, 11, 51, 0.35);
}

.pc-dots--on-dark button[aria-current='true'] {
    background: var(--pc-pink);
}

/* --------------------------------------------------------------------------
   9. Odręczna naklejka (biała plama z tekstem, jak w makiecie)
   -------------------------------------------------------------------------- */

.pc-sticker {
    position: relative;
    display: grid;
    place-items: center;
    padding: 26px 30px;
    color: var(--pc-ink);
    text-align: center;
    font-family: var(--pc-font-display);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    background: #fff;
    /* Nieregularny, „malowany” kształt — celowo asymetryczny */
    border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%;
    transform: rotate(-6deg);
    box-shadow: var(--pc-shadow-md);
}

.pc-sticker__underline {
    display: block;
    width: 62px;
    height: 5px;
    margin-top: 10px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-pink);
}

/* Różowe „iskry” obok naklejki */
.pc-sparks {
    position: absolute;
    display: block;
    color: var(--pc-pink);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Narzędzia
   -------------------------------------------------------------------------- */

.pc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pc-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: calc(var(--pc-z-toast) + 1);
    padding: 12px 20px;
    border-radius: 0 0 var(--pc-r-sm) var(--pc-r-sm);
    background: var(--pc-pink);
    color: #fff;
    font-family: var(--pc-font-display);
    font-weight: 600;
    transition: top var(--pc-dur) var(--pc-ease);
}

.pc-skip-link:focus {
    top: 0;
}

.pc-no-scroll {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   11. Powiadomienia (toast) — prawy dolny róg, zgodnie ze standardem UI
   -------------------------------------------------------------------------- */

.pc-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--pc-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.pc-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border-radius: var(--pc-r-md);
    border-left: 4px solid var(--pc-green);
    background: #fff;
    box-shadow: var(--pc-shadow-lg);
    pointer-events: auto;
    animation: pc-toast-in 260ms var(--pc-ease);
}

.pc-toast--error {
    border-left-color: var(--pc-red);
}

.pc-toast--info {
    border-left-color: var(--pc-pink);
}

.pc-toast--leaving {
    animation: pc-toast-out 200ms var(--pc-ease) forwards;
}

.pc-toast__icon {
    flex: none;
    margin-top: 1px;
    color: var(--pc-green);
}

.pc-toast--error .pc-toast__icon {
    color: var(--pc-red);
}

.pc-toast--info .pc-toast__icon {
    color: var(--pc-pink);
}

.pc-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-toast__title {
    font-family: var(--pc-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-ink);
}

.pc-toast__text {
    font-size: 13px;
    color: var(--pc-muted);
}

.pc-toast__close {
    flex: none;
    padding: 2px;
    color: var(--pc-muted);
    border-radius: var(--pc-r-sm);
    transition: color var(--pc-dur) var(--pc-ease);
}

.pc-toast__close:hover {
    color: var(--pc-ink);
}

@keyframes pc-toast-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pc-toast-out {
    to {
        opacity: 0;
        transform: translateX(24px);
    }
}


/* Pole-pułapka na boty (newsletter, opinie).
   Poza ekranem, nie display:none — ukrycie displayem bywa wykrywane. */
.pc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Potwierdzenie zapisu do newslettera */
.pc-newsletter__ok {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #157a44;
}

.pc-newsletter--navy .pc-newsletter__ok {
    color: #7ee2a8;
}


/* --------------------------------------------------------------------------
   ZGODA NA COOKIES

   Pasek przy dolnej krawędzi, nad wysuwanym koszykiem, ale pod toastami.
   Nie zasłania całej strony: sklep wolno przeglądać bez podejmowania decyzji,
   a wymuszanie jej modalem to ciemny wzorzec.
   -------------------------------------------------------------------------- */

.pc-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--pc-z-toast) - 1);
    padding: 12px;
    animation: pc-cookies-in 260ms var(--pc-ease);
}

@keyframes pc-cookies-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-cookies { animation: none; }
}

.pc-cookies__box {
    position: relative;
    max-width: 1020px;
    margin: 0 auto;
    border-radius: var(--pc-r-xl);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow-lg);
    overflow: hidden;
}

.pc-cookies__main {
    min-width: 0;
    padding: 20px;
}

/* --- Panel ze zdjęciem --- */

.pc-cookies__media {
    position: relative;
    display: none;          /* na telefonie zdjęcie ustępuje miejsca treści */
    background: #efeaf9;
}

.pc-cookies__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logotyp leży na zdjęciu — jasna otoczka w samej grafice daje mu kontrast */
.pc-cookies__logo {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 128px;
    height: auto;
}

/* Wersja dla telefonu: zwykły obrazek nad nagłówkiem, nie nakładka */
.pc-cookies__logo--inline {
    position: static;
    width: 96px;
    margin: 0 0 12px;
}

/* --- Tekst --- */

.pc-cookies__title {
    margin: 0 0 6px;
    font-family: var(--pc-font-display);
    font-size: 21px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--pc-navy-800);
}

.pc-cookies__title span { color: var(--pc-pink); }

.pc-cookies__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pc-body);
}

.pc-cookies__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-navy-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pc-cookies__more:hover { color: var(--pc-pink); }

/* --- Kategorie --- */

.pc-cookies__choices {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.pc-cookies__choice {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: var(--pc-surface-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pc-muted);
    cursor: pointer;
}

.pc-cookies__choice:has(input:disabled) { cursor: default; }

.pc-cookies__choice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.pc-cookies__choice-icon {
    padding: 6px;
    box-sizing: content-box;
    border-radius: var(--pc-r-sm);
    background: var(--pc-surface);
    color: var(--pc-navy-600);
}

.pc-cookies__choice strong {
    font-size: 14px;
    color: var(--pc-ink);
}

/*
 * Przełącznik.
 *
 * Rysowany na samym polu wyboru, bez dodatkowego znacznika: dzięki temu
 * klawiatura, czytniki ekranu i etykieta `label` działają tak jak zwykle,
 * a wyłączony JS niczego nie psuje.
 */
.pc-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    margin: 0;
    border-radius: var(--pc-r-pill);
    background: var(--pc-line-strong);
    cursor: pointer;
    transition: background var(--pc-dur) var(--pc-ease);
}

.pc-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--pc-shadow-xs);
    transition: transform var(--pc-dur) var(--pc-ease);
}

.pc-switch:checked { background: var(--pc-navy-700); }
.pc-switch:checked::after { transform: translateX(20px); }

.pc-switch:focus-visible {
    outline: 2px solid var(--pc-pink);
    outline-offset: 2px;
}

/* Zgoda niezbędna jest włączona i nie do ruszenia — mówi o tym wygląd,
   nie dopiero kliknięcie */
.pc-switch:disabled {
    cursor: not-allowed;
    opacity: .85;
}

/* --- Przyciski --- */

.pc-cookies__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.pc-cookies__actions .pc-btn {
    flex: 1 1 160px;
    justify-content: center;
}

/*
 * Telefon: kategorie jako trzy wąskie wiersze.
 *
 * Trzy kafle z opisami zajmowały trzy czwarte ekranu i baner robił się
 * zasłoną, a nie paskiem. Opis każdej kategorii zostaje w akapicie nad nimi
 * i w polityce prywatności — sama nazwa przy przełączniku wystarczy, żeby
 * wiedzieć, co się włącza.
 */
@media (max-width: 719px) {
    .pc-cookies__choice {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
    }

    .pc-cookies__choice-head { margin: 0; }
    .pc-cookies__choice-icon,
    .pc-cookies__choice-text { display: none; }
}

@media (min-width: 720px) {
    .pc-cookies { padding: 16px; }

    /* Zdjęcie po lewej, treść po prawej — jak w makiecie */
    .pc-cookies__box {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .pc-cookies__media { display: block; }
    .pc-cookies__logo--inline { display: none; }
    .pc-cookies__main { padding: 24px 26px; }

    .pc-cookies__title { font-size: 25px; }
    .pc-cookies__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* „Akceptuj" dostaje więcej miejsca niż pozostałe dwa, ale odmowa
       zostaje pełnym przyciskiem, a nie drobnym odnośnikiem */
    .pc-cookies__actions .pc-btn { flex: 1 1 auto; }
    .pc-cookies__actions .pc-btn--pink { flex-grow: 1.6; }
}

@media (min-width: 1024px) {
    .pc-cookies__box { grid-template-columns: 360px minmax(0, 1fr); }
    .pc-cookies__main { padding: 26px 30px; }
    .pc-cookies__title { font-size: 28px; }
}