/* Prime chrome: HexFashion "Cut Line" (restricted preview).
   Signature: precise 45° cuts (clip-path) on the top-start and bottom-end corners, a thin coral cut-line rule, condensed
   uppercase display type for Latin (tracking only on platform labels in LTR; Arabic is never tracked).
   Merchant inputs: --main-color-one (coral on the demo store), --heading-color, --body-color, --section-bg-2,
   --sf-merchant-heading / --sf-merchant-body (explicit merchant fonts win), --heading-font / --body-font (Store Admin ›
   Typography: secondary headings and body text). Every colour below is derived from them with color-mix(); filled
   buttons use the main colour darkened so white text keeps 4.5:1 for any saved colour in the coral/red range. */
body.hexfashion {
  --sfp-accent: var(--main-color-one, #F83A26);
  --sfp-cta: color-mix(in srgb, var(--main-color-one, #F83A26) 80%, #000);
  --hx-cta-hover: color-mix(in srgb, var(--main-color-one, #F83A26) 66%, #000);
  --hx-accent-ink: color-mix(in srgb, var(--main-color-one, #F83A26) 70%, #000);
  --hx-ink: color-mix(in srgb, var(--heading-color, #333333) 80%, #000);
  --hx-text: color-mix(in srgb, var(--heading-color, #333333) 92%, #000);
  --hx-muted: color-mix(in srgb, var(--body-color, #666666) 88%, #000);
  --hx-peach: color-mix(in srgb, var(--main-color-one, #F83A26) 6%, var(--section-bg-2, #FFF6EE));
  --hx-peach-2: color-mix(in srgb, var(--main-color-one, #F83A26) 13%, var(--section-bg-2, #FFF6EE));
  --hx-line: color-mix(in srgb, var(--heading-color, #333333) 12%, #fff);
  --hx-line-strong: color-mix(in srgb, var(--heading-color, #333333) 30%, #fff);
  --hx-on-ink: #fff;
  --hx-display: var(--sf-merchant-heading, "Barlow Condensed"), "Noto Kufi Arabic", "Arial Narrow", system-ui, sans-serif;
  --hx-head: var(--sf-merchant-heading, var(--heading-font, "Rubik")), "Noto Kufi Arabic", system-ui, sans-serif;
  --hx-body: var(--sf-merchant-body, var(--body-font, "Roboto")), "IBM Plex Sans Arabic", system-ui, sans-serif;
  --hx-cut: 16px;
  --hx-cut-s: 9px;
  --hx-ease: cubic-bezier(.2, .7, .2, 1);
  --sfp-font-head: var(--hx-display);
  --sfp-font-body: var(--hx-body);
  --sfp-logo-h: 40px;
  --sfp-focus: 0 0 0 3px color-mix(in srgb, var(--main-color-one, #F83A26) 40%, transparent);
}

/* ---- announcement: ink strip, the store's text unchanged ---- */
.sfp-announce--hexfashion { background: var(--hx-ink); color: var(--hx-on-ink); font: 500 13px/1.5 var(--hx-body); padding-block: 9px; position: relative; overflow: hidden; }
.sfp-announce--hexfashion::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 56px; background: var(--sfp-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
[dir="rtl"] .sfp-announce--hexfashion::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%); }
.sfp-announce--hexfashion .container { position: relative; }
.sfp-announce--hexfashion a { color: inherit; }

/* ---- header ---- */
nav.hf-navbar.sfp-header--hexfashion { background: #fff; color: var(--hx-ink); font-family: var(--hx-body); border-block-end: 1px solid var(--hx-line); padding: 0; }
nav.hf-navbar.sfp-header--hexfashion::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -1px; inline-size: min(18vw, 220px); block-size: 2px; background: var(--sfp-accent); }
.sfp-header--hexfashion .sfp-header__bar { min-block-size: 80px; }
.sfp-header--hexfashion .sfp-header__logo img { max-block-size: 42px; }
.sfp-header--hexfashion .sfp-header__nav { justify-content: center; }
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu { gap: 4px clamp(18px, 2vw, 34px); }
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li > a { font: 600 17px/1 var(--hx-display); text-transform: uppercase; color: var(--hx-ink); padding-block: 4px; }
[dir="rtl"] .sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li > a { font-size: 15px; font-weight: 600; }
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li > a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 6px; block-size: 3px; background: var(--sfp-accent);
  transform: scaleX(0); transform-origin: var(--hx-origin, left); transition: transform var(--sfp-dur) var(--hx-ease);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
[dir="rtl"] .sfp-header--hexfashion { --hx-origin: right; }
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li > a:hover::after,
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.sfp-header--hexfashion .sfp-header__nav .theme-nav-menu > li > a:hover { color: var(--hx-ink); }
.sfp-header--hexfashion .sfp-header__nav .sub-menu { background: #fff; border: 1px solid var(--hx-line); border-block-start: 2px solid var(--sfp-accent); border-radius: 0; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--hx-ink) 45%, transparent); }
.sfp-header--hexfashion .sfp-header__nav .sub-menu a { border-radius: 0; font: 500 14px/1.35 var(--hx-body); }
.sfp-header--hexfashion .sfp-header__nav .sub-menu a:hover { background: var(--hx-peach); color: var(--hx-accent-ink); }

/* search: peach field with the cut. The cut lives on a ::before layer so the live dropdown (a child) is never clipped */
.sfp-header--hexfashion .sfp-header__search { flex-basis: 270px; color: var(--hx-ink); position: relative; isolation: isolate; --c: var(--hx-cut-s); }
.sfp-header--hexfashion .sfp-header__search::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hx-peach);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--sfp-dur) var(--hx-ease); }
[dir="rtl"] .sfp-header--hexfashion .sfp-header__search::before { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.sfp-header--hexfashion .sfp-header__search:focus-within::before { background: #fff; box-shadow: inset 0 0 0 2px var(--hx-ink); }
.sfp-header--hexfashion .sfp-header__search input { font: 400 14px/1.2 var(--hx-body); padding-inline: 16px 4px; box-shadow: none !important; border: 0 !important; background: transparent !important; color: var(--hx-ink); }
.sfp-header--hexfashion .sfp-header__search input:focus-visible { box-shadow: none !important; }
.sfp-header--hexfashion .sfp-header__search input::placeholder { color: var(--hx-muted); opacity: 1; }
.sfp-header--hexfashion .sfp-header__search button { color: var(--hx-ink); font-size: 18px; }
.sfp-header--hexfashion .sfp-header__search button:focus-visible { box-shadow: inset 0 0 0 2px var(--sfp-accent) !important; border-radius: 0 !important; }
.sfp-header--hexfashion .hf-search-dropdown { background: #fff; color: var(--hx-ink); border: 1px solid var(--hx-line); border-block-start: 2px solid var(--sfp-accent); border-radius: 0;
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--hx-ink) 50%, transparent); }
.sfp-header--hexfashion .hf-search-dropdown li a { border-radius: 0; }
.sfp-header--hexfashion .hf-search-dropdown li a:hover { background: var(--hx-peach); }
.sfp-header--hexfashion .hf-search-dropdown .product-image { border-radius: 0; }
.sfp-header--hexfashion .hf-search-dropdown .flash-price { color: var(--hx-accent-ink); font: 600 13px/1.4 var(--hx-body); }
.sfp-header--hexfashion .hf-search-dropdown .flash-old-prices { color: var(--hx-muted); font-size: 12px; text-decoration: line-through; margin-inline-start: 6px; }
.sfp-header--hexfashion .hf-search-dropdown .hf-search-footer a { justify-content: space-between; font: 600 14px/1.2 var(--hx-display); text-transform: uppercase; color: var(--hx-accent-ink);
  border-block-start: 1px solid var(--hx-line); margin-block-start: 4px; padding-block: 12px; }
.sfp-header--hexfashion .hf-search-dropdown .hf-search-empty { padding: 16px; font-size: 14px; color: var(--hx-muted); text-align: center; }

/* actions: square targets, the cut appears on hover */
.sfp-header--hexfashion .sfp-header__actions > a { color: var(--hx-ink); font-size: 21px; border-radius: 0; --c: 8px;
  transition: background var(--sfp-dur) var(--hx-ease), color var(--sfp-dur) var(--hx-ease); }
.sfp-header--hexfashion .sfp-header__actions > a:hover { background: var(--hx-peach-2); color: var(--hx-ink);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.sfp-header--hexfashion .sfp-header__actions .hf-icon-badge { background: var(--sfp-cta); color: #fff; border-radius: 0; font: 700 11px/18px var(--hx-body);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.sfp-header--hexfashion .sfp-header__actions > a:focus-visible { box-shadow: inset 0 0 0 2px var(--sfp-accent); border-radius: 0; clip-path: none; }
.sfp-header--hexfashion .sfp-lang { font: 600 13px/1.2 var(--hx-body); color: var(--hx-ink); margin-inline: 4px; }
.sfp-header--hexfashion .sfp-lang__opt { border-radius: 0; min-block-size: 44px; display: inline-flex; align-items: center; opacity: .75; }
.sfp-header--hexfashion .sfp-lang__opt.is-current { opacity: 1; box-shadow: inset 0 -2px 0 var(--sfp-accent); }

/* ---- footer: peach ground, coral cut line on top, ink copyright band ---- */
.sfp-footer--hexfashion { background: var(--hx-peach); color: var(--hx-text); font: 400 15px/1.7 var(--hx-body); margin-block-start: clamp(40px, 5vw, 72px); border-block-start: 2px solid var(--sfp-accent); position: relative; }
.sfp-footer--hexfashion::before { content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: 0; inline-size: clamp(120px, 22vw, 300px); block-size: 12px; background: var(--sfp-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
[dir="rtl"] .sfp-footer--hexfashion::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); }
.sfp-hxf__top { padding-block: clamp(52px, 6vw, 84px) clamp(36px, 4vw, 56px); }
.sfp-hxf__widgets { row-gap: 36px; }
.sfp-hxf__widgets > [class*="col-"] { min-inline-size: 0; }
/* widget output carries inline presentation (platform widgets); the theme skin wins over it here */
.sfp-hxf__widgets h1, .sfp-hxf__widgets h2, .sfp-hxf__widgets h3, .sfp-hxf__widgets h4, .sfp-hxf__widgets h5, .sfp-hxf__widgets h6 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px !important; color: var(--hx-ink); font: 700 19px/1.15 var(--hx-display) !important; text-transform: uppercase; letter-spacing: 0 !important; }
[dir="ltr"] .sfp-hxf__widgets :is(h1, h2, h3, h4, h5, h6) { letter-spacing: .04em !important; }
.sfp-hxf__widgets :is(h1, h2, h3, h4, h5, h6)::before { content: ""; flex: none; inline-size: 18px; block-size: 3px; background: var(--sfp-accent); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.sfp-hxf__widgets a { color: var(--hx-text); }
.sfp-hxf__widgets a.d-block { display: flex !important; align-items: center; min-block-size: 36px; margin: 0 !important; font-size: 15px !important; opacity: 1 !important; color: var(--hx-muted); transition: color var(--sfp-dur) var(--hx-ease), padding var(--sfp-dur) var(--hx-ease); }
.sfp-hxf__widgets a.d-block:hover { color: var(--hx-accent-ink); padding-inline-start: 6px; }
.sfp-hxf__widgets p { color: var(--hx-muted); opacity: 1 !important; font-size: 15px !important; max-inline-size: 34ch; }
.sfp-hxf__widgets img { max-block-size: 52px !important; inline-size: auto; max-inline-size: 220px; object-fit: contain; }
.sfp-hxf__widgets .d-flex.gap-2 > a[target="_blank"] { inline-size: 44px !important; block-size: 44px !important; border: 0 !important; opacity: 1 !important; border-radius: 0 !important;
  background: #fff; color: var(--hx-ink); font-size: 18px; --c: 9px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--sfp-dur) var(--hx-ease), color var(--sfp-dur) var(--hx-ease); }
[dir="rtl"] .sfp-hxf__widgets .d-flex.gap-2 > a[target="_blank"] { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.sfp-hxf__widgets .d-flex.gap-2 > a[target="_blank"]:hover { background: var(--sfp-cta); color: #fff; }
.sfp-hxf__widgets .d-flex.gap-2 > a[target="_blank"]:focus-visible { clip-path: none; box-shadow: inset 0 0 0 2px var(--hx-ink); }

.sfp-hxf__mid { border-block-start: 1px solid color-mix(in srgb, var(--hx-ink) 12%, transparent); }
.sfp-hxf__mid-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 18px; }
.sfp-hxf__mid .footer-widget, .sfp-hxf__mid .footer-inner { margin: 0; padding: 0; background: none; }
.sfp-hxf__mid .footer-menu-list { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
.sfp-hxf__mid .footer-menu-list li { list-style: none; margin: 0; padding: 0; }
.sfp-hxf__mid .footer-menu-list li::before { content: none; }
.sfp-hxf__mid .footer-menu-list a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--hx-ink); font: 600 16px/1 var(--hx-display); text-transform: uppercase; }
[dir="rtl"] .sfp-hxf__mid .footer-menu-list a { font-size: 14px; }
.sfp-hxf__mid .footer-menu-list a:hover { color: var(--hx-accent-ink); }
.sfp-hxf__extra:empty { display: none; }
.sfp-hxf__extra img { max-block-size: 28px; inline-size: auto; }

.sfp-hxf__bottom { background: var(--hx-ink); color: color-mix(in srgb, var(--hx-on-ink) 82%, var(--hx-ink)); position: relative; }
.sfp-hxf__bottom-in { display: flex; align-items: center; gap: 16px; padding-block: 18px; }
.sfp-hxf__cut { flex: none; inline-size: 34px; block-size: 10px; background: var(--sfp-accent); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.sfp-hxf__copy { font: 400 13.5px/1.5 var(--hx-body); }
.sfp-hxf__copy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1199.98px) { .sfp-header--hexfashion .sfp-header__search { flex-basis: 200px; } }
@media (max-width: 991.98px) {
  .sfp-hxf__top { padding-block: 44px 28px; }
  .sfp-hxf__mid-in { justify-content: flex-start; }
}

/* ---- mobile foundation skin (tokens only; the shared layer owns header, drawer, search, bottom bar) ---- */
body.sf-m.sf-m-t-hexfashion {
  --sf-m-header-bg: #fff;
  --sf-m-header-fg: var(--hx-ink);
  --sf-m-header-line: var(--hx-line);
  --sf-m-header-line-w: 1px;
  --sf-m-color-accent: var(--sfp-accent);
  --sf-m-drawer-bg: #fff;
  --sf-m-drawer-fg: var(--hx-ink);
  --sf-m-drawer-line: var(--hx-line);
  --sf-m-bar-bg: #fff;
  --sf-m-bar-fg: var(--hx-muted);
  --sf-m-bar-line: var(--hx-line);
  --sf-m-bar-active: var(--sfp-cta);
  --sf-m-sheet-bg: #fff;
  --sf-m-control-bg: var(--hx-peach);
  --sf-m-control-line: transparent;
  --sf-m-radius: 2px;
  --sf-m-font: var(--hx-body);
}
@media (prefers-reduced-motion: reduce) { .sfp-header--hexfashion *, .sfp-footer--hexfashion * { transition: none !important; } }
/* the live theme pins the badge with a physical `right`: reset it so the logical end edge wins in both directions */
[dir="rtl"] .sfp-header--hexfashion .sfp-header__actions .hf-icon-badge { right: auto; left: 0; }
[dir="ltr"] .sfp-header--hexfashion .sfp-header__actions .hf-icon-badge { left: auto; right: 0; }
.sfp-header--hexfashion .sfp-header__actions .hf-icon-badge { inset-block-start: 3px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; display: inline-flex; align-items: center; justify-content: center; }

/* Desktop tiers below 1440px (2026-10-23): hexfashion's larger menu type and gaps made the one-line menu wider than its slot, and the
   slot (min-inline-size: 0) let it run over the logo (wide logos overlapped by ~30px at 1200–1366). The menu slot now never shrinks below
   the menu itself; the gaps tighten and the search box gives up the space first. Logo, type and the one-line menu are unchanged. */
@media (min-width: 992px) and (max-width: 1439.98px) { .sfp-header--hexfashion .sfp-header__nav { min-inline-size: min-content; } }
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .sfp-header--hexfashion .sfp-header__bar { gap: 20px; }
  .sfp-header--hexfashion .sfp-header__nav .theme-nav-menu { gap: 4px 18px; }
  .sfp-header--hexfashion .sfp-header__search { flex: 0 1 230px; min-inline-size: 150px; }
}
/* Compact desktop tier (992–1199px): the shared foundation caps the logo at 170px here, but the logo's inline max-width (logo normalizer)
   overrode it, so wide logos left no room for the one-line menu. Apply the intended cap for this header and tighten the menu gap. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sfp-header--hexfashion .sfp-header__logo img { max-inline-size: 170px !important; }
  .sfp-header--hexfashion .sfp-header__nav .theme-nav-menu { gap: 4px 12px; }
  .sfp-header--hexfashion .sfp-header__search { min-inline-size: 120px; }
}