/* Тихий Риф — магазин аквариумистики. Статика, без сборки. */

:root{
  --abyss:#062a33;
  --abyss-2:#0a3b45;
  --ink:#12262a;
  --paper:#f0f5f4;
  --paper-2:#e1eceb;
  --coral:#ff6f52;        /* только графика: галочки, полосы, иконки */
  --coral-dark:#b23c22;   /* текст и кнопки: 5.1:1 на бумаге */
  --coral-darker:#8f2d16;
  --reef:#12706f;         /* второй акцент: ссылки, подчёркивания */
  --muted:#54666a;
  --line:rgba(18,38,42,.14);
  --line-dark:rgba(240,245,244,.18);
  --radius:14px;
  --wrap:1160px;
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.16rem;line-height:1.32}
p,ul,ol,dl,figure,table{margin:0}

a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--abyss);color:var(--paper);
  padding:12px 18px;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--reef);outline-offset:3px}

section[id],[id]{scroll-margin-top:88px}

/* JS-гейтинг: без скрипта корзина бессмысленна, зато виден телефон. */
.js-only{display:none}
.js .js-only{display:inline-flex}
.js .nojs-only{display:none}

.link{color:var(--reef);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(18,112,111,.35);white-space:nowrap}
.link:hover{border-color:var(--reef)}
.link--on-dark{color:#7fd6cf;border-color:rgba(127,214,207,.4)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border:1px solid var(--coral-dark);border-radius:999px;
  background:var(--coral-dark);color:#fff;
  font:600 15px/1 var(--sans);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--coral-darker);border-color:var(--coral-darker)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:rgba(18,38,42,.06);border-color:rgba(18,38,42,.3);color:var(--ink)}
.btn--on-dark{color:var(--paper);border-color:var(--line-dark)}
.btn--on-dark:hover{background:rgba(240,245,244,.12);border-color:rgba(240,245,244,.5);color:var(--paper)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- header ---------- */

.head{
  position:sticky;top:0;z-index:40;
  background:rgba(240,245,244,.93);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.head__row{display:flex;align-items:center;gap:26px;min-height:72px}

.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;color:var(--abyss)}
.logo__mark{width:34px;height:22px;flex:0 0 auto}
.logo__text{font-family:var(--serif);font-size:1.3rem;letter-spacing:.02em;color:var(--ink)}

.nav{display:flex;gap:24px;margin-right:auto}
.nav a{
  text-decoration:none;font-size:15px;color:var(--muted);
  padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--ink);border-color:var(--coral)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--coral)}

.head__aside{display:flex;align-items:center;gap:14px;margin-left:auto}
.tel{text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.tel:hover{color:var(--coral-dark)}

.cartbtn{
  position:relative;width:42px;height:42px;padding:9px;
  background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;
}
.cartbtn:hover{border-color:rgba(18,38,42,.34);background:rgba(18,38,42,.04)}
.cartbtn svg{width:22px;height:22px}
.cartbtn__n{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--coral-dark);color:#fff;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1;
}
.cartbtn__n[hidden]{display:none}

.burger{
  display:none;width:42px;height:42px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer;
}
.burger span[aria-hidden]{display:block;width:18px;height:1.5px;margin:0 auto;background:var(--ink);position:relative;transition:background .15s}
.burger span[aria-hidden]::before,.burger span[aria-hidden]::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .2s ease;
}
.burger span[aria-hidden]::before{top:-6px}
.burger span[aria-hidden]::after{top:6px}
.burger[aria-expanded="true"] span[aria-hidden]{background:transparent}
.burger[aria-expanded="true"] span[aria-hidden]::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span[aria-hidden]::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero: фото + вода на canvas ---------- */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(540px,82vh,780px);
  display:flex;align-items:center;
  background:var(--abyss) url("img/hero.webp") center/cover no-repeat;
  color:var(--paper);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(4,24,30,.93) 0%,rgba(4,24,30,.78) 44%,rgba(4,24,30,.34) 100%);
}
.hero__tank{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero__inner{position:relative;z-index:3;padding:clamp(56px,9vw,104px) 24px;text-shadow:0 1px 14px rgba(4,24,30,.5)}

.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-dark);font-weight:600;margin-bottom:16px}
.hero .eyebrow{color:#ffb59f}

.hero h1{margin-bottom:20px;max-width:16ch}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:54ch}
.lead--tight{max-width:46ch}
.hero .lead{color:rgba(240,245,244,.86)}

