/* ============================================================================
   tg-gifts.css — витрина Telegram-подарков, каталог /telegram-gifts.
   Страница подарка /telegram-gift подключает его тоже, но её собственные
   стили — в tg-gift-page.css. Все классы здесь с приставкой tgg.

   Панель фильтров, плитки с номером и таблица свойств; цвета, шрифты
   и скругления — свои, сайта: поля 14px,
   таблетки 30px, картинки 12px. Тема на вебе только тёмная (web-shim).

   Файл общий для сайта и мини-аппов (там он лежит симлинком на этот).
   Цвета — токены темы (--bg-color, --text-color…): на сайте их задаёт
   main.css, в мини-аппе — js/main.js из темы Telegram.
   ========================================================================== */

/* Статусные цвета и тени — через переменные --tgg-*, у которых значения по
   умолчанию сайтовые. Сайт их не задаёт, и у него всё как было. В мини-аппе
   при светлой теме Telegram скрипт раздела ставит на <html> класс tgLight —
   цвета темнее, чтобы читались на белом. Те же значения — в tg-gift-page.css. */
html.tgLight{--tgg-ok:#166534;--tgg-warn:#92400e;--tgg-err:#b3261e;
    --tgg-shimmer:rgba(0,0,0,.06);--tgg-hover:#8a939c;--tgg-shadow:rgba(0,0,0,.16);}

/* ── Общее ────────────────────────────────────────────────────────────── */
.tggWrap{width:100%;box-sizing:border-box;padding:0 10px;margin:0 auto;
    color:var(--text-color);}
.tggWrap svg,.tggSheet svg,.tggUp svg{fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}

.tggTitle{display:block;font-family:Roboto-Medium;font-size:22px;line-height:1.25;
    margin:4px 0 6px;}
.tggLead{color:var(--hint-color);font-size:13px;line-height:1.5;margin:0 0 16px;max-width:60ch;}

/* Картинка подарка ещё грузится — мерцающая подложка; не загрузилась —
   силуэт подарка вместо пустоты. */
.tggPh{position:relative;overflow:hidden;background:var(--bg-color);}
.tggPh::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,var(--tgg-shimmer, rgba(255,255,255,.06)),transparent);
    animation:tggShimmer 1.3s infinite;}
