/* Start:/local/components/wayoff/home.section/templates/looks_detail/style.css?17832695229090*/
/* ============================================================
   Детальная страница образа (V6): фото с нумерованными хотспотами ↔
   карточки товаров (наведение связывает подсветкой) + «Похожие образы».
   Токены из tokens.css. Только transform/opacity, hover за @media(hover),
   :active scale, prefers-reduced-motion.
   ============================================================ */
.wayoff-look{ max-width: 1200px; margin: 0 auto; padding: var(--space-10) var(--space-5) var(--space-20); }

.wayoff-look__crumb{ font-size: var(--text-sm); color: var(--c-muted); margin-bottom: var(--space-6); }
.wayoff-look__crumb a{ color: var(--c-muted); text-decoration: none; transition: color 160ms var(--ease); }
@media (hover:hover) and (pointer:fine){ .wayoff-look__crumb a:hover{ color: var(--c-ink); } }

.wayoff-look__split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }

/* фото + хотспоты */
.wayoff-look__ph{ position: relative; border-radius: var(--r-lg); overflow: hidden; align-self: start; background: var(--c-bg); }
.wayoff-look__img{ display: block; width: 100%; height: auto; }
.wayoff-look__hot{
    position: absolute; transform: translate(-50%,-50%);
    width: 30px; height: 30px; border-radius: var(--r-pill); background: rgba(255,255,255,.94);
    display: flex; align-items: center; justify-content: center; cursor: default; z-index: 3;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--c-ink);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.wayoff-look__hot::after{ content: ''; position: absolute; inset: -7px; border-radius: var(--r-pill); border: 2px solid rgba(255,255,255,.55); animation: wfLookPulse 2.6s var(--ease) infinite; }
.wayoff-look__hot.is-lit{ transform: translate(-50%,-50%) scale(1.28); background: var(--c-ink); color: #fff; box-shadow: 0 0 0 6px rgba(26,26,26,.12); }
@keyframes wfLookPulse{ 0%{ transform: scale(.7); opacity: .85; } 70%{ transform: scale(1.5); opacity: 0; } 100%{ opacity: 0; } }

/* состав */
.wayoff-look__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-look__title{ font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-3xl); line-height: 1; margin: 0 0 var(--space-4); text-transform: uppercase; }
.wayoff-look__lede{ color: var(--c-ink-2); line-height: 1.55; margin: 0 0 var(--space-6); }

.wayoff-look__cards{ display: flex; flex-direction: column; gap: var(--space-3); }
.wayoff-look__it{
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.wayoff-look__it.is-lit{ border-color: var(--c-ink); box-shadow: 0 8px 22px rgba(26,26,26,.07); }
.wayoff-look__nidx{
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-pill);
    background: var(--c-warm); color: var(--c-ink); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm);
    transition: background 160ms var(--ease), color 160ms var(--ease);
}
.wayoff-look__it.is-lit .wayoff-look__nidx{ background: var(--c-ink); color: #fff; }
.wayoff-look__it-link{ display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; transition: transform 140ms var(--ease); }
.wayoff-look__it-link:active{ transform: scale(.99); }
.wayoff-look__th{ width: 58px; height: 58px; flex: 0 0 auto; border-radius: var(--r-sm); background-color: #fff; background-size: contain; background-position: center; background-repeat: no-repeat; }
.wayoff-look__it-txt{ display: flex; flex-direction: column; min-width: 0; }
.wayoff-look__br{ font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
.wayoff-look__nm{ font-size: var(--text-md); font-weight: var(--fw-medium); margin: 2px 0; }
.wayoff-look__pr{ font-size: var(--text-base); font-weight: var(--fw-bold); }
.wayoff-look__add{
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-pill);
    border: 1px solid var(--c-line-2); background: var(--c-surface); color: var(--c-ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
}
.wayoff-look__add:active{ transform: scale(.92); }
@media (hover:hover) and (pointer:fine){ .wayoff-look__add:hover{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); } }
.wayoff-look__add svg{ width: 18px; height: 18px; }
/* обе иконки — слой по центру кнопки, кроссфейд между «+» и «✓» */
.wayoff-look__add-i, .wayoff-look__add-o{
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    transition: opacity 160ms var(--ease), transform 220ms var(--ease);
}
.wayoff-look__add-o{ opacity: 0; transform: scale(.5); }
.wayoff-look__add.is-added{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.wayoff-look__add.is-added .wayoff-look__add-i{ opacity: 0; transform: scale(.5); }
.wayoff-look__add.is-added .wayoff-look__add-o{ opacity: 1; transform: none; }

.wayoff-look__total{ display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-6) 0 var(--space-4); }
.wayoff-look__total b{ font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-xl); }
.wayoff-look__buy{
    display: flex; align-items: center; justify-content: center; width: 100%;
    background: var(--c-ink); color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em;
    font-size: var(--text-md); padding: 17px; border-radius: var(--r-sm);
    transition: transform 140ms var(--ease), background 180ms var(--ease);
}
.wayoff-look__buy:active{ transform: scale(.98); }
@media (hover:hover) and (pointer:fine){ .wayoff-look__buy:hover{ background: var(--c-ochre); } }

/* похожие */
.wayoff-look__related{ margin-top: var(--space-16); }
.wayoff-look__rel-head{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-5); }
.wayoff-look__rel-title{ font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-2xl); text-transform: uppercase; margin: 0; }
.wayoff-look__all{ font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 160ms var(--ease); }
.wayoff-look__all svg{ width: 17px; height: 17px; transition: transform 200ms var(--ease); }
@media (hover:hover) and (pointer:fine){ .wayoff-look__all:hover{ color: var(--c-ochre); } .wayoff-look__all:hover svg{ transform: translateX(4px); } }
.wayoff-look__rel-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.wayoff-look__rel{ position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4; text-decoration: none; }
.wayoff-look__rel-img{ position: absolute; inset: 0; background-color: var(--c-warm); background-size: cover; background-position: center; transition: transform 600ms var(--ease); }
.wayoff-look__rel::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%); }
.wayoff-look__rel-nm{ position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-md); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
@media (hover:hover) and (pointer:fine){ .wayoff-look__rel:hover .wayoff-look__rel-img{ transform: scale(1.05); } }

@media (max-width: 900px){
    .wayoff-look__split{ grid-template-columns: 1fr; gap: var(--space-6); }
    .wayoff-look__rel-grid{ grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
    .wayoff-look__hot::after{ animation: none; }
    .wayoff-look__hot, .wayoff-look__it, .wayoff-look__add svg, .wayoff-look__rel-img{ transition-duration: .001ms; }
}

.wayoff-look__th{ overflow:hidden; }
.wayoff-look__th-i{ width:100%; height:100%; object-fit:contain; display:block; }
.wayoff-look__rel-img{ overflow:hidden; }
.wayoff-look__rel-i{ width:100%; height:100%; object-fit:cover; display:block; }

/* End */
/* /local/components/wayoff/home.section/templates/looks_detail/style.css?17832695229090 */