/* =========================================
   MEGA MENU — THEME: PURPLE / PINK
========================================= */

  .tj-apparel-nav-item.tj-has-megamenu {
      position: relative !important;
  }

  .tj-apparel-nav-item.tj-has-megamenu>ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  .tj-apparel-navigation {
      position: static !important;
  }

  .tj-apparel-nav-list {
      position: relative;
  }

  /* =========================================
   MEGA MENU CONTAINER — FULL WIDTH
========================================= */
  .tj-mega-menu-container {
      position: absolute;
      top: 100%;
      left: 0;
      background: #0d0918;
      border-top: 1px solid rgba(168, 85, 247, 0.3);
      border-bottom: 2px solid #a855f7;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85);
      padding: 35px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
      z-index: 999999 !important;
      pointer-events: none;
      box-sizing: border-box;
  }

  .tj-apparel-nav-item.tj-has-megamenu:hover .tj-mega-menu-container {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
  }

  .tj-apparel-nav-item.tj-has-megamenu.menu-open .tj-mega-menu-container {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      padding: 24px;
  }

  /* =========================================
   MEGA MENU GRID
========================================= */
  .tj-mega-menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      box-sizing: border-box;
  }

  .tj-mega-col ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  .tj-mega-col ul li {
      margin-bottom: 10px;
  }

  .tj-mega-col ul li a {
      color: #b3b3b3;
      text-decoration: none;
      font-size: 14px;
      transition: all 0.25s ease;
      display: inline-block;
      width: max-content;
  }

  .tj-mega-col ul li a:hover {
      color: #a855f7;
      padding-left: 6px;
  }

  /* =========================================
   MEGA MENU TITLE
========================================= */
  .tj-mega-title {
      background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 18px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(168, 85, 247, 0.2);
      width: max-content;
  }

  /* =========================================
   MEGA MENU PROMO CARD
========================================= */
  .tj-mega-promo-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: #18122b;
      border: 1px solid rgba(168, 85, 247, 0.2);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      transition: all 0.3s ease;
      box-sizing: border-box;
      flex-direction: column;
  }

  .promo-content {
      width: max-content;
  }

  .tj-mega-promo-card:hover {
      border-color: rgba(255, 77, 158, 0.5);
      box-shadow: 0 0 25px rgba(168, 85, 247, 0.2);
      transform: translateY(-2px);
  }

  .tj-mega-promo-card img {
      width: 110px;
      object-fit: contain;
      flex-shrink: 0;
  }

  .promo-content span {
      font-size: 11px;
      background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      display: block;
  }

  .promo-content h5 {
      color: #fff;
      font-size: 15px;
      margin: 4px 0 8px 0;
      font-weight: 600;
  }

  .tj-promo-link {
      font-size: 12px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }

  .tj-promo-link:hover {
      color: #a855f7;
  }

  /* =========================================
   NAV LINK ARROW ROTATION
========================================= */
  .tj-apparel-nav-link i.fa-angle-down {
      transition: transform 0.3s ease;
      font-size: 11px;
      opacity: 0.7;
  }

  .tj-apparel-nav-item.tj-has-megamenu:hover .tj-apparel-nav-link i.fa-angle-down,
  .tj-apparel-nav-item.tj-has-megamenu.menu-open .tj-apparel-nav-link i.fa-angle-down {
      transform: rotate(180deg);
      opacity: 1;
  }

  /* =========================================
   RESPONSIVE — MEGA MENU
========================================= */

  @media (max-width: 1200px) {
      .tj-mega-menu-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .tj-mega-banner-col {
          grid-column: span 2;
      }

      .tj-mega-menu-container {
          padding: 30px 0;
      }
  }

  @media (max-width: 991px) {
      .tj-mega-menu-container {
          display: none !important;
      }

      .tj-apparel-nav-item.tj-has-megamenu {
          position: relative !important;
      }
  }

  @media (max-width: 767px) {
      .tj-mega-menu-grid {
          grid-template-columns: 1fr;
      }

      .wrapper-header-bottom-responsive {
          display: none !important;
      }

      .tj-mega-banner-col {
          grid-column: span 1;
      }

      .tj-mega-menu-container {
          padding: 20px 0;
      }

      .tj-mega-title {
          font-size: 14px;
      }

      .tj-mega-col ul li a {
          font-size: 13px;
      }

      .tj-mega-promo-card {
          padding: 15px;
      }

      .tj-mega-promo-card img {
          width: 55px;
          height: 55px;
      }
  }

  @media (max-width: 575px) {
      .tj-mega-menu-container {
          padding: 15px 0;
      }

      .tj-mega-menu-grid {
          gap: 20px;
      }

      .tj-mega-promo-card {
          flex-direction: column;
          text-align: center;
      }

      .tj-mega-promo-card img {
          width: 50px;
          height: 50px;
      }
  }

  /* =========================================
   MOBILE ACCORDION (Mega Menu Replacement)
========================================= */

  .tj-mobile-accordion {
      list-style: none;
      border-bottom: 1px solid rgba(168, 85, 247, 0.12);
  }

  .tj-accordion-toggle {
      width: 100%;
      background: transparent;
      border: none;
      color: #fff;
      padding: 14px 0;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      transition: color 0.25s ease;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.60);
      font-size: 12px;
  }

  .tj-sidebar-navigation li .tj-accordion-toggle span i {
      color: rgba(145, 92, 255, 0.75);
  }

  .tj-accordion-inner li a {
      min-height: unset;
  }

  .tj-accordion-toggle:hover {
      color: #a855f7;
  }

  .tj-accordion-toggle span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
  }

  .tj-accordion-toggle span i {
      font-size: 14px;
      opacity: 0.8;
  }

  .tj-accordion-arrow {
      font-size: 12px;
      opacity: 0.7;
      transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .tj-mobile-accordion.is-open .tj-accordion-arrow {
      transform: rotate(180deg);
      opacity: 1;
      color: #a855f7;
  }

  .tj-mobile-accordion.is-open .tj-accordion-toggle {
      color: #a855f7;
  }

  .tj-accordion-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
  }

  .tj-accordion-inner {
      padding: 4px 0 18px 0;
  }

  .tj-accordion-subtitle {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      margin: 14px 0 8px 0;
      background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .tj-accordion-subtitle:first-child {
      margin-top: 0;
  }

  .tj-accordion-inner ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .tj-accordion-inner ul li {
      margin-bottom: 6px;
  }

  .tj-accordion-inner ul li a {
      color: #b3b3b3;
      text-decoration: none;
      font-size: 13.5px;
      display: inline-block;
      padding: 4px 0 4px 12px;
      border-left: 2px solid transparent;
      transition: all 0.25s ease;
  }

  .tj-accordion-inner ul li a:hover {
      color: #a855f7;
      border-left-color: #a855f7;
      padding-left: 16px;
  }

  @media (min-width: 992px) {
      .tj-mobile-accordion {
          display: none !important;
      }
  }

  /* =========================================
   IPHONE-STYLE FLOATING BOTTOM DOCK
========================================= */

  .tj-mobile-bottom-bar {
      display: none;
  }

  @media (max-width: 991px) {

      .tj-mobile-bottom-bar {
          display: block;
          position: fixed;
          bottom: 18px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 99999;
          width: calc(100% - 32px);
          max-width: 460px;
          pointer-events: none;
      }

      .tj-bottom-bar-inner {
          pointer-events: auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          gap: 2px;
          padding: 8px 10px;
          border-radius: 26px;
          background: rgba(20, 14, 35, 0.75);
          backdrop-filter: blur(22px) saturate(180%);
          -webkit-backdrop-filter: blur(22px) saturate(180%);
          border: 1px solid rgba(168, 85, 247, 0.25);
          box-shadow:
              0 10px 30px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset,
              0 0 24px rgba(168, 85, 247, 0.15);
      }

      .tj-bottom-item {
          position: relative;
          flex: 1 1 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          text-decoration: none;
          padding: 6px 4px;
          border-radius: 18px;
          color: rgba(255, 255, 255, 0.55);
          transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
          -webkit-tap-highlight-color: transparent;
      }

      .tj-bottom-icon {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          font-size: 17px;
          transition: all 0.3s ease;
      }

      .tj-bottom-label {
          font-size: 10px;
          font-weight: 500;
          letter-spacing: 0.2px;
          line-height: 1;
      }

      .tj-bottom-icon i {
          color: inherit;
          transition: color 0.25s ease;
      }

      .tj-bottom-item:hover {
          color: #fff;
      }

      .tj-bottom-item.active {
          color: #fff;
      }

      .tj-bottom-item.active .tj-bottom-icon {
          background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
          color: #fff;
          box-shadow:
              0 6px 14px rgba(168, 85, 247, 0.55),
              0 0 0 3px rgba(168, 85, 247, 0.12);
          transform: translateY(-1px);
      }

      .tj-bottom-item.active .tj-bottom-label {
          color: #fff;
          font-weight: 600;
      }

      .tj-bottom-cart .tj-bottom-icon {
          font-size: 16px;
      }

      .tj-bottom-badge {
          position: absolute;
          top: -4px;
          right: -6px;
          min-width: 17px;
          height: 17px;
          padding: 0 4px;
          border-radius: 9px;
          background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
          color: #fff;
          font-size: 10px;
          font-weight: 700;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
          border: 1.5px solid rgba(20, 14, 35, 0.9);
          box-shadow: 0 2px 6px rgba(255, 77, 158, 0.5);
      }

      body {
          padding-bottom: 96px;
      }
  }

  @media (max-width: 380px) {
      .tj-bottom-bar-inner {
          padding: 6px 6px;
          border-radius: 22px;
      }

      .tj-bottom-icon {
          width: 30px;
          height: 30px;
          font-size: 15px;
      }

      .tj-bottom-label {
          font-size: 9px;
      }
  }

  /* =========================================
   SAFE AREA (iPhone notch / home indicator)
========================================= */
  @supports (padding: max(0px)) {
      @media (max-width: 991px) {
          .tj-mobile-bottom-bar {
              bottom: max(14px, env(safe-area-inset-bottom));
          }
      }
  }

  /* ===== Logged-in user avatar / initials ===== */
  .tj-user-avatar,
  .tj-user-initials {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .tj-user-avatar {
      object-fit: cover;
      display: block;
      border: 2px solid var(--tj-primary, #111);
  }

  .tj-user-initials {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--tj-primary, #111);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }

  .tj-user-avatar-sm,
  .tj-user-initials-sm {
      width: 24px;
      height: 24px;
  }

  .tj-user-initials-sm {
      font-size: 10px;
  }

  .tj-header-user {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
  }

  .tj-bottom-item .tj-user-avatar,
  .tj-bottom-item .tj-user-initials {
      margin-bottom: 2px;
  }


  /* =========================================
    LIVE SEARCH SUGGESTIONS
========================================= */
  .tj-search-bar-inner {
      position: relative;
  }

  .tj-advanced-search-bar {
      overflow: visible !important;
  }

  .tj-search-suggestions {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      background: #0d0918;
      border: 1px solid rgba(168, 85, 247, 0.3);
      border-radius: 14px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85);
      max-height: 420px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      display: none;
      z-index: 999999;
  }

  .tj-search-suggestions.active {
      display: block;
  }

  .tj-search-suggestions .search-suggestion-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      text-decoration: none;
      border-bottom: 1px solid rgba(168, 85, 247, 0.12);
      transition: background 0.2s ease;
  }

  .tj-search-suggestions .search-suggestion-item:hover {
      background: rgba(168, 85, 247, 0.12);
  }

  .tj-search-suggestions .search-suggestion-item img {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
  }

  .tj-search-suggestions .s-title {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
  }

  .tj-search-suggestions .s-price {
      font-size: 13px;
      font-weight: 700;
      background: linear-gradient(135deg, #ff4d9e 0%, #a855f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .tj-search-suggestions .search-suggestion-empty {
      padding: 18px;
      text-align: center;
      color: #b3b3b3;
      font-size: 13px;
  }

  .tj-search-suggestions .search-suggestion-all {
      display: block;
      padding: 12px;
      text-align: center;
      color: #a855f7;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
  }

  @media (max-width: 767px) {
      .tj-search-suggestions {
          top: calc(100% + 8px);
          max-height: 45vh;
          border-radius: 12px;
      }

      .tj-search-suggestions .search-suggestion-item {
          padding: 10px 12px;
          gap: 12px;
      }

      .tj-search-suggestions .search-suggestion-item img {
          width: 44px;
          height: 44px;
      }

      .tj-search-suggestions .s-title {
          font-size: 13px;
      }
  }