/* Плитки «Варианты» на карточке товара (docs/product-variants.md §4).

   Значения — токены темы с запасными: плагин не должен разваливаться на
   другой теме. Плитка 3:4, как фото каталога; фото каталога сверху несут
   инфографику, поэтому кадр сдвинут вниз (`object-position`). */

.auras-variants{margin:2px 0 0}

.auras-variants__title{
  margin:0 0 10px;
  font:var(--text-body-sm, 400 13px/1.45 sans-serif);
  font-weight:var(--fw-semibold, 600);
  color:var(--text-strong, #1C225E);
}

.auras-variants__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.auras-variants__list > li{flex:none}

.auras-variants__o{
  position:relative;
  display:block;
  width:60px;
  height:80px;
  border-radius:var(--r-sm, 8px);
  background:var(--tone-sky, #EEF2FB);
  box-shadow:inset 0 0 0 1px var(--border-subtle, #E1E8F7);
  transition:var(--t-control, all .15s ease-out);
}

.auras-variants__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 70%;
  border-radius:inherit;
}

a.auras-variants__o:hover{box-shadow:inset 0 0 0 1px var(--border-strong, #9AA6C4);transform:translateY(-1px)}
a.auras-variants__o:focus-visible{outline:3px solid var(--focus-ring, rgba(76,128,236,.42));outline-offset:2px}

/* Текущий: кольцо с белым зазором — читается и на светлом, и на тёмном фото. */
.auras-variants__o.is-current{box-shadow:0 0 0 2px var(--n-0, #fff),0 0 0 4px var(--auras-navy, #1C225E)}

/* Нет в наличии: бледно и с диагональю, но остаётся ссылкой. */
.auras-variants__o.is-out .auras-variants__img{opacity:.38;filter:grayscale(.6)}
.auras-variants__o.is-out::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--n-400, #9AA6C4) calc(50% - 1px),var(--n-400, #9AA6C4) calc(50% + .5px),transparent calc(50% + .5px));
}

/* До 768 — одна строка с прокруткой пальцем. Отрицательные поля выводят ленту
   к краям экрана, `scroll-padding` держит первую плитку на линии текста. */
@media (max-width:767px){
  .auras-variants__list{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--au-page-pad, 16px);
    margin:-4px calc(-1 * var(--au-page-pad, 16px));
    padding:4px var(--au-page-pad, 16px);
  }
  .auras-variants__list::-webkit-scrollbar{display:none}
  .auras-variants__list > li{scroll-snap-align:start}
}