/* DeusPower custom CSS */

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ DP-417 Mobile cart items */
/* Apply fix instead of tricky changes in logic */
.mobile-header-active .cart-content .cart-content {
    height: auto;
} 
.mobile-header-active div.cart-content .cart-content ul {
    box-shadow: none;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ DP-341 Mobile top menu fit content */

html.mobile-header-active .mobile-header .mobile-top-bar {
    min-height: 35px;
    height: auto;
}
html.mobile-header-active .mobile-header .mobile-top-menu-wrapper {
    max-width: calc(100% - 70px);
}
html.mobile-header-active .mobile-header .mobile-top-menu-wrapper .top-menu {
    width: 100%;
}
html.mobile-header-active .mobile-header .mobile-top-menu-wrapper .j-menu {
    width: 100%;
    flex-wrap: nowrap;
}
html.mobile-header-active .mobile-header .mobile-top-menu-wrapper .top-menu-item {
    width: auto;
    overflow: hidden;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ DP-277 Mobile shopping cart 2024.9.19 */

.table-responsive.shopping-cart .stepper-quantity input.form-control {
    padding-right: 4px;
    padding-left:  4px;
    text-align:   left;
    width:   4em;
    height: 35px;
}

/* update delete column inside cart product list, DP-277 */
.table-responsive.shopping-cart {
    border: none;
}
.table-responsive.shopping-cart .table > thead > tr > td.td-delete,
.table-responsive.shopping-cart .table > tbody > tr > td.td-delete,
.table-responsive.shopping-cart .table > tfoot > tr > td.td-delete {
    padding: 0;
}
.table-responsive.shopping-cart td.td-delete .btn {
    color: #303841;
    background-color: #eee;
}
.route-checkout-checkout #content .table-responsive table td.td-delete,
.route-checkout-cart #content .table-responsive table tr td.td-delete {
    min-width: max-content;
    text-align: end;
}

.table-responsive.shopping-cart tr .td-qty .btn {
    min-width:  38px;
    min-height: 38px;
}
.table-responsive.shopping-cart tr .td-qty .btn.btn-update {
    margin-left: 2rem;
}
.table-responsive.shopping-cart tr .td-qty .btn.inputNumberComboButton {
    color: #303841;
    background-color: #eee;
}
.table-responsive.shopping-cart tr .td-qty input.form-control.inputNumberComboInput {
    max-width: 3em;
    padding:   6px;
    text-align: center;
}
.desktop-header-active .header .top-bar {
    align-items: center;
    justify-content: flex-start;
}
.desktop-header-active .header .top-bar--has-domestic .language-currency {
    margin-right: 20px;
}
.desktop-header-active .header .top-bar .domestic-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}
.desktop-header-active .header .top-bar .domestic-switch::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    background-color: #1A0E0C;
    transform: translateY(-50%);
}
.desktop-header-active .header .top-bar .domestic-switch::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    background-color: #1A0E0C;
    transform: translateY(-50%);
}
.desktop-header-active .header .top-bar .domestic-switch__label {
    font-weight: 700;
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    margin-right: 8px;
}
.desktop-header-active .header .top-bar .domestic-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 16px;
    border-radius: 999px;
    background: #1A0E0C99;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    margin-left: 4px;
}
.desktop-header-active .header .top-bar .domestic-pill img {
    display: inline-block;
    margin-right: 8px;
}
.desktop-header-active .header .top-bar .domestic-pill__text {
    font-weight: 700;
    font-size: 11px;
}
.desktop-header-active .header .top-bar .domestic-pill:hover {
    background: #343b46;
}
.mobile-domestic-switch {
    display: none;
}

