/**
 * css/products.css
 * ────────────────
 * Product card, product detail page, capacity button, and table styles.
 */

/* ── Product card ── */
.prod-card{overflow:hidden;cursor:pointer;position:relative}
.prod-card:hover{transform:none}
.prod-card-img{width:100%;height:220px;object-fit:cover;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:linear-gradient(135deg,var(--graphite),#1a2e1e)}
.prod-card-body{padding:24px}
.prod-card-title{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--white);line-height:1.1}
.prod-card-desc{font-size:13px;color:var(--grey);margin-top:8px;line-height:1.6}
.prod-accent{position:absolute;top:0;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 0.35s ease}
.prod-card:hover .prod-accent{transform:scaleX(1)}
.prod-card:hover{cursor:pointer}

/* ── Capacity buttons ── */
.cap-btn{padding:8px 12px;background:var(--graphite);border:1px solid var(--border);border-radius:8px;color:var(--grey2);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;cursor:pointer;transition:all 0.2s;text-align:center}
.cap-btn:hover{border-color:var(--green);color:var(--green)}
.cap-btn.selected{background:rgba(29,185,84,0.12);border-color:var(--green);color:var(--green)}

/* ── Data table ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:rgba(255,255,255,0.04);padding:12px 16px;text-align:left;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--border)}
.tbl td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:14px;color:var(--grey2)}
.tbl tr:hover td{background:rgba(255,255,255,0.02)}
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* WonderBin capacity image card */
.plant-image-card{padding:24px;display:flex;align-items:center;justify-content:center;min-height:300px;overflow:hidden}
.plant-image-card img{width:100%;max-height:360px;object-fit:contain;display:block;filter:drop-shadow(0 18px 35px rgba(0,0,0,0.35))}
.login-brand-logo{height:72px;width:auto;max-width:240px;object-fit:contain;margin:0 auto 14px;display:block}