/* =========================================================
   DODATKOWY CSS (Wapro B2C) — ETAP B
   0% ryzyka: tylko komentarze / spis treści / numeracja sekcji
   - bez zmian w regułach / kolejności / składni (w tym // i zagnieżdżone @media)
   ========================================================= */

/* =========================================================
   SPIS TREŚCI (CTRL+F)
   [01] Cookies / cookie policy
   [02] Wiadomości / badge / widgety (Ceneo / rating / bottom messages)
   [03] Logowanie / OAuth (FB/Google)
   [04] Koszyk / buttony / scroll to top
   [05] Panel faktury (invoice_decision)
   [06] Header / Mobile (UWAGA: zagnieżdżone @media)
   [07] Listy produktów / nagłówki / See also
   [08] Checkout / Login / przyciski (podstawowe)
   [09] Linki / list-group / drobne UI
   [10] Warianty (variantChooser)
   [11] Tabs / Footer / Company data
   [12] Buttony / Contact Ask
   [13] Tooltip / Hover description
   [14] Modale / Popup dialog
   [15] Płatność / Dostawa (radio / form — podstawowe)
   [16] Contact icon (mobile)
   [17] Menu ikony / artykuły / linki
   [18] Radio-special (checkout UI — podstawowe)
   [19] Alulens / Upload form / Drop area
   [20] Menu: icon-container / info / mobile top bar + drobne
   [21] Article table / figure.table
   [22] Warianty — checkmark
   [23] Benefits bar / CSS vars
   [24] Injections 1071 / 1072
   [25] PhotoSwipe / LightGallery / video wrapper + mobile slide
   [26] Accessories / menu-info (mobile)
   [27] FAQ + measure modal
   [28] Checkout: Dostawa + Płatność (duży blok)
   [29] Mobile: cart button + purchase layout + warianty + wspólne szerokości
   [30] Checkout: floating label (adres)
   [31] Lista cech produktu — spacing
   [32] Koszyk (mobile) — ilość + wartość
   [33] Checkout: payment/delivery panels gap
   ========================================================= */


/* =========================================================
   [01] COOKIES / COOKIE POLICY
   ========================================================= */
div#cookie-policy-content > div >div.preserveFormatting {
    font-size: 1.3em;
    padding: 10px;
    color: #333333;
}

button.btn.btn-sm.btn-success.reject-all-cookies-btn, button.btn.btn-sm.btn-default.cookie-settings-btn {
    color: #333;
    background-color: #f9f9f9;
    border-color: #ccc;
    border-radius: 4px;
    transition: border-color 300ms ease;
    font-size: 1.1em;
    margin: 5px;
}

button.btn.btn-sm.btn-success.reject-all-cookies-btn:hover {
    box-shadow: 0 0 7px -4px #000;
}

button.btn.btn-sm.btn-success.reject-all-cookies-btn:focus, button.btn.btn-sm.btn-default.cookie-settings-btn:focus {
    outline: none;
}

button.btn.btn-sm.btn-success.accept-all-cookies-btn {
    padding: 14px 16px;
    margin: 5px;
    color: #fff;
    background-color: #002376;
    border-color: #1b1a65;
    border-radius: 4px;
    font-size: 1.1em;
}
button.btn.btn-sm.btn-success.accept-all-cookies-btn:hover {
    color: #fff;
    background-color: #161550;
    border-color: #0e0d34;
    box-shadow: 0 0 7px -4px #000;
}

button.btn.btn-sm.btn-success.accept-all-cookies-btn:focus {
    outline: none;
}

button.btn.btn-success.reject-all-cookies-btn {
    color: #333;
    background-color: #f9f9f9;
    border-color: #ccc;
    transition: border-color 300ms ease;
}

button.btn.btn-success.reject-all-cookies-btn:hover {
    border-color: #ffeb00;
    color: #211f79;
    background-color: #fff;
    box-shadow: 0 0 7px -4px #000;
}

div.preserveFormatting {
    font-size: 1.1em;
}

div#cookie-policy {
    display: flex;
    align-items: center;
}

div#invoice_decision-form-input>div.abs-elem-input>div.checkbox>label {
    font-weight: bold;
    text-decoration: underline;
    display: flex;
    align-items: center;
}

div.alert.alert-warning {
    border: 0px;
    inset: 0px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.55);
    padding: 0px;
}

div#cookie-policy > div#cookie-policy-content {
    background-color: #ffeb00;
    border-radius: 8px;
    padding: 32px;
    max-width: 95%;
}

div#cookie-policy-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   [02] WIADOMOŚCI / BADGE / WIDGETY (Ceneo / rating / bottom messages)
   ========================================================= */
div.abs-main-text.abs-panel-special-success {
    font-size: 17px;
    font-weight: bold;
    color: #002376;
    padding: 20px 0;
}

.abs-company-data-intro > img {
  max-width: 100%;
  display: none;
}

div.abs-header-light-content-logo > a.navbar-brand {
   height: unset;
}

div.abs-cart-login-layout {
  align-items: flex-start;
}
button#abs-first-shopping-button {
  padding: 12px 12px;
  border-radius: 6px;
  width: 100%;
}

div#ceneo-widget {
  z-index: 1001 !important;
  bottom: unset !important;
  top: 153px;
  right: 28px !important;
}

@media (max-width: 768px) {
  div#ceneo-widget {
    z-index: 100000 !important;
    left: 5px;
    top: unset;
    bottom: 2px !important;
  }
}

iframe#ceneo-widget-small {
  margin-bottom: unset !important;
}

div.bottom-messages-container {
  z-index: 1000001;
}

div#cookie-policy {
  display: flex;
  align-items: center;
  bottom: unset;
  z-index: 10001;
  position: fixed;
  height: 100%;
}

div#___ratingbadge_0 {
  z-index: 1001 !important;
}


/* =========================================================
   [03] LOGOWANIE / OAUTH (FB/Google), koszyk login layout
   ========================================================= */
a.abs-oauth-button-facebook,
a.abs-oauth-button-google {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding-left: 46px !important;
  font-size: 0.8em !important;
  border-radius: 6px;
  background-position: 11px center !important;
}

@media (min-width: 992px) {
  a.abs-oauth-button-facebook,
  a.abs-oauth-button-google {
    flex: 0 0 calc(50% - 12px) !important;
  }
}

@media (max-width: 991px) {
  a.abs-oauth-button-facebook,
  a.abs-oauth-button-google {
    flex: 100% !important;
  }
}


.abs-form-split-layout {
  align-items: flex-start;
}

.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
  padding-top: 0;
}

#rememberMe_id-form-input.abs-form-input {
  margin-bottom: 0 !important;
}

/* =========================================================
   [04] KOSZYK / BUTTONY / SCROLL TO TOP
   ========================================================= */
div.cart-button {
 text-align: right;
}

div.cart-button > button.cart-btn {
  padding: 10px 20px;
}

div.page-top-button {
  bottom: 67px;
}

@media (min-width: 992px) {
  div.page-top-button {
    bottom: 85px;
    right: 37px;
  }
}

@media (max-width: 991px) {
  div.page-top-button {
    right: 16px;
  }
}
.abs-discount-suggestion,
.abs-discount-suggestion p {
  margin: 0 0 5px 0;
}

.cart-btn.module-loader.btn.btn-info.ready {
  background-color: #007fbf;
  border-color: #0078b5;
}

@media (min-width: 992px) {
  .cart-widget.touch-qnt-vertical > .purchase-buttons > .cart-button > .cart-btn.module-loader.btn {
    min-width: 252px;
  }
  .cart-widget > .purchase-buttons > .cart-button > .cart-btn.module-loader.btn {
    min-width: 140px;
  }
}

/* =========================================================
   [05] PANEL FAKTURY / checkbox i układ
   ========================================================= */
section.invoice-req-panel, section.invoice-req-panel > div.abs-panel-special-sub {
  background-color: #ffeb00 !important;
}

input#invoice_decision {
  margin-left: -33px;
  margin-top: -2px;
  height: 20px;
  width: 20px;
}

input#byelaw_accept_id,
input#ceneo_review_customer_approval_id {
  height: 20px;
  width: 20px;
  margin-top: -1px;
  margin-left: -30px;
}

label[for="byelaw_accept_id"],
label[for="ceneo_review_customer_approval_id"] {
  padding-left: 30px;
}

div#invoice_decision-form-input > div.abs-elem-input > div.checkbox > label {
    padding-left: 40px;
    height: 50px;
}

#invoice-decision-panel .abs-panel-special-sub {
  position: relative;
  top: 4px;
  padding: 0;
}

/* =========================================================
   [06] HEADER / MOBILE (UWAGA: zagnieżdżone @media — zostawione 1:1)
   ========================================================= */
