/* ==========================================================================
   Para-Cord — siatka page buildera
   Wiersze, kolumny i tła sekcji składanych w panelu.
   Świadomie oddzielone od home.css: tamto opisuje gotowe sekcje sklepu,
   to tutaj — szkielet, w który redaktor je wkłada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Wiersz
   -------------------------------------------------------------------------- */

.pc-row {
    position: relative;
}

.pc-row__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Odstęp między kolumnami */
.pc-row--gap-none   .pc-row__inner { gap: 0; }
.pc-row--gap-small  .pc-row__inner { gap: 8px; }
.pc-row--gap-normal .pc-row__inner { gap: 13px; }
.pc-row--gap-large  .pc-row__inner { gap: 24px; }

/* Odstęp wiersza od sąsiadów */
.pc-row--pad-none   { padding-block: 0; }
.pc-row--pad-small  { padding-block: 14px; }
.pc-row--pad-normal { padding-block: 26px; }
.pc-row--pad-large  { padding-block: 44px; }

/* Tła */
.pc-row--bg-light { background: var(--pc-surface-alt); }
.pc-row--bg-soft  { background: var(--pc-surface-soft); }

.pc-row--bg-navy {
    background: var(--pc-navy-800);
    color: rgba(255, 255, 255, 0.86);
}

.pc-row--bg-navy .pc-section-title,
.pc-row--bg-navy .pc-heading__title {
    color: #fff;
}

.pc-row--bg-image {
    position: relative;
    isolation: isolate;
    color: rgba(255, 255, 255, 0.9);
}

.pc-row__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.pc-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-row__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(2, 20, 62, 0.86), rgba(2, 20, 62, 0.92));
}

.pc-row--rounded {
    border-radius: var(--pc-r-lg);
    overflow: hidden;
}

/* Wyrównanie kolumn w pionie */
.pc-row--items-start   .pc-row__inner { align-items: start; }
.pc-row--items-center  .pc-row__inner { align-items: center; }
.pc-row--items-end     .pc-row__inner { align-items: end; }
.pc-row--items-stretch .pc-row__inner { align-items: stretch; }

/* Wiersz pełnej szerokości — kontener nie ogranicza zawartości */
.pc-row--full > .pc-row__inner {
    max-width: none;
    padding-inline: var(--pc-gutter);
}

/* --------------------------------------------------------------------------
   2. Kolumna
   -------------------------------------------------------------------------- */

.pc-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Odstęp między widgetami w kolumnie */
.pc-col--gap-none   { gap: 0; }
.pc-col--gap-small  { gap: 8px; }
.pc-col--gap-normal { gap: 16px; }
.pc-col--gap-large  { gap: 28px; }

.pc-col--align-start   { align-items: flex-start; }
.pc-col--align-center  { align-items: center; }
.pc-col--align-end     { align-items: flex-end; }
.pc-col--align-stretch { align-items: stretch; }

.pc-col--justify-start   { justify-content: flex-start; }
.pc-col--justify-center  { justify-content: center; }
.pc-col--justify-end     { justify-content: flex-end; }
.pc-col--justify-between { justify-content: space-between; }

.pc-col--pad-small  { padding: 12px; }
.pc-col--pad-normal { padding: 20px; }
.pc-col--pad-large  { padding: 30px; }

