/* ------------------------------------------------------------------ Подтверждение возраста (18+) для гостей — см. inc/age-verify.php ------------------------------------------------------------------ */ /* Снятие блюра после подтверждения: класс html.age-verified ставит ранний скрипт в или age-verify.js. Селекторы повторяют места, где блюр включается в base.css / single-product.css / header.css. */ html.age-verified .product-cart_blur, html.age-verified .product-blur { display: none !important; } html.age-verified .product-cart_blur + img, html.age-verified .product-mini_pic.blur img, html.age-verified .product-medium_pic.blur img, html.age-verified .product-fix_pic.blur img, html.age-verified .empty-product_pic.blur img, html.age-verified .product-gallery_big.blur, html.age-verified .product-gallery_thumb.blur .product-gallery_thumb__pic img, html.age-verified .product-variant__pic img._blur, html.age-verified .result-product-img.blur img { filter: none !important; } html.age-verified .product-cart_pic[data-href] { cursor: pointer; } /* Кнопка на оверлее вместо прежней ссылки «Авторизация» */ .product-cart_blur__btn.js-age-verify, .product-blur__btn.js-age-verify { cursor: pointer; white-space: nowrap; padding: 11px 16px; max-width: 100%; box-sizing: border-box; text-align: center; } /* Ховер: тёмный текст на жёлтом (как у .btn-style3), фиксируем явно, чтобы никакое правило для ссылок не перекрасило текст. */ .product-cart_blur__btn.js-age-verify:hover, .product-cart_blur__btn.js-age-verify:focus-visible, .product-blur__btn.js-age-verify:hover, .product-blur__btn.js-age-verify:focus-visible { color: #232126; background: #ffc839; border-color: #ffc839; } .product-cart_blur__btn.js-age-verify:focus-visible, .product-blur__btn.js-age-verify:focus-visible { outline: 2px solid #232126; outline-offset: 2px; } @media (max-width: 768px) { /* В узкой карточке (2 колонки на 320–360px) оверлей ~117px: даём кнопке переноситься на две строки, иначе вылезает за оверлей. */ .product-cart_blur__btn.js-age-verify { white-space: normal; font-size: 12px; line-height: 1.2; padding: 8px 10px; } } /* Окно ввода даты рождения (внешний вид наследует .popup-age-verification) */ .age-verify-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999990; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; } .age-verify-wrap.visible { opacity: 1; } .age-verify-wrap[hidden] { display: none !important; } .age-verify-wrap .age-verify-popup { max-height: calc(100vh - 28px); overflow: auto; } body.age-verify-open { overflow: hidden; } .age-verify-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #A0A3AA; cursor: pointer; padding: 0; } .age-verify-close:hover { color: #232126; } .age-verify-label { display: block; color: #232126; font-size: 14px; font-weight: 700; line-height: 17px; margin-bottom: 8px; } .age-verify-input { display: block; width: 100%; box-sizing: border-box; height: 52px; padding: 0 18px; border: 1px solid #EEF0F5; border-radius: 10px; background: #fff; color: #232126; font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.2s; } .age-verify-input:focus { border-color: #FFC839; } .age-verify-wrap.is-denied .age-verify-input { border-color: #E23D3D; } .age-verify-error { min-height: 18px; margin: 6px 0 12px; color: #E23D3D; font-size: 13px; line-height: 18px; } .age-verify-popup .popup-buttons.age-verify-buttons { flex-direction: column; gap: 10px; margin-bottom: 15px; } .age-verify-popup .popup-buttons .age-verify-btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; color: #232126; line-height: 120%; transition: 0.3s; } /* Ховер как у кнопки «Мне 18 лет или старше» в плашке: белый текст на тёмном. Правило нужно явно: базовое .btn-accept:hover из popup-age-verification.css перебивалось нашим color выше (одинаковая специфичность, наш файл позже). */ .age-verify-popup .popup-buttons .age-verify-btn:hover, .age-verify-popup .popup-buttons .age-verify-btn:focus-visible { color: #fff; background: #232126; box-shadow: 0px 8px 11px 0px rgba(0, 0, 0, 0.06); } .age-verify-popup .popup-buttons .age-verify-btn:focus-visible { outline: 2px solid #FFC839; outline-offset: 2px; } .age-verify-popup .popup-buttons .age-verify-btn--max { background: #fff; border: 1px solid #232126; padding-block: 20px; } .age-verify-popup .popup-buttons .age-verify-btn--max:hover, .age-verify-popup .popup-buttons .age-verify-btn--max:focus-visible { background: #232126; color: #fff; } .age-verify-close:focus-visible { outline: 2px solid #FFC839; outline-offset: 2px; border-radius: 6px; }