/* LS Liron Sarasar — shared styles. Black, white and a soft rose gold. */
:root{
  --bg:#fbf8f4; --bg-2:#f3eee8; --bg-3:#ece5dc; --surface:#ffffff;
  --ink:#141211; --ink-2:#5f5853; --ink-3:#8a827c;
  --rose:#8f6150; --rose-2:#b88a74; --rose-soft:#efe1d8;
  --line:#e6dfd7; --line-2:#d4cbc1;
  --gold-grad:linear-gradient(120deg,#8f6150 0%,#d9b3a0 38%,#a8735f 62%,#e6c6b5 100%);
  --radius:10px; --r-sm:8px; --r-xs:4px;
  --scale:1; --lh:1.75; --ls:0;
  --font:"Assistant",system-ui,sans-serif; --latin:"Italiana","Assistant",serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --focus:#1a56db;
  color-scheme:light;
}

/* accessibility modes */
html.a11y-contrast{ --bg:#fff; --bg-2:#fff; --bg-3:#fff; --surface:#fff; --ink:#000; --ink-2:#000; --ink-3:#000; --rose:#000; --rose-2:#000; --rose-soft:#fff; --line:#000; --line-2:#000; --gold-grad:linear-gradient(#000,#000); --focus:#0000ee; }
html.a11y-contrast *{ box-shadow:none !important; text-shadow:none !important; }
html.a11y-contrast .card, html.a11y-contrast .btn, html.a11y-contrast .chip, html.a11y-contrast input, html.a11y-contrast textarea, html.a11y-contrast .tile span{ border:2px solid #000 !important; }
html.a11y-contrast .dark{ background:#000 !important; color:#fff !important; }
html.a11y-contrast .mark-bg, html.a11y-contrast body::after{ display:none; }
html.a11y-links a{ text-decoration:underline !important; text-decoration-thickness:3px !important; background:#fff59d !important; color:#000 !important; }
html.a11y-readable{ --font:Arial,"Segoe UI",sans-serif; --latin:Arial,sans-serif; }
html.a11y-spacing{ --lh:2.1; --ls:.04em; }
html.a11y-spacing p, html.a11y-spacing li{ word-spacing:.16em; }
html.a11y-gray{ filter:grayscale(1); }
html.a11y-cursor, html.a11y-cursor *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5L9.5 21z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* base */
*{ box-sizing:border-box; }
html{ font-size:calc(100% * var(--scale)); scroll-behavior:smooth; scroll-padding-top:100px; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:1.0625rem; font-weight:400; line-height:var(--lh); letter-spacing:var(--ls); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--ink); color:var(--bg); }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:var(--font); font-weight:200; line-height:1.15; margin:0 0 .45em; letter-spacing:-.005em; text-wrap:balance; }
h1{ font-size:clamp(2.6rem,5.4vw,4.6rem); }
h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); }
h3{ font-size:1.15rem; font-weight:500; letter-spacing:0; }
p{ margin:0 0 1em; text-wrap:pretty; }
a{ color:inherit; }
strong{ font-weight:600; }
.wrap{ width:min(1240px,100% - 32px); margin-inline:auto; }
.narrow{ width:min(760px,100% - 32px); margin-inline:auto; }
.sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs); }
.skip{ position:fixed; top:-100px; right:16px; z-index:600; background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:var(--r-sm); font-weight:700; text-decoration:none; }
.skip:focus{ top:12px; }
.icon{ width:1.15em; height:1.15em; flex:none; }
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* latin label like THE ART OF PRECISION */
.latin{ font-family:var(--latin); text-transform:uppercase; letter-spacing:.34em; font-size:.8rem; color:#7a5547; direction:ltr; unicode-bidi:isolate; }
.eyebrow{ display:block; margin:0 0 18px; }
p.latin{ text-align:right; }
.head p.latin, .center p.latin, .page-hero p.latin, .service p.latin{ text-align:center; }
.display{ font-family:var(--latin); font-weight:400; text-transform:uppercase; letter-spacing:.04em; line-height:.95; direction:ltr; unicode-bidi:isolate; }
.gold{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.a11y-contrast .gold{ color:#000; background:none; }

/* LS mark — the brand monogram, used softly here and there */
.mark{ font-family:var(--latin); letter-spacing:-.04em; line-height:.8; direction:ltr; unicode-bidi:isolate; }
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; padding:10px 0; }
.divider::before, .divider::after{ content:""; height:1px; width:min(90px,18vw); background:var(--line-2); }
.divider span{ font-size:1.5rem; color:var(--rose-2); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:.7em 2em; border-radius:var(--r-xs); border:1px solid transparent; font:inherit; font-weight:500; font-size:.95rem; letter-spacing:.06em; cursor:pointer; text-decoration:none; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(-5px); }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ background:#3a3431; }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--bg); }
.btn-light{ background:var(--bg); color:var(--ink); }
.btn-light:hover{ background:var(--rose-soft); }
.btn-sm{ min-height:44px; padding:.45em 1.1em; font-size:.95rem; }
.btn-block{ width:100%; }
.link{ display:inline-flex; align-items:center; gap:.5em; font-weight:500; letter-spacing:.04em; text-decoration:none; padding-bottom:5px; border-bottom:1px solid currentColor; min-height:44px; }
.link:hover .arr{ transform:translateX(-5px); }
.link .arr{ transition:transform .35s var(--ease); }

/* header */
header.site{ position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s; }
header.site.scrolled{ border-color:var(--line); }
.bar{ display:flex; align-items:center; gap:24px; min-height:84px; }
.logo img{ height:44px; width:auto; }
nav.main{ margin-inline:auto; }
nav.main ul{ display:flex; gap:10px; list-style:none; margin:0; padding:0; }
nav.main a{ display:block; padding:.6em .7em; text-decoration:none; font-size:.92rem; font-weight:400; letter-spacing:.03em; position:relative; }
.hdr-link{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:.92rem; letter-spacing:.03em; text-decoration:none; border-bottom:1px solid var(--ink); }
.hdr-link:hover{ color:var(--rose); border-color:var(--rose); }
nav.main a::after{ content:""; position:absolute; right:.75em; left:.75em; bottom:.4em; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
nav.main a:hover::after, nav.main a[aria-current="page"]::after{ transform:scaleX(1); }
.tools{ display:flex; align-items:center; gap:8px; }
.tbtn{ position:relative; width:44px; height:44px; border:0; background:transparent; color:var(--ink); display:inline-grid; place-items:center; cursor:pointer; text-decoration:none; }
.tbtn:hover{ color:var(--rose); }
.tbtn .icon{ width:1.35em; height:1.35em; }
.badge{ position:absolute; top:2px; left:0; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ink); color:var(--bg); font-size:.68rem; font-weight:600; display:grid; place-items:center; }
.badge[hidden]{ display:none; }
.menu-btn{ display:none; }
@media (max-width:1020px){
  .menu-btn{ display:inline-grid; }
  .hdr-cta{ display:none; }
  .bar{ position:relative; justify-content:space-between; }
  .tools{ display:contents; }
  .menu-btn{ order:-1; }
  .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  nav.main{ position:fixed; inset:var(--hh,78px) 0 auto 0; background:var(--bg); border-bottom:1px solid var(--line); padding:6px 16px 20px; display:none; max-height:calc(100dvh - 78px); overflow:auto; }
  nav.main.open{ display:block; }
  nav.main ul{ flex-direction:column; }
  nav.main a{ padding:1em .2em; font-size:1.2rem; border-bottom:1px solid var(--line); }
  nav.main a::after{ display:none; }
  .tools{ margin-inline-start:auto; }
}

/* sections */
section.block{ padding:130px 0; position:relative; }
main{ overflow-x:clip; }
@media (max-width:600px){ .btn{ padding:.7em 1.1em; } }
/* section titles: centred, quiet, with room to breathe */
.head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.head p{ color:var(--ink-2); margin:14px auto 0; max-width:52ch; }
.head h2{ margin:0; }
.center{ text-align:center; }
@media (max-width:760px){ section.block{ padding:84px 0; } .head{ margin-bottom:44px; } }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
html.a11y-nomotion .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* page hero (inner pages) */
.page-hero{ padding:90px 0 60px; text-align:center; position:relative; overflow:hidden; }
.page-hero h1{ font-size:clamp(2.4rem,5vw,4.2rem); }
.page-hero p{ color:var(--ink-2); max-width:56ch; margin-inline:auto; }

/* product cards */
/* product cards: image, name, price. Nothing else competes with the product. */
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:64px 24px; list-style:none; padding:0; margin:0; }
.card{ display:flex; flex-direction:column; text-align:center; }
.pic{ position:relative; display:block; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-xs); background:var(--bg-2); border:0; padding:0; cursor:pointer; }
.pic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.card:hover .pic img{ transform:scale(1.04); }
.pic .note{ position:absolute; bottom:10px; left:10px; background:color-mix(in srgb,var(--bg) 92%,transparent); color:var(--ink-2); padding:.15em .6em; border-radius:var(--r-xs); font-size:.72rem; }
.cbody{ padding:22px 6px 0; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.cbody .latin{ font-size:.7rem; letter-spacing:.3em; color:var(--ink-3); }
.cbody h3{ font-size:1.02rem; font-weight:400; margin:2px 0 0; line-height:1.5; max-width:30ch; }
.cbody .desc{ color:var(--ink-2); font-size:.95rem; margin:6px 0 0; max-width:34ch; }
.cfoot{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:auto; padding-top:14px; }
.price{ font-family:var(--font); font-weight:300; font-size:1.15rem; letter-spacing:.04em; line-height:1; direction:ltr; }
.price.now{ color:var(--rose); font-weight:400; }
s.was{ color:var(--ink-3); font-weight:300; font-size:.92rem; text-decoration-thickness:1px; margin-inline-end:6px; }
.coupon{ display:flex; align-items:flex-end; gap:14px; }
.coupon input{ flex:1; min-height:44px; padding:.4em 0; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent; color:var(--ink); font:inherit; font-size:.95rem; letter-spacing:.06em; }
.coupon input:focus{ border-bottom-color:var(--ink); }
.coupon input[aria-invalid="true"]{ border-bottom-color:#b3261e; }
.coupon-msg{ margin:-6px 0 0; color:#b3261e; }
.coupon-on{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.95rem; }
.coupon-on strong{ letter-spacing:.06em; font-weight:600; }
.ml{ color:var(--ink-3); font-size:.82rem; }
.add{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; border:0; border-bottom:1px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-size:.88rem; letter-spacing:.08em; cursor:pointer; transition:color .3s, border-color .3s; }
.add:hover{ color:var(--rose); border-color:var(--rose); }
.add.done{ color:var(--rose); border-color:transparent; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center; gap:64px 40px; } }
@media (max-width:600px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:46px 14px; }
  .cbody{ padding-top:16px; }
  .cbody h3{ font-size:.95rem; }
  .cbody .latin{ font-size:.62rem; letter-spacing:.2em; }
  .price{ font-size:1.15rem; }
}

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:center; margin-bottom:56px; }
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; }
.chip{ min-height:44px; padding:0 2px; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--ink-2); font:inherit; font-size:.95rem; letter-spacing:.03em; cursor:pointer; transition:color .3s, border-color .3s; }
.chip:hover{ color:var(--ink); }
.chip[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--ink); }
.search{ position:relative; flex:0 1 260px; }
.search input{ width:100%; min-height:44px; padding:.4em 0 .4em 2em; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent; color:var(--ink); font:inherit; font-size:.95rem; }
.search input:focus{ border-bottom-color:var(--ink); }
.search svg{ position:absolute; left:2px; top:50%; translate:0 -50%; color:var(--ink-3); }
.empty{ grid-column:1/-1; padding:48px; text-align:center; border:1px dashed var(--line-2); border-radius:var(--radius); }

