/* ------------------------------
   PDP – GRID + MEDIA + BADGES
   ------------------------------ */
.pdp-grid{
  display:grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
  gap: clamp(16px, 2.2vw, 28px);
}
.pdp-grid > * { min-width: 0; }
@media (max-width:920px){ .pdp-grid{grid-template-columns:1fr} }

.pdp-media{position:relative;padding:12px;border:1px solid var(--color-border);overflow:hidden}
.product-badge{position:absolute;left:12px;top:12px;right:12px;display:flex;gap:6px;justify-content:space-between;z-index:3}
.product-badge .bestseller{background:var(--color-accent);color:#111;font-weight:800;font-size:.75rem;padding:.25rem .5rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.product-badge .anysize img{width:56px;height:56px}

.pdp-usp-mini{list-style:none;margin:10px 2px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pdp-usp-mini li{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--color-border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);font-size:.92rem;color:#344054}
.pdp-usp-mini .i{width:18px;height:18px}



/* ------------------------------
   KARUZELA PRODUKTU
   ------------------------------ */

#productCarousel{
  aspect-ratio: 1000 / 1000;
  max-height: 620px;         
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #f6f7f9;
}
#prodwrap{
  --thumbs-h: 100px; 
  position: relative;
  padding-bottom: var(--thumbs-h);
}
#prodwrap:has(> .f-carousel__thumbs),
#prodwrap:has(> .f-thumbs){
  padding-bottom: 0;
}
#prodwrap.thumbs-in{ padding-bottom: 0; }
#productCarousel > .f-carousel__thumbs,
#productCarousel > .f-thumbs{
  position: absolute;
  inset: auto 0 0 0;
  block-size: var(--thumbs-h);
}
#prodwrap > .f-carousel__thumbs,
#prodwrap > .f-thumbs{
  position: static;
  block-size: var(--thumbs-h);
}

#productCarousel .f-carousel__slide {
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
}

#productCarousel .f-carousel__slide img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  overflow:hidden;
  transition:transform 0.5s ease-in-out;
}


/* ------------------------------
   PDP – KARTA ZAKUPOWA (spójna)
   ------------------------------ */
.pdp-head{display:flex;align-items:flex-start;gap:10px}
.pdp-head .product-header{margin:0}

.wish-btn{line-height:0.7;color:var(--color-primary-600);margin-left:auto;background:#fff;border:1px solid var(--color-border);border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.wish-btn > span {padding:10px}
.wish-btn:hover{border-color:var(--color-primary-600)}

.pdp-buy-card{
  border:1px solid var(--color-border); background:#fff;padding:24px 16px; display:flex; flex-direction:column;
}

.buy-footer{ margin-top:auto; display:grid; gap:6px; }
.buy-meta{ font-size: 13px; }
.buy-price{
  margin-bottom:24px;display:flex; align-items:center; justify-content:space-between; gap:12px;

}
.price-main .amount{ font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.price-main .vat{ margin-left:8px; font-weight:600; color:var(--muted); }

.btn-cta{
  height:46px; font-weight:500; border-radius:14px; background:var(--color-accent); color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition: transform .07s, box-shadow .18s, background .15s;
}
.btn-cta:hover{ background: var(--color-accent-600); transform: translateY(-1px); }
.btn-cta:active{ transform: translateY(0); }
.btn-cta:focus-visible{ outline:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--color-accent) 35%, transparent); }

.pdp-cta{ display:flex; gap:12px; align-items:center; }
.count-input{
  border:1px solid var(--color-border); border-radius:12px; background:#fff; display:flex; align-items:center;height:46px
}
.count-input .quantity{ width:64px; height:100%; text-align:center; border:0; }
.count-input .incr-btn{ width:40px; height:100%; display:grid; place-items:center; text-decoration:none;border-radius:10px;font-weight:800;z-index:0 }
.count-input .incr-btn:hover{ background: var(--color-surface); }

/* ------------------------------
   LOGOTYPY PŁATNOŚCI (w jednej linii)
   ------------------------------ */
  .buy-trust {margin:24px auto} 
.payment-claim{    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 8px;text-align:center;font-weight:600}
.payment-methods{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(4px, 1.4vw, 10px);
  flex-wrap: nowrap;
  overflow: visible;
  padding: 6px 0 0;
  filter:grayscale(30%) opacity(0.9);
}

