

/* Start:/upload/project/css/project-ac.css?178515858613308*/
/* ============================================================
   Проектные решения 1200x600.ru — каталог Ancient Ceramic
   Классы с префиксами ps- и ac-, конфликтов с шаблоном нет.

   Если шаблон сайта оборачивает контент в узкий контейнер,
   раскомментируйте строку ниже — блок выйдет на всю ширину:
   .ps-root{width:100vw;margin-left:calc(50% - 50vw)}
   ============================================================ */

/* Шрифты подключены локально из /upload/project/fonts/.
   Google Fonts больше не используется — внешних зависимостей нет.
   Prata, Inter, IBM Plex Mono — SIL Open Font License 1.1. */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/upload/project/fonts/prata-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/upload/project/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/upload/project/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/upload/project/fonts/plexmono-500.woff2') format('woff2')}

/* --------------------------------------------------------------
   Совместимость с шаблоном сайта.

   Шаблон задаёт цвет прямо тегам — h1{color:#222}, .container p{...}.
   Правило на тег перебивает цвет, унаследованный от .ps-root, и текст
   раздела уходит в тёмный. Ниже наследование возвращается, а всем
   собственным цветовым правилам раздела поднята специфичность —
   в селекторе минимум два класса.

   Первым делом усилен сам контейнер: .ps-root — это div, и правило
   шаблона вида .container div{color:#555} его перебивает. Пока цвет
   сбит на контейнере, всё содержимое наследует уже испорченный.

   Возвращается именно наследование (color:inherit), а не конкретный
   цвет: тогда заголовки и текст на светлых секциях (.ps-zones, .ps-tech,
   .ps-spec, .ps-pal) остаются тёмными, как и задумано.

   :where() специфичности не добавляет, поэтому все наши правила ниже
   по файлу продолжают работать как раньше.
   -------------------------------------------------------------- */
.ps-root.ps-root{color:var(--cream);background-color:var(--ink)}
.ps-root.ps-root :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,
  table,thead,tbody,tfoot,tr,th,td,caption,figure,figcaption,form,label,legend,
  fieldset,span,div,a,em,i,b,strong,small,address,time,mark,input,textarea,
  button){color:inherit}

