.pill.pill-category .pname-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:100%;
}
.pill.pill-category .pname{
    font-size:clamp(1rem, calc(var(--tile-height) * 0.16), 2.6rem);
    line-height:1.05;
}
/* Product grid and tiles */
/* Grid theme variables (safe defaults) */
:root{ --grid-gap: calc(var(--tile-height) * 0.05); --tile-radius: calc(var(--tile-height) * 0.08); --tile-border: rgba(255,255,255,0.06); --tile-hover-border: rgba(255,255,255,0.16); --tile-shadow: 0 6px 14px rgba(0,0,0,0.18); --tile-shadow-hover: 0 10px 20px rgba(0,0,0,0.22); }
/* Readability boost theme toggle */
.readability-boost{ --grid-gap: calc(var(--tile-height) * 0.06); }
/* Grid używa auto-fill aby automatycznie dopasować liczbę kolumn do rozmiaru kafli */
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--tile-width), 1fr));gap:var(--grid-gap);align-content:start}
.grid.view-list{ display:block; }
/* third view: ultra-compact line mode */
#prodGrid.view-line{ display:block; padding:8px 8px 12px 4px; }
/* Brak zaznaczania tekstu i przeciągania w gridzie produktów */
#prodGrid{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }
#leftCol{display:flex;flex-direction:column;min-height:0}
#prodGridContainer{flex:1;min-height:0;display:flex;flex-direction:column}
#prodGrid{flex:1;overflow:auto;padding-right:4px}
/* Smoother scrolling and isolation for better performance */
#prodGrid{overscroll-behavior:contain;contain:content;scrollbar-gutter:auto}
/* Momentum scroll on iOS Safari */
@supports (-webkit-overflow-scrolling: touch){
    #prodGrid{ -webkit-overflow-scrolling: touch; }
}
/* Hide scrollbar visuals, keep scrolling */
#prodGrid{scrollbar-width:none;-ms-overflow-style:none}
#prodGrid::-webkit-scrollbar{width:0;height:0}
#prodGrid::-webkit-scrollbar-track{background:transparent}
#prodGrid::-webkit-scrollbar-thumb{background:transparent}
#gridInfo{margin-top:8px}

.pill{ background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    var(--card2);
    padding:calc(var(--tile-height) * 0.08);
    border-radius:var(--tile-radius);
    text-align:center;
    opacity:0;
    transition: background .22s ease, border-color .22s ease, transform .18s ease, opacity .2s ease;
    width:100%;
    height:var(--tile-height);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    content-visibility:auto;
    contain-intrinsic-size:var(--tile-width) var(--tile-height);
    contain: content;
    position:relative;
    border:1px solid var(--tile-border);
    box-shadow: var(--tile-shadow);
}
.readability-boost .pill{
    /* Clearer card edges and simpler background for quick scanning */
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
        var(--card2);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}
