/* struktura */

/* mobile devices */
@media screen and (max-width: 1050px) {
    :root {
        --site-width: 100%; /* max width, used throught the project. */
        --banner-button-offset: 10px; /* banner switch button offset from left and right */
        --banner-duration: 5s;
        --site-width-switch-threshold: 1050px; /* to se rabi za ugotavljanje, kateri @media režim je aktiven */
    }
}

@media screen and (min-width: 1051px) {
    :root {
        --site-width: 90%; /* max width, used throught the project. */
        --banner-button-offset: 10px; /* banner switch button offset from left and right */
        --banner-duration: 5s;
        --site-width-switch-threshold: 1050px; /* to se rabi za ugotavljanje, kateri @media režim je aktiven */
    }
}

/* common structure for both layouts */

.site-header-wrapper {
    z-index: 3;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 0;

    & .site-header {
        width: min(calc(100% - 24px), var(--site-width));
        max-width: 2500px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;

        & form {
            flex-grow: 1;
            display: flex;

            & .search {
                flex-grow: 1;
            }
        }
    }
}

.first-page-master-banner img,
.first-page-left-and-right-banner img {
    object-fit: fill;
    max-width: 100%;
    max-height: 100%;
    width: 100vw;
    height: auto;
}

@keyframes myanimation {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.container-animation {
    animation: myanimation;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

.banner-hidden {
    display: none;
}

.banner-visible {
    display: block;
}

.banner-switch {
    position: absolute;
    width: clamp(20px, 2vw, 30px);
    height: clamp(20px, 2vw, 30px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/cat-arrow_grey.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.2;

    & .inner-button {
        opacity: 0;
    }
}

.carousel-switch {
    position: absolute;
    width: clamp(10px, 1.5vw, 20px);
    height: clamp(10px, 1.5vw, 20px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/cat-arrow-non-transparent.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;

    & .inner-button {
        opacity: 0;
    }
}

.carousel-switch-gallery {
    position: absolute;
    width: 3vw;
    height: 3vw;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/cat-arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;

    & .inner-button {
        opacity: 0;
    }
}

.banner-switch:nth-child(even) {
    transform: scaleX(-1);
}

.banner-switch:hover {
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}


.carousel-switch-gallery:nth-child(even) {
    transform: scaleX(-1);
}

.carousel-switch-gallery:hover {
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.carousel-switch:nth-child(even) {
    transform: scaleX(-1);
}

.carousel-switch:hover {
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.first-page-left-and-right-banner {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.site-body-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;

    & .site-body {
        width: var(--site-width);
        display: flex;
        max-width: 2500px;

        & .site-body-left {
            margin: 0 1vw 1vw 0;
            align-self: flex-start;
            flex: 0 0 calc(25% - 1vw);
            width: calc(25% - 1vw);
            max-width: calc(25% - 1vw);
            box-sizing: border-box;
            margin-top: 10px;
        }

        & .site-body-right {
            flex: 0 0 75%;
            width: 75%;
            max-width: 75%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        /* When a product page is open, let the content span the full width */
        &:has(.site-body-right .product-wrapper) .site-body-left {
            display: none;
        }

        & .site-body-right:has(.product-wrapper) {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
        }
    }
}

.categories {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

        & a {
            color: black;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        & a:hover {
            color: #FF8D00;
        }

        & .separator {
            flex: 1;
        }

        & .arrow {
            object-fit: contain;
            cursor: pointer;
        }
    }

.bottom {
    text-align: center;
}

.paging {
    width: 100%;
    text-align: center;
}

.site-footer-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 20px 0 0;
    padding: 16px clamp(12px, 2vw, 24px);
    gap: clamp(12px, 1.8vw, 28px);
    flex-wrap: wrap;
}

.site-footer-wrapper.column {
    flex-direction: column;
}

.site-footer-wrapper.row {
    flex-direction: row;
}

.site-footer-wrapper .footer-item {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 280px;
}

.cart-counter {
    display: none;
    position: absolute;

    &.visible {
        display: flex;
    }
}

.cart-dropdown {
    position: fixed;
    width: min(100%, 700px);
    overflow-y: auto;
    z-index: 300;
    text-align: left;
    max-height: 80vh;

    & .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    & .header .left {
        flex: 1 1 auto;
    }

    & .header .right {
        display: flex;
        align-items: center;
        margin-left: auto;
        cursor: pointer;

        &:hover {
            transform: translateY(-1px);
        }
    }

    & .header .right img {
        width: 14px;
        height: 14px;
        object-fit: contain;
    }

    & .header .clear {
        display: none;
    }

    & .item-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;

        & .separator {
            flex-grow: 0;
            width: auto;
        }
    }

    & > div:last-child {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding-top: 8px;
    }
}

.login-wrapper {
    display: flex;
    flex-direction: row;

    & .login-form {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;

        & .login-form-bottom {
            width: 100%;
        }

        & td.button-row{
            align-items: center;
            flex-direction: column;
            display: flex;
        }

        & .registration {
            align-items: start;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
    }

    & .separator {
        flex-grow: 1;
    }
}

/* Password reset wrapper used for all password reset steps. */
.password-reset-wrapper {
    display: block;

    & .password-reset-form {
        display: block;
    }
    & input[name="TargetEmail"] {
        display: block;
        margin: 0 auto;
        width: 94%;
    }

    & form#text{
        margin: 0 auto;
    }

    & .separator {
        flex-grow: 1;
    }
}

/* Password change wrapper used for all password change steps. */
.password-change-wrapper {
    display: flex;
    flex-direction: row;

    & .password-change-form {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }

    & .separator {
        flex-grow: 1;
    }
}

/* CART struktura */
.cart-view {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: #1f1f1f;
    font-weight: 400;
}

.cart-view .left-panel {
    display: block;
}

.cart-view .summary-prices,
.cart-view .price-breakdown,
.cart-view #pricePipelineContainer,
.cart-view #deliveryContainer,
.cart-view .cart-item-container,
.cart-view .price-summary {
    font-size: 0.95rem;
    line-height: 1.5;
}

.cart-view .price-summary .summary-title {
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 700;
    color: #1f1f1f;
}

.cart-view .price-summary .price-breakdown-button {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2b2b2b;
}

.cart-view #pricePipelineContainer > div > .pipeline-title,
.cart-view #deliveryContainer .delivery-title {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1f1f1f;
}

.cart-view #pricePipelineContainer > div > .pipeline-disclaimer,
.cart-view #deliveryContainer .delivery-description {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #5a5a5a;
}

.cart-view .price-row,
.cart-view .summary-prices .container-item,
.cart-view .price-breakdown .container-item {
    font-size: 0.95rem;
    line-height: 1.5;
}

.cart-view #priceSummaryContainer .container-value > div,
.cart-view .summary-prices .container-value > div,
.cart-view .price-breakdown.visible .container-value > div,
.cart-view .price-breakdown .container-value > div {
    font-weight: 700;
}

.cart-view .left-panel {
    display: block;
}

.cart-view .delivery-container {
    display: block;
}

.cart-view .price-pipeline-container {
    display: block;
    width: 100%;
}

.cart-view .right-panel {
    display: block;
    width: 100%;
    margin-bottom: 3%;

    & input.button {
        margin: 10px 0;
    }
}

.cart-view .price-summary {
    display: flex;
    flex-direction: column;
    align-items: start;
}

    .cart-view .price-summary .summary-title {
        display: flex;
        flex-direction: row;
    }

    .cart-view .price-summary .price-breakdown-button {
        text-align: right;
        float: left;
        margin: 15px 0;
    }

    .cart-view .price-summary .price-breakdown {
        display: none;
    }

    .cart-view .price-summary .price-breakdown.visible {
        display: block;
    }

.cart-view .cart-item-container .image-container {
    display: flex;
    align-items: center;

    & span.value{
        margin-left: 0.2vw;
        font-weight: bold;
    }
}
.cart-view .cart-item-container .available-quantity-container,
.cart-view .cart-item-container .selected-quantity-container {
    margin-left: 3vh;
}

.cart-view .cart-item-container .price-row {
    max-width: 400px;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cart-view .cart-item-container .separator {
    flex-grow: 1;
}

.cart-view .container-item {
    display: flex;
    flex-direction: row;
}

.cart-view .summary-prices,
.cart-view .price-breakdown {
    display: block;
    width: 100%;
    max-width: 400px;
}

.price-breakdown.visible .container-item{
    display: inline-flex;
    width: 100%;
    max-width: 400px;
}

.cart-view .summary-prices .separator,
.cart-view .price-breakdown .separator {
    flex-grow: 1;
}
.cart-view .cart-item-container .price-container {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}

.cart-view .delivery-panel {
    width: 100%;

    & .my-address-container {
        display: flex;

        & .my-address {
            padding: 10px;
        }
    }
}

.cart-view #pricePipelineContainer > div {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
}

.cart-view #pricePipelineContainer > div > label {
    display: flex;
    min-width: 0;
    align-items: center;
}

.cart-view #pricePipelineContainer > div > input[type="radio"] {
    order: 1;
}

.cart-view #pricePipelineContainer > div > .pipeline-title {
    order: 1;
}

.cart-view #pricePipelineContainer > div > .pipeline-no-tax,
.cart-view #pricePipelineContainer > div > .pipeline-with-tax {
    display: none;
}

