@charset "UTF-8";
/* stylelint-disable */
/* =====================================================================
   JC account dropdown (the box under the person icon in the header), new look.
   4 Nov 2026. Load AFTER global.css and jcNewLook.css (uses its :root tokens:
   --jc-ink, --jc-muted, --jc-faint, --jc-ivory, --jc-cream, --jc-line, --jc-gold,
   --jc-on-dark, --jc-serif, --jc-sans).

   Works on TODAY's markup (isml: header account links):
     .navbar-header .user[tabindex] > img.login-icon + .account-user-links > span + a + a + a
   Signed-out box (.account-user-links.jc-ud-guest) needs the small ISML change in README.

   The class is written twice (.account-user-links.account-user-links) on purpose:
   it beats global.css's ".navbar-header .user:hover .account-user-links a" rules,
   which would otherwise put the old grey rows back while the box is open.
   build.py turns html body .navbar-header .user .account-user-links.account-user-links / html body .navbar-header .user:is(:hover, :focus-within) .account-user-links.account-user-links / [dir="rtl"] .navbar-header .user .account-user-links.account-user-links into the selectors and the icon tokens into data URIs.
   ===================================================================== */
.navbar-header .user[tabindex] {
  position: relative; }

/* --- the box ------------------------------------------------------- */
html body .navbar-header .user .account-user-links.account-user-links {
  --jc-ud-foil: linear-gradient(90deg, #a87f3e 0%, #e2c58e 30%, #f1e2bd 50%, #e2c58e 70%, #a87f3e 100%);
  position: absolute;
  top: 100%;
  right: -20px;
  left: auto;
  z-index: 60;
  display: block;
  box-sizing: border-box;
  width: 288px;
  max-width: calc(100vw - 32px);
  margin: 14px 0 0;
  padding: 0 0 8px;
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.14);
  font-family: var(--jc-sans);
  font-size: 14px;
  text-align: start;
  color: var(--jc-ink);
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }

html body .navbar-header .user:is(:hover, :focus-within) .account-user-links.account-user-links {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  html body .navbar-header .user .account-user-links.account-user-links, html body .navbar-header .user:is(:hover, :focus-within) .account-user-links.account-user-links {
    transition: none;
    transform: none; } }

/* little pointer under the person icon, like the bag box */
html body .navbar-header .user .account-user-links.account-user-links::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 26px;
  left: auto;
  width: 12px;
  height: 12px;
  background: var(--jc-ivory);
  border-top: 1px solid var(--jc-line);
  border-left: 1px solid var(--jc-line);
  transform: rotate(45deg); }

/* invisible bridge over the 14px gap, so the box stays open on the way down */
html body .navbar-header .user .account-user-links.account-user-links::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px; }

/* --- greeting: WELCOME BACK / name ---------------------------------- */
html body .navbar-header .user .account-user-links.account-user-links > span {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 22px 24px 18px;
  background: var(--jc-ud-foil) bottom/100% 1px no-repeat, var(--jc-ivory);
  font-family: var(--jc-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--jc-ink);
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums; }

html body .navbar-header .user .account-user-links.account-user-links > span::before {
  content: "Welcome back";
  display: block;
  margin-bottom: 7px;
  font-family: var(--jc-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jc-gold); }

html body .navbar-header .user .account-user-links.account-user-links:lang(ar) > span::before {
  content: "\623\647\644\627\64B   \628\639\648\62F\62A\643"; }

html body .navbar-header .user .account-user-links.account-user-links > span em {
  font-style: italic;
  background: linear-gradient(180deg, #c49a55 0%, #a87f3e 50%, #86683a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-padding-end: .06em;
          padding-inline-end: .06em; }

/* --- the links ------------------------------------------------------ */
html body .navbar-header .user .account-user-links.account-user-links > a {
  --jc-ico: 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='2'/%3E%3C/svg%3E");
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 10px 24px;
  background: transparent;
  font-family: var(--jc-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--jc-ink);
  text-decoration: none;
  white-space: nowrap; }

html body .navbar-header .user .account-user-links.account-user-links > span + a {
  margin-top: 8px; }

html body .navbar-header .user .account-user-links.account-user-links > a:last-of-type {
  padding-bottom: 10px; }

html body .navbar-header .user .account-user-links.account-user-links > a::before {
  content: "";
  -ms-flex: 0 0 20px;
      flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--jc-ico) no-repeat center/contain;
  mask: var(--jc-ico) no-repeat center/contain; }

