
/* Responsive Layouts
   ------------------------------

   This file is for handling the responsive layouts for devices.
   
*/

/* LAPTOP */

@media screen and (max-width: 1300px) {

    :root {        

        /* journey */

        --kbdefault25-categories-selector-columns: var(--kbdefault25-LAPTOP-categories-selector-columns, 4);
        --kbdefault25-product-selector-columns:    var(--kbdefault25-LAPTOP-product-selector-columns,    4);
        --kbdefault25-design-selector-columns:     var(--kbdefault25-LAPTOP-design-selector-columns,     4);
        --kbdefault25-my-designs-columns:          var(--kbdefault25-LAPTOP-my-designs-columns,          3);

        /* columns */

        --kbdefault25-field-design-selector-columns:   var(--kbdefault25-LAPTOP-field-design-selector-columns,   3);
        --kbdefault25-field-editor-columns:            var(--kbdefault25-LAPTOP-field-editor-columns,            5);
        --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-LAPTOP-field-color-tile-picker-columns, 7);
        --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-LAPTOP-field-tile-picker-columns,       5);
        --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-LAPTOP-field-detached-editor-columns,   7);
        --kbdefault25-dialog-product-columns:          var(--kbdefault25-LAPTOP-dialog-product-columns,          6);
        --kbdefault25-locker-room-design-columns:      var(--kbdefault25-LAPTOP-locker-room-design-columns,      5);
        --kbdefault25-team-store-columns:              var(--kbdefault25-LAPTOP-team-store-columns,              3);
        --kbdefault25-team-store-product-columns:      var(--kbdefault25-LAPTOP-team-store-product-columns,      2);
        --kbdefault25-team-store-images-columns:       var(--kbdefault25-LAPTOP-team-store-images-columns,       4);
    }

    /* Customize Model & Sliding Menu */

    :root {
        --kbdefault25-slider-speed: 200ms;
        --kbdefault25-slider-distance: 50px;
        --kbdefault25-slider-transition: ease-in-out;
        --kbdefault25-slider-border: 0px;
    }

        /* Slide-in Controls */
        
        body .kb-wrapper .kb-customise-page .kb-step-controls {
            min-height: var(--kbdefault25-steps-width);
            color: var(--kbdefault25-secondary-1);
            display: block;
            position: relative;
        }

        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-sidebar-toggle,
        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button {
            justify-content: center;
            height: var(--kbdefault25-steps-width);
            width: 100%;
            position: relative;
        }

        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-sidebar-toggle::before,
        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button::before {
            font-size: 30px;
            color: var(--kbdefault25-secondary-1);
        }

        body .kb-wrapper .kb-customise-edit-panel.kb-edit-panel-open .kb-step-controls .kb-step-sidebar-toggle::before {
            color: var(--kbdefault25-primary-1);
        }

        .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-preview-panel,
        body .kb-wrapper .kb-customise-page .kb-customise-edit-panel,
        body .kb-wrapper .kb-customise-page .kb-preview-panel,
        body .kb-wrapper div.kb-customise-page.kb-team-store-product .kb-preview-panel {
            width: calc(100% - var(--kbdefault25-steps-width) - 5px);
        }

        body .kb-wrapper .kb-customise-page .kb-customise-edit-panel-inner,
        body .kb-wrapper div.kb-team-stores-product-customize {
            width: var(--kbdefault25-steps-width);
            display: flex;
            justify-content: end;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            transition: width 0ms var(--kbdefault25-slider-transition);
            transition-delay: var(--kbdefault25-slider-speed);
        }

        body .kb-wrapper .kb-customise-page .kb-customise-wizard,
        body .kb-wrapper div.kb-team-stores-product-customize .kb-team-stores-product-customize-inner {
            right: calc(0px - var(--kbdefault25-slider-distance) + 10px);
            opacity: 0;
            visibility: hidden;
            width: 0;
            z-index: 1;
            transition: 
                right var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition), 
                opacity var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition), 
                visibility var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition),
                width 0ms var(--kbdefault25-slider-transition);
            transition-delay: 0ms, 0ms, 0ms, var(--kbdefault25-slider-speed);
        }

        body .kb-wrapper .kb-icon-steps-wrapper,
        body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: var(--kbdefault25-steps-width);
            background-color: var(--kbdefault25-background-2);
            z-index: 1;
            border-left: 5px solid var(--kbdefault25-background-1);
        }
        
            /* Open */
    
            body .kb-wrapper .kb-customise-page .kb-customise-edit-panel,
            body .kb-wrapper .kb-customise-edit-panel.kb-edit-panel-open .kb-customise-edit-panel-inner,
            body .kb-wrapper div.kb-team-stores-product-customize.kb-edit-panel-open {
                width: calc(var(--kbdefault25-menu-width) + var(--kbdefault25-steps-width));
                transition-delay: 0ms;
            }

            body .kb-wrapper .kb-customise-edit-panel.kb-edit-panel-open .kb-customise-edit-panel-inner .kb-customise-wizard,
            body .kb-wrapper div.kb-team-stores-product-customize.kb-edit-panel-open .kb-team-stores-product-customize-inner {
                right: 0;
                opacity: 1;
                visibility: visible;
                width: calc(100% - var(--kbdefault25-steps-width));
                transition-delay: 0ms, 0ms, 0ms, 0ms;
            }

            /* First Step */
            
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb.kb-wizard-breadcrumb-active a::before {
                content: " ";
                position: absolute;
                top: -40px;
                left: 0px;
                height: 40px;
                width: 40px;
                border-bottom-left-radius: 50%;
                box-shadow: 0 20px 0 0 var(--kbdefault25-background-1);
                pointer-events: none;
            }

    /* Locker Room */

    body .kb-wrapper .kb-locker-room-page .kb-multi-select-actions {
        gap: var(--kbdefault25-gap-half);
    }
}

