/*Etykieta outlet*/


.label-custom-1041 {display: none !important;}



body[data-controller="list"] .abs-layout-breadcrumbs{
display: none;


.abs-offer-details-container h1 {
display: none;
}



.powiadomienie-konta {
padding: 1em;
background-color: #fe6700;
color: white;
}

.powiadomienie-konta a {
color: white;
}

.powiadomienie-konta a:hover {
text-decoration: underline;
}

.przycisk-1 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #fe6700;
    border-color: #d82e33;


    font-size: 13px;

    min-width: 180px;


    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-1:hover {
    background-color: #17364b;
    color:white;
}

.przycisk-1:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-2 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #000000;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-2:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-2:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-3 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #0880a4;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-3:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-3:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-4 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #b90312;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-4:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-4:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-5 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #d1a909;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-5:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-5:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-6 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #00027a;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-6:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-6:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-7 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #e60000;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-7:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-7:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-corON {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #17364b;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-corON:hover {
    background-color: #fe6700;
    color:white;
}

.przycisk-corON:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-corOFF {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #black;
    background-color: #e4e4e4;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-corOFF:hover {
    background-color: #fe6700;
    color:white;
}

.przycisk-corOFF:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-longON {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #17364b;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 250px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 60px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-longON:hover {
    background-color: #fe6700;
    color:white;
}

.przycisk-longON:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-longOFF {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #black;
    background-color: #e4e4e4;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 250px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 60px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-longOFF:hover {
    background-color: #fe6700;
    color:white;
}

.przycisk-longOFF:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-8 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #b90312;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-8:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-8:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-9 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #003771;
    border-color: #d82e33;

    font-size: 11px;

    min-width: 170px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-9:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-9:focus {
    color:white;
}/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-10 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #be1d12;
    background-color: #ffc90f;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 300px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 60px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-10:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-10:focus {
    color:white;}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-11 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #003399;
    border-color: #d82e33;

    font-size: 14px;

    min-width: 300px;
    max-width: 100%;
    
    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 60px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-11:hover {
    background-color: #FE6600;
    color:white;
}

.przycisk-11:focus {
    color:white;}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.przycisk-hit {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: black;
    background-color: white;
    border-color: #fe6600;
    border: 2px;
    border-style: solid;
    font-size: 13px;

    min-width: 180px;


    border-radius: 30px;
border-color: #fe6600;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-hit:hover {
    background-color: #fe6600;
    color:white;
}

.przycisk-hit:focus {
    color:white;
}


.contanair{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
row-gap:20px;
column-gap:20px;
padding:20px;
max-width:1200px;}


@media (max-width: 720px){
.contanair{grid-template-columns: 1fr 1fr;
column-gap:5px;
padding:0px;}}
@media (min-width:721px) and  (max-width: 1000px){
.contanair{grid-template-columns: 1fr 1fr 1fr;
column-gap:5px;
padding:0px;}}
@media (min-width:1001px) and  (max-width: 1200px){
.contanair{grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:5px;
padding:0px;}}

.productBox{
text-align:center;
border:solid 1px #cccccc;
border-radius:20px;
max-width:100%;
}
.imgBox{padding:10px;
padding-top:30px;
height:220px;}

.imgBox2{padding:10px;
height:170px;}


.titleBox{padding:10px 20px;
height:60px;
font-family: 'century gothic', sans-serif;
font-size:14px;
}
.buttonBox{padding:20px;
height:90px;}

.promoPageTitle{
font-family: 'century gothic', sans-serif;
font-weight:bold;
font-size:24px;
padding: 20px 20px 0px 20px;

}
.promoPageBaner{
text-align:center;
padding-bottom:20px;
max-width:100%;}

.pageWrapper{max-width:1200px;
}


