/* KAYCO Item Master v13n — home page (home.js, hm-*) and brand landing page (brand.js, bl-*). Tokens: im.css :root. */

/* ---------- home: hero ---------- */
.hm { padding-bottom:32px; }
.hm-hero { position:relative; margin:12px -16px 0; padding:22px 16px 20px; background:linear-gradient(180deg, var(--plum-50), rgba(251,247,251,0)); }
.hm-eyebrow { font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--plum); }
.hm-h1 { margin-top:6px; font-size:26px; line-height:1.12; font-weight:800; letter-spacing:-.03em; color:var(--ink-950); }
.hm-sub { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:13.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.hm-sub b { color:var(--ink-900); font-weight:700; }
.hm-search { display:none; position:relative; z-index:30; max-width:760px; margin-top:16px; }
.hm-sb .im-sb { height:56px; padding-left:20px; background:#fff; border-color:var(--line); box-shadow:0 1px 2px rgba(27,24,31,.04), 0 12px 32px -20px rgba(65,22,61,.35); }
.hm-sb .im-sb-in { font-size:16px; }
.hm-quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (min-width:640px) { .hm-hero { margin:12px -8px 0; padding:26px 8px 22px; border-radius:0 0 28px 28px; } }
@media (min-width:768px) {
  .hm-hero { padding:34px 32px 28px; margin:14px 0 0; border-radius:28px; background:linear-gradient(135deg, var(--plum-50) 0%, #fff 70%); box-shadow:inset 0 0 0 1px var(--line); }
  .hm-h1 { font-size:34px; }
  .hm-search { display:block; }
  /* one search box at a time: the header's hides while the hero's is on screen */
  html[data-hm-search] .im-head .im-head-search { display:none; }
}
@media (max-width:767.98px) {
  .hm-quick { flex-wrap:nowrap; margin:14px -16px 0; padding:2px 16px 4px; overflow-x:auto; scrollbar-width:none; }
  .hm-quick::-webkit-scrollbar { display:none; }
  .hm-quick > a { flex:none; }
  .hm-atts > li:nth-child(n+6) { display:none; }   /* phones: the top five; the rest are on the Data quality page */
}

/* v13o-p: "New in this version" (dismissed per version) */
.hm-wn { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:12px; padding:10px 44px 10px 14px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--plum-200); font-size:13px; }
.hm-wn-h { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--plum); white-space:nowrap; }
.hm-wn-l { display:flex; flex-wrap:wrap; gap:4px; }
.hm-wn-a { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 10px; border-radius:999px; background:var(--plum-50); color:var(--ink-700); font-weight:600; white-space:nowrap; }
a.hm-wn-a:hover, button.hm-wn-a:hover { background:var(--plum-100); color:var(--plum); }
.hm-wn-a svg { color:var(--plum); }
.hm-wn-x { position:absolute; top:6px; right:6px; display:flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:999px; color:var(--ink-500); }
.hm-wn-x:hover { background:var(--mist); color:var(--ink-900); }
@media (max-width:767.98px) { .hm-wn-a { min-height:34px; } }

/* ---------- home: layout ---------- */
.hm-grid { display:flex; flex-direction:column; gap:22px; margin-top:22px; }
.hm-main, .hm-side { display:contents; }
.hm-o1 { order:1; } .hm-o2 { order:2; } .hm-o3 { order:3; } .hm-o4 { order:4; } .hm-o5 { order:5; } .hm-o6 { order:6; }
@media (min-width:1024px) {
  .hm-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:28px; align-items:start; margin-top:26px; }
  .hm-main, .hm-side { display:flex; flex-direction:column; gap:26px; min-width:0; }
  .hm-side { position:sticky; top:calc(var(--header-h, 0px) + 12px); }
}
.hm-sec { min-width:0; }
.hm-sec-h { display:flex; align-items:baseline; gap:10px; min-height:32px; margin-bottom:10px; }
.hm-sec-h h2 { font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--ink-950); white-space:nowrap; }
.hm-sec-n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.hm-sec-a { display:inline-flex; flex:none; align-items:center; gap:4px; margin-left:auto; min-height:32px; font-size:13px; font-weight:600; color:var(--plum); white-space:nowrap; }
.hm-sec-a:hover { text-decoration:underline; }
.hm-note { display:flex; gap:10px; padding:14px 16px; border-radius:16px; background:var(--canvas); box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; line-height:1.5; color:var(--ink-600); }
.hm-none { padding:4px 0 2px; font-size:13.5px; color:var(--ink-500); }
.hm-fine { margin-top:-4px; margin-bottom:10px; font-size:12.5px; line-height:1.45; color:var(--ink-500); }
.hm-new + .hm-new { margin-top:16px; }
.hm-new .hm-sec-h h2 { font-size:14.5px; }
.hm-new + .hm-fine { margin-top:12px; margin-bottom:0; }
.hm-more { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-top:6px; font-size:13px; font-weight:600; color:var(--plum); }
.hm-more:hover { text-decoration:underline; }