.pill.show{opacity:1}
.pill:hover{ border-color: var(--tile-hover-border); transform: translateY(-2px); will-change: transform; }
.pill:active{ transform: translateY(-1px) scale(0.995); }
.pill:focus-visible{ outline:2px solid rgba(255,255,255,0.35); outline-offset:3px; }
/* Overlay spinner dla przytrzymania do edycji */
.press-wait{ position:absolute; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; border-radius:inherit; }
.press-wait-spinner{ width:clamp(3.5vh, 4.5vw, 5vh); height:clamp(3.5vh, 4.5vw, 5vh); border-radius:50%; border:clamp(0.4vh, 0.5vw, 0.6vh) solid rgba(255,255,255,0.35); border-top-color:#fff; animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Zielone tagi pod wyszukiwarką */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.chip{background:linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06)), var(--ok); color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:8px 14px; cursor:pointer; font-size:calc(1rem * var(--ui-scale)); box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.chip:hover{background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)), var(--ok-dark)}
.chip.active{outline:2px solid rgba(255,255,255,0.9); outline-offset:2px}

.category-chip-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.category-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:#f97316;color:#1f1307;border:1px solid rgba(255,255,255,0.28);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;box-shadow:0 10px 22px rgba(249,115,22,0.45);cursor:pointer;transition:transform .16s ease, box-shadow .16s ease}
.category-chip:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(249,115,22,0.55)}
.category-chip:active{transform:translateY(0);box-shadow:0 8px 18px rgba(249,115,22,0.4)}
.category-chip-label{font-size:0.95em}
.category-chip-count{background:rgba(0,0,0,0.32);padding:2px 9px;border-radius:999px;font-size:0.82em;font-weight:700;color:#fff}
.category-chip-back{background:linear-gradient(135deg,#1abc9c,#27ae60);color:#0b2814;box-shadow:0 10px 22px rgba(26,188,156,0.45);border:1px solid rgba(255,255,255,0.22)}
.category-chip-back:hover{box-shadow:0 14px 28px rgba(26,188,156,0.55)}
.category-chip-back .category-chip-count{background:rgba(255,255,255,0.75);color:#0b2814}

/* Grid auto-fill dostosowuje liczbę kolumn automatycznie na podstawie --tile-width */
/* Stare klasy .cols-X już nie są potrzebne - grid sam decyduje ile kafli się zmieści */

/* Nazwa produktu — skaluje się wraz z kafelkiem, pierwsze słowo większe */
.pill .pname{ font-weight:800; line-height:1.08; display:block; font-size:calc(var(--tile-height) * 0.09 * var(--font-scale)); white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:none; color:#fff; }
.pill .pname-first{ display:block; font-weight:900; letter-spacing:0.012em; }
.pill .pname-rest{ display:block; font-weight:780; opacity:0.98; }
.readability-boost .pill .pname{ letter-spacing:0.012em; text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.18); }
.pill .pname-wrap{ display:block; overflow:hidden; min-height:calc(3.2 * 1.08em); }
.readability-boost .pill .pname-wrap{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; min-height:calc(3 * 1.08em); }
.readability-boost .pill .pname-wrap{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; min-height:calc(3 * 1.1em); }
/* Cena + VAT */
.pill .price-box{
    margin-top:auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)),
        var(--ok);
    color:#fff;
    border-radius:999px;
    padding:calc(var(--tile-height) * 0.05) calc(var(--tile-height) * 0.08);
    display:flex; align-items:center; justify-content:center; gap:calc(var(--tile-height) * 0.04); flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
    border:1px solid rgba(255,255,255,0.22);
    box-shadow: 0 3px 10px rgba(39,174,96,0.22);
    /* Removed backdrop-filter for scroll performance */
}
.pill .price-box .price{ font-size:calc(var(--tile-height) * 0.11); font-weight:800; letter-spacing:0.01em; text-shadow:0 1px 0 rgba(0,0,0,0.25); white-space:nowrap; }
.readability-boost .pill .price-box .price{ font-size:calc(var(--tile-height) * 0.12); }
.pill .price-box .vat{ opacity:.92; font-size:calc(var(--tile-height) * 0.07); white-space:nowrap; }
/* Upewnij się, że w trybie listy nie wpływamy na layout */
#prodGrid.view-list .pill{ aspect-ratio:auto; height:auto; }

.pill.pill-category{
    background:rgba(249,115,22,0.6) !important;
    color:#fff;
    border:1px solid rgba(255,255,255,0.28);
    box-shadow:none;
}
.pill.pill-category .pname,
.pill.pill-category .pname-first,
.pill.pill-category .pname-rest{
    color:#fff !important;
    text-transform:uppercase;
    letter-spacing:0.05em;
    text-shadow:none;
    font-size:clamp(1rem, calc(var(--tile-height) * 0.12), 2.1rem);
}
.pill.pill-category .price-box{
    background:rgba(0,0,0,0.28);
    color:#fff;
    box-shadow:none;
    border-color:rgba(255,255,255,0.26);
}
.pill.pill-category .price-box .price,
.pill.pill-category .price-box .vat{
    color:#fff;
    text-shadow:none;
}
.pill.pill-category .category-pill-meta{
    font-size:calc(var(--tile-height) * 0.07);
    font-weight:650;
    background:rgba(0,0,0,0.32);
    padding:6px 12px;
    border-radius:999px;
    align-self:center;
    margin-top:auto;
    color:#fff;
    letter-spacing:0.06em;
    text-transform:uppercase;
}
.pill.pill-category-back{
    background:linear-gradient(135deg,#1abc9c,#27ae60);
    color:#0b2814;
    border:1px solid rgba(255,255,255,0.24);
    box-shadow:0 12px 20px rgba(26,188,156,0.4);
}
.pill.pill-category-back .pname,
.pill.pill-category-back .pname-first,
.pill.pill-category-back .pname-rest{
    color:#0b2814 !important;
    text-transform:none;
    letter-spacing:0.02em;
}
.pill.pill-category-back .price-box{
    background:rgba(0,0,0,0.08);
    color:#0b2814;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    border-color:rgba(0,0,0,0.12);
}
.pill.pill-category-back .price-box .price,
.pill.pill-category-back .price-box .vat{
    color:#0b2814;
    text-shadow:none;
}
.pill.pill-category-back .category-pill-meta{
    background:rgba(255,255,255,0.78);
    color:#0b2814;
    letter-spacing:0.04em;
}

/* List view */
#prodGrid.view-list{ display:block; padding:calc(12px * var(--list-scale)) 8px calc(18px * var(--list-scale)) 4px; }
.prod-list{ display:flex; flex-direction:column; gap:calc(14px * var(--list-scale)); margin:0; }
.prod-row{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:calc(16px * var(--list-scale)); align-items:center; padding:calc(16px * var(--list-scale)) calc(20px * var(--list-scale)); border-radius:calc(18px * var(--list-scale)); background:linear-gradient(135deg, rgba(10,79,137,0.9), rgba(8,62,106,0.88)); border:1px solid rgba(255,255,255,0.08); box-shadow:0 14px 30px rgba(0,0,0,0.22); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; content-visibility:auto; contain-intrinsic-size: calc(150px * var(--list-scale)) auto; will-change:transform; }
.prod-row::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(135deg, rgba(39,174,96,0.28), transparent 60%); opacity:0; transition:opacity .22s ease; pointer-events:none; }
.prod-row::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:calc(4px * var(--list-scale)); border-radius:calc(18px * var(--list-scale)) 0 0 calc(18px * var(--list-scale)); background:linear-gradient(to bottom, rgba(39,174,96,0.85), rgba(39,174,96,0.22)); opacity:0.85; pointer-events:none; }
.prod-row > *{ position:relative; z-index:1; }
.prod-row:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,0.28); border-color:rgba(255,255,255,0.16); }
.prod-row:hover::before{ opacity:1; }
.prod-row:focus-visible{ outline:2px solid rgba(255,255,255,0.45); outline-offset:3px; }
.prod-row:active{ transform:translateY(-1px) scale(0.99); }
.prod-row .col.name{ display:flex; flex-direction:column; gap:calc(10px * var(--list-scale)); min-width:0; }
.prod-row .name-text{ font-size:clamp(calc(1rem * var(--list-scale) * var(--font-scale)), calc((0.55vw * var(--list-scale) * var(--font-scale)) + (0.95rem * var(--list-scale) * var(--font-scale))), calc(1.5rem * var(--list-scale) * var(--font-scale))); font-weight:680; line-height:1.1; letter-spacing:0.01em; word-break:break-word; }
.prod-row .meta{ display:flex; flex-direction:column; gap:calc(6px * var(--list-scale)); }
.meta-badges{ display:flex; flex-wrap:wrap; gap:calc(6px * var(--list-scale)); }
.meta-pill{ display:inline-flex; align-items:center; gap:calc(5px * var(--list-scale)); padding:calc(5px * var(--list-scale)) calc(11px * var(--list-scale)); border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); font-size:calc(0.78rem * var(--list-scale)); font-weight:600; letter-spacing:0.01em; color:#fff; text-transform:none; white-space:nowrap; }
.meta-pill .pill-label{ text-transform:uppercase; font-size:calc(0.65rem * var(--list-scale)); letter-spacing:0.1em; opacity:0.72; }
.meta-pill .pill-value{ font-weight:700; }
.meta-pill.meta-code{ background:rgba(11,90,155,0.45); }
.meta-pill.meta-ean{ background:rgba(8,62,106,0.5); }

