/* noyateam — shared styles.
   Every length is written in design pixels (1920 wide desktop, 430 wide mobile);
   the build turns "Npx" into calc(var(--k)*N) so the page scales like the film.
   "PX" in capitals stays a real pixel. */

:root {
  --ku: calc(var(--k)*1); --kf: calc(var(--k)*1); --k: var(--ku);
  --cream: #F8F0E5; --cream-2: #F2E7D8; --paper: #FCF8F2; --wine: #5A0F2E; --wine-2: #3E0A20; --wine-3: #7A1D43;
  --blue: #AFC7E1; --gray: #72757D; --ink: #4A1A2C; --soft: #8A6B74;
  --gold: #C7A15A; --gold-hi: #F1DDA4; --gold-lo: #8C6A2E;
  --line: rgba(90, 15, 46, .12);
  --shadow: 0 calc(var(--k)*40) calc(var(--k)*80) calc(var(--k)*-40) rgba(62, 10, 32, .45);
  --eo: cubic-bezier(.25, 1, .5, 1);
  --eio: cubic-bezier(.65, 0, .35, 1);
  --sys: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
.F { --k: var(--kf); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: rgba(90, 15, 46, .35) transparent; }
body { font-family: InterL, Doran, var(--sys); font-weight: 400; font-size: calc(var(--k)*22); line-height: 1.6; color: var(--ink); background: var(--cream); direction: rtl; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
/* static hosting (no server): parts that need the server are hidden, see deploy/static */
html[data-static] .s-live { display: none !important; }
.mul { mix-blend-mode: multiply; }
.wrap { width: calc(var(--k)*1300); margin: 0 auto; position: relative; }
.b { font-weight: 800; }
@media (min-width: 1024px) { .m-only { display: none !important; } }

/* ---------- text pictures (made by the build) ---------- */
.T { font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; word-spacing: 0 !important; }
.Ti { display: inline-block; vertical-align: top; }
.tx { display: inline-block; vertical-align: top; position: relative; flex: none; }
.tx::before { content: ''; position: absolute; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-repeat: no-repeat; pointer-events: none; }
.sw { display: inline-block; vertical-align: top; position: relative; }
.sw .w { position: absolute; }
.w { display: inline-block; }
.sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; font-size: 16px !important; line-height: 1 !important; }
.gold-t .tx::before, .gold-t.tx::before { background-color: transparent; background-image: linear-gradient(100deg, var(--gold-lo), var(--gold) 25%, var(--gold-hi) 45%, var(--gold) 60%, var(--gold-lo) 85%); background-size: 100% 100%; }
.k { display: inline-block; vertical-align: top; position: relative; flex: none; }
.k::before { content: ''; position: absolute; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-repeat: no-repeat; }
.kl { display: inline-flex; direction: ltr; vertical-align: top; }
.kr { display: inline-flex; direction: rtl; vertical-align: top; align-items: flex-start; }
.sys { font-family: var(--sys); }

/* ---------- type ---------- */
.eyebrow { font-size: calc(var(--k)*22); color: var(--gold-lo); display: flex; align-items: center; gap: calc(var(--k)*14); }
.eyebrow::before { content: ''; width: calc(var(--k)*44); height: calc(var(--k)*1.5); background: var(--gold); }
.h2 { font-size: calc(var(--k)*92); line-height: 1.32; color: var(--wine); font-weight: 800; }
.lead { font-size: calc(var(--k)*30); line-height: 1.85; color: var(--soft); }

/* ---------- reveal on scroll (JS adds .in once) ---------- */
.js [data-r] { transition: opacity 1.1s var(--eo), transform 1.1s var(--eo), filter 1.1s var(--eo), clip-path 1.3s var(--eo); transition-delay: var(--d, 0s); }
.js [data-r='up']:not(.in) { opacity: 0; transform: translateY(calc(var(--k)*70)); }
.js [data-r='fade']:not(.in) { opacity: 0; }
.js [data-r='blur']:not(.in) { opacity: 0; filter: blur(calc(var(--k)*18)); transform: scale(1.06); }
.js [data-r='scale']:not(.in) { opacity: 0; transform: scale(.86) rotate(-4deg); }
.js [data-r='side']:not(.in) { opacity: 0; transform: translateX(calc(var(--k)*-80)); }
.js [data-r='mask']:not(.in) { clip-path: inset(100% 0 0 0); }
.js .S .w { transition: opacity .95s var(--eo), transform .95s var(--eo), filter .95s var(--eo); }
.js .S:not(.in) .w { opacity: 0; transform: translateY(calc(var(--k)*40)); filter: blur(calc(var(--k)*8)); }
.d1 { --d: .1s; } .d2 { --d: .2s; } .d3 { --d: .3s; } .d4 { --d: .4s; } .d5 { --d: .5s; } .d6 { --d: .6s; } .d7 { --d: .7s; } .d8 { --d: .8s; } .d9 { --d: .9s; }
.S .w:nth-child(2) { transition-delay: calc(var(--d, 0s) + .06s); } .S .w:nth-child(3) { transition-delay: calc(var(--d, 0s) + .12s); }
.S .w:nth-child(4) { transition-delay: calc(var(--d, 0s) + .18s); } .S .w:nth-child(5) { transition-delay: calc(var(--d, 0s) + .24s); }
.S .w:nth-child(6) { transition-delay: calc(var(--d, 0s) + .3s); } .S .w:nth-child(7) { transition-delay: calc(var(--d, 0s) + .36s); }
.S .w:nth-child(8) { transition-delay: calc(var(--d, 0s) + .42s); } .S .w:nth-child(9) { transition-delay: calc(var(--d, 0s) + .48s); }
.S .w:nth-child(10) { transition-delay: calc(var(--d, 0s) + .54s); } .S .w:nth-child(11) { transition-delay: calc(var(--d, 0s) + .6s); }
.S .w:nth-child(12) { transition-delay: calc(var(--d, 0s) + .66s); } .S .w:nth-child(n+13) { transition-delay: calc(var(--d, 0s) + .72s); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--k)*12); white-space: nowrap; font-size: calc(var(--k)*22); padding: calc(var(--k)*16) calc(var(--k)*34); border-radius: calc(var(--k)*999); background: var(--wine); color: var(--cream); box-shadow: 0 calc(var(--k)*16) calc(var(--k)*30) calc(var(--k)*-16) rgba(62, 10, 32, .6), inset 0 0 0 calc(var(--k)*1) rgba(241, 221, 164, .3); transition: transform .35s var(--eo), box-shadow .35s var(--eo), background .3s; cursor: pointer; }
.btn:hover { transform: translateY(calc(var(--k)*-3)); box-shadow: 0 calc(var(--k)*22) calc(var(--k)*34) calc(var(--k)*-16) rgba(62, 10, 32, .7), inset 0 0 0 calc(var(--k)*1) rgba(241, 221, 164, .45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost { background: transparent; color: var(--wine); box-shadow: inset 0 0 0 calc(var(--k)*1.5) var(--wine); }
.btn.ghost:hover { background: rgba(90, 15, 46, .06); }
.btn.gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); color: var(--wine-2); }
.btn.wide { width: 100%; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.ripple { position: fixed; z-index: 999; width: calc(var(--k)*60); height: calc(var(--k)*60); margin: calc(var(--k)*-30) 0 0 calc(var(--k)*-30); border-radius: 50%; border: calc(var(--k)*2) solid rgba(90, 15, 46, .55); background: rgba(199, 161, 90, .18); pointer-events: none; animation: ripple .7s var(--eo) forwards; }
@keyframes ripple { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- header ---------- */
#hdr { position: fixed; z-index: 500; top: 0; left: 0; right: 0; height: calc(var(--k)*96); padding: 0 calc(var(--k)*64); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
#hdr .bg { position: absolute; inset: 0; background: rgba(248, 240, 229, .84); -webkit-backdrop-filter: blur(calc(var(--k)*16)); backdrop-filter: blur(calc(var(--k)*16)); box-shadow: 0 calc(var(--k)*1) 0 var(--line); opacity: .55; transition: opacity .5s; }
#hdr.solid .bg { opacity: 1; }
#hdr > * { position: relative; }
.hdr-r { display: flex; align-items: center; gap: calc(var(--k)*30); justify-self: start; }
.burger { width: calc(var(--k)*54); height: calc(var(--k)*54); border-radius: 50%; display: grid; place-items: center; transition: background .3s; }
.burger:hover { background: rgba(90, 15, 46, .08); }
.burger span { display: grid; gap: calc(var(--k)*7); width: calc(var(--k)*28); }
.burger i { display: block; height: calc(var(--k)*2.5); border-radius: calc(var(--k)*2); background: var(--wine); transition: width .4s var(--eo); }
.burger i:nth-child(2) { width: 68%; }
.burger:hover i:nth-child(2) { width: 100%; }
.brand { display: block; width: calc(var(--k)*76); height: calc(var(--k)*70); }
.brand img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--eo); }
.brand:hover img { transform: rotate(-4deg) scale(1.05); }
.nav { display: flex; gap: calc(var(--k)*38); font-size: calc(var(--k)*21); font-weight: 800; color: var(--ink); }
.nav a { position: relative; display: block; }
.nav a::after { content: ''; position: absolute; right: 0; bottom: calc(var(--k)*-6); height: calc(var(--k)*2); width: 0; background: var(--gold); transition: width .4s var(--eo); }
.nav a:hover::after, .nav a.on::after { width: 100%; }
.hdr-l { justify-self: end; display: flex; align-items: center; gap: calc(var(--k)*18); }
.basket { position: relative; width: calc(var(--k)*64); height: calc(var(--k)*64); display: grid; place-items: center; border-radius: 50%; transition: background .3s; }
.basket:hover { background: rgba(90, 15, 46, .07); }
.basket img { width: calc(var(--k)*58); transition: transform .5s var(--eo); }
.basket.bump img { animation: bump .65s var(--eo); }
@keyframes bump { 35% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(.95) rotate(3deg); } }
.badge { position: absolute; top: calc(var(--k)*2); right: 0; min-width: calc(var(--k)*24); height: calc(var(--k)*24); padding: 0 calc(var(--k)*5); border-radius: calc(var(--k)*12); background: var(--wine); color: var(--cream); display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--k)*3) var(--cream); transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.badge.on { transform: scale(1); }