@media all and (max-width:840px) { /* approx value horizontal scroll appears */

    /* Reset framework properties */

    .table-responsive.shopping-cart {
        border: none;
    }
    .table-responsive.shopping-cart table tbody td {
        border: none!important;
    }
    .site-wrapper #content .table-responsive.shopping-cart table td {
        min-width:  unset;
        box-sizing: border-box;
        padding:    0;
    }
    .site-wrapper #content .table-responsive.shopping-cart table td.td-image {
        min-width:  90px;
    }

    .route-checkout-cart #content .table-responsive.shopping-cart table tr td,
    .route-checkout-cart #content .table-responsive.shopping-cart table tr td:nth-of-type(2) {
        min-width: unset;
    }

    .route-checkout-checkout .checkout-section.cart-section {
        padding: 0;
        border: none;
    }

    /* Mobile layout settings */

    .shopping-cart {
        --space-single: 15px;
        --space-cardgap: 2em;
        --font-size--description: 80%;
    }

    /* Layout */

    .table-responsive.shopping-cart table { display: block; }
    .table-responsive.shopping-cart thead { display: none;  }
    .table-responsive.shopping-cart tbody { display: grid; }
    .table-responsive.shopping-cart tr    { display: grid;  }
    .table-responsive.shopping-cart td    { display: block; }

    /* TBODY is card container */
    .table-responsive.shopping-cart tbody {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap:       var(--space-cardgap);
        padding-bottom: var(--space-cardgap);
    }

    /* TR is card item and is complex grid */
    .table-responsive.shopping-cart tr {
        display: grid;
        grid-gap:   0;
        grid-template-areas:
            'Image Title Trash'
            'Image Model Trash'
            'Quant Quant Price'
            'Quant Quant Total'
            ;
        grid-template-columns:
            min-content auto min-content
            ;
        grid-template-rows:
            1fr min-content min-content auto
            ;
    }
    .table-responsive.shopping-cart tr .td-image   { grid-area: Image; align-self:  start; }
    .table-responsive.shopping-cart tr .td-product { grid-area: Title; align-self:    end; }
    .table-responsive.shopping-cart tr .td-name    { grid-area: Title; align-self:    end; }
    .table-responsive.shopping-cart tr .td-model   { grid-area: Model; align-self:  start; }
    .table-responsive.shopping-cart tr .td-qty     { grid-area: Quant; align-self: center; }
    .table-responsive.shopping-cart tr .td-price   { grid-area: Price; align-self: center; }
    .table-responsive.shopping-cart tr .td-total   { grid-area: Total; align-self: center; }
    .table-responsive.shopping-cart tr .td-delete  { grid-area: Trash; align-self:  start; }

    /* Card cells */

    .table-responsive.shopping-cart .td-image {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        margin-right:  0.5rem;
        margin-bottom: 1.0rem;
    }
    .table-responsive.shopping-cart .td-name,
    .table-responsive.shopping-cart .td-product {
        margin-right:  var(--space-single);
        text-align:    left;
    }
    .table-responsive.shopping-cart .td-model {
        font-size:     var(--font-size--description);
        margin-bottom: var(--space-single);
        margin-right:  var(--space-single);
        text-align:    left;
    }
    .table-responsive.shopping-cart tr .td-qty .input-group {
        justify-content: start!important;
    }
    .table-responsive.shopping-cart .td-price ,
    .table-responsive.shopping-cart .td-total {
        white-space:   nowrap;
        text-align:    right;
    }
    .table-responsive.shopping-cart .td-price {
        opacity: 0.5;
    }
    .table-responsive.shopping-cart .td-price.hidden-mobile {
        display: none;
    }
    /* Mobile main menu: stack menu + domestic block */
    .mobile-main-menu-container .mobile-main-menu-wrapper {
        display: flex;
        flex-direction: column;
    }
    .mobile-main-menu-container .mobile-domestic-switch {
        margin-top: 10px;
        margin-right: -20px;
        margin-left: -20px;
        padding: 12px 24px 10px;
        border-top: 1.5px solid #6D767D;
        background: #e9edf5;
    }
    .mobile-main-menu-container .mobile-domestic-switch__label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .mobile-main-menu-container .mobile-domestic-switch__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
    }
    .mobile-main-menu-container .mobile-domestic-switch__icon img {
        width: 100%;
        height: auto;
    }
    .mobile-main-menu-container .mobile-domestic-switch__icon--ghost {
        opacity: 0;
        pointer-events: none;
    }
    .mobile-main-menu-container .mobile-domestic-switch__label {
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex: 1;
        text-align: center;
    }
    .mobile-main-menu-container .mobile-domestic-switch__pills {
        display: flex;
        justify-content: center;
        gap: 14px;
    }
    .mobile-main-menu-container .domestic-pill {
        display: inline-flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        padding: 6px 20px;
        border-radius: 999px;
        background: #1A0E0C99;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .mobile-main-menu-container .domestic-pill img {
        margin-right: 8px;
    }
    .mobile-main-menu-container .domestic-pill:hover {
        background: #3f434a;
    }
    .mobile-domestic-switch {
        display: block;
    }
    /* Mobile menu trigger badge + label */
    .mobile-header-active .menu-trigger {
        position: relative;
        display: flex;
        align-items: center;
    }

    .mobile-header-active .menu-trigger__button {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: 0;
    }

    /* Exclamation badge over the burger */
    .mobile-header-active .menu-trigger__badge {
        position: absolute;
        top: -5px;
        right: -10px;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;          /* above burger icon */
    }

    .mobile-header-active .menu-trigger__badge img {
        width: 100%;
        height: auto;
        display: block;
    }
    .mobile-header-active .menu-trigger__label {
        font-family: Ubuntu, sans-serif;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        border-radius: 999px;
        background: #EAEFFB;
        font-size: 11px;
        font-weight: 500;
        color: #000;
        left: 10px;
        bottom: -2px;
    }
    .mobile-header-active .menu-trigger span {
        display: block;
    }
}
/* ~ ~ end DP-277 Mobile shopping cart */