/* ---------------------------------------------------------
   COSPLAY & COSTUME WIGS (cosplay.php, cosplay-wig.php)
   Built on the shop's own components (.product-card, .filter-panel,
   .product-detail...); this only adds what the cosplay pages have
   that the human hair shop doesn't.
   --------------------------------------------------------- */

/* "These are costume wigs" — so nobody mistakes them for the main shop. */
.cos-note {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 14px;
  color: var(--text-faint);
}
.cos-note a { color: var(--accent); }

/* Theme chips across the top of every cosplay listing. */
.cos-themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 18px;
}
.cos-themes .category-chip { padding: 8px 14px; font-size: 14px; }
.cos-themes .category-chip.is-on {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
}
@media (max-width: 700px) {
  /* One scrolling row on a phone, so the grid stays near the top. */
  .cos-themes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .cos-themes .category-chip { flex: 0 0 auto; }
}

/* Search box inside the filter panel. */
.cos-search { display: flex; gap: 8px; }
.cos-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--black-soft);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

/* Colour dots next to the Colour filter options. */
.cos-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.cos-dot-black  { background: #111; }
.cos-dot-brown  { background: #6b4226; }
.cos-dot-blonde { background: #e8cf86; }
.cos-dot-red    { background: #b5402a; }
.cos-dot-grey   { background: #c9c9cf; }
.cos-dot-pink   { background: #f06aa8; }
.cos-dot-purple { background: #9b5de5; }
.cos-dot-blue   { background: #3a86ff; }
.cos-dot-green  { background: #3ac569; }
.cos-dot-orange { background: #ffa62b; }
.cos-dot-multi  { background: conic-gradient(#f06aa8, #ffa62b, #3ac569, #3a86ff, #9b5de5, #f06aa8); }

/* Card: how many colours it comes in, over the photo. */
.cos-card .card-media { position: relative; }
.cos-colour-count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(8, 5, 13, 0.82);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* Product page: colour swatches are gallery thumbnails with a name. */
.cos-swatches { flex-wrap: wrap; overflow-x: visible; }
.cos-swatch {
  width: 84px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.cos-swatch img { width: 100%; height: 72px; }
.cos-swatch-name {
  display: block;
  padding: 4px 4px 5px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text-dim);
  text-align: center;
  white-space: normal;
}
.cos-swatch.is-on .cos-swatch-name { color: var(--text); font-weight: 600; }
.cos-colour-line { margin: 4px 0 14px; color: var(--text-dim); font-size: 15px; }
.cos-colour-line strong { color: var(--text); }
.cos-colour-hint { color: var(--text-faint); font-size: 13.5px; }

.cos-merchant-copy { border-left: 3px solid var(--purple-glow); }
.cos-merchant-copy p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.cos-care { border-left: 3px solid var(--accent); }
.cos-care ul { margin: 6px 0 0; padding-left: 20px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }

/* The guide and FAQ under the main listing. */
.cos-guide { padding-bottom: 70px; max-width: 1100px; }
.cos-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin-bottom: 30px;
}
.cos-guide-grid h3 { font-size: 18px; margin-bottom: 6px; }
.cos-guide-grid p { margin: 0; }
@media (max-width: 700px) {
  .cos-guide-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------
   Characters, occasions, guide and quiz (cosplay-characters.php,
   cosplay-guide.php, cosplay-quiz.php)
   --------------------------------------------------------- */
.cos-header-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }

/* Character chips on a theme page and in quiz results. */
.cos-theme-chars { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 6px; }
.cos-theme-chars .category-chip, .cos-char-chips .category-chip, .cos-look-chips .category-chip { padding: 7px 14px; font-size: 14px; }
.cos-theme-chars-label { color: var(--text-faint); font-size: 14px; margin-right: 4px; }
.cos-char-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Ideas by occasion. */
.cos-occasions { padding-top: 10px; padding-bottom: 20px; }
.cos-occ-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cos-occ-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cos-occ-card h3 { font-size: 17px; margin: 0 0 6px; }
.cos-occ-card p { margin: 0 0 8px; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.cos-occ-links { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.cos-occ-links a, .cos-occ-chars a { color: var(--accent); font-size: 13.5px; }
.cos-occ-chars { font-size: 13.5px; color: var(--text-faint); }
.cos-popular-chars { padding-bottom: 30px; }
@media (max-width: 1100px) { .cos-occ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cos-occ-grid { grid-template-columns: minmax(0, 1fr); } }

/* Character tiles (hub and "more characters"). */
.cos-char-group { margin: 30px 0; }
.cos-char-group:target { scroll-margin-top: calc(var(--header-h) + 16px); }
.cos-char-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cos-char-tile {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s;
}
.cos-char-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.cos-char-tile img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: var(--surface-2); }
.cos-char-text { display: flex; flex-direction: column; min-width: 0; }
.cos-char-name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 16px; line-height: 1.25; }
.cos-char-from { font-size: 12.5px; color: var(--text-faint); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cos-char-count { font-size: 12.5px; color: var(--accent); margin-top: 2px; }
@media (max-width: 1100px) { .cos-char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .cos-char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .cos-char-grid { grid-template-columns: minmax(0, 1fr); } }

/* One character's page. */
.cos-char-intro { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin: 10px 0 10px; }
.cos-char-intro .pd-panel { margin: 0; }
.cos-char-intro p { color: var(--text-dim); line-height: 1.7; margin: 0 0 10px; }
.cos-char-about a { color: var(--accent); }
.cos-subhead { font-size: 16px; margin: 14px 0 6px; }
.cos-tips, .cos-occasion-list { margin: 0; padding-left: 20px; color: var(--text-dim); line-height: 1.7; }
.cos-occasion-list { list-style: none; padding-left: 0; }
.cos-fit-note { font-size: 14px; }
.cos-char-wigs { margin: 34px 0; }
.cos-section-sub { color: var(--text-faint); margin: -6px 0 16px; }
.cos-faq { margin: 40px 0; max-width: 820px; }
@media (max-width: 800px) { .cos-char-intro { grid-template-columns: minmax(0, 1fr); } }

/* Product page additions. */
.cos-looks { margin: 20px 0 6px; }
.cos-look-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cos-looks-note { font-size: 13px; color: var(--text-faint); margin: 8px 0 0; }
.cos-goodfor { margin: 12px 0 0; font-size: 14.5px; color: var(--text-dim); }
.cos-goodfor strong { color: var(--text); }
.cos-size p { margin: 0 0 8px; color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.cos-size-links { font-size: 14px; margin: 8px 0 0; }
.cos-size-links a { color: var(--accent); }
.cos-quiz-cta { text-align: center; padding: 10px 0 50px; color: var(--text-dim); }
.cos-quiz-cta .btn { margin: 6px 4px; }

/* Buying guide. */
.cos-toc {
  margin: 0 0 30px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cos-toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.cos-toc a { color: var(--text-dim); }
.cos-toc a:hover { color: var(--accent); }
.cos-guide-article .blog-body a { color: var(--accent); }
.cos-guide-article h2[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.cos-guide-cta { margin: 40px 0 0; padding: 26px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cos-guide-cta h2 { margin-bottom: 6px; }
.cos-guide-cta p { color: var(--text-dim); margin: 0; }
@media (max-width: 600px) { .cos-toc ol { columns: 1; } }
.cos-quiz-more { text-align: center; margin: 40px auto 70px; max-width: 640px; }
.cos-quiz-more a { color: var(--accent); }
.cos-reading { padding-left: 20px; line-height: 1.9; }
.cos-reading a { color: var(--accent); }