/* Catalogue listing and item page: the rules that live in katalog.php's and item.php's own <style> blocks
   and so are not in the site's main.css. Everything else (.catalog-sidebar, .catalog-grid, .product-card,
   .product-page-main, …) comes from main.css, which is a copy of the live one.

   The colour/material menus and the sort menu are <details>/<summary> here, where the PHP page used two
   buttons, a JS toggle, a mobile portal and an `_open=` querystring round trip. */

.filter-wrapper,
.sort-wrapper {
    position: relative;
    display: inline-block;
}

.filter-wrapper>summary,
.sort-wrapper>summary {
    cursor: pointer;
    list-style: none;
}

/* Safari/Chrome draw a disclosure triangle on <summary> unless both of these are set. */
.filter-wrapper>summary::-webkit-details-marker,
.sort-wrapper>summary::-webkit-details-marker {
    display: none;
}

/* katalog.php gives the two menus different boxes: the sort menu is a narrow list of links, the filter
   menu a wider padded box that scrolls. Sizes, border and offset are its own. */
.sort-menu-box {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    min-width: 200px;
    max-width: 230px;
    margin-top: 5px;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.filter-menu-box {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    min-width: 250px;
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 5px;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* main.css hides `.sort-menu-box` with `display: none !important` and the live page's JS shows it by adding
   `.is-visible`. Here the <details> does that, so the open state has to answer with the same weight — without
   this the menu opens and nothing appears. Scoped to [open] so a closed menu stays hidden. */
.sort-wrapper[open] .sort-menu-box {
    display: block !important;
}

.sort-menu-box a {
    display: block;
    padding: 5px 15px;
    color: #333;
    font-size: 0.75rem;
    text-decoration: none;
}

.sort-menu-box a:hover {
    background: #f5f5f5;
}

.active-sort {
    color: var(--primary-orange);
    font-weight: 700;
}

.filter-menu-label {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
    color: #aaa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background: #f4f4f4;
    color: #555;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-chip:hover {
    background: #ebebeb;
    color: #222;
}

.filter-chip.active {
    border-color: var(--primary-orange, #f07d00);
    background: var(--primary-orange, #f07d00);
    color: #000;
    font-weight: 700;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background: #000;
    color: var(--primary-orange, #f07d00);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

/* Min. quantity: an inline GET form, so the other filters ride along as hidden fields. The rules are the
   live page's own — the grey pill with the orange OK button — not an approximation of them. */
.qty-inline-form {
    display: inline-flex;
    align-items: center;
}

.qty-inline-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 4px 10px;
}

.qty-inline-label {
    font-size: calc(0.72rem - 1px);
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.qty-inline-input {
    border: none;
    background: transparent;
    font-size: calc(0.78rem - 1px);
    width: 52px;
    outline: none;
    color: #333;
    font-weight: 600;
}

.qty-inline-btn {
    background: var(--primary-orange);
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: calc(0.7rem - 1px);
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.qty-inline-btn:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    /* iOS zooms a focused input below 16px. */
    .qty-inline-input {
        font-size: 16px;
    }
}

/* "3D" is ours: the live page has no such button, so it borrows the filter buttons' look. `nowrap` is
   what keeps a label out of a second line in the toolbar's scrolling row, where a flex item shrinks until
   its text wraps; the live page's own buttons behave the same way. */
.filter-toggle {
    text-decoration: none;
    white-space: nowrap;
}

/* The sidebar's category list is a <details> so it collapses on small screens without JavaScript. */
.sidebar-details>summary {
    cursor: pointer;
    list-style: none;
}

.sidebar-details>summary::-webkit-details-marker {
    display: none;
}

.catalog-intro {
    padding: 0 0 1rem;
}

.no-results {
    grid-column: 1 / -1;
    padding: 3rem;
    color: #666;
    text-align: center;
}

/* Card photo: fills the whole box, no bars.

   main.css makes the box square (`aspect-ratio: 1/1`) and scales the photo with `object-fit: contain`, so
   any thumbnail that is not square is letterboxed against the box's background. The live site looks clean
   only because its newest photos are square (200x200); its older 320x200 ones are letterboxed there too.
   `cover` fills the box at every aspect ratio, which is what was asked for. The trade-off is deliberate:
   a wide photo loses its left and right edges in the card, so the item page — where `main-img` keeps
   `contain` — is where the whole prop is seen. */
.catalog-grid .product-img {
    object-fit: cover;
}

.product-img-wrapper .no-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ccc;
    font-size: 3rem;
}

.thumb-item.active {
    border: 1px solid #000;
}

.rental-period-info {
    margin: -12px 0 20px;
    color: #666;
    font-size: 0.68rem;
}

.related-items-section .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-content: start;
    gap: 20px;
}

/* The gap under the fixed header, 90px tighter than the live page's (requested 2026-09-24).
   Overridden here rather than in main.css, which stays a byte-identical copy of the live stylesheet.
   Desktop only: on a phone the header is as tall as the tightened gap, so the search bar sat under it. */
@media (min-width: 769px) {
    .catalog-page-section {
        margin-top: calc(8rem - 90px);
    }
}

/* From 1100px up main.css makes the toolbar and the sidebar sticky (7.5rem and 8.5rem, just under the
   130px fixed header). With the gap above tightened by the full 90px their flow position sits above that
   line, so both stick while the page is still at the top: the toolbar lifts out of flow and its opaque
   background covers the top ~38px of the first row of cards. Keep the content starting below the sticky
   line on the desktop layout; the sidebar's own position is unchanged (it was already being held at
   8.5rem by the same mechanism). */
@media (min-width: 1100px) {
    .catalog-page-section {
        margin-top: calc(8rem - 28px);
    }
}

/* The count beside the toolbar pagination. main.css sizes it for the live page's shorter
   "Wszystkie wyniki: 15628"; ours names the unit as well, which at 0.8rem wrapped onto a second line and
   made the toolbar taller than the live one. */
.results-count {
    font-size: 0.7rem;
}

.results-count strong {
    font-weight: 500;
}

/* Phone and tablet: main.css hides the category list for the live page's JS to toggle. Here the <details>
   is the toggle, so its open state shows the list; the arrow says it can be tapped. */
@media (max-width: 1023px) {
    .sidebar-details[open] .sidebar-categories {
        display: flex;
    }

    .sidebar-details>summary::after {
        content: '▾';
        transition: transform 0.3s ease;
    }

    .sidebar-details[open]>summary::after {
        transform: rotate(180deg);
    }
}
/* ---- item.php's own <style> block -----------------------------------------
   These were missed when the item page was built: the classes are in our markup, so without them the
   breadcrumb row, the details grid and the thumbnail column had no layout at all. Copied from the live page,
   with the deviations noted below. */

/* The breadcrumb and the search box share one row, search right-aligned; they stack on a phone. */
.breadcrumb-search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.item-search {
    margin: 0;
    max-width: 400px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .breadcrumb-search-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .item-search {
        width: 100%;
        max-width: none;
    }
}

.product-left-col {
    display: flex;
    flex-direction: column;
    flex: 1.2;
    min-width: 0;
}

.product-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 15px 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.detail-item {
    font-size: 0.75rem;
}

.detail-label {
    color: #666;
}

.detail-value {
    font-weight: 500;
}

.no-image-placeholder {
    width: 100%;
    height: 300px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

.related-items-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}

.related-items-section .section-header {
    margin-bottom: 20px;
}

.related-set-group {
    margin-bottom: 32px;
}

.related-set-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.product-thumbnails-clip {
    display: contents;
    /* mobile: no clipping */
}

/* On phones the strip still scrolls sideways; hide that bar too, as main.css does for
   .product-thumbnails. On desktop the clip has overflow:hidden, so it never shows one. */
.product-thumbnails-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-thumbnails-wrapper::-webkit-scrollbar {
    display: none;
}

/* The round up/down arrows, as on item.php. Hidden until the script works out that the column
   has somewhere to slide, and never shown on phones, where the strip is horizontal. */
.thumb-nav-btn {
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #333;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.thumb-nav-btn:hover {
    background: #f7941d;
    border-color: #f7941d;
    color: #fff;
}

/* [hidden] has to beat display:flex above. */
.thumb-nav-btn[hidden] {
    display: none;
}

/* Desktop: the thumbnails are a column beside the main photo, five deep.
   Same as the live page: the column is clipped to exactly 446px and slides under it, moved by the
   `.thumb-nav-btn` arrows. The thumbnails stay `?photo=N` links, so without JavaScript the arrows
   stay hidden and every photo is still reachable by following a link. */
@media (min-width: 992px) {
    .product-thumbnails-wrapper {
        position: relative;
        flex-direction: column !important;
        width: 86px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        gap: 0 !important;
        height: auto !important;
    }

    /* 5×80px thumbs + 4×10px gaps + 2×3px padding = 446px */
    .product-thumbnails-clip {
        display: block !important;
        box-sizing: border-box !important;
        width: 86px !important;
        height: 446px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        padding: 3px !important;
    }

    .product-thumbnails {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        height: auto !important;
        max-height: none !important;
        width: 80px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        transition: transform 0.3s ease !important;
        will-change: transform;
    }

    /* A thumb is 80px tall, so its centre is 40px; the button is 28px, so 40 − 14 = 26px. */
    .thumb-nav-btn.thumb-nav-up {
        position: absolute;
        top: 26px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }

    .thumb-nav-btn.thumb-nav-down {
        position: absolute;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }
}

/* Phone and tablet: gallery first, then the info panel, then the related items; thumbnails go horizontal. */
@media (max-width: 991px) {
    .product-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Unwraps the gallery and the related items into the outer flex container. */
    .product-left-col {
        display: contents;
    }

    .product-gallery {
        order: 1;
        flex-direction: column-reverse !important;
    }

    .product-info-panel {
        order: 2;
        padding-top: 20px;
    }

    .related-items-section {
        order: 3;
        margin-top: 40px !important;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    .product-thumbnails-wrapper {
        margin: 15px 0 0 0 !important;
        width: 100% !important;
        overflow-x: auto;
    }

    .product-thumbnails {
        flex-direction: row !important;
        gap: 8px !important;
        width: max-content !important;
        transform: none !important;
    }

    .product-thumbnails-clip {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .thumb-nav-btn {
        display: none !important;
    }
}

/* ---- katalog.php's own <style> block, the rest of it -----------------------
   Missed with the item page's block for the same reason: these classes are in our markup and had no rules. */

/* The filter, sort and "clear filters" buttons. The sizes are katalog.php's, with the type one pixel
   smaller throughout the row (asked for 2026-10-18). */
.filter-single-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: calc(0.75rem - 1px);
    font-weight: 600;
    cursor: pointer;
    color: #333;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter-single-btn:hover {
    background: #ebebeb;
    border-color: #bbb;
}

.filter-single-btn.filter-active {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: #000;
}

/* main.css sizes the two <summary> buttons and the sort button at 0.7rem; one pixel down with the rest. */
.filter-btn,
.sort-btn {
    font-size: calc(0.7rem - 1px);
}

/* "Wyczyść filtry": the rule is katalog.php's own (it carries `.clear-filters-btn` although its toolbar
   never rendered one), so the button that was added here on request looks like the live page's would. */
.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #888;
    font-size: calc(0.72rem - 1px);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.clear-filters-btn:hover {
    border-color: #c0392b;
    background: #fff5f5;
    color: #c0392b;
}

.clear-filters-btn:focus-visible {
    outline: 3px solid #f7941d;
    outline-offset: 2px;
}

.filter-menu-styled {
    min-width: 220px;
    max-height: 55vh;
    overflow-y: auto;
}

.filter-arrow {
    font-size: 0.6rem;
    margin-left: 3px;
    opacity: 0.6;
}

/* Two pagination rows, as on the live page: the one in the toolbar (`.catalog-pagination-top`, styled in
   main.css) and this one at the bottom, which only appears on a phone. */
.catalog-pagination-bottom-mobile {
    display: none;
}

@media (max-width: 768px) {
    .catalog-pagination-bottom-mobile {
        display: flex;
        justify-content: center;
        padding: 16px 0 8px;
    }

    /* katalog.php's own phone rule: the filter row keeps scrolling sideways (main.css) and an open menu
       leaves it as a panel centred on the viewport, so nothing is clipped by the scrolling row. The live
       page needed a JS portal for this; a fixed <details> child escapes the row on its own. */
    .filter-menu-box,
    .sort-menu-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1001;
        width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
        margin-top: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }
}

.sidebar-vintage-section {
    margin-top: 12px;
    border-top: 1px solid #e8e8e8;
    padding-top: 10px;
}

.sidebar-vintage-header {
    display: flex;
    align-items: center;
    padding: 8px 0 0;
    margin-bottom: 0;
}

/* A label, not a section heading: katalog.php drops this one to 0.62rem inline so it ranks
   below "KATEGORIE". Here it is a rule, and the two classes outrank plain .sidebar-title. */
.sidebar-vintage-header .sidebar-title {
    font-size: 0.62rem;
    line-height: 1.3;
}

.sidebar-vintage-categories {
    padding-top: 0;
}

/* Keyboard focus rings, matching the rest of the site (WCAG 2.4.7). */
.filter-chip:focus-visible,
.thumb-item:focus-visible,
.category-link:focus-visible,
.subcategory-link:focus-visible,
.sub2category-link:focus-visible,
.page-arrow:focus-visible,
.sort-menu-box a:focus-visible,
.filter-wrapper>summary:focus-visible,
.sort-wrapper>summary:focus-visible {
    outline: 3px solid #f7941d;
    outline-offset: 2px;
}

/* 3D model: the gallery's last slide (home/templates/home/_glb_viewer.html, docs/glb-viewer/PLAN.md). */
.thumb-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

/* The base stylesheets give img `display: block`, which beats the `hidden` attribute the gallery toggles. */
.product-main-image [hidden] {
    display: none;
}

.main-3d .glb-viewer {
    width: 500px;
    max-width: 100%;
}

/* "3D" next to the SKU on a catalogue card: the item has a model. */
.badge-3d {
    margin-left: 0.3em;
    padding: 0 0.35em;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-weight: 700;
}

.glb-viewer {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto; /* model-viewer's own host style is 300x150; a fixed height would beat aspect-ratio */
    aspect-ratio: 4 / 3;
    background: #f2f2f2;
}

/* The item page's "Dodaj do schowka" row (item.php). The live page writes the box, the row's reset and
   the button's width as inline styles on the elements; they are the same values, in a file. */
.product-actions-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.product-actions-box .product-actions-row {
    margin-bottom: 0;
}

.product-actions-box .btn-add-to-clipboard-large {
    width: auto;
    flex: 0 1 auto;
    margin-bottom: 0;
}