/* /catalog/yarn (pages/catalog_yarn.php). Tabs, banner, rings, grid and cards come from search.css
   + component.css - the page wears the yarn search's look; only what search has no equivalent for
   lives here. */

.cy-page {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 48px;
  color: var(--textMain);
  font-family: var(--fontInter);
}
.cy-tabs .tab a {
  color: inherit;
}

/* Keep the shopping grid first; the page description closes the page. */
.cy-hero {
  margin: 36px 16px 0;
  padding-top: 24px;
  border-top: 1px solid var(--menu);
}
.cy-breadcrumbs {
  margin: 16px 16px 8px;
}
.cy-hero h1 {
  margin: 0 0 6px;
  font-size: var(--font_pat_title);
  font-weight: var(--fontweight_max);
  line-height: 1.2;
}
.cy-intro {
  max-width: 900px;
  margin: 0;
  color: var(--textSecondary);
  font-size: var(--font_second);
  line-height: 1.5;
}
.cy-intro a,
.cy-guide a,
.cy-empty a {
  color: var(--Purple);
  font-weight: var(--fontweight_heavy);
  text-decoration: underline;
}

/* rings: search.css styles them; this marks the open one */
.cy-rings {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
li.tag_li.cy-ring-open .tag_img {
  background: var(--Purple);
  color: var(--White-500);
}

/* the facet links a ring opens. Closed panels stay in the HTML (crawlers follow them) */
.cy-panel {
  display: none;
  margin: 0 16px 16px;
  padding: 16px;
  border-radius: 24px;
  background: var(--menu);
}
.cy-panel.cy-open {
  display: block;
}
.cy-panel h2 {
  margin: 0 0 10px;
  font-size: var(--font_main);
  font-weight: var(--fontweight_500);
}
.cy-panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cy-panel a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--searchBar);
  color: var(--textMain);
  font-size: var(--font_second);
  vertical-align: -webkit-baseline-middle;
}
.cy-panel a:hover {
  opacity: var(--opacityHover);
}
.cy-panel a.cy-current {
  background: var(--Purple);
  color: var(--White-500);
}
.cy-count {
  color: var(--textSecondary);
  font-size: var(--font_small);
}
.cy-current .cy-count {
  color: inherit;
  opacity: 0.8;
}
.cy-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.cy-dot-red { background: #d33a3a; }
.cy-dot-pink { background: #f29ac0; }
.cy-dot-orange { background: #f28c3a; }
.cy-dot-yellow { background: #f2d03a; }
.cy-dot-green { background: #4caf63; }
.cy-dot-teal { background: #2fb3ad; }
.cy-dot-blue { background: #3a6fd3; }
.cy-dot-purple { background: #8a4fd3; }
.cy-dot-brown { background: #8a5a36; }
.cy-dot-beige { background: #e6d3b3; }
.cy-dot-white { background: #ffffff; }
.cy-dot-gray { background: #9a9a9a; }
.cy-dot-silver { background: linear-gradient(135deg, #e8e8e8, #a9a9a9); }
.cy-dot-black { background: #1d1d1d; }

/* active filters */
.cy-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 16px;
}
.cy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--Purple);
  color: var(--White-500);
  font-size: var(--font_second);
  font-weight: var(--fontweight_heavy);
}
.cy-chip-clear {
  background: var(--menu);
  color: var(--textMain);
}

/* grid: .search_page_body + .all_patterns_list + sl-card.material-item, as on search */
.cy-grid .all_patterns_list {
  padding: 0;
}
.var_img a {
  display: block;
  line-height: 0;
}
.cy-empty {
  width: 100%;
  padding: 32px 8px;
  text-align: center;
  color: var(--textSecondary);
}

/* about the lines, comparison table, FAQ, guides */
.cy-about,
.cy-faq,
.cy-links {
  margin: 36px 16px 0;
}
.cy-about h2,
.cy-faq h2,
.cy-links h2 {
  margin: 0;
  font-size: var(--font_title);
  font-weight: var(--fontweight_500);
}
.cy-about-details::part(base),
.cy-line-info::part(base),
.cy-faq-item::part(base) {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cy-about-details::part(header),
.cy-line-info::part(header),
.cy-faq-item::part(header) {
  padding: 14px 0;
}
.cy-about-details::part(content),
.cy-line-info::part(content),
.cy-faq-item::part(content) {
  padding: 0 0 16px;
}
.cy-about-details::part(summary),
.cy-line-info::part(summary),
.cy-faq-item::part(summary) {
  color: var(--textMain);
  font-family: var(--fontInter);
}
.cy-about-details::part(summary-icon),
.cy-line-info::part(summary-icon),
.cy-faq-item::part(summary-icon) {
  color: var(--Purple);
}
.cy-about-details,
.cy-line-info,
.cy-faq-item {
  display: block;
  border-bottom: 1px solid var(--menu);
}
.cy-about-body {
  padding-top: 4px;
}
.cy-faq h2,
.cy-links h2 {
  margin-bottom: 12px;
}
.cy-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
}
.cy-about table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font_second);
}
.cy-about th,
.cy-about td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--searchBar);
  white-space: nowrap;
}
.cy-about thead th {
  color: var(--textSecondary);
  font-weight: var(--fontweight_heavy);
}
.cy-about tbody th a {
  color: var(--Purple);
  font-weight: var(--fontweight_heavy);
}
.cy-weight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.cy-weight-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
.cy-weight-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cy-weight-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #311462;
  font-size: 10px;
  font-weight: var(--fontweight_max);
  line-height: 1;
}
.cy-line-info {
  margin: 0;
}
.cy-line-info h3 {
  margin: 0;
  font-size: var(--font_large);
  font-weight: var(--fontweight_heavy);
}
.cy-line-info p {
  margin: 4px 0 0;
  color: var(--textSecondary);
  font-size: var(--font_second);
  line-height: 1.55;
  white-space: normal;
}
.cy-specs {
  color: var(--textMain) !important;
}
.cy-line-link a {
  color: var(--Purple);
  font-weight: var(--fontweight_heavy);
  text-decoration: underline;
}
.cy-faq-item h3 {
  margin: 0;
  font-size: var(--font_main);
  font-weight: var(--fontweight_heavy);
  line-height: 1.4;
  white-space: normal;
}
.cy-faq p {
  margin: 0;
  color: var(--textSecondary);
  line-height: 1.6;
  white-space: normal;
}

@media (max-width: 767px) {
  .cy-breadcrumbs {
    margin-top: 8px;
  }
}