/* ============================================================
   product-page-align.css
   Usklađuje stranice sa proizvodima (kategorije, podkategorije,
   podkategorije 2, brendovi, promo/super popusti) sa HOME
   stranicom i headerom. Samo PC (desktop) verzija.

   NE modifikuje originalne fajlove - ovo je override koji se
   učitava POSLEDNJI, pa pobeđuje custom-page.css po redosledu.
   ============================================================ */

/* ===== PROBLEM 1: širina sadržaja = širina headera =====
   Header (#pcHeader .flex-container) i HOME sekcije koriste
   width:95%; max-width:1800px; margin:0 auto.
   #pageContainer je bio 1400/1600px sa 20px bočnog padding-a,
   pa je sadržaj bio uži i pomeren ~120px u odnosu na header. */
@media (min-width: 500px) {
  #pageContainer {
    width: 95%;
    max-width: 1800px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1024px) {
  #pageContainer {
    /* override max-width:1600px iz custom-page.css */
    max-width: 1800px;
  }
}

/* ===== PROBLEM 2: kartice identične HOME karticama =====
   border-radius, box-shadow, padding, veličina slike, raspored
   i fontovi su već isti (custom-page.css + clone.css). Ostaju dve
   sitne razlike koje ovde poravnavamo da bi kartice bile IDENTIČNE. */
@media (min-width: 500px) {
  /* Hover na slici: ista animacija kao na home (0.3s ease),
     custom-page.css je koristio 0.5s cubic-bezier !important. */
  #products .custom-card img {
    transition: transform 0.3s ease !important;
  }

  /* Naziv kategorije/brenda iznad proizvoda: capitalize kao na home
     (custom-page.css ga nije imao, pa su nazivi bili malim slovima). */
  #products .title-c h6 {
    text-transform: capitalize;
  }

  /* ===== Korpa ISTE veličine kao na HOME stranici =====
     clone.css globalno forsira .cart-container na 50px (svg 24px) !important,
     pa je korpa na kategorijama bila MANJA od home (65px / svg 28px).
     #products .cart-container je specifičniji od .cart-container, pa sa
     !important pobeđuje i izjednačava korpu sa home. Home ne učitava ovaj
     fajl niti ima #products; mobilni (<500px) netaknut. */
  #products .cart-container {
    width: 65px !important;
    height: 65px !important;
  }

  #products .cart-container svg {
    width: 28px !important;
    height: 28px !important;
  }
}