/* Shared catalog composition for collections, brands, tags and search. */
.joira-beauty .joira-listing {
  --listing-ink: #493637;
  --listing-muted: #72585b;
  --listing-rose: #a34859;
  --listing-line: #e8d8d5;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  width: min(1232px, calc(100% - 48px));
  margin: 28px auto 60px;
}
.joira-listing-main { min-width: 0; }
.joira-beauty .joira-listing-filters { width: auto; margin: 0; padding: 0; border: 1px solid var(--listing-line); border-radius: 16px; background: #fffaf8; }
.joira-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 18px; background: #f4e9e6; border-radius: 16px 16px 0 0; }
.joira-beauty .joira-filter-heading h2 { margin: 0; font-family: var(--font-jost), sans-serif; font-size: 15px; font-weight: 600; }
.joira-filter-heading a { font-size: 12px; color: var(--listing-rose); text-decoration: underline; text-underline-offset: 3px; }
.joira-beauty .joira-filter-group { min-width: 0; margin: 0; padding: 20px 18px; border: 0; border-top: 1px solid var(--listing-line); }
.joira-beauty .joira-filter-group:first-of-type { border-top: 0; }
.joira-beauty .joira-filter-group :is(h3,legend),
.joira-beauty .joira-filter-group > label:not(.joira-checkbox) { display: block; width: 100%; margin: 0 0 12px; font-family: var(--font-jost), sans-serif; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--listing-ink); }
.joira-beauty fieldset.joira-filter-group { padding-top: 0; }
.joira-beauty .joira-filter-group legend { float: left; padding: 20px 0 0; }
.joira-beauty .joira-listing .joira-category-links { display: grid; gap: 4px; margin: 0; padding: 0; font-size: 14px; }
.joira-listing .joira-category-links a { padding: 8px 10px; border-radius: 8px; color: var(--listing-muted); }
.joira-listing .joira-category-links a:hover { background: #f7eeeb; color: var(--listing-rose); }
.joira-listing .joira-category-links a[aria-current] { background: #f0deda; color: #833b49; font-weight: 600; }
.joira-beauty .joira-listing-filters :is(input,select) { min-height: 42px; border-color: #d8c3c2; background: #fff; color: var(--listing-ink); }
.joira-beauty .joira-listing .joira-price-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; clear: both; }
.joira-beauty .joira-listing .joira-price-range label { min-width: 0; margin: 0; font-size: 12px; color: var(--listing-muted); }
.joira-listing .joira-price-range label span { display: block; margin-bottom: 6px; }
.joira-beauty .joira-listing .joira-price-range input { width: 100%; padding: 10px 8px; }
.joira-beauty .joira-filter-submit .joira-checkbox { margin: 0 0 18px; align-items: center; font-size: 13px; }
.joira-beauty .joira-filter-submit input[type=checkbox] { min-height: 0; width: 16px; height: 16px; accent-color: var(--listing-rose); }
.joira-listing .joira-solid-button { border-color: var(--listing-rose); background: var(--listing-rose); }
.joira-filter-toggle { display: none; }
.joira-listing-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border: 1px solid var(--listing-line); border-radius: 20px; background: #f4e9e6; overflow: hidden; }
.joira-listing-cover-copy { position: relative; isolation: isolate; min-width: 0; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; }
.joira-listing-monogram { position: absolute; z-index: -1; top: 30px; left: 15px; color: #a348590b; font-family: var(--font-cormorant), Georgia, serif; font-size: 170px; line-height: 1; pointer-events: none; }
.joira-listing-crumbs { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 28px; font-size: 11px; line-height: 1.7; color: var(--listing-muted); }
.joira-listing-crumbs a:hover { color: var(--listing-rose); text-decoration: underline; }
.joira-listing-crumbs [aria-current] { font-weight: 500; }
.joira-listing-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--listing-rose); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.joira-listing-eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.joira-beauty .joira-listing-cover h1 { margin: 0; color: var(--listing-ink); font-size: clamp(34px, 3.3vw, 48px); font-weight: 500; line-height: 1.04; letter-spacing: -.025em; overflow-wrap: anywhere; }
.joira-listing-lead { margin: 18px 0 24px; font-size: 14px; line-height: 1.75; color: var(--listing-muted); }
.joira-listing-count { display: flex; align-items: baseline; gap: 8px; width: 100%; margin-top: auto; padding-top: 18px; border-top: 1px solid #dbc4c1; color: var(--listing-ink); }
.joira-listing-count strong { font-size: 25px; font-weight: 500; line-height: 1; }
.joira-listing-count span { font-size: 12px; color: var(--listing-muted); }
.joira-listing-cover-media { position: relative; min-height: 390px; min-width: 0; overflow: hidden; background: #fff; }
.joira-listing-cover-media img { position: absolute; inset: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; max-height: 100%; padding: 16px; object-fit: contain; object-position: center; background: #fff; }
.joira-listing-results { min-width: 0; margin-top: 22px; }
.joira-beauty .joira-listing .joira-listing-toolbar { padding: 14px 0; margin: 0 0 20px; border-bottom: 1px solid var(--listing-line); flex-wrap: wrap; }
.joira-listing-toolbar > label { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.joira-beauty .joira-listing-toolbar select { max-width: 100%; min-height: 42px; border-color: var(--listing-line); font-size: 12px; }
.joira-listing-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 22px; row-gap: 30px; }
.joira-listing-reading { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--listing-line); }
.joira-listing-reading h2 { font-size: 30px; }
.joira-category-faq { scroll-margin-top: 140px; padding-top: 32px; }
.joira-category-faq-header { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; margin-bottom: 24px; }
.joira-category-faq-header .joira-listing-eyebrow { margin-bottom: 10px; }
.joira-beauty .joira-category-faq-header h2 { margin: 0; color: var(--listing-ink); font-size: clamp(30px, 2.7vw, 38px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.joira-category-faq-intro { margin: 0; max-width: 48ch; font-size: 14px; line-height: 1.75; color: var(--listing-muted); }
.joira-category-faq-list { overflow: hidden; border: 1px solid var(--listing-line); border-radius: 16px; background: #fff; }
.joira-category-faq-item + .joira-category-faq-item { border-top: 1px solid var(--listing-line); }
.joira-category-faq-item[open] { background: #fffaf8; }
.joira-category-faq-item summary { display: grid; grid-template-columns: 24px minmax(0,1fr) 24px; align-items: center; gap: 14px; padding: 22px; min-height: 68px; color: var(--listing-ink); font-size: 16px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.joira-category-faq-item summary::-webkit-details-marker { display: none; }
.joira-category-faq-item summary::marker { content: ''; }
.joira-category-faq-item summary:hover { background: #f8efed; }
.joira-category-faq-item summary:focus-visible { outline: 2px solid var(--listing-rose); outline-offset: -4px; border-radius: 10px; }
.joira-category-faq-number { align-self: start; padding-top: 3px; color: var(--listing-muted); font-size: 11px; font-weight: 400; letter-spacing: .08em; }
.joira-category-faq-icon { position: relative; display: block; width: 24px; height: 24px; border: 1px solid var(--listing-line); border-radius: 50%; color: var(--listing-rose); }
.joira-category-faq-icon::before, .joira-category-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%,-50%); }
.joira-category-faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.joira-category-faq-item[open] .joira-category-faq-icon::after { display: none; }
.joira-category-faq-answer { padding: 0 60px 24px; }
.joira-category-faq-answer p { max-width: 76ch; margin: 0; color: var(--listing-muted); font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.joira-category-faq-help { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 20px; font-size: 13px; line-height: 1.7; }
.joira-category-faq-help p { margin: 0; color: var(--listing-muted); }
.joira-category-faq-help a { color: var(--listing-rose); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.joira-category-faq-help a:focus-visible { outline: 2px solid var(--listing-rose); outline-offset: 4px; }
@media (min-width: 901px) and (max-width: 1100px) {
  .joira-beauty .joira-listing { grid-template-columns: 204px minmax(0,1fr); gap: 20px; }
  .joira-listing-cover-copy { padding: 24px; }
  .joira-listing-cover { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); }
  .joira-listing-products { gap: 18px; }
}
@media (max-width: 900px) {
  .joira-beauty .joira-listing { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 22px; }
  .joira-listing-main { display: contents; }
  .joira-listing-cover { order: 1; }
  .joira-beauty .joira-listing-filters { order: 2; }
  .joira-filter-heading { display: none; }
  .joira-filter-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; min-height: 54px; text-align: left; color: var(--listing-ink); background: #f4e9e6; border-radius: 16px; font-size: 14px; font-weight: 500; }
  .joira-filter-toggle svg { width: 20px; height: 20px; }
  .joira-filter-toggle-state { margin-left: auto; color: var(--listing-rose); font-size: 12px; }
  .joira-filter-toggle[aria-expanded=true] { border-radius: 16px 16px 0 0; }
  .joira-listing-results { order: 3; margin-top: 0; }
  .joira-listing-reading { order: 4; margin-top: 18px; }
}
@media (max-width: 600px) {
  .joira-category-faq { padding-top: 24px; scroll-margin-top: 116px; }
  .joira-category-faq-header { grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 20px; }
  .joira-category-faq-item summary { grid-template-columns: 20px minmax(0,1fr) 24px; gap: 10px; padding: 18px 16px; font-size: 15px; }
  .joira-category-faq-answer { padding: 0 18px 22px; }
  .joira-category-faq-answer p { font-size: 14px; line-height: 1.8; }
  .joira-category-faq-help { display: block; }
  .joira-category-faq-help p { margin-bottom: 5px; }
  .joira-beauty .joira-listing { width: calc(100% - 32px); margin-top: 18px; margin-bottom: 36px; gap: 16px; }
  .joira-listing-cover { grid-template-columns: minmax(0,1fr); border-radius: 16px; }
  .joira-listing-cover-copy { padding: 22px; }
  .joira-listing-crumbs { margin-bottom: 20px; }
  .joira-beauty .joira-listing-cover h1 { font-size: 36px; }
  .joira-listing-lead { margin: 14px 0 18px; }
  .joira-listing-count { padding-top: 14px; }
  .joira-listing-cover-media { min-height: 0; aspect-ratio: 16 / 9; }
  .joira-listing-monogram { font-size: 145px; }
  .joira-listing-products { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px; row-gap: 22px; }
  .joira-beauty .joira-listing .joira-listing-toolbar { gap: 10px; padding-top: 0; margin-bottom: 16px; }
  .joira-listing-toolbar > label { margin-left: auto; }
  .joira-beauty .joira-listing-toolbar select { padding: 10px; }
}