/* PH Shop Papahune - minimalny styl, dopasowany do Papahune */
.phsp { font-family: inherit; }
.phsp-layout{ display:flex; gap:40px; align-items:flex-start; }
.phsp-sidebar{ width:320px; flex:0 0 320px; }
.phsp-sidebar__inner{ border:1px solid rgba(0,0,0,.08); padding:18px 18px 16px; border-radius:12px; background:#fff; }
.phsp-title{ margin:0 0 14px; font-size:22px; font-weight:600; color:#B7322B; }
.phsp-sidebar{
  margin-top: 30px;
}

.phsp-block{ margin:0 0 18px; }
.phsp-label{
  display:block;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 8px;
  opacity:1;
  color:#B7322B;

  /* Usuń szare obramówki/pigułki nakładane przez inne style */
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.phsp-row{ display:flex; gap:10px; }
/* =========================================================
   PAPAHUNE (2025-12-21): Formularze w SHOP (Search itp.)
   PAPAHUNE (2025-12-21): INPUT vs SELECT typografia 1:1 (kolor, waga, placeholder)
   - .phsp-input = pole tekstowe (np. Search)
   - strzałkę dla selecta rysujemy na wrapperze .phsp-select-wrap::after
   ========================================================= */
.phsp-input{
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  color:#4e4e4e;
  font-weight:400;
  outline:none;
  font: inherit;
}

/* PAPAHUNE (2025-12-21): Placeholder w polu Search ma miec IDENTYCZNY kolor/format jak tekst selecta SORTING */
.phsp-input::placeholder{
  color:#111 !important; /* PAPAHUNE: placeholder ma byc identyczny jak tekst */
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
  font-weight:500 !important;
  font: inherit;
}

/* PAPAHUNE: zgodność placeholder (Chrome/Edge/Safari/Firefox) */
.phsp-input::-webkit-input-placeholder{ color:#111 !important; -webkit-text-fill-color:#111 !important; opacity:1 !important; font-weight:500 !important; }
.phsp-input:-ms-input-placeholder{ color:#111 !important; opacity:1 !important; font-weight:500 !important; }
.phsp-input::-ms-input-placeholder{ color:#111 !important; opacity:1 !important; font-weight:500 !important; }
.phsp-input:focus, .phsp-select:focus{ border-color: #B7322B; box-shadow: 0 0 0 2px rgba(183,50,43,.15); }
.phsp-checklist{ display:flex; flex-direction:column; gap:8px; }
.phsp-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.25; cursor:pointer; }
.phsp-check input{ margin-top:3px; }
.phsp-actions{ display:flex; gap:10px; margin-top:14px; }
.phsp-btn{
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.phsp-btn--primary{
  border-color:#B7322B;
  background:#B7322B;
  color:#fff;
}
.phsp-btn--primary:hover{ filter:brightness(0.95); }
.phsp-btn--ghost:hover{ border-color:#B7322B; }
.phsp-main{ flex:1; min-width:0; }
.phsp-topbar{ display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-bottom:18px; }
/* PAPAHUNE (2025-12-21): Nike-style – topbar bez licznika produktów, sortowanie trzymamy po prawej */
.phsp-count{ font-size:14px; opacity:.75; }
.phsp-sort{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }

/* =========================================================
   PAPAHUNE (2025-12-21) — HEAD&CAP: wygląd selecta SORTING
   Cel: dropdown ma wyglądać jak nasze przyciski "pigułki" (Head&Cap),
   bez systemowego różowego obrysu i bez przypadkowego UI przeglądarki.
   Uwaga: to jest tylko WYGLĄD (bez zmian logiki sortowania).
   ========================================================= */

.phsp-sort .phsp-select-wrap{
  position:relative;
  display:inline-block;
}

/* PAPAHUNE (2025-12-21): grot/strzałka dla selecta (działa pewnie w Chrome/Windows) */
.phsp-sort .phsp-select-wrap::after{
  /* PAPAHUNE (2025-12-21): grot strzałki (nie SVG – 100% pewne w każdej przeglądarce) */
  content:"";
  position:absolute;
  z-index:2;
  top:50%;
  right:14px;
  width:0;
  height:0;
  transform:translateY(-30%);
  pointer-events:none;

  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #4e4e4e; /* jak tekst inputów */
}
.phsp-sort /* =========================================================
   PAPAHUNE (2025-12-21): SELECT (SORTING) – Head&Cap + typografia jak Search
   - wygląd: pigułka, premium
   - tekst: taki sam format jak w polu Search (.phsp-input)
   - strzałka: rysowana w .phsp-select-wrap::after
   ========================================================= */
.phsp-select{
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px; /* PAPAHUNE: jak .phsp-input (Search) */
  padding:10px 40px 10px 12px; /* prawa strona = miejsce na grot */
  background:#fff;
  outline:none;
  cursor:pointer;

  /* PAPAHUNE (2025-12-21): TYPOGRAFIA 1:1 jak w polu Search */
  font: inherit;
  color:#4e4e4e;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;

  /* reset przeglądarki */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  /* strzałka jest na wrapperze */
  background-image:none;
  position:relative;
  z-index:1;
}
.phsp-sort .phsp-select:hover{
  border-color:#B7322B;
}

.phsp-sort .phsp-select:focus{
  outline:none;
  border-color:#B7322B;
  box-shadow:0 0 0 2px rgba(183,50,43,.18);
}

/* Opcje w dropdown (ograniczone możliwości stylowania w przeglądarkach, ale ustawiamy bazę) */
.phsp-sort .phsp-select option{
  font: inherit;
  color: inherit;
  text-transform:none;
  letter-spacing:normal;
  font-weight:inherit;
}

.phsp-results{ min-height:140px; }
.phsp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:46px; }
@media (max-width: 980px){
  .phsp-layout{ flex-direction:column; }
  .phsp-sidebar{ width:100%; flex-basis:auto; }
  .phsp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .phsp-grid{ grid-template-columns:1fr; }
}
.phsp-card{ display:flex; flex-direction:column; gap:10px; }

/* =========================================================
   PAPAHUNE / SHOP — "Nike-style" karta produktu (WYGLĄD)
   Cel: duże zdjęcie w równej ramce + typografia jak na Nike.
   Uwaga: to jest TYLKO wygląd (bez swatchy / +N / klików po kolorach).
   Data: 2025-12-21
   ========================================================= */

/* Karta – sporo "powietrza" jak na Nike */
.phsp-card.phsp-card--nike{ gap:14px; }

/* Duża ramka na zdjęcie (kwadrat) */
.phsp-card__media{
  display:block;
  text-decoration:none;
  background:#f5f5f5;
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.phsp-card__media-inner{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
}


/* Ikona na kafelku (lewy górny róg ramki zdjęcia) */
.phsp-card__edit-icon{
  position:absolute;
  top:18px;
  left:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  pointer-events:none; /* nie blokuj kliknięcia w kafelek */
}
.phsp-card__edit-icon svg{
  width:22px;
  height:22px;
  display:block;
}
@media (max-width: 980px){
  .phsp-card__edit-icon{
    top:12px;
    left:12px;
    width:40px;
    height:40px;
  }
}


/* Obrazek – zawsze wypełnia ramkę, ale bez przycinania (contain) */
.phsp-card__media img,
.phsp-card__imgtag{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
}

/* Lekki hover jak na Nike (subtelny, bez agresywnych cieni) */
.phsp-card__media img{ transition: transform .22s ease; }
.phsp-card__media:hover img{ transform: scale(1.02); }



/* Swatche kolorów pod zdjęciem (warianty 1:1 z produktu) */
.phsp-card__swatches{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 2px 0;
  line-height:1;
}

/* Swatche są klikalne (wejście na stronę produktu z prewybranym kolorem)
   — proszone: "wejście na produkt po najechaniu kursorem" -> realizujemy jako hover + click. */
.phsp-swatch-link{
  display:inline-block;
  line-height:0;
  text-decoration:none;
  cursor:pointer;
}
.phsp-swatch-link:focus{ outline:none; }
.phsp-swatch-link:focus-visible .phsp-swatch,
.phsp-swatch-link:hover .phsp-swatch{
  border-color:rgba(183,50,43,.55);
  box-shadow:0 0 0 2px rgba(183,50,43,.14);
}
.phsp-swatch{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
  box-sizing:border-box;
  display:inline-block;
  vertical-align:middle;
  /* Swatch może być: HEX (background-color) albo tekstura (background-image). */
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.phsp-swatch[data-phsp-swatch-empty="1"]{
  background:transparent;
  border:1px solid rgba(0,0,0,.28);
}

/* Sekcja tekstowa pod zdjęciem */
.phsp-card__meta{ display:flex; flex-direction:column; gap:6px; }

/* Kicker "Customize" */
.phsp-card__kicker{
  color:#B7322B;
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.15;
}

/* Tytuł produktu */
.phsp-card__title{
  font-weight:600;
  font-size:18px;
  line-height:1.25;
  color:inherit;
  text-decoration:none;
}
.phsp-card__title:hover{ color:#B7322B; }

/* Podtytuł / kategoria (szary, jak Nike) */
.phsp-card__sub{
  font-size:16px;
  line-height:1.2;
  opacity:.65;
}

/* Cena */
.phsp-card__price{ font-size:20px; opacity:.9; }
.phsp-empty{ padding:20px; border:1px dashed rgba(0,0,0,.2); border-radius:12px; }
.phsp-pagination{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:22px; }
.phsp-page{ font-size:13px; opacity:.7; }

/* Tekst w checkboxach */
.phsp-check__text{ display:inline; }

/* =========================================================
   Categories (product_cat) — ciaśniej góra/dół
   Uwaga: checklist kategorii w shortcode NIE ma data-tax,
   więc celujemy tylko w .phsp-checklist bez [data-tax].
   ========================================================= */
.phsp-checklist:not([data-tax]){
  gap:4px !important;
}

.phsp-checklist:not([data-tax]) .phsp-check{
  margin:0 !important;
  padding:2px 0 !important;
  line-height:1.15 !important;
}

.phsp-checklist:not([data-tax]) .phsp-check input{
  margin-top:2px !important;
}

/* Jeżeli kategorie są renderowane jako <ul><li>... */
.phsp-checklist:not([data-tax]) ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

.phsp-checklist:not([data-tax]) li{
  margin:0 !important;
  padding:0 !important;
}

.phsp-checklist:not([data-tax]) li + li{
  margin-top:4px !important;
}

/* Zagnieżdżenia (podkategorie) */
.phsp-checklist:not([data-tax]) ul ul{
  margin-top:4px !important;
  padding-left:16px !important;
}

.phsp-checklist:not([data-tax]) ul ul li + li{
  margin-top:3px !important;
}

/* =========================================================
   Categories — remove inner "frame" and scrollbar (always show all items)
   Applies only to Categories list: .phsp-checklist WITHOUT data-tax attribute.
   ========================================================= */
.phsp .phsp-block .phsp-checklist:not([data-tax]){
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
.phsp .phsp-block .phsp-checklist:not([data-tax])::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}