/* =========================
   LXMS SOLID - FINAL CLEAN CSS
   ========================= */

#lxmsSolid{
  --bg:#5BC9FF;
  --txt:#fff;

  /* =========================
     ✅ CONTROL LINES (NO VISUAL CHANGE BY DEFAULT)
     ========================= */
  --ctrl-wrap-x: 0px;
  --ctrl-wrap-y: 0px;
  --ctrl-wrap-scale: 1;

  --ctrl-title-x: 0px;
  --ctrl-title-y: 0px;
  --ctrl-title-scale: 1;

  --ctrl-shell-x: 0px;
  --ctrl-shell-y: 0px;
  --ctrl-shell-scale: 1;

  --ctrl-bottom-x: 0px;
  --ctrl-bottom-y: 0px;
  --ctrl-bottom-scale: 1;

  --ctrl-img-x: 0px;
  --ctrl-img-y: 0px;
  --ctrl-img-scale: 1;

  --img-base-x: -110px;
  --img-base-y: -16px;
  --img-base-scale: 1.30;
  --img-from-x: 320px;

  --ctrl-brush-x: 55px;
  --ctrl-brush-y: -35px;
  --ctrl-brush-scale: 1.5;

  --ctrl-copy-x: 0px;
  --ctrl-copy-y: 0px;
  --ctrl-copy-scale: 1;

  /* =========================
     ✅ MOBILE-ONLY CONTROL LINES (NO VISUAL CHANGE BY DEFAULT)
     ========================= */
  --m-ctrl-wrap-x: 0px;
  --m-ctrl-wrap-y: 0px;
  --m-ctrl-wrap-scale: 1;

  --m-ctrl-title-x: 0px;
  --m-ctrl-title-y: 0px;
  --m-ctrl-title-scale: 1;

  --m-ctrl-shell-x: 0px;
  --m-ctrl-shell-y: 0px;
  --m-ctrl-shell-scale: 1;

  --m-ctrl-bottom-x: 0px;
  --m-ctrl-bottom-y: 0px;
  --m-ctrl-bottom-scale: 1;

  --m-ctrl-img-x: 0px;
  --m-ctrl-img-y: 0px;
  --m-ctrl-img-scale: 1;

  --m-ctrl-brush-x: 20px;
  --m-ctrl-brush-y: -8px;
  --m-ctrl-brush-scale: 0.80;

  --m-ctrl-copy-x: 0px;
  --m-ctrl-copy-y: 0px;
  --m-ctrl-copy-scale: 1;

  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--txt);
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  width:100vw;
  max-width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
@media (max-width:900px){
  #lxmsSolid{
    min-height:100svh;

    --img-base-x: -18px;
    --img-base-y: -10px;
    --img-base-scale: 1.50;
  }
}

#lxmsSolid, #lxmsSolid *{ box-sizing:border-box !important; }
#lxmsSolid img{ display:block !important; max-width:100% !important; height:auto !important; margin:0 !important; }

/* ===== Background layers ===== */
#lxmsSolid .lxmsSolid-bg{ position:absolute; inset:0; background:var(--bg); z-index:0; }
#lxmsSolid .lxmsSolid-bgNext{
  position:absolute; inset:0;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity 980ms cubic-bezier(.18, .95, .18, 1);
  z-index:0;
}
#lxmsSolid.is-bgFade .lxmsSolid-bgNext{ opacity:1; }

#lxmsSolid::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.05), transparent 52%),
    radial-gradient(circle at 84% 70%, rgba(0,0,0,.28), transparent 58%),
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.22));
}

#lxmsSolid .lxmsSolid-tex{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.10;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(circle at 78% 74%, rgba(0,0,0,.14), transparent 60%);
  mix-blend-mode: overlay;
  z-index:2;
}

/* grain */
#lxmsSolid .lxmsSolid-noise{
  position:absolute; inset:-35%;
  pointer-events:none;
  opacity:.42;
  background-repeat:repeat;
  background-size:180px 180px;
  mix-blend-mode: overlay;
  transform: translateZ(0);
  animation: lxmsNoiseMove 3.4s steps(10) infinite;
  filter: contrast(190%) brightness(112%);
  z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.92'/%3E%3C/svg%3E");
}
#lxmsSolid .lxmsSolid-noise::after{
  content:"";
  position:absolute; inset:0;
  background-repeat:repeat;
  background-size:320px 320px;
  opacity:.55;
  mix-blend-mode: soft-light;
  animation: lxmsNoiseMove2 5s steps(12) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n2)' opacity='.55'/%3E%3C/svg%3E");
}

