/* v143: "Рекомендован просмотр с ПК" note, styled like the "← Все шаблоны" link */
.kt-pc-note {
  display: block;
  color: #8D8A84;
  font-size: clamp(1.4rem, 1.2947rem + 0.2807vw, 1.7rem);
  line-height: 1.3;
  text-decoration: none;
  border: 0;
  margin: 0;
}

/* Catalog page: right under the intro paragraph, aligned right */
#tpl-head .kt-pc-note-cat {
  text-align: right;
  margin-top: clamp(1.2rem, 0.8rem + 0.6vw, 2rem);
}

/* Template page: top-right of the preview block on desktop */
#tpl-preview .ContainerMain-sc-1mvvby3-0 { position: relative; }
#tpl-preview .kt-pc-note-tpl {
  text-align: right;
  margin-top: 1.2rem;
}
@media (min-width: 901px) {
  #tpl-preview .kt-pc-note-tpl {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
  }
  body.kuda-gal-full #tpl-preview .kt-pc-note-tpl { opacity: 0; pointer-events: none; }
}
/* Mobile: keep it in flow, directly under the template frame */
@media (max-width: 900px) {
  #tpl-preview .kt-pc-note-tpl {
    text-align: left;
    margin-top: clamp(1.2rem, 0.8rem + 1vw, 2rem);
  }
}
html.kuda-mobile-gallery-v119 #tpl-preview .kt-pc-note-tpl { display: block !important; }

/* v171: on the catalog page the note sat too far above the first row of cards.
   Push it down by 1.6rem and pull the same amount off its bottom margin, so the
   note moves closer to the grid while the grid itself stays where it was
   (matching the spacing used on the template page). */
@media (min-width: 901px) {
  #tpl-head .kt-pc-note-cat {
    margin-top: calc(clamp(1.2rem, 0.8rem + 0.6vw, 2rem) + 1.6rem);
    margin-bottom: -1.6rem;
  }
}

/* v172: the note is a plain static label, exactly like the "← Все шаблоны" link:
   same colour, no reveal animation (the kuda-split class keeps text-lines-v120
   away from it) and no fade when the sidebar is hidden. */
#tpl-preview .kt-pc-note,
#tpl-head .kt-pc-note {
  color: #8D8A84 !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}
#tpl-preview .kt-pc-note *,
#tpl-head .kt-pc-note * {
  color: inherit !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  clip-path: none !important;
}
@media (min-width: 901px) {
  body.kuda-gal-full #tpl-preview .kt-pc-note-tpl,
  #tpl-preview .ContainerMain-sc-1mvvby3-0:has(.kt-gal.kt-hidden) .kt-pc-note-tpl,
  #tpl-preview div:has(> .kt-gal.kt-hidden) .kt-pc-note-tpl {
    opacity: 1 !important;
    pointer-events: none;
  }
}

/* v174: static alignment. pc-note-align-v147.js measured the frame/cards and
   wrote paddingRight on rAF + 400/1500/3000ms, so the note visibly jumped left
   after the first paint. The same result is expressed here in pure CSS.
   Template page: stretch the note over the full viewport width (exactly like
   .kt-gal does) and end the text one frame radius (1.8rem) before the frame's
   right edge, which sits 2.4rem from the viewport edge. */
@media (min-width: 901px) {
  #tpl-preview .kt-pc-note-tpl {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-right: 4.2rem;
    box-sizing: border-box;
    text-align: right;
  }
  /* Catalog page: cards end at the container edge; stop one thumb radius earlier. */
  #tpl-head .kt-pc-note-cat {
    /* v176: end the text before the thumbnails' corner radius, not flush with
       their right edge */
    padding-right: 3rem;
  }
}


/* v177: mobile. The note used to sit above the "Шаблоны" button, left aligned
   and running off the left edge, leaving an empty band above the frame. It is
   now moved below the frame (the container becomes a flex column, so only the
   order changes, the markup stays as it is), aligned right and stopped short
   of the frame's 18px corner radius. The band it occupied above is gone. */
@media (max-width: 900px) {
  #tpl-preview > .ContainerMain-sc-1mvvby3-0 {
    display: flex !important;
    flex-direction: column !important;
  }
  #tpl-preview > .ContainerMain-sc-1mvvby3-0 > .kt-mobile-tools-v119 { order: 1; }
  #tpl-preview > .ContainerMain-sc-1mvvby3-0 > .kt-gal { order: 2; }
  #tpl-preview > .ContainerMain-sc-1mvvby3-0 > .kt-pc-note-tpl {
    order: 3;
    width: 100%;
    box-sizing: border-box;
    text-align: right !important;
    font-size: 1.35rem !important;
    margin: 0.8rem 0 0 !important;
    padding-left: var(--kt-edge-left-v122, 16px);
    padding-right: calc(var(--kt-edge-right-v122, 16px) + 1.1rem);
  }
}