/* Brier — внутренние страницы (каталог, карточка, лукбуки, тексты). Подключается после brier.css.
   Разметку пишет tools/brier_build.py. */

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; letter-spacing: .06em; color: rgba(0, 0, 0, .55); }
.nav-link.is-active { color: #000; box-shadow: 0 1px 0 #000; }

/* ---------- каталог ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .5rem .9rem; font-size: .75rem; letter-spacing: .06em; border: 1px solid rgba(0, 0, 0, .18); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: #0a0a0a; }
.chip.is-on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pgrid > * { border-right: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.pgrid > [hidden] { display: none; }
.pgrid-empty { grid-column: 1 / -1; padding: 3rem 2rem; border: 0; font-size: .875rem; color: rgba(0, 0, 0, .65); }
.card-photo { position: relative; }
.card-flag { position: absolute; left: .75rem; top: .75rem; z-index: 1; padding: .25rem .6rem; background: #f4f2eb; font-size: .6875rem; letter-spacing: .06em; color: rgba(0, 0, 0, .7); }

/* ---------- карточка товара ---------- */
.t-product { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.1; }
@media (min-width: 1024px) { .t-product { font-size: clamp(1.75rem, 2.7vw, 3rem); } }

/* на телефоне галерея листается вбок, на десктопе — сетка в две колонки */
.gallery { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; background: rgba(0, 0, 0, .1); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-item { position: relative; flex: 0 0 86%; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; background: #e3ded5; cursor: zoom-in; }
.gallery-item:only-child { flex-basis: 100%; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .gallery { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .gallery-item:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 8 / 7; }
  .gallery-item:first-child:nth-last-child(odd) img { object-position: 50% 18%; }
}

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.size { position: relative; cursor: pointer; }
.size input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.size > span { display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 .75rem; border: 1px solid rgba(0, 0, 0, .22); font-size: .8125rem; transition: background-color .2s, color .2s, border-color .2s; }
.size:hover > span { border-color: #0a0a0a; }
.size input:checked + span { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.size input:focus-visible + span { outline: 2px solid #0a0a0a; outline-offset: 2px; }
.size.is-out { cursor: default; }
.size.is-out input { cursor: default; }
.size.is-out > span, .size.is-out:hover > span { color: rgba(0, 0, 0, .4); text-decoration: line-through; border: 1px dashed rgba(0, 0, 0, .22); }

.fold { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, .14); }
.fold summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: '+'; font-size: 1.125rem; line-height: 1; }
.fold[open] summary::after { content: '–'; }

/* ---------- лукбуки ---------- */
.look-card { display: block; background: #eae7e1; }
.look-photo { aspect-ratio: 4 / 5; overflow: hidden; background: #e3ded5; }
.look-photo--wide { aspect-ratio: 4 / 3; }
.look-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease-out; }
.look-card:hover .look-photo img { transform: scale(1.05); }
.look-body { padding: 1rem 1rem 1.25rem; }
.look-title { font-size: 1.0625rem; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .look-body { padding: 1.25rem 1.5rem 1.5rem; }
  .look-title { font-size: 1.25rem; }
}

.frames { columns: 1; column-gap: .5rem; }
@media (min-width: 640px) { .frames { columns: 2; } }
.frame { display: block; margin-bottom: .5rem; break-inside: avoid; background: #e3ded5; cursor: zoom-in; }
.frame img { display: block; width: 100%; height: auto; }

.pager { display: grid; grid-template-columns: 1fr 1fr; background: #f4f2eb; }
.pager-link { display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem 1.25rem; min-width: 0; transition: background-color .2s; }
.pager-link:hover { background: #eae7e1; }
.pager-link--next { align-items: flex-end; text-align: right; border-left: 1px solid rgba(0, 0, 0, .1); }
@media (min-width: 640px) { .pager-link { padding: 2rem 2.5rem; } }

/* ---------- текстовые страницы ---------- */
.side-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.side-link { padding: .5rem .9rem; font-size: .75rem; letter-spacing: .06em; border: 1px solid rgba(0, 0, 0, .18); color: rgba(0, 0, 0, .7); transition: color .2s, border-color .2s; }
.side-link:hover { color: #000; border-color: #0a0a0a; }
.side-link.is-active { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
@media (min-width: 1024px) {
  .side-nav { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .side-link, .side-link.is-active { padding: .65rem 0; font-size: .875rem; letter-spacing: 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .1); background: none; color: rgba(0, 0, 0, .6); }
  .side-link.is-active { color: #000; }
}

.prose { max-width: 44rem; }
.prose-block { margin-top: 2.75rem; }
.prose-block h2 { margin-bottom: 1rem; }
.prose-block p, .prose-block li { font-size: .9375rem; line-height: 1.7; color: rgba(0, 0, 0, .76); }
.prose-block p + p, .prose-block p + ul, .prose-block p + ol, .prose-block ul + p, .prose-block ol + p { margin-top: .8rem; }
.prose-block ul, .prose-block ol { padding-left: 1.25rem; }
.prose-block ul { list-style: disc; }
.prose-block ol { list-style: decimal; }
.prose-block li + li { margin-top: .45rem; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 52rem; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats dt { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; }
.stats dd { margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: rgba(0, 0, 0, .65); }

/* ---------- просмотр фото ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 18, 16, .95); color: #fff; }
.lightbox::backdrop { background: rgba(20, 18, 16, .6); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-btn { position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; color: #fff; background: rgba(20, 18, 16, .45); transition: background-color .2s; }
.lightbox-btn:hover { background: rgba(20, 18, 16, .8); }
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.lightbox-close { top: .75rem; right: .75rem; }
.lightbox-prev { left: .75rem; top: 50%; translate: 0 -50%; }
.lightbox-next { right: .75rem; top: 50%; translate: 0 -50%; }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }