/* Hstock Local Site CSS Fixes - v2
 * Comprehensive fixes for offline operation:
 * - Replaces broken swiper/grids
 * - Restores image display when lazy-loading components fail
 * - Restores product card / popular stores layout
 * - Ensures all content is visible without dynamic JS
 */

/* ============================================================
   1. CRITICAL: Reset broken swiper components
   ============================================================ */

/* The swiper JS doesn't load offline - convert to CSS grid */
.swiper {
    overflow: visible !important;
}

.swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    transform: none !important;
    width: 100% !important;
    transition: none !important;
}

.swiper-slide {
    flex: 0 0 auto !important;
    width: calc(20% - 13px) !important;
    min-width: 200px !important;
    max-width: 260px !important;
    height: auto !important;
}

/* Hero/main slider slides must be full-width, not 20% */
.main-slider-new .swiper-slide,
.home-slider .swiper-slide,
.hero-slider .swiper-slide,
.main-banner .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Product card swiper (Trending Items) - 5 columns on desktop */
.best-sellers_box .swiper-slide {
    width: calc(20% - 13px) !important;
}

/* Catalog category tabs swiper - 6 columns */
.catalog-category-tab__items.swiper .swiper-slide,
.catalog-category-tab-list.swiper .swiper-slide {
    width: calc(16.66% - 14px) !important;
}

/* ============================================================
   2. PRODUCT CARDS (Trending Items)
   ============================================================ */
.product-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.product-card__image {
    width: 100% !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
}

.product-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

.product-card__name {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 32px !important;
}