.przycisk-111 {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #fe6700;
    border-color: #d82e33;


    font-size: 13px;

    min-width: 100px;


    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 40px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-111:hover {
    background-color: #17364b;
    color:white;
}

.przycisk-111:focus {
    color:white;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.konk{
display:grid;
grid-template-columns: 1fr 2fr;
}

@media (max-width: 1200px){
.konk{grid-template-columns: 1fr;}}


.rok{
display:grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
}

@media (max-width: 1200px){
.rok{grid-template-columns: 1fr 1fr;}}


.nagro{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1200px){
.nagro{grid-template-columns: 1fr 1fr;}}
@media (max-width: 720px){
.nagro{grid-template-columns: 1fr;}}



.konkursKaruzela{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
margin-bottom:40px;
}

@media (max-width: 1200px){
.konkursKaruzela{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.konkursKaruzela{grid-template-columns: 1fr 1fr;}}


manu-popularne.{}

@media (max-width: 1200px){
.menu-popularne{display:none;}}


.podrecznikiCont{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:20px;
row-gap:20px;
}

@media (max-width: 1200px){
.podrecznikiCont{grid-template-columns: 1fr;}}

.podrecznikiBox{
border:solid 1px #cccccc;
border-radius:20px;}
.podrecznikiTitle{
text-align:center;
font-family:'century gothic', sans-serif;
font-size:20px;
font-weight:bold;
padding-top:20px;
}
.podrecznikiCat{display:grid;
grid-template-columns: 1fr 1fr;
line-height:20px;
font-size:12px;
font-family:'century gothic', sans-serif;
padding:20px;

}


.podrecznikiBanerFirst{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:20px;
row-gap:20px;}
.podrecznikiBanerSecond{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align: center;
padding-top:20px;
padding-bottom:20px;
font-family:'century gothic', sans-serif;
max-width:1200px;}


@media (max-width: 1200px){
.podrecznikiBanerFirst{grid-template-columns: 1fr;}}
@media (max-width: 1100px){
.podrecznikiBanerSecond{grid-template-columns: 1fr;}}


.buttonPlace{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.buttonPlace{grid-template-columns: 1fr;}}



.cis{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.cis{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.cis{grid-template-columns: 1fr 1fr;}}



.publishBoxes{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.publishBoxes{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.publishBoxes{grid-template-columns: 1fr 1fr;}}


.publishTitle{
font-family: 'century gothic', sans-serif;
font-size: 40px;
padding-top:80px;
padding-bottom:2px;
}

.publishTitleTwo{
font-family: 'century gothic', sans-serif;
font-size: 15px;
padding-top:2px;
padding-bottom:2px;
}

.publishTitleFirst{
font-family: 'century gothic', sans-serif;
font-size: 40px;
padding-bottom:15px;
}


.cis2{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:20px;
}



.cis3{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.cis3{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.cis3{grid-template-columns: 1fr 1fr;}}



.publishBoxTitle{
font-family: 'century gothic', sans-serif;
font-size: 20px;
padding-top:20px;
padding-bottom:20px;
}


.publishText{
font-family: 'century gothic', sans-serif;
font-size: 16px;
}

.seriee{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;

}

.outlet{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;

}
@media (max-width: 1200px){
.outlet{grid-template-columns: 1fr 1fr;
column-gap:10px;
row-gap:10px;
margin-left:10px;
margin-right:10px;
}}
@media (max-width: 720px){
.outlet{grid-template-columns: 1fr 1fr;}}


.outletBox{

border-radius: 15px;
text-align:center;
background-color: #FFEB00;
}

.outletText{
font family: 'century gothic', sans-serif;
font-size: 14px;
font-weight:bold;
padding:5px 10px 0px 10px;
}

.outletText a{
font family: 'century gothic', sans-serif;
font-size: 14px;
font-weight:bold;
padding:5px 10px 0px 10px;

}


@media (max-width: 1280px){
.outletText{font-size: 14px;
padding:5px 5px 0px 5px;
}}



.nagro2{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 1200px){
.nagro2{grid-template-columns: 1fr 1fr;}}
@media (max-width: 720px){
.nagro2{grid-template-columns: 1fr;}}



.nagro3{
display:grid;
grid-template-columns: 1fr 1fr;
}

@media (max-width: 1200px){
.nagro3{grid-template-columns: 1fr;}}



.konkursKaruzela2{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin-bottom:40px;
}

@media (max-width: 1200px){
.konkursKaruzela2{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.konkursKaruzela2{grid-template-columns: 1fr 1fr;}}


.wkrotce{
padding-top:20px; 
padding-margin:20px;}

@media (max-width: 1200px){
.wkrotce{display:none;}}
@media (max-width: 720px){
.wkrotce{display:none;}}



.czuczu{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 720px){
.czuczu{grid-template-columns: 1fr;}}



.przycisk-ht {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 3px;

    color: #fff;
    background-color: #fe6700;
    border-color: #d82e33;


    font-size: 13px;

    min-width: 120px;


    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 30px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-ht:hover {
    background-color: #17364b;
    color:white;
}

.przycisk-ht:focus {
    color:white;
}

.banerProfits{
display: flex;
justify-content: space-between;
align-items:center;
border-top:1px solid lightgray;
border-bottom: 1px solid lightgray;
padding:10px;
color: #b1b1b1;
font-family: 'century gothic', sans-serif;
font-size:14px;
max-height: 80px;}


@media (max-width: 1000px){
.banerProfits{display:none;}}

.banerProfitsItem{
padding-left:10px;
padding-right:10px;}}





.titleBoxOutlet{padding:10px 20px;
height:60px;
font-family: 'century gothic', sans-serif;
font-size:14px;
}
.buttonBoxOutlet{padding:20px;
height:90px;
}

.promoPageTitleOutlet{
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:20px;
padding: 15px 20px 0px 10px;
}
.contanairOutlet{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
row-gap:20px;
column-gap:20px;
padding:20px;
}
@media (max-width: 720px){
.contanairOutlet{grid-template-columns: 1fr 1fr;
padding-left:8px; padding-right:8px;
column-gap:10px;}}
@media (min-width:721px) and (max-width: 1200px){
.contanairOutlet{grid-template-columns: 1fr 1fr 1fr;}}
.productBoxOutlet{
text-align:center;
border:solid 1px #cccccc;
border-radius:20px;
width:170px;
}

@media (max-width: 720px){
.productBoxOutlet{width:167px;}}


.imgBoxOutlet{padding:20px;
height:180px;}
.titleBoxOutlet{padding:10px 20px;
height:60px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
}
.buttonBoxOutlet{padding:20px;
height:90px;
}
.priceOutletOn{font-size:16px;
font-weight:bold;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}
.priceOutletOff{font-size:14px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}



.nagro4{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1200px){
.nagro4{grid-template-columns: 1fr;}}



.konkursKaruzela3{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin-bottom:40px;
}

@media (max-width: 720px){
.konkursKaruzela3{grid-template-columns: 1fr 1fr;}}



.oxfordDarkBox{
display:flex;
justify-content: center;
flex-wrap:wrap;
}

.productOxford{height:300px; width:220px; background-color:#000;margin:20px; border-radius:20px;}
.productOxfordForth{ position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordThird{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordSecond{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFirst{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFifth{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFifth:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordForth:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordThird:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordSecond:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordFirst:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}

.oxfordImage{position:absolute;
width:100%;
height:100%;
border-radius:20px;
background-color: rgba(23, 55, 77, 0.8);}

.oxfordText{position:absolute;
top: 50%;
left:50%;

transform: translate(-50%, -50%);
}
.oxfordText2{position:absolute;
bottom: 10px;
right:0px;

}
.oxfordText h3{width:100%;
height:100%;

color:#fff;
font-size: 24px;
text-align:center;

}

.oxfordText2 p{
width:100%;
height:100%;
display:none;
}





.productOxfordFifth:hover h3{display:none;}
.productOxfordFifth:hover p{display:block;}
.productOxfordFifth:hover .oxfordImage{display:none;}
.productOxfordForth:hover h3{display:none;}
.productOxfordForth:hover .oxfordImage{display:none;}
.productOxfordForth:hover p{display:block;}
.productOxfordThird:hover h3{display:none;}
.productOxfordThird:hover .oxfordImage{display:none;}
.productOxfordThird:hover p{display:block;}
.productOxfordSecond:hover h3{display:none;transition-duration: 2s;}
.productOxfordSecond:hover .oxfordImage{display:none;}
.productOxfordSecond:hover p{display:block}
.productOxfordFirst:hover h3{display:none;}
.productOxfordFirst:hover .oxfordImage{display:none;}
.productOxfordFirst:hover p{display:block;}

.oxfordParagraph a{color:#000000;
padding:5px 10px 5px 25px;
border:1px solid #fe6700;
border-right:0px;  
border-radius: 20px 0 0 25px;
background-color: #fff;
font-size: 14px;
text-align:center;
font-weight:bold;}
.oxfordParagraph a:hover{color:#fe6700;
}

.oxfordDarkBoxSP{
display:flex;
justify-content: center;
flex-wrap:wrap;
}



.productOxfordSP{height:300px; width:220px; background-color:#000;margin:10px; border-radius:20px;}
.productOxfordForthSP{ position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordThirdSP{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordSecondSP{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFirstSP{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFifthSP{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productOxfordFifthSP:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordForthSP:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordThirdSP:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordSecondSP:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productOxfordFirstSP:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}

.oxfordImageSP{position:absolute;
width:100%;
height:100%;
border-radius:20px;
background-color: rgba(23, 55, 77, 0.8);}

.oxfordTextSP{position:absolute;
top: 50%;
left:50%;
border-radius:20px;
transform: translate(-50%, -50%);
}
.oxfordText2SP{position:absolute;
bottom: 10px;
right:0px;

}
.oxfordTextSP h3{width:100%;
height:100%;

color:#fff;
font-size: 24px;
text-align:center;

}

.oxfordText2SP p{
width:100%;
height:100%;
display:none;

}





.productOxfordFifthSP:hover h3{display:none;}
.productOxfordFifthSP:hover p{display:block;}
.productOxfordFifthSP:hover .oxfordImageSP{display:none;}
.productOxfordForthSP:hover h3{display:none;}
.productOxfordForthSP:hover .oxfordImageSP{display:none;}
.productOxfordForthSP:hover p{display:block;}
.productOxfordThirdSP:hover h3{display:none;}
.productOxfordThirdSP:hover .oxfordImageSP{display:none;}
.productOxfordThirdSP:hover p{display:block;}
.productOxfordSecondSP:hover h3{display:none;transition-duration: 2s;}
.productOxfordSecondSP:hover .oxfordImageSP{display:none;}
.productOxfordSecondSP:hover p{display:block}
.productOxfordFirstSP:hover h3{display:none;}
.productOxfordFirstSP:hover .oxfordImageSP{display:none;}
.productOxfordFirstSP:hover p{display:block;}

.oxfordParagraphSP a{color:#000000;
padding:5px 10px 5px 25px;
border:1px solid #fe6700;
border-right:0px;  
border-radius: 20px 0 0 25px;
background-color: #fff;
font-size: 14px;
text-align:center;
font-weight:bold;}
.oxfordParagraphSP a:hover{color:#fe6700;
}

.oxfordSeriesContanair{
display: flex;
flex-wrap: wrap;

justify-content: space-around;

}


@media (max-width: 1000px){
.oxfordSeriesContanair{justify-content: flex-start;}}

.oxfordSeriesBox{width:200px;
padding:25px;
font-size:16px;
font-family:'Century gothic', 'Arial', sans-serif;
color: #17374d;
}

.oxfordSeriesBox:hover {

padding-bottom:23px;

cursor: pointer;
}

.oxfordSeriesBox p:hover {
font-weight:bold;
font-size:17px;
color: #ec671a;
cursor: pointer;
}
.h2Oxford{
margin-top:40px;
color:#17374d;
}

.logoOxfordSeries .aaa{display:none;}
.logoOxfordSeries:hover .aaa{display:block;}
.logoOxfordSeries:hover p{display:none;}

.headerbg h2 {
font-family:'Century gothic', 'Arial', sans-serif;
font-size:36px;
color:#17374d;
font-weight: bold;}

.headerbg p {
font-family:'Century gothic', 'Arial', sans-serif;
font-size:16px;
color:#17374d;}


.cornDarkBox{
display:flex;
justify-content: center;
flex-wrap:wrap;
}

.productCorn{height:220px; width:220px; background-color:#000;margin:10px; border-radius:20px;}
.productCornForth{ position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productCornThird{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productCornSecond{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productCornFirst{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productCornFifth{position:relative; background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/bazowy/o-firmie-gowork-1110x411.jpg');
background-size: cover; background-position:center;}
.productCornFifth:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productCornForth:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productCornThird:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productCornSecond:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}
.productCornFirst:hover{ background-image: url('https://static.connector-b2b.com/design/accounts/polanglob2c/img/czuczu/gry_zabawki_edukacyjne_czuczu_edugaleria_konkurs.png');}

.cornImage{position:absolute;
width:100%;
height:100%;
border-radius:20px;
background-color: rgba(228, 8, 22, 0.8);}

.cornText{position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
.cornText2{position:absolute;
bottom: 10px;
right:0px;

}
.cornText h3{width:100%;
height:100%;

color:#fff;
font-size: 24px;
text-align:center;

}

.cornText2 p{
width:100%;
height:100%;
display:none;
}





.productCornFifth:hover h3{display:none;}
.productCornFifth:hover p{display:block;}
.productCornFifth:hover .cornImage{display:none;}
.productCornForth:hover h3{display:none;}
.productCornForth:hover .cornImage{display:none;}
.productCornForth:hover p{display:block;}
.productCornThird:hover h3{display:none;}
.productCornThird:hover .cornImage{display:none;}
.productCornThird:hover p{display:block;}
.productCornSecond:hover h3{display:none;}
.productCornSecond:hover .cornImage{display:none;}
.productCornSecond:hover p{display:block;}
.productCornFirst:hover h3{display:none;}
.productCornFirst:hover .cornImage{display:none;}
.productCornFirst:hover p{display:block;}
.productCorn:hover .cornLabel{display:block;}
.cornParagraph a{color:#000000;
padding:5px 10px 5px 25px;
border:1px solid #fe6700;
border-right:0px;  
border-radius: 20px 0 0 25px;
background-color: #fff;
font-size: 14px;
text-align:center;
font-weight:bold;}
.oxfordParagraph a:hover{color:#fe6700;
}

.cornLabel{display:none;
position:absolute;
background-color: #e40816;
color:white;
font-weight:bold;
font-size:13px;
padding:5px 20px;
border-radius: 0 20px 20px 0;}


.outletInfo{padding:20px 10px 5px 10px;
font-size:12px;
font-weight:bold; }
.outletInfo2{padding:5px 10px 0px 10px;
font-size: 11px;
color:#888888;}



.oxfordSetBox{
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content: space-around;
}


.oxfordSetBox div{
padding:20px;
}

@media (min-width: 897px){
.oxfordSetBox div{
padding:20px 90px;
}
}

@media (min-width: 1151px){
.oxfordSetBox div{
padding:20px 20px;
}
}





.oxfordSetTitle{
text-align:center;
font-family:'century gothic', 'Arial', sans-serif;
padding:40px 20px 0 20px;
font-size:26px;
font-weight:bold;
}


.adsBanerContanair{
display:grid;
grid-template-columns: 1fr 1fr;
row-gap:10px;
column-gap:20px;


}
.adsBanerBox{
display:grid;
grid-template-columns: 1fr 1fr;
row-gap:20px;
column-gap:20px;

}



@media (max-width: 600px){
.adsBanerContanair{
grid-template-columns: 1fr;
}
}

.adsBanerBox1{

height:200px;
}

.adsBanerBox2{

height:200px;
}

.adsBanerBox3{

height:200px;
}

.adsBanerBox4{

height:200px;
}

.adsBanerContanairBox1{background-color:#ff6600;
border-radius:20px;
height:420px;
border: 1px solid #eeeeee;}


.oxfordSetBox2{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
row-gap:50px;
column-gap:30px;
place-items: center;
margin-top:40px;
margin-bottom:40px;
}

.goToRight{
margin:right:30px;
margin-left: -30px;
}

@media (max-width: 1200px){
.oxfordSetBox2{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.goToRight{
margin:right:0px;
margin-left: 0px;
}


}

@media (max-width: 800px){
.oxfordSetBox2{
grid-template-columns: 1fr 1fr;
}
.goToRight{
margin:right:0px;
margin-left: 0px;
}


}

@media (max-width: 400px){
.oxfordSetBox2{
grid-template-columns: 1fr;
}
}





.oxfordSetBox3{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
row-gap:50px;
column-gap:30px;
place-items: center;
margin-top:40px;
margin-bottom:40px;
}


@media (max-width: 1200px){
.oxfordSetBox3{
grid-template-columns: 1fr 1fr 1fr 1fr;
}


}

@media (max-width: 800px){
.oxfordSetBox3{
grid-template-columns: 1fr 1fr;
}


}

@media (max-width: 600px){
.oxfordSetBox3{
grid-template-columns: 1fr;
}
}




.aadsBanerContanair{
display:grid;
grid-template-columns: 1fr 1fr;
row-gap:10px;
column-gap:20px;
padding:0 30px;


}
.aadsBanerBox{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap:10px;
column-gap:20px;

}



@media (max-width: 600px){
.aadsBanerContanair{
grid-template-columns: 1fr;
padding: 0 0;
}
}

.aadsBanerBox1{


}

.aadsBanerBox2{


}

.aadsBanerBox3{


}

.aadsBanerBox4{


}



.legoBox{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;

}
@media (max-width: 1200px){
.legoBox{grid-template-columns: 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
margin-left:10px;
margin-right:10px;
}}
@media (max-width: 720px){
.outlet{grid-template-columns: 1fr 1fr;}}





.outlet2{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:30px;
row-gap:30px;
text-align:center;
color:#f1d39b;
}
@media (max-width: 1200px){
.outlet2{grid-template-columns: 1fr 1fr;
column-gap:10px;
row-gap:10px;
margin-left:10px;
margin-right:10px;
}}
@media (max-width: 720px){
.outlet2{grid-template-columns: 1fr 1fr;}}


.outletBox2{
border: 1px solid #f1d39b;
border-radius: 20px;
text-align:center;
background-color: #171b27;
color:f1d39b;
}

.outletText2{
color:#f1d39b;
font family: 'century gothic', sans-serif;
font-size: 18px;
font-weight:bold;
padding:30px 20px 25px 20px;
}
.outletText2 a{
color:#f1d39b;
}

@media (max-width: 1280px){
.outletText2{font-size: 14px;
padding:20px 10px 15px 10px;
}}



.calendarAdventBox{
display:flex;
flex-wrap: wrap;
align-items:center;
justify-content: center;
background-color: #BA2B2E;
padding:10px 0 10px 0;}


.calendarAdventBox2{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:0px;

}
@media (max-width: 850px){
.calendarAdventBox2{grid-template-columns: 1fr ;}}


.calendarAdventContenair{
display:flex;
flex-wrap: wrap;
align-items:center;
justify-content: center;
background-color: #BA2B2E;
padding:10px 0 10px 0;}


.calendarAdventPoint{
padding:5px;
}



.calendarAdventTitle1{text-align:right;
}
@media (max-width: 850px){
.calendarAdventTitle1{text-align:center;}}



.calendarAdventTitle2{text-content:left;
}
@media (max-width: 850px){
.calendarAdventTitle2{text-align:center;}}




.oxfordDarkBox22{
display:flex;
justify-content: left;
flex-wrap:wrap;
}

.oxfordDarkBox223{
display:flex;
justify-content: left;
flex-wrap:wrap;
}
.oxfordDarkBox224{
display:flex;
justify-content: left;
flex-wrap:wrap;
}

.productOxford22{height:200px; margin-left:10px; margin-right:10px; border-radius:20px; box-shadow: 5px 5px 15px gray;}

.productOxford223{height:200px; margin-left:30px; margin-right:30px; border-radius:20px; box-shadow: 5px 5px 15px gray;}
.productOxford224{margin-left:30px; margin-right:30px;  box-shadow: 5px 5px 15px gray;}
.productOxfordTite22{text-align:center;
font-family: 'century gothic', sans-serif;
font-size:12px;
max-width: 140px;
margin-top:20px;
margin-bottom:20px;
}

.productOxfordv2:hover{
color:#fe6700;
font-weight:bold;
transform: scale(1.2);
}

.oxfordLine{margin-top:-10px; 
margin-bottom:20px;}


.productOxfordTite223{text-align:center;
font-family: 'century gothic', sans-serif;
font-size:12px;

margin-top:20px;
margin-bottom:20px;
}



.oxfordSerieBox{width:200px;
padding:25px;
font-size:12px;
font-family:'Century gothic', 'Arial', sans-serif;
color: #17374d;
}


.oxfordSerieBox p:hover {
font-weight:bold;
color: #ec671a;
cursor: pointer;
}


.oupNav{
display:flex;
justify-content: center;
flex-wrap:wrap;
flex-direction: row;
position:sticky;
top:60px;

}


.oupNavElement{
padding:30px;
border: 1px solid #dddddd;
border-radius:20px;
padding:25px;
font-size:12px;
font-family:'Century gothic', 'Arial', sans-serif;
color: #17374d;
background-color: #ccc;
margin-left:20px;
margin-right:20px;
display: inline;
list-style: none;
}

.titleOUP{

height:120px;
scroll-margin-top: 135px;
}




.dziadki{display:grid;
grid-template-columns: 1fr 1fr 1fr ;
column-gap:20px;
row-gap:20px;
text-align:center;
margin-left:20px;
margin-right:20px;
}
@media (max-width: 720px){
.dziadki{grid-template-columns: 1fr;
column-gap:10px;
row-gap:10px;
margin-left:100px;
margin-right:100px;
}}



.dziadkiBox{

border-radius: 20px;
text-align:center;
background-color: #011e69;
}

.dziadkiText {

font family: 'century gothic', sans-serif;
font-size: 18px;

padding:10px 0px 5px 0px;
}



.dziadkiText a{
color: #f0fd84;
font family: 'century gothic', sans-serif;
font-size: 18px;

}
.dziadkiText a:hover{
color: #ffffff;
}

@media (max-width: 720px){
.dziadkiText{font-size: 14px;
padding:5px 0px 5px 0px;
}}








.ferie{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;
margin-left:10px;
margin-right:10px;
}

@media (max-width: 1200px){
.ferie{grid-template-columns: 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
margin-left:10px;
margin-right:10px;
}}

@media (max-width: 720px){
.ferie{grid-template-columns: 1fr;
column-gap:10px;
row-gap:10px;
margin-left:10px;
margin-right:10px;
}}



.ferieBox{

border-radius: 20px;
text-align:center;
background-color: #070b40;
}

.ferieText {

font family: 'century gothic', sans-serif;
font-size: 18px;
font-weight:bold;
padding:10px 0px 5px 0px;
}



.ferieText a{
color: #f5930a;
font family: 'century gothic', sans-serif;
font-size: 18px;
font-weight:bold;
}
.ferieText a:hover{
color: #fff;
}

@media (max-width: 720px){
.ferieText{font-size: 14px;
padding:5px 0px 5px 0px;
}}



.wiosna{display:grid;
grid-template-columns: 1fr 1fr 1fr ;
column-gap:20px;
row-gap:20px;
text-align:center;
margin-left:20px;
margin-right:20px;
}
@media (max-width: 720px){
.wiosna{grid-template-columns: 1fr;
column-gap:10px;
row-gap:10px;
margin-left:100px;
margin-right:100px;
}}



.wiosnaBox{

border-radius: 20px;
text-align:center;
background-color: #b8c714;
}

.wiosnaText {

font family: 'century gothic', sans-serif;
font-size: 18px;

padding:10px 0px 5px 0px;
}



.wiosnaText a{
color: #000000;
font family: 'century gothic', sans-serif;
font-size: 18px;

}
.wiosnaText a:hover{
color: #ffffff;
}

@media (max-width: 720px){
.wiosnaText{font-size: 14px;
padding:5px 0px 5px 0px;
}}


.blogLego{
display: flex;
flex-wrap:wrap;
justify-content: center;}

.blogLegoBox{
max-width:200px;
padding:20px;
}

.blogLegoImg{
height:150px;

}

.blogLegoTitle h3{font-size:10px;}



.blogItaly{
display: flex;
flex-wrap:wrap;
justify-content: center;}

.blogItalyBox{
width:200px;
padding:20px;
}

.blogItalyImg{
height:150px;

}

.blogItalyTitle h3{font-size:10px; line-height:15px;}





.dzieci{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr ;
column-gap:20px;
row-gap:20px;
text-align:center;
margin-left:20px;
margin-right:20px;
}
@media (max-width: 720px){
.dzieci{grid-template-columns: 1fr;
column-gap:10px;
row-gap:10px;
margin-left:100px;
margin-right:100px;
}}



.dzieciBox{

border-radius: 20px;
text-align:center;
background-color: #472b68;
}

.dzieciText {

font family: 'century gothic', sans-serif;
font-size: 18px;

padding:5px 0px 5px 0px;
}



.dzieciText a{
color: #fdfeb0;
font family: 'century gothic', sans-serif;
font-size: 16px;

}
.dzieciText a:hover{
color: #ffffff;
font-size: 18px;
}

@media (max-width: 720px){
.dzieciText{font-size: 14px;
padding:5px 0px 5px 0px;
}}

.americanSchool{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top:10px;
align-items: center;
}



.funkoPage{display:flex;
flex-wrap:wrap;
align-items:center;
justify-content: center;
text-align:center;

}


.funkoBox{
margin:5px 5px;
max-width:400px;
background-color: #f0b60d;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content: center;
text-align:center;
padding:15px 15px;
transition:color 1s;
transition:background-color 1s;}


.funkoText{
width:250px;
display:inline-block;

}
.funkoBox a{
color: #1c1c1c ;
font-size: 18px;
}


.funkoBox:hover{
font-size:18px;
background-color: #1c1c1c ;
}


.funkoBox:hover a{
color:  #f0b60d;

}



.awordsPage{display:flex;
flex-wrap:wrap;
align-items:center;
justify-content: center;
text-align:center;

}


.awordsBox{
margin:5px 5px;
max-width:280px;
background-color: #166d87;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content: center;
text-align:center;
padding:15px 15px;
transition:color 1s;
transition:background-color 1s;}


.awordsText{
width:280px;
display:inline-block;

}
.awordsBox a{
color: #fff ;
font-size: 14px;
font-weight: bold;
}


.awordsBox:hover{

background-color: #c4e5eb ;
}


.awordsBox:hover a{
color:  #000;

}



.blogTextBox{
display:flex;
flex-wrap:wrap;
padding: 10px 10px;
;}


.blogText{
max-width:75%
}
.blogImg{
padding: 10px 10px;
width:25%;
display:flex;
justify-content:center;

}



@media (max-width: 720px){
.blogText{
max-width:100%
}
.blogImg{

width:100%;



}}



.gaudamaus{
margin:0 35px;
display:flex;
flex-wrap: wrap;
justify-content: start;
padding-top:10px;
align-items: center;
}




.cis2{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.cis2{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.cis2{grid-template-columns: 1fr 1fr;}}



.oupLevels{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap:60px;
row-gap:20px;
text-align:center;
padding-top:20px;
}

@media (max-width: 1100px){
.oupLevels{grid-template-columns: 1fr 1fr;}}
@media (max-width: 720px){
.oupLevels{grid-template-columns: 1fr;}}




.oupLevelTitle{
text-align:left;
font-size: 24px;
color:#17374d;
font-weight: bold;
margin-top: 10px;
}

.oupPLS{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.oupParagraphs{
margin: 40px 0px;
}



.oupItemsBox{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:10px;

}

@media (max-width: 1100px){
.oupItemsBox{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.oupItemsBox{grid-template-columns: 1fr 1fr;}}



.oupItemsBoxContanair{
margin-top:40px;
background-color: #f1f7f7;
padding:20px;}



.oupItemIMG{
position: relative;
display:flex;
justify-content: left;}



.oupItemIMGLabel{
position: absolute;
background-color: #fe6700;
color:#fff;
font-size:12px;
padding:5px 10px;
top: -10px;
left: -10px;
border-radius: 5px; 
}




.oupGrammarAndTeachers{display:grid;
grid-template-columns: 1fr 1fr;
column-gap:20px;
row-gap:20px;
text-align:center;
padding-top:10px;

}

@media (max-width: 720px){
.oupGrammarAndTeachers{grid-template-columns: 1fr;}}




.przycisk-oup {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
   
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;

    color: #fff;
    background-color: #fe6700;
    border-color: #d82e33;


    font-size: 13px;

    min-width: 180px;


    border-radius: 30px;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    line-height: 50px;
    padding-left: 2em;
    padding-right: 2em;
}

.przycisk-oup:hover {
    background-color: #17364b;
    color:white;
}

.przycisk-oup:focus {
    color:white;
}



.oupOxfordReadingClub{display:grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap:50px;
row-gap:20px;
text-align:center;
padding-top:10px;

}

@media (max-width: 800px){
.oupOxfordReadingClub{grid-template-columns: 1fr;}}



.oupLevelImg:hover{
transform: scale(1.1);

}

.oupItemIMG:hover{
transform: scale(1.1);

}

.oupGatImg:hover{
transform: scale(1.05);

}


.outletBox3{
border-radius: 15px;
text-align:center;
background-color: #242424;
color:#FFEB00;
}
.outletText3{
font family: 'century gothic', sans-serif;
font-size: 14px;
font-weight:bold;
padding:5px 10px 0px 10px;
color:#FFEB00;
}

.outletText3 a{
color:#FFEB00;
}


.outletText3 a:hover{
color:#fe6700;
}


.oupOrc{display:grid;
grid-template-columns: 1fr;
row-gap:20px;
text-align:center;
padding-top:10px;


}
#cookie-policy .reject-all-cookies-btn {
 display:none;
}

.educationDayBaner{
margin-bottom: 60px;
}

.educationDayBox{
display: flex;
flex-wrap: wrap;
}


.educationDayText{
display:flex;
flex-wrap: no-wrap;
margin-bottom: 40px;
}

.educationDayTitle{
width: 70%;
display:flex;
justify-content: flex-start;
align-items: center;
padding-left: 15px;
font-size: 12px;

}


.educationDayCheck{
width: 30%;
display:flex;
justify-content: flex-end;
align-items: center;
padding-right: 35px;
font-size: 12px;
font-weight: bold;
}


.promotionEgBaner{
margin-bottom: 60px;
}

.promotionEgBox{
display: flex;
flex-wrap: wrap;
}
.promotionEgInfo{
display: flex;
flex-wrap: no-wrap;
}

.promotionEgText{
display:flex;
flex-wrap: no-wrap;
margin-bottom: 40px;
}
.promotionEgImg{
width:200px;
}

.promotionEgInfoBox{
width:200px;
}


.promotionEgTitle{
width: 65%;
display:flex;
justify-content: flex-start;
align-items: center;
padding-left: 15px;
font-size: 12px;

}


.promotionEgCheck{
width: 35%;
display:flex;
justify-content: flex-end;

padding-right: 60px;
font-size: 12px;
font-weight: bold;
}
.promotionEgGrayBox{
margin:10px 60px 0px 20px;
background-color:#f1f1f1 ;
border-radius:10px;
padding: 10px 0px 10px;
}

.promotionEgGrayInBox{
display:flex;
justify-content:flex-end;
padding: 5px 0px 5px;
}

.promotionEgGrayIcon{
display:flex;
justify-content:flex-end;
width:25%;
}

.promotionEgGrayText{
display:flex;
justify-content:flex-end;
width:75%;
padding-right:20px;
color:#7A7A7A;
}

.promotionEgPrice{
display:flex;
flex-wrap: no-wrap;
justify-content:flex-end;
margin-right:60px;
}




.examMainClick{
display: flex;
flex-wrap: wrap;
justify-content: space-between;

}

.examMainClick div{
margin: 0px auto;}


.examSubjectClick{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top:30px;
}



.examPublishingHouse{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top:30px;
margin:0-auto;
}

.examHitClick{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top:30px;
margin: 0px auto;
}


.examBookClick{
width:200px;
margin: 0px auto;
padding-bottom:20px;
}


.examUnderTitle{
font-size:12px;
text-align:center;
font-weight:bold;
}

.examUnderTitle2{
font-size:12px;
width:180px;
height:30px;
}

.examUnderTitle3{
font-size:12px;
width:180px;
}


.examMoreInfo{
padding:20px 0 20px 0; 
text-align:center;
font-size:12px;
font-weight:bold;
}


.examBaner{
padding:20px 0 30px 0;

}


.examTitle{
font-size:28px;
color:#0d1f40;
padding:40px 0 0 0;
font-family: 'Arial Narrow', 'Arial';
font-weight:bold;
}

.examTitle2{
font-size:20px;
color:#0d1f40;
padding:30px 0 0 0;
font-family: 'Arial Narrow', 'Arial';
font-weight:bold;
}

.examElement{
margin: 0px auto;
}




.promotionEgGrayBox2{
margin:20px 40px 0px 1px;

padding: 10px 0px 10px;
}




.promotionEgGrayInBox2{
display:flex;
justify-content:flex-end;
text-align: right;
padding: 5px 0px 5px;
}


.promotionEgGrayText2{
display:flex;
justify-content:flex-end;
width:100%;
margin-right:20px;
color:#7A7A7A;
font-size:12px;
color:black;
}
.promotionEgItem{
width:400px;
}
label[for=delivery_1015] .radio-label span:not([class]) {
    font-weight: bold;
    color: #DC4348;
}

.bestToysBox{
display:flex;
justify-content:center;
flex-wrap:wrap;

}

.bestToysPresentBox{
width:200px;
padding-top:5px;
padding-bottom:5px;
transition: box-shadow 0.5s;

}


.bestToysPresentBox:hover{
border: 1px solid #ddd;
border-radius:10px;
padding-top:4px;
padding-bottom:4px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
.bestToysPresentTitle{
padding-top:5px;
padding-bottom:5px;
}

.bestToysPresentImg{
padding-top:5px;
padding-bottom:5px;

}


.adventCalendarBox{
display:flex;
flex-wrap:wrap;
justify-content:center;
background-color: #cbd7d4;
padding:20px 5px;
}
.adventCalendarBig{
width:25%;
}

.adventCalendarSmallBox{
width: 75%;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.adventCalendarSmall{
width:12%;
padding:5px;
}



@media (max-width: 700px){
.adventCalendarSmallBox{
width: 100%;

}
.adventCalendarBig{
width:100%;
text-align:center;
}
.adventCalendarSmall{
width:33%;

}}




.blogBox h3{font-size:14px;}



.outletBoxPrice{
display:flex;
flex-wrap:wrap;
justify-content:center;
}


.outletBoxPriceImg{
padding:5px;
}
div#i-0 {
    width: var(--window-width);
    left: var(--container-offset-left-negative);
}

.slideshow-i-main-panel-content[data-panel-id="slideshow-0"] .panel-body {
    padding: 15px 0;
}





.weekBox{

border-radius:20px; 
border: 1px #e7e7e7 solid;
position:relative;
}

.weekBoxTop{
background: radial-gradient(circle, #fcad77, #fe6700);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display:flex;
justify-content:center;
align-items:center;
}
.weekBoxBottom{
display:flex;
flex-wrpa:no-wrap;
}
.weekBoxBottomLeft{
padding-left:10px;
padding-right:10px;
}
.weekBoxBottomRight{
margin-right:15px;
padding-left:10px;
padding-right:10px;
text-align:center;
}


.weekBoxButton{
padding-top:20px;

}



.weekBoxlabel{
display:flex;
position: absolute;
z-index:1;
background-color:#f8f8f8;
border: 1px #e7e7e7 solid;
border-radius:16px;
width:120px;
height:70px;
right:10px;
top:10px;
}

.weekBoxlabelLeft{
padding-left:10px;
padding-right:10px;
display:flex;
justify-content:center;
align-items:center;}


.weekBoxlabelRight{
display:flex;
justify-content:center;
align-items:center;}


.hamiltonLevelBox{
display:flex;
flex-wrap: wrap;
max-width:1400px;
justify-content: center;
}
.hamiltonLevel{
max-width:580px;
display:flex;
flex-wrap: wrap;
background-color:#f1f7f7;
padding-left:25px;
margin:10px;
}

.hamiltonLevel2{
max-width:580px;
display:flex;
flex-wrap: wrap;
padding:10px 0 20px 0;
}


.hamiltonLevelTitle{
width:165px;
margin-top:10px;
}


.hamiltonLevelText{
padding-top:10px;
padding-bottom:10px;
font-size:14px;
font-weight: bold;
color: #17374d;

}


.hamiltonLevelHeader{
max-width:580px;
min-width:420px;
font-size:24px;
}


.hamiltonLevelHeader p{
font-size:24px;
font-weight: bold;
color: #17374d;
}


.hamiltonCircleBox{
display:flex;
flex-wrap: wrap;
max-width:1400px;
justify-content: center;
margin-bottom:40px;
}



.hamiltonCircle{
margin:20px;
}



.hamiltonLevelTextCircle{
padding-top:10px;
font-size:14px;
font-weight: bold;
color: #17374d;
text-align:center;
}



.hamiltonHouseTitle p{
font-size:28px;
font-weight: bold;
color: #17374d;
margin-top:40px;
}

.hamiltonLevelIMG{
height:200px;
display:flex;
align-items: center;
}


.secendaryBG{
max-width:1200px;
height:300px;
background-image:url('https://b.assecobs.com/accounts/polanglob2c/stock/podrerczniki/Podr%C4%99czniki2026_11.png?vh=060389');
position: relative;
text-align:center;
margin: 0 auto;
}

.secondaryBox{
width:700px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;


}


.secondaryClass{
height:120px;
width:120px;
background-color: #2ea836;
color: #fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:20px;
test-transform: uppercase;
text-align:center;
transition: background-color .5s, border .5s;

}

.secondaryClass:hover{
background-color:#cdec06;
color:#000;
}


@media (max-width: 1100px){
.secendaryBG{
max-width:600px;
height: 500px;
background-image:url('https://b.assecobs.com/accounts/polanglob2c/stock/podr%C4%99czniki+2025-2026/podreczniki+backgr+mobile.jpg?vh=6ecdcc');
background-size:cover;
background-position:center;

}

.secondaryBox{
max-width:100%;
width:400px;
height: 400px;
justify-content: center;

}

.secondaryClass{
height:120px;
width:120px;

margin:0 10px;
}


}


 /* Wrapper strony */
    .session2025-container-wrapper {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 10px;
      box-sizing: border-box;
    }

    /* Kontener na dwa boksy */
    .session2025-container {
      max-width: 1200px;
      display: flex;
      flex-wrap: wrap;
margin: 0 auto;    }

    .session2025-box {
      flex: 1 1 200px;
      max-width: 100%;
    }

    /* Zwyk?y obrazek */
    .session2025-img-wrapper {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 516 / 290; /* dla proporcji ? fallback mo?na doda? poni?ej */

    }

    .session2025-img-wrapper img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    /* Hover efekt */
    .session2025-scale-container {
      position: relative;
      width: 100%;
    }

    .session2025-scale-container::before {
      content: "";
      display: block;
      padding-top: calc(290 / 516 * 100%); /* proporcja 290px wysoko?ci przy 516px szeroko?ci */
    }

    .session2025-hover-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .session2025-hover-wrapper img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
 
    }

    .session2025-hover-wrapper img.second {
      opacity: 0;
      z-index: 1;
    }

    .session2025-hover-wrapper:hover img.first {
      opacity: 0;
    }

    .session2025-hover-wrapper:hover img.second {
      opacity: 1;
    }

    /* RWD: jeden pod drugim na mobilkach */
    @media (max-width: 768px) {
      .session2025-container {
        flex-direction: column;
      }
    }

.classSpan{
text-transform: uppercase;

}



.secondaryClass a {
  color: #fff;
}


.secondaryClass a:hover {
  color: #000;
}


.secondaryLanguageBox{
max-width:1200px;
display:flex;
flex-wrap: wrap;
justify-content: center;
margin:0 auto;
}


.secondaryLanguageItem{
width: 200px;
padding:10px;
text-align:center;
}
.secondaryLanguageItem:hover{
transform: scale(1.1)}

.secondaryORM{
max-width:1200px;
display:flex;
margin:0 auto;
}


.secondaryBoxBooks{
max-width:1200px;
display:flex;
flex-wrap: wrap;
justify-content: center;
padding: 2em 0;
margin: 0 auto;
}

.secondaryItemBooks{
width:580px;
padding:10px;
text-align:center;
}


.secondaryItemBooks:hover{
transform: scale(1.05)
}




.secendaryBGSP {
  max-width: 1200px;
  height: auto;
  background-image: url('https://b.assecobs.com/accounts/polanglob2c/stock/podr%C4%99czniki%202025-2026/Podreczniki-SP-off_12.png?vh=652f08');
  position: relative;
  text-align: center;
  margin: 0 auto;
  padding: 20px 0; /* widoczne t?o góra/dó? */
}

.secondaryBoxSP {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 700px; 
  margin: 0 auto;
}

.secondaryClassSP {
 height: 120px;
  width: 150px;
  background-color: #13D0E0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  text-align: center;
  transition: background-color 0.5s, border 0.5s;
  line-height: 1.2;
  padding: 5px; /* ?eby tekst si? mie?ci? */
  box-sizing: border-box;}

.secondaryClassSP:hover {
  background-color: #F85735;
  color: #000;
}

@media (max-width: 1100px) {
  .secendaryBGSP {
    max-width: 100%;
    height: auto;
    background-image: url('https://b.assecobs.com/accounts/polanglob2c/stock/podr%C4%99czniki+2025-2026/podreczniki-SP-backgr-mobile.png?vh=0b0fed');
    background-size: cover;
    background-position: center;
  }

  .secondaryBoxSP {
   max-width: 280px;
    justify-content: center;
    gap: 20px;
  }

  .secondaryClassSP {
    width: 120px;
    height: 120px;
  }
}

.secondaryClassSP a {
  color: #fff;
}

.secondaryClassSP a:hover {
  color: #000;
}

.AutumnBox{
max-width: 320px;
padding: 10px;
transition: box-shadow 0.5s, border 0.5s;
border: 1px solid transparent;
border-radius: 10px;
}

.AutumnBox:hover{
border: 1px solid #ddd;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}

.AutumnBox img {
  transition: transform 0.3s ease;
}

.AutumnBox:hover img {
  transform: scale(1.05);
}

.AutumnTitle{
padding-top:10px;
}

.beek-hover-scale img {
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 0px rgba(255, 0, 0, 0));
}

.beek-hover-scale:hover img {
  transform: scale(1.05) translateY(-5px);
  filter: drop-shadow(0 3px 8px rgba(255, 0, 0, 0.5)) brightness(1.05);
}

.bw-wrapper .bw-img {
  display: block;
  border-radius: 8px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s ease;
}

.bw-wrapper .bw-item.bw-static {
  display: inline-block;
  transition: transform 0.35s ease;
}

.bw-wrapper .bw-item.bw-static .bw-img {
  transform: scale(0.97);
}

.bw-wrapper .bw-item.bw-static:hover {
  transform: translateY(-6px);
}

.bw-wrapper .bw-item.bw-static:hover .bw-img {
  transform: scale(1);
}

.bw-wrapper .bw-item:not(.bw-static) {
  display: inline-block;
  transition: transform 0.35s ease;
}

.bw-wrapper .bw-item:not(.bw-static) .bw-img {
  transform: scale(0.95);
}

.bw-wrapper .bw-item:not(.bw-static):hover {
  transform: translateY(-5px);
}

.bw-wrapper .bw-item:not(.bw-static):hover .bw-img {
  transform: scale(1);
}

.bw-wrapper .bw-title strong {
  transition: color 0.3s ease;
  display: inline-block;
  margin-top: 3px;
}

.bw-wrapper .bw-item:not(.bw-static):hover + div .bw-title strong,
.bw-wrapper .bw-title:hover strong {
  color: #c00000;
}

.sw-wrapper .sw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

.sw-wrapper .sw-img {
    width: 100%;
    max-width: 260px;
    display: block;
    border-radius: 8px;
}

.sw-wrapper .sw-title {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

@media (max-width: 900px) {
    .sw-wrapper .sw-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .sw-wrapper .sw-grid {
        grid-template-columns: 1fr;
    }
}
 /* Wrapper strony */
    .session2025-container-wrapperSP {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .session2025-containerSP {
      max-width: 1200px;
      display: flex;
      flex-wrap: wrap;
margin: 0 auto;    }

    .session2025-boxSP {
      flex: 1 1 200px;
      max-width: 100%;
    }

    .session2025-img-wrapperSP {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 516 / 290;

    }

    .session2025-img-wrapperSP img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    .session2025-scale-containerSP {
      position: relative;
      width: 100%;
    }

    .session2025-scale-containerSP::before {
      content: "";
      display: block;
      padding-top: calc(290 / 516 * 100%);
    }

    .session2025-hover-wrapperSP {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .session2025-hover-wrapperSP img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
 
    }

    .session2025-hover-wrapperSP img.second {
      opacity: 0;
      z-index: 1;
    }

    .session2025-hover-wrapperSP:hover img.first {
      opacity: 0;
    }

    .session2025-hover-wrapperSP:hover img.second {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .session2025-containerSP {
        flex-direction: column;
      }
    }

.classSpanSP{
text-transform: uppercase;

}




.wips{display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
text-align:center;
padding-top:20px;
}
@media (max-width: 1100px){
.wips{grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 720px){
.wips{grid-template-columns: 1fr 1fr;}}

.u-carousel {
  width: calc(4 * 325px + 3 * 20px); /* 4 kafle + 3 odst?py */
  overflow: hidden;
  margin: auto;
  position: relative;
}

.u-carousel__track {
  display: flex;
  gap: 20px;
  animation: scroll-carousel 24s linear infinite;
  /* bardzo wa?ne ? zapobiega zawijaniu */
  flex-wrap: nowrap;
}

.u-carousel__slide {
  width: 325px;
  height: 325px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  background: transparent;
}

/* Ruch 1s + pauza 2s = 3s na kafel => 8 kroków * 3s = 24s */
@keyframes scroll-carousel {
  0% { transform: translateX(0); }
  4.166% { transform: translateX(-345px); }
  12.5%  { transform: translateX(-345px); }

  16.66% { transform: translateX(-690px); }
  25%    { transform: translateX(-690px); }

  29.16% { transform: translateX(-1035px); }
  37.5%  { transform: translateX(-1035px); }

  41.66% { transform: translateX(-1380px); }
  50%    { transform: translateX(-1380px); }

  54.16% { transform: translateX(-1725px); }
  62.5%  { transform: translateX(-1725px); }

  66.66% { transform: translateX(-2070px); }
  75%    { transform: translateX(-2070px); }

  79.16% { transform: translateX(-2415px); }
  87.5%  { transform: translateX(-2415px); }

  91.66% { transform: translateX(-2760px); }
  100%   { transform: translateX(-2760px); }}





/* ===== MODAL CENTER ===== */
#cookie-policy {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: 300px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

background-color: rgba(44, 62, 80, 0.85); /* zmie? je?li masz zmienn? */
  z-index: 2001;

  margin: 0;
  padding: 0;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== G?ÓWNY UK?AD WEWN?TRZNY ===== */
#cookie-policy > div {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;   /* KLUCZ: brak wielkiej dziury */
  align-items: center;

  gap: 25px;                 /* kontrolowany odst?p */

  padding: 20px;
  box-sizing: border-box;

  text-align: center;
}

/* ===== TEKST (pierwszy blok) ===== */
#cookie-policy > div > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;

  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.5em;
}

/* opcjonalnie pogrubienie pierwszego elementu tekstu */
#cookie-policy > div > div:first-child *:first-child {

  margin-bottom: 8px;
}

/* ===== PRZYCISKI (drugi blok) ===== */
#cookie-policy > div > div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 15px;
  flex: 0 0 auto;

  white-space: normal;
}

/* ===== LINKI / PRZYCISKI ===== */
#cookie-policy a {
  display: inline-block;
  padding: 15px 30px;

  cursor: pointer;
  font-size: 20px;

  color: #fff;
  text-decoration: none;

  border-radius: 20px;
  background-color: #27ae60;
}

/* drugi przycisk (np. settings / reject) */
#cookie-policy a:last-child {
  background-color: #c0392b;
}

/* hover */
#cookie-policy a:hover {
  opacity: 0.9;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  #cookie-policy {
    width: 90%;
    height: auto;
  }

  #cookie-policy > div {
    height: auto;
  }
}


/* Przycisk ustawie? cookies */
.cookie-settings-btn {
  color: #fff;
  background-color: transparent !important;
  border: 1px solid #fff !important;
  padding: 16px 16px !important;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px !important;
}

/* Przycisk ?odrzu? wszystko? */
.reject-all-cookies-btn {
  background-color: rgba(44, 62, 80, 0.0) !important;
  border: 1px solid white;
  color: #fff;
  padding: 16px 16px !important;
  border-radius: 20px !important;
  cursor: pointer;
  font-size: 12px !important;
}

/* Przycisk ?akceptuj wszystko? */
.accept-all-cookies-btn {
  color: #fff;
  border: none;
  padding: 16px 16px !important;
  border-radius: 20px !important;
  cursor: pointer;
  font-size: 12px !important;
}





/* Kontener g?ówny - zajmuje 100% dost?pnej szeroko?ci */
.edugaleria-grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* Na urz?dzeniach mobilnych 1 kolumna (jeden pod drugim) */
  gap: 12px; /* Odst?py mi?dzy przyciskami */
  box-sizing: border-box;
  padding: 15px 0;
  font-family: Arial, sans-serif; /* Standardowy, czytelny font */
}

/* Uniwersalne style dla przycisków */
.edugaleria-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fe6700 ; /* Kolor podstawowy */
  color: #ffffff !important; /* Bia?y napis (wraz z nadpisaniem domy?lnych stylów linków) */
  text-decoration: none !important; /* Brak podkre?lenia */
  font-weight: bold;
  font-size: 15px;
  padding: 14px 10px;
  border-radius: 30px; /* Zaokr?glone brzegi */
  box-sizing: border-box;
  min-height: 54px; /* Jednolita minimalna wysoko?? */
  transition: background-color 0.25s ease, color 0.25s ease; /* P?ynne przej?cie hover */
  width: 100%;
}

/* Zachowanie po najechaniu myszk? (Hover) */
.edugaleria-btn:hover {
  background-color: #17364b; /* Zmiana koloru t?a */
  color: #ffffff !important;
}

/* Wersja na komputery i tablety w uk?adzie poziomym (Desktop - od 768px szeroko?ci ekranu) */
@media (min-width: 768px) {
  .edugaleria-grid-container {
    grid-template-columns: repeat(12, 1fr); /* Dzielimy przestrze? na 12 równych jednostek */
    gap: 16px; /* Nieco wi?ksze odst?py na desktopie */
  }

  /* Rz?d 1: pierwsze 4 przyciski. Ka?dy zajmuje dok?adnie 3 z 12 kolumn (12 / 4 = 3) */
  .edugaleria-grid-container .edugaleria-btn:nth-child(1),
  .edugaleria-grid-container .edugaleria-btn:nth-child(2),
  .edugaleria-grid-container .edugaleria-btn:nth-child(3),
  .edugaleria-grid-container .edugaleria-btn:nth-child(4) {
    grid-column: span 3;
  }

  /* Rz?d 2: kolejne 3 przyciski. Aby mia?y IDENTYCZN? szeroko??, równie? musz? zajmowa? po 3 kolumny. 
     Dodatkowo, dla estetyki, pierwszy przycisk w drugim rz?dzie (czyli 5. na li?cie) przesuwamy tak, 
     aby te 3 przyciski by?y wy?rodkowane wzgl?dem rz?du powy?ej (zaczynamy od 2. kolumny siatki). */
  .edugaleria-grid-container .edugaleria-btn:nth-child(5) {
    grid-column: 2 / span 3; /* Zaczyna od kolumny 2 i zajmuje 3 szeroko?ci */
  }
  
  .edugaleria-grid-container .edugaleria-btn:nth-child(6),
  .edugaleria-grid-container .edugaleria-btn:nth-child(7) {
    grid-column: span 3; /* Kolejne automatycznie wskakuj? obok zachowuj?c rozmiar */
  }
}


/* Kontener g?ówny - zajmuje full szeroko??, ale ma bezpieczny padding od kraw?dzi ekranu */
.oup-buttons-container {
  width: 100%;
  display: grid;
  /* Odst?py mi?dzy przyciskami */
  gap: 12px; 
  margin: 20px auto;
  /* DODANE: 15px bezpiecznego odst?pu od bocznych kraw?dzi ekranu na mobile */
  padding: 0 15px; 
  box-sizing: border-box;
  /* NA MOBILE: 2 kolumny */
  grid-template-columns: repeat(2, 1fr);
}

/* Styl pojedynczego przycisku */
.oup-btn {
  display: block;
  background-color: #fe6700;
  color: #ffffff !important; /* Bia?y napis */
  text-decoration: none !important;
  text-align: center;
  padding: 10px 8px; /* Mniejszy padding wewn?trz przycisku na mobile, by tekst si? mie?ci? */
  font-family: Arial, sans-serif;
  font-size: 13px; /* Optymalny font na smartfony */
  font-weight: 600;
  border-radius: 30px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Idealne centrowanie tekstu w pionie i poziomie */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; 
}

/* Efekt po najechaniu myszk? (Hover) */
.oup-btn:hover {
  background-color: #17364b;
  color: #ffffff !important;
}

/* Responsywno??: Desktop (od 768px szeroko?ci wzwy?) - dok?adnie 3 kolumny */
@media (min-width: 768px) {
  .oup-buttons-container {
    /* Prze??czenie na 3 kolumny na wi?kszych ekranach */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Wi?kszy odst?p mi?dzy przyciskami na desktopie */
    padding: 0; /* Reset bocznego paddingu kontenera, je?li na desktopie ma i?? równo z reszt? strony */
  }
  
  .oup-btn {
    font-size: 14px; /* Powrót do standardowej wielko?ci pisma */
    padding: 10px 15px; /* Standardowy padding wewn?trz przycisku */
  }
}





































/* KOSZYK */

#cart-table .abs-attributes-list {
    display: none !important;}



/* ==========================================================================
   1. PRZYCISK "DALEJ" (STAN NIEAKTYWNY) - WYMUSZENIE SZARO?CI
   ========================================================================== */
div.cart-btn-proceed-tooltip-wrapper.disabled button,
div.cart-btn-proceed-tooltip-wrapper.disabled button.btn,
div.cart-btn-proceed-tooltip-wrapper.disabled button.btn-success,
.cart-btn-proceed-tooltip-wrapper.disabled [type="button"],
.cart-btn-proceed-tooltip-wrapper.disabled button:disabled {
    background: #e0e0e0 !important;
    background-color: #e0e0e0 !important;
    background-image: none !important; /* Usuwa ewentualne gradienty */
    color: #757575 !important;
    border: 1px solid #d6d6d6 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    text-shadow: none !important; /* Usuwa ewentualne cienie pod tekstem */
}

/* ==========================================================================
   2. PRZYCISK "DALEJ" (STAN AKTYWNY) - WYMÓWKA DLA WYSOKO?CI I KOLORU
   ========================================================================== */
div.cart-btn-proceed-tooltip-wrapper:not(.disabled) button,
div.cart-btn-proceed-tooltip-wrapper:not(.disabled) button.btn-success {
    background: #e65c00 !important;
    background-color: #e65c00 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    height: 54px !important; /* Wyra?ne podwy?szenie przycisku */
    line-height: 54px !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* ==========================================================================
   3. PRZYCISK KUPONU - DEGRADACJA DO SZARO?CI (Zrzucenie z niego pomara?czu)
   ========================================================================== */
button#voucher-submit-button,
button#voucher-submit-button.btn-success,
.input-group-btn button#voucher-submit-button,
div.abs-voucher-code-input-group button.btn-success {
    background: #6c757d !important;
    background-color: #6c757d !important;
    background-image: none !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

button#voucher-submit-button:hover {
    background: #5a6268 !important;
    background-color: #5a6268 !important;
}


#voucher-cancel-button {
    height: 44px !important;
}


/* ==========================================================================
   4. TOOLTIP CSS (PODPOWIED? PO NAJECHANIU NA ZABLOKOWANY "DALEJ")
   ========================================================================== */
div.cart-btn-proceed-tooltip-wrapper.disabled {
    position: relative !important;
    overflow: visible !important;
}

div.cart-btn-proceed-tooltip-wrapper.disabled:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #222222 !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    z-index: 99999 !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none !important;
}

div.cart-btn-proceed-tooltip-wrapper.disabled:hover::before {
    content: "" !important;
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #222222 transparent transparent transparent !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}





/* ==========================================================================
   CHIRURGICZNE POWI?KSZENIE JEDYNEGO PRZYCISKU "DALEJ" ZA POMOC? ID
   ========================================================================== */

/* 1. Rozpychamy sam przycisk od ?rodka (w pionie i poziomie) */
html body #proceedButton {
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    
    /* Rozpychanie: 14px wolnej przestrzeni od góry i do?u */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    
    display: inline-block !important;
}

/* 2. Powi?kszamy czcionk? napisu "Dalej", który siedzi wewn?trz spana */
html body #proceedButton span {
    font-size: 16px !important; /* Tutaj podbijamy wielko?? czcionki o 2px */
    font-weight: 700 !important; /* Opcjonalne pogrubienie dla lepszej widoczno?ci */
    display: inline-block !important;
}

/* 3. Upewniamy si?, ?e nadrz?dny wrapper pozwoli przyciskowi urosn?? */
html body .cart-btn-proceed-tooltip-wrapper {
    height: auto !important;
}



@media (max-width: 992px) {
  /* Ukryj podpowied? o darmowej dostawie */
  #free-delivery-hint {
    display: none !important;
  }

}


@media (max-width: 992px) {
    .abs-layout-cart-table-btns.cart-disable-on-modify {
        display: none !important;
    }
}





/* ============================================
   STICKY BOTTOM BAR ? suma + przycisk "Przejd? do kasy"
   Tylko mobile (max-width: 992px)
   ============================================ */

@media (max-width: 992px) {

    /* Rezerwujemy miejsce na dole strony, ?eby tre?? nie chowa?a si?
       pod fixed-barem. Wysoko?? = wysoko?? paska sumy + wysoko?? przycisku.
       Dostosuj warto?? je?li pasek wyjdzie wy?szy/ni?szy ni? zak?adamy. */
    body {
        padding-bottom: 112px !important;
    }

    /* ---------- 1. Pasek z sum? "Do zap?aty" ---------- */
    .abs-col-final-price.abs-money-final {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 56px; /* nad przyciskiem, dopasuj do realnej wysoko?ci przycisku */
        z-index: 1000;

        background: #ffffff;
        margin: 0;
        padding: 10px 16px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* ---------- 2. Pasek z przyciskiem "Przejd? do kasy" ---------- */
    .abs-split-layout.abs-cart-btn-layout {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;

        margin: 0;
        padding: 0;
        background: #ffffff;
    }

    /* Chowamy przycisk "wstecz" w tym pasie ? ma zosta? tylko "Przejd? do kasy" */
    .abs-split-layout.abs-cart-btn-layout .cart-btn-back {
        display: none !important;
    }

    /* Przycisk "Przejd? do kasy" na ca?? szeroko?? */
    .abs-split-layout.abs-cart-btn-layout .cart-btn-proceed {
        width: 100%;
        flex: 1 1 100%;
    }

    .abs-split-layout.abs-cart-btn-layout .cart-btn-proceed > * {
        width: 100%;
        border-radius: 0;
    }
}




body[data-action="cart"][data-controller="checkout"] iframe[id^="edrone-onsite-slider-iframe"] {
    display: none !important;
}



/* ============================================
   UKRYCIE WIDGETU TRUSTED SHOPS (badge + recenzje) ? TYLKO W KOSZYKU
   Strona: /order/checkout/cart
   ============================================ */

body[data-action="cart"][data-controller="checkout"] div[id^="trustbadge-container"] {
    display: none !important;
}




@media screen and (max-width: 768px) {
  .abs-item-price-box {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100%; /* Upewnia si?, ?e kontener rozci?ga si? na ca?? dost?pn? szeroko?? */
    text-align: right;
  }
}



.abs-money-saved{
display:none;
}



body[data-action="cart"][data-controller="checkout"] .abs-catalog-index {
    display: none !important;
}












@media (max-width: 992px) {

  .abs-cart-table thead { display: none !important; }
  .abs-cart-table,
  .abs-cart-table tbody,
  .abs-cart-table tr,
  .abs-cart-table td,
  .abs-cart-table th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }

  .abs-cart-table .abs-col-ordinal,
  .abs-cart-table .abs-col-checkbox { display: none !important; }
  .abs-cart-table .abs-attributes-list { display: none !important; }
  .abs-cart-table .abs-col-quantity .td-label { display: none !important; }
  .abs-cart-table .abs-col-quantity .touch-qnt-unit { display: none !important; }
  .abs-cart-table .abs-col-quantity .client-unit-no { display: none !important; }
  .abs-cart-table .abs-col-price .td-label { display: none !important; }
  .abs-col-value .td-label { display: none !important; }
  .abs-col-value .order-position-extra-actions { display: none !important; }
  .abs-col-price .abs-item-price-mode { display: none !important; }
  .abs-col-value .abs-item-price-mode { display: none !important; }

  /* Wiersz */
  .abs-cart-table tbody tr[id^="productTrId"] {
    display: block !important;
    position: relative !important;
    padding: 14px 0 !important;
    min-height: 100px !important; 
    border-bottom: none !important;
    overflow: visible !important; 
  }
  .abs-cart-table tbody tr[id^="productTrId"] td {
    border: none !important;
    border-bottom: none !important;
  }

  /* Miniaturka */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-thumbnail {
    position: absolute !important;
    top: 14px !important;
    left: 0 !important;
    float: none !important;
    width: 72px !important;
    padding: 0 !important;
  }
  .abs-cart-table .abs-col-thumbnail img {
    width: 72px !important; height: auto !important; display: block !important;
  }

  /* Nazwa */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-name {
    margin-left: 84px !important;
    padding: 0 28px 0 0 !important;
    width: auto !important;
    min-height: 0 !important; 
  }
  .abs-cart-table .abs-col-name .product-name a {
    font-size: 13px !important; font-weight: 600 !important;
    color: #222 !important; text-decoration: none !important; line-height: 1.4 !important;
  }
  .abs-cart-table .abs-catalog-index { font-size: 11px !important; color: #999 !important; }

  /* POPRAWKA: Cena po lewej stronie, w tej samej linii co spinner */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price {
    position: relative !important; /* Zmiana z absolute na relative */
    float: left !important;        /* Wyrównanie do lewej strony */
    clear: left !important;       /* Wymuszenie zej?cia poni?ej nazwy produktu */
    margin-left: 84px !important;  /* Margines dopasowany do miniaturki */
    margin-top: 15px !important;   /* Przestrze? pod nazw? produktu */
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-base {
    margin: 0 0 2px 0 !important;
  }
  
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 17px !important;
  }
  
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-final,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-final .abs-item-price-amount {
    color: #222 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 17px !important;
  }
  
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box:not(:has(.abs-item-price-base)) .abs-item-price,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box:not(:has(.abs-item-price-base)) .abs-item-price-amount {
    color: #222 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 17px !important;
  }

  /* POPRAWKA: Spinner po prawej stronie, dopasowany wysoko?ci? do ceny */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity {
    float: right !important;
    width: auto !important;
    padding: 0 !important;
    margin: 15px 10px 0 0 !important; /* Wyrównany górny margines z cen? (15px) */
    display: flex !important;
    align-items: center !important;
    clear: none !important;
  }
  
  /* Usuni?to skokowy margines z :has(.abs-item-price-base) ? flex w cenie naturalnie rozepchnie linie w dó? */
  
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .cart-widget,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .purchase-spinner,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt-input {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .bootstrap-touchspin {
    margin: 0 !important;
  }
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .form-control {
    height: 28px !important;
    padding: 0 !important;
  }
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 10px !important;
  }

  /* Warto?? ? clear both, pod spodem po prawej */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-value {
    clear: both !important;
    float: none !important;
    text-align: right !important;
    width: 100% !important;
    padding: 6px 10px 0 0 !important;
    display: block !important;
  }
  .abs-col-value .abs-item-price-amount {
    font-size: 15px !important; font-weight: 700 !important; color: #222 !important;
  }

  /* Przycisk usu? */
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-actions {
    position: absolute !important;
    top: 14px !important; right: 0 !important;
    width: auto !important;
    float: none !important;
  }
  .abs-cart-table .abs-col-actions .close {
    font-size: 18px !important; color: #bbb !important; opacity: 1 !important;
  }

  /* Rz?d oferty */
  .abs-cart-table tbody tr.abs-row-offer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 4px !important;
    border-bottom: none !important;
    overflow: visible !important;
  }
  .abs-row-offer .abs-col-offername {
    width: auto !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; color: #fe6800 !important;
  }
  .abs-row-offer .abs-col-actions {
    position: static !important; width: auto !important;
  }

}



/* Zmiana stylów dla nag?ówka wyboru punktu odbioru w koszyku */
.abs-split-layout-center #selectedMachineDetails .panel-heading b,
.abs-split-layout-center #selectedMachineDetails .panel-heading strong {
    color: #222 !important;            /* Czarny kolor tekstu */
    text-transform: none !important;    /* Wy??czenie wymuszonych WIELKICH LITER */
}

.abs-split-layout-center #selectedMachineDetails .panel-heading .show-if-pickup-delivery-empty {
    text-transform: none !important;    /* Wy??czenie WIELKICH LITER dla spana z tekstem 'Nie wybrano punktu...' */
}



/* G?ówny rodzic - wymuszamy uk?ad pionowy (tekst na górze, przyciski na dole) */
.abs-split-layout-center > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;     /* ?rodkuje tekst i ca?y blok przycisków */
    text-align: center !important;
}














































/* Wymuszenie jednolitej czcionki Open Sans w opisach produktów,
   niezale?nie od inline font-family w tre?ci (np. Times New Roman) */

#tabCommonDescription .panel-body,
#tabCommonDescription .panel-body *,
.preserveFormatting,
.preserveFormatting * {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
}














/* Open Sans jest ju? ?adowany globalnie w _styles.scss ($web-font-path) ? nie importujemy go tu ponownie */

.eg-seo-block *, .eg-seo-block *::before, .eg-seo-block *::after { box-sizing: border-box; }

  .eg-seo-block {
    --eg-navy: #17364b;
    --eg-navy-light: #25516f;
    --eg-orange: #fe6700;
    --eg-orange-dark: #e35c00;
    --eg-border: #e9ecef;
    --eg-bg-soft: #f8f8f8; /* = $edugaleria-primary z _variables.scss */
    --eg-text: #3a4550;
    --eg-muted: #7a8794;

    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: var(--eg-text);
    max-width: 1140px;
    margin: 4px auto 40px auto;
    padding: 0 20px;
  }

  /* ---------- INTRO ---------- */
  /* bia?a karta w stylistyce .abs-product-page-header (ramka + mi?kki cie?),
     ale bez w?asnego nag?ówka: h3 "O ksi?garni internetowej..." pochodzi
     z panelu CMS i stoi nad t? wstawk? */
  .eg-seo-block .eg-intro {
    background: #fff;
    border: 1px solid var(--eg-border);
    border-radius: 24px;
    box-shadow: 0 14px 45px rgba(23,54,75,0.07);
    padding: 32px 40px;
    margin-bottom: 24px;
    /* dwie kolumny: wype?niaj? ca?? szeroko?? karty (nie zostawiaj? pustej
       po?owy), a ka?da kolumna ma wci?? krótk?, wygodn? do czytania lini? */

  }
  .eg-seo-block .eg-intro p {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--eg-text);
    margin: 0 0 14px 0;
  }
  .eg-seo-block .eg-intro p:last-child { margin-bottom: 0; }
  .eg-seo-block .eg-intro p a {
    color: var(--eg-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(23,54,75,0.25);
  }
  .eg-seo-block .eg-intro p a:hover { color: var(--eg-orange); border-color: var(--eg-orange); }

  @media (max-width: 860px) {
    .eg-seo-block .eg-intro { column-count: 1; padding: 24px 22px; border-radius: 20px; }
  }

  /* ---------- SECTION LABEL ---------- */
  .eg-seo-block .eg-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 16px 4px;
  }
  .eg-seo-block .eg-section-label .eg-bar {
    width: 5px;
    height: 20px;
    border-radius: 4px;
    background: var(--eg-orange);
    flex-shrink: 0;
  }
  .eg-seo-block .eg-section-label span {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--eg-navy);
  }

  /* ---------- ACCORDION GRID ---------- */
  .eg-seo-block .eg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 14px;
    margin-bottom: 8px;
  }
  @media (max-width: 720px) {
    .eg-seo-block .eg-grid { grid-template-columns: 1fr; }
  }

  .eg-seo-block details.eg-card {
    background: #fff;
    border: 1px solid var(--eg-border);
    border-radius: 20px;
    padding: 4px 22px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .eg-seo-block details.eg-card[open] {
    border-color: rgba(254,103,0,0.35);
    box-shadow: 0 14px 34px rgba(23,54,75,0.08);
  }

  .eg-seo-block details.eg-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    font-weight: 700;
    color: var(--eg-navy);
    font-size: 15px;
  }
  .eg-seo-block details.eg-card summary::-webkit-details-marker { display: none; }

  .eg-seo-block .eg-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--eg-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
  }
  .eg-seo-block details.eg-card[open] .eg-icon {
    background: var(--eg-orange);
    transform: rotate(-6deg);
  }
  .eg-seo-block .eg-icon svg { width: 20px; height: 20px; stroke: var(--eg-navy); transition: stroke .2s ease; }
  .eg-seo-block details.eg-card[open] .eg-icon svg { stroke: #fff; }

  .eg-seo-block summary .eg-title-wrap { flex: 1 1 auto; }
  .eg-seo-block summary .eg-title-wrap small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--eg-muted);
    margin-top: 2px;
  }

  .eg-seo-block summary .eg-chevron {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--eg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .2s ease, border-color .2s ease;
  }
  .eg-seo-block summary .eg-chevron svg { width: 11px; height: 11px; stroke: var(--eg-navy); }
  .eg-seo-block details.eg-card[open] summary .eg-chevron {
    transform: rotate(180deg);
    background: var(--eg-navy);
    border-color: var(--eg-navy);
  }
  .eg-seo-block details.eg-card[open] summary .eg-chevron svg { stroke: #fff; }

  .eg-seo-block .eg-card-body {
    padding: 0 0 22px 54px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--eg-text);
  }
  .eg-seo-block .eg-card-body p { margin: 0 0 12px 0; }
  .eg-seo-block .eg-card-body p:last-child { margin-bottom: 0; }
  .eg-seo-block .eg-card-body a { color: var(--eg-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(23,54,75,0.25); }
  .eg-seo-block .eg-card-body a:hover { color: var(--eg-orange); border-color: var(--eg-orange); }
  .eg-seo-block .eg-card-body h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--eg-navy);
  }

  @media (max-width: 720px) {
    .eg-seo-block .eg-card-body { padding-left: 0; }
  }





#product-details-div .abs-attributes-list li[data-attr-eid="WEIGHT_PACKAGE"],
#product-details-div .abs-attributes-list li[data-attr-eid="TypOfertyB2C"],
#product-details-div .abs-attributes-list li[data-attr-eid="WymiaryB2C"] {
    display: none !important;
}


/* 1. Odblokowanie przewijania na poziomie strony */
html, body {
    overflow-x: hidden;
    overflow-y: visible !important;
}

/* 2. Przypi?cie g?ównego nag?ówka */
#header {
    position: sticky !important;
    /* Przesuwamy nag?ówek do góry o wysoko?? paska logowania, 
       dzi?ki czemu pasek logowania ucieka poza ekran, a sticky ?apie reszt? */
    top: -40px !important; /* Je?li pasek logowania jest wy?szy/ni?szy, dostosuj t? warto?? (np. -35px / -45px) */
    z-index: 9999 !important;
    background-color: #f8f8f8 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* 3. Upewnienie si?, ?e kategorie i dolne elementy menu uk?adaj? si? poprawnie */
.abs-header-menu-main {
    position: relative !important;
    top: auto !important;
}

/* Optional: Pasek logowania zostaje w swoim naturalnym miejscu w pliku */
.abs-header-menu-top {
    position: relative !important;
    z-index: 1;
}









  .v2-wrap{ --navy:#17364b; --orange:#fe6700; font-family:'Open Sans',Arial,sans-serif; margin:0px auto 0; padding:40px 20px 56px; box-sizing:border-box;  #eee; }
  .v2-wrap *{box-sizing:border-box;}
  .v2-eyebrow{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin:0 0 10px; }
  .v2-eyebrow::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--orange); display:inline-block; }
  .v2-heading{ font-family:'Baloo 2','Nunito',sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,38px); color:var(--navy); margin:0 0 8px; }
  .v2-sub{ font-size:15px; color:#5b6b78; margin:0 0 30px; max-width:560px; }
  .v2-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px){ .v2-grid{grid-template-columns:repeat(2,1fr);} }
  .v2-card{ position:relative; display:flex; flex-direction:column; text-decoration:none; border-radius:20px; background:#fff; border:1px solid #ececec; overflow:hidden; transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease; }
  .v2-card:hover{ transform:translateY(-6px); box-shadow:0 16px 28px -16px rgba(23,54,75,.3); border-color:#fe6700; }
  .v2-photo{ height:150px; display:flex; align-items:center; justify-content:center; padding:16px; background:#f6f4ef; }
  .v2-photo img{ max-height:100%; max-width:100%; object-fit:contain; transition:transform .3s ease; }
  .v2-card:hover .v2-photo img{ transform:scale(1.07); }
  .v2-title{ font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); text-align:center; padding:14px 10px 16px; }

























 .v3-wrap{
    --navy:#17364b;
    --orange:#fe6700;
    font-family:'Open Sans',Arial,sans-serif;

    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
  }
  .v3-wrap *{ box-sizing:border-box; }

  .v3-eyebrow{
    display:flex; align-items:center; gap:10px;
    font-size:12.5px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color:var(--orange); margin:0 0 10px;
  }
  .v3-eyebrow::before{
    content:""; width:22px; height:3px; border-radius:3px;
    background:var(--orange); display:inline-block;
  }
  .v3-heading{
    font-family:'Open Sans',Arial,sans-serif;
    font-weight:800; letter-spacing:-.01em;
    font-size:clamp(26px,3.4vw,36px);
    color:var(--navy); margin:0 0 8px;
  }
  .v3-sub{ font-size:15px; color:#5b6b78; margin:0 0 34px; max-width:560px; }

  /* ===================== CAROUSEL ===================== */
  .v3-carousel{ position:relative; }
  .v3-radio{ position:absolute; opacity:0; pointer-events:none; }
  .v3-viewport{ overflow:hidden; border-radius:20px; margin:0 -4px; }
  .v3-track{ display:flex; width:300%; transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .v3-page{ width:100%; flex:0 0 33.3334%; }

  #vp1:checked ~ .v3-viewport .v3-track{ transform:translateX(0%); }
  #vp2:checked ~ .v3-viewport .v3-track{ transform:translateX(-33.3334%); }
  #vp3:checked ~ .v3-viewport .v3-track{ transform:translateX(-66.6668%); }

  .v3-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:12px 4px 18px; }
  @media (max-width:900px){ .v3-grid{ grid-template-columns:repeat(2,1fr); } }

  .v3-card{
    position:relative;
    display:flex; flex-direction:column;
    text-decoration:none;
    border-radius:20px;
    background:#fff;
    border:1px solid #ececec;
    overflow:hidden;
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .v3-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 30px -16px rgba(23,54,75,.32);
    border-color:var(--orange);
  }

  .v3-photo{
    height:152px;
    display:flex; align-items:center; justify-content:center;
    padding:18px;
    background:#faf8f4;
  }

  .v3-icon-badge{
    width:84px; height:84px;
    border-radius:16px;
    background:#eef1f3;
    border:1px solid #e4e8eb;
    display:flex; align-items:center; justify-content:center;
    transition: background .28s ease, border-color .28s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  .v3-card:hover .v3-icon-badge{
    background:var(--orange);
    border-color:var(--orange);
    transform: scale(1.05);
  }
  .v3-icon-badge svg{ width:44px; height:44px; overflow:visible; }
  .v3-icon-badge svg .stroke{ stroke:var(--navy); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition: stroke .28s ease; }
  .v3-icon-badge svg .fill-navy{ fill:var(--navy); stroke:none; transition: fill .28s ease; }
  .v3-card:hover .v3-icon-badge svg .stroke{ stroke:#fff; }
  .v3-card:hover .v3-icon-badge svg .fill-navy{ fill:#fff; }

  .v3-title{
    font-size:13px; font-weight:800; letter-spacing:.02em;
    text-transform:uppercase; color:var(--navy);
    text-align:center; padding:16px 10px 6px; line-height:1.4;
  }
  .v3-desc{ font-size:11.5px; color:#8a97a1; text-align:center; padding:0 12px 18px; line-height:1.35; }

  /* ===================== ARROWS & DOTS ===================== */
  .v3-arrow{
    display:none; position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%;
    background:#fff; border:1px solid #ececec;
    align-items:center; justify-content:center;
    cursor:pointer; z-index:3;
    box-shadow:0 6px 16px -8px rgba(23,54,75,.25);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .v3-arrow:hover{ border-color:var(--orange); box-shadow:0 10px 22px -10px rgba(23,54,75,.35); }
  .v3-arrow svg{ width:18px; height:18px; stroke:var(--navy); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .v3-arrow.prev{ left:-23px; }
  .v3-arrow.next{ right:-23px; }

  #vp1:checked ~ .arrow-next-2{ display:flex; }
  #vp2:checked ~ .arrow-prev-1{ display:flex; }
  #vp2:checked ~ .arrow-next-3{ display:flex; }
  #vp3:checked ~ .arrow-prev-2{ display:flex; }


/* Tor: ta karuzela ma 2 strony, nie 3, wi?c szeroko??/przesuni?cie inne */
.v3-track--half{ width:200%; }
#vps1:checked ~ .v3-viewport .v3-track--half{ transform:translateX(0%); }
#vps2:checked ~ .v3-viewport .v3-track--half{ transform:translateX(-50%); }

/* Pokazywanie strza?ek dla TEJ karuzeli */
#vps1:checked ~ .arrow-next-s2{ display:flex; }
#vps2:checked ~ .arrow-prev-s1{ display:flex; }

/* Tor: ta karuzela ma 2 strony, nie 3, wi?c szeroko??/przesuni?cie inne */
.v3-track--half{ width:200%; }
.v3-track--half .v3-page{ flex: 0 0 50%; }   /* <-- BRAKUJ?CA LINIA */

#vps1:checked ~ .v3-viewport .v3-track--half{ transform:translateX(0%); }
#vps2:checked ~ .v3-viewport .v3-track--half{ transform:translateX(-50%); }

/* Pokazywanie strza?ek dla TEJ karuzeli */
#vps1:checked ~ .arrow-next-s2{ display:flex; }
#vps2:checked ~ .arrow-prev-s1{ display:flex; }

/* Karta = samo zdj?cie 1:1, bez t?a/paddingu jak w .v3-photo */
.v3-card.v3-card--photo{ aspect-ratio: 1/1; }
.v3-card.v3-card--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}






  .v2b-wrap{ --navy:#17364b; --orange:#fe6700; font-family:'Open Sans',Arial,sans-serif;  margin:0 auto;  box-sizing:border-box; }
  .v2b-wrap *{box-sizing:border-box;}
  .v2b-eyebrow{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin:0 0 10px; }
  .v2b-eyebrow::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--orange); display:inline-block; }
  .v2b-heading{ font-family:'Open Sans',sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,38px); color:var(--navy); margin:0 0 8px; }
  .v2b-sub{ font-size:15px; color:#5b6b78; margin:0 0 30px; max-width:560px; }
  .v2b-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px){ .v2b-grid{grid-template-columns:repeat(2,1fr);} }
  .v2b-card{ position:relative; display:flex; flex-direction:column; text-decoration:none; border-radius:20px; background:#fff; border:1px solid #ececec; overflow:hidden; transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease; }
  .v2b-card:hover{ transform:translateY(-6px); box-shadow:0 16px 28px -16px rgba(23,54,75,.3); border-color:#fe6700; }
  .v2b-photo{padding-top:10px; overflow:hidden; background:#f6f4ef; }
  .v2b-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
  .v2b-card:hover .v2b-photo img{ transform:scale(1.07); }
  .v2b-title{ font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); text-align:center; padding:14px 10px 16px; }
















/* =====================================================================================
   EDUGALERIA ? KOSZYK: SPÓJNO?? ZE STYLEM SKLEPU + UX (mniej porzuce? koszyka)
   Wklej CA?O?? na SAM KONIEC pliku custom CSS (ten sam, gdzie jest ju?
   sekcja "KOSZYK" z chirurgicznymi poprawkami do #proceedButton itd.).
   Kolejno?? ma znaczenie przy selektorach o tej samej specyficzno?ci
   (np. spinner) ? dlatego to ma by? na ko?cu, nie na pocz?tku.
   ===================================================================================== */


/* -------------------------------------------------------------------------------------
   0. Zmienne kolorów ? te same co w _variables.scss / _strona-produktu.scss,
      tylko zapisane jako zwyk?e custom properties (czysty CSS, bez SASS).
   ------------------------------------------------------------------------------------- */
body[data-action="cart"][data-controller="checkout"] {
  --eg-navy: #17364b;
  --eg-orange: #fe6700;
  --eg-border: #e9ecef;
  --eg-bg-soft: #f8f8f8;
  --eg-green: #1ea851;
  --eg-green-bg: #e7f7ee;
  --eg-red: #dc4348;
  --eg-muted: #6b7280;
}


/* -------------------------------------------------------------------------------------
   1. Podpowied? "Skorzystaj z darmowej dostawy" ? karta zamiast go?ego tekstu
   ------------------------------------------------------------------------------------- */
#free-delivery-hint .panel.abs-checkout-panel {
  background: #ffffff;
  border: 1px solid var(--eg-border);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(23, 54, 75, 0.06);
}

#free-delivery-hint .abs-main-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--eg-navy);
  margin-bottom: 8px;
}

#free-delivery-hint .free-delivery-missing-price li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--eg-muted);
  padding: 3px 0;
}

#free-delivery-hint .free-delivery-missing-price .abs-value .abs-item-price-amount {
  color: var(--eg-orange);
  font-weight: 700;
}


/* -------------------------------------------------------------------------------------
   2. Karta "Twój koszyk" ? bia?a karta, zaokr?glone rogi, spójne z reszt? sklepu
   ------------------------------------------------------------------------------------- */
#cart-table.abs-checkout-panel {
  background: #ffffff;
  border: 1px solid var(--eg-border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(23, 54, 75, 0.06);
  overflow: hidden;
}

#cart-table .panel-heading {
  border-bottom: 1px solid var(--eg-border);
  padding: 20px 24px;
}

#cart-table .panel-heading h2 {
  color: var(--eg-navy);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.abs-cart-table thead th {
  color: var(--eg-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--eg-border) !important;
  padding: 14px 10px !important;
}

.abs-cart-table td {
  border-color: var(--eg-border) !important;
  vertical-align: middle !important;
}

.abs-cart-table tbody tr[id^="productTrId"] {
  transition: background-color 0.15s ease;
}

.abs-cart-table tbody tr[id^="productTrId"]:hover {
  background-color: #fafbfc;
}

.abs-cart-table .productThumbnail img {
  border-radius: 0 !important;
  border: 1px solid var(--eg-border);
}

.abs-cart-table .product-name a {
  color: var(--eg-navy) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.abs-cart-table .product-name a:hover {
  color: var(--eg-orange) !important;
}

.abs-cart-table .abs-catalog-index {
  color: #9aa3ab;
  font-size: 11px;
}

/* wiersz oferty ("OFERTA STANDARDOWA") */
tr.abs-row-offer td {
  background: var(--eg-bg-soft) !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

.abs-row-offer .abs-col-offername {
  vertical-align: middle !important;
}

.abs-row-offer .abs-col-actions {
  vertical-align: middle !important;
}

/* elementy, które potrafi? same w sobie mie? wysoko?? mimo ?e s? puste
   (np. licznik oferty / avg-pw) ? nie maj? rozpycha? wiersza w pionie */
.abs-row-offer #oci1,
.abs-row-offer .avg-pw {
  min-height: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.abs-row-offer .abs-col-offername span {
  color: var(--eg-orange);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* ceny ? te same kolory co na karcie produktu */
.abs-cart-table .abs-item-price-base .abs-item-price-amount {
  color: #a7afb7 !important;
  text-decoration: line-through !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.abs-cart-table .abs-item-price-final .abs-item-price-amount {
  color: #222 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.abs-cart-table .abs-item-price-discount {
  background: var(--eg-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
}

.clear-cart.btn-default {
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--eg-border) !important;
  color: var(--eg-muted) !important;
  font-size: 12px !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.clear-cart.btn-default:hover {
  border-color: var(--eg-red) !important;
  color: var(--eg-red) !important;
}


/* =====================================================================================
   3. SPINNER ILO?CI W KOSZYKU ? DOK?ADNIE TAKI SAM JAK NA KARCIE PRODUKTU
   -------------------------------------------------------------------------------------
   To jest ta sama "pigu?ka" co w #product-details-div (sekcja 10 w
   _strona-produktu.scss): zaokr?glone brzegi, szare t?o przycisków,
   znak +/- rysowany przez ::after (bo natywny tekst przycisku bywa
   ukrywany przez motyw i tekst "znika?"), z jawnym
   -webkit-text-fill-color, ?eby Chrome/WebKit nie dziedziczy?o
   przezroczysto?ci z przycisku (to by? dok?adnie ten problem z "nie
   chcia?o si? wszystko ustawi?" ? WebKit ignoruje samo `color`, gdy
   -webkit-text-fill-color jest ustawione wy?ej w kaskadzie).

   Selektor celowo skopiowany 1:1 (te same klasy w tej samej kolejno?ci)
   z istniej?cej regu?y mobilnej w pliku, ?eby mie? RÓWN? LUB WY?SZ?
   specyficzno?? i wygra? z ni? niezale?nie od szeroko?ci ekranu ?
   dlatego ta sekcja MUSI zosta? wklejona PO tamtej regule (czyli na
   samym ko?cu pliku).
   ===================================================================================== */

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt {
  display: flex !important;
  align-items: center !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .bootstrap-touchspin {
  display: flex !important;
  align-items: stretch !important;
  height: 42px !important;
  width: fit-content !important;
  margin: 0 !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .input-group-btn {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  width: auto !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down,
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--eg-bg-soft) !important;
  border: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  -webkit-text-fill-color: transparent !important;
  transition: background-color 0.2s ease;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down::after,
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  color: var(--eg-navy) !important;
  -webkit-text-fill-color: var(--eg-navy) !important;
  pointer-events: none !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down::after {
  content: "\2212" !important; /* ? */
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up::after {
  content: "+" !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down:hover,
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up:hover {
  background: var(--eg-orange) !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down:hover::after,
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up:hover::after {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-down.bootstrap-touchspin-down:disabled,
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .btn.spin-up.bootstrap-touchspin-up:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: var(--eg-bg-soft) !important;
}

.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .form-control {
  flex: 1 1 auto !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid var(--eg-border) !important;
  border-right: 1px solid var(--eg-border) !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--eg-navy) !important;
  box-shadow: none !important;
}

/* jednostka "SZT" niepotrzebna przy tak kompaktowym spinnerze w koszyku ?
   tak samo jak ju? jest schowana w Twojej regule mobilnej, tu robimy to
   te? na desktopie dla spójno?ci */
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt-unit {
  display: none !important;
}


/* -------------------------------------------------------------------------------------
   4. Dostawa i p?atno?? ? opcje jako wybieralne "karty", nie go?e radiobuttony
      (mniej porzuce?: u?ytkownik od razu widzi, któr? opcj? wybra?)
   ------------------------------------------------------------------------------------- */
.abs-payment-delivery-panel .radio-special {
  border: 1px solid var(--eg-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.abs-payment-delivery-panel .radio-special:last-child {
  margin-bottom: 0;
}

/* Bootstrap domy?lnie dok?ada .radio + .radio { margin-top: -5px; } ? to
   ujemne przesuni?cie nak?ada?o si? na nasz padding karty i powodowa?o
   wizualne "naje?d?anie" kolejnych kart na siebie (widoczne zw?aszcza na
   mobile). Zerujemy to tutaj, w obr?bie list dostawy/p?atno?ci. */
.abs-payment-delivery-panel .radio + .radio {
  margin-top: 0 !important;
}

/* Pomara?czowa ramka na hover/zaznaczeniu ? spójnie z kaflami "Wybierz szko??"
   na stronie g?ównej (tam te? hover/aktywny kafel dostaje pomara?czow?
   obwódk?). T?o zostaje szare/neutralne, wi?c pomara?cz nie miesza si? z
   kolorem samego przycisku "Dalej". */
.abs-payment-delivery-panel .radio-special:hover {
  border-color: var(--eg-orange);
}

.abs-payment-delivery-panel .radio-special:has(input:checked) {
  border-color: var(--eg-orange);
  background: var(--eg-bg-soft);
  box-shadow: 0 4px 14px rgba(254, 103, 0, 0.10);
}

/* Odst?p mi?dzy kolumn? "Dostawa" a "P?atno??" ? mniejszy ni? poprzednio */
.abs-col-payment {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .abs-payment-delivery-panels {
    column-gap: 20px;
  }
  .abs-col-payment {
    margin-top: 0;
  }
}

@media (max-width: 992px) {
  .abs-col-payment {
    margin-top: 20px;
  }
}

.abs-payment-delivery-panel .radio-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  color: var(--eg-navy);
}

.abs-payment-delivery-panel .radio-label strong {
  white-space: nowrap;
  color: var(--eg-navy);
  font-weight: 700;
}

.abs-payment-delivery-panel .abs-info-label {
  background: var(--eg-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 6px;
}

.abs-payment-delivery-panel .panel-heading h3 {
  color: var(--eg-navy);
  font-size: 15px;
  font-weight: 700;
}


/* -------------------------------------------------------------------------------------
   5. Panel wyboru punktu odbioru (DPD Pickup) ? spójny wygl?d karty
   ------------------------------------------------------------------------------------- */
.pickup-delivery-panel {
  border: 1px solid var(--eg-border) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

#selectedMachineDetails .panel-heading {
  background: transparent;
  padding: 12px 16px;
}

/* Przycisk "Wybierz/Zmie? punkt odbioru" ? ta sama klasa (.delivery-chooser-button)
   jest wspó?dzielona przez modu? DPD i InPost, ale ka?da biblioteka dok?ada
   swój domy?lny kolor (st?d ró?nica pomara?cz/czer? na zrzutach). Nadpisujemy
   oba warianty jednym, spójnym stylem ? granat, bo to kolor "drugorz?dnej"
   akcji w tym sklepie (pomara?cz zostaje zarezerwowany pod "Dalej"). */
.delivery-chooser-button,
.dpd-pickup-delivery-address-chooser {
  border-radius: 999px !important;
  border: none !important;
  background: var(--eg-navy) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

.delivery-chooser-button:hover,
.dpd-pickup-delivery-address-chooser:hover {
  background: var(--eg-navy-light, #25516f) !important;
  color: #ffffff !important;
}


/* -------------------------------------------------------------------------------------
   6. Podsumowanie zamówienia ? karta spójna z reszt? sklepu + wyra?niejsza
      kwota "Do zap?aty" (to jest kotwica wzroku przed klikni?ciem "Dalej")
   ------------------------------------------------------------------------------------- */
.summary-panel.abs-checkout-panel {
  border: 1px solid var(--eg-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(23, 54, 75, 0.08) !important;
  overflow: hidden;
}

.summary-panel .panel-heading {
  border-bottom: 1px solid var(--eg-border);
}

.summary-panel .panel-heading h2 {
  color: var(--eg-navy);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.abs-data-combo.abs-col-discount-info {
  background: var(--eg-green-bg);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.abs-data-combo.abs-col-discount-info > div:first-child span:first-child {
  color: var(--eg-navy);
}

.abs-data-combo.abs-col-discount-info .abs-icon-selected {
  color: var(--eg-green);
}

.abs-col-final-price.abs-money-final {
  border-top: 1px solid var(--eg-border);
  padding-top: 12px;
  margin-top: 6px;
}

.abs-col-final-price.abs-money-final > span:first-child {
  font-weight: 700;
  font-size: 15px;
  color: var(--eg-navy);
}

.abs-col-final-price .abs-item-price-amount {
  color: var(--eg-orange) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.abs-order-estimated-delivery-date {
  font-size: 12.5px;
  color: #0000000;
font-weight:bold;

}




/* kupon rabatowy ? pigu?ka spójna z wyszukiwark? w nag?ówku */
.voucher-code-input.input-group .form-control {
  border-radius: 999px 0 0 999px !important;
  height: 44px !important;
  border-color: var(--eg-border) !important;
}

#voucher-submit-button {
  border-radius: 0 999px 999px 0 !important;
  height: 44px !important;
  width: 44px !important;
}


/* -------------------------------------------------------------------------------------
   7. Wy?rodkowanie spinnera ilo?ci mi?dzy kolumn? ceny i warto?ci (desktop)
   ------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .abs-cart-table td.abs-col-quantity {
    text-align: center !important;
    vertical-align: middle !important;
  }

  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .cart-disable-on-modify,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .cart-widget,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .purchase-spinner,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-quantity .touch-qnt-input {
    margin: 0 auto !important;
    width: fit-content !important;
  }
}


/* -------------------------------------------------------------------------------------
   8. Cena na mobile ? wzmocnienie koloru/wagi, ?eby nie wygl?da?a na wyszarzon?/nieaktywn?
      (ta sama specyficzno?? co Twoja istniej?ca regu?a mobilna, wi?c MUSI zosta?
      poni?ej niej w pliku, ?eby wygra?)
   ------------------------------------------------------------------------------------- */
.abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-discount {
  background: var(--eg-red) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}

@media (max-width: 992px) {
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box .abs-item-price-final,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box .abs-item-price-final .abs-item-price-amount {
    color: #222 !important;
    -webkit-text-fill-color: #222 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box .abs-item-price-base,
  .abs-cart-table tbody tr[id^="productTrId"] .abs-col-price .abs-item-price-box .abs-item-price-base .abs-item-price-amount {
    color: #a7afb7 !important;
    -webkit-text-fill-color: #a7afb7 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
  }
}


/* -------------------------------------------------------------------------------------
   9. Popup "Metoda dostawy i p?atno?ci zosta?a wybrana" ? zas?ania? list? /
      przycisk "Dalej". W?a?ciwy element (potwierdzone w inspektorze):
      #message-div-out-ajax .message-div-class.growl-style ? biblioteka
      ustawia mu inline `bottom: 0px` przez JS, dlatego nadpisujemy przez
      !important (to bije zwyk?y inline style, nawet mimo ?e inline ma
      wy?sz? specyficzno??) i zamiast trzyma? go przy dole, wypychamy na
      gór? ekranu, z dala od "Dalej" i od sticky-bara na mobile.
   ------------------------------------------------------------------------------------- */
#message-div-out-ajax .message-div-class.growl-style {
  position: fixed !important;
  top: 90px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: min(92vw, 420px) !important;
  width: auto !important;
  z-index: 100000 !important;
}

@media (max-width: 992px) {
  #message-div-out-ajax .message-div-class.growl-style {
    top: 70px !important;
  }
}

/* zostawiamy te? ogólny wariant na wypadek, gdyby w innym miejscu w
   sklepie ta sama biblioteka renderowa?a powiadomienia przez ten kontener */
.bottom-messages-container {
  position: fixed !important;
  top: 90px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: min(92vw, 420px) !important;
  z-index: 10001 !important;
}

@media (max-width: 992px) {
  .bottom-messages-container {
    top: 70px !important;
  }
}

.purchase-spinner{margin-left:40px;}

#delivery-method .radio{padding:5px 0;}


#payment-method .radio{padding:5px 0;}


.abs-cart-table td[class*="col-"].abs-col-price .abs-item-price-box {
    opacity: 1 !important;
}

.abs-form-input.radio-special > .abs-elem-input > .radio:hover {
    box-shadow: none !important;
}

.abs-search-options-links{
display:none;
}


}








































/* =========================================================================
   PRZEPROJEKTOWANIE KAFELKÓW PRODUKTOWYCH (abs-offer-gallery)
   Wklej na samym ko?cu pliku custom CSS. Dzia?a na siatce produktów
   na stronie g?ównej, w kategoriach i wyszukiwarce (.abs-offer-gallery
   oraz wariant .abs-offer-gallery-box ? wspó?dziel? te same klasy).

   ZMIANY WZGL?DEM POPRZEDNIEJ WERSJI:
   1) Tytu? produktu: zamiast tooltipa (dymka) nachodz?cego na cen?,
      tytu? jest przyci?ty do 2 linii i po hoverze karty rozwija si?
      w pe?ni, spychaj?c cen? w dó? (bez zas?aniania).
   2) Badge rabatu: kolor zmieniony z pomara?czowego na granatowy,
      ?eby nie "bi? si?" wizualnie z przyciskiem Do koszyka.
   3) Etykiety (np. "Do wyczerpania zapasów"): mniejsze, przyci?te
      elips? (...) je?li za d?ugie, ?eby nie nachodzi?y na badge rabatu.

   UWAGA: to, ?e badge pokazuje np. "-0,2%*" zamiast realnego rabatu,
   to b??d wyliczenia warto?ci po stronie silnika sklepu (dane wchodz?
   ju? policzone w HTML) - CSS tego nie naprawi, trzeba to zg?osi?/
   poprawi? w ustawieniach promocji / zaokr?gle? w panelu sklepu.
   ========================================================================= */

.abs-offer-gallery *,
.abs-offer-gallery *::before,
.abs-offer-gallery *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   1. KARTA PRODUKTU ? kontener
   Ustawiamy position:relative, ?eby móc "przypi??" do niej badge rabatu
   (który w HTML le?y nisko, przy cenie) w prawym górnym rogu zdj?cia.
   Flex column + height:100% wyrównuje wysoko?? przycisków "Do koszyka"
   w jednym rz?dzie, nawet gdy tytu?y produktów maj? ró?n? d?ugo??.
   ------------------------------------------------------------------------- */
.abs-offer-gallery .abs-layout-product-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;           /* karty znów równe / przyciski w jednej linii - bezpieczne, bo tytu?
                              (patrz sekcja 4) NIGDY nie zmienia swojej wysoko?ci "w przep?ywie",
                              pe?ny tytu? na hover pokazuje si? jako nak?adka (position:absolute),
                              wi?c nie ma czego "stretch'owa?" w gór? razem z s?siadami */
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 20px;
  overflow: visible; /* nie przycinamy - potrzebne, ?eby rozwini?ty tytu? móg? "wyj??" poza kart? */
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, z-index 0s;
}

.abs-offer-gallery .abs-layout-product-gallery:hover {
  border-color: #fe6700;
  box-shadow: 0 16px 32px rgba(23, 54, 75, 0.14);
  transform: translateY(-3px);
  z-index: 25; /* karta wychodzi ponad s?siednie, ?eby rozwini?ty tytu? nie by? przyci?ty */
}

.abs-offer-gallery .abs-col-img-name {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* zajmuje woln? przestrze?, dociska stopk? (cena+przycisk) do do?u */
}

.abs-offer-gallery .abs-col-info {
  flex: 0 0 auto;
  padding: 0 14px 16px;
}

/* -------------------------------------------------------------------------
   2. STREFA ZDJ?CIA ? etykiety, ulubione, delikatny zoom
   ------------------------------------------------------------------------- */
.abs-offer-gallery .abs-col-img {
  position: relative;
  overflow: visible;
}

.abs-offer-gallery .abs-img-wrapper {
  overflow: hidden; /* to tu przycinamy delikatny zoom zdj?cia, nie na .abs-col-img */
  border-radius: 16px 16px 0 0;
}

.abs-offer-gallery .abs-img-wrapper img {
  transition: transform .45s ease;
}

.abs-offer-gallery .abs-layout-product-gallery:hover .abs-img-wrapper img {
  transform: scale(1.045); /* subtelny "premium" zoom przy hover */
}

/* Etykiety (Outlet, Do wyczerpania zapasów itp.) ? lewy górny róg.
   POPRAWKA: dodane max-width + overflow:hidden + text-overflow:ellipsis
   na samej etykiecie (nie tylko na kontenerze), bo przy white-space:nowrap
   d?ugi tekst "wypycha? si?" poza kontener i nachodzi? na badge rabatu. */
.abs-offer-gallery .abs-labels {
  position: absolute;
  top: 10px;       /* ~10px od góry boxa */
  left: 0;         /* przyleg?e do lewej kraw?dzi, nie na ?rodku zdj?cia */
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: calc(100% - 40px); /* miejsce na okr?g?y badge rabatu po prawej */
}

.abs-offer-gallery .abs-labels .product-label {
  max-width: 100%;
}

.abs-offer-gallery .abs-labels .product-label a {
  text-decoration: none;
  display: block;
}

.abs-offer-gallery .abs-labels .abs-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(23, 54, 75, 0.85) !important;
  color: #ffffff !important;
  font-size: 8px;             /* mniejsza czcionka */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;       /* zwyk?y tekst, nie WERSALIKI - to tylko informacja */
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(23, 54, 75, 0.15);
border:0px !important;
}

/* Ikona "Do przechowalni" (ulubione) ? prawy dolny róg zdj?cia,
   subtelna, pojawia si? wyra?niej przy hover karty */
.abs-offer-gallery .storage-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 12;
}

.abs-offer-gallery .storage-actions .abs-storage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ececec;
  box-shadow: 0 4px 10px rgba(23, 54, 75, 0.12);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, border-color .2s ease;
  cursor: pointer;
}

.abs-offer-gallery .abs-layout-product-gallery:hover .storage-actions .abs-storage-btn {
  opacity: 1;
  transform: translateY(0);
}

.abs-offer-gallery .storage-actions .abs-storage-btn:hover {
  background: #17364b;
  border-color: #17364b;
}

.abs-offer-gallery .storage-actions .abs-icon-storage {
  font-size: 16px; /* steruje rozmiarem ikony (mixin elegant-icon-glyph liczy z 1em) */
}

.abs-offer-gallery .storage-actions .abs-storage-btn:hover .abs-icon-storage {
  filter: brightness(0) invert(1); /* ikona na bia?o na granatowym tle */
}

.abs-offer-gallery .storage-actions .label-caption {
  display: none; /* zostaje sam ikony, bez tekstu - czy?ciej w kafelku */
}

/* -------------------------------------------------------------------------
   3. BADGE RABATU ? okr?g?a plakietka w prawym górnym rogu zdj?cia
   POPRAWKA: kolor zmieniony z pomara?czowego (kolidowa? z przyciskiem
   "Do koszyka") na granatowy - spójny z reszt? marki, mniej "krzykliwy".
   Je?li wolisz wariant z sam? pomara?czow? obwódk? zamiast wype?nienia,
   patrz zakomentowany blok alternatywny poni?ej.
   ------------------------------------------------------------------------- */
.abs-offer-gallery .abs-item-price-box .abs-item-price-discount {
  display: flex !important;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17364b, #0f2636); /* granat zamiast pomara?czu */
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(23, 54, 75, 0.35);
}

/* WARIANT ALTERNATYWNY - pomara?czowa obwódka zamiast wype?nienia
   (odkomentuj i usu? blok powy?ej, je?li wolisz t? wersj?):

.abs-offer-gallery .abs-item-price-box .abs-item-price-discount {
  display: flex !important;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #fe6700;
  color: #fe6700 !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(23, 54, 75, 0.15);
}
*/

/* -------------------------------------------------------------------------
   4. TYTU? PRODUKTU ? przyci?ty do 2 linii, po hoverze rozwija si? w pe?ni
   POPRAWKA: usuni?ty tooltip attr(title) (dymek nachodzi? na cen?).
   Teraz tytu? domy?lnie ma max. 2 linie (line-clamp), a po najechaniu
   na kart? limit znika i ca?y tytu? si? pokazuje - cena zostaje
   spychana w dó?, wi?c nic na siebie nie nachodzi.
   ------------------------------------------------------------------------- */
.abs-offer-gallery .abs-product-category {
  margin: 12px 0 6px;
  font-size: 11px;
  color: #9aa3ab;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}

.abs-offer-gallery .abs-product-category a {
  color: inherit;
}

.abs-offer-gallery .abs-col-img-name {
  padding: 0 14px;
}

.abs-offer-gallery h3.abs-product-name {
  flex: 1 0 auto;
  margin: 0 0 6px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px !important;
  line-height: 1.4;
  color: #17364b;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* zawsze max 2 linie - NIGDY si? nie zmienia na hover,
                                  dzi?ki temu karta ma zawsze t? sam? wysoko?? */
  overflow: hidden;
  text-overflow: ellipsis;
}

.abs-offer-gallery h3.abs-product-name a {
  color: inherit;
}

/* Pe?ny tytu? na hover pokazuje si? jako NAK?ADKA (position:absolute) pod zdj?ciem -
   nie zmienia wysoko?ci karty, wi?c nie przesuwa ceny/przycisku ani reszty strony,
   tylko si? na nie nak?ada (dok?adnie to, o co prosi?e?). Wykorzystujemy atrybut
   title="" na linku ze zdj?ciem, ?eby nie duplikowa? tekstu w HTML. */
.abs-offer-gallery .abs-col-img > a[title] {
  display: block;
  position: relative;
  z-index: 6; /* wy?ej ni? kategoria/tytu?/cena TEJ SAMEJ karty, ?eby nak?adka je przykry?a */
}

abs-offer-gallery .abs-col-img > a[title]::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: -14px;   /* kasuje 14px paddingu kolumny - nak?adka = pe?na szeroko?? karty */
  right: -14px;
  z-index: 6;
  padding: 14px 14px 18px;
  background: #ffffff;
  border: 1px solid #fe6700;      /* ten sam kolor co ramka karty na hover */
  border-top: none;
  border-radius: 0 0 20px 20px;   /* domyka zaokr?glenie karty (20px, jak ca?a karta) */
  box-shadow: 0 16px 32px rgba(23, 54, 75, 0.14); /* ten sam cie? co karta na hover */
  color: #17364b;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none; /* klik "przechodzi" do prawdziwego przycisku pod spodem */
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.abs-offer-gallery .abs-layout-product-gallery:hover .abs-col-img > a[title]::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Puste opisy/atrybuty potrafi? zostawia? nieu?yteczne odst?py - chowamy */
.abs-offer-gallery .abs-additional-name:empty,
.abs-offer-gallery .abs-product-short-desc:empty {
  display: none;
}

/* Indeks katalogowy (EAN/ISBN) - chowamy dla czystszego, mniej "sklepowego" wygl?du */
.abs-offer-gallery .abs-catalog-index {
  display: none;
}

/* -------------------------------------------------------------------------
   5. CENA ? hierarchia: cena finalna wyra?na, cena bazowa ma?a/przekre?lona
   ------------------------------------------------------------------------- */
.abs-offer-gallery .abs-item-price-box {
  margin: 8px 0 12px;
  text-align: center;
}

.abs-offer-gallery .abs-item-price-base .abs-item-price-amount {
  color: #9aa3ab;
  text-decoration: line-through;
  font-size: 12px;
  font-weight: 500;
}

.abs-offer-gallery .abs-item-price-final .abs-item-price-amount {
  color: #17364b;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.abs-offer-gallery .abs-item-price-final .abs-item-price-mode,
.abs-offer-gallery .abs-price-unit {
  font-size: 11px;
  font-weight: 500;
  color: #9aa3ab;
}

/* -------------------------------------------------------------------------
   6. SPINNER ILO?CI ? drobne doszlifowanie (je?li widoczny w kafelku)
   ------------------------------------------------------------------------- */
.abs-offer-gallery .purchase-spinner {
  margin-bottom: 8px;
}

.abs-offer-gallery .touch-qnt-input input.touch-spin {
  border: 1px solid #ececec;
  border-radius: 999px;
  height: 34px;
  text-align: center;
  font-size: 13px;
  color: #17364b;
}

/* -------------------------------------------------------------------------
   7. PRZYCISK "DO KOSZYKA" ? pomara?czowy, hover granatowy, ikona z lewej
   Ikona koszyka jest globalnie ukryta w .cart-btn (display:none) ?
   tutaj j? przywracamy i ustawiamy obok tekstu.
   ------------------------------------------------------------------------- */
.abs-offer-gallery .cart-button {
  text-align: center;
}

.abs-offer-gallery .cart-btn.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 190px;
  min-width: 0;
  margin: 0 auto;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background-color: #fe6700; /* pomara?czowy */
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: 0 6px 14px rgba(254, 103, 0, 0.25);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.abs-offer-gallery .cart-btn.btn-success:hover {
  background-color: #17364b; /* granatowy na hover */
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(23, 54, 75, 0.3);
  transform: translateY(-1px);
}

.abs-offer-gallery .cart-btn .abs-icon-cart {
  display: inline-block !important; /* nadpisuje globalne .cart-btn .abs-icon-cart{display:none} */
  font-size: 15px;                  /* rozmiar ikony (mixin liczy z 1em) */
  filter: brightness(0) invert(1);  /* ikona na bia?o, spójnie z tekstem */
}

.abs-offer-gallery .cart-btn .abs-btn-msg {
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   8. RESPONSYWNO?? ? mniejsze akcenty na w?skich ekranach
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .abs-offer-gallery .abs-item-price-box .abs-item-price-discount {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 9px;
    top: 8px;
    right: 8px;
  }

  .abs-offer-gallery .abs-labels {
    max-width: calc(100% - 44px);
  }






  .abs-offer-gallery .abs-labels .abs-label {
    font-size: 8.5px;
    padding: 3px 7px;
  }

  .abs-offer-gallery h3.abs-product-name {
    font-size: 12.5px !important;
  }
}

.abs-offer-gallery .abs-labels .product-label a {
  margin-left: -30px;
  width: 120px;
  margin-top: -15px;
}















@media (max-width: 992px) {

  /* Ignorujemy JS-owy transform slicka (liczony na starych, nieaktualnych
     szeroko?ciach) - pokazujemy tylko aktywny, nieklonowany slajd,
     na pe?n? szeroko?? kontenera, wy?rodkowany */
  #product-details-div .slick-track {
    transform: none !important;
    width: 100% !important;
    display: flex !important;
  }

  #product-details-div .slick-slide {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #product-details-div .slick-slide.slick-active:not(.slick-cloned) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #product-details-div .slick-list {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sam link/zdj?cie: wy?rodkowane, bez sztywnych pikselowych max-width */
  #product-details-div .product-photo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #product-details-div .product-photo img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Kontener galerii i jego rodzice - równy padding, brak sztywnych px */
  #product-details-div .abs-lightslider-gallery-wrapper,
  #product-details-div #lightSlider.abs-lightslider-gallery {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }



#product-details-div .abs-header-right .cart-widget.touch-qnt-vertical .purchase-spinner {
    margin: 0 !important;
}

/* 2. KARUZELA "Klienci, którzy kupili ten produkt, kupili równie?"
   Kafle w karuzeli potrzebuj? sta?ej szeroko?ci 300px, inaczej si? rozje?d?aj? */
#alsoOrderedProductsContent .abs-layout-product-gallery {
    width: 300px !important;
}



 
}







/* Usuni?cie linku "Zobacz wi?cej" w produktach polecanych */
#alsoOrderedProductsContent .abs-col-info > a[title] {
  display: none !important;
}
@media (max-width: 992px) {

  /* Wymuszamy przyci?cie karuzeli niezale?nie od inline width ustawionego przez slick.js */
  #product-details-div .abs-lightslider-gallery-wrapper,
  #product-details-div .slick-list,
  #product-details-div .slick-pager-wrapper .slick-pager {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Strza?ki prev/next miniatur - na mobile i tak dzia?a swipe, wi?c chowamy,
     ?eby nie pcha?y layoutu na szeroko?? */
  #product-details-div .thumb-nav.thumb-prev,
  #product-details-div .thumb-nav.thumb-next {
    display: none !important;
  }

  /* Bezpiecznik: sklonowane duplikaty slajdów (slick-cloned) ca?kowicie poza przep?ywem,
     nawet je?li maj? nieaktywny slick-active */
  #product-details-div .slick-slide.slick-cloned {
    display: none !important;
    width: 0 !important;
  }

  /* Dodatkowy bezpiecznik globalny na wypadek gdyby co? jeszcze ucieka?o poza ekran */
  body {
    overflow-x: hidden !important;
  }
}

}
/* 4. STRZA?KI NAWIGACJI w zak?adkach produktu (Opis / Szczegó?y / Zapytaj...)
   ? przezroczyste t?o zamiast czarnego */
#productTabs .abs-drag-panel-btn-back,
#productTabs .abs-drag-panel-btn-forward {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}






@media (max-width: 992px) {

  /* cofamy poprzednie ograniczenie overflow na samym pasku miniatur ?
     tu chcemy zawijanie (wrap), nie przycinanie */
  #product-details-div .slick-pager-wrapper .slick-pager {
    overflow: visible !important;
  }

  /* pasek miniatur: mniejsze kafelki, które si? zawijaj? w kolejne rz?dy
     zamiast przewija? w poziomie */
  #product-details-div .slick-pager-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #product-details-div .slick-pager {
    display: flex !important;
    flex-wrap: wrap !important;      /* kluczowa zmiana: zawijaj zamiast przewija? */
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  #product-details-div .slick-pager li {
    flex: 0 0 46px !important;       /* mniejsze ni? bazowe 64px */
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
  }

  #product-details-div .slick-pager li img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    min-width: 46px !important;
  }












/* =====================================================================================
   POPRAWKI MOBILE / TABLET ? wklej na SAM KONIEC pliku custom-rwd.css
   (kolejno?? ma znaczenie ? wiele regu? bazowych ma !important o tej samej
   specyficzno?ci, wi?c ?eby wygra?, te regu?y musz? by? NI?EJ w pliku)
   ===================================================================================== */


/* -------------------------------------------------------------------------------------
   1. GALERIA ZDJ?? (mobile) ? miniatury ostatniego rz?du by?y ucinane, bo
      .abs-lightslider-gallery-wrapper mia? overflow:hidden i sztywn? wysoko??
      liczon? tylko z g?ównego zdj?cia. Na mobile zwalniamy overflow i wysoko??,
      ?eby kontener rós? razem z liczb? zawijanych rz?dów miniatur.
   ------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #product-details-div .abs-lightslider-gallery-wrapper {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #product-details-div .slick-pager-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #product-details-div .slick-pager-wrapper .slick-pager {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* -------------------------------------------------------------------------------------
   2. STRZA?KI NAWIGACJI ZAK?ADEK PRODUKTU (Opis / Szczegó?y / Zapytaj...) ?
      czarne t?o pochodzi z bazowego motywu (selektor grupowy .abs-drag-panel-btn-back
      itd.). Poprzednia próba nadpisania (#productTabs .abs-drag-panel-btn-back)
      najwyra?niej przegrywa z jeszcze bardziej zagnie?d?on? regu?? bazow? ?
      dlatego tutaj celujemy w PE?NY ?a?cuch klas dok?adnie tak, jak wyst?puje
      w HTML-u (potwierdzone w narz?dziach deweloperskich), ?eby mie? maksymaln?
      specyficzno?? i wygra? niezale?nie od tego, co jeszcze siedzi w bazowym CSS.
   ------------------------------------------------------------------------------------- */
#productTabs .abs-drag-panel.abs-drag-nav-panel.abs-special-tabs-panel.module-loader > div.abs-drag-panel-btn-back.abs-icon-left,
#productTabs .abs-drag-panel.abs-drag-nav-panel.abs-special-tabs-panel.module-loader > div.abs-drag-panel-btn-forward.abs-icon-right {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* -------------------------------------------------------------------------------------
   3. BOX Z CEN? (.abs-header-right) ? na tablecie (768?991px, czyli poni?ej
      progu $screen-md=992px, gdzie karta produktu jest jeszcze w jednej kolumnie)
      box ceny nie jest wy?rodkowany w swoim wierszu flex. margin:0 auto na
      elemencie flex z flex-grow:0 centruje go w dost?pnej przestrzeni ?
      dok?adnie tak, jak przetestowa?e? w narz?dziach deweloperskich.
   ------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  #product-details-div .abs-header-right {
    margin: 0 auto !important;
  }
}


/* -------------------------------------------------------------------------------------
   4. "Klienci, którzy kupili ten produkt, kupili równie?..." ? na tablecie
      (768?991px) karuzela slick pokazywa?a po 1 karcie i by?a niewy?rodkowana
      wzgl?dem strza?ek. Zamiast walczy? z szeroko?ciami liczonymi przez JS,
      wy??czamy zachowanie karuzeli (tak jak ju? robimy to dla g?ównej galerii
      zdj?? na mobile) i pokazujemy karty jako statyczny grid 2 kolumny, bez
      strza?ek/kropek ? najbardziej stabilne rozwi?zanie, nie zale?y od
      przelicze? JS przy zmianie szeroko?ci okna.

      Je?li wolisz inny wariant z tych, o których pisa?e? (np. karuzela
      wy?rodkowana z 2 kartami widocznymi na raz + strza?ki, albo karta na
      100% szeroko?ci), daj zna? ? podmienimy t? sekcj?.
   ------------------------------------------------------------------------------------- */


  #alsoOrderedProductsContent .slick-dots {
    display: none !important;
  }

  #alsoOrderedProductsContent .slick-list {
    overflow: visible !important;
    height: auto !important;
  }

  #alsoOrderedProductsContent .slick-track {
    transform: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  #alsoOrderedProductsContent .slick-slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  #alsoOrderedProductsContent .slick-slide.slick-cloned {
    display: none !important;
  }

  #alsoOrderedProductsContent .slide-item {
    width: 100% !important;
  }

  #alsoOrderedProductsContent .abs-layout-product-gallery {
    width: 100% !important;
  }
}









/* =====================================================================================
   POPRAWKI CZ.2 ? wklej na SAM KONIEC pliku, PO sekcji "poprawki-mobile-tablet.css"
   ===================================================================================== */


/* -------------------------------------------------------------------------------------
   4b. NAPRAWA GRIDU "Klienci, którzy kupili..." na tablecie (768?991px) ?
       przyczyna rozsypania: ka?dy slajd karuzeli to <section class="... abs-offer-gallery">,
       a klasa .abs-offer-gallery ma BAZOWO grid-template-columns: repeat(5, 1fr).
       Przy jednej karcie w ?rodku robi?a si? wi?c w?ska 1/5 szeroko?ci "wst??ka".
       Wy??czamy ten wewn?trzny grid tylko w obr?bie karuzeli powi?zanych produktów.
   ------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  #alsoOrderedProductsContent .slick-slide section.abs-offer-gallery {
    display: block !important;
    width: 100% !important;
  }

  #alsoOrderedProductsContent .abs-layout-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------------------
   5. MOBILE ? karta karuzeli "Klienci, którzy kupili..." lekko przesuni?ta
      wzgl?dem ?rodka ekranu. Wymuszamy równe wy?rodkowanie kontenera i karty
      (na wypadek gdyby przesuni?cie wynika?o z marginesu/paddingu po jednej
      stronie albo z niedopasowania szeroko?ci liczonej przez JS).
   ------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #alsoOrderedProductsContent .slick-list,
  #alsoOrderedProductsContent .slick-track {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #alsoOrderedProductsContent .abs-layout-product-gallery {
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
/* Je?li po tej poprawce przesuni?cie nadal b?dzie widoczne ? to znaczy, ?e
   winne s? same strza?ki (.nav-control / klasy odpowiedzialne za < >) z
   bazowego motywu, których kod nie mam w podgl?dzie. Daj zna?, sprawdzimy
   wtedy dok?adnie ich pozycjonowanie w narz?dziach deweloperskich. */


/* -------------------------------------------------------------------------------------
   6. Nag?ówek akordeonu "KLIENCI, KTÓRZY KUPILI TEN PRODUKT, KUPILI RÓWNIE?..."
      jest ucinany zamiast si? ?ama? w kolejn? lini? na mobile/tablecie.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #productPanels .abs-product-tab-panel > button.accordion-btn {
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
  }

  #productPanels .abs-product-tab-panel > button.accordion-btn > span:first-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}


/* -------------------------------------------------------------------------------------
   7. Pasek "Zapisz si? na Newsletter" w stopce (kolorowy pasek z t?em
      graf-newsletter.jpg) ? ukrywamy na mobile/tablecie.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  footer .abs-footer-items > .abs-footer-item-width-full:nth-child(1) {
    display: none !important;
  }
}


/* -------------------------------------------------------------------------------------
   8. Blok z korzy?ciami (Atrakcyjne rabaty / Najszersza oferta / Solidne
      do?wiadczenie / Szybka realizacja) pod opisem produktu ? podci?gamy
      bli?ej tekstu opisu na mobile/tablecie.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #injectionProductUnderPhoto {
    margin-top: -20px !important;
  }

  #injectionProductUnderPhoto > div {
    padding-top: 0.75em !important;
  }

  #injectionProductUnderPhoto .abs-html-injection > div {
    margin-top: 0 !important;
  }
}













/* =====================================================================================
   POPRAWKI CZ.3 ? wklej na SAM KONIEC pliku, PO poprzednich sekcjach
   ===================================================================================== */


/* -------------------------------------------------------------------------------------
   9. "Klienci, którzy kupili..." ? UJEDNOLICENIE dla ca?ego zakresu ?991px.
      Problem: ró?ne tablety (Galaxy Tab S9 / S9+, portret / poziom) ?apa?y si?
      raz w regu?? "mobile-karuzela", raz w regu?? "tablet-grid", st?d karta
      wygl?da?a za ka?dym razem inaczej i by?a niesymetryczna wzgl?dem strza?ek.
      Rozwi?zanie: karuzel? slick wy??czamy CA?KOWICIE do 991px w??cznie i
      zawsze pokazujemy statyczny, wy?rodkowany grid ? bez zale?no?ci od
      przelicze? JS, wi?c wygl?da identycznie niezale?nie od dok?adnej
      szeroko?ci urz?dzenia. Poni?sze regu?y NADPISUJ? (s? ni?ej w pliku)
      wcze?niejsze, w??sze warianty z poprzednich sekcji.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #alsoOrderedProductsContent .abs-mobile-productTabs,
  #alsoOrderedProductsContent .carousel-fx-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }



  #alsoOrderedProductsContent .slick-dots {
    display: none !important;
  }

  #alsoOrderedProductsContent .slick-list {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #alsoOrderedProductsContent .slick-track {
    transform: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    justify-items: stretch !important;
  }

  #alsoOrderedProductsContent .slick-slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  #alsoOrderedProductsContent .slick-slide.slick-cloned {
    display: none !important;
  }

  #alsoOrderedProductsContent .slide-item {
    width: 100% !important;
  }

  /* przyczyna "w?skiej wst??ki": .abs-offer-gallery ma bazowo 5-kolumnowy grid */
  #alsoOrderedProductsContent .slick-slide section.abs-offer-gallery {
    display: block !important;
    width: 100% !important;
  }

  #alsoOrderedProductsContent .abs-layout-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Bardzo w?skie telefony ? 1 karta w rz?dzie zamiast ?ci?ni?tych 2 */
@media (max-width: 479px) {
  #alsoOrderedProductsContent .slick-track {
    grid-template-columns: 1fr !important;
  }
}


/* -------------------------------------------------------------------------------------
   10. G?ÓWNY BOX PRODUKTU (galeria zdj?? + box z cen?) ? na szerszych
       tabletach (np. Galaxy Tab S9+ w poziomie) oba bloki mie?ci?y si?
       obok siebie we flexboksie zamiast jeden pod drugim, przez co proporcje
       "du?e zdj?cia / ma?a cena" albo odwrotnie zale?a?y od dok?adnej
       szeroko?ci urz?dzenia. Wymuszamy: do 991px W??CZNIE oba bloki s?
       zawsze na pe?n? szeroko??, jeden pod drugim ? identycznie na ka?dym
       tablecie.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #product-details-div .abs-header-left {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #product-details-div .abs-header-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}


/* -------------------------------------------------------------------------------------
   11. Blok z korzy?ciami dalej za nisko podci?gni?ty ? poprzednia regu?a mia?a
       zbyt nisk? specyficzno?? (#injectionProductUnderPhoto), a bazowy styl
       ma #product-details-div #injectionProductUnderPhoto (2x ID = wy?szy
       priorytet) ustawiaj?cy padding:2em na wewn?trznym divie. Tutaj celujemy
       w ten sam, wy?szy priorytet i dodatkowo zwi?kszamy podci?gni?cie.
   ------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #product-details-div #injectionProductUnderPhoto {
    margin-top: -40px !important;
  }

  #product-details-div #injectionProductUnderPhoto > div {
    padding-top: 0.5em !important;
  }
}













@media (max-width: 991px) {

    #alsoOrderedProductsContent * {
        box-sizing: border-box !important;
    }

    #alsoOrderedProductsContent .abs-mobile-productTabs {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #alsoOrderedProductsContent .carousel-fx-wrapper {
        position: relative !important;
        width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #alsoOrderedProductsContent .slideshow,
    #alsoOrderedProductsContent .slick-list {
        width: 320px !important;
        max-width: 320px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    #alsoOrderedProductsContent .slick-track {
        display: flex !important;
        width: auto !important;
        transform: none !important;
    }

    #alsoOrderedProductsContent .slick-slide {
        width: 320px !important;
        max-width: 320px !important;
        flex: 0 0 320px !important;
        padding: 0 !important;
    }

    #alsoOrderedProductsContent .slick-slide.slick-cloned {
        display: none !important;
    }

    /* nadpisuje koliduj?c? regu?? width:300px z sekcji 3 tego pliku (jest wy?ej) */
    #alsoOrderedProductsContent .slide-item,
    #alsoOrderedProductsContent section.abs-offer-gallery,
    #alsoOrderedProductsContent .abs-layout-product-gallery {
        width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        display: block !important;
    }

    #alsoOrderedProductsContent .slick-dots {
        display: none !important;
    }

    /* STRZA?KI ? sztywne px zamiast dziedziczonych 15% ($carousel-control-width) */
    #alsoOrderedProductsContent .nav-control {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }

    #alsoOrderedProductsContent .nav-control .carousel-control {
        position: absolute !important;
        top: 50% !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        line-height: 32px !important;
        text-align: center !important;
        transform: translateY(-50%) !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.95) !important;
        border-radius: 50% !important;
 
    }

    #alsoOrderedProductsContent .nav-control .carousel-control.left {

        right: auto !important;
    }

    #alsoOrderedProductsContent .nav-control .carousel-control.right {
        right: -16px !important;
        left: auto !important;
    }

}