@media (max-width: 991px) {
div.abs-header-content-search.abs-search-input-holder {
    margin-top: 86px;
  order: 4;
}
div.abs-header-mobile-menu {
   height: 92px !important;
}
@media (max-width: 991px) {
.abs-header-mobile-menu {
    margin-top: 30px;
}
}

div.abs-search-options-links > a {
  height: 32px!important;
}
div.abs-header-menu-main.abs-navbar-root, div.abs-header-menu-top.abs-navbar-root {
  margin-top: 0px;
  order: 5;
}
body:not([data-onlycontrollerview]) .abs-header-menu-top nav>ul>li {
  border-bottom: unset;
}
div.abs-header-content.hide-on-modal-above {
  margin-bottom: -15px;
}

div.abs-header-content.hide-on-modal-above.floating-top.top-light > div.container {
  padding-left: 0;
}
div.abs-cart-login-layout {
  padding: unset;
  flex-direction: column-reverse;
}
section.abs-col-new-user-purchase {
  padding-bottom: 30px !important;
  width: 100%;
}
}


/* =========================================================
   [07] LISTY PRODUKTÓW / NAGŁÓWKI / SEE ALSO
   ========================================================= */
h3.abs-product-name > a, div.abs-product-name > a {
  font-size: 14px;
}

div.see-also-products > div.panel-heading > h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #333;
}

div.see-also-products > div.panel-heading > h3:not(:first-child) {
    padding-top: 10px;
}

ul.sub-menu {
  background-color: #fbfbfb;
}
div.abs-col-desc > div.product-header > div.abs-product-name > a {
  font-size: 20px;
}
div.abs-col-details-description > div.product-header > h3.abs-product-name > a {
  font-size: 18px;
}

@media (max-width: 767px) {
div.abs-header-light-content-row {
 flex-wrap: unset;
}
div.abs-header-light-content-row > div.abs-header-light-extras {
  flex-basis: unset;
}
}


/* =========================================================
   [08] CHECKOUT / LOGIN / PRZYCISKI
   ========================================================= */
button#proceedButton {
  padding: 12px 12px;
}
div.abs-login-register-btns {
  justify-content: flex-end;
}

div.abs-login-register-btns > div {
  width: 100%;
}

button#login_id {
  padding: 12px 10px;
  width: 100%;
  border-radius: 6px;
}

section.abs-col-login-purchase {
  width: 100%;
}


/* =========================================================
   [09] LINKI / LIST GROUP / drobne UI
   ========================================================= */
a.list-group-item:hover {
  color: #00a1f2 !important;
}
.abs-product-page-header .abs-header-right > .abs-product-header-purchase > .cart-widget {
  gap: 10px;
}
.abs-offer-list .abs-col-details-availability-actions {
  align-items: baseline;
}
.product-header .product-subname {
  font-size: 16px;
  margin-top: 3px;
  margin-bottom: 7px;
}
.abs-offer-list .abs-layout-img-and-details .abs-col-img {
  margin-right: 15px;
  flex-basis: 150px;
  flex-grow: 0;
  height: 150px;
}
.abs-offer-list .abs-layout-img-and-details .abs-col-img .abs-img-wrapper {
  max-height: 150px;
}
a:active,
a:hover,
a:visited,
a:focus  {
  outline: none;
}

.btn:active:focus,
.btn:focus,
.btn:focus-visible {
  outline: none;
  outline-offset: unset;
}


/* =========================================================
   [10] WARIANTY (variantChooser)
   ========================================================= */
a.btn.variantChooser {
    padding: 10px 20px;
    min-width: 137px !important;
}

a.btn.variantChooser:not(.active):hover {
    color: #000;
    background-color: transparent;
    border-color: #ffeb00;
}

a.btn.variantChooser.active {
    color: #000;
    background-color: transparent;
    border: 3px solid #00a1f2;
    padding: 9px 19px;
}
a.btn.variantChooser.active:hover {
    color: #000;
    background-color: transparent;
    border: 3px solid #00a1f2;
}
@media (max-width: 991px) {
.abs-header-content-row .abs-header-content-buttons {
    margin-left: -2px;
}
}

div.abs-col-info > a {
  display: none;
}


/* =========================================================
   [11] TABS / FOOTER / COMPANY DATA
   ========================================================= */
.abs-panel-tab>.panel-heading {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px 
}

footer .abs-footer-bottom-text a {
    color: #211f79;
}

footer .abs-footer-bottom-text a:hover {
    color: #00a1f2;
}

.abs-company-data-container h2 {
   display: none;
}

.abs-company-data-col>.abs-panel>.panel-heading {
    margin-bottom: 0;
}
.abs-company-data-col>.abs-panel {
    margin-bottom: 30px;
}

.abs-company-data-address>.abs-company-data-city {
   display: none;
}

.abs-company-data-col>.abs-panel>.panel-body>div>a {
     text-decoration: underline;
}


/* =========================================================
   [12] BUTTONY / CONTACT ASK
   ========================================================= */
button.btn.btn-default.btn-sm.abs-continue-shopping-btn {
   color: #59c2f7;
   background-color: transparent;
   border: 0;
}

button[data-form-id="#contactAskId"] {
    width: 100%;
}


/* =========================================================
   [13] TOOLTIP / HOVER DESCRIPTION
   ========================================================= */
.variant-choose>.tooltip-top {
    border: 1px dashed #777;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}

.variant-choose>.tooltip-top>.abs-description-on-hover {
   border: unset;
}

.abs-description-on-hover {
  position: relative;
  border-bottom: 1px dashed currentColor;
  padding-right: 1.4em; /* miejsce na ikonkę */
  cursor: help;
}

/* zamiast "?" dodajemy ikonę w kółeczku */
.abs-description-on-hover::after {
  content: "?";                  /* lub "?" jeśli wolisz */
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 0.8em;
  font-weight: bold;
  color: #002376;
  background: #f6f6f6;           /* kolor kółka (np. niebieski) */
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
  opacity: 0.85;
  border: #9c9a9a solid 1px;
}

.howtoorder > li {
   padding-bottom: 15px;
}

section#categoriesPanel > div.panel-body {
   padding-top: 0;
}

.abs-panel-footer>.panel-body {
    font-size: 14px;
}
.tooltip-inner {
    line-height: 18px;
    padding: 10px;
}


/* =========================================================
   [14] MODALE / POPUP DIALOG
   ========================================================= */
.modal-dialog.popup-dialog {
    width: 100% !important;
}

.modal-dialog.popup-dialog > .modal-content {
    width: 77%;
}

.modal-dialog > .modal-content > .modal-body {
    padding: 35px 20px 25px !important;
    border-radius: 10px;
}

h5.modal-title {
   font-size: 18px;
}

.modal-body > p {
   font-size: 16px;
}

.modal.fade.in {
    text-align: -webkit-center;
    z-index: 1000003;
}

.fade.in {
    z-index: 100002;
}

/* =========================================================
   [15] PŁATNOŚĆ / DOSTAWA (radio / form)
   ========================================================= */
.payment-radio.abs-form-field, .delivery-radio.abs-form-field {
   width: 16px;
   height: 16px;
   margin-left: -30px !important;
}

.btn.abs-filter-loader.abs-filter-toggle {
    border-color: #ccc;
}

.abs-panel-search-attribute .badge {
    background-color: #ddd;
}
.input-group-btn-search {
//   height: 40px;
}

input.searchInputClass, .input-group-btn.input-group-btn-search>button {
//    height: 40px;
}


/* =========================================================
   [16] CONTACT ICON (mobile)
   ========================================================= */
@media (max-width: 991px) {
.abs-btn-contact>a {
    display: block !important;
    margin-top: 26px;
    padding: 0 !important;
}
.contact-icon {
    width: 30px !important;
    height: 30px !important;
}
}


/* =========================================================
   [17] MENU IKONY / ARTYKUŁY / LINKI
   ========================================================= */
#articlePage-1061 > a{
    display: flex;
    align-items: center;
}
/* Stylizowanie ikony w menu */
.menu-icon {
    width: 28px; /* Szerokość ikonki */
    height: 28px; /* Wysokość ikonki */
    display: block; /* Upewnienie się, że obrazek jest traktowany jako blokowy element */
    transition: opacity 0.3s ease; /* Dodanie przejścia dla zmiany */
}

/* Styl dla hover - zmiana ikonki po najechaniu */
#articlePage-1061 a:hover .menu-icon {
    content: url('https://a.assecobs.com/accounts/doaluminium24/stock/make_photo_yelow.png?vh=8c3d8b'); /* Ścieżka do ikonki hover */
}

#alulens a:hover .alu-lens {
    content: url('https://a.assecobs.com/accounts/doaluminium24/stock/alulens.png?vh=db1566');
}

@media (max-width: 991px) {
.menu-icon {
    width: 40px;
    height: 40px;
}
#articlePage-1061 > a{
    padding: 7px 14px 20px;
}
#externalPage-1 > a {
    display: flex;
    align-items: center;
}
#externalPage-1 > a > img {
    margin-left: 10px;
}
}
#alulens {
    display: flex;
    align-items: center;
}
#alulens > span {
    padding-right: 10px;
}

.abs-icon-insetproductdetail1.abs-icon-tab:before {
    content: "\e046";
}


/* =========================================================
   [18] RADIO-SPECIAL (checkout UI)
   ========================================================= */
.abs-form-input.required.radio-special {
    height: 54px;
}

.abs-form-input.required.radio-special:hover {
   background-color: #f9f9f9;
}

.abs-form-input.required.radio-special.selected {
   background-color: #f9f9f9;
}

