:root{
  --bg:#0b0f14;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#2b83c7;
  --line:#1f2937;
  --ok:#10b981;
  --bad:#ef4444;
  --radius:18px;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --max:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(245,158,11,.12), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(16,185,129,.08), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

header{
  position:sticky;top:0;z-index:50;
  background: rgba(11,15,20,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(31,41,55,.7);
}


.hero{
  min-height: 90vh;
  display: flex;
  align-items: center;
}
@media (max-width: 768px){
  .hero{
    min-height: auto;
    padding: 32px 0;
  }
}
.heroGrid{
  display:block;
}
@media (max-width: 860px){
  .heroGrid{grid-template-columns:1fr}
}
.hCard{
  width: 60vw;                /* ← 60% ширины экрана */
  max-width: 1100px;          /* защита на больших мониторах */
  margin-left: 24px;          /* небольшой отступ слева */
  margin-right: auto;

  background: rgba(17,24,39,.7);
  border:1px solid rgba(31,41,55,.8);
  border-radius: var(--radius);
  padding:28px 32px;
  box-shadow: var(--shadow);
}
@media (max-width: 768px){
  .hero .hCard{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding:22px;
  }
}
.hTitle{font-size:38px;line-height:1.15;margin:0 0 10px}
.hSub{color:var(--muted);margin:0 0 18px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{
  border:1px solid rgba(245,158,11,.26);
  background: rgba(245,158,11,.10);
  color: #ffd089;
  padding:8px 10px;border-radius:999px;font-size:13px
}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(31,41,55,.9);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition:.2s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.btn.primary{
  background: linear-gradient(135deg, #2b83c7, #063772);
  color:#fff;
}
.nav-cta{
  background: linear-gradient(135deg, #2b83c7, #063772);
  color:#ffffff !important;
  font-weight:700;

  padding:10px 16px;
  border-radius:999px;

  box-shadow: 0 8px 20px rgba(14,165,233,.35);
}

.nav-cta:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn.primary:hover{filter: brightness(1.05)}
.btn.badge{
  position:relative;
}


.btn .icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.btn{
  gap:10px;
}

.badgeCount{
  position:absolute;top:-6px;right:-6px;
  background: var(--brand);
  color:#111827;font-weight:800;font-size:12px;
  width:20px;height:20px;border-radius:999px;
  display:grid;place-items:center;
  border:2px solid var(--bg);
}

.section{padding:18px 0 34px}
.sectionTitle{margin:0 0 12px;font-size:22px}
.grid3{
  display: grid;
  column-gap: 60px; /* расстояние МЕЖДУ КОЛОНКАМИ */
  row-gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid2{display:grid;gap:14px;grid-template-columns: repeat(2, 1fr)}
@media (max-width: 860px){
  .grid3,.grid2{grid-template-columns:1fr}
}
.card{
  background: rgba(17,24,39,.66);
  border:1px solid rgba(31,41,55,.8);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.card h3{margin:6px 0 8px}
.card p{margin:0;color:var(--muted)}
.metaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px}
.kpi{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius: var(--radius);
  border:1px solid rgba(31,41,55,.8);
  background: rgba(17,24,39,.5);
}
.kpi strong{font-size:22px}
.kpi span{color:var(--muted);font-size:13px}

.footer{
  padding:24px 0 34px;border-top:1px solid rgba(31,41,55,.7);
  color:var(--muted);
}
.footerGrid{display:grid;gap:14px;grid-template-columns: 1.4fr .6fr}
@media (max-width: 860px){.footerGrid{grid-template-columns:1fr}}
.small{font-size:13px;color:var(--muted)}
hr.sep{border:none;border-top:1px solid rgba(31,41,55,.7);margin:12px 0}

/* Portfolio */
.gallery{display:grid;gap:12px;grid-template-columns: repeat(3, 1fr)}
@media (max-width: 860px){.gallery{grid-template-columns:1fr}}
.gItem{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(31,41,55,.8);
  background: rgba(17,24,39,.6);
}
.gItem img{height:220px;object-fit:cover;width:100%}
.gCap{padding:12px;color:var(--muted);font-size:13px}

/* Forms */
input, textarea, select{
  width:100%;
  border-radius: 14px;
  padding:12px 12px;
  border:1px solid rgba(31,41,55,.9);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(245,158,11,.55)}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}

.consentCheck{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
}
.consentCheck input[type="checkbox"]{
  width:auto;
  margin:2px 0 0;
  padding:0;
  border-radius:4px;
}
.consentCheck a{
  text-decoration:underline;
}

/* Shop */
.shopGrid{display:grid;gap:14px;grid-template-columns: repeat(3, 1fr)}
@media (max-width: 860px){.shopGrid{grid-template-columns:1fr}}
.price{font-weight:800}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cartPanel{
  position:fixed;top:0;right:0;height:100vh;width:min(420px, 100%);
  background: rgba(17,24,39,.98);
  border-left:1px solid rgba(31,41,55,.8);
  transform: translateX(102%);
  transition: .25s ease;
  z-index:100;
  box-shadow: -12px 0 30px rgba(0,0,0,.35);
}
.cartPanel.open{transform: translateX(0)}
.cartHead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;border-bottom:1px solid rgba(31,41,55,.7)}
.cartBody{padding:12px 16px;overflow:auto;height:calc(100vh - 170px)}
.cartFoot{padding:12px 16px;border-top:1px solid rgba(31,41,55,.7)}
.cartItem{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(31,41,55,.6);
}
.cartItem img{width:64px;height:54px;object-fit:cover;border-radius:14px;border:1px solid rgba(31,41,55,.8)}
.qty{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
}
.qty button{padding:8px 10px;border-radius:12px}
.note{color:var(--muted);font-size:13px}
.toast{
  position:fixed;left:50%;bottom:18px;transform: translateX(-50%);
  background: rgba(17,24,39,.96);
  border:1px solid rgba(31,41,55,.8);
  padding:10px 12px;border-radius:14px;
  box-shadow: var(--shadow);
  opacity:0;pointer-events:none;
  transition:.2s ease;
  z-index:120;
}
.toast.show{opacity:1;bottom:24px}

/* =========================
   HEADER / NAV / BURGER (CLEAN)
   ========================= */

header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,15,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31,41,55,.7);
}

header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Лого (один раз, без дублей) */
.logo-img{
  height: 40px;    /* 34–48 по вкусу */
  width: auto;
  display: block;
}

/* Десктоп меню */
header nav{ position:relative; }

header nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  align-items:center;
}

header nav a{
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  transition:.2s ease;
}

header nav a:hover{
  background: rgba(74, 140, 233, 0.216);
}

header nav a.active{
  background: rgba(74, 140, 233, 0.216);
  border: 1px solid rgba(74, 140, 233, 0.216);
}

/* Бургер по умолчанию скрыт (десктоп) */
.burger{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);

  display:none;              /* ✅ важно */
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:0 12px;

  cursor:pointer;
  transition:.25s ease;
}