@media (max-width: 991px) {

    /* finalne warto?ci z testów w devtools */
    #alsoOrderedProductsContent .carousel-fx-wrapper {
        width: 350px !important;
        max-width: 350px !important;
    }

    #alsoOrderedProductsContent .slideshow,
    #alsoOrderedProductsContent .slick-list {
        width: 366px !important;
        max-width: 366px !important;
    }

    /* -------- naprawa "okr?g?ego przycisku" (ikona Do przechowalni) --------
       Normalnie stoi w rogu zdj?cia; po ?ci?ni?ciu kontenera jego position
       zaczyna si? liczy? wzgl?dem innego, w??szego rodzica i "wyp?ywa" na
       ?rodek karty. Przypinamy go z powrotem do rogu, wzgl?dem .abs-col-img
       (który ma position:relative). */
    #alsoOrderedProductsContent .abs-col-img {
        position: relative !important;
    }

    #alsoOrderedProductsContent .storage-actions {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 6 !important;
    }
}









/* Przycisk sprawd? (style jak do koszyka, bez ikonki) */
.przycisk-koszyk-noicon {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    line-height: 40px;
    height: 40px;
    min-width: 110px;
    padding: 0 1.5em;
    border-radius: 30px;
    color: #ffffff;
    background-color: #fe6700;
    border: 1px solid #fe6700;
    text-decoration: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.przycisk-koszyk-noicon:hover {
    background-color: #17364b;
    border-color: #17364b;
    color: #ffffff;
}

.przycisk-koszyk-noicon:focus {
    color: #ffffff;
    outline: none;
}







/* ============================================================
   BREADCRUMBS ? finalna wersja
   ============================================================ */

/* breadcrumb siedzi ju? wewn?trz .container w HTML,
   wi?c nie nadpisujemy mu szeroko?ci ani marginesów */

#global-breadcrumb .abs-breadcrumb-crumbs-wrapper,
#global-breadcrumb .abs-breadcrumb-crumbs {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

#global-breadcrumb .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 0;
    row-gap: 3px;
    background: transparent;
    font-size: 11.5px;
}

