/* ============================================================
   KARTICA PROIZVODA — zajednička mreži kategorije, popisu povezanih na stranici proizvoda
   i sadnicama na stranici objave

   Prije je živjela samo u styles/category.css, pa su povezani artikli na stranici proizvoda
   imali VLASTITE (.pd-rc-*) stilove i vidljivo se razlikovali od istih kartica u mreži.
   Sad je jedan izvor istine, kao i markup (scripts/product-card.js).

   Četiri stranice je učitavaju: kategorija.html, proizvod.html i objava.html (sekcije
   `bocni` i `artikli` crtaju sadnice kroz PlantGardenCard.card()), te index.html — ondje
   NE zbog .kg-card, nego zato što klasična kartica naslovnice (.pcard, tProduct() u
   chrome.js) posuđuje stepper (.kg-qty*), „Usporedi" (.kg-cmp) i „Ušteda" (.kg-price-save).
   Tako izgled steppera ima jedan izvor za obje stranice i ne može se razići — što je i bio
   klijentov zahtjev („iste mogućnosti kao na kategoriji"). Ostatak pravila iz ove datoteke
   naslovnica ne koristi; sva su .kg-* pa ne mogu dirati njezin markup.

   Raspored mreže (.kg-grid, .kg-empty) NIJE ovdje — on je specifičan za stranicu i ostaje u
   category.css; iz istog razloga .po-side-grid / .po-list-items ostaju u post.css.
   ============================================================ */

/* position:relative je nosac rastegnute poveznice (.kg-link::after niže), ne ukras. */
.kg-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-xs);transition:var(--transition-card)}
/* Poveznica je oko naziva, ali njen ::after pokriva cijelu karticu — klik bilo gdje po
   kartici vodi na proizvod, a pristupačno ime poveznice ostaje naziv sorte. Gumbi (količina,
   "U košaricu", "Usporedi") moraju biti IZNAD tog sloja, inače ih pokrivac proguta. */
.kg-link{color:inherit;text-decoration:none}
.kg-link::after{content:"";position:absolute;inset:0;z-index:1}
.kg-card:focus-within{box-shadow:var(--shadow-md)}
.kg-link:focus-visible{outline:none}
.kg-card:focus-within{outline:2px solid var(--leaf);outline-offset:2px}
.kg-qty,.kg-actions{position:relative;z-index:2}
.kg-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
/* Fotografija se blago približi, naziv potamni u zeleno — bez toga je hover bio podizanje od
   2 px i sjena s 0.07 na 0.09 prozirnosti, dakle ispod praga primjetnosti. Isti obrazac koji
   .pcard na naslovnici ima otprije; kartica proizvoda i objave ga nisu naslijedile. */
.kg-card:hover .kg-photo img{transform:scale(1.04)}
.kg-card:hover .kg-name{color:var(--leaf-d)}
.kg-photo{position:relative;aspect-ratio:4/3;background-color:var(--pg-sand-100);overflow:hidden}
.kg-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.kg-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kg-badge{padding:4px 9px 3px;border-radius:var(--radius-xs);font:600 10.5px/1.1 'Poppins',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.kg-badge--grown{background:var(--leaf-d)}
.kg-badge--sale{background:var(--brick)}
.kg-body{display:flex;flex-direction:column;flex:1;gap:4px;padding:16px 18px 18px}
.kg-label{font:600 10.5px/1 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kg-name{font:600 16px/1.25 'Poppins',sans-serif;color:var(--plum);margin:2px 0 2px;transition:var(--transition-control)}
.kg-pot{font:400 12.5px/1.4 'Poppins',sans-serif;color:var(--muted);margin:0 0 10px}
.kg-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.kg-price-now{font:600 18px/1 'Poppins',sans-serif;color:var(--plum)}
.kg-price-was{font:500 13px/1 'Poppins',sans-serif;color:var(--faint);text-decoration:line-through}
.kg-price-save{font:600 11.5px/1 'Poppins',sans-serif;color:var(--leaf-d)}
.kg-qty{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid var(--pg-sand-300);border-radius:var(--radius-pill);margin-bottom:12px}
.kg-qty-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--plum);font:600 15px/1 'Poppins',sans-serif;cursor:pointer;transition:var(--transition-control)}
.kg-qty-btn:hover{color:var(--leaf-d)}
/* Broj je <input type="number"> (količina se smije i upisati), ali izgleda kao dosadašnji
   broj: bez okvira i pozadine unutar pilule, ista širina (24px, prije min-width na <span>),
   isti font i poravnanje. Nativne strelice se skrivaju — stepper ima svoje +/−. */
.kg-qty-n{width:24px;min-width:24px;text-align:center;font:600 13px/1 'Poppins',sans-serif;color:var(--ink);border:0;background:none;padding:0;margin:0;-moz-appearance:textfield;appearance:textfield}
.kg-qty-n::-webkit-outer-spin-button,.kg-qty-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kg-qty-n:focus-visible{outline:2px solid var(--leaf-d);outline-offset:2px;border-radius:var(--radius-xs)}
.kg-actions{display:flex;gap:8px;margin-top:auto}
.kg-add{flex:1}
.kg-cmp.on{background:var(--leaf);border-color:var(--leaf);color:#fff}