/* Customer website — inner pages (stores, store, cart, checkout, tracking, account, login) */

.page-title { margin-top: 10px; }
.page-sub { color: var(--muted); margin-top: 4px; }
.section-gap { margin-top: 28px; }

/* header avatar for signed-in pages */
.me-link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; }
.me-link .avatar { width: 32px; height: 32px; font-size: 12px; }
@media (max-width: 520px) { .me-link span:not(.avatar) { display: none; } .me-link { padding: 0 4px; } }

/* ---------- address bar ---------- */
.addr-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: linear-gradient(140deg, #FFF3F8, #FFE7F0); }
.addr-bar .addr-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--pink); box-shadow: var(--sh-1); flex: none; }
.addr-bar .addr-ico svg { width: 20px; height: 20px; }
.addr-bar b { display: block; font-size: 15px; }
.addr-bar small { color: var(--muted); font-size: 13px; }
@media (max-width: 620px) { .addr-bar { flex-wrap: wrap; } .addr-bar .btn { width: 100%; } }

/* ---------- stores listing ---------- */
.cat-chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 10px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.cat-chip img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.cat-chip:hover { border-color: #F7B3CE; }
.cat-chip.active { border-color: var(--pink); background: var(--pink); color: #fff; box-shadow: var(--sh-btn); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.toolbar .row { gap: 10px; }
.open-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.store-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .store-grid { grid-template-columns: 1fr; } }
.result-count { font-size: 14px; color: var(--muted); }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px; min-height: 140px; border-radius: var(--r-lg); color: #fff; overflow: hidden; }
.offer b { display: block; font-size: 20px; line-height: 1.3; }
.offer p { font-size: 13px; opacity: .9; margin-top: 4px; }
.offer .btn { margin-top: 12px; background: #fff; color: var(--pink-700); }
.offer.o1 { background: linear-gradient(135deg, #F0287A, #FF6FA8); }
.offer.o2 { background: linear-gradient(135deg, #7C4DFF, #B18CFF); }
.offer.o3 { background: linear-gradient(135deg, #241629, #5A3A63); }
.offer .emo { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }

/* ---------- store page ---------- */
.store-hero { position: relative; height: 230px; border-radius: var(--r-xl); overflow: hidden; display: flex; align-items: center; justify-content: flex-end; padding-inline: 56px; background: radial-gradient(600px 260px at 15% 50%, #FFD0E2 0%, rgba(255, 208, 226, 0) 70%), linear-gradient(140deg, #FFF3F8, #FFDDEA); }
.store-hero .emo.hero-emo { width: 190px; height: 190px; rotate: -8deg; }
.store-hero .hero-emo-2 { position: absolute; inset-inline-end: 260px; top: 30px; width: 70px; height: 70px; rotate: 12deg; opacity: .9; }
.store-head { position: relative; display: flex; align-items: flex-end; gap: 18px; margin-top: -56px; padding-inline: 28px; flex-wrap: wrap; }
.store-logo { position: relative; z-index: 2; width: 112px; height: 112px; border-radius: 30px; background: #fff; display: grid; place-items: center; box-shadow: var(--sh-2); border: 4px solid #fff; flex: none; }
.store-logo .emo { width: 72px; height: 72px; }
.store-title { flex: 1; min-width: 240px; padding-top: 64px; padding-bottom: 4px; }
.store-title h1 { font-size: 30px; }
.store-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fact { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--petal); border: 1px solid var(--line); font-size: 13px; }
.fact svg { width: 16px; height: 16px; color: var(--pink); }
.fact b { font-weight: 600; }
.multi-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--lavender); color: var(--grape-700); font-size: 14px; }
.multi-note svg { width: 18px; height: 18px; flex: none; }

.sec-tabs { position: sticky; top: 76px; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); margin-top: 22px; }
.menu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 22px; }
@media (max-width: 1000px) { .menu-layout { grid-template-columns: 1fr; } .menu-side { display: none; } }
.menu-sec { scroll-margin-top: 140px; }
.menu-sec + .menu-sec { margin-top: 30px; }
.menu-sec h2 { font-size: 20px; margin-bottom: 14px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 680px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-item { display: flex; gap: 14px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; cursor: pointer; transition: box-shadow .2s, border-color .2s; text-align: start; width: 100%; }
.menu-item:hover { box-shadow: var(--sh-2); border-color: #F6CADC; }
.menu-item .mi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-item b { font-size: 15px; }
.menu-item p { font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-item .mi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.mi-art { position: relative; width: 108px; height: 108px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; background: linear-gradient(150deg, #FFF2F7, #FFDDEA); }
.mi-art .emo { width: 74px; height: 74px; }
.mi-tag { position: absolute; top: 6px; inset-inline-start: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: #fff; color: var(--pink-700); font-size: 11px; font-weight: 600; box-shadow: var(--sh-1); }
.add-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; box-shadow: var(--sh-btn); }
.add-btn svg { width: 18px; height: 18px; }

.mini-cart .mc-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mini-cart .mc-line:last-child { border-bottom: 0; }

.cart-float { position: fixed; bottom: 22px; left: 50%; translate: -50% 0; z-index: 60; display: none; align-items: center; gap: 14px; height: 60px; padding: 0 10px 0 22px; border-radius: var(--r-pill); background: var(--pink); color: #fff; box-shadow: var(--sh-3); font-weight: 600; }
.cart-float.show { display: flex; animation: pop .3s var(--ease); }
.cart-float .cf-count { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .25); font-size: 13px; }
.cart-float .btn { background: #fff; color: var(--pink-700); }

/* product modal */
.pm-art { height: 200px; display: grid; place-items: center; background: linear-gradient(150deg, #FFF2F7, #FFDDEA); }
.pm-art .emo { width: 140px; height: 140px; }
.opt-group + .opt-group { margin-top: 18px; }
.opt-group h4 { font-size: 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); cursor: pointer; font-size: 14px; }
.opt + .opt { margin-top: 8px; }
.opt input { accent-color: var(--pink); width: 18px; height: 18px; }
.opt:has(input:checked) { border-color: var(--pink); background: var(--blush-2); }
.opt .grow { font-weight: 500; }

/* reviews */
.rev-summary { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.rev-big { text-align: center; }
.rev-big b { font-size: 48px; line-height: 1; display: block; }
.rev-bars .row { gap: 10px; font-size: 13px; }
.rev-bars .bar { flex: 1; }
.review { padding: 18px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
@media (max-width: 620px) { .rev-summary { grid-template-columns: 1fr; } }

/* ---------- cart ---------- */
.cart-group { padding: 0; overflow: hidden; }
.cart-group + .cart-group { margin-top: 18px; }
.cg-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--petal); border-bottom: 1px solid var(--line); }
.cg-head .emo-tile { width: 46px; height: 46px; border-radius: 14px; }
.cg-head .emo { width: 32px; height: 32px; }
.cart-line { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .emo-tile { width: 72px; height: 72px; }
.cart-line .cl-text { flex: 1; min-width: 0; }
.cart-line .cl-text b { display: block; font-size: 15px; }
.cart-line .cl-actions { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; }
.cart-line .cl-actions button { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.cart-line .cl-actions button:hover { color: var(--pink); }
.cart-line .cl-actions svg { width: 14px; height: 14px; }
.cart-line .cl-price { min-width: 92px; text-align: end; }
@media (max-width: 560px) { .cart-line { flex-wrap: wrap; } .cart-line .cl-price { min-width: 0; } .cart-line .emo-tile { width: 56px; height: 56px; } }
.free-meter { padding: 14px 16px; border-radius: var(--r-md); background: var(--blush-2); }
.free-meter p { font-size: 13px; margin-bottom: 8px; }
.promo-form { display: flex; gap: 8px; }
.promo-form .input { height: 44px; }
.promo-ok { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 600; }
.promo-ok svg { width: 16px; height: 16px; }
.rush-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); }
.rush-row .emo { width: 36px; height: 36px; }
.fee-hint { font-size: 11.5px; color: var(--muted); display: block; }
.later-list .cart-line { opacity: .85; }

/* ---------- checkout: pick cards ---------- */
.co-step { padding: 22px; }
.co-step + .co-step { margin-top: 18px; }
.co-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.co-step-head .step-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.co-step-head h2 { font-size: 18px; flex: 1; }
.picks { display: grid; gap: 10px; }
.picks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .picks.cols-2 { grid-template-columns: 1fr; } }
.pick { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .pk-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blush-2); color: var(--pink); flex: none; }
.pick .pk-ico svg { width: 20px; height: 20px; }
.pick .pk-text { flex: 1; min-width: 0; }
.pick .pk-text b { display: block; font-size: 14px; }
.pick .pk-text small { color: var(--muted); font-size: 12.5px; }
.pick .pk-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E2CFDA; flex: none; display: grid; place-items: center; }
.pick:has(input:checked) { border-color: var(--pink); background: var(--blush-2); }
.pick:has(input:checked) .pk-radio { border-color: var(--pink); }
.pick:has(input:checked) .pk-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.pick:has(input:focus-visible) { outline: 3px solid rgba(240, 40, 122, .45); outline-offset: 2px; }
.pay-sub { display: none; margin: -2px 0 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--petal); border: 1px dashed var(--line-2); }
.pay-sub.show { display: block; }
.applepay-mark { font-weight: 700; direction: ltr; display: inline-flex; align-items: center; gap: 2px; }
.slot-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.co-map { height: 170px; margin-bottom: 14px; }

/* ---------- tracking ---------- */
.track-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .track-layout { grid-template-columns: 1fr; } }
.track-map { height: 560px; }
@media (max-width: 620px) { .track-map { height: 380px; } }
.eta-card { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-2); }
.eta-card .eta-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--pink); direction: ltr; }
.eta-card small { display: block; color: var(--muted); font-size: 12px; }
.map-legend { position: absolute; bottom: 16px; inset-inline-start: 16px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: #fff; font-size: 12px; font-weight: 600; box-shadow: var(--sh-1); }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.driver-card { display: flex; align-items: center; gap: 14px; }
.otp-show { display: flex; gap: 8px; direction: ltr; justify-content: center; margin: 10px 0 6px; }
.otp-show span { width: 48px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 2px solid var(--pink); font-size: 26px; font-weight: 700; color: var(--pink-700); }
.otp-panel { background: linear-gradient(140deg, #FFF1F6, #FFE3EE); border: 0; }

/* ---------- account ---------- */
.acct-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .acct-layout { grid-template-columns: minmax(0, 1fr); } }
.acct-layout > *, .layout-aside > *, .track-layout > * { min-width: 0; }
.acct-side { padding: 20px; }
.acct-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.acct-nav button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: start; }
.acct-nav button svg { width: 18px; height: 18px; }
.acct-nav button:hover { background: var(--blush-2); color: var(--pink-700); }
.acct-nav button.active { background: var(--pink); color: #fff; box-shadow: var(--sh-btn); }
@media (max-width: 960px) { .acct-nav { flex-direction: row; overflow-x: auto; } .acct-nav button { white-space: nowrap; } }
.order-card { padding: 18px 20px; }
.order-card + .order-card { margin-top: 14px; }
.order-card .oc-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oc-arts { display: flex; }
.oc-arts .emo-tile { width: 52px; height: 52px; border: 3px solid #fff; border-radius: 16px; }
.oc-arts .emo-tile + .emo-tile { margin-inline-start: -14px; }
.oc-arts .emo { width: 34px; height: 34px; }
.order-card .oc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wallet-card { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-xl); color: #fff; background: radial-gradient(420px 220px at 10% 0%, #FF7CB2 0%, rgba(255, 124, 178, 0) 70%), linear-gradient(135deg, #F0287A, #B3134F); box-shadow: var(--sh-3); }
.wallet-card .wc-bal { font-size: 40px; font-weight: 700; direction: ltr; display: inline-block; line-height: 1.1; }
.wallet-card .wc-bal small { font-size: 18px; font-weight: 500; opacity: .85; }
.wallet-card .logo { color: #fff; }
.wallet-card .wc-art { position: absolute; inset-inline-end: 22px; bottom: -6px; width: 120px; height: 120px; opacity: .95; }
.wallet-card .btn { background: #fff; color: var(--pink-700); }
.tx { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tx:last-child { border-bottom: 0; }
.tx-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.tx-ico svg { width: 19px; height: 19px; }
.tx .grow b { display: block; font-size: 14px; }
.tx .grow small { color: var(--muted); font-size: 12.5px; }
.amt-plus { color: var(--ok); font-weight: 700; direction: ltr; }
.amt-minus { color: var(--ink); font-weight: 700; direction: ltr; }
.amount-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.addr-card { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.addr-card .pk-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blush-2); color: var(--pink); flex: none; }
.addr-card .pk-ico svg { width: 20px; height: 20px; }
.referral { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(140deg, #F7F1FF, #EFE5FF); flex-wrap: wrap; }
.ref-code { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: var(--r-pill); background: #fff; border: 1.5px dashed var(--grape); font-weight: 700; letter-spacing: .08em; direction: ltr; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-weight: 600; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--muted); transition: rotate .2s var(--ease); flex: none; }
.faq details[open] summary svg { rotate: 180deg; color: var(--pink); }
.faq details p { padding: 0 0 16px; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.help-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.help-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; text-align: start; }
.help-tile:hover { border-color: var(--pink); }
.help-tile .emo { width: 40px; height: 40px; }
@media (max-width: 620px) { .help-tiles { grid-template-columns: 1fr; } }
.photo-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border-radius: var(--r-md); border: 2px dashed var(--line-2); color: var(--muted); font-size: 13px; text-align: center; cursor: pointer; }
.photo-drop svg { width: 26px; height: 26px; color: var(--pink); }
.stars-input { display: flex; gap: 6px; direction: ltr; justify-content: center; }
.stars-input button svg { width: 34px; height: 34px; color: #E7D6DF; }
.stars-input button.on svg { color: #FFB800; fill: #FFB800; }

/* ---------- login ---------- */
.login-wrap { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1fr 1fr; }
.login-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; background: radial-gradient(700px 420px at 50% 40%, #FFE0EC 0%, rgba(255, 224, 236, 0) 70%), linear-gradient(180deg, #FFF6F9, #FFE9F1); text-align: center; }
.login-art img { width: min(460px, 100%); -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); animation: floaty 6s ease-in-out infinite; }
.login-art h2 { font-size: 28px; }
.login-art p { color: var(--ink-2); max-width: 36ch; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; }
.phone-input { display: flex; align-items: center; height: 54px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; overflow: hidden; direction: ltr; transition: border-color .2s, box-shadow .2s; }
.phone-input:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 40, 122, .12); }
.phone-input .cc { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; border-inline-end: 1.5px solid var(--line-2); font-weight: 600; background: var(--petal); }
.phone-input input { flex: 1; height: 100%; border: 0; outline: 0; padding: 0 14px; font-size: 17px; letter-spacing: .04em; background: none; }
.otp-boxes { display: flex; gap: 8px; direction: ltr; justify-content: space-between; }
.otp-boxes input { width: 100%; max-width: 58px; height: 62px; text-align: center; font-size: 24px; font-weight: 700; border: 1.5px solid var(--line-2); border-radius: 14px; outline: 0; background: #fff; transition: border-color .2s, box-shadow .2s; }
.otp-boxes input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 40, 122, .12); }
.otp-boxes input.filled { border-color: var(--pink); background: var(--blush-2); }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social button { height: 48px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 13px; }
.social button:hover { border-color: var(--pink); }
.social svg { width: 20px; height: 20px; }
.login-step { display: none; flex-direction: column; gap: 18px; }
.login-step.active { display: flex; animation: fade .25s var(--ease); }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-art { padding: 24px; } .login-art img { width: 260px; } .login-art h2, .login-art p { display: none; } }

button.pick { width: 100%; text-align: start; }
.pick .pk-text b.applepay-mark { display: flex; }
[hidden] { display: none !important; }

@media (max-width: 620px) {
  .store-title { padding-top: 10px; }
  .store-head { padding-inline: 8px; }
  .store-hero { padding-inline: 24px; height: 190px; }
  .store-hero .emo.hero-emo { width: 140px; height: 140px; }
  .store-hero .hero-emo-2 { inset-inline-end: 180px; }
}
@media (max-width: 560px) {
  .cart-line .cl-text { flex: 1 1 calc(100% - 72px); }
  .cart-line .qty { margin-inline-start: 70px; }
  .cart-line .cl-price { margin-inline-start: auto; }
  .cg-head { flex-wrap: wrap; padding: 14px 16px; }
  .cg-head .grow { flex: 1 1 calc(100% - 60px); }
  .cg-head > .small { margin-inline-start: 58px; }
  .cart-line { padding: 14px 16px; }
}
@media (max-width: 620px) {
  .order-card .oc-top .grow { flex: 1 1 calc(100% - 90px); }
  .order-card .oc-top > .price { margin-inline-start: auto; }
  .wallet-card .wc-art { width: 80px; height: 80px; }
}

/* ---------- real maps (Leaflet) ---------- */
.map-wrap { position: relative; }
.map-wrap > .eta-card, .map-wrap > .map-legend, .map-wrap > .map-note { z-index: 500; }
.stores-map { height: 560px; border-radius: var(--r-xl); margin-top: 18px; }
@media (max-width: 620px) { .stores-map { height: 440px; } }
.map-pop { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.map-pop .emo { width: 40px; height: 40px; }
.map-pop b { display: block; font-size: 14px; }
.map-pop a { color: var(--pink); font-weight: 600; font-size: 12.5px; }
.store-loc-map { height: 260px; }
.addr-map { height: 120px; margin-top: 12px; }
.co-map { height: 230px; margin-bottom: 14px; }
.modal-map { height: 220px; }
.map-note { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-2); font-size: 12.5px; font-weight: 600; max-width: calc(100% - 24px); }
.map-note svg { width: 15px; height: 15px; color: var(--pink); flex: none; }
.view-switch { display: inline-flex; }

/* ---------- Syrian payments ---------- */
.pk-ico.ew { font-weight: 700; font-size: 11px; letter-spacing: -.01em; }
.pk-ico.sham { background: #E8F6EE; color: #0A7A43; }
.pk-ico.syriatel { background: #FDE7E9; color: #C8102E; }
.pk-ico.mtn { background: #FFF6CC; color: #8A6A00; }
.pk-ico.bank { background: var(--info-bg); color: var(--info); }
.pk-ico.cod { background: var(--ok-bg); color: var(--ok); }
.pk-ico.wal { background: var(--lavender); color: var(--grape); }
.pick .rec { margin-inline-start: 6px; }
.ew-steps { display: flex; flex-direction: column; gap: 10px; }
.ew-ref { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: #fff; border: 1.5px dashed var(--line-2); font-weight: 700; direction: ltr; }
.flag-sy { display: inline-block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.flag-sy svg { width: 100%; height: 100%; display: block; }@media (max-width: 620px) { .track-map .leaflet-control-zoom { display: none; } .eta-card { padding: 10px 14px; } .eta-card .eta-num { font-size: 24px; } }