/* Palette from НПП Элмет logo: aqua + white, red only for motion */

body[data-skin] {
  --elmet-aqua: #8ed4e1;
  --elmet-aqua-deep: #3ea0b0;
  --elmet-ink: #1c5d68;
  --ink: var(--elmet-ink);
  --elmet-graphite: var(--elmet-aqua-deep);
  --fill: var(--elmet-aqua-deep);
  --muted: #4a7d86;
}

body[data-theme="editorial"][data-skin] {
  background: var(--bg);
  color: var(--ink);
}

/* 1 · Воздух */
body[data-skin="air"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #d5eef2;
}

/* 2 · Клиника */
body[data-skin="clinic"] {
  --bg: #e7f6f9;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #c5e6ed;
}

/* 3 · Шильд — шапка как на логотипе */
body[data-skin="plate"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #c5e6ed;
}

.skin-pick { display: none; }
.hover-pick { display: none; }
.skin-pick em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--elmet-ink, #1c5d68);
  margin-right: 6px;
}
.skin-pick button {
  appearance: none;
  border: 1px solid var(--line, #d5eef2);
  background: #fff;
  color: var(--elmet-ink, #1c5d68);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.skin-pick button small {
  display: none;
}
.skin-pick button.on {
  background: var(--elmet-aqua, #8ed4e1);
  border-color: var(--elmet-aqua, #8ed4e1);
  box-shadow: inset 0 -2px 0 var(--elmet-red);
}

body[data-skin] .top,
body[data-skin] .mainhead {
  background: #fff;
  color: var(--ink);
}
body[data-skin="clinic"] .top,
body[data-skin="clinic"] .mainhead {
  background: #f4fcfd;
}
body[data-skin="plate"] .top,
body[data-skin="plate"] .mainhead,
body[data-skin="plate"] .quick {
  background: var(--elmet-aqua);
  color: #fff;
  border: 0;
}
body[data-skin="plate"] .top { color: #fff; }
body[data-skin="plate"] .top .wrap { color: #fff; }
body[data-skin="plate"] .logo-teal { display: none; }
body[data-skin="plate"] .logo-white { display: block; }
body[data-skin="air"] .logo-white,
body[data-skin="clinic"] .logo-white { display: none; }
body[data-skin="air"] .logo-teal,
body[data-skin="clinic"] .logo-teal { display: block; }
body[data-skin="plate"] .search input {
  background: rgba(255, 255, 255, .9);
  border-color: transparent;
}
body[data-skin] .search-live {
  background: #fff;
  color: var(--elmet-ink, #1c5d68);
}
body[data-skin="plate"] .icon-btn {
  background: #fff;
  border-color: transparent;
  color: var(--elmet-ink);
}
body[data-skin="plate"] .icon-btn:hover {
  background: #fff;
  color: var(--elmet-ink);
}
body[data-skin="plate"] .skin-pick { background: #fff; color: var(--elmet-ink); }

body[data-skin] .logo img {
  height: 56px;
  width: auto;
  max-width: 240px;
}
body[data-skin] .logo { gap: 0; }

body[data-skin] .catbtn,
body[data-theme="editorial"][data-skin] .catbtn {
  background-color: transparent !important;
  color: var(--elmet-ink) !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  -webkit-text-fill-color: currentColor;
}
body[data-skin="plate"] .catbtn,
body[data-theme="editorial"][data-skin="plate"] .catbtn {
  color: #fff !important;
  --glint-base: #fff;
  --glint-hi: rgba(28, 93, 104, 0.38);
  --glint-blend: multiply;
  -webkit-text-fill-color: currentColor;
}

body[data-skin] .cart,
body[data-theme="editorial"][data-skin] .cart,
body[data-skin] .pill.price,
body[data-skin] .nameplate {
  background: #fff !important;
  color: var(--elmet-ink) !important;
  border: 1px solid var(--elmet-aqua-deep) !important;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: none !important;
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}
body[data-skin] .nameplate.add,
body[data-theme="editorial"][data-skin] .nameplate.add,
body[data-skin] .buy-acts .nameplate.ghost,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost {
  background: transparent !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}
body[data-skin] .nameplate.add::after,
body[data-theme="editorial"][data-skin] .nameplate.add::after,
body[data-skin] .buy-acts .nameplate.ghost::after,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost::after {
  content: none !important;
}
body[data-skin] .qty {
  border: 0;
  background: transparent;
  clip-path: none;
}
body[data-skin] .qty button,
body[data-skin] .qty input {
  color: var(--elmet-ink);
  background: transparent;
}
body[data-skin] .btn:hover,
body[data-theme="editorial"][data-skin] .btn:hover {
  background: #fff;
  color: var(--elmet-ink);
  border-color: var(--elmet-aqua-deep);
  box-shadow: none;
  transform: none;
}

body[data-skin] .banner-copy .hero-acts .btn,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn,
body[data-skin] .banner-copy .hero-acts .btn.ghost,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn.ghost {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  color: var(--elmet-ink) !important;
  --glint-base: var(--elmet-ink);
  --glint-hi: rgba(255, 255, 255, 0.55);
  --glint-blend: overlay;
}
body[data-skin] .catbtn:hover,
body[data-theme="editorial"][data-skin] .catbtn:hover,
body[data-skin] .banner-copy .hero-acts .btn:hover,
body[data-skin] .banner-copy .hero-acts .btn.ghost:hover,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn:hover,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn.ghost:hover,
body[data-skin] .buy-acts .nameplate.ghost:hover,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost:hover {
  color: var(--glint-base, var(--elmet-ink)) !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  animation: none !important;
}
body[data-skin] .catbtn:hover::after,
body[data-theme="editorial"][data-skin] .catbtn:hover::after,
body[data-skin] .banner-copy .hero-acts .btn:hover::after,
body[data-skin] .banner-copy .hero-acts .btn.ghost:hover::after,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn:hover::after,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn.ghost:hover::after,
body[data-skin] .buy-acts .nameplate.ghost:hover::after,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost:hover::after {
  content: attr(data-glint) !important;
  display: block !important;
  inset: unset !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 36%,
    var(--glint-hi) 50%,
    transparent 64%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  mix-blend-mode: var(--glint-blend, overlay) !important;
  animation: cat-text-glint 0.9s linear !important;
}
body[data-skin] .buy-acts .nameplate.ghost,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost {
  --glint-base: var(--elmet-ink);
  --glint-hi: rgba(255, 255, 255, 0.7);
  --glint-blend: overlay;
}
body[data-skin] .buy-acts .nameplate.ghost:hover,
body[data-theme="editorial"][data-skin] .buy-acts .nameplate.ghost:hover {
  transform: scale(1.06) !important;
}
body[data-skin] .pdp-cart-btn,
body[data-theme="editorial"][data-skin] .pdp-cart-btn {
  background: var(--elmet-ink) !important;
  color: #fff !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: 0 8px 18px rgba(28, 93, 104, .22) !important;
  border-radius: 999px !important;
  font-family: Manrope, sans-serif !important;
}
body[data-skin] .pdp-cart-btn:hover,
body[data-theme="editorial"][data-skin] .pdp-cart-btn:hover {
  background: var(--elmet-aqua-deep) !important;
  color: #fff !important;
  transform: scale(1.02) !important;
}
body[data-skin] .act-btn,
body[data-theme="editorial"][data-skin] .act-btn {
  clip-path: none !important;
  box-shadow: none !important;
}
body[data-skin] .act-btn.act-one,
body[data-theme="editorial"][data-skin] .act-btn.act-one {
  background: #fff !important;
  color: var(--elmet-ink) !important;
  border: 1.5px solid var(--elmet-aqua-deep) !important;
}
body[data-skin] .act-btn.act-kp,
body[data-theme="editorial"][data-skin] .act-btn.act-kp {
  background: var(--elmet-aqua-deep) !important;
  color: #fff !important;
  border: 1.5px solid var(--elmet-aqua-deep) !important;
}
body[data-skin] .cart {
  padding: 10px 16px 12px !important;
  position: relative;
}
body[data-skin] .cart::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 14px;
  bottom: 5px;
  height: 1.5px;
  background: var(--elmet-red);
}
body[data-skin] .pill.stock,
body[data-skin] .pill.stock.ok,
body[data-skin] .pill.stock.wait {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--elmet-ink) !important;
  border: 1px solid rgba(28, 93, 104, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 6px rgba(20, 58, 66, 0.2);
  clip-path: none !important;
}
body[data-skin] .icon-btn .n {
  background: transparent !important;
  color: var(--elmet-ink) !important;
  border: 0 !important;
  box-shadow: none;
  border-radius: 0;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

body[data-skin] .btn,
body[data-theme="editorial"][data-skin] .btn,
body[data-skin] .tz-form .btn {
  background: #fff;
  color: var(--elmet-ink);
  border: 1px solid var(--elmet-aqua-deep);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: none;
  position: relative;
  font-family: "Source Serif 4", serif;
}

body[data-skin] .sheet-form .btn,
body[data-theme="editorial"][data-skin] .sheet-form .btn {
  background: var(--elmet-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  box-shadow: 0 8px 18px rgba(28, 93, 104, .22) !important;
  font-family: Manrope, sans-serif !important;
}
body[data-skin] .sheet-form .btn:hover,
body[data-theme="editorial"][data-skin] .sheet-form .btn:hover {
  background: var(--elmet-aqua-deep) !important;
  color: #fff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 10px 22px rgba(28, 93, 104, .28) !important;
}
body[data-skin] .tz-form .btn,
body[data-theme="editorial"][data-skin] .tz-form .btn {
  background: #fff !important;
  color: var(--elmet-ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
  font-family: Manrope, sans-serif !important;
}
body[data-skin] .tz-form .btn:hover,
body[data-theme="editorial"][data-skin] .tz-form .btn:hover {
  background: #f3fbfd !important;
  color: var(--elmet-ink) !important;
  transform: scale(1.02) !important;
}

body[data-skin] .tz-card {
  background: var(--elmet-aqua-deep);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--elmet-red);
}
body[data-skin] .tz-copy p { color: rgba(255, 255, 255, .88); }
body[data-skin] .field input,
body[data-skin] .field textarea {
  color: var(--elmet-ink);
}

body[data-skin] .kicker,
body[data-theme="editorial"][data-skin] .kicker {
  color: var(--elmet-ink);
  border-bottom-color: var(--elmet-red);
}
body[data-skin] .tz-copy .kicker { color: #fff; }

body[data-skin] .chip,
body[data-skin="plate"] .chip {
  background: rgba(255, 255, 255, 0.42);
  border: 0;
  border-radius: 999px;
  clip-path: none;
  color: var(--elmet-ink);
}
body[data-skin] .chip.accent {
  background: rgba(255, 255, 255, 0.62);
  border: 0;
  clip-path: none;
  box-shadow: none;
}

body[data-skin] .cat {
  background-color: var(--elmet-aqua);
}
body[data-skin] .cat-frost {
  background: rgba(255, 255, 255, .72);
}

body[data-skin] .search input {
  background: #fff;
  border-color: var(--line);
}

body[data-skin] .banner-copy h1,
body[data-skin] .banner-copy h2,
body[data-theme="editorial"][data-skin] .banner-copy h1,
body[data-theme="editorial"][data-skin] .banner-copy h2 {
  color: var(--elmet-ink, #1c5d68) !important;
  font-weight: 600;
  font-size: 22px;
}
body[data-skin] .banner-copy .kicker,
body[data-theme="editorial"][data-skin] .banner-copy .kicker {
  color: var(--elmet-aqua-deep);
  border-bottom: 0;
  padding-bottom: 0;
}
body[data-skin] .banner-copy .lead {
  color: var(--muted);
}

body[data-skin] .banner-copy .hero-acts .btn,
body[data-theme="editorial"][data-skin] .banner-copy .hero-acts .btn {
  color: var(--elmet-ink) !important;
  border: 0 !important;
}
body[data-theme="editorial"][data-skin] .s-nav {
  background: #fff;
  color: var(--elmet-ink);
}
body[data-skin] .s-dot.on {
  background: var(--elmet-aqua-deep);
  border-color: var(--elmet-aqua-deep);
  color: #fff;
  box-shadow: none;
}