.cart-view #pricePipelineContainer > div > .pipeline-disclaimer {
    display: none;
    order: 3;
    flex-basis: 100%;
}

.cart-view #pricePipelineContainer > div > #pRadioElement0:checked ~ .pipeline-disclaimer,
.cart-view #pricePipelineContainer > div > #pRadioElement1:checked ~ .pipeline-disclaimer,
.cart-view #pricePipelineContainer > div > #pRadioElement2:checked ~ .pipeline-disclaimer,
.cart-view #pricePipelineContainer > div > #pRadioElement3:checked ~ .pipeline-disclaimer,
.cart-view #pricePipelineContainer > div > #pRadioElement4:checked ~ .pipeline-disclaimer,
.cart-view #pricePipelineContainer > div > #pRadioElement5:checked ~ .pipeline-disclaimer {
    display: flex;
    margin-left: 28px;
    
}
.cart-view #deliveryContainer > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
    margin: 10px 0;
}

.cart-view #deliveryContainer > div > label {
    display: inline-block;
    white-space: nowrap;
    overflow-wrap: normal;
    margin: 0;
}

.cart-view #deliveryContainer .delivery-title,
.cart-view #deliveryContainer .delivery-description {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
}

.cart-view #deliveryContainer .delivery-description {
    display: none;
    flex-basis: 100%;
    margin-left: 28px;
}

