/* ============================================
   STRONA PRODUKTU - ZDJĘCIA
   ============================================ */
#product #content {
    position: relative;
    margin: 0 auto;
}

/* ============================================
   FLAGI NA KARCIE PRODUKTU (Wyprzedaz! / Promocja!)
   Paski na cala szerokosc zdjecia, ulozone jeden pod drugim
   przy gornej krawedzi. Bez tych regul <li> renderowaly sie
   jako goly tekst obok siebie, bez tla i odstepow.
   ============================================ */
#product .product-flags {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

#product .product-flags .product-flag {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 8px 10px;
    background: #cc2314;
    color: #fff;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 0;
    white-space: normal;
}

#product .product-flags .product-flag:last-child {
    margin-bottom: 0;
}

/* Wyprzedaz - jasniejszy pomaranczowy, spojnie z widokiem kategorii */
#product .product-flags .product-flag.on-sale {
    background: #f29e72;
}

/* Flagi ukryte na karcie produktu */
#product .product-flags .product-flag.out_of_stock,
#product .product-flags .product-flag.new,
#product .product-flags .product-flag.online-only,
#product .product-flags .product-flag.pack {
    display: none;
}

.product-cover {
    margin-bottom: 1.25rem;
    position: relative;
}
.product__add-to-cart.add {
    max-width: 245px;
}
.product-cover img {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
    background: #fff;
}
.product-actions {
    width: 100%;
}
.product-cover .layer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 100%, .7);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    text-align: center;
    cursor: pointer;
}

.product-cover .layer .zoom-in {
    font-size: 6.25rem;
    color: #7a7a7a;
}

/* --- Strzałki przewijania zdjęć --- */
#product-modal .modal-content .modal-body figure .arrows,
.scroll-product-box-arrows {
    height: 0;
    right: 0;
    color: #fff;
    position: absolute;
    text-align: center;
    cursor: pointer;
}

.scroll-product-box-arrows {
    width: 100%;
    top: 42% !important;
    z-index: 999;
}

.scroll-product-box-arrows .material-icons.left {
    position: absolute;
    top: 0;
    opacity: 1;
    right: 92%;
    font-size: 36px;
}

.scroll-product-box-arrows .material-icons.right {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 92%;
    font-size: 36px;
}

.material-icons {
    color: #009899;
}

/* --- Miniaturki zdjęć --- */
#main .images-container .js-qv-mask {
    white-space: nowrap;
    overflow: hidden;
}

#main .images-container .js-qv-mask.scroll {
    width: calc(100% - 60px);
    margin: 0 auto;
}

.product-images > li.thumb-container {
    display: inline;
}

.product-images > li.thumb-container > .thumb {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
    cursor: pointer;
    margin-bottom: .625rem;
}

.images-container .product-images > li.thumb-container > .thumb {
    margin-right: .8125rem;
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
    border: 3px solid #2fb5d2;
}

.suggestion:hover,
.selected {
    background: #DCDCDC;
}

.scroll-box-arrows.scroll {
    display: block;
}

.scroll-box-arrows i {
    position: absolute;
    bottom: 1.625rem;
    height: 100px;
    line-height: 100px;
    cursor: pointer;
}

.scroll-box-arrows .left {
    left: 0;
}

.scroll-box-arrows .right {
    right: 0;
}


/* ============================================
   INFORMACJE O PRODUKCIE - PRAWA KOLUMNA
   ============================================ */
#product h1.h1 {
    text-transform: none;
}

.product-prices {
    margin-top: 1.25rem;
    display: none;
}

.product-information {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0px;
    margin-top: 0px;
    flex-wrap: nowrap !important;
}

#product form#add-to-cart-or-refresh {
    margin-bottom: 20px;
}


/* ============================================
   TABELA RABATOWA
   ============================================ */
.product-discounts {
    margin-bottom: 5px;
}

.product-discounts > .table-product-discounts thead tr th {
    width: 33%;
    padding: .625rem 1.25rem;
    background: #fff;
    border: .3125rem solid #f1f1f1;
    text-align: center;
}

.product-discounts > .table-product-discounts tbody tr {
    background: #f6f6f6;
}

.product-discounts > .table-product-discounts tbody tr:nth-of-type(2n) {
    background: #fff;
}

.product-discounts > .table-product-discounts tbody tr td {
    padding: .625rem 1.25rem;
    text-align: center;
    border: .3125rem solid #f1f1f1;
}

