/* Общая ширина контента для разделов «полезные материалы» — как у страницы гитары */

.guitar-page,
.guitar-article,
.ukulele-page,
.ukulele-article,
.bass-page,
.bass-article,
.drum-page,
.drum-article,
.piano-page,
.piano-article,
.programming-page,
.programming-article,
.kids-page,
.kids-article,
.yoga-article,
.chord-page,
.krug-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

@media (min-width: 769px) {
  .guitar-page,
  .guitar-article,
  .ukulele-page,
  .ukulele-article,
  .bass-page,
  .bass-article,
  .drum-page,
  .drum-article,
  .piano-page,
  .piano-article,
  .programming-page,
  .programming-article,
  .kids-page,
  .kids-article,
  .yoga-article,
  .chord-page,
  .krug-page {
    max-width: 1100px;
    position: relative;
  }
}

/* Product cards: keep compact card heights like catalog pages */
[class$="__products-grid"] {
  align-items: start;
}

[class$="__product-card"] {
  align-self: start;
}

[class$="__product-card__title"] {
  margin: 0;
}

/* Укулеле: принудительно, чтобы перекрыть любые инлайн-стили и кэш */
main.ukulele-article,
.ukulele-page {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 24px 24px !important;
}

@media (min-width: 769px) {
  main.ukulele-article,
  .ukulele-page {
    max-width: 1100px !important;
    position: relative !important;
  }
}

/* Кнопки блока «Полезные материалы» — как shine-кнопки (оранжевая обводка, hover + блик) */
.guitar-page__articles,
.ukulele-page__articles,
.bass-page__articles,
.drum-page__articles,
.piano-page__articles,
.programming-page__articles,
.kids-page__articles,
.asanas-page__articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.guitar-page__articles a,
.ukulele-page__articles a,
.bass-page__articles a,
.drum-page__articles a,
.piano-page__articles a,
.programming-page__articles a,
.kids-page__articles a,
.asanas-page__articles a {
  display: inline-block;
  padding: 10px var(--space-m);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--btn-shine-radius);
  text-decoration: none;
  border: var(--btn-shine-border);
  background: transparent;
  color: var(--btn-shine);
  box-shadow: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.guitar-page__articles a:hover,
.ukulele-page__articles a:hover,
.bass-page__articles a:hover,
.drum-page__articles a:hover,
.piano-page__articles a:hover,
.programming-page__articles a:hover,
.kids-page__articles a:hover,
.asanas-page__articles a:hover {
  text-decoration: none;
  background: var(--btn-shine);
  color: #fff;
}

.guitar-page__articles a:focus-visible,
.ukulele-page__articles a:focus-visible,
.bass-page__articles a:focus-visible,
.drum-page__articles a:focus-visible,
.piano-page__articles a:focus-visible,
.programming-page__articles a:focus-visible,
.kids-page__articles a:focus-visible,
.asanas-page__articles a:focus-visible {
  outline: 2px solid var(--btn-shine);
  outline-offset: 2px;
}

/* Статьи: «Первые аккорды» (__links) и «См. также» (__see-also) — тот же shine */
.guitar-article__links,
.ukulele-article__links,
.bass-article__links,
.drum-article__links,
.piano-article__links,
.programming-article__links,
.kids-article__links,
.yoga-article__links {
  margin: var(--space-m) 0;
}

.guitar-article__links h2,
.ukulele-article__links h2,
.bass-article__links h2,
.drum-article__links h2,
.piano-article__links h2,
.programming-article__links h2,
.kids-article__links h2,
.yoga-article__links h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-s);
}

.guitar-article__links ul,
.ukulele-article__links ul,
.bass-article__links ul,
.drum-article__links ul,
.piano-article__links ul,
.programming-article__links ul,
.kids-article__links ul,
.yoga-article__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.guitar-article__see-also,
.ukulele-article__see-also,
.bass-article__see-also,
.drum-article__see-also,
.piano-article__see-also,
.programming-article__see-also,
.kids-article__see-also,
.yoga-article__see-also {
  margin: var(--space-l) 0 0;
}

/* Programming articles: product cards block at bottom */
.programming-article__products {
  margin: var(--space-l) 0 0;
}

.programming-article__products-title {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 var(--space-m);
}

.programming-article__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  max-width: 520px;
}

.programming-article__product-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.programming-article__product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-text-muted, #999);
  text-decoration: none;
}

