/* =========================================================
   THREADS OF YOU — NATIVE SALLA HEADER
   Existing menu / existing links / existing components only
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400&display=swap');



.container {
    max-width: 1200px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
    .container {
        max-width: 1100px;
        padding-inline: 0 !important;
    }
}


@media (min-width: 1000px) {

  .threads-site-header.threads-header-ready {
    --th-brown: #3A2F23;
    --th-white: #fff;

    --th-header-height: 122px;
    --th-container: 1196px;

    --th-logo-w: 98px;
    --th-logo-h: 94px;

    --th-brand-gap: 38px;

    --th-menu-font: 16px;
    --th-menu-col-gap: 18px;
    --th-menu-row-gap: 4px;

    --th-actions-gap: 18px;

    --th-lang-w: 114px;
    --th-lang-h: 51px;

    --th-icon: 32px;

    width: 100%;
    height: var(--th-header-height);

    z-index: 100;
  }


  /* =====================================================
     HOME
     ===================================================== */

  .threads-site-header.threads-header-home {
    position: absolute !important;

    top: 0;
    right: 0;
    left: 0;

    background: transparent !important;
  }

  .threads-site-header.threads-header-home #mainnav,
  .threads-site-header.threads-header-home #mainnav > .inner {
    background: transparent !important;
  }


  /* =====================================================
     INTERNAL / SINGLE PRODUCT
     ===================================================== */

  .threads-site-header.threads-header-inner {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;

    background: var(--th-brown) !important;
  }

  .threads-site-header.threads-header-inner #mainnav,
  .threads-site-header.threads-header-inner #mainnav > .inner {
    background: var(--th-brown) !important;
  }


  /* =====================================================
     TOP NAV
     Language + Search moved to existing actions row
     ===================================================== */

  .threads-site-header.threads-header-ready .top-navbar {
    display: none !important;
  }


  /* =====================================================
     MAIN NAV
     ===================================================== */

  .threads-site-header.threads-header-ready #mainnav {
    height: var(--th-header-height) !important;
    min-height: var(--th-header-height) !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
  }

  .threads-site-header.threads-header-ready #mainnav > .inner {
    height: 100% !important;
  }


  /* =====================================================
     CONTAINER
     ===================================================== */

  .threads-site-header.threads-header-ready
  #mainnav .container {

    width: 100% !important;
    max-width: var(--th-container) !important;

    height: 100% !important;

    margin-inline: auto !important;

    padding: 0 !important;
  }


  /* =====================================================
     ONE HEADER ROW
     ===================================================== */

  .threads-site-header.threads-header-ready
  #mainnav .container > .flex {

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 28px !important;
  }


  /* Arabic */

  .threads-site-header.threads-lang-ar
  #mainnav .container > .flex {

    direction: rtl;
  }


  /* English mirror */

  .threads-site-header.threads-lang-en
  #mainnav .container > .flex {

    direction: ltr;
  }


  /* =====================================================
     LOGO + MENU GROUP
     ===================================================== */

  .threads-site-header.threads-header-ready
  #mainnav .container > .flex > div:first-child {

    display: flex !important;

    flex: 1 1 auto !important;

    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: var(--th-brand-gap) !important;
  }


  .threads-site-header.threads-lang-ar
  #mainnav .container > .flex > div:first-child {

    direction: rtl;
  }


  .threads-site-header.threads-lang-en
  #mainnav .container > .flex > div:first-child {

    direction: ltr;
  }


  /* =====================================================
     LOGO
     ===================================================== */

  .threads-site-header.threads-header-ready
  .navbar-brand {

    
  }


  .threads-site-header.threads-header-ready
  .navbar-brand img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;

    filter: brightness(0) invert(1) !important;
  }


  /* =====================================================
     HAMBURGER
     ===================================================== */

  .threads-site-header.threads-header-ready
  [data-testid="store-header-mobile-toggle"] {

    display: none !important;
  }


  /* =====================================================
     EXISTING SALLA MENU
     ===================================================== */

  .threads-site-header.threads-header-ready
  custom-main-menu {

    display: flex !important;

    flex: 1 1 auto !important;

    align-items: center !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    justify-content: center;
  }


  .threads-site-header.threads-header-ready
  custom-main-menu #mobile-menu {

    position: static !important;

    inset: auto !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: transparent !important;

    border: 0 !important;

    transform: none !important;
  }


  .threads-site-header.threads-header-ready
  custom-main-menu #mobile-menu::before,

  .threads-site-header.threads-header-ready
  custom-main-menu #mobile-menu::after {

    display: none !important;
  }


  /* =====================================================
     MENU = TWO ROWS

     Important:
     same original 6 menu items.
     3 items first row + 3 items second row.
     ===================================================== */

  .threads-site-header.threads-header-ready
  custom-main-menu .main-menu {

    position: static !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, max-content) !important;

    grid-template-rows:
      repeat(2, auto) !important;

    align-items: center !important;
    align-content: center !important;

    justify-content: start !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    column-gap: var(--th-menu-col-gap) !important;
    row-gap: var(--th-menu-row-gap) !important;

    background: transparent !important;

    list-style: none !important;

    transform: none !important;
  }


  /* Arabic two rows right -> left */

  .threads-site-header.threads-lang-ar
  custom-main-menu .main-menu {

    direction: rtl;
  }


  /* English two rows left -> right */

  .threads-site-header.threads-lang-en
  custom-main-menu .main-menu {

    direction: ltr;
  }


  /* Desktop original items */

  .threads-site-header.threads-header-ready
  custom-main-menu
  .main-menu > li.root-level {

    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }


  /* Hide mobile duplicates only */

  .threads-site-header.threads-header-ready
  custom-main-menu
  .main-menu > li:not(.root-level) {

    display: none !important;
  }


  .threads-site-header.threads-header-ready
  custom-main-menu
  .main-menu > li.root-level > a {

    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--th-white) !important;

    font-size: var(--th-menu-font) !important;

    font-weight: 400 !important;

    line-height: 1.45 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    background: transparent !important;

    transition: opacity .2s ease;
  }


  .threads-site-header.threads-lang-ar
  custom-main-menu
  .main-menu > li.root-level > a {

    direction: rtl;

    text-align: right;
  }


  .threads-site-header.threads-lang-en
  custom-main-menu
  .main-menu > li.root-level > a {

    direction: ltr;

    text-align: left;
  }


  .threads-site-header.threads-header-ready
  custom-main-menu
  .main-menu > li.root-level > a:hover {

    color: var(--th-white) !important;

    opacity: .72;
  }


  .threads-site-header.threads-header-ready
  custom-main-menu .close-mobile-menu {

    display: none !important;
  }


  /* =====================================================
     ACTIONS
     Language + Search + User + Cart
     ===================================================== */

  .threads-site-header.threads-header-ready
  .threads-header-actions {

    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: flex-start !important;

    height: var(--th-lang-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: var(--th-actions-gap) !important;
  }


  /* Arabic:
     left side =
     Language → Search → User → Bag
  */

  .threads-site-header.threads-lang-ar
  .threads-header-actions {

    direction: ltr;
  }


  /* English mirror */

  .threads-site-header.threads-lang-en
  .threads-header-actions {

    direction: rtl;
  }


  /* =====================================================
     LANGUAGE
     ===================================================== */

  .threads-site-header.threads-header-ready
  .header-buttons {

    display: block !important;

    flex: 0 0 var(--th-lang-w) !important;

    width: var(--th-lang-w) !important;
    min-width: var(--th-lang-w) !important;

    height: var(--th-lang-h) !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header.threads-header-ready
  [data-testid="store-header-localization"] {

    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #fff !important;

    border: 0 !important;
    border-radius: 20px !important;

    box-shadow: none !important;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn > * {

    visibility: hidden !important;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::before,

  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::after {

    position: absolute;

    top: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    height: 35px;

    border-radius: 14px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    visibility: visible !important;

    pointer-events: none;
  }


  /* EN */

  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::before {

    content: "EN";

    left: 8px;

    width: 39px;
  }


  /* AR */

  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::after {

    content: "عربي";

    right: 8px;

    width: 51px;
  }


  /* Arabic active */

  .threads-site-header.threads-lang-ar
  .s-localization-modal-trigger-btn::before {

    color: var(--th-brown) !important;

    background: transparent !important;
  }


  .threads-site-header.threads-lang-ar
  .s-localization-modal-trigger-btn::after {

    color: #fff !important;

    background: var(--th-brown) !important;
  }


  /* English active */

  .threads-site-header.threads-lang-en
  .s-localization-modal-trigger-btn::before {

    color: #fff !important;

    background: var(--th-brown) !important;
  }


  .threads-site-header.threads-lang-en
  .s-localization-modal-trigger-btn::after {

    color: var(--th-brown) !important;

    background: transparent !important;
  }


  /* =====================================================
     SEARCH ICON
     ===================================================== */

  .threads-site-header.threads-header-ready
  .header-search {

    position: relative !important;

    display: block !important;

    flex: 0 0 var(--th-icon) !important;

    width: var(--th-icon) !important;
    min-width: var(--th-icon) !important;

    height: var(--th-icon) !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* exact clean visual */

  .threads-site-header.threads-header-ready
  .header-search::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #fff;

    pointer-events: none;

    z-index: 1;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yMSAyMWwtNS4xOTctNS4xOTdtMCAwQTcuNSA3LjUgMCAxMDUuMTk2IDUuMTk2YTcuNSA3LjUgMCAwMDEwLjYwNyAxMC42MDd6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yMSAyMWwtNS4xOTctNS4xOTdtMCAwQTcuNSA3LjUgMCAxMDUuMTk2IDUuMTk2YTcuNSA3LjUgMCAwMDEwLjYwNyAxMC42MDd6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  /* Native Salla search remains clickable */

  .threads-site-header.threads-header-ready
  [data-testid="store-header-search"] {

    position: absolute !important;

    inset: 0 !important;

    z-index: 2;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    cursor: pointer;
  }


  /* =====================================================
     USER ICON
     ===================================================== */

  .threads-site-header.threads-header-ready
  [data-testid="store-header-user-menu"] {

    position: relative !important;

    display: block !important;

    flex: 0 0 var(--th-icon) !important;

    width: var(--th-icon) !important;
    min-width: var(--th-icon) !important;

    height: var(--th-icon) !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header.threads-header-ready
  [data-testid="store-header-user-menu"]::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #fff;

    pointer-events: none;

    z-index: 1;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE1Ljc1IDZhMy43NSAzLjc1IDAgMTEtNy41IDAgMy43NSAzLjc1IDAgMDE3LjUgMHpNNC41MDEgMjAuMTE4YTcuNSA3LjUgMCAwMTE0Ljk5OCAwQTE3LjkzMyAxNy45MzMgMCAwMTEyIDIxLjc1Yy0yLjY3NiAwLTUuMjE2LS41ODQtNy40OTktMS42MzJ6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE1Ljc1IDZhMy43NSAzLjc1IDAgMTEtNy41IDAgMy43NSAzLjc1IDAgMDE3LjUgMHpNNC41MDEgMjAuMTE4YTcuNSA3LjUgMCAwMTE0Ljk5OCAwQTE3LjkzMyAxNy45MzMgMCAwMTEyIDIxLjc1Yy0yLjY3NiAwLTUuMjE2LS41ODQtNy40OTktMS42MzJ6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  .threads-site-header.threads-header-ready
  [data-testid="store-header-user-menu"]
  button,

  .threads-site-header.threads-header-ready
  [data-testid="store-header-user-menu"]
  a {

    position: absolute !important;

    inset: 0 !important;

    z-index: 2;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer;
  }


  /* =====================================================
     BAG ICON
     ===================================================== */

  .threads-site-header.threads-header-ready
  [data-testid="store-header-cart"] {

    position: relative !important;

    display: block !important;

    flex: 0 0 var(--th-icon) !important;

    width: var(--th-icon) !important;
    min-width: var(--th-icon) !important;

    height: var(--th-icon) !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header.threads-header-ready
  [data-testid="store-header-cart"]::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #fff;

    pointer-events: none;

    z-index: 1;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE2IDExVjdhNCA0IDAgMDAtOCAwdjRNNSA5aDE0bDEgMTJINEw1IDl6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE2IDExVjdhNCA0IDAgMDAtOCAwdjRNNSA5aDE0bDEgMTJINEw1IDl6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  /* Real cart link stays clickable */

  .threads-site-header.threads-header-ready
  .s-cart-summary-wrapper {

    position: absolute !important;

    inset: 0 !important;

    z-index: 2;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer;
  }


  .threads-site-header.threads-header-ready
  .s-cart-summary-count,

  .threads-site-header.threads-header-ready
  .s-cart-summary-content {

    display: none !important;
  }

}


/* =========================================================
   1200 → 1360
   YOUR PRIORITY RANGE
   Smaller than the original Figma
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1360px) {

  .threads-site-header.threads-header-ready {

    --th-header-height: 100px;

    --th-container: 1080px;

    --th-logo-w: 76px;
    --th-logo-h: 73px;

    --th-brand-gap: 24px;

    --th-menu-font: 13px;

    --th-menu-col-gap: 12px;
    --th-menu-row-gap: 2px;

    --th-actions-gap: 11px;

    --th-lang-w: 94px;
    --th-lang-h: 42px;

    --th-icon: 27px;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn {

    border-radius: 16px !important;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::before,

  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::after {

    top: 6px;

    height: 30px;

    border-radius: 11px;

    font-size: 13px;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::before {

    left: 6px;

    width: 34px;
  }


  .threads-site-header.threads-header-ready
  .s-localization-modal-trigger-btn::after {

    right: 6px;

    width: 42px;
  }

}

/* =========================================================
   THREADS OF YOU — MOBILE
   RESTORED STABLE VERSION
   ========================================================= */

@media (max-width: 999.98px) {

  /* =====================================================
     VARIABLES
     ===================================================== */

  .threads-site-header.threads-header-ready {
    --m-brown: #3A2F23;
    --m-white: #FFFFFF;

    --m-h: 68px;

    --m-edge: 10px;

    --m-logo: 50px;

    --m-lang-w: 58px;
    --m-lang-h: 32px;

    --m-icon: 20px;

    --m-gap: 7px;

    --m-menu: 24px;

    width: 100% !important;

    height: var(--m-h) !important;
    min-height: var(--m-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    z-index: 100 !important;
  }


  /* =====================================================
     HOME
     ===================================================== */

  .threads-site-header.threads-header-home {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    background: transparent !important;
  }


  .threads-site-header.threads-header-home
  #mainnav,

  .threads-site-header.threads-header-home
  #mainnav > .inner,

  .threads-site-header.threads-header-home
  .top-navbar {
    background: transparent !important;
  }


  /* =====================================================
     INNER / PRODUCT / PAGES
     ===================================================== */

  .threads-site-header.threads-header-inner {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;

    background: var(--m-brown) !important;
  }


  .threads-site-header.threads-header-inner
  #mainnav,

  .threads-site-header.threads-header-inner
  #mainnav > .inner,

  .threads-site-header.threads-header-inner
  .top-navbar {
    background: var(--m-brown) !important;
  }


  /* =====================================================
     HIDE DELIVERY / CONTACTS
     ===================================================== */

  .threads-site-header
  > .lg\:hidden,

  .threads-site-header
  salla-bullet-delivery-tag,

  .threads-site-header
  [data-testid="store-header-contacts"] {
    display: none !important;
  }


  /* =====================================================
     TOP NAV
     فقط Language + Search

     لا نخفيه.
     لا نحرك العناصر بالـ JS.
     ===================================================== */

  .threads-site-header
  .top-navbar {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;

    height: var(--m-h) !important;
    min-height: var(--m-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

    pointer-events: none !important;

    z-index: 20 !important;
  }


  .threads-site-header
  .top-navbar > .container {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header
  .top-navbar
  > .container
  > .flex-1 {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* =====================================================
     MAIN NAV
     ===================================================== */

  .threads-site-header
  #mainnav {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: var(--m-h) !important;
    min-height: var(--m-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;

    z-index: 10 !important;
  }


  .threads-site-header
  #mainnav > .inner {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    background: transparent !important;
  }


  .threads-site-header
  #mainnav .container {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header
  #mainnav
  .container > .flex {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    direction: ltr !important;
  }


  .threads-site-header
  #mainnav
  .container > .flex > div:first-child,

  .threads-site-header
  #mainnav
  .container > .flex > div:last-child {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* =====================================================
     LOGO
     ===================================================== */

  .threads-site-header
  .navbar-brand {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;

    display: block !important;

    width: var(--m-logo) !important;
    min-width: var(--m-logo) !important;
    max-width: var(--m-logo) !important;

    height: var(--m-logo) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translate(-50%, -50%) !important;

    z-index: 30 !important;
  }


  .threads-site-header
  .navbar-brand img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    filter:
      brightness(0)
      invert(1) !important;
  }


  /* =====================================================
     MENU — RIGHT
     ===================================================== */

  .threads-site-header
  [data-testid="store-header-mobile-toggle"] {
    position: absolute !important;

    top: 50% !important;

    right: var(--m-edge) !important;
    left: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translateY(-50%) !important;

    color: #fff !important;

    z-index: 40 !important;
  }


  .threads-site-header
  [data-testid="store-header-mobile-toggle"] i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: var(--m-menu) !important;

    line-height: 1 !important;
  }


  /* =====================================================
     LANGUAGE — FAR LEFT
     ===================================================== */

  .threads-site-header
  .header-buttons {
    position: absolute !important;

    top: 50% !important;

    left: var(--m-edge) !important;
    right: auto !important;

    display: block !important;

    width: var(--m-lang-w) !important;
    min-width: var(--m-lang-w) !important;

    height: var(--m-lang-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translateY(-50%) !important;

    pointer-events: auto !important;

    z-index: 40 !important;
  }


  .threads-site-header
  [data-testid="store-header-localization"] {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }


  .threads-site-header
  .s-localization-modal-trigger-btn {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #fff !important;

    border: 0 !important;

    border-radius: 14px !important;

    box-shadow: none !important;
  }


  .threads-site-header
  .s-localization-modal-trigger-btn > * {
    visibility: hidden !important;
  }


  .threads-site-header
  .s-localization-modal-trigger-btn::before {
    content: "EN";

    position: absolute !important;

    top: 4px !important;
    left: 4px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 23px !important;
    height: 24px !important;

    border-radius: 9px !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    visibility: visible !important;

    pointer-events: none !important;
  }


  .threads-site-header
  .s-localization-modal-trigger-btn::after {
    content: "عربي";

    position: absolute !important;

    top: 4px !important;
    right: 4px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 25px !important;
    height: 24px !important;

    border-radius: 9px !important;

    font-size: 8px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    visibility: visible !important;

    pointer-events: none !important;
  }


  .threads-site-header.threads-lang-ar
  .s-localization-modal-trigger-btn::before {
    color: var(--m-brown) !important;

    background: transparent !important;
  }


  .threads-site-header.threads-lang-ar
  .s-localization-modal-trigger-btn::after {
    color: #fff !important;

    background: var(--m-brown) !important;
  }


  .threads-site-header.threads-lang-en
  .s-localization-modal-trigger-btn::before {
    color: #fff !important;

    background: var(--m-brown) !important;
  }


  .threads-site-header.threads-lang-en
  .s-localization-modal-trigger-btn::after {
    color: var(--m-brown) !important;

    background: transparent !important;
  }


  /* =====================================================
     SEARCH

     نفس مكان النسخة اللي كانت شغالة،
     لكن نصلح شكل الأيقونة فقط.
     ===================================================== */

  .threads-site-header
  .header-search {
    position: absolute !important;

    top: 50% !important;

    left:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap)
      ) !important;

    right: auto !important;

    display: block !important;

    width: var(--m-icon) !important;
    min-width: var(--m-icon) !important;
    max-width: var(--m-icon) !important;

    height: var(--m-icon) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translateY(-50%) !important;

    overflow: visible !important;

    pointer-events: auto !important;

    z-index: 40 !important;
  }


  /* Search visual */

  .threads-site-header
  .header-search::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: var(--m-icon) !important;
    height: var(--m-icon) !important;

    background: #fff !important;

    pointer-events: none !important;

    z-index: 1 !important;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yMSAyMWwtNS4xOTctNS4xOTdtMCAwQTcuNSA3LjUgMCAxMDUuMTk2IDUuMTk2YTcuNSA3LjUgMCAwMDEwLjYwNyAxMC42MDd6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yMSAyMWwtNS4xOTctNS4xOTdtMCAwQTcuNSA3LjUgMCAxMDUuMTk2IDUuMTk2YTcuNSA3LjUgMCAwMDEwLjYwNyAxMC42MDd6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  /* The native Search remains the click target */

  .threads-site-header
  [data-testid="store-header-search"] {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    cursor: pointer !important;

    z-index: 2 !important;
  }


  /* =====================================================
     USER
     ===================================================== */

  .threads-site-header
  [data-testid="store-header-user-menu"] {
    position: absolute !important;

    top: 50% !important;

    left:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap)
      ) !important;

    right: auto !important;

    display: block !important;

    width: var(--m-icon) !important;
    min-width: var(--m-icon) !important;

    height: var(--m-icon) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translateY(-50%) !important;

    z-index: 40 !important;
  }


  .threads-site-header
  [data-testid="store-header-user-menu"]::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: #fff !important;

    pointer-events: none !important;

    z-index: 1 !important;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE1Ljc1IDZhMy43NSAzLjc1IDAgMTEtNy41IDAgMy43NSAzLjc1IDAgMDE3LjUgMHpNNC41MDEgMjAuMTE4YTcuNSA3LjUgMCAwMTE0Ljk5OCAwQTE3LjkzMyAxNy45MzMgMCAwMTEyIDIxLjc1Yy0yLjY3NiAwLTUuMjE2LS41ODQtNy40OTktMS42MzJ6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE1Ljc1IDZhMy43NSAzLjc1IDAgMTEtNy41IDAgMy43NSAzLjc1IDAgMDE3LjUgMHpNNC41MDEgMjAuMTE4YTcuNSA3LjUgMCAwMTE0Ljk5OCAwQTE3LjkzMyAxNy45MzMgMCAwMTEyIDIxLjc1Yy0yLjY3NiAwLTUuMjE2LS41ODQtNy40OTktMS42MzJ6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  .threads-site-header
  [data-testid="store-header-user-menu"]
  button,

  .threads-site-header
  [data-testid="store-header-user-menu"]
  a {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    z-index: 2 !important;
  }


  /* =====================================================
     CART
     ===================================================== */

  .threads-site-header
  [data-testid="store-header-cart"] {
    position: absolute !important;

    top: 50% !important;

    left:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap)
      ) !important;

    right: auto !important;

    display: block !important;

    width: var(--m-icon) !important;
    min-width: var(--m-icon) !important;

    height: var(--m-icon) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translateY(-50%) !important;

    z-index: 40 !important;
  }


  .threads-site-header
  [data-testid="store-header-cart"]::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: #fff !important;

    pointer-events: none !important;

    z-index: 1 !important;

    -webkit-mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE2IDExVjdhNCA0IDAgMDAtOCAwdjRNNSA5aDE0bDEgMTJINEw1IDl6Ii8+PC9zdmc+")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE2IDExVjdhNCA0IDAgMDAtOCAwdjRNNSA5aDE0bDEgMTJINEw1IDl6Ii8+PC9zdmc+")
      center / contain no-repeat;
  }


  .threads-site-header
  .s-cart-summary-wrapper {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;

    z-index: 2 !important;
  }


  .threads-site-header
  .s-cart-summary-count,

  .threads-site-header
  .s-cart-summary-content {
    display: none !important;
  }


  /* =====================================================
     MOBILE MENU DRAWER

     لا نصفر custom-main-menu.
     لا نغير الـdrawer نفسه.
     ===================================================== */

  .threads-site-header
  custom-main-menu {
    margin: 0 !important;
    padding: 0 !important;
  }


  .threads-site-header
  #mobile-menu {
    z-index: 10000 !important;
  }


  /* Close button above header */

  .threads-site-header
  #mobile-menu
  > .close-mobile-menu {
    z-index: 10001 !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 359px) {

  .threads-site-header.threads-header-ready {
    --m-h: 62px;

    --m-edge: 7px;

    --m-logo: 43px;

    --m-lang-w: 52px;
    --m-lang-h: 29px;

    --m-icon: 17px;

    --m-gap: 4px;

    --m-menu: 21px;
  }

}

/* =========================================================
   MOBILE — FIX INNER PAGES + MENU CLOSE
   PUT THIS AT THE VERY END OF CSS
   ========================================================= */

@media (max-width: 999.98px) {

  /* =====================================================
     FIX 1
     INNER PAGES

     اللون يكون على الـ HEADER نفسه فقط.
     top-navbar + mainnav يفضلوا transparent
     عشان ما يغطوش بعض.
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-header-inner {
    background: #3A2F23 !important;
  }


  .threads-site-header.threads-header-ready.threads-header-inner
  .top-navbar,

  .threads-site-header.threads-header-ready.threads-header-inner
  #mainnav,

  .threads-site-header.threads-header-ready.threads-header-inner
  #mainnav > .inner {
    background: transparent !important;
  }


  /* Keep both layers in the same header
     without the top layer visually covering mainnav */

  .threads-site-header.threads-header-ready
  .top-navbar {
    z-index: 20 !important;
  }


  .threads-site-header.threads-header-ready
  #mainnav {
    z-index: 10 !important;
  }


  /* Logo / menu / user / cart above the transparent top row */

  .threads-site-header.threads-header-ready
  .navbar-brand,

  .threads-site-header.threads-header-ready
  [data-testid="store-header-mobile-toggle"],

  .threads-site-header.threads-header-ready
  [data-testid="store-header-user-menu"],

  .threads-site-header.threads-header-ready
  [data-testid="store-header-cart"] {
    z-index: 40 !important;
  }


  /* =====================================================
     FIX 2
     MOBILE DRAWER

     Keep Salla native drawer.
     Only ensure it is over the header.
     ===================================================== */

  .threads-site-header.threads-header-ready
  #mobile-menu {
    z-index: 100000 !important;
  }


  /* =====================================================
     CLOSE BUTTON

     نفس زر سلة الأصلي.
     ندخله داخل الـ drawer بدل ما يبقى تحت الهيدر.
     ===================================================== */

  .threads-site-header.threads-header-ready
  #mobile-menu
  > button.close-mobile-menu {
    position: absolute !important;

    top: 14px !important;

    left: 14px !important;
    right: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background: #FFFFFF !important;

    color: #3A2F23 !important;

    border: 0 !important;

    border-radius: 50% !important;

    box-shadow: none !important;

    font-size: 16px !important;
    line-height: 1 !important;

    opacity: 1 !important;

    z-index: 100001 !important;
  }


  .threads-site-header.threads-header-ready
  #mobile-menu
  > button.close-mobile-menu::before,

  .threads-site-header.threads-header-ready
  #mobile-menu
  > button.close-mobile-menu::after {
    background: transparent !important;

    color: #3A2F23 !important;
  }


  /* second unused Salla close button */

  .threads-site-header.threads-header-ready
  custom-main-menu
  > .btn--close-sm {
    display: none !important;
  }

}

