.fragrance-lib { display: grid; gap: 32px; }
.fragrance-lib__hero { display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; border: 1px solid var(--guide-line); border-radius: 26px; background: color-mix(in srgb, var(--color-surface) 94%, var(--guide-gold)); }
.fragrance-lib__hero-copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
.fragrance-lib__hero h1 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.3; text-wrap: balance; margin: 0; letter-spacing: -.025em; }
.fragrance-lib__intro { color: var(--color-muted-text); max-width: 52ch; font-size: 15px; line-height: 1.9; margin: 22px 0 26px; }
.fragrance-lib__hero-image { min-height: 340px; position: relative; background: #e9e4dc; }
.fragrance-lib__hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.fragrance-lib__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; padding: 26px; border: 1px solid var(--guide-line); border-radius: 20px; background: var(--color-surface); scroll-margin-top: 110px; }
.fragrance-lib__filters label { display: grid; flex: 1 1 180px; gap: 10px; color: var(--color-muted-text); font-size: 12px; min-width: 0; }
.fragrance-lib__filters label:first-of-type { flex-grow: 1.5; }
.fragrance-lib__filters input[type=search], .fragrance-lib__filters select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--guide-line); border-radius: 10px; background: var(--color-background); color: var(--color-text); padding: 12px 14px; font: inherit; font-size: 14px; }
.fragrance-lib__filters select { padding-inline-end: 32px; }
.fragrance-lib__filters input::placeholder { color: var(--color-muted-text); }
.fragrance-lib__filters .btn { min-height: 48px; padding: 12px 24px; border-radius: 10px; }
.fragrance-lib__reset { font-size: 12px; align-self: center; text-underline-offset: 5px; color: var(--color-muted-text); }
.fragrance-lib__results { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; border-bottom: 1px solid var(--guide-line); padding-bottom: 18px; }
.fragrance-lib__count { color: var(--color-muted-text); font-size: 12px; }
.fragrance-family { display: grid; gap: 24px; scroll-margin-top: 110px; }
.fragrance-family__head { position: relative; display: grid; gap: 12px; padding-inline-end: 210px; }
.fragrance-family__head h2 { margin: 0; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.4; }
.fragrance-family__intro { color: var(--color-muted-text); max-width: 70ch; margin: 0; font-size: 14px; line-height: 1.8; }
.fragrance-family__head > a { position: absolute; inset-inline-end: 0; top: 8px; font-size: 13px; }
.fragrance-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fragrance-card { display: flex; flex-direction: column; gap: 24px; padding: 26px; border: 1px solid var(--guide-line); border-radius: 18px; background: var(--color-surface); transition: border-color .2s, box-shadow .2s; }
.fragrance-card:hover { border-color: var(--guide-gold); box-shadow: 0 8px 26px #0000000d; }
.fragrance-card__head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.fragrance-card__number { font-size: 11px; color: var(--guide-gold); }
.fragrance-card__name { flex: 1; margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.fragrance-card__name a { color: inherit; text-decoration: none; }
.fragrance-card__name a:hover { color: var(--guide-gold); }
.fragrance-card__tiers { display: grid; gap: 14px; margin: 0; padding-top: 20px; border-top: 1px solid var(--guide-line); }
.fragrance-card__tier { display: grid; gap: 6px; }
.fragrance-card__tier dt { font-size: 10px; letter-spacing: .06em; color: var(--guide-gold); }
.fragrance-card__tier dd { margin: 0; font-size: 13px; line-height: 1.9; color: var(--color-muted-text); overflow-wrap: anywhere; }
.fragrance-jump { display: flex; gap: 8px; flex-wrap: wrap; }
.fragrance-jump a { padding: 9px 16px; border: 1px solid var(--guide-line); border-radius: 30px; font-size: 12px; text-decoration: none; }
.fragrance-jump a:hover { border-color: var(--guide-gold); }
.fragrance-library .space-guide { margin-top: 36px; padding-top: 44px; border-top: 1px solid var(--guide-line); }
.fragrance-lib__empty { text-align: center; padding: 48px 24px; border: 1px dashed var(--guide-line); border-radius: 18px; color: var(--color-muted-text); }
.fragrance-library :is(input, select):focus-visible { outline: 2px solid var(--guide-gold); outline-offset: 3px; }
@media (max-width: 1000px) { .fragrance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .fragrance-lib { gap: 24px; }
    .fragrance-lib__hero { grid-template-columns: 1fr; }
    .fragrance-lib__hero-image { min-height: 220px; }
    .fragrance-lib__filters { padding: 20px; gap: 16px; }
    .fragrance-lib__filters label { flex-basis: 100%; }
    .fragrance-lib__filters .btn { flex: 1; }
    .fragrance-family__head { padding-inline-end: 0; }
    .fragrance-family__head > a { position: static; }
    .fragrance-cards { grid-template-columns: 1fr; }
    .fragrance-card { padding: 24px; }
}