/* ==================================================================
   SECTION: TABLE OF CONTENTS
   Description: Quick outline of sections in this stylesheet.
   ================================================================== */
/*
- THEME META
- GLOBAL / BASE
- ACCESSIBILITY & INTERACTIVE ICONS
- OVERLAYS & MODALS
- TOOLTIPS (ICC)
- FINE ART – PAPERS TABLE
- FOOTER & BOX & MEDIA
- WOOCOMMERCE – THANK YOU / CHECKOUT / VARIATIONS
- WOOCOMMERCE – NAV / LISTS / MINI-CART
- WOOCOMMERCE – PRODUCT PAGE LAYOUT
- CART – THUMBNAIL HOVER ZOOM
- CART – MOBILE REMOVE Z-INDEX
- CROP CONTROLS & ORIENTATION
- BUTTONS & INPUTS (RADIUS / MARGINS)
- ION.RANGESLIDER THEME
- IMAGE PREVIEW & KONVA
- TABLES – CENNIK
- TIMERS & NOTICES
- UNCATEGORIZED
*/

/* ==================================================================
   SECTION: THEME META
   Description: Original theme metadata; do not edit.
   ================================================================== */
/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ==================================================================
   SECTION: GLOBAL / BASE
   Description: Global element tweaks, spacing, lists, wrappers.
   ================================================================== */
.nav-dropdown li.active > a {
	font-weight: bold;
}
.single-product .summary .price,
.single-product .summary .uni-cpo-product-price{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:0 !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important;
}
/* Nasz slot — rezerwa miejsca (CLS=0) */
.fd-ssr-price .amount{
  display:inline-block;
  min-width: 9ch;
  min-height: 1.7em;
  font-size: 1.5em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* W kontenerze z naszą ceną zawsze normalny symbol waluty */
.fd-ssr-price .woocommerce-Price-currencySymbol{
  font-size: 1em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  position: static !important;
  transform: none !important;
}
/* Kontener ceny – inline pudełko, niezależne od wymuszania display:inline w rodzicu */
.fd-ssr-price{
  display: inline-flex !important;
  align-items: baseline;
  min-height: 1.7em;           /* spójne z Twoim .amount */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Rezerwa miejsca, gdy slot jest jeszcze pusty */
.fd-ssr-price:empty::before{
  content: "9 999,99 zł";
  visibility: hidden;
  display: inline-block;
  min-width: 9ch;
}

/* Wnętrze – nie pozwól motywowi wymusić inline na amount */
.fd-ssr-price .amount{
  display: block !important;   /* lub zostaw inline-block — ważne, że nie inline */
  min-width: 9ch;
  white-space: nowrap;
  /* jeśli chcesz zachować większy rozmiar cyfry, możesz tu mieć font-size: 1.5em; */
}

/* Waluta – bez skakania i podbijania do góry */
.fd-ssr-price .woocommerce-Price-currencySymbol{
  font-size: 1em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  position: static !important;
  transform: none !important;
}

/* (opcjonalnie) wyłącz przejścia w tym bloku, gdy motyw animuje font-size itp. */
.fd-ssr-price, .fd-ssr-price *{ transition: none !important; }

/* ------------------ */
.page-wrapper {
        padding-top: 5px;
}
.button, button, fieldset, input, select, textarea {
    margin-bottom: 0.5em;
}
address {
    font-size: 85%; 
    /*font-style: normal; */
}
.button, button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    border-radius: 10px;
}
.fd-godziny{display:inline-flex;align-items:center;gap:.4em}
.fd-godziny .fd-hours-prefix{margin-right:.1em}

/* REZERWACJA miejsca na start: kwadrat, ale wysokość nigdy > 550px */
/* FD: wrapper podglądu — wysokość sterowana ratio/JS */

#image-preview{
  --max-canvas-h: 550px;
  max-block-size: var(--max-canvas-h);
  max-height: var(--max-canvas-h);
  aspect-ratio: var(--ratio, 1/1);
  width: 100%;
  height: auto;
  position: relative;
}

#image-preview > canvas{ display:block; width:100%; height:100%; }

