/* =========================================================================
   Up-sells / KONFIGURATOR — akcesoria na stronie produktu.
   ZWYKŁE: płasko + „Pokaż wg zastosowania".
   KONFIGURATOR (flaga pa_konfigurator + kategoria): podgląd -> wszystkie /
   konfigurator (grupy z opisami). „Zwiń" na górze i dole widoku rozwiniętego.
   Przełączniki czysto CSS-owe (checkbox/radio + label). Bez JS.
   Zakres: TYLKO .upsells. OceanWP + WooCommerce + BeRocket.
   ========================================================================= */

/* --- Sekcja ------------------------------------------------------------- */
.upsells{ position:relative; margin:24px 0; }
.upsells > h2{ font-size:18px; margin:0 0 14px; text-align:left; }
.upsells--configurator:has(.upsells-subnote) > h2{ margin:0 0 6px; }
.upsells .upsells-subnote{ font-size:13px; color:#666; margin:0 0 16px; }

/* --- Siatka ------------------------------------------------------------- */
.upsells ul.products{ display:flex !important; flex-wrap:wrap !important; grid-template-columns:none !important; gap:16px; margin:0 !important; padding:0 !important; overflow:visible !important; }
.upsells ul.products::before, .upsells ul.products::after{ content:none !important; display:none !important; }

/* --- Karta: rozmiar + reset ramki -------------------------------------- */
.upsells ul.products li.product{ margin:0 !important; float:none !important; clear:none !important; box-sizing:border-box; display:flex !important; flex-direction:column; border:0 !important; border-radius:0 !important; background:transparent !important; padding:0 !important; }
@media (min-width:1024px){ .upsells ul.products li.product, .upsells ul.products li.upsells-cta{ flex:0 0 calc(25% - 12px) !important; max-width:calc(25% - 12px) !important; } }
@media (max-width:1023px){ .upsells ul.products li.product, .upsells ul.products li.upsells-cta{ flex:0 0 calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; } }

/* --- Zawartość kafelka -------------------------------------------------- */
.upsells ul.products li.product img{ width:100px !important; height:100px !important; object-fit:contain; margin:0 auto 8px !important; }
body.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page .upsells ul.products li.product .woocommerce-loop-product__title{ font-size:15px !important; line-height:1.4 !important; font-weight:600 !important; color:#333 !important; margin:0 0 8px !important; text-align:center; }
.upsells ul.products li.product .price{ margin:0 0 10px !important; font-size:15px; color:#000; text-align:center; display:block; }
.upsells ul.products li.product .price del{ font-size:13px; color:#e53935; text-decoration:line-through; font-weight:400; margin-right:4px; }
.upsells ul.products li.product .price ins{ font-weight:700; text-decoration:none; }
body.woocommerce .upsells ul.products li.product .button,
body.woocommerce-page .upsells ul.products li.product .button{ margin-top:auto !important; width:100% !important; padding:9px 10px !important; font-size:13px !important; line-height:1.2 !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.02em; border:0 !important; border-radius:4px !important; background:#005bc9 !important; color:#fff !important; cursor:pointer; }
body.woocommerce .upsells ul.products li.product .button:hover{ background:#003d82 !important; color:#fff !important; }
/* link „Zobacz koszyk" po dodaniu — tymczasowo odsłonięty (żeby schować z powrotem: odkomentuj poniższe)
.upsells ul.products li.product .added_to_cart{ display:none !important; } */
body.woocommerce .upsells ul.products li.product .br_compare_button,
body.woocommerce-page .upsells ul.products li.product .br_compare_button{ display:none !important; }

/* --- Nagłówki grup ------------------------------------------------------ */
.upsells-group{ margin:0 0 4px; }
.upsells-group__title{ font-size:17px; font-weight:700; color:#333; margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid #e5e5e5; }
.upsells-group:first-of-type .upsells-group__title{ margin-top:4px; }
.upsells-group__body{ display:block; }

/* --- ZWYKŁE: przełącznik płaski/grupy (checkbox) ----------------------- */
.upsells--toggle .upsells-cb{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.upsells--toggle .upsells-grouped{ display:none; }
.upsells--toggle .upsells-cb:checked ~ .upsells-flat{ display:none; }
.upsells--toggle .upsells-cb:checked ~ .upsells-grouped{ display:block; }
.upsells--toggle .upsells-toggle{ display:block; width:max-content; margin:16px auto 0; padding:9px 22px; font:700 13px/1.2 inherit; text-transform:uppercase; letter-spacing:.02em; color:#005bc9; background:#fff; border:1px solid #005bc9; border-radius:4px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.upsells--toggle .upsells-toggle::before{ content:"Pokaż wg zastosowania \25BE"; }
.upsells--toggle .upsells-cb:checked ~ .upsells-toggle::before{ content:"Zwiń \25B4"; }
.upsells--toggle .upsells-toggle:hover{ background:#005bc9; color:#fff; }

/* --- KONFIGURATOR: podgląd -> wszystkie / konfigurator (radio) ---------- */
.upsells--configurator .uv{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.upsells--configurator .upsells-flat,
.upsells--configurator .upsells-grouped{ display:none; }
.upsells--configurator .upsells-preview{ display:block; }
.upsells--configurator #uv-flat:checked ~ .upsells-preview,
.upsells--configurator #uv-config:checked ~ .upsells-preview{ display:none; }
.upsells--configurator #uv-flat:checked ~ .upsells-flat{ display:block; }
.upsells--configurator #uv-config:checked ~ .upsells-grouped{ display:block; }

/* Kafelek CTA */
.upsells ul.products li.upsells-cta{ display:flex !important; align-items:center; justify-content:center; border:1px dashed #cfd8e3; border-radius:6px; background:#fafbfc; box-sizing:border-box; padding:14px !important; }
.upsells-cta__inner{ display:flex; flex-direction:column; gap:8px; width:100%; text-align:center; }
.upsells-cta__hint{ font-size:12px; color:#666; }
.upsells-cta__btn{ display:block; padding:9px 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; border-radius:4px; cursor:pointer; }
.upsells-cta__btn--primary{ background:#005bc9; color:#fff; }
.upsells-cta__btn--primary:hover{ background:#003d82; }
.upsells-cta__btn--ghost{ background:#fff; color:#005bc9; border:1px solid #005bc9; }
.upsells-cta__btn--ghost:hover{ background:#005bc9; color:#fff; }

/* „Zwiń" + przycisk przełączający widok — wiersz akcji, góra i dół */
.upsells-collapse{ display:inline-block; width:max-content; margin:0; padding:8px 18px; font:600 13px/1.2 inherit; color:#005bc9; background:#fff; border:1px solid #cfd8e3; border-radius:20px; cursor:pointer; }
.upsells-collapse::before{ content:"\25B4  "; }
.upsells-collapse:hover{ background:#005bc9; color:#fff; }
.upsells-collapse--alt{ background:#005bc9; color:#fff; border-color:#005bc9; }
.upsells-collapse--alt::before{ content:none; }
.upsells-collapse--alt:hover{ background:#003d82; color:#fff; border-color:#003d82; }
.upsells-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0 0; }
.upsells-actions--top{ margin:0 0 16px; }

/* Opis grupy = kafel w siatce (ten sam rozmiar co kafle produktów) */
.upsells ul.products li.upsells-hint{ display:flex !important; align-items:flex-start; box-sizing:border-box; margin:0 !important; float:none !important; background:#f5f8fc; border:1px solid #e0e8f3; border-radius:8px; padding:14px 16px !important; }
@media (min-width:1024px){ .upsells ul.products li.upsells-hint{ flex:0 0 calc(25% - 12px); max-width:calc(25% - 12px); } }
@media (max-width:1023px){ .upsells ul.products li.upsells-hint{ flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px); } }
.upsells-hint__inner{ width:100%; font-size:14px; line-height:1.6; color:#3a3a3a; text-align:left; }
.upsells-hint__inner p{ margin:0 0 8px; }
.upsells ul.products li.upsells-hint .upsells-hint__inner ul{ margin:0 !important; padding:0 0 0 20px !important; list-style:disc outside !important; }
.upsells ul.products li.upsells-hint .upsells-hint__inner li{ display:list-item !important; list-style:disc outside !important; margin:0 0 7px !important; padding:0 !important; float:none !important; width:auto !important; }
.upsells ul.products li.upsells-hint .upsells-hint__inner li:last-child{ margin-bottom:0 !important; }
.upsells-hint__inner img{ display:block; max-width:100%; height:auto; margin:0 0 10px; border-radius:6px; }

/* Mobile: w podglądzie tylko 1 kafelek + CTA */
@media (max-width:1023px){
  .upsells--configurator .upsells-preview ul.products > li.product:nth-child(n+2){ display:none !important; }
}