.cart-view #deliveryContainer > div > #dRadioElement0:checked ~ .delivery-description,
.cart-view #deliveryContainer > div > #dRadioElement1:checked ~ .delivery-description {
    display: inline-block;
}

.commit-panel {
    display: block;
    text-align: right;
}

    .commit-panel #commit-container {
        display: none;
    }

.delivery-panel .wrapper .key {
    font-weight: bold;
}

.delivery-panel .button.hidden {
    display: none;
}


/* kontekstni meni */
.context-menu-wrapper {
    width: 300px;
    min-height: 300px;
    position: fixed;
    z-index: 1000;

    & .header .left {
        float: left;
    }

    & .header .right {
        float: right;
        padding-top:12px;
		cursor: pointer;
    }

    & .header .clear {
        clear: both;
    }

    & .separator {
        border: 1px solid black;
    }
}

/* registration-shared */
.street-and-index {
    display: flex;
    align-items: center;

    & .street {
        flex-grow: 1;
    }

    & .street-index {
        width: 50px;
    }
}

.post-code-and-name {
    display: flex;
    align-items: center;

    & .postcode {
        width: 60px;
    }

    & .postname {
        flex-grow: 1;
    }
}

.country-picker {
    width: 100px;
}

/* registration */
.registration-wrapper {
    display: flex;
    flex-direction: row;

    & .separator {
        flex-grow: 1;
    }

    & span.label {
        margin-top: 10px;
    }

    & .error {
        color: red;
    }

    & .registration-section {
        display: flex;
        flex-direction: column;


        & .column {
            display: flex;
            flex-direction: column;

            &.vat-bound {
                flex-direction: row;
                justify-content: start;
            }
        }

        &.hidden {
            display: none;
        }
    }
}

/* shared between registration and cart. */
.my-address .street-index,
.my-address .region-code {
    width: 50px;
}