/* fallback dla bardzo starych przeglądarek bez aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  #image-preview{ height:auto; }
  #image-preview::before{ content:""; display:block; padding-top:100%; }
  #image-preview > canvas{ position:absolute; inset:0; }
}

/* Sticky header (Flatsome) – stała wysokość w stanie przyklejonym */
/*.header-wrapper.sticky, .stuck .header-main { min-height: 70px; }

/* ==================================================================
   SECTION: ACCESSIBILITY & INTERACTIVE ICONS
   Description: Clickable icons (fa-qty-link) and focus styles.
   ================================================================== */
.fa-qty-link{
  /* większy obszar kliku bez zmiany samej ikonki 
  width: 32px; height: 32px;
  border-radius: 50%;
  */
  cursor: help;                     /* pointer : help */
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fa-qty-link img{
  width: 20px; height: 20px;
  vertical-align:middle; 
  display:inline-block;
  cursor: help !important;
  transition: transform .15s ease, filter .15s ease;
}
.fa-qty-link:hover{
/*	background: rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.15); */
  transform: translateY(-1px);
}
.fa-qty-link:hover img{
  transform: scale(1.18);
  filter: saturate(1.1) brightness(1.05);
}
.fa-qty-link:focus-visible{
  outline: 2px solid #0ea5e9;     /* kolor możesz zmienić */
  outline-offset: 2px;
}
.fa-qty-link:hover::after,
.fa-qty-link:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
/* ==================================================================
   SECTION: TOAST - NOWE CENY !
   ================================================================== */


/* ==================================================================
   SECTION: OVERLAYS & MODALS
   Description: Global page lock, modal windows, upload overlay, image popups.
   ================================================================== */
html.fd-modal-open { overflow: hidden; overscroll-behavior: contain; }
/* html.fd-modal-open body { padding-right: var(--fd-sbw, 0px); }
*/
#fa-qty-modal{
  position: fixed; inset: 0; display: none; z-index: 9999;
  background: rgba(0,0,0,.5);
  overscroll-behavior: contain;        /* mniej „bounce” na mobile */
}
#fa-qty-modal.is-open{ display:block }
#fa-qty-modal .dlg{
  position: relative; z-index: 1;       /* nad tłem-klikaczem */
  margin: min(6vh,48px) auto;
  background: #fff; border-radius: 12px;
  width: min(720px, 94vw);
  max-height: 88vh;                     /* klucz: przewijanie wnętrza, gdy mało miejsca */
  overflow: auto;
  -webkit-overflow-scrolling: touch;    /* miękkie przewijanie iOS */
  padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
  line-height: 1.5;
}
#fa-qty-modal .close{
  position: absolute; right: 12px; top: 8px;
  font-size: 26px; text-decoration: none;
}
body:has(#fa-qty-modal:target){ overflow: hidden; }
#image-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    z-index: 9999;
    text-align: center;
}
#image-popup img {
    max-width: 80%;
    max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
#upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#upload-overlay .upload-message {
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  margin: 20px;
}
#upload-progress-container {
  width: 300px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
#upload-progress-bar {
  width: 0%;
  height: 100%;
  background: #4caf50;
  transition: width 0.3s ease;
}
#upload-progress-text {
  color: #fff;
  font-size: 16px;
}
.modal {
  display: none; /* domyślnie ukrywamy */
  position: fixed;
  z-index: 9999; /* aby przykrywało wszystko */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* scrollbar w razie potrzeby */
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center; /* wyśrodkuj zawartość w pionie (dla flex) */
  justify-content: center; /* wyśrodkuj w poziomie (dla flex) */
}
.modal-content {
  position: relative;
  background-color: #333333; /* #272727; */
  margin: auto;
  padding: 20px;
  max-width: 80%;
  max-height: 80%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
#cropped-preview {
  max-width: 100%;
  max-height: 70vh; /* by się nie „rozjeżdżało” */
  border: 1px solid black;
}
/* ======================
   Flatsome / Magnific Popup — fix na tablety (boxed layout, body-lock)
   ====================== */

