/* Start:/local/templates/beauty_rose/template_styles.css?179266188815923*/
/* beauty_rose: правки под Битрикс поверх css/main.css (копия вёрстки, её здесь не править).
   Подключается ядром после main.css (ShowCSS). */

/* Плашка предпросмотра нового дизайна (design_preview.php), убрать при запуске шаблона */
.bo-preview-bar{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;padding:6px 16px;background:var(--ink);color:#fff;font-size:13px;line-height:1.4}
.bo-preview-bar a{color:#fff;text-decoration:underline}

/* Верхнее меню (компонент bitrix:menu, шаблон beauty_top): текущий раздел */
.topbar__nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* «Обране» (модуль promosite.favorites): фото в списке и кнопка под заголовком товара на штатной карточке */
.favs .pitem__media{align-items:center}
.favs .fav-img{max-width:100%;max-height:100%;object-fit:contain}
.fav-product{margin:8px 0 16px}
.fav-product .fav-product__btn{display:inline-flex;align-items:center;gap:8px;width:auto;height:44px;padding:0 16px;font:inherit;font-size:14px;cursor:pointer}

/* Главная: картинка категории (зоны) в плитке — заполняет рамку, обрезка по центру */
.cat__photo{overflow:hidden}
.cat__photo img{display:block;width:100%;height:100%;object-fit:cover}

/* Карточка товара (шаблон catalog.section/beauty_cards): фото товара в рамке макета */
.product-card__media{align-items:center;overflow:hidden}
.product-card__media img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}

/* Главная, первый экран: фото бренда недели или коллаж из фото товаров бренда (include/home_hero.php) */
.hero__media{overflow:hidden}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__collage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4%;padding:6%}
.hero__collage img{display:block;width:28%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}
.hero__collage img:nth-child(2){width:34%}
.hero__focus{z-index:1}
@media (min-width:768px){.hero__collage{padding:6% 6% 26%}}
@media (min-width:1200px){.hero__collage{padding:8% 7% 24%}}

/* Строка списка товаров (бренд, линия: .pitem) — фото товара в рамке макета; старая цена */
.pitem__media{overflow:hidden}
.pitem__media img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pitem__price s{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}


/* Страница товара (catalog.element/beauty): настоящие фото в галерее, нет в наличии, форма отзыва форума */
.gallery__main{align-items:center;overflow:hidden}
.gallery__stage{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.gallery__stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.gallery__stage .ph-product{align-self:flex-end;margin-bottom:20px}
.gallery__thumbs button{align-items:center;overflow:hidden}
.gallery__thumbs img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
/* Отзывы: кнопки под списком, форма нового отзыва (forum.topic.reviews/beauty) */
.reviews__actions [hidden]{display:none}
.review-form__form{display:grid;gap:16px;max-width:640px;margin-top:20px;padding:20px;border:1px solid var(--line)}
.review-form__form[hidden]{display:none}
.review-form__title{margin:0;font-size:18px;font-weight:600}
.review-form__error{margin:0;padding:10px 12px;border-left:3px solid var(--red);background:var(--paper);font-size:14px}
.review-form__captcha-row{display:flex;gap:10px;align-items:stretch}
.review-form__captcha-row img{flex:none;width:180px;height:52px;object-fit:contain;border:1px solid var(--line);background:var(--white)}
.review-form__captcha-row input{flex:1;min-width:0}
.review-form__note{margin:0;font-size:13px;color:var(--muted)}
.review-form__actions{display:flex;flex-wrap:wrap;gap:10px}
.review-form__actions .btn{min-height:48px;padding:0 20px;font-size:15px}
.review-form__done{margin-top:20px}
@media (max-width:767px){.review-form__form{padding:16px}.review-form__actions{flex-direction:column}.review-form__captcha-row img{width:140px}}

/* Подсказки поиска: подпись «нет в наличии» (была в main.css шаблона, в вёрстке её нет) */
.suggest__na{display:block;font-size:12px;color:var(--muted)}

/* Наличие на своём складе (резерв для будущего учёта склада): «В наявності» с зелёной точкой — класс --yes
   у .buy__stock / .pitem__stock / .citem__stock; сейчас шаблон выводит «Доступно до замовлення» (серая точка) */
.buy__stock--yes .dot,.pitem__stock--yes .dot,.citem__stock--yes .dot{background:var(--success);box-shadow:none}

/* Метка «Немає в наявності» в галерее скрыта (объём доступен) — плашка скидки остаётся видимой */
.gallery__main .stock-badge[hidden] + .gallery__badge:not([hidden]){display:block}

/* Окна: фото товара вместо заглушки */
.modal__photo{overflow:hidden;align-items:center}
.modal__photo img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}