.ps-root *,.ps-root *::before,.ps-root *::after{box-sizing:border-box}
.ps-root p,.ps-root h1,.ps-root h2,.ps-root h3,.ps-root h4,.ps-root figure,.ps-root figcaption{margin:0;padding:0}
.ps-root.ps-root a{color:inherit;text-decoration:none}
.ps-root img{max-width:100%}
.ps-root a:focus-visible,.ps-root button:focus-visible,.ps-root input:focus-visible,.ps-root textarea:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.ps-wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.ps-sec{padding:clamp(52px,7vw,96px) 0}
.ps-root .ps-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--sand-d)}
.ps-h2{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.8vw,50px);line-height:1.1;margin-top:22px;max-width:22ch}
.ps-root .ps-h2 em{font-style:normal;color:var(--sand)}
.ps-root .ps-lead{margin-top:20px;max-width:64ch;color:#b6bcc1;font-size:clamp(15px,1.15vw,17px)}
.ps-lead + .ps-lead{margin-top:14px}
.ps-root .ps-mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ps-root .ps-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;cursor:pointer;border:1px solid transparent; font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:.2s}
.ps-root.ps-root .ps-btn--fill{background:var(--sand);color:#14181b;font-weight:500}
.ps-root .ps-btn--fill:hover{filter:brightness(1.12)}
.ps-root.ps-root .ps-btn--line{border-color:rgba(238,240,241,.34);color:var(--cream)}
.ps-root.ps-root .ps-btn--line:hover{border-color:var(--sand);color:var(--sand)}
.ps-crumbs{padding-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ps-root .ps-crumbs a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ps-root .ps-crumbs a:hover{color:var(--sand)}
.ps-root .ps-crumbs span{color:#4f575e}
.ps-hero{position:relative;overflow:hidden;background-color:var(--ink); background-size:cover;background-position:center;padding-bottom:clamp(36px,5vw,64px)}
.ps-hero::before{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(20,24,27,.97) 0%,rgba(20,24,27,.92) 44%,rgba(20,24,27,.66) 100%)}
.ps-hero__in{position:relative}
.ps-hero__title{font-family:var(--disp);font-weight:400;font-size:clamp(32px,5.4vw,66px);line-height:1.04;margin-top:20px}
.ps-root .ps-hero__title em{font-style:normal;color:var(--sand)}
.ps-root .ps-hero__txt{margin-top:20px;max-width:56ch;color:#c0c6cb;font-size:16px}
.ps-hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ps-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background-color:var(--ink);border-top:1px solid var(--line);margin-top:clamp(30px,4vw,48px)}
.ps-facts__i{padding:22px 0;box-shadow:0 -1px 0 0 var(--line)}
.ps-root .ps-facts__v{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);color:var(--cream);line-height:1}
.ps-root .ps-facts__c{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:10px}
.ps-zones{display:grid;gap:1px;background-color:var(--ink);grid-template-columns:1fr;margin-top:40px}
.ps-zone{padding:24px 22px;box-shadow:0 0 0 1px var(--line)}
.ps-root .ps-zone__t{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.ps-root .ps-zone__d{font-size:14px;color:#9aa2a9;margin-top:10px}
.ps-root .ps-tech{background:var(--paper);color:var(--paper-ink)}
.ps-root .ps-tech .ps-eyebrow{color:#87775a}
.ps-root .ps-tech .ps-h2{color:var(--paper-ink)}
.ps-root .ps-tech .ps-lead{color:#454c51}
.ps-tbl{width:100%;border-collapse:collapse;margin-top:38px;font-size:14px}
.ps-root .ps-tbl th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:#6f767b;padding:0 14px 12px 0;border-bottom:1px solid var(--paper-ink)}
.ps-tbl td{padding:14px 14px 14px 0;border-bottom:1px solid var(--paper-line);vertical-align:top}
.ps-root .ps-tbl td:first-child{color:#454c51}
.ps-tbl td:not(:first-child){font-family:var(--mono);font-size:13px}
.ps-root .ps-tbl tr.ps-tbl__grp td{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#87775a; padding-top:26px;border-bottom:1px solid var(--paper-ink)}
.ps-root .ps-note{margin-top:22px;font-size:13px;color:#6f767b;max-width:70ch}
.ps-terms{display:grid;gap:1px;background-color:var(--ink);margin-top:40px;grid-template-columns:1fr}
.ps-term{padding:26px 24px;box-shadow:0 0 0 1px var(--line)}
.ps-root .ps-term__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sand-d)}
.ps-term__t{font-size:17px;font-weight:500;margin-top:14px}
.ps-root .ps-term__d{font-size:14px;color:#9aa2a9;margin-top:8px}
.ps-cta{background:var(--ink-2)}
.ps-cta__grid{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr}
.ps-form{display:grid;gap:1px;background-color:var(--ink-2);border:1px solid var(--line);margin-top:6px}
.ps-fld{padding:15px 18px;box-shadow:0 0 0 1px var(--line)}
.ps-root .ps-fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ps-root .ps-fld input,
.ps-root .ps-fld textarea{width:100%;background:transparent;border:0;color:var(--cream);font-family:var(--body);font-size:15px;padding:8px 0 2px}
.ps-fld textarea{resize:vertical;min-height:60px}
.ps-root .ps-fld input::placeholder,
.ps-root .ps-fld textarea::placeholder{color:#606870}
.ps-form__go{padding:0;box-shadow:none}
.ps-form__go .ps-btn{width:100%;justify-content:center;padding:19px}
.ps-root .ps-legal{font-size:12px;color:#727a80;margin-top:16px}
.ps-legal a{text-decoration:underline}
.ps-back{border-top:1px solid var(--line);padding:26px 0;display:flex;gap:12px;flex-wrap:wrap}
/* ---------- ассортимент ---------- */ .ac-bar{position:sticky;top:0;z-index:20;background:rgba(20,24,27,.96);backdrop-filter:blur(8px); border-bottom:1px solid var(--line);padding:12px 0}
.ac-bar__in{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ac-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto}
.ps-root .ac-chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:8px 13px;border:1px solid var(--line);color:#b6bcc1;white-space:nowrap}
.ps-root .ac-chip:hover{border-color:var(--sand);color:var(--sand)}
.ps-root .ac-chip b{color:var(--sand-d);font-weight:400;margin-left:6px}
.ac-srch{position:relative;flex:0 0 auto}
.ps-root .ac-srch input{background:transparent;border:1px solid var(--line);color:var(--cream); font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:9px 14px;min-width:200px}
.ps-root .ac-srch input::placeholder{color:#606870}
.ac-fam{margin-top:clamp(44px,6vw,76px);scroll-margin-top:70px}
.ac-fam__head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.ps-root .ac-fam__e{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-d)}
.ac-fam__t{font-family:var(--disp);font-size:clamp(24px,3vw,38px);margin-top:12px}
.ps-root .ac-fam__s{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-top:8px}
.ps-root .ac-fam__d{font-size:14px;color:#9aa2a9;margin-top:12px;max-width:64ch}
.ac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.ac-i{display:block}
.ac-i__img{display:block;width:100%;aspect-ratio:340/676;object-fit:cover;object-position:center; background:#20252a;box-shadow:0 0 0 1px var(--line)}
.ps-root .ac-i__n{font-size:12.5px;font-weight:500;letter-spacing:.04em;margin-top:10px;color:var(--cream)}
.ps-root .ac-i__s{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:#8d959c;margin-top:5px;line-height:1.45}
.ps-root .ac-i__f{color:var(--sand-d)}
.ps-root .ac-empty{display:none;margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
/* ---------- карточки коллекций (хаб) ---------- */ .ac-cards{display:grid;grid-template-columns:1fr;gap:1px;background-color:var(--ink);margin-top:44px}
.ac-card{display:block;padding:26px 24px 28px;box-shadow:0 0 0 1px var(--line);transition:.2s}
.ac-card:hover{background:var(--ink-2)}
.ps-root .ac-card__code{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-d)}
.ac-card__t{font-family:var(--disp);font-size:30px;margin-top:12px}
.ps-root .ac-card__s{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-top:8px}
.ps-root .ac-card__d{font-size:14px;color:#9aa2a9;margin-top:14px;min-height:63px}
.ac-card__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:18px}
.ac-card__strip img{display:block;width:100%;aspect-ratio:1/1.6;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.ps-root .ac-card__go{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-top:20px}
@media (min-width:560px){ .ac-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:680px){ .ps-facts{grid-template-columns:repeat(4,1fr)} .ps-facts__i{padding-right:18px} .ps-zones{grid-template-columns:repeat(2,1fr)} .ps-terms{grid-template-columns:repeat(2,1fr)} .ps-form{grid-template-columns:1fr 1fr} .ps-fld--full,.ps-form__go{grid-column:span 2} .ac-cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .ac-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1024px){ .ps-zones{grid-template-columns:repeat(3,1fr)} .ps-terms{grid-template-columns:repeat(4,1fr)} .ps-cta__grid{grid-template-columns:.9fr 1.1fr} .ac-cards{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1240px){ .ac-grid{grid-template-columns:repeat(6,1fr)} }

/* End */
/* /upload/project/css/project-ac.css?178515858613308 */