#global-breadcrumb .breadcrumb > li {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    background: none;
    padding: 0;
}

#global-breadcrumb .breadcrumb > li a,
#global-breadcrumb .breadcrumb > li > span {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7a8794;
    text-decoration: none;
}

#global-breadcrumb .breadcrumb > li a:hover {
    color: #fe6700;
}

#global-breadcrumb .breadcrumb > li:first-child a {
    display: flex;
    align-items: center;
}

#global-breadcrumb .breadcrumb > li:first-child .abs-breadcrumb-home-text {
    margin-left: 6px;
}

/* separator w przep?ywie, ten sam odst?p zawsze */
#global-breadcrumb .breadcrumb > li:not(:first-child)::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid #c7c7c7;
    border-right: 1.5px solid #c7c7c7;
    transform: rotate(45deg);
    margin: 0 9px;
}

/* ostatni okruszek = bie??ca strona */
#global-breadcrumb .breadcrumb > li:last-child a,
#global-breadcrumb .breadcrumb > li:last-child span {
    pointer-events: none;
    cursor: default;
    color: #17364b;
    font-weight: 600;
    white-space: normal;
    max-width: 100%;
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 767px) {
    #global-breadcrumb .breadcrumb {
        font-size: 12px;

        row-gap: 3px;
    }

    #global-breadcrumb .breadcrumb > li:not(:first-child)::before {
        margin: 0 7px;
        width: 4px;
        height: 4px;
    }



    #global-breadcrumb .breadcrumb > li:last-child a,
    #global-breadcrumb .breadcrumb > li:last-child span {
        max-width: 100%;
        font-size: 12.5px;
        line-height: 1.4;
    }
}



@media (max-width: 991px) {
    /* Zwi?kszamy wag? selektora przez podwójne nadanie klasy / ID */
    .abs-layout-breadcrumbs .breadcrumb > li > a,
    .abs-layout-breadcrumbs .breadcrumb > li > span,
    #global-breadcrumb .breadcrumb > li > a,
    #global-breadcrumb .breadcrumb > li > span {
        min-height: 0 !important;
        font-size: 11px !important;
    }
}

















/* Sta?a wysoko?? obszaru przycisku "Do koszyka" / "W koszyku",
   ?eby dodanie produktu do koszyka nie zmienia?o wysoko?ci karty */

.abs-offer-gallery .purchase-buttons {
    min-height: 46px; /* dopasuj do wysoko?ci Twojego przycisku */
    display: flex;
    align-items: center;
    justify-content: center;
}

.abs-offer-gallery .cart-btn.btn-success {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abs-offer-gallery .cart-btn .abs-btn-msg {
    white-space: nowrap !important;
    font-size: 12px; /* troch? mniejsza, ?eby "W koszyku ( 1 SZT )" si? zmie?ci?o w 1 linii */
}

/* Je?li po dodaniu do koszyka pojawia si? spinner ilo?ci (+/-),
   te? rezerwujemy dla niego sta?e miejsce, ?eby nie dok?ada? wysoko?ci */
.abs-offer-gallery .purchase-spinner {
    min-height: 34px;
}




























/* =====================================================================================
   EDUGALERIA ? P?YWAJ?CY PASEK "DO KOSZYKA" NA KARCIE PRODUKTU (mobile/tablet) ? v2
   Wklej na SAM KONIEC pliku custom CSS (po wszystkich innych regu?ach, w tym po
   poprzedniej wersji tego paska ? podmie? ca?o??, ?eby nie by?o duplikatów).

   Zmiany wzgl?dem v1:
   1) Uk?ad oparty o CSS GRID zamiast flex-wrap ? flex z zawijaniem "gubi?" cen?
      przy w??szych ekranach (kolidowa?a ze spinnerem). Grid ma z góry ustalone
      miejsca: cena / spinner+przycisk / najni?sza cena, wi?c nic si? nie rozje?d?a.
   2) Zdj?ta "pigu?ka" (t?o, ramka, zaokr?glenie) wokó? "Najni?sza cena z 30 dni" ?
      zostaje sam, wy?rodkowany tekst na pe?n? szeroko??.
   3) Ukryty widget Trusted Shops (dymek z ocen? 4,81) na karcie produktu na mobile ?
      nachodzi? na p?ywaj?cy pasek.
   ===================================================================================== */

@media (max-width: 991px) {

  /* miejsce na dole strony produktu, ?eby pasek nie zas?ania? tre?ci na starcie */
  #product-details-div {
    padding-bottom: 140px !important;
  }

  /* dymek Trusted Shops nachodzi na pasek ? chowamy go na karcie produktu (mobile) */
  body[data-controller="productpage"] div[id^="trustbadge-container"] {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     SAM PASEK ? przypi?ty box zakupowy, uk?ad GRID:
     [ cena            ] [ spinner + przycisk ]
     [        najni?sza cena z 30 dni (pe?na szeroko??)          ]
     ----------------------------------------------------------------------- */
  #product-details-div .abs-header-right {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 999 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: none !important;
    border-top: 1px solid #e9ecef !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 26px rgba(23, 54, 75, 0.16) !important;
    padding: 6px 14px 6px 14px !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    text-align: left !important;
  }

  /* rezerwujemy dodatkowe miejsce na dole paska pod lini? "najni?sza cena" -
     ten element w HTML siedzi WEWN?TRZ bloku z cen?, a nie obok niego, wi?c
     zamiast grid-row (które by go nie z?apa?o) wypinamy go position:absolute */
  #product-details-div .abs-header-right {
    padding-bottom: 30px !important;
  }

  /* pigu?ka "Realizacja 24h" ? niepotrzebna w mini-pasku */
  #product-details-div .abs-header-right:before {
    display: none !important;
  }

  /* chowamy to, co nie mie?ci si? w kompaktowym pasku */
  #product-details-div .abs-header-right .abs-product-header-variants,
  #product-details-div .abs-header-right .abs-product-header-actions,
  #product-details-div .abs-header-right .abs-product-header-right-column,
  #product-details-div .abs-header-right .abs-ask-product-btn {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     KOMÓRKA 1 (lewa, góra) ? cena
     ----------------------------------------------------------------------- */
  #product-details-div .abs-header-right .abs-product-header-price {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    border-bottom: none !important;
    min-width: 0 !important;
  }

  #product-details-div .abs-header-right .abs-item-price-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: auto !important;
  }

  /* przekre?lona cena bazowa + rabat ? jeden wiersz, NAD cen? finaln? */
  #product-details-div .abs-header-right .abs-item-price-base {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    order: 1 !important;
    margin-bottom: -10px !important;
  }
  #product-details-div .abs-header-right .abs-item-price-base .abs-item-price-amount {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    color: #9aa3ab !important;
    text-decoration: line-through !important;
  }

  #product-details-div .abs-header-right .abs-item-price-discount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  /* cena finalna ? poni?ej, czarna */
  #product-details-div .abs-header-right .abs-item-price-final {
    display: block !important;
    order: 2 !important;
  }
  #product-details-div .abs-header-right .abs-item-price-final .abs-item-price-amount {
    font-size: 26px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    color: #1a1a1a !important;
  }

  #product-details-div .abs-header-right .abs-item-price-final .abs-item-price-mode,
  #product-details-div .abs-header-right .abs-price-unit {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     KOMÓRKA 2 (prawa, góra) ? spinner NAD przyciskiem
     ----------------------------------------------------------------------- */
  #product-details-div .abs-header-right .abs-product-header-purchase {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 30px !important;
  }

  #product-details-div .abs-header-right .purchase-buttons {
    margin-top: 10px !important;
  }

  #product-details-div .abs-header-right .purchase-spinner {
    padding: 20px 0 5px !important;
  }

  #product-details-div .abs-header-right .touch-qnt,
  #product-details-div .abs-header-right .touch-qnt-input {
    margin: 0 !important;
    justify-content: flex-end !important;
    display: flex !important;
  }

  #product-details-div .abs-header-right .bootstrap-touchspin {
    height: 32px !important;
  }

  #product-details-div .abs-header-right .touch-qnt-unit {
    display: none !important; /* "SZT" zb?dne w mini-pasku */
  }

  #product-details-div .abs-header-right .cart-button {
    width: auto !important;
  }

  #product-details-div .abs-header-right .cart-btn.btn-success {
    height: 38px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 20px !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  #product-details-div .abs-header-right .cart-btn .abs-icon-cart {
    font-size: 16px !important;
  }

  /* -----------------------------------------------------------------------
     WIERSZ 2 (pe?na szeroko??) ? "Najni?sza cena z 30 dni", bez pigu?ki
     ----------------------------------------------------------------------- */
  #product-details-div .abs-header-right .omnibus-price {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 5px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;

    background: transparent !important;
    border: none !important;
    border-top: 1px solid #e9ecef !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1.35 !important;

    font-size: 10px !important;
    color: #1a1a1a !important;
    text-align: center !important;
  }

  #product-details-div .abs-header-right .omnibus-price .omnibus-info {
    display: none !important; /* ikonka kalendarza - zb?dna w mini pasku */
  }

  #product-details-div .abs-header-right .omnibus-price .ratio {
    font-weight: 700 !important;
    color: #fe6700 !important;
    background: transparent !important;
    padding: 0 !important;
  }
}



















