/* ============================================================
   Переопределения поверх шаблона Livora.
   Файл проектный — при обновлении custom.css не затирается.
   Подключается последним в layouts/app.blade.php
   ============================================================ */

/* Затемнение hero.
   Шаблонные 50% съедают фактуру тёмного фото. 32% + лёгкий
   градиент сохраняют картинку и держат контраст под белым текстом. */
.hero::before {
    background: linear-gradient(
        180deg,
        rgba(22, 22, 22, 0.42) 0%,
        rgba(22, 22, 22, 0.28) 45%,
        rgba(22, 22, 22, 0.50) 100%
    );
    opacity: 1;
}

/* Шапка внутренних страниц — тот же баннер и то же затемнение,
   что на главной. Шаблонные 60% на своём фото уводят его в чёрный. */
.page-header {
    background-image: url('../images/hero-bg-image.jpg');
}

.page-header::before {
    background: linear-gradient(
        180deg,
        rgba(22, 22, 22, 0.42) 0%,
        rgba(22, 22, 22, 0.28) 45%,
        rgba(22, 22, 22, 0.50) 100%
    );
    opacity: 1;
}

/* Карточка товара: фото каталога снято на белом фоне и в разных пропорциях.
   Шаблонный object-fit: cover срезает края у широких моек, поэтому
   вписываем целиком и добиваем квадрат белой подложкой. */
.product-item-image figure {
    background-color: #fff;
    border-radius: 20px;
}

.product-item-image img {
    object-fit: contain;
    padding: 12px;
}

/* Названия товаров во всех карточках — не больше двух строк с многоточием.
   Названия из каталога длинные («Набор из 4-х кухонных мисок Gourmet из
   нержавеющей стали 18/10, стальной, серия Кухонные аксессуары, WMF») и
   ломают сетку. min-height держит цену и бренд на одной линии, когда
   у соседней карточки название в одну строку. */
.product-item-content .product-item-title,
.best-seller-item-content h3,
.arrivals-item-list .arrivals-item-content h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4em;
}

.product-item-content .product-item-title,
.best-seller-item-content h3 {
    min-height: 2.8em;
}

/* У новинок подпись абсолютная и прижата к низу плитки: фиксированная
   высота подняла бы короткое название на строку вверх. */

/* Бренд под названием товара. В шаблоне на этом месте .product-item-rating
   со звёздами — рейтинга у нас нет, поэтому свой класс с теми же метриками. */
.product-item-brand {
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    color: var(--accent-color);
}

@media only screen and (max-width: 767px) {
    .product-item-brand {
        font-size: 14px;
    }
}

/* Плитки новинок: фото товаров сняты на белом фоне, вписываем целиком.
   Шаблонный тёмный градиент под названием на светлом фото давал серую
   заливку — убираем его, название пишем тёмным по белой подложке. */