.pc-col--bg-light { background: var(--pc-surface-alt); border-radius: var(--pc-r-md); }
.pc-col--bg-white { background: #fff; border-radius: var(--pc-r-md); box-shadow: var(--pc-shadow-xs); }
.pc-col--bg-navy  { background: var(--pc-navy-800); color: rgba(255,255,255,.86); border-radius: var(--pc-r-md); }

/*
   Szerokości: mobile-first. Domyślnie liczy się wartość z telefonu,
   kolejne progi ją nadpisują. Dzięki temu redaktor może ułożyć dowolną
   siatkę, a na wąskim ekranie strona i tak zostaje czytelna.
*/
.pc-col--m1  { grid-column: span 1; }
.pc-col--m2  { grid-column: span 2; }
.pc-col--m3  { grid-column: span 3; }
.pc-col--m4  { grid-column: span 4; }
.pc-col--m5  { grid-column: span 5; }
.pc-col--m6  { grid-column: span 6; }
.pc-col--m7  { grid-column: span 7; }
.pc-col--m8  { grid-column: span 8; }
.pc-col--m9  { grid-column: span 9; }
.pc-col--m10 { grid-column: span 10; }
.pc-col--m11 { grid-column: span 11; }
.pc-col--m12 { grid-column: span 12; }

@media (min-width: 640px) {
    .pc-col--t1  { grid-column: span 1; }
    .pc-col--t2  { grid-column: span 2; }
    .pc-col--t3  { grid-column: span 3; }
    .pc-col--t4  { grid-column: span 4; }
    .pc-col--t5  { grid-column: span 5; }
    .pc-col--t6  { grid-column: span 6; }
    .pc-col--t7  { grid-column: span 7; }
    .pc-col--t8  { grid-column: span 8; }
    .pc-col--t9  { grid-column: span 9; }
    .pc-col--t10 { grid-column: span 10; }
    .pc-col--t11 { grid-column: span 11; }
    .pc-col--t12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
    .pc-col--d1  { grid-column: span 1; }
    .pc-col--d2  { grid-column: span 2; }
    .pc-col--d3  { grid-column: span 3; }
    .pc-col--d4  { grid-column: span 4; }
    .pc-col--d5  { grid-column: span 5; }
    .pc-col--d6  { grid-column: span 6; }
    .pc-col--d7  { grid-column: span 7; }
    .pc-col--d8  { grid-column: span 8; }
    .pc-col--d9  { grid-column: span 9; }
    .pc-col--d10 { grid-column: span 10; }
    .pc-col--d11 { grid-column: span 11; }
    .pc-col--d12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   3. Widgety podstawowe
   -------------------------------------------------------------------------- */

.pc-w-text--small  { font-size: 13px; }
.pc-w-text--normal { font-size: 15px; }
.pc-w-text--lead   { font-size: 17px; line-height: 1.6; }

.pc-w-text--center { text-align: center; }
.pc-w-text--right  { text-align: right; }

.pc-w-text--muted { color: var(--pc-muted); }
.pc-w-text--light { color: rgba(255, 255, 255, 0.86); }

.pc-w-text--narrow { max-width: 68ch; }

.pc-w-text p + p {
    margin-top: 14px;
}

.pc-w-text ul {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-left: 20px;
    list-style: disc;
}

/* --------------------------------------------------------------------------
   Widget tekstowy jako dokument

   Regulamin, polityka prywatności i podobne strony to długie teksty ze
   śródtytułami, listami i cytatami. Redaktor składa je w edytorze panelu,
   więc każdy znacznik, który edytor umie wstawić, musi mieć tu styl — inaczej
   dokument rozjeżdża się do przeglądarkowych domyślnych.
   -------------------------------------------------------------------------- */

.pc-w-text h2,
.pc-w-text h3,
.pc-w-text h4 {
    font-family: var(--pc-font-display);
    color: var(--pc-ink);
    line-height: 1.3;
}

.pc-w-text h2 {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 700;
}

.pc-w-text h3 {
    margin-top: 22px;
    font-size: 16px;
    font-weight: 700;
}

.pc-w-text h4 {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
}

/* Pierwszy śródtytuł stoi pod nagłówkiem strony — dodatkowy odstęp byłby dziurą */
.pc-w-text > :first-child {
    margin-top: 0;
}

.pc-w-text h2 + p,
.pc-w-text h3 + p,
.pc-w-text h4 + p {
    margin-top: 8px;
}

.pc-w-text ol {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-left: 22px;
    list-style: decimal;
}

.pc-w-text ol::marker,
.pc-w-text li::marker {
    color: var(--pc-pink);
}

.pc-w-text li > strong {
    color: var(--pc-ink);
}

.pc-w-text a {
    color: var(--pc-pink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pc-w-text a:hover {
    color: var(--pc-pink-700);
}

/* Cytat niesie tu ostrzeżenia i informacje, na które klient musi trafić wzrokiem */
.pc-w-text blockquote {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--pc-pink);
    border-radius: 0 var(--pc-r-md) var(--pc-r-md) 0;
    background: var(--pc-surface-soft);
    color: var(--pc-ink);
    font-size: 14px;
    line-height: 1.6;
}

.pc-w-text hr {
    margin: 26px 0 0;
    border: 0;
    border-top: 1px solid var(--pc-line);
}

.pc-w-text table {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    font-size: 14px;
}

.pc-w-text th,
.pc-w-text td {
    padding: 9px 12px;
    border: 1px solid var(--pc-line);
    text-align: left;
}

.pc-w-text th {
    background: var(--pc-surface-alt);
    color: var(--pc-ink);
    font-weight: 600;
}

/* Tabela w wąskim widoku dostaje własne przewijanie, żeby nie rozpychać strony */
@media (max-width: 600px) {
    .pc-w-text table {
        display: block;
        overflow-x: auto;
    }
}

@media (min-width: 768px) {
    .pc-w-text h2 { font-size: 23px; }
    .pc-w-text h3 { font-size: 18px; }
}

.pc-w-actions--center { display: flex; justify-content: center; }
.pc-w-actions--right  { display: flex; justify-content: flex-end; }

.pc-w-image img {
    display: block;
    width: 100%;
    height: auto;
}

.pc-w-image--rounded img {
    border-radius: var(--pc-r-md);
}

.pc-w-image--1-1  img { aspect-ratio: 1 / 1;  object-fit: cover; }
.pc-w-image--4-3  img { aspect-ratio: 4 / 3;  object-fit: cover; }
.pc-w-image--16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.pc-w-image--3-4  img { aspect-ratio: 3 / 4;  object-fit: cover; }
.pc-w-image--2-1  img { aspect-ratio: 2 / 1;  object-fit: cover; }

/* „od” przy cenie produktu wariantowego */
.pc-prod__from {
    font-family: var(--pc-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--pc-muted);
}

.pc-w-image figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--pc-muted);
}

.pc-w-spacer--small  { height: 16px; }
.pc-w-spacer--normal { height: 32px; }
.pc-w-spacer--large  { height: 56px; }

.pc-w-spacer--divider {
    height: 1px;
    background: var(--pc-line);
}

/* Nagłówek widgetowy korzysta ze stylu sekcji z home.css,
   tu tylko warianty dokładane przez page builder. */
.pc-heading--large .pc-section-title {
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 800;
}

.pc-section-head--plain .pc-section-title {
    padding-bottom: 0;
}

.pc-section-head--plain .pc-section-title::after {
    display: none;
}

.pc-section-title__accent {
    font-style: normal;
    color: var(--pc-pink);
}

/* --------------------------------------------------------------------------
   3b. Przełączniki języka i waluty w nagłówku
   -------------------------------------------------------------------------- */

.pc-switchers {
    display: none;
    align-items: center;
    gap: 6px;
    flex: none;
}

.pc-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    background: #fff;
    color: var(--pc-muted);
    cursor: pointer;
    transition: border-color var(--pc-dur) var(--pc-ease);
}