.burger:hover{ background: rgba(255,255,255,.12); }

.burger span{
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
  transition:.25s ease;
}

/* Анимация в крестик */
.burger.active span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2){
  opacity:0;
}
.burger.active span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Мобильное меню */
@media (max-width: 860px){
  .burger{
    display:flex;       /* ✅ показываем только на мобилке */
    margin-left:auto;   /* ✅ бургер справа */
  }

  header nav ul{
    display:none;
    position: fixed;              /* ✅ фиксируем к окну */
    left: 18px;                   /* ✅ ровные отступы */
    right: 18px;
    top: 84px;                    /* ✅ сразу под шапкой (подгони при необходимости) */

    flex-direction: column;
    gap: 10px;

    background: rgba(17,24,39,.98);
    border: 1px solid rgba(31,41,55,.7);
    border-radius: 18px;
    padding: 16px;

    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    z-index: 9999;                /* ✅ поверх всего */
  }

  header nav ul.open{
    display:flex;
  }

  header nav a{
    width:100%;
    text-align:center;            /* ✅ как на твоём скрине, ровно */
    padding:14px 12px;
  }
}

/* =========================
   HERO BG (CLEAN)
   ========================= */

.hero-bg{
  position: relative;
  background-image: url('../img/hero.jpeg'); /* поменяй на hero.png если нужно */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* затемнение для читаемости текста */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(11,15,20,.92) 0%,
    rgba(11,15,20,.75) 45%,
    rgba(11,15,20,.45) 100%
  );
  z-index:0;
}

/* контент поверх */
.hero-bg > .container{
  position:relative;
  z-index:1;
}

