/* SwimSchool — «the shallow end». Палитра по пикселям лого и баннеров стора. */
:root{
  --ss-indigo:#2e2e8f; --ss-teal:#1f7193; --ss-deep:#12506b; --ss-aqua:#45b4c5; --ss-foam:#e8f5f8; --ss-mist:#f4fafb;
  --ss-sun:#f7931e; --ss-coral:#dc4a26; --ss-leaf:#63b446; --ss-pink:#e1087c;
  --ss-ink:#1b2340; --ss-soft:#56617a; --ss-rule:#cfe3ea; --ss-white:#fff;
  --ss-shell:1180px; --ss-pad:clamp(16px,4vw,40px); --ss-r:18px;
  --ss-head:"Baloo 2","Trebuchet MS",sans-serif; --ss-text:"Rubik","Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ss-text);font-size:17px;line-height:1.6;color:var(--ss-ink);background:var(--ss-white);overflow-x:hidden}
img{max-inline-size:100%;block-size:auto;display:block}
a{color:var(--ss-teal)}
h1,h2,h3,h4{font-family:var(--ss-head);line-height:1.08;margin:0 0 .5em;color:var(--ss-indigo);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem)} h2{font-size:clamp(1.7rem,3.6vw,2.5rem)} h3{font-size:1.25rem}
p{margin:0 0 1em}
.wade{max-inline-size:var(--ss-shell);margin-inline:auto;padding-inline:var(--ss-pad)}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:8px;inset-block-start:8px;background:#fff;padding:8px;z-index:99}
.eyebrow{font-family:var(--ss-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--ss-teal);margin:0 0 .6em}
.center{text-align:center}.center .lead{margin-inline:auto}
.lead{font-size:1.14rem;color:var(--ss-soft);max-inline-size:62ch}
section{padding-block:clamp(44px,7vw,84px)}

/* кнопка-штамп */
.dive{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:inline-block;inline-size:min(100%,320px);transition:transform .15s}
.dive img{inline-size:100%}
.dive:hover{transform:translateY(-2px)}.dive:active{transform:translateY(1px)}
.dive:focus-visible{outline:3px solid var(--ss-pink);outline-offset:4px;border-radius:99px}
.dive--head{inline-size:190px}.dive--card{inline-size:100%;max-inline-size:none}.dive--big{inline-size:min(100%,380px)}