.abs-payment-delivery-panels h3 {
   padding-left: 10px;
}

.abs-form-input.required.radio-special .abs-elem-input {
   padding-left: 10px;
}

@media (max-width: 991px) {
.abs-col-payment .panel-heading h3 {
    padding-top: 15px;
}
}


/* =========================================================
   [19] ALULENS / UPLOAD FORM / DROP AREA
   ========================================================= */
   #over-drop-area {
      width: 100%;
      display: flex;
      align-items: center;
    }

    #drop-area {
      border: 3px dashed #002376;
      text-align: center;
      margin-bottom: 20px;
      border-radius: 8px;
      width: -webkit-fill-available;
    }

    #drop-area.highlight {
      border-color: #00a1f2;
    }

    #drop-area>label {
      padding: 70px 30px;
    }

    #drop-area>label>p {
      font-weight: 100;
      margin: 8px;
    }

    #imagePreview {
      display: flex;
      flex-wrap: wrap;
    }

#inputs_name_email {
  display: flex;
  width: 100%;
  padding: 15px 0 10px;
}

    input.form-control.alulens-name {
      height: 50px;
      margin-right: 3px
    }
    input.form-control.alulens-email {
      height: 50px;
      margin-left: 3px
    }


.form-label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #003366; /* ciemny granat */
}

.user-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-type-buttons label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.user-type-buttons input[type="radio"] {
  display: none;
}

.user-type-buttons span {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid #003366; /* granat */
  border-radius: 5px;
  background-color: #f9f9f9; /* bardzo jasny niebieski */
  color: #003366; /* granatowy tekst */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.user-type-buttons label:hover span {
  background-color: #e0ecff; /* jaśniejszy niebieski przy hoverze */
}

.user-type-buttons input[type="radio"]:checked + span {
  background-color: #ffcc00; /* żółty */
  border-color: #ffcc00;
  color: #003366;
  font-weight: 600;
}




    #imagePreview img {
      width: 100px;
      /* Rozmiar miniaturki */
      margin: 10px;
      height: auto;
      position: relative;
    }

    #uploadForm>label {
      padding: 15px 5px;
      display: flex;
      align-items: center;
    }

    #uploadForm>label>input {
      scale: 1.5;
      margin: 0px 10px 0 0;
    }

    #uploadForm>button {
      margin: 17px 0 0;
      padding: 10px 20px;
      width: 300px;
    }

    @media (max-width: 768px) {
      #uploadForm>.g-recaptcha {
        display: flex;
        justify-content: center;
      }
      #uploadForm>button {
        width: 100%;
      }
    }

    .remove-btn {
      position: absolute;
      top: 0;
      right: 0;
      background: red;
      color: white;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      box-sizing: border-box;
      display: inline-flex;
      /* Dodanie inline-flex */
      align-items: center;
      /* Wyrównanie w pionie */
      justify-content: center;
      /* Wyrównanie w poziomie */
    }

    #message {
      margin-top: 20px;
      font-weight: bold;
    }

    #uploadForm {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #uploadForm.hidden {
      display: none;
    }

    div#infoParagraph {
      padding-bottom: 20px;
    }
    
    #infoParagraph > h4 {
      text-decoration: underline;
    }
    
    #spinner {
      display: none;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @media (max-width: 768px) {
      #captureButton {
        display: block;
        background: none;
        border: none;
        margin-bottom: 20px;
      }
    }

    @media (min-width: 769px) {
      #captureButton {
        display: none;
      }
    }


/* =========================================================
   [20] MENU: ICON-CONTAINER / INFO / MOBILE TOP BAR + drobne
   ========================================================= */
//* Ogólne style dla linków w menu */
.icon-container a {
    display: inline-flex; /* Wyświetlanie w jednej linii (tekst + ikona) */
    align-items: center; /* Wyrównanie pionowe */
    gap: 8px; /* Odstęp między tekstem a ikoną */
    color: white; /* Kolor tekstu (biały jak inne linki) */
    text-decoration: none; /* Usuń podkreślenie */
    font-size: inherit; /* Zachowaj rozmiar czcionki */
    transition: color 0.3s ease; /* Efekt zmiany koloru */
}

/* Zmiana koloru tekstu na hover */
.icon-container a:hover {
    color: yellow; /* Kolor tekstu na hover */
}

/* Styl dla ikony */
.menu-icon {
    width: 20px; /* Szerokość ikony */
    height: 20px; /* Wysokość ikony */
    transition: transform 0.3s ease; /* Efekt animacji przy hover */
    flex-shrink: 0; /* Zapobiega skalowaniu ikony */
    margin-left: 10px;
}

/* Opcjonalny efekt na hover dla ikony */
.icon-container:hover .menu-icon {
    transform: scale(1.1); /* Powiększenie ikony na hover */
}

.menu-info {
    transform: translateX(-25%);
    font-size: 14px;
    color: #fff;
    background-color: transparent;
    font-weight: bold;
    white-space: nowrap;
    line-height: 2.2;
}

.menu-info > span > a > img {
    float: right;
    margin-top: 5px;
}

.abs-header-menu-top {
  position: relative; /* Aby pozycjonowanie absolutne działało wewnątrz */
}

.navbar-right {
  position: relative; /* Zapewnia poprawne działanie elementów w nawigacji */
}

.mobile-top-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #001955; /* Kolor tła */
  color: #fff; /* Kolor tekstu */
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
  font-weight: bold;
  position: fixed; /* Pasek na stałe u góry ekranu */
  top: 0;
  left: 0;
  z-index: 9999; /* Zapewnia widoczność ponad innymi elementami */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.mobile-active {
  margin-top: 32px; /* Dopasowanie wysokości paska w wersji mobilnej */
}

@media (min-width: 991px) {
  .mobile-top-bar {
    display: none; /* Ukryj pasek na większych ekranach */
  }

  body.mobile-active {
    margin-top: 0; /* Usuń przesunięcie dla desktopu */
  }
}

span.terms_confirm {
  font-size: 0.9em;
}

.abs-lightslider-gallery-wrapper .slick-pager li {
  border: 1px solid #dddddd;
}

/* Styl przycisku domyślny (aktywny) */
button[type="submit"] {
  transition: 0.3s ease;
  cursor: pointer;
  opacity: 1;
}

/* Styl przycisku nieaktywnego */
button[type="submit"].disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.abs-form-input.required.radio-special {
    height: unset;
}

.thumb-nav.thumb-prev, .thumb-nav.thumb-next {
   display: none !important;
}

.carousel-fx-wrapper .abs-img-wrapper {
//    height: 260px !important;
}

//.slideshow.slick-initialized.slick-slider.slick-dotted.sl-ready {
//    height: 555px !important;
//}
span.abs-avail-txt, span.abs-avail-ico {
   color: #67ae3e;
}
.abs-short-desc {
   margin-top: 10px;
}
.abs-catalog-index {
   font-size: 1em;
}

.carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-deck .abs-layout-product-gallery, .carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-deck .abs-offer-gallery .abs-layout-product-gallery-thumbnails, .abs-offer-gallery .carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-deck .abs-layout-product-gallery-thumbnails, .carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-box .abs-layout-product-gallery, .carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-box .abs-offer-gallery .abs-layout-product-gallery-thumbnails, .abs-offer-gallery .carousel-fx-wrapper .slick-track .slick-slide .slide-item section.sl-box .abs-layout-product-gallery-thumbnails {
   width: 95%;
}

/* =========================================================
   [21] ARTICLE TABLE / FIGURE.TABLE
   ========================================================= */
figure.table {
  margin-bottom: 30px !important;
  overflow-x: auto; /* dla wąskich ekranów */
}

figure.table table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 6px; /* zaokrąglone rogi */
  overflow: hidden; /* żeby zaokrąglenia działały na całość */
}

figure.table th,
figure.table td {
  padding: 10px 14px;
  border: 1px solid #ddd;
  text-align: left;
}

figure.table thead th {
  background-color: #002376; /* nowy granat */
  font-weight: 600;
  color: #00a1f2; /* nowy niebieski */
}

figure.table tbody tr:nth-child(even) {
  background-color: #f4f9fc; /* bardzo jasny niebieski */
}

figure.table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* biały */
}

figure.table tbody tr:hover {
  background-color: #e6f3fa; /* pastelowy niebieski hover */
  transition: background-color 0.2s ease;
}

figure.table tbody td:first-child {
  font-weight: 500;
  color: #002376; /* granat dla kolumny z cechą */
}

figure.table tbody td:last-child {
  color: #333;
}

@media (max-width: 991px) {
.carousel-fx-wrapper:not(.abs-slider-column) .abs-img-wrapper {
  height: 100% !important;
}
}

.item.sl-box.abs-offer-gallery .abs-availability {
   display: none;
}

.abs-price-details-delivery-cost {
   padding-top: 10px;
}


/* =========================================================
   [22] WARIANTY — CHECKMARK
   ========================================================= */
.variantChooser.active {
  position: relative;
}

.variantChooser.active::after {
  content: "✔";
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: white;
  color: #002376;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 0 0 2px #00a1f2;
}

