/* TRISWIM. Палитра снята с лого и баннера бренда (тёмно-синий овал, аквамарин волны,
   ледяной фон, ядовито-жёлтая полоса); жёлтый — ТОЛЬКО кнопки и маркеры.
   Имена классов и переменных — из _tokens.js, checkCss сверяет обе стороны.

   Контраст на тёмных полосах правится ПЕРЕМЕННОЙ, а не парным правилом: .deepend и
   .afterhours переопределяют --tsw-ink, --tsw-mist, --tsw-line и --tsw-wave-ink один
   раз для всех потомков; парное правило лечило бы один элемент и молчало о следующем. */

:root {
  --tsw-pool: #14508f;
  --tsw-pool-deep: #0d3a6b;
  --tsw-pool-lift: #1e69b4;
  --tsw-ink: #1c3242;
  --tsw-mist: #53707f;
  --tsw-icewater: #ddf1f7;
  --tsw-paper: #ffffff;
  --tsw-line: #c9e2ec;
  --tsw-wave: #7fd4ec;
  --tsw-wave-ink: #0a6f91;
  --tsw-buoy: #f2f200;
  --tsw-buoy-press: #d9d900;
  --tsw-ink-on-dark: #eaf6fa;
  --tsw-mist-on-dark: #a8cadd;
  --tsw-line-on-dark: #2a5c8f;
  --tsw-link-on-dark: #a5e2f5;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: 'Catamaran', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tsw-ink);
  background: var(--tsw-paper);
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }
figure { margin: 0; }

h1, h2, h3 {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tsw-pool);
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }

a { color: var(--tsw-wave-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--tsw-wave-ink); outline-offset: 2px; }

/* Ширина дорожки: свои числа, не 1180/40 образца. */
.lanewidth { width: min(1140px, 100% - 48px); margin-inline: auto; }

/* Тёмная полоса: переключает переменные один раз для всех потомков. */
.deepend, .afterhours {
  background: var(--tsw-pool-deep);
  --tsw-ink: var(--tsw-ink-on-dark);
  --tsw-mist: var(--tsw-mist-on-dark);
  --tsw-line: var(--tsw-line-on-dark);
  --tsw-wave-ink: var(--tsw-link-on-dark);
  color: var(--tsw-ink);
}
.deepend h1, .deepend h2, .deepend h3,
.afterhours h2 { color: var(--tsw-ink); }

.shallowend { background: var(--tsw-icewater); }

/* ------------------------------------------------------------------- каркас -- */

.ladderout {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--tsw-paper);
  color: var(--tsw-pool);
  padding: 8px 16px;
  z-index: 5;
}
.ladderout:focus { left: 8px; }

.deckhead { border-bottom: 1px solid var(--tsw-line); }
.deckhead .lanewidth {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.deckhead nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  padding: 0;
}
.deckhead nav a {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 500;
  color: var(--tsw-pool);
  text-decoration: none;
}
.deckhead nav a:hover { color: var(--tsw-wave-ink); }

.lanemarks { font-size: 0.9rem; color: var(--tsw-mist); }
.lanemarks .lanewidth { padding-block: 12px; }
.lanemarks a { color: var(--tsw-mist); }

section { padding-block: 56px; }
section > .lanewidth > h2 + p { max-width: 62ch; margin-bottom: 26px; color: var(--tsw-mist); }

.capstrap {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--tsw-wave-ink);
  margin-bottom: 10px;
}

/* Пара стартов: первая кнопка — жёлтая тумба, вторая — контур. Жёлтому тёмная
   полоса не страшна, у него своя заливка. */