.prod-row .col.pricing{ display:flex; flex-direction:column; align-items:flex-end; gap:calc(8px * var(--list-scale)); min-width:125px; text-align:right; }
.prod-row .price{ font-size:clamp(calc(1.12rem * var(--list-scale) * var(--font-scale)), calc((0.8vw * var(--list-scale) * var(--font-scale)) + (0.95rem * var(--list-scale) * var(--font-scale))), calc(1.6rem * var(--list-scale) * var(--font-scale))); font-weight:800; line-height:1.05; }
.prod-row .price-sub{ display:flex; align-items:center; gap:calc(8px * var(--list-scale)); font-size:calc(0.8rem * var(--list-scale)); opacity:0.86; }
.prod-row .price-sub .vat{ letter-spacing:0.1em; text-transform:uppercase; }
.prod-row .price-sub .unit{ padding:calc(3px * var(--list-scale)) calc(9px * var(--list-scale)); border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.12); font-weight:600; }
.prod-row-category{ background:linear-gradient(135deg, rgba(249,115,22,0.85), rgba(235,87,12,0.8)); border-color:rgba(255,255,255,0.16); box-shadow:0 16px 32px rgba(249,115,22,0.28); }
.prod-row-category .category-name{ text-transform:uppercase; letter-spacing:0.08em; font-weight:760; }
.prod-row-category .category-meta{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.09em; opacity:0.9; }
.prod-row-category .category-pricing{ align-items:center; }
.prod-row-category .category-count{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.32); background:rgba(0,0,0,0.18); color:#fff; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; min-width:96px; }
.prod-row:not(.prod-row-category):nth-child(2n){ background:linear-gradient(135deg, rgba(11,90,155,0.9), rgba(9,67,119,0.9)); }

