/* Shop header and filters, laid out like a big fashion shop (Mr Porter was the reference):
   - header: menu and the language / currency picker on the left, the logo in the middle, Search, account and bag on the right,
     and the page links centred on a thin row underneath (on a computer);
   - shop listing: one "Filter | 13 items" button that opens a side panel, the sort on the right, and only the filters in use
     shown underneath as pills with a cross.
   The server adds this file to every page after the page's own styles are written, so each rule starts with "html body" to
   win over the page's older rules. Colours and fonts stay the shop's own. */

/* ---------- header ---------- */
html body header > div:has(> .menu-btn) { position: relative; flex-wrap: wrap; height: auto !important; min-height: 64px; column-gap: 4px !important; row-gap: 0 !important; }
html body header > div:has(> .menu-btn) > .menu-btn { order: 1; margin-block: 10px; }
html body header > div:has(> .menu-btn) > div:last-child { display: contents !important; }
html body header > div:has(> .menu-btn) .pref-wrap,
html body header > div:has(> .menu-btn) .hdr-pref { order: 2; }
html body header > div:has(> .menu-btn) > div[style*="flex: 1"] { order: 3; flex: 1 1 0 !important; }
html body header > div:has(> .menu-btn) .search-trigger,
html body header > div:has(> .menu-btn) .phone-only { order: 4; }
html body header > div:has(> .menu-btn) > div:last-child > sc-if,
html body header > div:has(> .menu-btn) .header-ops { order: 5; }
html body header > div:has(> .menu-btn) > div:last-child > a.icon-btn:not(.phone-only),
html body header > div:has(> .menu-btn) > div:last-child > button.icon-btn:not(.phone-only) { order: 6; }
html body header > div:has(> .menu-btn) > div:last-child > :last-child { order: 7; }

/* The logo sits in the middle of the top row, whatever is either side of it */
html body header > div:has(> .menu-btn) > .logo { position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%); margin: 0 !important; z-index: 1; white-space: nowrap; }

