/*
 * Карточка товара — одна для всего сайта (разметка: templates/product-card.blade.php; корзина: js/product-cards.js).
 * В стиле фильтра (filters.css): белая карточка с тонкой рамкой и скруглением, при наведении — жёлтая рамка и мягкая тень.
 * Плиткой: фото (избранное и сравнение — круглые кнопки на фото), оценка и код, наличие, название,
 * «Цена за …» с линией, цена и старая цена, «В корзину» → «− N +» (товар уже в корзине).
 * Списком (компьютер): фото | название, наличие, оценка и код, характеристики | цена и кнопка.
 * Корни .item / .special-item — от прежней разметки (их правила в main.css здесь перекрыты).
 */

/* ── карточка ── */
.item,
.special-item { background: #fff; border: 1px solid #EAEAEA; border-radius: 12px; box-shadow: none;
    transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) {
    .item:hover,
    .special-item:hover { border-color: #FEDC29; box-shadow: 0 6px 18px rgba(68, 92, 130, .08); }
}
.item,
.row-item-special .special-item.vc { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 12px 12px 14px; }

/* ── фото и значки ── */
.vc-media { position: relative; flex: 0 0 auto; }
.vc-img { display: block; position: relative; margin: 0 !important; padding: 100% 0 0 !important; }
.vc-img img { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; object-fit: contain; }
.vc-badges { left: 0; top: 0; }

/* избранное и сравнение — круглые кнопки в углу фото (на компьютере — при наведении на карточку) */
.vc-tools { position: absolute; top: 0; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.vc-tool { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0;
    border: 1px solid #EAEAEA; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(68, 92, 130, .08);
    transition: border-color .15s, opacity .15s; }
.vc-tool svg { width: 16px; height: 16px; margin: 0; fill: #787878; }
/* наведение — только там, где есть мышь: на телефоне после нажатия «наведение» остаётся на кнопке
   (жёлтая рамка «застревала» на ♡/⚖, серый фон — на «− / +») */
@media (hover: hover) {
    .vc-tool:hover { border-color: #FEDC29; }
}
@media (hover: hover) and (min-width: 1001px) {
    .vc-tool { opacity: 0; }
    .item:hover .vc-tool,
    .special-item:hover .vc-tool,
    .vc-tool:focus-visible,
    .vc-tool:has(svg.active) { opacity: 1; }
}

/* ── оценка и код, наличие, название ── */
.vc-info { display: flex; flex-direction: column; min-width: 0; }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 10px;
    font-size: 12px; line-height: 16px; color: #9A9A9A; }
.vc-rating { display: flex; align-items: center; gap: 4px; }
.vc-rating .stars { flex: 0 0 80px; width: 80px; height: 15px; margin: 0 !important; }
.vc-rating .stars .stars-back svg,
.vc-rating .stars .stars-front svg { width: 14px; min-width: 14px; height: 14px; margin-right: 2px; transform: none; }
.vc-rating .stars .stars-back svg { fill: #DCDFE3; }
.vc-rating .stars .stars-front svg { fill: #FEDC29; }
.vc-reviews { color: #787878; text-decoration: none; }
@media (hover: hover) {
    .vc-reviews:hover { color: #303030; }
}
.vc-code { white-space: nowrap; }

.vc-avail { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13px; line-height: 17px; font-weight: 600; color: #303030; }
.vc-avail img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.vc-avail.is-order { color: #787878; }
.vc-avail-more { display: none; }

.vc-name { min-width: 0 !important; max-width: none !important; margin: 8px 0 0 !important; padding: 0 !important; text-decoration: none !important; }
.row-item-special .vc .vc-name a,
.vc-name a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 54px;
    font-size: 14px; line-height: 18px; font-weight: 400 !important; color: #303030 !important; text-decoration: none; }
/* наведение — подчёркнуть название везде (главная, поиск, раздел плиткой и списком, карусели на странице товара):
   в старых стилях сайта есть общее «a:hover { text-decoration: none !important }», его перебивало только правило
   для раздела плиткой (.row-item-special.active .name-item a:hover) — поэтому подчёркивание было лишь там */
@media (hover: hover) {
    .vc-name a:hover { text-decoration: underline !important; }
}

/* характеристики — только «списком» */
.vc .types-item { display: none; margin-top: 10px; font-size: 13px; line-height: 19px; font-weight: 400; color: #787878; }
.vc .types-row { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vc .types-val { color: #303030; }
.vc .types-row:nth-child(n+8) { display: none; }

/* ── цена и кнопка (всегда внизу карточки) ── */
.vc-buy { margin-top: auto; padding-top: 12px; }
.vc-price-for { padding-bottom: 6px; border-bottom: 1px solid #F0F0F0; font-size: 12px; line-height: 16px; color: #787878; }
.vc-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 8px 0 12px; }
.vc-prices .price-with-cart { font-size: 20px; line-height: 24px; font-weight: 800; color: #303030; }
.vc-old { font-size: 13px; line-height: 16px; color: #9A9A9A; text-decoration: line-through; }

/* ── скидка — сразу видна: значок «🔥 −N % Скидка» на фото (вместо красного кружка) и цена красной плашкой,
   старая цена — в той же плашке, зачёркнутая, перед новой. Так же на странице товара (product-page.css) ── */
.item-actions .sale { width: auto !important; height: 24px !important; padding: 0 8px; border-radius: 12px !important;
    background: linear-gradient(90deg, #FF8A00 0%, #F2441D 55%, #DD2C01 100%); color: #fff; font-size: 11px !important;
    font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(221, 44, 1, .25); }
.item-actions .vc-sale { gap: 3px; padding: 0 8px 0 6px; text-transform: none; }
.vc-sale svg { flex: 0 0 11px; width: 11px; height: 11px; fill: #fff; }
.vc-prices.is-sale { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-width: 100%; padding: 3px 10px;
    border-radius: 8px; background: linear-gradient(135deg, #F2441D, #DD2C01); box-shadow: 0 3px 10px rgba(221, 44, 1, .2); }
.vc-prices.is-sale .price-with-cart { color: #fff; }
.vc-prices.is-sale .vc-old { order: -1; color: rgba(255, 255, 255, .85); }
/* сравнение товаров (старая разметка): цена со скидкой — тоже плашкой */
.compare-page .is-sale .price-with-cart { display: inline-block; padding: 2px 10px; border-radius: 8px; background: linear-gradient(135deg, #F2441D, #DD2C01);
    color: #fff; }
@media (max-width: 359px) {
    .vc-sale-word { display: none; }
}

/* кнопки — прямоугольные со скруглением 6 px, как кнопки сайта */
.vc-actions { display: flex; align-items: center; gap: 8px; }
.vc-add { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px;
    border: 0; border-radius: 6px; background: #FEDC29; color: #303030; font-size: 14px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) {
    .vc-add:hover { background: #FFD600; }
}
.vc-add:focus { outline: none; }
.vc-add:focus-visible { box-shadow: 0 0 0 3px rgba(254, 220, 41, .45); }
.vc-add svg { flex: 0 0 18px; width: 18px; height: 18px; fill: #303030; }
.vc-add.is-busy { opacity: .6; pointer-events: none; }

/* «В корзине ✓» — компьютер, товар уже в корзине (ведёт на страницу корзины) */
.vc-incart { display: none; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 40px; padding: 0 10px;
    border: 1px solid #FEDC29; border-radius: 6px; background: #FFF7D1; color: #303030 !important; font-size: 14px; font-weight: 700;
    line-height: 1; white-space: nowrap; text-decoration: none !important; transition: background-color .15s; }
@media (hover: hover) {
    .vc-incart:hover { background: #FEDC29; }
}
.vc-incart-mark { color: #1E9E4A; font-weight: 800; }

/* «− N +» */
.vc-step { display: none; flex: 0 0 auto; align-items: center; height: 40px; }
.vc-minus,
.vc-plus { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent;
    font-size: 20px; line-height: 28px; color: #787878; cursor: pointer; transition: background-color .15s, color .15s; }
@media (hover: hover) {
    .vc-minus:hover,
    .vc-plus:hover { background: #F0F2F4; color: #303030; }
}
.vc-minus:focus,
.vc-plus:focus { outline: none; }
.vc-num { flex: 0 0 auto; min-width: 0; width: 36px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
    box-shadow: none; text-align: center; font-size: 15px; font-weight: 700; color: #303030; outline: none; -webkit-appearance: none; appearance: none; }
.vc-tocart { display: none; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid #EAEAEA; border-radius: 6px; background: #fff; transition: border-color .15s; }
@media (hover: hover) {
    .vc-tocart:hover { border-color: #FEDC29; }
}
.vc-tocart svg { width: 18px; height: 18px; fill: #303030; }
/* iPhone приближает страницу на полях со шрифтом меньше 16 px */
@media (max-width: 1000px), (pointer: coarse) {
    .vc-num { font-size: 16px; }
}

/* компьютер: «В корзину» и рядом «− N +» (сколько положить); товар в корзине — «В корзине ✓», «− N +» меняет корзину */
@media (min-width: 1001px) {
    .vc-add svg { display: none; }
    .vc-step { display: flex; }
    .vc-actions.is-in-cart .vc-add { display: none; }
    .vc-actions.is-in-cart .vc-incart { display: flex; }
}
@media (min-width: 1001px) and (max-width: 1199px) {
    .vc-add,
    .vc-incart { padding: 0 6px; font-size: 13px; }
    .vc-minus,
    .vc-plus { flex-basis: 24px; width: 24px; }
    .vc-num { width: 30px; }
}
/* телефон и планшет: «В корзину» на всю ширину → после добавления простой «− N +» (без заливки и рамки)
   и кнопка перехода в корзину; избранное и сравнение — на фото */
@media (max-width: 1000px) {
    .vc-actions.is-in-cart .vc-add { display: none; }
    .vc-actions.is-in-cart .vc-step { display: flex; flex: 1 1 auto; justify-content: space-between; min-width: 0; padding: 0; }
    .vc-actions.is-in-cart .vc-num { flex: 1 1 auto; width: 30px; }
    .vc-actions.is-in-cart .vc-minus,
    .vc-actions.is-in-cart .vc-plus { flex-basis: 36px; width: 36px; height: 36px; line-height: 36px; font-size: 22px; color: #9A9A9A; }
    .vc-actions.is-in-cart .vc-tocart { display: flex; border-color: #DADDE1; }
}
@media (max-width: 1000px) and (hover: hover) {
    .vc-actions.is-in-cart .vc-minus:hover,
    .vc-actions.is-in-cart .vc-plus:hover { background: #F0F2F4; color: #303030; }
}

/* раздел каталога и код под фото — только «списком» */
.vc-path { display: none; font-size: 12px; line-height: 18px; color: #9A9A9A; }
.vc-path a { color: #787878; text-decoration: none; }
@media (hover: hover) {
    .vc-path a:hover { color: #303030; text-decoration: underline; }
}
.vc-path-sep { margin: 0 6px; color: #C4C8CD; }
.vc-code-under { display: none; }

/* ── списком (компьютер): строки без рамок через пунктир — фото и код | название, наличие, оценка, раздел,
   характеристики | цена, «− N +», «В корзину»; избранное и сравнение — столбиком справа ── */
@media (min-width: 1001px) {
    .row-item-special:not(.active) .special-item.vc { display: grid !important; grid-template-columns: 200px minmax(0, 1fr) 180px;
        column-gap: 28px; align-items: start; position: relative; margin: 0 !important; padding: 24px 52px 24px 0 !important;
        background: transparent; border: 0 solid #EAEAEA !important; border-bottom: 1px dashed #DDE0E4 !important; border-radius: 0 !important;
        box-shadow: none !important; }
    .row-item-special:not(.active) .vc-media { grid-column: 1; position: static; }
    .row-item-special:not(.active) .vc-badges { top: 24px; left: 0; }
    .row-item-special:not(.active) .vc-tools { top: 24px; right: 0; gap: 10px; }
    .row-item-special:not(.active) .vc-tool { opacity: 1; border-color: transparent; background: transparent; box-shadow: none; }
    .row-item-special:not(.active) .vc-tool svg { width: 18px; height: 18px; }
    .row-item-special:not(.active) .vc-code-under { display: block; margin-top: 10px; text-align: center; font-size: 12px; line-height: 16px; color: #9A9A9A; }
    .row-item-special:not(.active) .vc-meta .vc-code { display: none; }

    .row-item-special:not(.active) .vc-info { grid-column: 2; }
    .row-item-special:not(.active) .vc-name { order: -1; margin: 0 !important; }
    .row-item-special:not(.active) .vc .vc-name a { height: auto; -webkit-line-clamp: 2; font-size: 17px; line-height: 22px; font-weight: 700 !important; }
    .row-item-special:not(.active) .vc-avail { margin-top: 8px; }
    .row-item-special:not(.active) .vc-avail-more { display: inline; font-weight: 400; }
    .row-item-special:not(.active) .vc-meta { order: 1; justify-content: flex-start; margin-top: 6px; }
    .row-item-special:not(.active) .vc-path { display: block; order: 2; margin-top: 8px; }
    .row-item-special:not(.active) .vc .types-item { display: block; order: 3; margin-top: 8px; }

    .row-item-special:not(.active) .vc-buy { grid-column: 3; margin: 0; padding: 0; }
    .row-item-special:not(.active) .vc-prices { flex-direction: column; align-items: flex-start; gap: 2px; margin: 8px 0 12px; }
    .row-item-special:not(.active) .vc-prices .price-with-cart { font-size: 22px; line-height: 26px; }
    /* скидка «списком»: старая и новая цена — в одной плашке, в строку (не помещается — в две) */
    .row-item-special:not(.active) .vc-prices.is-sale { flex-direction: row; align-items: baseline; gap: 0 6px; }
    .row-item-special:not(.active) .vc-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .row-item-special:not(.active) .vc-step { order: -1; height: 30px; margin-left: -6px; }
    .row-item-special:not(.active) .vc-add,
    .row-item-special:not(.active) .vc-incart { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1001px) and (hover: hover) {
    .row-item-special:not(.active) .vc-tool:hover { background: #F0F2F4; }
}
/* ── телефон ── */
@media (max-width: 770px) {
    .item,
    .special-item { border-radius: 10px; }
    .item,
    .row-item-special .special-item.vc { padding: 8px 8px 10px; }
    /* раздел каталога и поиск (с подборками): плитка — почти от края до края экрана (поля 5 px вместо 15, между
       карточками 6 px; было 49 % + 1 % — справа оставалось лишнее поле), фото — на всю ширину карточки (было 90 %).
       Карусели и «Избранное» — как были (решение владельца) */
    .cat-page .row-item-special.active,
    .vs-page .row-item-special.active { margin-left: -10px; margin-right: -10px; }
    .cat-page .row-item-special.active .special-item,
    .vs-page .row-item-special.active .special-item { width: calc(50% - 3px) !important; margin: 0 0 6px !important; }
    .cat-page .vc-img img,
    .vs-page .vc-img img { left: 0; top: 0; width: 100%; height: 100%; }
    .vc-tools { gap: 4px; }
    .vc-tool { width: 28px; height: 28px; }
    .vc-tool svg { width: 14px; height: 14px; }
    .vc-meta { margin-top: 6px; }
    .vc-rating .stars { flex-basis: 70px; width: 70px; }
    .vc-rating .stars .stars-back svg,
    .vc-rating .stars .stars-front svg { width: 12px; min-width: 12px; height: 12px; }
    .vc-code { font-size: 11px; }
    .vc-avail { font-size: 12px; line-height: 16px; }
    .row-item-special .vc .vc-name a,
    .vc-name a { font-size: 13px; line-height: 17px; height: 51px; }
    .vc-prices { margin: 6px 0 10px; }
    .vc-prices .price-with-cart { font-size: 17px; line-height: 22px; }
    /* скидка: старая и новая цена — в одну строку плашки (узкая карточка) */
    .vc-prices.is-sale { gap: 0 5px; padding: 3px 8px; }
    .vc-prices.is-sale .price-with-cart { font-size: 16px; line-height: 21px; }
    .vc-prices.is-sale .vc-old { font-size: 11px; line-height: 14px; }
    .vc-add { height: 38px; gap: 6px; padding: 0 10px; font-size: 13px; }
    .vc-add svg { flex-basis: 16px; width: 16px; height: 16px; }
    .vc-actions.is-in-cart .vc-step { height: 38px; padding: 0 2px; }
    .vc-minus,
    .vc-plus { flex-basis: 30px; width: 30px; height: 30px; line-height: 30px; }
    .vc-tocart { flex-basis: 38px; width: 38px; height: 38px; }
}

/* избранное и сравнение: при нажатии значок переворачивается и становится жёлтым — везде
   (в карточках каталога main.css выключает переходы правилом «.special-item * { transition: none !important }») */
.add-to-wish svg,
.add-to-compare svg,
.product-end-add-to-wish svg,
.product-end-add-to-compare svg { transition: transform .7s cubic-bezier(.175, .885, .32, 1.275), fill .25s !important; }