/* Товар без наличия в плитке и списке: старая цена не нужна (в вёрстке её нет, в плитке она упирается в колокольчик) */
.pitem--out .pitem__price s,.product-card--out .product-card__price s{display:none}

/* «Базова ціна … · +N%» — только для тех, кому видна цена BASE (страница товара и списки) */
.buy__base{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.pitem__base{display:block;font-size:12px;line-height:1.35;font-weight:400;color:var(--muted);white-space:nowrap}


/* «Базова ціна» в плитке: отдельная строка под ценой и кнопкой (в одной строке с ними не помещается) */
[data-catalog-view="grid"] .pitem__buy{flex-wrap:wrap}
[data-catalog-view="grid"] .pitem__base{order:5;flex:1 1 100%;white-space:normal;margin-top:6px}
/* то же в списке: на телефоне цена и строка не помещаются в одну линию; на широком экране строка может переноситься */
.pitem__base{white-space:normal}
@media (max-width:767px){
  .pitem__buy{flex-wrap:wrap}
  .pitem__base{order:5;flex:1 1 100%;margin-top:4px}
}

/* Корзина (sale.basket.basket в beauty_rose): фото в строке, применённые промокоды, обновление после действия */
.citem__media{overflow:hidden;align-items:center}
.citem__media img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.promo-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.promo-list__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;color:var(--muted)}
.promo-list__item .mono{color:var(--ink)}
.promo-list__item.is-ok span:nth-child(2){color:var(--success)}
.promo-list__item .link-btn{margin-left:auto;font-size:13px}
[data-cart][aria-busy="true"] .cart__items,[data-cart][aria-busy="true"] .summary{opacity:.6;transition:opacity .2s}


/* Окна и меню Битрикса на публичной части (правка товара из «Эрмитажа», панель): общие правила main.css
   (картинки блоком, border-box, высота строки 1.5) ломают их вёрстку. Возвращаем поведение браузера по умолчанию
   с минимальной специфичностью (:where + тег): это отменяет только сброс шаблона, правила Битрикса по классам главнее */