/* ---------- curtain between pages ---------- */
#curtain { position: fixed; z-index: 790; inset: 0; background: var(--wine-2); display: grid; place-items: center; pointer-events: none; clip-path: inset(100% 0 0 0); }
#curtain img { width: calc(var(--k)*300); opacity: 0; transition: opacity .4s; }
#curtain.close { clip-path: inset(0 0 0 0); transition: clip-path .5s var(--eio); pointer-events: auto; }
#curtain.close img { opacity: 1; transition-delay: .2s; }
#curtain.open { clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--eio); }
#curtain.start { clip-path: inset(0 0 0 0); }
#curtain.start img { opacity: 1; }

/* ---------- drawers ---------- */
#scrim { position: fixed; z-index: 600; inset: 0; background: rgba(42, 8, 21, .42); opacity: 0; pointer-events: none; transition: opacity .5s; }
#scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 610; top: 0; bottom: 0; width: calc(var(--k)*560); background: var(--paper); padding: calc(var(--k)*34) calc(var(--k)*40); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transition: transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s .7s; }
.drawer.on { visibility: visible; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
#cart { left: 0; transform: translateX(-105%); box-shadow: calc(var(--k)*40) 0 calc(var(--k)*80) calc(var(--k)*-40) rgba(42, 8, 21, .5); }
#menu { right: 0; transform: translateX(105%); box-shadow: calc(var(--k)*-40) 0 calc(var(--k)*80) calc(var(--k)*-40) rgba(42, 8, 21, .5); }
#cart.on, #menu.on { transform: translateX(0); }
.x { width: calc(var(--k)*52); height: calc(var(--k)*52); border-radius: 50%; display: grid; place-items: center; background: rgba(90, 15, 46, .05); align-self: flex-end; flex: none; transition: background .3s, transform .4s var(--eo); }
.x:hover { background: rgba(90, 15, 46, .12); transform: rotate(90deg); }
#menu .x { align-self: flex-start; }
.x svg { width: calc(var(--k)*22); height: calc(var(--k)*22); stroke: var(--wine); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.tarot { position: relative; flex: 1; margin-top: calc(var(--k)*4); border-radius: calc(var(--k)*28); padding: calc(var(--k)*22); background: var(--wine); box-shadow: inset 0 0 0 calc(var(--k)*2) var(--gold), inset 0 0 0 calc(var(--k)*11) var(--wine), inset 0 0 0 calc(var(--k)*12) rgba(241, 221, 164, .45), var(--shadow); display: flex; flex-direction: column; min-height: calc(var(--k)*640); }
.tarot .top { text-align: center; font-size: calc(var(--k)*17); color: var(--gold-hi); margin: calc(var(--k)*2) 0 calc(var(--k)*12); }
.tarot .inner { flex: 1; border-radius: calc(var(--k)*18); padding: calc(var(--k)*22) calc(var(--k)*24); background: var(--paper); display: flex; flex-direction: column; gap: calc(var(--k)*16); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .5); }
.tarot .title { text-align: center; font-size: calc(var(--k)*28); color: var(--gold-hi); margin-top: calc(var(--k)*14); font-weight: 800; }
.tarot .cn { position: absolute; width: calc(var(--k)*40); height: calc(var(--k)*40); color: var(--gold); }
.tarot .cn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cn.tl { top: calc(var(--k)*3); left: calc(var(--k)*3); } .cn.tr { top: calc(var(--k)*3); right: calc(var(--k)*3); transform: scaleX(-1); } .cn.bl { bottom: calc(var(--k)*3); left: calc(var(--k)*3); transform: scaleY(-1); } .cn.br { bottom: calc(var(--k)*3); right: calc(var(--k)*3); transform: scale(-1, -1); }
.tbasket { width: calc(var(--k)*150); margin: calc(var(--k)*-10) auto calc(var(--k)*-4); }
.citems { display: grid; gap: calc(var(--k)*16); }
.citem2 { display: grid; grid-template-columns: calc(var(--k)*96) 1fr calc(var(--k)*36); gap: calc(var(--k)*16); align-items: center; padding-bottom: calc(var(--k)*16); border-bottom: calc(var(--k)*1) dashed var(--line); }
.citem2 > img { width: calc(var(--k)*96); height: calc(var(--k)*96); object-fit: contain; }
.citem2 h4 { font-size: calc(var(--k)*30); color: var(--wine); font-weight: 800; line-height: 1.4; }
.citem2 p { font-size: calc(var(--k)*18); color: var(--soft); line-height: 1.8; }
.citem2 .pr { color: var(--ink); margin-top: calc(var(--k)*4); }
.citem2 .rm { width: calc(var(--k)*36); height: calc(var(--k)*36); border-radius: 50%; display: grid; place-items: center; background: rgba(90, 15, 46, .06); }
.citem2 .rm svg { width: calc(var(--k)*16); height: calc(var(--k)*16); stroke: var(--wine); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.cempty { display: grid; justify-items: center; gap: calc(var(--k)*12); padding: calc(var(--k)*40) 0; text-align: center; color: var(--soft); font-size: calc(var(--k)*22); }
.tot { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--k)*28); color: var(--wine); margin-top: auto; font-weight: 800; }
.acct { padding: calc(var(--k)*26) 0; border-bottom: calc(var(--k)*1) solid var(--line); display: grid; gap: calc(var(--k)*6); }
.acct .nm { font-size: calc(var(--k)*46); color: var(--wine); line-height: 1.3; font-weight: 800; font-family: var(--sys); }
.acct .ph { color: var(--ink); }
.acct .hi { font-size: calc(var(--k)*24); color: var(--soft); }
.mlist a, .mlist button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: calc(var(--k)*22) calc(var(--k)*6); border-bottom: calc(var(--k)*1) solid var(--line); font-size: calc(var(--k)*30); color: var(--ink); transition: background .3s, padding .4s var(--eo); }
.mlist a:hover, .mlist button:hover { background: rgba(90, 15, 46, .05); padding-right: calc(var(--k)*14); }
.mlist .lbl { display: grid; gap: calc(var(--k)*2); }
.mlist small { display: block; font-size: calc(var(--k)*18); color: var(--soft); }
.mlist b { color: var(--gold); font-weight: 400; font-size: calc(var(--k)*26); }
.mfoot { margin-top: auto; padding-top: calc(var(--k)*30); display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--k)*20); color: var(--wine); }
.mfoot button { font-size: calc(var(--k)*20); color: var(--wine); padding: calc(var(--k)*10) calc(var(--k)*6); }

