/* ============================================================
   Каталог. Первый экран: заголовок Cormorant italic +
   волосяная на всю ширину. Ниже — РЕЕСТР: строки во всю
   ширину сразу под шапкой, имя слева + моно-подпись
   справа, клик — переход.

   СТРАНИЦА ИЗДЕЛИЯ (cp-*): шапка + покупка. Композиция по
   центру, как витрина главной. ПК: у фото потолок от
   остатка экрана.

   ЗАКАЗ (ord-*): состав + форма. Поля — Cormorant italic
   с линией снизу (язык поиска), метки моно. Под полем
   адреса — тихая строка-подсказка формата. Чекбоксы
   согласий обязательны (оферта 3.2).

   Вход — после шторки (body.ready), каскад, язык витрины.
   База без opacity:0 — без JS всё видно сразу. Барабан и
   панели гасят каталог (паттерн product.css).
   ============================================================ */

.catalog{
  position:relative;z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:calc(var(--my) + 46px + 34px) var(--mx) clamp(44px,7vh,80px);
  transition:opacity .45s var(--ease-io),
             transform .45s var(--ease-io);
}

/* --- шапка: заголовок + волосяная --- */
.cat-title{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.05;
  color:var(--cream);
  margin:0 0 24px;
}
.cat-rule{height:1px;background:var(--cream-35)}

/* вход после шторки: каскад, шаг .12s */
body.ready .cat-title{animation:catIn .7s var(--ease-out) 1.05s backwards}
body.ready .cat-rule{animation:catRule .9s var(--ease-out) 1.17s backwards}
@keyframes catIn{from{opacity:0;transform:translateY(10px)}}
@keyframes catRule{from{transform:scaleX(0)}}

/* ============================================================
   РЕЕСТР: строки во всю ширину, сразу под шапкой.
   ============================================================ */

.cat-body{
  flex:1;
  display:flex;align-items:flex-start;
  padding-top:clamp(28px,5vh,56px);
}

.cat-list{width:100%;border-bottom:1px solid var(--cream-35)}
.cat-row + .cat-row{border-top:1px solid var(--cream-35)}

.cat-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;
  padding:clamp(18px,3.5vh,32px) 2px;
  text-decoration:none;
  color:var(--cream);
}
@media (min-width:800px){
  .cat-row{padding-left:calc(48px + clamp(24px,4vw,56px))}
}

.cat-row-name{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1.1;
  min-width:0;
  transition:letter-spacing .45s ease;
}
.cat-row-note{
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
  white-space:nowrap;
  transition:color .45s ease;
}

.cat-row:active .cat-row-name{transition:none;letter-spacing:.015em}
.cat-row:active .cat-row-note{transition:none;color:var(--cream)}
@media (hover:hover){
  .cat-row:hover .cat-row-name{letter-spacing:.015em}
  .cat-row:hover .cat-row-note{color:var(--cream)}
}

body.ready .cat-row{
  animation:catIn .7s var(--ease-out)
            calc(1.53s + var(--i,0) * .12s) backwards;
}

/* ============================================================
   СТРАНИЦА ИЗДЕЛИЯ: покупка под шапкой, композиция по
   центру остатка экрана — как витрина главной.
   ============================================================ */

.cp-body{flex:1;display:flex;align-items:center}

.cp-grid{
  display:flex;align-items:center;
  justify-content:center;
  gap:clamp(40px,6vw,110px);
  width:100%;
}
@media (min-width:800px){
  .cp-grid{
    padding-left:calc(48px + clamp(24px,4vw,56px));
    padding-right:clamp(48px,5vw,64px);
  }
}

.cp-photo{height:min(62svh,40vw);flex:0 0 auto}
@media (min-width:800px){
  .cp-photo{max-height:calc(100svh - 390px)}
}

.cp-info{flex:0 1 600px;min-width:0}

.cp-facts{border-bottom:1px solid var(--cream-35)}
.cp-fact{
  display:grid;
  grid-template-columns:clamp(120px,14vw,160px) 1fr;
  gap:16px;align-items:baseline;
  padding:14px 2px;
  border-top:1px solid var(--cream-35);
}
.cp-fact dt{
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
}
.cp-fact dd{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.35;
}

body.ready .cp-rise{
  animation:catIn .7s var(--ease-out)
            calc(1.41s + var(--i,0) * .12s) backwards;
}

@media (max-width:799px){
  .cp-grid{flex-direction:column;align-items:flex-start;gap:26px}
  .cp-photo{width:min(100%,320px);height:auto}
  .cp-info .p-buy-row{margin-top:18px}
  .cp-info .sizes--row{margin-top:16px}
}
@media (max-width:519px){
  .cp-fact{grid-template-columns:1fr;gap:6px}
}

/* ============================================================
   КАРТОЧКА-ФОТО страницы изделия: рамка + плашка единым
   контуром. Живёт только на странице изделия.
   ============================================================ */

.cat-photo{
  position:relative;
  aspect-ratio:3/4;
  border:1px solid var(--cream-35);
  padding:14px;
  display:grid;place-items:center;
  transition:border-color .45s ease;
}
.cat-photo::after{content:'—';font:400 12px/1 'IBM Plex Mono',monospace;color:var(--cream-35)}
.cat-photo:has(img)::after{display:none}
.cat-photo img{width:100%;height:100%;object-fit:contain;display:block}