.abs-slctd > a {
  font-weight: 600;
}

.see-also-products h3 {
  color: #211f79 !important;
}

li.abs-root-link a .abs-all-cat-name {
    font-weight: unset;
}

.variant-section>div>div:first-child {
    font-weight: bold;
    color: #211f79;
    margin: 8px auto 5px;
}

@media (max-width: 768px){
  .variant-section>div>div:first-child {
    margin: 15px auto 10px;
  }
}

/* =========================================================
   [23] BENEFITS BAR / CSS VARS
   ========================================================= */
:root{
  --alr-icon: #777;
  --alr-navy:#0b2a4a;
  --alr-blue:#3aa0e0;
  --alr-yellow:#00a1f2;
  --alr-ink:#1c1c1c;
  --alr-muted:#6b7280;
}

/* pasek korzyści */
.benefits-bar{
  padding-bottom: 15px;
}

.benefits-list{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: 30px 30px;
  list-style:none; margin:0; padding:0;
  padding-left: unset !important;
}

.benefit-item{
  display:flex; align-items:center; gap:18px;
  position:relative;
  padding-right:30px;
}
.benefit-item:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:28px;
  background: rgba(11,42,74,.18);
}

.benefits-list a:hover, .benefits-list a:focus {
  text-decoration: none;
}

/* ikony */
.icon-mask{
  position: relative;
  top: -3px;
  width:40px; height:40px; display:inline-block;
  background: var(--alr-icon);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: transform .18s ease, background-color .18s ease;
}
.benefit-item:hover .icon-mask{
  background: var(--alr-yellow);
  transform: translateY(-1px) scale(1.04);
}

/* mapowanie ikon */
.icon-mask[data-ico="truck"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/truck.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/truck.svg");
}
.icon-mask[data-ico="headset"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/headset.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/headset.svg");
}
.icon-mask[data-ico="box-seam"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/box-seam.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/box-seam.svg");
}
.icon-mask[data-ico="shield-lock"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/shield-lock.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/shield-lock.svg");
}
.icon-mask[data-ico="receipt"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/receipt.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/receipt.svg");
}

.icon-mask[data-ico="envelope"]{
  -webkit-mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/envelope.svg");
  mask-image:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/envelope.svg");
}

/* typografia – Inter */
.benefit-text{
  display:inline-block;
  color: var(--alr-muted);
  font-size:14px; line-height:1.15;
  font-family: inherit;
}
.benefit-text strong{
  display:block; color: var(--alr-navy);
  font-size:18px; line-height:0.15;
  margin-bottom:0;
}

@media (max-width: 720px){
  .benefits-list{ gap:30px 20px; padding-left: unset !important;}
  .benefit-item{ padding-right:0; }
  .benefit-item:not(:last-child)::after{ display:none; }
}


/* =========================================================
   [24] INJECTIONS 1071 / 1072
   ========================================================= */
section.panel[data-panel-id="injection-1071"], section.panel[data-panel-id="injection-1072"]{
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0px !important;
}

section.panel[data-panel-id="injection-1071"] .panel-body,
section.panel[data-panel-id="injection-1072"] .panel-body {
  padding: 0 !important;
}


/* =========================================================
   [25] PHOTOSWIPE / LIGHTGALLERY / VIDEO WRAPPER
   ========================================================= */
/* awaryjnie dopilnuj najwyższego z-index nakładki */
  .pswp { z-index: 10000000000 !important; }

@media (max-width: 900px){
  .lg-backdrop, .lg-outer { display: none !important; }
  body.lg-on { overflow: auto !important; }
}

.pswp__video-wrapper { position: relative; width:100%; height:100%; pointer-events:none; }
.pswp__video-wrapper iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                              width:100%; height:100%; max-width:800px; max-height:600px;
                              pointer-events:auto; background:#000; }

.lg-container.lg-show.lg-show-in {
    z-index: 10000000000 !important;
}

/* MOBILE: pełna szerokość dużego slajdu + elegancki „+” w kółku (prawy górny róg) */
@media (max-width: 900px){

  /* obraz w dużym slajdzie – także miniatura YouTube */
  .abs-lightslider-gallery-wrapper #lightSlider li a.product-photo img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0;
  }
}

.abs-offer-gallery .abs-layout-product-list-wrapper {
  width: 90%;
}

.carousel-fx-wrapper .slick-dots {
  background-color: #002376;
//  height: 2px;
}

.carousel-fx-wrapper .slick-dots > li.slick-active {
  background-color: #00a1f2;
//  height: 4px;
//  position: relative;
//  top: -1px;
}

 
.abs-product-page-header .abs-product-header-right-column {
  order: 1000;
  padding: 10px;
  max-width: unset;
}

#accessories section.panel {
  margin-bottom: unset;
  border: unset;
  box-shadow: unset;
}

#accessories section.panel .panel-heading {
  padding: 0;
}


@media (max-width: 991px) {
#accessories section.panel {
  display: none;
}
}

@media (max-width: 991px) {
  .nav.navbar-nav.navbar-right > li.menu-info {
    display: none !important;
  }
}


/* =========================================================
   [27] FAQ + MEASURE MODAL
   ========================================================= */
.faq-container {
  max-width: 600px;
  margin: 2rem auto;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.faq-container details {
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
}

.faq-container summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

.faq-container summary::marker {
  display: none;
}

.faq-container summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 20px;
  transition: transform 0.3s ease;
  color: #000;
}

.faq-container details[open] summary::after {
  content: '-';
}

.faq-container .faq-answer {
  margin-top: 0.5rem;
  color: #444;
}

@media (max-width:640px){ .pomiar-cta{ width:100%; justify-content:center } }

.pomiar-cta{ width:100%; justify-content:center }

/* ——— MODAL ——— */
.measure-modal{ position:fixed; inset:0; z-index:1000000 !important; display:none; }
.measure-modal.is-open{ display:block; }
.measure-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.measure-dialog{ position:absolute; inset:12px; background:#0b1220; border:1px solid #243447;
  border-radius:14px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.6) }
@media (max-width:640px){ .measure-dialog{ inset:0; border-radius:0 } }

.measure-header{ display:flex; align-items:center; gap:10px; padding:10px;
  border-bottom:1px solid #1a2434; background:linear-gradient(180deg,#0e152b,#0b1022) }
.measure-title{ font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:#e5e7eb; }
.measure-spacer{ flex:1 }
.measure-btn{ appearance:none; border:1px solid #243244; background:#0b1220; color:#e5e7eb;
  border-radius:10px; padding:8px 10px; cursor:pointer }
.measure-btn:hover{ background:#11182b }
.measure-close{ border-color:#3a1f22; color:#ffdede; background:#200d12 }

.measure-body{ position:relative; flex:1; min-height:0 }
.measure-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Wybór spośród wielu PDF 1:1 */
.measure-picker{ padding:14px; display:grid; gap:10px }
.measure-opt{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #243244; background:#0b1220; color:#e5e7eb; border-radius:10px; padding:10px }
.measure-opt b{ font-weight:600 }

.dispatch-counter b, .timeLeft {color: #00a1f2 !important}
.stock-name {display: none}

.abs-login-register-btns > div > a {
  padding: 12px 10px;
  width: 100%;
  border-radius: 6px;
}


/* =========================================================
   [28] CHECKOUT: Dostawa + Płatność (duży blok)
   ========================================================= */
/* =========================================================
   CHECKOUT: Dostawa + Płatność
   - ramka/hover na .radio-label (wewnętrzny "przycisk")
   - mniejsze odstępy
   - radio: nieaktywne szare, aktywne kółko z fajką
   ========================================================= */

:root{
  --aluren-accent: #211f79;
  --border: #ebebeb;
  --hover: #cacaca;
  --bg: #fff;

  --radius: 12px;
  --padY: 14px;
  --padX: 16px;

  --ring: rgba(33,31,121,.12);
}

/* 1) Wrapper opcji: bez “kafelka” i bez dużych paddingów
      (kafelek robimy na .radio-label) */
#delivery-method .abs-form-input.radio-special,
#payment-method  .abs-form-input.radio-special{
  padding: 0 !important;
  margin: 0 0 20px 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Zabijamy styl motywu typu "label:hover to przycisk" */
#delivery-method .abs-form-input.radio-special label,
#payment-method  .abs-form-input.radio-special label{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* 3) TO JEST “PRZYCISK” – robimy z niego kafelek */
#delivery-method .abs-form-input.radio-special .radio-label,
#payment-method  .abs-form-input.radio-special .radio-label{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: var(--padY) var(--padX);
  padding-left: calc(var(--padX) + 34px); /* miejsce na radio */

  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);

  transition: border-color .15s ease, box-shadow .15s ease;
}

/* 4) Hover: ramka na tym "przycisku" */
#delivery-method .abs-form-input.radio-special .radio-label:hover,
#payment-method  .abs-form-input.radio-special .radio-label:hover{
  border-color: var(--hover);
}

/* 5) Zaznaczone: ramka + ring (na tym samym elemencie) */
#delivery-method .abs-form-input.radio-special.abs-slctd .radio-label,
#payment-method  .abs-form-input.radio-special.abs-slctd .radio-label{
  border-color: var(--aluren-accent);
 // box-shadow: 0 0 0 3px var(--ring);
}

/* 6) Ukryj natywne radio (robimy własne po lewej) */
#delivery-method .abs-form-input.radio-special input[type="radio"],
#payment-method  .abs-form-input.radio-special input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   RADIO po lewej:
   - NIEZAZNACZONE: szare kółko
   - ZAZNACZONE: kółko w kolorze + fajka w środku
   ========================================================= */

/* Niezaznaczone kółko */
#delivery-method .abs-form-input.radio-special .radio-label::before,
#payment-method  .abs-form-input.radio-special .radio-label::before{
  content: "";
  position: absolute;
  left: var(--padX);
  top: 50%;
  transform: translateY(-50%);

  width: 18px;
  height: 18px;
  border-radius: 50%;

  border: 2px solid #ebebeb; /* szare */
  background: #fff;
}

/* Zaznaczone kółko (wypełnienie) */
#delivery-method .abs-form-input.radio-special.abs-slctd .radio-label::before,
#payment-method  .abs-form-input.radio-special.abs-slctd .radio-label::before{
  border-color: var(--aluren-accent);
  background: var(--aluren-accent);
}