/* Warstwy popupa — zawsze full viewport i ponad wszystkim */
.mfp-bg,
.mfp-wrap{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 100000 !important;
}
/* W Twoim snapshot: tło bywa „przebrane” za off-canvas — wymuś fixed */
.off-canvas.mfp-bg{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
}

/* 5) Stabilne pudełko treści modala na mobilnych (bez bugów 100vh) */
.mfp-container{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  height: 100dvh;
}
@supports (height: 100svh){
  .mfp-container{ height: 100svh; }
}
.mfp-content{
  max-width: min(760px, 92vw);
  max-height: min(720px, 92dvh);
  overflow: auto;
}

/* ==================================================================
   SECTION: TOOLTIPS (ICC)
   Description: Accessible tooltip component used for ICC/profile notices.
   ================================================================== */
.icc-tooltip[data-tooltip] {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.icc-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: pre-line;
  width: max-content;
  max-width: min(70vw, 320px);
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
}
.icc-tooltip[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(0,0,0,.9);
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 10000;
}
.icc-tooltip[data-tooltip]:hover::after,
.icc-tooltip[data-tooltip]:hover::before,
.icc-tooltip[data-tooltip]:focus::after,
.icc-tooltip[data-tooltip]:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.icc-tooltip[data-tooltip]:focus-visible {
  outline: 2px solid #8882;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .icc-tooltip[data-tooltip]::after,
  .icc-tooltip[data-tooltip]::before {
    transition: none;
  }
}

/* ==================================================================
   SECTION: FINE ART – PAPERS TABLE
   Description: Styles for paper comparison table (CTA, headings, mobile).
   ================================================================== */