/* forms */
label{ display:block; font-weight:600; margin:0 0 6px; font-size:.98rem; }
input[type=text], input[type=tel], textarea{ width:100%; min-height:52px; padding:.7em 1em; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; }
input:focus, textarea:focus{ border-color:var(--ink); }
textarea{ min-height:120px; resize:vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:#b3261e; }
.field{ margin-top:16px; }
.hint{ color:var(--ink-2); font-size:.92rem; }
.err{ color:#b3261e; font-weight:600; font-size:.95rem; margin:6px 0 0; }

/* dark band */
.dark{ background:var(--ink); color:var(--bg); }
.dark .latin{ color:var(--rose-2); }
.dark p{ color:#cfc7c0; }
.dark .btn-line{ color:var(--bg); border-color:var(--bg); }
.dark .btn-line:hover{ background:var(--bg); color:var(--ink); }

/* footer */
footer.site{ background:var(--ink); color:#bdb5ae; padding:84px 0 110px; position:relative; overflow:hidden; font-size:.95rem; }
footer.site .fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; position:relative; z-index:1; }
footer.site h3{ font-family:var(--latin); text-transform:uppercase; letter-spacing:.3em; color:var(--bg); font-size:.74rem; font-weight:400; margin:0 0 18px; direction:ltr; text-align:right; }
footer.site ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
footer.site a, footer.site .linklike{ color:inherit; text-decoration:none; background:none; border:0; font:inherit; padding:0; cursor:pointer; text-align:right; }
footer.site a:hover, footer.site .linklike:hover{ color:var(--bg); text-decoration:underline; }
footer.site .flogo{ height:54px; width:auto; filter:brightness(0) invert(1); opacity:.92; margin-bottom:16px; }
footer.site .legal{ margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.9rem; position:relative; z-index:1; }
@media (max-width:820px){ footer.site .fgrid{ grid-template-columns:1fr 1fr; } }

/* dialogs */
dialog{ border:0; padding:0; background:var(--surface); color:var(--ink); border-radius:var(--radius); width:min(980px,100% - 24px); max-height:calc(100dvh - 24px); box-shadow:0 50px 100px -30px rgba(0,0,0,.55); }
dialog::backdrop{ background:rgba(20,18,17,.55); backdrop-filter:blur(4px); }
dialog[open]{ animation:pop .45s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(20px); } }
.x{ width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.x:hover{ border-color:var(--ink); }
.dlg-close{ position:absolute; top:14px; left:14px; z-index:3; }
.pd{ display:grid; grid-template-columns:1fr 1.1fr; }
.pd-img{ background:var(--bg-2); }
.pd-img img{ width:100%; height:100%; object-fit:cover; max-height:86dvh; }
.pd-body{ padding:42px 36px; overflow:auto; max-height:calc(100dvh - 24px); }
.pd-body h2{ font-size:1.8rem; font-weight:400; margin:.35em 0 .4em; }
.pd-price{ display:flex; align-items:baseline; gap:14px; }
.pd-price .price{ font-size:2rem; }
.pd-buy{ display:flex; gap:10px; margin:20px 0 8px; flex-wrap:wrap; }
.pd-buy .btn{ flex:1; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-top:26px; overflow-x:auto; overflow-y:hidden; }
.tabs button{ background:none; border:0; border-bottom:2px solid transparent; padding:12px; font:inherit; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap; margin-bottom:-1px; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-color:var(--ink); }
.tabpanel{ padding:18px 0 0; }
.tabpanel ul{ padding-inline-start:1.1em; margin:0; }
.warn{ background:var(--bg); border-inline-start:3px solid var(--rose-2); padding:12px 16px; margin-top:16px; font-size:.98rem; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); }
.qty button{ width:44px; height:52px; border:0; background:none; color:var(--ink); font-size:1.3rem; cursor:pointer; }
.qty output{ min-width:2ch; text-align:center; font-weight:700; }
.assure{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:12px; color:var(--ink-2); font-size:.92rem; }
.assure span{ display:inline-flex; align-items:center; gap:6px; }
.rm{ background:none; border:0; color:var(--ink-2); text-decoration:underline; cursor:pointer; font:inherit; font-size:.9rem; min-height:36px; padding:0; }
@media (max-width:760px){ .pd{ grid-template-columns:1fr; } .pd-img img{ max-height:44dvh; } .pd-body{ max-height:none; padding:26px 20px 30px; } dialog{ overflow:auto; } }

dialog.drawer{ margin:0; inset:0 auto 0 0; height:100dvh; max-height:100dvh; width:min(460px,100%); border-radius:0; }
dialog.drawer[open]{ animation:slide .45s var(--ease); display:flex; flex-direction:column; }
@keyframes slide{ from{ transform:translateX(-100%); } }
.dhead{ padding:22px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dhead h2{ font-size:1.5rem; font-weight:400; margin:0; }
.dbody{ padding:8px 24px; overflow:auto; flex:1; }
.dfoot{ padding:20px 24px 24px; border-top:1px solid var(--line); display:grid; gap:12px; background:var(--bg); }
.line{ display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.line img{ width:72px; height:90px; object-fit:cover; border-radius:var(--r-sm); }
.line .latin{ color:var(--ink); font-size:.75rem; letter-spacing:.14em; }
.line .qty button{ width:36px; height:38px; }
.sum{ display:flex; justify-content:space-between; }
.sum.total{ font-size:1.2rem; font-weight:700; padding-top:10px; border-top:1px solid var(--line); }
.bar-free{ height:3px; background:var(--line); overflow:hidden; }
.bar-free span{ display:block; height:100%; background:var(--ink); transition:width .6s var(--ease); }
.seg{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; }
.seg label{ margin:0; position:relative; }
.seg input{ position:absolute; opacity:0; }
.seg span{ display:block; text-align:center; padding:12px 8px; cursor:pointer; font-weight:600; font-size:.95rem; }
.seg label + label span{ border-inline-start:1px solid var(--line-2); }
.seg input:checked + span{ background:var(--ink); color:var(--bg); }
.seg input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:-3px; }
.empty-cart{ text-align:center; padding:60px 10px; }

.a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.a11y-grid button{ min-height:80px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; }
.a11y-grid button:hover{ border-color:var(--ink); }
.a11y-grid button[aria-pressed="true"]{ border:2px solid var(--ink); background:var(--bg-3); }
.a11y-grid button[aria-pressed="true"]::after{ content:"פעיל"; font-size:.78rem; font-weight:700; }
.a11y-grid svg{ width:24px; height:24px; }
.fontrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); margin-bottom:8px; }

.fab-a11y{ position:fixed; bottom:20px; right:20px; z-index:90; width:54px; height:54px; border-radius:var(--radius); display:grid; place-items:center; border:0; cursor:pointer; background:var(--ink); color:var(--bg); outline:1px solid rgba(255,255,255,.35); outline-offset:-5px; box-shadow:0 10px 24px -12px rgba(0,0,0,.5); }
.toast{ position:fixed; bottom:92px; left:50%; translate:-50% 0; z-index:300; display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); padding:14px 20px; border-radius:var(--r-sm); font-weight:600; opacity:0; pointer-events:none; transition:opacity .35s, transform .35s var(--ease); transform:translateY(10px); }
.toast.show{ opacity:1; transform:none; }

/* intro curtain with the logo, first visit of a session only */
.intro{ position:fixed; inset:0; z-index:700; background:var(--bg); display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s; }
.intro.out{ opacity:0; visibility:hidden; }
.intro img{ width:min(300px,60vw); animation:introIn 1.1s var(--ease) both; }
.intro i{ display:block; height:1px; background:var(--ink); width:120px; margin:22px auto 0; transform-origin:right; animation:introLine 1s .3s var(--ease) both; }
@keyframes introIn{ from{ opacity:0; transform:translateY(12px); } }
@keyframes introLine{ from{ transform:scaleX(0); } }