#category .clearfix.atc_div span,
#product-availability span,
.product-add-to-cart .control-label,
.table-product-discounts td,
.table-product-discounts th,
.table-product-discounts span {
    font-size: .9375rem !important;
}


/* ============================================
   KOSZYK - DODAWANIE DO KOSZYKA
   ============================================ */
.product-actions .control-label {
    margin-bottom: .375rem;
    display: block;
    width: 100%;
}

.product-quantity {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.product-quantity .add,
.product-quantity .qty {
    float: left;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.quantity-button__group.input-group {
    display: flex;
}
button.product__add-to-cart-button.btn.btn-primary {
    background-color: #cc2314 !important;
    border-color: #cc2314 !important;
}
.product__add-to-cart.add i.material-icons {
    color: #fff !important;
}
.product-quantity .qty {
    margin-right: .4rem;
}

.product-quantity #quantity_wanted {
    color: #232323;
    background-color: #fff;
    height: 2.75rem;
    padding: .175rem .5rem;
    width: 5rem;
}

.product-quantity .input-group-btn-vertical {
    width: auto;
    display: none;
}

.bootstrap-touchspin {
    width: auto;
    float: left;
    display: inline-block;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2);
}

.product-actions .add-to-cart {
    height: 2.75rem;
    line-height: inherit;
    padding-top: .625rem;
}

.add-to-cart,
.add-to-cart:hover,
.add_to_shopping_cart {
    background-color: #cc2314;
}

i.material-icons.shopping-cart {
    color: #fff;
}

#product-availability {
    margin-top: .625rem;
    display: inline-block;
    font-weight: 700;
}

.input-group {
    position: relative;
    width: 100%;
    display: table;
    border-collapse: separate;
}

/* --- Przyciski ogólne --- */
.btn-primary {
    color: #fff;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2);
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

/* --- Przycisk "Zadaj pytanie" --- */
.exclusive_large,
.exclusive_large_mini {
    height: 2.75rem;
    line-height: inherit;
    font-weight: 600;
}

.exclusive_large {
    background: #009899;
    color: #fff;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2);
    text-transform: uppercase;
    padding: .5rem 1.25rem;
}

.fa-question-circle:before {
    content: "\f059";
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================
   ZAKŁADKI (Opis / FAQ / Załączniki)
   ============================================ */
.tabs {
    display: inline-block;
    width: 100%;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
    margin-top: 2rem;
    background: #fff;
    padding: 1.25rem 1.875rem;
}

#product .nav.nav-tabs {
    display: flex;
    flex-wrap: wrap;
}

.tabs .nav-tabs {
    border: none;
    border-bottom: 2px solid #f1f1f1;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.tabs .nav-tabs .nav-item {
    float: left;
    margin-bottom: -.125rem;
}

.tabs .nav-tabs .nav-link {
    color: #7a7a7a;
    border: 0 solid transparent;
    font-weight: 700;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border: none;
    border-bottom: 3px solid #2fb5d2;
}

.tabs .nav-tabs .nav-link.active {
    color: #2fb5d2;
}

.tabs .nav-item a p {
    color: #7a7a7a !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.tabs .nav-link.active p {
    color: #2fb5d2 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.active:after {
    content: "";
    transition: transform .8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#product #description {
    background: 0 0;
}

.tab-content > .active {
    display: block;
}

#footer,
#thecheckout-confirm,
#thecheckout-confirm > div:first-child,
.tabs .tab-pane {
    padding-top: 0;
}


/* ============================================
   PARAMETRY UŻYTKOWE (cechy produktu)
   ============================================ */
.product-features {
    margin-top: 2px !important;
    margin-left: .3125rem;
    width: 100%;
}

#order-itemss table,
#products .product-miniature,
#products .thumbnail-container,
.cart-grid-body,
.cart-grid-right,
.checkout,
.col-md-10.col-sm-12.position-static,
.col-md-9,
.product-miniature .thumbnail-container,
.przelewy24-success img {
    width: 100%;
}

.product-features > dl.data-sheet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

#tytul_tabeli,
.tytul_tabeli {
    font-size: 14px;
    border-bottom: 3px solid #2fb5d2;
    text-align: left;
    color: #2fb5d2;
    font-weight: 700;
    background: #fff;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 10px;
    text-align: justify;
    padding: .625rem;
    margin-right: 0;
}

/* --- Pary dt + dd --- */
.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 5%;
    flex: 1 0 5%;
    font-weight: 400;
    background: #f1f1f1;
    padding: .625rem;
    margin-right: .625rem;
    word-break: normal;
    font-size: 16px;
    min-height: 1rem;
}

