/* ============================================================
   GLOBAL RESET
   ============================================================ */

/*
    Apply border-box sizing to every element.

    With border-box, width and height include:
        - content
        - padding
        - border

    This makes layout calculations more predictable.
*/
* {
    box-sizing: border-box;
}



/* ============================================================
   PAGE BASE
   ============================================================ */

body {
    margin: 0;

    font-family:
        Arial,
        sans-serif;

    background:
        #f4f4f4;

    color:
        #222;
}



/* ============================================================
   APPLICATION HEADER
   ============================================================ */

.app-header {
    padding:
        24px
        16px;

    text-align:
        center;

    background:
        white;

    border-bottom:
        1px solid #ddd;
}


.app-header h1 {
    margin:
        0
        0
        8px;
}


.app-header p {
    margin:
        0;

    color:
        #666;
}



/* ============================================================
   MAIN CONTAINER
   ============================================================ */

/*
    Keep the application centred and prevent it from becoming
    too wide on large screens.
*/
.container {
    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        20px;
}



/* ============================================================
   SEARCH
   ============================================================ */

.search-section {
    margin-bottom:
        20px;
}


#searchInput {
    width:
        100%;

    padding:
        14px
        16px;

    font-size:
        16px;

    border:
        1px solid #ccc;

    border-radius:
        8px;

    background:
        white;
}


/*
    Keyboard focus should be clearly visible.

    This is useful for accessibility and also helps users
    navigate without a mouse.
*/
#searchInput:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}



/* ============================================================
   ACTIVE FILTER CHIPS
   ============================================================ */

.active-filters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        14px;
}


/*
    The hidden attribute is controlled by search.js.

    This rule ensures hidden elements remain completely hidden
    even if another CSS rule sets display.
*/
.active-filters[hidden] {
    display:
        none;
}


.filter-chip {
    border:
        1px solid #bbb;

    border-radius:
        18px;

    background:
        white;

    padding:
        7px
        12px;

    cursor:
        pointer;

    font-size:
        14px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.filter-chip:hover {
    background:
        #eeeeee;
}


.filter-chip:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}



/* ============================================================
   CATALOG LAYOUT
   ============================================================ */

/*
    Desktop layout:

        left column  -> filters
        right column -> results
*/
.catalog-layout {
    display:
        grid;

    grid-template-columns:
        minmax(
            230px,
            280px
        )
        minmax(
            0,
            1fr
        );

    gap:
        24px;

    align-items:
        start;
}



/* ============================================================
   FILTER SIDEBAR
   ============================================================ */

.filters-sidebar {
    background:
        white;

    border:
        1px solid #ddd;

    border-radius:
        10px;

    padding:
        16px;

    /*
        Keep filters visible while the user scrolls through
        a long result list on desktop.
    */
    position:
        sticky;

    top:
        16px;

    /*
        Prevent the whole filter panel from becoming taller
        than the visible browser window.
    */
    max-height:
        calc(
            100vh - 32px
        );

    overflow-y:
        auto;
}


.filters-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;
}


.filters-header h2 {
    margin:
        0;

    font-size:
        22px;
}



/* ============================================================
   CLEAR FILTERS BUTTON
   ============================================================ */

.clear-filters-button {
    border:
        0;

    background:
        transparent;

    color:
        #555;

    cursor:
        pointer;

    font-size:
        14px;

    padding:
        6px;

    border-radius:
        6px;

    transition:
        background 0.15s ease;
}


.clear-filters-button:hover {
    text-decoration:
        underline;

    background:
        #f2f2f2;
}


.clear-filters-button:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}



/* ============================================================
   FILTER GROUPS
   ============================================================ */

/*
    Each group is a <details> element generated by search.js.

    Examples:
        Category
        Colour
        Size
        Box
*/
.filter-group {
    border-top:
        1px solid #e5e5e5;

    padding:
        12px 0;
}


.filter-group:first-child {
    border-top:
        0;
}


.filter-group summary {
    cursor:
        pointer;

    font-size:
        16px;

    font-weight:
        bold;

    user-select:
        none;

    padding:
        4px 0;
}


.filter-group summary:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}



/* ============================================================
   FILTER OPTION LIST
   ============================================================ */

/*
    Large groups such as Colour and Box can contain many values.

    The list therefore gets its own internal scroll area.
*/
.filter-options {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        10px;

    max-height:
        250px;

    overflow-y:
        auto;

    padding-right:
        6px;
}



/* ============================================================
   FILTER OPTION
   ============================================================ */

.filter-option {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    cursor:
        pointer;

    font-size:
        14px;

    line-height:
        1.25;
}


.filter-option-main {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;
}


.filter-option-main input {
    margin:
        0;

    flex-shrink:
        0;
}


.filter-option-main span {
    overflow-wrap:
        anywhere;
}


.filter-count {
    color:
        #777;

    font-size:
        13px;

    flex-shrink:
        0;
}


/*
    This visually reduces emphasis for unavailable options.

    In the current JavaScript implementation, zero-count
    unchecked options are usually not rendered at all, but
    this remains as a safe fallback.
*/
.filter-option:has(
    input:disabled
) {
    opacity:
        0.4;

    cursor:
        default;
}



