/* ============================================================
   Telefon kataloqu — dizayn (list, detal, müqayisə)
   Sayt CSS dəyişənlərini (--border, --surface, --muted, --accent,
   --navy-900, --radius, --shadow, --text, --danger) istifadə edir.
   ============================================================ */

/* ---------- Hero ---------- */
.ph-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 20px; }
.ph-hero h1 { margin:0 0 4px; font-size:28px; }
.ph-hero p { margin:0; color:var(--muted); }
.ph-hero-count { text-align:center; background:var(--surface,#fff); border:1px solid var(--border); border-radius:14px; padding:10px 18px; line-height:1.1; }
.ph-hero-count strong { display:block; font-size:22px; color:var(--navy-900,#0f172a); }
.ph-hero-count span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* ---------- Layout (yan panel + modellər) ---------- */
.ph-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start; }
.ph-main { min-width:0; }
.ph-side { position:sticky; top:84px; min-width:0; }
.ph-side-title { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin:0 0 8px 4px; }
.ph-brands { display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 120px); overflow-y:auto; padding-right:4px; }
.ph-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:9px; color:var(--text); font-size:14px; transition:background .12s, color .12s; }
.ph-brand:hover { background:#eef2f7; }
.ph-brand span { font-size:12px; color:var(--muted); background:#eef2f7; border-radius:20px; padding:1px 8px; min-width:22px; text-align:center; }
.ph-brand.is-active { background:var(--navy-900,#0f172a); color:#fff; font-weight:600; }
.ph-brand.is-active span { background:rgba(255,255,255,.18); color:#fff; }

/* ---------- Grid ---------- */
.ph-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
@media (max-width:520px){ .ph-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }

/* Mobil / planşet: markalar üfüqi lent kimi, yuxarıda */
@media (max-width:860px){
  .ph-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  .ph-side { position:static; }
  .ph-side-title { margin-left:0; }
  .ph-brands { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; max-height:none; gap:8px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .ph-brand { flex:0 0 auto; border:1px solid var(--border); white-space:nowrap; }
  .ph-brand span { background:#f1f5f9; }
}

/* ---------- Kart ---------- */
.ph-card { position:relative; display:flex; flex-direction:column; background:var(--surface,#fff); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow .15s, transform .15s, border-color .15s; }
.ph-card:hover { box-shadow:var(--shadow,0 6px 24px rgba(15,23,42,.08)); transform:translateY(-2px); border-color:#cfd8e6; }
/* Kvadrat şəkil sahəsi — hər brauzerdə işləyən padding-top üsulu (aspect-ratio-dan asılı deyil) */
.ph-card-media { position:relative; display:block; height:0; padding-top:100%; background:linear-gradient(180deg,#f7f9fc,#eef2f7); overflow:hidden; }
.ph-card-media img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:80%; max-height:80%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.ph-card-media[data-empty] svg { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:46px; height:46px; color:var(--muted); opacity:.45; }
.ph-card-body { display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; }
.ph-brand { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.ph-title { margin:0; font-size:15px; line-height:1.35; font-weight:600; min-height:2.7em; }
.ph-title a { color:var(--navy-900,#0f172a); }
.ph-title a:hover { color:var(--accent,#f59e0b); }
.ph-card-cta { margin-top:auto; justify-content:center; gap:4px; white-space:nowrap; max-width:100%; overflow:hidden; }
.ph-card-cta svg { width:15px; height:15px; flex:0 0 auto; }
.ph-cta-short { display:none; }
@media (max-width:520px){
  .ph-cta-full { display:none; }
  .ph-cta-short { display:inline; }
  .ph-card-cta { padding-left:10px; padding-right:10px; }
}

/* ---------- Kart düymələri (bəyən / müqayisə) ---------- */
.ph-btn { position:absolute; z-index:3; top:8px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.95); color:var(--navy-900,#0f172a); box-shadow:0 2px 8px rgba(15,23,42,.15); transition:transform .12s, background .12s, color .12s; }
.ph-btn:hover { transform:scale(1.08); }
.ph-btn svg { width:18px; height:18px; }
.ph-like { right:8px; }
.ph-like.is-active { background:#fee2e2; color:#dc2626; }
.ph-like.is-active svg { fill:currentColor; }
.ph-compare { right:50px; }
.ph-compare.is-active { background:var(--accent,#f59e0b); color:#1f1300; }

/* ---------- Loader / sentinel ---------- */
.ph-loader { display:flex; align-items:center; justify-content:center; gap:10px; padding:26px 0; color:var(--muted); font-size:14px; }
.ph-spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent,#f59e0b); border-radius:50%; animation:ph-spin .7s linear infinite; }
@keyframes ph-spin { to { transform:rotate(360deg); } }

/* ---------- Müqayisə paneli (fixed bottom) ---------- */
.ph-compare-bar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--navy-900,#0f172a); color:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.22); }
.ph-compare-bar[hidden] { display:none; }
.ph-compare-count { font-weight:600; }
.ph-compare-thumbs { display:flex; gap:6px; flex-wrap:wrap; }
.ph-compare-chip { background:rgba(255,255,255,.14); border-radius:20px; padding:3px 11px; font-size:12px; }
.ph-compare-bar .btn { min-height:38px; }

/* ---------- Müqayisə cədvəli ---------- */
.ph-compare-wrap { overflow-x:auto; padding:0; }
.ph-compare-table { width:100%; border-collapse:collapse; min-width:520px; }
.ph-compare-table th, .ph-compare-table td { border:1px solid var(--border); padding:10px 12px; text-align:center; vertical-align:middle; font-size:14px; }
.ph-rowlabel { text-align:left !important; background:#f7f9fc; font-weight:600; white-space:nowrap; color:var(--navy-900,#0f172a); }
.ph-compare-head { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ph-compare-img { display:flex; align-items:center; justify-content:center; width:90px; height:90px; background:linear-gradient(180deg,#f7f9fc,#eef2f7); border-radius:10px; }
.ph-compare-img img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ph-compare-img svg { width:32px; height:32px; color:var(--muted); opacity:.5; }
.ph-compare-name { font-weight:600; font-size:13px; color:var(--navy-900,#0f172a); }
.ph-crow-section th { background:var(--navy-900,#0f172a); color:#fff; text-align:left !important; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.ph-crow-meta td { font-weight:500; }
.ph-dash { color:var(--muted); }

/* ---------- Detal səhifəsi ---------- */
.ph-detail-head { display:flex; gap:22px; align-items:center; padding:20px; margin-bottom:18px; flex-wrap:wrap; }
.ph-detail-media { flex:0 0 auto; width:180px; height:230px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f7f9fc,#eef2f7); border-radius:14px; padding:14px; }
.ph-detail-media img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ph-detail-media svg { width:54px; height:54px; color:var(--muted); opacity:.45; }
.ph-detail-info { flex:1; min-width:220px; }
.ph-detail-info .eyebrow { color:var(--accent,#f59e0b); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.ph-detail-info h1 { margin:4px 0 8px; font-size:26px; }
.ph-detail-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ph-detail-actions .btn svg { width:16px; height:16px; }
.ph-detail-actions .is-active { background:var(--accent,#f59e0b); color:#1f1300; border-color:var(--accent,#f59e0b); }
.ph-detail-actions .ph-like-btn.is-active { background:#fee2e2; color:#dc2626; border-color:#fecaca; }
.ph-detail-actions .ph-like-btn.is-active svg { fill:currentColor; }

.ph-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.ph-spec-section { padding:0; overflow:hidden; }
.ph-spec-section h2 { margin:0; padding:12px 16px; font-size:15px; background:var(--navy-900,#0f172a); color:#fff; }
.ph-spec-table { display:flex; flex-direction:column; }
.ph-spec-row { display:grid; grid-template-columns:40% 60%; border-top:1px solid var(--border); }
.ph-spec-row:first-child { border-top:0; }
.ph-spec-label { padding:10px 14px; font-weight:600; color:var(--navy-900,#0f172a); background:#f7f9fc; font-size:13px; }
.ph-spec-value { padding:10px 14px; font-size:14px; }
.ph-source { margin-top:18px; color:var(--muted); font-size:13px; }
.ph-source a { color:var(--muted); text-decoration:underline; }