@media (max-width: 768px) {
  #product-details-div .abs-header-right .abs-open-product-availability-subscription-btn {
    margin-top:20px;
  }
}















.abs-offer-gallery .cart-btn.btn-success,
.abs-offer-gallery .cart-btn.btn-info {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.abs-offer-gallery .abs-btn-msg {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.abs-offer-gallery .purchase-buttons {
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}










.summary-panel div:has(> b > span a[href^="tel:605084321"]) {
    display: none !important;
}





















#top.abs-header-content {
  font-size: 0 !important;
  line-height: 0 !important;
}
#top.abs-header-content > .container {
  font-size: 13px !important;
  line-height: normal !important;
}



















.oxfordSetBox2.seriaGrid {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 45px;
  column-gap: 30px;
  align-items: start;
  place-items: start center;
}
.seriaItem {
  width: 100%;
  max-width: 370px;
}
.seriaTitle {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #17374d;
  text-align: center;
  min-height: 47px; /* miejsce na 2 linie, ?eby ok?adki by?y równo */
  margin: 0 0 14px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.seriaRow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.seriaRow .goToRight {
  margin: 0;
}
@media (max-width: 1200px) {
  .oxfordSetBox2.seriaGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .oxfordSetBox2.seriaGrid { grid-template-columns: 1fr; }
}



































/* LP Mi?dzynarodowe 2026 ? siatka przycisków: mobile 2 kolumny, desktop 4 kolumny */
.intl-buttons-container {
  width: 100%;
  display: grid;
  gap: 12px;
  margin: 20px auto;
  padding: 0 15px;
  box-sizing: border-box;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; /* wszystkie rz?dy tej samej wysoko?ci (= najwy?szy) */
}

/* edytor CMS opakowuje linki w <p> ? rozpinamy go, ?eby linki by?y dzie?mi gridu */
.intl-buttons-container > p {
  display: contents;
}

.intl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fe6700;
  color: #ffffff !important;
  text-decoration: none !important;
  text-align: center;
  padding: 10px 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 30px;
  box-sizing: border-box;
  min-height: 44px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.intl-btn:hover {
  background-color: #17364b;
  color: #ffffff !important;
}

@media (min-width: 768px) {
  .intl-buttons-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0;
  }

  .intl-btn {
    font-size: 14px;
    padding: 10px 15px;
    min-height: 60px; /* miejsce na 2 linie tekstu, ?eby wszystkie by?y równe */
    line-height: 1.3;
  }
}