/* Магазинные кнопки (перебивает .btn.primary) */
.btn.primary.btn-shop{
  background: linear-gradient(135deg, #49a46a, #075423) !important; /* пример: зелёный */
  color:#ffffff !important;
  border:none !important;

  box-shadow:
    0 10px 26px rgba(34,197,94,.35),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.btn.primary.btn-shop:hover{
  filter: brightness(1.10);
  transform: translateY(-2px);
}

.btn-shop .icon{
  width:18px;
  height:18px;
}
/* hero container: растягиваем на всю ширину */
.heroWide{
  max-width: 100%;
}

/* карточка: 70% экрана + аккуратный сдвиг влево */
.heroWide .hCard{
  width: min(70vw, 1100px);
  margin-left: 24px;            /* небольшой отступ слева */
  margin-right: auto;
  transform: translateX(-120px); /* сдвиг влево (подгони 60–160) */
}

/* мобилка */
@media (max-width: 768px){
  .heroWide .hCard{
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}
@media (max-width: 480px){

  .hTitle{
    font-size: 26px;
    line-height: 1.2;
  }

  .hSub{
    font-size: 13.5px;
    line-height: 1.5;
  }

  .hero .btn{
    font-size: 14px;
    padding: 12px 16px;
  }

  .pill{
    font-size: 14px;
    padding: 6px 15px;
  }

  .pills{
    gap: 6px;
  }
}
@media (min-width: 481px) and (max-width: 768px){

  .hTitle{
    font-size: 28px;
    line-height: 1.2;
  }

  .hSub{
    font-size: 14.5px;
  }

  .hero .btn{
    font-size: 15px;
    padding: 14px 18px;
  }

  .pill{
    font-size: 14px;
  }
}

/* Карточка услуги с изображением */
.serviceCard{
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Блок с картинкой (меньше) */
.serviceMedia{
  position: relative;
  height: 135px;      /* было 190 */
  overflow: hidden;
}

.serviceMedia img{
  width: 100%;
  height: 100%;
  object-position: top;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* Затемнение */
.serviceOverlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(11,15,20,.85) 100%
  );
}

/* Тело карточки (меньше отступы) */
.serviceBody{
  padding: 12px;      /* было 18px 16px 16px */
}

/* Заголовок/описание в карточках (компактнее) */
.serviceBody h3{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.serviceBody p{
  font-size: 14px;
  line-height: 1.35;
  margin: 0;

  overflow: hidden;

  /* стандарт + webkit */
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Hover */
.serviceCard:hover .serviceMedia img{
  transform: scale(1.06);
}

/* Мобилка */
@media (max-width: 768px){
  .serviceMedia{ height: 120px; }

  .serviceBody{ padding: 10px; }

  .serviceBody h3{
    font-size: 15px;
  }

  .serviceBody p{
    font-size: 12.5px;
  }
}

  /* если кнопки в карточке большие — сделаем компактнее */
.serviceBody .btn{
  padding: 8px 12px;
  font-size: 14px;
}

#services .container{
  max-width: 1080px; /* оптимально под 3 карточки */
}

@media (max-width: 900px){
  .grid3{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 16px;
  }
}

@media (max-width: 560px){
  .grid3{
    grid-template-columns: 1fr;
    row-gap: 14px;   /* column-gap уже не важен */
  }
}

#about .container{
  max-width: 1080px; /* оптимально под 3 карточки */
}

#portfolio-preview .container{
  max-width: 1080px; /* оптимально под 3 карточки */
}


#about p{
  margin-bottom: 14px;
  line-height: 1.55;
}

/* последний абзац без лишнего отступа */
#about p:last-child{
  margin-bottom: 0;
}

@media (max-width: 768px){

  #about h3{
    font-size: 15px;
  }

  #about p{
    font-size: 12.5px;
  }
}
#about > .container > .grid2{
  grid-template-columns: 1.5fr 0.5fr;
}
@media (max-width: 860px){
  #about > .container > .grid2{
    grid-template-columns: 1fr;
  }
}

/* ==== Carousel layout ==== */
.carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.carViewport {
  overflow: hidden;
  border-radius: 16px;
}

.carTrack {
  display: flex;
  gap: 12px;
  will-change: transform;
  transform: translate3d(0,0,0);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* чтобы вертикальный скролл страницы работал */
}

.carTrack.isDragging { cursor: grabbing; }

.carSlide {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  background: #111;
}

.carSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001); /* убирает щели на некоторых браузерах */
}

/* стрелки */
.carBtn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.carBtn:hover { transform: scale(1.05); background: rgba(0,0,0,.7); }
.carBtn:active { transform: scale(0.98); }

