.zoe-ph-grid{max-width:1200px;margin:0 auto}
.zoe-ph-search{width:100%;padding:.75rem 1rem;border:1px solid #e2e8f0;border-radius:.75rem;margin:.5rem 0 1rem}
.zoe-ph-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.zoe-ph-filters select{padding:.5rem;border:1px solid #e2e8f0;border-radius:.5rem}
.zoe-ph-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.zoe-ph-card{background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:8px;transition:transform .12s ease, box-shadow .12s ease}
.zoe-ph-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.zoe-ph-card__thumb{width:100%;height:250px;overflow:hidden;border-radius:8px;margin-bottom:12px}
.zoe-ph-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.zoe-ph-card:hover .zoe-ph-card__thumb img{transform:scale(1.05)}
.zoe-ph-card__head{padding:0 20px}
.zoe-ph-card__title{margin:0;font-size:1.05rem;line-height:1.35}
.zoe-ph-card__excerpt{color:#4a5568;margin:0;padding:0 20px;font-size:12px;line-height:1.4em}
.zoe-ph-card__meta{display:flex;gap:6px;flex-wrap:wrap;padding:0 20px}
.zoe-tag{background:#f7fafc;border:1px solid #e2e8f0;border-radius:9999px;padding:2px 8px;font-size:.75rem;color:#2d3748}
.zoe-badge{display:inline-block;background:#16a34a;color:#fff;border-radius:9999px;font-size:.70rem;padding:2px 8px;margin-right:8px}
.zoe-ph-card__actions{display:flex;gap:8px;margin-top:auto;justify-content:flex-end;padding:20px 20px}
.zoe-btn{display:inline-flex;align-items:center;gap:6px;padding:.45rem .8rem;border-radius:.6rem;border:1px solid #e2e8f0;background:#f7fafc;cursor:pointer;text-decoration:none;font-size:.875rem;transition:all .2s ease}
.zoe-btn:hover{background:#edf2f7;transform:translateY(-1px)}
.zoe-btn svg{flex-shrink:0;width:16px;height:16px}
.zoe-ph-loadmore{margin:16px auto;display:block}

/* Lovely header */
.zoe-hero{background:linear-gradient(90deg,var(--zoe-hero-start,#ff6b3d),var(--zoe-hero-end,#ff864a));padding:22px 24px;border-radius:16px;color:#fff;margin:0 0 14px}
.zoe-hero h2{margin:0;font-weight:700}

/* Tabs */
.zoe-ph-tabs{background:#fff;border:1px solid #f1f5f9;border-radius:12px;padding:6px;margin-bottom:12px;overflow:auto}
.zoe-ph-tabs__inner{display:flex;gap:6px;flex-wrap:nowrap}
.zoe-ph-tab{border:1px solid #f1f5f9;background:#fff;border-radius:9999px;padding:.4rem .8rem;cursor:pointer;white-space:nowrap}
.zoe-ph-tab.is-active{background:#ffefe7;border-color:#ffd2bf;color:#b43403}

/* Lovely grid overrides */
.zoe-ph-grid--lovely .zoe-ph-search{border-radius:9999px}


/* Modal */
.zoe-ph-modal{position:fixed;inset:0;display:none;z-index:9999}
.zoe-ph-modal.is-open{display:block}
.zoe-ph-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:saturate(120%) blur(2px);}
.zoe-ph-modal__dialog{position:relative;background:#fff;max-width:880px;margin:6vh auto;padding:0;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.zoe-ph-modal__close{position:absolute;right:10px;top:8px;background:transparent;border:0;font-size:28px;line-height:1;cursor:pointer;color:#fcfbfb}
.zoe-ph-modal__header{background:linear-gradient(90deg,var(--zoe-hero-start,#ff6b3d),var(--zoe-hero-end,#ff864a));padding:18px 20px;color:#fff}
.zoe-ph-modal__header h3{margin:0;font-size:1.4rem;font-weight:700}
.zoe-ph-modal__meta{padding:12px 20px;border-bottom:1px solid #f1f5f9;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.zoe-ph-modal__content{padding:16px 20px;max-height:60vh;overflow:auto}
.zoe-code{white-space:pre-wrap;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:12px;border:1px solid #0b1220}
.zoe-ph-modal__actions{padding:12px 20px 20px;display:flex;gap:10px}
.zoe-chip{display:inline-block;padding:4px 10px;border-radius:9999px;font-size:.78rem;border:1px solid #e2e8f0;background:#f8fafc;color:#111827}
.zoe-chip.green{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.zoe-chip.purple{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.zoe-chip.gray{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.zoe-accent{background:#ff6b3d;color:#fff;border-color:#ff6b3d}
.zoe-accent:hover{filter:brightness(.95)}

/* Ensure card title is visible and prominent */
.zoe-ph-card__title{display:block;color:#111827}

/* Title visibility reinforcement */
.zoe-ph-card__title{font-weight:700;color:#0f172a;}