@keyframes lxmsNoiseMove{
  0%{ background-position: 0 0; transform: translate3d(0,0,0) scale(1); }
  25%{ background-position: 120px -70px; transform: translate3d(10px,-6px,0) scale(1.01); }
  50%{ background-position: -80px 150px; transform: translate3d(-10px,8px,0) scale(1.02); }
  75%{ background-position: 170px 60px; transform: translate3d(8px,6px,0) scale(1.01); }
  100%{ background-position: 0 0; transform: translate3d(0,0,0) scale(1); }
}
@keyframes lxmsNoiseMove2{
  0%{ background-position: 0 0; }
  50%{ background-position: 220px 140px; }
  100%{ background-position: 0 0; }
}

/* kept (not visible) */
#lxmsSolid .lxmsSolid-brush{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; }

/* ===== Layout ===== */
#lxmsSolid .lxmsSolid-wrap{
  max-width: 1600px;
  margin: 0 auto;
  padding: 22px clamp(16px, 3vw, 40px) 14px;
  position:relative;
  z-index:6;

  transform: translate3d(var(--ctrl-wrap-x), var(--ctrl-wrap-y), 0) scale(var(--ctrl-wrap-scale));
  transform-origin: center top;
}

#lxmsSolid .lxmsSolid-title{
  margin:0 0 12px;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;

  transform: translate3d(var(--ctrl-title-x), var(--ctrl-title-y), 0) scale(var(--ctrl-title-scale));
  transform-origin: left top;
}

#lxmsSolid .lxmsSolid-shell{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.08);
  box-shadow: 0 22px 70px rgba(0,0,0,.20);
  overflow:hidden;
  padding-bottom: 86px;

  transform: translate3d(var(--ctrl-shell-x), var(--ctrl-shell-y), 0) scale(var(--ctrl-shell-scale));
  transform-origin: center center;
}

#lxmsSolid .lxmsSolid-track{ position:relative; min-height: 610px; }
#lxmsSolid .lxmsSolid-slide{
  position:absolute; inset:0;
  padding:16px;
  opacity:0;
  pointer-events:none;
}
#lxmsSolid .lxmsSolid-slide.is-active{ opacity:1; pointer-events:auto; }

#lxmsSolid .lxmsSolid-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items:center;
  min-height: 560px;
}

/* ===== Media (product) ===== */
#lxmsSolid .lxmsSolid-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* Brush */
#lxmsSolid .lxmsSolid-brushFx{
  position:absolute;
  left: 52.5%;
  top: 17.5%;
  transform: translate(-50%, -50%) translate(var(--ctrl-brush-x), var(--ctrl-brush-y)) scale(var(--ctrl-brush-scale));
  width: clamp(320px, 38vw, 520px);
  aspect-ratio: 3 / 1;
  z-index:0;
  pointer-events:none;

  background-image:url("https://files.easy-orders.net/1766452552007275588.png");
  background-repeat:no-repeat;
  background-size: contain;
  background-position: left center;

  filter: brightness(0) contrast(140%);
  opacity:.44;

  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 58%,transparent 100%);
          mask-image: linear-gradient(90deg,#000 0%,#000 58%,transparent 100%);
}

#lxmsSolid .lxmsSolid-img{
  position:relative;
  z-index:1;
  width: min(920px, 100%);
  filter: drop-shadow(0 44px 110px rgba(0,0,0,.30));

  transform:
    translate3d(
      calc(var(--img-base-x) + var(--ctrl-img-x)),
      calc(var(--img-base-y) + var(--ctrl-img-y)),
      0
    )
    scale(calc(var(--img-base-scale) * var(--ctrl-img-scale)));

  will-change: transform, opacity;
}

/* ===== Copy card (NO SHADOW) ===== */
#lxmsSolid .lxmsSolid-copy{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  box-shadow: none;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  transform: translate3d(var(--ctrl-copy-x), var(--ctrl-copy-y), 0) scale(var(--ctrl-copy-scale));
  transform-origin: center center;
}

#lxmsSolid .lxmsSolid-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.95;
}

#lxmsSolid .lxmsSolid-bar{
  width:56px;
  height:14px;
  border-radius:999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

#lxmsSolid .lxmsSolid-desc{
  margin:0;
  color: rgba(255,255,255,.92);
  font-size:16.5px;
  line-height:1.85;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: none;
}