.pc-switch:hover {
    border-color: var(--pc-pink-300);
}

.pc-switch select {
    border: 0;
    background: none;
    font-family: var(--pc-font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pc-ink);
    cursor: pointer;
}

.pc-switch select:focus {
    outline: none;
}

/* --- Przełącznik języka z flagą ------------------------------------------ */

.pc-flag {
    flex: none;
    border-radius: 2px;
}

/*
 * Lista języków oparta na <details>. Bez JS klik otwiera i zamyka listę,
 * każda pozycja jest zwykłym odnośnikiem — działa też przy wyłączonym JS.
 */
.pc-langpick {
    position: relative;
}

.pc-langpick > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    background: #fff;
    font-family: var(--pc-font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pc-ink);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--pc-dur) var(--pc-ease);
}

/* Domyślny trójkąt <summary> znika — mamy własną strzałkę */
.pc-langpick > summary::-webkit-details-marker { display: none; }
.pc-langpick > summary::marker { content: ''; }

.pc-langpick > summary:hover { border-color: var(--pc-pink-300); }

.pc-langpick__arrow {
    color: var(--pc-muted);
    transition: transform var(--pc-dur) var(--pc-ease);
}

.pc-langpick[open] > summary { border-color: var(--pc-pink); }
.pc-langpick[open] .pc-langpick__arrow { transform: rotate(180deg); }

