/* ===============================
   CATEGORY PAGE STYLES
   =============================== */

/* === HERO BANNER === */
.cat-hero { padding:120px 0 48px; margin-top:72px; }
.cat-back { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:24px; }
.cat-back:hover { color:var(--sage); }
.cat-hero-content { max-width:640px; }
.cat-hero-icon { font-size:48px; display:block; margin-bottom:16px; }
.cat-hero-title { font-family:var(--font-display); font-size:42px; font-weight:400; margin-bottom:12px; line-height:1.15; }
.cat-hero-desc { font-size:16px; line-height:1.7; color:var(--text-secondary); margin-bottom:20px; }
.cat-hero-stats { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-light); font-family:var(--font-heading); font-weight:500; }
.cat-stat-dot { color:var(--border); }

/* === FILTERS === */
.cat-filters { padding:20px 0; background:var(--white); border-bottom:1px solid var(--border-light); position:sticky; top:72px; z-index:80; }
.cf-bar { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.cf-group { display:flex; align-items:center; gap:8px; }
.cf-label { font-family:var(--font-heading); font-size:12px; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.5px; }
.cf-chip { padding:6px 16px; border-radius:var(--radius-full); font-family:var(--font-heading); font-size:12px; font-weight:500; color:var(--text-secondary); background:var(--bg); border:1.5px solid var(--border-light); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.cf-chip:hover { border-color:var(--sage); color:var(--sage); }
.cf-chip.active { background:var(--sage); color:white; border-color:var(--sage); }
.cf-girl.active { background:var(--rose); border-color:var(--rose); }
.cf-boy.active { background:#7B9AAB; border-color:#7B9AAB; }
.cf-select { padding:6px 32px 6px 12px; border:1.5px solid var(--border-light); border-radius:var(--radius-sm); background:var(--white); font-family:var(--font-heading); font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237A7A7F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; transition:var(--transition); }
.cf-select:hover,.cf-select:focus { border-color:var(--sage); outline:none; }

/* === ORDER NOTE === */
.cat-order-note { display:flex; align-items:center; gap:8px; padding:14px 20px; background:var(--bg-warm); border-radius:var(--radius); font-size:13px; color:var(--text-secondary); margin-bottom:32px; font-family:var(--font-heading); font-weight:500; }

/* === PRODUCT GRID === */
.cat-products { padding:40px 0 80px; }
.cat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }

/* === PRODUCT CARD === */
.cat-card { border-radius:var(--radius); overflow:hidden; background:var(--white); border:1px solid var(--border-light); transition:var(--transition); }
.cat-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--sage); }
.cat-card-link { display:block; text-decoration:none; color:inherit; }
.cat-card-img { position:relative; overflow:hidden; background:var(--bg-warm); }
.cat-card-img img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform 0.4s ease; }
.cat-card:hover .cat-card-img img { transform:scale(1.03); }
.cat-card-badge { position:absolute; top:10px; right:10px; padding:4px 12px; border-radius:var(--radius-full); font-family:var(--font-heading); font-size:10px; font-weight:600; color:white; }

.cat-card-info { padding:16px; }
.cat-card-info h3 { font-size:15px; font-weight:600; margin-bottom:4px; }
.cat-card-desc { font-size:12px; color:var(--text-light); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cat-card-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cat-card-price { font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--sage-dark); }
.cat-card-sizes { font-size:11px; color:var(--text-light); font-family:var(--font-heading); font-weight:500; padding:3px 10px; background:var(--bg); border-radius:var(--radius-full); }
.cat-card-actions { display:flex; gap:6px; }
.cat-btn-detail { flex:1; text-align:center; padding:8px; border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:12px; font-weight:500; color:var(--text-secondary); background:var(--bg); border:1px solid var(--border-light); transition:var(--transition); cursor:pointer; }
.cat-btn-detail:hover { border-color:var(--sage); color:var(--sage); }
.cat-btn-order { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:8px; border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:12px; font-weight:500; color:white; background:var(--sage); transition:var(--transition); cursor:pointer; }
.cat-btn-order:hover { background:var(--sage-dark); }

/* === CTA === */
.cat-cta { padding:0 0 80px; }
.cat-cta-card { text-align:center; padding:48px 32px; background:linear-gradient(135deg, #F5F2ED 0%, #EEEBE5 100%); border-radius:var(--radius-lg); }
.cat-cta-card h2 { font-family:var(--font-display); font-size:32px; font-weight:400; margin-bottom:10px; }
.cat-cta-card p { font-size:15px; color:var(--text-secondary); margin-bottom:28px; }
.cat-cta-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* === RESPONSIVE === */
@media (max-width:1024px) {
  .cat-grid { grid-template-columns:repeat(3, 1fr); }
  .cf-bar { gap:16px; }
}
@media (max-width:640px) {
  .cat-hero-title { font-size:30px; }
  .cat-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .cf-bar { gap:12px; }
  .cf-group { flex-wrap:wrap; }
  .cat-cta-btns { flex-direction:column; align-items:center; }
}