/* navigation styles */

    /* ═══════════════════════════════════════════
       COLOUR TOKENS  (from screenshots)
    ═══════════════════════════════════════════ */
    :root {
      --dark-purple : #2d0a3e;   /* top-bar / mobile bg */
      --mid-purple  : #5c1278;   /* nav-links bar */
      --logo-purple : #7b1fa2;   /* logo box */
      --hover-purple: rgba(255,255,255,.12);
      --white       : #ffffff;
    }

    /* ═══════════════════════════════════════════
       STICKY WRAPPER
    ═══════════════════════════════════════════ */
    .ltd-header {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    /* ═══════════════════════════════════════════
       TOP BAR  – desktop
       Logo | Search | 🔍 | ✉ Contact | 🧺 Basket
    ═══════════════════════════════════════════ */
    .ltd-topbar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      height: 60px;
      gap: 16px;
      background: var(--dark-purple);
    }

    /* Logo box */
    .ltd-logo {
      flex-shrink: 0;
      background: var(--logo-purple);
      color: var(--white);
      text-decoration: none;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.15;
      margin-right: 20px;
      min-width: 80px;
    }
    .ltd-logo .logo-line {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--white);
    }
    .ltd-logo .logo-dot {
      color: var(--white);
    }

    /* Search bar */
    .ltd-search {
      flex: 1;
      display: flex;
      align-items: stretch;
      height: 38px;
      max-width: 700px;
    }
    .ltd-search input {
      flex: 1;
      border: none;
      outline: none;
      padding: 0 18px;
      font-size: 14px;
      font-family: inherit;
      color: #555;
      background: #fff;
      border-radius: 16px 0 0 16px;
    }
    .ltd-search input::placeholder { color: #aaa; }
    .ltd-search-btn {
      background: var(--logo-purple);
      border: none;
      cursor: pointer;
      width: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: background .2s;
      flex-shrink: 0;
      border-radius: 0 16px 16px 0;
    }
    .ltd-search-btn:hover { background: var(--mid-purple); }
    .ltd-search-btn svg { width: 18px; height: 18px; }

    /* Right actions */
    .ltd-actions {
      display: flex;
      align-items: center;
      margin-left: 24px;
      gap: 0;
    }
    .ltd-action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      color: #fff;
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      padding: 8px 18px;
      transition: background .15s;
      white-space: nowrap;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }
    .ltd-action-btn:hover { background: var(--hover-purple); border-radius: 4px; }
    .ltd-action-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; }

    /* Hamburger (hidden on desktop) */
    .ltd-hamburger {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      padding: 8px 14px;
    }
    .ltd-hamburger .bars {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 2px;
    }
    .ltd-hamburger .bars span {
      display: block;
      width: 20px;
      height: 2px;
      background: #fff;
      border-radius: 1px;
      transition: all .28s;
    }
    .ltd-hamburger.open .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .ltd-hamburger.open .bars span:nth-child(2) { opacity: 0; }
    .ltd-hamburger.open .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Mobile search button (hidden on desktop) */
    .ltd-mob-search-btn { display: none; }

    /* ═══════════════════════════════════════════
       NAV LINKS BAR  – lighter purple strip
    ═══════════════════════════════════════════ */
    .ltd-navlinks-bar {
      background: var(--mid-purple);
    }
    .ltd-navlinks-bar > ul {
      display: flex;
      flex-direction: row;
      list-style: none;
      margin: 0;
      padding: 0 32px;
      justify-content: center;
      align-items: stretch;
    }
    .ltd-navlinks-bar > ul > li {
      position: relative;
      display: flex;
      align-items: stretch;
    }
    .ltd-navlinks-bar > ul > li > a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 18px;
      height: 40px;
      color: #fff !important;
      text-decoration: none !important;
      font-size: 13.5px;
      font-weight: 600;
      white-space: nowrap;
      transition: background .15s;
      letter-spacing: .01em;
    }
    .ltd-navlinks-bar > ul > li > a:hover,
    .ltd-navlinks-bar > ul > li.dd-open > a {
      background: var(--hover-purple);
    }
    .ltd-navlinks-bar > ul > li > a .chev {
      font-size: 12px;
      opacity: .7;
      transition: transform .2s;
    }
    .ltd-navlinks-bar > ul > li:hover > a .chev,
    .ltd-navlinks-bar > ul > li.dd-open > a .chev {
      transform: rotate(180deg);
    }

    /* ── Dropdown ── */
    .ltd-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      border: 1px solid #ddd;
      border-top: 3px solid var(--logo-purple);
      min-width: 210px;
      box-shadow: 0 6px 20px rgba(0,0,0,.18);
      z-index: 500;
      padding: 6px 0;
      border-radius: 0 0 4px 4px;
      animation: ddIn .15s ease;
    }
    @keyframes ddIn {
      from { opacity:0; transform: translateY(-5px); }
      to   { opacity:1; transform: translateY(0); }
    }
    .ltd-navlinks-bar > ul > li:hover .ltd-dropdown,
    .ltd-navlinks-bar > ul > li.dd-open .ltd-dropdown {
      display: block;
    }
    /* Wide 2-col */
    .ltd-dropdown.wide {
      display: none;
      min-width: 420px;
    }
    .ltd-navlinks-bar > ul > li:hover .ltd-dropdown.wide,
    .ltd-navlinks-bar > ul > li.dd-open .ltd-dropdown.wide {
      display: flex;
    }
    .ltd-dropdown.wide .dd-col { flex: 1; }
    .ltd-dropdown.wide .dd-col + .dd-col { border-left: 1px solid #f0f0f0; }

    .ltd-dropdown a {
      display: block;
      padding: 8px 18px;
      font-size: 13px;
      color: #333 !important;
      text-decoration: none !important;
      transition: background .12s, color .12s;
      white-space: nowrap;
    }
    .ltd-dropdown a:hover { background: #f3e5f5; color: var(--logo-purple) !important; }
    .ltd-dropdown .dd-all {
      font-weight: 700;
      color: var(--logo-purple) !important;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 2px;
    }
    .ltd-dropdown .dd-all:hover { background: #f3e5f5; }

    /* Right-align last dropdowns to avoid overflow */
    .ltd-navlinks-bar > ul > li:nth-last-child(-n+3) .ltd-dropdown {
      left: auto;
      right: 0;
    }

    /* ═══════════════════════════════════════════
       MOBILE OVERLAY + DRAWER
    ═══════════════════════════════════════════ */
    .ltd-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 800;
    }
    .ltd-overlay.open { display: block; }

    .ltd-drawer {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 300px;
      background: var(--dark-purple);
      z-index: 900;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
    }
    .ltd-drawer.open { transform: translateX(0); }

    /* Drawer header */
    .drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .drawer-head .d-logo {
      background: var(--logo-purple);
      color: #fff;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 6px 8px;
      line-height: 1.2;
      text-decoration: none;
      display: flex;
      flex-direction: column;
    }
    .drawer-close {
      background: none;
      border: none;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
    }

    /* Drawer search */
    .drawer-search {
      display: flex;
      margin: 14px 16px;
      height: 40px;
    }
    .drawer-search input {
      flex: 1;
      padding: 0 14px;
      border: none;
      outline: none;
      font-size: 13px;
      font-family: inherit;
      background: #fff;
      color: #333;
      border-radius: 0;
    }
    .drawer-search input::placeholder { color: #aaa; }
    .drawer-search button {
      background: var(--logo-purple);
      border: none;
      width: 44px;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .drawer-search button svg { width: 16px; height: 16px; }

    /* Drawer nav items */
    .drawer-item { border-bottom: 1px solid rgba(255,255,255,.08); }
    .drawer-toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: none;
      border: none;
      padding: 14px 20px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
      transition: background .15s;
    }
    .drawer-toggle:hover { background: var(--hover-purple); }
    .drawer-toggle .chev {
      font-size: 10px;
      opacity: .6;
      transition: transform .22s;
    }
    .drawer-toggle.open .chev { transform: rotate(180deg); }

    .drawer-sub {
      display: none;
      background: rgba(0,0,0,.2);
    }
    .drawer-sub.open { display: block; }
    .drawer-sub a {
      display: block;
      padding: 11px 20px 11px 32px;
      color: rgba(255,255,255,.85);
      text-decoration: none;
      font-size: 13px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      transition: background .12s, color .12s;
    }
    .drawer-sub a:last-child { border-bottom: none; }
    .drawer-sub a:hover { background: var(--hover-purple); color: #fff; }
    .drawer-sub a.sub-all {
      font-weight: 700;
      color: #ce93d8;
    }
    .drawer-sub a.sub-all:hover { color: #fff; }

    /* Drawer direct links */
    .drawer-direct {
      display: block;
      padding: 14px 20px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,.08);
      transition: background .15s;
    }
    .drawer-direct:hover { background: var(--hover-purple); }

    /* ═══════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
    ═══════════════════════════════════════════ */

    /* Tablet (medium mobile – Image 2 layout) */
    @media (max-width: 900px) {
      .ltd-navlinks-bar { display: none; }
      .ltd-hamburger { display: flex; }
      .ltd-topbar { padding: 0 12px; gap: 8px; }
      .ltd-logo { margin-right: 8px; }
      .ltd-search { max-width: none; }
      .ltd-actions { margin-left: 8px; gap: 0; }
    }

    /* Small mobile (Image 3 layout: Menu | Search | Logo | Basket) */
    @media (max-width: 560px) {
      .ltd-topbar {
        padding: 0 4px;
        gap: 0;
        justify-content: space-between;
      }
      /* Hide the main search bar, show icon-only search btn */
      .ltd-search { display: none; }
      .ltd-mob-search-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        padding: 8px 10px;
      }
      .ltd-mob-search-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
      /* Logo centered */
      .ltd-logo { margin: 0; order: 3; }
      .ltd-hamburger { order: 1; }
      .ltd-mob-search-btn { order: 2; }
      .ltd-actions { order: 4; margin-left: 0; }
      /* Hide "Contact us" on smallest */
      .ltd-contact-btn { display: none; }
    }