.browse-page {
    background: #f7f3ea;
    color: #17283d;
    font-family: 'Inter', 'Poppins', sans-serif;
}

.browse-page .browse-section {
    background: #f7f3ea;
    min-height: calc(100vh - 64px);
    padding: 0 0 36px;
}

.browse-section > .container {
    max-width: 1240px;
    padding: 0 32px;
}

.browse-page .browse-content {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: 248px minmax(0, 1fr);
}

.browse-page .filters-sidebar {
    align-self: stretch;
    background: #efe8da;
    border: 0;
    border-right: 1px solid #e7e2d3;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 24px 18px 30px;
    position: static;
}

.browse-page .filter-section {
    border-bottom: 1px solid #e7e2d3;
    padding: 0 0 18px;
}

.browse-page .filter-section + .filter-section {
    padding-top: 18px;
}

.browse-page .filter-section h2,
.browse-page .filter-section h3 {
    color: #17283d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: left;
}

.browse-page .browse-topic-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.browse-page .browse-topic-option,
.browse-page .browse-topic-more {
    align-items: center;
    background: transparent;
    border: 0;
    color: #596573;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 12px;
    gap: 7px;
    min-height: 23px;
    overflow: hidden;
    padding: 2px 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.browse-page .browse-topic-option::before {
    color: #9c8060;
    content: '\203A';
    flex: 0 0 8px;
    font-size: 17px;
    line-height: 1;
}

.browse-page .browse-topic-option:hover,
.browse-page .browse-topic-option.is-active,
.browse-page .browse-topic-more:hover {
    color: #7a2636;
}

.browse-page .browse-topic-option.is-active { font-weight: 700; }

.browse-page .browse-topic-list:not(.is-expanded) .browse-topic-overflow {
    display: none;
}

.browse-page .browse-topic-more {
    color: #17283d;
    font-weight: 600;
    padding-left: 15px;
}

.browse-page .browse-price-range {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.browse-page .browse-price-range input {
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 3px;
    color: #17283d;
    font: inherit;
    font-size: 12px;
    min-width: 0;
    padding: 9px 8px;
    width: 100%;
}

.browse-page .browse-price-range input:focus,
.browse-page .search-box input:focus {
    border-color: #9c8060;
    box-shadow: 0 0 0 2px rgba(181, 154, 100, .15);
    outline: none;
}

.browse-page .browse-price-type { margin-top: 13px; }
.browse-page .browse-price-type h3 { font-family: inherit; font-size: 11px; margin-bottom: 7px; }
.browse-page .browse-price-type .pill-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.browse-page .browse-price-type .pill-filter { position: relative; }
.browse-page .browse-price-type .pill-filter input { opacity: 0; position: absolute; }
.browse-page .browse-price-type .pill-filter label {
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 3px;
    color: #596573;
    cursor: pointer;
    display: block;
    font-size: 10px;
    padding: 5px 8px;
}
.browse-page .browse-price-type .pill-filter input:checked + label {
    background: #17283d;
    border-color: #17283d;
    color: #fff;
}

.browse-page .browse-sort-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.browse-page .browse-sort-options label {
    align-items: center;
    color: #596573;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 7px;
}

.browse-page .browse-sort-options input {
    accent-color: #7a2636;
    height: 14px;
    margin: 0;
    width: 14px;
}

.browse-page .browse-advanced-filters {
    border-bottom: 1px solid #e7e2d3;
    color: #596573;
    font-size: 12px;
    padding: 14px 0;
}

.browse-page .browse-advanced-filters summary {
    color: #17283d;
    cursor: pointer;
    font-weight: 600;
}

.browse-page .browse-advanced-filters .filter-section {
    border: 0;
    padding: 14px 0 0;
}

.browse-page .browse-advanced-filters .filter-select {
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 3px;
    color: #17283d;
    font: inherit;
    font-size: 12px;
    max-width: 100%;
    min-height: 34px;
    padding: 5px;
    width: 100%;
}

.browse-page .browse-advanced-filters .pill-filter-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.browse-page .browse-advanced-filters .pill-filter {
    align-items: center;
    display: flex;
    gap: 7px;
}

.browse-page .browse-advanced-filters .pill-filter label {
    font-size: 11px;
}

.browse-page .clear-filters {
    background: transparent;
    border: 0;
    color: #7a2636;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    margin-top: 13px;
    padding: 0;
    text-decoration: underline;
}

.browse-page .browse-main {
    background: #f7f3ea;
    min-width: 0;
    padding: 20px 0 0;
}

.browse-page .browse-header {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0 0 14px;
    padding: 0;
}

.browse-page .browse-title {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 0 12px;
}

.browse-page .browse-title h1 {
    color: #17283d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    text-align: left;
}

.browse-page .results-info {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #777;
    font-size: 11px;
    font-weight: 400;
    padding: 0;
    white-space: nowrap;
}

.browse-page .search-bar-container { margin: 0; }
.browse-page .search-box {
    align-items: center;
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 4px;
    box-shadow: none;
    display: flex;
    gap: 8px;
    max-width: none;
    padding: 0 10px;
}
.browse-page .search-box::before {
    color: #596573;
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-size: 12px;
    font-weight: 900;
    order: 2;
}
.browse-page .search-box input {
    background: transparent;
    border: 0;
    color: #17283d;
    flex: 1;
    font: inherit;
    font-size: 12px;
    min-width: 0;
    line-height: 1.3;
    padding: 8px 0;
}
.browse-page .search-box input::placeholder { color: #9a9a9a; }

.browse-page .filter-tags:empty { display: none; }
.browse-page .filter-tags { margin: 0 0 10px; }
.browse-page .filter-tag {
    background: #f7f3ea;
    border: 1px solid #e7e2d3;
    border-radius: 3px;
    color: #596573;
}

.browse-page .notes-grid {
    display: grid;
    column-gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 18px;
}

.browse-page .note-card {
    background: #fff;
    border: 1px solid #e5e1d8;
    border-radius: 4px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.browse-page .note-card:hover {
    border-color: #b7aa91;
    box-shadow: 0 4px 12px rgba(23, 40, 61, .08);
    transform: none;
}

.browse-page .note-card-header {
    aspect-ratio: 1.4 / 1;
    background: #f2efe8;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.browse-page .note-card-header img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.browse-page .note-card-header::after { display: none; }
.browse-page .note-card-header h3,
.browse-page .note-card-badge { display: none; }

.browse-page .note-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding: 8px 9px 7px;
    width: 100%;
}

.browse-page .note-card-body > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.browse-page .note-card-body h3 {
    color: #17283d;
    display: -webkit-box;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 7px;
    min-height: 0;
    overflow: hidden;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.browse-page .note-card-body h3 a { color: inherit; text-decoration: none; }
.browse-page .note-card-body h3 a:hover { color: #7a2636; }
.browse-page .note-card-body p,
.browse-page .note-badges { display: none; }

.browse-page .note-meta {
    align-items: center;
    border: 0;
    display: flex;
    gap: 6px;
    margin: auto 0 5px;
    min-width: 0;
    padding: 0;
}

.browse-page .note-meta .author {
    align-items: center;
    color: #596573;
    display: flex;
    font-size: 10px;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-page .author-avatar {
    align-items: center;
    background: #e8dfd1;
    border-radius: 50%;
    color: #17283d;
    display: inline-flex;
    flex: 0 0 20px;
    font-size: 9px;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.browse-page .note-meta .rating {
    color: #596573;
    font-size: 9px;
    margin-left: auto;
    white-space: nowrap;
}

.browse-page .note-footer {
    align-items: center;
    border: 0;
    display: flex;
    justify-content: space-between;
    margin: 0;
    min-height: 20px;
    padding: 0;
}

.browse-page .note-footer .rating {
    color: #596573;
    font-size: 10px;
    white-space: nowrap;
}

.browse-page .note-footer .price {
    background: transparent !important;
    color: #17283d !important;
    font-size: 12px;
    font-weight: 700;
    padding: 0 !important;
}

.browse-page .note-footer .note-card-action {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.browse-page .note-footer .note-card-action:focus {
    background: #17283d;
    border-radius: 3px;
    clip: auto;
    clip-path: none;
    color: #fff;
    height: auto;
    padding: 6px 8px;
    position: static;
    width: auto;
}

.browse-page .empty-state {
    background: #fff;
    border: 1px solid #e5e1d8;
    border-radius: 4px;
    grid-column: 1 / -1;
    padding: 30px 16px;
}

.browse-page .browse-no-results {
    background: #faf9f5;
    border-color: #e7e2d3;
    box-shadow: none;
}
.browse-page .browse-no-results h3 { color: #17283d; }
.browse-page .browse-no-results p { color: #596573; }
.browse-page .browse-empty-action {
    background: #17283d;
    border-radius: 3px;
}

.browse-page .pagination {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin: 20px 0;
}
.browse-page .pagination button {
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 3px;
    color: #17283d;
    font-size: 12px;
    min-height: 32px;
    padding: 0 10px;
}
.browse-page .pagination button.active,
.browse-page .pagination button:hover:not(:disabled) {
    background: #17283d;
    border-color: #17283d;
    color: #fff;
}

.browse-page .upload-promo {
    background: #f7f3ea;
    border: 1px solid #e7e2d3;
    border-radius: 4px;
    box-shadow: none;
    margin-top: 22px !important;
}
.browse-page .upload-promo-inner { padding: 18px; }
.browse-page .upload-promo-copy,
.browse-page .upload-promo-copy h3 { color: #17283d; }
.browse-page .upload-promo-copy p { color: #596573; }
.browse-page .upload-promo-btn.primary { background: #17283d; color: #fff; }
.browse-page .upload-promo-btn.secondary { border-color: #17283d; color: #17283d; }

.browse-page .browse-visually-hidden {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 760px) {
    .browse-section > .container { max-width: 100%; padding-left: 12px; padding-right: 12px; }
    .browse-page .browse-content {
        gap: 8px;
        grid-template-columns: 27% minmax(0, 1fr);
    }
    .browse-page .filters-sidebar {
        padding: 16px 9px 24px;
    }
    .browse-page .filter-section { padding-bottom: 12px; }
    .browse-page .filter-section + .filter-section { padding-top: 12px; }
    .browse-page .filter-section h2 { font-size: 12px; margin-bottom: 8px; }
    .browse-page .browse-topic-option,
    .browse-page .browse-topic-more { font-size: 9px; gap: 3px; min-height: 19px; }
    .browse-page .browse-topic-option::before { flex-basis: 7px; font-size: 14px; }
    .browse-page .browse-topic-more { padding-left: 10px; }
    .browse-page .browse-price-range { gap: 4px; }
    .browse-page .browse-price-range input { font-size: 9px; padding: 7px 4px; }
    .browse-page .browse-price-type { margin-top: 9px; }
    .browse-page .browse-price-type h3 { font-size: 9px; }
    .browse-page .browse-price-type .pill-filter-list { gap: 3px; }
    .browse-page .browse-price-type .pill-filter label { font-size: 8px; padding: 4px 5px; }
    .browse-page .browse-sort-options { gap: 7px; }
    .browse-page .browse-sort-options label { align-items: flex-start; font-size: 9px; gap: 4px; }
    .browse-page .browse-sort-options input { flex: 0 0 12px; height: 12px; width: 12px; }
    .browse-page .browse-advanced-filters { font-size: 10px; padding: 12px 0; }
    .browse-page .browse-main { padding: 14px 0 0; }
    .browse-page .browse-header { margin-bottom: 9px; }
    .browse-page .browse-title { flex-direction: row; gap: 4px; margin-bottom: 8px; }
    .browse-page .browse-title h1 { font-size: 19px; }
    .browse-page .results-info { font-size: 8px; }
    .browse-page .search-box { gap: 5px; padding: 0 7px; }
    .browse-page .search-box input { font-size: 9px; line-height: 1.2; padding: 5px 0; }
    .browse-page .search-box::before { font-size: 10px; }
    .browse-page .notes-grid { column-gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
    .browse-page .note-card-body { padding: 5px 5px 4px; }
    .browse-page .note-card-body h3 { font-size: 9px; line-height: 1.2; margin-bottom: 5px; }
    .browse-page .note-meta { gap: 2px; margin-bottom: 3px; }
    .browse-page .note-meta .author { font-size: 7px; gap: 3px; }
    .browse-page .author-avatar { flex-basis: 14px; font-size: 7px; height: 14px; width: 14px; }
    .browse-page .note-meta .rating { font-size: 7px; }
    .browse-page .note-footer { min-height: 14px; }
    .browse-page .note-footer .rating { font-size: 7px; }
    .browse-page .note-footer .price { font-size: 9px; }
    .browse-page .browse-bottom-section { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 390px) {
    .browse-page .browse-content { gap: 6px; grid-template-columns: 26% minmax(0, 1fr); }
    .browse-page .filters-sidebar { padding-left: 7px; padding-right: 6px; }
    .browse-page .browse-title h1 { font-size: 17px; }
}