/* Language and currency: a quiet text button with the Qatar flag, not a pill */
html body header .pref-btn { height: 40px; margin: 0; padding: 0 8px; gap: 7px; border: 0 !important; border-radius: 4px; background: transparent !important; color: #C9CBD1; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
html body header .pref-btn:hover, html body header .pref-btn[aria-expanded="true"] { background: #1D1D25 !important; color: #FFFFFF; }
html body header .pref-btn > svg { display: none; }
html body header .pref-btn::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  background: linear-gradient(90deg, #FFFFFF 0 34%, #8A1538 34% 100%); }
html body header .pref-btn::after { content: ""; width: 7px; height: 7px; flex: none; margin: -4px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
html body header .pref-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
html body header .pref-btn .pref-sep { width: 3px; height: 3px; border-radius: 50%; background: #6A6D78; }
html body header .pref-btn .pref-cur { color: inherit; font-weight: 500; }
html body header .pref-pop { right: auto; left: 0; }
html body header .lang-btn.hdr-pref { height: 40px; margin: 0; padding: 0 10px; border: 0; background: transparent; color: #C9CBD1; font-size: 14px; }
html body header .lang-btn.hdr-pref:hover { background: #1D1D25; color: #FFFFFF; }
html body [dir="rtl"] header .pref-pop { left: auto; right: 0; }
html body [dir="rtl"] header .pref-btn::after { margin: -4px 2px 0 0; }

/* Search: a word and an icon, no box */
html body header .search-trigger { flex: 0 0 auto !important; height: 40px; padding: 0 10px; gap: 8px; border: 0 !important; border-radius: 4px; background: transparent !important; color: #C9CBD1 !important; font-size: 14px; }
html body header .search-trigger > span { display: none; }
html body header .search-trigger::after { content: "Search"; }
html body [dir="rtl"] header .search-trigger::after { content: "بحث"; }
html body header .search-trigger:hover { background: #1D1D25 !important; color: #FFFFFF !important; }
html body header .icon-btn { width: 40px; height: 40px; }

/* Page links: centred on their own thin row under the logo (computer only) */
html body header > div:has(> .menu-btn) > .top-links { order: 10; flex: 1 0 100%; justify-content: center; gap: 32px; position: relative; margin: 0; padding: 0 16px; }
html body header > div:has(> .menu-btn) > .top-links::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; height: 1px; background: #23232C; }
html body header > div:has(> .menu-btn) > .top-links .nav-link { padding: 11px 0 10px; font-size: 14px; }

@media (max-width: 1179px) {
  html body header > div:has(> .menu-btn) > .top-links { display: none !important; }
}
@media (min-width: 761px) {
  html body header .phone-only { display: none !important; }
  html body header .search-trigger { display: flex !important; }
}
@media (max-width: 760px) {
  html body header .search-trigger { display: none !important; }
}
@media (max-width: 560px) {
  html body header > div:has(> .menu-btn) { min-height: 56px; }
  html body header > div:has(> .menu-btn) > .menu-btn { margin-block: 6px; }
  html body header > div:has(> .menu-btn) > .logo { top: 28px; }
  /* Phone: menu and search on the left, account and bag on the right, logo in the middle */
  html body header > div:has(> .menu-btn) .phone-only { order: 2; }
  html body header > div:has(> .menu-btn) > .menu-btn { padding-right: 6px; }
}

/* ---------- shop listing: Filter button, sort, pills in use ---------- */
html body .fbar { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0; border: 0; }
html body .fbar .filters-btn { display: inline-flex !important; flex: 0 0 auto; height: 44px; padding: 0 14px; gap: 9px; border: 1px solid #3A3B46; border-radius: 4px; background: transparent; color: #F4F6FB; font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
html body .fbar .filters-btn:hover { border-color: #7C8596; background: #1B1B22; }
html body .fbar .filters-btn .fres { padding-inline-start: 10px; border-inline-start: 1px solid #3A3B46; color: #9A9DA6; font-weight: 500; }
html body .fbar .fbar-end { order: 0 !important; margin-inline-start: auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }
html body [dir="rtl"] .fbar .fbar-end { margin-left: 0; margin-right: auto; }
html body .fbar .fsort { flex: 0 0 auto !important; width: 190px; min-width: 0 !important; }
html body .fbar .fsort label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
html body .fbar .fsort select { height: 44px; padding: 0 38px 0 14px; border-color: #3A3B46; background: transparent; font-size: 14px; }
html body [dir="rtl"] .fbar .fsort select { padding: 0 14px 0 38px; }
html body [dir="rtl"] .fbar .fsort svg { right: auto; left: 14px; }

/* Pills: only the filters in use, each with a cross */
html body .chips { gap: 8px; }
html body .chips .chip { height: 36px; padding: 0 10px 0 14px; border: 1px solid #3A3B46; border-radius: 4px; background: transparent; color: #F4F6FB; font-size: 14px; }
html body .chips .chip:hover { border-color: #F4F6FB; }

/* The filter panel: slides in from the side on a computer, fills the screen on a phone */
html body .fbar .fgroup { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; z-index: 96;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 14px;
  width: min(420px, 92vw); height: 100% !important; max-height: none !important; margin: 0; padding: 0 24px !important; overflow-y: auto;
  background: #18181F; border: 0 !important; border-right: 1px solid #33333E !important; border-radius: 0 !important; box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(-100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s; }
html body [dir="rtl"] .fbar .fgroup { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid #33333E !important; transform: translateX(100%); }
html body .fbar .fgroup.is-open { transform: none !important; visibility: visible; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
html body .fbar .fgroup > * { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; order: 0 !important; }
html body .fbar .fgroup .fsheet-head { display: flex !important; align-items: center; position: sticky; top: 0; z-index: 2; margin: 0 -24px; padding: 16px 24px; width: auto !important; background: inherit; border-bottom: 1px solid #33333E; }
html body .fbar .fgroup .fsheet-foot { display: flex !important; position: sticky; bottom: 0; z-index: 2; margin: auto -24px 0; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); width: auto !important; background: inherit; border-top: 1px solid #33333E; }
html body .fbar .fgroup .fsheet-foot .btn-primary { height: 50px; }
html body .fbar .fgroup .fsearch input { height: 50px; }
html body .fbar .fgroup .fsel select { height: 54px; }
html body .fbar .fgroup .fmore-btn { display: none !important; }
html body .fbar .fgroup .fmore { display: flex !important; flex-direction: column; gap: 14px; padding: 0; }
html body .fbar .fgroup .fmore > * { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; }
html body .fbar .fgroup .kind-row { flex-wrap: wrap; overflow: visible; padding: 2px 0; }
html body .fbar .fgroup:has(.kind-row) .fsel:has(#f-kind) { display: none; }
html body .sheet-scrim.is-open { display: block !important; position: fixed; inset: 0; z-index: 95; margin: 0; padding: 0; border: 0; background: rgba(5, 6, 8, 0.6); }
html body:has(.fgroup.is-open) .testbar, html body:has(.fgroup.is-open) #as-account-bar { display: none !important; }

@media (max-width: 640px) {
  html body .fbar .fgroup { width: 100%; padding: 0 20px !important; box-shadow: none; }
  html body .fbar .fgroup .fsheet-head, html body .fbar .fgroup .fsheet-foot { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  html body .fbar .fsort { width: 132px; }
  html body .fbar .filters-btn { padding: 0 12px; gap: 7px; }
  html body .fbar .filters-btn .fres { padding-inline-start: 8px; }
}
@media (max-width: 480px) {
  html body .fbar .filters-btn .fres { display: none; }
}

/* Arabic: the dropdown arrow sits on the left, away from the words */
html body [dir="rtl"] .fsel svg { right: auto; left: 14px; }
html body [dir="rtl"] .fsel select { padding-right: 14px; padding-left: 40px; }