/* ============================================================
   store.css — А-ОПТИК: витрина
   Полноразмерные фото (лайтбокс), скидки, логотипы брендов,
   каталог линз, подробные описания, акция дня.
   ============================================================ */

/* ═══════════ 1. СКИДКИ ВЕЗДЕ ═══════════ */

/* карточки в ряду — одной высоты, кнопка «в корзину» прижата к низу */
.pcard{display:flex; flex-direction:column}
.pcard__body{display:flex; flex-direction:column; flex:1}
.pcard__foot{margin-top:auto}

.pcard__off{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px 7px 10px; border-radius:999px;
  background:linear-gradient(135deg,#FF4D2E,#FF8A3D);
  color:#fff; font-family:Manrope,sans-serif; font-weight:800;
  font-size:13px; letter-spacing:-.01em; line-height:1;
  box-shadow:0 6px 18px rgba(255,77,46,.42), inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateZ(0);
}
/* на фото — в левом нижнем углу, чтобы не спорить с «избранным» */
.pcard__media .pcard__off{position:absolute; left:12px; bottom:12px; z-index:3; font-size:14px; padding:8px 14px 8px 11px}
.pcard__off::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
.pcard__off b{font-weight:800}

.pcard__prices{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.price--old{
  font-size:13.5px; font-weight:600; color:var(--muted-2);
  text-decoration:line-through; text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
}
.price--new{font-family:Manrope,sans-serif; font-weight:800; color:var(--ink); font-size:20px}
.pcard__save{
  display:inline-block; margin-top:5px; font-size:12px; font-weight:700;
  color:#0F8A4F; background:#E6F8EF; border-radius:999px; padding:3px 9px;
  white-space:nowrap;
}

/* плашка «акция продлена до …» */
.pcard__until{
  display:flex; align-items:center; gap:5px; margin-top:7px;
  font-size:11.5px; font-weight:600; color:var(--muted);
}
.pcard__until svg{width:12px;height:12px;flex:none}

.pdp__disc{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:2px 0 10px; padding:12px 16px; border-radius:var(--r-s);
  background:linear-gradient(135deg,#FFF3EF,#FFEDE8);
  border:1px solid #FFD9CE;
}
.pdp__disc .off{
  font-family:Manrope,sans-serif; font-weight:800; font-size:22px;
  color:#fff; background:linear-gradient(135deg,#FF4D2E,#FF8A3D);
  padding:6px 13px; border-radius:12px; line-height:1;
  box-shadow:0 6px 16px rgba(255,77,46,.34);
  flex:0 0 auto;
}
.pdp__disc .txt{
  font-size:13.5px; font-weight:600; color:#8A4A38; line-height:1.5;
  flex:1 1 240px; min-width:0;
}
.pdp__disc .txt b{color:#B03010}

/* таймер до конца дня */
.pdp__timer{font-variant-numeric:tabular-nums; white-space:nowrap}
.pdp__timer b{
  display:inline-block; background:var(--ink); color:#fff; border-radius:7px;
  padding:3px 7px; font-size:13px; font-weight:800; font-family:Manrope,sans-serif;
  margin:0 1px; vertical-align:baseline;
}

/* ═══════════ 2. АКЦИЯ ДНЯ ═══════════ */
.daypromo{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:16px 22px; border-radius:var(--r-m); margin-bottom:26px;
  background:linear-gradient(120deg,#0B1020,#2B2168 55%,#4B3BFF);
  color:#fff; box-shadow:var(--sh-m); position:relative; overflow:hidden;
}
.daypromo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 200px at 88% -40%,rgba(0,180,255,.5),transparent 70%);
}
.daypromo__ic{
  width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
}
.daypromo__ic svg{width:24px;height:24px}
.daypromo__txt{flex:1 1 240px; min-width:0; position:relative; z-index:1}
.daypromo__txt .k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.daypromo__txt h3{margin:2px 0 3px; font-size:1.28rem; color:#fff}
.daypromo__txt p{margin:0; font-size:13.5px; opacity:.86}
.daypromo__off{
  font-family:Manrope,sans-serif; font-weight:800; font-size:30px; line-height:1;
  padding:12px 18px; border-radius:16px; position:relative; z-index:1;
  background:linear-gradient(135deg,#FF4D2E,#FFA23D); color:#fff;
  box-shadow:0 10px 26px rgba(255,90,54,.4);
}
.daypromo__go{
  position:relative; z-index:1;
  padding:12px 20px; border-radius:999px; font-weight:700; font-size:14px;
  background:#fff; color:var(--ink); white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.daypromo__go:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.24)}

/* ═══════════ 3. ЛОГОТИПЫ БРЕНДОВ ═══════════ */
.brands__item{display:flex; align-items:center; justify-content:center; flex:none}
.brands__logo{
  height:34px; width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1) opacity(.62); transition:filter .35s var(--ease), transform .35s var(--ease);
}
.brands__item:hover .brands__logo{filter:none; transform:scale(1.06)}
.brands__name{font-family:Manrope,sans-serif; font-weight:800; font-size:17px; color:var(--muted); white-space:nowrap}

.pdp__brand{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:14px;
  padding:9px 16px 9px 12px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-s);
}
.pdp__brand img{height:30px; width:auto; max-width:140px; object-fit:contain}
.pdp__brand span{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.02em}

/* логотип бренда на карточке — в шапке карточки, рядом с категорией */
.pcard__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.pcard__brand{
  flex:none; background:#F7F8FE; border:1px solid var(--line-2);
  border-radius:8px; padding:3px 7px; max-width:88px;
}
.pcard__brand img{height:16px; width:auto; max-width:74px; object-fit:contain; display:block; opacity:.85}

/* ═══════════ 4. КАРТОЧКА: ПОДРОБНОЕ ОПИСАНИЕ ═══════════ */
.pcard__desc{
  font-size:13px; color:var(--muted); line-height:1.55; margin:9px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard__more{
  display:inline-flex; align-items:center; gap:4px; margin-top:7px;
  font-size:12.5px; font-weight:700; color:var(--brand);
}
.pcard__more svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.pcard:hover .pcard__more svg{transform:translateX(3px)}

.pdp__desc ul{display:grid; gap:9px}
.pdp__desc li{
  position:relative; padding-left:26px; font-size:14.6px; color:var(--ink-2); line-height:1.6;
}
.pdp__desc li::before{
  content:''; position:absolute; left:5px; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--cyan));
}
.pdp__desc h3{margin-bottom:14px}
.pdp__desc .pdp__desc-more{margin-top:14px; font-size:14px; color:var(--ink-2)}

.pdp__specs2{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:18px 0}
.pdp__specs2 .spec{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  padding:11px 14px; display:flex; flex-direction:column; gap:2px;
}
.pdp__specs2 .spec b{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.pdp__specs2 .spec span{font-size:14.5px; font-weight:600}

/* ═══════════ 5. КАТАЛОГ ЛИНЗ ═══════════ */
.lensfilters{display:flex; gap:9px; flex-wrap:wrap; margin:0 0 28px}
.lensfilters button{
  padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  transition:all .28s var(--ease);
}
.lensfilters button:hover{border-color:#C9C6FF; color:var(--brand)}
.lensfilters button.on{background:var(--ink); border-color:var(--ink); color:#fff}

.lenses{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px}
.lcard{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden; box-shadow:var(--sh-s);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.lcard:hover{transform:translateY(-5px); box-shadow:var(--sh-l); border-color:#D9D5FF}
.lcard__top{display:flex; gap:14px; padding:18px 18px 0; align-items:flex-start}
.lcard__media{
  width:96px; height:96px; flex:none; border-radius:var(--r-s);
  background:linear-gradient(160deg,#F7F8FE,#EEF1FB);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.lcard__media img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.lcard__brand{height:22px; width:auto; max-width:110px; object-fit:contain; margin-bottom:7px; display:block}
.lcard__name{font-family:Manrope,sans-serif; font-weight:800; font-size:15.5px; line-height:1.28; margin:0 0 6px}
.lcard__sph{
  display:inline-block; font-size:11.5px; font-weight:700; color:var(--brand);
  background:var(--brand-l); border-radius:999px; padding:3px 10px;
}
.lcard__body{padding:14px 18px 0; flex:1}
.lcard__desc{font-size:13.2px; color:var(--muted); line-height:1.55; margin:0}
.lcard__desc.clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 18px; margin-top:auto; border-top:1px solid var(--line-2);
}
.lcard__prices{display:flex; flex-direction:column; gap:1px}
.lcard__cats{display:flex; gap:6px; flex-wrap:wrap; padding:0 18px 4px}
.lcard__cats span{font-size:11px; font-weight:600; color:var(--muted-2); background:var(--line-2); border-radius:999px; padding:2px 8px}

/* ═══════════ 6. МЕНЮ: выделенные пункты ═══════════ */
.mega__all{
  display:flex !important; align-items:center; justify-content:space-between;
  background:var(--brand-l); border-radius:10px; padding:9px 12px !important;
  font-weight:700; color:var(--brand) !important; margin-bottom:6px;
}
.mega__all:hover{background:#E2DEFF}
.mega__all .mega__count{background:var(--brand); color:#fff}

/* ═══════════ 7. ЛАЙТБОКС ═══════════
   Фон светлый — тот же, что у фото-контейнера на карточке и на странице
   товара. Белый фон снимков «растворяется» через multiply, поэтому
   прямоугольник фото не читается как рамка. */
.lbx{
  position:fixed; inset:0; z-index:400; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
  opacity:0; transition:opacity .28s var(--ease);
}
.lbx.on{opacity:1}
.lbx__bd{
  position:absolute; inset:0;
  background:linear-gradient(160deg,#F8F9FE,#EDEFF9 52%,#E8EBF7);
  backdrop-filter:blur(16px) saturate(1.1);
}
.lbx__bd::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 50% -10%,rgba(75,59,255,.07),transparent 62%),
             radial-gradient(90% 70% at 50% 110%,rgba(0,180,255,.07),transparent 60%);
}
.lbx__stage{
  position:relative; z-index:2; margin:0; flex:1; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0;
}
/* Фон обязан лежать на ПРЯМОМ родителе фото, внутри того же контекста
   наложения: .lbx__stage имеет z-index, то есть создаёт свой контекст,
   и multiply у картинки смешивается только с содержимым этого контекста.
   Если фон оставить на .lbx__bd (дальняя родственная плашка) — белое
   останется белым. Ровно на этом же принципе работают .pcard__media и .pdp__main. */
.lbx__frame{
  flex:1; min-height:0; width:100%; display:grid; place-items:center;
  overflow:hidden; touch-action:none;
  background:linear-gradient(160deg,#F8F9FE,#EDEFF9 52%,#E8EBF7);
}
.lbx__img{
  max-width:min(96vw,1180px); max-height:100%; width:auto; height:auto;
  object-fit:contain; background:transparent;
  mix-blend-mode:multiply;
  transition:transform .18s var(--ease-2), opacity .3s var(--ease);
  transform-origin:center center; will-change:transform;
}
.lbx__img.is-loading{opacity:.35}
.lbx__cap{
  position:relative; z-index:2; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; justify-content:center; padding:14px 8px 0; color:var(--ink-2);
  font-size:13.5px; text-align:center;
}
.lbx__cnt{
  font-family:Manrope,sans-serif; font-weight:800; color:#fff;
  background:var(--ink); border-radius:999px; padding:4px 12px; font-size:12.5px;
}
.lbx__ttl{font-weight:600}
.lbx__hint{color:var(--muted-2); font-size:12px}
.lbx__x{
  position:absolute; top:22px; right:24px; z-index:4;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); border:1px solid var(--line); color:var(--ink);
  box-shadow:var(--sh-m);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lbx__x:hover{background:#fff; transform:rotate(90deg); box-shadow:var(--sh-l)}
.lbx__x svg{width:20px;height:20px}
.lbx__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); border:1px solid var(--line); color:var(--ink);
  box-shadow:var(--sh-m);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lbx__nav:hover{background:#fff; box-shadow:var(--sh-l)}
.lbx__nav--p{left:22px}
.lbx__nav--n{right:22px}
.lbx__nav--p:hover{transform:translateY(-50%) translateX(-3px)}
.lbx__nav--n:hover{transform:translateY(-50%) translateX(3px)}
.lbx__nav svg{width:24px;height:24px}
.lbx__thumbs{
  position:relative; z-index:3; display:flex; gap:10px; padding:16px 0 2px;
  max-width:min(94vw,900px); overflow-x:auto; scrollbar-width:thin;
}
.lbx__th{
  width:66px; height:66px; flex:none; border-radius:12px; overflow:hidden;
  border:2px solid var(--line); background:linear-gradient(160deg,#F8F9FE,#EDEFF9);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.lbx__th img{width:100%;height:100%;object-fit:cover; mix-blend-mode:multiply}
.lbx__th:hover{border-color:#C9C6FF}
.lbx__th.on{border-color:var(--brand); transform:translateY(-3px)}
.lbx__zoom{
  position:absolute; bottom:22px; right:24px; z-index:4;
  display:flex; align-items:center; gap:2px; padding:5px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  border-radius:999px; box-shadow:var(--sh-m); backdrop-filter:blur(8px);
}
.lbx__zoom button{
  min-width:40px; height:36px; padding:0 12px; border-radius:999px;
  color:var(--ink); font-weight:700; font-size:13.5px; transition:background .22s var(--ease);
}
.lbx__zoom button:hover{background:var(--brand-l); color:var(--brand)}

/* зум-курсор на фото товара */
.pdp__main{cursor:zoom-in; position:relative; display:grid; place-items:center}

/* у линз картинка небольшая (175×113) — не растягиваем её на всю площадь */
.pdp__main img[src*="/img/lens/"]{
  width:auto; height:auto; padding:0;
  max-width:min(60%,340px); max-height:64%;
}
.pdp__main::after{
  content:''; position:absolute; right:14px; bottom:14px; width:40px; height:40px;
  border-radius:50%; background:rgba(11,16,32,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/19px no-repeat;
  opacity:0; transform:scale(.8); transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.pdp__main:hover::after{opacity:1; transform:scale(1)}
.pdp__thumbs button{cursor:zoom-in}

/* ═══════════ 7. АДАПТИВ ═══════════ */
@media (max-width:900px){
  .lbx{padding:12px}
  .lbx__nav{width:44px;height:44px}
  .lbx__nav--p{left:8px} .lbx__nav--n{right:8px}
  .lbx__x{top:12px;right:12px;width:40px;height:40px}
  .lbx__hint{display:none}
  .lbx__zoom{bottom:auto; top:12px; left:12px; right:auto}
  .lbx__thumbs{padding-top:10px}
  .lbx__th{width:54px;height:54px}
  .lenses{grid-template-columns:1fr}
  .daypromo{padding:14px 16px; gap:12px}
  .daypromo__off{font-size:24px; padding:9px 14px}
  .pcard__brand{max-width:74px}
}