:root {
  --ink: #0e0e0e; --ink2: #3a3a3a; --paper: #ffffff; --soft: #f4f4f2; --sand: #f4f4f2; --ivory: #fafaf8;
  --mute: #6d6d6a; --mute2: #9a9a96; --line: #e7e7e4; --line2: #c9c9c5;
  --gold: #b8962e; --gold2: #d8b85a; --gold-deep: #8a6f1f; --gold-soft: #f7f1e0;
  --red: #b3261e; --red-soft: #fbeceb; --green: #1e6b45; --green-soft: #e7f1ec; --amber: #8a6f1f; --amber-soft: #f7f1e0;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --font: 'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --r: 6px; --r2: 6px; --rb: 6px; --ease: cubic-bezier(.2,.7,.2,1); --dur: 180ms;
  --gut: 20px;                 
  --gap: 2px;                  
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: pan-x pan-y; }
body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--font); touch-action: pan-x pan-y; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, .tab, .tabs, .top, .sticky, .pcard .nm, .chip, .size, .menu-list a { user-select: none; -webkit-user-select: none; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: 0; text-wrap: balance; line-height: 1.3; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0; }
.num, .price { font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.eyebrow { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.eyebrow.light { color: rgba(255,255,255,.8); }
.lbl { font-size: 11.5px; color: var(--mute); font-weight: 500; letter-spacing: .02em; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }


#app { height: 100%; height: 100dvh; display: flex; flex-direction: column; background: var(--paper); width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; position: relative; scrollbar-width: none; }
#app::-webkit-scrollbar { display: none; }
body.noscroll #app, body.noscroll .scroll { overflow: hidden; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.screen.enter-fwd, .screen.enter-back { animation: fadeScreen var(--dur) ease-out; }
@keyframes fadeScreen { from { opacity: 0; } to { opacity: 1; } }
.scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; scrollbar-width: none; scroll-padding: 72px 0 140px; }
.scroll > *, .sheet-bd > *, .screen > *:not(.scroll) { flex-shrink: 0; }
.scroll::-webkit-scrollbar, .hrow::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
.with-tabs .scroll { padding-bottom: calc(80px + var(--safe-b)) !important; }
.scroll.with-sticky { padding-bottom: calc(120px + var(--safe-b)) !important; }
.with-tabs .scroll.with-sticky { padding-bottom: calc(190px + var(--safe-b)) !important; }
.pad { padding: 0 var(--gut); }
.stack { display: flex; flex-direction: column; gap: 14px; }


.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: calc(6px + var(--safe-t)) 8px 6px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
.top .title { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.top .title span { padding: 0 6px; }
.top .acts { display: flex; align-items: center; gap: 2px; }
.iconbtn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.iconbtn:active { opacity: .5; }
.badge { position: absolute; top: 6px; inset-inline-end: 5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.langbtn { display: inline-flex; align-items: center; height: 30px; padding: 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--ink); }


.tabs { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--line); background: var(--paper); padding: 2px 4px calc(6px + var(--safe-b)); display: flex; z-index: 20; }
.tab { flex: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mute); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; position: relative; }
.tab.on { color: var(--ink); }
.tab .ic-w { display: flex; align-items: center; justify-content: center; height: 24px; }
.tab .badge { top: 2px; inset-inline-end: calc(50% - 22px); }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; width: 100%; padding: 0 18px; font-size: 14px; font-weight: 500; letter-spacing: .04em; border-radius: var(--rb); transition: opacity var(--dur), background var(--dur); }
.btn:active { opacity: .7; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-line { border: 1px solid var(--ink); color: var(--ink); background: var(--paper); }
.btn-text { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; width: auto; padding: 0; height: auto; }
.btn-sm { height: 38px; font-size: 12.5px; padding: 0 14px; width: auto; }
.btn-wa { background: var(--ink); color: #fff; }
.btn-soft { height: 36px; width: auto; padding: 0 14px; font-size: 12.5px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); }

.sticky { position: sticky; bottom: 0; z-index: 9; background: var(--paper); border-top: 1px solid var(--line); padding: 10px var(--gut) calc(10px + var(--safe-b)); }
.with-tabs .sticky { bottom: calc(61px + var(--safe-b)); }
.sticky .row { display: flex; gap: 8px; align-items: center; }


.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field > .lbl { font-size: 11.5px; color: var(--mute); font-weight: 500; }
.input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--rb); background: var(--paper); font-size: 15px; font-weight: 400; transition: border-color var(--dur), box-shadow var(--dur); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,14,.06); }
.input::placeholder { color: var(--mute2); font-weight: 400; }

select.input { -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 36px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat; background-position: left 12px center; color: inherit; }
[dir="ltr"] select.input { background-position: right 12px center; }
select.input:invalid, select.input option[value=""] { color: var(--mute2); }
.input.big { font-size: 22px; height: 54px; letter-spacing: .06em; }
.input.num { font-variant-numeric: tabular-nums; }
.phone-row { display: flex; align-items: flex-end; gap: 10px; }
.phone-row .cc { direction: ltr; font-size: 22px; color: var(--mute); padding-bottom: 10px; letter-spacing: .04em; }
.err { color: var(--red); font-size: 12.5px; line-height: 1.6; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--mute2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.otp-one { direction: ltr; }
.otp-in { height: 64px; font-size: 30px; letter-spacing: .45em; text-align: center; padding-inline-start: .45em; border-bottom-width: 1.5px; }
.otp-in::placeholder { color: var(--line2); letter-spacing: .45em; }
.langs { display: flex; gap: 18px; }
.langs button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.langs button b { font-weight: 500; font-size: 14px; } .langs button small { font-size: 10.5px; color: var(--mute); letter-spacing: .08em; }
.langs button.on { border-bottom-color: var(--ink); }


.sizes { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); }
.sizes .size { flex: 1 0 25%; min-width: 64px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 400; border-bottom: 1px solid var(--line); position: relative; color: var(--ink); }
.sizes .size.on { font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.sizes .size.out { color: var(--mute2); text-decoration: line-through; }
.sizes .size .low { position: absolute; top: 5px; left: calc(50% + 12px); font-size: 9.5px; color: var(--amber); font-variant-numeric: tabular-nums; }
.sizes.free .size { flex: 0 0 auto; padding: 0 16px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line2); position: relative; }
.swatch.on::after { content: ''; position: absolute; inset: -5px; border: 1px solid var(--ink); border-radius: 50%; }
.swatch.txt { width: auto; height: 32px; border-radius: 4px; padding: 0 12px; font-size: 12.5px; border: 1px solid var(--line2); }
.swatch.txt.on { border-color: var(--ink); }
.swatch.txt.on::after { display: none; }

