/* ==========================================================
   LA BELLA — MOBILE MENU V5
   PREMIUM SKIN / SAFE HEADLESS UI
   Keeps EasyOrders open/close behavior untouched
   ========================================================== */

@media (max-width:1023px){

  /* =========================================================
     OPEN MENU TOKENS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]{

    --lb-purple:#6D0482;
    --lb-purple-dark:#23072B;
    --lb-purple-mid:#4C0A5C;

    --lb-gold:#D4AF37;
    --lb-gold-soft:#E8CE85;
    --lb-gold-pale:#F3E3AE;

    --lb-ivory:#FBF8F5;
    --lb-text:#FAF4F9;
    --lb-muted:rgba(250,244,249,.68);
    --lb-line:rgba(232,206,133,.13);

  }


  /* =========================================================
     OVERLAY
     Color only
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div[aria-hidden="true"]{

    background-color:
      rgba(12,3,15,.62)
      !important;

  }


  /* =========================================================
     DRAWER
     Premium layered background + built-in watermark
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col{

    color:
      var(--lb-text)
      !important;

    background-color:
      #210729
      !important;

    background-image:

      linear-gradient(
        rgba(33,7,41,.90),
        rgba(27,6,34,.94)
      ),

      url("https://files.easy-orders.net/1782411168349054070.png"),

      radial-gradient(
        circle at 88% 10%,
        rgba(109,4,130,.42),
        transparent 34%
      ),

      linear-gradient(
        165deg,
        #210729 0%,
        #4B0C5A 52%,
        #18051D 100%
      )
      !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat
      !important;

    background-position:
      center,
      112% 16%,
      center,
      center
      !important;

    background-size:
      100% 100%,
      260px auto,
      100% 100%,
      100% 100%
      !important;

    border-color:
      rgba(212,175,55,.13)
      !important;

    box-shadow:
      22px 0 55px
      rgba(0,0,0,.30)
      !important;

  }


  /* =========================================================
     TOP BAR
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col
  > div:first-child{

    padding-left:
      18px
      !important;

    padding-right:
      18px
      !important;

    padding-bottom:
      10px
      !important;

    border-bottom:
      1px solid
      rgba(232,206,133,.08)
      !important;

  }


  /* subtle LA BELLA label without changing DOM behavior */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col
  > div:first-child::before{

    content:
      "LA BELLA  ·  PERFUME";

    margin-right:
      auto;

    color:
      rgba(232,206,133,.74);

    font-size:
      8px;

    font-weight:
      800;

    letter-spacing:
      .20em;

    white-space:
      nowrap;

  }


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

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col
  > div:first-child
  > button{

    width:
      40px
      !important;

    height:
      40px
      !important;

    padding:
      0
      !important;

    display:
      grid
      !important;

    place-items:
      center
      !important;

    color:
      var(--lb-gold-soft)
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.025)
      )
      !important;

    border:
      1px solid
      rgba(232,206,133,.20)
      !important;

    border-radius:
      999px
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.04)
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col
  > div:first-child
  > button
  svg{

    width:
      18px
      !important;

    height:
      18px
      !important;

    color:
      inherit
      !important;

  }


  /* =========================================================
     CONTENT AREA
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  > div.relative.flex.w-full.max-w-xs.flex-col
  > .divide-y.py-4{

    padding-left:
      16px
      !important;

    padding-right:
      16px
      !important;

    padding-top:
      8px
      !important;

  }


  /* =========================================================
     DIVIDERS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y
  > :not([hidden])
  ~ :not([hidden]){

    border-color:
      rgba(255,255,255,.045)
      !important;

  }


  /* =========================================================
     SECTION HEADINGS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  p.font-bold{

    margin-top:
      16px
      !important;

    margin-bottom:
      10px
      !important;

    padding-left:
      2px
      !important;

    padding-right:
      2px
      !important;

    color:
      var(--lb-gold)
      !important;

    font-size:
      9.5px
      !important;

    font-weight:
      900
      !important;

    letter-spacing:
      .17em
      !important;

    line-height:
      1.4
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  p.font-bold.text-lg{

    font-size:
      9.5px
      !important;

  }


  /* =========================================================
     CATEGORY CARDS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.font-medium{

    margin-top:
      7px
      !important;

    margin-bottom:
      7px
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.065),
        rgba(255,255,255,.025)
      )
      !important;

    border:
      1px solid
      rgba(255,255,255,.06)
      !important;

    border-radius:
      15px
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025)
      !important;

  }


  /* =========================================================
     CATEGORY BUTTON ROW
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.font-medium.flex.flex-col
  > button
  > div{

    min-height:
      54px
      !important;

    padding-left:
      14px
      !important;

    padding-right:
      14px
      !important;

    background:
      transparent
      !important;

    border-radius:
      14px
      !important;

  }


  /* standalone VIP / Oils */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.font-medium.px-5.py-3{

    min-height:
      54px
      !important;

    padding-left:
      14px
      !important;

    padding-right:
      14px
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

  }


  /* =========================================================
     LINKS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  a{

    color:
      var(--lb-text)
      !important;

    text-decoration:
      none
      !important;

    font-family:
      Cairo,
      Tahoma,
      Arial,
      sans-serif
      !important;

    font-size:
      13px
      !important;

    font-weight:
      600
      !important;

    line-height:
      1.55
      !important;

  }


  /* gold dot for main category links */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.font-medium
  a::before{

    content:"";

    display:
      inline-block;

    width:
      4px;

    height:
      4px;

    margin-inline-end:
      9px;

    border-radius:
      50%;

    background:
      var(--lb-gold);

    vertical-align:
      middle;

  }


  /* =========================================================
     PLUS / MINUS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  button[id^="headlessui-disclosure-button-"]
  svg{

    width:
      17px
      !important;

    height:
      17px
      !important;

    color:
      rgba(232,206,133,.82)
      !important;

  }


  /* =========================================================
     EXPANDED CATEGORY
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  button[id^="headlessui-disclosure-button-"][aria-expanded="true"]
  > div{

    background:
      linear-gradient(
        135deg,
        rgba(109,4,130,.28),
        rgba(255,255,255,.04)
      )
      !important;

    border-bottom:
      1px solid
      rgba(212,175,55,.10)
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  button[id^="headlessui-disclosure-button-"][aria-expanded="true"]
  > div
  > a{

    color:
      var(--lb-gold-pale)
      !important;

    font-weight:
      700
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  button[id^="headlessui-disclosure-button-"][aria-expanded="true"]
  > div.bg-gray-100{

    background:
      linear-gradient(
        135deg,
        rgba(109,4,130,.28),
        rgba(255,255,255,.04)
      )
      !important;

  }


  /* =========================================================
     SUBCATEGORY PANEL
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  [id^="headlessui-disclosure-panel-"]{

    margin-left:
      7px
      !important;

    margin-right:
      7px
      !important;

    margin-bottom:
      8px
      !important;

    padding:
      6px
      !important;

    color:
      var(--lb-text)
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(23,5,29,.76),
        rgba(42,7,51,.68)
      )
      !important;

    border:
      1px solid
      rgba(212,175,55,.09)
      !important;

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

  }


  /* =========================================================
     SUBCATEGORY ROWS
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  [id^="headlessui-disclosure-panel-"]
  .group.relative{

    min-height:
      42px
      !important;

    padding-left:
      8px
      !important;

    padding-right:
      8px
      !important;

    background:
      transparent
      !important;

    border-radius:
      9px
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  [id^="headlessui-disclosure-panel-"]
  a{

    margin-inline-start:
      10px
      !important;

    color:
      rgba(251,248,245,.84)
      !important;

    font-size:
      11.8px
      !important;

    font-weight:
      500
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  [id^="headlessui-disclosure-panel-"]
  a::before{

    width:
      3px;

    height:
      3px;

    margin-inline-end:
      8px;

    background:
      rgba(232,206,133,.60);

  }


  /* =========================================================
     PAGES SECTION
     ========================================================= */

  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.pb-8{

    margin-top:
      22px
      !important;

    padding-top:
      16px
      !important;

    border-top:
      1px solid
      rgba(232,206,133,.10)
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.pb-8
  .flow-root{

    margin-top:
      6px
      !important;

    margin-bottom:
      6px
      !important;

    background:
      rgba(255,255,255,.025)
      !important;

    border:
      1px solid
      rgba(255,255,255,.04)
      !important;

    border-radius:
      12px
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.pb-8
  .flow-root
  a{

    min-height:
      46px
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    color:
      rgba(251,248,245,.72)
      !important;

    font-size:
      11.8px
      !important;

    font-weight:
      500
      !important;

  }


  #headlessui-portal-root
  [role="dialog"][data-headlessui-state="open"]
  .divide-y.pb-8
  .flow-root
  a::after{

    content:
      "↗";

    margin-inline-start:
      auto;

    color:
      rgba(232,206,133,.46);

  }


  /* =========================================================
     HOVER — color only, no transforms
     ========================================================= */

  @media (hover:hover){

    #headlessui-portal-root
    [role="dialog"][data-headlessui-state="open"]
    .divide-y.font-medium:hover{

      background:
        linear-gradient(
          145deg,
          rgba(109,4,130,.14),
          rgba(255,255,255,.035)
        )
        !important;

      border-color:
        rgba(212,175,55,.14)
        !important;

    }


    #headlessui-portal-root
    [role="dialog"][data-headlessui-state="open"]
    a:hover{

      color:
        var(--lb-gold-soft)
        !important;

    }


    #headlessui-portal-root
    [role="dialog"][data-headlessui-state="open"]
    [id^="headlessui-disclosure-panel-"]
    .group.relative:hover{

      background:
        rgba(255,255,255,.035)
        !important;

    }

  }

}