/* stylelint-disable */
/* =====================================================================
   9 Nov 2026 additions.
   1. Category lines ("Dresses  Girl") at the top of the list.
   2. Six products: 2 x 3 grid on desktop (panel widens to 620px), list on phone.
   3. Empty-box panel (.jc-search-empty): designers, trending, shop by category.
   ===================================================================== */
/* 1. categories */
.suggestions-wrapper .suggestions .jc-sug-cats .jc-sug-cat a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 12px;
  padding: 9px var(--sug-pad);
  text-decoration: none;
  color: var(--jc-ink); }

.suggestions-wrapper .suggestions .jc-sug-cat-name {
  font-family: var(--jc-serif);
  font-size: 17px; }

.suggestions-wrapper .suggestions .jc-sug-cat-parent {
  font-family: var(--jc-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jc-faint); }

.suggestions-wrapper .suggestions .jc-sug-cat a:hover,
.suggestions-wrapper .suggestions .jc-sug-cat.selected a {
  background: var(--jc-cream); }

/* 2. six products: grid on desktop */
@media (min-width: 768px) {
  .suggestions-wrapper .suggestions:has(#product-3) {
    width: 620px; }
  /* grid only from 4 products up; 1-3 products keep the one-column list */
  .suggestions-wrapper .suggestions li.items:has(> #product-3) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    padding: 0 calc(var(--sug-pad) - 8px); }
  .suggestions-wrapper .suggestions li.items:has(> #product-3) > [id^="product-"] {
    max-width: none;
    width: auto;
    padding: 0; } }

/* 3. empty-box panel */
.suggestions-wrapper .jc-search-empty .jc-se-block {
  padding: 6px 0 14px; }

.suggestions-wrapper .jc-search-empty .jc-se-chips {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  padding: 4px var(--sug-pad) 0;
  list-style: none;
  margin: 0; }

.suggestions-wrapper .jc-search-empty .jc-se-chips a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--jc-line);
  border-radius: 999px;
  font-family: var(--jc-sans);
  font-size: 13px;
  color: var(--jc-ink);
  text-decoration: none;
  background: #fff; }

.suggestions-wrapper .jc-search-empty .jc-se-chips a:hover {
  border-color: var(--jc-gold);
  background: var(--jc-cream); }

.suggestions-wrapper .jc-search-empty .jc-se-cats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 4px var(--sug-pad) 0; }

.suggestions-wrapper .jc-search-empty .jc-se-cats a {
  display: block;
  padding: 14px 6px;
  text-align: center;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-family: var(--jc-serif);
  font-size: 15px;
  letter-spacing: .02em; }

