/* Note materials — [notes_grid] (toolbar + list + pagination). */

/* ---- toolbar ---- */
.notes-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.notes-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.notes-toolbar__group {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 16px/1 "Noto Sans", sans-serif;
    color: #000;
}
.notes-toolbar__group > span {
    white-space: nowrap;
}
.notes-toolbar select {
    height: 47px;
    padding: 0 16px;
    border: 1px solid rgba(158, 22, 27, 0.3);
    border-radius: 5px;
    background: #fff;
    font: 400 16px/1 "Noto Sans", sans-serif;
    color: #000;
    cursor: pointer;
}

/* ---- search ---- */
.notes-search {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    max-width: 570px;
    border: 1px solid rgba(158, 22, 27, 0.3);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}
.notes-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 45px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: 400 16px/1 "Noto Sans", sans-serif;
    color: #000;
}
.notes-search__input:focus {
    outline: none;
}
.notes-search__btn {
    flex: 0 0 auto;
    width: 52px;
    border: 0;
    background: #b71f39;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.notes-search__btn:hover { background: #6e1414; }
.notes-search__btn svg { width: 20px; height: 20px; }

/* ---- list ---- */
.notes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notes-list__empty {
    padding: 40px 0;
    font: 400 18px/1.5 "Noto Sans", sans-serif;
    color: #5a5e60;
}

/* ---- row ---- */
.note-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #f8f8f8;
    border-radius: 5px;
    padding: 16px;
}
.note-item__media {
    flex: 0 0 154px;
    width: 154px;
}
.note-item__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.note-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}
.note-item__title {
    margin: 0;
    font: 700 18px/1.35 "Noto Sans", sans-serif;
    color: #b71f39;
}
.note-item__meta {
    margin: 0;
    font: 400 16px/1.4 "Noto Sans", sans-serif;
    color: #5a5e60;
}
.note-item__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 22px;
    border-radius: 5px;
    background: #b71f39;
    color: #fff;
    font: 400 16px/1 "Noto Sans", sans-serif;
    text-decoration: none;
    transition: background 0.2s ease;
}
.note-item__btn:hover { background: #6e1414; color: #fff; }
.note-arrow-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Card image + title link to the single page. */
.note-item__media { display: block; }
.note-item__title a { color: inherit; text-decoration: none; }
.note-item__title a:hover { color: #6e1414; }

/* ---- single note ([note_single]) — mirrors .product-single ---- */
.note-single { display: flex; gap: 32px; align-items: flex-start; }
.note-single__media { flex: 1 1 0; min-width: 0; }
.note-single__media img { width: 100%; height: auto; border-radius: 4px; }
.note-single__info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
}
.note-single__title { margin: 0; font: 700 32px/1.2 "Noto Sans", sans-serif; color: #000; }
.note-single__meta  { margin: 0; font: 400 18px/1.4 "Noto Sans", sans-serif; color: #5a5e60; }
.note-single__desc  { margin-top: 12px; font: 400 18px/1.6 "Noto Sans", sans-serif; color: #111; }
.note-single__btn {
    align-self: flex-start;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 5px;
    background: #b71f39;
    color: #fff;
    font: 400 18px/1 "Noto Sans", sans-serif;
    text-decoration: none;
    transition: background 0.2s ease;
}
.note-single__btn:hover { background: #6e1414; color: #fff; }
@media (max-width: 768px) {
    .note-single { flex-direction: column; }
    .note-single__info { padding-top: 0; }
}

/* ---- pagination ---- */
.notes-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}
.notes-pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f1f1f1;
    color: #141418;
    font: 500 18px/1 "Noto Sans", sans-serif;
    text-decoration: none;
}
.notes-pagination__arrow:not(.is-disabled):hover { background: #e4e4e4; }
.notes-pagination__arrow.is-disabled { opacity: 0.4; cursor: default; }
.notes-pagination__range {
    padding: 0 14px;
    font: 500 16px/1 "Noto Sans", sans-serif;
    color: #141418;
}
button.notes-search__btn {
    border-radius: 0 5px 5px 0 !important;
    padding: 11px 17px !important ;
}

input.notes-search__input {
    outline: unset;
    height: auto;
    border-radius: 5px 0 0 5px !important;
    border-right: 0 !important;
}
/* ---- responsive ---- */
@media (max-width: 768px) {
    .notes-toolbar { flex-direction: column; align-items: stretch; }
    .notes-toolbar__filters { justify-content: space-between; }
    .notes-search { max-width: none; }
}
@media (max-width: 560px) {
    .note-item { flex-direction: column; gap: 16px; }
    .note-item__media { flex-basis: auto; width: 120px; }
}