/* =========================================================
   MOBILE ENGLISH — MIRROR ARABIC LAYOUT
   ضع في آخر الـ CSS
   ========================================================= */

@media (max-width: 999.98px) {

  /* =====================================================
     ENGLISH:
     MENU = LEFT
     ACTIONS = RIGHT
     LOGO = CENTER
     ===================================================== */


  /* MENU -> LEFT */

  .threads-site-header.threads-header-ready.threads-lang-en
  [data-testid="store-header-mobile-toggle"] {
    left: var(--m-edge) !important;
    right: auto !important;
  }


  /* =====================================================
     LANGUAGE -> FAR RIGHT
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  .header-buttons {
    right: var(--m-edge) !important;
    left: auto !important;
  }


  /* =====================================================
     SEARCH
     after Language toward the LEFT
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  .header-search {
    right:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap)
      ) !important;

    left: auto !important;
  }


  /* =====================================================
     USER
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  [data-testid="store-header-user-menu"] {
    right:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap)
      ) !important;

    left: auto !important;
  }


  /* =====================================================
     CART
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  [data-testid="store-header-cart"] {
    right:
      calc(
        var(--m-edge) +
        var(--m-lang-w) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap) +
        var(--m-icon) +
        var(--m-gap)
      ) !important;

    left: auto !important;
  }


  /* =====================================================
     LOGO
     stays EXACT CENTER
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  .navbar-brand {
    left: 50% !important;
    right: auto !important;

    transform:
      translate(-50%, -50%) !important;
  }


  /* =====================================================
     MOBILE DRAWER CLOSE
     mirror it too in English
     ===================================================== */

  .threads-site-header.threads-header-ready.threads-lang-en
  #mobile-menu
  > button.close-mobile-menu {
    right: 14px !important;
    left: auto !important;
  }

}

