/* stylelint-disable */
/* =====================================================================
   JC search suggestions dropdown in the new look, 4 Nov 2026.
   Load site-wide AFTER global.css and css/jcNewLook.css. Uses the
   jcNewLook.css tokens. Every rule starts with .suggestions-wrapper, so
   it only touches the dropdown (header search on desktop, the search in
   the phone menu).
   Works on today's markup (pictures come back: the site already loads
   them, global.css hides them). The optional extras (brand + price on
   products, one "Did you mean" heading, "See all results") are template
   changes in README-Fahad.md; the CSS is ready for them.
   Sections by id: phrase-1 = did you mean, phrase-2 = your recent
   searches, phrase-3 = popular searches, phrase-4 = brands, product-N.
   Built by build.py from src/jcSearch.src.css: edit the src file.
   ===================================================================== */
.suggestions-wrapper .suggestions {
  --sug-pad: 24px;
  --sug-rule: #efe7d9;
  --jc-foil: linear-gradient(90deg, #a87f3e 0%, #e2c58e 30%, #f1e2bd 50%, #e2c58e 70%, #a87f3e 100%);
  /* token the hairline uses; jcNewLook.css defines it only inside the mini bag */
  display: block;
  width: 460px;
  height: auto !important;
  max-height: calc(100vh - 150px);
  padding: 0;
  border: 1px solid var(--jc-line);
  border-top: 0;
  background: #fff;
  box-shadow: 0 28px 48px -20px rgba(22, 22, 22, 0.22);
  color: var(--jc-ink);
  font-family: var(--jc-sans); }

.suggestions-wrapper .suggestions *,
.suggestions-wrapper .suggestions *::before,
.suggestions-wrapper .suggestions *::after {
  box-sizing: border-box; }

/* gold foil hairline along the top edge */
.suggestions-wrapper .suggestions::before {
  content: "";
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  height: 1px;
  background: var(--jc-foil); }

.suggestions-wrapper .suggestions .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2px 0 8px !important; }

.suggestions-wrapper .suggestions .row {
  margin: 0; }

.suggestions-wrapper .suggestions [class*="col-"] {
  padding: 0;
  -ms-flex: 1 1 100%;
      flex: 1 1 100%;
  max-width: 100%; }

.suggestions-wrapper .suggestions li:nth-last-child(2) {
  padding-bottom: 0; }

.suggestions-wrapper .suggestions .more-below {
  display: none !important; }

/* ---------- section headings: small gold capitals ---------- */
.suggestions-wrapper .suggestions .header {
  display: block;
  margin: 0 var(--sug-pad);
  padding: 18px 0 6px;
  border-top: 1px solid var(--sug-rule);
  color: var(--jc-gold);
  font-family: var(--jc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase; }

.suggestions-wrapper .suggestions .header:first-child {
  padding-top: 16px;
  border-top: 0; }

.suggestions-wrapper .suggestions .header div {
  padding: 0; }

/* the template prints "Do you mean?" above every suggestion: keep the first one only */
.suggestions-wrapper .suggestions .header:has(.do-you-mean) ~ .header:has(.do-you-mean) {
  display: none; }

/* ---------- rows ---------- */
.suggestions-wrapper .suggestions .items {
  margin: 0;
  padding: 0 0 6px; }

.suggestions-wrapper .suggestions .items .item {
  padding: 0; }

.suggestions-wrapper .suggestions .items .item a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 12px;
  padding: 9px var(--sug-pad);
  color: var(--jc-ink);
  font-family: var(--jc-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none; }

.suggestions-wrapper .suggestions .items .item .name {
  overflow: visible;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: normal; }

.suggestions-wrapper .suggestions .items .item a:hover,
.suggestions-wrapper .suggestions .items .item a:focus,
.suggestions-wrapper .suggestions .selected a {
  background: var(--jc-cream); }

.suggestions-wrapper .suggestions .selected {
  background-color: transparent; }

/* words (did you mean, recent, popular): a fine-line icon in front */
/* (today's template puts the "did you mean" id on the <li>, the others on the item) */
.suggestions-wrapper .suggestions .items .item[id^="phrase-"] a::before,
.suggestions-wrapper .suggestions .items[id^="phrase-"] .item a::before {
  content: "";
  -ms-flex: 0 0 16px;
      flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--jc-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") center/contain no-repeat; }

.suggestions-wrapper .suggestions .items .item[id^="phrase-2-"] a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }

/* brands: set like the brand on a product tile */
.suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a {
  font-family: var(--jc-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase; }

.suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a::before {
  display: none; }

.suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: var(--jc-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transition: opacity .15s; }

.suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a:hover::after,
.suggestions-wrapper .suggestions .selected[id^="phrase-4-"] a::after {
  opacity: 1; }

/* ---------- products: picture + (brand) + name + (price) ---------- */
.suggestions-wrapper .suggestions .items .item[id^="product-"] a {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 60px minmax(0, 1fr);
      grid-template-columns: 60px minmax(0, 1fr);
  /* spacer, brand, name, price, spacer: the text block sits centred next to the picture,
     with or without the optional brand and price */
  -ms-grid-rows: 1fr auto auto auto 1fr;
      grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 16px;
  row-gap: 0;
  padding-top: 8px;
  padding-bottom: 8px; }

.suggestions-wrapper .suggestions .items .item[id^="product-"] .jc-sug-brand {
  -ms-grid-column: 2;
      grid-column: 2;
  -ms-grid-row: 2;
      grid-row: 2; }

.suggestions-wrapper .suggestions .items .item[id^="product-"] .name {
  -ms-grid-column: 2;
      grid-column: 2;
  -ms-grid-row: 3;
      grid-row: 3; }

.suggestions-wrapper .suggestions .items .item[id^="product-"] .jc-sug-price {
  -ms-grid-column: 2;
      grid-column: 2;
  -ms-grid-row: 4;
      grid-row: 4; }

.suggestions-wrapper .suggestions .items .item img.swatch-circle,
.suggestions-wrapper .suggestions .items .item img.swatch-circle.hidden-xs-down {
  display: block !important;
  -ms-grid-column: 1;
      grid-column: 1;
  grid-row: 1 / -1;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--jc-cream);
  object-fit: cover; }

.suggestions-wrapper .suggestions .items .item[id^="product-"] .name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 14px; }

