/* =====================================================================
   URUN KARTI V2 — MINIMAL CSS
   Yerlesim/bosluk/kenarlik/renk/flex TAMAMEN Bootstrap 5 utility ile.
   Burada YALNIZCA Bootstrap'te KARSILIGI OLMAYANLAR var:
     - marka fontlari (Roboto / Roboto Condensed) ve birebir px boyutlar
     - packaging/warehouse SABIT satir yuksekligi (paket adedi ne olursa
       hizalama korunsun) + gorsel object-fit + 2-satir clamp
   Tumu .tpc-card altinda scope'lu. Grid responsive'ligi Bootstrap
   row-cols-* ile page template'te.
   ===================================================================== */
.tpc-card { font-family: 'Roboto', sans-serif; color: #222; }
.tpc-card .tpc-partno { font-size: 20px; line-height: 22px; }
.tpc-card .tpc-desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px; line-height: 17px; min-height: 34px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpc-card .tpc-price { font-size: 28px; line-height: 1; }
.tpc-card .tpc-price-unit { font-size: 14px; }
.tpc-card .tpc-img { height: 150px; object-fit: contain; }
.tpc-card .tpc-row { height: 32px; font-size: 15px; }   /* SABIT = hizalama */
/* Warehouse satirlari: Figma spec Roboto Bold 10px / lh 22 (Roboto+bold zaten kartta) */
.tpc-card .tpc-wh-row { font-size: 10px; line-height: 22px; }
/* Long warehouse names must not overflow the card: name truncates, stock value stays visible */
.tpc-card .tpc-wh-name { min-width: 0; }
/* Packaging satirlari: Figma spec Roboto Condensed Medium / lh 22 (boyut "Mixed" → mevcut kaldi) */
.tpc-card .tpc-pkg-row { font-family: 'Roboto Condensed', sans-serif; line-height: 22px; }
/* Product Detail + favori butonlari: Figma spec Roboto Medium 15px / lh 22; dikey padding 6px (~36px yukseklik) */
.tpc-card .tpc-detail-btn { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 15px; line-height: 22px; padding-top: 6px; padding-bottom: 6px; }
.tpc-card .tpc-hr { border-top-color: #E2E2E2; opacity: 1; }
.tpc-card .tpc-qtyinput { box-shadow: none; }
/* app.css'i notrle (JS sinif zorunlu): .product-frame-actions gri kutu + .category-stock 10px */
.tpc-card .product-frame-actions { background: none; border: 0; min-height: 0; }
/* Adet degeri: Figma spec Roboto Medium 12/22 (!important sart: app.css 10px!important'i ezmek icin) */
.tpc-card .category-stock.form-control { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px !important; line-height: 22px; padding: 0 .35rem; min-width: 0; }
/* Adet+sepet: satir yuksekligi HER viewport'ta sabit, GENISLIKLER ORANSAL.
   Onceki surumde -/+ 44px ve sepet 58px SABIT'ti; dar kolonda (row-cols-lg-4 ->
   ~143px ic genislik) sabitler 154px yer kapladigi icin daralmanin tamamini
   adet input'u yiyor, rakam kirpiliyordu. Artik ucu de birlikte kuculuyor. */
.tpc-card .product-frame-actions { height: 40px; }
.tpc-card .qty-box { min-width: 0; }
/* Sepet: satirin ~1/4'u; genis kartta eski 58px'i asmaz, dar kartta dokunulabilir kalir */
.tpc-card .tpc-cart { flex: 0 0 24%; min-width: 38px; max-width: 58px; padding-left: 0; padding-right: 0; font-size: 16px; line-height: 1; }
/* -/+ ve adet alani 1 : 2 : 1 oraninda — adet alani her zaman qty-box'in yarisi.
   max-width, genis kartta butonlarin gereksiz sismesini onler; Figma Roboto Medium 12/22 */
.tpc-card .qty-box .quantity-left-minus,
.tpc-card .qty-box .quantity-right-plus { flex: 1 1 0; min-width: 0; max-width: 48px; padding-left: 0; padding-right: 0; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px; line-height: 22px; }
.tpc-card .qty-box .category-stock.form-control { flex: 2 1 0; }

/* ---------------------------------------------------------------------
   NARROW-COLUMN OVERFLOW GUARDS
   The grid is row-cols-2 on xs, so a card can get ~140px of inner width.
   Fixed 28px price text and long button labels used to make the card's
   min-content width exceed its column, which pushed the whole card past
   the viewport and clipped its right edge (price and "Add The Favorites"
   appeared cut off). These rules let that content shrink/wrap instead.
   Layout stays Bootstrap; only what Bootstrap has no utility for is here.
   --------------------------------------------------------------------- */
.tpc-card { min-width: 0; }
/* Long labels wrap inside the button instead of overflowing it */
.tpc-card .btn { white-space: normal; }
/* Part number / description must never widen the card */
.tpc-card .tpc-partno,
.tpc-card .tpc-desc { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    /* Figma sizes are for the wide (lg) column; scale down on xs so the line fits */
    .tpc-card .tpc-price { font-size: 20px; }
    .tpc-card .tpc-price-unit { font-size: 12px; }
    .tpc-card .tpc-partno { font-size: 16px; line-height: 20px; }
    .tpc-card .tpc-detail-btn { font-size: 13px; line-height: 18px; }
}

/* Keep every card button the same height. "Remove From Favorites" was long enough to wrap onto a
   second line, which made that one card taller than its neighbours. The label is now shorter, and
   nowrap guarantees a single line even on narrower columns; the ellipsis is a last-resort guard so
   an unexpectedly long label degrades instead of breaking the card layout. */
.tpc-card .tpc-detail-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }