/* Damdi Doner — витрина заказов. Дизайн в стиле Apple/Джони Айв: фирменные цвета Damdi,
   строгая сетка, единый ритм по шкале размеров, плавные пружинные переходы.
   Разделение — хайрлайнами и фоном, а не тенями (тени только у реально парящих слоёв).
   Мобайл-фёрст: приложение живёт в колонке до 480px, по центру на десктопе. */

/* ─── Шрифты бренда ─────────────────────────────────────────── */
@font-face {
	font-family: 'Cera Round Pro';
	src: url('font/ceraround-black.otf') format('opentype');
	font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Rubik';
	src: url('font/rubik.ttf') format('truetype');
	font-weight: 300 900; font-style: normal; font-display: swap;
}

/* ─── Токены ─────────────────────────────────────────────────── */
:root {
	--orange:  #FF5A00;   /* основной акцент бренда («Damdi») */
	--orange-2:#E85100;   /* нажатое состояние */
	--orange-tint:#FFF3EC;/* мягкая оранжевая подложка (выбранное/акцентные плашки) */
	--purple:  #73389A;   /* вторичный акцент («DONER») */
	--purple-tint:#F3ECF8;
	--bg:      #F2F3F5;   /* фон приложения */
	--card:    #FFFFFF;
	--ink:     #17181A;   /* основной текст */
	--ink-2:   #55595E;   /* текст-описание */
	--muted:   #8E949B;   /* второстепенный текст */
	--muted-2: #C4C8CD;   /* блёклые (неактивные) элементы */
	--line:    #E6E8EB;   /* хайрлайн-разделитель */
	--display: 'Cera Round Pro', 'Rubik', system-ui, sans-serif;
	--font:    'Rubik', system-ui, sans-serif;
	--r:   22px;          /* радиус карточек/крупных блоков */
	--r-s: 16px;          /* радиус строк/полей/малых блоков */
	--r-xs:13px;          /* радиус мелких элементов */
	--pill:999px;
	--gutter: 16px;       /* единый боковой отступ страницы */
	--ease: cubic-bezier(.22, 1, .36, 1);   /* единая пружинная кривая (Apple) */
	--t1: .13s;           /* быстрый (нажатия) */
	--t2: .25s;           /* обычный */
	--t3: .31s;           /* шторки/плашки */
	--lift: 0 7px 25px rgba(20, 20, 30, .12);   /* единственная тень — только у парящих слоёв */
	--maxw: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font);
	color: var(--ink);
	background: #E7E8EA;
	font-size: 16px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }   /* иначе display:flex/inline-block из классов перебивает hidden */

/* Колонка-приложение — на десктопе отделена от фона тонкой рамкой, без тени */
.app {
	max-width: var(--maxw);
	margin: 0 auto;
	min-height: 100vh;
	background: var(--bg);
	position: relative;
	overflow-x: clip;   /* именно clip, не hidden: hidden превратил бы overflow-y в auto и отдал бы скролл контейнеру вместо окна */
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	padding-bottom: 16px;
}
.app.hascart { padding-bottom: 94px; }   /* место под плашку корзины — только когда она видна */

/* ─── Шапка (всегда матовая, тёмный текст на светлом) ─────────── */
.header {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	padding: calc(13px + env(safe-area-inset-top)) var(--gutter) 13px;   /* статус-бар: контент шапки ниже «чёлки»/времени */
	background: var(--bg);
}
.headerlogo { height: 28px; width: auto; object-position: left center; flex: 0 0 auto; }
.headerplace {
	display: block; text-align: left; line-height: 1.15;
	margin: 0; padding: 0; min-width: 0;
}
.headerplace b { display: inline-flex; align-items: center; gap: 4px;
	font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; }
.headerchevron { flex: 0 0 auto; color: var(--ink); opacity: .55; margin-top: 1px; }
.headerplace span { display: block; color: var(--muted); font-size: 13px; margin-top: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.headerspacer { flex: 1 1 auto; }
.headeravatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: #DDE0E4 center/60% no-repeat;
	display: grid; place-items: center; color: #8A9099; flex: 0 0 auto;
}
.headercoins { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
	background: var(--orange-tint); color: var(--orange); font-weight: 700; font-size: 16px;
	padding: 9px 13px; border-radius: var(--pill); }
.headercoins b { font-weight: 800; }

/* Иконка корзины в шапке — постоянная точка входа (плашка внизу — крупный CTA) */
.headercart { position: relative; flex: 0 0 auto; width: 40px; height: 40px;
	display: grid; place-items: center; color: var(--ink); }