/* Fajka w środku (rysowana borderami, nie tekstem) */
#delivery-method .abs-form-input.radio-special.abs-slctd .radio-label::after,
#payment-method  .abs-form-input.radio-special.abs-slctd .radio-label::after{
  content: "";
  position: absolute;
  left: calc(var(--padX) + 6px);
  top: 50%;
  transform: translateY(-55%) rotate(45deg);

  width: 6px;
  height: 10px;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* 7) Badge Najtaniej (jak wcześniej, tylko bardziej “chip”) */
#delivery-method .abs-info-label,
#payment-method  .abs-info-label{
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
//  border: 1px solid var(--aluren-accent);
//  color: var(--aluren-accent);
//  background: rgba(33,31,121,.06);
  white-space: nowrap;
}

/* 8) Cena niech się nie łamie */
#delivery-method strong,
#payment-method  strong{
  white-space: nowrap;
}

/* 9) Jeśli masz jeszcze “osobną fajkę po prawej” z poprzednich stylów – wyłącz ją */
#delivery-method .abs-form-input.radio-special.abs-slctd::before,
#payment-method  .abs-form-input.radio-special.abs-slctd::before{
  content: none !important;
}

/* 10) Focus z klawiatury (ring) – na "przycisku" */
#delivery-method .abs-form-input.radio-special:has(input[type="radio"]:focus-visible) .radio-label,
#payment-method  .abs-form-input.radio-special:has(input[type="radio"]:focus-visible) .radio-label{
  border-color: var(--aluren-accent);
  box-shadow: 0 0 0 3px rgba(33,31,121,.18);
}

/* Zabija cień z motywu, który robi "dodatkowy niewidoczny przycisk" */
#delivery-method .abs-form-input.radio-special > .abs-elem-input > .radio:hover,
#payment-method  .abs-form-input.radio-special > .abs-elem-input > .radio:hover{
  box-shadow: none !important;
}

/* Minimalna wysokość kafelka (dostawa + płatność) */
#delivery-method .abs-form-input.radio-special .radio-label,
#payment-method  .abs-form-input.radio-special .radio-label{
  min-height: 72px;            /* <- TU regulujesz */
  display: flex;
  align-items: center;         /* pionowe wyśrodkowanie treści */
}

/* ============================================
   POPUP "dodano do koszyka" – przycisk
   ============================================ */

#message-div-out-ajax {
    z-index: 100003;
}

#message-div-out-ajax a.btn{
  font-size: 15px !important;
  padding: 10px 18px !important;
  border-radius: 6px;
  min-height: 44px;              /* standard accessibility */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Zabijamy efekt btn-xs */
#message-div-out-ajax a.btn-xs{
  font-size: 15px !important;
  padding: 10px 18px !important;
}

/* =========================================================
   CHECKOUT LOGIN PANEL – poprawa zrozumiałości
   ========================================================= */

/* 1) Drobny reset odstępów w sekcji */
#cart-login-panel .abs-cart-login-layout{
  gap: 24px; /* jeśli layout jest flex/grid i wspiera gap */
}

/* 2) Prawa kolumna (gość) – wyróżnij jako "polecane" */
#cart-login-panel .abs-col-new-user-purchase{
  border: 2px solid #211f79;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 20px !important;
}

/* 3) Mikrocopy pod nagłówkiem po prawej (bez zmiany HTML) */
#cart-login-panel .abs-col-new-user-purchase .panel-heading h2::after{
  content: " (polecane)";
  font-weight: 700;
  color: #211f79;
}

/* opis co się stanie po kliknięciu */
#cart-login-panel .abs-col-new-user-purchase .panel-body::before{
  content: "Nie musisz zakładać konta. Po kliknięciu przejdziesz do danych dostawy i faktury.";
  display: block;
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,.75);
}

/* 4) Przyciski – zrób z "Dalej" duże CTA */
#abs-first-shopping-button{
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
}

/* Doprecyzuj etykietę przycisku bez ruszania HTML */
#abs-first-shopping-button::after{
  content: " →";
}

/* 5) Lewa kolumna (logowanie) – mniej dominująca wizualnie */
#cart-login-panel .abs-col-login-purchase{
  opacity: .92;
}

#cart-login-panel .abs-col-login-purchase .panel-heading h2{
  font-size: 20px;
}

/* Dodatkowa podpowiedź pod nagłówkiem logowania */
#cart-login-panel .abs-col-login-purchase .panel-heading h2::after{
  content: " (opcjonalnie)";
  font-weight: 600;
  color: rgba(0,0,0,.45);
}

/* 6) Social loginy – wyrównaj, powiększ klikalność (opcjonalnie) */
#cart-login-panel .abs-oauth-providers a.btn{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

/* =========================================================
   MOBILE: ustaw gościa jako pierwszego (bez ruszania HTML)
   ========================================================= */
@media (max-width: 768px){
  /* jeśli layout jest flex: przestaw kolejność */
  #cart-login-panel .abs-col-new-user-purchase{ order: 1; }
  #cart-login-panel .abs-col-login-purchase{ order: 2; }

  #cart-login-panel .abs-col-new-user-purchase{
    margin-bottom: 16px;
  }
}

/* =========================================================
   ODWRÓCENIE KOLEJNOŚCI: najpierw "bez konta", potem logowanie
   ========================================================= */

/* Upewniamy się, że kontener jest flexem (jeśli już jest, nic nie popsuje) */
#cart-login-panel .abs-cart-login-layout{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Desktop: bez konta po prawej, ale jako pierwsze w kolejności czytania
   (czyli na górze, gdy układ się łamie / przy węższych szerokościach) */
#cart-login-panel .abs-col-new-user-purchase{ order: 1; }
#cart-login-panel .abs-col-login-purchase{ order: 2; }

/* Mobile: układ w kolumnie i też "bez konta" pierwsze */
@media (max-width: 768px){
  #cart-login-panel .abs-cart-login-layout{
    flex-direction: column;
  }
  #cart-login-panel .abs-col-new-user-purchase{ order: 1; }
  #cart-login-panel .abs-col-login-purchase{ order: 2; }
}

/* Logowanie jako opcja dodatkowa: mniej dominujące */
#cart-login-panel .abs-col-login-purchase{
  opacity: .95;
}

#cart-login-panel .abs-col-login-purchase .panel-heading h2{
  font-size: 20px;
}

/* =========================================================
   CHECKOUT: przełączanie login / formularz + poprawne CTA
   Sterowanie klasą na <html>: .checkout-show-login
   ========================================================= */

/* -------------------------
   TRYB LOGIN (pokazujemy login)
   ------------------------- */
html.checkout-show-login #cart-login-panel{
  display: block !important;
}

/* chowamy formularze gościa (ale NIE ruszamy proceedButton) */
html.checkout-show-login #abs-checkout-address-panel,
html.checkout-show-login #invoice-decision-panel,
html.checkout-show-login #cart-additional-data,
html.checkout-show-login #cart-agreements{
  display: none !important;
}

/* w trybie login ukryj sekcję "Nie chcę zakładać konta" (żeby nie mieszała) */
html.checkout-show-login #cart-login-panel .abs-col-new-user-purchase{
  display: none !important;
}


/* -------------------------
   TRYB GOŚĆ (domyślny)
   ------------------------- */
html:not(.checkout-show-login) #cart-login-panel{
  display: none !important;
}

html:not(.checkout-show-login) #abs-checkout-address-panel,
html:not(.checkout-show-login) #invoice-decision-panel,
html:not(.checkout-show-login) #cart-additional-data,
html:not(.checkout-show-login) #cart-agreements{
  display: block !important;
}

#invoice-decision-panel, #invoice_decision-form-input {
  margin-bottom: 0 !important;
}

/* =========================================================
   CTA: proceedButton (Dalej / Potwierdzam zakup)
   ========================================================= */

/* wrapper ma być normalnie widoczny */
.cart-btn-proceed{
  display: block !important;
}

