.vc-page { padding-bottom: 48px; }
.vc-banner {
  margin: 0 -24px 28px;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(5, 25, 40, 0.15), rgba(5, 25, 40, 0.55)),
    url("../vector-home/reef.webp") center 40% / cover no-repeat;
  color: #fff;
  border-radius: 0 0 28px 28px;
}
.vc-banner-copy { padding: 36px 24px; }
.vc-kicker {
  margin: 0 0 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  color: #ff875f;
}
.vc-banner h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); color: #fff; }
.vc-intro { max-width: 720px; color: var(--muted); margin: 0 0 20px; }
.vc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.vc-filters button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.vc-filters button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.vc-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(9, 26, 40, 0.08);
  display: flex;
  flex-direction: column;
}
.vc-card[hidden] {
  display: none !important;
}
.vc-photo {
  min-height: 240px;
  background: radial-gradient(ellipse at 50% 25%, #fff 20%, #edf5f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.vc-photo img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  mix-blend-mode: normal;
}
.vc-soon {
  color: #405565;
  font-weight: 800;
  background: #e4edf2;
  padding: 16px 20px;
  border-radius: 16px;
}
.vc-body { padding: 20px 22px 24px; background: #fff; }
.vc-body h2 { margin: 0 0 6px; font-size: 22px; }
.vc-sku { margin: 0; color: var(--muted); font-size: 14px; }
.vc-more {
  display: inline-flex;
  margin-top: 16px;
  background: #ff5a1f;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 44px;
  align-items: center;
}
.vc-product {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: start;
}
.vc-gallery-main {
  background: radial-gradient(ellipse at 50% 25%, #fff 20%, #edf5f8 100%);
  border-radius: 28px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vc-gallery-main picture,
.vc-gallery-main .smart-img {
  display: flex;
  width: 100%;
  height: auto;
  max-height: 320px;
}
.vc-gallery-main img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  mix-blend-mode: normal;
}
.vc-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vc-thumbs button {
  width: 88px;
  height: 64px;
  padding: 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-thumbs .smart-img { width: 100%; height: 100%; }
.vc-thumbs button.is-active { border-color: #ff5a1f; }
.vc-thumbs img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 860px) {
  .vc-product { grid-template-columns: 1fr; }
  .vc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vc-banner { margin: 0 -16px 24px; min-height: 180px; }
}

/* Series presentation; reef stays behind the text, products on a quiet light surface. */
.vc-section{padding-top:26px}
.vc-section>.wrap{max-width:1408px}
.vc-page{font-family:Arial,Helvetica,sans-serif}
.vc-banner{margin:0 0 30px;min-height:310px;align-items:center;border-radius:24px;background:linear-gradient(90deg,rgba(2,19,31,.96),rgba(2,19,31,.82) 48%,rgba(2,19,31,.12)),url("../vector-home/reef.webp") center 40%/cover no-repeat}
.vc-banner-copy{padding:40px;max-width:850px}
.vc-banner h1{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.04em;line-height:1.05}
.vc-kicker{color:#ff875f;margin-bottom:14px}
.vc-intro{color:#e5eef3;max-width:670px;margin:18px 0 0;font-size:18px;line-height:1.55}
.vc-intro p{margin:0}
.vc-photo{text-decoration:none;min-width:0;min-height:270px;padding:26px 20px;border-bottom:1px solid #e5edf0}
.vc-photo img{height:240px}
.vc-body h2 a{text-decoration:none}
.vc-body h2 a:hover{color:#d54108}
.vc-more{background:#ff4d0a}
.vc-more:hover{background:#e84300}
.vc-page a:focus-visible,.vc-page button:focus-visible{outline:3px solid #e64b0a;outline-offset:-4px}
.vc-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.vc-body .price-block{margin-top:16px}
.vc-filters button{font:inherit;font-size:14px;font-weight:700}
@media(max-width:860px){.vc-banner{margin:0 0 24px}.vc-banner-copy{padding:30px}.vc-intro{font-size:16px}}
@media(max-width:480px){.vc-section{padding-top:20px}.vc-banner-copy{padding:28px 22px}.vc-banner{border-radius:20px;min-height:0;background-position:60% center}.vc-photo{min-height:0;padding:10px 8px}.vc-photo img{height:112px;object-fit:contain}.vc-body{padding:12px 10px 14px}.vc-card{border-radius:16px}.vc-body h2{font-size:14px;line-height:1.2}.vc-sku{font-size:11px}.vc-more{margin-top:10px;padding:8px 12px;min-height:36px;font-size:13px}.vc-gallery-main{padding:12px;min-height:0}
.vc-gallery-main img{max-height:220px}}
@media(prefers-reduced-motion:reduce){.vc-photo img{transition:none}.vc-photo:hover img{transform:none}}

.vc-series-name{white-space:nowrap}
@media(max-width:480px){.vc-banner{background-image:linear-gradient(90deg,rgba(2,19,31,.94),rgba(2,19,31,.65)),url("../vector-home/reef.webp")}.vc-banner h1{font-size:32px}.vc-intro{font-size:16px;line-height:1.5}}

@media (max-width: 860px) {
  .vc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vc-photo { min-height: 0; padding: 12px 10px; }
  .vc-photo img { height: 140px; width: 100%; object-fit: contain; }
  .vc-body { padding: 14px 12px 16px; }
  .vc-body h2 { font-size: 16px; }
  .vc-more { margin-top: 12px; padding: 10px 14px; min-height: 40px; }
}
@media (max-width: 430px) {
  .vc-grid { gap: 8px; }
  .vc-photo { padding: 8px 6px; }
  .vc-photo img { height: 104px; }
  .vc-body { padding: 10px 8px 12px; }
  .vc-body h2 { font-size: 13px; }
  .vc-sku { font-size: 11px; }
  .vc-more { width: 100%; justify-content: center; padding: 8px 8px; min-height: 36px; font-size: 12px; margin-top: 8px; }
}

/* Раздел «Подводные ружья»: серии под h1, «Как выбрать модель», «Полезно перед заказом». */
.gg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.gg-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 30px; background: #fff; color: #0c1b29; font-size: 15px; font-weight: 700; text-decoration: none; }
.gg-chips a:hover { border-color: #0c1b29; }
.gg-chips a.gg-chip-guide { background: #0c1b29; border-color: #0c1b29; color: #fff; }
.gg-guide { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.section .gg-guide h2, .section .gg-links h2 { margin: 0 0 18px; }
.gg-guide h3 { font-size: 20px; margin: 26px 0 8px; }
.gg-guide p { margin: 0 0 8px; max-width: 760px; }
.gg-guide a, .gg-links a { color: #0c283a; text-decoration-color: #ff4d0a; text-underline-offset: 3px; }
.gg-series { width: 100%; border-collapse: collapse; font-size: 16px; }
.gg-series th, .gg-series td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gg-series thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.gg-series tbody th { font-weight: 800; white-space: nowrap; }
.gg-note { font-size: 15px; color: var(--muted); }
.gg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; }
.gg-mass { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.gg-mass th, .gg-mass td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.gg-mass tbody tr:last-child th, .gg-mass tbody tr:last-child td { border-bottom: 0; }
.gg-mass thead th { background: #f4f6f8; font-weight: 700; }
.gg-mass th[scope="row"] { position: sticky; left: 0; background: #fff; text-align: left; }
.gg-mass thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; }
.gg-links { margin-top: 28px; }
.gg-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gg-links-grid > div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.gg-links h3 { font-size: 17px; margin: 0 0 8px; }
.gg-links ul { list-style: none; margin: 0; padding: 0; }
.gg-links li a { display: inline-block; padding: 8px 0; font-weight: 600; }
.gg-guide a:focus-visible, .gg-links a:focus-visible, .gg-chips a:focus-visible, .gg-scroll:focus-visible { outline: 3px solid #ff6b28; outline-offset: 2px; }
@media (max-width: 900px) {
  .gg-links-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gg-guide { margin-top: 32px; padding: 20px 16px; border-radius: 18px; }
  .gg-guide h3 { font-size: 18px; }
  /* Таблица серий на телефоне — карточки: подпись столбца перед значением. */
  .gg-series thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gg-series, .gg-series tbody, .gg-series tr, .gg-series th, .gg-series td { display: block; width: auto; }
  .gg-series tr { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
  .gg-series th, .gg-series td { border: 0; padding: 3px 0; }
  .gg-series tbody th { font-size: 18px; margin-bottom: 4px; white-space: normal; }
  .gg-series td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
  .gg-links-grid { grid-template-columns: 1fr; gap: 10px; }
}