/* 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; }

/* Desktop: open the panel leftwards from the right edge of the search box so it never runs off the screen (English; the Arabic box already fits). */
@media (min-width: 768px) {
  html:not([dir="rtl"]) .suggestions-wrapper .suggestions {
    left: auto;
    right: 0; } }

/* =====================================================================
   5 Nov 2026 fixes, after checking the live site (release v1793884928938).
   New rules only: paste this block at the END of jcSearch (after the 4 Nov
   rules). Rule 3 needs the search.js change in the same release.
   ===================================================================== */
/* 1. The panel scrolls inside itself. It had a max-height but no overflow, so on
      desktop the list ran out of the white box and the Brands row slid under
      the sticky "See all results" row. */
.suggestions-wrapper .suggestions {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--jc-line) transparent; }

.suggestions-wrapper .suggestions::-webkit-scrollbar {
  width: 6px; }

.suggestions-wrapper .suggestions::-webkit-scrollbar-track {
  background: transparent; }

.suggestions-wrapper .suggestions::-webkit-scrollbar-thumb {
  background: var(--jc-line);
  border-radius: 3px; }

@supports (height: 100dvh) {
  .suggestions-wrapper .suggestions {
    max-height: calc(100dvh - 150px); } }

/* 2. The e-gift card has no fixed price: the row said "AED 0" on every site.
      (Stop-gap until the template leaves the price out, see README.) */
.suggestions-wrapper .suggestions .item a[href*="GC-group-ecard"] .jc-sug-price,
.suggestions-wrapper .suggestions .item a[href*="GC-ecard"] .jc-sug-price {
  display: none; }

/* 3. While the shopper has typed something that matches, show the matches only.
      "Your recent searches" and "Popular searches" don't follow the typed words,
      so they come back only when nothing matches. search.js skips hidden rows
      for the arrow keys (see README). */
.suggestions-wrapper .suggestions:has([id^="product-"], [id^="phrase-1-"], [id^="phrase-4-"]) .header:has(+ .items [id^="phrase-2-"]),
.suggestions-wrapper .suggestions:has([id^="product-"], [id^="phrase-1-"], [id^="phrase-4-"]) .items:has([id^="phrase-2-"]),
.suggestions-wrapper .suggestions:has([id^="product-"], [id^="phrase-1-"], [id^="phrase-4-"]) .header:has(+ .items [id^="phrase-3-"]),
.suggestions-wrapper .suggestions:has([id^="product-"], [id^="phrase-1-"], [id^="phrase-4-"]) .items:has([id^="phrase-3-"]) {
  display: none; }

/* Brands with nothing above them: no rule line on top */
.suggestions-wrapper .suggestions:not(:has([id^="product-"], [id^="phrase-1-"])) .header:has(+ .items [id^="phrase-4-"]) {
  padding-top: 16px;
  border-top: 0; }

/* 4. Phones: the search screen used a 90% black veil that also covered the white
      header, so the black logo and the close X (the only way out) disappeared.
      Same light veil as desktop; the header stays white above it. */
@media (max-width: 767.98px) {
  .modal-background.mobile-search-info {
    background-color: #eae7e8;
    opacity: .9; }
  header .header.container {
    background-color: #fff; }
  .search-mobile-icon .search-icon.close {
    opacity: 1; }
  /* fit above the keyboard and Safari's toolbar (search.js sets --jc-sug-max) */
  .suggestions-wrapper .suggestions {
    max-height: var(--jc-sug-max, calc(100vh - 180px)); }
  @supports (height: 100dvh) {
    .suggestions-wrapper .suggestions {
      max-height: var(--jc-sug-max, calc(100dvh - 160px)); } } }

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