/* ============================================================
   Lashly — Salla product page landing  (CUSTOM CSS) — full replica
   Paste into: Salla → تصميم المتجر → CSS مخصص
   Everything scoped under #lsh-root so it won't touch the theme.
   ============================================================ */
@font-face{font-family:"Lashly Arabic";src:url("https://serum.lashly-sa.com/assets/lashly-arabic-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Lashly Arabic";src:url("https://serum.lashly-sa.com/assets/lashly-arabic-700.ttf") format("truetype");font-weight:700;font-display:swap}

#lsh-root{font-family:"Lashly Arabic","Segoe UI",sans-serif;direction:rtl;color:#1a1a1a;line-height:1.6;display:flex;justify-content:center;padding:14px 0 34px;-webkit-text-size-adjust:100%}
#lsh-root *{box-sizing:border-box}
#lsh-root .lsh-card{width:100%;max-width:430px;background:#ffffff;border-radius:22px;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.28)}
#lsh-root img{display:block;max-width:100%;border:0}
#lsh-root h1,#lsh-root h2,#lsh-root h3,#lsh-root p{margin:0;padding:0}
#lsh-root a{text-decoration:none;color:#e1628c}
#lsh-root a.lsh-cta:hover{background:#cf4f7b !important}

/* FAQ */
#lsh-root details>summary{list-style:none;cursor:pointer}
#lsh-root details>summary::-webkit-details-marker{display:none}
#lsh-root details[open] .plusmark{transform:rotate(45deg)}

/* before / after slider */
#lsh-root .ba-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;container-type:inline-size;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:#e7dcde}
#lsh-root .ba-wrap img{display:block;pointer-events:none;-webkit-user-drag:none}
#lsh-root .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#lsh-root .ba-before{position:absolute;top:0;bottom:0;left:0;width:50%;height:100%;overflow:hidden;will-change:width}
#lsh-root .ba-before img{position:absolute;top:0;left:0;width:100cqw;max-width:none;height:100%;object-fit:cover}
#lsh-root .ba-label{position:absolute;top:12px;font-size:12px;font-weight:700;letter-spacing:1px;color:#fff;background:rgba(26,26,26,.55);padding:4px 11px;border-radius:999px;pointer-events:none}
#lsh-root .ba-label-before{left:12px}
#lsh-root .ba-label-after{right:12px}
#lsh-root .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.35);transform:translateX(-1px);pointer-events:none;will-change:left}
#lsh-root .ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#lsh-root .ba-handle::before{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:16px;font-weight:700;color:#1a1a1a}