/* products-page.css — All Products listing page (hero collage, filter bar, product rows) */

/* ---------- hero ---------- */
.prod-hero .container{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.prod-hero h1 em{color:var(--red)}
.hero-tiles{position:relative;height:230px}
.tile{position:absolute;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:22%;box-shadow:0 16px 34px -14px rgba(150,30,35,.25)}
.tile.main{width:104px;height:104px;left:46%;top:26%;background:linear-gradient(150deg,#E02234,#8F0E1B);z-index:2}
.tile.main svg{width:54px;height:54px}
.tile.t1{width:56px;height:56px;left:16%;top:8%;font-size:24px}
.tile.t2{width:48px;height:48px;left:30%;top:58%;font-size:20px}
.tile.t3{width:52px;height:52px;left:70%;top:0;font-size:22px}
.tile.t4{width:46px;height:46px;left:84%;top:44%;font-size:19px}
.tile.t5{width:50px;height:50px;left:60%;top:74%;font-size:20px}
.hero-tiles .slab{position:absolute;left:38%;top:62%;width:220px;height:60px;border-radius:16px;background:linear-gradient(180deg,#F6DCD9,#EFC9C4);transform:perspective(300px) rotateX(50deg);z-index:0}

/* ---------- filter bar ---------- */
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.filter-bar .cat-pills{margin-bottom:0}

/* ---------- product rows ---------- */
.prod-rows{display:grid;gap:22px}
.prod-row{display:grid;grid-template-columns:1.2fr 1fr 190px;grid-template-areas:"id feat phone" ". stats phone";gap:12px 30px;background:#fff;border:1px solid #F3E5E2;border-radius:22px;padding:30px 34px 0;overflow:hidden;transition:transform .25s,box-shadow .25s}
.prod-row:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prod-row.hidden{display:none}

.pr-id{grid-area:id;padding-bottom:30px}
.pr-ico{width:66px;height:66px;border-radius:20px;background:linear-gradient(150deg,#E02234,#8F0E1B);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 12px 24px -8px rgba(211,27,43,.45);margin-bottom:14px}
.pr-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-name h3{font-size:19px;font-weight:800}
.pr-badge{font-size:10.5px;font-weight:700;color:var(--red);background:#FBEDEB;border-radius:99px;padding:4px 10px;letter-spacing:.02em}
.pr-tagline{font-size:13px;font-weight:700;margin:6px 0 8px}
.pr-desc{font-size:12.5px;color:var(--body);line-height:1.6;max-width:260px}
.pr-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pr-chips span{font-size:10.5px;font-weight:600;color:#6B6B72;background:#F7F1F0;border-radius:7px;padding:4px 8px}

.pr-feat{grid-area:feat;padding-bottom:30px}
.pr-feat h4{font-size:12.5px;font-weight:800;color:var(--red);margin-bottom:12px}
.pr-feat li{display:flex;gap:9px;font-size:12.5px;font-weight:500;color:#3C3C42;padding:4.5px 0;align-items:baseline}
.pr-feat li::before{content:'✓';flex:none;width:15px;height:15px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}

.pr-stats{grid-area:stats;padding-bottom:30px;border-top:1px solid #F5E7E4;padding-top:14px}
.pr-dl{font-size:13px;font-weight:700;margin:10px 0 16px}
.pr-platforms{display:flex;gap:16px}
.pr-platforms span{display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);font-weight:600}
.pr-platforms svg{width:18px;height:18px;fill:#3C3C42}

.pr-phone{grid-area:phone;justify-self:end;align-self:end}
.pr-phone .phone-sm{margin-bottom:-26px}

/* ---------- extra phone mocks ---------- */
.phone .ph-screen.qr-mock{background:#1C1C21;color:#fff}
.qr-mock .qr-frame{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:88px;height:88px}
.qr-mock .qr-frame::before,.qr-mock .qr-frame::after{content:'';position:absolute;width:22px;height:22px;border:3px solid var(--red)}
.qr-mock .qr-frame::before{left:0;top:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.qr-mock .qr-frame::after{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.qr-mock .qr-line{position:absolute;left:14%;right:14%;top:46%;height:2px;background:var(--red);box-shadow:0 0 10px rgba(211,27,43,.9);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(-26px)}50%{transform:translateY(26px)}}
.qr-mock small{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-size:9px;color:#B9B9C0}
.phone .ph-screen.radial-mock{background:linear-gradient(180deg,#fff,#FBEDEB);text-align:center}
.radial-mock .rm-circle{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--red);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(211,27,43,.12),0 0 0 24px rgba(211,27,43,.05)}
.radial-mock small{position:absolute;left:0;right:0;bottom:30px;font-size:9.5px;color:var(--muted)}

/* ---------- load more ---------- */
.load-more-wrap{display:flex;justify-content:center;margin-top:34px}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .prod-hero .container{grid-template-columns:1fr}
  .hero-tiles{display:none}
  .prod-row{grid-template-columns:1fr;grid-template-areas:"id" "feat" "stats";padding:26px 24px}
  .pr-id,.pr-feat,.pr-stats{padding-bottom:0}
  .pr-phone{display:none}
  .prod-row{padding-bottom:26px}
}
@media(max-width:560px){
  .filter-bar{flex-direction:column;align-items:flex-start}
}