.product-features > dl.data-sheet dt.name {
    flex: 1 0 48% !important;
    text-transform: inherit !important;
}

dd.value,
dt.name {
    padding: .275rem !important;
    margin-bottom: 2px !important;
    margin-right: 2px !important;
}

.default-menu > ul > li.sfHover > .top-level-menu-li-span,
.default-menu > ul > li.sfHover > a,
.default-menu > ul > li.sfHoverForce > .top-level-menu-li-span,
.default-menu > ul > li.sfHoverForce > a,
.default-menu > ul > li:hover > .top-level-menu-li-span,
.default-menu > ul > li:hover > a,
.default-menu > ul > li > .top-level-menu-li-span:hover,
.default-menu > ul > li > a:hover,
.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
    background: #fff !important;
}

/* Paskowanie — co drugi wiersz */
.product-features > dl.data-sheet dd.value:nth-of-type(2n),
.product-features > dl.data-sheet dt.name:nth-of-type(2n) {
    background: #f6f6f6 !important;
}

#product .tab-content dd,
#product .tab-content dt,
#product .tab-content dd span,
#product .tab-content dt span {
    font-size: 16px;
}

#description dd,
#tabela h4,
#to-magnesy li,
.footer-container .col-md-12 p,
.footer-container .hidden-sm-down,
.footer-container .links .hidden-sm-down a,
.footer-container a,
dt {
    color: #000 !important;
}

#product-availability span,
.af_subtitle,
.btn-primary,
.control-label,
.product-flag,
.table-product-discounts,
dd span,
div.widok_kat,
h4,
h4 a {
    font-size: 16px !important;
}

/* --- Opis atrybutu (hook tekst pod cechą) --- */
#opis_atrybutu {
    font-size: 16px !important;
    margin-bottom: 2px !important;
    padding: .06rem 25px !important;
    background: #f6f6f6;
    margin-right: 0;
    text-align: justify;
    width: 100%;
}

#tabela h4,
dd h4,
dt h4,
#tabela span,
dd span,
dt span {
    font-weight: 400 !important;
    margin: 0;
}

.card.fsch-column-block {
    width: 99.9% !important;
    margin-bottom: 0 !important;
}

sub {
    bottom: -.25em;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}


/* ============================================
   TABELA MATERIAŁÓW (#tabela)
   ============================================ */
#tabela {
    width: 100%;
    border-collapse: inherit;
    text-align: justify;
    font-size: 16px;
}

#tabela > tbody:first-child > tr > td:nth-child(1) {
    width: 80%;
}

#tabela > tbody:first-child > tr > td {
    background: #f6f6f6;
    padding: .625rem;
    margin-right: .625rem;
    min-height: 2.5rem;
    word-break: normal;
}

#tabela tr td,
.post-content {
    background-color: #fff !important;
}

#tabela td {
    font-size: 16px !important;
    padding: .275rem !important;
}

#tabela tr:nth-of-type(2n) td {
    background-color: #f3f3f3 !important;
}

.card.card-block.fsch-column-block #tabela .col1,
.card.card-block.fsch-column-block #tabela .col2 {
    padding: .275rem;
}


/* ============================================
   TAGI PRODUKTU
   ============================================ */
.producttags {
    list-style: none;
    position: relative;
    clear: both;
    display: block;
    padding-bottom: 20px;
    margin-bottom: 20px;
}


.producttags li {
    float: left;
    height: 24px;
    line-height: 24px;
    position: relative;
    margin-right: 15px;
    padding: 0 10px 0 10px;
    background: #009899;
    color: #fff;
    text-decoration: none;
}
.producttags a{
    color: #fff;
    font-size: 12px;
}

/* ============================================
   UKRYTE ELEMENTY
   ============================================ */
#product-details {
    display: none !important;
}


/* ============================================
   RESPONSYWNOŚĆ
   ============================================ */
/* Mobile (do 767px) */
@media (min-width: 992px) {
    table.table-product-discounts {
        width: auto;
    }
}
/* Tablet (do 991px) */
@media (max-width: 991px) {
    #product #content {
        max-width: 100%;
    }

    .product-information {
        flex-wrap: wrap !important;
    }

    .tabs {
        padding: 1rem;
    }

    .tabs .nav-item a p,
    .tabs .nav-link.active p {
        font-size: 15px !important;
    }

    .product-discounts > .table-product-discounts thead tr th,
    .product-discounts > .table-product-discounts tbody tr td {
        padding: .4rem .8rem;
    }
}

/* Mobile (do 767px) */
@media (max-width: 767px) {
    table.table-product-discounts {
        width: 100%;
    }
    .product-information {
        flex-direction: column;
        flex-wrap: wrap !important;
    }

    /* Zakładki — pionowo */
    #product .nav.nav-tabs {
        flex-direction: row;
    }

    .tabs .nav-tabs .nav-item {
        float: none;
        margin-bottom: 0;
    }

    .tabs .nav-tabs .nav-link.active,
    .tabs .nav-tabs .nav-link:hover {
        border-bottom: 3px solid #2fb5d2;
    }

    .tabs {
        padding: .75rem;
    }

    .tabs .nav-item a p,
    .tabs .nav-link.active p {
        font-size: 18px !important;
    }

    /* Cechy — obok siebie, dopasowane proporcje */
    .product-features > dl.data-sheet dt.name {
        flex: 1 0 40% !important;
    }

    .product-features > dl.data-sheet dd.value {
        flex: 1 0 30% !important;
    }

    /* Koszyk */
    .product-quantity {
        flex-wrap: wrap;
    }

    .product-quantity #quantity_wanted {
        width: 4rem;
    }

    /* Tagi */
    .producttags a,
    .producttags li {
        margin-left: 5px;
        margin-bottom: 5px;
    }

    /* Tabela rabatowa */
    .product-discounts > .table-product-discounts thead tr th,
    .product-discounts > .table-product-discounts tbody tr td {
        padding: .3rem .5rem;
    }

    .table-product-discounts td,
    .table-product-discounts th,
    .table-product-discounts span {
        font-size: .8rem !important;
    }

    /* Tabela materiałów */
    #tabela {
        font-size: 11px;
    }

    #tabela > tbody:first-child > tr > td:nth-child(1) {
        width: auto;
    }
}

/* Mały telefon (do 479px) */
@media (max-width: 479px) {
    #product h1.h1 {
        font-size: 16px;
    }

    .exclusive_large {
        font-size: 11px;
        padding: .4rem .8rem;
        height: auto;
    }

    .product-actions .add-to-cart {
        height: 2.5rem;
        font-size: 11px;
    }

    .product-quantity #quantity_wanted {
        width: 3.5rem;
        height: 2.5rem;
    }
}
.social-sharing {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.social-sharing > span {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.social-sharing ul {
    display: flex;
    list-style: none;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.social-sharing ul li a.text-hide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #fff;
    border: 1px solid #d9dee1;
    border-radius: 50%;
    text-indent: -9999px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.social-sharing ul li a.text-hide:hover,
.social-sharing ul li a.text-hide:focus {
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);
}

.social-sharing ul li a.text-hide::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-indent: 0;
}

.social-sharing li.facebook a.text-hide::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2317a2a0' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'/></svg>");
}

.social-sharing li.twitter a.text-hide::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2317a2a0' d='M18.9 3H22l-7 8 8 10h-6.3l-5-6.4L5.8 21H3l7.5-8.6L3 3h6.4l4.5 5.8L18.9 3zm-1.1 16h1.7L8.3 5H6.5l11.3 14z'/></svg>");
}

.social-sharing li.pinterest a.text-hide::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2317a2a0' d='M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.7.2-2.5l1.4-6s-.3-.7-.3-1.7c0-1.6 1-2.8 2.1-2.8 1 0 1.5.7 1.5 1.6 0 1-.6 2.5-1 3.9-.3 1.2.6 2.1 1.7 2.1 2.1 0 3.6-2.7 3.6-5.8 0-2.4-1.6-4.2-4.6-4.2-3.4 0-5.5 2.5-5.5 5.3 0 1 .3 1.6.7 2.2.2.2.2.3.1.6l-.3 1c-.1.3-.3.4-.6.3-1.4-.6-2.1-2.4-2.1-4.3 0-3.2 2.4-6.9 7.6-6.9 4.1 0 6.8 3 6.8 6.1 0 4.2-2.3 7.3-5.7 7.3-1.1 0-2.2-.6-2.6-1.3l-.7 2.9c-.3 1-.9 2.1-1.4 2.9A10 10 0 1 0 12 2z'/></svg>");
}