.fd-papers-table { width:100%; border-collapse:separate; border-spacing:0 5px; }
.fd-papers-table td { vertical-align:middle; background:#fff; }
.fd-papers-table .fd-col-desc{
  padding:5px 5px; border:0px solid #ececec; border-right:none; border-radius:8px 0 0 8px;
  max-width:68ch; line-height:1.6;
}
.fd-papers-table .fd-col-cta{
  width:180px; text-align:right; padding:5px 5px; border:0px solid #ececec; border-left:none;
  border-radius:0 8px 8px 0; white-space:nowrap;
}
.fd-papers-table h3{ margin:0 0 .4rem; scroll-margin-top:80px; }
.fd-papers-table p{ margin:0; }
.fd-papers-table .button.small{ line-height:1.2; display:inline-flex; align-items:center; gap:.4rem; }
.fd-papers-table .button.small i{ transition:transform .2s ease; }
.fd-papers-table .button.small:hover i{ transform:translateX(2px); }
@media (max-width:640px){
  .fd-papers-table, .fd-papers-table tbody, .fd-papers-table tr, .fd-papers-table td{ display:block; width:100%; }
  .fd-papers-table .fd-col-desc{ border-right:0px solid #ececec; border-radius:8px 8px 0 0; }
  .fd-papers-table .fd-col-cta{ text-align:left; border-left:0px solid #ececec; border-top:none; border-radius:0 0 8px 8px; }
}

/* ==================================================================
   SECTION: FOOTER & BOX & MEDIA
   Description: Cards/boxes, rounded images, and footer text sizing.
   ================================================================== */
.box-image img {
	border-radius: 10px 10px 0 0;
}
.footer-wrapper p {
    margin-bottom: 2px;    
    font-size: 85%;
}
.box {
    border-radius: 10px;
}
/* Tap targets w stopce – tylko mobile/touch */
/* @media (max-width: 768px), (hover: none) and (pointer: coarse) { */

  /* zamień linki w pełne belki klikalne */
  #block_widget-3 a{
    display: flex;            /* zachowuje się jak block, klika się cała szerokość */
    align-items: center;      /* ładne wyrównanie w pionie */
    min-height: 22px;         /* zalecane 44–48px */
    padding: 0px 5px;
    margin: 3px 0;            /* odstęp między linkami (≥8px łącznie z paddingiem) */
    border-radius: 6px;
    white-space: nowrap;      /* bez łamania wierszy */
  }

  /* <br> między linkami już niepotrzebne – niech nie dokładane są dodatkowe przerwy */
  #block_widget-3 a + br { display: none; }

  /* (opcjonalnie) subtelny efekt focus/hover dla dostępności */
  #block_widget-3 a:focus-visible,
  #block_widget-3 a:hover {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
/* } */
 
/* ==================================================================
   SECTION: WOOCOMMERCE – THANK YOU / CHECKOUT / VARIATIONS
   Description: Order received layout, checkout summary, variation visibility.
   ================================================================== */
.woocommerce-thankyou-order-received {
    text-align: center;
}
.woocommerce-order {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column; 
    width: 100%;
}
.woocommerce-order .woocommerce-thankyou-order-details,
.woocommerce-order .woocommerce-bacs-bank-details {
    max-width: 400px; 
    margin: 0 auto; 
}
.woocommerce-checkout-review-order-table .variation {
    display: none !important;
}
.payment_method_pay_by_paynow_pl_blik input[type="text"], .paynow-blik-white-label #paynow_blik_code {
  letter-spacing: 8px;
  font-weight: bold;
  max-width: 100%;
  min-width: 130px;
  width: 130px;
  margin-left: 15px;
}
.paynow-blik-white-label label {
  padding-left: 15px;
  margin-top: 10px;
}
.has-border {
  border-radius: 10px;
}
/* ==================================================================
   SECTION: WOOCOMMERCE – NAV / LISTS / MINI-CART / CART
   Description: Children menu items, mini-cart typography.
   ================================================================== */
.children li {
    text-transform: uppercase;
	font-size: 80% !important;
}
.woocommerce-mini-cart-item > a {
    font-size: 12px; /* Zmień na preferowaną wartość */
}
body.woocommerce-account.woocommerce-view-order .wc-item-meta li p {
  display: inline;
  margin: 0;
}
/* 1) Produkt i ilość w jednej linii */
.woocommerce-checkout .shop_table .cart_item td.product-name{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  flex-wrap:wrap;                 /* wariacje spadną pod spód */
}
.woocommerce-checkout .shop_table .cart_item td.product-name .product-quantity{
  display:inline;                 /* nie musi być !important */
  margin-left:.35em;
  white-space:nowrap;
}

/* 2) Szerokości kolumn */
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table{
  table-layout:auto;              /* !important niepotrzebny, chyba że motyw nadpisuje */
}
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table td.product-total{
  width:1%;
  white-space:nowrap;
  text-align:right;
}
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table td.product-name{
  width:auto;
}

/* 3) (opcjonalnie) wariacje pod nazwą */
.woocommerce-checkout .shop_table .cart_item td.product-name dl.variation{
  flex-basis:100%;
  margin:.25rem 0 0;
}

/* 4) (opcjonalnie) padding wierszy koszyka */
.shop_table .cart_item td{
  padding-top:7px;
  padding-bottom:5px;
}

.fd-mini-subtotal { font-size: 14px; }
/* domyślnie nie pokazuj pod nazwą */
.fd-bpf-line-compare { display: none; }
/* jeśli chcesz pokazywać na telefonach: */
@media (max-width: 768px) { .fd-bpf-line-compare { display: block; } }
/* Kolumna CENA: nasz układ „stare nad nowym” */

.woocommerce-cart .product-price .fd-bpf-price { display:inline-block; line-height:1.1; }
.woocommerce-cart .product-price .fd-bpf-price-before { font-size:.92em; padding-bottom: 3px;}
.woocommerce-cart .product-price .fd-bpf-price-after  { font-size:1em; font-weight:600; }
.woocommerce-cart .product-price .fd-bpf-price span { white-space:nowrap; }

.fd-bpf-before td, .fd-bpf-before th { opacity:.88; }
.fd-bpf-discount th, .fd-bpf-discount td { font-weight:600; }

.fd-bpf-savings-top.fd-bpf-breakdown{
	/*margin:.35rem 0 .35rem; 
	padding:.4rem .6rem;
	background:#fafafa;
	border:1px solid #eee;
	border-radius:6px;*/
	font-size:.9em;
}
.fd-bpf-savings-top .fd-row{display:flex; justify-content:space-between; gap:1rem; line-height:1.2;}
.fd-bpf-savings-top .fd-label{opacity:.9; padding-bottom: 5px;}
.fd-bpf-savings-top .fd-amt{font-weight:600; white-space:nowrap;}
.fd-bpf-savings-top .fd-amt.fd-neg{color:#2e7d32;}

    .fd-min-order-inline{
        margin:12px 0 16px; padding:8px 14px;
        background:#fafafa; border:1px solid #e8e8e8; border-radius:10px;
        font-size:0.9em; color:#374151;
    }
    .fdmoi-header{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.5rem}
    .fdmoi-title{color:#111827}
    .fdmoi-current{opacity:.8}
    .fdmoi-bar{height:6px; background:#eee; border-radius:6px; overflow:hidden; margin:.25rem 0 .75rem}
    .fdmoi-bar > span{display:block; height:100%; background:#16a34a; opacity:.8}
    .fdmoi-btn{
        display:inline-block; margin:0; 
		/*padding:.4rem .75rem; */
		font-size:13px;
        background:transparent; color:#111827; border:1px solid #cfcfcf; border-radius:10px;
    }
    .fdmoi-btn:hover{border-color:#999; color:#000}
    @media (max-width: 640px){
        .fd-min-order-inline{padding:8px 12px}
        .fdmoi-btn{width:100%; text-align:center}
    }

	/* kontener przeniesiony do LEWEGO GÓRNEGO rogu */
	#fd-toasts{position:fixed;left:50%;top:12%;transform:translate(-50%,-50%);z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}

	/* toasty jak wcześniej */
	.fd-toast{
		min-width:220px; max-width:380px;
		background:#111827; color:#fff; border-radius:10px;
		padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.2);
		opacity:0; transform:translateY(-8px);
		transition:opacity .18s ease, transform .18s ease;
		pointer-events:auto; font:500 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial
	}
	.fd-toast.fd-show{opacity:1; transform:translateY(0)}
	.fd-toast.success{background:#166534}
	.fd-toast.info{background:#1f2937}
	.fd-toast.warn{background:#92400e}
	.fd-toast .close{margin-left:10px; opacity:.7; cursor:pointer}

	/* niech nie nachodzi na pasek admina WP */
	body.admin-bar #fd-toasts{ top: 62px; }
	@media (max-width: 782px){ body.admin-bar #fd-toasts{ top: 46px; } }

	/* mobile: pełna szerokość z lewej */
	@media (max-width:640px){
		#fd-toasts{ position:fixed;left:50%; transform:translate(-50%,-50%); top:12%; }
		.fd-toast{ width:100%; max-width:none;text-align:center; }
	}

	/* nadal chowamy górne belki Woo (info/success), błędy zostają */
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info { display:none!important; }

    /* kontener upsell */
    #fd-fa-upsell-wrap{max-width:980px;margin:10px auto 14px}
    .fd-fa-upsell{
      background:#fcfcfc;border:1px solid #e5e7eb;border-radius:10px;
      padding:8px 20px;text-align:center;color:#1f2937;line-height:1.45;
	  font-size: .9em;
    }
    .fd-fa-upsell strong{font-weight:700}
    /* odstęp między treścią a przyciskiem */
    .fd-fa-upsell__btn{
      display:inline-block;margin-top:12px;
	  /*padding:.48rem .9rem; */
	  font-size:12px;
      border-radius:10px;
    }
    /* trochę powietrza ponad/poniżej bloku */
    .fd-fa-upsell + *{margin-top:10px}
    /* mobile – pełna szerokość przycisku */
    @media (max-width:640px){
      .fd-fa-upsell{padding:14px 16px;font-size: 0.9em;}
      .fd-fa-upsell__btn{width:100%;margin-top:10px}
    }
/* ==================================================================
   SECTION: WOOCOMMERCE – PRODUCT PAGE LAYOUT
   Description: Inline add-to-cart layout (quantity + CTA).
   ================================================================== */

.woocommerce div.product form.cart {
    display: flex; /* Ustawienie elementów w jednej linii */
    align-items: center; /* Wyrównanie do środka */
    gap: 10px; /* Dystans między polem ilości a przyciskiem */
}
.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto; /* Zapewnia, że ilość nie rozciąga się */
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1; /* Przycisk zajmuje resztę dostępnej przestrzeni */
    width: auto !important; /* Zapobiega wymuszeniu szerokości 100% */
}
/* Tylko w obrębie Twojego uploadu */
/* 1) Cały trigger (łącznie z pseudo-elementami i wnętrzem) ma „łapkę” */
#uni_cpo_upload_file-el,
#uni_cpo_upload_file-el::before,
#uni_cpo_upload_file-el::after,
#uni_cpo_upload_file-el *{
  cursor: pointer !important;
}

/* 2) Wycisz WSZYSTKIE inne file-inputy w wrapperze oprócz Twojego */
.dndWrapper input[type="file"]:not(.fd-local-input){
  pointer-events: none !important;
  cursor: default !important;
}

/* 3) Jeśli występuje pluploadowy shim – niech nie łapie hovera/kliku */
.dndWrapper > .moxie-shim{
  pointer-events: none !important;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.single_add_to_cart_button {
	font-size: 12px !important;
	padding: 3px 3px !important;
    }
.product-main {
    padding: 0px;
}
}

/* ==================================================================
   SECTION: CART – THUMBNAIL HOVER ZOOM
   Description: Zoom-on-hover for cart thumbnails.
   ================================================================== */
   
.woocommerce-cart .product-thumbnail {
    position: relative; 
	width: 90px;
}
.woocommerce-cart .product-thumbnail img {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
	border: 1px solid #000;
}
.woocommerce-cart .product-thumbnail:hover img {
    transform: scale(2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 0.5px solid #000;
    background: #fff;
    padding: 0px;
	max-height: 110px;
}

/* ==================================================================
   SECTION: CART – MOBILE REMOVE Z-INDEX
   Description: Ensure remove button stays tappable on small screens.
   ================================================================== */
@media (max-width: 999px){
  .woocommerce-cart .shop_table .product-remove,
  .woocommerce-cart .shop_table .product-remove .remove{
    position: relative;   /* bez tego z-index nie działa */
    z-index: 9999;
  }
}

/* ==================================================================
   SECTION: CROP CONTROLS & ORIENTATION
   Description: Crop preview controls and rotate icon-only button.
   ================================================================== */
.crop-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;      /* odstęp między nimi */
}
#crop-controls #crop-preview-button,
#crop-controls #toggle-orientation,
.crop-controls #crop-preview-button,
.crop-controls #toggle-orientation {
  margin: 0 !important;      /* nadpisuje inline margin:10px auto */
  width: auto !important;    /* na wszelki wypadek, aby nie było 100% */
}
#toggle-orientation.icon-only {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: 32px; height: 32px;           /* wygodny hit-area */
  cursor: pointer;
  display: block;                      /* centrowanie margin:auto działa */
}
#toggle-orientation.icon-only img {
  width: 90%; height: 90%;
  transform-origin: 50% 50%;
  transition: transform 200ms ease;
}
#toggle-orientation.icon-only:hover img,
#toggle-orientation.icon-only:focus-visible img {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  #toggle-orientation.icon-only img { transition: none; }
}
#crop-preview-button {
    background-color: #6a6a6a; /* Czarny kolor tła */
    color: #fff; /* Biały kolor tekstu */
    /* padding: 2px 2px; /* Powiększenie wewnętrzne dla lepszego wyglądu */
    border: none; /* Usunięcie domyślnej ramki */
    border-radius: 8px; /* Zaokrąglenie rogów */
    font-size: 12px; /* Powiększenie tekstu */
    font-weight: bold; /* Podkreślenie wagi tekstu */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    text-transform: uppercase; /* Tekst wielkimi literami */
}

/* ==================================================================
   SECTION: BUTTONS & INPUTS (RADIUS / MARGINS)
   Description: Shared visual tweaks for buttons and form elements.
   ================================================================== */
input[type="email"], input[type="text"], input[type="tel"], input[type="password"], textarea {
	border-radius: 10px;
}

/* ==================================================================
   SECTION: ION.RANGESLIDER THEME
   Description: Theme overrides for ion.rangeSlider controls.
   ================================================================== */
span.irs-grid .irs-grid-pol,
span.irs-grid .irs-grid-pol * {
    background-color: #6b6b6b !important;
}
.irs-bar {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.irs-single {
    background: linear-gradient(#a1a1a1, #333333);
}
.irs-slider {
    width: 15px;
    height: 27px;
	border-radius: 0;
}
.irs-bar-edge {
    width: 10px;
	border: 1px solid #2d2d2d;
	border-right: none;
}
.uni-module-checkbox .uni-cpo-option-label__checkbox {
  border-radius: 8px;
  background-color: #f2f2f2;
  margin: 2px 6px 0 0;
}
/* Kontener ISO w jednej linii */
#uni_cpo_for_iso{
  display:flex;
  align-items:center;       /* pionowe centrowanie */
  gap:.75rem;               /* odstęp między tytułem a opcją */
  flex-wrap:wrap;           /* na mobile może się zawinąć */
}

/* Tytuł: "Rozmiar ISO:" + tooltip w jednej linii */
#uni_cpo_for_iso .uni-cpo-module-checkbox-label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:0;                 /* usuń domyślne marginesy */
  white-space:nowrap;
}

/* Pojedyncza opcja checkbox obok tytułu */
#uni_cpo_for_iso .uni-cpo-option-label{
  display:inline-flex;      /* label + pseudo-checkbox + tekst w jednej linii */
  align-items:center;
  gap:.4rem;
  margin:0;                 /* usuń odstępy pionowe */
}

/* sam input (niewidoczny, ale zachowuje się jak inline) */
#uni_cpo_for_iso input[type="checkbox"]{
  margin:0;
}