/* wspólne cechy przycisku */
#proceedButton{
  display: block !important;
  width: 100%;
  text-align: center;
  white-space: normal; /* pozwól łamać linie w finalnym CTA */
}

/* --- "Dalej" (bez .final-register): jedna linia --- */
#proceedButton:not(.final-register) > span{
  display: inline !important;
}

#proceedButton:not(.final-register) > span:empty{
  display: none !important;
}

/* --- "Potwierdzam zakup" (.final-register): dwie linie --- */
#proceedButton.final-register{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

#proceedButton.final-register > span{
  display: block !important;
  line-height: 1.15;
}

/* druga linia mniejsza (opcjonalnie, wygląda czytelniej) */
#proceedButton.final-register > span:last-child{
  font-size: 12px;
  opacity: .95;
}

/* =========================================================
   CHECKOUT – kafelki wyboru adresu: Prywatny / Firmowy
   ========================================================= */

/* kontener z radiami */
.delivery-panel .abs-special-radio-select-layout{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
@media (max-width: 768px){
  .delivery-panel .abs-special-radio-select-layout{
    gap:0;
  }
}

.abs-special-radio-select-layout > div {
  padding-bottom: 0 !important;
}

/* każde radio jako kafelek */
.delivery-panel .abs-special-radio-select-layout > div{
  flex:1 1 320px; /* 2 kolumny na desktop, 1 na mobile */
}

/* ukryj “kółko” radia (zostawiamy klik w cały kafelek) */
.delivery-panel .abs-form-input.radio-special input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* label robi za kafelek */
.delivery-panel .abs-form-input.radio-special label{
  display:flex;
  justify-content: left !important;
  align-items: center;
  flex-direction: unset !important;
  gap:12px;

  padding:18px 18px;
  border:2px solid #ebebeb;
  border-radius:10px;
  background:#fff;

  cursor:pointer;
  transition: all .15s ease;
  min-height:84px;
}

/* tekst w kafelku */
.delivery-panel .abs-form-input.radio-special label > span{
  font-weight:600;
}

/* hover */
.delivery-panel .abs-form-input.radio-special label:hover{
  border-color:#cacaca;
}

/* aktywny (zaznaczony) */
.delivery-panel .abs-form-input.radio-special input[type="radio"]:checked + span{
  /* nic – bo w Twoim HTML input jest przed span, więc robimy aktywny przez :has */
}

/* aktywny kafelek przez :has – działa w nowoczesnych przeglądarkach */
.delivery-panel .abs-form-input.radio-special label:has(input[type="radio"]:checked){
  border-color:#211f79;
  box-shadow:0 0 0 2px rgba(33,31,121,.08);
}

/* mała “kropka”/znacznik po lewej (opcjonalnie) */
.delivery-panel .abs-form-input.radio-special label:before{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid #e5e5e5;
  flex:0 0 auto;
}
.delivery-panel .abs-form-input.radio-special label:has(input[type="radio"]:checked):before{
  border-color:#211f79;
  box-shadow: inset 0 0 0 5px #211f79;
}

.abs-form-input.radio-special>.abs-elem-input>.radio {
  padding-left: unset !important;
  border: unset;
}


/* =========================================================
   [29] MOBILE: CART BUTTON (ikona + tekst) + purchase layout + warianty + szerokości
   ========================================================= */
@media (max-width: 768px){
  button.cart-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    padding: 10px 12px;
    min-height: 44px;           /* wygodny tap target */
  }

  button.cart-btn .abs-icon-cart{
    position: static !important; /* jeżeli jest absolute w bazie */
    flex: 0 0 auto;
  }

  button.cart-btn .abs-btn-msg{
    position: static !important; /* jeżeli jest absolute w bazie */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.15;
  }

  button.cart-btn .abs-btn-msg > span{
    display: block;
    margin-top: 2px;
    line-height: 1.1;
  }
}

@media (max-width: 768px){

  /* 1) Wyśrodkowanie całego bloku: ilość + przycisk */
  .abs-layout-purchase .cart-widget{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .abs-layout-purchase .purchase-spinner,
  .abs-layout-purchase .purchase-buttons{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .abs-layout-purchase .purchase-buttons .cart-button{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* 2) Wnętrze przycisku: ikona + tekst na 2 linie, bez "dobijania" do dołu */
  .abs-layout-purchase .purchase-buttons .cart-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: auto;
    padding: 10px 14px;
    min-height: 44px;          /* wygodny tap target */
    margin: 0 auto;            /* dodatkowe zabezpieczenie centrowania */
  }

  .abs-layout-purchase .purchase-buttons .cart-btn .abs-btn-msg{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.15;
  }

  .abs-layout-purchase .purchase-buttons .cart-btn .abs-btn-msg > span{
    display: block;
    margin-top: 2px;
    line-height: 1.1;
  }
}

@media (max-width: 768px){

  /* Centrowanie całych grup przycisków wariantów */
  .abs-product-header-variants .abs-btn-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;     /* jeśli kiedyś będzie więcej opcji */
    gap: 10px;           /* ładny odstęp między przyciskami */
  }

  /* Żeby bootstrapowe .btn nie psuły układu marginesami */
  .abs-product-header-variants .abs-btn-group .btn{
    margin: 0;
    float: none;
  }

  /* (opcjonalnie) lekko ujednolicone szerokości na mobile */
  .abs-product-header-variants .abs-btn-group .btn{
    min-width: 120px;    /* możesz zmienić albo usunąć */
    text-align: center;
  }
}

@media (max-width: 768px){

  /* Wspólna szerokość modułu: zmień 260px jeśli chcesz wężej/szerzej */
  .cart-widget .touch-qnt,
  .cart-widget .cart-button,
  .cart-widget .cart-btn{
    width: 100% !important;
    box-sizing: border-box !important;
    align-content: center;
  }

  /* Centrowanie całości */
  .cart-widget{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .cart-widget .purchase-spinner,
  .cart-widget .purchase-buttons{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Spinner na 100% szerokości swojego boxa */
  .cart-widget .bootstrap-touchspin{
    width: 100% !important;
  }

  /* Przycisk dokładnie tak szeroki jak spinner */
  .cart-widget .cart-btn{
  //  display: block !important;
    margin: 0 !important;
  }

  .abs-product-header-labels {
    margin-left: 10px;
  }
}


/* =========================================================
   [30] CHECKOUT — floating label (adres)
   ========================================================= */
/* =========================================
   ABS Checkout – Floating label (spójna wersja)
   Cel: label + placeholder + value pionowo w środku
   ========================================= */

/* bazowy wrapper */
#abs-checkout-address-panel .abs-form-input{
  position: relative;
}

/* niech label nie zabiera miejsca w layoucie */
#abs-checkout-address-panel .abs-form-input .abs-elem-label{
  height: 0;
  margin: 0;
  padding: 0;
}

/* KLUCZ: pozycjonujemy wszystko względem obszaru inputa */
#abs-checkout-address-panel .abs-form-input .abs-elem-input{
  position: relative;
}

/* Ujednolicenie wysokości i pionowego centrowania tekstu */
#abs-checkout-address-panel .abs-form-input .abs-elem-input input.form-control,
#abs-checkout-address-panel .abs-form-input .abs-elem-input select.form-control{
  height: 44px;
  line-height: 44px;          /* value + placeholder w środku */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* textarea zostawiamy wielolinijkowe (nie centrowane line-height 44px) */
#abs-checkout-address-panel .abs-form-input .abs-elem-input textarea.form-control{
  min-height: 44px;
  line-height: 1.4;
  padding: 10px 12px !important;
}

/* LABEL: spoczynek = środek inputa (jak placeholder) */
#abs-checkout-address-panel .abs-form-input .abs-elem-label label.control-label{
  position: absolute;
  left: 12px;
  top: 22px;                  /* 44px / 2 = 22px -> środek inputa */
  transform: translateY(-50%); /* optycznie idealny środek niezależnie od fontu */
  z-index: 2;

  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: rgba(0,0,0,.55);

  padding: 0 6px;
  background: transparent;
  pointer-events: none;

  transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease, background .15s ease;
}

/* LABEL: focus / has-value = na górę */
#abs-checkout-address-panel .abs-form-input.is-focused .abs-elem-label label.control-label,
#abs-checkout-address-panel .abs-form-input.has-value .abs-elem-label label.control-label{
  top: -6px;
  transform: translateY(0);
  font-size: 12px;
  background: #fff;
  color: rgba(0,0,0,.60);
  border-radius: 25px;
}

/* Placeholder: ukryty zawsze, widoczny tylko na focus */
#abs-checkout-address-panel .abs-form-input input::placeholder,
#abs-checkout-address-panel .abs-form-input textarea::placeholder{
  opacity: 0 !important;
}
#abs-checkout-address-panel .abs-form-input.is-focused input::placeholder,
#abs-checkout-address-panel .abs-form-input.is-focused textarea::placeholder{
  opacity: .6 !important;
}

/* (opcjonalnie) delikatny focus ring */
#abs-checkout-address-panel .abs-form-input.is-focused input.form-control,
#abs-checkout-address-panel .abs-form-input.is-focused select.form-control,
#abs-checkout-address-panel .abs-form-input.is-focused textarea.form-control{
  box-shadow: 0 0 0 3px rgba(0,123,255,.12);
}