/* mini item cards: a scroll row on phones, a grid on wider screens */
.hm-row { display:grid; grid-auto-flow:column; grid-auto-columns:136px; gap:10px; margin:0 -16px; padding:2px 16px 6px; overflow-x:auto; }
@media (min-width:640px) { .hm-row { grid-auto-flow:row; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); margin:0; padding:2px 0; overflow:visible; }
  .hm-row > li:nth-child(n+7) { display:none; } }
@media (min-width:1280px) { .hm-row > li:nth-child(n+7) { display:list-item; } .hm-row > li:nth-child(n+13) { display:none; } .hm-row { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.hm-mini { display:flex; flex-direction:column; height:100%; padding:5px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:transform .25s ease, box-shadow .25s ease; }
.hm-mini:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px transparent, 0 14px 30px -18px rgba(27,24,31,.32); }
.hm-mini:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.hm-mini-ph { aspect-ratio:1 / 1; border-radius:12px; }
.hm-mini.is-off .hm-mini-ph { opacity:.55; filter:saturate(.35); }
.hm-mini-b { display:flex; flex-direction:column; gap:1px; padding:7px 4px 3px; min-width:0; }
.hm-mini-b small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; color:var(--ink-500); }
.hm-mini-b b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ink-900); }
.hm-mini:hover .hm-mini-b b { color:var(--plum); }
.hm-mini-b .im-mono { font-size:11px; color:var(--ink-400); }