.swatches.pics { gap: 8px; }
.swatch.pic { width: 64px; height: 76px; border-radius: 4px; padding: 0; overflow: hidden; background: #f6f6f4; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; }
.swatch.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch.pic span { font-size: 11px; padding: 0 4px; text-align: center; line-height: 1.3; }
.swatch.pic.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatch.pic.on::after { display: none; }

.opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: start; }
.opt .rad { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line2); flex: 0 0 auto; display: grid; place-items: center; }
.opt.on .rad { border-color: var(--ink); } .opt.on .rad::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.opt .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opt .bd b { font-weight: 500; font-size: 14px; } .opt .bd small { font-size: 12px; color: var(--mute); }
.opt .r { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: start; font-size: 14px; }
.switch .sw { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: 0 0 auto; transition: background var(--dur); }
.switch .sw::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform var(--dur) var(--ease); }
.switch.on .sw { background: var(--ink); } .switch.on .sw::after { transform: translateX(-18px); }
[dir="ltr"] .switch.on .sw::after { transform: translateX(18px); }
[dir=ltr] .switch.on .sw::after { transform: translateX(16px); }
.chips { display: flex; gap: 18px; overflow-x: auto; padding: 0; scroll-snap-type: x proximity; }
.chips::before, .chips::after { content: ''; flex: 0 0 calc(var(--gut) - 18px); }
.chip { flex: 0 0 auto; padding: 8px 0; font-size: 13px; color: var(--mute); border-bottom: 1.5px solid transparent; white-space: nowrap; scroll-snap-align: start; }
.chip.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.chip.red.on { color: var(--red); border-bottom-color: var(--red); }
.hchips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 var(--gut); }
.hchips .chip { padding: 5px 12px; border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.hchips .chip.on { border-color: var(--ink); font-weight: 500; }
.searchbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 var(--gut); border-bottom: 1px solid var(--line); }
.searchbar input { flex: 1; border: 0; background: transparent; font-size: 15px; padding: 0; min-width: 0; }
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--mute2); }