@media (max-width: 768px){

  /* Większy odstęp między polami formularza */
  #abs-checkout-address-panel .abs-form-input{
    margin-bottom: 10px;
  }

  /* Jeszcze więcej miejsca gdy label jest uniesiony */
  #abs-checkout-address-panel .abs-form-input.has-value,
  #abs-checkout-address-panel .abs-form-input.is-focused{
    margin-bottom: 24px;
  }

  #invoice_decision-form-input {
  margin-bottom: unset !important;
  }

  /* Delikatne odsunięcie labela od poprzedniego pola */
  #abs-checkout-address-panel .abs-form-input .abs-elem-label label.control-label{
    padding-top: 2px;
  }

  /* (opcjonalnie) minimalnie wyższe inputy na mobile */
  #abs-checkout-address-panel .abs-form-input
  .abs-elem-input input.form-control,
  #abs-checkout-address-panel .abs-form-input
  .abs-elem-input select.form-control{
    height: 48px;
    line-height: 48px;
  }

  /* wtedy korygujemy środek labela */
  #abs-checkout-address-panel .abs-form-input .abs-elem-label label.control-label{
    top: 24px; /* 48 / 2 */
  }
}

.abs-form-hint,
.abs-form-hint-invalid {
  margin: 5px;
}


/* =========================================================
   [31] LISTA CECH PRODUKTU — spacing
   ========================================================= */
/* Lista cech produktu – więcej powietrza */
.abs-short-details.list-group > .list-group-item,
.abs-attributes-list.list-group > .list-group-item {
  padding-top: 2px;
  padding-bottom: 3px;
}

/* Label cechy */
.abs-attributes-list .abs-list-label {
  display: inline-block;
  font-weight: 500;
}

/* Wartość cechy */
.abs-attributes-list .abs-list-value {
  margin-top: 2px;
}

.abs-short-details .abs-icon-bullet,
.abs-attributes-list .abs-icon-bullet {
  opacity: 0.5;
}


/* =========================================================
   [32] KOSZYK (mobile) — ilość + wartość
   ========================================================= */
/* KOSZYK (mobile) – wycentruj spinner + jednostkę, żeby nie uciekało w lewo */
@media (max-width: 768px) {

  /* kolumna ilości w koszyku */
  td.abs-col-quantity {
    text-align: center;
    vertical-align: middle;
  }

  /* cały widget w kolumnie ilości */
  td.abs-col-quantity .cart-widget.abs-layout-vertical,
  td.abs-col-quantity .cart-widget {
    display: inline-flex;          /* zamiast bloku od lewej */
    flex-direction: column;
    align-items: center;           /* centruje zawartość (spinner + unit) */
    justify-content: center;
    margin: 0 auto;                /* zabezpieczenie */
  }

  /* wrapper spinnera */
  td.abs-col-quantity .purchase-spinner,
  td.abs-col-quantity .touch-qnt {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* sama ramka z - 1 + */
  td.abs-col-quantity .touch-qnt-input .input-group.bootstrap-touchspin {
    margin: 0 auto;
  }

  /* jednostka "szt." – pełna szerokość i centrowanie */
  td.abs-col-quantity .touch-qnt-unit {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  td.abs-col-quantity .abs-spinner-unit {
    text-align: center;
    width: 100%;
  }
}

/* KOSZYK – kolumna WARTOŚĆ: wyrównaj do prawej (mobile) */
@media (max-width: 768px){

  /* 1) sama komórka (gdy jeszcze jest tabelą) */
  .abs-cart-table td.abs-col-value.total{
    text-align: right !important;
  }

  /* 2) wymuś, żeby wrapper ceny zachowywał się jak blok i brał pełną szerokość */
  .abs-cart-table td.abs-col-value.total > .abs-item-price-box{
    width: 100% !important;
    display: block !important;
    text-align: right !important;
  }

  /* 3) wewnętrzny box (czasem Wapro nadaje mu inline/flex) */
  .abs-cart-table td.abs-col-value.total .product-price-box-256_256,
  .abs-cart-table td.abs-col-value.total .abs-item-price-box{
    width: 100% !important;
    text-align: right !important;
  }

  /* 4) same linie tekstu */
  .abs-cart-table td.abs-col-value.total .abs-item-price-amount,
  .abs-cart-table td.abs-col-value.total .abs-item-price-breakdown{
    display: block !important;
    width: 100% !important;
    text-align: right !important;
  }
  .abs-cart-table td[class*="col-"].abs-col-price .abs-item-price-box {
    opacity: 1;
  }
}


/* =========================================================
   [33] CHECKOUT: payment/delivery panels gap
   ========================================================= */
#cart-box-content .abs-payment-delivery-panels {
  gap: 14px;
}
#cart-box-content .abs-checkout-panel {
  margin-bottom: 15px !important;
}
.abs-form-input {
  margin-bottom: 15px !important;
}
#cart-box-content .abs-panel-special-sub {
  padding: 0;
}
textarea#order_comment_id {
  border-radius: 4px;
}


.product-header .abs-product-name {
  line-height: 1.1;
}

#google-merchantwidget-iframe-wrapper {
  z-index: 100001 !important;
}

#aluren-cta-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
  font-size: 12px;
  line-height: 1.35;
  color: #666;
}

#aluren-cta-note:before {
  content: "✓ ";
  font-weight: 700;
}

/* DESKTOP: Podsumowanie nie wjeżdża pod górny pasek */
@media (min-width: 992px) {
  #order-summary-sticky-content .summary-panel.affix {
    top: 103px !important;  /* zmień na 80–110 jeśli trzeba */
  }
}

/* =========================================================
   [34] OBRAZKI + DYMKI WARIANTÓW (CSS) – FINAL / 1:1
   - ikonki na przyciskach wariantów (.variantChooser.is-icon)
   - spójny wygląd tooltipów:
     (1) Bootstrap tooltipy od "?" => .tooltip.aluren-tooltip
     (2) Custom tooltipy od przycisków => #aluren-variant-tt / .aluren-variant-tt
   - brak szczeliny między strzałką a dymkiem
   - mobile: odsunięcie od krawędzi (24px)
   ========================================================= */


/* =========================================================
   IKONKI NA PRZYCISKACH WARIANTÓW
   ========================================================= */

.variantChooser{
  position: relative; /* pod ✔ i pseudo-elementy */
}

/* gdy ma być ikonka (JS dodaje .is-icon) */
.variantChooser.is-icon{
  width: 140px !important;
  height: 80px !important;
  min-width: 140px !important;
  padding: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important; /* żeby ✔ nie był ucinany */
  background-clip: padding-box;
}

/* sama grafika (pseudo-element) */
.variantChooser.is-icon::before{
  content: "";
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  background: var(--variant-icon) center / contain no-repeat !important;

  /* „wtopienie” białego tła ikon (głównie zdjęcia na bieli) */
  mix-blend-mode: multiply;
}

/* FIX: ucięta fajeczka ✔ na przycisku wariantu */
a.btn.variantChooser,
.variantChooser{
  overflow: visible !important;
  position: relative !important;
}


/* =========================================================
   WSPÓLNY “DESIGN SYSTEM” DLA DYMKA
   ========================================================= */

:root{
  --aluren-tt-bg: #111827;
  --aluren-tt-fg: #e5e7eb;
  --aluren-tt-border: rgba(255,255,255,.12);
  --aluren-tt-radius: 5px;
  --aluren-tt-shadow: 0 18px 40px rgba(0,0,0,.45);
  --aluren-tt-font: 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;

  /* rozmiar “rombika” strzałki (zmień np. na 9px jeśli chcesz mniejszą) */
  --aluren-tt-arrow: 11px;

  /* odstęp od krawędzi na mobile */
  --aluren-tt-pad: 12px;
}


/* =========================================================
   HTML W ŚRODKU DYMKA (wspólne .vpop)
   ========================================================= */

.vpop{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.vpop-img,
.vpop img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 3px auto 8px auto;
  border-radius: 4px;
  background: #fff;
}

.vpop-title{
  font-weight: 700;
  margin: 0 0 4px 0;
  font-size: 14px;
}

.vpop-text{
  font-size: 12px;
  line-height: 1.35;
  opacity: .95;
  margin: 0;
}


/* =========================================================
   CUSTOM TOOLTIP dla .variantChooser (NIE Bootstrap)
   ========================================================= */

.aluren-variant-tt{
  position: fixed;
  z-index: 999;
  max-width: min(280px, calc(100vw - 24px));
  pointer-events: none; /* nie blokuje wyboru wariantu */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}

.aluren-variant-tt.is-open{
  opacity: 1;
  transform: translateY(0);
}

.aluren-variant-tt .tt-inner{
  background: var(--aluren-tt-bg);
  color: var(--aluren-tt-fg);
  border: 1px solid var(--aluren-tt-border);
  border-radius: var(--aluren-tt-radius);
  padding: 10px 12px;
  box-shadow: var(--aluren-tt-shadow);
  font: var(--aluren-tt-font);
  overflow: hidden;
  text-align: center;
}

