/* ==========================================================
       AnticNova — Single-file MVP (v1)
       Блок 1 / Итерация 1: Каркас страницы + палитра + базовая сетка
       ----------------------------------------------------------
       Как наполнять (кратко):
       1) Внизу файла есть массив lots[] — добавляйте лоты в формате
          { id, title, category, url, images: ["img1", "img2", ...] }.
       2) Ссылка в кнопке "Подробнее" берётся из поля url.
       3) Категории пока заглушки: coins | stamps | orders | banknotes | books | none
       4) Изображения можно указывать реальными URL или оставить плейсхолдеры.
    ========================================================== 
*/

    /* ---------- Палитра (из скрина №2: тёмная тема + золотой акцент) ---------- */
    :root {
      --bg: #0d0e10;          /* общий фон */
      --panel: #131417;       /* панели/хедер/сайдбар */
      --card: #181a1f;        /* карточки */
      --card-2: #1e2128;      /* вариация карточки */
      --text: #e9edf3;        /* основной текст */
      --muted: #a7acb7;       /* вторичный текст */
      --line: #2a2d34;        /* линии/бордеры */
      --accent: #c8a86b;      /* золотой акцент */
      --accent-2: #e6d4a1;    /* светлый акцент */
      --danger: #ff6464;

      --radius: 18px;         /* радиус для карточек */
      --radius-lg: 22px;      
      --shadow: 3px 6px 10px rgba(0,0,0,.15);
      --gap: 18px;
      --content-max: 1280px;
    }



    /* ---------- Сброс/база ---------- */
    *{box-sizing:border-box}
    html,body{
      overflow-x: hidden;
      overflow-y: auto;
      height:100%;
      width: 100%;
    }
    body{
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      margin:0; background:var(--bg); color:var(--text);
      font: 500 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      letter-spacing: .2px;
      background-color: var(--panel);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button{font:inherit}
    :focus-visible{outline: 2px solid var(--accent); outline-offset:2px}
    ::selection{background:rgba(200,168,107,.25)}



    /* ---------- Топбар ---------- */
    .topbar{
      position: sticky; top:0; z-index: 10;
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:12px 20px; background: var(--panel); box-shadow: var(--shadow);
      border-bottom: 1px solid var(--line);
    }
    .brand{display:flex; align-items:center; gap:12px}
    .logo{width:36px; height:36px; border-radius:12px; background:linear-gradient(160deg, var(--card), var(--card-2)); 
      display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line)
    }

    .brand-name{font-weight:800; letter-spacing:1px; font-size: 1.8rem; color: #e7ba65;
      text-shadow: -2px -1px 0.2px #6b4d1452, 3px 0 0.2px #c487163c, 0 2px 0.7px #9b7f4a3e, -3px 0 0.2px #c487163c, 0 -2px 0.7px #9b7f4a3e, 2px 1px 0.2px #6b4d1452; 
      font-family:'Times New Roman', Times, sans-serif; font-size: 1.9rem;
    }

    .topnav{display:flex; align-items:center; gap:8px}
    .topnav a{ padding:8px 12px; border-radius:12px; color:var(--muted); transition:.2s ease; border:1px solid transparent; }
    .topnav a:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.03)}
    .topnav a.active{color:var(--accent); border-color:rgba(200,168,107,.25); background:rgba(200,168,107,.08)}


    @media(max-width:768px){
      .topnav {display: none;}
      .brand-name{font-size: 1.6rem;}
    }

    /* ---------- ФОН ДЛЯ ДРУГИХ СТРАНИЦ ---------- */
    .container-description {
      height: 100%; width: 100%; background-color: var(--card); border-radius: 1.3%;
      padding: 20px 30px;
    }

    /* ---------- Макет страницы ---------- */
    .page{
      display:grid; grid-template-columns: 76px 1fr; gap: var(--gap);
      width:100%; 
      margin: 20px auto; padding: 4px 4px 40px; height: 100%;
    }

    
    /* ---------- Сайдбар категорий ---------- */
    .sidebar{position: sticky; top:76px; height: calc(100dvh - 96px); z-index: 9;}
    .sidewrap{
      position: absolute; width:75px; height: 75px; transition: width .25s ease; 
      background:var(--panel); overflow: auto; border:1px solid var(--line); 
      border-radius: var(--radius-lg);  box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; 
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .sidewrap:hover{width: 220px; height: calc(100dvh - 96px); }
    .sidewrap::-webkit-scrollbar{width: 0; height: 0;}
    .catlist{list-style:none; margin:0px; padding:0px}
    .catlist li{margin:6px 6px}
    .catbtn{
      display:flex; align-items:center; gap:12px; width:100%;
      padding:10px 12px; border-radius:12px; background:transparent; color:var(--muted);
      border:1px solid transparent; cursor:pointer; transition:.2s ease; text-align:left;
    }
    .catbtn:hover{background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line);}
    .catbtn.active{background:rgba(200,168,107,.10); color:var(--accent); border-color:rgba(200,168,107,.25)}
    .icobox{padding: 10px; width:auto; height:auto; border-radius:10px; background:linear-gradient(160deg, var(--card), var(--card-2)); display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line)}
    .icat{width:18px; height:18px; fill: none; stroke: var(--accent); stroke-width:1.6px}
    .catlabel{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


    /* Перемещаем выбранную категорию на верх листа */
    #catList { display: flex; flex-direction: column; }
    #catList li { order: 0; }
    #catList li:has(> .catbtn.active) { order: -1; } /* активный li всегда сверху */


    /* временно блокируем раскрытие по hover */
    .sidebar.no-hover .sidewrap,
    .sidebar.no-hover:hover .sidewrap {
      width: 75px;
      height: 75px;
      -webkit-tap-highlight-color: transparent;
    }




    /* ---------- Галерея ----------  */
    .main{min-height: 60vh; width: 100%;}
    .section-head{display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom: 12px;}
    .section-head-dop{display:flex; align-items:start; height: 100%; justify-content:space-between; gap:12px; width: 30%; margin-left: -80px;}
    .section-head-sub{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom: 12px}
    .section-title{font-size:25px; font-weight:800; letter-spacing:.3px; color:var(--accent);}
    .section-sub{color:var(--muted); font-size:14px;}

    .grid{
      -webkit-tap-highlight-color: transparent; transform: translateX(-3%);
      margin-top: 30px; display:grid; gap: var(--gap);
      grid-template-columns: repeat(12, 1fr);
    }


    /* Колонки в зависимости от ширины */
    @media (min-width: 768px){ 
      .cards{grid-column: 1 / -1; display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));}
      .card:hover{transform: translateY(-2px);}
      .card{contain-intrinsic-size: 600px;}
    }
    @media (max-width: 768px){ 
      .cards{grid-column: 1 / -1; display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(0.01fr, 1fr));}
      .grid{transform: translateX(-7%);}
      .card:hover{transform: translateY(-2px);}

      .section-head-vv1{display:flex; flex-direction: column; margin-left: 10px; margin-right: 0; height: auto; transform: translateX(-4%);}
      .section-head-dop-vv1{width: 100%; height: auto; margin-left: 0; margin-right: 0;}
      .load-more{transform: translateX(-15%);}

      .page-dop {grid-template-columns: 1px 1fr;}
      .container-description {padding: 4px 8px;}

      .card{contain-intrinsic-size: 380px;}
    }

    @media (min-width: 1100px){ 
      .cards{grid-column: 1 / -1; display:grid; gap:var(--gap); grid-template-columns: repeat(2, minmax(500px, 1fr));}
    }

    /* ---------- Карточка лота ---------- */
    .card{
      position:relative; background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      content-visibility: auto;
    }
    .card:hover{border-color: rgba(200,168,107,.35)}
    .card:nth-child(odd):hover  {box-shadow: 6px 8px 26px rgba(200,168,107,.15);}
    .card:nth-child(even):hover {box-shadow: -6px 8px 26px rgba(200,168,107,.15);}

    .photos{display:grid; grid-template-columns: 2fr 1fr; gap:10px; padding:10px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
    .photos .mainimg{aspect-ratio: 4/4.1; border-radius:12px; overflow:hidden; background: var(--card-2); border:1px solid var(--line)}
    .photos .thumbs{display:grid; grid-template-rows: 1fr 1fr; gap:10px}
    .photos .thumb{aspect-ratio: 1/1; border-radius:12px; overflow:hidden; background: var(--card-2); border:1px solid var(--line)}
    .photos img{width:100%; height:100%; object-fit:cover}

    .card-body{padding: 12px 12px 14px}
    .title{font-weight:700; font-size:16px; margin:0 0 8px}
    .meta{color:var(--muted); font-size:13px; margin-bottom:10px}

    .more{
      display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
      border:1px solid rgba(200,168,107,.35); color: var(--accent); background: rgba(200,168,107,.06);
      transition:.2s ease; cursor:pointer;
    }
    .more:hover{background: rgba(200,168,107,.12); border-color: rgba(200,168,107,.6)}
    .more svg{width:16px; height:16px; stroke: currentColor}

    .load-more{display:grid; place-items:center; margin: 22px 0 8px; -webkit-tap-highlight-color: transparent; transform: translateX(-3%);}
    .btn{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
      border-radius:12px; border:1px solid var(--line); background: var(--panel); color: var(--text);
      transition:.2s ease; cursor:pointer;
    }
    .btn:hover{border-color: rgba(200,168,107,.35); color: var(--accent)}
    .btn[disabled]{opacity:.5; cursor:not-allowed}
    .span-correct{text-align: center; margin-bottom: 2px;}

    @media (max-width: 460px){
      .grid{transform: translateX(-17%);}
      .card{transform: scale(1.2); margin-top: 20px; margin-bottom: 50px;}
      .load-more{transform: translateX(-15%);}
      .card:hover{transform: scale(1.21);}
    }

    
    /* ---------- Микро-усилители ---------- */
    .muted{color:var(--muted)}
    .chip{display:block; padding:4px 8px; border-radius: 10px; background: rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); font-size:12px; transform: translateX(-100%);}
    @media (max-width: 460px) { .chip{transform: translateX(0%);} }