.suggestions-wrapper .jc-search-empty .jc-se-cats a:hover {
  background: #2a2a2a; }

@media (max-width: 767.98px) {
  .suggestions-wrapper .jc-search-empty .jc-se-cats {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   12 Nov 2026 add-on.
   A. Girl / Boy / Baby buttons (first row, pill buttons with a count).
   B. Counts on the category lines (right-aligned, small grey number).
   ===================================================================== */
/* A. department buttons */
.suggestions-wrapper .suggestions .jc-sug-depts {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px var(--sug-pad) 10px;
  border-bottom: 1px solid var(--jc-line); }

.suggestions-wrapper .suggestions .jc-sug-depts .jc-sug-dept {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0; }

.suggestions-wrapper .suggestions .jc-sug-depts .jc-sug-dept a {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--jc-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--jc-sans);
  font-size: 13px;
  color: var(--jc-ink);
  text-decoration: none; }

.suggestions-wrapper .suggestions .jc-sug-depts .jc-sug-dept a:hover,
.suggestions-wrapper .suggestions .jc-sug-depts .jc-sug-dept.selected a {
  border-color: var(--jc-gold);
  background: var(--jc-cream); }

/* shared count style (buttons + category lines) */
.suggestions-wrapper .suggestions .jc-sug-count {
  font-family: var(--jc-sans);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--jc-faint);
  font-variant-numeric: tabular-nums; }

/* B. category lines: name + parent on the left, count on the right */
.suggestions-wrapper .suggestions .jc-sug-cat a .jc-sug-cat-parent {
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-margin-start: 8px;
          margin-inline-start: 8px; }

.suggestions-wrapper .suggestions .jc-sug-cat a {
  -ms-flex-pack: start;
      justify-content: flex-start; }

/* =====================================================================
   JC additions (12 Nov 2026), for the markup as built.
   ===================================================================== */
/* JC: a category line with no parent name: the count still goes to the far end */
.suggestions-wrapper .suggestions .jc-sug-cat a .jc-sug-cat-name:has(+ .jc-sug-count) {
  -webkit-margin-end: auto;
          margin-inline-end: auto; }

/* JC: the first heading after the buttons row or the age row: one line, not two */
.suggestions-wrapper .suggestions .jc-sug-depts + .header,
.suggestions-wrapper .suggestions .jc-sug-age-row + .header {
  border-top: 0; }

.suggestions-wrapper .suggestions .jc-sug-depts .item a {
  padding: 7px 14px;
  font-size: 13px; }

/* JC: the empty panel and the age row are not matches, so jcSearch.css rule 3 (hide recent and popular while there are
   matches) must also count category lines and department buttons as matches */
.suggestions-wrapper .suggestions:has([id^="category-"], [id^="department-"]) .header:has(+ .items [id^="phrase-2-"]),
.suggestions-wrapper .suggestions:has([id^="category-"], [id^="department-"]) .items:has([id^="phrase-2-"]),
.suggestions-wrapper .suggestions:has([id^="category-"], [id^="department-"]) .header:has(+ .items [id^="phrase-3-"]),
.suggestions-wrapper .suggestions:has([id^="category-"], [id^="department-"]) .items:has([id^="phrase-3-"]) {
  display: none; }

/* JC: age search row ("Shop by age  11-12 Years"), first in the list */
.suggestions-wrapper .suggestions .jc-sug-age-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--jc-line); }

.suggestions-wrapper .suggestions .jc-sug-age a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  gap: 10px; }

.suggestions-wrapper .suggestions .jc-sug-age-label {
  font-family: var(--jc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jc-gold); }

.suggestions-wrapper .suggestions .jc-sug-age-sizes {
  font-family: var(--jc-serif);
  font-size: 17px; }

/* JC: empty panel links are arrow-key options (search.js adds class item): chosen = the hover look */
.suggestions-wrapper .jc-search-empty .jc-se-cats > .item {
  display: block; }

.suggestions-wrapper .jc-search-empty .jc-se-chips .item.selected a {
  border-color: var(--jc-gold);
  background: var(--jc-cream); }

.suggestions-wrapper .jc-search-empty .jc-se-cats .item.selected a {
  background: #2a2a2a;
  outline: 2px solid var(--jc-gold);
  outline-offset: -2px; }

/* JC: the empty panel headings are plain rows, the first one has no line above */
.suggestions-wrapper .jc-search-empty .container > .header:first-child {
  padding-top: 16px;
  border-top: 0; }

/* JC: Arabic */
html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-cat-parent,
html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-age-label {
  letter-spacing: 0; }

html[dir="rtl"] .suggestions-wrapper .jc-search-empty .jc-se-cats a {
  font-family: var(--jc-sans);
  letter-spacing: 0; }

/* JC: desktop 620px panel must not run off a narrow (768 to 1000px) window: never wider than the window less a margin */
@media (min-width: 768px) {
  .suggestions-wrapper .suggestions {
    max-width: calc(100vw - 32px); }
  /* JC: Arabic too opens from the right edge of the search box: at 620px wide the left-anchored panel ran 80px off the
     right of a 1440 screen (checked on live AR). English already does this (jcSearch.css). */
  html[dir="rtl"] .suggestions-wrapper .suggestions {
    left: auto;
    right: 0; } }

/*# sourceMappingURL=jcSearchV2.css.map*/