/**
 * JV Design Components
 * Переиспользуемые компоненты дизайна JV
 */

/* ========== Кнопки ========== */

/* .jv-btn-primary / .jv-btn-secondary удалены (шаг унификации кнопок):
   мёртвые классы, 0 использований в шаблонах. Единый компонент — .jw-btn (jw-buttons.css).
   .jv-btn-option / .jv-btn-icon пока живые (product.twig, jw_share) — оставлены. */

/* Кнопка опции (неактивная) */
.jv-btn-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--jv-spacing-sm);
    background: transparent;
    color: var(--jv-border-light);
    border: 2px solid var(--jv-border-light);
    border-radius: var(--jv-radius-sm);
    font-weight: var(--jv-font-weight-medium);
    font-size: var(--jv-font-size-base);
    line-height: var(--jv-line-height-tight);
    cursor: pointer;
    transition: all var(--jv-transition-fast);
    text-decoration: none;
}

.jv-btn-option:hover {
    border-color: var(--jv-text-tertiary);
    color: var(--jv-text-tertiary);
}

/* Кнопка опции (активная) */
.jv-btn-option.active {
    color: var(--jv-text-primary);
    border-color: var(--jv-border-active);
}

/* Кнопка с иконкой */
.jv-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--jv-gap-xs);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--jv-text-tertiary);
    font-weight: var(--jv-font-weight-semibold);
    font-size: var(--jv-font-size-md);
    line-height: var(--jv-line-height-tight);
    cursor: pointer;
    transition: color var(--jv-transition-fast);
}

.jv-btn-icon:hover {
    color: var(--jv-text-secondary);
}
.jw-share-wrap .jv-btn-icon svg{
    width: 18px;
    height: 18px;
}

.jv-btn-icon svg {
    width: 25px;
    height: 25px;
}
.jv-btn-icon svg path {
    stroke: rgba(153, 153, 153, 1);
}

/* ========== Карточки ========== */

/* Базовая карточка */
.jv-card {
    background: var(--jv-bg-white);
    border-radius: var(--jv-radius-xl);
    padding: var(--jv-spacing-xl);
    transition: all var(--jv-transition-base);
}

.jv-card:hover {
    box-shadow: var(--jv-shadow-lg);
}

/* Карточка с серым фоном */
.jv-card-light {
    background: var(--jv-bg-light);
    border-radius: var(--jv-radius-xl);
    padding: var(--jv-spacing-xl);
}

/* Карточка товара */
.jv-card-product {
    background: var(--jv-bg-white);
    border-radius: var(--jv-radius-xl);
    overflow: hidden;
    transition: all var(--jv-transition-base);
}

.jv-card-product:hover {
    box-shadow: var(--jv-shadow-lg);
    transform: translateY(-2px);
}

/* ========== Таблицы с точечными разделителями ========== */

.jv-table-dots {
    width: 100%;
}

.jv-table-dots-item {
    display: flex;
    align-items: baseline;
    overflow: hidden;
}

.jv-table-dots-item:last-child {
    margin-bottom: 0;
}

.jv-table-dots-label {
    font-weight: var(--jv-font-weight-semibold);
    font-size: var(--jv-font-size-xl);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.jv-table-dots-separator {
    flex-grow: 1;
    border-bottom: 1px dotted var(--jv-text-tertiary);
    margin: 0 var(--jv-spacing-md);
    min-width: 20px;
}

.jv-table-dots-value {
    font-weight: var(--jv-font-weight-semibold);
    font-size: var(--jv-font-size-xl);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========== Инпуты и селекты ========== */

.jv-input,
.jv-select {
    width: 100%;
    padding: 11px 15px;
    background: var(--jv-bg-white);
    border: 1px solid var(--jv-border-light);
    border-radius: var(--jv-radius-sm);
    font-size: var(--jv-font-size-lg);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-text-primary);
    transition: border-color var(--jv-transition-fast);
}

/* #419: нативная стрелка селекта стоит вплотную к рамке. Своя стрелка с
   отступом 14px от края — как у селектов калькулятора и анкеты проекта. */
.jv-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.jv-input:focus,
.jv-select:focus {
    outline: none;
    border-color: var(--jv-border-active);
}

.jv-input::placeholder {
    color: var(--jv-text-tertiary);
}

/* ========== Аккордеон ========== */

.jv-accordion-item {
    margin-bottom: var(--jv-gap-md);
}

.jv-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--jv-spacing-lg) 0;
    cursor: pointer;
    user-select: none;
}