.hero__hint{
  display:none;margin:18px 0 0;font-size:13.5px;letter-spacing:.02em;
  color:rgba(240,245,244,.66);
}
.js .hero__hint{display:block}
.hero__hint::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--coral);vertical-align:middle;animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 38px}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:26px;border-top:1px solid var(--line);max-width:720px}
.facts dt{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1}
.facts dd{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.35}
.facts--dark{border-color:var(--line-dark)}
.facts--dark dd{color:rgba(240,245,244,.7)}

/* ---------- sections ---------- */

.sec{padding:clamp(48px,6.5vw,92px) 0}
.sec--tint{background:var(--paper-2)}
.sec--deep{background:var(--abyss);color:var(--paper)}
.sec--deep h2,.sec--deep h3{color:var(--paper)}

.sec__head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.sec__head h2{margin-bottom:12px}
.sec__head p{color:var(--muted)}
.sec--deep .sec__head p{color:rgba(240,245,244,.74)}
.sec__head--row{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;max-width:none}
.sec__head--row > div{max-width:60ch}
.sec__more{margin-top:28px}

.page-head{padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,34px)}
.page-head h1{max-width:22ch;margin-bottom:14px}
.page-head .lead{color:var(--muted)}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:18px;padding:0;list-style:none}
.crumbs li::after{content:"›";margin-left:8px;color:rgba(18,38,42,.35)}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none;color:var(--reef)}
.crumbs a:hover{text-decoration:underline}

/* ---------- преимущества ---------- */

.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cardlet{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.sec--tint .cardlet{background:var(--paper)}
.cardlet__n{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--coral-dark);margin-bottom:14px}
.cardlet h3{margin-bottom:9px}
.cardlet p{font-size:15px;color:var(--muted)}

/* ---------- товары ---------- */

.prods{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.prods--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.prod:hover{border-color:rgba(18,38,42,.28);box-shadow:0 18px 40px -34px rgba(6,42,51,.8);transform:translateY(-2px)}
.prod__shot{display:block;background:var(--abyss-2)}
.prod__shot img{width:100%;height:196px;object-fit:cover}
.prod__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.prod__tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-dark);font-weight:600;margin-bottom:8px}
.prod h3{margin-bottom:8px}
.prod h3 a{text-decoration:none}
.prod h3 a:hover{color:var(--coral-dark)}
.prod__desc{font-size:14.5px;color:var(--muted);flex:1 1 auto}
.prod__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:16px 0 14px}
.prod__price{font-family:var(--serif);font-size:1.34rem}
.prod__stock{font-size:13px;color:var(--muted)}
.prod .btn{align-self:flex-start}
.prod.is-added .js-add{background:var(--reef);border-color:var(--reef)}

/* ---------- фильтр каталога: чистый CSS, работает без JS ---------- */

/* Список лежит внутри .filters, потому что иначе не работает сиблинг-селектор
   ниже. Поэтому он — такой же флекс-элемент, которому отдана вся строка. */
.filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-bottom:28px}
.filters > .prods{flex:0 0 100%;margin-top:18px}
.filters input{position:absolute;opacity:0;width:1px;height:1px}
.filters label{
  display:inline-block;padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  font-size:14.5px;font-weight:600;cursor:pointer;background:var(--paper);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.filters label:hover{border-color:rgba(18,38,42,.34)}
.filters input:checked + label{background:var(--abyss);border-color:var(--abyss);color:var(--paper)}
.filters input:focus-visible + label{outline:2px solid var(--reef);outline-offset:3px}

#f-fish:checked  ~ .prods .prod:not([data-cat="fish"]),
#f-plant:checked ~ .prods .prod:not([data-cat="plant"]),
#f-tech:checked  ~ .prods .prod:not([data-cat="tech"]){display:none}

/* ---------- плитки категорий ---------- */

.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tile a{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  text-decoration:none;color:var(--paper);background:var(--abyss);
}
.tile img{width:100%;height:260px;object-fit:cover;transition:transform .5s ease;opacity:.86}
.tile a:hover img{transform:scale(1.05)}
.tile__body{
  position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(to top,rgba(4,24,30,.92),rgba(4,24,30,0));
}
.tile__name{display:block;font-family:var(--serif);font-size:1.24rem;margin-bottom:5px}
.tile__note{display:block;font-size:13.5px;color:rgba(240,245,244,.78)}

/* ---------- шаги ---------- */

.steps{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{counter-increment:s;padding-top:22px;border-top:2px solid var(--abyss)}
.steps li::before{content:"0" counter(s);display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--coral-dark);margin-bottom:12px}
.steps h3{margin-bottom:9px}
.steps p{font-size:15px;color:var(--muted)}
.steps--dark li{border-color:var(--coral)}
.steps--dark li::before{color:#ffb59f}
.steps--dark p{color:rgba(240,245,244,.74)}

/* ---------- сплит текст + фото ---------- */

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.split__art{margin:0}
.split__art img{width:100%;border-radius:var(--radius);box-shadow:0 30px 64px -46px rgba(6,42,51,.8)}
.split__art figcaption{margin-top:14px;font-size:13.5px;color:var(--muted);max-width:40ch}
.split__text h2{margin-bottom:14px}
.split__text .btn{margin-top:26px}

.ticks{list-style:none;padding:0;display:grid;gap:11px;margin-top:22px}
.ticks li{position:relative;padding-left:26px;font-size:15.5px;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:9px;width:10px;height:5px;
  border-left:1.8px solid var(--coral);border-bottom:1.8px solid var(--coral);transform:rotate(-45deg);
}
.sec--deep .ticks li{color:rgba(240,245,244,.78)}

/* ---------- цитата ---------- */

.quote{max-width:74ch}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,2.3vw,1.72rem);line-height:1.42}
.quote figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.quote figcaption b{font-size:15px}
.quote figcaption span{font-size:14px;color:rgba(240,245,244,.68)}

/* ---------- faq ---------- */

.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;font-family:var(--serif);font-size:1.1rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.7px solid var(--coral);border-bottom:1.7px solid var(--coral);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 20px;padding-right:44px;font-size:15.5px;color:var(--muted)}

/* ---------- полоса призыва ---------- */

.cta{background:var(--abyss-2);color:var(--paper);padding:clamp(34px,4.6vw,56px) 0}
.cta__row{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.cta h2{margin-bottom:8px}
.cta p{color:rgba(240,245,244,.78);max-width:56ch}
.cta__act{margin:0}

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

.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,56px);align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.gallery__main{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--abyss-2)}
.gallery__main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.gallery__list button{
  padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:none;cursor:pointer;width:100%;display:block;
  transition:border-color .16s ease;
}
.gallery__list button:hover{border-color:rgba(18,38,42,.34)}
.gallery__list button[aria-current="true"]{border-color:var(--coral-dark);box-shadow:inset 0 0 0 1px var(--coral-dark)}
.gallery__list img{width:100%;aspect-ratio:4/3;object-fit:cover}

.pdp__info h1{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:12px}
.pdp__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin:18px 0}
.pdp__price{font-family:var(--serif);font-size:2rem}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--reef)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--reef)}
.badge--wait{color:var(--coral-dark)}
.badge--wait::before{background:var(--coral-dark)}

.buybox{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--paper-2);margin:24px 0}
.buybox .btn{margin-bottom:12px}
.buybox p{font-size:14px;color:var(--muted);margin:0}

.specs{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.specs th,.specs td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{font-weight:600;color:var(--muted);width:47%;font-size:14.5px}

.prose{max-width:70ch}
/* .wrap.prose центрировал бы узкую колонку, и заголовки разъезжались бы
   с таблицами и шагами, которые идут во всю ширину. Ширину держим на детях. */
.wrap.prose{max-width:var(--wrap)}
.wrap.prose > *{max-width:70ch}
.prose h2{margin:clamp(30px,4vw,46px) 0 14px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:14px;color:var(--muted)}
.prose p strong,.prose li strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--muted)}
.prose li{margin-bottom:7px}
.prose > :first-child{margin-top:0}

.note{
  border-left:3px solid var(--coral);background:var(--paper-2);
  padding:18px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:22px 0;
}
.note p{margin:0;font-size:15.5px;color:var(--ink)}
.note p + p{margin-top:10px}

/* ---------- таблицы (доставка, параметры воды) ---------- */