.headercartbadge { position: absolute; top: 1px; right: 1px;
	min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box;
	border-radius: var(--pill); background: var(--orange); color: #fff;
	font-size: 13px; font-weight: 800; line-height: 1; display: grid; place-items: center;
	box-shadow: 0 0 0 2px var(--bg); }   /* колечко фона: бейдж читается поверх иконки */
.headercartbadge[hidden] { display: none; }

/* ─── Карточка-подтверждение точки на входе ───────────────────── */
.pointconfirmbackdrop {
	position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.28);
	opacity: 0; pointer-events: none; transition: opacity var(--t2);
}
.pointconfirmbackdrop.isopen { opacity: 1; pointer-events: auto; }
.pointconfirm {
	/* привязка к левому краю колонки приложения (а не окна) — иначе на десктопе улетает влево */
	position: fixed; z-index: 56; left: max(13px, calc(50% - var(--maxw) / 2 + 13px)); top: 61px;
	width: min(340px, calc(100% - 25px), calc(var(--maxw) - 25px));
	background: var(--card); border-radius: var(--r); box-shadow: var(--lift);
	padding: 16px 19px 19px; opacity: 0; transform: translateY(-10px) scale(.98);
	transform-origin: 64px top;
	pointer-events: none; transition: transform var(--t2) var(--ease), opacity var(--t2);
}
.pointconfirm.isopen { opacity: 1; transform: none; pointer-events: auto; }
/* хвостик-стрелка вверх, к адресу в шапке */
.pointconfirm::before {
	content: ''; position: absolute; top: -7px; left: 61px; width: 16px; height: 16px;
	background: var(--card); transform: rotate(45deg); border-radius: 4px;
}
.pointconfirmplace {
	display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px;
	color: var(--orange); background: var(--orange-tint); border-radius: var(--pill);
	padding: 7px 13px; margin-bottom: 13px;
}
.pointconfirmhi { font-family: var(--display); font-size: 22px; line-height: 1.05; margin: 0 0 13px; }
.pointconfirmchange { color: var(--purple); font-weight: 600; font-size: 16px;
	padding: 0; margin-bottom: 16px; display: block; }
.pointconfirmbutton { width: 100%; height: 55px; border-radius: var(--pill);
	background: var(--orange); color: #fff; font-weight: 700; font-size: 16px;
	display: flex; align-items: center; justify-content: center; gap: 7px;
	transition: background var(--t1); }
.pointconfirmbutton:active { background: var(--orange-2); }