/* верхняя полоса-вкладки (как бренд-вкладки лидера выдачи) */
.lanes{background:var(--ss-indigo);color:#fff;font-size:.86rem}
.lanes__in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 18px;padding-block-start:6px}
.lanes__tabs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.lanes__tabs a{display:block;padding:7px 14px 6px;border:1.5px solid rgba(255,255,255,.75);border-block-end:0;border-radius:10px 10px 0 0;color:#fff;text-decoration:none;font-family:var(--ss-head);font-weight:700;line-height:1.1}
.lanes__tabs a b{color:var(--ss-sun)}
.lanes__tabs a:hover,.lanes__tabs a[aria-current]{background:#fff;color:var(--ss-indigo)}
.lanes__say{margin:0;padding-block-end:6px;opacity:.92}

/* шапка */
.deck{background:#fff;border-block-end:2px solid var(--ss-indigo);position:sticky;inset-block-start:0;z-index:40}
.deck__in{display:flex;align-items:center;gap:18px;min-block-size:84px}
.deck__logo img{inline-size:176px}
.deck__nav{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;list-style:none;margin:0;padding:0}
.deck__nav a{font-family:var(--ss-head);font-weight:700;font-size:.98rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ss-ink);text-decoration:none;padding:6px 0;border-block-end:3px solid transparent}
.deck__nav a:hover,.deck__nav a[aria-current]{color:var(--ss-teal);border-color:var(--ss-sun)}
.deck__menu{display:none}
@media (max-width:1020px){
  .deck__in{flex-wrap:wrap;padding-block:10px;min-block-size:0}
  .deck__logo img{inline-size:140px}
  .deck__menu{display:block;margin-inline-start:auto;order:2}
  .deck__menu summary{list-style:none;cursor:pointer;font-family:var(--ss-head);font-weight:800;color:var(--ss-indigo);border:2px solid var(--ss-indigo);border-radius:99px;padding:5px 16px}
  .deck__menu summary::-webkit-details-marker{display:none}
  .deck__cta{order:3}.dive--head{inline-size:150px}
  .deck__nav{display:none}
  .deck__menu[open] ~ .deck__nav{display:grid;grid-template-columns:1fr 1fr;order:4;flex-basis:100%;justify-items:start;padding-block:8px}
}
@media (max-width:520px){.deck__cta{display:none}.lanes__say{display:none}}

/* хиро: бирюзовая панель с дугой + фото (как баннер стора) */
.hero{padding-block:26px 0}
.hero__frame{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:var(--ss-r);overflow:hidden;background:var(--ss-teal);min-block-size:440px}
.hero__say{position:relative;z-index:1;background:var(--ss-teal) url(/pool/swimschool-water-drops-pattern.webp);background-size:260px;color:#fff;padding:clamp(26px,4vw,54px);padding-inline-end:clamp(40px,7vw,96px);border-radius:0 50% 50% 0 / 0 120% 120% 0;margin-inline-end:-70px;display:flex;flex-direction:column;justify-content:center}
.hero__say h1{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem)}
.hero__say .eyebrow{color:#ffe1b5}
.hero__say p{font-size:1.1rem;max-inline-size:44ch}
.hero__pts{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.hero__pts li{border:1.5px solid rgba(255,255,255,.7);border-radius:99px;padding:3px 14px;font-size:.92rem}
.hero__pic{position:relative}
.hero__pic img{inline-size:100%;block-size:100%;object-fit:cover;object-position:27% 50%;position:absolute;inset:0}
@media (max-width:820px){
  .hero__frame{grid-template-columns:1fr}
  .hero__say{border-radius:0 0 50% 50% / 0 0 12% 12%;margin:0 0 -30px;padding-block-end:56px}
  .hero__pic{min-block-size:240px}
}

/* мозаика полок (тайлы с белой надписью поверх) */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;text-decoration:none;background:var(--ss-foam);isolation:isolate}
.tile img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.tile--cut img{object-fit:contain;padding:14px 14px 50px;mix-blend-mode:multiply}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,80,107,0) 30%,rgba(18,80,107,.62));z-index:-1}
.tile--cut::after{background:linear-gradient(180deg,rgba(69,180,197,.05) 40%,rgba(31,113,147,.75))}
.tile:hover img{transform:scale(1.05)}
.tile__name{font-family:var(--ss-head);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);color:#fff;text-shadow:0 2px 10px rgba(0,30,50,.55);align-self:flex-end;padding:0 12px 14px;text-align:center;line-height:1.05}
.tile__name small{display:block;font-size:.8rem;font-family:var(--ss-text);font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.95}
.tile--tall{grid-column:span 2;grid-row:span 2}
.tile--wide{grid-column:span 2}
@media (max-width:860px){.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.tile--tall{grid-row:span 1}}

/* ряд доверия: круглые иконки */
.proof{padding-block:36px}
.proof__row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;margin:0;padding:0;text-align:center}
.proof__row svg{inline-size:68px;block-size:68px;padding:17px;border-radius:50%;background:var(--ss-foam);color:var(--ss-teal);margin:0 auto 10px;display:block}
.proof__row b{display:block;font-family:var(--ss-head);text-transform:uppercase;letter-spacing:.06em;color:var(--ss-indigo);font-size:1.05rem}
.proof__row span{font-size:.92rem;color:var(--ss-soft)}
@media (max-width:700px){.proof__row{grid-template-columns:1fr 1fr}}

