/* ============================================================
   Carousel fix — kategorije i brendovi (početna stranica)
   - Samo za DESKTOP/LAPTOP/TABLET (≥769px)
   - Mobilna verzija je netaknuta (cela pravila pod media query)
   ============================================================ */

/* Mobile: novi wrapper za strelice je sakriven (originalne strelice su
   i tako bile sakrivene na mobile preko index.css) */
#pcCategorys .carousel-arrows,
#pcBrands .carousel-arrows {
  display: none;
}

@media (min-width: 769px) {
  /* --- Sekcija: vidljiv overflow (strelice mogu izaći) --- */
  #pcCategorys,
  #pcBrands {
    overflow: visible !important;
    position: relative;
  }

  /* --- Scroll oblast: full width sa unutrašnjim paddingom --- */
  #pcCategorys .categories-container,
  #pcBrands .logos-flex {
    left: 0 !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scroll-behavior: auto;
  }

  #pcCategorys .categories-container::after,
  #pcBrands .logos-flex::after {
    content: "";
    flex: 0 0 1px;
    display: block;
  }

  #pcCategorys .categories-container.is-dragging,
  #pcBrands .logos-flex.is-dragging {
    cursor: grabbing;
  }

  #pcCategorys .categories-container.is-dragging *,
  #pcBrands .logos-flex.is-dragging * {
    pointer-events: none;
  }

  /* --- Perfect-fit dimenzije (JS postavlja varijable) --- */
  #pcCategorys .categories-container {
    --cat-w: 211px;
    --cat-h: 240px;
  }

  #pcCategorys .category-item {
    width: var(--cat-w) !important;
    height: var(--cat-h) !important;
    flex: 0 0 var(--cat-w) !important;
  }

  #pcCategorys .category-item .card-stand {
    width: var(--cat-w) !important;
    height: calc(var(--cat-h) * 0.44) !important;
  }

  #pcCategorys .category-item .custom-card img {
    width: calc(var(--cat-w) * 0.55) !important;
    height: calc(var(--cat-h) * 0.55) !important;
    bottom: calc(var(--cat-h) * -0.29) !important;
  }

  #pcCategorys .category-item .category-title {
    width: var(--cat-w) !important;
  }

  #pcBrands .logos-flex {
    --br-size: 196px;
  }

  #pcBrands .logos-flex > .custom-card {
    width: var(--br-size) !important;
    height: var(--br-size) !important;
    flex: 0 0 var(--br-size) !important;
  }

  #pcBrands .logos-flex > .custom-card img {
    width: calc(var(--br-size) * 0.76) !important;
    height: calc(var(--br-size) * 0.76) !important;
  }

  #pcBrands .logos-flex > .custom-card img[src$="/hp.png"],
  #pcBrands .logos-flex > .custom-card img[src$="/dell.png"] {
    width: calc(var(--br-size) * 0.61) !important;
    height: calc(var(--br-size) * 0.61) !important;
  }

  #pcBrands .logos-flex > .custom-card img[src$="/beko.png"] {
    width: calc(var(--br-size) * 0.66) !important;
    height: calc(var(--br-size) * 0.66) !important;
  }

  /* --- Wrapper za strelice (ispod karusela, levo poravnat) --- */
  #pcCategorys .carousel-arrows,
  #pcBrands .carousel-arrows {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-left: 24px;
  }

  /* --- Strelica: 32x32 kružna sa 1.5px border --- */
  #pcCategorys .carousel-arrows .carousel-arrow,
  #pcBrands .carousel-arrows .carousel-arrow {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #7B5EAB !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #7B5EAB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  }

  #pcCategorys .carousel-arrows .carousel-arrow:hover,
  #pcBrands .carousel-arrows .carousel-arrow:hover {
    background: #7B5EAB !important;
    background-color: #7B5EAB !important;
    color: #ffffff !important;
  }

  #pcCategorys .carousel-arrows .carousel-arrow:active,
  #pcBrands .carousel-arrows .carousel-arrow:active {
    transform: scale(0.95) !important;
  }

  #pcCategorys .carousel-arrows .carousel-arrow svg,
  #pcBrands .carousel-arrows .carousel-arrow svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
  }

  #pcCategorys .carousel-arrows .carousel-arrow svg path,
  #pcBrands .carousel-arrows .carousel-arrow svg path {
    stroke: currentColor !important;
  }
}