:root{
    --bg:#0c0b0a; --bg2:#141210; --card:#181513; --line:#2c2620;
    --ink:#f3ece0; --mut:#9a8f7d; --gold:#e8c178; --gold2:#caa14e;
    --glow:rgba(232,193,120,.55); --hot:#d98a4a; --ok:#7fb38a; --r:18px;
    --script:'Marck Script',cursive; --serif:'Cormorant Garamond',serif; --body:'Manrope',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
    background-image:radial-gradient(700px 380px at 50% -8%, rgba(232,193,120,.14), transparent 65%);}
  a{color:inherit;text-decoration:none}

  header{position:sticky;top:0;z-index:40;background:rgba(12,11,10,.82);
    backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .bar{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:16px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{height:46px;width:auto;border-radius:8px;filter:drop-shadow(0 0 10px var(--glow))}
  .brand .nm{font-family:var(--script);font-size:24px;color:var(--gold);
    text-shadow:0 0 14px var(--glow);line-height:1;white-space:nowrap}
  @media(max-width:600px){.brand .nm{display:none}}
  .lang{margin-left:6px;display:flex;gap:4px}
  .lang button{background:none;border:1px solid var(--line);color:var(--mut);
    font-size:11px;padding:5px 9px;border-radius:7px;cursor:pointer;font-family:inherit}
  .lang button.on{color:var(--gold);border-color:var(--gold2)}
  .nav{margin-left:auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:12px;color:var(--mut);padding:8px 11px;border-radius:999px;white-space:nowrap;transition:.2s}
  .nav a:hover{color:var(--ink);background:var(--bg2)}
  .cart{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;font-weight:700;
    padding:9px 15px;border-radius:999px;font-size:13px;display:flex;gap:6px;align-items:center;cursor:pointer;border:none;
    box-shadow:0 0 16px rgba(232,193,120,.3)}
  .cart b{background:#2a1e08;color:var(--gold);border-radius:999px;padding:1px 7px;font-size:11px}

  .hero{max-width:1180px;margin:18px auto 0;padding:0 18px}
  .slider{position:relative;height:360px;border-radius:24px;overflow:hidden;border:1px solid var(--line)}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center;padding:48px;
    background-size:cover;background-position:center}
  .slide.on{opacity:1}
  .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.9),rgba(8,7,6,.3))}
  .slide .txt{position:relative;z-index:2;max-width:500px}
  .slide .kick{color:var(--gold);font-size:12px;letter-spacing:4px;font-weight:600;margin-bottom:12px;text-shadow:0 0 12px var(--glow)}
  .slide h2{font-family:var(--serif);font-size:46px;line-height:1.02;margin-bottom:16px;font-weight:600;letter-spacing:.5px}
  .slide p{color:#ddd3c2;font-size:15px;margin-bottom:22px;font-weight:300;line-height:1.5}
  .slide .go{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;font-weight:700;
    padding:13px 28px;border-radius:999px;font-size:14px;box-shadow:0 0 22px rgba(232,193,120,.35)}
  .dots{position:absolute;bottom:18px;left:48px;z-index:3;display:flex;gap:8px}
  .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.3s}
  .dots i.on{background:var(--gold);width:28px;border-radius:5px;box-shadow:0 0 10px var(--glow)}

  .wrap{max-width:1180px;margin:0 auto;padding:46px 18px}
  .sec-h{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .sec-h h3{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.5px}
  .sec-h span{color:var(--mut);font-size:13px;font-weight:300}
  .sec-h .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--gold2),transparent)}

  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    transition:.28s;position:relative;display:flex;flex-direction:column}
  .card:hover{transform:translateY(-6px);border-color:var(--gold2);box-shadow:0 22px 46px -22px rgba(0,0,0,.8),0 0 26px -8px var(--glow)}
  .ph{position:relative;aspect-ratio:1;background:#fff;overflow:hidden;cursor:pointer}
  .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
  .ph img.b{opacity:0}
  .ph:hover img.a{opacity:0}
  .ph:hover img.b{opacity:1}
  .tag{position:absolute;top:10px;left:10px;z-index:3;background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#2a1e08;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.5px}
  .tag.tag-new{background:linear-gradient(135deg,#ff7a18,#e8451f);color:#fff}
  .disc{position:absolute;top:10px;right:10px;z-index:3;background:var(--ok);color:#08231a;
    font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px}
  .like{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;border:none;border-radius:50%;
    background:rgba(12,11,10,.7);color:#fff;cursor:pointer;font-size:15px;display:grid;place-items:center;
    transition:.2s;backdrop-filter:blur(4px)}
  .like.on{background:var(--hot);box-shadow:0 0 12px rgba(217,138,74,.6)}
  .like:active{transform:scale(.8)}
  .views{position:absolute;bottom:10px;left:10px;top:auto;z-index:4;font-size:11px;color:#fff;
    background:rgba(12,11,10,.6);padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
  .nostock{position:absolute;inset:0;z-index:4;background:rgba(12,11,10,.55);display:grid;place-items:center;
    color:#fff;font-size:13px;font-weight:600;backdrop-filter:grayscale(.6)}
  .body{padding:13px 13px 15px;display:flex;flex-direction:column;flex:1}
  .grp{font-size:10px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
  .nm{font-size:13px;line-height:1.35;margin-bottom:10px;min-height:34px;font-weight:400}
  .pr{display:flex;align-items:baseline;gap:8px;margin-top:auto}
  .pr .now{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--gold)}
  .pr .cur{font-size:12px;color:var(--mut)}
  .buy{margin-top:11px;width:100%;border:none;background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#2a1e08;font-weight:700;padding:11px;border-radius:11px;cursor:pointer;font-size:13px;transition:.2s}
  .buy:hover{filter:brightness(1.08);box-shadow:0 0 18px rgba(232,193,120,.4)}
  .cm-btn{background:none;border:1px solid var(--line);color:var(--mut);font-size:11px;
    padding:7px 10px;border-radius:9px;cursor:pointer;margin-top:9px;width:100%;font-family:inherit}
  .cm-btn:hover{color:var(--ink);border-color:var(--gold2)}
  .cm-box{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;display:none}
  .cm-box.on{display:block}
  .cm{font-size:12px;margin-bottom:9px;color:#d3c9b8}
  .cm b{color:var(--ink)}
  .cm .st{color:var(--gold);font-size:10px}

  .ov{position:fixed;inset:0;background:rgba(6,5,4,.82);backdrop-filter:blur(7px);z-index:100;
    display:none;align-items:center;justify-content:center;padding:16px}
  .ov.on{display:flex}
  .modal{background:var(--bg2);border:1px solid var(--gold2);border-radius:20px;width:100%;max-width:440px;
    max-height:92vh;overflow-y:auto;padding:26px;position:relative;box-shadow:0 0 50px -10px var(--glow)}
  .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--mut);font-size:26px;cursor:pointer;line-height:1}
  .modal h4{font-size:17px;margin-bottom:4px;font-weight:500}
  .modal .mg{color:var(--gold);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
  .field input,.field select{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:11px 12px;color:var(--ink);font-size:14px;font-family:inherit}
  .field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
  .diopt{display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow-y:auto;padding:2px}
  .diopt button{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:6px 10px;
    border-radius:8px;font-size:12px;cursor:pointer;transition:.15s;font-family:inherit}
  .diopt button.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;border-color:var(--gold);font-weight:700}
  .submit{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;font-weight:800;
    border:none;padding:14px;border-radius:12px;font-size:15px;cursor:pointer;margin-top:6px;box-shadow:0 0 20px rgba(232,193,120,.35)}
  .note{font-size:11px;color:var(--mut);text-align:center;margin-top:12px;line-height:1.5}

  footer{border-top:1px solid var(--line);padding:34px 18px;text-align:center;color:var(--mut);font-size:12px;margin-top:20px}
  footer .fb{font-family:var(--script);font-size:26px;color:var(--gold);text-shadow:0 0 14px var(--glow);margin-bottom:8px}
  .demo-flag{background:linear-gradient(135deg,var(--hot),var(--gold2));color:#2a1e08;text-align:center;font-size:12px;padding:8px;font-weight:600}

/* === Поиск === */
.search-wrap { margin-left: auto; }
.search-wrap input {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--body); font-size: 13px; padding: 8px 14px;
  border-radius: 999px; outline: none; width: 180px; transition: .2s;
}
.search-wrap input:focus { border-color: var(--gold2); width: 220px; }
@media(max-width:700px){ .search-wrap { display: none; } }

/* === Кнопка "Завантажити ще" === */
.load-more {
  background: none; border: 1px solid var(--gold2); color: var(--gold);
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 13px 36px; border-radius: 999px; cursor: pointer; transition: .2s;
}
.load-more:hover { background: rgba(232,193,120,.08); box-shadow: 0 0 18px rgba(232,193,120,.2); }

/* === Скелетон-карточки === */
.card.skeleton {
  min-height: 320px; animation: pulse 1.4s ease-in-out infinite;
  background: var(--card);
}
@keyframes pulse {
  0%,100%{ opacity:.5 } 50%{ opacity:1 }
}

/* === Модалка === */
.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 16px;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px; width: 100%; max-width: 460px;
  position: relative; max-height: 90vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(12,11,10,.65); border: 1px solid var(--line); color: #fff; font-size: 24px; cursor: pointer;
  line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 12; backdrop-filter: blur(4px);
}
.modal-close:hover { background: var(--hot); color: #fff; }
.modal-title {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  margin-bottom: 16px; color: var(--gold);
}
.modal-product {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg2); border-radius: 12px; padding: 12px;
  margin-bottom: 18px; border: 1px solid var(--line);
}
.modal-product img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.modal-product .mp-name { font-size: 13px; line-height: 1.4; margin-bottom: 4px; }
.modal-product .mp-price { font-family: var(--serif); font-size: 20px; color: var(--gold); }

/* Форма */
.form-label {
  display: block; font-size: 12px; color: var(--mut);
  margin-bottom: 6px; margin-top: 14px; letter-spacing: .5px;
}
.modal input[type=text],
.modal input[type=tel],
.modal input[type=search] {
  width: 100%; background: var(--bg2); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--body); font-size: 14px;
  padding: 11px 14px; border-radius: 11px; outline: none; transition: .2s;
}
.modal input:focus { border-color: var(--gold2); }

/* Диоптрии */
.diopter-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; margin-bottom: 4px;
}
.diopter-grid button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--mut);
  font-family: var(--body); font-size: 12px; padding: 6px 12px;
  border-radius: 8px; cursor: pointer; transition: .2s;
}
.diopter-grid button.sel {
  border-color: var(--gold2); color: var(--gold); background: rgba(232,193,120,.08);
}

/* Сообщение об успехе/ошибке */
#order-msg {
  margin-top: 14px; padding: 12px 16px; border-radius: 10px;
  font-size: 13px; text-align: center;
}
#order-msg.ok  { background: rgba(127,179,138,.15); color: var(--ok); border: 1px solid var(--ok); }
#order-msg.err { background: rgba(220,80,80,.12);   color: #e07070;   border: 1px solid #e07070;   }

