/* ==========================================================
   MountMyMonitor Product Tabs
   CSS: page-tabs-v7.css
   JS:  page-tabs-v2.js

   - Compact tabs
   - Gray inactive tabs
   - Orange active tab
   - Active tab connects to heavier orange content frame
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 769px) {

    .mmm-product-tabs {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        margin-top: 20px;

        border: 0;
    }


    /* Allow Volusion sections to share one tab row */

    .mmm-product-tabs > .descriptions-toggle {
        display: contents;
    }


    /* ------------------------------------------------------
       TAB BUTTONS
       ------------------------------------------------------ */

    .mmm-product-tabs
    .descriptions-toggle__button {
        order: 1;

        display: block;
        width: auto;

        margin: 0;
        padding: 8px 20px;

        border: 1px solid #c7c7c7;
        border-bottom: 0;

        border-radius: 5px 5px 0 0;

        background: #dddddd;

        color: #333333;

        font-size: 15px;
        font-weight: 600;

        cursor: pointer;
    }


    /* Remove Volusion title spacing */

    .mmm-product-tabs
    .descriptions-toggle__title {
        margin: 0;
        padding: 0;
    }


    /* ------------------------------------------------------
       INACTIVE TAB HOVER
       ------------------------------------------------------ */

    .mmm-product-tabs
    .descriptions-toggle__button:hover {
        background: #d2d2d2;
    }


    /* ------------------------------------------------------
       ACTIVE TAB
       ------------------------------------------------------ */

    .mmm-product-tabs
    .mmm-tab-active
    .descriptions-toggle__button {
        position: relative;
        z-index: 3;

        background: #ff9900;

        border: 2px solid #ff9900;
        border-bottom: 0;

        color: #ffffff;
    }


    .mmm-product-tabs
    .mmm-tab-active
    .descriptions-toggle__button:hover {
        background: #ff9900;
    }


    /* Hide Volusion accordion icons */

    .mmm-product-tabs
    .descriptions-toggle__button svg {
        display: none;
    }


    /* ------------------------------------------------------
       CONTENT PANELS

       Override Volusion accordion inline styles.
       ------------------------------------------------------ */

    .mmm-product-tabs
    .descriptions-toggle__content-container {
        order: 2;

        display: none !important;

        flex: 0 0 100%;
        width: 100%;

        height: auto !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transition: none !important;

        margin: 0;

        padding: 24px 20px 20px;

        background: #ffffff;
    }


    /* ------------------------------------------------------
       ACTIVE CONTENT PANEL

       2px orange frame connects to active tab.
       ------------------------------------------------------ */

    .mmm-product-tabs
    .mmm-tab-active
    .descriptions-toggle__content-container {
        display: block !important;

        height: auto !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        border: 2px solid #ff9900;

        border-radius: 0 5px 5px 5px;
    }

}


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

@media (max-width: 768px) {

    .mmm-product-tabs {
        display: block;

        margin-top: 15px;

        border: 0;
    }


    /* ------------------------------------------------------
       MOBILE TAB BUTTONS
       ------------------------------------------------------ */

    .mmm-product-tabs
    .descriptions-toggle__button {
        display: block;

        width: 100%;

        margin: 0 0 4px 0;
        padding: 10px 12px;

        border: 1px solid #c7c7c7;
        border-radius: 4px;

        background: #dddddd;

        color: #333333;

        text-align: left;

        cursor: pointer;
    }


    /* ------------------------------------------------------
       MOBILE ACTIVE TAB
       ------------------------------------------------------ */

    .mmm-product-tabs
    .mmm-tab-active
    .descriptions-toggle__button {
        margin-bottom: -1px;

        background: #ff9900;

        border: 2px solid #ff9900;
        border-bottom: 0;

        border-radius: 4px 4px 0 0;

        color: #ffffff;
    }


    /* ------------------------------------------------------
       MOBILE CONTENT
       ------------------------------------------------------ */

    .mmm-product-tabs
    .descriptions-toggle__content-container {
        display: none !important;

        width: 100%;

        height: auto !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transition: none !important;

        margin: 0 0 12px 0;
        padding: 15px 10px;

        background: #ffffff;
    }


    /* ------------------------------------------------------
       MOBILE ACTIVE CONTENT
       ------------------------------------------------------ */

    .mmm-product-tabs
    .mmm-tab-active
    .descriptions-toggle__content-container {
        display: block !important;

        height: auto !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        border: 2px solid #ff9900;

        border-radius: 0 0 4px 4px;
    }

}


/* ==========================================================
   PRODUCT FEATURES / TECH SPECS LIST SPACING

   Adds white space between individual list items.
   Applies to both desktop and mobile.
   ========================================================== */

.mmm-product-tabs
.descriptions-toggle__content-container li {
    margin-bottom: 8px;
    line-height: 1.25;
}


/* ==========================================================
   Hide Volusion "Choose your options:" heading
   ========================================================== */

.productsummary__options-heading {
    display: none !important;
}