/* Shared responsive safety layer. It complements the theme without changing its desktop design. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    display: inline-block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe {
    border: 0;
}

.row > *,
.d-flex > *,
.product-card,
.product-card-inner,
.product-card-body,
.widget,
.card,
.entry-content {
    min-width: 0;
}

.table-responsive,
.gd-responsive-table,
.u-table-res,
.comparison-table,
.shopping-cart {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.gd-responsive-table > .table,
.u-table-res > .table,
.comparison-table > .table,
.shopping-cart > .table {
    width: 100%;
}

.form-control,
select,
textarea,
input {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Keep desktop dropdown labels on a single line and let the panel fit its content. */
@media (min-width: 992px) {
    .site-header .header-inline-menu .site-menu .t-h-dropdown-menu {
        min-width: 220px;
        width: max-content;
    }

    .site-header .header-inline-menu .site-menu .t-h-dropdown-menu > a {
        align-items: center;
        display: flex;
        white-space: nowrap;
    }

    .site-header .header-inline-menu .site-menu .t-h-dropdown-menu > a > i {
        flex: 0 0 auto;
    }
}

.blog-details-main-content,
.blog-post .post-body,
.entry-content,
.card-body,
.widget,
.page-content {
    min-width: 0;
}

.blog-details-main-content img,
.blog-details-main-content table,
.blog-details-main-content iframe,
.blog-post .post-body img,
.blog-post .post-body table,
.blog-post .post-body iframe,
.page-content img,
.page-content table,
.page-content iframe {
    max-width: 100% !important;
}

.blog-details-main-content table,
.blog-post .post-body table,
.page-content table {
    display: block;
    overflow-x: auto;
    width: max-content;
}

.blog-details-main-content a,
.blog-post .post-body a,
.page-content a {
    overflow-wrap: anywhere;
}

.page-title {
    align-items: center;
    background-color: #f1f3f5;
    border-bottom: 1px solid #e1e4e7;
    border-top-color: #e1e4e7;
    display: flex;
    min-height: 56px;
    padding: 0;
}

.page-title > .container,
.page-title > .container-fluid,
.page-title .row,
.page-title [class*="col-"] {
    width: 100%;
}

.page-title .breadcrumbs {
    align-items: center;
    display: flex;
    font-size: 15px;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.45;
    min-width: 0;
}

.page-title .breadcrumbs > li {
    align-items: center;
    display: inline-flex;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0;
}

.page-title .breadcrumbs > li.separator {
    margin: 0 1px;
}

.post-title,
.product-title,
.entry-title,
.p-title-main,
.widget-title,
.card-title,
.product-price,
.site-footer p,
.site-footer a {
    overflow-wrap: anywhere;
}

.mfp-content,
.white-popup,
.modal-dialog {
    max-width: calc(100vw - 30px);
}

.white-popup img,
.announcement-with-content img {
    object-fit: cover;
}

.g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    .site-header .header-inline-menu .site-menu > ul > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-header .site-branding {
        flex: 0 1 220px;
    }

    .site-header .site-logo img {
        max-height: 58px;
        width: auto;
    }
}