:where(#bx-panel,.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu,.popup-window) img,:where(#bx-panel,.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu,.popup-window) svg{display:inline;vertical-align:middle}
:where(#bx-panel,.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu,.popup-window),
:where(#bx-panel,.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu,.popup-window) :where(*,*::before,*::after){box-sizing:content-box}
:where(.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu,.popup-window){line-height:normal}
:where(.bx-core-window,.bx-core-adm-dialog,.bx-core-popup-menu) a:hover{color:revert}

/* Страница зоны (include/page_zone.php): длинный список брендов в фильтре прокручивается; описание узла — как лид */
.fgroup__scroll{max-height:300px;overflow-y:auto;padding-right:4px}
.page-head__lead p{margin:0 0 8px}
.page-head__lead p:last-child{margin-bottom:0}

/* Оглавление ингредиентов и проблем (include/page_dict.php): плитки как «Популярні бренди», INCI мелко под названием */
.tiles--dict{margin:0}
.tile__note{display:block;margin:2px 0 6px;font-size:12px;color:var(--muted);font-weight:400}


/* Результаты поиска: блок, выбранный в поле «где искать» (where=brands / ingredients), — первым и с красной подписью */
.found-brands + .found-brands{margin-top:8px}
.found-brands.is-current .eyebrow{color:var(--red)}

/* «Скинути все» в ряду выбранных фильтров — ссылка (в макете кнопка): выравнивание по центру ряда чипов */
.chosen__reset{display:inline-flex;align-items:center}


/* Поиск: вкладки «Товари / Бренди / Статті»; фото в карточке статьи */
.linktabs + .found-brands,.container > .linktabs{margin-bottom:12px}
.acard__media{overflow:hidden}
.acard__media img{display:block;width:100%;height:100%;object-fit:cover}
/* статья без картинки: текст на всю ширину и анонс виден (в макете анонс только у главной статьи) */

/* Статьи (include/articles.php, news «web20»): фото в карточке и в статье; статья без картинки — типографская
   обложка (бренд или тема крупно на розовом фоне, подпись «Стаття BeautyOnline») */
.acard__media img{display:block;width:100%;height:100%;object-fit:cover}
.acard__cover{flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;padding:12px;background:var(--blush);overflow:hidden;text-align:left}
.acard__cover-word{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--red-deep);overflow-wrap:anywhere}
.acard__cover-note{font-size:9px;line-height:1.3;color:var(--red-deep);opacity:.7}
.acard--lead .acard__cover{padding:28px 32px}
.acard--lead .acard__cover-word{font-size:40px;-webkit-line-clamp:2}
.acard--lead .acard__cover-note{font-size:11px}
@media (min-width:768px){
  .acard__cover{padding:20px 22px}
  .acard__cover-word{font-size:30px}
  .acard__cover-note{font-size:11px}
  .acard--lead .acard__cover-word{font-size:64px}
}
.art-photo{overflow:hidden;background:var(--white)}
.art-photo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.art-head__cat a{color:inherit}

/* Статьи: рубрика-ссылка выбрана (aria-current вместо aria-pressed у кнопок макета); компактная первая статья —
   фото фиксированной высоты, товар вписан в рамку (фото статей — снимки товаров на белом) */
.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.articles .chip-row{margin-bottom:8px}
.acard__media{position:relative}
.acard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8px}
.acard--lead .acard__media img{padding:20px}
@media (min-width:768px){
  .acard--lead .acard__media{min-height:0;height:320px}
  .acard--lead .acard__body{padding:28px 32px 28px 0}
  .acard--lead b{font-size:26px}
  .acard--lead .acard__cover-word{font-size:48px}
}

/* «Доставка і оплата»: предупреждение о задержках «Нової пошти» (выключатель — include/settings.php, delivery_notice) */
.notice--delivery{align-items:flex-start;margin:20px 0 0;padding:14px 16px;line-height:1.5;color:var(--ink)}
.notice--delivery .icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--red)}
.notice--delivery p{margin:0}


/* Подарок при покупке (правила корзины «Подарок», карта модуля promosite.catalogautomation): плашка «Подарунок»
   на карточках и в галерее товара; блок .buy-gift на странице товара — на телефоне после блока покупки, с 768px —
   под галереей (блок покупки «липкий» и занимает обе строки сетки, иначе под фото пусто, а колонка покупки длиннее экрана) */
.product-card__badge--gift,.pitem__badge--gift,.gallery__badge--gift{display:inline-flex;align-items:center;gap:4px;background:var(--blush);color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.product-card__badge--gift .icon,.pitem__badge--gift .icon,.gallery__badge--gift .icon{width:13px;height:13px;stroke-width:2}
.buy-gifts{display:grid;gap:12px;margin-top:20px}
.buy-gift{padding:16px;background:var(--blush)}
.buy-gift__title{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:600;color:var(--red)}
.buy-gift__title .icon{width:20px;height:20px}
.buy-gift__text{margin:6px 0 0;font-size:14px;line-height:1.45}
.buy-gift__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.buy-gift__list a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px;background:var(--white);color:var(--ink);text-decoration:none}
.buy-gift__list a:hover .buy-gift__name{text-decoration:underline}
.buy-gift__media{display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.buy-gift__media img{max-width:100%;max-height:100%;object-fit:contain}
.buy-gift__media .ph-bottle{width:14px;height:34px}
.buy-gift__name{font-size:13px;line-height:1.35}
.buy-gift__price{font-size:13px;color:var(--muted);white-space:nowrap}
.buy-gift__note{margin:10px 0 0;font-size:13px;color:var(--muted)}
@media (min-width:768px){
  .product--gift > .gallery{grid-column:1;grid-row:1}
  .product--gift > .buy{grid-column:2;grid-row:1 / span 2}
  .product--gift > .buy-gifts{grid-column:1;grid-row:2;margin-top:0}
  .buy-gift{padding:20px}
  .buy-gift__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* End */
/* /local/templates/beauty_rose/template_styles.css?179266188815923 */