.programming-article__product-card__img-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f8f8f8;
}

.programming-article__product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.programming-article__product-card__title {
  padding: var(--space-s) var(--space-m);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.guitar-article__see-also h2,
.ukulele-article__see-also h2,
.bass-article__see-also h2,
.drum-article__see-also h2,
.piano-article__see-also h2,
.programming-article__see-also h2,
.kids-article__see-also h2,
.yoga-article__see-also h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-s);
}

.guitar-article__see-also ul,
.ukulele-article__see-also ul,
.bass-article__see-also ul,
.drum-article__see-also ul,
.piano-article__see-also ul,
.programming-article__see-also ul,
.kids-article__see-also ul,
.yoga-article__see-also ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Круг тональностей: «См. также» */
.krug-page__see-also {
  margin: var(--space-xl) 0 0;
  padding: var(--space-l) 0 0;
  border-top: 1px solid var(--color-border);
}

.krug-page__see-also h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-s);
}

.krug-page__see-also ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Общий вид shine-кнопок для чипов и ссылок «назад к разделу» */
.guitar-article__links a,
.ukulele-article__links a,
.bass-article__links a,
.drum-article__links a,
.piano-article__links a,
.programming-article__links a,
.kids-article__links a,
.yoga-article__links a,
.guitar-article__see-also a,
.ukulele-article__see-also a,
.bass-article__see-also a,
.drum-article__see-also a,
.piano-article__see-also a,
.programming-article__see-also a,
.kids-article__see-also a,
.yoga-article__see-also a,
.krug-page__see-also a {
  display: inline-block;
  padding: 10px var(--space-m);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--btn-shine-radius);
  text-decoration: none;
  border: var(--btn-shine-border);
  background: transparent;
  color: var(--btn-shine);
  box-shadow: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.guitar-article__links a:hover,
.ukulele-article__links a:hover,
.bass-article__links a:hover,
.drum-article__links a:hover,
.piano-article__links a:hover,
.programming-article__links a:hover,
.kids-article__links a:hover,
.yoga-article__links a:hover,
.guitar-article__see-also a:hover,
.ukulele-article__see-also a:hover,
.bass-article__see-also a:hover,
.drum-article__see-also a:hover,
.piano-article__see-also a:hover,
.programming-article__see-also a:hover,
.kids-article__see-also a:hover,
.yoga-article__see-also a:hover,
.krug-page__see-also a:hover {
  text-decoration: none;
  background: var(--btn-shine);
  color: #fff;
}

.guitar-article__links a:focus-visible,
.ukulele-article__links a:focus-visible,
.bass-article__links a:focus-visible,
.drum-article__links a:focus-visible,
.piano-article__links a:focus-visible,
.programming-article__links a:focus-visible,
.kids-article__links a:focus-visible,
.yoga-article__links a:focus-visible,
.guitar-article__see-also a:focus-visible,
.ukulele-article__see-also a:focus-visible,
.bass-article__see-also a:focus-visible,
.drum-article__see-also a:focus-visible,
.piano-article__see-also a:focus-visible,
.programming-article__see-also a:focus-visible,
.kids-article__see-also a:focus-visible,
.yoga-article__see-also a:focus-visible,
.krug-page__see-also a:focus-visible {
  outline: 2px solid var(--btn-shine);
  outline-offset: 2px;
}

/* Ссылка «← …: полезные материалы» — компактная shine-кнопка */
.chord-page__back a,
.guitar-page__back a,
.guitar-article__back a,
.ukulele-page__back a,
.ukulele-article__back a,
.bass-page__back a,
.bass-article__back a,
.drum-page__back a,
.drum-article__back a,
.piano-page__back a,
.piano-article__back a,
.programming-page__back a,
.programming-article__back a,
.kids-page__back a,
.kids-article__back a,
.yoga-article__back a,
.krug-page__back a,
.asanas-page__back a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--btn-shine-radius);
  text-decoration: none;
  border: var(--btn-shine-border);
  background: transparent;
  color: var(--btn-shine);
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.chord-page__back a:hover,
.guitar-page__back a:hover,
.guitar-article__back a:hover,
.ukulele-page__back a:hover,
.ukulele-article__back a:hover,
.bass-page__back a:hover,
.bass-article__back a:hover,
.drum-page__back a:hover,
.drum-article__back a:hover,
.piano-page__back a:hover,
.piano-article__back a:hover,
.programming-page__back a:hover,
.programming-article__back a:hover,
.kids-page__back a:hover,
.kids-article__back a:hover,
.yoga-article__back a:hover,
.krug-page__back a:hover,
.asanas-page__back a:hover {
  text-decoration: none;
  background: var(--btn-shine);
  color: #fff;
}