.product-card__count {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.product-card__statuses {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.product-card__statuses__item {
    font-size: 10px !important;
    padding: 2px 6px !important;
    background: #f1f5f9 !important;
    border-radius: 4px !important;
    color: #475569 !important;
}

/* Card good / favorites section */
.cardgood__favourites,
.profileList-card__favorite {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2 !important;
}

/* ============================================================
   3. POPULAR STORES (top-stores-item)
   ============================================================ */
.top-stores-item {
    background: #fff !important;
    border: 1px solid #fed7aa !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.top-stores-item--major-border {
    border: 1px solid #fed7aa !important;
}

.link-item-store {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.top-stores-image {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.top-stores-image img,
.top-stores-image .h-img-icon {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.top-stores-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.top-stores-rating {
    margin-bottom: 4px !important;
}

.top-stores-date {
    font-size: 11px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.top-stores-bottom {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: auto !important;
}

.top-stores-cash,
.top-stores-depo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: #475569 !important;
    padding: 2px 0 !important;
}

.top-stores-cash_body,
.top-stores-depo_body {
    flex: 1 !important;
}

.statuses-list {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* ============================================================
   4. CATALOG CATEGORY TABS (A/B/C services)
   ============================================================ */
.catalog-category-tab,
.catalog-category-tabs {
    margin-bottom: 24px !important;
}

.catalog-category-tab__list,
.catalog-category-tab__items,
.catalog-category-tab-list,
.catalog-category-tab-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

.catalog-category-tab__item,
.catalog-category-tab-item {
    flex: 0 0 auto !important;
    width: calc(16.66% - 10px) !important;
    min-width: 130px !important;
    max-width: 180px !important;
    display: block !important;
}

.catalog-category-tab__link,
.catalog-category-tab-item__link,
.catalog-category-tab__item > a,
.catalog-category-tab-item > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: background 0.2s !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.catalog-category-tab__link:hover,
.catalog-category-tab-item__link:hover,
.catalog-category-tab__item > a:hover,
.catalog-category-tab-item > a:hover {
    background: #f8fafc !important;
}

.catalog-category-tab__img,
.catalog-category-tab-item__img,
.catalog-category-tab__item img,
.catalog-category-tab-item img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
}

.catalog-category-tab__img img,
.catalog-category-tab-item__img img,
.catalog-category-tab__item img,
.catalog-category-tab-item img,
.catalog-category-tab__img .h-img-icon,
.catalog-category-tab-item__img .h-img-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.catalog-category-tab__name,
.catalog-category-tab-item__name,
.catalog-category-tab__item span,
.catalog-category-tab-item span {
    font-size: 12px !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
}

/* ============================================================
   5. MULTI-LEVEL CATALOG (A/B/C services grid)
   ============================================================ */
.multi-level-catalog-content {
    padding: 0 !important;
}

.multi-level-catalog-content-item {
    margin-bottom: 24px !important;
}

.multi-level-catalog-content-item-letter {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.multi-level-catalog-content-item-category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.multi-level-catalog-content-item-category-item {
    width: calc(10% - 8px) !important;
    min-width: 90px !important;
}

.multi-level-catalog-content-item-category-item__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    transition: background 0.2s !important;
    text-decoration: none !important;
    color: inherit !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.multi-level-catalog-content-item-category-item__main:hover {
    background: #f8fafc !important;
}

.multi-level-catalog-content-item-category-item__img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
}

.multi-level-catalog-content-item-category-item__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.multi-level-catalog-content-item-category-item__main a:not(:first-child) {
    font-size: 11px !important;
    color: #475569 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
}

/* ============================================================
   6. H-IMG-ICON (icon component fallback)
   ============================================================ */
.h-img-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.h-img-icon__size-md {
    width: 40px !important;
    height: 40px !important;
}

.h-img-icon img,
.h-img-icon svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

/* ============================================================
   7. HS-BUTTON (button component fallback)
   ============================================================ */
.hs-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    min-width: auto !important;
    box-sizing: border-box !important;
}

.hs-button--md {
    padding: 8px 16px !important;
    font-size: 14px !important;
    min-height: 36px !important;
}

.hs-button--primary {
    background: #ef4444 !important;
    color: #fff !important;
}

.hs-button--primary:hover {
    background: #dc2626 !important;
}

.hs-button--bold {
    font-weight: 600 !important;
}

.hs-button--full-width {
    width: 100% !important;
}

/* ============================================================
   8. HS-RATING (rating stars fallback)
   ============================================================ */
.hs-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.hs-rating__rate {
    color: #fbbf24 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.hs-rating__rating {
    font-size: 12px !important;
    color: #475569 !important;
    margin-left: 4px !important;
}

/* ============================================================
   9. VERIFIED ICON fallback
   ============================================================ */
.verified-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    color: #3b82f6 !important;
}

.verified-icon--shop,
.verified-icon--product {
    width: 16px !important;
    height: 16px !important;
}

/* ============================================================
   10. POPULAR SECTIONS TABS
   ============================================================ */
.hs-tabs-new {
    display: flex !important;
    gap: 4px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    list-style: none !important;
}

.hs-tabs-new__item {
    padding: 8px 16px !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s !important;
    list-style: none !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.hs-tabs-new__item.active {
    color: #ef4444 !important;
    border-bottom-color: #ef4444 !important;
}

.hs-tabs-new__item:hover {
    color: #ef4444 !important;
}

/* ============================================================
   11. HERO SECTION
   ============================================================ */
.home-hero-section,
.hero-section,
.home-section {
    padding: 24px 0 !important;
}

.home-hero-content {
    max-width: 100% !important;
}

/* Main homepage slider - fix broken flex/width */
.main-slider-new,
.main-slider-new .swiper-wrapper,
.main-slider-new .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.main-slider-new__slide-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    box-sizing: border-box !important;
    padding: 24px !important;
    border-radius: 16px !important;
    background: #111827 !important;
    overflow: hidden !important;
}

.main-slider-new__description {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 280px !important;
    color: #fff !important;
    z-index: 2 !important;
}

.main-slider-new__description-top {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}

.main-slider-new__description-bottom {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #e2e8f0 !important;
}

.main-slider-new picture,
.main-slider-new__image,
.main-slider-new img {
    flex: 0 0 auto !important;
    max-width: 50% !important;
    max-height: 320px !important;
    object-fit: contain !important;
    display: block !important;
}

.main-slider-new img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* ============================================================
   12. BEST SELLERS (Trending Items) HEADER
   ============================================================ */
.best-sellers__header,
.home-section-headline {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.popular-shops__items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.popular-shops__items .top-stores-item {
    width: calc(20% - 13px) !important;
    min-width: 180px !important;
    max-width: 240px !important;
    position: relative !important;
}

/* ============================================================
   13. BLOG SECTION
   ============================================================ */
.blog-section__items,
.blog-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-item,
.blog-section-item {
    width: calc(33.33% - 11px) !important;
    min-width: 250px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.footer {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    padding: 32px 0 !important;
    margin-top: 32px !important;
}

.footer a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: #fff !important;
}

/* ============================================================
   15. SITE NAV (added to all pages) - do not break
   ============================================================ */
.hs-site-nav {
    position: relative !important;
    z-index: 1000 !important;
}

/* ============================================================
   16. Hide broken/missing external elements
   ============================================================ */

/* Hide external widget iframes (LiveChat, Cloudflare CAPTCHA, etc.) */
iframe[src*="hcaptcha"],
iframe[src*="turnstile"],
iframe[src*="jivo"],
.jivo-widget,
.jivo-btn,
.replacer-jivo-widget,
.qc-floating {
    display: none !important;
}

/* Hide invisible images that didn't load (offsetWidth=0) but keep structure */
img[data-nimg="intrinsic"] {
    height: auto !important;
}

/* ============================================================
   17. PREVENT OVERFLOW ISSUES
   ============================================================ */
html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
}

#app,
.site-box,
.content {
    height: auto !important;
    min-height: 100vh !important;
}

.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .swiper-slide,
    .best-sellers_box .swiper-slide,
    .popular-shops__items .top-stores-item {
        width: calc(25% - 12px) !important;
    }

    .catalog-category-tab-item {
        width: calc(25% - 9px) !important;
    }

    .multi-level-catalog-content-item-category-item {
        width: calc(20% - 7px) !important;
    }
}

@media (max-width: 768px) {
    .swiper-slide,
    .best-sellers_box .swiper-slide,
    .popular-shops__items .top-stores-item,
    .catalog-category-tab-item {
        width: calc(33.33% - 11px) !important;
    }

    .multi-level-catalog-content-item-category-item {
        width: calc(25% - 6px) !important;
    }

    .blog-item,
    .blog-section-item {
        width: calc(50% - 8px) !important;
    }
}

@media (max-width: 480px) {
    .swiper-slide,
    .best-sellers_box .swiper-slide,
    .popular-shops__items .top-stores-item,
    .catalog-category-tab-item {
        width: calc(50% - 8px) !important;
    }

    .multi-level-catalog-content-item-category-item {
        width: calc(33.33% - 6px) !important;
    }

    .blog-item,
    .blog-section-item {
        width: 100% !important;
    }
}


/* Language Links Bar */
.lang-links-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}
.lang-links-bar a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
}
.lang-links-bar a:hover {
    background: #e8e0ff;
    color: #6841ea;
}
.lang-links-bar a.lang-active {
    background: #f0ebff;
    color: #6841ea;
    font-weight: 700;
}
.lang-links-bar a img.lang-flag {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}