/* CTA button under carousel */
.portfolioCta {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* мобилка: стрелки меньше, слайды крупнее */
@media (max-width: 640px) {
  .carBtn { width: 36px; height: 36px; }
  .carSlide { width: 78vw; aspect-ratio: 16 / 10; border-radius: 14px; }
  .carViewport { border-radius: 14px; }
}

@media (max-width: 768px) {
  .carousel {
    grid-template-columns: 1fr; /* одна колонка */
  }

  .carousel .carBtn {
    display: none;
  }
}

#contacts .container{
  max-width: 1080px; /* оптимально под 3 карточки */
}

.mapWrap {
  width: 100%;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.mapWrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .mapWrap {
    height: 260px;
    border-radius: 14px;
  }
}

/* ==== Lightbox gallery ==== */
.page-portfolio .lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  display: grid;
  place-items: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.page-portfolio .lightbox.isOpen {
  opacity: 1;
  pointer-events: auto;
}

.page-portfolio .lightboxInner {
  width: min(96vw, 1100px);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.page-portfolio .lightboxImg {
  max-width: 96vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.page-portfolio .lightboxCap {
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  max-width: min(92vw, 900px);
}

/* кнопки */
.page-portfolio .lbBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.page-portfolio .lbBtn:hover { transform: translateY(-50%) scale(1.06); background: rgba(0,0,0,.7); }
.page-portfolio .lbBtn:active { transform: translateY(-50%) scale(0.98); }

.page-portfolio .lbPrev { left: 14px; }
.page-portfolio .lbNext { right: 14px; }

/* закрытие (крестик) */
.page-portfolio .lbClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* сделать картинки кликабельными */
.page-portfolio img[data-zoom] { cursor: zoom-in; }

/* мобилка: кнопки компактнее */
@media (max-width: 640px) {
  .page-portfolio .lbBtn { width: 36px; height: 36px; }
  .page-portfolio .lbClose { width: 36px; height: 36px; }
  .page-portfolio .lightboxCap { font-size: 13px; }
}

.page-portfolio .pfGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.page-portfolio .pfItem{
  margin: 0;
}

.page-portfolio .pfMedia{
  display: block;
  border-radius: 16px;
  overflow: hidden;       /* обрезаем ТОЛЬКО картинку */
  aspect-ratio: 4 / 3;
  background: #111;
}

.page-portfolio .pfMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-portfolio .pfCap{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  opacity: .9;
}

/* адаптация */
@media (max-width: 900px){
  .pfGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .pfGrid{ grid-template-columns: 1fr; }
}

.grid2--wide{
  grid-template-columns: 1.4fr 0.6fr;
}

@media (max-width: 900px){
  .grid2--wide{
    grid-template-columns: 1fr;
  }
}

.card p {
  margin-bottom: 0.5em;
}

.grid2--wide2{
  grid-template-columns: 1.25fr 0.75fr;
}

@media (max-width: 900px){
  .grid2--wide2{
    grid-template-columns: 1fr;
  }
}

.articleHero2 img {
  border-radius: 18px;
  width: 100%;
  height: 400px;          /* висота блоку */
  object-fit: cover;     /* обрізає зображення */
  object-position: center bottom; /* яку частину показувати */
}

@media (max-width: 768px) {
  .articleHero2 img {
    height: 250px;
    width: 100%;
    object-position: center bottom;
  }
}

.articleHero3 img {
  border-radius: 18px;
  width: 100%;
  height: 400px;          /* висота блоку */
  object-fit: cover;     /* обрізає зображення */
  object-position: 100% 60%; /* яку частину показувати */
}

@media (max-width: 768px) {
  .articleHero3 img {
    height: 250px;
    width: 100%;
    object-position: 100% 60%;
  }
}

/* ===== Shop cards ===== */
.shopGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .shopGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .shopGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .shopGrid {
    grid-template-columns: 1fr;
  }
}

.pCard {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pCard:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .16);
}

.pCardImg {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, .02);
}

