/* TAIGA glued-panel mini profile selector — 2026-09-06 v2
 * Dedicated high-legibility treatment for the first-screen profile picker.
 * The source profile images remain admin-managed; this layer crops/zooms them
 * specifically for the small selector without changing the large profile cards.
 */

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profiles{
  grid-template-columns:118px repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  padding:10px!important;
  border-radius:23px!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile{
  min-width:0!important;
  padding:6px 8px 7px!important;
  gap:4px 6px!important;
  border-radius:14px!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb{
  height:57px!important;
  min-height:57px!important;
  border-radius:9px!important;
  position:relative!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.12) 0 10%,rgba(255,255,255,.035) 38%,transparent 66%),
    linear-gradient(145deg,#303732 0%,#202b26 54%,#151b18 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 5px 14px rgba(19,28,24,.12)!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb::after,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb::after,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb::after{
  content:"";
  position:absolute;
  left:13%;
  right:13%;
  bottom:8px;
  height:7px;
  border-radius:50%;
  background:rgba(0,0,0,.26);
  filter:blur(6px);
  z-index:-1;
  pointer-events:none;
}

/* The admin images contain generous whitespace. Zoom the visible cross-section,
 * not the file canvas, so tongue/groove geometry is readable at a glance. */
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb img,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb img,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:translateY(-5%) scale(2.35)!important;
  transform-origin:50% 50%!important;
  filter:
    brightness(1.16)
    contrast(1.18)
    saturate(.90)
    drop-shadow(0 1px 0 rgba(255,255,255,.28))
    drop-shadow(0 6px 7px rgba(0,0,0,.50))!important;
  transition:transform .18s ease,filter .18s ease!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(36,54,47,.34)!important;
  box-shadow:0 8px 18px rgba(24,37,31,.10)!important;
}
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"]:hover .hx-thumb img,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"]:hover .hx-thumb img,
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"]:hover .hx-thumb img{
  transform:translateY(-5%) scale(2.48)!important;
  filter:
    brightness(1.19)
    contrast(1.20)
    saturate(.92)
    drop-shadow(0 1px 0 rgba(255,255,255,.30))
    drop-shadow(0 7px 8px rgba(0,0,0,.54))!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile.is-active{
  border-color:var(--taiga-kp-green)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:
    inset 0 -3px 0 var(--taiga-kp-gold),
    0 8px 22px rgba(24,37,31,.12)!important;
}
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile.is-active .hx-thumb{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 0 0 1px rgba(183,154,100,.38),
    0 7px 16px rgba(19,28,24,.15)!important;
}

body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile>span:not(.hx-thumb){
  font-size:9.5px!important;
  line-height:1.05!important;
  letter-spacing:-.01em!important;
}
body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile>b{
  font-size:16px!important;
  line-height:1!important;
}

/* Low-height desktop: keep the hero compact but retain readable geometry. */
@media (min-width:1101px) and (max-height:840px){
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb{
    height:52px!important;
    min-height:52px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb img{
    transform:translateY(-5%) scale(2.25)!important;
  }
}

@media (max-width:900px){
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profiles{
    padding:9px!important;
    gap:8px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile{
    flex-basis:158px!important;
    padding:6px 8px 7px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb{
    height:55px!important;
    min-height:55px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb img{
    transform:translateY(-5%) scale(2.22)!important;
  }
}

@media (max-width:620px){
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile{
    flex-basis:150px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb{
    height:52px!important;
    min-height:52px!important;
  }
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="classic"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="karelian"] .hx-thumb img,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile[data-value="hidden"] .hx-thumb img{
    transform:translateY(-4%) scale(2.10)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profile,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-thumb img{
    transition:none!important;
  }
}