/* Product pills (6 Nov 2026): small coloured labels on product cards (one line, under the price) and on the product
   page (under the title). Markup comes from catalog/controller/extension/module/nli_pills.php; the fit on cards and
   the description bubble come from catalog/view/javascript/nli-pills.js. The colours of each pill are its own data. */
.nli-pills { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; min-width: 0; margin: 0; }   /* no margin: the card's own spacing is enough (owner, 7 Nov) */
.nli-pills .nli-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; margin: 0; padding: 0 8px; border: 0;
  border-radius: 6px; font: 700 10.5px/1 Inter, 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  cursor: default; text-decoration: none; -webkit-appearance: none; appearance: none; }
.nli-pills .nli-pill > span { display: inline; }
.nli-pills button.nli-pill { cursor: pointer; }   /* every pill opens its bubble with the "See all" link (release 2) */
.nli-pills .nli-pill svg { width: 14px; height: 14px; flex: none; }
.nli-pills .nli-pill[hidden] { display: none !important; }
.nli-pills .nli-pill-more { background: #ffffff; color: #374151; border: 1px solid #d1d5db; box-shadow: none; }
/* a first pill too long for the card line gives way: its text ends in "...", so the "+N" chip stays in view. Only the
   first pill shrinks, and not while the script measures natural widths (nli-fitting). */
.nli-pills:not(.nli-fitting) > .nli-pill:first-child:not(.nli-pill-more) { flex: 0 1 auto; min-width: 0; }
.nli-pills > .nli-pill:first-child > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nli-pills .nli-pill:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* the product page: every pill, wrapping */
.nli-pills.nli-pills--page { flex-wrap: wrap; overflow: visible; gap: 8px; margin: -6px 0 14px; }
.nli-pills--page .nli-pill { height: 28px; padding: 0 11px; font-size: 12px; }
.nli-pills--page .nli-pill svg { width: 15px; height: 15px; }

/* phones (the /nlm/ shell) */
html[data-nlm-mobile="1"] .nli-pills { gap: 4px; margin: 0; }
html[data-nlm-mobile="1"] .nli-pills .nli-pill { height: 19px; padding: 0 6px; gap: 3px; font-size: 9px; border-radius: 5px; }
html[data-nlm-mobile="1"] .nli-pills .nli-pill svg { width: 11px; height: 11px; }
html[data-nlm-mobile="1"] .nli-pills.nli-pills--page { margin: 0 14px 10px; gap: 6px; }
html[data-nlm-mobile="1"] .nli-pills--page .nli-pill { height: 24px; padding: 0 9px; font-size: 10.5px; }
html[data-nlm-mobile="1"] .nli-pills--page .nli-pill svg { width: 13px; height: 13px; }

/* the description bubble (one per page, placed by the script) */
/* a description may be one long unbroken word (the editor allows it): it breaks inside the bubble (V195.1) */
.nli-pill-bubble { position: fixed; z-index: 10450; max-width: 260px; box-sizing: border-box; padding: 8px 11px; border-radius: 8px;
  background: #1f2937; color: #ffffff; font: 400 13px/1.45 Inter, 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  text-transform: none; letter-spacing: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); pointer-events: none;
  overflow-wrap: break-word; word-break: break-word; }
.nli-pill-bubble[hidden] { display: none; }
/* release 2: a bubble opened by a click or tap stays, and holds the link to the pill's own list */
.nli-pill-bubble.nli-sticky { pointer-events: auto; }
.nli-pill-bubble [hidden] { display: none !important; }
/* the link wraps inside the bubble: a pill name may be 22 characters (V194.1), and a single long word may break */
.nli-pill-bubble .nli-pill-bubble-link { display: block; color: #fde68a; font-weight: 700; text-decoration: none; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.nli-pill-bubble .nli-pill-bubble-text:not([hidden]) + .nli-pill-bubble-link { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); }
.nli-pill-bubble .nli-pill-bubble-link:hover { text-decoration: underline; color: #fde68a; }
.nli-pill-bubble .nli-pill-bubble-link:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; text-decoration: underline; }

/* ---- release 2: the pill's own list page (catalog/controller/product/pill.php, #product-pill). Its cards and the
   computer grid come from the shared card rules (its #content carries .nli-sec--products); the listing pages' page
   rules name their own page ids, so the few this page needs are repeated here for it. ---- */
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill { margin-bottom: 52px; }
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill .breadcrumb { background: none; border: 0; margin: 0 0 25px;
  padding: 0 0 17px 20px; border-bottom: 2px solid #eef1f5; font-size: 14px; }
#product-pill .nli-pl-head { background: #fbfcfe; border: 1px solid #e3e8ef; border-radius: 12px; padding: 28px 35px 26px; margin: 0 0 22px; }
/* the heading pill is the visible title; the words stay for screen readers. Without a heading pill (a not-found page,
   or one the browser could not draw) the title itself shows (V194.3). */
#product-pill .nli-pl-head h1.nli-pl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
#product-pill .nli-pl-head h1:not(.nli-pl-sr) { margin: 0 0 14px; font-size: 30px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--nh-navy-deep, #001B49); }
#product-pill .nli-pills.nli-pills--list { margin: 0 0 12px; }
#product-pill .nli-pills--list .nli-pill { height: 34px; padding: 0 14px; font-size: 15px; gap: 8px; }
#product-pill .nli-pills--list .nli-pill svg { width: 18px; height: 18px; }
#product-pill .nli-pl-tip { margin: 0 0 8px; max-width: 72ch; color: #475467; font-size: 15px; line-height: 1.5; }
#product-pill .nli-pl-count { margin: 0; color: #667085; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
#product-pill .nli-pl-toolbar { margin-bottom: 18px; }
#product-pill .nli-pl-empty { padding: 30px 0 10px; font-size: 15px; color: #475467; }
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill #content .row:has(.pagination) { margin-top: 30px; }
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill .pagination > li > a,
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill .pagination > li > span { border: 1px solid #e3e8ef; color: #1e3a8a; margin: 0 3px;
  border-radius: 8px; padding: 7px 13px; font-size: 14px; }
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill .pagination > li > a:hover { background: #f4f7fb; border-color: #1e3a8a; }
html[data-newhome="1"]:not([data-nlm-mobile="1"]) #product-pill .pagination > .active > span { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }
/* phones (the /nlm/ shell): the same frame, 2-column grid and page links as the listing pages */
html[data-nlm-mobile="1"] #product-pill { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
html[data-nlm-mobile="1"] #product-pill .row { margin-left: 0 !important; margin-right: 0 !important; }
html[data-nlm-mobile="1"] #product-pill > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; float: none !important; }
html[data-nlm-mobile="1"] #product-pill .nli-pl-head { margin: 10px 14px 12px; padding: 0; background: none; border: 0; border-radius: 0; }
html[data-nlm-mobile="1"] #product-pill .nli-pills--list .nli-pill { height: 28px; padding: 0 10px; font-size: 12px; }
html[data-nlm-mobile="1"] #product-pill .nli-pl-head h1:not(.nli-pl-sr) { margin: 4px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--nlm-c-text, #1f2937); }
html[data-nlm-mobile="1"] #product-pill .nli-pl-tip { font-size: 14px; }
html[data-nlm-mobile="1"] #product-pill .nli-pl-toolbar { margin: 0 14px 4px; }
html[data-nlm-mobile="1"] #product-pill .nli-pl-toolbar > [class*="col-"] { width: 100%; float: none; padding: 0; }
html[data-nlm-mobile="1"] #product-pill .row:has(> .product-layout) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row; grid-auto-rows: 1fr; gap: 8px; margin: 8px !important; }
html[data-nlm-mobile="1"] #product-pill .row:has(> .product-layout)::before,
html[data-nlm-mobile="1"] #product-pill .row:has(> .product-layout)::after { display: none !important; }
@media (min-width: 600px) { html[data-nlm-mobile="1"] #product-pill .row:has(> .product-layout) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { html[data-nlm-mobile="1"] #product-pill .row:has(> .product-layout) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-nlm-mobile="1"] #product-pill .pagination { margin: 16px 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
html[data-nlm-mobile="1"] #product-pill .pagination + .text-right, html[data-nlm-mobile="1"] #product-pill .col-sm-6.text-right { text-align: center !important; font-size: 12px; }
html[data-nlm-mobile="1"] #product-pill .nli-pl-empty { margin: 0 14px; }