.arrivals-item:not(.highlighted-item) .arrivals-item-image figure {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

/* Затенение под названием — в бежевом тоне секции вместо тёмного:
   низ плитки уходит в цвет блока, а не в серое пятно поверх фото. */
.arrivals-item:not(.highlighted-item) .arrivals-item-image figure::before {
    background: linear-gradient(
        180deg,
        rgba(248, 245, 239, 0) 55%,
        rgba(248, 245, 239, 0.92) 85%,
        #F8F5EF 100%
    );
}

.arrivals-item:not(.highlighted-item) .arrivals-item-image figure img {
    object-fit: contain;
    padding: 16px 16px 70px;
}

.arrivals-item-list .arrivals-item .arrivals-item-content h3,
.arrivals-item-list .arrivals-item .arrivals-item-content h3 a {
    color: var(--primary-color);
}

/* Хиты продаж — фото товаров на белом фоне, вписываем целиком. */
.best-seller-item-image figure {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.best-seller-item-image img {
    object-fit: contain;
    padding: 12px;
}

/* Stories: для категорий без ролика показываем фото. В шаблоне на этом месте
   только <video>, поэтому размеры картинки задаём здесь — по тем же правилам. */
.story-item-video figure {
    display: block;
    height: 100%;
}

.story-item-video img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    object-fit: cover;
}

/* ---------- Избранное ---------- */

/* Кнопка избранного в карточке товара: в шаблоне это ссылка, здесь
   Livewire-компонент с button, поэтому повторяем стили. */
.product-item-action ul li .product-item-wishlist-action {
    display: flex;
}

/* Товар в избранном — иконка залита акцентом. */
.product-item-action ul li button.is-active {
    background-color: var(--accent-color);
}

.product-item-action ul li button.is-active img {
    filter: brightness(0) invert(1);
}

/* Та же кнопка на странице товара — там рамка-пилюля, а не круг. */
.product-single-action ul li button {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid var(--divider-color);
    border-radius: 50px;
    background: none;
    transition: all 0.4s ease-in-out;
}

.product-single-action ul li button:hover,
.product-single-action ul li button.is-active {
    background: var(--accent-color);
}

.product-single-action ul li button img {
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
}

.product-single-action ul li button:hover img,
.product-single-action ul li button.is-active img {
    filter: brightness(0) invert(1);
}

/* Действия в строке избранного: перенос в корзину и удаление. В шаблоне
   там одна ссылка-корзина, поэтому раскладку задаём здесь. */
.wishlist-item-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wishlist-item-action button {
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
    color: var(--error-color);
    transition: all 0.4s ease-in-out;
}

.wishlist-item-action button img {
    max-width: 24px;
}

.wishlist-item-action button:hover {
    opacity: 0.7;
}

.wishlist-item-action button i {
    font-size: 24px;
    color: inherit;
}

/* Название товара в избранном ведёт на карточку — цвет как у текста. */
.wishlist-item-title p a {
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.wishlist-item-title p a:hover {
    color: var(--accent-color);
}

/* Кнопки под таблицей избранного стоят в ряд. */
.wishlist-content-button {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Таблица избранного на время запроса. */
.wishlist-item-table.is-busy {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* ---------- Корзина ---------- */

/* Счётчик товаров у иконки корзины в шапке. */
.header-cart-link {
    position: relative;
    display: block;
}

.header-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--accent-color);
    color: var(--white-color);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Кнопка «в корзину» в карточке товара: в шаблоне все действия — ссылки,
   а тут Livewire-компонент с button, поэтому повторяем стили ссылки.
   Обёртка — корневой элемент компонента, не должна ломать раскладку списка. */
.product-item-action ul li .product-item-cart-action {
    display: flex;
}

.product-item-action ul li button {
    height: 40px;
    width: 40px;
    padding: 0;
    border: none;
    background-color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.product-item-action ul li button:hover {
    background-color: var(--primary-color);
}

.product-item-action ul li button img {
    width: 100%;
    max-width: 20px;
    transition: all 0.4s ease-in-out;
}

.product-item-action ul li button:hover img {
    filter: brightness(0) invert(1);
}

/* Форма добавления на странице товара занимает место .product-single-content-body
   из шаблона, поэтому раскладку flex переносим на неё. */
.product-single-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Название товара в корзине ведёт на карточку. В шаблоне это простой текст,
   а базовый a{} цвет не задаёт — браузер рисовал синюю ссылку. Наследуем цвет
   текста, на наведении подсвечиваем акцентом, как в остальных блоках. */
.cart-item-title p a {
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.cart-item-title p a:hover {
    color: var(--accent-color);
}

/* Шаблон рисует декоративный крестик поверх превью через ::before, но он
   не кликается. Удаление у нас — рабочая кнопка справа от суммы. */
.cart-item-image::before {
    display: none;
}

/* Кнопка удаления строки. */
.cart-item-remove button {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-color);
    font-size: 18px;
    line-height: 1;
    transition: all 0.4s ease-in-out;
}

.cart-item-remove button:hover {
    color: var(--error-color);
}

/* Уведомление после добавления в корзину. Создаётся cart.js в конце body,
   поэтому позиционируется от окна. */
.cart-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    max-width: 320px;
    padding: 16px 22px;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 15px;
    line-height: 1.4em;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.cart-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cart-toast.is-error {
    background-color: var(--error-color);
}

/* Пока запрос в полёте кнопка недоступна — показываем это. */
.product-item-action ul li button:disabled,
.product-single-add-form button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Таблица корзины на время пересчёта: гасим, чтобы старые суммы не читались
   как актуальные. */
.cart-item-table.is-busy {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* Сообщение о результате действия с корзиной. */
.cart-status-message {
    margin-bottom: 30px;
    padding: 14px 20px;
    border-radius: 10px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* ---------- Страница товара ---------- */

/* Характеристики идут группами из источника («Основные характеристики»,
   «Габариты и вес»), в шаблоне таблица одна — разводим блоки по вертикали. */
.product-additional-content .product-additional-info-table + .product-additional-content-title {
    margin-top: 50px;
}

/* Подсказка к характеристике. У таблицы шаблона white-space: nowrap, из-за
   которого длинное пояснение растянуло бы строку на пол экрана. */
.product-additional-info-table table tr td small {
    display: block;
    max-width: 460px;
    margin-top: 6px;
    /* pre-line, а не normal: в подсказке остались переносы строк из
       источника — они разделяют абзацы пояснения. */
    white-space: pre-line;
    font-size: 14px;
    line-height: 1.5em;
    color: var(--text-color);
}

/* Описание из источника приходит в HTML и содержит собственные заголовки
   и таблицы — держим их в границах таба. */
.product-tab-item-content img,
.product-tab-item-content table {
    max-width: 100%;
    height: auto;
}

.product-tab-item-content table {
    display: block;
    overflow-x: auto;
}

/* ---------- Каталог ---------- */

/* Фильтр по цене. В шаблоне на этом месте чекбоксы «Material», поэтому
   пара полей «от / до» своя. */
.product-category-price-range {
    display: flex;
    gap: 10px;
}

.product-category-price-range .form-control {
    min-width: 0;
}

/* Брендов больше сотни — список прокручивается внутри блока фильтра,
   иначе сайдбар вытягивается на несколько экранов. */
.product-category-scroll-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 10px;
}

.product-category-scroll-list::-webkit-scrollbar {
    width: 4px;
}

.product-category-scroll-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
}

/* Активное значение в переключателе «товаров на странице»: у шаблона
   состояния для него не предусмотрено, ссылки все одинаковые. */
.product-category-result-pagination ul li.active a {
    color: var(--primary-color);
    font-weight: 600;
}

/* Кнопки-заглушки в пагинации на крайних страницах. */
.page-pagination .pagination li.disabled span {
    opacity: 0.4;
    cursor: default;
}

/* Отзывы: картинка — вырезанная композиция без фона и квадратная.
   Шаблонный cover при соотношении 1/0.906 срезал её сверху и снизу. */
.testimonials-image img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Кнопка в блоке с фоновым видео: у .section-title нижнего отступа нет,
   поэтому она липнет к заголовку. */
.intro-video .hero-content-btn {
    margin-top: 30px;
}

/* Футер без блока подписки: три колонки ссылок собираем по центру,
   иначе space-between растягивает их по всей ширине контейнера. */
.footer-links-box {
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Копирайт остался один в строке — центрируем вместо space-between. */
.footer-copyright-box {
    justify-content: center;
    text-align: center;
}

/* Страница брендов. Готового блока в шаблоне нет: в about.html только
   бегущая строка на пять логотипов, под указатель на 138 марок не годится. */
.page-brands {
    padding: 100px 0;
}

/* Полоса витринных логотипов — статичная сетка, без анимации тикера.
   Сетка, а не flex: пропорции логотипов гуляют от 2.6:1 до 6.5:1, и при
   space-between широкие съедали бы место у остальных. Одинаковая ячейка
   выравнивает их по оптическому размеру. */
.brands-featured-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--divider-color);
}

.brands-featured-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 10px;
}

.brands-featured-row img {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}

.brands-featured-row a:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Колонки, а не сетка: при column-count список читается сверху вниз
   внутри колонки, как в алфавитном указателе. */
.brands-list {
    column-count: 6;
    column-gap: 30px;
}

.brands-list-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    color: var(--primary-color);
    break-inside: avoid;
    transition: all 0.3s ease-in-out;
}

.brands-list-item:hover {
    color: var(--accent-color);
}

.brands-list-count {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--text-color);
}