/* TABLET */
/* Responsive variables */

@media screen and (max-width: 1000px) {

    :root {        

        /* journey */

        --kbdefault25-categories-selector-columns: var(--kbdefault25-TABLET-categories-selector-columns, 3);
        --kbdefault25-product-selector-columns:    var(--kbdefault25-TABLET-product-selector-columns,    3);
        --kbdefault25-design-selector-columns:     var(--kbdefault25-TABLET-design-selector-columns,     3);
        --kbdefault25-my-designs-columns:          var(--kbdefault25-TABLET-my-designs-columns,          2);

        /* columns */

        --kbdefault25-field-design-selector-columns:   var(--kbdefault25-TABLET-field-design-selector-columns,   3);
        --kbdefault25-field-editor-columns:            var(--kbdefault25-TABLET-field-editor-columns,            5);
        --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-TABLET-field-color-tile-picker-columns, 7);
        --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-TABLET-field-tile-picker-columns,       5);
        --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-TABLET-field-detached-editor-columns,   6);
        --kbdefault25-dialog-product-columns:          var(--kbdefault25-TABLET-dialog-product-columns,          4);
        --kbdefault25-locker-room-design-columns:      var(--kbdefault25-TABLET-locker-room-design-columns,      3);
        --kbdefault25-team-store-columns:              var(--kbdefault25-TABLET-team-store-columns,              2);
        --kbdefault25-team-store-product-columns:      var(--kbdefault25-TABLET-team-store-product-columns,      3);
        --kbdefault25-team-store-images-columns:       var(--kbdefault25-TABLET-team-store-images-columns,       4);
    }

    /* Global Tile Picker */

    body .kb-wrapper.kb-global-kit-available:has(.kb-global-kit-tile-picker-shown) .kb-page-content {
        width: 100%;
        padding: 0;
    }

    body .kb-wrapper.kb-global-kit-available .kb-global-kit.kb-global-kit-tile-picker-shown {
        position: fixed;
        top: var(--kbdefault25-gap);
        left: var(--kbdefault25-gap);
        bottom: var(--kbdefault25-gap);
        width: var(--kbdefault25-gtp-width);
        box-shadow: 0 0 30px 0 var(--kbdefault25-primary-1-25);
        box-sizing: border-box;
        z-index: 2;
    }
    
    body .kb-wrapper.kb-global-kit-available .kb-global-kit-wrapper-bottom .kb-global-kit.kb-global-kit-tile-picker-shown {
        right: var(--kbdefault25-gap);
        left: unset;
    }

    /* Footer */

    body .kb-wrapper .kb-customize-footer .kb-button.kb-footer-button-locker-room,
    body .kb-wrapper .kb-customize-footer .kb-button.kb-footer-button-my-designs {
        display: none;
    }

    body .kb-wrapper .kb-customize-footer .kb-button.kb-footer-button-options {
        display: flex;
    }

    /* Locker Room */

        /* path */
        body .kb-wrapper .kb-locker-room-header .kb-folder-path a, 
        body .kb-wrapper .kb-locker-room-header .kb-folder-path span {
            font-size: var(--kbdefault25-paragraph-size);
        }

        /* multiselect */
        body .kb-wrapper .kb-locker-room-page .kb-multi-select-actions-wrapper {
            flex-wrap: wrap;
        }

        body .kb-wrapper .kb-locker-room-page .kb-multi-selected-count {
            border-right: none;
            text-align: center;
            padding: 0 0 var(--kbdefault25-gap) 0;
            margin: 0;
        }

        body .kb-wrapper .kb-locker-room-page .kb-multi-selected-count, 
        body .kb-wrapper .kb-locker-room-page .kb-multi-select-actions {
            width: 100%;
        }
        
        body .kb-wrapper .kb-locker-room-page .kb-multi-select-actions {
            flex-wrap: wrap;
            justify-content: center;
        }

        body .kb-wrapper .kb-locker-room-page .kb-delete-custom-designs-button {
            margin-left: 0;
        }

    /* Squad Stores™ */

    body .kb-wrapper .kb-partial-wrap .kb-team-stores-catalog .kb-page-content {
        flex-wrap: wrap;
    }

    body .kb-wrapper .kb-team-stores-catalog .kb-page-content .kb-team-stores-details {
        max-width: 600px;
        margin: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-team-stores-catalog .kb-page-content .kb-team-stores-products {
        margin-top: 0 !important;
    }
}