@media (max-width: 991.98px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header .menu-top-area .row {
        align-items: center;
    }

    .site-header .menu-top-area .t-m-s-a,
    .site-header .menu-top-area .right-area {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .site-header .menu-top-area .right-area {
        justify-content: flex-end;
    }

    .site-header .menu-top-area a,
    .site-header .menu-top-area .main-link {
        white-space: nowrap;
    }

    .site-header .topbar .d-flex.justify-content-between {
        align-items: center;
        gap: 12px;
    }

    .site-header .site-branding {
        flex: 1 1 auto;
        min-width: 0;
        padding: 14px 0;
    }

    .site-header .site-logo img {
        max-height: 50px;
        max-width: min(210px, 52vw);
        width: auto;
    }

    .site-header .toolbar {
        flex: 0 0 auto;
    }

    .mobile-menu {
        max-width: min(360px, 88vw);
        overflow-y: auto;
        width: 100%;
    }

    .toolbar-dropdown {
        max-width: calc(100vw - 30px);
        right: 0;
    }

    .page-title {
        height: auto;
        min-height: 58px;
    }

    .page-title .breadcrumbs {
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .sidebar-offcanvas {
        max-width: min(340px, calc(100vw - 42px));
        overflow-y: auto;
    }

    .sidebar-toggle {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .blog-page > .row,
    .contact-page > .row {
        row-gap: 24px;
    }

    .contact-page [class*="order-md-1"],
    .contact-page [class*="order-md-2"] {
        margin-bottom: 0;
    }

    .product-gallery {
        margin-bottom: 24px;
    }

    .details-page-top-right-content {
        min-height: 0 !important;
    }

    .site-footer .row {
        row-gap: 28px;
    }

    .checkut-page > .row,
    .checkout-page > .row,
    .user-dashboard > .row {
        row-gap: 24px;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 16px;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-header .menu-top-area {
        padding: 6px 0;
    }

    .site-header .menu-top-area .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .site-header .menu-top-area .t-m-s-a,
    .site-header .menu-top-area .right-area {
        justify-content: center;
    }

    .site-header .menu-top-area .track-order-link,
    .site-header .menu-top-area .main-link {
        font-size: 13px;
        margin: 0;
    }

    .site-header .topbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-header .toolbar .toolbar-item {
        margin-left: 5px;
        width: 38px;
    }

    .site-header .toolbar .toolbar-item > a {
        min-height: 42px;
    }

    .site-header .toolbar .text-label {
        display: none;
    }

    .padding-top-3x {
        padding-top: 36px !important;
    }

    .padding-bottom-3x {
        padding-bottom: 36px !important;
    }

    .shop-top-filter-wrapper {
        padding: 14px;
    }

    .shop-top-filter-wrapper .sptfl,
    .shop-top-filter-wrapper .shop-sorting {
        align-items: stretch;
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .shop-top-filter-wrapper .quickFilter,
    .shop-top-filter-wrapper .quickFilter-title,
    .shop-top-filter-wrapper .shop-sorting .form-control {
        max-width: none !important;
        width: 100%;
    }

    .shop-top-filter-wrapper .shop-view {
        display: flex;
        justify-content: center;
    }

    .product-card.product-list {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
    }

    .product-card.product-list .product-thumb,
    .product-card.product-list .product-card-inner {
        max-width: 100%;
        width: auto;
    }

    .product-card.product-list .product-thumb img {
        height: 100%;
        object-fit: cover;
    }

    .product-price {
        font-size: 15px;
        white-space: normal;
    }

    .product-price del {
        margin-right: 4px;
    }

    .product-card .product-badge {
        max-width: 62%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-gallery .product-details-slider img {
        max-height: 520px;
        object-fit: contain;
        width: 100%;
    }

    .details-page-top-right-content .row.align-items-end .col-sm-6 {
        margin-bottom: 12px;
    }

    .contact-form-box {
        padding: 22px 18px;
    }

    .contact-page .widget {
        padding: 20px !important;
    }

    .blog-post .post-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .white-popup {
        margin: 15px auto;
        width: calc(100vw - 30px);
    }

    .announcement-with-content {
        display: block;
    }

    .announcement-with-content .right-area {
        padding: 24px 20px;
        width: 100%;
    }

    .cookie-consent {
        padding: 18px 15px;
    }

    .cookie-consent .cookie-container {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .pagination {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .table {
        margin-bottom: 0;
    }

    .steps {
        align-items: stretch;
        flex-direction: column;
        margin-bottom: 28px !important;
    }

    .steps .step {
        border-left: 1px solid #e1e7ec;
        border-radius: 0 !important;
        flex: 0 0 auto;
        padding: 12px 16px;
        width: 100%;
    }

    .steps .step + .step {
        border-top: 0;
    }

    .shopping-cart-footer {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .shopping-cart-footer > .column,
    .shopping-cart-footer > .column:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin: 0;
        width: 100%;
    }

    .shopping-cart-footer .btn,
    .checkut-page .btn,
    .checkout-page .btn {
        max-width: 100%;
        white-space: normal;
    }

    .modal-dialog {
        margin-left: auto;
        margin-right: auto;
        width: calc(100vw - 30px);
    }

    .modal-body,
    .modal-header,
    .modal-footer,
    .card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .comment {
        padding-left: 0;
    }

    .comment .comment-author-ava {
        position: static;
        margin-bottom: 10px;
    }

    .comment .comment-body::before,
    .comment .comment-body::after {
        display: none;
    }

    .card-header.d-flex,
    .card-body.d-flex,
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 575.98px) {
    h1,
    .h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    h2,
    .h2 {
        font-size: clamp(24px, 7vw, 30px);
    }

    .site-header .site-logo img {
        max-width: 48vw;
    }

    .site-header .toolbar .toolbar-item {
        height: 40px;
        width: 34px;
    }

    .page-title .breadcrumbs {
        font-size: 15px;
    }

    #main_div > .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .product-card .product-card-body {
        padding-left: 9px;
        padding-right: 9px;
    }

    .product-card .product-title > a {
        line-height: 1.35;
    }

    .product-card.product-list {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .details-page-top-right-content .p-action-button,
    .details-page-top-right-content .btn {
        max-width: 100%;
    }

    .form-group .input-group {
        max-width: 100%;
    }

    .input-group > .form-control {
        min-width: 0;
    }

    .input-group .btn,
    .input-group-addon,
    .input-group-btn {
        flex: 0 0 auto;
    }

    .site-footer {
        text-align: center;
    }

    .site-footer .footer-social-links,
    .site-footer form {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .gateway_image {
        margin-left: auto;
        margin-right: auto;
    }

    .page-title .breadcrumbs {
        line-height: 1.5;
    }

    .p-action-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .site-header .menu-top-area .t-m-s-a,
    .site-header .menu-top-area .right-area {
        gap: 4px 8px;
    }

    .site-header .menu-top-area .track-order-link,
    .site-header .menu-top-area .main-link {
        font-size: 12px;
    }

    #main_div {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 12px;
    }

    .product-card .product-category > a,
    .product-card .product-title > a {
        font-size: 12px !important;
    }

    .product-card .product-price {
        font-size: 13px;
    }

    .product-card .rating-stars {
        white-space: nowrap;
    }
}

@media (max-width: 359.98px) {
    #main_div > .col-6,
    .brand-page .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-card .product-card-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-header .menu-top-area .track-order-link,
    .site-header .menu-top-area .main-link {
        font-size: 11px;
    }

    .site-header .toolbar .toolbar-item {
        margin-left: 2px;
        width: 32px;
    }
}