.social-sharing li.instagram a.text-hide::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2317a2a0' d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 2.1.26 2.6.46.66.25 1.13.56 1.62 1.05.5.5.8.96 1.05 1.62.2.5.4 1.4.46 2.6.07 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.06 1.2-.26 2.1-.46 2.6-.25.66-.56 1.13-1.05 1.62-.5.5-.96.8-1.62 1.05-.5.2-1.4.4-2.6.46-1.3.07-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.06-2.1-.26-2.6-.46a4.4 4.4 0 0 1-1.62-1.05 4.4 4.4 0 0 1-1.05-1.62c-.2-.5-.4-1.4-.46-2.6C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.06-1.2.26-2.1.46-2.6.25-.66.56-1.13 1.05-1.62.5-.5.96-.8 1.62-1.05.5-.2 1.4-.4 2.6-.46C8.4 2.2 8.8 2.2 12 2.2zm0 1.98c-3.15 0-3.52 0-4.77.07-1 .05-1.7.2-2.06.35-.5.2-.86.42-1.24.8-.38.38-.6.74-.8 1.24-.15.36-.3 1.06-.35 2.06-.07 1.25-.07 1.62-.07 4.77s0 3.52.07 4.77c.05 1 .2 1.7.35 2.06.2.5.42.86.8 1.24.38.38.74.6 1.24.8.36.15 1.06.3 2.06.35 1.25.07 1.62.07 4.77.07s3.52 0 4.77-.07c1-.05 1.7-.2 2.06-.35.5-.2.86-.42 1.24-.8.38-.38.6-.74.8-1.24.15-.36.3-1.06.35-2.06.07-1.25.07-1.62.07-4.77s0-3.52-.07-4.77c-.05-1-.2-1.7-.35-2.06a3.3 3.3 0 0 0-.8-1.24 3.3 3.3 0 0 0-1.24-.8c-.36-.15-1.06-.3-2.06-.35-1.25-.07-1.62-.07-4.77-.07zm0 3.37a5.45 5.45 0 1 1 0 10.9 5.45 5.45 0 0 1 0-10.9zm0 1.98a3.47 3.47 0 1 0 0 6.94 3.47 3.47 0 0 0 0-6.94zm5.66-2.2a1.27 1.27 0 1 1 0 2.55 1.27 1.27 0 0 1 0-2.55z'/></svg>");
}
/* ============================================================
   MODAL ZOOM ZDJĘĆ PRODUKTU (#product-modal) - style z classic
   ============================================================
   Baza z theme.css + nadpisania z custom.css (te z !important
   są tym, co faktycznie renderuje się na żywej stronie classic -
   custom.css ładuje się po theme.css).
*/

/* Szerokość samego modala - bez tego Bootstrap 5 w Hummingbirdzie
   ogranicza modal do znacznie węższej wartości domyślnej, stąd
   "rozjechany" wygląd. */
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 835px !important;
  }
}

#product-modal .modal-content {
  background: transparent;
  border: none;
  padding: 0;
}

#product-modal .modal-content .modal-body {
  display: inline-block !important;
  width: 100%;
  margin: 0;
}

#product-modal figure {
  float: left !important;
}

#product-modal .modal-content .modal-body .product-cover-modal {
  background: #fff;
}

#product-modal .modal-content .modal-body .image-caption {
  background: #fff;
  width: 800px;
  padding: .625rem 1.25rem;
  border-top: 1px solid #f1f1f1;
}

#product-modal .modal-content .modal-body .image-caption p {
  margin-bottom: 0;
}

#product-modal .modal-content .modal-body .thumbnails {
  position: relative;
}

/* Przewijany pasek miniatur w modalu (.js-modal-mask w naszym tpl) */
#product-modal .modal-content .modal-body .mask {
  width: calc(100% - 130px);
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  max-height: 11.38rem !important;
  margin-top: 1rem !important;
  padding-top: 10px !important;
}

#product-modal .modal-content .modal-body .mask.nomargin {
  margin-top: 0;
}

#product-modal .modal-content .modal-body .product-images {
  margin-left: 0 !important;
}

#product-modal .modal-content .modal-body .product-images img {
  width: 8.25rem !important;
  cursor: pointer;
  background: #fff;
}

#product-modal .modal-content .modal-body .product-images img:hover {
  border: 3px solid #2fb5d2;
}

