/* KAYCO Global Item Master v10: the catalog library (#/catalogs, #/catalogs/:id) and the catalog cover tile (also on the item page's
   "Appears in catalogs"). Components in js/catalogs.js; reuses the list page (im-list.css) and item page (im-item.css) building blocks. */

/* cover tile: a thumbnail when one exists, else a tinted tile with the year, season and company */
.cl-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1px;aspect-ratio:3 / 4;width:100%;overflow:hidden;padding:12px;border-radius:14px;background:linear-gradient(160deg,#8C4A84 0%,#5B2456 100%);color:#fff}
.cl-tile>svg{position:absolute;top:12px;left:12px;opacity:.7}
.cl-tile b{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.03em}
.cl-tile small{font-size:12px;font-weight:700;opacity:.9}
.cl-tile i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-style:normal;font-weight:600;opacity:.75}
.cl-tile.is-daily{background:linear-gradient(160deg,#1E9A70 0%,#0E5E43 100%)}
.cl-tile.is-hol{background:linear-gradient(160deg,#C2752E 0%,#8A4A12 100%)}
.cl-tile.is-none{background:linear-gradient(160deg,#55515C 0%,#2A2730 100%)}
.cl-tile.has-img{padding:0;background:#F5F4F1;box-shadow:inset 0 0 0 1px #ECEAEE}
.cl-tile.has-img img{width:100%;height:100%;object-fit:cover}
.cl-tile.skeleton{background:#F1EFF2}
.cl-tile-sm{flex:none;width:44px;padding:5px;border-radius:9px}
.cl-tile-sm>svg,.cl-tile-sm small,.cl-tile-sm i{display:none}.cl-tile-sm b{font-size:12px;letter-spacing:-.01em}
.cl-tile-lg{flex:none;width:132px;border-radius:18px;box-shadow:0 1px 2px rgba(27,24,31,.06),0 18px 36px -22px rgba(27,24,31,.45)}
.cl-tile-lg b{font-size:32px}
@media (min-width:768px){.cl-tile-lg{width:180px}.cl-tile-lg b{font-size:40px}}

/* library */
.cl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cl-new{flex:none}
.cl-bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cl-search{flex:1 1 260px;max-width:none}
.cl-sels{display:flex;flex-wrap:wrap;gap:8px}
.cl-sel{max-width:200px}.cl-sel.is-on{border-color:#7A3872;background:#FBF7FB;color:#7A3872}
@media (max-width:639px){.cl-search{flex-basis:100%}.cl-sels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}.cl-sel{max-width:none;min-width:0;height:40px;padding:0 24px 0 12px}.cl-sel>span{overflow:hidden;text-overflow:ellipsis}}
.cl-sum{display:flex;align-items:center;gap:10px;margin:2px 0 4px;font-size:13.5px;color:#6B6772}.cl-sum b{color:#1B181F}
.cl-year{margin-top:18px}
.cl-yh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#121014}
.cl-yh small{font-size:13px;font-weight:700;color:#706C76}
.cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.cl-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1200px){.cl-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cl-card{display:flex;flex-direction:column;height:100%;padding:6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #ECEAEE;transition:transform .25s ease,box-shadow .25s ease}
.cl-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px transparent,0 1px 2px rgba(27,24,31,.04),0 16px 36px -18px rgba(27,24,31,.3)}
.cl-card:focus-visible{outline:2px solid #7A3872;outline-offset:2px}
.cl-card-b{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 6px 6px}
.cl-card-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#706C76}
.cl-card-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.3;color:#121014}
.cl-card:hover .cl-card-t{color:#7A3872}
.cl-card-m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:#55515C}
.cl-card-n{margin-top:2px;font-size:12px;color:#6B6772;font-variant-numeric:tabular-nums}
.cl-drv{font-size:12px;font-weight:600;color:#706C76;white-space:nowrap}

/* catalog page */
.cl-page .ip-back{width:auto;height:40px;padding:0 12px 0 8px}.cl-page .ip-back-t{display:inline}
.cl-hero{display:flex;align-items:flex-start;gap:16px;margin-top:6px;padding:16px;border-radius:24px;background:linear-gradient(180deg,#FBF7FB 0%,#fff 100%);box-shadow:0 0 0 1px #ECEAEE}
@media (min-width:768px){.cl-hero{gap:28px;padding:24px}}
.cl-h1{margin-top:4px;font-size:22px;line-height:1.15;overflow-wrap:anywhere}
@media (min-width:768px){.cl-h1{font-size:30px}}
.cl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cl-chip{padding:3px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #ECEAEE;font-size:12.5px;font-weight:700;color:#3B3741}
.cl-chip.is-year{background:#7A3872;box-shadow:none;color:#fff}.cl-chip.is-aud{background:#F3EBF6;box-shadow:none;color:#7A3872}
.cl-path{margin-top:10px;white-space:normal;overflow-wrap:anywhere}
.cl-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:519px){.cl-hero{flex-direction:column}.cl-tile-lg{width:110px}.cl-acts>*{flex:1 1 100%;justify-content:center}}
.cl-sec{margin-top:16px}
.ip-chip.is-main{background:#F3EBF6;color:#7A3872}
.cl-items{margin-top:28px}
.cl-items-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.cl-h2{display:flex;align-items:baseline;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#121014}
.cl-h2 small{font-size:14px;font-weight:700;color:#706C76}
.cl-ev{margin-top:4px;max-width:720px;font-size:13px;line-height:1.5;color:#6B6772}
.cl-make{flex:none}
@media (max-width:639px){.cl-items-h{flex-direction:column;align-items:stretch}.cl-make{display:none}}
@media (min-width:640px){.cl-igrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.cl-igrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.cl-igrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cl-more{margin:14px auto 0;display:flex}
.cl-raw{margin-top:20px;padding:0 16px 12px;border-top:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #ECEAEE}
.cl-raw>.ip-note{margin-top:0}
.cl-codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cl-codes li{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:10px;background:#F5F4F1;font-size:13px;font-weight:600;color:#1B181F}
.cl-codes small{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#706C76}
.cl-foot{margin-top:24px;font-size:12px;color:#706C76}