.pCardBody {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pCardTitle {
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
  font-size: 14px;
}

.pCardDesc {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pCardFoot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.pCardFoot .price {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pCardFoot .btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: bold;
}

@media (max-width: 858px) {
  .shopGrid {
    justify-items: center;
    gap: 18px;
  }
  
  .pCard {
    max-width: 300px;
    width: 100%;
  }
}

/* ===== Product page ===== */
.productGrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .productGrid {
    grid-template-columns: 1fr;
  }
}

.productBox {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 14px;
}

.thumbRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.thumbBtn {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  width: 86px;
  height: 60px;
  cursor: pointer;
}

.thumbBtn.isActive {
  border-color: rgba(255, 255, 255, .35);
}

/* ===== PRODUCT PAGE LAYOUT ===== */
.productLayout {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 16px;
}

.productGrid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.productLeft img#mainImg {
  width: 100%;
  height: 420px;
  object-fit: contain;
  /* чтобы не резало */
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
}

.productRight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.productRight .btn {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  /* чуть плотнее */
}

.productTitle {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}

.productMeta {
  display: flex;
  gap: 12px;
  font-size: 16px;
  color: var(--muted);
  flex-wrap: wrap;
}

.productPrice {
  font-size: 28px;
  font-weight: 800;
}

.productDesc {
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 900px) {
  .productGrid {
    grid-template-columns: 1fr;
  }
}

.productShort {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.productFull {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.productFull h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
}

.productFullText p {
  margin: 0 0 14px;
  line-height: 1.7;
}

.productFullText p:last-child {
  margin-bottom: 0;
}

.productFullText ul,
.productFullText ol {
  margin: 0 0 14px 18px;
}

.productFullText li {
  margin: 6px 0;
}

.productFullText a {
  text-decoration: underline;
}

.productFullText strong {
  font-weight: 800;
}

/* ===== Lightbox (clean) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}

.lightbox.isOpen {
  display: block;
}

.lightboxBack {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
}

.lightboxBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1100px);
  height: min(86vh, 720px);
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  overflow: hidden;
}

/* зона изображения */
.lightboxStage {
  position: absolute;
  inset: 0;
  padding: 14px 64px;
  /* было больше — уменьшили */
  display: grid;
  place-items: center;
}

#lbImg {
  display: block;
  max-width: 100%;
  max-height: calc(86vh - 44px);
  /* чтобы точно помещалось по высоте */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}

/* кнопки */
.lightboxClose {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
}

.lightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
  z-index: 3;
}

.lightboxPrev {
  left: 12px;
}

.lightboxNext {
  right: 12px;
}

.lightboxNav:hover,
.lightboxClose:hover {
  background: rgba(255, 255, 255, .10);
}

#mainImg {
  cursor: zoom-in;
}

@media (max-width: 520px) {
  .lightboxStage {
    padding: 18px 56px;
  }

  .lightboxNav {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* ===== Shop: categories + search ===== */
#catSelect,
#search {
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

#search::placeholder {
  color: rgba(255, 255, 255, .45);
}

#catSelect:focus,
#search:focus {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}

/* Красивый select-стрелка */
#catSelect {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .55) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 17px,
    calc(100% - 10px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Dropdown options (частично зависит от браузера) */
#catSelect option {
  background: #0b1220;
  color: #fff;
}

/* Немного “карточности” для блока справа (необязательно) */
.shopFilters {
  min-width: 240px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

/* ===== Custom category dropdown ===== */

.catDropdown {
  position: relative;
  width: 100%;
}

.catBtn {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
}

.catBtn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.catList {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.catList.open {
  display: block;
}

.catOption {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
}

.catOption:hover {
  background: rgba(255, 255, 255, 0.1);
}

.catOption.isActive {
  background: rgba(0, 160, 255, 0.25);
  font-weight: 600;
}

/* ===== Shop top layout ===== */
.shopTop {
  margin-bottom: 18px;
}

.shopTopHead {
  margin-bottom: 12px;
}

/* фильтры на всю ширину */
.shopFiltersWide {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  margin-top: 18px;
  margin-bottom: 22px;
}

.shopFiltersWide--searchOnly {
  grid-template-columns: 1fr;
}

.shopFilter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shopLabel {
  font-size: 12px;
  color: var(--muted);
}

/* поиск */
.searchWrap {
  position: relative;
}

.shopSearchInput {
  width: 100%;
  height: 44px;
  padding: 0 110px 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.shopSearchInput::placeholder {
  color: rgba(255, 255, 255, .45);
}

.shopSearchBtn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 12px;
  border: none;
  background: rgba(99, 165, 241, .9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.shopSearchBtn:hover {
  background: rgba(99, 165, 241, 1);
}

.shopSuggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(17, 24, 39, .98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  padding: 8px;
  max-height: 380px;
  overflow: auto;
}

.shopSuggestGroupTitle {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 6px 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.shopSuggestItem {
  all: unset;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}

.shopSuggestItem:hover {
  background: rgba(255, 255, 255, .08);
}

.shopSuggestName {
  font-size: 14px;
  line-height: 1.25;
}

.shopSuggestMeta {
  font-size: 12px;
  color: var(--muted);
}

.shopSuggestAction {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(99, 165, 241, .16);
  color: #dbeafe;
  font-weight: 700;
}

.shopSuggestAction:hover {
  background: rgba(99, 165, 241, .26);
}

@media (max-width: 820px) {
  .shopFiltersWide {
    grid-template-columns: 1fr;
  }

  .shopSearchInput {
    padding-right: 14px;
  }

  .shopSearchBtn {
    position: static;
    margin-top: 8px;
    width: 100%;
    height: 40px;
  }
}

/* =========================
   CHECKOUT: NP city suggest
   ========================= */
.page-checkout #npCitySuggest {
  /* скрыто по умолчанию — JS включает */
  display: none;

  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;

  padding: 8px;
  border-radius: 16px;

  background: rgba(17, 24, 39, .98);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);

  max-height: 280px;
  overflow: auto;

  /* плавность */
  transform-origin: top;
  animation: npDrop .12s ease both;
}

/* когда открыт */
.page-checkout #npCitySuggest.npSuggestOpen {
  display: block;
}

/* “карточки” подсказок */
.page-checkout .npSuggestItem {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;

  cursor: pointer;
  color: var(--text);

  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);

  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

.page-checkout .npSuggestItem:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}

.page-checkout .npSuggestItem:active {
  transform: scale(.99);
}

/* разделители мягкие, если много элементов */
.page-checkout .npSuggestItem+.npSuggestItem {
  margin-top: 8px;
}

/* скролл (чтобы выглядел аккуратно) */
.page-checkout #npCitySuggest::-webkit-scrollbar {
  width: 10px;
}

.page-checkout #npCitySuggest::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  border: 2px solid rgba(17, 24, 39, .98);
}

