/* =====================================================================
   V4 → dev2: основа (12.10.2026). Источник: V4 styles/evolved-tealyra.css и v4-skin.css.
   В V4 правила висели на обёртке .v4-skin — здесь её роль у .tygh-content (середина страницы).
   Подключается после стилей темы (templates/common/styles.tpl), минуя LESS.
   Откат: убрать <link> в styles.tpl.
   ===================================================================== */
:root {
  --tl-primary: #0F5C45;
  --tl-cta: #008556;
  --tl-cta-hover: #006B45;
  --tl-gold: #B8934A;
  --tl-gold-light: #D9BE85;
  --tl-cream: #F7F3EA;
  --tl-surface: #FFFFFF;
  --tl-soft: #F4F6F5;
  --tl-ink: #1E2421;
  --tl-muted: #6E746F;
  --tl-border: #E3E7E5;
  --tl-sale: #B3261E;
  /* Шрифты как у Apple: SF Pro, где есть, иначе Inter / Inter Tight; меню — Barlow Condensed */
  --v4-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  --v4-cond: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Helvetica Neue", sans-serif;
  --v4-menu: "Barlow Condensed", "Arial Narrow", sans-serif;
}

/* ---------- 1. Цвета и подложки ---------- */
html body, .tygh-content { background: #FFFFFF !important; }
.tygh-content { color: var(--tl-ink); }
.tygh-content a { color: var(--tl-cta-hover); }
.tygh-content a:hover { color: var(--tl-primary); }
.tygh-content .ty-breadcrumbs, .tygh-content .ty-breadcrumbs a { color: var(--tl-muted) !important; }
.tygh-content .ty-breadcrumbs__current { color: var(--tl-ink) !important; }
.tygh-content hr, .tygh-content .ty-product-filters__block, .tygh-content .ty-cart-content__product,
.tygh-content table td, .tygh-content table th { border-color: var(--tl-border) !important; }
.tygh-content .ty-product-filters__wrapper, .tygh-content .ty-dropdown-box__content,
.tygh-content .ty-cart-content, .tygh-content .ty-account, .tygh-content .ty-blog-post {
  background: var(--tl-surface) !important; border-color: var(--tl-border) !important;
}
.tygh-content .ty-sidebox { background: var(--tl-soft); border: 0 !important; border-radius: 22px; padding: 14px !important; }

/* цены */
.tygh-content .ty-price, .tygh-content .ty-price-num, .tygh-content .ty-price-update { color: var(--tl-ink) !important; font-weight: 500 !important; }
.tygh-content .ty-strike, .tygh-content .ty-list-price, .tygh-content .ty-list-price *, .tygh-content .ty-strike * { color: var(--tl-muted) !important; }
.tygh-content .ty-save-price, .tygh-content .ty-price-saved, .tygh-content .ty-discount-label__item { color: var(--tl-sale) !important; }

/* ошибки — одна красная */
.tygh-content .ty-error-text, .tygh-content .cm-failed-label, .tygh-content .text-error,
.tygh-content .ty-qty-out-of-stock { color: var(--tl-sale) !important; }
.tygh-content .cm-failed-field, .tygh-content input.cm-failed-field { border-color: var(--tl-sale) !important; }

/* звёзды — золото */
.tygh-content .ty-stars i, .tygh-content [class*="ty-icon-star"] { color: var(--tl-gold) !important; }

/* ---------- 2. Шрифты ---------- */
body { -webkit-font-smoothing: antialiased; }
.tygh-content :is(div, p, a, label, td, th, li, input, button, select, textarea, bdi, strong, b, em, small, h4, h5),
.tygh-content span:not([class*="icon"]) { font-family: var(--v4-sans) !important; letter-spacing: -.01em; }
.tygh-content h1, .tygh-content h2, .tygh-content h3, .tygh-content .ty-mainbox-title,
.tygh-content .ty-product-block-title, .tygh-content .ty-blog-post__title, .tygh-content .ty-checkout__title {
  font-family: var(--v4-cond) !important; font-weight: 600 !important; color: var(--tl-ink) !important;
  text-transform: none !important; letter-spacing: -.01em !important;
}
.tygh-content .ty-mainbox-title, .tygh-content h1 { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.08 !important; margin: 6px 0 18px !important; }
/* заглавные в кнопках, вкладках, фильтрах — убраны (меню шапки — пункт 2) */
.tygh-content .ty-btn, .tygh-content button, .tygh-content .ty-tabs__a, .tygh-content .ty-tabs__item,
.tygh-content .ty-breadcrumbs, .tygh-content .ty-sidebox__title, .tygh-content .ty-product-filters__title,
.tygh-content .ty-dropdown-box__title { text-transform: none !important; letter-spacing: 0 !important; }
.tygh-content .ty-sidebox__title, .tygh-content .ty-product-filters__title {
  font-family: var(--v4-cond) !important; font-weight: 600 !important; color: var(--tl-primary) !important; font-size: 17px !important;
}

/* ---------- 3. Кнопки, метки, поля ---------- */
.tygh-content .ty-btn {
  border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important;
  padding: 10px 20px !important; height: auto !important; line-height: 1.2 !important; transition: background .15s, color .15s;
}
.tygh-content .ty-btn__primary, .tygh-content .ty-btn__add-to-cart, .tygh-content .ty-btn__big,
.tygh-content .cm-proceed-checkout, .tygh-content .ty-btn__secondary.cm-submit {
  background: var(--tl-cta) !important; border: 1px solid var(--tl-cta) !important; color: #fff !important;
}
.tygh-content .ty-btn__primary:hover, .tygh-content .ty-btn__add-to-cart:hover, .tygh-content .ty-btn__big:hover,
.tygh-content .cm-proceed-checkout:hover { background: var(--tl-cta-hover) !important; border-color: var(--tl-cta-hover) !important; }
.tygh-content .ty-btn__secondary:not(.cm-submit), .tygh-content .ty-btn__tertiary, .tygh-content .ty-btn__text {
  background: transparent !important; border: 1px solid var(--tl-gold) !important; color: var(--tl-ink) !important;
}
.tygh-content .ty-btn__secondary:not(.cm-submit):hover, .tygh-content .ty-btn__tertiary:hover { background: rgba(184,147,74,.12) !important; }

/* сортировка — вкладки с подчёркиванием */
.tygh-content .ty-sort-buttons-container .ty-btn, .tygh-content .ty-sort-button {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 10px 2px !important;
  color: #777 !important; font-weight: 700 !important; border-bottom: 3px solid transparent !important; margin-right: 18px !important;
}
.tygh-content .ty-sort-buttons-container .active, .tygh-content .ty-sort-button.active {
  color: var(--tl-primary) !important; border-bottom-color: var(--tl-primary) !important; background: none !important;
}

/* страницы — круглые */
.tygh-content .ty-pagination__item, .tygh-content .ty-pagination__btn {
  border-radius: 999px !important; min-width: 38px; height: 38px; line-height: 38px !important; padding: 0 10px !important;
}
.tygh-content .ty-pagination__selected { background: var(--tl-primary) !important; color: #fff !important; border-radius: 999px; }

/* метки: New — зелёная, Premium/Bestseller — золото, Sale — красная */
.tygh-content .ty-product-labels__item, .tygh-content .ty-discount-label, .ty-product-grid-label {
  border-radius: 4px !important; text-transform: none !important; font-family: var(--v4-sans) !important; font-weight: 500 !important;
}
.tygh-content .ty-product-labels__item[class*="new"], .ty-product-grid-label.green { background: var(--tl-primary) !important; color: var(--tl-cream) !important; }
.tygh-content .ty-product-labels__item[class*="best"], .tygh-content .ty-product-labels__item[class*="premium"],
.ty-product-grid-label.blue, .ty-product-grid-label.gold, .ty-product-grid-label.yellow, .ty-product-grid-label.orange { background: var(--tl-gold) !important; color: var(--tl-ink) !important; }
.tygh-content .ty-product-labels__item[class*="sale"], .tygh-content .ty-discount-label,
.ty-product-grid-label.red, .ty-product-grid-label:not(.blue):not(.green):not(.gold):not(.yellow):not(.orange):not(.label-icon) { background: var(--tl-sale) !important; color: #fff !important; }
.tygh-content .ty-product-labels__item *, .tygh-content .ty-discount-label * { color: inherit !important; }

/* поля */
.tygh-content .ty-input-text, .tygh-content input[type="text"], .tygh-content input[type="email"],
.tygh-content input[type="password"], .tygh-content input[type="tel"], .tygh-content input[type="number"],
.tygh-content select, .tygh-content textarea {
  background: var(--tl-surface) !important; border: 1px solid var(--tl-border) !important; border-radius: 10px !important;
  color: var(--tl-ink) !important; box-shadow: none !important;
}
.tygh-content input:focus, .tygh-content select:focus, .tygh-content textarea:focus { border-color: var(--tl-cta) !important; }
.tygh-content .ty-control-group__title { font-weight: 700 !important; font-size: 13px !important; text-transform: none !important; color: var(--tl-ink) !important; }

/* фокус виден всегда */
.tygh-content a:focus-visible, .tygh-content button:focus-visible, .tygh-content .ty-btn:focus-visible,
.tygh-content input:focus-visible, .tygh-content select:focus-visible, .tygh-content textarea:focus-visible {
  outline: 2px solid var(--tl-cta) !important; outline-offset: 2px !important;
}

/* Масштаб (12.10.2026, слово владельца: «масштабирование довольно крупное», образец — V4 и davidstea).
   Старая тема на экранах шире 1760px ставит body класс «zoom widthScreenNNNN» и увеличивает всю страницу
   (на 1920 — в 1,2 раза). V4 не увеличивает: возвращаем 1. Скрипт темы vs.js читает zoom с body —
   получит 1 и свои поправки размеров не включит. */
body.zoom, body[class*="widthScreen"] { zoom: 1 !important; }

/* 17.10.2026, слово владельца («подсветка органик на листике … показывать везде, независимо от правил и локации; листик — по правилам»):
   у значка-листика подсказка со словом на языке страницы (data-v4tip = v4_organic): компьютер — при наведении, телефон — по нажатию (tabindex) */
[data-v4tip] { position: relative !important; overflow: visible !important; cursor: help; outline: none; transition: box-shadow .15s, filter .15s; }
[data-v4tip]:hover, [data-v4tip]:focus { filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(0, 133, 86, .35) !important; }
[data-v4tip]::after { content: attr(data-v4tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; padding: 6px 9px; border-radius: 6px;
  background: #0F5C45; color: #fff; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity .15s, transform .15s; }
[data-v4tip]:hover::after, [data-v4tip]:focus::after { opacity: 1; transform: none; }