/* Kontener miniatur - wszystkie warianty klasy "full*" mają w
   praktyce identyczny styl w custom.css, więc wystarczy sama "full". */
#product-modal #thumbnails.full {
  background-color: #f1f1f1;
  float: left !important;
  width: 99.5% !important;
}

/* Strzałki przy dużym zdjęciu w modalu */
#product-modal .modal-content .modal-body figure .arrows {
  height: 0 !important;
  width: 100%;
  top: 32% !important;
  right: 0 !important;
  z-index: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  cursor: pointer;
}

#product-modal .modal-content .modal-body figure .arrows .arrow-up {
  position: absolute;
  top: 0 !important;
  opacity: 1 !important;
  right: 88%;
  font-size: 5.25rem !important;
}

#product-modal .modal-content .modal-body figure .arrows .arrow-down {
  position: absolute;
  bottom: 0 !important;
  top: 0 !important;
  left: 88%;
  font-size: 5.25rem !important;
}

#product-modal .modal-content .modal-body figure .arrows i {
  font-size: 6.25rem;
  display: inline;
}

/* Strzałki do przewijania paska miniatur (scrollModalLeft/Right) */
.scroll-modal-box-arrows i {
  position: absolute;
  bottom: 1.625rem;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
}

.scroll-modal-box-arrows .left {
  left: 20px;
  top: 25%;
}

.scroll-modal-box-arrows .right {
  right: 20px;
  top: 25%;
}

/* Wersja mobilna - modal w jednej kolumnie, bez strzałek przy
   dużym zdjęciu (za mało miejsca) */
@media (max-width: 991px) {
  #product-modal .modal-content .modal-body {
    flex-direction: column;
    margin-left: 0;
  }

  #product-modal .modal-content .modal-body img.product-cover-modal {
    width: 100%;
  }

  #product-modal .modal-content .modal-body .arrows {
    display: none;
  }

  #product-modal .modal-content .modal-body .image-caption {
    width: 100%;
  }
}

/* ============================================================
   OGRANICZENIE WYSOKOŚCI GŁÓWNEGO ZDJĘCIA NA STRONIE PRODUKTU
   ============================================================
   Bez tego zdjęcia w orientacji pionowej rozciągają się na pełną
   wysokość i zasłaniają pasek miniatur pod spodem. object-fit:contain
   pokazuje całe zdjęcie w ograniczonej wysokości, z białym tłem
   po bokach jeśli proporcje nie pasują.
*/
#product .product-cover img.js-qv-product-cover {
  max-height: 452px;
  width: 100%;
  object-fit: contain;
  background: #fff;
}
#wrapper .breadcrumb {
    background: transparent;
    padding: 0;
}
#wrapper .breadcrumb li:after {
    color: #7a7a7a;
    margin: .3125rem;
}
#product .breadcrumb.hidden-sm-down ol {
    float: left;
    width: 100%;
    padding-right: 10px;
}
#wrapper .breadcrumb li {
    display: inline;
}
#wrapper .breadcrumb li a {
    color: #232323;
}
nav.breadcrumb__wrapper {
    padding: 15px 0px;
}
p.product-quantity-available {
    font-weight: bold;
}
p.product-quantity-available span{
    color: #cc2314;
}
section.product-accessories.clearfix {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
    background: #fff;
    padding: 1.25rem 1.875rem 2.2rem;
}
section.product-accessories.clearfix .products {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
section.product-accessories.clearfix .products article.product-miniature.js-product-miniature {
    width: 25%;
}
section.product-accessories.clearfix .products .thumbnail-container {
    border: 2px solid #009899;
}
section.product-accessories.clearfix .products .thumbnail-container a {
    color: #000;
    font-weight: 700;
    font-size: 12pt;
    padding-bottom: 10px;
}
/* ============================================
   OPIS PRODUKTU – OBRAZKI I OSADZENIA

   W pliku nie bylo zadnej reguly ograniczajacej szerokosc obrazkow w opisie,
   wiec zdjecia wieksze niz kontener wychodzily poza jego obszar. Redaktorzy
   wklejaja tez czasem szerokosc w atrybucie width albo w stylu inline - stad
   !important przy max-width i wyzerowanie width.
   ============================================ */

#product #description img,
#product .tab-content img,
#description img,
.product-description img {
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    box-sizing: border-box;
}

/* Obrazki wstawione jako blok maja zostac wysrodkowane */
#product #description img[style*="display: block"],
#product #description p > img:only-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Tabele i osadzenia (np. filmy) tez nie moga rozpychac opisu */
#product #description table,
#product .tab-content table {
    max-width: 100%;
    table-layout: auto;
}