/* ---------- fixed corner: support gem + language pill ---------- */
#corner { position: fixed; z-index: 550; left: calc(var(--k)*28); bottom: calc(var(--k)*30); display: flex; align-items: center; gap: calc(var(--k)*12); direction: ltr; transition: transform .6s var(--eo), opacity .4s; }
#corner.away { transform: translateY(160%); opacity: 0; }
#gem { position: relative; width: calc(var(--k)*66); height: calc(var(--k)*66); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #fff, var(--paper) 60%, var(--cream-2)); box-shadow: 0 calc(var(--k)*14) calc(var(--k)*30) calc(var(--k)*-14) rgba(62, 10, 32, .6), inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .5); animation: dfloat 5s ease-in-out infinite; }
#gem svg { width: calc(var(--k)*36); height: calc(var(--k)*36); }
#gem .sp { position: absolute; top: calc(var(--k)*9); right: calc(var(--k)*11); width: calc(var(--k)*13); height: calc(var(--k)*13); animation: sparkle 3.2s ease-in-out infinite; }
#gem .dot { position: absolute; top: calc(var(--k)*4); right: calc(var(--k)*4); width: calc(var(--k)*16); height: calc(var(--k)*16); border-radius: 50%; background: #C2185B; box-shadow: 0 0 0 calc(var(--k)*3) var(--paper); transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
#gem.unread .dot { transform: scale(1); }
@keyframes dfloat { 50% { transform: translateY(calc(var(--k)*-7)); } }
@keyframes sparkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
#lang { display: flex; align-items: center; gap: calc(var(--k)*4); padding: calc(var(--k)*7); border-radius: calc(var(--k)*999); background: rgba(252, 248, 242, .94); box-shadow: 0 calc(var(--k)*14) calc(var(--k)*30) calc(var(--k)*-16) rgba(62, 10, 32, .5), inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .5); }
#lang svg { width: calc(var(--k)*22); height: calc(var(--k)*22); margin: 0 calc(var(--k)*6) 0 calc(var(--k)*8); stroke: var(--gold-lo); fill: none; stroke-width: 1.6; }
#lang button { padding: calc(var(--k)*8) calc(var(--k)*18); border-radius: calc(var(--k)*999); font-size: calc(var(--k)*19); color: var(--ink); transition: background .3s; }
#lang button.on { background: var(--wine); color: var(--cream); }
.toast { position: fixed; z-index: 960; top: calc(var(--k)*118); left: 50%; transform: translate(-50%, calc(var(--k)*-20)); opacity: 0; pointer-events: none; background: #2F6B4F; color: var(--cream); font-size: calc(var(--k)*21); padding: calc(var(--k)*12) calc(var(--k)*26); border-radius: calc(var(--k)*16); box-shadow: var(--shadow); transition: transform .5s var(--eo), opacity .4s; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: #8E1B2E; }
.toast.info { background: var(--wine); }

/* ---------- support chat: an iPhone-style conversation ---------- */
#chat { position: fixed; z-index: 620; left: calc(var(--k)*28); bottom: calc(var(--k)*112); width: calc(var(--k)*400); height: calc(var(--k)*720); max-height: calc(100vh - 140px); border-radius: calc(var(--k)*54); padding: calc(var(--k)*12); background: linear-gradient(145deg, #2B1A22, #120A0E); box-shadow: 0 calc(var(--k)*50) calc(var(--k)*90) calc(var(--k)*-40) rgba(42, 8, 21, .7), inset 0 0 0 calc(var(--k)*1.5) rgba(255, 255, 255, .12); transform-origin: 10% 100%; transform: translateY(calc(var(--k)*30)) scale(.86); opacity: 0; visibility: hidden; transition: transform .6s cubic-bezier(.34, 1.3, .64, 1), opacity .35s, visibility 0s .6s; direction: rtl; }
#chat.on { transform: none; opacity: 1; visibility: visible; transition: transform .6s cubic-bezier(.34, 1.3, .64, 1), opacity .35s; }
.phone { position: relative; height: 100%; border-radius: calc(var(--k)*44); overflow: hidden; background: var(--cream); display: flex; flex-direction: column; }
.phone .notch { position: absolute; z-index: 3; top: calc(var(--k)*10); left: 50%; width: calc(var(--k)*110); height: calc(var(--k)*30); margin-left: calc(var(--k)*-55); border-radius: calc(var(--k)*20); background: #120A0E; }
.phone .sbar { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--k)*14) calc(var(--k)*30) 0; height: calc(var(--k)*46); direction: ltr; font-family: var(--sys); font-size: calc(var(--k)*14); font-weight: 600; color: #1d1d1f; }
.phone .sbar i { display: inline-block; width: calc(var(--k)*22); height: calc(var(--k)*11); border-radius: calc(var(--k)*3); border: calc(var(--k)*1.5) solid #1d1d1f; position: relative; }
.phone .sbar i::after { content: ''; position: absolute; inset: calc(var(--k)*1.5); right: calc(var(--k)*5); background: #1d1d1f; border-radius: calc(var(--k)*1); }
.chead2 { display: grid; justify-items: center; gap: calc(var(--k)*4); padding: calc(var(--k)*6) calc(var(--k)*16) calc(var(--k)*12); border-bottom: calc(var(--k)*1) solid rgba(90, 15, 46, .1); background: rgba(252, 248, 242, .9); position: relative; }
.chead2 img { width: calc(var(--k)*52); height: calc(var(--k)*52); border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 calc(var(--k)*2) var(--paper), 0 0 0 calc(var(--k)*3) rgba(199, 161, 90, .6); }
.chead2 .who2 { font-size: calc(var(--k)*18); color: var(--ink); font-weight: 800; }
.chead2 .st { font-size: calc(var(--k)*13); color: var(--gray); }
.chead2 .cx { position: absolute; top: calc(var(--k)*8); left: calc(var(--k)*14); width: calc(var(--k)*34); height: calc(var(--k)*34); border-radius: 50%; display: grid; place-items: center; background: rgba(90, 15, 46, .06); }
.chead2 .cx svg { width: calc(var(--k)*14); height: calc(var(--k)*14); stroke: var(--wine); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--k)*14) calc(var(--k)*14) calc(var(--k)*8); display: flex; flex-direction: column; gap: calc(var(--k)*6); scroll-behavior: smooth; }
.msg { max-width: 78%; padding: calc(var(--k)*9) calc(var(--k)*14); border-radius: calc(var(--k)*20); font-family: var(--sys); font-size: calc(var(--k)*15.5); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; animation: msgin .45s var(--eo); }
@keyframes msgin { from { opacity: 0; transform: translateY(calc(var(--k)*10)) scale(.96); } }
.msg.me { align-self: flex-start; background: var(--blue); color: #14233A; border-bottom-right-radius: calc(var(--k)*6); }
.msg.her { align-self: flex-end; background: #fff; color: #1d1d1f; border-bottom-left-radius: calc(var(--k)*6); box-shadow: 0 calc(var(--k)*1) 0 rgba(90, 15, 46, .08); }
.msg.her.welcome { padding: calc(var(--k)*11) calc(var(--k)*14); }
.msg.pending { opacity: .6; }
.msg .t2 { display: block; font-size: calc(var(--k)*11); opacity: .55; margin-top: calc(var(--k)*2); direction: ltr; text-align: left; }
.day-sep { align-self: center; font-size: calc(var(--k)*12); color: var(--gray); font-family: var(--sys); margin: calc(var(--k)*6) 0; }
.cbar { display: flex; align-items: flex-end; gap: calc(var(--k)*8); padding: calc(var(--k)*10) calc(var(--k)*12) calc(var(--k)*22); background: rgba(252, 248, 242, .95); border-top: calc(var(--k)*1) solid rgba(90, 15, 46, .08); }
.cbar textarea { flex: 1; min-height: calc(var(--k)*40); max-height: calc(var(--k)*120); resize: none; border: calc(var(--k)*1) solid rgba(90, 15, 46, .18); border-radius: calc(var(--k)*20); padding: calc(var(--k)*9) calc(var(--k)*14); font-family: var(--sys); font-size: calc(var(--k)*16); line-height: 1.4; color: var(--ink); background: #fff; }
.cbar button { width: calc(var(--k)*40); height: calc(var(--k)*40); flex: none; border-radius: 50%; background: var(--wine); display: grid; place-items: center; transition: transform .3s var(--eo), opacity .3s; }
.cbar button:disabled { opacity: .35; }
.cbar button svg { width: calc(var(--k)*18); height: calc(var(--k)*18); fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cnote { font-size: calc(var(--k)*12); color: var(--gray); text-align: center; padding: 0 calc(var(--k)*16) calc(var(--k)*8); background: rgba(252, 248, 242, .95); }

/* ---------- footer ---------- */
.foot { position: relative; padding: calc(var(--k)*140) 0 calc(var(--k)*120); background: var(--wine-2); color: var(--cream); overflow: hidden; }
.foot .flogo { width: calc(var(--k)*330); }
.foot .tagf { font-size: calc(var(--k)*26); color: rgba(248, 240, 229, .7); margin-top: calc(var(--k)*18); }
.foot .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--k)*40); margin-top: calc(var(--k)*60); }
.foot h5 { font-size: calc(var(--k)*22); color: var(--gold-hi); margin-bottom: calc(var(--k)*12); font-weight: 800; }
.foot .cols a, .foot .cols button { display: block; font-size: calc(var(--k)*24); line-height: 2.1; color: rgba(248, 240, 229, .82); transition: color .3s, transform .4s var(--eo); }
.foot .cols a:hover, .foot .cols button:hover { color: var(--gold-hi); transform: translateX(calc(var(--k)*-6)); }
.foot .small { margin-top: calc(var(--k)*70); display: flex; justify-content: space-between; font-size: calc(var(--k)*18); color: rgba(248, 240, 229, .5); }
.foot .rug { position: absolute; left: calc(var(--k)*-40); bottom: calc(var(--k)*-60); width: calc(var(--k)*300); opacity: .14; transform: rotate(-12deg); }

/* ---------- forms (flows, chat, admin) ---------- */
.fl { display: grid; gap: calc(var(--k)*8); }
.fl .lb { font-size: calc(var(--k)*21); color: var(--soft); }
.inp { width: 100%; height: calc(var(--k)*70); border-radius: calc(var(--k)*18); background: #fff; border: 0; box-shadow: inset 0 0 0 calc(var(--k)*1.5) var(--line); padding: 0 calc(var(--k)*22); font-family: var(--sys); font-size: calc(var(--k)*24); color: var(--ink); transition: box-shadow .3s; }
.inp:focus { outline: none; box-shadow: inset 0 0 0 calc(var(--k)*2) var(--wine), 0 0 0 calc(var(--k)*6) rgba(90, 15, 46, .1); }
.inp.ltr { direction: ltr; text-align: left; letter-spacing: .04em; }
textarea.inp { height: calc(var(--k)*130); padding-top: calc(var(--k)*16); line-height: 1.7; resize: vertical; }
.inp.bad { box-shadow: inset 0 0 0 calc(var(--k)*2) #A3122A, 0 0 0 calc(var(--k)*6) rgba(163, 18, 42, .08); }
.ferr { color: #A3122A; font-size: calc(var(--k)*20); }


/* ---------- mobile (430 wide design) ---------- */
@media (max-width: 1023px) {
  .d-only { display: none !important; }
  body { font-size: calc(var(--k)*16); }
  .wrap { width: calc(var(--k)*382); }
  .eyebrow { font-size: calc(var(--k)*15); gap: calc(var(--k)*10); }
  .eyebrow::before { width: calc(var(--k)*28); }
  .h2 { font-size: calc(var(--k)*42); line-height: 1.35; }
  .lead { font-size: calc(var(--k)*17); line-height: 1.85; }
  .btn { font-size: calc(var(--k)*16); padding: calc(var(--k)*12) calc(var(--k)*22); gap: calc(var(--k)*8); }
  .js [data-r='up']:not(.in) { transform: translateY(calc(var(--k)*40)); }
  .js .S:not(.in) .w { transform: translateY(calc(var(--k)*22)); }
  #hdr { height: calc(var(--k)*64); padding: 0 calc(var(--k)*14); grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .hdr-r { gap: calc(var(--k)*8); }
  .burger { width: calc(var(--k)*44); height: calc(var(--k)*44); }
  .burger span { width: calc(var(--k)*22); gap: calc(var(--k)*5); }
  .burger i { height: calc(var(--k)*2); }
  .brand { width: calc(var(--k)*50); height: calc(var(--k)*46); }
  .basket { width: calc(var(--k)*48); height: calc(var(--k)*48); }
  .basket img { width: calc(var(--k)*44); }
  .badge { min-width: calc(var(--k)*18); height: calc(var(--k)*18); top: 0; border-radius: calc(var(--k)*9); box-shadow: 0 0 0 calc(var(--k)*2) var(--cream); }
  #curtain img { width: calc(var(--k)*180); }
  .drawer { width: 100%; max-width: calc(var(--k)*400); padding: calc(var(--k)*22) calc(var(--k)*22); }
  .x { width: calc(var(--k)*42); height: calc(var(--k)*42); }
  .x svg { width: calc(var(--k)*18); height: calc(var(--k)*18); }
  .tarot { min-height: calc(var(--k)*560); padding: calc(var(--k)*16); border-radius: calc(var(--k)*22); }
  .tarot .top { font-size: calc(var(--k)*13); }
  .tarot .inner { padding: calc(var(--k)*16); gap: calc(var(--k)*12); }
  .tarot .title { font-size: calc(var(--k)*21); }
  .tarot .cn { width: calc(var(--k)*28); height: calc(var(--k)*28); }
  .tbasket { width: calc(var(--k)*110); }
  .citem2 { grid-template-columns: calc(var(--k)*70) 1fr calc(var(--k)*30); gap: calc(var(--k)*10); padding-bottom: calc(var(--k)*12); }
  .citem2 > img { width: calc(var(--k)*70); height: calc(var(--k)*70); }
  .citem2 h4 { font-size: calc(var(--k)*20); }
  .citem2 p { font-size: calc(var(--k)*13); }
  .citem2 .rm { width: calc(var(--k)*30); height: calc(var(--k)*30); }
  .tot { font-size: calc(var(--k)*20); }
  .cempty { font-size: calc(var(--k)*16); }
  .acct .nm { font-size: calc(var(--k)*30); }
  .acct .hi { font-size: calc(var(--k)*17); }
  .mlist a, .mlist button { font-size: calc(var(--k)*21); padding: calc(var(--k)*16) calc(var(--k)*4); }
  .mlist small { font-size: calc(var(--k)*13); }
  .mlist b { font-size: calc(var(--k)*20); }
  .mfoot, .mfoot button { font-size: calc(var(--k)*15); }
  #corner { left: calc(var(--k)*12); bottom: calc(var(--k)*14); gap: calc(var(--k)*8); }
  #gem { width: calc(var(--k)*50); height: calc(var(--k)*50); }
  #gem svg { width: calc(var(--k)*27); height: calc(var(--k)*27); }
  #gem .sp { top: calc(var(--k)*6); right: calc(var(--k)*8); width: calc(var(--k)*10); height: calc(var(--k)*10); }
  #gem .dot { width: calc(var(--k)*12); height: calc(var(--k)*12); }
  #lang { padding: calc(var(--k)*5); }
  #lang svg { width: calc(var(--k)*17); height: calc(var(--k)*17); margin: 0 calc(var(--k)*4) 0 calc(var(--k)*5); }
  #lang button { padding: calc(var(--k)*6) calc(var(--k)*12); font-size: calc(var(--k)*14); }
  .toast { top: calc(var(--k)*76); font-size: calc(var(--k)*15); padding: calc(var(--k)*10) calc(var(--k)*18); border-radius: calc(var(--k)*12); white-space: nowrap; }
  #chat { left: 8px; right: 8px; bottom: 8px; width: auto; height: calc(100svh - 16px); max-height: none; border-radius: calc(var(--k)*44); padding: calc(var(--k)*8); }
  .phone { border-radius: calc(var(--k)*38); }
  .foot { padding: calc(var(--k)*70) 0 calc(var(--k)*90); }
  .foot .flogo { width: calc(var(--k)*170); }
  .foot .tagf { font-size: calc(var(--k)*17); }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: calc(var(--k)*26); margin-top: calc(var(--k)*36); }
  .foot h5 { font-size: calc(var(--k)*16); margin-bottom: calc(var(--k)*6); }
  .foot .cols a, .foot .cols button { font-size: calc(var(--k)*16); line-height: 2.2; }
  .foot .small { margin-top: calc(var(--k)*40); font-size: calc(var(--k)*13); flex-direction: column; gap: calc(var(--k)*6); }
  .foot .rug { width: calc(var(--k)*160); left: calc(var(--k)*-30); bottom: calc(var(--k)*-40); }
  .fl .lb { font-size: calc(var(--k)*15); }
  .inp { height: calc(var(--k)*54); border-radius: calc(var(--k)*14); padding: 0 calc(var(--k)*16); font-size: calc(var(--k)*17); }
  textarea.inp { height: calc(var(--k)*110); padding-top: calc(var(--k)*12); }
  .ferr { font-size: calc(var(--k)*15); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-r], .js .S .w { transition: opacity .4s !important; transform: none !important; filter: none !important; clip-path: none !important; }
  #gem, #gem .sp { animation: none; }
}
.cin-w { position: relative; flex: 1; display: flex; }
.cph { position: absolute; right: calc(var(--k)*15); top: calc(var(--k)*10); color: #9a8f93; pointer-events: none; transition: opacity .2s; font-size: calc(var(--k)*16); }
.cph.off { opacity: 0; }
.msg.welcome { font-family: InterL, Doran, var(--sys); font-size: calc(var(--k)*16); line-height: 1.7; }
.msg.welcome span { display: block; }
.toast span { display: block; }
.cur #curtain { clip-path: inset(0 0 0 0); }
.cur #curtain img { opacity: 1; }
@media (max-width: 1023px) { .cph { font-size: calc(var(--k)*16); right: calc(var(--k)*15); top: calc(var(--k)*10); } }

/* ---------- picture tokens: sizes per set (desktop / mobile) ---------- */
.tokpage { width: 100%; }
.tks { display: block; margin: 0 0 calc(var(--k)*20); white-space: nowrap; }
.tku { display: inline-block; white-space: pre; margin-left: calc(var(--k)*10); }
.tk-pa { font-size: calc(var(--k)*28); line-height: 1.5; }
.tk-ps { font-size: calc(var(--k)*20); line-height: 1.6; }
.tk-pt { font-size: calc(var(--k)*28); line-height: 1.5; font-weight: 800; }
.tk-bd { font-size: calc(var(--k)*14); line-height: 1.4; font-weight: 800; }
.tk-fol { font-family: Abar; font-size: calc(var(--k)*40); line-height: 1.3; }
.tk-seal { font-size: calc(var(--k)*76); line-height: 1.2; font-weight: 800; }
.tk-ph { font-size: calc(var(--k)*26); line-height: 1.5; }
.tk-fs { font-size: calc(var(--k)*18); line-height: 1.6; }
.tk-fm { font-size: calc(var(--k)*24); line-height: 1.6; }
.tk-fb { font-size: calc(var(--k)*24); line-height: 1.6; font-weight: 800; }
.tk-fl { font-size: calc(var(--k)*38); line-height: 1.3; font-weight: 800; }
.tk-ft { font-size: calc(var(--k)*26); line-height: 1.5; }
.tk-rc { font-size: calc(var(--k)*21); line-height: 1.6; }
.tk-rb { font-size: calc(var(--k)*30); line-height: 1.5; font-weight: 800; }
@media (max-width: 1023px) {
  .tk-pa { font-size: calc(var(--k)*19); } .tk-ps { font-size: calc(var(--k)*14); } .tk-pt { font-size: calc(var(--k)*20); } .tk-bd { font-size: calc(var(--k)*11); }
  .tk-fol { font-size: calc(var(--k)*20); } .tk-seal { font-size: calc(var(--k)*36); } .tk-ph { font-size: calc(var(--k)*18); }
  .tk-fs { font-size: calc(var(--k)*13); } .tk-fm { font-size: calc(var(--k)*17); } .tk-fb { font-size: calc(var(--k)*17); } .tk-fl { font-size: calc(var(--k)*26); }
  .tk-ft { font-size: calc(var(--k)*18); } .tk-rc { font-size: calc(var(--k)*15); } .tk-rb { font-size: calc(var(--k)*21); }
}

#demo-ribbon { position: fixed; z-index: 540; right: calc(var(--k)*28); bottom: calc(var(--k)*34); max-width: calc(var(--k)*520); padding: calc(var(--k)*10) calc(var(--k)*18); border-radius: calc(var(--k)*14); background: rgba(62, 10, 32, .9); color: var(--gold-hi); font-size: calc(var(--k)*16); line-height: 1.6; box-shadow: var(--shadow); pointer-events: none; }
#demo-ribbon span { display: block; }
@media (max-width: 1023px) { #demo-ribbon { right: calc(var(--k)*10); left: calc(var(--k)*10); bottom: calc(var(--k)*76); max-width: none; font-size: calc(var(--k)*12); padding: calc(var(--k)*7) calc(var(--k)*12); border-radius: calc(var(--k)*10); } }