/* Paris Set Configurator — lekki styl. Assety ładowane tylko na stronie z shortcode. */

.pset {
    --pset-accent: #B60106;
    --pset-radius: 10px;
    --pset-sticky-top: 0px; /* ustawiane przez JS = wysokość przyklejonego menu (#brx-header) */
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 16px; /* marginesy boczne (m.in. mobile) — pasek full-bleed to uwzględnia */
}
.pset *, .pset *::before, .pset *::after { box-sizing: border-box; }

.pset-title {
    text-align: center; font-weight: 700; font-size: 2.1rem; line-height: 1.15;
    margin: .5rem 0 2rem;
}
.pset-step { margin: 0 0 2.5rem; }
.pset-step__title { font-size: 1.35rem; margin: 0 0 1.25rem; }
.pset-step--center { text-align: center; }

/* ---- Wybór płci / rozmiaru jako karty (miejsce na zdjęcia boxów/flakonów) ---- */
.pset-choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.pset-choices--cards { justify-content: center; gap: 1.25rem; }

.pset-choice {
    padding: .8rem 1.6rem; border: 2px solid #ddd; background: #fff; border-radius: 40px;
    cursor: pointer; font-size: 1rem; transition: border-color .15s, background .15s, box-shadow .15s;
}
.pset-choice:hover { border-color: var(--pset-accent); }
.pset-choice.is-active { border-color: var(--pset-accent); background: var(--pset-accent); color: #fff; }

/* Wariant kafelkowy z miejscem na grafikę */
.pset-choices--cards .pset-choice {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    width: 260px; padding: 1rem; border-radius: var(--pset-radius); background: #fff;
}
.pset-choices--cards .pset-choice.is-active { background: #fff; color: inherit; box-shadow: 0 0 0 2px var(--pset-accent) inset; }
.pset-choice__media {
    width: 100%; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
    background: transparent; /* bez szarych pasów obok zdjęcia */
    display: flex; align-items: center; justify-content: center;
}
.pset-choice__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pset-choice__img:not([src]), .pset-choice__img[src=""] { visibility: hidden; }
.pset-choices--cards .pset-choice.is-active .pset-choice__media { outline: 2px solid var(--pset-accent); }
.pset-choice__label { font-size: 1.05rem; font-weight: 600; }

/* ---- Górny pasek podsumowania (sticky pod menu) ---- */
.pset-summary {
    position: sticky;
    top: var(--pset-sticky-top, 0px);
    z-index: 60;
    /* pełna szerokość (full-bleed) + wyraźny ciemny pasek z mocnym cieniem */
    width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 1.5rem;
    background: #202124; color: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.30);
}
.pset-summary__inner {
    max-width: 1280px; margin: 0 auto; padding: .9rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}
/* info kurczy się (min-width:0), dzięki czemu cena+przyciski zostają w tym samym wierszu */
.pset-summary__info { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem; flex: 1 1 0; min-width: 0; }
.pset-summary__remaining { font-size: .85rem; color: #e8e8e8; white-space: nowrap; flex: 0 0 auto; }
.pset-summary__slots {
    display: inline-flex; flex-wrap: nowrap; gap: .25rem; min-width: 0;
    overflow-x: auto; padding-bottom: 0;
    scrollbar-width: none; -ms-overflow-style: none; /* bez widocznego suwaka */
}
.pset-summary__slots::-webkit-scrollbar { display: none; }
.pset-slot {
    display: inline-flex; align-items: center; gap: .22rem; padding: .2rem .45rem;
    border: 1px dashed #555; border-radius: 20px; font-size: .68rem; color: #bbb; white-space: nowrap;
    background: transparent; font-family: inherit; line-height: 1.3;
}
.pset-slot--filled { border: 1px solid var(--pset-accent); color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.pset-slot--filled:hover { background: rgba(255,255,255,.16); }
.pset-slot em { font-style: normal; color: #999; }

.pset-summary__buy { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; margin-left: auto; }
.pset-summary__price { display: inline-flex; align-items: baseline; gap: .35rem; }
.pset-summary__price-label { font-size: .82rem; color: #b8b8b8; white-space: nowrap; }
.pset-summary__price-value { font-size: 1.3rem; font-weight: 700; color: #fff; white-space: nowrap; }

.pset-confirm, .pset-back { padding: .6rem 1.05rem; border-radius: 40px; cursor: pointer; font-size: .88rem; white-space: nowrap; }
.pset-confirm { border: none; background: var(--pset-accent); color: #fff; font-weight: 600; }
.pset-confirm:disabled { opacity: .4; cursor: not-allowed; }
.pset-back { border: 1px solid #666; background: transparent; color: #fff; }
.pset-back:hover { border-color: #fff; }
.pset-error { flex: 1 0 100%; color: #ffb3b3; font-size: .85rem; margin: .25rem 0 0; }

/* ---- Panel filtrów + wyszukiwarka ---- */
/* Równa siatka: 8 kontrolek (szukajka + 6 filtrów + wyczyść) = 2 czyste rzędy po 4 */
.pset-filters {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem; margin: 0 0 1.25rem; align-items: center;
}
.pset-search {
    width: 100%; min-width: 0; padding: .6rem .8rem; border: 1px solid #ddd;
    border-radius: 8px; font-size: .9rem;
}
.pset-filter {
    width: 100%; min-width: 0; max-width: none;
    padding: .6rem .7rem; border: 1px solid #ddd; border-radius: 8px; font-size: .88rem; background: #fff;
}
.pset-filter-clear {
    width: 100%; padding: .6rem .9rem; border: 1px solid #ddd; background: #fff;
    border-radius: 8px; cursor: pointer; font-size: .88rem;
}
@media (max-width: 1000px) { .pset-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pset-filter-clear:hover { border-color: var(--pset-accent); color: var(--pset-accent); }

.pset-empty { text-align: center; color: #888; padding: 2rem 0; }
.pset-more-wrap { text-align: center; margin: 1.5rem 0; }
.pset-more {
    padding: .8rem 2rem; border: 1.5px solid var(--pset-accent); background: #fff; color: var(--pset-accent);
    border-radius: 40px; cursor: pointer; font-size: .95rem; font-weight: 600;
}
.pset-more:hover { background: var(--pset-accent); color: #fff; }
.pset-grid[aria-busy="true"] { opacity: .5; transition: opacity .15s; }

/* ---- Siatka produktów: mniej kolumn, większe karty ---- */
.pset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem;
    align-items: stretch;
}
.pset-tile[hidden] { display: none; }
.pset-tile {
    border: 1px solid #ececec; border-radius: 14px; padding: 1rem; background: #fff;
    display: flex; flex-direction: column; min-width: 0; /* pozwala kolumnie się kurczyć */
    transition: box-shadow .18s, transform .18s;
}
.pset-tile:hover { box-shadow: 0 8px 24px rgba(0,0,0,.09); transform: translateY(-2px); }

.pset-tile__image { position: relative; margin: 0 0 .75rem; text-align: center; }
.pset-tile__image img { width: 100%; height: 170px; object-fit: contain; }
.pset-tile__badge {
    position: absolute; top: 0; right: 0;
    background: var(--pset-accent); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .2rem .5rem; border-radius: 20px;
}

.pset-tile__body { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }
.pset-tile__title { font-size: 1.15rem; font-weight: 700; margin: 0; }

/* Blok "inspirowane" — mały obraz oryginału z boku + tekst (jak dopasowanie na stronie głównej) */
.pset-tile__insp {
    display: flex; gap: .7rem; align-items: center; text-align: left;
    background: #f6f6f8; border-radius: 12px; padding: .6rem .7rem;
}
.pset-tile__insp-img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.pset-tile__insp-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pset-tile__insp-label { font-size: .72rem; color: #9a9a9a; text-transform: uppercase; letter-spacing: .04em; }
.pset-tile__insp-name {
    font-size: 1.05rem; font-weight: 600; color: #111;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; /* max 3 linie, potem wielokropek */
}
.pset-tile__insp-retail { font-size: .88rem; color: #777; margin-top: .1rem; }

/* Przyciski dodawania — wyraźny action button z plusem */
.pset-tile__actions { margin-top: auto; display: flex; gap: .5rem; }
/* Przycisk w DWOCH liniach: [+ 30 ml] u gory, cena pod spodem — cena ma pelna szerokosc,
   dziala z dluzszymi walutami (zl/Kc/Ft/RON) bez przycinania i wychodzenia poza kafel. */
.pset-add {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
    padding: .5rem .3rem; border: 1.5px solid var(--pset-accent); background: #fff; color: var(--pset-accent);
    border-radius: 10px; cursor: pointer; font-size: .82rem; line-height: 1.15; font-weight: 600;
    transition: background .15s, color .15s;
}
.pset-add__line { display: inline-flex; align-items: center; gap: .3rem; }
.pset-add__plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%; background: var(--pset-accent); color: #fff;
    font-size: .9rem; font-weight: 700; flex-shrink: 0;
}
.pset-add__vol { font-weight: 700; white-space: nowrap; }
.pset-add__price { font-weight: 500; opacity: .85; white-space: nowrap; }
.pset-add__price .woocommerce-Price-currencySymbol { margin-left: 1px; }
.pset-add__check { display: none; font-weight: 700; }
.pset-add:hover:not(:disabled) { background: var(--pset-accent); color: #fff; }
.pset-add:hover:not(:disabled) .pset-add__plus { background: #fff; color: var(--pset-accent); }
.pset-add.is-selected { background: var(--pset-accent); color: #fff; }
.pset-add.is-selected .pset-add__plus { display: none; }
.pset-add.is-selected .pset-add__check { display: inline; }
.pset-add:disabled { opacity: .4; cursor: not-allowed; }
.pset-add--oos { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---- Responsywność ---- */
@media (max-width: 760px) {
    /* podsumowanie w pionie: licznik → skład zestawu → cena → przyciski */
    .pset-summary__inner { padding: .6rem .8rem; gap: .5rem; flex-direction: column; align-items: stretch; }
    .pset-summary__info { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: .4rem; min-width: 0; }
    .pset-summary__remaining { font-size: .82rem; white-space: normal; }
    /* sloty widoczne i zawijane — klient widzi, co jest w zestawie */
    .pset-summary__slots { display: flex; flex-wrap: wrap; overflow: visible; gap: .3rem; }
    .pset-slot { font-size: .72rem; padding: .26rem .5rem; }
    .pset-summary__buy { width: 100%; margin-left: 0; gap: .5rem; align-items: center; flex-wrap: wrap; }
    /* cena na osobnym, pełnym wierszu; przyciski poniżej */
    .pset-summary__price { flex: 1 1 100%; justify-content: flex-start; }
    .pset-summary__price-label { font-size: .78rem; }
    .pset-summary__price-value { font-size: 1.25rem; }
    .pset-back    { flex: 1 1 34%; }
    .pset-confirm { flex: 2 1 56%; }
    .pset-confirm, .pset-back {
        padding: .65rem .6rem; font-size: .82rem;
        white-space: normal; line-height: 1.2; text-align: center;
    }
}
@media (max-width: 600px) {
    .pset { padding-inline: 12px; }
    .pset-title { font-size: 1.5rem; margin: .25rem 0 1.5rem; }
    .pset-step__title { font-size: 1.15rem; }
    .pset-choices--cards { gap: .75rem; }
    .pset-choices--cards .pset-choice { width: 100%; max-width: 320px; padding: .9rem; }
    .pset-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .pset-search { grid-column: 1 / -1; }
    .pset-filter-clear { grid-column: 1 / -1; }
    .pset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .pset-tile { padding: .6rem; }
    .pset-tile__image img { height: 130px; }
    .pset-tile__title { font-size: 1rem; }
    .pset-tile__insp { padding: .4rem .45rem; gap: .45rem; }
    .pset-tile__insp-img { width: 40px; height: 40px; }
    .pset-tile__insp-label { font-size: .66rem; }
    .pset-tile__insp-name { font-size: .88rem; }
    .pset-tile__insp-retail { font-size: .78rem; }
    .pset-tile__actions { flex-direction: column; gap: .4rem; }
    .pset-add { font-size: .78rem; padding: .5rem .35rem; gap: .25rem; }
    .pset-add__plus { width: 16px; height: 16px; font-size: .85rem; }
}
@media (max-width: 380px) {
    .pset-grid { grid-template-columns: minmax(0, 1fr); }
    .pset-filters { grid-template-columns: minmax(0, 1fr); }
}

.pset-placeholder { padding: 2rem; text-align: center; border: 1px dashed #ccc; color: #888; }