/* === Подвал === */
.footer { border-top: 1px solid var(--line); margin-top: 40px; }

/* === Активная категория === */
.nav a.active { color: var(--gold); background: rgba(232,193,120,.08); }

/* === Старая цена === */
.pr .old { font-size: 13px; color: var(--mut); text-decoration: line-through; }

/* === Catalog layout з сайдбаром === */
.catalog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}
@media(max-width:900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; } /* на мобайлі — кнопка "Фільтри" */
}

/* === Сайдбар === */
.sidebar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  position: sticky;
  top: 72px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
  letter-spacing: .5px;
}
.clear-filters {
  background: none;
  border: none;
  color: var(--mut);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.clear-filters:hover { color: var(--ink); }

/* Фільтр-група */
.filter-group { margin-bottom: 16px; }
.filter-group-name {
  font-size: 11px;
  color: var(--mut);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-group-name::after { content: '▾'; font-size: 10px; }
.filter-group.collapsed .filter-vals { display: none; }
.filter-group.collapsed .filter-group-name::after { content: '▸'; }

.filter-vals { display: flex; flex-direction: column; gap: 4px; }
.filter-val {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mut);
  cursor: pointer;
  padding: 3px 0;
  border-radius: 6px;
  transition: .15s;
}
.filter-val:hover { color: var(--ink); }
.filter-val input[type=checkbox] { accent-color: var(--gold); }
.filter-val.active { color: var(--gold); }

/* ===== Дерево-каталог у сайдбарі ===== */
.cat-tree { margin-bottom: 6px; }
.tree-loading { color: var(--mut); font-size: 12px; padding: 8px 0; }
.cat-tree .tnode > .tchildren { display: none; }
.cat-tree .tnode.open > .tchildren { display: block; }
.cat-tree .trow {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--ink); line-height: 1.25; transition: background .15s, color .15s;
}
.cat-tree .trow:hover { background: var(--bg2); }
.cat-tree .trow.active { background: rgba(232,193,120,.12); color: var(--gold); }
.cat-tree .trow.lvl0 { font-weight: 600; }
.cat-tree .trow.lvl1 { padding-left: 22px; font-size: 12.5px; color: var(--ink); }
.cat-tree .trow.lvl2 { padding-left: 38px; font-size: 12px; color: var(--mut); }
.cat-tree .trow.lvl2.active,
.cat-tree .trow.lvl1.active { color: var(--gold); }
.cat-tree .tarrow {
  flex: 0 0 16px; text-align: center; color: var(--gold2);
  font-size: 10px; transition: transform .15s; user-select: none;
}
.cat-tree .tdot { flex: 0 0 16px; text-align: center; color: var(--line); font-size: 10px; }
.cat-tree .tname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tree .tcount {
  flex: 0 0 auto; font-size: 10.5px; color: var(--mut);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; min-width: 26px; text-align: center;
}
.cat-tree .trow.active .tcount { color: var(--gold); border-color: var(--gold2); }