/* rombik (bez szczeliny) */
.aluren-variant-tt .tt-arrow{
  position: absolute;
  width: var(--aluren-tt-arrow);
  height: var(--aluren-tt-arrow);
  background: var(--aluren-tt-bg);
  left: 50%;
  margin-left: calc(var(--aluren-tt-arrow) / -2);
}

/* tooltip NAD -> strzałka na dole */
.aluren-variant-tt[data-place="top"] .tt-arrow{
  top: 100%;
  margin-top: -6px;
  transform: rotate(45deg);
}

/* tooltip POD (opcjonalnie) */
.aluren-variant-tt[data-place="bottom"] .tt-arrow{
  top: 0;
  margin-top: -4px;
  transform: rotate(225deg);
}


/* =========================================================
   BOOTSTRAP TOOLTIPY (dymki od “?” / nagłówków)
   - działa gdy tooltip ma klasę .aluren-tooltip LUB atrybut data-aluren-tt="1"
   - rombik-strzałka bez szczeliny
   - BS5 + BS4
   ========================================================= */

/* alias: “to jest nasz tooltip” */
.tooltip.aluren-tooltip,
.tooltip[data-aluren-tt="1"]{
  opacity: 1 !important;
  max-width: calc(100vw - 24px) !important; /* odsunięcie od krawędzi */
  pointer-events: none; /* jak chcesz klikalne linki w tooltipie -> usuń */
  z-index: 999 !important;  /* < header, > content */
}

/* pudełko */
.tooltip.aluren-tooltip .tooltip-inner,
.tooltip[data-aluren-tt="1"] .tooltip-inner{
  background: var(--aluren-tt-bg) !important;
  color: var(--aluren-tt-fg) !important;
  border: 1px solid var(--aluren-tt-border) !important;
  border-radius: var(--aluren-tt-radius) !important;
  padding: 10px 12px !important;
  box-shadow: var(--aluren-tt-shadow) !important;
  font: var(--aluren-tt-font) !important;

  max-width: min(280px, calc(100vw - 24px)) !important;
  text-align: center !important;
  overflow: hidden !important;
}

:root{
  --aluren-tt-edge: 16px; /* ile ma zostać luzu od krawędzi ekranu na mobile */
  --aluren-tt-maxw-mobile: 280px; /* docelowa max szerokość dymka na mobile */
}

@media (max-width: 520px){
  /* sam kontener tooltipa */
  .tooltip.aluren-tooltip,
  .tooltip[data-aluren-tt="1"]{
    max-width: calc(100vw - (var(--aluren-tt-edge) * 2)) !important;
  }

  /* pudełko z tekstem */
  .tooltip.aluren-tooltip .tooltip-inner,
  .tooltip[data-aluren-tt="1"] .tooltip-inner{
    width: auto !important;
    max-width: min(var(--aluren-tt-maxw-mobile), calc(100vw - (var(--aluren-tt-edge) * 2))) !important;

    /* jeśli chcesz jeszcze „luźniej” w środku */
    padding: 12px 14px !important;
  }
}


/* ===== Strzałka jako rombik (wyłączamy oryginalny trójkąt) ===== */

/* wyłącz “trójkąt” (BS5/BS4) */
.tooltip.aluren-tooltip .tooltip-arrow::before,
.tooltip.aluren-tooltip .arrow::before,
.tooltip[data-aluren-tt="1"] .tooltip-arrow::before,
.tooltip[data-aluren-tt="1"] .arrow::before{
  border: 0 !important;
  content: "" !important;
}

/* wspólne parametry rombika */
.tooltip.aluren-tooltip .tooltip-arrow,
.tooltip.aluren-tooltip .arrow,
.tooltip[data-aluren-tt="1"] .tooltip-arrow,
.tooltip[data-aluren-tt="1"] .arrow{
  width: var(--aluren-tt-arrow) !important;
  height: var(--aluren-tt-arrow) !important;
  background: var(--aluren-tt-bg) !important;
  transform: rotate(45deg) !important;
  box-shadow: none !important;
  margin: 0 !important;
  position: absolute !important;
}

/* antyalias mask (likwiduje 1px przerwy na części mobile) */
.tooltip.aluren-tooltip .tooltip-arrow::after,
.tooltip.aluren-tooltip .arrow::after,
.tooltip[data-aluren-tt="1"] .tooltip-arrow::after,
.tooltip[data-aluren-tt="1"] .arrow::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aluren-tt-bg);
}

/* ===== Pozycjonowanie rombika “na styk” ===== */
/* BS5: data-popper-placement */

.tooltip.aluren-tooltip[data-popper-placement^="top"] .tooltip-arrow,
.tooltip[data-aluren-tt="1"][data-popper-placement^="top"] .tooltip-arrow{
  bottom: -6px !important;
}
.tooltip.aluren-tooltip[data-popper-placement^="bottom"] .tooltip-arrow,
.tooltip[data-aluren-tt="1"][data-popper-placement^="bottom"] .tooltip-arrow{
  top: -6px !important;
}
.tooltip.aluren-tooltip[data-popper-placement^="left"] .tooltip-arrow,
.tooltip[data-aluren-tt="1"][data-popper-placement^="left"] .tooltip-arrow{
  right: -6px !important;
}
.tooltip.aluren-tooltip[data-popper-placement^="right"] .tooltip-arrow,
.tooltip[data-aluren-tt="1"][data-popper-placement^="right"] .tooltip-arrow{
  left: -6px !important;
}

/* minimalne “wejście” w pudełko o 1px (góra/dół) */
.tooltip.aluren-tooltip[data-popper-placement^="top"] .tooltip-arrow::after,
.tooltip[data-aluren-tt="1"][data-popper-placement^="top"] .tooltip-arrow::after{
  top: -1px;
}
.tooltip.aluren-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::after,
.tooltip[data-aluren-tt="1"][data-popper-placement^="bottom"] .tooltip-arrow::after{
  bottom: -1px;
}

/* BS4 fallback: .bs-tooltip-* i .arrow */
.tooltip.aluren-tooltip.bs-tooltip-top .arrow,
.tooltip[data-aluren-tt="1"].bs-tooltip-top .arrow{ bottom: -6px !important; }
.tooltip.aluren-tooltip.bs-tooltip-bottom .arrow,
.tooltip[data-aluren-tt="1"].bs-tooltip-bottom .arrow{ top: -6px !important; }
.tooltip.aluren-tooltip.bs-tooltip-left .arrow,
.tooltip[data-aluren-tt="1"].bs-tooltip-left .arrow{ right: -6px !important; }
.tooltip.aluren-tooltip.bs-tooltip-right .arrow,
.tooltip[data-aluren-tt="1"].bs-tooltip-right .arrow{ left: -6px !important; }

.tooltip.aluren-tooltip.bs-tooltip-top .arrow::after,
.tooltip[data-aluren-tt="1"].bs-tooltip-top .arrow::after{ top: -1px; }
.tooltip.aluren-tooltip.bs-tooltip-bottom .arrow::after,
.tooltip[data-aluren-tt="1"].bs-tooltip-bottom .arrow::after{ bottom: -1px; }

/* MOBILE: złagodzenie pierwszego przeliczenia Poppera (bez mrugania) */
@media (pointer: coarse), (max-width: 820px) {
  .tooltip.aluren-tooltip {
    transition: transform .12s ease, opacity .12s ease;
    will-change: transform, opacity;
  }
}

/* =========================
   Tooltipy: padding zależny od treści
   - default (tekst): większy padding
   - z grafiką (.vpop): mniejszy padding + ciaśniej przy obrazku
   ========================= */

/* 1) DEFAULT – tekstowe tooltipy (większy komfort czytania) */
.tooltip.aluren-tooltip .tooltip-inner,
.tooltip[data-aluren-tt="1"] .tooltip-inner{
  padding: 16px 18px !important;   /* <- większy */
}

/* 2) Tooltipy z grafiką: rozpoznajemy po tym, że w środku jest .vpop */
.tooltip.aluren-tooltip .tooltip-inner:has(.vpop),
.tooltip[data-aluren-tt="1"] .tooltip-inner:has(.vpop){
  padding: 12px 12px !important;    /* <- mniejszy */
}

/* 3) Dodatkowa kosmetyka dla obrazka w tooltipie z grafiką */
.tooltip.aluren-tooltip .tooltip-inner:has(.vpop) .vpop-img,
.tooltip[data-aluren-tt="1"] .tooltip-inner:has(.vpop) .vpop-img{
  margin: 0 auto 8px auto !important; /* mniej luzu u góry */
  border-radius: 4px;
}

@media (min-width: 992px) {
  div.search-wrapper > .input-group > span.input-group-btn-search > button,
  div.search-wrapper > .input-group > div.add-clear-span.form-group.has-feedback > input.searchInputClass.form-control  {
    height: 42px;
  }
  div.search-wrapper > .input-group > span.input-group-btn-search > button {
    padding: 10px 12px;
    font-size: 18px;
    color: #001b5d;
  }
}

.abs-product-tab-panel > section > div.panel-body > div > section {
    margin-bottom: 20px;
}

.abs-breadcrumb-home-icon {
  display: none;
}