.jv-accordion-title {
    font-weight: var(--jv-font-weight-semibold);
    font-size: var(--jv-font-size-lg);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-text-primary);
}

.jv-accordion-icon {
    width: 14px;
    height: 8px;
    transition: transform var(--jv-transition-base);
}

.jv-accordion-icon svg path {
    stroke: var(--jv-text-tertiary);
}

.jv-accordion-item.active .jv-accordion-icon {
    transform: rotate(180deg);
}

.jv-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--jv-transition-base);
}

.jv-accordion-item.active .jv-accordion-content {
    max-height: 1000px;
}

.jv-accordion-body {
    padding-bottom: var(--jv-spacing-lg);
}

/* ========== Переключатель (Switch) ========== */

.jv-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.jv-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.jv-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--jv-border-light);
    transition: var(--jv-transition-base);
    border-radius: 24px;
}

.jv-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--jv-bg-white);
    transition: var(--jv-transition-base);
    border-radius: 50%;
}

.jv-switch input:checked+.jv-switch-slider {
    background-color: var(--jv-primary);
}

.jv-switch input:checked+.jv-switch-slider:before {
    transform: translateX(20px);
}

/* ========== Бейджи и метки ========== */

.jv-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--jv-primary);
    color: var(--jv-bg-white);
    border-radius: var(--jv-radius-sm);
    font-weight: var(--jv-font-weight-semibold);
    font-size: var(--jv-font-size-sm);
    line-height: var(--jv-line-height-tight);
}

.jv-badge-secondary {
    background: var(--jv-bg-light);
    color: var(--jv-text-secondary);
}

/* ========== Цены ========== */

.jv-price-main {
    font-weight: var(--jv-font-weight-extrabold);
    font-size: var(--jv-font-size-5xl);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-primary);
}

.jv-price-old {
    position: relative;
    font-weight: var(--jv-font-weight-extrabold);
    font-size: var(--jv-font-size-xl);
    line-height: var(--jv-line-height-tight);
    color: var(--jv-text-quaternary);
}

.jv-price-old::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: 50%;
    width: calc(100% + 4px);
    height: 1px;
    background: var(--jv-text-quaternary);
    transform: translateY(50%) rotate(-5deg);
}

/* ========== Утилиты ========== */

.jv-flex {
    display: flex;
}

.jv-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jv-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jv-gap-sm {
    gap: var(--jv-gap-sm);
}

.jv-gap-md {
    gap: var(--jv-gap-md);
}

.jv-gap-lg {
    gap: var(--jv-gap-lg);
}

.jv-gap-xl {
    gap: var(--jv-gap-xl);
}

.jv-mb-sm {
    margin-bottom: var(--jv-spacing-sm);
}

.jv-mb-md {
    margin-bottom: var(--jv-spacing-md);
}

.jv-mb-lg {
    margin-bottom: var(--jv-spacing-lg);
}

.jv-mb-xl {
    margin-bottom: var(--jv-spacing-xl);
}

.jv-mb-2xl {
    margin-bottom: var(--jv-spacing-2xl);
}

.jv-mt-sm {
    margin-top: var(--jv-spacing-sm);
}

.jv-mt-md {
    margin-top: var(--jv-spacing-md);
}

.jv-mt-lg {
    margin-top: var(--jv-spacing-lg);
}

.jv-mt-xl {
    margin-top: var(--jv-spacing-xl);
}

.jv-mt-2xl {
    margin-top: var(--jv-spacing-2xl);
}
/* Hide catalog menu close button (desktop popup × and add JS close handler) */
.custom__closed-menu {
  display: none !important;
}