.tablewrap{overflow-x:auto;margin:24px 0}
.table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.table th,.table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.table thead th{background:var(--abyss);color:var(--paper);font-weight:600;font-size:14px;letter-spacing:.02em}
.table thead th:first-child{border-radius:var(--radius) 0 0 0}
.table thead th:last-child{border-radius:0 var(--radius) 0 0}
.table tbody tr:nth-child(even){background:var(--paper-2)}
.table td b{font-weight:600}

/* ---------- контакты ---------- */

.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:start}
.contact__list{list-style:none;padding:0;display:grid;gap:18px;margin-top:24px}
.contact__list dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact__list dd{margin:0;font-size:17px}
.contact__list a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact__list a:hover{border-color:var(--coral-dark);color:var(--coral-dark)}

.form{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px)}
.form h2{margin-bottom:10px}
.field{margin:0 0 16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input[type="text"],.field input[type="email"],.field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;transition:border-color .16s ease;
}
.field input:focus,.field textarea:focus{border-color:var(--reef)}
.field input:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible){outline:none}
.field textarea{resize:vertical;min-height:110px}
.field--check{display:flex;align-items:flex-start;gap:10px}
.field--check input{margin-top:4px;width:17px;height:17px;accent-color:var(--reef);flex:0 0 auto}
.field--check label{margin:0;font-weight:400;font-size:14px;color:var(--muted)}
.form__note{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.form__note[data-state="err"]{color:#a3352a;font-weight:600}
.form__note[data-state="ok"]{color:#1f6b4d;font-weight:600}

/* ---------- корзина ---------- */

.cart[hidden]{display:none}
.cart{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.cart__veil{position:absolute;inset:0;background:rgba(4,24,30,.55);backdrop-filter:blur(2px)}
.cart__panel{
  position:relative;width:min(420px,100%);height:100%;
  background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(4,24,30,.7);
  animation:slide .24s ease-out;
}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.cart__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart__head h2{font-size:1.4rem}
.cart__x{width:38px;height:38px;padding:8px;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink)}
.cart__x:hover{border-color:rgba(18,38,42,.34)}
.cart__body{flex:1 1 auto;overflow-y:auto;padding:8px 22px}
.cart__empty{padding:34px 0;color:var(--muted);font-size:15.5px}

.citem{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem__name{font-weight:600;font-size:15.5px}
.citem__price{font-size:14px;color:var(--muted);margin-top:3px}
.citem__qty{display:flex;align-items:center;gap:8px;grid-column:1}
.citem__qty button{
  width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);cursor:pointer;font-size:17px;line-height:1;color:var(--ink);
}
.citem__qty button:hover{border-color:rgba(18,38,42,.34)}
.citem__qty span{min-width:22px;text-align:center;font-weight:600}
.citem__sum{grid-column:2;grid-row:2;font-weight:600;align-self:center}
.citem__del{grid-column:2;grid-row:1;background:none;border:0;padding:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline}
.citem__del:hover{color:var(--coral-dark)}

.cart__foot{padding:20px 22px;border-top:1px solid var(--line);background:var(--paper-2)}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-size:15px}
.cart__sum b{font-family:var(--serif);font-size:1.5rem}
.cart__go{width:100%}
.cart__note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.cart__note[data-state="ok"]{color:#1f6b4d;font-weight:600}

body.is-locked{overflow:hidden}

/* ---------- подвал ---------- */

.foot{background:var(--abyss);color:rgba(240,245,244,.78);padding:44px 0 38px}
.foot__grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:28px 32px;align-items:start}
.foot__logo{font-family:var(--serif);font-size:1.3rem;color:var(--paper);margin-bottom:10px}
.foot__legal{font-size:13.5px;max-width:40ch}
.foot__nav{display:grid;gap:9px;font-size:14.5px}
.foot__nav a{text-decoration:none}
.foot__nav a:hover{color:var(--coral)}
.foot__list{list-style:none;padding:0;display:grid;gap:9px;font-size:14.5px}
.foot__list a{text-decoration:none}
.foot__list a:hover{color:var(--coral)}

/* ---------- reveal (только как улучшение) ---------- */

.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001s!important;animation-duration:.001s!important}
  .js .reveal{opacity:1;transform:none}
}

/* Подсказка про курсор бессмысленна на тач-экранах. */
@media (hover:none){
  .js .hero__hint{display:none}
}

/* ---------- адаптив ---------- */

@media (max-width:1080px){
  .cards,.prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}

