/*********************************** 1024px ***************************************/

@media (min-width: 0px) and (max-width: 1024px) {

    /********************** PRODUCT DETAIL ********************/
    /* less margin */
    .product-images-container {
        margin-bottom: 48px;
    }

    .product-main-info {
        margin-bottom: 48px;
    }

    .product-specifications-container>div {
        margin-bottom: 48px;
    }
    #product-sticky-nav {
        margin-left: -32px;
        margin-right: -32px;
    }
    #product-detail-full-description>div {
        margin-bottom: 48px;
    }

    .product-articlenumber-container,
    .instance-selection {
        margin-bottom: 24px;
    }


}


@media screen and (max-width: 800px) {
    .cart-variant-qty {
        display: none !important;
    }

    .show-sm {
        display: inline-block !important;
    }

    .hidden-sm {
        display: none !important;
    }
}


/************************************ 768px ***************************************/

@media (min-width: 0px) and (max-width: 768px) {

    /********************** PRODUCT DETAIL ********************/
    h1 {
        font-size: 21px;
    }

    /* all sections 100% width, less margin */
    .product-images-container {
        width: 100%;
        margin-bottom: 32px;
    }

    .product-main-info {
        margin-bottom: 32px;
    }

    .product-specifications-container>div {
        min-width: 100%;
        margin-bottom: 32px;
    }
    #product-detail-full-description>div {
        min-width: 100%;
        margin-bottom: 32px;
    }



    /* make small images horizontally scrollable */
    .product-images-gallery {
        flex-wrap: nowrap;
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .product-images-gallery::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* less margin, smaller font */
    .product-articlenumber-container,
    .instance-selection {
        margin-bottom: 16px;
    }

    .product-price {
        font-size: 20px;
    }

    .product-price-currency,
    .product-price-amount {
        font-size: 36px;
    }



    /********************** VARIANTS TABLE ********************/

    .table.sortable,
    .table.sortable thead,
    .table.sortable tbody,
    .table.sortable th,
    .table.sortable td,
    .table.sortable tr {
        display: block;
    }

    /* Hide first table header row (but not display: none;, for accessibility) */
    .table.sortable thead tr:first-child {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* filter row */
    .table.sortable thead tr {
        border-bottom: 2px solid #0092D2;
        padding: 8px;
    }

    .table.sortable th {
        padding: 0;
    }

    .table.sortable th .table-filter {
        padding: 8px;
    }

    .show-mobile {
        display: block;
    }


    /* table content */
    .table.sortable tbody tr {
        padding: 0 16px 8px 16px;
        overflow: hidden;
        max-height: 58px;
        transition: max-height 0.35s ease;
        /* remove whitespace */
        font-size: 0;
    }

    .table.sortable tbody tr.open {
        max-height: 999px;
    }

    .table.sortable td {
        /* reset font size */
        font-size: 14px;
        padding: 8px 0;
    }

    /* 'td' behaves like a 'row' */
    .table.sortable td:not(.link-current-button):not(.cart-button):not(.product-variant-values) {
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: right;
    }

    /* make labels for the new 'rows' */
    .table.sortable td:not(.link-current-button):not(.cart-button):not(.product-variant-values):before {
        content: attr(data-title);
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        padding: 8px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        color: #74838A;
    }

    /* (shown on mobile) 'new head' for every 'row' (toggles the row) */
    .table.sortable td.product-variant-values {
        padding: 20px 16px;
        margin-left: -16px;
        margin-right: -16px;
        background: transparent url(/assets/icons/icon-arrowdown-blue-16.svg) right 16px center no-repeat;
        cursor: pointer;
    }

    .table.sortable td.product-variant-values.open {
        background-image: url(/assets/icons/icon-arrowup-blue-16.svg);
    }

    .table.sortable td.product-variant-values>div {
        margin-right: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table.sortable td.product-variant-values img {
        vertical-align: middle;
        margin-right: 8px;
    }

    .table.sortable td.product-variant-values span {
        color: #0092D2;
        vertical-align: middle;
    }

    .table.sortable td.product-variant-values span+span:before {
        content: ' | ';
    }


    /* link and cart buttons */
    .table.sortable td.link-current-button,
    .table.sortable td.cart-button {
        width: 50%;
        display: inline-block;
    }

    .table.sortable td.cart-button {
        text-align: right;
    }

    
    /**** UPSELL PRODUCTS *****/
    .upsell-product-image {
        height: 120px;
    }


}

/* Add this to product-page-responsive.css */
@media (max-width: 768px) {
    /* Make upsell products display as grid with stacked layout */
    #upsell-products-slider > div {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    /* Center the product image */
    .upsell-product-image {
        margin: 0 auto;
        height: 120px;
        width: 100%;
    }

    /* Add space between product info and actions */
    .upsell-product-price {
        text-align: left;
        margin-top: 0.5rem;
    }

    /* Align the cart wrapper to the left */
    .upsell-product-cart-wrapper {
        justify-content: space-between;
        margin-top: 0.5rem;
    }

    /* Adjust button size for easier tapping */
    .primary-button.medium.add-to-cart-button {
        min-width: 100px;
    }
}

/* For medium sized screens */
@media (min-width: 769px) and (max-width: 1024px) {
    #upsell-products-slider > div {
        grid-template-columns: 120px 1fr 1fr;
    }

    .upsell-product-cart-wrapper {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 0.75rem;
    }
}
@media (min-width: 0px) and (max-width: 1024px) {
    .upsell-products-container {
        margin-bottom: 48px;
    }
}

@media (min-width: 0px) and (max-width: 768px) {
    .upsell-products-container {
        margin-bottom: 32px;
    }
}