/* Backdrop */
.cne-modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:999998;
}

/* Modal drawer */
.cne-modal{
  display:none;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:min(420px, 92vw);
  height:100vh;
  background:#fff;
  z-index:999999;
  box-shadow:-18px 0 60px rgba(0,0,0,.18);
  overflow:hidden;

  /* layout */
  display:none;
  grid-template-rows:auto 1fr auto;
}

.cne-modal.is-open{ display:grid; }
.cne-modal-backdrop.is-open{ display:block; }



.cne-modal__body{
  overflow:auto;
}

.cne-modal__content{
  padding:14px 16px 18px;
}

.cne-section{
  margin-top:12px;
}

.cne-hint{
  margin-top:10px;
  font-size:13px;
  color:rgba(0,0,0,.7);
}

/* Add list */
.cne-addlist__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.cne-addlist__item{
  text-align:left;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px;
  background:#fff;
  cursor:pointer;
}

.cne-addlist__img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.cne-addlist__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cne-addlist__name{
  font-size:12.5px;
  font-weight:700;
  line-height:1.25;
  margin:0 0 6px;
}
.cne-addlist__price{
  font-size:12.5px;
  font-weight:600;
  color:rgba(0,0,0,.75);
}

/* Footer */
.cne-modal__footer{
  padding:14px 16px 18px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.cne-cta{
  width:100%;
  height:52px;
  border-radius:999px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
}
.cne-cta:disabled{ opacity:.6; cursor:not-allowed; }

/* Variation form host (HTML przychodzi z endpointu) */
.cne-variation-host{
  margin-top:10px;
}

/* Simple loader */
.cne-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.7);
  animation:cneSpin .8s linear infinite;
  display:inline-block;
  vertical-align:middle;
}
@keyframes cneSpin{ to{ transform:rotate(360deg); } }


/* =========================================================
   CNE MODAL – PATCH (1/3)
   Bezpieczniki + widoczność per krok
   Wklej NA SAM KONIEC pliku CSS
========================================================= */

/* 1) JS steruje widocznością: hidden zawsze wygrywa */
.cne-modal [hidden]{
  display: none !important;
}

/* 2) KROK 1 (promo): pokazujemy TYLKO promostep + footer promo */
.cne-modal[data-step="promo"] [data-cne-promostep]{
  display: block !important;
}

.cne-modal[data-step="promo"] [data-cne-footer-promo]{
  display: block !important;
}

/* twardo chowamy wszystko z edycji w kroku 1 */
.cne-modal[data-step="promo"] [data-cne-product],
.cne-modal[data-step="promo"] [data-cne-attrs],
.cne-modal[data-step="promo"] [data-cne-variation-host],
.cne-modal[data-step="promo"] [data-cne-footer-edit],
.cne-modal[data-step="promo"] .cne-stepper,
.cne-modal[data-step="promo"] [data-save]{
  display: none !important;
}

/* 3) KROK 2 (edit): pokazujemy produkt + atrybuty + footer edit, chowamy promostep + footer promo */
.cne-modal[data-step="edit"] [data-cne-promostep],
.cne-modal[data-step="edit"] [data-cne-footer-promo]{
  display: none !important;
}

.cne-modal[data-step="edit"] [data-cne-product],
.cne-modal[data-step="edit"] [data-cne-attrs],
.cne-modal[data-step="edit"] [data-cne-footer-edit]{
  display: block !important;
}

/* 4) Jeśli miałaś globalne: .cne-modal__body .cne-section{display:none;}
   to to ją nadpisze w kroku 2 */
.cne-modal[data-step="edit"] .cne-section{
  display: block !important;
}

/* =========================================================
   CNE MODAL – PATCH (2/3)
   KROK 1 (promo): wygląd listy produktów (karty)
========================================================= */

.cne-modal[data-step="promo"] .cne-promostep__top{
  padding: 0 18px;
}

.cne-modal[data-step="promo"] .cne-promostep__badge{
  display: inline-block;
  font-size: 11.6px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(0,0,0,.55);
  margin: 6px 0 10px;
}

.cne-modal[data-step="promo"] .cne-promostep__list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 18px 18px;
}