@media (max-width:960px){
  .split,.pdp,.contact{grid-template-columns:1fr}
  .split__art{max-width:520px}
  .prods--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:1fr}
  .tile img{height:210px}
  .burger{display:block}
  .tel{display:none}
  .sec__head--row{flex-direction:column;align-items:flex-start}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px 24px 18px;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
}

@media (max-width:720px){
  body{font-size:16px}
  .cards,.prods,.prods--3,.steps{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero__inner{padding-top:clamp(44px,12vw,72px);padding-bottom:clamp(44px,12vw,72px)}
  .cta__row{flex-direction:column;align-items:flex-start}
}

@media print{
  .head,.burger,.cartbtn,.cart,.hero__tank,.skip,.cta{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .hero{min-height:0;background:#fff;color:#000}
  .hero::after{display:none}
  .hero__inner{text-shadow:none;padding:14pt 0}
  .hero .lead,.facts--dark dd{color:#333}
  .sec,.hero{padding:14pt 0}
  .sec--deep,.cta{background:#fff;color:#000}
  .sec--deep .sec__head p,.steps--dark p{color:#333}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}

/* ==================================================================
   Аквариум на всю страницу — режим всех страниц магазина.
   Канва лежит фиксированным слоем под всем документом, поэтому
   секции становятся тёмным стеклом, а типографика — светлой.
   ================================================================== */

.tank--full{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

.aqua{background:var(--abyss)}
.aqua .head,
.aqua main,
.aqua .foot{position:relative;z-index:1}

.aqua .head{background:rgba(4,26,32,.72);border-bottom-color:var(--line-dark)}
.aqua .logo__text,.aqua .tel{color:var(--paper)}
.aqua .logo{color:#7fd6cf}
.aqua .nav a{color:rgba(240,245,244,.72)}
.aqua .nav a:hover,.aqua .nav a[aria-current="page"]{color:var(--paper)}
.aqua .cartbtn,.aqua .burger{color:var(--paper);border-color:var(--line-dark)}
.aqua .burger span[aria-hidden],
.aqua .burger span[aria-hidden]::before,
.aqua .burger span[aria-hidden]::after{background:var(--paper)}

/* Герой без своего фото: его роль играет общая канва. */
.aqua .hero{background:none;min-height:clamp(520px,80vh,760px)}
.aqua .hero::after{display:none}

/* Секции — стекло поверх воды. */
.aqua .sec,
.aqua .page-head,
.aqua .cta{background:rgba(4,26,32,.66);backdrop-filter:blur(7px);color:var(--paper)}
.aqua .sec--tint{background:rgba(4,26,32,.74)}
.aqua .sec--deep{background:rgba(3,20,26,.8)}
.aqua .sec + .sec{border-top:1px solid rgba(240,245,244,.07)}

.aqua h1,.aqua h2,.aqua h3{color:var(--paper)}
.aqua .lead,.aqua .sec__head p,.aqua .prose p,.aqua .prose ul,.aqua .prose ol,
.aqua .steps p,.aqua .cardlet p,.aqua .prod__desc,.aqua .ticks li,
.aqua .faq details p,.aqua .split__art figcaption,.aqua .crumbs{color:rgba(240,245,244,.76)}
.aqua .eyebrow{color:#ffb59f}
.aqua .link{color:#7fd6cf;border-color:rgba(127,214,207,.4)}

/* Карточки — ещё на тон светлее, чтобы отделялись от секции. */
.aqua .cardlet,
.aqua .prod,
.aqua .buybox,
.aqua .note,
.aqua .form,
.aqua .filters label{
  background:rgba(240,245,244,.06);
  border-color:rgba(240,245,244,.14);
  color:var(--paper);
}
.aqua .note{border-left-color:var(--coral)}
.aqua .note p{color:var(--paper)}
.aqua .prod:hover{border-color:rgba(240,245,244,.34);box-shadow:0 18px 40px -30px #000}
.aqua .filters input:checked + label{background:var(--coral-dark);border-color:var(--coral-dark)}

.aqua .facts,.aqua .steps li,.aqua .faq,.aqua .faq details,.aqua .specs th,
.aqua .specs td,.aqua .table th,.aqua .table td{border-color:rgba(240,245,244,.16)}
.aqua .facts dd,.aqua .prod__stock,.aqua .specs th{color:rgba(240,245,244,.66)}
.aqua .steps li{border-top-color:var(--coral)}
.aqua .steps li::before,.aqua .cardlet__n,.aqua .prod__tag{color:#ffb59f}
.aqua .table thead th{background:rgba(3,20,26,.9)}
.aqua .table tbody tr:nth-child(even){background:rgba(240,245,244,.05)}

.aqua .btn--ghost{color:var(--paper);border-color:var(--line-dark)}
.aqua .btn--ghost:hover{background:rgba(240,245,244,.12);border-color:rgba(240,245,244,.5)}

.aqua .field label{color:rgba(240,245,244,.72)}
.aqua .field input,.aqua .field textarea{background:rgba(3,20,26,.6);border-color:rgba(240,245,244,.18);color:var(--paper)}

.aqua .foot{background:rgba(3,18,24,.86)}
.aqua .tile a{background:rgba(3,20,26,.6)}

/* Дно рисуется канвой в самом низу документа — оставляем ему воздух. */
.aqua .foot{padding-bottom:clamp(120px,18vh,220px)}

/* Подвал не должен закрывать дно — растворяем его книзу. */
.aqua .foot{
  background:linear-gradient(to bottom,
    rgba(3,18,24,.88) 0%,
    rgba(3,18,24,.82) 42%,
    rgba(3,18,24,.28) 78%,
    rgba(3,18,24,0) 100%);
}

/* Страницы, которых не было в первой версии тёмного режима: каталог, карточка
   товара, уход, доставка, контакты. Здесь добиты элементы, оставшиеся тёмными
   на тёмной воде. */
.aqua .crumbs a{color:#7fd6cf}
.aqua .crumbs li::after{color:rgba(240,245,244,.35)}
.aqua .pdp__price,
.aqua .specs td,
.aqua .contact__list dd,
.aqua main strong{color:var(--paper)}
.aqua .badge{color:#7fd6cf}
.aqua .badge::before{background:#7fd6cf}
.aqua .badge--wait{color:#ffb59f}
.aqua .badge--wait::before{background:#ffb59f}
.aqua .buybox p,
.aqua .form__note,
.aqua .contact__list dt,
.aqua .specs th{color:rgba(240,245,244,.72)}
.aqua .contact__list a{color:var(--paper);border-bottom-color:rgba(240,245,244,.28)}
.aqua .contact__list a:hover{color:#ffb59f;border-bottom-color:#ffb59f}
.aqua .gallery__main,
.aqua .gallery__thumbs button{background:rgba(240,245,244,.06);border-color:rgba(240,245,244,.14)}
.aqua .split__art figcaption{color:rgba(240,245,244,.66)}

/* Корзина тоже становится тёмным стеклом: светлая панель поверх аквариума
   выглядела вставкой из другого макета. */
.aqua .cart__panel{background:rgba(6,32,39,.94);color:var(--paper)}
.aqua .cart__head,
.aqua .cart__foot,
.aqua .citem{border-color:rgba(240,245,244,.16)}
.aqua .cart__foot{background:rgba(3,20,26,.8)}
.aqua .cart__empty,
.aqua .cart__note,
.aqua .citem__price{color:rgba(240,245,244,.7)}
.aqua .cart__sum{color:rgba(240,245,244,.8)}
.aqua .citem__qty button{background:rgba(240,245,244,.1);color:var(--paper);border-color:rgba(240,245,244,.28)}
.aqua .citem__qty button:hover{border-color:rgba(240,245,244,.55)}
.aqua .citem__del{color:rgba(240,245,244,.6)}
.aqua .citem__del:hover{color:#ffb59f}
.aqua .cart__x{color:var(--paper)}
.aqua .cart__x{border-color:rgba(240,245,244,.28)}
.aqua .cart__x:hover{border-color:rgba(240,245,244,.55)}

/* На узком экране стая ходила прямо через заголовок первого экрана и текст
   читался шумно (канва зафиксирована под всем документом, у героя фона нет).
   Возвращаем затемнение только под текстовым блоком: сверху рыбы видны как
   были, ниже они уходят в глубину. Без backdrop-filter — он пересчитывался бы
   на каждый кадр канвы и съел бы fps, за которые тут воевали. */
@media (max-width:640px){
  .aqua .hero::after{
    display:block;
    background:linear-gradient(180deg,rgba(4,24,30,0) 0%,rgba(4,24,30,.55) 16%,rgba(4,24,30,.76) 34%,rgba(4,24,30,.76) 100%);
  }
}