/* ─── Пикер точки ────────────────────────────────────────────── */
.picker { padding: 22px var(--gutter) 7px; }
.pickertitle { font-family: var(--display); font-size: 25px; margin: 0 0 16px; }
.pickerlist { display: flex; flex-direction: column; gap: 10px; }
.pointrow {
	display: flex; align-items: flex-start; gap: 13px; text-align: left;
	background: var(--bg); border-radius: var(--r-s); padding: 13px 16px;
	border: 1px solid var(--line);
	transition: border-color var(--t1), background var(--t1);
}
.pointrow.isactive { border-color: var(--orange); background: var(--orange-tint); }
.pointrowpin { font-size: 19px; line-height: 1.2; }
.pointrowbody { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pointrowbody b { font-weight: 700; font-size: 16px; }
.pointrowbody span { color: var(--muted); font-size: 13px; }
.pointrowhours { color: var(--orange) !important; font-weight: 600; }
.pointrowhours:empty { display: none; }
.pointrowcheck { color: var(--orange); font-weight: 800; font-size: 19px; opacity: 0; align-self: center; }
.pointrow.isactive .pointrowcheck { opacity: 1; }

/* Монета «дамкоин» — оранжевый кружок с белой буквой D из логотипа Damdi */
.damcoin { display: inline-block; width: 1.3em; height: 1.3em; border-radius: 50%;
	background: var(--orange);
	vertical-align: -.28em; position: relative; flex: 0 0 auto; }
.damcoin::after { content: ''; position: absolute; inset: 24%; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 4 203 170'%3E%3Cpath d='M191.25 97.85l-16.28-7.1C170.91 44.32 142.09 5 82.84 5-10.01 5-10.01 92.85 31.96 92.85c0 0-1.09-46.53 46.32-46.53 35.44 0 52.84 22.83 52.84 51.97 0 20.22-7.17 33.05-22.61 33.05-20.22 0-20.22-20.44-20.22-20.44V61.97H68.93c-12.83 0-23.48 10.44-23.48 23.48v52.19c0 16.31-19.79 10.66-19.79 10.66s0 24.35 29.79 24.35c15.22 0 26.31-7.17 30.88-18.48 7.39 10.22 19.14 18.48 37.62 18.48 31.5 0 49.54-22.43 51.37-63.21Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 4 203 170'%3E%3Cpath d='M191.25 97.85l-16.28-7.1C170.91 44.32 142.09 5 82.84 5-10.01 5-10.01 92.85 31.96 92.85c0 0-1.09-46.53 46.32-46.53 35.44 0 52.84 22.83 52.84 51.97 0 20.22-7.17 33.05-22.61 33.05-20.22 0-20.22-20.44-20.22-20.44V61.97H68.93c-12.83 0-23.48 10.44-23.48 23.48v52.19c0 16.31-19.79 10.66-19.79 10.66s0 24.35 29.79 24.35c15.22 0 26.31-7.17 30.88-18.48 7.39 10.22 19.14 18.48 37.62 18.48 31.5 0 49.54-22.43 51.37-63.21Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat; }
.damcoinlarge { width: 64px; height: 64px; }

/* ─── Профиль / вход ─────────────────────────────────────────── */
/* .profile — прямой flex-ребёнок .sheet (overflow:hidden, max-height:92vh),
   поэтому сам должен прокручиваться, иначе низ (Выйти/Удалить аккаунт) обрезается */
.profile { padding: 4px 0 calc(7px + env(safe-area-inset-bottom));
	flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.profilehead { display: flex; align-items: center; padding: 19px var(--gutter) 7px; }
.profilehead h2 { font-family: var(--display); font-size: 25px; margin: 0; }
.profilehead .cartclose { margin-left: auto; }
.profilerow { display: flex; justify-content: space-between; align-items: center;
	padding: 13px var(--gutter); border-top: 1px solid var(--line); }
.profilerow span { color: var(--muted); }
.profilelogout { display: block; margin: 19px var(--gutter) 7px; width: calc(100% - var(--gutter) * 2);
	padding: 16px; border-radius: var(--pill); background: var(--bg); color: #D64545; font-weight: 700; }
/* Удаление аккаунта — ЯВНАЯ кнопка (App Store 5.1.1(v): удаление должно легко находиться) */
.profiledelete { display: block; margin: 0 var(--gutter) 7px; width: calc(100% - var(--gutter) * 2);
	padding: 16px; border-radius: var(--pill); background: none; color: #D64545;
	font-weight: 700; font-size: 16px; border: 1px solid rgba(214,69,69,.35); cursor: pointer; }
/* Политика — маленькой ссылкой внизу */
.profilelegal { text-align: center; padding: 13px var(--gutter) 25px; }
.profilelegal a { color: var(--muted); font-size: 13px; text-decoration: none; }

.history { padding: 16px var(--gutter) 7px; border-top: 1px solid var(--line); }
.historytitle { font-family: var(--display); font-size: 19px; margin-bottom: 13px; }
.historyempty { color: var(--muted); text-align: center; padding: 19px 0; }
.orderrow { background: var(--bg); border-radius: var(--r-s); padding: 13px 16px; margin-bottom: 10px; }
.orderrowhead { display: flex; justify-content: space-between; align-items: baseline; }
.orderrowhead b { font-weight: 800; }
.orderrowhead span { color: var(--muted); font-size: 13px; }
.orderrowitems { color: var(--ink-2); font-size: 13px; margin: 7px 0; }
.orderrowfoot { display: flex; justify-content: space-between; align-items: center; }
.orderrowfoot span { color: var(--muted); font-size: 13px; }
.orderrowfoot b { font-weight: 800; color: var(--orange); }

.langswitch { display: flex; align-items: center; justify-content: space-between;
	padding: 13px var(--gutter); border-top: 1px solid var(--line); }
.langswitchlabel { color: var(--muted); }
.langswitchoptions { display: flex; gap: 4px; background: var(--bg); border-radius: var(--pill); padding: 4px; }
.langswitchoptions button { padding: 7px 16px; border-radius: var(--pill); font-weight: 700; font-size: 13px;
	color: var(--muted); transition: color var(--t1), background var(--t1); }
.langswitchoptions button.isactive { background: var(--card); color: var(--orange); }

.coincard { margin: 7px var(--gutter); padding: 22px; border-radius: var(--r);
	background: linear-gradient(135deg, #FF7A2E, #FF5A00); color: #fff; }
.coincardlabel { opacity: .9; font-size: 13px; }
.coincardvalue { font-family: var(--display); font-size: 43px; margin: 4px 0 7px; }
.coincardhint { font-size: 13px; opacity: .9; }

.login { text-align: center; padding: 31px var(--gutter) 19px; }
.loginemoji { font-size: 61px; }
.logintitle { font-family: var(--display); font-size: 22px; margin: 13px 0 7px; }
.logintext { color: var(--ink-2); font-size: 16px; margin-bottom: 22px; }
.loginbutton { width: 100%; }
.loginstatus { margin-top: 13px; color: var(--muted); font-size: 13px; }
.loginstatus a { color: var(--orange); font-weight: 600; }

/* Блок меню на светлом фоне */
.content { position: relative; z-index: 2; background: var(--bg); }

/* ─── Липкие табы категорий (тёмный текст на матовом фоне) ────── */
.tabs {
	position: sticky; top: 61px; z-index: 30;
	background: var(--bg);
	padding: 10px 0 7px;
	border-bottom: 1px solid var(--line);
}
.tabsrow { display: flex; gap: 19px; overflow-x: auto; padding: 0 var(--gutter) 4px;
	scrollbar-width: none; }
.tabsrow::-webkit-scrollbar { display: none; }
.tab {
	flex: 0 0 auto; font-family: var(--display); font-size: 22px;
	color: var(--muted-2);
	white-space: nowrap; padding: 2px 0; transition: color var(--t1);
}
.tab.isactive { color: var(--ink); }

/* ─── Секции меню ────────────────────────────────────────────── */
.section { padding: 25px var(--gutter) 7px; scroll-margin-top: 118px; }
.sectiontitle { font-family: var(--display); font-size: 25px; margin: 0 0 16px;
	letter-spacing: -.02em; }

/* ─── Баннер-карусель (свайп + точки + автопрокрутка) ───────── */
.banners { margin: 13px var(--gutter) 2px; }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	border-radius: var(--r); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; position: relative;
	min-height: 190px; border-radius: var(--r); overflow: hidden;
	display: flex; align-items: center; color: #fff; text-decoration: none; }
.slidepromo { padding: 0 0 0 22px; }
.slideteam { background: linear-gradient(135deg, #FF8A3D 0%, #FF5A00 55%, #B0295F 125%); }
.promo2text { flex: 1 1 auto; z-index: 1; padding: 22px 7px 22px 0; }
.promo2title { margin: 0; font-family: var(--display); font-weight: 700;
	font-size: 31px; line-height: .95; letter-spacing: .01em; }
.dots { display: flex; justify-content: center; gap: 7px; padding: 10px 0 0; }
.bannerdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2);
	transition: width var(--t2), background var(--t2), border-radius var(--t2); }
.bannerdot.isactive { width: 19px; border-radius: 4px; background: var(--orange); }

/* Сетка карточек товара */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* Карточка товара — разделение хайрлайном, без тени */
.card {
	background: var(--card); border-radius: var(--r); overflow: hidden;
	display: flex; flex-direction: column; text-align: left;
	border: 1px solid var(--line);
	transition: transform var(--t1) var(--ease);
	color: inherit; text-decoration: none; cursor: pointer;   /* карточка — настоящая ссылка */
}
.card:active { transform: scale(.97); }
.cardmedia { aspect-ratio: 1/1; display: grid; place-items: center; position: relative; }
.cardmedia .e { font-size: 67px; filter: drop-shadow(0 7px 13px rgba(0,0,0,.14)); }
.cardmedia img { width: 100%; height: 100%; object-fit: cover; }
.cardbody { padding: 13px 13px 13px; display: flex; flex-direction: column; gap: 7px;
	flex: 1; }
.cardname { font-weight: 600; font-size: 16px; line-height: 1.22;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.cardprice { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.cardadd {
	width: 34px; height: 34px; border-radius: 50%; background: var(--orange);
	color: #fff; display: grid; place-items: center; font-size: 25px; line-height: 0;
	transition: transform var(--t1) var(--ease), background var(--t1);
}
.cardadd:active { background: var(--orange-2); transform: scale(.9); }

/* Счётчик в карточке, когда товар уже в корзине */
.cardcount { display: flex; align-items: center; gap: 10px; }
.cardcount button { width: 31px; height: 31px; border-radius: 50%;
	background: #F1F2F4; color: var(--ink); font-size: 19px; display: grid; place-items: center; }
.cardcount b { min-width: 16px; text-align: center; font-weight: 700; }

/* ─── Шторка товара ──────────────────────────────────────────── */
.sheetbackdrop {
	position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4);
	opacity: 0; pointer-events: none; transition: opacity var(--t2);
}
.sheetbackdrop.isopen { opacity: 1; pointer-events: auto; }
.sheet {
	position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
	width: 100%; max-width: var(--maxw); max-height: 92vh; z-index: 61;
	background: var(--card); border-radius: 28px 28px 0 0;
	transition: transform var(--t3) var(--ease);
	display: flex; flex-direction: column; overflow: hidden;
	box-shadow: var(--lift);
}
.sheet.isopen { transform: translate(-50%, 0); }
/* padding-bottom = высота футера с кнопкой (13 + 58 + 16 + safe) + зазор 31px,
   чтобы у короткого товара (без описания/размеров) кнопка не липла к названию */
.sheetscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto;
	padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.sheetmedia { aspect-ratio: 1/1; display: grid; place-items: center; position: relative; }
.sheetmedia .e { font-size: 133px; filter: drop-shadow(0 13px 25px rgba(0,0,0,.18)); }
.sheetclose {
	position: absolute; right: 16px; top: 16px; width: 40px; height: 40px;
	border-radius: 50%; background: rgba(255,255,255,.75); backdrop-filter: blur(7px);
	display: grid; place-items: center; font-size: 22px; color: var(--ink);
}
.sheetbody { padding: 19px var(--gutter) 0; }
.sheettitle { font-family: var(--display); font-size: 25px; margin: 0 0 7px; letter-spacing: -.01em; }
.sheetdescription { color: var(--ink-2); font-size: 16px; margin: 0 0 16px; }

.optionlabel { font-weight: 700; font-size: 13px; color: var(--muted);
	text-transform: none; margin: 7px 0 10px; }
.sizes { display: flex; gap: 7px; margin-bottom: 19px; flex-wrap: wrap; }
.size {
	padding: 10px 16px; border-radius: var(--pill); background: var(--bg);
	font-weight: 600; font-size: 13px; border: 1px solid var(--line);
	transition: border-color var(--t1), background var(--t1), color var(--t1);
}
.size.isactive { border-color: var(--orange); background: var(--orange-tint); color: var(--orange); }
/* Цена в чипе размера/модификатора — вторичная, приглушённая (без разделителя-точки) */
.chipprice { color: var(--muted); font-weight: 500; margin-left: 4px; }
.size.isactive .chipprice, .modifieroption.isactive .chipprice { color: inherit; opacity: .7; }
.modifierlist { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 19px; }
.modifieroption { padding: 10px 13px; border-radius: var(--pill); background: var(--bg);
	font-size: 13px; font-weight: 500; border: 1px solid var(--line);
	transition: border-color var(--t1), background var(--t1), color var(--t1); }
.modifieroption.isactive { border-color: var(--purple); background: var(--purple-tint); color: var(--purple); }
.required { color: var(--muted); font-weight: 500; font-size: 13px; text-transform: none; }

.sheetfoot {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 13px var(--gutter) calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--card) 70%, transparent);
	display: flex; align-items: center; gap: 13px;
}
.buttonadd {
	flex: 1; height: 58px; border-radius: var(--pill); background: var(--orange);
	color: #fff; font-weight: 700; font-size: 19px; display: flex;
	align-items: center; justify-content: center; gap: 7px;
	transition: background var(--t1), transform var(--t1) var(--ease);
}
.buttonadd:active { background: var(--orange-2); transform: scale(.98); }

/* ─── Корзина (нижняя плашка) — единственная нейтральная тень ─── */
.cartbar {
	position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(140%);
	width: calc(100% - 32px); max-width: calc(var(--maxw) - 32px); z-index: 50;
	background: var(--orange); color: #fff; border-radius: var(--pill);
	height: 61px; padding: 0 10px 0 22px; display: flex; align-items: center;
	box-shadow: var(--lift); transition: transform var(--t3) var(--ease);
}
.cartbar.isvisible { transform: translateX(-50%) translateY(0); }
.cartbarcount { font-weight: 700; }
.cartbarlabel { margin-left: 10px; font-weight: 600; opacity: .95; }
.cartbarsum { margin-left: auto; background: rgba(255,255,255,.2); border-radius: var(--pill);
	padding: 10px 19px; font-weight: 700; font-size: 16px; }

.footer { text-align: center; color: var(--muted); font-size: 13px; padding: 19px var(--gutter); }

/* ─── Экран корзины / оформление ─────────────────────────────── */
.cart { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.carthead { display: flex; align-items: center; gap: 13px; padding: 19px var(--gutter) 10px; }
.carthead h2 { font-family: var(--display); font-size: 25px; margin: 0; }
.cartclose { margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
	background: var(--bg); display: grid; place-items: center; font-size: 19px; }
.cartscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--gutter) calc(94px + env(safe-area-inset-bottom)); }

.line { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.linemedia { width: 61px; height: 61px; border-radius: var(--r-s); display: grid; place-items: center;
	font-size: 31px; flex: 0 0 auto; overflow: hidden; }
.linemedia img { width: 100%; height: 100%; object-fit: cover; }

.contactcard { display: flex; align-items: center; gap: 10px;
	background: var(--bg); border-radius: var(--r-s); padding: 13px 16px;
	font-weight: 600; font-size: 16px; }
.contactcardcol { display: flex; flex-direction: column; min-width: 0; }
.contactcardcol small { font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 2px; }
.linebody { flex: 1; min-width: 0; }
.linename { font-weight: 600; font-size: 16px; }
.lineoption { color: var(--muted); font-size: 13px; margin-top: 2px; }
.lineprice { font-weight: 700; font-size: 16px; margin-top: 4px; }
.linequantity { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.linequantity button { width: 31px; height: 31px; border-radius: 50%; background: var(--bg);
	font-size: 19px; display: grid; place-items: center; }
.linequantity b { min-width: 16px; text-align: center; font-weight: 700; }

.field { margin: 13px 0 0; }
.fieldlabel { font-weight: 700; font-size: 13px; color: var(--muted); margin: 0 0 7px; }
.input, .textarea {
	width: 100%; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-s);
	padding: 16px; font: inherit; font-size: 16px; color: var(--ink);
	transition: border-color var(--t1), background var(--t1);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.textarea { resize: none; min-height: 70px; }

.paylist { display: flex; flex-direction: column; gap: 7px; }
.paymentoption { display: flex; align-items: center; gap: 13px; background: var(--bg); border-radius: var(--r-s);
	padding: 13px 16px; border: 1px solid var(--line); font-weight: 600; font-size: 16px;
	transition: border-color var(--t1), background var(--t1); }
.paymentoption.isactive { border-color: var(--orange); background: var(--orange-tint); }
.paymentoption .dot { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--muted-2); margin-left: auto; transition: border-color var(--t1); }
.paymentoption.isactive .dot { border-color: var(--orange); background: radial-gradient(circle, var(--orange) 40%, transparent 46%); }

.damcoinrow { display: flex; align-items: center; gap: 13px; background: var(--bg);
	border-radius: var(--r-s); padding: 13px 16px; cursor: pointer; }
.damcoinrow .damcoin { font-size: 22px; }
.damcoinrowbody { flex: 1; display: flex; flex-direction: column; }
.damcoinrowbody b { font-weight: 700; font-size: 16px; }
.damcoinrowbody small { color: var(--muted); font-size: 13px; margin-top: 1px; }
.switch { width: 46px; height: 28px; border-radius: var(--pill); background: #D5D8DC;
	position: relative; flex: 0 0 auto; transition: background var(--t2); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform var(--t2) var(--ease); }
.switch.ison { background: var(--orange); }
.switch.ison::after { transform: translateX(18px); }

.summary { margin: 19px 0 7px; }
.summaryrow { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-2); }
.summaryrow.total { color: var(--ink); font-weight: 800; font-size: 19px; padding-top: 13px; }

.pointpick { display: flex; align-items: center; gap: 13px; background: var(--bg); border-radius: var(--r-s);
	padding: 13px 16px; font-weight: 600; }
.pointpick small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 2px; }
.pointpick .chevron { margin-left: auto; color: var(--muted); }

.cartfoot {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 13px var(--gutter) calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--card) 72%, transparent);
	display: flex; align-items: center; gap: 13px; }

/* Экран «спасибо» */
.done { text-align: center; padding: 61px 31px; }
.doneemoji { font-size: 76px; }
.donetitle { font-family: var(--display); font-size: 28px; margin: 19px 0 7px; }
.donecoins { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 4px;
	background: var(--orange-tint); color: var(--orange); font-weight: 700; padding: 7px 16px; border-radius: var(--pill); }
.donetext { color: var(--ink-2); font-size: 16px; margin-bottom: 25px; }

/* ── SMS-вход (форма в профиле) ─────────────────────────── */
.logininput { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-s);
	padding: 16px; font-family: var(--font); font-size: 16px; margin-top: 10px; outline: none; background: var(--card); color: var(--ink);
	transition: border-color var(--t1); }
