/* Start:/local/components/wayoff/home.section/templates/looks_page/style.css?17801537214338*/
/* ============================================================
   Страница «Все образы» — masonry (фото разной высоты) + липкие табы.
   Токены из tokens.css. Только transform/opacity, hover за @media(hover),
   :active scale, scroll-reveal, prefers-reduced-motion.
   ============================================================ */
.wayoff-looks-page{ max-width: 1280px; margin: 0 auto; padding: var(--space-12) var(--space-5) var(--space-20); }

.wayoff-looks-page__head{ margin-bottom: var(--space-8); }
.wayoff-looks-page__eyebrow{
    font-family: var(--font-ui); font-size: var(--fs-eyebrow, 11px); font-weight: var(--fw-medium);
    text-transform: uppercase; letter-spacing: .14em; color: var(--c-muted); margin-bottom: var(--space-3);
}
.wayoff-looks-page__title{
    font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-3xl);
    line-height: 1; margin: 0 0 var(--space-3); text-transform: uppercase;
}
.wayoff-looks-page__lede{ color: var(--c-ink-2); max-width: 600px; line-height: 1.5; margin: 0; }

/* липкие табы-категории */
.wayoff-looks-page__tabs{
    position: sticky; top: 0; z-index: 40;
    display: flex; gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-4) 0; margin-bottom: var(--space-6);
    background: var(--c-bg);
}
.wayoff-looks-page__tab{
    border: 1px solid var(--c-line-2); background: var(--c-surface); color: var(--c-ink);
    border-radius: var(--r-pill); padding: 9px 16px; font-family: var(--font-ui);
    font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer;
    transition: transform 120ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.wayoff-looks-page__tab:active{ transform: scale(.96); }
.wayoff-looks-page__tab.is-on{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
@media (hover:hover) and (pointer:fine){
    .wayoff-looks-page__tab:not(.is-on):hover{ border-color: var(--c-ink); }
}

/* masonry — фото разной высоты */
.wayoff-looks-page__masonry{ columns: 3; column-gap: var(--space-5); }
.wayoff-looks-page__card{
    break-inside: avoid; margin-bottom: var(--space-5);
    position: relative; display: block; border-radius: var(--r-md); overflow: hidden;
    text-decoration: none; color: inherit;
    /* появление */
    opacity: 0; transform: translateY(14px); animation: wfLookIn 520ms var(--ease) forwards;
}
.wayoff-looks-page__img{ width: 100%; display: block; transition: transform 600ms var(--ease); }
.wayoff-looks-page__card::after{
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
    opacity: .9;
}
.wayoff-looks-page__cap{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: var(--space-5) var(--space-4) var(--space-4); color: #fff;
    display: flex; flex-direction: column; gap: 2px;
    transform: translateY(8px); opacity: 0;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.wayoff-looks-page__nm{ font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-md); }
.wayoff-looks-page__sub{ font-size: var(--text-sm); opacity: .85; }
@media (hover:hover) and (pointer:fine){
    .wayoff-looks-page__card:hover .wayoff-looks-page__img{ transform: scale(1.04); }
    .wayoff-looks-page__card:hover .wayoff-looks-page__cap{ opacity: 1; transform: none; }
}
/* на тач показываем подпись всегда (нет hover) */
@media (hover:none){
    .wayoff-looks-page__cap{ opacity: 1; transform: none; }
}

.wayoff-looks-page__card.is-hidden{ display: none; }
.wayoff-looks-page__empty{ color: var(--c-muted); padding: var(--space-10) 0; }

@keyframes wfLookIn{ to{ opacity: 1; transform: none; } }

@media (max-width: 1024px){ .wayoff-looks-page__masonry{ columns: 2; } }
@media (max-width: 560px){ .wayoff-looks-page__masonry{ columns: 1; } }

@media (prefers-reduced-motion: reduce){
    .wayoff-looks-page__card{ opacity: 1; transform: none; animation: none; }
    .wayoff-looks-page__img, .wayoff-looks-page__cap, .wayoff-looks-page__tab{ transition-duration: .001ms; }
}

/* End */
/* /local/components/wayoff/home.section/templates/looks_page/style.css?17801537214338 */