/* MOBILE OVERRIDES FOR HOMEPAGE (front-page.php) */

/* 1. Global Reset & Container Limits for Mobile */
@media (max-width: 991px) {
  html, body, .wrapper, main, .main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent CSS grid item overflow by forcing min-width: 0 */
  main > section,
  main > div,
  section,
  .hero-complex, 
  .benefits-block, 
  .main-listing, 
  .main-categories, 
  .news-block, 
  .stories-block, 
  .services-complex, 
  .about-level, 
  .manifesto-level, 
  .awards-block, 
  .certificates, 
  .stages, 
  .accessories, 
  .edge-carousels-section, 
  .reviews-level, 
  .actor-block-wrap {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
  
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Align section titles precisely */
  main h2, 
  section h2, 
  .container h2, 
  h2.about-level__title, 
  h2.services-complex__main-title, 
  h2.edge-carousels-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
}

/* 2. Header Responsiveness (Approved layout v1) */
@media (max-width: 991px) {
  .header__top-nav, 
  .header__bottom-nav, 
  .header__bottom-right,
  .header__top-left {
    display: none !important;
  }
  
  .header__logo img {
    max-height: 38px !important;
    width: auto !important;
  }

  .header__bottom-wrapper {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Иконки справа с отступом от края */
  .header__buttons {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Скрываем поиск на мобильном */
  .header__search {
    display: none !important;
  }
}

/* 3. Hero Section Block Premium Mobile Styling (Block 2) */
@media (max-width: 991px) {
  .hero-complex__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .hero-complex__slider-wrapper {
    min-height: 320px !important;
    height: 320px !important;
    border-radius: 16px !important;
  }

  .hero-slide {
    height: 320px !important;
    min-height: 320px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    background-color: #1a1b1c !important;
  }

  /* Title Layout alignment fixes */
  .hero-slide__title {
    font-size: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
  }

  /* Scaling the giant percentage text */
  .hero-slide__title > span:first-child {
    font-size: 18px !important;
    margin-left: 0 !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
  }

  .hero-slide__title > span:last-child {
    font-size: 64px !important;
    letter-spacing: -2px !important;
    line-height: 0.85 !important;
    font-weight: 700 !important;
  }

  .hero-slide__title > span:last-child span {
    font-size: 64px !important;
    margin-top: 0 !important;
    margin-right: 2px !important;
  }

  /* Scaling the subtitle */
  .hero-slide__subtitle {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin-top: 6px !important;
    font-weight: 800 !important;
  }

  .hero-slide__footer {
    margin-top: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero-slide__buttons {
    display: none !important;
  }

  .hero-slide__nav-wrapper {
    bottom: 20px !important;
    top: auto !important;
    right: 20px !important;
    gap: 10px !important;
    position: absolute !important;
    z-index: 10 !important;
  }

  .hero-slide__counter {
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  .hero-slide__arrow-prev,
  .hero-slide__arrow-next {
    width: 32px !important;
    height: 32px !important;
  }

  /* Robust 2-Column Grid for info cards on mobile */
  .hero-complex__cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-card {
    min-height: 110px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
  }

  .hero-card__title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
  }

  .hero-card__bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-top: 15px !important;
  }

  .hero-card__subtitle {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    opacity: 0.8;
    max-width: 80% !important;
  }

  .hero-card__icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 480px) {
  .hero-complex__slider-wrapper {
    min-height: 280px !important;
    height: 280px !important;
  }
  
  .hero-slide {
    height: 280px !important;
    min-height: 280px !important;
  }

  .hero-slide__title > span:last-child {
    font-size: 52px !important;
  }

  .hero-slide__title > span:last-child span {
    font-size: 52px !important;
  }

  .hero-slide__subtitle {
    font-size: 20px !important;
  }

  .hero-complex__cards {
    gap: 8px !important;
  }

  .hero-card {
    min-height: 100px !important;
    padding: 12px !important;
  }
}

/* 4. Why Choose Us Block Premium Mobile Styling (Block 3) */
@media (max-width: 991px) {
  /* Force modern card sneak-peek layout with high specificity to override inline style blocks */
  .benefits-block .benefits-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 15px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .benefits-block .benefits-scroll .benefits-card {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
    min-height: 220px !important;
    height: auto !important;
    padding: 20px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .benefits-block .benefits-scroll .benefits-card-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .benefits-block .benefits-scroll .benefits-card-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .benefits-block .benefits-scroll .benefits-card-icon {
    width: 36px !important;
    height: 36px !important;
    margin-top: 15px !important;
  }
}

/* 5. Section Header Flex & Buttons */
@media (max-width: 768px) {
  .section-header-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }

  .btn-unified {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    border: 1px solid #ccc !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    background: transparent !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
}

/* 6. Mini-Card & Listing Mobile Cleanup (Block 4) */
@media (max-width: 991px) {
  .listing {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Commented out all homepage-specific mini-card overrides to match catalog and categories design exactly */
  /*
  .listing .mini-card, 
  .listing .listing__element {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    border: 1px solid #f0f0f0 !important;
  }

  .mini-card__top {
    position: relative !important;
    width: 100% !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .mini-card__images, 
  .mini-card__image,
  .mini-card__image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .mini-card__badges {
    top: 7px !important;
    left: 12px !important;
    gap: 6px !important;
    display: flex !important;
    position: absolute !important;
    z-index: 5 !important;
  }

  .mini-card__badges .mini-card__cat-inner {
    padding: 4px 8px !important;
    border-radius: 4px !important;
  }

  .mini-card__badges .mini-card__cat-inner span {
    font-size: 11px !important;
  }

  .mini-card__cats {
    bottom: 12px !important;
    left: 12px !important;
    position: absolute !important;
    z-index: 5 !important;
  }

  .mini-card__cats .mini-card__cat-inner {
    padding: 4px 10px !important;
    border-radius: 20px !important;
  }

  .mini-card__cats .mini-card__cat-inner span {
    font-size: 11px !important;
  }

  .mini-card__content {
    display: block !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .mini-card__content-item {
    margin-bottom: 10px !important;
  }

  .mini-card__link.h4 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0 !important;
    height: auto !important;
  }

  .mini-card__price-block {
    margin-bottom: 14px !important;
    display: block !important;
  }

  .mini-card__price-block .mini-card__content-item {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  .mini-card__price-block span {
    font-size: 12px !important;
    color: #777 !important;
  }

  .mini-card__old-price {
    font-size: 13px !important;
    color: #999 !important;
    text-decoration: line-through !important;
  }

  .mini-card__price.h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
  }

  .mini-card__price-meter-block {
    font-size: 12px !important;
    color: #666 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .mini-card__price-meter {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
  }

  .mini-card__content-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 12px !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .mini-card__content-bottom form {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .mini-card__like {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .mini-card__like svg {
    width: 20px !important;
    height: 20px !important;
  }

  .mini-card__like-count {
    font-size: 12px !important;
    color: #666 !important;
  }
  */
}

@media (max-width: 480px) {
  /* Commented out to match catalog design */
  /*
  .mini-card__top {
    height: 200px !important;
  }
  
  .mini-card__content {
    padding: 12px !important;
  }

  .mini-card__link.h4 {
    font-size: 14px !important;
  }

  .mini-card__price.h4 {
    font-size: 15px !important;
  }
  */
}

/* 7. Main Categories Section (.main-categories) */
@media (max-width: 991px) {
  .main-categories__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .main-categories__item {
    position: relative !important;
    padding: 20px !important;
    background: #f4f5f6 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .main-categories__item h4,
  .main-categories__item .h4 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .main-categories__links {
    margin-bottom: 20px !important;
    padding-left: 0 !important;
    list-style: none !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .main-categories__links li {
    margin-bottom: 8px !important;
  }

  .main-categories__links li a {
    font-size: 13px !important;
    color: #1a1a1a !important;
  }

  .main-categories__item-img {
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    width: 90px !important;
    height: 90px !important;
    opacity: 0.15 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .main-categories__item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .main-categories__link-all {
    position: relative !important;
    z-index: 3 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

@media (max-width: 576px) {
  .main-categories__item {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 180px !important;
  }
}

/* 8. Stories Section (.stories-block) - Clean horizontal scroll, compact format */
@media (max-width: 991px) {
  .stories-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding-bottom: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  .story-card-wrapper {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    scroll-snap-align: start !important;
  }

  .story-card-image {
    width: 140px !important;
    height: 210px !important;
    padding-top: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  .story-card-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    color: #333 !important;
  }
}

/* 9. Services (Kitchen Selections) */
@media (max-width: 768px) {
  .services-complex__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .services-complex__card {
    height: 140px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .services-complex__title {
    font-size: 16px !important;
  }

  .services-complex__subtitle {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    max-width: 80% !important;
  }

  .services-complex__icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 10. About Section */
@media (max-width: 768px) {
  .about-level__wrapper {
    flex-direction: column !important;
    gap: 24px !important;
    display: flex !important;
  }

  .about-level__title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .about-level__text p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
}

/* 11. Manifesto Banner */
@media (max-width: 991px) {
  .manifesto-level__banner {
    height: 320px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .manifesto-level__content h2,
  .manifesto-level__content h2[style*="font-size: 56px"] {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    padding: 0 16px !important;
  }

  .manifesto-level__content a {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}

/* 12. Scroll Navigation Controls Reset for mobile (Blocks 3, 6, 11) with high specificity */
@media (max-width: 991px) {
  .benefits-block .awards-controls,
  .stories-block .awards-controls,
  .awards-block .awards-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    padding: 0 4px !important;
  }

  .benefits-block .awards-progress-bar,
  .stories-block .awards-progress-bar,
  .awards-block .awards-progress-bar {
    flex-grow: 1 !important;
    margin-right: 20px !important; /* Spacing before buttons */
    width: auto !important;
    max-width: calc(100% - 140px) !important;
  }

  .benefits-block .awards-progress-bar-fill,
  .stories-block .awards-progress-bar-fill,
  .awards-block .awards-progress-bar-fill {
    background: #1a1a1a !important; /* Premium dark indicator */
  }

  .benefits-block .awards-nav-btns,
  .stories-block .awards-nav-btns,
  .awards-block .awards-nav-btns {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  .benefits-block .awards-pagination-text,
  .stories-block .awards-pagination-text,
  .awards-block .awards-pagination-text {
    font-size: 12px !important;
    margin-right: 5px !important;
    color: #444 !important;
    flex-shrink: 0 !important;
  }

  .benefits-block .awards-btn,
  .stories-block .awards-btn,
  .awards-block .awards-btn {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    flex-shrink: 0 !important;
  }
}

/* 13. Certificates Block */
@media (max-width: 768px) {
  .certificates__list {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .certificates__item {
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .certificates__item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
}

/* 14. Stages Block (Order Steps) */
@media (max-width: 768px) {
  .stages__wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .stages__left, 
  .stages__right {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    min-width: 0 !important;
  }

  .stages__left h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .stages__images {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .stages__image img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .stages__buttons {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 10 !important;
  }

  .stages__button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    color: #1a1a1a !important;
  }

  .stages__button svg {
    width: 12px !important;
    height: 12px !important;
  }

  .stages__right {
    margin-top: 15px !important;
  }

  .stages__descriptions {
    margin-bottom: 15px !important;
    min-height: 80px !important;
  }

  .stages__description {
    display: none !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .stages__description.is-active {
    display: flex !important;
  }

  .stages__description span {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--color-orange-200, #ff8f00) !important;
    line-height: 1 !important;
  }

  .stages__description p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .stages__list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
    list-style: none !important;
  }

  .stages__list li {
    font-size: 12px !important;
    padding: 8px 14px !important;
    background: #f0f2f5 !important;
    border-radius: 20px !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
  }

  .stages__list li::before {
    content: "" !important;
    display: none !important;
  }

  .stages__list li.is-active {
    background: #b47873 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
}

/* 14. Accessories Section */
@media (max-width: 768px) {
  .accessories__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .accessories__item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #f4f5f6 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .accessories__link {
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }

  .accessories__link img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .accessories__content {
    padding: 16px !important;
  }

  .accessories__content .flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .accessories__content .h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  .accessories__price {
    font-size: 13px !important;
  }

  .accessories__top p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* 15. Edge Carousel */
@media (max-width: 991px) {
  .edge-carousel {
    height: 100px !important;
    margin-bottom: 12px !important;
  }

  .edge-carousels-section .edge-carousel img {
    height: 100px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    margin-right: 10px !important;
    border-radius: 12px !important;
  }

  .edge-carousels-subtitle {
    font-size: 13px !important;
  }
}

/* 16. Reviews Section */
@media (max-width: 768px) {
  .reviews-level__tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .reviews-level__tabs::-webkit-scrollbar {
    display: none !important;
  }

  .reviews-level__tab {
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  .reviews-level__card {
    padding: 20px !important;
    border-radius: 12px !important;
    min-height: 220px !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }

  .reviews-level__card-author {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .reviews-level__card-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}


/* 18. Promo & News Grids Layout Stack overrides */
@media (max-width: 991px) {
  .news-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .news-grid .news-card {
    flex: 1 1 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .news-card .section-header-flex {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }
}
@media (max-width: 576px) {
  .news-grid .news-card {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* 19. Reviews Section Horizontal Scroll Sneak-peek Layout */
@media (max-width: 991px) {
  .reviews-level__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 15px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    box-sizing: border-box !important;
  }

  .reviews-level__card {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 220px !important;
    padding: 20px !important;
  }

  .reviews-level__card-author {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .reviews-level__card-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }

  .reviews-level__controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    padding: 0 4px !important;
  }

  .reviews-level__card-bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .reviews-level__progress {
    flex-grow: 1 !important;
    margin-right: 20px !important; /* Spacing before buttons */
    width: auto !important;
    max-width: calc(100% - 140px) !important;
  }

  .reviews-level__progress-fill {
    background: #1a1a1a !important; /* Premium dark indicator */
  }

  .reviews-level__nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  .reviews-level__counter {
    font-size: 12px !important;
    margin-right: 5px !important;
    color: #444 !important;
    flex-shrink: 0 !important;
  }

  .reviews-level__arrow {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    flex-shrink: 0 !important;
  }
}

/* 20. Slick Slider Height Override for Product Card Image (Block 4) */
@media (max-width: 991px) {
  /* Commented out so homepage mini-cards match the catalog's aspect-ratio, display dots, and have correct background colors */
  /*
  .listing .mini-card .mini-card__top,
  .listing .mini-card .mini-card__images,
  .listing .mini-card .mini-card__images .slick-list,
  .listing .mini-card .mini-card__images .slick-track,
  .listing .mini-card .mini-card__images .mini-card__image,
  .listing .mini-card .mini-card__images .mini-card__image a {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  .listing .mini-card .mini-card__images .mini-card__image img {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  */
}

/* 21. Hero Slide Navigation Alignment Grouping to Right */
@media (max-width: 991px) {
  .hero-slide__nav-wrapper {
    width: auto !important;
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
    margin: 0 !important;
  }
  
  .hero-slide__nav {
    width: auto !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
  
  .hero-slide__arrow-prev,
  .hero-slide__arrow-next,
  .hero-slide__arrow {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* 22. Responsive Visibility Overrides */
@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: inline-flex !important;
  }
  .mobile-only-flex {
    display: flex !important;
  }
}

/* Mobile Header Fixes — синхронно с style.css / header.php */
@media (max-width: 1024px) {
    .header__bottom .header__search {
        display: none !important;
    }

    .header__bottom > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .header__bottom-wrapper {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 8px 0 !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        transform: none !important;
    }

    .header__logo {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .header__logo img {
        max-height: 44px !important;
        width: auto !important;
    }

    .header__buttons {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 6px !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .header__buttons a.header__button-wa {
        display: none !important;
    }

    .header__buttons a {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header__buttons a svg {
        width: 18px !important;
        height: 18px !important;
    }

    .header__like-wrap,
    .header__bottom-wrapper > div[style*="position: relative"] {
        position: relative !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        overflow: visible !important;
    }

    .header__button-like {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header__button-like svg {
        width: 18px !important;
        height: 18px !important;
    }

    .header__like-count {
        position: absolute !important;
        top: 10px !important;
        left: 24px !important;
        right: auto !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        z-index: 10 !important;
    }

    .header__mob-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 0 6px !important;
        padding: 0 !important;
        order: 99 !important;
        flex-shrink: 0 !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .header__mob-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        background-color: #f5f5f7 !important;
        border: none !important;
        border-radius: 50% !important;
        margin: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 21 !important;
    }

    .header__mob-menu-toggle span:not(.header__mob-menu-toggle-like-count) {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 2px !important;
        background-color: #1a1a1a !important;
        transform: translate(-50%, -50%) !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }

    .header__mob-menu-toggle span:not(.header__mob-menu-toggle-like-count)::before,
    .header__mob-menu-toggle span:not(.header__mob-menu-toggle-like-count)::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #1a1a1a !important;
        transform: none !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }

    .header__mob-menu-toggle span:not(.header__mob-menu-toggle-like-count)::before {
        top: -5px !important;
    }

    .header__mob-menu-toggle span:not(.header__mob-menu-toggle-like-count)::after {
        top: 5px !important;
    }

    .header__mob-menu-toggle.is-open span:not(.header__mob-menu-toggle-like-count) {
        background-color: transparent !important;
    }

    .header__mob-menu-toggle.is-open span:not(.header__mob-menu-toggle-like-count)::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    .header__mob-menu-toggle.is-open span:not(.header__mob-menu-toggle-like-count)::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }

    .header__mob-menu-toggle-like-count {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .header__bottom-wrapper {
        padding: 8px 0 !important;
        gap: 4px !important;
    }
    .header__logo img {
        max-height: 38px !important;
    }
    .header__buttons {
        gap: 4px !important;
        margin-left: auto !important;
    }
    .header__buttons a {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .header__buttons a svg {
        width: 16px !important;
        height: 16px !important;
    }
    .header__like-wrap,
    .header__bottom-wrapper > div[style*="position: relative"] {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }
    .header__button-like {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .header__button-like svg {
        width: 16px !important;
        height: 16px !important;
    }
    .header__like-count {
        top: 8px !important;
        left: 20px !important;
        right: auto !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        font-size: 8px !important;
    }
    .header__mob-menu,
    .header__mob-menu-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin-left: 4px !important;
    }
}