/* HN Configurator v2 – nakładka na style v1 (inline w functions.php).
 * Style v1 są wypisywane w stopce, czyli PO tym pliku – każda reguła nadpisująca v1 musi mieć wyższą specyficzność (prefiks body.hn-cfg). */

/* #1 Cień tylko na otwartym panelu – zamknięte panele rzucały szary pas na prawą krawędź strony */
body.hn-cfg .hn-slide-panel{box-shadow:none;}
body.hn-cfg .hn-slide-panel.hn-open{box-shadow:-8px 0 30px rgba(0,0,0,.15);}

/* #1b Długie wartości (np. pozycja włącznika) rozpychały wiersze poza ekran telefonu i ucinały wszystkie wartości – teraz się zawijają */
body.hn-cfg .hn-attr-row .hn-attr-label{flex:0 0 auto;max-width:45%;}
body.hn-cfg .hn-attr-row .hn-attr-value{flex:1 1 0;min-width:0;white-space:normal;justify-content:flex-end;text-align:right;}
body.hn-cfg .hn-attr-row .hn-chevron{flex:0 0 auto;}

/* #2 Cena „od X zł” przed wyborem rozmiaru */
.hn-from-price{margin:0 0 14px;font-size:24px;font-weight:700;color:#af7856;}
.hn-from-price.hn-hidden{display:none;}

/* #3 Rozmiary: mniejsze kafle, 3 kolumny, nagłówki grup */
.hn-tiles.hn-tiles-sorted{grid-template-columns:repeat(3,1fr);gap:8px;}
.hn-tiles-sorted .hn-tile{padding:12px 6px;}
.hn-tiles-sorted .hn-tile-name-size{font-size:16px;font-weight:700;white-space:nowrap;}
.hn-tiles-sorted .hn-tile-price{margin-top:3px;font-size:12px;}
.hn-size-group{grid-column:1/-1;margin:10px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;color:#8a8072;}
.hn-size-group:first-child{margin-top:0;}

/* #5 „?” nie ma żadnej treści do pokazania – ukryte, żeby nie udawało przycisku */
body.hn-cfg .hn-tile-rich-help{display:none;}

/* #6 Cena w pasku nie łamie się na „1109,00 / zł” */
.hn-sticky-bar-price-text{white-space:nowrap;}
@media (max-width:782px){
  body.hn-cfg .hn-sticky-bar-price{font-size:18px;}
  body.hn-cfg .hn-sticky-add{padding:14px 18px;white-space:nowrap;}
}

/* #7 Pasek chowa się, gdy natywny przycisk „Dodaj do koszyka” jest na ekranie */
.hn-sticky-bar.hn-bar-off{transform:translateY(100%)!important;}

/* Dodatki (opcjonalne) */
.hn-addons{margin:18px 0 10px;}
.hn-addons-title{margin:0 0 8px;font-size:14px;font-weight:600;color:#2b2b2b;}
.hn-addons-title small{font-weight:400;color:#8a8a8a;}
.hn-addon{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:10px;border:1px solid #e3ddd6;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;}
.hn-addon:hover{border-color:#b08d57;}
.hn-addon.hn-selected{border-color:#b08d57;background:#faf6ef;}
.hn-addon input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:#af7856;}
.hn-addon-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.hn-addon-name{font-weight:600;color:#2b2b2b;}
.hn-addon-desc{font-size:13px;color:#8a8a8a;line-height:1.35;}
.hn-addon-price{flex:0 0 auto;font-size:15px;font-weight:700;color:#af7856;white-space:nowrap;}

/* ===== Paczka B ===== */
.hn-no-size .woocommerce-variation-price{display:none;}

/* Licznik postępu */
.hn-progress{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:13px;color:#6b6b6b;}
.hn-progress-text{flex:0 0 auto;font-weight:600;}
.hn-progress-track{flex:1 1 auto;height:4px;border-radius:2px;background:#eee7dd;overflow:hidden;}
.hn-progress-fill{display:block;height:100%;width:0;background:#af7856;transition:width .25s ease;}
.hn-progress-done .hn-progress-text{color:#2e7d4f;}
.hn-progress-done .hn-progress-fill{background:#2e7d4f;}

/* Wybrany krok: wartość ciemniejsza, żeby odróżnić od „Wybierz opcję” */
body.hn-cfg .hn-attr-row.hn-row-done .hn-attr-value{color:#2b2b2b;font-weight:600;}

/* CTA prowadzący do brakującego kroku */
body.hn-cfg .hn-sticky-add.hn-incomplete{background:#af7856;}

/* Otwarty panel blokuje przewijanie tła */
html.hn-lock,html.hn-lock body{overflow:hidden;}

/* Fokus z klawiatury */
.hn-attr-row:focus-visible,.hn-slide-panel .hn-tile:focus-visible{outline:2px solid #af7856;outline-offset:2px;}

/* Reset konfiguracji */
.hn-reset{flex:0 0 auto;padding:0;border:none;background:none;font-size:12px;color:#8a8072;text-decoration:underline;cursor:pointer;}
.hn-reset:hover{color:#af7856;}

/* ===== Strona produktu (poza konfiguratorem) ===== */

/* Miniatury galerii: Imagify opakowuje PNG-i w <picture>, a motyw nadaje wysokość tylko bezpośredniemu <img> –
 * grafiki (schemat ABCD, infografika) miały 50 px zamiast 80 px i „skakały” w pasku miniatur */
body.hn-cfg .slider-nav .thumb-slide picture{display:block;width:100%;height:100%;}
body.hn-cfg .slider-nav .thumb-slide picture img{width:100%;height:80px;object-fit:contain;background:#fff;}

/* Desktop: lewa kolumna = galeria + zakładki (opis, specyfikacja, do pobrania, FAQ), prawa = konfigurator.
 * Grid zamiast floatów motywu; overflow:visible, bo overflow:hidden (clearfix) na .product blokował position:sticky. */
@media (min-width:993px){
  body.hn-cfg div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4%;align-items:start;overflow:visible!important;}
  body.hn-cfg div.product > *{grid-column:1/-1;min-width:0;}
  body.hn-cfg div.product > .woocommerce-product-gallery{grid-column:1;grid-row:1;float:none;width:auto;}
  body.hn-cfg div.product > .hn-left-extra{grid-column:1;grid-row:2;margin-top:32px;}
  body.hn-cfg div.product > .summary{grid-column:2;grid-row:1 / span 2;float:none;width:auto;}
  body.hn-cfg.hn-summary-sticky div.product > .summary{position:sticky!important;top:var(--hn-sticky-top,20px)!important;}
  body.hn-tabs-left .custom-tabs{width:auto;max-width:100%;margin:0;padding-top:0;}
  /* Zakładki w jednej linii w węższej kolumnie: mniejsza czcionka i odstępy, bez zawijania (awaryjnie przewijanie w poziomie) */
  body.hn-tabs-left .custom-tabs-nav{display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none;}
  body.hn-tabs-left .custom-tabs-nav::-webkit-scrollbar{display:none;}
  body.hn-tabs-left .custom-tabs-nav .tab-link{flex:0 0 auto;white-space:nowrap;font-size:clamp(14px,1.15vw,17px);padding-left:clamp(8px,.9vw,16px);padding-right:clamp(8px,.9vw,16px);}
  body.hn-tabs-left .custom-tabs img,body.hn-tabs-left .custom-tabs table,body.hn-tabs-left .custom-tabs iframe{max-width:100%;height:auto;}
}

/* Zakładka „Opinie” ukryta do czasu wdrożenia narzędzia do zbierania opinii */
body.hn-cfg .custom-tabs-nav .tab-link[data-tab="tab-reviews"],body.hn-cfg #tab-reviews{display:none!important;}

/* ===== Galeria zdjęć (klasa hn-v2-on jest na <body> od pierwszego renderu) ===== */

/* Galeria widoczna od razu (motyw trzymał opacity:0 do startu skryptów); przed startem slidera tylko pierwsze zdjęcie */
body.hn-v2-on .woocommerce-product-gallery{opacity:1!important;}
body.hn-v2-on .gallery-product:not(.slick-initialized) .slide:not(:first-child){display:none;}

/* Stały kwadratowy kadr i całe zdjęcie bez przycinania: koniec ucinania luster (max-height:555px + cover)
 * i skakania wysokości przy przełączaniu między zdjęciami a infografiką */
body.hn-v2-on .gallery .gallery-product .slide a{display:block;aspect-ratio:1/1;background:#fff;}
body.hn-v2-on .gallery .gallery-product .slide picture{display:block;width:100%;height:100%;}
/* Zdjęcia aranżacyjne wypełniają cały kadr (jak największe); grafiki (PNG → <picture>: schemat ABCD, infografika) zostają w całości */
body.hn-v2-on .gallery .gallery-product .slide img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center;}
body.hn-v2-on .gallery .gallery-product .slide picture img{object-fit:contain!important;}

/* Miniatury jako zwykły, wyśrodkowany rząd (zamiast drugiego slicka) */
body.hn-v2-on .gallery .slider-nav.hn-thumbs{display:flex;justify-content:safe center;gap:10px;margin:16px 0 0;padding:2px;overflow-x:auto;scrollbar-width:none;}
body.hn-v2-on .gallery .slider-nav.hn-thumbs::-webkit-scrollbar{display:none;}
body.hn-v2-on .gallery .slider-nav:not(.hn-thumbs){visibility:hidden;height:100px;overflow:hidden;}
body.hn-v2-on .slider-nav.hn-thumbs .thumb-slide{flex:0 0 80px;width:80px;height:80px;margin:0;cursor:pointer;border:2px solid transparent;border-radius:6px;overflow:hidden;opacity:.65;transition:opacity .15s,border-color .15s;}
body.hn-v2-on .slider-nav.hn-thumbs .thumb-slide:hover{opacity:1;}
body.hn-v2-on .slider-nav.hn-thumbs .thumb-slide.hn-thumb-active{opacity:1;border-color:#af7856;}
body.hn-v2-on .slider-nav.hn-thumbs .thumb-slide img{display:block;width:100%;height:100%;object-fit:cover;margin:0;}
body.hn-v2-on .slider-nav.hn-thumbs .thumb-slide.hn-thumb-graphic img{object-fit:contain;background:#fff;}

/* Formularz motywu to flex z zawijaniem – elementy v2 muszą zajmować pełny wiersz, inaczej licznik stawał obok listy kroków */
body.hn-cfg form.variations_form > .hn-progress,
body.hn-cfg form.variations_form > .hn-rows,
body.hn-cfg form.variations_form > .hn-from-price,
body.hn-cfg form.variations_form > .hn-addons{flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;}

/* CCT: CTA prowadzi do kroku Włącznik zamiast martwej blokady v1 (pointer-events:none) */
body.hn-cfg .hn-sticky-add.hn-cct-locked{opacity:1;pointer-events:auto;cursor:pointer;}
.hn-tile-note{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:#a33327;}
body.hn-cfg .hn-option-group:has(.hn-tile-disabled){opacity:.55;cursor:not-allowed;}
body.hn-cfg .hn-option-group:has(.hn-tile-disabled):hover{border-color:#e3ddd6;}

/* Klikalny schemat A/B/C/D */
.hn-abcd-map{position:relative;width:fit-content;max-width:100%;margin:0 auto;}
.hn-orientation-info .hn-abcd-map img{display:block;width:auto;max-width:100%;max-height:min(46vh,480px);}
.hn-scroll-hint{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;text-align:center;font-size:13px;color:#af7856;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 55%);pointer-events:none;opacity:0;transition:opacity .2s;}
.hn-scroll-hint::after{content:"";display:block;width:10px;height:10px;margin:2px auto 0;border-right:2px solid #af7856;border-bottom:2px solid #af7856;transform:rotate(45deg);}
.hn-slide-panel.hn-more-below .hn-scroll-hint{opacity:1;pointer-events:auto;cursor:pointer;}
/* Panel orientacji: lista pod rysunkiem ma stałą wysokość (v1), więc na niskim ekranie przewija się cały panel – bez tego dolne opcje byłyby ucięte */
.hn-slide-panel.hn-abcd-grid{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.hn-scrollbar{position:absolute;right:3px;width:4px;border-radius:2px;background:rgba(175,120,86,.15);opacity:0;pointer-events:none;transition:opacity .2s;z-index:3;}
.hn-scrollbar-thumb{width:100%;border-radius:2px;background:#af7856;}
.hn-slide-panel.hn-scrollable .hn-scrollbar{opacity:1;}
.hn-abcd-zone{position:absolute;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:50%;height:50%;padding:0;border:2px solid transparent;border-radius:12px;background:transparent;cursor:pointer;transition:background .15s,border-color .15s;}
.hn-abcd-zone:hover,.hn-abcd-zone:focus-visible{background:rgba(175,120,86,.10);border-color:#af7856;outline:none;}
.hn-abcd-zone.hn-abcd-selected{border-color:#af7856;background:rgba(175,120,86,.14);}
.hn-abcd-zone-a{left:0;top:0;}
.hn-abcd-zone-b{left:50%;top:0;}
.hn-abcd-zone-c{left:0;top:50%;}
.hn-abcd-zone-d{left:50%;top:50%;}

/* Natywna cena wariantu WooCommerce (w .single_variation) dublowała stałą cenę wtyczki dopłat: przy każdej zmianie opcji
 * wyskakiwała na ~0,3 s z animacją slideDown i cena „skakała”. Zostaje tylko stały blok ceny. */
body.hn-cfg .single_variation .woocommerce-variation-price{display:none!important;}
body.hn-cfg .single_variation_wrap > .woocommerce-variation-price{min-height:1.4em;}

/* Grafika objaśniająca dodatek: odnośnik pod opisem, grafika w oknie (komputer) lub panelu od dołu (telefon) */
.hn-addon-thumb{flex:0 0 auto;width:76px;height:76px;padding:0;border:1px solid #e3ddd6;border-radius:10px;overflow:hidden;background:#f4f0eb;cursor:zoom-in;}
.hn-addon-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.hn-addon-more{align-self:flex-start;margin:4px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:#af7856;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.hn-addon-more:hover,.hn-addon-more:focus-visible{color:#8a5a3c;}
.hn-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,16,12,.55);opacity:0;transition:opacity .2s;}
.hn-lightbox[hidden]{display:none;}
.hn-lightbox.hn-open{opacity:1;}
.hn-lightbox-box{position:relative;display:flex;flex-direction:column;max-width:min(960px,100%);max-height:100%;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;}
.hn-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid #eee;}
.hn-lightbox-title{margin:0;font-size:16px;font-weight:600;color:#2b2b2b;}
.hn-lightbox-close{flex:0 0 auto;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#f4f0eb;font-size:22px;line-height:36px;color:#2b2b2b;cursor:pointer;}
.hn-lightbox-body{overflow:auto;overscroll-behavior:contain;}
.hn-lightbox-body img{display:block;width:100%;height:auto;max-height:calc(100vh - 140px);object-fit:contain;}
@media (max-width:782px){
  .hn-lightbox{align-items:flex-end;padding:0;}
  .hn-lightbox-box{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .25s ease;}
  .hn-lightbox.hn-open .hn-lightbox-box{transform:translateY(0);}
  .hn-lightbox-body img{max-height:none;}
}

/* Płatności na karcie produktu (2.3.0): linia pod ceną i kafel w stylu kafelków wysyłki */
.hn-pay-hint{margin:-8px 0 12px;font-size:14.5px;line-height:1.4;color:#5c5650;}
.hn-pay-hint b{color:#1a1a1a;font-weight:650;}
body.hn-cfg form.variations_form > .hn-pay-hint{flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;}
.summary .info-wymiana.hn-pay-tile{margin-top:12px;}
.hn-pay-tile .info-wymiana__tekst{margin:0;}
.hn-pay-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;}
.hn-pay-logos img{height:22px;width:auto;display:block;}

/* „Zobacz u siebie” (2.4.0): przyciski na karcie produktu; okno i reszta stylów w hn-podglad.css (ładowane po dotknięciu) */
.hn-podglad-cta{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 6px;padding:13px 14px 13px 16px;border:1px solid #af7856;border-radius:10px;background:#faf6ef;font:inherit;color:#2b2b2b;text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s;}
.hn-podglad-cta:hover,.hn-podglad-cta:focus-visible{background:#f4ece0;box-shadow:inset 0 0 0 1px #af7856;outline:none;}
.hn-podglad-ikona{flex:0 0 auto;color:#af7856;}
.hn-podglad-cta-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hn-podglad-cta-txt b{font-size:15.5px;font-weight:700;line-height:1.25;}
.hn-podglad-cta-txt small{font-size:13px;line-height:1.35;color:#6b6b6b;}
.hn-podglad-cta-strz{flex:0 0 auto;font-size:26px;line-height:1;color:#af7856;}
.hn-podglad-gal{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;padding:10px 18px;border:1px solid #e3ddd6;border-radius:24px;background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:#2b2b2b;cursor:pointer;transition:border-color .15s,background .15s;}
.hn-podglad-gal:hover,.hn-podglad-gal:focus-visible{border-color:#af7856;background:#faf6ef;outline:none;}
.hn-podglad-gal .hn-podglad-ikona{width:22px;height:22px;}
.hn-podglad-laduje{opacity:.6;pointer-events:none;}
.hn-podglad-blad{margin:6px 0 0;font-size:13px;line-height:1.4;color:#a33327;}

/* Stopień ochrony (IP) pod ceną – opcja hn_ip_tekst */
.hn-ip-hint{display:flex;align-items:center;gap:7px;margin:-6px 0 12px;font-size:14px;line-height:1.4;color:#2e7d4f;}
.hn-ip-hint svg{flex:0 0 auto;}
.hn-ip-hint span{color:#5c5650;}
/* 2.8.0: dodatek z wyborem („Kolor lustra”) – próbki kolorów jako pigułki; tymczasowa grafika do czasu grafiki dodatku (task #80) */
.hn-addon-wybor{cursor:default;}
.hn-kolory{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.hn-kolor{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border:1px solid var(--a-ink30,#e3ddd6);border-radius:999px;background:var(--a-canvas,#fff);color:var(--a-ink,#2b2b2b);font:inherit;font-size:14px;line-height:1.2;cursor:pointer;}
.hn-kolor:hover{border-color:var(--a-ink48,#b08d57);}
.hn-kolor[aria-checked="true"]{border-color:var(--a-ink,#2b2b2b);box-shadow:inset 0 0 0 1px var(--a-ink,#2b2b2b);}
.hn-kolor:focus-visible{outline:2px solid #af7856;outline-offset:2px;}
.hn-kolor-probka{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,var(--k,#c9ced3) 42%,var(--k,#c9ced3) 68%,rgba(0,0,0,.28) 100%);background-color:var(--k,#c9ced3);}
.hn-kolor-nazwa{font-weight:600;}
.hn-kolor-cena{font-size:13px;color:var(--a-ink48,#8a8a8a);white-space:nowrap;}
.hn-addon-termin{margin-top:4px;font-size:13px;font-weight:600;color:#8a5a3c;}
.hn-addon-uwaga{font-size:13px;color:#b4541a;}
.hn-studio-note{margin:14px 2px 0;padding-top:14px;border-top:1px solid var(--a-ink30,#e3ddd6);font-size:13px;line-height:1.45;color:var(--a-ink48,#686560);}
.hn-studio-note a{color:var(--a-ink,#111111);font-weight:600;text-decoration:underline;white-space:nowrap;}