.suggestions-wrapper .suggestions .jc-sug-brand {
  display: block;
  color: var(--jc-ink);
  font-family: var(--jc-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase; }

.suggestions-wrapper .suggestions .jc-sug-price {
  display: block;
  margin-top: 2px;
  color: var(--jc-ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; }

.suggestions-wrapper .suggestions .jc-sug-price s {
  margin-left: 6px;
  color: var(--jc-faint);
  font-weight: 400; }

/* ---------- "See all results for ..." (new last row, see README) ---------- */
.suggestions-wrapper .suggestions .jc-sug-all {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 6px;
  border-top: 1px solid var(--jc-line);
  background: #fff; }

.suggestions-wrapper .suggestions .jc-sug-all a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: flex-start;
  gap: 8px;
  min-height: 52px;
  padding: 0 var(--sug-pad);
  color: var(--jc-ink);
  font-family: var(--jc-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase; }

.suggestions-wrapper .suggestions .jc-sug-all a span {
  letter-spacing: .04em;
  text-transform: none;
  font-size: 14px; }

.suggestions-wrapper .suggestions .jc-sug-all a::after {
  content: "";
  -ms-flex: 0 0 16px;
      flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--jc-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }

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

/* ---------- the search box itself ---------- */
.site-search > form input.search-field {
  font-family: var(--jc-sans);
  font-size: 15px;
  color: var(--jc-ink); }

.site-search > form input.search-field:-ms-input-placeholder {
  color: var(--jc-muted);
  opacity: 1; }

.site-search > form input.search-field::placeholder {
  color: var(--jc-muted);
  opacity: 1; }

/* ---------- phones and tablets (search in the menu) ---------- */
@media (max-width: 767.98px) {
  .suggestions-wrapper .suggestions {
    --sug-pad: 16px;
    width: 100%;
    max-height: calc(100vh - 180px);
    border-left: 0;
    border-right: 0;
    box-shadow: none; }
  .suggestions-wrapper .suggestions .items .item a {
    padding-top: 11px;
    padding-bottom: 11px; }
  .suggestions-wrapper .suggestions .items .item[id^="product-"] a {
    -ms-grid-columns: 64px minmax(0, 1fr);
        grid-template-columns: 64px minmax(0, 1fr); }
  .suggestions-wrapper .suggestions .items .item img.swatch-circle,
  .suggestions-wrapper .suggestions .items .item img.swatch-circle.hidden-xs-down {
    width: 64px;
    height: 64px; } }

/* ---------- Arabic ---------- */
/* the search box area is left-to-right on the Arabic site; the dropdown reads right-to-left */
html[dir="rtl"] .suggestions-wrapper .suggestions {
  direction: rtl;
  text-align: right; }

html[dir="rtl"] .suggestions-wrapper .suggestions .header,
html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-all a {
  letter-spacing: 0; }

html[dir="rtl"] .suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a,
html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-brand {
  letter-spacing: 0;
  font-family: var(--jc-sans);
  font-size: 15px; }

html[dir="rtl"] .suggestions-wrapper .suggestions .items .item[id^="phrase-4-"] a::after {
  margin-left: 0;
  margin-right: auto;
  transform: scaleX(-1); }

html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-all a::after {
  margin-left: 0;
  margin-right: auto;
  transform: scaleX(-1); }

html[dir="rtl"] .suggestions-wrapper .suggestions .jc-sug-price s {
  margin-left: 0;
  margin-right: 6px; }

html[dir="rtl"] .suggestions-wrapper .suggestions .items .item[id^="product-"] .name {
  font-size: 14px; }

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