/* @media (max-width: 460px){
  .card{ transform: none; transform: scale(1.18) translateX(-1.5%); }
  .card:hover{ transform: none; }
}
@media (hover: hover) and (pointer: fine){.card:hover{ transform: translateY(-2px); } } */


/* ---------- Модальное окно с каруселью ---------- 
Цель: при клике по фото в карточке открывается диалог поверх страницы с просмотром 1/3 изображений, 
стрелками «влево/вправо», кнопкой «закрыть», поддержкой клавиш (Esc/←/→) и свайпов на телефоне.
*/


/* ===== Lightbox (modal) ===== */
.lb-lock { overflow: hidden; } /* блокируем скролл фона */

.lightbox[hidden] { display: none !important; }
.lightbox{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; font-family: inherit; }
.lb-backdrop{ position: absolute; inset: 0; background: rgba(5,7,10,.6); backdrop-filter: blur(4px); }
.lb-dialog{
  position: relative;
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: var(--panel, #0f1217);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  padding: 16px 56px; /* запас под стрелки */
  display: grid; gap: 10px;
}

.lb-figure{ margin: 0; display: grid; gap: 8px; }
.lb-img{
  width: 100%; max-height: 70vh; object-fit: contain; display: block;
  border-radius: 12px;
  background: radial-gradient(1200px 400px at 50% 50%, rgba(255,255,255,.08), transparent);
}
.lb-caption{ color: var(--muted, #a7acb7); font-size: 14px; text-align: center; }

.lb-close{
  position: absolute; top: 8px; right: 8px;
  border: 0; border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--accent); font-size: 20px; line-height: 20px; cursor: pointer;
  padding: 8px;
}
.lb-close:hover{ background: rgba(0,0,0,.5); }

.lb-nav{
  text-decoration: none;
  position: absolute; top: 50%; transform: translateY(-50%); 
  width: 40px; height: 60px; border: 0; cursor: pointer;
  border-radius: 10px;
  background: rgba(0,0,0,.35); color: var(--accent); font-size: 20px; line-height: 0px; padding: 0%;
  user-select: none;
}
.lb-prev{ left: 8px;  }
.lb-next{ right: 8px; }
.lb-nav:hover{ background: rgba(0,0,0,.5); }

@media (max-width: 768px){
  .lb-dialog{ padding: 12px 48px; width: min(96vw, 1000px); }
  .lb-caption{ font-size: 13px; }
}