.payment-methods img{
  height: clamp(18px, 4.6vw, 35px);
  width: auto;
  flex: 0 1 auto;
  object-fit: contain;
}

@media (max-width:480px){.payment-methods img{height:28px}}

/* ------------------------------
   TREŚĆ / LISTY (prose & opis)
   ------------------------------ */
#description { padding-top: 60px;max-width: 90ch; margin-inline:auto; }
#description a {text-decoration:underline}
.prose ul, #description ul { list-style: none; padding-left: 0; }
.prose ul li, #description ul li{ position:relative; padding-left:26px; margin:8px 0; }
.prose ul li::before, #description ul li::before{
  content:""; position:absolute; left:0; top:.3em; width:10px; height:10px; border-radius:999px;
  background:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}
.prose li strong, #description li strong{ color: var(--ink); }

/* ------------------------------
   TABELA SPECYFIKACJI (dark/WHY)
   ------------------------------ */
.table.product-features{
  --pf-radius: 16px;
  --pf-bg:       var(--why-bg, #2a2f36);
  --pf-card:     var(--why-card-bg, #323843);
  --pf-border:   var(--why-card-border, #3e4652);
  --pf-text:     var(--why-text, #e9edf3);
  --pf-col-1:    color-mix(in srgb, var(--pf-card) 86%, #fff);
  --pf-col-2:    color-mix(in srgb, var(--pf-card) 78%, #fff);

  color: var(--pf-text);
  width: 100%;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pf-bg);
  box-shadow: var(--shadow-md);
  display: block; overflow-x: auto;
}

.table.product-features th,
.table.product-features td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--pf-border);
  vertical-align: top;
}

/* nagłówek */
.table.product-features thead th{
  font-weight: 600;
  color: var(--why-head, #f5f8fc);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--pf-bg) 88%, #000) 0%,
      var(--pf-bg) 100%);
}
.table.product-features thead th:first-child{
  position: sticky; left: 0; z-index: 3;
  border-right: 1px solid var(--pf-border);
}
.table.product-features thead th:nth-child(2){ background: color-mix(in srgb, var(--pf-col-1) 92%, #000); }
.table.product-features thead th:nth-child(3){ background: color-mix(in srgb, var(--pf-col-2) 92%, #000); }

/* lewa kolumna – nazwy cech */
.table.product-features tbody th[scope="row"]{
  position: sticky; left: 0; z-index: 2;
  min-width: 150px; text-align:left; vertical-align: middle;
  color: var(--pf-text);
  background: color-mix(in srgb, var(--pf-bg) 94%, #000);
  border-right: 1px solid var(--pf-border);
  padding-left: 44px;
}
.table.product-features tbody th[scope="row"]::before{
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--primary, #a0d12e); opacity: .95;
}

@media (max-width:600px){
.table.product-features tbody th[scope="row"]::before {display:none;}
.table.product-features tbody th[scope="row"] {padding-left:16px}
}

.table.product-features tbody td:nth-child(2){ background: var(--pf-col-1); }
.table.product-features tbody td:nth-child(3){ background: var(--pf-col-2); }
.table.product-features tbody td + td{ border-left: 1px solid var(--pf-border); }
.table.product-features tbody tr:nth-child(odd) td:nth-child(2){
  background: color-mix(in srgb, var(--pf-col-1) 96%, #000);
}
.table.product-features tbody tr:nth-child(odd) td:nth-child(3){
  background: color-mix(in srgb, var(--pf-col-2) 96%, #000);
}

.table.product-features tbody td[colspan="2"]{
  background:var(--pf-col-2);
}

.table.product-features tbody tr:hover th[scope="row"],
.table.product-features tbody tr:hover td{
  border-color: color-mix(in srgb, #fff 30%, var(--pf-border));
}
.table.product-features tbody tr:hover td:nth-child(2){
  background: color-mix(in srgb, var(--pf-col-1) 92%, #fff);
}
.table.product-features tbody tr:hover td:nth-child(3){
  background: color-mix(in srgb, var(--pf-col-2) 92%, #fff);
}

/* listy w komórkach */
.table.product-features ul{ list-style:none; margin:6px 0 0; padding-left:0; }
.table.product-features li{ position:relative; padding-left:22px; color:var(--pf-text); }
.table.product-features li::before{
  content:""; position:absolute; left:4px; top:.85em; transform:translateY(-50%);
  width:8px; height:8px; border-radius:999px; background:var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--why-stroke, #e7f0c1) 55%, transparent);
}

/* --   BUY CHIPS ----- */
.buy-chips{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  gap:8px;
  list-style:none;
  margin:6px 0 0;
  padding:0;
}

.buy-chips li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:1;
  min-width:0;
  padding:6px 10px;
  border:1px solid var(--color-border);
  background:#fff;
  border-radius:999px;
  font-weight:600;
  font-size:.8rem;
  box-shadow:var(--shadow-sm);
  color:#344054;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.buy-chips li:hover { color:var(--color-primary-700); }

.buy-chips .i{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--color-primary-600);

}

@media (max-width:520px){
  .buy-chips{gap:4px;}
  .buy-chips li{padding:5px 8px; font-size:.85rem;}
  .buy-chips li:last-child {display:none;}
}


/* ===========================
   PDP – USP (kompakt)
   =========================== */

.pdp-usp{
  --usp-h: 78px;
  --usp-br: var(--color-border);
  --usp-ico-bg: var(--color-primary-50);
  --usp-ring: color-mix(in srgb, var(--color-primary-200) 45%, transparent);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; list-style:none; padding:0; margin:10px 0 0;
}
@media (max-width:960px){ .pdp-usp{ grid-template-columns:1fr; } .usp-txt{text-decoration:underline} }

.pdp-usp .usp-btn{
  min-height:var(--usp-h);
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px; border:1px solid var(--usp-br); border-radius:12px;
  background:#fff; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  transition:transform .08s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.pdp-usp .usp-btn .i{
      transition:transform .2s ease;
}

@media (hover:hover){
  .pdp-usp .usp-btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg,#fff, color-mix(in srgb,#fff 85%, var(--color-primary-50)));
    box-shadow:0 10px 22px rgba(0,0,0,.09);
    border-color: color-mix(in srgb, var(--color-primary-600) 35%, var(--usp-br));
  }
  .pdp-usp .usp-btn:hover .usp-ico{
    transform:translateY(-1px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-600) 30%, transparent),
                0 0 0 6px var(--usp-ring);
  }

  .pdp-usp .usp-btn:hover .i{
  transform: scale(1.4);

  }
}
.pdp-usp .usp-btn:active{ transform:translateY(0); }
.pdp-usp .usp-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 26%, transparent),
             0 6px 16px rgba(0,0,0,.08);
  border-color: var(--color-primary-600);
}

.pdp-usp .usp-ico{
  inline-size:34px; block-size:34px; flex:0 0 34px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--usp-ico-bg); color:var(--color-primary-700);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-600) 18%, transparent);
  transition:transform .14s ease, box-shadow .16s ease;
}
.pdp-usp .i{ color:var(--color-primary-600) }
.pdp-usp .usp-txt{ line-height:1.15; font-size:.92rem; color:#1f2937; }
.pdp-usp .usp-txt strong{ display:block; font-weight:700; color:#0f172a; margin-bottom:2px }
.pdp-usp.is-vertical .usp-btn{
  flex-direction:column; justify-content:center; text-align:center; gap:8px;
}
.pdp-usp.is-vertical .usp-ico{ margin-bottom:2px; }
@media (max-width: 600px) {
  .pdp-usp.is-vertical .usp-btn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 10px;
  }
  .pdp-usp.is-vertical .usp-ico {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .pdp-usp .usp-btn, .pdp-usp .usp-ico{ transition:none !important; }
}

/* ------------------------------
   USP LISTA POD CENĄ (istniejąca struktura)
   ------------------------------ */
.product-list-wrap .product-list-container{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.product-list-wrap .product-item{border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);padding:10px 12px;display:flex;align-items:center;gap:10px}
.product-list-wrap .product-item img.product-icon{width:32px;height:32px}
.product-list-wrap .product-item .product-text{font-weight:600;color:var(--muted)}
@media (max-width:767.98px){.product-list-wrap .product-list-container{grid-template-columns:1fr 1fr}}

/* ------------------------------
   ATRYBUTY (select + color picker) – unifikacja
   ------------------------------ */
#atrib{ display:grid;gap:15px;margin-bottom:16px }
#atrib .row{ display:grid; grid-template-columns:1fr 1.2fr; gap:10px; align-items:center; }
@media (max-width:575.98px){
  #atrib .row{ grid-template-columns:1fr }
}


#atrib label{ color:var(--muted); font-weight:600; }
#atrib .attr-item{ min-width:0; }
:root{
  --sel-h: 44px;
  --sel-r: 16px;
  --sel-px: 14px;
  --sel-pr: 30px;
  --sel-shadow: 0 6px 16px rgba(0,0,0,.06);
  --chev-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
}

.w-select{ position:relative; display:block; }
.w-select select, .w-select .text{
  width:100%!important; height:var(--sel-h);
  padding:0 var(--sel-pr) 0 var(--sel-px);
  border:1px solid var(--color-border);
  border-radius:var(--sel-r);
  background:#fff; color:var(--color-text);
  font: 500 16px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  box-shadow: var(--sel-shadow);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:relative;
  cursor:pointer;
}
.w-select .text {z-index: 1;}
.w-select select:hover, .w-select .text:hover{ border-color: color-mix(in srgb, var(--muted) 30%, var(--color-border)); }
.w-select select:focus, .w-select .text:focus{
  border-color: var(--color-primary-600); outline:0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent), var(--sel-shadow);
}
.w-select select::-ms-expand{ display:none; }
.w-select::after{
  content:""; position:absolute; right:12px; top:50%;
  width:16px; height:16px; transform:translateY(-50%) rotate(0);
  background: var(--chev-svg) no-repeat center / 16px 16px;
  color: var(--muted); pointer-events:none; transition: transform .18s, color .18s;
}
.w-select:hover::after{ color: var(--icon-hover); }
.w-select:focus-within::after{ transform:translateY(-50%) rotate(180deg); color: var(--color-primary-600); }

@media (max-width:575.98px){
  .w-select select, .dropmenu .name{ height:48px; }
}

#product-gallery-wrapper.mirror-x #prodwrap img, .fancybox__container.is-mirror .fancybox__slide img {
  transform: scaleX(-1);
}

.product-card .thumb { aspect-ratio: 19/15; filter:saturate(.75); transition:transform .28s; }
.product-card:hover .thumb { transform: scale(1.03); }
#appCanvasPaint {
    height: auto;
    max-width: 100%;
}
.appCanvasDiv {
    text-align: center;
}

/* ------------------------------
   HELPERY atrybutów
   ------------------------------ */

#atrib .row > label { display:flex; align-items:center; gap:6px; }
.help-btn{
  inline-size:26px; block-size:26px; display:grid; place-items:center;
  border:nine;color:var(--color-muted);
  background:#fff; border-radius:999px;
  cursor:pointer; transition:.18s;
}
.help-btn:hover{ color:var(--icon-hover);
  border-color:color-mix(in srgb,var(--color-muted) 30%, var(--color-border)); }
.help-btn:focus-visible{
  outline:0; border-color:var(--color-primary-600);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.i-16{ width:16px; height:16px; }
.help-popover{
  position:absolute;z-index:1040;min-inline-size:320px;max-inline-size:360px;
  background:#fff;border:1px solid var(--color-border);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:10px;transform:translateY(8px);
  opacity:0;visibility:hidden
}
.help-popover.is-open{opacity:1;visibility:visible;transform:none}
.help-popover::before{
  content:"";position:absolute;inset:auto auto 100% 18px;
  border:8px solid transparent;border-bottom-color:#fff;
  filter:drop-shadow(0 -1px 0 var(--color-border))
}
.help-head{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 6px 8px}
.help-close{inline-size:28px;block-size:28px;border:0;border-radius:8px;
  background:transparent;font-size:22px;line-height:1;color:#6b7280;cursor:pointer}
.help-close:hover{background:#f3f4f6;color:#111}
.help-body{display:grid;gap:10px;max-block-size:68vh;overflow:auto;padding:4px}
.help-item{margin:0}
.help-cap{font:700 14px/1.2 Inter,system-ui;color:#111;margin:0 0 6px}
.help-item img{width:100%;height:auto;display:block;border-radius:10px;background:#f2f3f5}
.help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:98}
.help-overlay.is-open{display:block}
@media (max-width:767.98px){
  .help-popover{position:fixed;inset:auto 10px 10px 10px;min-inline-size:auto;max-inline-size:none;
    max-block-size:calc(100vh - 120px);border-radius:16px;transform:translateY(12px)}
  .help-popover::before{content:none}
}

.field,.field-label{position:relative}
#kqs-box-tlo, #kqs-tlo {
    z-index: 1070!important;
}
.site-modal[hidden] { display: none !important; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 20px;font-size:22px;font-weight:600;
}
.modal-body{ padding: 16px 20px; max-width:min(92vw, 760px); }
.icon-btn{ border:0; background:transparent; padding:6px; border-radius:8px; cursor:pointer; }
.icon-btn:hover{ background:rgba(0,0,0,.06); }

/* =========================================================
   KOMPONENT: KARTA GALERII (.gallery-card) v2.0 - z ikoną CSS
   ========================================================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolumny na desktopie */
    gap: 24px;
}
@media (max-width: 991.98px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4 / 3;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.gallery-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-card:hover .gallery-card__image {
    transform: scale(1.05);
}
.gallery-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    color: var(--color-white);
    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.gallery-card__caption {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}
.gallery-card__zoom-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.gallery-card:hover .gallery-card__zoom-icon {
    opacity: 1;
    transform: scale(1);
}
.gallery-card__zoom-icon::before,
.gallery-card__zoom-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--ink);
    transform: translate(-50%, -50%);
}
.gallery-card__zoom-icon::before {
    width: 14px;
    height: 2px;
}
.gallery-card__zoom-icon::after {
    width: 2px;
    height: 14px;
}

/* =========================================================
   OPIS PRODUKTU ('PETARDA') - Finalny, Kompletny Układ
   ========================================================= */

.story-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: flex-start;
    gap: clamp(32px, 6vw, 80px);
}
.story-layout__sidebar {
    position: sticky;
    top: 120px;
}
@media (max-width: 991.98px) {
    .story-layout { grid-template-columns: 1fr; }
    .story-layout__sidebar { position: static; margin-bottom: 48px; }
}

.feature-block {
    margin-bottom: 60px;
}
.feature-block__image a {
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    aspect-ratio: 1/1;
}
.feature-block__image a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.feature-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.feature-block__image:hover img {
    transform: scale(1.03);
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 60px auto;
    width: 50%;
}
.card-grid--benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 767.98px) {
    .card-grid--benefits { grid-template-columns: 1fr; }
}

/* =========================================================
   KOMPONENT: MODAL "DODANO DO KOSZYKA" ('PETARDA')
   ========================================================= */

.add-to-cart-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.add-to-cart-modal__icon {
    width: 32px;
    height: 32px;
    color: var(--color-primary-600);
}
.add-to-cart-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.add-to-cart-modal__product {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--surface);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    text-align: left;
}
.add-to-cart-modal__thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.add-to-cart-modal__name {
    font-weight: 600;
    line-height: 1.3;
}

.add-to-cart-modal .delivery-tracker {
    margin-top: 24px;
}
.add-to-cart-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.kqs-iks {top:5px!important;right:5px!important}


/* =========================================================
   KOMPONENT: "BIŻUTERYJNY" COLOR PICKER
   ========================================================= */
.color-picker-wrapper { position: relative; }
.color-picker-wrapper select.atrybuty { display: none !important; }
.color-picker__trigger {
    display: flex; align-items: center; width: 100%;
    height: 44px; padding: 0 30px 0 14px;
    border: 1px solid var(--color-border); border-radius: 16px;
    background: #fff; box-shadow: var(--sel-shadow);
    cursor: pointer; position: relative;
    transition:border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.color-picker__trigger:hover{border-color:color-mix(in srgb, var(--muted) 30%, var(--color-border))}
.color-picker__trigger::after {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 16px; height: 16px; transform: translateY(-50%);
    background: var(--chev-svg) no-repeat center / 16px 16px;
    color: var(--muted); pointer-events: none;
    transition: transform 0.2s ease;
}
.color-picker__trigger.is-open::after { transform: translateY(-50%) rotate(180deg); }
.color-picker__selection { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.color-picker__swatch {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border); background-size: cover;
}
.color-picker__panel {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
    padding: 12px;
    z-index: 60;

    max-height: 400px;
    overflow: hidden;
}
.color-picker__trigger.is-open + .color-picker__panel { display: flex; }
.color-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
    margin:5px;
}
.color-picker__option {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    border: 1px solid var(--border); cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
        display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: monospace;
}
.color-picker__option:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }
.color-picker__option.is-selected {
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--muted);
}

