/* One shelf at a time, with artwork large enough to enjoy on a phone. */
.collection-browser { margin: 30px 0 38px; padding: 25px; border: 1px solid #ded2af; border-radius: 17px; background: linear-gradient(135deg, #fcf8eb, #f6f0df); }
.collection-browser-heading { display: flex; justify-content: space-between; align-items: start; gap: 22px; }
.collection-browser-heading h2 { margin-top: 6px; color: #435e43; font-family: Georgia, serif; font-size: 30px; font-weight: 400; letter-spacing: -.6px; line-height: 1.3; }
.collection-browser-heading p { max-width: 540px; margin-top: 9px; color: #727459; font-size: 12px; line-height: 1.8; }
.collection-kept-label { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 6px; color: #64714e; font-size: 9px; line-height: 1.8; }
.collection-kept-label .icon { width: 13px; height: 13px; }
.collection-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }
.collection-category { display: flex; flex-direction: column; align-items: start; gap: 6px; min-width: 0; padding: 15px 17px; border: 1px solid #ded8bd; border-radius: 11px; background: #fffcf2; color: #6d7156; text-align: left; transition: background .15s, border-color .15s; }
.collection-category > span { font-weight: 650; font-size: 14px; }
.collection-category > small { font-size: 10px; font-weight: 400; line-height: 1.6; }
.collection-category.is-active { border-color: #78895c; background: #e9eddb; color: #425c3e; box-shadow: inset 0 -3px 0 #7e905b; }
.collection-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.collection-filter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid #ded8bf; border-radius: 24px; background: #fffdf4; color: #6e7158; font-size: 10px; line-height: 1.5; }
.collection-filter{min-height:44px}
.collection-filter > span { min-width: 20px; padding: 1px 5px; border-radius: 9px; background: #edead8; color: #5d674c; font-size: 9px; font-weight: 650; text-align: center; }
.collection-filter.is-active { border-color: #6a8052; background: #4e6845; color: #fffdf0; }
.collection-filter.is-active > span { background: #fffdf025; color: #fffdf0; }
.collection-category:hover, .collection-filter:hover { border-color: #78895c; }
.collection-category:focus-visible, .collection-filter:focus-visible, .collection-empty a:focus-visible, .collection-browser-results button:focus-visible { outline: 3px solid #ad7435; outline-offset: 3px; }
.collection-results-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin: 15px 1px 0; }
.collection-results-heading > p { max-width: 610px; color: #6d7157; font-size: 11px; line-height: 1.85; }
.collection-results-heading > span { flex-shrink: 0; padding-top: 2px; color: #6c7154; font-size: 10px; line-height: 1.8; }
.collection-browser .collection-track { margin-top: 20px; padding: 20px; }
.collection-track .alchemy-track-heading { padding-bottom: 16px; margin-bottom: 18px; }
.collection-track .alchemy-track-heading h3 { font-size: 23px; }
.collection-track .alchemy-ingredient-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.collection-track .alchemy-ingredient-card { padding: 16px 14px 18px; }
.collection-track .alchemy-bottle { width: 94px; height: 94px; margin-bottom: 13px; }
.collection-track .alchemy-bottle > .alchemy-glyph { width: 90px; height: 90px; }
.collection-track .alchemy-bottle-number { width: 23px; height: 23px; font-size: 8px; }
.collection-track .alchemy-ingredient-card > .alchemy-item-name { font-size: 13px; }
.collection-track .alchemy-ingredient-card > .alchemy-item-concept { font-size: 10px; }
.collection-track .alchemy-ingredient-card > .alchemy-state { font-size: 9px; }
.collection-track .alchemy-recipe-top { align-items: center; gap: 10px; }
.collection-track .alchemy-book-mark { width: 88px; height: 88px; }
.collection-track .alchemy-book-mark > .alchemy-glyph { width: 86px; height: 86px; }
.collection-track .alchemy-recipe-top > .alchemy-state { font-size: 9px; }
.collection-browser .collection-keepsake-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 21px; }
.collection-keepsake-grid .companion-keepsake { padding: 18px 13px; }
.collection-keepsake-grid .companion-keepsake-emblem { width: 90px; height: 90px; }
.collection-keepsake-grid .companion-keepsake-emblem > .companion-glyph { width: 88px; height: 88px; }
.collection-keepsake-grid .companion-keepsake > strong { font-size: 12px; }
.collection-keepsake-grid .companion-keepsake-requirement { font-size: 10px; }
.collection-card-open { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; color: #5d7048; font-size: 9px; font-weight: 650; }
.collection-card-open > .icon { width: 12px; height: 12px; }
.collection-buddy-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 20px; }
.collection-buddy-footer p { color: #6d7157; font-size: 10px; line-height: 1.8; }
.collection-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 38px 24px; margin-top: 21px; border: 1px dashed #cfc4a3; border-radius: 13px; background: #fffdf3; text-align: center; }
.collection-empty h3 { max-width: 480px; color: #526848; font-family: Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1.45; }
.collection-empty p { max-width: 470px; color: #6d7157; font-size: 11px; line-height: 1.9; }
.collection-empty .button { margin-top: 6px; }
.collection-discoveries { margin: 30px 0 36px; }
.collection-discoveries-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.collection-discoveries-heading h2 { margin-top: 5px; color: #486142; font-family: Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.3; letter-spacing: -.5px; }
.collection-discoveries-heading > p { max-width: 420px; color: #717458; font-size: 11px; line-height: 1.85; }
.collection-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 17px; }
.collection-discovery-card { display: flex; flex-direction: column; align-items: start; min-width: 0; padding: 19px; border: 1px dashed #d7d3bb; border-radius: 12px; background: #f9f6e9; text-align: left; }
.collection-discovery-card:hover { border-color: #8b9368; }
.collection-discovery-card:focus-visible { outline: 3px solid #ad7435; outline-offset: 3px; }
.collection-discovery-card.is-unlocked { border-style: solid; border-color: #c6d0ae; background: linear-gradient(135deg, #fffdf2, #edf1df); }
.collection-discovery-mark { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 13px; }
.collection-discovery-mark > img, .collection-discovery-mark > svg { width: 72px; height: 72px; object-fit: contain; }
.collection-discovery-card > strong { color: #4e6545; margin-top: 7px; font-size: 16px; line-height: 1.5; }
.collection-discovery-status { display: flex; align-items: center; gap: 6px; color: #6c7354; font-size: 10px; line-height: 1.7; margin-top: 13px; }
.collection-discovery-status > .icon { width: 12px; height: 12px; }
.collection-discovery-link { display: flex; align-items: center; gap: 7px; padding-top: 15px; margin-top: auto; color: #596e48; font-size: 10px; line-height: 1.6; font-weight: 650; }
.collection-discovery-link > .icon { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .collection-browser-heading { flex-direction: column; gap: 10px; }
  .collection-kept-label { margin-top: 0; }
  .collection-browser .collection-keepsake-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-track .alchemy-recipe-top { flex-direction: column; align-items: start; }
}
@media (max-width: 620px) {
  .collection-browser { padding: 19px 13px; border-radius: 14px; }
  .collection-browser-heading { padding: 0 3px; }
  .collection-browser-heading h2 { font-size: 27px; }
  .collection-browser-heading p { font-size: 11px; }
  .collection-category-tabs { gap: 6px; margin-top: 19px; }
  .collection-category { padding: 12px 8px; gap: 5px; border-radius: 9px; }
  .collection-category > span { font-size: 12px; }
  .collection-category > small { font-size: 8px; }
  .collection-filter-row { gap: 6px; margin-top: 14px; }
  .collection-filter { flex: 1 0 calc(50% - 6px); min-height: 42px; padding: 8px; font-size: 10px; }
  .collection-results-heading { flex-direction: column; gap: 7px; margin-top: 13px; }
  .collection-results-heading > span { padding-top: 0; }
  .collection-browser .collection-track { padding: 16px 10px; margin-top: 16px; }
  .collection-track .alchemy-track-heading { flex-direction: column; align-items: start; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; }
  .collection-track .alchemy-track-heading h3 { font-size: 22px; }
  .collection-track .alchemy-track-heading > span { padding: 4px 9px; font-size: 9px; }
  .collection-track .alchemy-ingredient-grid, .collection-track .alchemy-recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .collection-track .alchemy-ingredient-card { padding: 14px 8px; }
  .collection-track .alchemy-bottle, .collection-track .alchemy-book-mark { width: 76px; height: 76px; }
  .collection-track .alchemy-bottle > .alchemy-glyph, .collection-track .alchemy-book-mark > .alchemy-glyph { width: 74px; height: 74px; }
  .collection-track .alchemy-ingredient-card > .alchemy-item-name { font-size: 12px; }
  .collection-track .alchemy-ingredient-card > .alchemy-item-concept { font-size: 9px; }
  .collection-track .alchemy-recipe-card { padding: 13px 10px; }
  .collection-track .alchemy-recipe-card > .alchemy-item-name { font-size: 13px; }
  .collection-track .alchemy-recipe-pair > span:not(.alchemy-combine) { font-size: 7px; }
  .collection-browser .collection-keepsake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .collection-keepsake-grid .companion-keepsake { padding: 15px 9px; }
  .collection-keepsake-grid .companion-keepsake-emblem { width: 78px; height: 78px; }
  .collection-keepsake-grid .companion-keepsake-emblem > .companion-glyph { width: 76px; height: 76px; }
  .collection-keepsake-grid .companion-keepsake > strong { font-size: 11px; }
  .collection-keepsake-grid .companion-keepsake-requirement { font-size: 9px; }
  .collection-buddy-footer { flex-direction: column; align-items: start; }
  .collection-empty { padding: 29px 15px; }
  .collection-discoveries-heading { flex-direction: column; align-items: start; gap: 10px; }
  .collection-discovery-grid { grid-template-columns: 1fr; gap: 10px; }
  .collection-discovery-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 13px; padding: 17px; }
  .collection-discovery-mark { grid-row: span 4; align-self: start; width: 60px; height: 60px; margin: 0; }
  .collection-discovery-mark > img, .collection-discovery-mark > svg { width: 60px; height: 60px; }
  .collection-discovery-card > .alchemy-kicker, .collection-discovery-card > strong, .collection-discovery-status, .collection-discovery-link { grid-column: 2; }
  .collection-discovery-card > strong { font-size: 15px; }
  .collection-discovery-link { padding-top: 11px; }
}