/* Catalog styles are scoped so simulator and global cards stay independent. */
.giesta-catalog {
    margin-top: 115px;
    padding: 30px 0 64px;
    background: #f7f7f7;
    color: #303438;
}

.giesta-catalog__layout {
    display: grid;
    grid-template-columns: 28.7% minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.giesta-catalog__filters {
    position: sticky;
    top: var(--catalog-sticky-top, 139px);
    max-height: calc(100vh - var(--catalog-sticky-top, 139px) - 24px);
    overflow-y: auto;
    background: #fff;
    padding: 32px 40px;
    display: grid;
    gap: 20px;
}

.giesta-catalog__filter {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.giesta-catalog__checkbox {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #545658;
    cursor: pointer;
}

.giesta-catalog__toolbar {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.giesta-catalog__heading {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.giesta-catalog__count {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.giesta-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.giesta-catalog__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px;
    background: #fff;
    color: #303438;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.giesta-catalog__card:hover,
.giesta-catalog__card:focus-visible {
    color: #303438;
    text-decoration: none;
    background-color: #ccc;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}

.giesta-catalog__cta {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 3px;
    background: #fff;
    color: #000;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.giesta-catalog__card:hover .giesta-catalog__cta,
.giesta-catalog__card:focus-visible .giesta-catalog__cta {
    opacity: 1;
}

.giesta-catalog__group--separated::before {
    content: '';
    display: block;
    width: 76%;
    border-top: 1px solid #bcbcbc;
    margin: 30px 0;
}

.giesta-catalog__group-heading {
    margin-bottom: 16px;
}

.giesta-catalog__card:focus-visible,
.giesta-catalog__checkbox:focus-visible {
    outline: 2px solid #545658;
    outline-offset: 4px;
}

/* Both transparent PNGs use the same native canvas; the label is real text. */
.giesta-catalog__preview {
    display: grid;
    width: 100%;
    aspect-ratio: 299 / 410;
    margin-bottom: 12px;
}

.giesta-catalog__preview > img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

.giesta-catalog__handle {
    pointer-events: none;
}

.giesta-catalog__name {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.giesta-catalog [hidden] {
    display: none !important;
}

.giesta-catalog__empty {
    padding: 32px 0;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .giesta-catalog__layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 24px;
    }

    .giesta-catalog__filters {
        padding: 28px 24px;
    }

    .giesta-catalog__grid {
        gap: 24px;
    }
}

@media (max-width: 991.98px) {
    .giesta-catalog__layout {
        grid-template-columns: 1fr;
    }

    .giesta-catalog__filters {
        position: static;
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 24px;
    }
}

@media (max-width: 575.98px) {
    .giesta-catalog {
        padding: 24px 0 40px;
    }

    .giesta-catalog__filters {
        padding: 20px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .giesta-catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .giesta-catalog__card {
        padding: 12px;
    }

    .giesta-catalog__toolbar {
        margin-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .giesta-catalog__card { transition: none; }
}
/* Mobile category picker: staged selections in a sheet above the page. */
.giesta-catalog__filter-toggle { display:none; }
.giesta-filter-layer[hidden] { display:none !important; }
.giesta-filter-layer {
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:flex-end;
    background:rgba(0,0,0,0);
    transition:background-color 260ms ease;
}
.giesta-filter-layer.is-open { background:rgba(0,0,0,.5); }
.giesta-filter-sheet {
    width:100%;
    max-height:85vh;
    max-height:85dvh;
    display:flex;
    flex-direction:column;
    padding:18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background:#fff;
    color:#393C41;
    transform:translateY(100%);
    transition:transform 260ms cubic-bezier(.22,1,.36,1);
}
.giesta-filter-layer.is-open .giesta-filter-sheet { transform:translateY(0); }
.giesta-filter-sheet__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.giesta-filter-sheet__header h2 { margin:0; font-size:18px; font-weight:400; }
.giesta-filter-sheet__close { border:0; background:transparent; color:inherit; font-size:28px; line-height:1; padding:4px; cursor:pointer; }
.giesta-filter-sheet__options { display:grid; gap:22px; padding:0 8px 24px; overflow-y:auto; overscroll-behavior:contain; }
.giesta-filter-sheet__checkbox { width:14px; height:14px; margin:0; accent-color:#393C41; flex-shrink:0; }
.giesta-filter-sheet__actions { display:flex; justify-content:flex-end; gap:10px; padding-top:8px; }
.giesta-filter-sheet__actions button { border:0; border-radius:0; padding:10px 20px; background:#fff; color:#393C41; box-shadow:0 2px 8px rgba(0,0,0,.06); font-size:13px; cursor:pointer; }
.giesta-filter-sheet__actions .giesta-filter-sheet__apply { background:#393C41; color:#fff; }
.giesta-filter-sheet button:focus-visible,
.giesta-filter-sheet input:focus-visible,
.giesta-catalog__filter-toggle:focus-visible { outline:2px solid #393C41; outline-offset:3px; }
.giesta-filter-sheet button:focus:not(:focus-visible) { outline:none; }
@media (max-width:991.98px) {
    .giesta-catalog__filters { display:none; }
    .giesta-catalog__toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; margin-bottom:16px; }
    .giesta-catalog__heading { grid-column:1; font-size:16px; }
    .giesta-catalog__count { grid-column:1; grid-row:2; font-size:12px; }
    .giesta-catalog__filter-toggle { display:flex; grid-column:2; grid-row:1 / 3; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:#fff; color:#393C41; cursor:pointer; }
    .giesta-catalog__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:575.98px) {
    .giesta-catalog { margin-top:54px; padding-top:16px; }
    .giesta-catalog__layout { padding-right:16px; padding-left:16px; }
    .giesta-catalog__grid { gap:14px; }
    .giesta-catalog__card { padding:12px 8px 10px; }
    .giesta-catalog__preview { width:80%; aspect-ratio:200 / 509; margin:0 auto 12px; overflow:hidden; }
    .giesta-catalog__preview > img { object-fit:cover; }
    .giesta-catalog__name { font-weight:600; }
}
@media (hover:none) {
    .giesta-catalog__card:hover { background:#fff; box-shadow:none; }
    .giesta-catalog__card:hover .giesta-catalog__cta { opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
    .giesta-filter-layer, .giesta-filter-sheet { transition:none; }
}

/* Pointer taps should not get the browser's keyboard-focus outline. */
.giesta-catalog__filter-toggle:focus:not(:focus-visible),
.giesta-filter-sheet button:focus:not(:focus-visible) {
    outline:none;
    box-shadow:none;
}