.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px var(--gap); }
.grid.c1 { grid-template-columns: 1fr; } .grid.c3 { grid-template-columns: repeat(3, 1fr); gap: 12px var(--gap); }
.grid.c3 .pcard .nm, .grid.c3 .pcard .price { font-size: 10.5px; }
.pcard { display: flex; flex-direction: column; gap: 6px; position: relative; text-align: start; cursor: pointer; }
.pcard .ph { position: relative; aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.pcard .ph img.ld { opacity: 1; }
.pcard .nm { font-size: 11.5px; line-height: 1.45; padding: 0 8px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .price { padding: 0 8px; }
.pcard.out .ph img { opacity: .45; }
.pcard .tagx { position: absolute; top: 8px; inset-inline-start: 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.9); padding: 2px 6px; }
.pcard .tagx.red { color: var(--red); } .pcard .tagx.gold { color: var(--gold-deep); }
.pcard .fav, .pcard .qa { position: absolute; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink); }
.pcard .fav { top: 4px; inset-inline-end: 4px; }
.pcard .fav.on svg { fill: var(--ink); }
.pcard .qa { bottom: 4px; inset-inline-start: 4px; }
.price { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.price small { font-size: 10px; color: var(--mute); margin-inline-start: 2px; }
.price .old { color: var(--mute2); text-decoration: line-through; font-size: 11px; }
.price.red > span:first-child { color: var(--red); }
.price.lg { font-size: 16px; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; background: var(--soft); }

.hrow { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x proximity; padding: 0; }
.hrow::before, .hrow::after { content: ''; flex: 0 0 calc(var(--gut) - var(--gap)); }
.hrow .pcard { flex: 0 0 44%; scroll-snap-align: start; }
.hrow .pcard.wide { flex: 0 0 62%; }

.hrow.full { gap: 0; scroll-snap-type: x mandatory; }
.hrow.full::before, .hrow.full::after { content: none; }
.hrow.full .pcard { flex: 0 0 100%; scroll-snap-align: start; gap: 8px; }
.hrow.full .pcard .nm { font-size: 14px; padding: 0 var(--gut); -webkit-line-clamp: 1; }
.hrow.full .pcard .price { font-size: 13px; padding: 0 var(--gut); }
.hrow.full .pcard .tagx { top: 10px; inset-inline-start: var(--gut); }
.hrow.full .pcard .fav { top: 8px; inset-inline-end: 8px; }
.hrow.full .pcard .qa { bottom: 8px; inset-inline-start: 8px; }


.hhead { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 8px 4px; padding-inline-start: var(--gut); }
.hhead .brand { display: flex; flex-direction: column; line-height: 1; gap: 3px; padding-inline-start: 12px; }
.hhead .brand b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hhead .brand small { font-size: 8px; letter-spacing: .32em; color: var(--mute); }

.hero { display: block; width: 100%; text-align: start; }
.hero .im { aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; position: relative; }
.hero .im img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.hero .im img.ld { opacity: 1; }
.hero .tx { padding: 10px var(--gut) 0; display: flex; flex-direction: column; gap: 2px; }
.hero .tx h3 { font-size: 15px; font-weight: 500; }
.hero .tx .cta { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-top: 4px; }
.hero .no { position: absolute; top: 10px; inset-inline-start: var(--gut); font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.hero.big .tx .big { font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }

.hcar { display: block; width: 100%; position: relative; }
.hcar .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hcar .track::-webkit-scrollbar { display: none; }
.hcar .sl { flex: 0 0 100%; scroll-snap-align: start; display: block; text-align: start; }
.hcar .im { aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; position: relative; }
.hcar .im img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.hcar .im img.ld { opacity: 1; }
.hcar .tag { position: absolute; top: 10px; inset-inline-start: var(--gut); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(14,14,14,.62); padding: 4px 8px; }
.hcar .tx { padding: 10px var(--gut) 0; display: flex; flex-direction: column; gap: 2px; }
.hcar .tx h3 { font-size: 15px; font-weight: 500; }
.hcar .tx .sub { font-size: 12px; color: var(--mute); margin-top: 2px; font-variant-numeric: tabular-nums; }

.hcar .tx .sub { min-height: 1.7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcar .tx .cta { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hcar .tx .cta { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; align-self: flex-start; }
.hcar .gdots { padding-top: 12px; }
.hcar .gdots span { transition: background .25s ease; }

.menu-list { display: flex; flex-direction: column; padding: 0 var(--gut); }
.menu-list a, .menu-list button { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 15px; font-weight: 400; text-align: start; width: 100%; color: var(--ink); }
.menu-list a.sub, .menu-list button.sub { font-size: 13px; padding: 8px 0; padding-inline-start: 14px; color: var(--ink2); }
.menu-list .n { font-size: 10px; color: var(--mute2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.menu-list .tagx { font-size: 9px; letter-spacing: .12em; color: var(--gold-deep); vertical-align: super; margin-inline-start: 6px; }
.menu-list .head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 18px 0 6px; }
.menu-list .red { color: var(--red); }

.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 var(--gut); }
.sec h2 { font-size: 15px; font-weight: 500; }
.sec .more { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }

.active-order { display: flex; align-items: center; gap: 12px; margin: 0 var(--gut); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: start; width: calc(100% - 2 * var(--gut)); }
.active-order .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.active-order .bd b { font-size: 13.5px; font-weight: 500; }
.active-order .bd small { font-size: 11.5px; color: var(--mute); }
.active-order .prog { display: flex; gap: 3px; margin-top: 6px; }
.active-order .prog i { flex: 1; height: 2px; background: var(--line); } .active-order .prog i.on { background: var(--ink); }

.credit { position: relative; margin: 0 var(--gut); padding: 22px 22px 20px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 14px; text-align: start; width: calc(100% - 2 * var(--gut)); overflow: hidden; }
.credit .hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(216,184,90,.55); font-size: 10.5px; letter-spacing: .1em; color: rgba(255,255,255,.72); }
.credit .amt { display: flex; align-items: baseline; gap: 8px; }
.credit .amt b { font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.credit .amt small { font-size: 12px; color: var(--gold2); letter-spacing: .1em; }
.credit .ft { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; font-size: 11.5px; color: rgba(255,255,255,.7); line-height: 1.5; }
.credit .ft b { color: #fff; font-weight: 500; display: block; margin-bottom: 2px; }
.credit .ft svg { flex: 0 0 auto; opacity: .75; }

.credit.slim { padding: 15px 20px 14px; gap: 11px; }
.credit.slim .hd { padding-bottom: 11px; }
.credit.slim .srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.credit.slim .amt { align-items: baseline; }
.credit.slim .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: start; }
.credit.slim .who b { font-size: 17px; font-weight: 500; line-height: 1.25; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit.slim .who small { font-size: 11.5px; color: rgba(255,255,255,.72); }
.credit.slim .hd .pill-gold { font-size: 10px; padding: 2px 8px; }
.credit.slim .srow svg { opacity: .6; }
.credit.slim .pill-gold { margin-inline-start: auto; }

.bcbtn { margin: 0 var(--gut); width: calc(100% - 2 * var(--gut)); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; background: var(--ink); color: var(--gold2); border-top: 1px solid rgba(216,184,90,.55); font-size: 12px; letter-spacing: .06em; }
.bcbtn span { font-weight: 500; }
.credit.light { background: var(--soft); color: var(--ink); }
.credit.light .hd { border-bottom-color: var(--line2); }
.credit.light .hd, .credit.light .ft { color: var(--mute); } .credit.light .ft b { color: var(--ink); }

.branch { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.branch .ph { width: 72px; aspect-ratio: 3/4; background: var(--soft); flex: 0 0 auto; overflow: hidden; }
.branch .ph img { width: 100%; height: 100%; object-fit: cover; }
.branch .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.branch .bd b { font-size: 14px; font-weight: 500; } .branch .bd i { font-style: normal; font-size: 12px; color: var(--mute); }
.branch .bd small { font-size: 11.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; }
.branch .bd .acts { margin-top: 6px; }
.strip { padding: 14px var(--gut); font-size: 11px; letter-spacing: .06em; color: var(--mute); text-align: center; border-top: 1px solid var(--line); }
.install { display: flex; align-items: center; gap: 12px; margin: 0 var(--gut); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.install .bd { flex: 1; min-width: 0; } .install .bd b { display: block; font-size: 13px; font-weight: 500; } .install .bd small { font-size: 11.5px; color: var(--mute); }


.row-list { display: flex; flex-direction: column; }
.orow { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: start; }
.orow .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.orow .bd b { font-size: 14px; font-weight: 400; } .orow .bd small { font-size: 11.5px; color: var(--mute); }
.orow .bd b.red { color: var(--red); }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--mute); } .kv b { font-weight: 500; text-align: end; }
.kv.big { font-size: 15px; } .kv.big b { font-size: 16px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 400; flex: 0 0 auto; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line2); border-radius: 4px; color: var(--ink); white-space: nowrap; }
.pill-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-gold { border-color: var(--gold); color: var(--gold-deep); }
.pill-red { border-color: var(--red); color: var(--red); }
.pill-green { border-color: var(--green); color: var(--green); }
.pill-gray { color: var(--mute); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.note.gold { color: var(--gold-deep); } .note.green { color: var(--green); }
.note u { text-underline-offset: 3px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 56px 20px; color: var(--mute); font-size: 13px; }
.empty b { color: var(--ink); font-weight: 500; font-size: 15px; }
.tips { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.tips > div { display: flex; gap: 12px; align-items: flex-start; }
.tips .n { flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.sgt { width: 100%; border-collapse: collapse; font-size: 13px; }
.sgt th { text-align: start; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--ink); }
.sgt td { padding: 9px 0; border-bottom: 1px solid var(--line); }


.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; text-align: center; }
.splash .tag { font-size: 11px; letter-spacing: .3em; color: var(--mute); }
.splash .foot { position: absolute; bottom: calc(28px + var(--safe-b)); font-size: 10.5px; letter-spacing: .12em; color: var(--mute2); }
.wel { flex: 1; display: flex; flex-direction: column; }



.opening { flex: 1; position: relative; display: flex; flex-direction: column; background: var(--ivory); color: var(--ink); overflow: hidden; }
.open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; background-size: cover; background-position: 50% 0%; animation: openZoom 7s ease-out both; }
.open-shade { position: absolute; inset: 0; background: linear-gradient(to top, #fafaf8 0%, #fafaf8 30%, rgba(250,250,248,.85) 40%, rgba(250,250,248,0) 56%); }
.open-c { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 var(--gut) 14vh; gap: 16px; text-align: center; }
.open-logo { color: var(--ink); }

.open-first .open-logo .lg-ar1, .open-first .open-logo .lg-ar2, .open-first .open-logo .lg-lat1, .open-first .open-logo .lg-lat2 { transform-box: fill-box; transform-origin: center; animation: lgPart .85s var(--ease) both; }
.open-first .open-logo .lg-ar1 { animation-delay: .08s; } .open-first .open-logo .lg-ar2 { animation-delay: .24s; }
.open-first .open-logo .lg-lat1 { animation-delay: .52s; } .open-first .open-logo .lg-lat2 { animation-delay: .64s; }
.open-first.lg-still .open-logo .lg-ar1, .open-first.lg-still .open-logo .lg-ar2, .open-first.lg-still .open-logo .lg-lat1, .open-first.lg-still .open-logo .lg-lat2, .open-first.lg-still .open-logo .lg-rule { animation: none; }
.open-first .open-logo .lg-rule { transform-box: fill-box; transform-origin: center; color: var(--gold2); animation: lgRule .7s .38s var(--ease) both, lgGold 1s 1.15s ease both; }
@keyframes lgPart { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgRule { from { opacity: 0; transform: scaleX(.1); } to { opacity: 1; transform: none; } }
@keyframes lgGold { from { color: var(--gold2); } to { color: var(--gold); } }
.open-rule { display: flex; align-items: center; gap: 10px; color: var(--gold); animation: lg 1.1s .25s var(--ease) both; }
.open-rule i { width: 54px; height: 1px; background: currentColor; opacity: .85; } .open-rule b { font-size: 9px; line-height: 1; }
.open-tag { font-size: 13px; letter-spacing: .32em; color: var(--ink2); animation: lg 1.1s .4s var(--ease) both; }

html[lang="ar"] .open-tag, html[lang="ar"] .open-foot, html[lang="ar"] .wel1 .eyebrow, html[lang="ar"] .splash .tag, html[lang="ar"] .splash .foot { letter-spacing: 0; word-spacing: .3em; }

html[lang="ar"] *, html[lang="ar"] *::placeholder { letter-spacing: 0; }
html[lang="ar"] .hhead .brand small { letter-spacing: .32em; } html[lang="ar"] .langbtn { letter-spacing: .08em; }
html[lang="ar"] .otp-in, html[lang="ar"] .otp-in::placeholder { letter-spacing: .45em; }
html[lang="ar"] .input.big { letter-spacing: .06em; } html[lang="ar"] .phone-row .cc { letter-spacing: .04em; }
html[lang="ar"] .auth .box input, html[lang="ar"] .auth .box input::placeholder { letter-spacing: .05em; }
html[lang="ar"] .auth .box.pin input, html[lang="ar"] .auth .box.pin input::placeholder { letter-spacing: .6em; }
html[lang="ar"] .auth .box.code input { letter-spacing: .5em; }
html[lang="ar"] .hero .no { letter-spacing: .06em; }
.open-foot { position: relative; text-align: center; padding-bottom: calc(26px + var(--safe-b)); font-size: 10.5px; letter-spacing: .14em; color: rgba(14,14,14,.45); animation: lg 1.1s .6s var(--ease) both; }
.opening .skip { position: absolute; top: calc(14px + var(--safe-t)); inset-inline-end: 18px; z-index: 2; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.55); padding: 8px 14px; border: 1px solid rgba(14,14,14,.18); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wel1 .open-bottom { position: relative; margin-top: auto; padding: 0 var(--gut) calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; animation: lg .9s .1s var(--ease) both; }
.wel1 .open-mark { margin-bottom: 6px; }
.wel1 .eyebrow { color: var(--gold-deep); }
.wel1 h1 { font-size: 27px; font-weight: 300; line-height: 1.3; color: var(--ink); }
.wel1 p { font-size: 13px; line-height: 1.75; color: var(--ink2); max-width: 36ch; }
.wel1 .btn-w { background: var(--ink); color: #fff; margin-top: 10px; }
.wel1 .dots span { background: rgba(14,14,14,.18); } .wel1 .dots span.on { background: var(--ink); }
@keyframes openZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .open-bg { animation: none; } }
.wel .im { flex: 1; min-height: 0; background: var(--soft); overflow: hidden; position: relative; }
.wel .im img { width: 100%; height: 100%; object-fit: cover; }
.wel .skip { position: absolute; top: calc(12px + var(--safe-t)); inset-inline-end: 16px; z-index: 2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); padding: 8px; }
.wel .tx { padding: 22px var(--gut) 0; display: flex; flex-direction: column; gap: 8px; }
.wel .tx h1 { font-size: 26px; font-weight: 300; line-height: 1.25; }
.wel .tx p { font-size: 13px; color: var(--mute); line-height: 1.7; }
.wel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--gut) calc(22px + var(--safe-b)); }
.dots { display: flex; gap: 6px; } .dots span { width: 18px; height: 2px; background: var(--line2); } .dots span.on { background: var(--ink); }
.brpick { display: flex; flex-direction: column; }
.brp { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: start; width: 100%; }
.brp .ph { width: 64px; aspect-ratio: 1; background: var(--soft); overflow: hidden; flex: 0 0 auto; } .brp .ph img { width: 100%; height: 100%; object-fit: cover; }
.brp .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brp .bd b { font-weight: 500; font-size: 14px; } .brp .bd small { font-size: 11.5px; color: var(--mute); }
.brp .ck { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; flex: 0 0 auto; }
.brp.on .ck { background: var(--ink); border-color: var(--ink); }
.login-top { display: flex; justify-content: center; padding: calc(44px + var(--safe-t)) 0 16px; background: linear-gradient(to bottom, var(--paper) 78%, rgba(255,255,255,0)); position: relative; z-index: 1; } 


.pimg { position: relative; background: var(--soft); }
.gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal::-webkit-scrollbar { display: none; }
.gi { flex: 0 0 100%; aspect-ratio: 3 / 4; scroll-snap-align: start; background-size: cover; background-position: center; background-color: var(--soft); }
.gi img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.gi img.ld { opacity: 1; }
.gdots { display: flex; gap: 5px; justify-content: center; padding: 10px 0 0; }
.gdots span { width: 14px; height: 1.5px; background: var(--line2); } .gdots span.on { background: var(--ink); }
.pimg .over { position: absolute; top: calc(6px + var(--safe-t)); left: 6px; right: 6px; display: flex; justify-content: space-between; align-items: center; }
.rnd { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.rnd.fav.on svg { fill: var(--ink); }
.pimg .tags { position: absolute; bottom: 12px; inset-inline-start: var(--gut); display: flex; gap: 6px; }
.pimg .zoomb { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); }
.pinfo { padding: 16px var(--gut) 0; display: flex; flex-direction: column; gap: 18px; }
.pinfo .title { display: flex; flex-direction: column; gap: 6px; }
.pinfo .title h1 { font-size: 15px; font-weight: 400; line-height: 1.5; }
.pinfo .title .price { font-size: 14px; }
.pinfo .title .price.lg { font-size: 15px; }
.member-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.member-price .l b { font-size: 12.5px; font-weight: 500; display: block; } .member-price .l small { font-size: 11.5px; color: var(--mute); }
.attr { display: flex; flex-direction: column; gap: 10px; }
.attr .hd { display: flex; justify-content: space-between; align-items: baseline; }
.attr .hd .lbl { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
.attr .hd .lbl b { color: var(--ink); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; margin-inline-start: 6px; }
.desc { font-size: 13px; line-height: 1.8; color: var(--ink2); }
.low-pill { font-size: 11px; color: var(--amber); letter-spacing: .04em; }
.acc { border-top: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 18px; font-weight: 300; }
.acc[open] summary::after { content: '−'; }
.acc .bd { padding: 0 0 14px; }

.added { display: flex; flex-direction: column; gap: 12px; }
.added .hd { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.added .it { display: flex; gap: 12px; align-items: center; }
.added .it .ph { width: 64px; aspect-ratio: 3/4; background: var(--soft); overflow: hidden; border-radius: 4px; } .added .it .ph img { width: 100%; height: 100%; object-fit: cover; }
.added .it .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.added .it .bd small { color: var(--mute); font-size: 11.5px; }
.qsum { display: flex; gap: 12px; align-items: center; }
.qsum .ph { width: 64px; aspect-ratio: 3/4; background: var(--soft); overflow: hidden; flex: 0 0 auto; } .qsum .ph img { width: 100%; height: 100%; object-fit: cover; }
.qsum .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qsum .bd b { font-weight: 400; font-size: 13px; }


.citem { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.citem .ph { width: 96px; aspect-ratio: 3/4; background: var(--soft); overflow: hidden; flex: 0 0 auto; border-radius: 4px; } .citem .ph img { width: 100%; height: 100%; object-fit: cover; }
.citem .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.citem .bd .nm { font-size: 13px; line-height: 1.5; } .citem .bd .vr { font-size: 11.5px; color: var(--mute); }
.citem .rm { font-size: 11.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.citem .ft { display: flex; justify-content: space-between; align-items: center; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--rb); height: 36px; overflow: hidden; }
.qty button { width: 36px; height: 100%; display: grid; place-items: center; } .qty b { min-width: 28px; text-align: center; font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.sum { display: flex; flex-direction: column; gap: 6px; }
.sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--mute); }
.sumrow.save { color: var(--green); }
.sumrow.total { color: var(--ink); font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line); }
.sumrow.total .price { font-size: 16px; }


.banks { display: flex; gap: 10px; padding: 10px 0; }
.bank { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line2); border-radius: var(--rb); font-size: 11.5px; background: var(--paper); }
.bank.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .bank img { height: 32px; width: auto; max-width: 100px; object-fit: contain; }
.bank-ltr { width: 24px; height: 24px; display: grid; place-items: center; background: var(--soft); font-weight: 600; font-size: 12px; }
.how { margin: 8px 0 0; padding: 0 18px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink); }
[dir="ltr"] .how { padding: 0 0 0 18px; }
.how li { margin: 2px 0; }
.how li::marker { color: var(--mute); }
.merchant { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--rb); background: var(--soft); }
.merchant small { display: block; font-size: 11.5px; color: var(--mute); } .merchant b { font-size: 16px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.upl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: var(--rb); cursor: pointer; }
.upl img, .upl > span { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.upl .bd { flex: 1; } .upl .bd b { display: block; font-size: 13px; font-weight: 500; } .upl .bd small { font-size: 11.5px; color: var(--mute); }
.prog { height: 2px; background: var(--line); margin-top: 8px; } .prog span { display: block; height: 100%; background: var(--ink); }
.loc { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.loc .bd { flex: 1; min-width: 0; } .loc .bd b { display: block; font-size: 13px; font-weight: 500; } .loc .bd small { font-size: 11.5px; color: var(--mute); }
.donescr { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px var(--gut); }
.donescr .mark { width: 64px; height: 64px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.donescr h1 { font-size: 22px; font-weight: 300; } .donescr p { font-size: 13px; color: var(--mute); line-height: 1.8; max-width: 300px; }


.ocard { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: start; }
.ocard .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ocard .hd b { font-size: 13.5px; font-weight: 500; } .ocard .hd small { font-size: 11.5px; color: var(--mute); display: block; margin-top: 2px; }
.ocard .st { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ocard .st.done { color: var(--green); } .ocard .st.off { color: var(--mute); }
.steps { display: flex; align-items: flex-start; gap: 0; }
.steps .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9.5px; color: var(--mute2); text-align: center; position: relative; }
.steps .step span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line2); background: var(--paper); position: relative; z-index: 1; }

.steps .step::before { content: ''; position: absolute; top: 4px; inset-inline-start: -50%; inset-inline-end: 50%; height: 1px; background: var(--line); }
.steps .step:first-child::before { display: none; }
.steps .step.done span, .steps .step.now span { background: var(--ink); border-color: var(--ink); }
.steps .step.done::before, .steps .step.now::before { background: var(--ink); }
.steps .step.done, .steps .step.now { color: var(--ink); }
.tl { display: flex; flex-direction: column; }
.tls { display: flex; gap: 14px; }
.tls .col { display: flex; flex-direction: column; align-items: center; width: 14px; flex: 0 0 auto; }
.tls .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line2); background: var(--paper); flex: 0 0 auto; margin-top: 5px; display: grid; place-items: center; }
.tls .ln { flex: 1; width: 1px; background: var(--line); min-height: 22px; }
.tls:last-child .ln { display: none; }
.tls.done .dot, .tls.now .dot { background: var(--ink); border-color: var(--ink); }
.tls.done .ln { background: var(--ink); }
.tls .bd { flex: 1; min-width: 0; padding-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.tls .bd b { font-size: 13.5px; font-weight: 500; } .tls .bd small { font-size: 11.5px; color: var(--mute); line-height: 1.6; }
.tls.next .bd b { color: var(--mute2); font-weight: 400; }
.oline { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.oline:last-child { border-bottom: 0; }
.oline .ph { width: 56px; aspect-ratio: 3/4; background: var(--soft); overflow: hidden; flex: 0 0 auto; } .oline .ph img { width: 100%; height: 100%; object-fit: cover; }
.oline .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.oline .bd small { font-size: 11.5px; color: var(--mute); } .oline .bd .vr { display: flex; gap: 6px; font-size: 11px; color: var(--mute); }
.oline .pr { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .oline .pr small { font-size: 10.5px; color: var(--mute); }
.push { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.push .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.push .bd b { font-weight: 500; }
.nitem { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: start; align-items: flex-start; }
.nitem .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nitem .bd .hd { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 500; }
.nitem .bd .hd small { font-size: 11px; color: var(--mute2); font-weight: 400; white-space: nowrap; }
.nitem .bd p { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.nitem.read .bd .hd { font-weight: 400; }
.nitem .ud { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-top: 8px; flex: 0 0 auto; }

.rc-wrap { padding: 0; }
.rcpt { border: 1px solid var(--line2); padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.rcpt.compact { padding: 16px 14px; }
.rc-hd { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rc-hd b { font-size: 13px; font-weight: 500; letter-spacing: .04em; } .rc-hd small { font-size: 11px; color: var(--mute); }
.rc-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.rc-sep { height: 1px; background: var(--line); }
.rc-l { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; }
.rc-l .bd { display: flex; flex-direction: column; gap: 1px; } .rc-l .bd b { font-weight: 400; } .rc-l .bd small { font-size: 11px; color: var(--mute); }
.rc-tot .kv { padding: 6px 0; border: 0; }
.rc-ft { text-align: center; font-size: 11.5px; color: var(--mute); display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }


.tsec { display: flex; flex-direction: column; gap: 12px; }
.tstep { width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: start; }
.frow.on { border-inline-start: 3px solid var(--ink); padding-inline-start: 5px; }

.tmodel { flex: 0 0 auto; width: 104px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); padding: 0; background: var(--paper); text-align: center; }
.tmodel img { width: 104px; height: 130px; object-fit: cover; display: block; }
.tmodel small { font-size: 10.5px; color: var(--mute); padding: 0 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmodel.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .tmodel.on small { color: var(--ink); font-weight: 600; }
.tmodel { position: relative; } .tzoom { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.frow .ph.tzoomph { position: relative; cursor: zoom-in; } .frow .ph.tzoomph::after { content: ''; position: absolute; inset-inline-end: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.95) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'><path d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/></svg>") center/9px no-repeat; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.frow .ph { width: 48px; height: 48px; background: var(--soft); overflow: hidden; flex: 0 0 auto; } .frow .ph img { width: 100%; height: 100%; object-fit: cover; }
.frow .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .frow .bd b { font-size: 13.5px; font-weight: 400; } .frow .bd small { font-size: 11.5px; color: var(--mute); }
.frow.on .bd b { font-weight: 500; }
.tailor-hero { padding: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.tailor-hero h2 { font-size: 22px; font-weight: 300; line-height: 1.3; } .tailor-hero p { font-size: 13px; color: var(--mute); line-height: 1.7; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }


.sheet-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 40; }
.sheet-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(14,14,14,.35); opacity: 0; transition: opacity .22s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .28s var(--ease); padding-bottom: var(--safe-b); }
.sheet-wrap.open .sheet-bg { opacity: 1; } .sheet-wrap.open .sheet { transform: none; }
.sheet .grab { width: 32px; height: 2px; background: var(--line2); margin: 10px auto 0; }
.sheet-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px; padding-inline-start: var(--gut); }
.sheet-hd b { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.sheet-bd { padding: 6px var(--gut) 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

.viewer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 50; background: var(--paper); opacity: 0; transition: opacity .2s; display: flex; flex-direction: column; }
.viewer.open { opacity: 1; }
.vgal { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vgal::-webkit-scrollbar { display: none; }
.vi { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 40px 0; }
.vi img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s; }
.vi img.z { transform: scale(2.2); }
.vclose { position: absolute; top: calc(10px + var(--safe-t)); inset-inline-end: 10px; }
.vhint { position: absolute; bottom: calc(24px + var(--safe-b)); left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: .1em; color: var(--mute); }
.viewer .gdots { position: absolute; bottom: calc(48px + var(--safe-b)); left: 0; right: 0; }

.toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--rb); box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 12.5px; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.offline { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--ink); color: #fff; font-size: 11.5px; letter-spacing: .06em; display: flex; gap: 8px; align-items: center; justify-content: center; padding: calc(6px + var(--safe-t)) 12px 6px; transform: translateY(-100%); transition: transform .25s; }
.offline.show { transform: none; }

.sk { background: var(--soft); position: relative; overflow: hidden; }
.sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: sk 1.3s infinite; }
@keyframes sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.lg-anim { animation: lg .9s var(--ease) both; }
@keyframes lg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.band { display: block; }


.auth-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: calc(30px + var(--safe-t)) var(--gut) 6px; background: var(--paper); z-index: 1; }
.auth-top .lang-pill { position: absolute; top: calc(12px + var(--safe-t)); inset-inline-start: var(--gut); display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--paper); }
.auth-top .lang-pill button { padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--mute); transition: background var(--dur), color var(--dur); }
.auth-top .lang-pill button.on { background: var(--ink); color: #fff; }
.auth-top .rule { display: flex; align-items: center; gap: 8px; color: var(--gold2); margin-top: 2px; }
.auth-top .rule i { width: 34px; height: 1px; background: currentColor; } .auth-top .rule b { font-size: 8px; line-height: 1; }
.auth-top .tag { font-size: 11.5px; color: var(--mute); word-spacing: .2em; }
.auth { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.auth .hd { display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; }
.auth .hd h1 { font-size: 22px; font-weight: 400; }
.auth .hd p { font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.auth .fld { display: flex; flex-direction: column; gap: 6px; }
.auth .fld label { font-size: 11.5px; color: var(--mute); font-weight: 500; }
.auth .box { display: flex; align-items: center; height: 52px; border: 1px solid var(--line2); border-radius: var(--rb); background: var(--paper); padding: 0 14px; gap: 12px; transition: border-color var(--dur), box-shadow var(--dur); }
.auth .box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,14,.06); }
.auth .box .cc { direction: ltr; font-size: 16px; color: var(--mute); padding-inline-end: 12px; border-inline-end: 1px solid var(--line); line-height: 1; letter-spacing: .02em; }
.auth .box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 18px; letter-spacing: .05em; padding: 0; }
.auth .box input:focus { outline: none; }
.auth .box input::placeholder { color: var(--mute2); letter-spacing: .05em; }
.auth .box.pin { direction: ltr; }
.auth .box.pin input { text-align: center; font-size: 24px; letter-spacing: .6em; padding-inline-start: .6em; }
.auth .box.pin input::placeholder { color: var(--line2); letter-spacing: .6em; }
.auth .box.code { height: 62px; } .auth .box.code input { font-size: 28px; letter-spacing: .5em; padding-inline-start: .5em; }
.auth .btn-ink { height: 52px; border-radius: var(--rb); font-size: 14px; }
.auth .btn-line { height: 50px; border-radius: var(--rb); }
.auth .link { text-align: center; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.auth-top .auth-bar { width: 100%; display: flex; justify-content: flex-start; margin-bottom: 2px; }
.auth-top .auth-bar .lang-pill { position: static; }
.auth2 { gap: 18px; padding-top: 14px; }
.auth2 .card { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(14,14,14,.06); }
.auth2 .card h1 { font-size: 20px; font-weight: 500; line-height: 1.3; }
.auth2 .card .sub { font-size: 12.5px; line-height: 1.7; color: var(--mute); margin-top: -8px; }
.auth2 .lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth2 .lrow a { font-size: 12px; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.auth2 .box { height: 52px; border-radius: 10px; }
.auth2 .btn-ink { height: 52px; border-radius: 10px; margin-top: 2px; }
.auth2 .newbox { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; padding: 4px 0 0; }
.auth2 .newbox .eyebrow { align-self: center; }
.auth2 .newbox .btn-line { height: 50px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--ink); }
.auth2 .newbox p { font-size: 12px; line-height: 1.75; color: var(--mute); padding: 0 6px; }
.auth2 .ghost { align-self: center; font-size: 13px; color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.auth2 .terms { margin-top: 2px; }
.auth3 { gap: 16px; padding-top: 26px; align-items: stretch; }
.auth3 .box { height: 52px; border-radius: var(--rb); border-color: var(--line2); }
.auth3 .box input { font-size: 17px; }
.pins { display: flex; gap: 12px; justify-content: center; position: relative; padding: 2px 0; }
.pins .cell { flex: 1; max-width: 64px; height: 56px; border: 1px solid var(--line2); border-radius: var(--rb); background: var(--paper); display: grid; place-items: center; font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color var(--dur), box-shadow var(--dur); }
.pins.six { gap: 8px; } .pins.six .cell { max-width: 50px; height: 56px; font-size: 22px; }
.pins .cell.on { border-color: var(--ink); }
.pins .cell.cur { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,14,.06); }
.pins input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; color: transparent; background: transparent; border: 0; padding: 0; }
.auth3 .btn-ink { height: 52px; border-radius: var(--rb); font-size: 14.5px; margin-top: 4px; }
.auth3 .alink { text-align: center; font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 4px 0; }
.auth3 .newline { text-align: center; font-size: 13.5px; color: var(--ink2); }
.auth3 .newline a { color: var(--gold-deep); font-weight: 500; text-decoration: none; }
.auth3 .ghost { align-self: center; font-size: 12.5px; color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.auth3 .terms { margin-top: 2px; }
.auth.stepper { gap: 0; padding-top: 14px; }
.vsteps { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.vsteps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; position: relative; padding: 10px 0; color: var(--mute2); font-size: 15px; }
.vsteps li .n { width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--mute); display: grid; place-items: center; font-size: 12.5px; font-weight: 500; }
.vsteps li.now { color: var(--ink); font-weight: 500; } .vsteps li.now .n { background: var(--ink); color: #fff; }
.vsteps li.done { color: var(--ink2); } .vsteps li.done .n { background: var(--gold); color: #fff; }
.vsteps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 13px; top: 42px; bottom: -4px; width: 2px; background: var(--line); }
.vsteps li.done::after, .vsteps li.now::after { background: var(--line2); }
.vsteps .stepbody { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 10px 0 14px; font-weight: 400; color: var(--ink); }
.vsteps .stepbody .hd h1 { font-size: 19px; }
.vsteps .stepbody .wa-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.vsteps .stepbody .wa-lbl svg { color: #25a05a; }
.vsteps .stepbody .box { border-radius: 6px; }
.auth3 .helplink { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--rb); border: 1px solid var(--line2); background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none; margin-bottom: 4px; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.crow .bd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crow .bd small { font-size: 12.5px; color: var(--mute); } .crow .bd b { font-size: 17px; font-weight: 500; text-align: start; }
.crow .cact { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--rb); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.auth .firstbox { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed var(--line2); border-radius: 6px; background: var(--paper2, var(--paper)); }
.auth .firstbox b { font-size: 14px; font-weight: 500; }
.auth .firstbox p { font-size: 12.5px; line-height: 1.75; color: var(--mute); }
.auth .firstbox .btn-line { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth .member { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(184,150,46,.35); background: var(--gold-soft); border-radius: 6px; font-size: 12.5px; color: var(--gold-deep); }
.auth .terms { margin-top: auto; padding-top: 8px; text-align: center; font-size: 11px; line-height: 1.7; color: var(--mute); }
.auth .terms a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


.cstrip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0; scrollbar-width: none; }
.cstrip::-webkit-scrollbar { display: none; }
.cstrip::before, .cstrip::after { content: ''; flex: 0 0 calc(var(--gut) - 12px); }
.ctile { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; text-align: center; }
.ctile .im { display: block; width: 84px; height: 104px; border-radius: 10px; background: var(--soft); overflow: hidden; position: relative; }
.ctile .im img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ctile .im img.ld { opacity: 1; }
.ctile .nm { font-size: 11.5px; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.ctile.red .im::after { content: '%'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 500; color: #fff; background: linear-gradient(160deg, rgba(160,32,24,.85), rgba(60,10,8,.85)); }
.ctile.gold .im::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,14,.55), rgba(14,14,14,0) 60%); }
.ctile.gold .nm { color: var(--gold-deep); }
.chip .n { font-size: 10px; color: var(--mute2); margin-inline-start: 3px; font-variant-numeric: tabular-nums; }
.hchips .lbl-chip { border: 0; padding-inline-start: 0; color: var(--mute); font-size: 11.5px; }

.pcard .ph:has(img:not(.ld))::after, .ctile .im:has(img:not(.ld))::after, .hero .im:has(img:not(.ld))::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%); animation: sk 1.4s linear infinite; pointer-events: none; }
.ctile.red .im:has(img:not(.ld))::after { animation: none; }

.pushcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid rgba(184,150,46,.35); background: var(--gold-soft); border-radius: 6px; text-align: start; }
.pushcard .bd { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pushcard b { font-size: 13.5px; font-weight: 500; } .pushcard span { font-size: 12px; color: var(--mute); line-height: 1.6; }
.pushcard .acts { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.nitem .nimg { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--soft); } .nitem .nimg img { width: 100%; height: 100%; object-fit: cover; }

details.facet { border-top: 1px solid var(--line); }
details.facet summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; font-size: 14px; cursor: pointer; }
details.facet summary::-webkit-details-marker { display: none; }
details.facet summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur); margin-inline-end: 4px; }
details.facet[open] summary::after { transform: rotate(-135deg); }
details.facet summary .cnt { font-style: normal; font-size: 11px; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 7px; margin-inline-start: auto; }
details.facet .chip .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); margin-inline-end: 6px; vertical-align: -1px; }