.twostarts { display: flex; flex-wrap: wrap; gap: 14px; margin-block: 20px; }
.twostarts a {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 8px;
}
.twostarts a:first-child { background: var(--tsw-buoy); color: #1c3242; }
.twostarts a:first-child:hover { background: var(--tsw-buoy-press); }
.twostarts a + a { border: 2px solid var(--tsw-line); color: var(--tsw-ink); }
.twostarts a + a:hover { border-color: var(--tsw-wave-ink); }

.ribbonline { color: var(--tsw-mist); font-size: 0.95rem; }
.ribbonline span { color: var(--tsw-wave-ink); letter-spacing: 0.08em; }

.swimfee strong { font-family: 'Kanit', system-ui, sans-serif; font-size: 1.5rem; color: inherit; }
.swimfee small { display: block; color: var(--tsw-mist); max-width: 40ch; }
p.swimfee { font-weight: 600; }

/* Кнопка покупки: вся краска в растре, обёртке — ничего лишнего. */
.offblock {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-top: 16px;
}
.offblock img { border-radius: 8px; }
.offblock:hover img { filter: brightness(0.94); }

/* --------------------------------------------------------------- карточка -- */

.lanecard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tsw-paper);
  border: 1px solid var(--tsw-line);
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  color: var(--tsw-ink);
}
.lanecard:hover { border-color: var(--tsw-wave-ink); }
.lanecard > span { position: relative; display: block; margin-bottom: 10px; }
.lanecard img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.lanecard h3 { font-size: 0.98rem; font-weight: 500; color: var(--tsw-pool); }
.lanecard .ribbonline { font-size: 0.85rem; margin-top: auto; padding-top: 6px; }

.sizecap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-style: normal;
  font-family: 'Kanit', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--tsw-icewater);
  color: var(--tsw-wave-ink);
  border-radius: 999px;
  padding: 2px 10px;
}

/* --------------------------------------------------------------- главная -- */

.divewell .lanewidth {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 44px;
}
.divewell h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.divewell > .lanewidth > div > p { max-width: 56ch; }
/* исходник флагмана всего 169px шириной, крупнее у витрины нет —
   держим показ у натурального размера, иначе апскейл мылит */
.divewell img { justify-self: center; width: min(190px, 100%); }

.laneropes { padding-block: 0; border-bottom: 1px solid var(--tsw-line); }
.laneropes ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 4px solid var(--tsw-buoy);
  padding-block: 20px;
  color: var(--tsw-mist);
}
.laneropes strong {
  display: block;
  font-family: 'Kanit', system-ui, sans-serif;
  font-size: 1.6rem;
  color: var(--tsw-pool);
}

.fixlanes .lanewidth > div,
.pullbuoy .lanewidth > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fixlanes a, .pullbuoy a {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--tsw-line);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: var(--tsw-ink);
}
.fixlanes a:hover, .pullbuoy a:hover { border-color: var(--tsw-wave-ink); }
.fixlanes img { width: 120px; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 10px; }
.fixlanes p { font-size: 0.92rem; color: var(--tsw-mist); }
.pullbuoy .lanewidth > div { grid-template-columns: repeat(3, 1fr); }
.pullbuoy .lanewidth > p:last-child { margin-top: 20px; }

.turnboard .lanewidth > div {
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: 26px;
  align-items: start;
}
.turnboard ul { list-style: none; padding: 0; }
.turnboard li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--tsw-line); }
.turnboard li::before { position: absolute; left: 0; font-weight: 700; }
.turnboard .lanewidth > div > div:first-child li::before { content: '\2013'; color: var(--tsw-mist); }
.turnboard .lanewidth > div > div + div li::before { content: '+'; color: var(--tsw-wave-ink); }

.podiumrow .lanewidth > div,
.lapgrid .lanewidth > div,
.swimbag .lanewidth > div,
.sameshelf .lanewidth > div,
.relayrow .lanewidth > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.swimbag .lanewidth > p:last-child { margin-top: 20px; }

.threelaps ol, .splittimes ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: lap;
}
.threelaps li, .splittimes li { counter-increment: lap; }
.threelaps h3::before, .splittimes h3::before {
  content: counter(lap);
  display: inline-grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--tsw-buoy);
  color: #1c3242;
  font-size: 0.85em;
}
.threelaps img { width: 120px; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 12px; }
.threelaps li p, .splittimes li p { color: var(--tsw-mist); font-size: 0.95rem; }

.underwash .lanewidth > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.underwash .lanewidth > div > div {
  background: var(--tsw-pool-lift);
  border-radius: 10px;
  padding: 20px;
}
.underwash .lanewidth > div p { font-size: 0.95rem; }

.lockerroom .lanewidth > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lockerroom figure {
  border: 1px solid var(--tsw-line);
  border-left: 4px solid var(--tsw-wave);
  border-radius: 10px;
  padding: 18px;
}
.lockerroom blockquote { margin: 0 0 12px; font-size: 0.97rem; }
.lockerroom figcaption { color: var(--tsw-mist); font-size: 0.9rem; }
.lockerroom figcaption span { color: var(--tsw-wave-ink); }

.lastlap { text-align: center; }
.lastlap .lanewidth > p { margin-inline: auto; }
.lastlap .twostarts { justify-content: center; }