html body .navbar-header .user .account-user-links.account-user-links > a::after {
  content: "";
  -ms-flex: 0 0 12px;
      flex: 0 0 12px;
  width: 12px;
  height: 12px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  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%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E") no-repeat center/contain;
  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='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0;
  transition: opacity .15s; }

html body .navbar-header .user .account-user-links.account-user-links > a:hover,
html body .navbar-header .user .account-user-links.account-user-links > a:focus-visible {
  background: var(--jc-cream);
  color: var(--jc-ink);
  text-decoration: none; }

html body .navbar-header .user .account-user-links.account-user-links > a:hover::after,
html body .navbar-header .user .account-user-links.account-user-links > a:focus-visible::after {
  opacity: 1; }

html body .navbar-header .user .account-user-links.account-user-links > a:focus-visible {
  outline: 1px solid var(--jc-ink);
  outline-offset: -1px; }

html body .navbar-header .user .account-user-links.account-user-links > a[href$="/account"] {
  --jc-ico: 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='8.2' r='3.6'/%3E%3Cpath d='M4.6 20c.9-3.9 3.9-6 7.4-6s6.5 2.1 7.4 6'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href$="/orders"] {
  --jc-ico: 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='M5.2 8.2h13.6l-1 11.8H6.2z'/%3E%3Cpath d='M9 8.2V6.6a3 3 0 0 1 6 0v1.6'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href$="/wishlist"] {
  --jc-ico: 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='M12 19.6s-7-4.3-7-9.4A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 2.2c0 5.1-7 9.4-7 9.4z'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href*="Dwallet"] {
  --jc-ico: 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%3Crect x='3.5' y='7.5' width='17' height='12' rx='1.2'/%3E%3Cpath d='M5.5 7.5 15.8 4.4l1.1 3.1'/%3E%3Cpath d='M20.5 11.6h-4a1.6 1.6 0 0 0 0 3.2h4'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href*="GiftCard"],
html body .navbar-header .user .account-user-links.account-user-links > a[href*="giftcard"] {
  --jc-ico: 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%3Crect x='4.2' y='10.6' width='15.6' height='9.4'/%3E%3Crect x='3.2' y='7.4' width='17.6' height='3.2'/%3E%3Cpath d='M12 7.4V20M12 7.4C10.6 4.6 7.4 4.2 7.4 6.1c0 1.3 4.6 1.3 4.6 1.3zM12 7.4c1.4-2.8 4.6-3.2 4.6-1.3 0 1.3-4.6 1.3-4.6 1.3z'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href*="NeedHelp"],