#product #description iframe,
#product #description video,
#product .tab-content iframe,
#product .tab-content video {
    max-width: 100%;
}

#product #description,
#product .tab-content {
    overflow-wrap: break-word;
}

/* ============================================
   TABELA PARAMETROW – ROWNE WYSOKOSCI WIERSZY

   dl.data-sheet jest kontenerem flex z zawijaniem: dt.name ma flex 1 0 48%,
   dd.value flex 1 0 5%, wiec pary ukladaja sie w wiersze. Regula
   "align-items: flex-start" (linia ~501) sprawiala, ze kazda komorka miala
   wysokosc WLASNEJ tresci - przy wielolinijkowej nazwie (np. "Kierunek
   magnesowania wzdluz wymiaru") sasiednia wartosc zostawala niska i wiersz
   sie rozjezdzal.

   stretch przywraca domyslne zachowanie flexa: komorki w jednej linii
   maja te sama wysokosc.
   ============================================ */

.product-features > dl.data-sheet {
    align-items: stretch;
}

.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Wiersze opisowe na pelna szerokosc (dlugie akapity pod parametrem)
   maja zostac zwyklym blokiem tekstu, nie wysrodkowana komorka. */
.product-features > dl.data-sheet dd.value[style*="100%"],
.product-features > dl.data-sheet dd.value.full-width {
    display: block;
}

/* ============================================
   AKCESORIA POD PRODUKTEM – SIATKA RESPONSYWNA

   Regula z linii 1124 daje .products "display: flex" BEZ flex-wrap, a kafelkom
   sztywne width: 25%. Przy szesciu akcesoriach wszystkie probowaly zmiescic sie
   w jednym rzedzie - tytuly nachodzily na siebie i wychodzily poza ramki.

   Do tego .widok_kat jest tu uzyty jako zwykly kontener kafelka, ale dziedziczy
   z category CSS "display: flex; gap: 25px", co dodatkowo rozrzucalo tytul
   i zdjecie. W tym miejscu ma byc zwyklym blokiem.

   Liczba kafelkow w rzedzie: 2 na telefonie, 3 na tablecie, 4 od 1200px.
   ============================================ */

section.product-accessories.clearfix .products {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
}

/* .widok_kat pelni tu role kontenera kafelka, nie siatki kategorii */
section.product-accessories.clearfix .widok_kat {
    display: block !important;
    width: 100%;
    gap: 0 !important;
}

section.product-accessories.clearfix .products article.product-miniature.js-product-miniature {
    display: flex;
    margin: 0;
}

/* Inline height:240px z szablonu blokowal rowne wysokosci -
   przy flexie karty i tak zrownuja sie same. */
section.product-accessories.clearfix .products .thumbnail-container {
    height: auto !important;
    width: 100% !important;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

section.product-accessories.clearfix .products .thumbnail-container a {
    display: block;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
}

section.product-accessories.clearfix .products img {
    max-width: 160px !important;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- Liczba kolumn --- */

/* Telefon: 2 w rzedzie */
@media (max-width: 767.98px) {
    section.product-accessories.clearfix .products article.product-miniature.js-product-miniature {
        width: calc(50% - 7.5px);
    }

    section.product-accessories.clearfix {
        padding: 1rem;
    }

    section.product-accessories.clearfix .products .thumbnail-container a {
        font-size: 11pt;
    }
}

/* Tablet i mniejszy desktop: 3 w rzedzie */
@media (min-width: 768px) and (max-width: 1199.98px) {
    section.product-accessories.clearfix .products article.product-miniature.js-product-miniature {
        width: calc(33.333% - 10px);
    }
}

/* Duze ekrany: 4 w rzedzie */
@media (min-width: 1200px) {
    section.product-accessories.clearfix .products article.product-miniature.js-product-miniature {
        width: calc(25% - 11.25px);
    }
}
.product-description .table-container{
    width: 100%;
    overflow: auto;
}
#description .breadcrumb.hidden-sm-down {
  width: 100%;
  margin-top: 55px !important;
}
#description .breadcrumb.hidden-sm-down li:last-child::after {
  content: "";
}
#description .breadcrumb.hidden-sm-down li::after {
  content: "/";
}