/* ------------------------------------------------------- карточка товара -- */

.firstlength .lanewidth {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: 44px;
  align-items: start;
}
.firstlength h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
/* Только фото товара — прямой потомок грида. Голое «.firstlength img» цепляло и
   растровую кнопку покупки в правой колонке и раздувало её до ширины колонки. */
.firstlength .lanewidth > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.firstlength .swimfee { margin-top: 18px; }

.capchips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 12px;
}
.capchips li {
  border: 1px solid var(--tsw-line);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.85rem;
  color: var(--tsw-mist);
}

.bottlefacts ul { max-width: 68ch; }
.bottlefacts li { margin-bottom: 8px; }
.showersteps p { max-width: 68ch; }

.finishwall { text-align: center; }
.finishwall .swimfee { margin-block: 8px; }
.finishwall .offblock { margin-inline: auto; }

/* --------------------------------------------- сервисные, гайды, подборщик -- */

.noticeboard .lanewidth, .coachnotes .lanewidth { max-width: 760px; }
.noticeboard h1, .coachnotes h1 { margin-bottom: 18px; }
.noticeboard h2, .coachnotes h2 { margin: 26px 0 8px; font-size: 1.25rem; }
.noticeboard p, .coachnotes p { margin-bottom: 14px; }
.coachnotes ul { margin-bottom: 14px; }
.coachnotes ul ul { margin-bottom: 0; }
.coachnotes > .lanewidth > ul { list-style: none; padding: 0; }
.coachnotes > .lanewidth > ul > li { border-bottom: 1px solid var(--tsw-line); }
.coachnotes > .lanewidth > ul a { display: block; padding-block: 16px; text-decoration: none; }
.coachnotes > .lanewidth > ul p { color: var(--tsw-mist); margin: 0; }

.towelrail .lanewidth { max-width: 760px; }
.towelrail h2 { font-size: 1.2rem; margin: 24px 0 10px; }
.towelrail .lanewidth > div { display: flex; flex-wrap: wrap; gap: 10px; }
.towelrail button {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  background: var(--tsw-paper);
  border: 2px solid var(--tsw-line);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--tsw-ink);
}
.towelrail button:hover { border-color: var(--tsw-wave-ink); }
.towelrail button[aria-pressed="true"] {
  background: var(--tsw-buoy);
  border-color: var(--tsw-buoy);
  color: #1c3242;
}

.timeboard .lanewidth > div > p { margin-bottom: 18px; }
.timeboard .lanewidth > div > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------------- футер -- */

.afterhours { padding-block: 48px 24px; font-size: 0.95rem; }
.afterhours .lanewidth > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.afterhours h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.afterhours ul { list-style: none; padding: 0; }
.afterhours li { margin-bottom: 6px; }
.afterhours a { color: var(--tsw-wave-ink); text-decoration: none; }
.afterhours a:hover { text-decoration: underline; }
.afterhours p { color: var(--tsw-mist); }
.afterhours img { margin-top: 28px; max-width: min(380px, 100%); height: auto; }

.lastwhistle {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tsw-line);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------- мобайл -- */

@media (max-width: 900px) {
  .podiumrow .lanewidth > div,
  .lapgrid .lanewidth > div,
  .swimbag .lanewidth > div,
  .sameshelf .lanewidth > div,
  .relayrow .lanewidth > div,
  .fixlanes .lanewidth > div { grid-template-columns: repeat(2, 1fr); }
  .turnboard .lanewidth > div { grid-template-columns: 1fr 1fr; }
  .turnboard .lanecard { grid-column: 1 / -1; max-width: 340px; }
  .afterhours .lanewidth > div { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  section { padding-block: 40px; }
  .lanewidth { width: min(1140px, 100% - 32px); }
  .divewell .lanewidth { grid-template-columns: 1fr; gap: 24px; }
  .divewell img { width: min(170px, 100%); }
  .firstlength .lanewidth { grid-template-columns: 1fr; gap: 24px; }
  .laneropes ul { grid-template-columns: repeat(2, 1fr); }
  .threelaps ol, .splittimes ol,
  .underwash .lanewidth > div,
  .lockerroom .lanewidth > div,
  .pullbuoy .lanewidth > div,
  .turnboard .lanewidth > div,
  .timeboard .lanewidth > div > div { grid-template-columns: 1fr; }
  .turnboard .lanecard { grid-column: auto; }
}