.tggPh.ok::before{display:none;}
.tggPh img{position:relative;display:block;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .25s;}
.tggPh.ok img{opacity:1;}
.tggPh.noimg::before{display:none;}
.tggPh.noimg::after{content:"";position:absolute;inset:0;opacity:.35;
    background:no-repeat center/34% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");}
@keyframes tggShimmer{to{transform:translateX(100%);}}
@media (prefers-reduced-motion: reduce){ .tggPh::before{animation:none;} }

/* ── Каталог: поиск и кнопка фильтров ─────────────────────────────────── */
.tggBar{display:flex;gap:8px;margin-bottom:10px;}
.tggSearch{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:46px;
    padding:0 6px 0 14px;border-radius:14px;background:var(--secondary-bg-color);
    border:1px solid transparent;transition:border-color .15s;cursor:text;}
.tggSearch:focus-within{border-color:var(--button-color);}
.tggSearch > svg{flex:0 0 18px;width:18px;height:18px;color:var(--hint-color);}
.tggSearch input{flex:1 1 auto;min-width:0;height:100%;background:none;border:0;outline:none;
    color:var(--text-color);font-family:Roboto-Regular;font-size:15px;-webkit-appearance:none;appearance:none;
    text-overflow:ellipsis;}
.tggSearch input::placeholder{color:var(--hint-color);}
.tggSearch input::-webkit-search-cancel-button{display:none;}
.tggSearchClear{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;background:none;
    color:var(--hint-color);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.tggSearchClear[hidden]{display:none;}
.tggSearchClear:hover{color:var(--text-color);}
.tggSearchClear svg{width:16px;height:16px;}

.tggFilterBtn{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;
    border:1px solid transparent;border-radius:14px;background:var(--secondary-bg-color);
    color:var(--text-color);font-family:Roboto-Medium;font-size:14px;cursor:pointer;}
.tggFilterBtn svg{width:18px;height:18px;color:var(--button-color);}
.tggFilterBtn.on{border-color:color-mix(in srgb, var(--button-color) 55%, transparent);}
.tggBadge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--button-color);
    color:#fff;font-family:Roboto-Medium;font-size:12px;line-height:20px;text-align:center;font-weight:normal;}
.tggBadge[hidden]{display:none;}
/* 320px: чуть плотнее, чтобы подсказка в поиске не обрезалась на полуслове. */
@media (max-width: 359px){
    .tggSearch{padding-left:12px;gap:8px;}
    .tggFilterBtn{padding:0 11px;gap:6px;}
}

/* ── Каталог: коллекция и сортировка ──────────────────────────────────── */
.tggSortRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.tggScope{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 4px;
    border:0;border-radius:30px;background:none;color:var(--text-color);cursor:pointer;
    font-family:Roboto-Medium;font-size:15px;}
.tggScope:hover{background:var(--secondary-bg-color);}
.tggScope .ic{flex:0 0 28px;width:28px;height:28px;border-radius:9px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;background:var(--secondary-bg-color);color:var(--hint-color);}
.tggScope .ic img{width:100%;height:100%;object-fit:cover;display:block;}
.tggScope .ic svg{width:16px;height:16px;}
.tggScope .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggScope .chev{flex:0 0 16px;width:16px;height:16px;color:var(--hint-color);}

/* Видна подпись, а сам select прозрачный поверх неё: иначе ширину задаёт
   самый длинный вариант («Недавно выставленные») и на телефоне не остаётся
   места под название коллекции. Список вариантов остаётся системным. */
.tggSort{position:relative;flex:0 0 auto;display:flex;align-items:center;height:36px;padding:0 30px 0 12px;
    border-radius:30px;background:var(--secondary-bg-color);color:var(--text-color);
    font-family:Roboto-Regular;font-size:13.5px;white-space:nowrap;cursor:pointer;}
.tggSort:focus-within{box-shadow:0 0 0 1px var(--button-color);}
.tggSort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;margin:0;
    font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none;}
.tggSort select option{background:var(--secondary-bg-color);color:var(--text-color);}
.tggSort svg.chev{position:absolute;right:10px;width:14px;height:14px;color:var(--hint-color);pointer-events:none;}
.tggSort svg.srt{display:none;flex:0 0 15px;width:15px;height:15px;margin-right:6px;color:var(--hint-color);}
.tggSort .short{display:none;}
/* Узкий экран: короткая подпись со значком, иначе название коллекции
   слева сжимается до одной буквы («K…»). */
@media (max-width: 419px){
    .tggSort{padding-left:10px;}
    .tggSort svg.srt{display:block;}
    .tggSort .full{display:none;}
    .tggSort .short{display:inline;}
}
@media (max-width: 359px){
    .tggSortRow{gap:6px;}
    .tggScope{gap:6px;padding-right:4px;}
    .tggSort{padding:0 24px 0 9px;}
    .tggSort svg.chev{right:7px;}
    .tggSort svg.srt{margin-right:4px;}
}

/* ── Каталог: выбранные фильтры ───────────────────────────────────────── */
.tggChips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.tggChips[hidden]{display:none;}
.tggChip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:32px;padding:0 8px 0 5px;
    border:0;border-radius:30px;background:color-mix(in srgb, var(--button-color) 16%, var(--secondary-bg-color));
    color:var(--text-color);font-family:Roboto-Regular;font-size:13px;cursor:pointer;}
.tggChip.txt{padding-left:12px;}
.tggChip img{flex:0 0 22px;width:22px;height:22px;border-radius:7px;object-fit:cover;}
.tggChip img.round{border-radius:50%;}
.tggChip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggChip span small{color:var(--hint-color);font-size:12px;margin-right:3px;}
.tggChip svg{flex:0 0 14px;width:14px;height:14px;color:var(--hint-color);}
.tggChip:hover svg{color:var(--text-color);}
.tggChip.clear{background:none;color:var(--link-color);padding:0 8px;}