.my-address .rows {
    display: flex;
    flex-direction: column;

    & .row {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        & .item {
            display: flex;
            flex-direction: column;
            width: 100%;

            & > div:last-child:has(input + input) {
                display: flex;
                flex-direction: row;
                gap: 4px;
                align-items: center;
            }
        }
}

/*.my-address .input {
    width: 100%;
}*/

.my-address .hidden {
    display: none;
}

.my-address .button-edit,
.my-address .button-delete,
.my-address .button-save,
.my-address .button-cancel {
    margin: 0.3vw 0 0 0;
}

/* my account */

.my-account-wrapper {
    display: flex;
    flex-direction: column;

    & .separator {
        flex-grow: 1;
    }

    & .my-account {
        display: flex;
        flex-direction: column;

        & .my-data {
            display: flex;
            flex-direction: column;

            & .my-data-header-and-org {
                display: block;

                & .my-data-header {
                    padding: 10px;

                    & td,
                    & th {
                        padding: 1px 12px;
                    }
                }

                & .my-data-org {
                    padding: 10px;

                    & td,
                    & th {
                        padding: 1px 12px;
                    }
                }
            }

            & .my-data-info {
                padding: 0 10px 20px 10px;
                font-weight: bold;
            }
        }

        & .my-addresses {
            display: flex;
            flex-direction: column;

                & .my-address,
                & .my-address-placeholder {
                    padding: 10px;
                    flex: 1 1 calc(49% - 10px);
                    min-width: 260px;
                    box-sizing: border-box;
                }
            }
        }
    }


/* mobile devices */
@media screen and (max-width: 1050px) {
    #category-menu {
        display: block;
    }

    /* Cart delivery address should take the full width in responsive mode */
    .cart-view .delivery-panel .my-address-container {
        flex-direction: column;
    }

    .cart-view .delivery-panel .my-address-container .my-address {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Cart product photos scale fluidly with the viewport in responsive mode */
    .cart-view .cart-item-container .image-container img {
        width: clamp(56px, 10vw, 60px);
        height: auto;
        object-fit: contain;
    }

    .site-footer-wrapper.row {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .site-footer-wrapper .footer-item {
        flex: 0 1 clamp(180px, 30%, 320px);
        min-width: 180px;
        max-width: 320px;
    }

    .site-header-wrapper {
        max-height: 120px !important;
        height: clamp(90px, 18vw, 120px) !important;
        min-height: 0 !important;

        & .site-header {
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            align-content: flex-start;
            row-gap: 5px;

            & #category-menu {
                order: 0;
                flex: 0 0 auto;
                width: clamp(40px, 6vw, 64px);
                height: auto;
            }

            & .logo {
                order: 2;
                flex: 0 0 auto;
                width: auto;
                margin-top: 6px;
                
            }

            & form {
                order: 3;
                flex: 1 0 100%;
                width: 100%;
                min-width: 0;

                & .search {
                    width: 100%;
                    min-width: 0;
                }
            }
        }

        & .top-ctx {
            display: none;
        }
    }

    .site-body-wrapper {
        margin-top: clamp(90px, 18vw, 120px);
    }

    .site-body-left {
        display: none;
    }

    .bottom-banners {
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        

        & img {
            width: clamp(100px, 40vw, 200px);
            height: auto;
        }
    
    }

    .categories-popup {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 5;
    
        &.visible {
            display: block;
        }

        & .categories {
            width: 95%;     
            border: 1px solid #7e7e7e15;
            border-radius: 8px;
            overflow: hidden;
            padding: 0;

            & .category {
                -webkit-tap-highlight-color: white;
                padding-block: 12px;

                & img {
                    width: clamp(22px, 4.5vw, 30px);
                    height: clamp(22px, 4.5vw, 30px);
                }

                & .arrow {
                    width: clamp(16px, 2.4vw, 22px);
                    height: clamp(16px, 2.4vw, 22px);
                }
            }

            & .category:hover {
                background-color: white;
                border-left-color: white;
            }

            & .category:hover .category-name {
                color: black;
            }
        }
    }
    .top-ctx {
        display: none;
    }

    .bottom-ctx {
        display: flex;
        left: 0;
        right: 0;
        bottom: 0;
        position: fixed;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding-block: 8px;
        padding-inline: 12px;
        flex-wrap: wrap;
        overflow-x: clip;
        justify-content: center;
        z-index: 4;
        text-align: center;
        min-width: 0;

        & > * {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        & .separator {
            flex-grow: 1;
        }
    }

    .my-account-wrapper {
        width: auto;
        max-width: 100%;
        padding: 10px;
        margin: 0;
        box-sizing: border-box;

        & .separator {
            display: none;
        }

        & .my-account {
            width: 100%;
        }

        & .my-account .my-data,
        & .my-account .my-addresses,
        & .my-account .my-addresses .my-address,
        & .my-account .my-addresses .my-address-placeholder {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        & .my-account .my-addresses input#new-address {
            display: block;
            margin: 0 auto;
        }
    }

    .my-address .button-edit,
    .my-address .button-delete,
    .my-address .button-save,
    .my-address .button-cancel,
    .my-address-placeholder .new-address,
    .clear .button.new {
        font-size: clamp(12px, 3vw, 14px);
        padding: 0.5em;
        margin: 0.5vw 0 0 0;
    }

    .clear .button.new {
        margin: 0 auto;
        display: block;
    }

    .category-view-wrapper {
        width: 100%;

        & .category-view-top {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;

            & .total-hits,
            & .sort {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            & .total-hits label,
            & .total-hits span,
            & .sort label,
            & .sort select {
                font-size: clamp(12px, 1vw, 16px);
                line-height: 1.3;
            }

            & .sort select {
                width: 100%;
                max-width: none;
            }
        }

        & .category-view-middle {
            width: 100%;

            & .products {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
                margin-top: 16px;
            }

            & .product-view-tile .product-primary-title {
                font-size: 1.5em;
            }

            & .product-view-tile .product-secondary-title,
            & .product-view-tile .product-supply-timestamp,
            & .product-view-tile .product-quantity {
                font-size: 1.4em;
            }

            & .product-view-tile .product-price {
                font-size: 1.8em;
            }
            
        } 
    } 
}

@media screen and (max-width: 1050px) {

     /* my orders */
    .order-wrapper {
        & h1 {
            margin: 0 0 10px 0;
            color: #FF8D00;
        }

        & form#order-form {
            display: flex;
            flex-direction: column;
            gap: 10px;

            & input[name="ordersearch"],
            & select[name="o1status"] {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
        }
    }

    .order-wrapper {
        & .orders-wide {
            display: none;
        }
    }

    .order-wrapper {
        & .orders-narrow {
            & .my-order {
                position: relative;

                & .my-order-items {
                    & .my-order-item {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        box-sizing: border-box;

                        & .my-order-details {
                            display: flex;
                            flex-direction: row;
                            padding: clamp(4px, 1.5vw, 8px) clamp(3px, 1vw, 5px);
                            width: 100%;
                            box-sizing: border-box;

                            & .rows {
                                width: 100%;
                                min-width: 0;
                                & .row {
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;

                                    & .separator {
                                        flex-grow: 1;
                                    }
                                }
                            }
                            

                            & .popup {
                                display: none;

                                &.shown {
                                    box-sizing: border-box;
                                    position: absolute;
                                    display: block;
                                    left: 0;
                                    right: 0;
                                    width: auto;
                                    background-color: white;
                                    border: 1px solid #FF8D00;
                                    border-radius: 8px;
                                    text-align: left;
                                    padding: 5px;
                                    margin: 0 5px;

                                    & pre {
                                        margin: 0;
                                        white-space: pre-wrap;
                                        overflow-wrap: break-word;
                                        word-break: break-word;
                                    }
                                }
                            }
                        }
                    }
                }

                & .price-row {
                    display: flex;
                    flex-direction: row;
                }
            }
        }
    }

    .login-wrapper {
        flex-direction: column;
        align-items: stretch;

        & .separator {
            display: none;
        }
    }

    .password-change-wrapper {
        flex-direction: column;
        align-items: stretch;

        & .separator {
            display: none;
        }
 }
}

/* computer screens */
@media screen and (min-width: 1051px) {
    #category-menu {
        display: none;
    }

    .site-header-wrapper {
        & .top-ctx {
            display: flex;
        }
    }

    .site-body-left {
        display: block;

        & a.current {
            font-weight: bold;
        }

        & .categories {
            display: block;
        }

        & .left-banners {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            padding-bottom: 20px;

            & img {
                width: 100%;
                height: auto;
            }
        }
    }

    #category-dropdown {
        display: none;
    }

    .bottom-banners {
        display: none;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .categories-popup {
        display: none;
    }

    .current-category-popup-wrapper {
        display: none;
        position: absolute;
        /* Allow the popup to expand more vertically while still capping
           it relative to the viewport to avoid overlapping the header. */
        max-height: 80vh;
        flex-direction: column;
        flex-wrap: wrap;
        overflow-y: auto;
        z-index: 2;

        &.visible {
            display: flex;
            column-gap: 8px;
            /* Ensure visible state also respects the taller cap. */
            max-height: 80vh;
        }

        & .group {
            display: flex;
            flex-direction: column;
            padding-bottom: 10px;
            padding-left: 15px;
            align-items: start;
            text-align: left;
            line-height: 1.25;

            & a {
                color: black;
                text-decoration: none;
                transition: color 0.3s ease;
                margin-bottom: 2px;
            }

            & a:hover {
                color: #FF8D00;
                text-decoration: underline;
            }

            & .header {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                width: 100%;

                & a {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 10px;
                    width: 100%;
                }

                & img,
                & .icon {
                    width: clamp(22px, 3vw, 32px);
                    height: clamp(22px, 3vw, 32px);
                    object-fit: cover;
                    flex-shrink: 0;
                    display: block;
                }

                & h3,
                & .h3 {
                    margin-bottom: 5px;
                    padding: 0;
                    line-height: 1.2;
                    flex: 1;
                    width: auto;
                }
            }

            & .items {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                text-align: left;
                padding-left: clamp(38px, 5vw, 51px);
            }
        }
    }

    .top-ctx {
        display: block;
    }

    .bottom-ctx {
        display: none;
    }

    /* my orders */
    .order-wrapper {
        & .orders-narrow {
            display: none;
            
        }

        & h1 {
            margin: 0 0 10px 0;
            color: #f9a64a;
            font-size: clamp(16px, 6vw, 24px);
        }
    }

    .order-wrapper {
        & .orders-wide .my-order {
            & .my-order-body {
                & .image {
                    max-width: 100px;
                }

                & .left {
                    text-align: left;
                }

                & .right {
                    text-align: right;
                }

                & th {
                    width: 1px;
                }

                & td {
                    width: 1px;
                    text-align: center;

                    &.product-title {
                        width: 300px;
                        max-width: 240px;
                        text-align: center;

                        & span {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }
                    }
                }
            }

            & .popup {
                display: none;

                &.shown {
                    position: absolute;
                    display: block;
                    max-width: 25vw;
                    white-space: normal;
                    overflow-wrap: break-word;
                    word-break: break-word;
                }
            }
        }

        & .paging {
            width: 100%;
            text-align: center;
        }
    }
}

/* Product page — shared layout */
.product-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* "Simple" product view: images left, info right */
.product-wrapper {
    & .product-head-compatible {
        display: flex;
        flex-direction: row;
        gap: 24px;
        container-type: inline-size;
        align-items: flex-start;
        margin-top: 5px;

        & .product-images {
            flex: 0 0 42%;
            max-width: 42%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            /*& img {
                width: 100%;
                height: auto;
                display: block;
            }*/

            & input.button {
                width: 100%;
            }
        }

        & form {
            flex: 1;
            min-width: 0;
        }

        & .product-compatible-view {
            display: flex;
            flex-direction: column;
            gap: 10px;

            & .product-identifications {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 1vw;

                & .product-identification {
                    display: flex;
                    flex-direction: row;
                    align-items: baseline;
                }
            }

            & .product-availability {
                display: flex;
                flex-direction: column;
                gap: 10px;

                & .availability {
                    display: flex;
                    flex-direction: column;


                    & .line {
                        display: flex;
                        flex-direction: row;
                        gap: 8px;
                        align-items: baseline;
                    }
                }

                & .cart-add-button form {
                    display: flex;
                    flex-direction: row;
                    gap: 10px;
                    align-items: center;
                }
            }

            & .line {
                display: flex;
                flex-direction: row;
                gap: 8px;
                align-items: baseline;
            }

            & .product-advanced-view {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 12px;

                & input {
                    font-size: clamp(8px, 8px + 0.5vw, 14px);
                    padding: 0.5em 1.0em;
                }
            }

            & .product-bestdelivery-time {
                & .best-delivery-time {
                    display: flex;
                    justify-content: space-between;
                    flex-direction: row;
                    gap: 12px;
                    align-items: baseline;

                    & .actual-supply-time {
                        display: flex;
                        flex-direction: row;
                        gap: 4px;
                    }
                }
            }
        }
    }
}

/* "Advanced" product view: images placed left via CSS order (images are last in DOM) */
.product-wrapper {
    & .product-head-advanced {
        display: flex;
        flex-direction: row;
        gap: 24px;
        align-items: flex-start;
        container-type: inline-size;

        /* Push images to the left even though they are last in the DOM */
        & .product-images {
            /* Very aggressive fluid width: tiny image column on narrow desktop
               widths, growing large on wide screens. The steep slope with a
               negative offset drops it to the ~70px minimum quickly, leaving
               the remaining space for the product text (which has flex: 1). */
            flex: 0 0 clamp(10px, 40vw - 400px, 380px);
            max-width: clamp(10px, 40vw - 400px, 380px);
            display: flex;
            flex-direction: column;
            gap: 10px;
            order: -1;

            & img.main {
                width: 100%;
                height: auto;
                display: block;
            }

            & input.button {
                width: 100%;
            }
        }

        & #price-view-target {
            flex: 1;
            min-width: 0;
        }

        & .product-advanced-view {
            display: flex;
            flex-direction: column;
            gap: 14px;
            container-type: inline-size;

            & .product-identifications {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 12px;

                & .product-identification {
                    display: flex;
                    flex-direction: row;
                    gap: 4px;
                    align-items: baseline;
                }
            }

            & .price-grid {
                display: grid;
                grid-template-columns: repeat(7, minmax(0, auto));
                gap: 2px 12px;
                width: 100%;
                overflow-x: hidden;
            }

            & .product-simple-view {
                display: flex;
                justify-content: flex-end;

                & input {
                    font-size: clamp(8px, 8px + 0.5vw, 14px);
                    padding: 0.5em 1.0em;
                }
            }
        }
    }
}

.product-gallery {
    z-index: 10;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    width: 100vw;

    & .top-container {
        height: 50px;
        display: flex;
        justify-content: right;
        align-items: center;

        & .close-image {
            width: 1vw;
            height: 1vw;
            margin-right: 10px;
            cursor: pointer;
            opacity: 1;
        }

        & .close-image:hover {
            opacity: 0.6;
        }
    }

    & .image-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        & .main-image {
            height: 35vw;

            object-fit: scale-down;
            user-select: none;
            -webkit-user-drag: none;
            touch-action: pan-y;
        }
    }

    & .carousel-container {
        height: 6vw;
        justify-content: center;
        display: flex;
        gap: 4px;

        & img {
            width: 5vw;
            height: 5vw;
            flex: 0 0 5vw;
            box-sizing: border-box;
            object-fit: contain;
            padding: 2px;
            background: #fff;
            user-select: none;
            cursor: pointer;
            -webkit-user-drag: none;
            touch-action: pan-y;
            border-radius: 8px;
            border: 1px solid #f0f0f0;
        }
    }
}