.page-checkout #npCitySuggest::-webkit-scrollbar-track {
  background: transparent;
}

/* небольшая анимация появления */
@keyframes npDrop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================
   CHECKOUT: order summary with image
   ========================= */

.page-checkout .sumItem {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;

  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.page-checkout .sumImg {
  width: 64px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.page-checkout .sumImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-checkout .sumTitle {
  font-weight: 800;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.page-checkout .sumMeta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.page-checkout .sumRight {
  text-align: right;
  min-width: 140px;
}

.page-checkout .sumPrice {
  font-weight: 900;
  font-size: 16px;
}

.page-checkout .sumCalc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* итог */
.page-checkout .sumTotal {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* мобильная версия */
@media (max-width: 520px) {
  .page-checkout .sumItem {
    grid-template-columns: 54px 1fr;
  }

  .page-checkout .sumRight {
    grid-column: 2 / -1;
    text-align: left;
    margin-top: 6px;
  }
}

/* ===== Checkout NP warehouses: scroll inside dropdown ===== */

/* сам dropdown */
#npWhList {
  max-height: 420px;
  /* общая высота выпадашки */
  overflow: hidden;
  /* оставляем, но важно: внутри будет скролл */
  padding: 8px;
  /* чтобы было красиво */
  display: none;
  /* управляет .catList.open */
}

/* когда открыт */
#npWhList.open {
  display: block;
}

/* поле поиска */
#npWhSearch {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  margin-bottom: 8px;
}

/* подсказка */
#npWhHint {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--muted);
}

/* контейнер с опциями */
#npWhOptions {
  max-height: 300px;
  /* высота именно списка */
  overflow: auto;
  /* ✅ скролл */
  padding-right: 6px;
  /* чтоб скроллбар не прилипал */
}

/* Chrome/Edge scrollbar */
#npWhOptions::-webkit-scrollbar {
  width: 10px;
}

#npWhOptions::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
}

#npWhOptions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}

#npWhOptions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .22);
}

/* Firefox */
#npWhOptions {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) rgba(255, 255, 255, .04);
}

/* ===== Hot deals ===== */
.hotDeals {
  margin-top: 14px;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(129, 207, 255, 0.223);
  backdrop-filter: blur(10px);
}

.hotHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hotBadge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(255, 255, 255);
  background: rgba(255, 165, 9, 0.257);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 520px) {
  .hotBadge{
    font-size: 12;
  }
}