.s-block--bundle-hero-section{
  margin: 0 !important;
}
 /* =========================================================
   HEADER — COMPACT GLASS ONLY AFTER SCROLL
   ========================================================= */

/* ---------- Desktop ---------- */
 /* ---------- Desktop ---------- */
@media (min-width: 1000px) {

  .threads-site-header.threads-header-ready.threads-header-scrolled {
    --th-header-height: 72px !important;

    --th-logo-w: 54px !important;
    --th-logo-h: 52px !important;

    --th-brand-gap: 20px !important;
    --th-actions-gap: 10px !important;

    --th-lang-w: 88px !important;
    --th-lang-h: 36px !important;

    --th-icon: 24px !important;
    --th-menu-font: 13px !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    background: rgba(58, 47, 35, 0.42) !important;

    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);

    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.08) !important;

    z-index: 10000 !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled #mainnav,
  .threads-site-header.threads-header-ready.threads-header-scrolled #mainnav > .inner,
  .threads-site-header.threads-header-ready.threads-header-scrolled .top-navbar {
    height: var(--th-header-height) !important;
    min-height: var(--th-header-height) !important;

    background: transparent !important;
    box-shadow: none !important;
  }


  /* =========================================
     DESKTOP SCROLLED — LANGUAGE
     88 × 36 exact compact composition
     ========================================= */

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .header-buttons {
    flex: 0 0 88px !important;

    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  [data-testid="store-header-localization"] {
    width: 88px !important;
    height: 36px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn {
    position: relative !important;

    width: 88px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 18px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::before,
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::after {
    position: absolute !important;

    top: 4px !important;

    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 11px !important;

    font-size: 12px !important;
    line-height: 1 !important;

    transform: none !important;
  }

  /* EN */
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::before {
    left: 5px !important;
    right: auto !important;

    width: 31px !important;
  }

  /* عربي */
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::after {
    right: 5px !important;
    left: auto !important;

    width: 39px !important;
  }
}


/* ---------- Mobile ---------- */
@media (max-width: 999.98px) {

  .threads-site-header.threads-header-ready.threads-header-scrolled {
    --m-h: 52px !important;
    --m-logo: 36px !important;

   

    --m-icon: 16px !important;
    --m-gap: 4px !important;
    --m-menu: 19px !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    height: var(--m-h) !important;
    min-height: var(--m-h) !important;

    background: rgba(58, 47, 35, 0.42) !important;

    -webkit-backdrop-filter: blur(15px) saturate(150%);
    backdrop-filter: blur(15px) saturate(150%);

    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.08) !important;

    z-index: 10000 !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled .top-navbar,
  .threads-site-header.threads-header-ready.threads-header-scrolled #mainnav,
  .threads-site-header.threads-header-ready.threads-header-scrolled #mainnav > .inner {
    height: var(--m-h) !important;
    min-height: var(--m-h) !important;

    background: transparent !important;
    box-shadow: none !important;
  }
}


/* Smooth shrinking */
.threads-site-header.threads-header-ready,
.threads-site-header.threads-header-ready #mainnav,
.threads-site-header.threads-header-ready #mainnav > .inner,
.threads-site-header.threads-header-ready .navbar-brand {
  transition:
    height .25s ease,
    min-height .25s ease,
    width .25s ease,
    background-color .25s ease,
    backdrop-filter .25s ease,
    -webkit-backdrop-filter .25s ease !important;
}

/* =========================================================
   MOBILE SCROLLED LANGUAGE — CLEAN COMPACT
   Same proven structure as desktop, smaller size
   ========================================================= */

@media (max-width: 999.98px) {

  .threads-site-header.threads-header-ready.threads-header-scrolled {
    --m-lang-w: 50px !important;
    --m-lang-h: 28px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .header-buttons {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    transform: translateY(-50%) !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  [data-testid="store-header-localization"] {
    width: 50px !important;
    height: 28px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn {
    position: relative !important;

    display: block !important;

    width: 50px !important;
    height: 28px !important;

    min-width: 50px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #fff !important;
    border-radius: 14px !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn > * {
    display: none !important;
  }

  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::before,
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::after {
    position: absolute !important;

    top: 3px !important;

    height: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 9px !important;

    line-height: 1 !important;

    visibility: visible !important;

    transform: none !important;
  }

  /* EN */
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::before {
    left: 3px !important;
    right: auto !important;

    width: 17px !important;

    font-size: 8px !important;
  }

  /* عربي */
  .threads-site-header.threads-header-ready.threads-header-scrolled
  .s-localization-modal-trigger-btn::after {
    right: 3px !important;
    left: auto !important;

    width: 23px !important;

    font-size: 8px !important;
  }
}
.s-block--bundle-embroidery-options{
  margin: 0 !important;
}


body{
  background: #fff !important;
}
.s-add-product-toast{
  z-index: 99999 !important;
}
/* =========================================================
   THREADS OF YOU — FINAL PRODUCT SYSTEM

   DESKTOP:
   - Product sliders = EXACTLY 3 cards
   - Product lists = EXACTLY 3 cards
   - gap = 28px

   MOBILE:
   - Product sliders = current working 1.5 behavior
   - Add to Cart overlay = same concept, smaller height

   GLOBAL:
   - natural image height
   - Figma card content
   - hover border
   - native Salla Add To Cart
   ========================================================= */

:root {
  --toy-product-brown: #3A2F23;
  --toy-product-price: #4A3D2D;
  --toy-product-bg: #F5F0EB;

  --toy-desktop-gap: 28px;
}


/* =========================================================
   1. PRODUCT SLIDER TITLE
   ========================================================= */

salla-products-slider .s-slider-block__title {
  position: relative !important;

  width: 100% !important;
  min-height: 56px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  margin: 0 0 32px !important;
  padding: 0 !important;
}


salla-products-slider .s-slider-block__title-right {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  pointer-events: none;
}


salla-products-slider .s-slider-block__title-right h2 {
  margin: 0 !important;
  padding: 0 !important;

  font-family: "Aref Ruqaa", serif !important;

  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  color: var(--toy-product-brown) !important;

  text-align: center !important;
}


/* =========================================================
   2. SLIDER ARROWS
   ========================================================= */

salla-products-slider .s-slider-block__title-left {
  position: absolute !important;

  top: 6px !important;
  inset-inline-end: 0 !important;

  z-index: 5;

  margin: 0 !important;
  padding: 0 !important;
}


salla-products-slider .s-slider-block__title-nav {
  display: flex !important;
  align-items: center !important;

  gap: 8px !important;
}


salla-products-slider .s-slider-nav-arrow {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: var(--toy-product-brown) !important;
}


salla-products-slider .s-slider-button-icon,
salla-products-slider .s-slider-button-icon svg {
  width: 30px !important;
  height: 30px !important;
}


salla-products-slider .s-slider-nav-arrow:disabled {
  opacity: .28 !important;
}


/* =========================================================
   3. SLIDER VIEWPORT
   ========================================================= */

salla-products-slider .s-slider-container {
  box-sizing: border-box !important;

  padding-top: 6px !important;
  padding-bottom: 8px !important;
}


/* =========================================================
   4. DESKTOP — EXACTLY 3 SLIDER CARDS

   IMPORTANT:
   CSS is now the source of truth for desktop width.

   3 cards + 2 gaps:
   (100% - 56px) / 3
   ========================================================= */

@media (min-width: 1000px) {

  salla-products-slider
  .s-slider-swiper-wrapper {
    display: flex !important;

    align-items: flex-start !important;

    gap: 0 !important;
  }


  salla-products-slider
  .s-products-slider-card.swiper-slide {
    box-sizing: border-box !important;

    width:
      calc(
        (100% - 56px) / 3
      ) !important;

    min-width:
      calc(
        (100% - 56px) / 3
      ) !important;

    max-width:
      calc(
        (100% - 56px) / 3
      ) !important;

    flex:
      0 0
      calc(
        (100% - 56px) / 3
      ) !important;

    /*
     * EXACT Figma spacing.
     */
    margin: 0 !important;
    margin-inline-end:
      var(--toy-desktop-gap) !important;

    height: auto !important;

    align-self: flex-start !important;
  }


  salla-products-slider
  .s-products-slider-card.swiper-slide:last-child {
    margin-inline-end: 0 !important;
  }

}


/* =========================================================
   5. PRODUCT LIST — DESKTOP 3 COLUMNS
   JS adds the class to the real card parent.
   ========================================================= */

@media (min-width: 1000px) {

  .toy-products-list-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    column-gap:
      var(--toy-desktop-gap) !important;

    row-gap:
      var(--toy-desktop-gap) !important;

    width: 100% !important;

    align-items: start !important;
  }


  .toy-products-list-grid > * {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
  }

}


/* =========================================================
   6. GLOBAL PRODUCT CARD
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  flex: 0 0 auto !important;

  align-self: flex-start !important;

  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow:
    0 2px 5px rgba(58, 47, 35, .13) !important;

  transform: none !important;
}


/* =========================================================
   7. IMAGE — NATURAL HEIGHT
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-image {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  flex: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 0 !important;

  background: transparent !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-image > a {
  display: block !important;

  width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-image-cover {
  position: static !important;

  inset: auto !important;

  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  object-fit: initial !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;
}


/* no wishlist in design */
custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-wishlist-btn {
  display: none !important;
}


/* =========================================================
   8. CONTENT
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  padding:
    20px
    16px
    24px !important;

  gap: 12px !important;

  background:
    var(--toy-product-bg) !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: visible !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-main,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-sub {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  flex: 0 0 auto !important;
  flex-grow: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-sub {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   9. PRODUCT TITLE
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-title {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Aref Ruqaa", serif !important;

  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  text-align: center !important;

  color:
    var(--toy-product-brown) !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-title a {
  display: block !important;

  color: inherit !important;

  text-decoration: none !important;
}


/* =========================================================
   10. PRICE
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-price {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Aref Ruqaa", serif !important;

  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  text-align: center !important;

  color:
    var(--toy-product-price) !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-price i {
  font-size: 20px !important;
}


/* =========================================================
   11. BORDER
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical::after {
  content: "";

  position: absolute !important;

  inset: 0 !important;

  z-index: 50;

  box-sizing: border-box;

  border:
    1px solid transparent;

  pointer-events: none;

  transition:
    border-color .18s ease;
}


/* =========================================================
   12. ADD TO CART — BASE GEOMETRY
   ========================================================= */

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer {
  position: absolute !important;

  z-index: 60 !important;

  top: -73px !important;

  inset-inline-start: 5.86% !important;
  inset-inline-end: 5.86% !important;

  width: auto !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 0 !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
salla-add-product-button,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
salla-add-product-button > div,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.w-full,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
salla-button,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.s-button-wrap,

custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.s-button-element {
  width: 100% !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 0 !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.s-button-element {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding-inline: 20px !important;

  background: #FFFFFF !important;

  color:
    var(--toy-product-brown) !important;

  border:
    1px solid
    var(--toy-product-brown) !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.s-button-text {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  color:
    var(--toy-product-brown) !important;
}


custom-salla-product-card.s-product-card-entry.s-product-card-vertical
.s-product-card-content-footer
.s-button-text > i {
  display: none !important;
}


/* =========================================================
   13. DESKTOP HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer {
    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(4px);

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .18s;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:hover::after,
  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:focus-within::after {
    border-color:
      var(--toy-product-brown);
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:hover,
  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:focus-within {
    z-index: 10;

    box-shadow:
      0 3px 8px
      rgba(58, 47, 35, .18) !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:hover
  .s-product-card-content-footer,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical:focus-within
  .s-product-card-content-footer {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0);
  }

}


/* =========================================================
   14. TOUCH
   Same Add To Cart idea as desktop,
   but visible because touch has no real hover.
   ========================================================= */

@media (hover: none), (pointer: coarse) {

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: none !important;
  }

}


/* =========================================================
   15. MOBILE

   IMPORTANT:
   We DO NOT touch slide width here.
   Your current 1.5 mobile layout stays intact.

   Only reduce Add To Cart height.
   ========================================================= */

@media (max-width: 767.98px) {

  salla-products-slider .s-slider-block__title {
    min-height: 42px !important;

    margin-bottom: 18px !important;
  }


  salla-products-slider
  .s-slider-block__title-right h2 {
    font-size: 28px !important;
    line-height: 1.35 !important;
  }


  salla-products-slider
  .s-slider-block__title-nav {
    gap: 4px !important;
  }


  salla-products-slider
  .s-slider-nav-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }


  salla-products-slider
  .s-slider-button-icon,

  salla-products-slider
  .s-slider-button-icon svg {
    width: 23px !important;
    height: 23px !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content {
    padding:
      16px
      12px
      18px !important;

    gap: 8px !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-title,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-price {
    font-size: 20px !important;
  }


  /*
   * Smaller mobile button:
   * 42px instead of 46px.
   *
   * Keep ~16px from image bottom:
   * 42 + 16 = 58px.
   */
  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer {
    top: -58px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    inset-inline-start: 6% !important;
    inset-inline-end: 6% !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  salla-add-product-button,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  salla-add-product-button > div,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  .w-full,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  salla-button,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  .s-button-wrap,

  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  .s-button-element {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  .s-button-element {
    padding-inline: 10px !important;
  }


  custom-salla-product-card.s-product-card-entry.s-product-card-vertical
  .s-product-card-content-footer
  .s-button-text {
    font-size: 14px !important;

    white-space: nowrap !important;
  }

}


/* ==========================================================
   THREADS OF YOU — FOOTER FINAL V2
   Native Salla structure preserved
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready {
  --toy-footer-bg: #FBF7F4;
  --toy-footer-brown: #3A2F23;
  --toy-footer-divider: rgba(58, 47, 35, .39);
  --toy-footer-icon-border: #E5E7EB;

  width: 100% !important;

  /*
   * FIGMA:
   * FAQ bottom = 5462
   * Footer top = 5595
   * Gap = 133px
   */
  margin-top: 133px !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  color: var(--toy-footer-brown) !important;

  background: var(--toy-footer-bg) !important;

  border-top: 1px solid var(--toy-footer-brown) !important;
}


/* ==========================================================
   SAME BACKGROUND THROUGHOUT
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.store-footer__inner,

[data-testid="store-footer"].toy-footer-ready
> .container.toy-footer-bottom {
  background: var(--toy-footer-bg) !important;
}


/* ==========================================================
   TOP AREA

   Figma:
   top padding = 52px
   content = 1200 × 237
   then 32px to divider
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.store-footer__inner {
  width: 100% !important;

  margin: 0 !important;

  padding:
    52px
    0
    32px !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   FOOTER TOP GRID
   DO NOT MODIFY GLOBAL .container
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.store-footer__inner
> .container.toy-footer-grid {
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px !important;

  min-height: 237px !important;

  margin-inline: auto !important;
  padding: 0 !important;

  display: grid !important;

  align-items: start !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   DESKTOP >= 1281

   FIGMA physical widths:

   Contact = 187
   middle  = 487
             = 182 + 123 + 182
   Brand   = 279

   gaps = 123
   ========================================================== */

@media (min-width: 1281px) {

  html[dir="rtl"]
  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    grid-template-columns:
      187px
      487px
      279px !important;

    grid-template-areas:
      "contact links brand"
      "contact links apps" !important;

    column-gap: 123px !important;
    row-gap: 8px !important;
  }


  html[dir="ltr"]
  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    grid-template-columns:
      279px
      487px
      187px !important;

    grid-template-areas:
      "brand links contact"
      "apps links contact" !important;

    column-gap: 123px !important;
    row-gap: 8px !important;
  }

}


/* ==========================================================
   DESKTOP 1000–1280
   Project container profile
   ========================================================== */

@media (min-width: 1000px) and (max-width: 1280px) {

  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    width: min(1100px, calc(100% - 32px)) !important;
    max-width: 1100px !important;

    column-gap: 48px !important;
    row-gap: 8px !important;
  }


  html[dir="rtl"]
  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    grid-template-columns:
      minmax(170px, .9fr)
      minmax(380px, 1.7fr)
      minmax(230px, 1.15fr) !important;

    grid-template-areas:
      "contact links brand"
      "contact links apps" !important;
  }


  html[dir="ltr"]
  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    grid-template-columns:
      minmax(230px, 1.15fr)
      minmax(380px, 1.7fr)
      minmax(170px, .9fr) !important;

    grid-template-areas:
      "brand links contact"
      "apps links contact" !important;
  }

}


/* ==========================================================
   COLUMN AREAS
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col {
  grid-area: brand !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-links-col {
  grid-area: links !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-contact-col {
  grid-area: contact !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-apps {
  grid-area: apps !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col,

[data-testid="store-footer"].toy-footer-ready
.toy-footer-links-col,

[data-testid="store-footer"].toy-footer-ready
.toy-footer-contact-col,

[data-testid="store-footer"].toy-footer-ready
.toy-footer-apps {
  width: 100% !important;
  min-width: 0 !important;

  grid-column: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   BRAND COLUMN
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col {
  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;

  gap: 0 !important;
}


/* Existing native brand link */
[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col
> a {
  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;

  width: 100% !important;

  gap: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--toy-footer-brown) !important;

  text-decoration: none !important;
}


/* ==========================================================
   LOGO

   FIGMA = 97 × 87
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-logo {
  display: block !important;

  width: 97px !important;
  height: 87px !important;

  min-width: 97px !important;
  max-width: 97px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ==========================================================
   BRAND NAME

   Figma:
   Aref Ruqaa
   28px
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col
> a
> h3 {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Aref Ruqaa", serif !important;

  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;

  color: var(--toy-footer-brown) !important;

  text-align: start !important;
}


/* ==========================================================
   BRAND DESCRIPTION
   Figma 16px / line-height ≈1.55
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col
> div.max-w-sm {
  display: block !important;

  width: 100% !important;
  max-width: 279px !important;

  margin: 12px 0 0 !important;
  padding: 0 !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;

  color: var(--toy-footer-brown) !important;

  text-align: start !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col
> div.max-w-sm
p {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
}


/* ==========================================================
   TRUST BADGE
   KEEP NATIVE SALLA ELEMENT
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-brand-col
> .flex.gap-4 {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  gap: 8px !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-trust-badges"] {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--toy-footer-brown) !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-trust-badges-image {
  display: block !important;

  width: 38px !important;
  height: 38px !important;

  min-width: 38px !important;

  object-fit: contain !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-trust-badges-content {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 2px !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-trust-badges-label {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  color: rgba(58, 47, 35, .72) !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-trust-badges-number {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  color: var(--toy-footer-brown) !important;
}


/* ==========================================================
   LINKS MIDDLE COLUMN
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-links-col {
  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;
  justify-content: flex-start !important;

  gap: 20px !important;
}


/* ==========================================================
   HEADINGS
   Figma 28px
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-links-col
> h3,

[data-testid="store-footer"].toy-footer-ready
.toy-footer-contact-col
.s-contacts-title {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  color: var(--toy-footer-brown) !important;
}


/*
 * USER REQUEST:
 * middle list heading = START, NOT CENTER.
 *
 * Desktop Figma sub-column width = 182px.
 */
[data-testid="store-footer"].toy-footer-ready
.toy-footer-links-col
> h3 {
  width: 182px !important;

  align-self: flex-start !important;

  text-align: start !important;
}
.contact-social{
  display: none;
}

/* Contact heading stays centered like Figma */
[data-testid="store-footer"].toy-footer-ready
.toy-footer-contact-col
.s-contacts-title {
  width: 100% !important;
margin-bottom: 20px !important;
  text-align: center !important;
}
.mm-ocd--open { 
    z-index: 99999;
}

/* ==========================================================
   NATIVE SALLA MENU
   TWO COLUMNS
   START ALIGNED
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-menu"],

[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-menu"]
> div {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-menu-footer-list {
  display: grid !important;

  grid-template-columns:
    182px
    182px !important;

  grid-template-rows:
    repeat(3, auto) !important;

  /*
   * Fill first 3 vertically,
   * then next 3 in second column.
   */
  grid-auto-flow: column !important;

  justify-content: space-between !important;
  align-items: start !important;

  width: 100% !important;

  column-gap: 123px !important;
  row-gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


html[dir="rtl"]
[data-testid="store-footer"].toy-footer-ready
.s-menu-footer-list {
  direction: rtl !important;
}


html[dir="ltr"]
[data-testid="store-footer"].toy-footer-ready
.s-menu-footer-list {
  direction: ltr !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-menu-footer-item {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;

  color: var(--toy-footer-brown) !important;

  text-align: start !important;

  text-decoration: none !important;

  white-space: normal !important;

  transition: opacity .18s ease !important;
}


@media (hover:hover) and (pointer:fine) {

  [data-testid="store-footer"].toy-footer-ready
  .s-menu-footer-item:hover {
    opacity: .6 !important;
  }

}


/* ==========================================================
   CONTACT COLUMN
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-contact-col {
  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;
  justify-content: flex-start !important;

  gap: 14px !important;
}


[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-contacts"] {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-contacts-list {
  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

  width: 100% !important;

  gap: 11px !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-contacts-list
#contact-slot {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-contacts-item {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 32px !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--toy-footer-brown) !important;

  text-decoration: none !important;
}


html[dir="rtl"]
[data-testid="store-footer"].toy-footer-ready
.s-contacts-item {
  direction: rtl !important;
}


html[dir="ltr"]
[data-testid="store-footer"].toy-footer-ready
.s-contacts-item {
  direction: ltr !important;
}


/* ==========================================================
   CONTACT ICON
   Figma = 32 circle / 14 icon
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.s-contacts-icon {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 32px !important;

  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;

  margin: 0 !important;
  padding: 8px !important;

  box-sizing: border-box !important;

  color: var(--toy-footer-brown) !important;

  background: transparent !important;

  border:
    1px solid
    var(--toy-footer-icon-border) !important;

  border-radius: 50% !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-contacts-icon
svg {
  display: block !important;

  width: 14px !important;
  height: 14px !important;

  min-width: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  fill: currentColor !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-contacts-item
.unicode {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: var(--toy-footer-brown) !important;

  direction: ltr !important;

  white-space: nowrap !important;
}


/* ==========================================================
   APPS
   KEEP NATIVE
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-apps"] {
  align-self: start !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   BOTTOM ROW

   USER REQUEST:
   COPYRIGHT one side
   PAYMENTS other side

   FIGMA divider:
   width = 1199
   opacity ≈ .39
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
> .container.toy-footer-bottom {
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px !important;

  min-height: 116px !important;

  margin-inline: auto !important;

  padding:
    31px
    0
    32px !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;

  /*
   * COPYRIGHT ↔ PAYMENTS
   */
  justify-content: space-between !important;

  gap: 32px !important;

  box-sizing: border-box !important;

  border-top:
    1px solid
    var(--toy-footer-divider) !important;

  color: var(--toy-footer-brown) !important;

  text-align: start !important;
}


html[dir="rtl"]
[data-testid="store-footer"].toy-footer-ready
> .container.toy-footer-bottom {
  direction: rtl !important;
}


html[dir="ltr"]
[data-testid="store-footer"].toy-footer-ready
> .container.toy-footer-bottom {
  direction: ltr !important;
}


/* ==========================================================
   COPYRIGHT
   Figma = 16px
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
.toy-footer-bottom
.copyright-text {
  display: block !important;

  flex: 0 1 auto !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;

  color: var(--toy-footer-brown) !important;

  text-align: start !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-bottom
.copyright-text
p {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
}


[data-testid="store-footer"].toy-footer-ready
.toy-footer-bottom
.copyright-text
a {
  color: inherit !important;

  text-decoration: none !important;
}


/* ==========================================================
   PAYMENTS
   KEEP NATIVE
   ========================================================== */

[data-testid="store-footer"].toy-footer-ready
[data-testid="store-footer-payments"] {
  display: block !important;

  flex: 0 0 auto !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-payments-list {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;

  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-payments-list-item {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;
}


[data-testid="store-footer"].toy-footer-ready
.s-payments-list-item
img {
  display: block !important;

  width: auto !important;
  max-width: 48px !important;

  height: 28px !important;

  object-fit: contain !important;
}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 999.98px) {

  [data-testid="store-footer"].toy-footer-ready {
    margin-top: 80px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner {
    padding:
      36px
      0
      28px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .store-footer__inner
  > .container.toy-footer-grid {
    width: calc(100% - 32px) !important;
    max-width: none !important;

    min-height: 0 !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    grid-template-areas:
      "brand"
      "links"
      "contact"
      "apps" !important;

    gap: 30px !important;
  }


  /* Brand */
  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-brand-col
  > a {
    gap: 14px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-logo {
    width: 78px !important;
    height: 70px !important;

    min-width: 78px !important;
    max-width: 78px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-brand-col
  > a
  > h3 {
    font-size: 24px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-brand-col
  > div.max-w-sm {
    max-width: 420px !important;

    margin-top: 9px !important;

    font-size: 15px !important;
  }


  /* Headings */
  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-links-col
  > h3,

  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-contact-col
  .s-contacts-title {
    width: 100% !important;

    align-self: stretch !important;

    font-size: 22px !important;

    text-align: start !important;
  }


  /* Menu */
  [data-testid="store-footer"].toy-footer-ready
  .s-menu-footer-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    grid-template-rows:
      repeat(
        3,
        auto
      ) !important;

    grid-auto-flow: column !important;

    column-gap: 24px !important;

    justify-content: stretch !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .s-menu-footer-item {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }


  /* Contacts */
  [data-testid="store-footer"].toy-footer-ready
  .s-contacts-list {
    align-items: flex-start !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .s-contacts-item {
    width: auto !important;

    justify-content: flex-start !important;
  }


  /* Bottom */
  [data-testid="store-footer"].toy-footer-ready
  > .container.toy-footer-bottom {
    width: calc(100% - 32px) !important;
    max-width: none !important;

    min-height: 0 !important;

    padding:
      20px
      0
      22px !important;

    gap: 20px !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-bottom
  .copyright-text {
    font-size: 14px !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

  [data-testid="store-footer"].toy-footer-ready {
    margin-top: 64px !important;
  }


  /*
   * Long copyright + payment logos do not fit
   * reliably side-by-side on small phones.
   */
  [data-testid="store-footer"].toy-footer-ready
  > .container.toy-footer-bottom {
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    text-align: center !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .toy-footer-bottom
  .copyright-text {
    text-align: center !important;
  }


  [data-testid="store-footer"].toy-footer-ready
  .s-payments-list {
    justify-content: center !important;

    flex-wrap: wrap !important;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 359.98px) {

  [data-testid="store-footer"].toy-footer-ready
  .s-menu-footer-list {
    grid-template-columns: 1fr !important;

    grid-template-rows: none !important;

    grid-auto-flow: row !important;

    row-gap: 2px !important;
  }

}