/* karta */
.cne-modal[data-step="promo"] .cne-promocard{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* układ jak w Twoich “kartach”: miniatura + meta + plus */
.cne-modal[data-step="promo"] .cne-promocard__inner{
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.cne-modal[data-step="promo"] .cne-promocard__img{
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

.cne-modal[data-step="promo"] .cne-promocard__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cne-modal[data-step="promo"] .cne-promocard__meta{
  min-width: 0;
}

.cne-modal[data-step="promo"] .cne-promocard__name{
  font-size: 13.8px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 6px;
  color: rgba(0,0,0,.86);
}

.cne-modal[data-step="promo"] .cne-promocard__price{
  font-size: 13.8px;
  font-weight: 600;
  margin: 0;
  color: rgba(0,0,0,.62);
}

/* plus */
.cne-modal[data-step="promo"] .cne-promocard__plus{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.13);
  background: #fff;
  color: rgba(0,0,0,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.cne-modal[data-step="promo"] .cne-promocard__plus:hover{
  border-color: rgba(0,0,0,.24);
  color: rgba(0,0,0,.86);
}
/* =========================================================
   CNE MODAL – PATCH (3/3)
   KROK 2 (edit): footer (stepper + CTA)
========================================================= */

.cne-modal[data-step="edit"] .cne-modal__footer--edit > .cne-footer-row{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* stała szerokość steppera */
.cne-modal[data-step="edit"] .cne-modal__footer--edit .cne-stepper{
  flex: 0 0 120px !important;
  width: 120px !important;
  max-width: 120px !important;
}

/* CTA bierze resztę */
.cne-modal[data-step="edit"] .cne-modal__footer--edit [data-save]{
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}


/* HOTFIX: usuń wielką pustą przestrzeń nad listą */
.cne-modal__body { padding-top: 0 !important; }
.cne-modal__content { padding-top: 0 !important; }
.cne-promostep { margin-top: 0 !important; }
.cne-promostep__top { margin: 0 !important; padding: 0 !important; }



/* =========================================================
   CNE MODAL — CLEAN (header + step logic + addons list + gallery)
   Wklej na SAM KONIEC pliku z modalem
========================================================= */

/* pewniak: hidden zawsze działa */
.cne-modal [hidden]{ display:none !important; }

/* ==============================
   STEP LOGIC (promo vs edit)
================================ */

/* KROK 1 (promo): “czysta lista” */
.cne-modal[data-step="promo"] [data-cne-attrs],
.cne-modal[data-step="promo"] [data-cne-variation-host],
.cne-modal[data-step="promo"] .cne-product,
.cne-modal[data-step="promo"] .cne-current,
.cne-modal[data-step="promo"] .cne-qty,
.cne-modal[data-step="promo"] .cne-stepper,
.cne-modal[data-step="promo"] .cne-modal__footer--edit{
  display: none !important;
}

.cne-modal[data-step="promo"] [data-cne-promostep]{ display:block !important; }
.cne-modal[data-step="promo"] [data-cne-footer-promo]{ display:block !important; }

/* KROK 2 (edit): chowamy krok 1 i footer promo */
.cne-modal[data-step="edit"] [data-cne-promostep]{ display:none !important; }
.cne-modal[data-step="edit"] [data-cne-footer-promo]{ display:none !important; }

.cne-modal[data-step="edit"] [data-cne-attrs],
.cne-modal[data-step="edit"] [data-cne-variation-host],
.cne-modal[data-step="edit"] .cne-product,
.cne-modal[data-step="edit"] .cne-modal__footer--edit{
  display: block !important;
}

/* ==============================
   HEADER (spójny, bez hacków)
================================ */

.cne-modal__head{
  position: relative;
  padding-bottom: 10px;
}

/* linia tytułu: back + title + badge */
.cne-head-titleline{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* back (⬅️) sterowany atrybutem */
.cne-modal [data-cne-back]{ display:none !important; }
.cne-modal[data-step="edit"] [data-cne-back]{ display:inline-flex !important; }

.cne-head-back{
  appearance:none;
  background:transparent;
  border:0;
  padding:6px;
  margin: -6px 0 -6px -6px;

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

  color: rgba(0,0,0,.55);
  cursor:pointer;
  border-radius:999px;

  transition: color .18s ease, background-color .18s ease, transform .12s ease;
}
.cne-head-back svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cne-head-back:hover{
  color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.04);
}
.cne-head-back:active{ transform: translateX(-1px); }

@media (max-width: 767px){
  .cne-head-back{ padding:8px; }
}

/* badge tylko w kroku 1 */
.cne-modal [data-cne-headbadge]{ display:none !important; }
.cne-modal[data-step="promo"] [data-cne-headbadge]{ display:inline-flex !important; }

.cne-head-badge{
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;

  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.62);
}

/* subheader promo: tylko krok 1 */
.cne-modal .cne-head-sub{ display:none !important; }
.cne-modal[data-step="promo"] .cne-head-sub{
  display:block !important;
  margin: 2px 0 8px;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .08em;
  font-weight: 500;
  color: rgba(0,0,0,.46);
}

/* meta (nazwa produktu) pokazuj tylko w kroku 2 */
.cne-modal .cne-head-meta{ display:none !important; }
.cne-modal[data-step="edit"] .cne-head-meta{
  display:block !important;
  margin-top: 6px;
}
.cne-head-left .cne-head-meta span{
  color: rgba(0,0,0,.46);
  font-size: 11.8px;
}
.cne-head-meta .cne-head-name a{
  color: rgba(0,0,0,.46);
  letter-spacing: .33px;
}

/* progress: zawsze widoczny (oba kroki) */
.cne-head-progress{
  display:flex;
  gap:10px;
  margin-top: 8px !important;
  padding: 0 18px 14px !important;
}
.cne-head-progress__bar{
  height:3px;
  flex:1;
  border-radius:999px;
  background: rgba(0,0,0,.14) !important;
}
.cne-head-progress__bar.is-active{
  background: rgba(120,60,60,0.7) !important;
}

/* X close – zawsze w prawym górnym rogu */
.cne-modal .cne-modal__head .cne-modal__close{
  position:absolute !important;
  top: 7.5px;
  right: 12px;
  margin:0 !important;
  z-index:5;
}

/* ==============================
   MODAL GRID ROWS (header/progress/body/footer)
================================ */

.cne-modal{
  grid-template-rows: auto auto 1fr auto !important;
}
.cne-modal__head{ grid-row: 1 !important; }
.cne-head-progress{ grid-row: 2 !important; align-self:start !important; }
.cne-modal__body{ grid-row: 3 !important; padding-top: 6px !important; }
.cne-modal__footer{ grid-row: 4 !important; }

/* ==============================
   ADDONS LIST (shortcode / products-wrap)
================================ */

/* Woo lista produktów w pickerze */
.cne-modal [data-cne-addons-pick] ul.products{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

.cne-modal [data-cne-addons-pick] li.product{
  margin:0 !important;
  padding:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:14px !important;
  background:#fff !important;

  display:grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;
}

.cne-modal [data-cne-addons-pick] li.product img{
  width:88px !important;
  height:88px !important;
  object-fit:cover !important;
  border-radius:12px !important;
}

.cne-modal [data-cne-addons-pick] .woocommerce-loop-product__title{
  font-size:14px !important;
  line-height:1.25 !important;
  margin:0 0 6px !important;
}

.cne-modal [data-cne-addons-pick] .price{
  font-size:14px !important;
  font-weight:600 !important;
  margin:0 !important;
}

.cne-modal [data-cne-addons-pick] .add_to_cart_button,
.cne-modal [data-cne-addons-pick] a.button{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  padding:0 !important;

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

  border:1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;
  color: rgba(0,0,0,.78) !important;
  font-size:18px !important;
  line-height:1 !important;
}

.cne-modal [data-cne-addons-pick] .star-rating,
.cne-modal [data-cne-addons-pick] .woocommerce-product-details__short-description{
  display:none !important;
}

/* products-wrap (Twoje custom renderowanie) */
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:10px 0 0 !important;
}

.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .product-item{
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
}

.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .product-item-inner{
  display:grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;

  padding:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:14px !important;
  background:#fff !important;
}

/* ukryj natywny przycisk z shortcode */
.cne-modal[data-mode="add"] .cne-addons-host .cne-native-add-hidden{
  display:none !important;
}

/* ukryj oryginalne przyciski Woo w products-wrap */
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap a.add_to_cart_button,
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap a.button,
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap button.add_to_cart_button,
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap button.button{
  display:none !important;
}

/* nasz plus */
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .cne-addbtn,
.cne-modal[data-mode="add"] .cne-addons-host .product-item-inner .cne-addplus{
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;

  border:1px solid rgba(0,0,0,.14) !important;
  background:#fff !important;

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

  color: rgba(0,0,0,.72) !important;
  font-size:16px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .cne-addbtn:hover,
.cne-modal[data-mode="add"] .cne-addons-host .product-item-inner .cne-addplus:hover{
  border-color: rgba(0,0,0,.24) !important;
  color: rgba(0,0,0,.86) !important;
}

/* meta w products-wrap */
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .cne-addons-meta{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  min-width:0 !important;
}
.cne-modal[data-mode="add"] .cne-addons-host .products-wrap .cne-addons-meta .price{
  margin:0 !important;
}

.cne-addons-pick .cne-addons-meta a{
  line-height:1.2em;
  font-size:11.8px !important;
  color:#444 !important;
}
.cne-addons-pick .price bdi{ color:#555; }

/* ==============================
   PRODUCT VIEW (gallery + meta)
================================ */

/* domyślnie: meta pod galerią */
.cne-modal .cne-product{
  display:block !important;
  gap:0 !important;
}
.cne-modal .cne-gallery{
  width:100% !important;
  margin-bottom:12px !important;
}
.cne-product__meta{ margin-top:12px; }

/* wejście przez "Edytuj": obrazek po lewej, meta po prawej */
.cne-modal[data-entry="edit"] .cne-product{
  display:grid !important;
  grid-template-columns: 140px 1fr !important;
  gap:14px !important;
  align-items:start !important;
}
.cne-modal[data-entry="edit"] .cne-product__meta{
  grid-column:2 !important;
  margin:0 !important;
}
/* w edit chowamy slider */
.cne-modal[data-entry="edit"] [data-cne-gallery]{ display:none !important; }
.cne-modal[data-entry="edit"] [data-cne-imgsingle]{ width:140px; }
.cne-modal[data-entry="edit"] [data-cne-imgsingle] img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* strzałki galerii: tylko hover (bundle/add) */
.cne-modal[data-entry="bundle"][data-mode="add"] .cne-gallery__nav{
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(-50%) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .cne-modal[data-entry="bundle"][data-mode="add"] .cne-gallery:hover .cne-gallery__nav{
    opacity:1 !important;
    pointer-events:auto !important;
    transform: translateY(-50%) scale(1);
  }
}
.cne-product .cne-gallery .cne-gallery__dots{ display:none; }

/* link nazwy produktu */
.cne-product-link{
  color: rgba(0,0,0,.78);
  text-decoration:none !important;
  transition: color .15s ease, opacity .15s ease;
}
.cne-product-link:hover,
.cne-product-link:focus-visible{
  color: rgba(0,0,0,.92);
  opacity:.95;
  text-decoration:none !important;
  outline:none;
}

/* ==============================
   EDIT FOOTER (stepper width)
================================ */

.cne-modal .cne-modal__footer--edit > .cne-footer-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.cne-modal .cne-modal__footer--edit .cne-stepper{
  flex:0 0 120px !important;
  width:120px !important;
  max-width:120px !important;
}

/* CTA bierze resztę */
.cne-modal .cne-modal__footer--edit [data-save]{
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* ==============================
   VARIATIONS (porządki)
================================ */

/* usuń link "Tabela rozmiarów" w modalu */
.cne-modal .variations tr a{
  display:none !important;
}

/* label w wariacjach */
.cne-modal .variations tr .label{
  border-top: 0 !important;
}
.cne-modal .variations tr label{
  color:#444;
}

/* ==============================
   SECTIONS (NIE zabijaj!)
================================ */

/* ważne: w modalu sekcje mają działać, nie display:none */
.cne-modal__body .cne-section{
  display:block !important;
  border-bottom-style:none;
}

/* ==============================
   SKELETON (promo vs edit)
================================ */

.cne-skeleton .cne-sk{ display:none; }

/* domyślnie (krok 2 / edytuj) pokazuj “edit” */
.cne-modal .cne-skeleton .cne-sk--edit{ display:block; }

/* krok 1 (promo) pokazuj “promo” */
.cne-modal[data-step="promo"] .cne-skeleton .cne-sk--edit{ display:none; }
.cne-modal[data-step="promo"] .cne-skeleton .cne-sk--promo{ display:block; }

/* PROMO skeleton */
.cne-sk--promo .cne-sk-promo-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cne-sk--promo .cne-sk-promo-card{
  display:grid;
  grid-template-columns: 86px 1fr 44px;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.cne-sk--promo .cne-sk-thumb{
  width:86px;
  height:110px;
  border-radius:14px;
  background: rgba(0,0,0,.06);
}

.cne-sk--promo .cne-sk-plus{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  justify-self:end;
}

/* linie w skeletonie */
.cne-sk-line{
  height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  margin: 8px 0 0;
}
.cne-sk-line:first-child{ margin-top:0; }
.cne-sk-line.w-80{ width:80%; }
.cne-sk-line.w-65{ width:65%; }
.cne-sk-line.w-35{ width:35%; }

/* EDIT skeleton: trochę luzu od góry */
.cne-skeleton .cne-sk--edit{
  margin-top: 18px;
}

/* ==============================
   DROBNE: wishlist / price line-height
================================ */

/* tylko modal + krok promo */
.cne-modal[data-step="promo"] .cne-addons-pick .product-item .wlfmc-removefromwishlist{
  display:none !important;
}

/* cena w modalu */
.cne-modal .cne-product .cne-product__meta .cne-price{
  line-height: 1em !important;
}


/* Header */
.cne-modal header{
	padding-left:18px;
	padding-right:18px;
	padding-top:18px;
}

/* Cne modal  title */
.cne-head-left .cne-head-titleline .cne-modal__title{
	font-weight:600;
	font-size:16px;
}

/* Cne modal  title */
.cne-modal .cne-modal__head .cne-head-left .cne-head-titleline .cne-modal__title{
	line-height:1.25em !important;
}

/* Cne modal  close */
.cne-modal .cne-modal__head .cne-modal__close{
	color:#444444;
	background-color:rgba(34,34,34,0);
	border-style:none;
}

/* Button */
.cmc-drawer .cmc-head .cmc-x{
	font-weight:600;
	color:rgba(0,0,0,0.55);
}

/* Info */
.cmc-list .cmc-item .cmc-info{
	transform:translatex(0px) translatey(0px);
}

/* Cne bundle incomplete */
.cmc-list .cmc-item .cne-bundle-incomplete__btn{
	font-weight:600;
	color:rgba(0,0,0,0.55);
	background-color:rgba(34,34,34,0);
	border-style:none;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	text-transform:uppercase;
	text-decoration:underline;
}

/* Cne promocard  name */
.cne-promostep__list .cne-promocard .cne-promocard__name{
	font-weight:500;
	font-size:11.8px;
	color:#333333;
}


	/* Cne modal  close */
	.cne-modal .cne-modal__head .cne-modal__close{
		font-size:20px;
	}
	
	/* Button */
	#cmc-root .cmc-drawer .cmc-head .cmc-x{
		font-size:10px !important;
	}
	
	/* Cne bundle incomplete */
	.cmc-list .cmc-item .cne-bundle-incomplete__btn{
		font-size:10.5px;

}

/* Cne modal */
.cne-modal{
	padding-left:4px;
	padding-right:4px;
	
}

/* Cne promostep  list */
.cne-modal__body .cne-promostep .cne-promostep__list{
	padding-left:0px;
	padding-right:12px;
	
}


/* ===== Drawer (jak inspiracja) ===== */
.cne-modal{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: #fff;
  display: none;
  z-index: 999999;

  box-shadow: -18px 0 55px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.08);

  /* header / scroll / footer */
  display: none;
  grid-template-rows: auto 1fr auto;
}

@media (max-width: 768px){
  .cne-modal{
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }
}

/* header */
.cne-modal__head{
  padding: 18px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.cne-modal__title{
  font-size: 16px;
  font-weight: 650;
  color: rgba(0,0,0,.86);
}

.cne-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: rgba(0,0,0,.82);
}


/* top product block */
.cne-product{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}


.cne-product__name{
  font-size: 14px;
  font-weight: 650;
  color: rgba(0,0,0,.86);
  line-height: 1.35;
  margin: 2px 0 10px;
}

/* prices */
.cne-price{
  font-size: 14px;
  color: rgba(0,0,0,.86);
}
.cne-price del{
  color: rgba(0,0,0,.45);
  margin-right: 8px;
}
.cne-price ins{
  text-decoration: none;
  color: rgba(0,0,0,.86);
  font-weight: 750;
}

/* section lines like inspo */
.cne-section{
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.cne-section__label{
  font-size: 12px;
  font-weight: 750;
  color: rgba(0,0,0,.72);
  margin-bottom: 10px;
}

/* qty row like inspo */
.cne-qty{
  display:flex;
  align-items:center;
  gap: 14px;
}

.cne-qty__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: rgba(0,0,0,.86);
}

.cne-qty__btn:disabled{
  opacity: .4;
  cursor: not-allowed;
}

.cne-qty__pill{
  min-width: 64px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 750;
  color: rgba(0,0,0,.86);
}

/* footer sticky button */
.cne-modal__footer{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.cne-cta{
  width: 100%;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}

.cne-cta:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Cne cart edit */
.shop_table tbody .cne-cart-edit{
	background-color:rgba(34,34,34,0);
	color:#444;
	font-weight:500;
	
}

/* =========================================================
   CNE Cart Edit – RIGHT DRAWER (desktop) + bottom sheet (mobile)
   Wklej na sam KONIEC pliku cart-edit.css
   ========================================================= */

/* backdrop */
.cne-modal-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 999998;
}

/* ✅ DESKTOP: drawer z PRAWEJ */
.cne-modal{
  display: none;

  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  margin: 0 !important;
  height: 100vh !important;

  background: #fff !important;
  overflow: hidden !important;



  box-shadow: -18px 0 60px rgba(0,0,0,.18) !important;
  z-index: 999999 !important;
}


/* ✅ MOBILE: bottom sheet */
@media (max-width: 767px){
  .cne-modal{
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 92vh !important;

    box-shadow: 0 -18px 60px rgba(0,0,0,.18) !important;
  }
}

/* =========================================================
   Footer: qty + CTA w JEDNEJ LINII
   ========================================================= */

.cne-modal__footer{
  position: sticky;
  bottom: 0;
}


.cne-qty{
  flex: 0 0 auto !important;
}

.cne-cta{
  flex: 1 1 auto !important;
  min-width: 0!important;
}

/* Na bardzo małych ekranach nadal trzymamy w rzędzie, ale lekko zmniejszamy */
@media (max-width: 380px){
  .cne-cta{ min-width: 0; }
  .cne-qty__pill{ min-width: 56px; }
  .cne-qty__btn{ width: 40px; height: 40px; }
}

/* Elementor */
.single_variation_wrap .wpcsm-location-woocommerce_single_variation .elementor{
	display:none;
	
}

/* ===============================
   CNE – QTY ONLY (– 1 +)
   =============================== */

.cne-stepper{
  display: inline-flex;
  align-items: center;
  height: 56px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.cne-stepper__btn{
  width: 64px;
  height: 56px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cne-stepper__btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.cne-stepper__val{
  width: 92px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

/* mobile */
@media (max-width: 480px){
  .cne-stepper{ height: 52px; }
  .cne-stepper__btn{ width: 52px; height: 52px; }
  .cne-stepper__val{ width: 70px; font-size: 15px; }
}


/* Cne modal */
.cne-modal{
	border-top-left-radius:0px !important;
	border-bottom-left-radius:0px !important;
	
}

/* Cne stepper */
.cne-modal__footer .cne-stepper .cne-stepper__btn{
	background-color:rgba(34,34,34,0);
	color:#444;
	
}

/* Cne modal  close */
.cne-modal .cne-modal__head .cne-modal__close{
	color:#444;
	background-color:rgba(34,34,34,0);
	font-weight:400;
}

/* Cne section  label */
.cne-modal__body .cne-section .cne-section__label{
	font-weight:600;
}

/* Cne modal  title */
.cne-modal__head .cne-head-left .cne-modal__title{
	font-weight:600;
	
}

/* Cne stepper  val */
.cne-modal__footer .cne-stepper .cne-stepper__val{
	font-weight:550;
	
}


	/* Cne stepper  val */
	.cne-modal__footer .cne-stepper .cne-stepper__val{
		font-size:12.8px;
	}
.cne-product__sub{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(0,0,0,.62);
  line-height: 1.35;
}

.cne-varloader{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(0,0,0,.62);
}

.cne-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.55);
  animation: cneSpin .8s linear infinite;
}



/* Span Tag */
.cne-head-left .cne-head-meta span{
	font-weight:500;
	font-size:11.7px;
	color:rgba(68,68,68,0.77);
	
}



/* Bdi */
.cne-price .woocommerce-Price-amount bdi{
	color:#555;
	font-weight:500;
	font-size:12px;
}



/* rozmiar */
.variations tr label{
	font-weight:600;
	color:rgba(0,0,0,0.72);
	font-size:12px;
	letter-spacing:0px;
	
}


/* Cne product  sub */
.cne-product .cne-product__meta .cne-product__sub{
	font-weight:500;
	font-size:12px;
}




/* Cne product  name */
.cne-product .cne-product__meta .cne-product__name{
	color:#444;
	font-weight:600;
	letter-spacing:0px;
	font-size:13.8px;
	
}

/* ===============================
   CNE modal – animacja (desktop + bottom sheet mobile)
   =============================== */
.cne-modal{
  transform: translateX(12px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform, opacity;
}
.cne-modal.is-open{
  transform: translateX(0);
  opacity: 1;
}

/* mobile sheet */
@media (max-width: 767px){
  .cne-modal.is-sheet{
    transform: translateY(12px);
    opacity: 0;
  }
  .cne-modal.is-sheet.is-open{
    transform: translateY(0);
    opacity: 1;
  }
}


/* ===============================
   CNE – SKELETON (modal)
   =============================== */
.cne-skeleton{
  padding: 0 12px 12px!important;
}

.cne-sk-top{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding-bottom: 16px;
}

.cne-sk-img{
  width: 130px;
  height: 150px;
  border-radius: 18px;
  background: rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

.cne-sk-meta{ padding-top: 6px; }
.cne-sk-line{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}
.cne-sk-line.w-70{ width: 70%; }
.cne-sk-line.w-55{ width: 55%; }
.cne-sk-line.w-35{ width: 35%; }
.cne-sk-line.w-25{ width: 25%; }
.cne-sk-line.w-60{ width: 60%; }

.cne-sk-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 6px 0 14px;
}

.cne-sk-sec{ padding: 10px 0; }
.cne-sk-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 6px;
}
.cne-sk-chip{
  width: 56px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

/* shimmer */
.cne-sk-img::after,
.cne-sk-line::after,
.cne-sk-chip::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: cneShimmer 1.1s infinite;
}



/* =========================================================
   CNE – FIX: "Przewodnik po rozmiarach" nie mieści się
   (tylko wewnątrz modala)
   ========================================================= */

/* Woo zwykle renderuje atrybuty jako tabelę .variations */
.cne-modal .variations{
  width: 100%;
  table-layout: fixed; /* ✅ pilnuj szerokości komórek */
}

/* Pozwól komórkom się kurczyć (kluczowe przy ellipsis) */
.cne-modal .variations th,
.cne-modal .variations td{
  min-width: 0;
}

/* Jeśli plugin wrzuca link w TH lub TD – niech nie wypycha layoutu */
.cne-modal .variations a{
  max-width: 100%;
}

/* Najczęstszy case: label po lewej, link/tekst po prawej w tej samej komórce */
.cne-modal .variations td{
  overflow: hidden;
}

/* Jeśli w TD/TH jest układ flex (czasem wtyczki tak robią), to pozwól zawijać */
.cne-modal .variations td,
.cne-modal .variations th{
  flex-wrap: wrap;
}



/* Na bardzo wąskich ekranach pozwól mu zejść do nowej linii zamiast ucinać */
@media (max-width: 420px){
  .cne-modal .variations td a,
  .cne-modal .variations th a{
    white-space: normal; /* ✅ może się złamać na 2 linie */
  }
}

/* =========================================================
   CNE – FIX: "Edytuj" bez tła na hover / focus / active
   ========================================================= */

.cne-cart-edit{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: underline;
  cursor: pointer;
}

/* hover */
.cne-cart-edit:hover{
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,.9); /* opcjonalnie: lekko ciemniej */
}

/* focus (klik, tab, mobile tap) */
.cne-cart-edit:focus,
.cne-cart-edit:focus-visible{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* active (moment kliknięcia) */
.cne-cart-edit:active{
  background: transparent !important;
  box-shadow: none !important;
}

/* Safari / iOS – usuń highlight */
.cne-cart-edit{
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   CNE – obrazek produktu (docelowo 130x150)
   ========================================================= */

.cne-product__img{
  width: 130px !important;
  height: 150px !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0;
}


.cne-product__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   CNE – wyrównanie odstępu tekstu jak w skeletonie
   ========================================================= */

/* kontener tekstu obok obrazka */
.cne-product__meta{
  padding-top: 6px; /* 🔥 dokładnie jak .cne-sk-meta */
}

/* pierwszy wiersz (nazwa produktu) */
.cne-product__name{
  margin-top: 0;      /* reset */
  margin-bottom: 10px; /* jak skeleton line spacing */
}

/* linia z rozmiarem / ilością */
.cne-product__sub{
  margin-top: 0;
  margin-bottom: 6px;
}

/* cena */
.cne-price{
  margin-top: 2px;
}

/* Cne modal */
.cne-modal{
	padding-left:4px!important;
	padding-right:4px!important;
	
}

/* rozmiar */
.variations tr label{
	font-weight:600;
	color:rgba(0,0,0,0.72);
	letter-spacing:0px;
	
}

/* ===============================
   CNE modal – węższy DESKTOP
   =============================== */
@media (min-width: 769px){
  .cne-modal{
    width: 420px !important;   /* było ~480px */
    max-width: 420px !important;
  }
}


/* FIX: żeby padding nie powiększał szerokości modala (ucinało bok) */
.cne-modal{
  box-sizing: border-box !important;
  max-width: 100vw !important;
}

/* Span Tag */
.cne-head-left .cne-head-titleline span{
	font-size:10px;
	padding-left:8px;
	padding-right:8px;
	padding-top:2px;
	padding-bottom:2px;
	
}

/* Cne head sub */
.cne-modal__head .cne-head-left .cne-head-sub{
	margin-top:8px;
	letter-spacing:0.33px;
	
}
/* Cne head back */
.cne-modal__head .cne-head-left .cne-head-back{
	color:#444444;
	background-color:rgba(34,34,34,0);
	
}


/* Svg */
.cne-head-left .cne-head-back svg{
	margin-right:7px;
	
}

/* =========================================================
   CNE GALLERY (slider zdjęć) – czysty blok
   ========================================================= */

.cne-modal .cne-gallery{
  margin-top: 10px;
}

.cne-modal .cne-gallery__viewport{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.cne-modal .cne-gallery__track{
  display: flex;
  gap: 10px;
  will-change: transform;
  transition: transform .22s ease;
}

/* desktop: 2 zdjęcia w widoku */
.cne-modal .cne-gallery__slide{
  flex: 0 0 calc(50% - 5px);
}

@media (max-width: 767px){
  .cne-modal .cne-gallery__slide{
    flex: 0 0 100%;
  }
}

.cne-modal .cne-gallery__slide img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* strzałki */
.cne-modal .cne-gallery__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  cursor: pointer;
  z-index: 2;
}

.cne-modal .cne-gallery__nav[disabled]{
  opacity: .35;
  cursor: default;
}

.cne-modal .cne-gallery__nav--prev{ left: 8px; }
.cne-modal .cne-gallery__nav--next{ right: 8px; }

/* kropki */
.cne-modal .cne-gallery__dots{
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.cne-modal .cne-gallery__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.18);
  cursor: pointer;
}

.cne-modal .cne-gallery__dot.is-active{
  background: rgba(0,0,0,.45);
}


/* Bdi */
.cne-promostep__list .cne-promocard bdi{
	font-weight:600;
	font-size:11px;
}


.cne-cta.is-loading{
  position: relative;
  color: transparent !important; /* chowa tekst bez ruszania layoutu */
  pointer-events: none;
}

.cne-cta.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,1);
  animation: cneSpin .7s linear infinite;
}

@keyframes cneSpin{
  to{ transform: rotate(360deg); }
}

/* =========================================================
   CNE – SKELETON (BUNDLE MODAL)
   - 2 warianty: promo (krok 1) i edit (krok 2)
   - styl jak w koszyku / cart-edit
========================================================= */

/* kontener skeletonu */
.cne-modal .cne-skeleton{
  padding: 0 12px 12px !important;
}

/* domyślnie chowamy wszystkie warianty skeletonu */
.cne-modal .cne-skeleton .cne-sk{
  display: none !important;
}

/* domyślnie pokazuj "edit" (krok 2) */
.cne-modal .cne-skeleton .cne-sk--edit{
  display: block !important;
}

/* krok 1 (promo) – pokazuj promo, ukryj edit */
.cne-modal[data-step="promo"] .cne-skeleton .cne-sk--edit{
  display: none !important;
}
.cne-modal[data-step="promo"] .cne-skeleton .cne-sk--promo{
  display: block !important;
}

/* =========================================================
   WSPÓLNE ELEMENTY (shimmer + linie)
========================================================= */

.cne-modal .cne-sk-line,
.cne-modal .cne-sk-img,
.cne-modal .cne-sk-chip,
.cne-modal .cne-sk-thumb,
.cne-modal .cne-sk-plus{
  background: rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

/* linie */
.cne-modal .cne-sk-line{
  height: 12px;
  border-radius: 999px;
  margin: 10px 0;
}

.cne-modal .cne-sk-line.w-80{ width:80%; }
.cne-modal .cne-sk-line.w-70{ width:70%; }
.cne-modal .cne-sk-line.w-65{ width:65%; }
.cne-modal .cne-sk-line.w-60{ width:60%; }
.cne-modal .cne-sk-line.w-55{ width:55%; }
.cne-modal .cne-sk-line.w-35{ width:35%; }
.cne-modal .cne-sk-line.w-25{ width:25%; }

/* shimmer */
.cne-modal .cne-sk-line::after,
.cne-modal .cne-sk-img::after,
.cne-modal .cne-sk-chip::after,
.cne-modal .cne-sk-thumb::after,
.cne-modal .cne-sk-plus::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  animation: cneShimmer 1.1s infinite;
}

@keyframes cneShimmer{
  to{ transform: translateX(60%); }
}

/* =========================================================
   SKELETON: KROK 2 (EDIT) – jak cart-edit (obrazek + meta + chips)
========================================================= */

.cne-modal .cne-sk--edit{
  margin-top: 18px; /* jak u Ciebie: trochę luzu od góry */
}

.cne-modal .cne-sk-top{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding-bottom: 16px;
}

.cne-modal .cne-sk-img{
  width: 130px;
  height: 150px;
  border-radius: 18px;
}

.cne-modal .cne-sk-meta{
  padding-top: 6px;
}

.cne-modal .cne-sk-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 6px 0 14px;
}

.cne-modal .cne-sk-sec{
  padding: 10px 0;
}

.cne-modal .cne-sk-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 6px;
}

.cne-modal .cne-sk-chip{
  width: 56px;
  height: 40px;
  border-radius: 12px;
}

/* =========================================================
   SKELETON: KROK 1 (PROMO) – lista kart jak wybór produktu
========================================================= */

.cne-modal .cne-sk--promo .cne-sk-promo-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}

/* karta jak Twoje produkty w pickerze (miniatura + meta + “plus”) */
.cne-modal .cne-sk--promo .cne-sk-promo-card{
  display: grid;
  grid-template-columns: 86px 1fr 44px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.cne-modal .cne-sk--promo .cne-sk-thumb{
  width: 86px;
  height: 110px;
  border-radius: 14px;
  flex: 0 0 auto;
}

.cne-modal .cne-sk--promo .cne-sk-promo-meta{
  min-width: 0;
}

.cne-modal .cne-sk--promo .cne-sk-plus{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  justify-self: end;
}

/* promo: linie minimalnie niższe (bardziej "listowe") */
.cne-modal .cne-sk--promo .cne-sk-line{
  height: 10px;
  margin: 8px 0;
}
/* CNE MODAL ONLY – ukryj Woo add-to-cart z variation form */
.cne-modal 
.variations_form 
.single_variation_wrap 
.woocommerce-variation-add-to-cart-enabled{
  display: none !important;
}
/* =========================================================
   CNE MODAL – FINAL TUNE
   TYLKO: badge (kapsułka), progress bar, kontenery
========================================================= */

/* =========================
   3️⃣ KONTENERY (RHYTHM)
========================= */

/* header → progress → body = równe oddechy */
.cne-modal{
  grid-template-rows: auto auto 1fr auto !important;
}

/* body – bez „pustej rzeki” pod nagłówkiem */
.cne-modal__body{
  padding-top: 4px !important;
}

/* listy (promo + edit) */
.cne-modal__content{
  padding-top: 6px !important;
}

/* sekcje – spójne odstępy */
.cne-modal__body .cne-section{
  margin-top: 14px;
  padding-top: 14px;
}

/* pierwszy blok w modalu – nie doklejony do progressa */
.cne-modal__body > *:first-child{
  margin-top: 0 !important;
}

/* WIKSZE KARTY  PROMO */
.cne-modal[data-step="promo"] .cne-promocard__inner{
	grid-template-columns: 110px 1fr 44px;
	padding: 18px;
	min-height: 120px;
}

.cne-modal[data-step="promo"] .cne-promocard__img{
	width: 92px;
	height: 122px;
	border-radius: 14px;
}

/* SKELETON = REAL CONTENT */
.cne-modal .cne-sk--promo .cne-sk-thumb{
	width:92px;
	height:122px;
}

.cne-modal .cne-sk--promo .cne-sk-promo-card{
	grid-template-columns: 110px 1fr 44px;
	padding: 18px;
	min-height: 120px;
}



/* ============================
   PROMO CARDS – RESPONSIVE
   (tablet + mobile)
   ============================ */

/* Tablet: lekko ciaśniej */
@media (max-width: 1024px){
  .cne-modal[data-step="promo"] .cne-promocard__inner{
    grid-template-columns: 104px 1fr 44px;
    padding: 16px;
    min-height: 116px;
    gap: 14px;
  }
  .cne-modal[data-step="promo"] .cne-promocard__img{
    width: 88px;
    height: 118px;
  }

  /* Skeleton match */
  .cne-modal .cne-sk--promo .cne-sk-thumb{
    width: 88px;
    height: 118px;
  }
  .cne-modal .cne-sk--promo .cne-sk-promo-card{
    grid-template-columns: 104px 1fr 44px;
    padding: 16px;
    min-height: 116px;
    gap: 14px;
  }
}

/* Mobile: jeszcze ciaśniej, żeby tekst miał więcej miejsca */
@media (max-width: 480px){
  .cne-modal[data-step="promo"] .cne-promocard__inner{
    grid-template-columns: 96px 1fr 40px; /* + trochę miejsca dla tekstu */
    padding: 14px;
    min-height: 108px;
    gap: 12px;
  }
  .cne-modal[data-step="promo"] .cne-promocard__img{
    width: 82px;
    height: 112px;
  }
  .cne-modal[data-step="promo"] .cne-promocard__plus{
    width: 34px;
    height: 34px;
  }

  /* Skeleton match */
  .cne-modal .cne-sk--promo .cne-sk-thumb{
    width: 82px;
    height: 112px;
  }
  .cne-modal .cne-sk--promo .cne-sk-promo-card{
    grid-template-columns: 96px 1fr 40px;
    padding: 14px;
    min-height: 108px;
    gap: 12px;
  }
}

/* Safety: długie nazwy nie rozwalają siatki */
.cne-modal[data-step="promo"] .cne-promocard__name{
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* max 2 linie */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Span Tag */
.cne-head-left .cne-head-titleline span{
	background-color:#f2efec;
	color:#7b756e;
	border-style:solid;
	border-width:1px;
	border-color:rgba(0,0,0,0.07)!;
	
}


/* ======================================================
   FIX: STEP 2 header — back + tytuł w jednej linii,
   meta po prawej, bez spychania w dół
====================================================== */


/* 2) Krok 2: układ grid (back + title w 1 wierszu) */
.cne-modal[data-step="edit"] .cne-head-left{
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "back title"
    "meta meta"
    "sub  sub";
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}




.cne-modal[data-step="edit"] .cne-head-meta{
  grid-area: meta;
}

/* mniej powietrza nad rozmiarem */
.cne-modal[data-step="edit"] .variations{
  margin-top: 4px !important;
}
.cne-modal[data-step="edit"] .variations tr:first-child th,
.cne-modal[data-step="edit"] .variations tr:first-child td{
  padding-top: 0px !important;
}
/* Span Tag */
.cne-head-left .cne-head-meta span{
	color:rgba(0,0,0,0.46)!important
	
}




/* 2) Krok 2: układ grid (back + title w 1 wierszu) */
.cne-modal[data-step="edit"] .cne-head-left{
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "back title"
    "meta meta"
    "sub  sub";
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}

/* elementy w gridzie */
.cne-modal[data-step="edit"] .cne-head-back{
  grid-area: back;
  margin: 0 !important;
}

.cne-modal[data-step="edit"] .cne-head-titleline{
  grid-area: title;
}

.cne-modal[data-step="edit"] .cne-head-meta{
  grid-area: meta;
}

.cne-modal[data-step="edit"] .cne-head-sub{
  grid-area: sub;
}
/* Cne head back */
.cne-modal__head .cne-head-left .cne-head-back{
	background-color:rgba(34,34,34,0);
	color:#444;
padding-left: 0px!important;
padding-right: 4px;
	
}

/* KROK 2 — zabij rozpychanie headera i usuń sztuczną wysokość */
.cne-modal[data-step="edit"] .cne-modal__head{
  justify-content: flex-start !important; /* zamiast space-between */
  height: auto !important;
  min-height: 18 !important;
}

/* jeśli progress ma własną wysokość/padding — też reset */
.cne-modal[data-step="edit"] .cne-head-progress{
  margin-top: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}



.cne-modal[data-step="edit"] .cne-head-left{
  row-gap: 8px !important; /* było 6px */
}

/* Header */
.cne-modal header{
	padding-bottom:0px !important;
	
}/* Cne product */
.cne-modal__body .cne-product{
	padding-top:18px;
	
}



div.cne-head-meta{
margin-top:-2px!important;
}

/* Cne product  name */
.cne-product .cne-product__meta .cne-product__name{
	font-weight:500!important;
	font-size:12.8px!important;
	
}

	/* Cne head back */
	.cne-modal__head .cne-head-left .cne-head-back{
		padding-left:0px;
		padding-right:0px;
	}

/* DOMYŚLNIE: ukryte */
.cne-gallery__nav--prev,
.cne-gallery__nav--next{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* HOVER NA GALERII */
.cne-gallery:hover .cne-gallery__nav--prev,
.cne-gallery:hover .cne-gallery__nav--next{
  opacity: 1;
  pointer-events: auto;
}
/* === RESET CZARNEGO HOVERA === */
.cne-gallery__nav--prev,
.cne-gallery__nav--next{
  background-color: rgba(255,255,255,.55) !important;
}

/* hover NA SAMYM PRZYCISKU */
.cne-gallery__nav--prev:hover,
.cne-gallery__nav--next:hover{
  background-color: rgba(255,255,255,.65) !important;
  color: #555 !important;
}

/* jeżeli ktoś dorzucił ::before / ::after */
.cne-gallery__nav--prev::before,
.cne-gallery__nav--next::before{
  background: transparent !important;
}


/* Cne modal */
.cne-modal{
	z-index:2147483005!important;
}

/* Division */
.cne-modal  .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart-disabled{
	display:none;
	
}

@media (max-width: 767px){
  .cne-gallery .cne-gallery__slide{
    flex: 0 0 50% !important;  /* np. 78% zamiast 100% */
  }
  .cne-gallery .cne-gallery__track{
    gap: 10px !important;      /* zostaw lub dopasuj */
  }


  .cne-gallery .cne-gallery__slide{
    flex: 0 0 50% !important;
  }

  /* klucz: nadajemy pionowe proporcje */
  .cne-gallery .cne-gallery__slide img{
    width: 100%;
    aspect-ratio: 3 / 4;   /* 🔥 pionowe (zmień na 2/3 jeśli chcesz jeszcze wyżej) */
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }
}

.cne-modal .cne-modal__close .cmc-x-ico{
  width:16px !important;
  height:16px !important;
  display:block;
}

/* PROMO linia "W zestawie..." w modalu */
.cne-modal .cne-price-promo{
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #7a5c4b;
  opacity: .95;
}

/* Bazowa cena w edit — przekreślona tylko gdy meta ma has-promo */
.cne-modal[data-step="edit"] .cne-product__meta.has-promo [data-cne-price],
.cne-modal[data-step="edit"] .cne-product__meta.has-promo [data-cne-price] .woocommerce-Price-amount,
.cne-modal[data-step="edit"] .cne-product__meta.has-promo [data-cne-price] bdi{
  color: rgba(0,0,0,.65);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.35);
  text-decoration-thickness: 1px;
  opacity: .85;
}



/* KROK 1 – promo cena w kafelku (jak w koszyku) */
.cne-promocard__price-promo{
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #7a5c4b;
}


/* KROK 1 – przekreślona cena bazowa */
.cne-promocard.has-promo .cne-promocard__price,
.cne-promocard.has-promo .cne-promocard__price .woocommerce-Price-amount,
.cne-promocard.has-promo .cne-promocard__price bdi{
  color: rgba(0,0,0,.75);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.45);
  text-decoration-thickness: 1px;
  opacity: .85;
}

/* =========================================================
   CNE MODAL – skeleton tylko na kwotę "W zestawie"
   Zakres: TYLKO w .cne-modal
========================================================= */

/* opcjonalnie: jakbyś kiedyś dodawała .is-loading na całą linię */
.cne-modal .cne-price-promo.is-loading{
  position: relative;
  color: transparent;
  user-select: none;
}

/* amount jako inline-block, żeby miało "miejsce" */
.cne-modal .cne-price-promo .woocommerce-Price-amount{
  display: inline-block;
  min-width: 46px;
}

/* aktywacja skeletonu (oba warianty) */
.cne-modal .cne-price-promo.is-loading .woocommerce-Price-amount,
.cne-modal .cne-price-promo .woocommerce-Price-amount.is-loading{
  position: relative;
  display: inline-block;
  height: 10px;
  width: 46px;
  border-radius: 999px;
  background: rgba(122,92,75,.14);
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  user-select: none;
  overflow: hidden;
  vertical-align: middle;
}

/* shimmer */
.cne-modal .cne-price-promo.is-loading .woocommerce-Price-amount::after,
.cne-modal .cne-price-promo .woocommerce-Price-amount.is-loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );
  transform: translateX(-100%);
  animation: cnePromoAmountShimmer 1.05s infinite linear;
}

@keyframes cnePromoAmountShimmer{
  100%{ transform: translateX(100%); }
}


/* ===============================
   KROK 1 (kafelki) – promo price UI
   - przekreślenie bazowej ceny (pancernie)
   - skeleton tylko na kwotę w "W zestawie"
================================ */

/* 1) BAZOWA CENA: przekreśl, gdy kafelek ma promo (działa też dla plain text) */
.cne-modal[data-step="promo"] .cne-promocard.has-promo .cne-promocard__price{
  opacity: .75;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* jeśli Woo w środku daje swoje <span>/<bdi>/<ins>/<del> – też przekreśl */
.cne-modal[data-step="promo"] .cne-promocard.has-promo .cne-promocard__price *{
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* 2) PROMO LINIA (jak w kroku 2) */
.cne-modal[data-step="promo"] .cne-promocard__price-promo{
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #7a5c4b;
}

/* promo nie może być przekreślone nawet jeśli parent łapie line-through */
.cne-modal[data-step="promo"] .cne-promocard__price-promo,
.cne-modal[data-step="promo"] .cne-promocard__price-promo *{
  text-decoration: none !important;
}

/* 3) SKELETON tylko na kwotę w kroku 1 */
.cne-modal[data-step="promo"] .cne-promocard__price-promo .woocommerce-Price-amount{
  display: inline-block;
  min-width: 46px;
}

/* aktywacja skeletonu (obsługuje oba warianty klas: na wrapperze lub na amount) */
.cne-modal[data-step="promo"] .cne-promocard__price-promo.is-loading .woocommerce-Price-amount,
.cne-modal[data-step="promo"] .cne-promocard__price-promo .woocommerce-Price-amount.is-loading{
  position: relative;
  display: inline-block;
  height: 10px;
  width: 46px;
  border-radius: 999px;
  background: rgba(122,92,75,.14);
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  user-select: none;
  overflow: hidden;
  vertical-align: middle;
}

.cne-modal[data-step="promo"] .cne-promocard__price-promo.is-loading .woocommerce-Price-amount::after,
.cne-modal[data-step="promo"] .cne-promocard__price-promo .woocommerce-Price-amount.is-loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );
  transform: translateX(-100%);
  animation: cnePromoAmountShimmer 1.05s infinite linear;
}

@keyframes cnePromoAmountShimmer{
  100%{ transform: translateX(100%); }
}


/* =========================================================
   KROK 1 (PROMO) – FINAL
   - przekreślenie bazowej ceny, jeśli istnieje cena promo
   - brak klas pomocniczych (CSS-only)
   - promo linia nigdy nie jest przekreślona
   Wymaga :has()
========================================================= */

/* jeśli karta MA cenę promo → przekreśl bazową */
.cne-modal[data-step="promo"]
.cne-promocard:has(.cne-promocard__price-promo:not(:empty))
.cne-promocard__price,
.cne-modal[data-step="promo"]
.cne-promocard:has(.cne-promocard__price-promo:not(:empty))
.cne-promocard__price *{
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,0,0,.45);
  color: rgba(0,0,0,.72);
  opacity: .85;
}

/* linia promo ("W zestawie…") – ZAWSZE czysta */
.cne-modal[data-step="promo"] .cne-promocard__price-promo,
.cne-modal[data-step="promo"] .cne-promocard__price-promo *{
  text-decoration: none;
  opacity: .95;
}