html[dir="rtl"] .auth .box .cc { padding: 0 0 0 12px; border-inline-end: 0; border-left: 1px solid var(--line); }

body.kb .tabs { display: none; } body.kb .with-tabs .sticky { bottom: 0; }


.badge.bump { animation: badgeBump .45s var(--ease); }
@keyframes badgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .badge.bump { animation: none; } }


.citem .lpr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.citem .lsave { font-size: 11px; color: var(--green); font-weight: 500; }
.sum .savedall { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 7px 10px; border-radius: var(--rb); background: var(--green-soft); color: var(--green); font-size: 12.5px; font-weight: 500; }


.auth .lmode { border-top: 0; gap: 4px; margin: 0 0 4px; background: #f3f3f1; border-radius: 10px; padding: 4px; flex-wrap: nowrap; }
.auth .lmode .size { flex: 1 1 0; height: 40px; padding: 0 8px; color: var(--mute); border: 0; border-radius: 8px; box-shadow: none !important; font-size: 14px; }
.auth .lmode .size.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1) !important; }
.auth .welcome { text-align: center; margin: 2px 0 2px; }
.auth .welcome h1 { font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.auth .welcome p { font-size: 14px; line-height: 1.7; color: var(--mute); margin: 0; }
.auth .box input[type="email"] { letter-spacing: 0 !important; text-align: start; }

.auth .box:not(.pin):not(.code) input::placeholder,
html[lang="ar"] .auth .box:not(.pin):not(.code) input::placeholder,
.auth .box input[type="email"], html[lang="ar"] .auth .box input[type="email"] { letter-spacing: 0; }

.auth .box.pw input { letter-spacing: 0; font-size: 18px; }
.auth .box.pw input[type="password"] { letter-spacing: .12em; }
.auth .box.pw input::placeholder { letter-spacing: 0; }
.auth .box.pw .eye { flex: none; font-size: 12.5px; font-weight: 500; color: var(--mute); padding: 6px 2px; background: none; border: 0; }
.auth.stepper .lmode { margin: 0 0 16px; }


:root { --r: 0px; --r2: 0px; --rb: 0px; }
.btn { font-weight: 600; letter-spacing: .02em; }

.top .title { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.hhead .brand b { font-size: 19px; font-weight: 700; }
.sec h2 { font-size: 18px; font-weight: 600; }
.sec .more { font-size: 11.5px; font-weight: 500; }
.hero .tx h3, .hcar .tx h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
.hero .tx .cta, .hcar .tx .cta { font-size: 12px; font-weight: 600; }

.pcard .nm { font-size: 12.5px; }
.pcard .price { font-size: 13px; font-weight: 500; }
.pcard .ncol { font-size: 11px; color: var(--mute); padding: 0 8px; margin-top: -3px; }
.pcard .tagx { font-weight: 600; }
.pcard .tagx.red { background: var(--red); color: #fff; }

.pinfo .title h1 { font-size: 18px; font-weight: 500; line-height: 1.45; }
.pinfo .title .price.lg { font-size: 17px; font-weight: 600; }
.swatch.pic { border-radius: 0; }
.accs { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.acc summary { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.accl { margin: 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.9; color: var(--ink2); }
.avail { display: flex; flex-direction: column; }
.avail .lbl { margin-bottom: 4px; }
.avail .av { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.avail .av b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--mute2); }
.avail .av b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avail .av.on b { color: var(--green); }
.avail small { font-size: 11px; color: var(--mute); margin-top: 6px; }

.tab { font-size: 10px; }

.auth3 .guestbtn { height: 48px; font-size: 13.5px; }

.donescr .mark { width: 76px; height: 76px; background: var(--ink); color: #fff; border: 0; }
.donescr h1 { font-size: 26px; font-weight: 600; }

.ctile .im, .added .it .ph, .citem .ph, .pushcard, .auth .member, .auth .firstbox { border-radius: 0; }

@media (max-width: 899.98px), (max-height: 599.98px) {
  .screen:not(.with-tabs) > .scroll.with-sticky { padding-bottom: 28px !important; }
}


@media (max-width: 899.98px), (max-height: 599.98px) {
  .tabs { left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); padding: 5px; gap: 2px; border: 1px solid rgba(255,255,255,.6); border-radius: 30px;
    background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 10px 30px rgba(14,14,14,.14), 0 1px 3px rgba(14,14,14,.08), inset 0 0 0 .5px rgba(14,14,14,.06); }
  .tab { height: 50px; border-radius: 25px; transition: background var(--dur), color var(--dur); }
  .tab.on { background: rgba(14,14,14,.07); }
  .tab:active { background: rgba(14,14,14,.1); }
  .tab .badge { top: 3px; }
  
  .with-tabs .scroll { padding-bottom: calc(96px + var(--safe-b)) !important; }
  .with-tabs .sticky { bottom: calc(76px + var(--safe-b)); }
  .with-tabs .scroll.with-sticky { padding-bottom: calc(200px + var(--safe-b)) !important; }
  .toast { bottom: calc(96px + var(--safe-b)); }
  body.kb .with-tabs .sticky { bottom: 0; }
}


@media (max-width: 899.98px), (max-height: 599.98px) {
  html, body { overscroll-behavior: none; }
  body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; }
  #app, .scroll, .sheet-bd, .vgal { overscroll-behavior: none; }
  .hrow, .chips, .gal, .hcar .track, .cstrip, .banks, .hchips { overscroll-behavior-x: none; }
}


:root { --bnh: clamp(420px, calc(100dvh - 215px), 760px); }
.bn { display: block; width: 100%; }
.bn-im { display: block; width: 100%; height: var(--bnh); background: var(--soft); overflow: hidden; }
.bn-im img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .45s ease; }
.bn-im img.ld { opacity: 1; }

.bn.first .bn-im { height: clamp(440px, calc(100dvh - 200px), 660px); }

.bn.first { padding-top: var(--safe-t, 0px); }
.bn.first .bn-im img { object-position: 50% 20%; }
.bn-tx { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px var(--gut) 0; }
.bn-tx b { font-size: 15px; font-weight: 600; line-height: 1.4; min-width: 0; }
.bn-cta { flex: 0 0 auto; font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

.bnwrap .hcar .im { aspect-ratio: auto; height: var(--bnh); }
.bnwrap .hcar .tx { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 14px; row-gap: 0; padding-top: 12px; }
.bnwrap .hcar .tx .eyebrow { flex: 0 0 100%; }
.bnwrap .hcar .tx h3 { font-size: 15px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.bnwrap .hcar .tx .sub { flex: 0 0 100%; order: 3; }
.bnwrap .hcar .tx .cta { margin-top: 0; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }

.sqgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.sq { display: block; aspect-ratio: 1; background: #f1f1ef; overflow: hidden; position: relative; }
.sq img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0; transition: opacity .35s ease; }
.sq img.ld { opacity: 1; }

.ctgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.ct { display: flex; flex-direction: column; align-items: flex-start; text-align: start; padding-bottom: 22px; }
.ct .im { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; }
.ct .im img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ct .im img.ld { opacity: 1; }
.ct b { font-size: 14px; font-weight: 600; padding: 10px 14px 0; }
.ct small { font-size: 12px; color: var(--ink2); padding: 2px 14px 0; }
.ct.red b { color: var(--red); }

.hhead { flex-wrap: wrap; }
.hcats { flex: 0 0 100%; order: 3; display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; padding-inline-start: 12px; overscroll-behavior-x: none; }
.hcats::-webkit-scrollbar { display: none; }
.hcats button { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; padding: 4px 0; }
.hcats button.red { color: var(--red); }
@media (min-width: 900px) and (min-height: 600px) {
  .bn, .bnwrap { padding: 0 var(--gut); }
  .bn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 56px; }
  .bn-im, .bn.first .bn-im { height: auto; aspect-ratio: 3 / 4; max-height: 640px; }
  .bn-tx { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
  .bn-tx b { font-size: 30px; font-weight: 600; line-height: 1.25; }
  .bnwrap .hcar .im { height: auto; aspect-ratio: 4 / 5; }
  .sqgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ctgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


@media (max-width: 899.98px), (max-height: 599.98px) {
  .hhead { position: absolute; top: 0; left: 0; right: 0; z-index: 12; background: transparent; border-bottom: 1px solid transparent;
    transition: background var(--dur) ease, border-color var(--dur) ease, -webkit-backdrop-filter var(--dur) ease, backdrop-filter var(--dur) ease; }
  .hhead.solid { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(14,14,14,.06); }
  .hhead .iconbtn, .hhead .langbtn { color: var(--ink); }
}


.wel1 h1, .tailor-hero h2, .auth .welcome h1, .auth .hd h1 { font-weight: 700; }
.pill, .auth .lmode, .auth .lmode .size, .auth .lmode .size.on, .auth-top .lang-pill, .auth-top .lang-pill button, .opening .skip, .merchant, .bank, .upl, .qty { border-radius: 0; }



.lhead { display: flex; flex-direction: column; gap: 2px; padding: 2px var(--gut) 12px; }
.lhead h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.lhead span { font-size: 12px; color: var(--mute); min-height: 1.5em; }

.pcard .mprice { font-size: 11px; color: var(--gold-deep); padding: 0 8px; margin-top: -2px; font-weight: 500; }

.attr .hd .lbl .mysize { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; background: var(--ink); padding: 1px 6px; margin-inline-start: 8px; vertical-align: 1px; }

.fav.pop svg { animation: favPop .42s var(--ease); }
@keyframes favPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

.tab.on[data-tab="home"] svg, .tab.on[data-tab="favs"] svg, .tab.on[data-tab="me"] svg { fill: currentColor; }

.pcard, .sq, .ct, .bn-im, .hcar .sl { transition: transform .18s var(--ease); }
.pcard:active, .sq:active, .ct:active, .bn-im:active, .hcar .sl:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .fav.pop svg { animation: none; } .pcard:active, .sq:active, .ct:active, .bn-im:active, .hcar .sl:active { transform: none; } }


.fpick { display: flex; flex-direction: column; gap: 14px; }
.fsel, .msel { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ink); background: var(--paper); }
.fsel .ph { width: 64px; height: 64px; background: var(--soft); overflow: hidden; flex: 0 0 auto; } .fsel .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsel .bd, .msel .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fsel .bd small, .msel .bd small { font-size: 11px; color: var(--mute); }
.fsel .bd b, .msel .bd b { font-size: 14.5px; font-weight: 600; }
.fsel .vsum { font-size: 12px; color: var(--ink); }
.chg { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--line2); background: var(--paper); font-size: 12.5px; color: var(--ink); }
.msel .bd .chg { align-self: flex-start; margin-top: 6px; }
.msel .mimg { width: 112px; height: 140px; flex: 0 0 auto; overflow: hidden; background: var(--soft); cursor: zoom-in; } .msel .mimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpick { display: flex; flex-direction: column; gap: 14px; }
.vgrp { display: flex; flex-direction: column; gap: 8px; }
.vgrp .lbl { font-size: 12.5px; color: var(--mute); } .vgrp .lbl b { color: var(--ink); font-weight: 600; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip { height: 38px; padding: 0 14px; border: 1px solid var(--line2); background: var(--paper); font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, background .15s; }
.vchip.on { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; }
.vchip.dim { color: var(--mute2); border-style: dashed; }
.vchip .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line2); }

.mcols { margin-bottom: 4px; }