.hotTitle {
  margin: 8px 0 4px;
  font-size: 20px;
  line-height: 1.15;
}

.hotSub {
  color: var(--muted, rgba(255, 255, 255, .65));
  font-size: 14px;
}

.hotNav {
  display: flex;
  gap: 8px;
}

.hotBtn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* 4 товара в ряд */
.hotRail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  /* убираем скролл */
  scroll-snap-type: none;
  /* больше не нужно */
  padding-bottom: 0;
}

.hotRail::-webkit-scrollbar {
  height: 8px;
}

.hotRail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
}

.hotItem {
  max-width: none;
  flex: initial;
  scroll-snap-align: start;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .25);
  overflow: hidden;
}

@media (max-width: 860px) {
  .hotRail {
  justify-items: center;
  gap: 18px;
}
}

.hotImg {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, .02);
}

.hotBody {
  padding: 12px 12px 14px;
  
  display: flex;
    /* ✅ добавь */
  flex-direction: column;
    /* ✅ добавь */
  flex: 1;
    /* ✅ добавь */
}

.hotName {
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
  font-size: 14px;
}

.hotMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.hotAdd {
  padding: 10px 14px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #2d9cdb, #2b6cb0);
  color: #fff;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .hotRail {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .hotRail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .hotRail {
    grid-template-columns: 1fr;
  }
}

/* ===== Category cards ===== */
.catCardsSection {
  margin-top: 14px;
}

.catCardsHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .catCardsHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

.catCardsTitle {
  margin: 0;
  font-size: 18px;
}

.catCardsSub {
  color: var(--muted, rgba(255, 255, 255, .65));
  font-size: 13px;
}

.catCardsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .catCardsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .catCardsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .catCardsGrid {
    grid-template-columns: 1fr;
  }

  .hotItem {
    flex-basis: 86%;
    max-width: 86%;
  }
}

.catCard {
  border-radius: 18px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  overflow: hidden;
}

.catCard:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .16);
}

.catCard.isActive {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
}

.catCard:focus-visible {
  outline: 2px solid rgba(99, 165, 241, .75);
  outline-offset: 2px;
}

.catCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catCardName {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

.catCardCount {
  opacity: .9;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}

.catCardGo {
  margin-top: 10px;
  opacity: .92;
  color: #fff;
  font-weight: 400;
  font-size: 13px;
}

.catCard.isActive .catCardGo {
  color: var(--text);
  opacity: .9;
}

/* ===== FIX: Hot deals / Category cards are being clipped on mobile ===== */
main.section,
main.section .container {
  overflow: visible !important;
}

/* если где-то на обёртке стоит overflow:hidden — это снимет обрезку */
.shopFiltersWide,
.shopGrid {
  overflow: visible;
}

/* на всякий случай: баннер поверх фона */
.hotDeals,
.catCardsSection {
  position: relative;
  z-index: 1;
}

/* FIX: avoid being hidden behind hero/overlay layers */
.section {
  position: relative;
  z-index: 0;
}

/* =========================
   CHECKOUT: mobile tweaks
   ========================= */
@media (max-width: 820px) {

  /* 1) левая/правая колонки (форма + summary) -> в одну колонку */
  .page-checkout .grid2 {
    grid-template-columns: 1fr !important;
  }

  /* 2) все блоки .shopFiltersWide в форме -> 1 колонка
        (перебиваем inline style grid-template-columns:1fr 1fr) */
  .page-checkout .shopFiltersWide {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  /* 3) поля аккуратнее по высоте */
  .page-checkout .shopSearchInput,
  .page-checkout .catBtn {
    height: 46px;
  }

  /* textarea пусть будет выше */
  .page-checkout textarea.shopSearchInput {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
  }

  /* 4) кнопки "Оформити" и "Повернутись" одинаковые */
  .page-checkout #checkoutForm>div:last-of-type {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-checkout #checkoutForm>div:last-of-type .btn,
  .page-checkout #checkoutForm>div:last-of-type a.btn {
    width: 100% !important;
    height: 48px;
    justify-content: center;
    font-weight: 800;
  }
}

/* =========================
   SITE FOOTER
   ========================= */

.siteFooter {
  margin-top: 40px;
  padding-top: 32px;
  background: rgba(11, 15, 20, .95);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footerGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .footerGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.footerCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footerLogo {
  height: 40px;
  width: 100%;
}

.footerTitle {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
}

.footerText {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 360px;
}

.footerNav,
.footerContacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footerNav a,
.footerContacts a {
  color: var(--text);
  opacity: .85;
  transition: opacity .15s ease;
}

.footerNav a:hover,
.footerContacts a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footerSocials {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.footerSocials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  transition: transform .15s ease, background .15s ease;
}

.footerSocials a:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}

.footerBottom {
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.footerPolicyLink {
  text-decoration: underline;
}

.footerPolicySep {
  display: inline-block;
  margin: 0 6px;
  opacity: .7;
}

.fItem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.fIcon svg,
.fSocial svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footerContacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footerSocials {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.fSocial {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  transition: .15s ease;
}

.fSocial:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px);
}

/* =========================
   FOOTER: mobile adaptation
   ========================= */
@media (max-width: 520px) {

  /* футер — 1 колонка */
  .footerGrid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* навигация — обычные ссылки, НЕ кнопки */
  .footerNav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .footerNav a {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;

    font-size: 16px;
    opacity: .85;
  }

  .footerNav a:hover {
    opacity: 1;
    text-decoration: underline;
  }

  /* заголовок по центру */
  .footerTitle {
    text-align: center;
  }

  /* контакты — оставляем карточками (это удобно) */
  .fItem {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
  }

  /* соцсети по центру */
  .footerSocials {
    justify-content: center;
    gap: 12px;
  }
}

/* ==== Lightbox gallery portfolio ==== */
.page-portfolio .lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  display: grid;
  place-items: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.page-portfolio .lightbox.isOpen {
  opacity: 1;
  pointer-events: auto;
}

.page-portfolio .lightboxInner {
  width: min(96vw, 1100px);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.page-portfolio .lightboxImg {
  max-width: 96vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.page-portfolio .lightboxCap {
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  max-width: min(92vw, 900px);
}

/* кнопки */
.page-portfolio .lbBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.page-portfolio .lbBtn:hover { transform: translateY(-50%) scale(1.06); background: rgba(0,0,0,.7); }
.page-portfolio .lbBtn:active { transform: translateY(-50%) scale(0.98); }

.page-portfolio .lbPrev { left: 14px; }
.page-portfolio .lbNext { right: 14px; }

/* закрытие (крестик) */
.page-portfolio .lbClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* сделать картинки кликабельными */
.page-portfolio img[data-zoom] { cursor: zoom-in; }

/* мобилка: кнопки компактнее */
@media (max-width: 640px) {
  .page-portfolio .lbBtn { width: 36px; height: 36px; }
  .page-portfolio .lbClose { width: 36px; height: 36px; }
  .page-portfolio .lightboxCap { font-size: 13px; }
}

.page-portfolio .pfGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.page-portfolio .pfItem{
  margin: 0;
}

.page-portfolio .pfMedia{
  display: block;
  border-radius: 16px;
  overflow: hidden;       /* обрезаем ТОЛЬКО картинку */
  aspect-ratio: 4 / 3;
  background: #111;
}

.page-portfolio .pfMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-portfolio .pfCap{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  opacity: .9;
}

/* portfolio */

/* ===== Brand + Language ===== */
.brandWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  /* расстояние между логотипом и RU/UA */
}

/* компактный язык */
.langSwitch {
  display: flex;
  align-items: center;
  gap: 4px;

  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
}

.langLink {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .2px;

  color: #fff;
  opacity: .55;
  line-height: 1;
}

.langLink:hover {
  opacity: .9;
}

.langLink.isActive {
  opacity: 1;
  color: var(--brand);
}

.langSep {
  font-size: 11px;
  opacity: .35;
  user-select: none;
}

/* мобилка */
@media (max-width: 820px) {
  .brandWrap {
    gap: 6px;
  }
}

.cta-section {
  margin: 40px 0;
}

.cta-box {
  max-width: 1050px;          /* ← ВАЖНО: та же ширина, что и верхний блок */
  margin: 0 auto;
  padding: 28px 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  background: rgba(17,24,39,.66);
  border:1px solid rgba(31,41,55,.8);

  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.cta-text {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

@media (max-width: 768px) {
  .cta-box {
    flex-direction: column;
    text-align: center;
  }
}

.catCardsSection {
  padding-bottom: 48px;
}

.cartFoot {
  position: sticky;
  bottom: 0;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top,
      rgba(11, 15, 20, 0.98),
      rgba(11, 15, 20, 0.9) 60%,
      rgba(11, 15, 20, 0));
  backdrop-filter: blur(6px);
}