/* карточка товара */
.school{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.swimmer{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--ss-rule);border-radius:14px;padding:12px 12px 14px;position:relative;transition:border-color .2s,box-shadow .2s}
.swimmer[hidden]{display:none!important}
.swimmer:hover{border-color:var(--ss-aqua);box-shadow:0 10px 26px rgba(31,113,147,.14)}
.swimmer__pic{display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#fff}
.swimmer__pic img{inline-size:100%;block-size:100%;object-fit:contain}
.swimmer__flag{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;background:var(--ss-foam);color:var(--ss-deep);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:0 9px 0 9px}
.swimmer__flag--sale{background:var(--ss-coral);color:#fff}
.swimmer__lane{margin:10px 0 2px;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ss-soft);display:flex;align-items:center;gap:6px}
.dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--ss-aqua);flex:none;display:inline-block}
.dot--1{background:var(--ss-sun)}.dot--2{background:var(--ss-coral)}.dot--3{background:var(--ss-leaf)}.dot--0{background:var(--ss-indigo)}
.swimmer h3,.swimmer h2{font-size:1.08rem;margin:0 0 4px;line-height:1.18}
.swimmer h3 a,.swimmer h2 a{color:var(--ss-indigo);text-decoration:none}.swimmer h2 a:hover,.swimmer h3 a:hover{text-decoration:underline}
.swimmer__fit{font-size:.86rem;color:var(--ss-teal);font-weight:500;margin:0 0 4px}
.rate{font-size:.88rem;color:var(--ss-soft);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.stars{--p:calc(var(--r)/5*100%);font-size:1rem;letter-spacing:1px;background:linear-gradient(90deg,var(--ss-sun) var(--p),#d5dde6 var(--p));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.swimmer__blurb{font-size:.9rem;color:var(--ss-soft);margin:0 0 10px;flex:1}
.cost{font-family:var(--ss-head);font-weight:800;font-size:1.45rem;color:var(--ss-ink);margin:0 0 10px;line-height:1}
.cost s{font-family:var(--ss-text);font-weight:400;font-size:.95rem;color:var(--ss-soft);margin-inline-start:6px}
.cost em{font-style:normal;font-family:var(--ss-text);font-size:.8rem;font-weight:700;color:var(--ss-coral);margin-inline-start:6px}
@media (max-width:1000px){.school{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:740px){.school{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.swimmer__blurb{display:none}.swimmer{padding:8px 8px 10px}}
@media (max-width:380px){.school{grid-template-columns:1fr}}

/* уровни: круги + пунктирная дорожка, карточки с вкладками навыков */
.levels{background:linear-gradient(180deg,var(--ss-mist),var(--ss-foam))}
.levels__top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:center;margin-block-end:30px}
.levels__top img{border-radius:14px;border:1.5px solid var(--ss-rule)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative}
.step{background:#fff;border-radius:var(--ss-r);padding:74px 22px 22px;margin-block-start:64px;position:relative;border:2px dashed var(--ss-teal)}
.step:nth-child(2){margin-block-start:20px}
.step__ball{position:absolute;inset-block-start:-58px;inset-inline-start:50%;transform:translateX(-50%);inline-size:124px;block-size:124px;border-radius:50%;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--ss-head);font-weight:800;line-height:.9;box-shadow:0 0 0 7px #fff}
.step__ball small{font-size:.74rem;letter-spacing:.14em}.step__ball b{font-size:3.6rem}
.step--1 .step__ball{background:var(--ss-sun)}.step--2 .step__ball{background:var(--ss-coral)}.step--3 .step__ball{background:var(--ss-leaf)}
.step h3{text-align:center;font-size:1.5rem;margin-block-end:2px}
.step__tag{text-align:center;color:var(--ss-teal);font-weight:500;margin-block-end:12px}
.step dl{margin:0 0 12px;font-size:.93rem;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.step dt{font-weight:700}.step dd{margin:0}
.flip{display:flex;flex-wrap:wrap;margin-block:12px 14px}
.flip input{position:absolute;opacity:0}
.flip label{cursor:pointer;padding:6px 14px;font-weight:700;font-size:.86rem;background:var(--ss-foam);color:var(--ss-deep);border:1.5px solid var(--ss-teal);border-block-end:0}
.flip label:first-of-type{border-radius:9px 0 0 0;border-inline-end:0}.flip label:nth-of-type(2){border-radius:0 9px 0 0}
.flip input:checked + label{background:var(--ss-teal);color:#fff}
.flip input:focus-visible + label{outline:3px solid var(--ss-pink)}
.flip ul{order:9;flex-basis:100%;margin:0;padding:12px 14px 12px 30px;border:1.5px solid var(--ss-teal);display:none;font-size:.93rem}
.flip input:nth-of-type(1):checked ~ ul:nth-of-type(1),.flip input:nth-of-type(2):checked ~ ul:nth-of-type(2){display:block}
.go{display:inline-block;font-family:var(--ss-head);font-weight:800;text-decoration:none;color:#fff;background:var(--ss-indigo);padding:9px 22px;border-radius:99px}
.go:hover{background:var(--ss-teal)}
.go--line{background:none;color:var(--ss-indigo);border:2px solid var(--ss-indigo)}.go--line:hover{color:#fff}
@media (max-width:900px){.steps{grid-template-columns:1fr}.step:nth-child(2){margin-block-start:64px}.levels__top{grid-template-columns:1fr}.levels__top img{max-inline-size:300px;margin-inline:auto}}

/* подбор уровня (радио) */
.pick{border:3px solid var(--ss-indigo);border-radius:var(--ss-r);padding:clamp(20px,3.4vw,38px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10px 34px;align-items:start}
.pick__head{grid-column:1/-1}
.pick input{position:absolute;opacity:0}
.pick__opts{display:grid;gap:8px}
.pick label{display:block;cursor:pointer;border:2px solid var(--ss-rule);border-radius:12px;padding:10px 16px;font-weight:500}
.pick label:hover{border-color:var(--ss-aqua)}
.pick__out{display:none;background:var(--ss-foam);border-radius:14px;padding:20px 22px}
.pick__out h3{font-size:1.5rem}
.pick__out p{margin-block-end:.8em}
.pick:has(#pk1:checked) [for=pk1],.pick:has(#pk2:checked) [for=pk2],.pick:has(#pk3:checked) [for=pk3],.pick:has(#pk4:checked) [for=pk4],.pick:has(#pk5:checked) [for=pk5]{border-color:var(--ss-indigo);background:var(--ss-indigo);color:#fff}
.pick:has(#pk1:checked) #po1,.pick:has(#pk2:checked) #po2,.pick:has(#pk3:checked) #po3,.pick:has(#pk4:checked) #po4,.pick:has(#pk5:checked) #po5{display:block}
.pick:has(input:focus-visible) .pick__opts{outline:3px solid var(--ss-pink);outline-offset:4px;border-radius:12px}
@media (max-width:780px){.pick{grid-template-columns:1fr}}

/* популярный товар: акварельный градиент в глубину */
.spot{background:linear-gradient(180deg,#fff 0,#fff 30%,#bfe3ea 52%,var(--ss-teal) 80%,var(--ss-deep));padding-block-end:60px}
.spot__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,60px);align-items:center}
.spot__pic{background:#fff;padding:10px;box-shadow:0 18px 40px rgba(18,80,107,.25)}
.spot__txt{background:rgba(255,255,255,.93);border-radius:var(--ss-r);padding:clamp(18px,3vw,30px)}
.spot__txt h2{font-size:clamp(1.5rem,3vw,2.1rem)}
@media (max-width:760px){.spot__in{grid-template-columns:1fr}}

/* «спешите?» */
.hurry{background:#e3f6ee;border-radius:var(--ss-r);padding:clamp(20px,3.4vw,36px);display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px;align-items:center}
.hurry ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hurry li{padding-inline-start:28px;position:relative}
.hurry li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.42em;inline-size:15px;block-size:15px;border-radius:50%;border:4px solid var(--ss-leaf);background:#fff}
.hurry li b{color:var(--ss-indigo)}
.hurry img{border-radius:50%;aspect-ratio:1;object-fit:cover;border:7px solid #fff}
@media (max-width:760px){.hurry{grid-template-columns:1fr}.hurry img{max-inline-size:200px;margin-inline:auto}}

/* анатомия жилета: точки-плюсы */
.anat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,5vw,56px);align-items:center}
.anat__fig{position:relative;background:#ffe9a8;border-radius:var(--ss-r);padding:26px}
.anat__fig img{mix-blend-mode:multiply;inline-size:100%}
.anat__pin{position:absolute;inline-size:38px;block-size:38px;border-radius:50%;background:#fff;color:var(--ss-indigo);font-family:var(--ss-head);font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(255,255,255,.45);transform:translate(-50%,-50%)}
.anat ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:a}
.anat li{counter-increment:a;display:grid;grid-template-columns:38px 1fr;gap:4px 14px}
.anat li::before{content:counter(a);grid-row:span 2;inline-size:38px;block-size:38px;border-radius:50%;background:var(--ss-indigo);color:#fff;font-family:var(--ss-head);font-weight:800;display:flex;align-items:center;justify-content:center}
.anat li b{font-family:var(--ss-head);font-size:1.15rem;color:var(--ss-indigo)}
.anat li span{color:var(--ss-soft);font-size:.96rem}
@media (max-width:820px){.anat{grid-template-columns:1fr}}

/* отзывы */
.said{background:var(--ss-mist)}
.said__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.note{background:#fff;border-radius:16px 16px 16px 3px;padding:20px;border:1.5px solid var(--ss-rule);display:flex;flex-direction:column}
.note h3{font-size:1.1rem;margin:6px 0}
.note blockquote{margin:0 0 12px;font-size:.95rem;flex:1}
.note footer{font-size:.84rem;color:var(--ss-soft)}
.note footer a{display:block;font-weight:500}
@media (max-width:900px){.said__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.said__grid{grid-template-columns:1fr}}

/* бренд-лента */
.band{padding-block:0}
.band img{inline-size:100%;border-radius:var(--ss-r)}

/* SEO-текст и PAA */
.deepend{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
.deepend h2{grid-column:1/-1}
.deepend p{color:#333c55;font-size:.98rem}
@media (max-width:760px){.deepend{grid-template-columns:1fr}}
.asked{max-inline-size:860px;margin-inline:auto}
.asked details{border-block-end:1.5px solid var(--ss-rule)}
.asked summary{cursor:pointer;list-style:none;padding:16px 44px 16px 0;position:relative;font-weight:500;font-size:1.06rem}
.asked summary::-webkit-details-marker{display:none}
.asked summary::after{content:"";position:absolute;inset-inline-end:10px;inset-block-start:22px;inline-size:10px;block-size:10px;border-inline-end:2.5px solid var(--ss-teal);border-block-end:2.5px solid var(--ss-teal);transform:rotate(45deg);transition:transform .2s}
.asked details[open] summary::after{transform:rotate(225deg)}
.asked details p{color:var(--ss-soft);padding-inline-end:30px}

/* закрывающий блок */
.lastlap{background:var(--ss-teal) url(/pool/swimschool-water-drops-pattern.webp);background-size:260px;color:#fff;text-align:center;border-radius:50% 50% 0 0 / 60px 60px 0 0}
.lastlap h2{color:#fff}.lastlap p{max-inline-size:56ch;margin-inline:auto;font-size:1.1rem}
.lastlap .dive{margin-block-start:12px}

/* подвал: тёмная панель, колонка-контакт с вертикальной чертой, белый вложенный блок, белая нижняя строка */
.floor{background:var(--ss-indigo);color:#fff;padding-block:50px 44px;font-size:.93rem}
.floor a{color:#fff}
.floor__in{display:grid;grid-template-columns:260px 1fr;gap:40px}
.floor__brand{border-inline-end:2px solid rgba(255,255,255,.8);padding-inline-end:30px}
.floor__brand img{inline-size:210px;margin-block-end:14px;background:#fff;border-radius:14px;padding:10px 12px}
.floor h4{color:#fff;text-transform:uppercase;font-size:1.02rem;letter-spacing:.04em;margin-block-end:.5em}
.floor__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 30px}
.floor ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.floor ul a{text-decoration:none;text-transform:uppercase;font-size:.84rem;letter-spacing:.03em}
.floor ul a:hover{text-decoration:underline}
.floor__box{grid-column:1/-1;background:#fff;color:var(--ss-ink);padding:22px 26px;display:grid;grid-template-columns:1fr auto;gap:14px 26px;align-items:center}
.floor__box h4{color:var(--ss-teal);font-size:1.2rem}
.floor__box p{margin:0;color:var(--ss-soft)}
.floor__box a{color:var(--ss-teal)}
.fine{text-align:center;font-size:.84rem;color:var(--ss-soft);padding:16px var(--ss-pad) 22px}
.fine p{margin:0 0 4px}
@media (max-width:860px){.floor__in{grid-template-columns:1fr}.floor__brand{border-inline-end:0;border-block-end:2px solid rgba(255,255,255,.8);padding:0 0 22px}.floor__cols{grid-template-columns:1fr 1fr}.floor__box{grid-template-columns:1fr}}

/* крошки и шапка полки */
.crumbs{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ss-soft);padding-block:16px 0;display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding-inline:0}
.crumbs li + li::before{content:"/";margin-inline-end:6px}
.crumbs a{color:var(--ss-soft);text-decoration:none}.crumbs a:hover{color:var(--ss-teal)}
.shelfhead{padding-block:18px 0}
.shelfhead .hero__frame{min-block-size:280px}
.shelfhead .hero__say h1{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.shelfhead__cut{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--ss-foam);padding:18px 18px 18px 90px;align-items:center;block-size:100%}
.shelfhead__cut img{mix-blend-mode:multiply;position:static;object-fit:contain}
@media (max-width:820px){.shelfhead__cut{padding:50px 18px 18px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block:22px 0;align-items:center}
.chips a,.chips label{border:1.5px solid var(--ss-rule);border-radius:99px;padding:5px 14px;font-size:.9rem;text-decoration:none;color:var(--ss-ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:#fff}
.chips a:hover,.chips label:hover{border-color:var(--ss-teal)}
.chips a[aria-current]{background:var(--ss-indigo);color:#fff;border-color:var(--ss-indigo)}
.chips input{position:absolute;opacity:0}
.chips label:has(input:checked){background:var(--ss-indigo);color:#fff;border-color:var(--ss-indigo)}
.chips label:has(input:focus-visible){outline:3px solid var(--ss-pink)}
/* панель вида (сетка/плотно/список) */
.viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-block:1.5px solid var(--ss-rule);padding-block:8px;margin-block:20px}
.viewbar p{margin:0;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ss-soft)}
.viewbar__sw{display:flex;gap:6px}
.viewbar input{position:absolute;opacity:0}
.viewbar label{cursor:pointer;inline-size:34px;block-size:34px;display:grid;place-items:center;border-radius:7px;color:#a9b6c6}
.viewbar label svg{inline-size:20px;block-size:20px}
.viewbar input:checked + label{color:var(--ss-indigo);background:var(--ss-foam)}
.viewbar input:focus-visible + label{outline:3px solid var(--ss-pink)}
.roster:has(#vw3:checked) .school{grid-template-columns:repeat(3,minmax(0,1fr))}
.roster:has(#vwl:checked) .school{grid-template-columns:1fr}
.roster:has(#vwl:checked) .swimmer{display:grid;grid-template-columns:170px minmax(0,1fr) 230px;gap:2px 20px;align-items:center}
.roster:has(#vwl:checked) .swimmer__pic{grid-row:1/8}
.roster:has(#vwl:checked) .swimmer > :not(.swimmer__pic):not(.dive):not(.cost):not(.swimmer__flag){grid-column:2}
.roster:has(#vwl:checked) .cost{grid-column:3;grid-row:2/4;margin:0}
.roster:has(#vwl:checked) .dive{grid-column:3;grid-row:4/7}
.roster:has(#vwl:checked) .swimmer__blurb{display:block}
@media (max-width:740px){.viewbar__sw{display:none}}
.sift{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:start}
.sift__side{position:sticky;inset-block-start:104px;font-size:.93rem}
.sift__side fieldset{border:0;border-block-start:1.5px solid var(--ss-rule);margin:0;padding:12px 0}
.sift__side legend{font-family:var(--ss-head);font-weight:800;color:var(--ss-indigo);padding:0;float:inline-start;inline-size:100%;margin-block-end:6px}
.sift__side label{display:flex;gap:8px;align-items:center;padding-block:2px;cursor:pointer;clear:both}
.sift__side input{inline-size:17px;block-size:17px;accent-color:var(--ss-indigo)}
.sift .school{grid-template-columns:repeat(3,minmax(0,1fr))}
.sift__none{display:none;padding:30px;text-align:center;background:var(--ss-foam);border-radius:14px}
@media (max-width:900px){.sift{grid-template-columns:1fr}.sift__side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.sift .school{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shelfnote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-block-start:44px}
.shelfnote__tip{background:var(--ss-foam);border-inline-start:6px solid var(--ss-sun);border-radius:0 14px 14px 0;padding:22px 24px}
.shelfnote .asked{margin:0}
@media (max-width:820px){.shelfnote{grid-template-columns:1fr}}

/* страница товара */
.pdp{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:clamp(20px,4vw,52px);padding-block:20px 10px;align-items:start}
.reel{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.reel input{position:absolute;opacity:0}
.reel__big{grid-column:1/-1;aspect-ratio:1;border:1.5px solid var(--ss-rule);border-radius:var(--ss-r);overflow:hidden;display:none;order:-1;background:#fff}
.reel__big img{inline-size:100%;block-size:100%;object-fit:contain}
.reel label{cursor:pointer;border:2px solid var(--ss-rule);border-radius:9px;overflow:hidden;aspect-ratio:1;background:#fff}
.reel label img{inline-size:100%;block-size:100%;object-fit:contain}
.reel input:checked + label{border-color:var(--ss-sun)}
.reel input:focus-visible + label{outline:3px solid var(--ss-pink)}
.reel:has(#rl1:checked) #rb1,.reel:has(#rl2:checked) #rb2,.reel:has(#rl3:checked) #rb3,.reel:has(#rl4:checked) #rb4,.reel:has(#rl5:checked) #rb5,.reel:has(#rl6:checked) #rb6{display:block}
.pdp__buy h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.pdp__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.pdp__tags li{border-radius:99px;padding:3px 13px;font-size:.84rem;font-weight:500;background:var(--ss-foam);color:var(--ss-deep);display:inline-flex;align-items:center;gap:6px}
.pdp__tags a{color:inherit;text-decoration:none}
.pdp .cost{font-size:2.3rem}
.pdp__fine{font-size:.82rem;color:var(--ss-soft)}
.pdp__list{margin:16px 0;padding:0;list-style:none;display:grid;gap:9px}
.pdp__list li{padding-inline-start:30px;position:relative}
.pdp__list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.3em;inline-size:18px;block-size:12px;border-radius:50% 50% 50% 50% / 100% 100% 0 0;background:var(--ss-aqua);transform:rotate(180deg)}
.pdp__more{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(20px,4vw,50px);padding-block:30px}
.pdp__care{background:#fff7ea;border:2px solid var(--ss-sun);border-radius:14px;padding:18px 20px;font-size:.93rem;align-self:start}
.pdp__care h3{color:var(--ss-coral)}
.pdp__where{background:var(--ss-foam);border-radius:var(--ss-r);padding:22px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pdp__where .step__ball{position:static;transform:none;inline-size:92px;block-size:92px;flex:none;box-shadow:none}
.pdp__where .step__ball b{font-size:2.5rem}
.pdp__where > div:last-child{flex:1;min-inline-size:220px}
.pdp__again{text-align:center;border:3px dashed var(--ss-teal);border-radius:var(--ss-r);padding:28px 20px;margin-block:36px}
@media (max-width:820px){.pdp,.pdp__more{grid-template-columns:1fr}}

/* гайды и сервисные */
.page{max-inline-size:860px;margin-inline:auto;padding-block:26px 60px}
.page--wide{max-inline-size:var(--ss-shell)}
.page h2{margin-block-start:1.3em;font-size:clamp(1.4rem,2.8vw,1.9rem)}
.keys{background:#e3f6ee;border-radius:14px;padding:20px 24px;margin-block:24px}
.keys ul{margin:0;padding-inline-start:20px}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.guides a{display:block;border-radius:14px;padding:22px;background:var(--ss-foam);text-decoration:none;color:var(--ss-ink);border-block-end:6px solid var(--ss-aqua)}
.guides a:nth-child(2){border-color:var(--ss-sun)}.guides a:nth-child(3){border-color:var(--ss-leaf)}
.guides a:hover{background:#d9eef3}
@media (max-width:760px){.guides{grid-template-columns:1fr}}
/* о бренде: ступени бассейна */
.stairs{list-style:none;margin:30px 0;padding:0;counter-reset:s}
.stairs li{counter-increment:s;background:linear-gradient(90deg,var(--ss-foam),#fff);border-block-start:6px solid var(--ss-aqua);padding:18px 22px;margin-inline-start:calc((var(--i) - 1) * 5%);position:relative}
.stairs li::before{content:"Step " counter(s);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-teal);font-weight:700}
.stairs h3{margin:2px 0 4px}
/* контакты: бирки на крючках */
.hooks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:26px}
.hooks a{display:block;background:#fff;border:2px solid var(--ss-indigo);border-radius:14px;padding:26px 20px 18px;text-decoration:none;color:var(--ss-ink);position:relative}
.hooks a::before{content:"";position:absolute;inset-block-start:9px;inset-inline-start:50%;inline-size:12px;block-size:12px;margin-inline-start:-6px;border-radius:50%;border:2px solid var(--ss-indigo)}
.hooks a:hover{background:var(--ss-foam)}
.hooks b{font-family:var(--ss-head);font-size:1.15rem;color:var(--ss-indigo);display:block}
.card2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card2 > div{background:var(--ss-foam);border-radius:14px;padding:20px 22px}
@media (max-width:640px){.hooks,.card2{grid-template-columns:1fr}}
/* приватность: дорожки */
.lanelist{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;counter-reset:l}
.lanelist section{counter-increment:l;padding:18px 0;border-block-start:3px dotted var(--ss-aqua)}
.lanelist h2{font-size:1.25rem;margin:0 0 6px}
.lanelist h2::before{content:"Lane " counter(l) " · ";color:var(--ss-sun)}
@media (max-width:700px){.lanelist{grid-template-columns:1fr}}
/* условия: табличка у бассейна */
.board{background:var(--ss-indigo);color:#fff;border-radius:var(--ss-r);padding:clamp(20px,4vw,40px);border:6px solid #fff;outline:3px solid var(--ss-indigo);margin-block:26px}
.board ol{margin:0;padding:0;list-style:none;counter-reset:r;display:grid;grid-template-columns:1fr 1fr;gap:20px 34px}
.board li{counter-increment:r;padding-inline-start:52px;position:relative}
.board li::before{content:counter(r);position:absolute;inset-inline-start:0;inset-block-start:0;font-family:var(--ss-head);font-weight:800;font-size:2.2rem;line-height:1;color:var(--ss-sun)}
.board h2{color:#fff;font-size:1.2rem;margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em}
.board p{margin:0;font-size:.95rem;opacity:.95}
@media (max-width:700px){.board ol{grid-template-columns:1fr}}
/* доставка: буйки */
.buoys{list-style:none;margin:30px 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:b}
.buoys li{counter-increment:b;text-align:center;font-size:.92rem}
.buoys li::before{content:counter(b);display:grid;place-items:center;inline-size:62px;block-size:62px;margin:0 auto 10px;border-radius:50%;background:#fff;border:9px dashed var(--ss-coral);font-family:var(--ss-head);font-weight:800;font-size:1.4rem;color:var(--ss-indigo);box-shadow:0 0 0 3px var(--ss-coral) inset}
.buoys h2{font-size:1.1rem;margin:0 0 4px}
@media (max-width:820px){.buoys{grid-template-columns:1fr 1fr}}
.ticks{list-style:none;padding:0;display:grid;gap:8px}
.ticks li{background:var(--ss-foam);border-radius:10px;padding:10px 16px}
/* возвраты: если — то */
.swap{display:grid;gap:12px;margin-block:26px}
.swap div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);border-radius:14px;overflow:hidden;border:1.5px solid var(--ss-rule)}
.swap h2{margin:0;font-size:1.08rem;background:var(--ss-teal);color:#fff;padding:16px 18px;display:flex;align-items:center}
.swap h2::before{content:"If";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;background:var(--ss-sun);color:var(--ss-ink);border-radius:99px;padding:2px 9px;margin-inline-end:10px;font-family:var(--ss-text)}
.swap p{margin:0;padding:16px 18px;font-size:.96rem}
@media (max-width:640px){.swap div{grid-template-columns:1fr}}
/* FAQ: вкладки-группы */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block:22px}
.tabs input{position:absolute;opacity:0}
.tabs > label{cursor:pointer;font-family:var(--ss-head);font-weight:800;padding:8px 22px;border-radius:99px;border:2px solid var(--ss-indigo);color:var(--ss-indigo)}
.tabs input:checked + label{background:var(--ss-indigo);color:#fff}
.tabs input:focus-visible + label{outline:3px solid var(--ss-pink)}
.tabs .asked{order:9;flex-basis:100%;display:none;max-inline-size:none}
.tabs input:nth-of-type(1):checked ~ .asked:nth-of-type(1),.tabs input:nth-of-type(2):checked ~ .asked:nth-of-type(2),.tabs input:nth-of-type(3):checked ~ .asked:nth-of-type(3){display:block}
.lost{text-align:center;padding-block:70px}
.lost b{font-family:var(--ss-head);font-size:clamp(5rem,16vw,9rem);line-height:1;color:var(--ss-aqua);display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}