/* nie pokazuj etykiet dla ukrytych/wyłączonych opcji */
#uni_cpo_for_iso input[disabled][hidden] + label{
  display:none !important;
}

/* Mobile: gdy się nie mieści, zawijaj całość pod tytuł */
@media (max-width: 640px){
  #uni_cpo_for_iso{ gap:.5rem; }
}

/* ==================================================================
   SECTION: IMAGE PREVIEW & KONVA
   Description: Preview container and Konva canvas embedding.
   ================================================================== */
#image-preview {
  display: block;
  width: 100%; /* lub max-width: 800px */
  background: #eee;
  margin: 0 auto;
  border-radius: 15px;
  border: 1px solid #ccc;
  position: relative; /* Aby elementy wewnętrzne były względem niego pozycjonowane */
  text-align: center; /* Centrowanie tekstu */
}
#image-preview > * {
  display: inline-block; /* Zapewnia centrowanie elementów wewnątrz */
  vertical-align: middle; /* Wyrównanie do środka */
}
#image-preview .konvajs-content {
  position: relative !important;
  display: inline-block !important;
}

/* ==================================================================
   SECTION: TABLES – CENNIK
   Description: Price table styles (#cennik and .cennik2 variants).
   ================================================================== */
#cennik{border-collapse:collapse;width:100%;}
#cennik td, #cennik th{border:1px solid #ddd;padding:8px;text-align:center;}
#cennik tr:nth-child(even){background-color:#f2f2f2;}
#cennik tr:hover{font-weight:bold;}
#cennik th{padding-top:10px;padding-bottom:10px;text-align:center;background-color:grey;color:white;}
.cennik2{border-collapse:collapse;width:100%;}
.cennik2 td, #cennik2 th{border:1px solid #ddd;padding:8px;text-align:center;font-size:0.8em;}
.cennik2 tr:nth-child(even){background-color:#f2f2f2;}
.cennik2 tr:hover{font-weight:bold;}
.cennik2 th{padding-top:5px;padding-bottom:5px;text-align:center;background-color:grey;color:white;font-size:0.85em;}

/* ==================================================================
   SECTION: TIMERS & NOTICES
   Description: Informational timer banner and minimal order notice.
   ================================================================== */
.timer{
  /* Twoje dotychczasowe */
  background:#f8f8f8 url('https://www.fotodekoracja.pl/images/time_icon_xs.png') no-repeat 10px center;
  border:1px solid #ccc;
  width:100%;
  border-radius:10px;
  font-family:Tahoma,Geneva,Arial,sans-serif;
  font-size:11px;
  margin:10px;

  /* Stała wysokość + pionowe wyśrodkowanie */
  --h: 38px;                 /* dostosuj (np. 40–48px) */
  display:flex;              /* dzięki temu line-height nie musi „rozpychać” */
  align-items:center;
  box-sizing:border-box;
  height:var(--h);

  /* padding w poziomie, bez pionowego – wysokość liczona „włącznie” */
  padding:0 36px;

  /* Jedna linia + obcięcie nadmiaru */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#minimal-order-notice {
    text-align: center;
    font-size: 11px;
    padding: 5px 5px 0px 5px;
    /*border-radius: 5px;
    background-color: #f8f9fa; 
    border: 1px solid #ddd;  
    max-width: 450px; 
    margin: 10px auto; */
}

/* ==================================================================
   SECTION: UNCATEGORIZED
   Description: Anything that didn’t match a section above.
   ================================================================== */

li {
    margin-bottom: .1em;
}
.nip-error {
        background: rgba(255, 0, 0, 0.1); /* Czerwone tło z przezroczystością */
        border: 1px solid #ff0000;
        border-radius: 10px;
        padding: 10px 10px;
        margin-top: 5px;
		margin-bottom: 15px;
        font-size: 10px;
        color: #000000;
    }
.nip-spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid #ccc;
            border-top: 2px solid #333;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            vertical-align: middle;
            margin-left: 10px;
        }