.pc-langpick__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--pc-z-dropdown);
    min-width: 168px;
    padding: 6px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-sm);
    background: #fff;
    box-shadow: var(--pc-shadow-md);
    list-style: none;
}

.pc-langpick__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pc-r-sm);
    font-size: 13px;
    color: var(--pc-body);
    transition: background var(--pc-dur) var(--pc-ease), color var(--pc-dur) var(--pc-ease);
}

.pc-langpick__list a:hover {
    background: var(--pc-surface-soft);
    color: var(--pc-ink);
}

.pc-langpick__list [aria-current='true'] {
    background: var(--pc-pink-50);
    font-weight: 600;
    color: var(--pc-pink-700);
}

.pc-langpick__note {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--pc-muted);
}

/* Symbol waluty w miejscu, w którym język ma flagę — ta sama rola,
   to samo miejsce, więc oba przełączniki czyta się tak samo */
.pc-cursym {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background: var(--pc-surface-alt);
    font-family: var(--pc-font-display);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--pc-navy-700);
}

.pc-langpick__list .pc-cursym {
    width: 24px;
    height: 17px;
    font-size: 11.5px;
}

@media (min-width: 768px) {
    .pc-switchers {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   4. Liczba kolumn ustawiana w panelu
   Motyw ma wartości domyślne z makiety; page builder może je nadpisać
   zmienną wpisywaną w atrybucie style widgetu.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .pc-cat-grid  { grid-template-columns: repeat(var(--pc-cat-cols, 6),  minmax(0, 1fr)); }
    .pc-prod-grid { grid-template-columns: repeat(var(--pc-prod-cols, 5), minmax(0, 1fr)); }
    .pc-coll-grid { grid-template-columns: repeat(var(--pc-coll-cols, 4), minmax(0, 1fr)); }
    .pc-blog-grid { grid-template-columns: repeat(var(--pc-blog-cols, 4), minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4b. Komponenty wspólne dla katalogu i bloga
   (paginacja i próbki kolorów — używane na obu, więc nie mogą siedzieć
   w arkuszu jednej z tych stron)
   -------------------------------------------------------------------------- */

.pc-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.pc-pager a,
.pc-pager span {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--pc-line-strong);
    border-radius: var(--pc-r-sm);
    background: #fff;
    font-family: var(--pc-font-display);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pc-ink);
    transition: border-color var(--pc-dur) var(--pc-ease), color var(--pc-dur) var(--pc-ease);
}

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

.pc-pager [aria-current='page'] {
    background: var(--pc-pink);
    border-color: var(--pc-pink);
    color: #fff;
    font-weight: 700;
}

.pc-pager .pc-pager__gap {
    border-color: transparent;
    color: var(--pc-muted);
}

/* Próbka koloru jako etykieta z ukrytym polem wyboru */
.pc-swatch-label {
    display: inline-flex;
    cursor: pointer;
}

.pc-swatch-label .pc-swatch {
    display: block;
    width: 26px;
    height: 26px;
    border: 2px solid transparent;
    border-radius: var(--pc-r-pill);
    box-shadow: inset 0 0 0 1px rgba(6, 20, 65, 0.16);
    transition: transform var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease);
}

.pc-swatch-label:hover .pc-swatch {
    transform: scale(1.12);
}

.pc-swatch-label input:checked + .pc-swatch {
    border-color: var(--pc-pink);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--pc-pink);
}

.pc-swatch-label input:focus-visible + .pc-swatch {
    outline: 3px solid var(--pc-pink);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Zapasowy komunikat o nieznanym widgecie (tylko przy APP_DEBUG)
   -------------------------------------------------------------------------- */

.pc-w-missing {
    padding: 14px 16px;
    border: 1px dashed var(--pc-line-strong);
    border-radius: var(--pc-r-sm);
    background: var(--pc-surface-soft);
    font-size: 13px;
    color: var(--pc-muted);
}