/* ============================================================
   MOBILE FILTER BUTTON
   ============================================================ */

/*
    Hidden on desktop.

    The media query below makes it visible on smaller screens.
*/
.mobile-filters-button {
    display:
        none;

    width:
        100%;

    padding:
        12px
        16px;

    margin-bottom:
        14px;

    background:
        white;

    border:
        1px solid #bbb;

    border-radius:
        8px;

    font-size:
        16px;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        background 0.15s ease;
}


.mobile-filters-button:hover {
    background:
        #f1f1f1;
}


.mobile-filters-button:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        2px;
}



/* ============================================================
   RESULTS
   ============================================================ */

.results-section {
    min-width:
        0;
}


.result-count {
    margin-top:
        0;

    margin-bottom:
        14px;
}



/* ============================================================
   RESULT GRID
   ============================================================ */

.results-grid {
    display:
        grid;

    /*
        Automatically create as many columns as fit.

        Each card is at least 220px wide.
    */
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        20px;
}



/* ============================================================
   ITEM CARD
   ============================================================ */

.item-card {
    overflow:
        hidden;

    background:
        white;

    border:
        1px solid #ddd;

    border-radius:
        10px;

    box-shadow:
        0 2px 6px
        rgba(
            0,
            0,
            0,
            0.08
        );

    cursor:
        pointer;

    /*
        Smooth visual feedback when hovering or focusing.
    */
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}


.item-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


/*
    search.js gives each card tabindex="0".

    This style makes keyboard focus clearly visible.
*/
.item-card:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.20);

    outline-offset:
        3px;
}



/* ============================================================
   ITEM CARD IMAGE
   ============================================================ */

.item-image {
    display:
        block;

    width:
        100%;

    height:
        260px;

    object-fit:
        cover;

    background:
        #eee;
}



/* ============================================================
   ITEM CARD INFORMATION
   ============================================================ */

.item-info {
    padding:
        16px;
}


.item-info h2 {
    margin-top:
        0;

    margin-bottom:
        12px;
}


.item-info p {
    margin:
        7px 0;
}



/* ============================================================
   ITEM DETAIL PAGE
   ============================================================ */

.back-link {
    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        #333;

    text-decoration:
        none;

    font-weight:
        bold;

    border-radius:
        6px;
}


.back-link:hover {
    text-decoration:
        underline;
}


.back-link:focus-visible {
    outline:
        3px solid rgba(0, 0, 0, 0.18);

    outline-offset:
        3px;
}



/*
    Two-column detail view on larger screens:

        image | information
*/
.item-details {
    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            1fr
        )
        minmax(
            280px,
            1fr
        );

    gap:
        30px;

    background:
        white;

    padding:
        24px;

    border-radius:
        10px;

    border:
        1px solid #ddd;
}



/* ============================================================
   DETAIL IMAGE
   ============================================================ */

.detail-image-container {
    min-width:
        0;
}


.detail-image {
    display:
        block;

    width:
        100%;

    max-height:
        650px;

    object-fit:
        contain;

    background:
        #eee;

    border-radius:
        8px;
}



/* ============================================================
   DETAIL INFORMATION
   ============================================================ */

.detail-info {
    min-width:
        0;
}


.detail-info h2 {
    margin-top:
        0;

    margin-bottom:
        16px;

    font-size:
        32px;

    overflow-wrap:
        anywhere;
}


.detail-info p {
    margin:
        10px 0;

    font-size:
        18px;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}



/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (
    max-width: 800px
) {

    /*
        Sidebar and results become one vertical column.
    */
    .catalog-layout {
        grid-template-columns:
            1fr;
    }


    /*
        Show the mobile Filters button.
    */
    .mobile-filters-button {
        display:
            block;
    }


    /*
        Filter panel starts hidden on mobile.

        search.js adds the "open" class when the user presses
        the Filters button.
    */
    .filters-sidebar {
        display:
            none;

        position:
            static;

        max-height:
            none;

        margin-bottom:
            16px;
    }


    .filters-sidebar.open {
        display:
            block;
    }


    /*
        Slightly smaller internal list height is more practical
        on small screens.
    */
    .filter-options {
        max-height:
            220px;
    }
}



/* ============================================================
   DETAIL PAGE RESPONSIVE LAYOUT
   ============================================================ */

@media (
    max-width: 700px
) {

    /*
        Stack image and information vertically.
    */
    .item-details {
        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            18px;
    }


    .detail-info h2 {
        font-size:
            27px;
    }


    .detail-info p {
        font-size:
            16px;
    }
}



/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (
    max-width: 600px
) {

    .container {
        padding:
            12px;
    }


    /*
        One result card per row.
    */
    .results-grid {
        grid-template-columns:
            1fr;
    }


    /*
        Let portrait/landscape images preserve their natural
        proportions on small screens.
    */
    .item-image {
        height:
            auto;

        max-height:
            420px;

        object-fit:
            contain;
    }
}



/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (
    max-width: 500px
) {

    .app-header {
        padding:
            18px
            12px;
    }


    .app-header h1 {
        font-size:
            25px;
    }


    .filters-sidebar {
        padding:
            14px;
    }


    .item-details {
        padding:
            14px;
    }
}