@keyframes spin {
            to { transform: rotate(360deg); }
        }
.checkout-inline-error-message {
  font-size: 10px;
}
/* Ukrycie metadanych produktu na stronie checkout i podsumowania zamówienia */
.woocommerce-error:focus-visible,
.woocommerce-message:focus-visible {
    outline: none !important;
}

/* ===========================
   My Account – kompakt
   =========================== */

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2{
  background: #fcfcfc !important;
  border: 1px solid #e8e9ec !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 10px rgba(0,0,0,.04) !important;
  padding: 15px 25px 5px !important;
  margin: 15px;
}

/* TYLKO /my-account/ i tylko gdy niezalogowany */
@media (min-width: 850px){
  /* 1) #customer_login staje się kontenerem i trzyma szerokość + centrowanie */
  body.woocommerce-account:not(.logged-in) #customer_login{
    max-width: 1200px;         /* szerokość całego „dwupaku” */
    margin: 20px auto 48px;   /* AUTO = środek */
    padding: 0 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* wyśrodkuj kolumny */
    gap: 22px;                /* odstęp między kartami */
  }

  /* 2) wyłącz „rozpychające” zachowania wewnątrz (ujemne marginesy rzędu) */
  body.woocommerce-account:not(.logged-in) #customer_login .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  /* 3) każda kolumna = karta o stałej szerokości */
  body.woocommerce-account:not(.logged-in) #customer_login .large-6{
    flex: 0 1 500px;
    max-width: 500px;
    width: 100%;
  }

  /* 4) karty bez własnych marginesów – odstęp daje gap kontenera */
  body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
  body.woocommerce-account:not(.logged-in) #customer_login .u-column2,
  body.woocommerce-account:not(.logged-in) #customer_login .col-1,
  body.woocommerce-account:not(.logged-in) #customer_login .col-2{
    margin: 0 !important;
  }
}

/* =========================================
   ORDER-PAY: metody płatności bez kropek
   ========================================= */
body.woocommerce-order-pay ul.wc_payment_methods{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-order-pay ul.wc_payment_methods li{
  list-style: none !important;
}

/* =========================================
   ORDER-PAY: <p> jako inline w tabeli zamówienia
   (kompaktowe meta bez łamania linii)
   ========================================= */
body.woocommerce-order-pay table.shop_table td p{
  display: inline;
  margin: 0;
}
body.woocommerce-order-pay table.shop_table td p + p::before{
  content: " · ";
  opacity: .6;
}