/*
 * TalarTozi - visual / responsive fixes (loaded last, after all other theme css).
 * Colors and design are intentionally unchanged: only broken layout is fixed here.
 * The include uses filemtime() as version, so every change of this file busts the browser cache automatically.
 */

/* search page: the filter box had "overflow: scroll" (leftover of an old drawer design) -> empty scrollbars on mobile */
.search-box-section-container {
    overflow: visible !important;
}

/* "overflow: scroll" always draws (empty) scrollbars; "auto" shows them only when the content really overflows */
.dashboard-menu-sidebar-container {         /* dashboard / profile settings tabs */
    overflow-x: auto !important;
    scrollbar-width: none;
}
.dashboard-menu-sidebar-container::-webkit-scrollbar { display: none; }
.notifications-dropdown-menu-items,        /* navbar dropdown */
.chat_messages_wrapper {                   /* chat */
    overflow-y: auto !important;
}
@media screen and (max-width: 900px) {
    nav { overflow-y: auto !important; }   /* mobile side menu */
}

/* shop page: the cover keeps its height (covers are 1280x333) even while it loads or when it fails,
   otherwise the avatar (positioned for a cover above it) sits on top of the shop title */
.store-profile-thumbnail {
    display: block;
    aspect-ratio: 1280 / 333;
    object-fit: cover;
    background: #f1eef3;
    color: transparent; /* hides the alt text / broken image label */
    font-size: 0;
}

/* long words / links (telegram, whatsapp links in ads) ran out of their boxes on mobile.
   only words that don't fit are broken, normal text is not affected */
body {
    overflow-wrap: break-word;
}
.new_product_content_wrapper_detail_content,
.new_product_content_wrapper_detail_content a,
.store-profile-summary-text,
.chat_message_content,
.store-info-list-item-content,
.secondary-text {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* shop page tabs: one swipeable row on small screens (the last tab was cut off) */
@media screen and (max-width: 672px) {
    .container--tabs .nav-tabs {
        float: none;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .container--tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .container--tabs .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }
    .container--tabs .nav-tabs > li > a {
        float: none;
        white-space: nowrap;
    }
}