.logininput:focus { border-color: var(--orange); }
.logincode { width: 100%; }
#smscode { text-align: center; letter-spacing: .3em; font-weight: 700; font-size: 19px; }
.loginsms { text-align: center; }
.loginlink { display: inline-block; margin-top: 13px; color: var(--muted); font-size: 13px;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--font);
	transition: color var(--t1); }
.loginlink:hover { color: var(--orange); }
/* Вторичная кнопка входа (Войти по SMS-коду / Получить код / Войти) */
.loginsmsbutton { display: block; width: 100%; height: 55px; margin-top: 13px; border-radius: var(--pill);
	background: var(--bg); color: var(--ink); font-weight: 700; font-size: 16px; font-family: var(--font); cursor: pointer;
	transition: background var(--t1); }
.loginsmsbutton:active { background: #E7E8EA; }
.loginsms .loginsmsbutton { margin-top: 13px; }

/* Позиция в стоп-листе точки: недоступна для заказа */
.card.isstopped { opacity: .5; pointer-events: none; }
.card.isstopped .cardcontrol { display: none; }
.card.isstopped .cardfoot::after { content: 'нет в наличии'; font-size: 13px; color: var(--muted); font-weight: 600; }

/* Размер в стоп-листе точки: недоступен для выбора в шторке */
.size.isstopped { opacity: .4; text-decoration: line-through; pointer-events: none; }

/* Оплата картой — временно недоступна (онлайн-оплата «скоро») */
.paymentoption.isdisabled { color: var(--muted); cursor: default; background: var(--bg); }
.paymentoption.isdisabled .dot { display: none; }
.paymentoption .soon { margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: .02em;
	color: var(--muted); background: var(--line); border-radius: var(--pill); padding: 4px 10px; }

/* ─── Kaspi-оплата (фирменный красный Kaspi) ─── */
.paymentoptionkaspi.isactive { border-color: #F14635; background: #FEECEA; }
.paymentoptionkaspi.isactive .dot { border-color: #F14635;
	background: radial-gradient(circle, #F14635 40%, transparent 46%); }
/* Главный CTA в фирменном виде Kaspi (как в одобренном дизайне) */
.buttonkaspi {
	flex: 1; height: 58px; border-radius: var(--pill); background: #F14635;
	color: #fff; font-weight: 700; font-size: 19px; display: flex;
	align-items: center; justify-content: center; gap: 10px;
	transition: background var(--t1), transform var(--t1) var(--ease);
}
.buttonkaspi:active { background: #D93C2C; transform: scale(.98); }

/* ─── Экран оплаты Kaspi (в одобренном Kaspi дизайне) ─── */
.kaspipay { text-align: center; padding: 7px var(--gutter) 25px; }
.kaspipayhead { display: flex; align-items: center; justify-content: center; gap: 7px;
	font-weight: 800; font-size: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.kaspilogo { width: 22px; height: 22px; border-radius: 7px; object-fit: contain; vertical-align: middle; }
.kaspipayqrtitle { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.kaspipayscan { color: var(--muted); margin-top: 4px; }
.kaspipaysum { font-weight: 800; font-size: 31px; letter-spacing: -.02em; margin: 13px 0 19px; }
.kaspipayqr { display: flex; justify-content: center; }
.kaspipayqr img, .kaspipayqr canvas { width: 220px; height: 220px; display: block; }
.kaspipay .buttonkaspi { max-width: 320px; margin: 7px auto; text-decoration: none; }
.kaspipaywait { margin-top: 19px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; }
.kaspipaywait.iserror { color: #F14635; font-weight: 600; }
.kaspispinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: #F14635; border-radius: 50%; animation: kaspispinner .8s linear infinite; }
@keyframes kaspispinner { to { transform: rotate(360deg); } }
.kaspipaycancel { position: static; margin: 19px auto 0; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 19px; }
.kaspipaycheck { width: 88px; height: 88px; margin: 25px auto 19px; border-radius: 50%; background: #8CC63F; color: #fff; font-size: 46px; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(140,198,63,.18); }
.kaspipayoktitle { font-weight: 800; font-size: 22px; }
.kaspipaynumber { color: var(--muted); margin-top: 7px; }
.kaspipaybackbutton { margin: 28px auto 0; background: #2b2b2b; color: #fff; border-radius: var(--r-xs); padding: 16px 25px; font-weight: 700; font-size: 16px; }

/* ─── Строки способов оплаты (подпись) ─── */
.paymentoptionlabel { flex: 1 1 auto; font-weight: 600; }
.paymentoptionkaspi .paymentoptionlabel { color: var(--ink); }

/* ─── Планшет (iPad — портрет и альбом) ───────────────────────────
   Витрина живёт телефонной колонкой до 480px. На планшете разворачиваем
   её на ВЕСЬ экран и раскладываем товары автосеткой (auto-fill): карточка
   держит тот же размер, что на телефоне (~210px), а число столбцов само
   подстраивается под ширину — и в портрете, и в альбоме. Шторки, пикер и
   корзина НЕ растягиваем: остаются аккуратными модалками var(--maxw) по
   центру (растянутый bottom-sheet на планшете некрасив).
   Последней секции даём запас высоты, иначе последние категории не могут
   прокрутиться под липкие табы (клик по табу «не доходит» до верха). */
@media (min-width: 700px) {           /* iPad портрет (включая mini) и крупнее */
	:root { --gutter: 25px; }
	.app { max-width: 100%; border-left: none; border-right: none; }
	.app.hascart { padding-bottom: 125px; }   /* место под увеличенную плашку корзины */

	/* Шапка — крупнее и просторнее, контент ниже статус-бара */
	.header { gap: 13px; padding-top: calc(19px + env(safe-area-inset-top)); padding-bottom: 16px; }
	.headerlogo { height: 43px; }
	.headerplace b { font-size: 22px; }
	.headerplace span { font-size: 16px; }
	.headercoins { font-size: 22px; padding: 13px 22px; }
	.headeravatar { width: 55px; height: 55px; }
	.headeravatar svg { width: 28px; height: 28px; }

	/* Табы категорий */
	.tab { font-size: 25px; }
	.tabsrow { gap: 25px; }

	/* Геройский баннер */
	.slide { min-height: 280px; }
	.promo2title { font-size: 37px; }

	/* Секции и автосетка на весь экран (число столбцов само подстраивается) */
	.sectiontitle { font-size: 28px; }
	.section { scroll-margin-top: 150px; }
	.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 19px; }
	/* запас высоты: последние категории докручиваются до верха под липкие табы */
	.content .section:last-of-type { min-height: 100vh; }

	/* Карточка товара: типографику держим телефонной — карточка того же размера (~220px),
	   иначе длинные названия переносятся/обрезаются и ломают вёрстку. Крупнее только эмодзи-плейсхолдер. */
	.cardmedia .e { font-size: 88px; }

	/* Шторка товара на большом экране (Mac/iPad) — центрированное модальное окно,
	   а не нижняя шторка: по центру, покрупнее, все углы скруглены, плавное появление */
	.sheet {
		top: 50%; bottom: auto; left: 50%;
		max-width: 480px; max-height: 88vh; border-radius: 28px;
		transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
		transition: transform var(--t2) var(--ease), opacity var(--t2);
	}
	.sheet.isopen { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
	/* Карточка товара шире — под картинку; профиль/корзина/точка остаются 480px,
	   иначе строки профиля («Имя … значение») разъезжаются по краям */
	#sheet { max-width: 640px; }
	/* Фото показываем ЦЕЛИКОМ (не режем), но масштабируем под экран, чтобы модал влезал
	   без прокрутки: ограничиваем высоту картинки в vh с запасом под название и кнопку.
	   width:auto + max-width:100% => картинка не обрезается, просто становится меньше. */
	.sheetmedia { aspect-ratio: auto; }
	.sheetmedia img { max-height: calc(88vh - 180px); width: auto; max-width: 100%; }
	/* Футер с кнопкой — в потоке (не абсолютный), чтобы кнопка не наезжала на контент.
	   На телефоне футер остаётся плавающим над прокруткой (базовые правила). */
	/* overflow:hidden — на модале прокрутки нет: картинка уже масштабирована так,
	   что фото + название + кнопка влезают целиком (буфер 180px под название и кнопку). */
	.sheetscroll { padding-bottom: 0; overflow: hidden; }
	.sheetfoot { position: static; background: none; padding: 7px var(--gutter) 19px; }

	/* Плашка корзины — заметный основной CTA, не телефонная кнопка */
	.cartbar { max-width: 640px; height: 79px; padding: 0 16px 0 31px; font-size: 22px;
		bottom: calc(22px + env(safe-area-inset-bottom)); }
	.cartbarsum { font-size: 22px; padding: 13px 25px; }

	/* Всплывающая карточка точки — ниже увеличенной шапки, к левому краю */
	.pointconfirm { top: calc(80px + env(safe-area-inset-top)); left: 16px; }
}
@media (min-width: 1100px) {          /* iPad альбом и iPad Pro 13" — больше воздуха */
	:root { --gutter: 31px; }
	.slide { min-height: 340px; }
	.promo2title { font-size: 43px; }
	.grid { gap: 22px; }
	.cartbar { max-width: 760px; }
}