@media only screen and (max-width: 1200px) {
    .brands-featured-row {
        grid-template-columns: repeat(5, 1fr);
    }

    .brands-list {
        column-count: 4;
    }
}

@media only screen and (max-width: 991px) {
    .page-brands {
        padding: 80px 0;
    }

    .brands-featured-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .brands-list {
        column-count: 3;
    }
}

@media only screen and (max-width: 767px) {
    .brands-featured-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .brands-featured-row a {
        min-height: 56px;
    }

    .brands-featured-row img {
        max-height: 28px;
    }

    .brands-list {
        column-count: 2;
    }
}

/* Полоса логотипов на главной: разделитель нужен только на странице
   брендов, где под ней идёт список. */
.our-brands .brands-featured-row {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.brands-section-btn {
    margin-top: 50px;
    text-align: center;
}

/* Валидация везде серверная, а не bootstrap-validator из шаблона, поэтому
   текст ошибки лежит прямо в .help-block без вложенного списка —
   шаблонное правило красит только li. */
.help-block.with-errors {
    margin-top: 8px;
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.form-control.is-invalid {
    border-color: var(--error-color);
}

.contact-form-success {
    margin-bottom: 25px;
    padding: 16px 20px;
    border-radius: 10px;
    background-color: var(--secondary-color);
    border-left: 3px solid var(--accent-color);
}

/* Ловушка для ботов: убираем из потока, но не display:none —
   часть ботов такие поля пропускает. */
.contact-form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Логотип. Шаблонные 160px рассчитаны на короткое слово, наша надпись
   в пропорции 1650×400 при такой ширине читается мелко — на десктопе
   места хватает, поднимаем. Мобильное правило шаблона (145px) не трогаем. */
@media only screen and (min-width: 992px) {
    .navbar-brand img {
        max-width: 220px;
    }

    .footer-logo img {
        max-width: 240px;
    }
}

/* Категория в списке под ценой — в шаблоне это просто текст, ссылки там
   нет, поэтому базовый a{} без цвета отдавал браузерный синий. */
.product-single-details-list ul li a {
    color: var(--text-color);
    transition: all 0.4s ease-in-out;
}

.product-single-details-list ul li a:hover {
    color: var(--accent-color);
}

/* Переключатель рубрик над списком статей. В шаблоне такого блока нет:
   в blog.html список идёт без разделения. */
.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.blog-categories a {
    padding: 8px 20px;
    border: 1px solid var(--divider-color);
    border-radius: 50px;
    color: var(--text-color);
    font-size: 15px;
    transition: all 0.3s ease-in-out;
}

.blog-categories a:hover,
.blog-categories a.is-active {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: var(--white-color);
}

/* Рубрика и дата под текстом статьи — в шаблоне на их месте теги и
   кнопки соцсетей, которых у нас нет. */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--divider-color);
    color: var(--text-color);
}