#lxmsSolid .lxmsSolid-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  background: rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: none;
}

/* ===== Bottom controls ===== */
#lxmsSolid .lxmsSolid-bottom{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  display:grid;
  grid-template-columns: 64px 1fr 64px;
  align-items:center;
  gap:10px;
  z-index:7;

  transform: translate3d(var(--ctrl-bottom-x), var(--ctrl-bottom-y), 0) scale(var(--ctrl-bottom-scale));
  transform-origin: center bottom;
}

#lxmsSolid .lxmsSolid-arrow{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  color:#fff;

  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  box-shadow: none;
  user-select:none;

  padding-bottom: 1px;
}

/* ===== Tabs ===== */
#lxmsSolid .lxmsSolid-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  overflow:auto;
  padding:6px 2px;
  scrollbar-width:none;
}
#lxmsSolid .lxmsSolid-tabs::-webkit-scrollbar{ display:none; }

#lxmsSolid .lxmsSolid-tab{
  position:relative;
  min-width: 110px;
  height: 46px;
  padding: 0 14px;

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

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.10);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;

  color: var(--c);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);

  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#lxmsSolid .lxmsSolid-tab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 60%);
  opacity:.75;
}

@media (hover:hover){
  #lxmsSolid .lxmsSolid-tab:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.09);
    box-shadow: 0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14);
  }
}

#lxmsSolid .lxmsSolid-tab[aria-selected="true"]{
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.10);
  box-shadow: 0 20px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ===== Animations ===== */
#lxmsSolid .lxmsSolid-slide.is-animIn .lxmsSolid-img{
  animation: lxmsInFromRight 980ms cubic-bezier(.18, .95, .18, 1) both;
}
#lxmsSolid .lxmsSolid-slide.is-animIn .lxmsSolid-copy{
  animation: lxmsCopyIn 980ms cubic-bezier(.18, .95, .18, 1) both;
}