.cat-plate{
  border:1px solid var(--cream-35);
  border-top:0;
  padding:13px 10px 15px;
  text-align:center;
  transition:border-color .45s ease;
}
.cat-name{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.15;
  transition:letter-spacing .45s ease;
}

/* ============================================================
   ЗАКАЗ: состав и форма. Поля — Cormorant italic с линией
   снизу (язык поиска), метки моно. Под полем адреса —
   тихая строка-подсказка формата. Чекбоксы согласий
   обязательны.
   ============================================================ */

.ord-left{flex:1;min-width:0}
.ord-form{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:26px;
}

/* --- состав: линии на всю ширину колонки --- */
#ordItems{border-bottom:1px solid var(--cream-35)}
.ord-row + .ord-row{border-top:1px solid var(--cream-35)}
.ord-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;
  padding:14px 0;
}
.ord-name{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.15;
}
.ord-sub{
  margin-top:6px;
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
}
.ord-meta{
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-60);
  white-space:nowrap;
}
.ord-price{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1;
  white-space:nowrap;
}
.ord-total .ord-total-label{
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
}
.ord-ship{
  margin-top:14px;
  font:400 10.5px/1.7 'IBM Plex Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-60);
}

/* --- поля: линия снизу, ошибки — полная линия --- */
.ord-label{
  display:block;
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
  margin-bottom:2px;
}
.ord-field{
  border-bottom:1px solid var(--cream-35);
  transition:border-color .45s ease;
}
.ord-field:focus-within{border-color:var(--cream)}
.ord-field.err{border-color:var(--cream)}
.ord-input{
  width:100%;
  background:none;border:0;border-radius:0;
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.2;
  color:var(--cream);caret-color:var(--cream);
  padding:10px 0 9px;
}
.ord-input:focus{outline:none}
.ord-input::placeholder{color:var(--cream-35)}

/* подсказка формата под полем адреса — тихая */
.ord-hint{
  margin-top:-16px;
  font:400 9.5px/1.6 'IBM Plex Mono',monospace;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-35);
}

/* ловушка ботам — вне экрана */
.ord-hp{
  position:absolute;left:-9999px;top:0;
  width:1px;height:1px;overflow:hidden;
}

/* --- чекбоксы согласий --- */
.ord-check{
  display:flex;gap:14px;align-items:flex-start;
  cursor:pointer;user-select:none;
}
.ord-check input{
  position:absolute;opacity:0;pointer-events:none;
}
.ord-box{
  width:18px;height:18px;
  flex:0 0 auto;margin-top:1px;
  border:1px solid var(--cream-35);
  display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease;
}
.ord-check input:checked + .ord-box{
  background:var(--cream);
  border-color:var(--cream);
}
.ord-check input:checked + .ord-box::after{
  content:'';
  width:8px;height:4px;
  border-left:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg) translate(0,-1px);
}
.ord-check input.err + .ord-box{border-color:var(--cream)}
.ord-check-text{
  font:400 10.5px/1.7 'IBM Plex Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-60);
}
.ord-check-text a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--cream-35);
  text-underline-offset:4px;
  transition:color .35s ease,text-decoration-color .35s ease;
}
.ord-check-text a:hover,.ord-check-text a:focus-visible{
  color:var(--cream);
  text-decoration-color:var(--cream);
}

/* --- кнопка отправки: язык витринных кнопок --- */
.ord-submit{
  display:block;width:100%;
  padding:15px 0;
  background:transparent;
  color:var(--cream-35);
  font:400 12px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;
  border:1px solid var(--cream-35);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .45s ease,color .45s ease;
}
.ord-submit:disabled{opacity:.6;cursor:default}
.ord-submit:active{
  transition:none;
  border-color:var(--cream);color:var(--cream);
}
@media (hover:hover){
  .ord-submit:hover{
    transition:border-color .45s ease .18s,color .45s ease .18s;
    border-color:var(--cream);color:var(--cream);
  }
}

/* --- пустая корзина: экран в языке корзины --- */
.ord-empty{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:22px;
}
.ord-empty-circle{
  width:64px;height:64px;
  border:1px solid var(--cream-35);
  border-radius:50%;
}
.ord-empty-text{
  font:400 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
}
.ord-empty-link{
  display:inline-block;
  padding:12px 22px;
  border:1px solid var(--cream-35);
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;
  color:var(--cream-60);
  text-decoration:none;
  transition:border-color .45s ease,color .45s ease;
}
.ord-empty-link:active{
  transition:none;
  border-color:var(--cream);color:var(--cream);
}
@media (hover:hover){
  .ord-empty-link:hover{
    border-color:var(--cream);color:var(--cream);
  }
}

/* --- успех --- */
.ord-done{max-width:520px}
.ord-done-title{
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.1;
}
.ord-done-note{
  margin-top:18px;
  font:400 10.5px/1.7 'IBM Plex Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-60);
}

/* --- телефон: состав и форма в столбик, полная ширина --- */
@media (max-width:799px){
  .ord-left,.ord-form{width:100%}
}

/* барабан гасит каталог; на телефоне — и панели.
   Паттерн витрины (product.css), возврат — базовым
   transition секции */
body.menu-open .catalog{
  opacity:0;
  transform:translateY(clamp(18px,5vh,48px)) scale(.9);
}
@media (max-width:799px){
  body.search-open .catalog,
  body.cart-open .catalog{
    opacity:0;
    transform:translateY(clamp(18px,5vh,48px)) scale(.9);
  }
}