/* ===================================================================
DreamPools — магазин.
Продолжение основной дизайн-системы: те же токены, та же строгость,
прямые углы и тонкие линейки. Отдельный файл, потому что грузится
только на странице каталога и не утяжеляет остальные.
=================================================================== */
.vh{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* ─────────────────────────────────────────────
ПОИСК В ШАПКЕ СТРАНИЦЫ
───────────────────────────────────────────── */
.phero-shop .hero-search{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
max-width:820px;
margin-top:46px;
}
.hero-search input[type="search"]{
width:100%;
height:60px;
padding:0 22px;
border:1px solid rgba(255,255,255,0.22);
border-radius:var(--r);
background:rgba(255,255,255,0.05);
font-family:var(--sans);
font-size:16px;
color:var(--tx-on-dark);
transition:border-color .2s, background .2s;
appearance:none;
}
.hero-search input::placeholder{ color:var(--tx-on-dark-mute); }
.hero-search input:hover{ border-color:rgba(255,255,255,0.34); }
.hero-search input:focus{
outline:none;
border-color:var(--bronze-lift);
background:rgba(255,255,255,0.08);
}
.hero-search .btn{ height:60px; padding:0 34px; }
.hero-search-note{
margin-top:14px;
font-size:12.5px;
color:var(--tx-on-dark-mute);
}
/* ─────────────────────────────────────────────
РАЗДЕЛЫ КАТАЛОГА — крупные входы
Та же сетка на линейках, что и «преимущества» на других страницах:
ничего нового в языке сайта, просто ещё одно её применение.
───────────────────────────────────────────── */
.cat-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:1px;
background:var(--rule);
border:1px solid var(--rule);
}
.cat-cell{
display:flex;
align-items:flex-start;
gap:16px;
width:100%;
text-align:left;
background:var(--paper);
border:0;
padding:24px 22px 26px;
cursor:pointer;
transition:background .3s ease;
}
.cat-cell:hover{ background:rgba(27,75,143,0.03); }
.cat-ic{
flex:none;
width:40px; height:40px;
color:var(--blue);
opacity:.85;
transition:opacity .3s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.cat-cell:hover .cat-ic{ opacity:1; transform:translateY(-2px); }
.cat-tx{ min-width:0; }
.cat-cell b{
display:block;
font-family:var(--serif);
font-size:16.5px;
font-weight:400;
line-height:1.3;
color:var(--tx-strong);
overflow-wrap:anywhere;
}
.cat-tx > span{
display:block;
margin-top:9px;
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--tx-mute);
font-variant-numeric:tabular-nums;
}
.cat-cell.all b{ color:var(--blue); }
/* стрелка-уголок: у раздела есть что развернуть */
.cat-chev{
position:absolute;
right:18px; top:26px;
width:7px; height:7px;
border-right:1px solid var(--tx-mute);
border-bottom:1px solid var(--tx-mute);
transform:rotate(45deg);
transition:transform .3s ease, border-color .3s ease;
}
.cat-cell{ position:relative; }
.cat-cell:hover .cat-chev{ border-color:var(--blue); }
.cat-cell[data-open="1"]{ background:var(--white); }
.cat-cell[data-open="1"] .cat-chev{ transform:rotate(-135deg); border-color:var(--blue); }
.cat-cell[data-open="1"] b{ color:var(--blue); }
/* ─────────────────────────────────────────────
ПОДРАЗДЕЛЫ
Панель занимает всю ширину сетки и встаёт после последнего элемента
того ряда, где стоит раскрытый раздел, — тогда ряд не разрывается.
───────────────────────────────────────────── */
.cat-sub{
grid-column:1 / -1;
background:var(--white);
padding:26px 28px 30px;
animation:sub-in .3s ease both;
}
@keyframes sub-in{
from{ opacity:0; transform:translateY(-6px); }
to{ opacity:1; transform:none; }
}
.cat-sub-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:20px; flex-wrap:wrap;
padding-bottom:16px; margin-bottom:20px;
border-bottom:1px solid var(--rule);
}
.cat-sub-head b{
font-family:var(--serif); font-size:18px; font-weight:400;
color:var(--tx-strong);
}
.sub-all{
background:none; border:0; padding:0;
font-family:var(--sans); font-size:11.5px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
color:var(--blue); cursor:pointer;
}
.sub-all:hover{ color:var(--blue-lift); text-decoration:underline; text-underline-offset:4px; }
.cat-sub-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
gap:2px;
}
.sub-cell{
display:flex; align-items:center; gap:13px;
width:100%; text-align:left;
background:none; border:0;
padding:12px 12px 12px 10px;
border-radius:var(--r);
cursor:pointer;
transition:background .25s ease;
}
.sub-cell:hover{ background:var(--paper-alt); }
.sub-ic{
flex:none; width:32px; height:32px;
color:var(--blue); opacity:.75;
transition:opacity .25s ease;
}
.sub-cell:hover .sub-ic{ opacity:1; }
.sub-tx{ min-width:0; }
.sub-tx b{
display:block;
font-family:var(--sans); font-size:13.5px; font-weight:500; line-height:1.32;
color:var(--tx-strong);
overflow-wrap:anywhere;
}
.sub-tx > span{
display:block; margin-top:3px;
font-size:11px; color:var(--tx-mute);
font-variant-numeric:tabular-nums;
}
/* ─────────────────────────────────────────────
СЕТКА: РАЗДЕЛЫ СЛЕВА, ТОВАРЫ СПРАВА
───────────────────────────────────────────── */
.shop-grid{
display:grid;
grid-template-columns:262px 1fr;
gap:52px;
align-items:start;
}
.shop-side-in{ position:sticky; top:130px; }
/* Поиск в колонке разделов — компактнее, чем в шапке: он там второй,
а не главный. */
.side-search{ margin-bottom:22px; }
.side-search input[type="search"]{
width:100%;
height:44px;
padding:0 14px 0 36px;
border:1px solid var(--rule-strong);
border-radius:var(--r);
background:var(--white)
url("data:image/svg+xml;utf8,")
no-repeat left 13px center;
font-family:var(--sans);
font-size:13.5px;
color:var(--tx-strong);
transition:border-color .2s;
appearance:none;
}
.side-search input::placeholder{ color:var(--tx-mute); }
.side-search input:focus{ outline:none; border-color:var(--blue); }
/* ─────────────────────────────────────────────
ПОДСКАЗКИ ПРИ НАБОРЕ
Панель под полем поиска. Лежит внутри