/* ===================== КАТАЛОГ DRILL-DOWN ===================== */
.catalog { padding-top: 22px; }

/* Хлібні крихти */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin:6px 0 18px; font-size:13px; }
.breadcrumb .bc { color:var(--mut); cursor:pointer; padding:3px 7px; border-radius:7px; transition:.15s; }
.breadcrumb .bc:hover { color:var(--ink); background:var(--bg2); }
.breadcrumb .bc.cur { color:var(--gold); font-weight:600; }
.breadcrumb .bc-sep { color:var(--line); }

/* Картки груп/підгруп у ряд */
.cat-cards { display:flex; flex-wrap:wrap; gap:11px; margin-bottom:24px; }
.cat-card {
  flex:1 1 180px; min-width:160px; max-width:280px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; cursor:pointer; display:flex; flex-direction:column; gap:7px;
  transition:.15s; font-family:inherit; color:var(--ink);
}
.cat-card:hover { border-color:var(--gold2); box-shadow:0 0 16px rgba(232,193,120,.12); transform:translateY(-2px); }
.cat-card.active { border-color:var(--gold); background:rgba(232,193,120,.08); }
.cat-card .cc-name { font-size:14px; font-weight:600; line-height:1.3; }
.cat-card .cc-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cat-card .cc-count { font-size:11px; color:var(--mut); }
.cat-card .cc-more { font-size:11px; color:var(--gold); white-space:nowrap; font-weight:600; }
.tree-loading { color:var(--mut); font-size:13px; padding:10px 0; }