/* ── Каталог: плитки ──────────────────────────────────────────────────── */
/* Ровно две в ряд и на телефоне, и на компьютере: колонка сайта не шире
   750px, и так просил владелец. */
.tggGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.tggCard{display:flex;flex-direction:column;min-width:0;padding:6px 6px 10px;border-radius:16px;
    background:var(--secondary-bg-color);color:var(--text-color);text-decoration:none;
    transition:transform .15s, background .15s;-webkit-tap-highlight-color:transparent;}
.tggCard:hover{background:color-mix(in srgb, var(--secondary-bg-color) 88%, var(--tgg-hover, #ffffff));}
.tggCard:active{transform:scale(.985);}
.tggCard:focus-visible{outline:2px solid var(--button-color);outline-offset:2px;}
.tggCard .tggPh{aspect-ratio:1/1;border-radius:12px;}
.tggNum{position:absolute;left:7px;bottom:7px;z-index:1;padding:3px 7px;border-radius:8px;
    background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:#fff;font-family:Roboto-Medium;font-size:11.5px;line-height:1.25;
    font-variant-numeric:tabular-nums;}
.tggCard .nm{margin:9px 4px 0;font-family:Roboto-Medium;font-size:14px;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggCard .md{margin:2px 4px 0;color:var(--hint-color);font-size:12.5px;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggCard .pr{margin:8px 4px 0;font-family:Roboto-Medium;font-size:15px;line-height:1.2;
    white-space:nowrap;font-variant-numeric:tabular-nums;}
.tggCard .pr.none{color:var(--hint-color);}

/* Заготовка плитки, пока лента грузится. */
.tggCard.skel{pointer-events:none;}
.tggCard.skel .tggPh img{display:none;}
.tggCard.skel .nm,.tggCard.skel .md,.tggCard.skel .pr{height:12px;border-radius:6px;
    background:color-mix(in srgb, var(--hint-color) 16%, transparent);}
.tggCard.skel .nm{width:70%;margin-top:12px;}
.tggCard.skel .md{width:45%;margin-top:8px;}
.tggCard.skel .pr{width:55%;height:15px;margin-top:12px;}

/* ── Каталог: пусто, ошибка, «показать ещё» ───────────────────────────── */
.tggState{display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:34px 18px 30px;margin-top:4px;border-radius:16px;background:var(--secondary-bg-color);}
.tggState[hidden]{display:none;}
.tggState .ic{width:52px;height:52px;border-radius:50%;margin-bottom:12px;display:flex;
    align-items:center;justify-content:center;color:var(--hint-color);
    background:color-mix(in srgb, var(--hint-color) 14%, transparent);}
.tggState .ic svg{width:26px;height:26px;}
.tggState.err .ic{color:var(--tgg-warn, #e8a23c);background:color-mix(in srgb, var(--tgg-warn, #e8a23c) 14%, transparent);}
.tggState b{font-family:Roboto-Medium;font-size:16px;margin-bottom:6px;font-weight:normal;}
.tggState p{color:var(--hint-color);font-size:13px;line-height:1.5;max-width:36ch;}
.tggState button{margin-top:16px;height:42px;padding:0 20px;border:0;border-radius:14px;
    background:var(--button-color);color:var(--button-text-color);font-family:Roboto-Medium;font-size:14px;cursor:pointer;}
.tggState button[disabled]{opacity:.45;cursor:default;}

.tggTail{margin-top:12px;}
.tggMore{width:100%;height:46px;border:0;border-radius:14px;background:var(--secondary-bg-color);
    color:var(--link-color);font-family:Roboto-Regular;font-size:14px;cursor:pointer;}
.tggMore[hidden],.tggTailErr[hidden],.tggEnd[hidden]{display:none;}
.tggMore[disabled]{opacity:.5;cursor:default;}
.tggTailErr{margin-bottom:8px;text-align:center;color:var(--tgg-warn, #e8a23c);font-size:12.5px;line-height:1.45;}
.tggEnd{text-align:center;color:var(--hint-color);font-size:12.5px;padding:6px 0 4px;}
.tggSentinel{height:1px;}

.tggUp{position:fixed;z-index:990;right:max(14px, calc(50% - 375px + 14px));
    bottom:calc(104px + env(safe-area-inset-bottom));width:44px;height:44px;border:0;border-radius:50%;
    background:var(--secondary-bg-color);color:var(--button-color);cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px var(--tgg-shadow, rgba(0,0,0,.45));}
.tggUp[hidden]{display:none;}
.tggUp svg{width:20px;height:20px;}
@media (max-width: 749px){ .tggUp{right:14px;} }

/* ── Панель фильтров ──────────────────────────────────────────────────── */
/* Выше нижнего меню (999) и полосы баланса (15), но ниже заставки web-shim. */
html.tggLock,html.tggLock body{overflow:hidden;}
.tggSheetBg{position:fixed;inset:0;z-index:1140;background:rgba(0,0,0,.55);
    opacity:0;transition:opacity .22s;}
.tggSheetBg.open{opacity:1;}
.tggSheetBg[hidden],.tggSheet[hidden]{display:none;}

.tggSheet{position:fixed;z-index:1150;left:0;right:0;bottom:0;display:flex;flex-direction:column;
    max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
    border-radius:20px 20px 0 0;background:var(--bg-color);color:var(--text-color);
    box-shadow:0 -10px 40px var(--tgg-shadow, rgba(0,0,0,.45));transform:translateY(100%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1);}
.tggSheet.open{transform:none;}
.tggSheet.drag{transition:none;}

.tggSheetHead{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;
    padding:20px 10px 12px 16px;border-bottom:1px solid color-mix(in srgb, var(--hint-color) 16%, transparent);
    touch-action:none;}
.tggGrab{position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;
    background:color-mix(in srgb, var(--hint-color) 45%, transparent);}
.tggSheetHead b{flex:1 1 auto;font-family:Roboto-Medium;font-size:18px;font-weight:normal;outline:none;}
.tggReset{border:0;background:none;color:var(--link-color);font-family:Roboto-Regular;font-size:14px;
    padding:8px;cursor:pointer;}
.tggReset[disabled]{color:var(--hint-color);opacity:.5;cursor:default;}
.tggX{flex:0 0 36px;width:36px;height:36px;border:0;border-radius:50%;background:var(--secondary-bg-color);
    color:var(--hint-color);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.tggX:hover{color:var(--text-color);}
.tggX svg{width:16px;height:16px;}

.tggSheetBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:8px 10px 10px;}
.tggSheetFoot{flex:0 0 auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid color-mix(in srgb, var(--hint-color) 16%, transparent);}
.tggApply{width:100%;height:50px;border:0;border-radius:14px;background:var(--button-color);
    color:var(--button-text-color);font-family:Roboto-Medium;font-size:15.5px;cursor:pointer;}

/* Раздел панели: Коллекция / Модель / Фон / Узор. */
.tggSec{border-radius:14px;background:var(--secondary-bg-color);margin-bottom:8px;overflow:hidden;}
.tggSecHead{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;
    border:0;background:none;color:var(--text-color);text-align:left;cursor:pointer;}
.tggSecHead .t{flex:0 0 auto;font-family:Roboto-Medium;font-size:15px;}
.tggSecHead .v{flex:1 1 auto;min-width:0;text-align:right;color:var(--hint-color);font-size:13.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggSecHead .v.on{color:var(--link-color);}
.tggSecHead .chev{flex:0 0 18px;width:18px;height:18px;color:var(--hint-color);transition:transform .2s;}
.tggSec.open .tggSecHead .chev{transform:rotate(180deg);}
.tggSec.off .tggSecHead{cursor:default;}
.tggSec.off .tggSecHead .t{color:var(--hint-color);}
.tggSec.off .tggSecHead .chev{opacity:.35;}
.tggSecBody{padding:0 6px 8px;}
.tggSecBody[hidden]{display:none;}

.tggSecSearch{display:flex;align-items:center;gap:8px;height:40px;margin:0 4px 6px;padding:0 12px;
    border-radius:12px;background:var(--bg-color);border:1px solid transparent;}
.tggSecSearch:focus-within{border-color:var(--button-color);}
.tggSecSearch svg{flex:0 0 16px;width:16px;height:16px;color:var(--hint-color);}
.tggSecSearch input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:none;background:none;
    color:var(--text-color);font-family:Roboto-Regular;font-size:14px;-webkit-appearance:none;appearance:none;}
.tggSecSearch input::placeholder{color:var(--hint-color);}
.tggSecSearch input::-webkit-search-cancel-button{display:none;}

/* Длинные списки (у Plush Pepe 280 узоров) листаются внутри раздела. */
.tggList{max-height:min(46vh, 400px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;}
.tggRow{width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px;
    border:0;border-radius:10px;background:none;color:var(--text-color);text-align:left;cursor:pointer;
    font-family:Roboto-Regular;font-size:14.5px;}
.tggRow:hover{background:color-mix(in srgb, var(--bg-color) 55%, transparent);}
.tggRow[hidden]{display:none;}
.tggRow .ic{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;background:var(--bg-color);color:var(--hint-color);overflow:hidden;}
.tggRow .ic.round{border-radius:50%;}
.tggRow .ic img{width:100%;height:100%;object-fit:cover;display:block;}
.tggRow .ic.sym img{width:78%;height:78%;object-fit:contain;}
.tggRow .ic svg{width:16px;height:16px;}
.tggRow .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tggRow .ct{flex:0 0 auto;color:var(--hint-color);font-size:13px;font-variant-numeric:tabular-nums;}
.tggRow.all .nm{color:var(--link-color);}
.tggMk{flex:0 0 20px;width:20px;height:20px;border:2px solid color-mix(in srgb, var(--hint-color) 70%, transparent);
    border-radius:6px;position:relative;transition:background .12s,border-color .12s;}
.tggMk.radio{border-radius:50%;}
.tggRow[aria-checked="true"] .tggMk{border-color:var(--button-color);background:var(--button-color);}
.tggRow[aria-checked="true"] .tggMk::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.tggRow[aria-checked="true"] .tggMk.radio{background:none;}
.tggRow[aria-checked="true"] .tggMk.radio::after{left:3px;top:3px;width:10px;height:10px;border:0;
    border-radius:50%;background:var(--button-color);transform:none;}
.tggRow[aria-checked="mixed"] .tggMk{border-color:var(--button-color);}
.tggRow[aria-checked="mixed"] .tggMk::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;
    border-radius:1px;background:var(--button-color);}

.tggNote{padding:12px 10px;color:var(--hint-color);font-size:13px;line-height:1.45;}
.tggNote.warn{color:var(--tgg-warn, #e8a23c);}
.tggNote button{border:0;background:none;padding:0;color:var(--link-color);font:inherit;cursor:pointer;}
.tggLoad{display:flex;align-items:center;gap:10px;padding:14px 10px;color:var(--hint-color);font-size:13px;}
.tggLoad::before{content:"";width:16px;height:16px;border-radius:50%;
    border:2px solid color-mix(in srgb, var(--hint-color) 32%, transparent);border-top-color:var(--button-color);
    animation:tggSpin .7s linear infinite;}
@keyframes tggSpin{to{transform:rotate(360deg);}}
.tggEmptyRow{padding:12px 10px;color:var(--hint-color);font-size:13px;}
.tggEmptyRow[hidden]{display:none;}

/* На компьютере панель — справа, у края колонки сайта (750px). */
@media (min-width: 750px){
    .tggSheet{top:0;bottom:0;left:auto;right:calc(50% - 375px);width:400px;max-width:100%;
        max-height:none;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.5);
        transform:translateX(24px);opacity:0;transition:transform .24s ease, opacity .24s ease;}
    .tggSheet.open{transform:none;opacity:1;}
    .tggSheetHead{padding-top:16px;}
    .tggGrab{display:none;}
    .tggList{max-height:min(52vh, 460px);}
}