html body .navbar-header .user .account-user-links.account-user-links > a[href$="/contactus"] {
  --jc-ico: 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.5'/%3E%3Cpath d='M9.7 9.6a2.4 2.4 0 1 1 3.3 2.2c-.6.3-1 .8-1 1.5v.6'/%3E%3Cpath d='M12 16.3v.4'/%3E%3C/svg%3E"); }

html body .navbar-header .user .account-user-links.account-user-links > a[href*="Logout"] {
  --jc-ico: 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='M13.5 4.5H6v15h7.5'/%3E%3Cpath d='M10 12h10M17 9l3 3-3 3'/%3E%3C/svg%3E");
  margin-top: 8px;
  border-top: 1px solid var(--jc-line);
  padding-top: 12px;
  color: var(--jc-muted); }

/* --- signed-out box (needs the ISML in README) ---------------------- */
html body .navbar-header .user .account-user-links.account-user-links.jc-ud-guest {
  padding-bottom: 10px; }

html body .navbar-header .user .account-user-links.account-user-links.jc-ud-guest > span {
  padding: 22px 24px 16px;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase; }

html body .navbar-header .user .account-user-links.account-user-links.jc-ud-guest > span::before {
  content: none; }

html body .navbar-header .user .account-user-links.account-user-links.jc-ud-guest > span em {
  letter-spacing: .02em;
  text-transform: none; }

html body .navbar-header .user .account-user-links.account-user-links > .jc-ud-note {
  margin: 0;
  padding: 16px 24px 4px;
  font-family: var(--jc-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--jc-muted);
  white-space: normal; }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn {
  -ms-flex-pack: center;
      justify-content: center;
  height: 44px;
  margin: 12px 24px 0;
  padding: 0 16px;
  border: 1px solid var(--jc-ink);
  background: var(--jc-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff; }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn + a.jc-ud-btn {
  margin-top: 10px;
  background: #fff;
  color: var(--jc-ink); }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn::before,
html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn::after {
  content: none; }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn:hover {
  background: #2a2a2a;
  color: #fff; }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn + a.jc-ud-btn:hover {
  background: var(--jc-cream);
  color: var(--jc-ink); }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-btn + a:not(.jc-ud-btn) {
  margin-top: 14px;
  border-top: 1px solid var(--jc-line);
  padding-top: 12px; }

html body .navbar-header .user .account-user-links.account-user-links > a.jc-ud-track {
  --jc-ico: 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='M5.2 8.2h13.6l-1 11.8H6.2z'/%3E%3Cpath d='M9 8.2V6.6a3 3 0 0 1 6 0v1.6'/%3E%3C/svg%3E"); }

/* --- Arabic: mirror it, no letter-spacing, no italics ---------------- */
/* The header icons stay on the right on the Arabic site, so the box keeps opening leftwards from the icon (as in English). */
[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > a::after {
  transform: scaleX(-1); }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links,
[dir="rtl"] .navbar-header .user .account-user-links.account-user-links * {
  letter-spacing: 0 !important; }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > span {
  font-size: 19px;
  line-height: 1.5; }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > span::before {
  font-size: 12px;
  margin-bottom: 2px; }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > span em {
  font-style: normal; }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > a {
  font-size: 14px;
  line-height: 1.6; }

[dir="rtl"] .navbar-header .user .account-user-links.account-user-links > a[href*="Logout"]::before {
  transform: scaleX(-1); }

/* Annelouise 5 Nov 2026: account box on phones. Applies to the signed-out box too (it is laid out while hidden and made every phone page scroll sideways, 5 Nov). */
/* --- phones (under 769px): keep the box on the screen ----------------
   5 Nov 2026. global.css has, for phones only,
     .navbar-header .user .account-user-links { left: -4.1875rem !important; }
   which pinned the box 67px left of the person icon, so in English it ran ~90px
   past the right edge of the screen and cut the name (and every row) off.
   On phones the box now hangs from the header row (.col-12: full width and
   already position:relative), 16px in from the screen edge, and the pointer sits
   back under the person icon. The icon centre is 119px from the right edge (EN)
   and 121px from the left edge (AR) on every phone width, so the pointer offsets
   below are fixed numbers; if the header icons ever move, only the pointer drifts. */
@media (max-width: 768.98px) {
  html body .navbar-header .user[tabindex] {
    position: static; }
  html body .navbar-header .user .account-user-links.account-user-links {
    top: 100%;
    right: 16px;
    left: auto !important;
    width: 288px;
    max-width: calc(100% - 32px);
    margin-top: 8px; }
  html body .navbar-header .user .account-user-links.account-user-links::before {
    right: 97px;
    left: auto; }
  html[dir="rtl"] body .navbar-header .user .account-user-links.account-user-links {
    right: auto;
    left: 16px !important; }
  html[dir="rtl"] body .navbar-header .user .account-user-links.account-user-links::before {
    right: auto;
    left: 99px; } }

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