/* Tile detail gallery + catalog card photos. Brand tokens from main.css. */
.tp-detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 36px; }
.tp-detail-layout > .tp-detail { max-width: none; margin-bottom: 0; }
.tp-detail dl { margin: 0 0 16px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0; font-size: .92rem; }
.tp-detail dt, .tp-detail dd { padding: 8px 0; border-bottom: 1px solid var(--color-border); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tp-detail dt { color: var(--color-gray); font-weight: 400; padding-right: 16px; }
.tp-detail dd { color: var(--color-dark); font-weight: 600; }

.tg { min-width: 0; position: sticky; top: 90px; }
.tg__stage { margin: 0; background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius); overflow: hidden; }
.tg__main { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #f3f1ed; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.tg__main[hidden] { display: none; }
.tg__img { display: block; width: 100%; height: 100%; transition: transform .45s ease; }
.tg--product .tg__img { object-fit: contain; padding: 18px; }
.tg--interior .tg__img { object-fit: cover; }
.tg__zoom { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; background: var(--color-dark); color: #fff; font: 500 .75rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius); opacity: .88; }
@media (hover: hover) and (pointer: fine) { .tg__main:hover .tg__img { transform: scale(1.04); } }
.tg__main:focus-visible, .tg__thumb:focus-visible, .tg__close:focus-visible, .tg__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.tg__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; font-size: .78rem; color: var(--color-gray); border-top: 1px solid var(--color-border); }
.tg__caption span:first-child { font-family: var(--font-head); color: var(--color-dark); letter-spacing: .05em; }
.tg__error { margin: 0; padding: 28px 18px; background: #fbf3f2; color: var(--color-primary-h); font-size: .9rem; border-left: 4px solid var(--color-primary); }
.tg__empty { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 240px; padding: 28px; background: repeating-linear-gradient(45deg, #f6f4f0 0 14px, #efece6 14px 28px); border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-gray); font-size: .9rem; }
.tg__empty strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--color-dark); font-weight: 500; }

.tg__thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.tg__thumb { display: block; flex: none; width: 76px; height: 58px; padding: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: border-color var(--transition); }
.tg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg--product .tg__thumb img { object-fit: contain; padding: 4px; }
.tg__thumb[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.tg__thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: .65rem; color: var(--color-gray); }

.tg__dialog { width: min(1100px, 94vw); max-width: 94vw; max-height: 92dvh; padding: 0; border: 0; border-radius: var(--radius); background: #1a1918; color: #f1eee9; overflow: hidden; }
.tg__dialog::backdrop { background: rgba(17, 17, 17, .82); }
.tg__dialog-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding: 48px 56px 16px; }
.tg__dialog-img { display: block; max-width: 100%; max-height: calc(92dvh - 120px); object-fit: contain; }
.tg__dialog-img[hidden] { display: none; }
.tg__error--dialog { background: transparent; color: #f1eee9; border-left-color: var(--color-primary); }
.tg__dialog-caption { margin: 12px 0 0; font-size: .82rem; color: #bdb8b0; text-align: center; overflow-wrap: anywhere; }
.tg__close, .tg__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); background: rgba(17,17,17,.6); color: #fff; font-size: 1.6rem; line-height: 1; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); }
.tg__close:hover, .tg__nav:hover { background: var(--color-primary); border-color: var(--color-primary); }
.tg__close { top: 6px; right: 6px; }
.tg__nav { top: 50%; transform: translateY(-50%); }
.tg__nav--prev { left: 6px; }
.tg__nav--next { right: 6px; }
html.tg-lock { overflow: hidden; }

/* Catalog / related cards */
.tp-catalog__photo { position: relative; display: block; margin: -20px -20px 4px; aspect-ratio: 3 / 2; background: #f3f1ed; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.tp-catalog__photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .45s ease; }
.tp-catalog__photo--interior img { object-fit: cover; padding: 0; }
@media (hover: hover) and (pointer: fine) { .tp-catalog__photo:hover img { transform: scale(1.05); } }
.tp-catalog__photo:focus-visible { outline: 3px solid var(--color-dark); outline-offset: -3px; }
.tp-catalog__photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; text-align: center; font-size: .8rem; color: var(--color-gray); background: repeating-linear-gradient(45deg, #f6f4f0 0 12px, #efece6 12px 24px); }
.tp-catalog__photo-filter { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .85rem; color: var(--color-dark); cursor: pointer; }
.tp-catalog__photo-filter input { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.tp-catalog__photo-filter input:disabled + span, .tp-catalog__photo-filter:has(input:disabled) { color: var(--color-gray); cursor: not-allowed; }

@media (max-width: 991px) {
  .tp-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tg { position: static; }
}
@media (max-width: 575px) {
  .tg__dialog-inner { padding: 52px 8px 12px; }
  .tg__nav { top: auto; bottom: 8px; transform: none; width: 38px; height: 38px; }
  .tg__dialog-inner:has(.tg__nav) { padding-bottom: 56px; }
  .tg__thumb { width: 64px; height: 50px; }
  .tp-detail dl { grid-template-columns: minmax(0, 1fr); }
  .tp-detail dt { padding-bottom: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tg__img, .tp-catalog__photo img { transition: none !important; transform: none !important; }
}