/* RoVanzio V52 - carusel mobil 2 randuri, accordion sub categoria apasata */
.rzv52-mobile-cats-track { display:none; }

@media (max-width:650px) {
  body.rx-home .rx-final-cats-section {
    padding: 30px 0 28px !important;
    overflow: hidden !important;
  }

  body.rx-home .rx-final-cats-section > h1 {
    text-align: left !important;
    font-size: 27px !important;
    line-height: 1.14 !important;
    margin: 0 0 20px !important;
    padding: 0 20px !important;
    font-weight: 900 !important;
  }

  /* Structura server-side ramane sursa de adevar, dar nu este afisata pe mobil. */
  html body.rx-home .rx-final-cats-section > .rx-final-wrap {
    display: none !important;
  }

  /* Protectie daca browserul mai are temporar DOM generat de V50/V51. */
  html body.rx-home .rx-final-cats-section .rzv50-mobile-cats-track,
  html body.rx-home .rx-final-cats-section .rzv51-mobile-cats-track {
    display: none !important;
  }

  body.rx-home .rzv52-mobile-cats-track {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.rx-home .rzv52-mobile-cats-scroll {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    padding: 0 20px 12px !important;
    margin: 0 !important;
    touch-action: pan-x !important;
  }

  body.rx-home .rzv52-mobile-cats-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.rx-home .rzv52-mobile-cats-grid {
    display: grid !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100px !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
    width: max-content !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
  }

  body.rx-home .rzv52-mobile-cell {
    box-sizing: border-box !important;
    width: 100px !important;
    min-width: 100px !important;
    min-height: 112px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 var(--rzv52-panel-space, 0px) !important;
    overflow: visible !important;
    transition: padding-bottom .18s ease !important;
  }

  body.rx-home .rzv52-mobile-cat {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100px !important;
    min-width: 100px !important;
    height: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3f4447 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    scroll-snap-align: start !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: inherit !important;
  }

  body.rx-home a.rzv52-mobile-cat { text-decoration: none !important; }

  body.rx-home .rzv52-mobile-cat-icon {
    box-sizing: border-box !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.55),
                inset 0 -6px 14px rgba(0,47,52,.08),
                0 7px 15px rgba(0,47,52,.12) !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  }

  body.rx-home .rzv52-mobile-cat-icon img {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    margin: 0 !important;
    filter: drop-shadow(0 3px 3px rgba(0,47,52,.18)) !important;
  }

  body.rx-home .rzv52-mobile-cat-icon i {
    font-size: 32px !important;
    line-height: 1 !important;
    color: #3f4447 !important;
  }

  body.rx-home .rzv52-mobile-cat-label {
    width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    color: #3f4447 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 1px !important;
  }

  body.rx-home .rzv52-mobile-cat:active .rzv52-mobile-cat-icon {
    transform: scale(.96) !important;
  }

  body.rx-home .rzv52-mobile-cell.is-open .rzv52-mobile-cat-icon {
    border-color: #3f4447 !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.62),
                inset 0 -6px 14px rgba(63,68,71,.12),
                0 9px 18px rgba(0,47,52,.18) !important;
  }

  body.rx-home .rzv52-mobile-cell.is-open .rzv52-mobile-cat-label {
    font-weight: 800 !important;
  }

  /* Panoul apartine efectiv categoriei: este ancorat imediat sub cardul ei.
     Spatiul sau este rezervat in rand prin --rzv52-panel-space, astfel randul
     urmator este impins in jos si panoul nu mai apare la capatul caruselului. */
  body.rx-home .rzv52-mobile-inline-panel {
    display: none !important;
    position: absolute !important;
    box-sizing: border-box !important;
    top: 118px !important;
    left: 0;
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #d8e3e7 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(0,47,52,.10) !important;
    z-index: 25 !important;
    overflow: visible !important;
  }

  body.rx-home .rzv52-mobile-cell.is-open .rzv52-mobile-inline-panel {
    display: block !important;
  }

  body.rx-home .rzv52-mobile-inline-panel:before {
    content: "" !important;
    position: absolute !important;
    top: -9px !important;
    left: var(--rzv52-arrow-left, 48px) !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-left: 1px solid #d8e3e7 !important;
    border-top: 1px solid #d8e3e7 !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-panel-content {
    padding: 16px 18px 18px !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-panel-top {
    padding: 0 0 13px !important;
    border-bottom: 1px solid #e9eef0 !important;
    margin: 0 0 10px !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-all-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    color: #3f4447 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-all-link strong {
    font-weight: 900 !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-all-link span {
    color: #8b9296 !important;
    font-weight: 400 !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-subcats-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-subcats-list a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 42px !important;
    padding: 9px 2px !important;
    border-bottom: 1px solid #eef2f3 !important;
    color: #3f4447 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-subcats-list a:last-child {
    border-bottom: 0 !important;
  }

  body.rx-home .rzv52-mobile-inline-panel .rx-final-subcats-list a i,
  body.rx-home .rzv52-mobile-inline-panel .rx-final-all-link i {
    flex: 0 0 auto !important;
  }

  body.rx-home .rzv52-mobile-scroll-indicator {
    position: relative !important;
    width: 92px !important;
    height: 4px !important;
    margin: 4px auto 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #d9dfe1 !important;
  }

  body.rx-home .rzv52-mobile-scroll-thumb {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 4px !important;
    min-width: 22px !important;
    border-radius: 999px !important;
    background: #697276 !important;
    transform: translateX(0);
    will-change: transform !important;
  }
}

@media (max-width:380px) {
  body.rx-home .rzv52-mobile-cats-grid {
    grid-auto-columns: 92px !important;
    column-gap: 10px !important;
  }
  body.rx-home .rzv52-mobile-cell,
  body.rx-home .rzv52-mobile-cat {
    width: 92px !important;
    min-width: 92px !important;
  }
  body.rx-home .rzv52-mobile-cat-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
  body.rx-home .rzv52-mobile-cat-icon img {
    width: 58px !important;
    height: 58px !important;
  }
  body.rx-home .rzv52-mobile-cat-label {
    font-size: 13px !important;
  }
}