@media (max-width:1100px){
    #prodGrid.view-list{ padding:calc(10px * var(--list-scale)) 6px calc(16px * var(--list-scale)) 4px; }
    .prod-row{ grid-template-columns:minmax(0,1fr); gap:calc(14px * var(--list-scale)); }
    .prod-row .col.pricing{ align-items:flex-start; text-align:left; min-width:0; }
    .prod-row .price-sub{ flex-wrap:wrap; justify-content:flex-start; }
    .prod-row .price{ font-size:clamp(calc(1.05rem * var(--list-scale)), calc((1vw * var(--list-scale)) + (1rem * var(--list-scale))), calc(1.55rem * var(--list-scale))); }
}
@media (max-width:720px){
    .prod-list{ gap:calc(9px * var(--list-scale)); }
    .prod-row{ padding:calc(14px * var(--list-scale)) calc(18px * var(--list-scale)); }
    .prod-row .name-text{ font-size:clamp(calc(0.95rem * var(--list-scale)), calc((1vw * var(--list-scale)) + (0.9rem * var(--list-scale))), calc(1.3rem * var(--list-scale))); }
    .meta-pill{ font-size:calc(0.72rem * var(--list-scale)); }
}

/* One-line compact view */
.prod-line{ display:flex; flex-direction:column; gap:6px; margin:0; }
.line-row{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)), var(--card2); border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 18px rgba(0,0,0,0.18); cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; content-visibility:auto; contain-intrinsic-size: 56px auto; }
.line-row:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,0.22); border-color:rgba(255,255,255,0.16); }
.line-row:active{ transform:translateY(-1px) scale(0.995); }
.line-row:focus-visible{ outline:2px solid rgba(255,255,255,0.4); outline-offset:3px; }
.line-row .line-name-wrap{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.line-name{ font-size:clamp(0.95rem, calc(0.7vw + 0.85rem), 1.2rem); font-weight:700; line-height:1.1; letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.line-pricing{ display:flex; align-items:center; gap:10px; }
.line-pricing .price{ font-weight:800; font-size:clamp(1rem, calc(0.6vw + 0.9rem), 1.25rem); }
.line-pricing .unit{ font-size:0.78rem; opacity:0.85; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.10); font-weight:600; }
.line-row-category{ background:linear-gradient(180deg, rgba(249,115,22,0.62), rgba(235,87,12,0.58)), var(--card2); border-color:rgba(255,255,255,0.16); box-shadow:0 12px 24px rgba(249,115,22,0.22); }
.line-row-category .category-name{ text-transform:uppercase; letter-spacing:0.08em; font-weight:760; }
.line-row-category .category-meta{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.85; }
.line-row-category .category-pricing{ align-items:center; }
.line-row-category .category-count{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.32); background:rgba(0,0,0,0.18); color:#fff; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; min-width:80px; }

@media (max-width:820px){
    #prodGrid.view-line{ padding:6px 6px calc(var(--cart-collapsed-height) + 64px) 4px; }
    .prod-line{ gap:5px; }
    .line-row{ padding:10px; }
}

/* Responsywność kolumn
   Uwaga: Pozostawiamy grid-template-columns zdefiniowane globalnie
   jako repeat(auto-fill, minmax(var(--tile-width), 1fr)).
   Usuwamy stare breakpointy i wymuszanie stałej liczby kolumn,
   aby suwak rozmiaru kafli mógł swobodnie sterować liczbą kolumn
   (szczególnie w pionowej orientacji na telefonach). */

/* Mobile layout (products-specific) */
@media (max-width:820px){
    .prod-controls{grid-template-columns:minmax(0,1fr) auto auto auto auto}
    #leftCol{min-height:0;height:100%;padding-bottom:0;}
    #prodGridContainer{flex:1;min-height:0;}
    #prodGrid{flex:1; overflow:auto; padding-right:6px; padding-bottom:calc(var(--cart-collapsed-height) + 64px); }
    #prodGrid.view-list{ padding-bottom:calc(var(--cart-collapsed-height) + 64px); }
    #gridInfo{ margin-top:8px; margin-bottom:8px; }
    /* Tags modal styling */
    #tagsModalBody{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding-top:6px;
        width:100%;
    }
    #tagsModalBody .chip{
        padding:10px 12px;
        text-align:left;
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
    }
}

/* Accessibility/performance: reduce motion when requested */
@media (prefers-reduced-motion: reduce){
    #prodGrid .pill, #prodGrid .pill *{ transition: none !important; }
    #prodGrid .prod-row, #prodGrid .prod-row *{ transition: none !important; }
}