/* LARGE MOBILE */
/* Responsive variables */

@media screen and (max-width: 650px) {

    :root {        

        /* layout */

        --kbdefault25-field-gap:           var(--kbdefault25-gap-half);
        --kbdefault25-field-inline-margin: var(--kbdefault25-gap);

        /* journey */

        --kbdefault25-categories-selector-columns: var(--kbdefault25-LARGE-MOBILE-categories-selector-columns, 2);
        --kbdefault25-product-selector-columns:    var(--kbdefault25-LARGE-MOBILE-product-selector-columns,    2);
        --kbdefault25-design-selector-columns:     var(--kbdefault25-LARGE-MOBILE-design-selector-columns,     2);
        --kbdefault25-my-designs-columns:          var(--kbdefault25-LARGE-MOBILE-my-designs-columns,          2);

        /* columns */

        --kbdefault25-field-design-selector-columns:   var(--kbdefault25-LARGE-MOBILE-field-design-selector-columns,   3);
        --kbdefault25-field-editor-columns:            var(--kbdefault25-LARGE-MOBILE-field-editor-columns,            5);
        --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-LARGE-MOBILE-field-color-tile-picker-columns, 8);
        --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-LARGE-MOBILE-field-tile-picker-columns,       5);
        --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-LARGE-MOBILE-field-detached-editor-columns,   4);
        --kbdefault25-dialog-product-columns:          var(--kbdefault25-LARGE-MOBILE-dialog-product-columns,          3);
        --kbdefault25-locker-room-design-columns:      var(--kbdefault25-LARGE-MOBILE-locker-room-design-columns,      2);
        --kbdefault25-team-store-columns:              var(--kbdefault25-LARGE-MOBILE-team-store-columns,              1);
        --kbdefault25-team-store-product-columns:      var(--kbdefault25-LARGE-MOBILE-team-store-product-columns,      2);
        --kbdefault25-team-store-images-columns:       var(--kbdefault25-LARGE-MOBILE-team-store-images-columns,       3);
    }

    /* Model Header & Footer */

    body .kb-wrapper .kb-customize-footer .kb-lead-time,
    body .kb-wrapper .kb-model-header .kb-product-information-icon,
    body .kb-wrapper .kb-model-header .kb-model-header-price {
        display: none;
    }

    /* Model Preview */

    .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-preview-panel,
    body .kb-wrapper div.kb-customise-page.kb-team-store-product .kb-preview-panel,
    body .kb-wrapper .kb-customise-page .kb-preview-panel {
        width: 100%;
    }

    body .kb-wrapper .kb-customise-page .kb-preview-panel .kb-tile-zoom-picker-image {
        width: 200px;
        right: unset;
        left: var(--kbdefault25-gap);
    }

    /* Customize Menu & Sliding Menu */

    body .kb-wrapper .kb-icon-steps-wrapper, 
    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls {
        border-left: none;
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel:not(.kb-edit-panel-open) .kb-wizard-breadcrumbs {
        background-color: transparent;
        overflow: hidden;
        height: 0;
        transition: height var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition);
        --kbdefault25-slider-border: 0px;
    }

    body .kb-wrapper .kb-icon-steps-wrapper .kb-step-controls::before,
    body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button,
    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-wizard-breadcrumb {
        opacity: 1;
        visibility: visible;
        transition: 
            height var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition),
            opacity var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition),
            visibility var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition);
    }
    
    body .kb-wrapper .kb-icon-steps-wrapper {
        background-color: transparent;
        transition: background-color var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition);
    }

    body .kb-wrapper .kb-icon-steps-wrapper .kb-step-controls::before {
        content: " ";
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--kbdefault25-secondary-1);
        opacity: .25;
        position: absolute;
        z-index: -1;
        border-bottom-left-radius: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-step-sidebar-toggle {
        background-color: var(--kbdefault25-background-1);
        border-bottom-left-radius: var(--kbdefault25-gap);
        transition: background-color var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition);
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-step-sidebar-toggle::after {
        content: " ";
        position: absolute;
        bottom: calc(0px - var(--kbdefault25-gap-double));
        right: 0px;
        height: var(--kbdefault25-gap-double);
        width: var(--kbdefault25-gap-double);
        border-top-right-radius: 50%;
        box-shadow: 0 calc(0px - var(--kbdefault25-gap)) 0 0 var(--kbdefault25-background-1);
        pointer-events: none;
        transition: box-shadow var(--kbdefault25-slider-speed) var(--kbdefault25-slider-transition);
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-step-sidebar-toggle .kb-current-step {
        display: block;
    }
    
    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel:not(.kb-edit-panel-open) .kb-step-sidebar-toggle,
    body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button,
    body .kb-wrapper .kb-team-stores-product-customize .kb-step-controls .kb-step-collapse-button {
        display: flex;
        flex-direction: column;
        gap: var(--kbdefault25-gap-half);
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel:not(.kb-edit-panel-open) .kb-step-sidebar-toggle::before {
        content: attr(current-step-icon);
    }

    body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button,
    body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button::before {
        color: var(--kbdefault25-background-1);
    }

    body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button:last-child::after {
        content: " ";
        position: absolute;
        width: 60%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        background-color: var(--kbdefault25-background-1); 
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-wizard-breadcrumb {
        opacity: 0;
        visibility: hidden;
    }

    body .kb-wrapper .kb-customise-page .kb-customise-wizard {
        padding: var(--kbdefault25-gap-half);
    }

    body .kb-wrapper .kb-customise-page:has(.kb-customise-edit-panel:not(.kb-edit-panel-open)) .kb-customize-slot-action-bar {
        z-index: 2;
    }

    /* Open */

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-step-sidebar-toggle .kb-current-step {
        display: none;
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-step-controls .kb-step-collapse-button {
        height: 0;
        opacity: 0;
        visibility: hidden;
    }
    
    body .kb-wrapper .kb-customise-edit-panel.kb-edit-panel-open .kb-icon-steps-wrapper .kb-step-controls::before {
        opacity: 0;
        visibility: hidden;
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-wizard-breadcrumb {
        opacity: 1;
        visibility: visible;
    }
    
    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-step-sidebar-toggle {
        background-color: transparent;
    }
    
    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-icon-steps-wrapper {
        background-color: var(--kbdefault25-background-2);
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel.kb-edit-panel-open .kb-step-sidebar-toggle::after {
        box-shadow: 0 calc(0px - var(--kbdefault25-gap)) 0 0 transparent;
    }

    /* Dialogs */

    body .kb-wrapper .kb-dialog .kb-customize-slot-actions-information .kb-button {
        width: 100%;
    }
    
        /* detached editor library */
        body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper {
            width: 100%;
            background-color: var(--kbdefault25-background-2);
            border-radius: var(--kbdefault25-radius);
            padding: var(--kbdefault25-gap);
            margin-bottom: var(--kbdefault25-gap);
        }

        body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper::before {
            content: none;
        }

        body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-placements-wrapper {
            width: 100%;
            padding: 0;
        }

    /* Fields */
    
    body .kb-wrapper .kb-editor-buttons {
        padding: var(--kbdefault25-gap-half);
        gap: var(--kbdefault25-gap);
    }

    /* Checkout */

    body .kb-wrapper .kb-single-item-checkout table, 
    body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper {
        padding: var(--kbdefault25-gap);
    }

    /* Locker Room */

        /* path */
        body .kb-wrapper .kb-locker-room-header .kb-locker-room-title {
            padding-right: 0;
            border-right: none;
            margin-right: 0;
        }

        body .kb-wrapper .kb-locker-room-header .kb-locker-room-title,
        body .kb-wrapper .kb-locker-room-folder-path {
            text-align: center;
            width: 100%;
        }

        body .kb-wrapper .kb-locker-room-header .kb-folder-path {
            background-color: var(--kbdefault25-primary-2-25);
            padding: var(--kbdefault25-gap) !important;
            border-radius: var(--kbdefault25-radius);
            margin-top: var(--kbdefault25-gap) !important;
            box-sizing: border-box;
        }

        /* navigation */
        body .kb-wrapper .kb-locker-room-header .kb-locker-room-buttons {
            justify-content: center;
            width: 100%;
            padding-top: var(--kbdefault25-gap);
        }

        /* filters */
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled {
            justify-content: center;
        }

        body .kb-wrapper .kb-locker-room-page .kb-pagination-wrapper, 
        body .kb-wrapper .kb-locker-room-page:not(:has(.kb-pagination)) .kb-locker-room-sort {
            margin-left: 0 !important;
        }
        
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination-wrapper {
            display: contents;
        }
        
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination-page-sizes {
            order: 100;
        }
        
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination {
            order: 101;
        }

        /* tabulation */
        body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-button {
            font-size: 0;
            flex-grow: 1;
            justify-content: center;
        }
        
        body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-button::before {
            font-size: var(--kbdefault25-subtitle-size);
        }

        /* 'saved' tab */ body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-locker-room-tab-saved::before { content: "save"; }
        /* 'purchased' tab */ body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-locker-room-tab-purchased::before { content: "receipt"; }
        /* 'images' tab */ body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-locker-room-tab-images::before { content: "image"; }
        /* 'basket' tab */ body .kb-wrapper .kb-locker-room-page .kb-locker-room-tabular-nav .kb-locker-room-tab-basket::before { content: "shopping_cart"; }

        body .kb-wrapper .kb-locker-room-tabular-wrapper .kb-locker-room-folder-actions {
            width: 100%;
            padding: 0 var(--kbdefault25-gap-half);
            justify-content: center;
            flex-wrap: wrap;
        }

        body .kb-wrapper .kb-locker-room-tabular-nav.ng-hide ~ .kb-locker-room-folder-actions {
            margin-top: var(--kbdefault25-gap);
        }

    /* Squad Stores */

    body .kb-wrapper div.kb-team-stores-product-customize .kb-team-stores-product-customize-inner {
        padding: var(--kbdefault25-gap);
    }

    body .kb-wrapper div.kb-team-stores-product-customize .kb-team-store-product-details,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-name, 
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-price, 
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-bundle-products-header {
        display: block;
    }

    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-name {
        padding: 0;
        font-weight: bold;
        font-size: var(--kbdefault25-title-size);
    }

    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-price {
        padding: 0;
        margin: var(--kbdefault25-gap-half) 0 var(--kbdefault25-gap-double) 0;
        font-size: var(--kbdefault25-subtitle-size);
    }

    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls {
        height: fit-content;
        padding-bottom: var(--kbdefault25-gap-half);
        border-left: none;
        background-color: var(--kbdefault25-secondary-1-25);
        border-bottom-left-radius: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-mobile-product-price,
    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls .kb-next-step {
        display: none;
    }

    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls .kb-product-info,
    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls .kb-product-info::before {
        color: var(--kbdefault25-secondary-1);
    }

    body .kb-wrapper div.kb-team-stores-product-customize .kb-step-controls .kb-step-collapse-button:last-child::after {
        background-color: var(--kbdefault25-secondary-1);
    }

        /* Open */
        
        body .kb-wrapper div.kb-team-stores-product-customize.kb-edit-panel-open .kb-step-controls {
            height: 100%;
            background-color: var(--kbdefault25-background-2);
            border-radius: 0;
            padding-bottom: 0;
        }

        /* Fields */

        body .kb-wrapper div.kb-team-stores-product-customize .kb-team-stores-product-field-size-wrapper,
        body .kb-wrapper div.kb-team-stores-product-customize .kb-team-stores-unit-upload-buttons {
            justify-content: center;
        }

        body .kb-wrapper div.kb-team-stores-product-customize .kb-team-stores-product-field-size {
            margin-right: auto;
        }

        /* Countdown */

        body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-countdown .kb-team-stores-countdown-header {
            font-size: var(--kbdefault25-subtitle-size);
        }

        body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-countdown-time {
            gap: 5px;
        }

        body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-countdown-time > span {
            font-size: 25px;
        }
}

/* MEDIUM MOBILE */
/* Responsive variables */

@media screen and (max-width: 500px) {

    :root {

        /* journey */

        --kbdefault25-categories-selector-columns: var(--kbdefault25-MEDIUM-MOBILE-categories-selector-columns, 2);
        --kbdefault25-product-selector-columns:    var(--kbdefault25-MEDIUM-MOBILE-product-selector-columns,    2);
        --kbdefault25-design-selector-columns:     var(--kbdefault25-MEDIUM-MOBILE-design-selector-columns,     2);
        --kbdefault25-my-designs-columns:          var(--kbdefault25-MEDIUM-MOBILE-my-designs-columns,          1);

        /* columns */

        --kbdefault25-field-design-selector-columns:   var(--kbdefault25-MEDIUM-MOBILE-field-design-selector-columns,   2);
        --kbdefault25-field-editor-columns:            var(--kbdefault25-MEDIUM-MOBILE-field-editor-columns,            4);
        --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-MEDIUM-MOBILE-field-color-tile-picker-columns, 6);
        --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-MEDIUM-MOBILE-field-tile-picker-columns,       4);
        --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-MEDIUM-MOBILE-field-detached-editor-columns,   3);
        --kbdefault25-dialog-product-columns:          var(--kbdefault25-MEDIUM-MOBILE-dialog-product-columns,          3);
        --kbdefault25-locker-room-design-columns:      var(--kbdefault25-MEDIUM-MOBILE-locker-room-design-columns,      1);
        --kbdefault25-team-store-columns:              var(--kbdefault25-MEDIUM-MOBILE-team-store-columns,              1);
        --kbdefault25-team-store-product-columns:      var(--kbdefault25-MEDIUM-MOBILE-team-store-product-columns,      1);
        --kbdefault25-team-store-images-columns:       var(--kbdefault25-MEDIUM-MOBILE-team-store-images-columns,       3);
    }

    /* Global Tile Picker */

    body .kb-wrapper.kb-global-kit-available .kb-global-kit-wrapper-bottom .kb-global-kit.kb-global-kit-tile-picker-shown,
    body .kb-wrapper.kb-global-kit-available .kb-global-kit.kb-global-kit-tile-picker-shown {
        top: unset;
        left: 0;
        bottom: 0;
        width: 100vw;
        margin: 0;
        box-shadow: 0 0 20px var(--kbdefault25-primary-1-50);
        border-radius: 0;
    }
    
    body .kb-wrapper.kb-global-kit-available .kb-global-kit-tile-picker-shown .kb-global-kit-fields {
        flex-direction: column-reverse;
    }

    body .kb-wrapper.kb-global-kit-available .kb-global-kit-tile-picker-shown .kb-global-kit-tile-picker-header {
        border-radius: 0;
    }
    
    body .kb-wrapper.kb-global-kit-available .kb-global-kit-tile-picker-shown .kb-global-kit-field-wrapper {
        max-height: max(200px, 40vh);
    }

        /* closed */
        body .kb-wrapper.kb-global-kit-available .kb-global-kit:not(.kb-global-kit-tile-picker-shown) .kb-global-kit-fields {
            left: 0;
            bottom: 0;
            border-radius: 0 var(--kbdefault25-radius) 0 0;
        }
    
        body .kb-wrapper.kb-global-kit-available .kb-global-kit-wrapper-bottom .kb-global-kit:not(.kb-global-kit-tile-picker-shown) .kb-global-kit-fields {
            right: 0;
            left: unset;
            border-radius: var(--kbdefault25-radius) 0 0;
        }

    /* Jounrey */

    body .kb-wrapper .kb-journey-title-wrapper .kb-journey-title ~ span {
        display: block;
    }
    
    body .kb-wrapper .kb-journey-title-wrapper .kb-journey-title ~ span,
    body .kb-wrapper .kb-journey-title-wrapper .kb-journey-title ~ span span:first-child,
    body .kb-wrapper .kb-journey-title-wrapper .kb-journey-title ~ span span.ng-hide ~ span {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    /* Fields */

    body .kb-wrapper .kb-pattern-transform-slider {
        width: 100%;
    }

    body .kb-wrapper .kb-wizard-form-field-type-image .kb-wizard-form-file-preview {
        width: 90%;
    }

    body .kb-wrapper .kb-colorlist .kb-table-header-cell:first-child, 
    body .kb-wrapper .kb-colorlist .kb-table .kb-table-cell:first-child {
        display: none;
    }

    body .kb-wrapper .kb-colorlist .kb-color-preview {
        width: 23px;
    }

    /* My Designs */
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-row {
        width: 100%;
    }
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-row ~ .kb-wizard-form-row {
        margin-top: var(--kbdefault25-gap);
    }

    /* Squad Stores™ */

    body .kb-wrapper .kb-team-stores-details .kb-team-stores-filters-wrapper .kb-team-stores-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    body .kb-wrapper .kb-team-stores-details .kb-team-stores-countdown-time {
        gap: 10px;
    }

    body .kb-wrapper .kb-team-stores-details .kb-team-stores-countdown-time > span {
        font-size: 20px;
    }
}

/* SMALL MOBILE */
/* Responsive variables */

@media screen and (max-width: 400px) {

    :root {

        /* journey */

        --kbdefault25-categories-selector-columns: var(--kbdefault25-SMALL-MOBILE-categories-selector-columns, 1);
        --kbdefault25-product-selector-columns:    var(--kbdefault25-SMALL-MOBILE-product-selector-columns,    1);
        --kbdefault25-design-selector-columns:     var(--kbdefault25-SMALL-MOBILE-design-selector-columns,     1);
        --kbdefault25-my-designs-columns:          var(--kbdefault25-SMALL-MOBILE-my-designs-columns,          1);

        /* columns */

        --kbdefault25-field-design-selector-columns:   var(--kbdefault25-SMALL-MOBILE-field-design-selector-columns,   2);
        --kbdefault25-field-editor-columns:            var(--kbdefault25-SMALL-MOBILE-field-editor-columns,            3);
        --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-SMALL-MOBILE-field-color-tile-picker-columns, 5);
        --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-SMALL-MOBILE-field-tile-picker-columns,       3);
        --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-SMALL-MOBILE-field-detached-editor-columns,   2);
        --kbdefault25-dialog-product-columns:          var(--kbdefault25-SMALL-MOBILE-dialog-product-columns,          2);
        --kbdefault25-locker-room-design-columns:      var(--kbdefault25-SMALL-MOBILE-locker-room-design-columns,      1);
        --kbdefault25-team-store-columns:              var(--kbdefault25-SMALL-MOBILE-team-store-columns,              1);
        --kbdefault25-team-store-product-columns:      var(--kbdefault25-SMALL-MOBILE-team-store-product-columns,      1);
        --kbdefault25-team-store-images-columns:       var(--kbdefault25-SMALL-MOBILE-team-store-images-columns,       2);
    }

    /* Fields */

    body .kb-wrapper .kb-colorlist .kb-table-row {
        position: relative;
    }

    body .kb-wrapper .kb-colorlist .kb-colorlist-desc input[type="text"]:focus,
    body .kb-wrapper .kb-colorlist .kb-colorlist-desc input[type="text"].ng-valid:not(form):not([ng-form]):not(div):focus {
        position: absolute;
        left: 0;
        width: 100%;
        background-color: var(--kbdefault25-background-1);
        top: 9px;
    }

    /* Checkout */

    body .kb-wrapper .kb-single-item-checkout table, 
    body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper {
        padding: var(--kbdefault25-gap-half);
    }

    body .kb-wrapper .kb-single-item-checkout .kb-table .kb-table-cell,
    body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-table .kb-table-cell {
        padding: 3px;
    }

    /* Locker Room */

        /* filters */
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-locker-room-filter,
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-filter-by-criteria,
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-locker-room-sort,
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination-page-sizes,
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination-page-sizes-select,
        body .kb-wrapper .kb-locker-room-filters.kb-window-titled .kb-pagination-page-sizes-select.select2-container .select2-choice,
        body .kb-wrapper .kb-locker-room-page .select2-container.kb-locker-room-filter .select2-choice,
        body .kb-wrapper .kb-locker-room-page .select2-container.kb-locker-room-sort .select2-choice,
        body .kb-wrapper .kb-locker-room-page .kb-pagination {
            width: 100%;
        }
        
        body .kb-wrapper .kb-locker-room-page .kb-pagination .kb-pagination-page {
            flex-grow: 1;
            justify-content: center;
        }

        body .kb-wrapper .kb-filter-by-criteria.kb-disabled {
            display: none;
        }

        body .kb-wrapper .kb-locker-room-page .kb-pagination-wrapper {
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 !important;
            width: 100%;
            padding: 0 var(--kbdefault25-gap) var(--kbdefault25-gap);
            box-sizing: border-box;
        }

        body .kb-wrapper .kb-folder-contents {
            padding: 0 !important;
        }
}