/* lists */
.hm-lists { display:flex; flex-direction:column; gap:8px; }
.hm-list { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .15s; }
.hm-list:hover { box-shadow:inset 0 0 0 1px var(--plum-200); }
.hm-list b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; color:var(--ink-900); }
.hm-list small { display:block; font-size:12px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.hm-list-pics { display:flex; flex:none; }
.hm-list-pics > * + * { margin-left:-10px; }
.hm-list-ph { width:36px; height:36px; border-radius:11px; box-shadow:0 0 0 2px #fff; }
.hm-list-ph.is-empty { display:inline-flex; align-items:center; justify-content:center; background:var(--plum-50); color:var(--plum); }

/* needs attention */
.hm-atts { display:flex; flex-direction:column; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.hm-atts > li + li { border-top:1px solid var(--line); }
.hm-att { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px 0 14px; font-size:13.5px; color:var(--ink-700); transition:background .12s; }
.hm-att:hover { background:var(--plum-50); color:var(--ink-900); }
.hm-att b { font-weight:700; color:var(--ink-900); }
.hm-att-h { display:flex; justify-content:space-between; margin:14px 2px 8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.hm-att-h span { letter-spacing:0; text-transform:none; font-weight:500; }
@media (min-width:1024px) { .hm-att { min-height:38px; } }
/* v13o-p: counts from dq.js: items marked fixed (waiting for a data load) are left out and shown apart; a note when /api/dq can't be read */
.hm-att-w { flex:none; padding:2px 7px; border-radius:999px; background:var(--leaf-50); color:var(--leaf); font-size:11.5px; font-weight:700; white-space:nowrap; }
.hm-att-err { display:flex; gap:8px; margin:-2px 0 10px; padding:8px 10px; border-radius:12px; background:#FDF6E7; color:#7A5300; font-size:12.5px; line-height:1.45; }
/* categories */
.hm-cats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
@media (min-width:640px) { .hm-cats { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1280px) { .hm-cats { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.hm-cat { display:flex; align-items:center; gap:10px; height:100%; padding:8px 10px 8px 8px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .15s; }
.hm-cat:hover { box-shadow:inset 0 0 0 1px var(--ink-300); }
.hm-cat-ic { display:flex; flex:none; width:38px; height:38px; align-items:center; justify-content:center; border-radius:11px; }
.hm-cat b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--ink-900); }
.hm-cat small { display:block; font-size:12px; color:var(--ink-500); }

/* brands */
.hm-brands { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (min-width:640px) { .hm-brands { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1280px) { .hm-brands { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.hm-brand { display:flex; flex-direction:column; height:100%; padding:5px 5px 9px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:transform .25s ease, box-shadow .25s ease; }
.hm-brand:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px transparent, 0 14px 30px -18px rgba(27,24,31,.32); }
/* v13o-p: the pictures sit in an absolutely placed row, so their height is definite on every browser (it was % of an aspect-ratio box) */
.hm-brand-art { position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; border-radius:12px; background:var(--canvas); }
.hm-brand-pics { position:absolute; inset:6px 6px 4px; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.hm-brand-pics img { flex:0 1 32%; min-width:0; width:32%; height:100%; object-fit:contain; object-position:center bottom; mix-blend-mode:multiply; }
.hm-brand-art.is-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.hm-brand-art.is-empty small { font-size:11.5px; font-weight:600; color:var(--ink-500); }
.hm-brand-n { margin:8px 5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--ink-900); }
.hm-brand:hover .hm-brand-n { color:var(--plum); }
.hm-brand-m { margin:1px 5px 0; font-size:12px; color:var(--ink-500); }

/* ---------- brand landing page ---------- */
.bl-head { display:flex; flex-direction:column; gap:16px; }
.bl-head.is-hero { margin:0 -16px; padding:16px; background:linear-gradient(180deg, var(--bl-tint, var(--plum-50)), rgba(255,255,255,0)); }
.bl-id { display:flex; align-items:center; gap:14px; min-width:0; }
.bl-logo { display:flex; flex:none; width:90px; height:64px; align-items:center; justify-content:center; padding:6px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.bl-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.bl-mark { border-radius:16px !important; }
.bl-stats { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:4px; font-size:12.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.bl-stats b { color:var(--ink-900); font-weight:700; }
.bl-pics { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.bl-pics > a:nth-child(n+4) { display:none; }
.bl-pic { display:block; aspect-ratio:1 / 1; padding:10%; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line); transition:transform .25s ease, box-shadow .25s ease; }
.bl-pic:hover { transform:translateY(-2px); box-shadow:0 0 0 1px transparent, 0 14px 30px -18px rgba(27,24,31,.32); }
.bl-pic img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.bl-cats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.bl-cat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:104px; padding:10px; border-radius:16px; text-align:center; }
.bl-cat b { font-size:13px; font-weight:700; line-height:1.2; }
.bl-cat span { font-size:12px; opacity:.8; }
.bl-cats-note { grid-column:1 / -1; font-size:12.5px; color:var(--ink-500); }
@media (min-width:640px) { .bl-head.is-hero { margin:0 -8px; padding:18px 8px; } .bl-pics { grid-template-columns:repeat(4, minmax(0, 1fr)); } .bl-pics > a:nth-child(4) { display:block; } }
@media (min-width:768px) {
  .bl-head.is-hero { margin:4px 0 0; padding:22px 24px; border-radius:28px; background:linear-gradient(135deg, var(--bl-tint, var(--plum-50)) 0%, #fff 75%); box-shadow:inset 0 0 0 1px var(--line); }
  .bl-logo { width:120px; height:84px; }
  .bl-stats { font-size:13px; }
}
@media (min-width:1024px) {
  .bl-head.is-hero { flex-direction:row; align-items:center; gap:28px; }
  .bl-head.is-hero .bl-id { flex:0 1 42%; }
  .bl-head.is-hero .bl-pics, .bl-head.is-hero .bl-cats { flex:1 1 58%; min-width:0; }
  .bl-pics { grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .bl-pics > a:nth-child(5) { display:block; }
  .bl-pics.n1, .bl-pics.n2 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* phones: the Items | Brand library switch stays (im-list.css hides the title's status switch there, which also hid this one) */
.bl-tabs { margin-top:12px; }
@media (max-width:639.98px) { .im-title > .im-stseg.bl-tabs { display:inline-flex; } }

/* product lines */
.bl-lines { margin-top:18px; }
.bl-lgrid { display:grid; grid-auto-flow:column; grid-auto-columns:40%; gap:10px; margin:0 -16px; padding:2px 16px 6px; overflow-x:auto; scrollbar-width:none; }
.bl-lgrid::-webkit-scrollbar { display:none; }
@media (min-width:640px) { .bl-lgrid { grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:0; padding:0; overflow:visible; } }
@media (min-width:1280px) { .bl-lgrid { grid-template-columns:repeat(8, minmax(0, 1fr)); } }
.bl-line { display:flex; flex-direction:column; width:100%; height:100%; padding:5px 5px 9px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); text-align:left; transition:transform .25s ease, box-shadow .25s ease; }
.bl-line:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px transparent, 0 14px 30px -18px rgba(27,24,31,.32); }
.bl-line:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.bl-line-art { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; aspect-ratio:1 / 1; padding:6px; border-radius:12px; background:var(--canvas); overflow:hidden; }
.bl-line-art img { width:100%; height:100%; min-height:0; object-fit:contain; mix-blend-mode:multiply; }
.bl-line-art.n1 { grid-template-columns:1fr; grid-template-rows:1fr; padding:12%; }
.bl-line-art.n2 img, .bl-line-art.n3 img:first-child { grid-row:span 2; }
.bl-line-art.n3 { grid-template-columns:1.3fr 1fr; }
.bl-line-art.is-tint { display:flex; align-items:center; justify-content:center; }
.bl-line-n { margin:8px 5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--ink-900); }
.bl-line:hover .bl-line-n { color:var(--plum); }
.bl-line-m { margin:1px 5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink-500); font-variant-numeric:tabular-nums; }