/* Responsive product page */
@media screen and (max-width: 1050px) {

    .product-gallery {
        z-index: 10;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        width: 100vw;

        & .top-container {
            height: 50px;
            display: flex;
            justify-content: right;
            align-items: center;

            & .close-image {
                width: 5vw;
                height: 5vw;
                margin-right: 10px;
                cursor: pointer;
                opacity: 1;
            }
        }

        & .image-container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            & .main-image {
                width: 90vw;
                height: 100vw;

                object-fit: scale-down;
                user-select: none;
                -webkit-user-drag: none;
                touch-action: pan-y;
            }
        }

        & .carousel-container {
            height: 25vw;
            display: flex;
            justify-content: center;
            gap: 4px;

            & img {
                width: 20vw;
                height: 20vw;
                flex: 0 0 20vw;
                box-sizing: border-box;
                object-fit: contain;
                padding: 2px;
                background: #fff;
                user-select: none;
                cursor: pointer;
                -webkit-user-drag: none;
                touch-action: pan-y;
                border-radius: 8px;
                border: 1px solid #f0f0f0;
            }
        }
    }

    .product-wrapper .product-head-compatible,
    .product-wrapper .product-head-advanced {
        flex-direction: column;

        & .product-compatible-view {
            gap: 5px;
            
            & .product-primary-title{
            font-size: 1.3em;
            }

            & .product-secondary-title{
            font-size: 1.2em;
            margin: 2px 0;
            }

            & .product-identifications{
                font-size: 1em;
            }

            & .product-price{
                font-size: 2em;
            }

            & .product-installment, .product-delivery-date {
                font-size: 1rem;
            }

            & .product-availability {
                margin: 2vw 0;
            
                & .availability .line{
                    font-weight: bold;
                }
            }
            
            .product-advanced-view {
            display: none;
            }
        }
    }
    
    

    a.button{
        display: none !important;
    }

    .product-wrapper .product-head-compatible .product-images,
    .product-wrapper .product-head-advanced .product-images {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        order: 0;
    }

    .product-wrapper .product-head-compatible form,
    .product-wrapper .product-head-advanced #price-view-target {
        width: 100%;
    }
}

