.product-image img {
    vertical-align: middle;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    /* keeps image nicely cropped */
}

.btn-outline-primary {
    color: var(--primary) !important;
    border: 2px dashed var(--secondary) !important
}

.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    color: White !important;
    background-color: var(--secondary) !important;
}

.label-text {
    background-color: var(--primary);
}

.section-btn-25 {
    text-align: right;
    margin-top: 1px !important;
}



.tab-pane.active img {
    max-width: 100%;
}

.bg-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary);
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary) !important;
}

.navbar-link, .dropdown-arrow::before, .navbar-link:hover, .dropdown-arrow:hover::before {
    color: var(--text);
}

.dropdown-position-list li a:hover {
    color: var(--text);
}

@media (min-width: 520px) {
    .header-logo img {
        max-width: 160px;
        vertical-align: middle;
        padding-right: 10px;
        transition: all linear .3s !important;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s;
    }

    .navbar-link, .dropdown-arrow::before, .navbar-link:hover, .dropdown-arrow:hover::before {
        color: var(--text2);
        width: 100%;
    }
}

@media (max-device-width: 500px) {
    .navbar-link, .dropdown-arrow::before, .navbar-link:hover, .dropdown-arrow:hover::before {
        color: var(--text);
    }

    .header-media-group a img {
        max-height: 60px
    }

    .details-preview li img {
        width: 80%;
    }

    .slick-list {
        max-height: 500px;
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .details-thumb li {
        display: none !important;
    }

    .header-content {
        padding: 5px 0;
    }

    .details-name {
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
    }

    .details-content {
        padding: 5px;
    }

    .details-name {
        max-height: 49px;
        overflow: hidden;
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
    }

    .details-action-group {
        display: grid;
        grid-gap: 5px;

    }

    .btn-outline-primary {

        font-size: 11px;
    }

    .details-price {
        margin-bottom: 0px;
        font-size: 18px;
    }

    .details-price del {
        color: var(--text);
        margin-right: 25px;
        font-size: 14px;
    }

    .table>:not(caption)>*>* {
        padding: 0rem 0rem;
        background-color: var(--bs-table-bg);
        background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
        border-bottom-width: 2px;
    }
}

@media (max-width: 400px) {
    .header-content {
        padding: 5px 0;
    }

    .details-name {
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
    }

    .details-content {
        padding: 5px;
    }

    .details-name {
        max-height: 49px;
        overflow: hidden;
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
    }

    .details-action-group {
        display: grid;
        grid-gap: 5px;

    }

    .slick-list {
        max-height: 400px;
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .details-preview li img {
        width: 70%;
    }

    .btn-outline-primary {

        font-size: 11px;
    }

    .details-price {
        margin-bottom: 0px;
        font-size: 18px;
    }

    .details-price del {
        color: var(--text);
        margin-right: 25px;
        font-size: 14px;
    }

    .details-thumb li {
        display: none !important;
    }

    .table>:not(caption)>*>* {
        padding: 0rem 0rem;
        background-color: var(--bs-table-bg);
        background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
        border-bottom-width: 2px;
    }


}



/* Top-level nav */
.nav-list, .nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li {
    position: relative;
}

/* Links styling */
.nav-list a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

/* First-level dropdown */
.nav-list>li>.dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    /* below the parent */
    left: 0;
    background: #fff;
    min-width: 200px;
    z-index: 100;
    border: 1px solid #ddd;
}

/* Show first-level dropdown on hover */
.nav-list>li:hover>.dropdown-list {
    display: block;
}

/* Second-level dropdown */
.dropdown-list li {
    position: relative;
}

.dropdown-list li .dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    /* below the first-level child */
    left: 0;
    /* align left with parent */
    background: #f9f9f9;
    min-width: 180px;
    border: 1px solid #ddd;
}

/* Show second-level dropdown on hover */
.dropdown-list li:hover>.dropdown-list {
    display: block;
}

/* Optional: hover colors */
.nav-list a:hover {
    background: #eee;
    color: #000;
}

/* First-level dropdown */
.navbar-list li {
    position: relative;
}

.navbar-list .dropdown-position-list {
    display: none;
    position: absolute;
    top: 100%;
    /* below parent */
    left: 0;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
    z-index: 999;
    border: 1px solid #ddd;
}

.navbar-list li:hover>.dropdown-position-list {
    display: block;
}

/* Second-level dropdown (grandchild) */
.navbar-list .dropdown-position-list li {
    position: relative;
}

.navbar-list .dropdown-position-list li .dropdown-position-list {
    display: none;
    position: absolute;
    top: 0;
    /* align with parent */
    left: 100%;
    /* show to the right of parent */
    background: #fff;
    min-width: 200px;
    border: 1px solid #ddd;
}

.navbar-list .dropdown-position-list li:hover>.dropdown-position-list {
    display: block;
}

/* Optional styling */
.navbar-list a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.navbar-list a:hover {
    background: #f0f0f0;
}