/* Collections Header */
.coll-hdr {
  padding: 104px 5% 3rem;
  background: var(--section-alt-bg);
  text-align: center;
}
.theme-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.theme-tab {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 10px 24px;
  border-radius: 30px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: all 0.3s;
}
.theme-tab:hover, .theme-tab.active {
  background: var(--accent-color);
  color: var(--btn-text);
  border-color: var(--accent-color);
}

/* Collections Grid */
.coll-page-sec { padding: 4rem 5%; background: var(--bg-color); }
.coll-filters-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.coll-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fb {
  background: none; border: 1px solid var(--border-color); padding: 6px 16px; border-radius: 4px;
  cursor: pointer; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-secondary); transition: all 0.3s;
}
.fb:hover, .fb.active { background: var(--accent-color); border-color: var(--accent-color); color: var(--btn-text); }

.coll-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coll-sort label {
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: var(--text-muted);
}
.coll-sort select {
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--section-alt-bg);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
.coll-sort select:focus {
  border-color: var(--accent-color);
}

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.8rem; }
.pc { background: var(--section-bg); border-radius: 4px; overflow: hidden; cursor: pointer; transition: all 0.38s; border: 1px solid var(--border-color); text-decoration: none; display: block;}
.pc:hover { transform: translateY(-6px); box-shadow: 0 18px 50px var(--shadow); }
.pc-img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--section-alt-bg); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease, opacity 0.38s; }
.pc-img .img2 { position: absolute; inset: 0; opacity: 0; }
.pc:hover .img1 { opacity: 0; transform: scale(1.05); }
.pc:hover .img2 { opacity: 1; }
.pc-ov { position: absolute; bottom: 0; left: 0; right: 0; display: flex; transform: translateY(100%); transition: transform 0.3s; }
.pc:hover .pc-ov { transform: translateY(0); }
.pcb { flex: 1; padding: 9px; background: var(--nav-bg); border: none; cursor: pointer; font-size: 0.67rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.08em; color: var(--text-primary); text-transform: uppercase; transition: background 0.2s; border-top: 1px solid var(--border-color); }
.pcb:first-child { border-right: 0.5px solid var(--border-color); }
.pcb:hover { background: var(--accent-color); color: var(--btn-text); }
.wc-btn { position: absolute; top: 9px; right: 9px; background: var(--bg-color); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: all 0.3s; box-shadow: 0 2px 8px var(--shadow); z-index: 10;}
.wc-btn:hover, .wc-btn.act { background: var(--accent-color); color: var(--btn-text); transform: scale(1.1); }
.pc-info { padding: 1.1rem; }
.pc-cat { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.pc-name { font-family: var(--font-names); font-size: 0.98rem; font-weight: 500; color: var(--text-primary); margin-bottom: 7px; line-height: 1.35; }
.pc-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.pc-stars .s { color: var(--gold-accent); font-size: 0.72rem; }
.pc-price { font-family: var(--font-headings); font-size: 1rem; color: var(--accent-color); font-weight: 600; }