.chord-page__back a:focus-visible,
.guitar-page__back a:focus-visible,
.guitar-article__back a:focus-visible,
.ukulele-page__back a:focus-visible,
.ukulele-article__back a:focus-visible,
.bass-page__back a:focus-visible,
.bass-article__back a:focus-visible,
.drum-page__back a:focus-visible,
.drum-article__back a:focus-visible,
.piano-page__back a:focus-visible,
.piano-article__back a:focus-visible,
.programming-page__back a:focus-visible,
.programming-article__back a:focus-visible,
.kids-page__back a:focus-visible,
.kids-article__back a:focus-visible,
.yoga-article__back a:focus-visible,
.krug-page__back a:focus-visible,
.asanas-page__back a:focus-visible {
  outline: 2px solid var(--btn-shine);
  outline-offset: 2px;
}

/* Круг: кнопка «Карточка товара» */
.krug-page__product-links a {
  display: inline-block;
  padding: 10px var(--space-m);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--btn-shine-radius);
  text-decoration: none;
  border: var(--btn-shine-border);
  background: transparent;
  color: var(--btn-shine);
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.krug-page__product-links a:hover {
  text-decoration: none;
  background: var(--btn-shine);
  color: #fff;
}

.krug-page__product-links a:focus-visible {
  outline: 2px solid var(--btn-shine);
  outline-offset: 2px;
}

/* Kids articles: poster on desktop at left, text at right */
.kids-article__poster {
  margin: 0 0 var(--space-l);
}

.kids-article__poster img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .kids-article__poster {
    float: left;
    width: min(320px, 40%);
    margin: 0 var(--space-l) var(--space-m) 0 !important;
  }

  .kids-article h2:nth-of-type(4) {
    clear: left;
  }

  .kids-article__see-also,
  .kids-article__products {
    clear: both;
  }
}

/* Аккордные страницы: блок «Другие аккорды» / CTA-чипы */
.chord-page__cta a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: var(--btn-shine-radius);
  text-decoration: none;
  border: var(--btn-shine-border);
  background: transparent;
  color: var(--btn-shine);
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.chord-page__cta a:hover {
  text-decoration: none;
  background: var(--btn-shine);
  color: #fff;
}

.chord-page__cta a:focus-visible {
  outline: 2px solid var(--btn-shine);
  outline-offset: 2px;
}

/* Мобайл: компактнее кнопки-переходы, без изменения кнопки "назад" */
@media (max-width: 768px) {
  .programming-article__products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guitar-page__articles,
  .ukulele-page__articles,
  .bass-page__articles,
  .drum-page__articles,
  .piano-page__articles,
  .programming-page__articles,
  .kids-page__articles,
  .asanas-page__articles,
  .guitar-article__links ul,
  .ukulele-article__links ul,
  .bass-article__links ul,
  .drum-article__links ul,
  .piano-article__links ul,
  .programming-article__links ul,
  .kids-article__links ul,
  .yoga-article__links ul,
  .guitar-article__see-also ul,
  .ukulele-article__see-also ul,
  .bass-article__see-also ul,
  .drum-article__see-also ul,
  .piano-article__see-also ul,
  .programming-article__see-also ul,
  .kids-article__see-also ul,
  .yoga-article__see-also ul,
  .krug-page__see-also ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .guitar-page__articles a,
  .ukulele-page__articles a,
  .bass-page__articles a,
  .drum-page__articles a,
  .piano-page__articles a,
  .programming-page__articles a,
  .kids-page__articles a,
  .asanas-page__articles a,
  .guitar-article__links a,
  .ukulele-article__links a,
  .bass-article__links a,
  .drum-article__links a,
  .piano-article__links a,
  .programming-article__links a,
  .kids-article__links a,
  .yoga-article__links a,
  .guitar-article__see-also a,
  .ukulele-article__see-also a,
  .bass-article__see-also a,
  .drum-article__see-also a,
  .piano-article__see-also a,
  .programming-article__see-also a,
  .kids-article__see-also a,
  .yoga-article__see-also a,
  .krug-page__see-also a,
  .krug-page__product-links a,
  .chord-page__cta a {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .programming-article__products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}