.color-picker__option.is-light-bg {
    color: #2f2f2f;
}

.color-picker__option.is-dark-bg {
    color: #ffffff;
}

.color-picker__grid-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 8px;
}
.color-picker__preview {
height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    margin: 4px 4px 12px;
    background-color: #fff;
    flex-shrink: 0;
    transition: background-color 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    padding: 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.color-picker__preview.is-light-bg {
    color: #2f2f2f;
    text-shadow: none;
}
.color-picker__preview.is-dark-bg {
    color: #ffffff;
}
.wally-styler-container {
    position: relative;
    display: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
}
.wally-styler-container.is-active {
display: block
}
.wally-styler-canvas { width:100%; display:block; background:transparent !important; position:relative; z-index:2; object-fit:none; touch-action:none; -webkit-user-select:none; user-select:none; }
.is-grabbable {    cursor:grabbing;}
.wally-styler-controls {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 3;
    pointer-events:auto
}

.styler-control { display: grid; gap: 8px;grid-template-columns: repeat(2, 1fr);align-items:center;justify-items: end;}
.styler-control label { font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.styler-color-input {
    display: flex; align-items: center; gap: 10px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
}
.styler-color-input input[type="color"] {
    -webkit-appearance: none; appearance: none;
    width: 100px; height: 27px;
    border: 1px solid var(--border);; border-radius: 8px; cursor: pointer;
    padding: 0; background-color: transparent;
}
.styler-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border: none; }
.styler-color-input input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.styler-color-input input[type="color"]::-moz-color-swatch { border: none; border-radius: 8px; }
.styler-color-input span { font-family: monospace; font-size: 0.95rem; font-weight: 500; color: var(--ink);display:none }

.styler-tab-nav {
    display: flex;
    gap: 10px;
    width: 100%;
}

.styler-scale-control label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--muted);
    display: block;
}
.styler-scale-control input[type="range"] {
    width: 100%;
    cursor: ew-resize;
        flex-grow: 1;
    min-width: 150px;
}

.styler-launch-btn {
    position: absolute; top: 16px; right: 16px; z-index: 50;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.2s ease, visibility 0.2s;
}
.wally-styler-container.is-active + .styler-launch-btn {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.styler-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.styler-tab-btn.is-active {
    background: color-mix(in srgb, var(--primary) 26%, #fff);
    border-color: color-mix(in srgb, var(--primary) 60%, var(--color-border)); 
    box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 20%, transparent), 0 12px 28px rgba(160,209,46,.16);
}
.styler-tab-panel { display: none; }
.styler-tab-panel.is-active { display: flex!important; gap: 16px; }
.styler-file-input { display: none; }
.styler-file-label {
    display: block; text-align: center; padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.styler-file-label:hover { background-color: var(--border); }
.styler-file-label svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }



    /* =========================================================
   LLista plików
   ========================================================= */

.download-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg); 
    overflow: hidden; 
}

.download-item {
    display: grid;
    /* [Ikona] [Nazwa/Opis] [Rozmiar] [Pobierz] */
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.download-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.download-item:hover {
    background-color: var(--surface);
}

.download-item__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background-color: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.download-item__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.download-item__name {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.download-item__size {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
    padding: 0 24px; 
}

.download-item__action {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.download-item:hover .download-item__action {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.05);
}
.download-item__action svg {
    width: 18px;
    height: 18px;
}


@media (max-width: 767.98px) {
    .download-item {
        /* [Ikona] [Nazwa/Rozmiar] [Pobierz] */
        grid-template-columns: 40px 1fr auto;
        padding: 16px;
    }
    .download-item__icon {
        width: 40px;
        height: 40px;
    }
    .download-item__size {
        display: none; 
    }
    .download-item__name::after {
        content: attr(data-size); /* Sztuczka CSS do pobrania rozmiaru */
        display: block;
        font-size: 0.9rem;
        color: var(--muted);
        font-weight: 400;
        margin-top: 2px;
    }
}


table.sizes {
    display: none;
}