/* Шапка розділу + кнопка фільтрів */
.catalog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.catalog-head-l { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.catalog-head h3 { font-family:var(--serif); font-size:26px; font-weight:600; }
#cat-count { color:var(--mut); font-size:13px; }
.filter-toggle {
  display:inline-flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:999px;
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
}
.filter-toggle:hover { border-color:var(--gold2); }
.filter-toggle.open { border-color:var(--gold); color:var(--gold); }
.filter-toggle .ft-arrow { font-size:10px; transition:.2s; }
.filter-toggle.open .ft-arrow { transform:rotate(180deg); }
.filter-toggle .ft-count { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08;
  font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.filter-toggle .ft-count:empty { display:none; }

/* Панель фільтрів */
.filter-panel { display:none; background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:24px; }
.filter-panel.open { display:block; }
.filter-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.filter-panel-head > span { font-family:var(--serif); font-size:18px; color:var(--gold); }
.filters-hint { color:var(--mut); font-size:13px; padding:6px 0; }
#filters-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px 26px; }
.filter-panel .filter-group { margin-bottom:0; }
.filter-panel .filter-group-name { font-size:13px; font-weight:700; color:var(--ink); }
.filter-panel .filter-vals { max-height:190px; overflow:auto; margin-top:7px; padding-right:4px; }
.filter-panel .filter-val { font-size:13px; color:var(--mut); display:flex; gap:8px; align-items:flex-start; padding:3px 0; cursor:pointer; white-space:normal; line-height:1.3; }
.filter-panel .filter-val input { margin-top:2px; }
.clear-filters { background:none; border:1px solid var(--line); color:var(--mut); font-size:12px; padding:5px 12px; border-radius:999px; cursor:pointer; font-family:inherit; }
.clear-filters:hover { color:var(--gold); border-color:var(--gold2); }

/* ===================== КАРТКА ТОВАРУ (модалка) ===================== */
.product-bg { align-items:flex-start; overflow-y:auto; }
.product-modal { background:var(--bg2); border:1px solid var(--gold2); border-radius:20px; width:100%; max-width:940px; margin:40px auto; position:relative; }
.product-body { display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:28px; }
.pm-loading { grid-column:1/-1; text-align:center; color:var(--mut); padding:60px 0; }
.pm-main { background:#fff; border-radius:14px; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.pm-main img { width:100%; height:100%; object-fit:cover; }
.pm-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pm-thumb { width:62px; height:62px; object-fit:cover; border-radius:9px; border:2px solid transparent; cursor:pointer; background:#fff; transition:.15s; }
.pm-thumb:hover { border-color:var(--gold2); }
.pm-thumb.on { border-color:var(--gold); }
.pm-name { font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.18; margin-bottom:11px; }
.pm-meta { display:flex; gap:10px; align-items:center; margin-bottom:13px; flex-wrap:wrap; }
.pm-instock { color:var(--ok); font-size:12px; }
.pm-nostock { color:#e07070; font-size:12px; }
.pm-cat { color:var(--mut); font-size:12px; border:1px solid var(--line); border-radius:999px; padding:2px 11px; }
.pm-price { display:flex; align-items:baseline; gap:11px; margin-bottom:6px; flex-wrap:wrap; }
.pm-now { font-family:var(--serif); font-size:31px; color:var(--gold); }
.pm-old { color:var(--mut); text-decoration:line-through; font-size:16px; }
.pm-disc { background:var(--hot); color:#2a1e08; font-weight:700; font-size:12px; padding:2px 8px; border-radius:6px; }
.pm-block { margin-top:20px; }
.pm-label { font-size:12px; color:var(--gold); font-weight:700; margin-bottom:9px; text-transform:uppercase; letter-spacing:.6px; }
.pm-muted { color:var(--mut); font-weight:400; text-transform:none; letter-spacing:0; }
.pm-diopters { display:flex; flex-wrap:wrap; gap:6px; }
.pm-diopters button { background:var(--bg); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 11px; font-size:12px; cursor:pointer; font-family:inherit; }
.pm-diopters button:hover { border-color:var(--gold2); }
.pm-diopters button.on { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; border-color:var(--gold); font-weight:700; }
.pm-diopters.shake { animation:pmshake .4s; }
@keyframes pmshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.pm-buy { margin-top:20px; max-width:300px; }
.pm-desc { color:#ddd3c2; font-size:13.5px; line-height:1.65; }
.pm-params { width:100%; border-collapse:collapse; font-size:13px; }
.pm-params td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.pm-params td:first-child { color:var(--mut); width:46%; }

@media(max-width:760px) {
  .product-body { grid-template-columns:1fr; padding:18px; gap:18px; }
  .product-modal { margin:0; border-radius:0; min-height:100vh; }
  .pm-name { font-size:21px; }
  .cat-card { flex:1 1 calc(50% - 6px); min-width:0; max-width:none; }
  .catalog-head h3 { font-size:22px; }
}

/* ===================== ВІТРИНА ГРУП НА ГОЛОВНІЙ ===================== */
.group-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.group-card {
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  cursor:pointer; font-family:inherit; color:var(--ink); text-align:center;
  padding:0 0 16px; transition:.18s; display:flex; flex-direction:column;
}
.group-card:hover { border-color:var(--gold2); box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 22px rgba(232,193,120,.14); transform:translateY(-3px); }
.group-card .gc-img { width:100%; aspect-ratio:16/10; background:#f3efe8; overflow:hidden; }
.group-card .gc-img img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.group-card:hover .gc-img img { transform:scale(1.04); }
.group-card .gc-name {
  font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2;
  padding:16px 16px 4px; color:var(--ink); text-transform:uppercase; letter-spacing:.5px;
}
.group-card:hover .gc-name { color:var(--gold); }
.group-card .gc-count { font-size:12px; color:var(--mut); }
.group-card.skeleton-card { aspect-ratio:16/12; background:var(--card); animation:pulse 1.4s infinite; border:1px solid var(--line); }

@media(max-width:900px){ .group-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .group-card .gc-name{font-size:16px;} }
@media(max-width:520px){ .group-grid { grid-template-columns:repeat(2,1fr); gap:11px; } .group-card .gc-name{font-size:13px;padding:12px 8px 4px;} }

/* ===== Підгрупи: підказка + крупніші картки по центру ===== */
.cc-hint {
  width:100%; text-align:center; color:var(--gold); font-size:14px; font-weight:600;
  letter-spacing:.4px; margin-bottom:14px; text-transform:uppercase;
  animation: ccpulse 1.8s ease-in-out infinite;
}
@keyframes ccpulse { 0%,100%{opacity:.65} 50%{opacity:1} }
.cat-cards-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cat-card {
  flex:0 1 230px; min-width:180px; max-width:300px; text-align:center;
  align-items:center; padding:18px 18px; gap:9px;
}
.cat-card .cc-name { font-size:16px; font-weight:700; }
.cat-card .cc-meta { justify-content:center; gap:12px; width:100%; }
.cat-card:hover { transform:translateY(-3px) scale(1.02); }

/* ===== Кнопка кошика + лічильник ===== */
.cart { position:relative; }
.cart-badge {
  background:#fff; color:#2a1e08; font-size:11px; font-weight:800; min-width:18px; height:18px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; margin-left:2px;
}

/* ===== Кошик (модалка) ===== */
.cart-modal {
  background:var(--bg2); border:1px solid var(--gold2); border-radius:20px;
  width:100%; max-width:560px; margin:auto; position:relative; padding:26px; max-height:90vh; overflow:auto;
}
.cart-empty { color:var(--mut); text-align:center; padding:40px 0; }
.cart-item { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.cart-item img { width:60px; height:60px; object-fit:cover; border-radius:10px; background:#fff; flex:0 0 auto; }
.cart-item .ci-mid { flex:1; min-width:0; }
.cart-item .ci-name { font-size:13px; line-height:1.35; margin-bottom:3px; }
.cart-item .ci-dio { font-size:11px; color:var(--gold); display:block; margin-bottom:3px; }
.cart-item .ci-price { font-family:var(--serif); font-size:16px; color:var(--gold); }
.cart-item .ci-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.ci-qty { display:flex; align-items:center; gap:9px; }
.ci-qty button { width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; font-size:15px; line-height:1; }
.ci-qty button:hover { border-color:var(--gold2); color:var(--gold); }
.ci-qty span { min-width:18px; text-align:center; font-size:13px; }
.ci-del { background:none; border:none; color:var(--mut); cursor:pointer; font-size:13px; }
.ci-del:hover { color:#e07070; }
.cart-foot { margin-top:18px; }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--mut); margin-bottom:14px; }
.cart-total b { font-family:var(--serif); font-size:24px; color:var(--gold); }
.cart-back { background:none; border:none; color:var(--mut); cursor:pointer; font-size:13px; margin-bottom:6px; font-family:inherit; padding:0; }
.cart-back:hover { color:var(--gold); }

/* Форма оформлення */
.form-row { display:flex; gap:12px; }
.form-row > div { flex:1; }
.delivery-opts { display:flex; gap:10px; margin-bottom:6px; }
.delivery-opt {
  flex:1; display:flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid var(--line); border-radius:10px; padding:11px; cursor:pointer; font-size:13px;
  transition:.15s;
}
.delivery-opt:hover { border-color:var(--gold2); }
.delivery-opt input { accent-color:var(--gold); }
.delivery-opt:has(input:checked) { border-color:var(--gold); background:rgba(232,193,120,.08); color:var(--gold); }

/* ===== Тост ===== */
#toast {
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; font-weight:700;
  padding:12px 22px; border-radius:999px; font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:.25s; z-index:200; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:560px){
  .form-row { flex-direction:column; gap:0; }
  .cart-modal { border-radius:16px 16px 0 0; margin:auto 0 0; max-height:94vh; }
  .cat-card { flex:1 1 100%; max-width:none; }
}

/* Підписи плюс/мінус діоптрій у картці товару */
.pm-dio-sub { font-size:12px; font-weight:600; margin:10px 0 6px; letter-spacing:.3px; }
.pm-dio-sub.plus  { color:var(--ok); }
.pm-dio-sub.minus { color:var(--hot); }
#pm-dio-wrap .pm-diopters { margin-bottom:4px; }
#pm-dio-wrap.shake { animation:pmshake .4s; }

/* ===== Адмін-панель редагування ===== */
.admin-bar { position:sticky; top:0; z-index:9000; background:linear-gradient(90deg,#3a2c0a,#5a4410); color:#ffe9a8;
  text-align:center; padding:8px 14px; font-size:14px; border-bottom:1px solid var(--gold); }
.admin-bar a { color:#fff; text-decoration:underline; margin:0 6px; font-weight:700; }
.pm-admin { margin:12px 0 6px; padding:12px 14px; border:1px dashed var(--gold2); border-radius:10px; background:rgba(202,161,78,.08); }
.pm-admin-lbl { display:block; font-size:13px; color:var(--gold); font-weight:700; margin-bottom:8px; }
.pm-admin-row { display:flex; gap:8px; flex-wrap:wrap; }
.pm-admin-row input { width:130px; padding:9px 11px; font-size:15px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font-family:inherit; }
.pm-admin-row button { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; border:0; border-radius:8px;
  padding:9px 14px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.pm-admin-hint { font-size:11.5px; color:var(--mut); margin-top:8px; line-height:1.5; }
.pm-admin-del { margin-top:10px; width:100%; background:#8b2020; color:#fff; border:0; border-radius:8px;
  padding:11px 14px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.pm-admin-del:hover { background:#a82828; }
.pm-dio-admin { display:inline-flex; align-items:center; position:relative; }
.pm-dio-x { cursor:pointer; color:#fff; background:#c0392b; border-radius:50%; width:16px; height:16px;
  font-size:10px; line-height:16px; text-align:center; margin-left:-6px; margin-top:-14px; font-style:normal; z-index:2; }
.pm-dio-x:hover { background:#e74c3c; }

/* Поля доставки, що перемикаються */
.delivery-fields { margin-top:4px; }
.checkout-warn { color:#e07070; font-size:12px; margin-top:4px; display:none; }

.delivery-opt.sm { padding:8px; font-size:12px; }
.pay-opts { margin-bottom:2px; }
.delivery-fields .form-row { margin-top:0; }

/* ===== Лого: вирівнювання назви до логотипа ===== */
.brand { align-items:center; }
.brand img { display:block; }
.brand .nm { display:inline-flex; align-items:center; line-height:1; }

/* ===== Фільтри: простий / розширений ===== */
.filters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px 26px; }
.filters-extended { margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
.ext-toggle { margin-top:16px; background:var(--card); border:1px solid var(--gold2); color:var(--gold);
  padding:10px 18px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.ext-toggle:hover { background:rgba(232,193,120,.08); }
.ext-toggle .ext-arrow { display:inline-block; transition:.2s; }
.ext-toggle.open .ext-arrow { transform:rotate(180deg); }
.fv-label { flex:1; }
.fv-count { color:var(--mut); font-size:10.5px; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:0 6px; min-width:22px; text-align:center; flex:0 0 auto; }

/* Діоптрії — чипи з лічильником, плюс/мінус */
.dio-group { grid-column:1 / -1; }
.dio-group .dio-sub { font-size:11px; font-weight:700; margin:8px 0 6px; letter-spacing:.3px; }
.dio-group .dio-sub.plus  { color:var(--ok); }
.dio-group .dio-sub.minus { color:var(--hot); }
.dio-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.dio-chip { background:var(--bg); border:1px solid var(--line); color:var(--ink); border-radius:9px;
  padding:6px 9px; font-size:12px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.dio-chip:hover { border-color:var(--gold2); }
.dio-chip i { font-style:normal; color:var(--mut); font-size:10px; }
.dio-chip.on { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; border-color:var(--gold); font-weight:700; }
.dio-chip.on i { color:#2a1e08; }

/* ===== Зум фото (лайтбокс) ===== */
.zoom-bg { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:300; display:none; align-items:center; justify-content:center; }
.zoom-bg.open { display:flex; }
.zoom-bg img { max-width:94vw; max-height:92vh; object-fit:contain; cursor:zoom-in; transition:transform .2s; border-radius:8px; }
.zoom-bg img.zoomed { transform:scale(2); cursor:zoom-out; }
.zoom-close { position:fixed; top:16px; right:16px; width:50px; height:50px; border-radius:50%; background:rgba(12,11,10,.6); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:30px; line-height:1; cursor:pointer; z-index:301; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.pm-main { position:relative; cursor:zoom-in; }
.pm-zoom-ic { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; pointer-events:none; }

/* ===== Інфо-сторінки ===== */
.info-bg { align-items:center; }
.info-modal { background:var(--bg2); border:1px solid var(--gold2); border-radius:18px; width:100%; max-width:560px; margin:auto; padding:26px; max-height:88vh; overflow:auto; position:relative; }
.info-body { color:#ddd3c2; font-size:14px; line-height:1.7; white-space:pre-line; }

/* ===== Футер ===== */
.footer { border-top:1px solid var(--line); margin-top:54px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding:38px 18px 22px; }
.footer-col h4 { font-family:var(--serif); font-size:16px; color:var(--gold); margin-bottom:12px; }
.footer-col a { display:block; color:var(--mut); font-size:13px; padding:4px 0; cursor:pointer; transition:.15s; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-top:1px solid var(--line); color:var(--mut); font-size:12px; }
@media(max-width:700px){ .footer-grid { grid-template-columns:1fr; gap:24px; } .footer-bottom{ flex-direction:column; gap:6px; } }

/* fix: контейнер фільтрів — блок, сітку формує .filters-grid */
#filters-list { display:block; }

/* ===== Завжди видима панель діоптрій ===== */
.diopter-bar {
  background:linear-gradient(180deg, rgba(232,193,120,.08), rgba(232,193,120,.02));
  border:1px solid var(--gold2); border-radius:16px; padding:16px 18px; margin-bottom:20px;
  box-shadow:0 0 26px rgba(232,193,120,.08);
}
.diopter-bar .db-title { color:var(--gold); font-size:13.5px; font-weight:600; margin-bottom:12px; text-align:center; letter-spacing:.3px; }
.diopter-bar .filter-group-name { display:none; }
.diopter-bar .dio-group { grid-column:auto; }
.diopter-bar .dio-sub:first-of-type { margin-top:0; }

/* ===== Велике, читабельне оформлення замовлення ===== */
#cart-checkout-view .modal-title { font-size:24px; }
.checkout-big .form-label { font-size:15.5px; font-weight:600; margin:14px 0 7px; display:block; color:var(--ink); }
.checkout-big input[type=text],
.checkout-big input[type=tel],
.checkout-big textarea {
  width:100%; background:var(--bg); border:1.5px solid var(--line); color:var(--ink);
  font-size:16.5px; padding:14px 16px; border-radius:11px; box-sizing:border-box; font-family:inherit;
}
.checkout-big input:focus, .checkout-big textarea:focus { border-color:var(--gold2); outline:none; }
.checkout-big textarea { resize:vertical; min-height:64px; line-height:1.5; }
.checkout-big .delivery-opt { font-size:15.5px; padding:15px 14px; font-weight:600; }
.checkout-big .delivery-opt.sm { font-size:14px; padding:12px; }
.checkout-big .form-hint { font-size:13.5px; color:var(--mut); margin:0 0 9px; line-height:1.5; }
.checkout-big .cart-total { font-size:16px; }
.checkout-big .cart-total b { font-size:28px; }
#checkout-submit { font-size:18px; padding:17px; margin-top:6px; }
.check-row { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; margin:12px 0; cursor:pointer; line-height:1.4; color:var(--ink); }
.check-row input { margin-top:3px; accent-color:var(--gold); width:18px; height:18px; flex:0 0 auto; }
.msgr-opts .delivery-opt { font-weight:700; }
/* трохи ширша модалка кошика для зручності */
.cart-modal { max-width:600px; }

/* ===== Підказка-опис при наведенні на групу ===== */
.group-card .gc-img { position:relative; }
.gc-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(180deg, rgba(12,11,10,.78), rgba(12,11,10,.92));
  backdrop-filter:blur(2px);
}
.group-card:hover .gc-overlay { opacity:1; }
.gc-overlay p {
  color:#f3ece0; font-size:14.5px; line-height:1.55; font-weight:400;
  border-left:2px solid var(--gold); padding-left:12px; max-width:320px;
}
@media(max-width:760px){
  /* на телефоні наведення немає — показуємо опис під назвою завжди не варто; лишаємо клік по групі */
  .gc-overlay { display:none; }
}

/* "від" перед ціною (коли ціна залежить від діоптрії) */
.pr .from { color:var(--mut); font-size:12px; font-weight:500; }
.pm-from { color:var(--mut); font-size:14px; font-weight:500; }

/* Готові банери з власним текстом — без затемнення й накладеного тексту */
.slide.nobg-text::after { display:none; }
.slide.nobg-text { cursor:pointer; }

/* ===== Топ-моделі: карусель (transform) ===== */
.top-carousel { position:relative; }
.tc-viewport { overflow:hidden; }
.tc-track { display:flex; gap:18px; padding:4px 2px 10px; transition:transform .45s ease; will-change:transform; }
.tc-track .card { flex:0 0 262px; }
.tc-track .card.skeleton, .tc-card.skeleton { flex:0 0 262px; min-height:380px; }
.tc-arrow {
  position:absolute; top:42%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--gold2);
  background:rgba(20,18,16,.92); color:var(--gold); font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tc-arrow:hover { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; }
.tc-prev { left:-10px; } .tc-next { right:-10px; }
@media(max-width:600px){
  .tc-track .card { flex:0 0 calc(50% - 9px); }
  .tc-track .card.skeleton, .tc-card.skeleton { flex:0 0 calc(50% - 9px); min-height:300px; }
  .tc-arrow { width:34px; height:34px; font-size:19px; }
  .tc-prev{left:-2px;} .tc-next{right:-2px;}
}

/* Шапка без меню — пошук і кошик праворуч */
.search-wrap { margin-left:auto; }

/* Стрілки навігації в зумі фото */
.zoom-arrow {
  position:fixed; top:50%; transform:translateY(-50%); z-index:302;
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.55); color:#fff; font-size:32px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.zoom-arrow:hover { background:rgba(232,193,120,.9); color:#2a1e08; }
.zoom-prev { left:24px; } .zoom-next { right:24px; }
@media(max-width:600px){ .zoom-arrow{width:42px;height:42px;font-size:26px;} .zoom-prev{left:8px;} .zoom-next{right:8px;} }

/* ===== Обране (favorites) ===== */
.fav-btn {
  position:relative; background:var(--card); border:1px solid var(--line); color:var(--gold);
  width:42px; height:42px; border-radius:999px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:.15s;
}
.fav-btn:hover { border-color:var(--gold2); }
.fav-btn .fav-heart { line-height:1; }
.fav-badge {
  position:absolute; top:-4px; right:-4px; background:var(--hot); color:#fff; font-size:11px; font-weight:800;
  min-width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
/* серце в карточці товару */
.pm-actions { display:flex; gap:10px; align-items:center; margin-top:20px; }
.pm-actions .pm-buy { margin-top:0; flex:1; }
.pm-fav {
  flex:0 0 auto; width:52px; height:52px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--mut); font-size:22px; cursor:pointer; transition:.15s;
}
.pm-fav:hover { border-color:var(--hot); color:var(--hot); }
.pm-fav.on { background:var(--hot); border-color:var(--hot); color:#fff; }

/* ===== Кнопка «Менеджер» ===== */
.mgr-fab {
  position:fixed; right:20px; bottom:20px; z-index:120;
  display:flex; align-items:center; gap:8px; padding:12px 18px;
  background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; font-weight:700; font-size:14px;
  border:none; border-radius:999px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 18px rgba(232,193,120,.3);
  font-family:inherit; animation:mgrpulse 2.6s ease-in-out infinite;
}
.mgr-fab:hover { filter:brightness(1.07); }
.mgr-fab-ic { font-size:18px; }
@keyframes mgrpulse { 0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(232,193,120,.3);} 50%{transform:scale(1.04);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 26px rgba(232,193,120,.5);} }
@media(max-width:600px){
  .mgr-fab{right:14px;bottom:14px;padding:0;width:58px;height:58px;border-radius:50%;justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 6px rgba(232,193,120,.18);}
  .mgr-fab-ic{font-size:26px}
  .mgr-fab-txt{display:none}
}

.mgr-modal { background:var(--bg2); border:1px solid var(--gold2); border-radius:20px; width:100%; max-width:440px; margin:auto; padding:26px; position:relative; max-height:90vh; overflow:auto; }
.mgr-phone { font-family:var(--serif); font-size:24px; color:var(--gold); text-align:center; margin:6px 0 16px; }
.mgr-btns { display:flex; gap:10px; margin-bottom:18px; }
.mgr-btn { flex:1; text-align:center; padding:13px; border-radius:11px; font-weight:700; font-size:14px; text-decoration:none; }
.mgr-btn.viber { background:#7360f2; color:#fff; }
.mgr-btn.call { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#2a1e08; }
.mgr-info p { color:#ddd3c2; font-size:13.5px; line-height:1.6; margin-bottom:10px; }
.mgr-info ul { margin:0 0 10px 18px; color:#ddd3c2; font-size:13px; line-height:1.6; }
.mgr-info li { margin-bottom:4px; }

/* ===== МОБІЛЬНА ВІТРИНА: банер + діоптрії ===== */
@media(max-width:600px){
  /* Банер: показуємо ПОВНІСТЮ (без обрізання), компактно */
  .hero{padding:0 12px;margin-top:12px}
  .slider{height:auto;aspect-ratio:4/3;border-radius:16px}
  .slide{padding:0;background-size:contain;background-repeat:no-repeat;
    background-position:center;background-color:#0c0b0a}
  /* якщо завантажено окреме фото для телефону — заповнюємо повністю */
  .slide.has-m{background-image:var(--m);background-size:cover;background-position:center}
  .dots{left:50%;transform:translateX(-50%);bottom:8px}

  /* Діоптрії: компактніші чіпи */
  .diopter-bar{padding:12px 10px}
  .diopter-bar .db-title{font-size:12.5px;margin-bottom:9px}
  .dio-chips{gap:5px}
  .dio-chip{padding:6px 8px;font-size:12px;border-radius:8px}
  .dio-chip i{font-size:9px}

  /* Картки топ-моделей трохи компактніші */
  .tc-track .nm{font-size:12px;min-height:30px;margin-bottom:8px}
  .tc-track .buy{padding:9px;font-size:12px}
}

/* ===== Попап «Замовлення прийнято» ===== */
.order-ok{background:var(--bg2);border:1px solid var(--gold2);border-radius:20px;max-width:420px;width:100%;
  padding:30px 26px;text-align:center;box-shadow:0 0 50px -10px var(--glow);animation:okpop .25s ease}
@keyframes okpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.order-ok .ok-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;font-size:34px;font-weight:800;
  display:grid;place-items:center;box-shadow:0 0 22px rgba(232,193,120,.45)}
.order-ok h3{font-family:var(--serif);font-size:26px;color:var(--gold);margin-bottom:6px}
.order-ok .ok-num{color:var(--mut);font-size:13px;margin-bottom:16px}
.order-ok .ok-note{background:rgba(202,161,78,.08);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;text-align:left;margin-bottom:20px}
.order-ok .ok-note p{color:#ddd3c2;font-size:13.5px;line-height:1.6;margin-bottom:8px}
.order-ok .ok-note p:last-child{margin-bottom:0}
.order-ok .buy{max-width:220px;margin:0 auto}

/* ===== Футер: блок співпраці / міні-реклама ===== */
.foot-promo{display:inline-block;margin-top:8px;background:rgba(232,193,120,.1);border:1px solid var(--gold2);
  color:var(--gold);padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:600;line-height:1.3;transition:.2s}
.foot-promo:hover{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08}

/* ===== Сортування у шапці каталогу ===== */
.catalog-head-r{display:flex;gap:10px;align-items:center}
.sort-wrap{position:relative;display:flex;align-items:center}
.sort-wrap .sort-ic{position:absolute;left:12px;color:var(--gold);font-size:14px;pointer-events:none}
.sort-wrap .sort-select{padding-left:32px}
.sort-select{background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:inherit;
  font-size:13px;padding:9px 13px;border-radius:999px;cursor:pointer;outline:none;transition:.2s}
.sort-select:hover,.sort-select:focus{border-color:var(--gold2)}
@media(max-width:600px){
  .catalog-head{flex-wrap:wrap;gap:10px}
  .catalog-head-r{width:100%}
  .sort-select{flex:1;font-size:14px;padding:11px 12px}
}

/* ===== Пагінація + к-сть на сторінці ===== */
.pager-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.per-page{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;flex-wrap:wrap}
.pp{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit;font-size:13px;transition:.15s}
.pp:hover{border-color:var(--gold2)}
.pp.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;border-color:var(--gold);font-weight:700}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}
#pager-bottom{margin-top:32px}
.pg{min-width:38px;height:38px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:10px;
  cursor:pointer;font-family:inherit;font-size:14px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.pg:hover:not(:disabled){border-color:var(--gold2)}
.pg.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1e08;border-color:var(--gold);font-weight:700}
.pg:disabled{opacity:.4;cursor:default}
.pg-gap{color:var(--mut);padding:0 2px}
@media(max-width:600px){ .pg{min-width:34px;height:34px;font-size:13px;border-radius:9px} .pager{gap:5px} }

/* ===== Підказки на значках картки (перегляди / обране) ===== */
.views[data-tip], .like[data-tip]{position:absolute}
.views[data-tip]::after, .like[data-tip]::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 6px); z-index:6;
  background:rgba(12,11,10,.92); color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
  padding:4px 8px; border-radius:6px; opacity:0; transform:translateY(-3px); pointer-events:none; transition:.15s;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.views[data-tip]::after{left:0;top:auto;bottom:calc(100% + 6px)}
.like[data-tip]::after{right:0}
.views[data-tip]:hover::after, .like[data-tip]:hover::after{opacity:1; transform:translateY(0)}

/* ===== МОБІЛЬНА ПОЛІРОВКА (телефон) ===== */
@media(max-width:600px){
  /* Шапка: компактно, щоб корзина й обране влізали */
  .bar{gap:8px;padding:9px 12px}
  .brand img{height:36px}
  .brand .nm{display:none !important}          /* назву ховаємо — звільняємо місце */
  .lang{margin-left:0;gap:3px}
  .lang button{padding:4px 7px;font-size:10px}
  .bar{flex-wrap:wrap}
  .search-wrap{display:block;order:5;flex:1 1 100%;margin:8px 0 0}
  .search-wrap input,#search-input{width:100%}
  #search-input:focus{width:100%}
  .fav-btn{width:40px;height:40px;margin-left:auto}  /* обране притиснуте праворуч */
  .cart{padding:9px 13px;font-size:14px}
  .fav-btn,.cart{flex:0 0 auto}

  /* Картки груп: акуратна назва у 2 рядки, без опису-оверлею */
  .gc-overlay{display:none !important}
  .group-card .gc-name{
    font-size:12.5px;padding:11px 9px 2px;letter-spacing:.2px;min-height:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .group-card .gc-count{font-size:11px;padding-bottom:2px}
  .group-card .gc-img{aspect-ratio:1/1}

  /* М'якший загальний вигляд */
  .wrap{padding:26px 14px}
  .sec-h h3{font-size:23px}
}