@keyframes lxmsInFromRight{
  from{
    opacity:0;
    transform:
      translate3d(
        calc(var(--img-from-x) + var(--ctrl-img-x) + var(--m-ctrl-img-x)),
        calc(var(--img-base-y) + var(--ctrl-img-y) + var(--m-ctrl-img-y)),
        0
      )
      scale(calc(var(--img-base-scale) * var(--ctrl-img-scale) * var(--m-ctrl-img-scale)));
  }
  to{
    opacity:1;
    transform:
      translate3d(
        calc(var(--img-base-x) + var(--ctrl-img-x) + var(--m-ctrl-img-x)),
        calc(var(--img-base-y) + var(--ctrl-img-y) + var(--m-ctrl-img-y)),
        0
      )
      scale(calc(var(--img-base-scale) * var(--ctrl-img-scale) * var(--m-ctrl-img-scale)));
  }
}
@keyframes lxmsCopyIn{
  from{
    opacity:0;
    transform:
      translate3d(
        calc(70px + var(--ctrl-copy-x) + var(--m-ctrl-copy-x)),
        calc(var(--ctrl-copy-y) + var(--m-ctrl-copy-y)),
        0
      )
      scale(calc(var(--ctrl-copy-scale) * var(--m-ctrl-copy-scale)));
  }
  to{
    opacity:1;
    transform:
      translate3d(
        calc(var(--ctrl-copy-x) + var(--m-ctrl-copy-x)),
        calc(var(--ctrl-copy-y) + var(--m-ctrl-copy-y)),
        0
      )
      scale(calc(var(--ctrl-copy-scale) * var(--m-ctrl-copy-scale)));
  }
}

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

  /* ✅ wrap (padding + mobile transforms) */
  #lxmsSolid .lxmsSolid-wrap{
    padding: 16px 12px 12px;
    transform:
      translate3d(
        calc(var(--ctrl-wrap-x) + var(--m-ctrl-wrap-x)),
        calc(var(--ctrl-wrap-y) + var(--m-ctrl-wrap-y)),
        0
      )
      scale(calc(var(--ctrl-wrap-scale) * var(--m-ctrl-wrap-scale)));
  }

  /* ✅ title (mobile transforms) */
  #lxmsSolid .lxmsSolid-title{
    transform:
      translate3d(
        calc(var(--ctrl-title-x) + var(--m-ctrl-title-x)),
        calc(var(--ctrl-title-y) + var(--m-ctrl-title-y)),
        0
      )
      scale(calc(var(--ctrl-title-scale) * var(--m-ctrl-title-scale)));
  }

  /* ✅ shell (mobile transforms) */
  #lxmsSolid .lxmsSolid-shell{
    padding-bottom: 14px;
    border-radius: 18px;
    transform:
      translate3d(
        calc(var(--ctrl-shell-x) + var(--m-ctrl-shell-x)),
        calc(var(--ctrl-shell-y) + var(--m-ctrl-shell-y)),
        0
      )
      scale(calc(var(--ctrl-shell-scale) * var(--m-ctrl-shell-scale)));
  }

  #lxmsSolid .lxmsSolid-track{ min-height: 0; }
  #lxmsSolid .lxmsSolid-slide{
    position: relative;
    inset: auto;
    padding: 12px;
  }
  #lxmsSolid .lxmsSolid-slide{ display:none; opacity:1; pointer-events:auto; }
  #lxmsSolid .lxmsSolid-slide.is-active{ display:block; }

  #lxmsSolid .lxmsSolid-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    align-items: start;
  }

  /* ✅ product image (mobile controls) */
  #lxmsSolid .lxmsSolid-img{
    width: min(880px, 100%);
    transform:
      translate3d(
        calc(var(--img-base-x) + var(--ctrl-img-x) + var(--m-ctrl-img-x)),
        calc(var(--img-base-y) + var(--ctrl-img-y) + var(--m-ctrl-img-y)),
        0
      )
      scale(calc(var(--img-base-scale) * var(--ctrl-img-scale) * var(--m-ctrl-img-scale)));
  }

  /* ✅ brush (mobile controls) */
  #lxmsSolid .lxmsSolid-brushFx{
    left: 51%;
    top: 23%;
    width: clamp(320px, 78vw, 620px);
    background-position: left center;
    opacity:.40;

    transform:
      translate(-50%, -50%)
      translate(
        calc(var(--ctrl-brush-x) + var(--m-ctrl-brush-x)),
        calc(var(--ctrl-brush-y) + var(--m-ctrl-brush-y))
      )
      scale(calc(var(--ctrl-brush-scale) * var(--m-ctrl-brush-scale)));
  }

  /* ✅ copy card (mobile controls) */
  #lxmsSolid .lxmsSolid-copy{
    padding: 12px 12px;
    gap: 10px;
    border-radius: 16px;
    margin-top: 6px;

    transform:
      translate3d(
        calc(var(--ctrl-copy-x) + var(--m-ctrl-copy-x)),
        calc(var(--ctrl-copy-y) + var(--m-ctrl-copy-y)),
        0
      )
      scale(calc(var(--ctrl-copy-scale) * var(--m-ctrl-copy-scale)));
  }

  #lxmsSolid .lxmsSolid-pill{
    font-size: 11.5px;
    letter-spacing: .14em;
  }
  #lxmsSolid .lxmsSolid-desc{
    font-size: 14px;
    line-height: 1.55;
    padding: 10px 10px;
    border-radius: 14px;
  }
  #lxmsSolid .lxmsSolid-btn{
    padding: 11px 18px;
    font-size: 12px;
  }

  #lxmsSolid .lxmsSolid-arrow{ display:none !important; }

  /* ✅ bottom (mobile controls) */
  #lxmsSolid .lxmsSolid-bottom{
    position: relative;
    left:auto; right:auto; bottom:auto;
    display:block;
    margin: 10px 12px 12px;

    transform:
      translate3d(
        calc(var(--ctrl-bottom-x) + var(--m-ctrl-bottom-x)),
        calc(var(--ctrl-bottom-y) + var(--m-ctrl-bottom-y)),
        0
      )
      scale(calc(var(--ctrl-bottom-scale) * var(--m-ctrl-bottom-scale)));
  }

  #lxmsSolid .lxmsSolid-tabs{
    gap: 8px;
    padding: 10px 2px 2px;
  }
  #lxmsSolid .lxmsSolid-tab{
    flex: 1 1 calc(25% - 8px);
    min-width: 0;
    height: 46px;
    border-radius: 16px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: .05em;
  }
}

@media (prefers-reduced-motion: reduce){
  #lxmsSolid .lxmsSolid-noise{ animation:none; }
  #lxmsSolid .lxmsSolid-noise::after{ animation:none; }
  #lxmsSolid .lxmsSolid-bgNext{ transition:none; }
  #lxmsSolid .lxmsSolid-slide.is-animIn .lxmsSolid-img,
  #lxmsSolid .lxmsSolid-slide.is-animIn .lxmsSolid-copy{ animation:none; }
}