/* Category browsing */
.category-view-wrapper .category-view-middle .products,
.first-page-product-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 150px) / 4)), 1fr));
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.category-view-wrapper .category-view-middle .products .product-view-tile,
.first-page-product-container .product-view-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: clamp(10px, 9px + 0.3vw, 18px);
    align-items: stretch;
    box-sizing: border-box;
    text-align: center;

    & form {
        box-sizing: border-box;
        flex-wrap: wrap;
        max-width: 100%;
    }

    & .add-to-cart {
        flex: 1 1 auto;
        min-width: 0;
        width: clamp(50px, 22%, 64px);
        font-size: clamp(7px, 7px + 0.3vw, 14px);
        box-sizing: border-box;
        text-align: center;
        height: auto;
        white-space: nowrap;
        line-height: 1.15;
    }

    & .num-cart-items {
        flex: 0 0 auto;
        width: clamp(50px, 22%, 64px);
        font-size: clamp(7px, 7px + 0.3vw, 14px);
        height: auto;
        padding: 0.25vw;
        min-width: 0;
        box-sizing: border-box;
    }

     & .product-secondary-title a {
            color: #555;
            font-size: 0.95em;
           display: -webkit-box;
           overflow: hidden;
           text-overflow: ellipsis;
           -webkit-line-clamp: 2;
           line-clamp: 2;
           -webkit-box-orient: vertical;
        }


    & > * {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    & a {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    & .product-primary-title,
    & .product-secondary-title,
    & .product-price,
    & .product-quantity,
    & .product-supply-timestamp {
        align-items: stretch;
    }

    & .product-primary-title,
    & .product-secondary-title {
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    & .product-quantity {
        align-items: center;
    }

    & img {
        display: block;
        width: 100%;
        height: clamp(90px, 10vw, 110px);
        object-fit: scale-down;
    }

    & .product-price {
        font-weight: bold;
        margin-top: auto;
    }

    & .product-supply-timestamp {
        flex-grow: 0;
        margin-top: 0;
    }
}

.category-view-wrapper {
    & .category-view-top {
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        margin: 0;

        & .total-hits{
        display: flex;
        flex-direction: row;
        align-items: center;
        }
    }

    & .category-view-middle {
        display: flex;
        flex-direction: column;
        align-items: center;

        & .products {
            margin-top: 40px;
        }
    }
}

.first-page-product-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: clamp(4px, 0.5vw, 5px) clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px);
    box-sizing: border-box;
    margin-top: 20px;
    font-size: clamp(13px, 8px + 0.5vw, 16px);
}

