/* public/assets/css/ls-mega-menu-mobile.css */
@media (max-width: 900px){
  :root{
    --lsmm-z: 2147483000;
    --lsmm-bottom: 92px;

    /* TOKENS LOVESTOCK */
    --lsmm-primary: var(--primary, #800080);
    --lsmm-accent:  var(--accent,  #ff4fd8);
    --lsmm-ink:     var(--ink,     #0d1226);

    /* Glass noturno, mas com leitura */
    --lsmm-bg: rgba(14,16,28,.80);
    --lsmm-head: rgba(14,16,28,.66);

    --lsmm-surface: rgba(255,255,255,.08);
    --lsmm-surface-2: rgba(255,255,255,.11);

    --lsmm-border: rgba(255,255,255,.14);
    --lsmm-border-2: rgba(255,255,255,.22);
    --lsmm-muted: rgba(255,255,255,.74);

    --lsmm-radius: 22px;
    --lsmm-radius-sm: 14px;

    --lsmm-shadow: 0 18px 70px rgba(0,0,0,.48);
    --lsmm-glow: 0 0 0 1px rgba(255,255,255,.06), 0 22px 70px rgba(128, 0, 128, .16);

    --lsmm-focus: 0 0 0 4px rgba(255,79,216,.18);

    /* >>> Mais fino (controle central) */
    --lsmm-item-gap: 8px;
    --lsmm-row-pad-y: 10px;      /* era 12 */
    --lsmm-row-pad-x: 12px;      /* era 12 (mantém) */
    --lsmm-avatar: 28px;         /* era 34 */
    --lsmm-avatar-radius: 10px;  /* era 12 */
    --lsmm-btn: 34px;            /* era 40 */
    --lsmm-btn-radius: 12px;     /* era 14 */

    --lsmm-font-title: 15px;     /* era 16 */
    --lsmm-font-item: clamp(14px, 2.8vw, 15px);
    --lsmm-font-sub:  13px;      /* era mais “gritante” */

    --lsmm-wt-title: 760;        /* era 850 */
    --lsmm-wt-item:  680;        /* era 800 */
    --lsmm-wt-sub:   650;        /* era 800 */
  }

  html.lsmm-open, body.lsmm-open{ overflow: hidden !important; }

  /* Letras mais suaves em geral */
  .lsmm-panel, .lsmm-panel *{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
  }

  /* Backdrop com toque roxo/rosa */
  .lsmm-backdrop{
    position: fixed;
    inset: 0 0 var(--lsmm-bottom) 0;
    z-index: var(--lsmm-z);

    background:
      radial-gradient(900px 520px at 18% 12%, rgba(255, 79, 216, .14), transparent 70%),
      radial-gradient(900px 520px at 82% 0%,  rgba(128, 0, 128, .18), transparent 72%),
      rgba(0,0,0,.44);

    backdrop-filter: blur(9px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .lsmm-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* Painel tipo sheet */
  .lsmm-panel{
    position: fixed;
    inset: 10px 10px var(--lsmm-bottom) 10px;

    background: var(--lsmm-bg);
    color: rgba(255,255,255,.94);

    z-index: calc(var(--lsmm-z) + 1);
    border-radius: var(--lsmm-radius);

    box-shadow: var(--lsmm-shadow), var(--lsmm-glow);
    border: 1px solid rgba(255,255,255,.10);

    opacity: 0;
    transform: translateY(14px) scale(.985);
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease;
    overflow: hidden;

    display: flex;
    flex-direction: column;
  }

  /* >>> Surpresa: Aurora border (bem sutil) */
  .lsmm-panel::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events:none;
    background:
      conic-gradient(from 180deg,
        rgba(255,79,216,.18),
        rgba(128,0,128,.20),
        rgba(255,255,255,.08),
        rgba(255,79,216,.18)
      );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    filter: blur(.2px);
    animation: lsmmAurora 10s linear infinite;
  }

  @keyframes lsmmAurora{
    to{ transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce){
    .lsmm-panel::after{ animation: none; }
  }

  /* Brilho interno (marca) */
  .lsmm-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(520px 360px at 18% 8%, rgba(255, 79, 216, .16), transparent 70%),
      radial-gradient(620px 420px at 88% 0%, rgba(128, 0, 128, .20), transparent 75%),
      linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
    opacity: .92;
  }

  .lsmm-panel > *{
    position: relative;
    z-index: 1;
  }

  .lsmm-panel.is-open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Cabeçalho */
  .lsmm-head{
    position: sticky;
    top: 0;
    z-index: 3;

    background: var(--lsmm-head);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 12px 12px 8px; /* mais fino */
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .lsmm-title{
    font-size: var(--lsmm-font-title);
    font-weight: var(--lsmm-wt-title);
    letter-spacing: .15px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 0 rgba(0,0,0,.30);
  }

  .lsmm-title::before{
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(255,79,216,.55) 55%, rgba(128,0,128,.35));
    box-shadow: 0 0 0 6px rgba(255,79,216,.09);
  }

  .lsmm-close{
    width: calc(var(--lsmm-btn) + 2px);
    height: calc(var(--lsmm-btn) + 2px);
    border-radius: var(--lsmm-btn-radius);
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    color: rgba(255,255,255,.96);
    font-size: 20px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  .lsmm-close:active{ transform: scale(.98); }
  .lsmm-close:focus-visible{
    outline: none;
    box-shadow: var(--lsmm-focus), 0 10px 24px rgba(0,0,0,.18);
    border-color: rgba(255,79,216,.35);
  }

  /* Busca fixa */
  .lsmm-search{
    position: sticky;
    top: 56px; /* head mais fino */
    z-index: 2;

    padding: 8px 12px 10px; /* mais fino */
    background: var(--lsmm-head);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .lsmm-search input{
    width: 100%;
    height: 42px; /* mais fino */
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.95);
    padding: 0 12px 0 40px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    font-weight: 600;
  }

  .lsmm-search input::placeholder{ color: rgba(255,255,255,.68); }

  .lsmm-search input:focus{
    border-color: rgba(255,79,216,.55);
    box-shadow: var(--lsmm-focus), inset 0 1px 0 rgba(255,255,255,.10);
  }

  .lsmm-search::before{
    content: "⌕";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    opacity: .78;
    pointer-events: none;
  }

  /* Lista */
  .lsmm-list{
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom)) 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* Card categoria */
  .lsmm-item{
    margin: var(--lsmm-item-gap) 4px;
    border-radius: 16px; /* levemente mais fino */
    border: 1px solid var(--lsmm-border);
    background: linear-gradient(180deg, var(--lsmm-surface-2), var(--lsmm-surface));
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
    position: relative;
  }

  /* Realce elegante do item aberto */
  .lsmm-item.is-open{
    border-color: rgba(255,79,216,.26);
    box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(255,79,216,.06);
  }
  .lsmm-item.is-open::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(420px 220px at 18% 12%, rgba(255,79,216,.10), transparent 62%),
      radial-gradient(520px 260px at 90% 0%, rgba(128,0,128,.12), transparent 70%);
    opacity: .95;
  }

  .lsmm-row{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--lsmm-row-pad-y) var(--lsmm-row-pad-x);
    position: relative;
    z-index: 1;
  }

  .lsmm-go{
    flex: 1;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: var(--lsmm-wt-item);
    font-size: var(--lsmm-font-item);
    letter-spacing: .10px;

    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px; /* mais fino */

    text-shadow: 0 1px 0 rgba(0,0,0,.20);
  }

  /* Avatar menor */
  .lsmm-go::before{
    content: "";
    width: var(--lsmm-avatar);
    height: var(--lsmm-avatar);
    border-radius: var(--lsmm-avatar-radius);

    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,79,216,.20) 55%, rgba(128,0,128,.18)),
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));

    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    flex: 0 0 auto;
  }

  /* Botão expandir menor */
  .lsmm-toggle{
    width: var(--lsmm-btn);
    height: var(--lsmm-btn);
    border-radius: var(--lsmm-btn-radius);
    border: 1px solid rgba(255,255,255,.16);

    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    color: rgba(255,255,255,.96);

    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;

    box-shadow: 0 10px 22px rgba(0,0,0,.14);
  }

  .lsmm-toggle:focus-visible{
    outline: none;
    box-shadow: var(--lsmm-focus), 0 10px 22px rgba(0,0,0,.14);
    border-color: rgba(255,79,216,.35);
  }

  .lsmm-toggle::before{
    content: "›";
    font-size: 22px;
    opacity: .92;
    transform: rotate(90deg);
    transition: transform .18s ease;
  }
  .lsmm-item.is-open .lsmm-toggle::before{
    transform: rotate(-90deg);
  }

  /* Subcategorias */
  .lsmm-children{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
    padding: 0 12px;
    position: relative;
    z-index: 1;
  }

  .lsmm-item.is-open .lsmm-children{
    max-height: 620px;
    opacity: 1;
    transform: translateY(0);
    padding: 0 12px 12px;
  }

  .lsmm-seeall{
    margin-top: 6px;
    display: inline-flex;
    gap: 8px;
    align-items: center;

    padding: 9px 11px; /* mais fino */
    border-radius: 14px;

    border: 1px dashed rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: 720;
    font-size: 13px;
  }

  .lsmm-seeall:hover{
    border-color: rgba(255,79,216,.35);
    background: rgba(255,255,255,.08);
  }

  .lsmm-seeall::after{
    content: "→";
    opacity: .85;
  }

  /* Chips subcategorias */
  .lsmm-kids{
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* mais fino */
    padding: 10px 0 0;
  }

  .lsmm-sub{
    padding: 9px 11px; /* mais fino */
    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);

    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: var(--lsmm-wt-sub);
    font-size: var(--lsmm-font-sub);
    line-height: 1;
    white-space: nowrap;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .lsmm-sub:hover{
    border-color: rgba(255,79,216,.28);
    background: rgba(255,255,255,.10);
    color: #fff;
  }

  .lsmm-sub:focus-visible{
    outline: none;
    box-shadow: var(--lsmm-focus);
    border-color: rgba(255,79,216,.45);
  }

  .lsmm-sub:active,
  .lsmm-go:active,
  .lsmm-toggle:active,
  .lsmm-seeall:active{ transform: scale(.99); }

  /* item ativo opcional */
  .lsmm-item.is-active{
    border-color: rgba(255,79,216,.24);
    background: linear-gradient(180deg, rgba(255,79,216,.10), rgba(255,255,255,.08));
  }
  .lsmm-item.is-active .lsmm-go{
    color: #fff;
  }
  .lsmm-item.is-active .lsmm-go::before{
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.70), rgba(255,79,216,.28) 55%, rgba(128,0,128,.22)),
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.18);
  }
}