/* =========================
   MOBILE HEADER (<= 760px)
   Układ:
   - rząd 1: logo + akcje
   - rząd 2: wyszukiwarka full width
========================= */
@media (max-width: 760px) {

  /* topbar chowamy na mobile */
  .mp-topbar { display: none; }

  /* mainbar */
  .mp-mainbar { padding: 10px 0; }

  /* pozwól przejść na 2 rzędy */
  .mp-mainbar__row{
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* LOGO: lewa strona w rzędzie 1 */
  .mp-brand{
    order: 1;
    flex: 1 1 auto;
    min-width: 140px;
  }
  .mp-brand__logo{
    max-height: 34px;
    width: auto;
    height: auto;
    display: block;
  }

  /* AKCJE: prawa strona w rzędzie 1 */
  .mp-actions{
    order: 2;
    flex: 0 0 auto;
    gap: 8px;
  }

  .mp-action{
    padding: 8px;
    border-radius: 12px;
  }
  .mp-action__text{ display: none; } /* na mobile same ikonki */

  .mp-badge{
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    top: -4px;
    right: -4px;
  }

  .mp-ico{ width: 22px; height: 22px; }

  /* WYSZUKIWARKA: rząd 2 na całą szerokość */
  .mp-search{
    order: 3;
    flex: 1 0 100%;
    width: 100%;
  }

  .mp-search__inner{
    width: 100%;
  }

  /* select "Wszystkie kategorie" chowamy na mobile */
  .mp-search__select{ display: none; }

  /* input: pełna szerokość, brak zoomu iOS */
  .mp-search__input{
    width: 100%;
    font-size: 16px;
    padding: 12px 44px 12px 12px;
    border-radius: 14px;
  }

  .mp-search__btn{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}


/* =========================
   EXTRA SMALL (<= 420px)
   trochę ciaśniej, żeby się mieściło
========================= */
@media (max-width: 420px) {

  .mp-mainbar__row{ gap: 8px; }

  .mp-brand__logo{
    max-height: 30px;
  }

  .mp-actions{ gap: 6px; }

  .mp-action{
    padding: 7px;
    border-radius: 10px;
  }

  .mp-ico{ width: 21px; height: 21px; }

  .mp-search__input{
    padding: 11px 42px 11px 11px;
    border-radius: 12px;
  }

  .mp-search__btn{
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}

/* =========================
   MP TIMER - MOBILE
========================= */
@media (max-width: 760px){

  .mp-timer{
    padding: 14px 0;
    background-position: center;
    background-size: cover;
  }

  .mp-timer__bar{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  /* LEWA: ikonka + tytuł */
  .mp-timer__left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
  }

  .mp-timer__icon{
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
  }

  .mp-timer__title{
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* PRAWA: zegar */
  .mp-timer__right{
    width: 100%;
  }

  .mp-timer__clock{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  /* etykieta "Koniec za" */
  .mp-timer__label{
    flex: 1 1 auto;
    min-width: 0;
  }

  .mp-timer__labelTop{
    font-size: 12px;
    line-height: 1.2;
    opacity: .9;
  }

  .mp-timer__labelBot{
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* cyfry */
  .mp-timer__digits{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mp-timer__box{
    min-width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
  }

  .mp-timer__sep{
    font-size: 16px;
    font-weight: 800;
    opacity: .9;
    line-height: 1;
  }
}

/* EXTRA SMALL */
@media (max-width: 420px){

  .mp-timer__bar{
    padding: 10px;
    border-radius: 14px;
  }

  .mp-timer__title{
    font-size: 16px;
  }

  .mp-timer__clock{
    padding: 9px 10px;
    border-radius: 12px;
    gap: 8px;
  }

  .mp-timer__labelTop{ font-size: 11px; }
  .mp-timer__labelBot{ font-size: 12px; }

  .mp-timer__box{
    min-width: 40px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
  }

  .mp-timer__sep{
    font-size: 14px;
  }
}

/* ULTRA SMALL: gdyby na bardzo małych ekranach robiło się ciasno */
@media (max-width: 360px){

  .mp-timer__clock{
    flex-direction: column;
    align-items: stretch;
  }

  .mp-timer__digits{
    justify-content: center;
  }

  .mp-timer__labelBot{
    text-align: center;
  }
}


/* =========================
   MP FOOTER - MOBILE
========================= */
@media (max-width: 760px){

  .mp-footer{
    padding-top: 18px;
  }

  .mp-footer__top{
    padding-top: 12px;
    padding-bottom: 14px;
  }

  /* grid -> 1 kolumna */
  .mp-footer__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* logo na środku */
  .mp-footer__brand{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0 2px;
  }

  .mp-footer__logo{
    max-width: 220px;
    width: 100%;
    height: auto;
  }

  /* kolumny jako czytelne sekcje */
  .mp-footer__col{
    padding: 12px;
    border-radius: 16px;
  }

  .mp-footer__h{
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  /* menu linki większe, wygodne do klikania */
  .mp-footer__menu{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
  }

  .mp-footer__menu a{
    display: block;
    padding: 9px 10px;
    border-radius: 12px;
    text-decoration: none;
    line-height: 1.2;
  }

  /* kontakt */
  .mp-footer__contact{
    padding: 12px;
    border-radius: 16px;
  }

  .mp-footer__contactRow{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    line-height: 1.2;
    text-decoration: none;
  }

  .mp-footer__ico{
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
  }

  .mp-footer__ico img.emoji{
    width: 18px;
    height: 18px;
  }

  /* MID */
  .mp-footer__mid{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .mp-footer__midGrid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mp-footer__payments,
  .mp-footer__trust{
    padding: 12px;
    border-radius: 16px;
  }

  .mp-footer__payments img{
    max-width: 100%;
    height: auto;
    display: block;
  }

  .mp-footer__trust{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mp-footer__trustIco{
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
  }

  .mp-footer__trustT{
    font-size: 14px;
    line-height: 1.2;
  }

  .mp-footer__trustS{
    font-size: 12px;
    line-height: 1.2;
    opacity: .9;
    margin-top: 2px;
  }

  /* bottom copy */
  .mp-footer__bot{
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .mp-footer__copy{
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    opacity: .9;
  }
}


/* =========================
   FOOTER - SMALL MOBILE
========================= */
@media (max-width: 420px){

  .mp-footer__col,
  .mp-footer__payments,
  .mp-footer__trust,
  .mp-footer__contact{
    padding: 10px;
    border-radius: 14px;
  }

  .mp-footer__logo{
    max-width: 200px;
  }

  .mp-footer__menu a{
    padding: 8px 9px;
    border-radius: 10px;
  }

  .mp-footer__contactRow{
    padding: 9px 9px;
    border-radius: 10px;
  }

  .mp-footer__trustIco{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
}


/* =========================
   FOOTER - WIDE MOBILE (opcjonalnie 2 kolumny dla menu)
   Jeśli chcesz: menu w 2 kolumnach na większych telefonach
========================= */
@media (min-width: 520px) and (max-width: 760px){

  /* dwa pierwsze menu w 2 kolumnach (Moje Konto + Menu) mogą być obok siebie,
     jeśli Twoje desktopowe style nie narzucają innego układu */
  .mp-footer__grid{
    grid-template-columns: 1fr 1fr;
  }

  .mp-footer__brand,
  .mp-footer__contact{
    grid-column: 1 / -1; /* logo i kontakt na pełną szerokość */
  }

  /* Informacje też na pełną szerokość (opcjonalnie) */
  .mp-footer__col:nth-of-type(4){
    grid-column: 1 / -1;
  }
}

/* FOOTER: MOBILE zawsze 1 kolumna (pełna szerokość) */
@media (max-width: 760px){
  .mp-footer .mp-footer__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* każdy blok w stopce ma zająć całą szerokość */
  .mp-footer .mp-footer__brand,
  .mp-footer .mp-footer__col,
  .mp-footer .mp-footer__contact{
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  /* usuń “kolumnowe” wrażenie z desktopu */
  .mp-footer .mp-footer__col{
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}


/* MP HOWTO: przesuń samą grafikę (.mp-howto__art) w dół na mobile */
@media (max-width: 760px){
  #mp-howto-5348 .mp-howto__art{
    margin-top: 16px !important;  /* zwiększ/zmniejsz wg potrzeby */
  }
}

/* opcjonalnie dla bardzo małych ekranów */
@media (max-width: 420px){
  #mp-howto-5348 .mp-howto__art{
    margin-top: 22px !important;
  }
}

@media (max-width: 760px){
  #mp-howto-5348 .mp-howto__card--left .mp-howto__art{
    transform: translateY(28px) !important;
  }
}

@media (max-width: 760px){
  .mp-howto__art {
    position: relative !important;
    margin-top: 128px !important;          /* przesunięcie w dół */
  }
}

/* WooCommerce tabs (Opis / Opinie) – mobile: równe szerokości */
@media (max-width: 760px){

  /* kontener tabów */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs{
    display: flex !important;
    gap: 10px;
    padding: 0 !important;
    margin: 0 0 12px !important;
    flex-wrap: wrap;              /* jak brak miejsca, zawinie */
  }

  /* każdy li ma zająć połowę */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li{
    flex: 1 1 calc(50% - 5px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* link jako button full width */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li > a{
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 10px !important;
    border-radius: 14px !important;
    line-height: 1.1;
  }

  /* opcjonalnie: żeby aktywna zakładka nie była "wyższa" */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li.active > a{
    box-shadow: none;
  }
}

/* bardzo małe ekrany: po 100% (jeden pod drugim) */
@media (max-width: 360px){
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li{
    flex: 1 1 100% !important;
  }
}


/* SHOP: mobile = 1 kolumna produktów */
@media (max-width: 760px){

  /* ul products */
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* li product zawsze full width */
  .woocommerce ul.products > li.product,
  .woocommerce ul.products > li.product.mp-shop__li{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* jeśli coś narzuca flex na rodzicu w Twoim motywie */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after{
    display: none !important;
    content: none !important;
  }

  /* karta też na full */
  .mp-shop__card,
  .mp-best__card{
    width: 100% !important;
  }

  /* obrazek/kafel nie może zawężać layoutu */
  .mp-best__imgLink,
  .mp-best__img{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px){
  .mp-shop__li,
  .mp-best__card.mp-shop__card{
    max-width: none !important;
  }
}

/* ===== SHOP MOBILE: karta 1-kolumnowa, bez lewego paska przy zdjęciu ===== */
@media (max-width: 760px){

  /* 1) UL: jedna kolumna */
  .woocommerce ul.products{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) LI: full width, bez floatów */
  .woocommerce ul.products > li.product{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* 3) KARTA: układ grid w pionie */
  .woocommerce ul.products .mp-shop__card,
  .woocommerce ul.products .mp-best__card{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "img"
      "name"
      "rating"
      "price"
      "btn";
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 14px !important;
    box-sizing: border-box !important;
  }

  /* 4) OBRAZEK: zdejmij wszystkie tła/paski z wrapperów */
  .woocommerce ul.products .mp-best__imgLink{
    grid-area: img;
    display: block !important;
    width: 100% !important;
    height: 210px;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .woocommerce ul.products .mp-best__imgLink::before,
  .woocommerce ul.products .mp-best__imgLink::after,
  .woocommerce ul.products .mp-shop__card::before,
  .woocommerce ul.products .mp-shop__card::after,
  .woocommerce ul.products .mp-best__card::before,
  .woocommerce ul.products .mp-best__card::after{
    content: none !important;
    display: none !important;
  }

  .woocommerce ul.products .mp-best__img{
    display: block !important;
    width: 100% !important;
    height: 220px !important;      /* stała wysokość = równe kafle */
    max-width: 100% !important;

    object-fit: contain !important; /* brak ucięć i brak „paska” */
    border-radius: 14px !important;

    background: transparent !important;
  }

  /* 5) TEKSTY: przypisz do grid */
  .woocommerce ul.products .mp-best__name{
    grid-area: name;
    margin: 0 !important;
    width: 100% !important;
    line-height: 1.2;
  }

  .woocommerce ul.products .mp-best__rating{
    grid-area: rating;
    margin: 0 !important;
  }

  .woocommerce ul.products .mp-best__price{
    grid-area: price;
    margin: 0 !important;
  }

  /* 6) BUTTON: full width */
  .woocommerce ul.products .mp-best__add{
    grid-area: btn;
    width: 90% !important;
    justify-content: center !important;
    margin: 0 !important;
  }
}

/* bardzo małe ekrany: trochę niższy obrazek */
@media (max-width: 420px){
  .woocommerce ul.products .mp-best__img{
    height: 200px !important;
  }
}

/* MOBILE: przycisk "Dodaj do koszyka" – żeby się mieścił */
@media (max-width: 760px){

  a.mp-best__add.mojeejj{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 12px 14px !important;
    font-size: 14px !important;     /* było 12px – za małe i wygląda źle */
    line-height: 1 !important;
    white-space: nowrap !important; /* nie zawijaj */
    text-align: center !important;

    border-radius: 14px !important;
  }

  a.mp-best__add.mojeejj .mp-best__cartIco{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

/* EXTRA SMALL: jeszcze ciaśniej */
@media (max-width: 360px){
  a.mp-best__add.mojeejj{
    font-size: 13px !important;
    padding: 11px 12px !important;
    gap: 8px !important;
  }
  a.mp-best__add.mojeejj .mp-best__cartIco{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }
}

/* =========================
   CART (mps-seller-cart) – MOBILE
========================= */
@media (max-width: 760px){

  /* Sekcja sprzedawcy jako karta */
  .mps-seller-cart{
    margin: 0 0 14px !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .mps-seller-cart__header{
    padding: 12px 14px;
  }

  .mps-seller-cart__title{
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
  }

  /* Tabela: nagłówki out */
  .mps-seller-cart table.shop_table thead{
    display: none !important;
  }

  .mps-seller-cart table.shop_table{
    border: 0 !important;
    margin: 0 !important;
  }

  .mps-seller-cart table.shop_table tbody,
  .mps-seller-cart table.shop_table tr,
  .mps-seller-cart table.shop_table td{
    display: block !important;
    width: 100% !important;
  }

  /* Wiersz produktu jako karta */
  .mps-seller-cart tr.cart_item{
    position: relative;
    padding: 12px 14px 14px !important;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  /* Układ: miniatura + nazwa/cena/ilość/kwota */
  .mps-seller-cart tr.cart_item td{
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Usuń (X) w prawym górnym rogu */
  .mps-seller-cart td.product-remove{
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto !important;
  }

  .mps-seller-cart td.product-remove a.remove{
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }

  /* Miniatura */
  .mps-seller-cart td.product-thumbnail{
    margin-bottom: 10px !important;
  }

  .mps-seller-cart td.product-thumbnail img{
    width: 100% !important;
    max-width: 220px !important;     /* jeśli chcesz full width: usuń max-width */
    height: auto !important;
    display: block;
    border-radius: 14px;
  }

  /* Nazwa */
  .mps-seller-cart td.product-name{
    margin-bottom: 8px !important;
  }

  .mps-seller-cart td.product-name a{
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
  }

  /* Cena / Kwota – w 2 kolumnach */
  .mps-seller-cart td.product-price,
  .mps-seller-cart td.product-subtotal{
    margin-top: 6px !important;
    font-size: 14px;
  }

  .mps-seller-cart td.product-price::before{
    content: "Cena: ";
    font-weight: 700;
    opacity: .75;
  }

  .mps-seller-cart td.product-subtotal::before{
    content: "Kwota: ";
    font-weight: 700;
    opacity: .75;
  }

  /* Ilość */
  .mps-seller-cart td.product-quantity{
    margin-top: 10px !important;
  }

  .mps-seller-cart td.product-quantity::before{
    content: "Ilość:";
    display: block;
    font-weight: 700;
    opacity: .75;
    margin-bottom: 6px;
  }

  .mps-seller-cart .quantity{
    width: 140px; /* możesz dać 100% jeśli ma być szerzej */
  }

  .mps-seller-cart .quantity input.qty{
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 16px !important; /* iOS bez zoomu */
    text-align: center;
  }

  /* Suma u sprzedawcy */
  .mps-seller-cart tr.mps-seller-subtotal-row{
    padding: 10px 14px !important;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  .mps-seller-cart tr.mps-seller-subtotal-row td{
    padding: 0 !important;
    font-size: 14px;
  }

  /* Kupon + aktualizacja */
  .mps-seller-cart td.actions{
    padding: 12px 14px 14px !important;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  .mps-seller-cart td.actions .coupon{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .mps-seller-cart td.actions .coupon label{
    font-weight: 700;
    opacity: .75;
  }

  .mps-seller-cart td.actions .coupon input#coupon_code{
    height: 44px;
    border-radius: 12px;
    font-size: 16px; /* iOS bez zoomu */
    padding: 0 12px;
  }

  .mps-seller-cart td.actions .coupon button,
  .mps-seller-cart td.actions button[name="update_cart"]{
    width: 100% !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  /* Podsumowanie koszyka (cart_totals) */
  .cart-collaterals .cart_totals{
    margin-top: 14px !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .cart-collaterals .cart_totals h2{
    font-size: 16px;
    margin: 0;
    padding: 12px 14px;
  }

  .cart-collaterals .cart_totals table{
    border: 0 !important;
    margin: 0 !important;
  }

  .cart-collaterals .cart_totals table th,
  .cart-collaterals .cart_totals table td{
    padding: 10px 14px !important;
  }

  /* Metody wysyłki: radio w kolumnie */
  .woocommerce ul.woocommerce-shipping-methods{
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .woocommerce ul.woocommerce-shipping-methods li{
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
  }

  .woocommerce ul.woocommerce-shipping-methods label{
    line-height: 1.25;
  }

  /* przycisk paczkomatu */
  .select-paczkomat-button{
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-top: 8px;
  }

  /* CTA do kasy */
  .wc-proceed-to-checkout .checkout-button{
    width: 100% !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }
}


/* =========================
   CART MOBILE – FIX (bez robienia kart z tabeli)
========================= */
@media (max-width: 760px){

  /* 0) Wyłącz nasze wcześniejsze "display:block" na tabeli jeśli gdzieś siedzi */
  .woocommerce-cart .shop_table,
  .woocommerce-cart .shop_table tbody,
  .woocommerce-cart .shop_table tr,
  .woocommerce-cart .shop_table td{
    display: revert !important;
    width: revert !important;
  }

  /* 1) Sekcje sprzedawcy */
  .mps-seller-cart{
    margin: 0 0 14px !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .mps-seller-cart__header{
    padding: 12px 14px !important;
  }
  .mps-seller-cart__title{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2;
  }

  /* 2) Mobile tabela WooCommerce: zachowaj responsywny tryb */
  .woocommerce-cart table.shop_table_responsive thead{
    display: none !important;
  }

  .woocommerce-cart table.shop_table_responsive tr.cart_item{
    display: block !important;
    padding: 12px 14px !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    background: transparent !important; /* usuń dziwne "podświetlenia" */
  }

  .woocommerce-cart table.shop_table_responsive tr.cart_item td{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 8px 0 !important;
    border: 0 !important;

    background: transparent !important; /* usuń niebieskie/zielone tła */
    box-shadow: none !important;
  }

  /* 3) Usuń X */
  .woocommerce-cart table.shop_table_responsive td.product-remove{
    justify-content: flex-end !important;
    padding-top: 0 !important;
  }
  .woocommerce-cart a.remove{
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4) Miniatura: po lewej, nie na całą szerokość */
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail{
    justify-content: flex-start !important;
  }
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail img{
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
  }

  /* 5) Nazwa produktu – jako blok, większa czytelność */
  .woocommerce-cart table.shop_table_responsive td.product-name{
    align-items: flex-start !important;
  }
  .woocommerce-cart table.shop_table_responsive td.product-name a{
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
  }

  /* 6) Ilość – input normalnej szerokości */
  .woocommerce-cart .quantity{
    width: 120px !important;
  }
  .woocommerce-cart .quantity input.qty{
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important; /* iOS bez zoomu */
    text-align: center !important;
    border-radius: 12px !important;
  }

  /* 7) Wiersz "Suma u sprzedawcy" */
  .mps-seller-subtotal-row td{
    padding: 10px 14px !important;
    background: transparent !important;
  }

  /* 8) Kupon + update: full width, bez zwężeń */
  .woocommerce-cart td.actions{
    padding: 12px 14px 14px !important;
  }
  .woocommerce-cart td.actions .coupon{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }
  .woocommerce-cart td.actions .coupon input#coupon_code{
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
  }

  /* WAŻNE: wszystkie buttony w koszyku mają być 100% */
  .woocommerce-cart td.actions button.button,
  .woocommerce-cart td.actions .coupon button.button,
  .woocommerce-cart button[name="update_cart"],
  .woocommerce-cart .select-paczkomat-button,
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
    width: 90% !important;
    min-width: 0 !important;
    height: 46px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
  }

  /* 9) Metody wysyłki: label + radio czytelnie, a button pod spodem */
  .woocommerce-cart ul.woocommerce-shipping-methods{
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 10px !important;
  }

  .woocommerce-cart ul.woocommerce-shipping-methods li{
    display: block !important;
  }

  .woocommerce-cart ul.woocommerce-shipping-methods input.shipping_method{
    margin-right: 8px;
  }

  .woocommerce-cart ul.woocommerce-shipping-methods label{
    display: inline !important;
    line-height: 1.25 !important;
  }

  /* przycisk paczkomatu zawsze blok pod etykietą */
  .woocommerce-cart ul.woocommerce-shipping-methods li .select-paczkomat-button{
    margin-top: 10px !important;
  }

  /* 10) Podsumowanie */
  .cart-collaterals .cart_totals{
    margin-top: 14px !important;
    border-radius: 16px;
    overflow: hidden;
  }
  .cart-collaterals .cart_totals h2{
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  .cart-collaterals .cart_totals table th,
  .cart-collaterals .cart_totals table td{
    padding: 10px 14px !important;
  }
}

/* =========================
   CHECKOUT (mps-checkout) – MOBILE
========================= */
@media (max-width: 760px){

  /* Kupon info (toggle) */
  .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
    border-radius: 14px;
    padding: 12px 14px !important;
    margin: 0 0 12px !important;
  }

  .woocommerce .woocommerce-form-coupon-toggle .showcoupon{
    display: inline-block;
    margin-left: 6px;
    font-weight: 800;
    text-decoration: underline;
  }

  /* Formularz kuponu */
  .woocommerce form.checkout_coupon{
    border-radius: 16px;
    padding: 12px 14px !important;
    margin: 0 0 14px !important;
  }

  .woocommerce form.checkout_coupon .form-row{
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
  }

  .woocommerce form.checkout_coupon input#coupon_code{
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important; /* iOS bez zoomu */
    border-radius: 12px !important;
    padding: 0 12px !important;
  }

  .woocommerce form.checkout_coupon button[type="submit"]{
    width: 100% !important;
    height: 46px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
  }

  /* GRID checkout -> 1 kolumna */
  .mps-checkout__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mps-checkout__col{
    width: 100% !important;
  }

  /* Karty */
  .mps-card{
    border-radius: 16px;
    overflow: hidden;
  }

  .mps-card__title{
    font-size: 16px !important;
    line-height: 1.2;
    padding: 12px 14px !important;
    margin: 0 !important;
  }

  .mps-card__body{
    padding: 12px 14px 14px !important;
  }

  /* Pola formularza */
  .woocommerce-checkout .form-row{
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
  }

  .woocommerce-checkout .form-row label{
    display: block;
    margin: 0 0 6px;
    font-weight: 700;
  }

  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row select{
    width: 100% !important;
    height: 44px;
    border-radius: 12px;
    font-size: 16px; /* iOS bez zoomu */
    padding: 0 12px;
    box-sizing: border-box;
  }

  .woocommerce-checkout .form-row textarea{
    height: auto;
    min-height: 90px;
    padding: 10px 12px;
  }

  /* Select2 (kraj) */
  .woocommerce-checkout .select2-container{
    width: 100% !important;
  }
  .woocommerce-checkout .select2-container .select2-selection--single{
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
  }
  .woocommerce-checkout .select2-container .select2-selection__rendered{
    line-height: 44px !important;
    padding-left: 12px !important;
  }

  /* Podsumowanie zamówienia tabela */
  .mps-review-table{
    margin: 0 !important;
    border: 0 !important;
  }
  .mps-review-table thead{
    display: none !important;
  }
  .mps-review-table tr,
  .mps-review-table td,
  .mps-review-table th{
    border: 0 !important;
  }
  .mps-review-table tbody tr.cart_item td{
    padding: 10px 0 !important;
  }
  .mps-review-table .mps-seller-row td{
    padding: 12px 0 6px !important;
    font-size: 14px;
    opacity: .9;
  }

  /* Shipping w podsumowaniu – czytelny układ */
  .mps-review-table .woocommerce-shipping-totals th,
  .mps-review-table .woocommerce-shipping-totals td{
    padding: 10px 0 !important;
    vertical-align: top;
  }

  .woocommerce-checkout ul.woocommerce-shipping-methods{
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 10px !important;
  }

  .woocommerce-checkout ul.woocommerce-shipping-methods li{
    display: block !important;
  }

  .woocommerce-checkout ul.woocommerce-shipping-methods label{
    line-height: 1.25 !important;
  }

  /* NAPRAWA: przycisk paczkomatu nie może być 28px */
  .woocommerce-checkout .select-paczkomat-button{
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
    margin-top: 10px !important;
  }

  /* Metoda płatności */
  #payment{
    margin-top: 10px;
  }

  #payment ul.payment_methods{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid;
    gap: 10px;
  }

  #payment ul.payment_methods li{
    border-radius: 14px;
    padding: 12px 12px;
  }

  #payment ul.payment_methods label{
    font-weight: 800;
  }

  #payment .payment_box{
    margin-top: 10px !important;
    border-radius: 12px;
    padding: 10px 12px !important;
  }

  /* CTA: Kupuję i płacę */
  #place_order{
    width: 100% !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
  }

  /* marginesy sekcji place-order */
  .woocommerce-checkout .place-order{
    margin-top: 12px !important;
  }
}

/* MOBILE: mp-topbar ma być widoczny */
@media (max-width: 760px){

  .mp-topbar{
    display: block !important;
    height: auto !important;
  }

  .mp-topbar__row{
    display: flex !important;
    flex-wrap: wrap !important;      /* zawijanie, żeby się mieściło */
    gap: 8px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 12px !important;
  }

  .mp-topbar__left,
  .mp-topbar__right{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mp-topbar__sep{
    display: none !important;        /* ten "/" na mobile tylko przeszkadza */
  }

  .mp-topbar__link{
    padding: 6px 10px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .mp-topbar__link .mp-ico{
    margin-right: 6px;
  }
}


/* =========================
   MOBILE TOPBAR – 2 RZĘDY
========================= */
@media (max-width: 760px){

  .mp-topbar{
    display: block !important;
  }

  .mp-topbar__row{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    padding: 8px 14px !important;
  }

  /* RZĄD 1 */
  .mp-topbar__left{
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* RZĄD 2 */
  .mp-topbar__right{
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .mp-topbar__link{
    font-size: 13px !important;
    padding: 4px 0 !important;
    white-space: nowrap !important;
  }

  .mp-topbar__link span{
    display: inline !important;
  }

}

/* =========================
   MOBILE TOPBAR – DO LEWEJ + NIE WYCHODZI POZA EKRAN
========================= */
@media (max-width: 760px){

  .mp-topbar{ display:block !important; }

  .mp-topbar__row{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;   /* DO LEWEJ */
    gap:6px !important;
    padding:8px 12px !important;
    overflow:hidden !important;
  }

  /* oba rzędy jako flex + zawijanie */
  .mp-topbar__left,
  .mp-topbar__right{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important; /* DO LEWEJ */
    align-items:center !important;
    flex-wrap:wrap !important;             /* zawijaj, nie wyjeżdżaj */
    gap:8px 12px !important;
    min-width:0 !important;
  }

  /* linki mają się mieścić */
  .mp-topbar__link{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:4px 0 !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:normal !important;      /* pozwól łamać */
    max-width:100% !important;
    min-width:0 !important;
  }

  .mp-topbar__link span{
    display:inline-block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;  /* jakby było za długie */
    white-space:nowrap !important;      /* trzyma w 1 linii */
  }

  /* ikony mniejsze, żeby było ciaśniej */
  .mp-topbar__link .mp-ico--sm{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
  }

  /* separator wyłączony */
  .mp-topbar__sep{ display:none !important; }
}