@media screen and (max-width: 1050px) {
    .category-view-wrapper .category-view-top {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .category-view-wrapper .category-view-middle .products {
        gap: 12px;
        margin: 16px auto 0;
    }

    .category-view-wrapper .category-view-middle .products,
    .first-page-product-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 16px auto 0;
    }

    .category-view-wrapper .category-view-middle .products .product-view-tile .add-to-cart,
    .first-page-product-container .product-view-tile .add-to-cart {
        font-size: clamp(14px, 3vw, 18px);
    }
    .site-body-wrapper .site-body {
        width: 100%;
        justify-content: center;
        align-items: stretch;
    }

    .site-body-wrapper .site-body .site-body-left {
        display: none !important;
    }

    .site-body-wrapper .site-body .site-body-right {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: clamp(15px, 2.6vw, 19px) !important;
        margin: 0 auto;
    }

    .cart-dropdown,
    .context-menu-wrapper {
        left: 50% !important;
        top: auto !important;
        bottom: 50px;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        box-sizing: border-box;
        z-index: 100;
    }

    .context-menu-wrapper {
        min-height: unset;
    }
}

/* Very small phones: give product tiles the full width so text and images stay legible */
@media screen and (max-width: 370px) {
    .category-view-wrapper .category-view-middle .products {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .first-page-product-container {
        grid-template-columns: 1fr;
        width: 100%;
    }
}