.post-meta a {
    padding: 6px 18px;
    border-radius: 50px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.post-meta a:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
}

/* Выход в сайдбаре кабинета — в шаблоне там ссылка, у нас форма с POST. */
.my-account-sidebar-item ul li form {
    display: block;
}

.my-account-sidebar-item ul li button {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
}

/* Текущий раздел кабинета. */
.my-account-sidebar-item ul li.is-active a {
    color: var(--accent-color);
}

/* Строки итогов корзины в шаблоне идут вплотную: в оригинале между ними
   стояли блоки промокода и доставки, которые мы убрали. */
.order-summary-total + .order-summary-total {
    margin-top: 12px;
}

/* Карточка заказа в кабинете: блоки шаблона рассчитаны на отдельные
   секции страницы, подряд идут вплотную. */
.account-order-detail-box > * + * {
    margin-top: 40px;
}

.account-order-detail-box .account-dashboard-detail-box p {
    margin-bottom: 12px;
}

/* Заголовок отзыва: в шаблоне блок содержит только текст. */
.testimonial-item-content h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Trix добавляет подпись с именем файла и размером — в статьях не нужна. */
.post-content .attachment__caption {
    display: none;
}

/* Кнопки на странице ожидания оплаты: в шаблоне нет блока, который шёл бы
   следом за списком, поэтому отступ и раскладку задаём сами. */
.checkout-pending-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

/* Пояснение под вариантом доставки: в шаблоне список рассчитан только на
   пары «название — цена». */
.order-summary-shipment-info li.shipping-option-note {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    opacity: .75;
    border: 0;
    padding-top: 0;
}

/* Уведомление о cookie. В шаблоне Livora такого блока нет — раскладку и
   оформление задаём сами, опираясь на переменные custom.css. */
.site-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1100px;
    z-index: 1040;
}

.site-notice-accepted .site-notice {
    display: none;
}

.site-notice-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 28px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(22, 22, 22, .14);
}

.site-notice-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color);
}

.site-notice-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Второстепенное действие: та же геометрия кнопки, но контурная. Заливку
   даёт ::after базового .btn-default, поэтому hover остаётся общим. */
.site-notice-btn .btn-default.btn-outline {
    background: transparent;
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.site-notice-btn .btn-default.btn-outline:hover {
    color: var(--white-color);
}

@media only screen and (max-width: 767px) {
    .site-notice {
        bottom: 12px;
        width: calc(100% - 24px);
    }

    .site-notice-box {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px;
        border-radius: 16px;
    }

    .site-notice-btn .btn-default {
        flex: 1;
        text-align: center;
    }
}