/**
 * UI-компоненты
 */

/* --- Кнопки --- */
body.cv-site .btn,
body.cv-site .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cv-gap-xs);
    padding: 12px 24px;
    font-family: inherit;
    font-size: var(--cv-fs-base);
    font-weight: var(--cv-fw-semibold);
    line-height: 1.2;
    border: none;
    border-radius: var(--cv-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--cv-transition), color var(--cv-transition), box-shadow var(--cv-transition), transform var(--cv-transition);
}

body.cv-site .btn-primary,
body.cv-site .button:not(.button-secondary):not(.button-auth):not(.auth-btn-cancel) {
    background: var(--cv-primary);
    color: var(--cv-text-inverse);
}

body.cv-site .btn-primary:hover,
body.cv-site .button:not(.button-secondary):not(.button-auth):hover {
    background: var(--cv-primary-dark);
    color: var(--cv-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--cv-shadow);
}

body.cv-site .btn-outline {
    background: transparent;
    color: var(--cv-primary);
    border: 2px solid var(--cv-primary);
}

body.cv-site .btn-outline:hover {
    background: var(--cv-primary-light);
}

body.cv-site .btn-lg {
    padding: 14px 32px;
    font-size: var(--cv-fs-lg);
}

body.cv-site .btn-block {
    width: 100%;
}

/* --- Карточки --- */
body.cv-site .card {
    background: var(--cv-surface);
    border-radius: var(--cv-radius-lg);
    box-shadow: var(--cv-shadow-sm);
    overflow: hidden;
    transition: transform var(--cv-transition), box-shadow var(--cv-transition);
}

body.cv-site .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cv-shadow-md);
}

/* --- Карточка товара --- */
body.cv-site .product-card {
    background: var(--cv-surface);
    border-radius: var(--cv-radius-lg);
    box-shadow: var(--cv-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--cv-transition), box-shadow var(--cv-transition);
    border: 1px solid var(--cv-border);
}

body.cv-site .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cv-shadow-md);
}

body.cv-site .product-image-wrapper {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--cv-surface-alt);
}

body.cv-site .product-image,
body.cv-site .product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

body.cv-site .product-card:hover .product-image {
    transform: scale(1.04);
}

body.cv-site .product-info {
    padding: var(--cv-gap);
    display: flex;
    flex-direction: column;
    gap: var(--cv-gap-sm);
    flex: 1;
}

body.cv-site .product-name {
    font-size: var(--cv-fs-base);
    font-weight: var(--cv-fw-semibold);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
    max-height: 2.7em;
}

body.cv-site .product-name a {
    color: var(--cv-text);
    text-decoration: none;
}

body.cv-site .product-name a:hover {
    color: var(--cv-primary);
}

body.cv-site .product-price {
    font-size: var(--cv-fs-lg);
    font-weight: var(--cv-fw-bold);
    color: var(--cv-primary);
}

body.cv-site .price-old {
    text-decoration: line-through;
    color: var(--cv-muted);
    font-size: var(--cv-fs-sm);
    font-weight: var(--cv-fw-normal);
    margin-right: 6px;
}

body.cv-site .price-new {
    color: var(--cv-primary);
}

body.cv-site .price-discount-label {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: var(--cv-danger);
    color: #fff;
    font-size: var(--cv-fs-xs);
    border-radius: var(--cv-radius-pill);
    font-weight: var(--cv-fw-semibold);
}

body.cv-site .badge-out-of-stock,
body.cv-site .is-unavailable .product-image-wrapper::before {
    content: 'Нет в наличии';
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: var(--cv-fs-xs);
    font-weight: var(--cv-fw-semibold);
    border-radius: var(--cv-radius-sm);
}

/* --- Добавить в корзину --- */
body.cv-site .add-to-cart {
    background: var(--cv-success);
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: var(--cv-radius);
    font-size: var(--cv-fs-base);
    font-weight: var(--cv-fw-semibold);
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    transition: background var(--cv-transition), transform var(--cv-transition);
}

body.cv-site .add-to-cart:hover {
    background: #2da84a;
}

body.cv-site .add-to-cart.added-to-cart {
    background: #1b7a34;
    cursor: default;
}

body.cv-site .add-to-cart.loading {
    opacity: 0.7;
    pointer-events: none;
}

body.cv-site .product-variation {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-sm);
    font-family: inherit;
    font-size: var(--cv-fs-sm);
    background: var(--cv-surface);
    color: var(--cv-text);
}

/* --- Формы --- */
body.cv-site .input,
body.cv-site input[type="text"],
body.cv-site input[type="tel"],
body.cv-site input[type="email"],
body.cv-site input[type="number"],
body.cv-site input[type="date"],
body.cv-site select,
body.cv-site textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-sm);
    font-family: inherit;
    font-size: var(--cv-fs-base);
    background: var(--cv-surface);
    color: var(--cv-text);
    transition: border-color var(--cv-transition), box-shadow var(--cv-transition);
}

body.cv-site .input:focus,
body.cv-site input:focus,
body.cv-site select:focus,
body.cv-site textarea:focus {
    outline: none;
    border-color: var(--cv-primary);
    box-shadow: 0 0 0 3px var(--cv-primary-light);
}

body.cv-site .form-field {
    margin-bottom: var(--cv-gap);
}

body.cv-site .form-field label,
body.cv-site .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: var(--cv-fw-semibold);
    font-size: var(--cv-fs-sm);
    color: var(--cv-text-secondary);
}

body.cv-site .form-field--error input {
    border-color: var(--cv-danger);
}

/* --- Хлебные крошки --- */
body.cv-site .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: var(--cv-fs-sm);
    color: var(--cv-muted);
    margin-bottom: var(--cv-gap-lg);
    padding: 0;
    list-style: none;
}

body.cv-site .breadcrumb a {
    color: var(--cv-muted);
}

body.cv-site .breadcrumb a:hover {
    color: var(--cv-primary);
}

body.cv-site .breadcrumb span {
    color: var(--cv-text-secondary);
}

/* --- Теги --- */
body.cv-site .tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--cv-fs-xs);
    font-weight: var(--cv-fw-semibold);
    border-radius: var(--cv-radius-pill);
    background: var(--cv-primary-light);
    color: var(--cv-primary-dark);
}

/* --- Шапка --- */
body.cv-site .header {
    background: var(--cv-surface);
    box-shadow: var(--cv-shadow-sm);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

body.cv-site .header-top {
    background: var(--cv-primary);
    color: var(--cv-text-inverse);
    padding: 8px 0;
    font-size: var(--cv-fs-sm);
}

body.cv-site .header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cv-gap-xs);
}

body.cv-site .header-contacts a,
body.cv-site .header-address-link {
    color: var(--cv-text-inverse);
    text-decoration: none;
}

body.cv-site .header-contacts a:hover,
body.cv-site .header-address-link:hover {
    text-decoration: underline;
    color: #fff;
}

body.cv-site .header-main .container {
    display: flex;
    align-items: center;
    gap: var(--cv-gap);
    padding-top: var(--cv-gap-sm);
    padding-bottom: var(--cv-gap-sm);
}

body.cv-site .logo img {
    height: 52px;
    width: auto;
}

body.cv-site .header-search {
    flex: 1;
    max-width: 420px;
}

body.cv-site .search-form {
    display: flex;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-pill);
    overflow: hidden;
    background: var(--cv-surface-alt);
}

body.cv-site .search-form input {
    flex: 1;
    border: none;
    padding: 10px 16px;
    background: transparent;
    font-size: var(--cv-fs-sm);
}

body.cv-site .search-form input:focus {
    box-shadow: none;
}

body.cv-site .search-form button {
    border: none;
    background: transparent;
    padding: 0 14px;
    cursor: pointer;
    font-size: 18px;
}

body.cv-site .cart-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cv-primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--cv-shadow-md);
}

body.cv-site .cart-fab-icon {
    display: block;
    flex-shrink: 0;
}

body.cv-site .cart-count,
body.cv-site .cart-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--cv-danger);
    color: #fff;
    font-size: 11px;
    font-weight: var(--cv-fw-bold);
    border-radius: var(--cv-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Auth modal */
body.cv-site .auth-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

body.cv-site .auth-card {
    background: var(--cv-surface);
    border-radius: var(--cv-radius-xl);
    padding: 48px 40px;
    max-width: 460px;
    width: 92%;
    text-align: center;
    position: relative;
    box-shadow: var(--cv-shadow-lg);
}

body.cv-site .auth-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--cv-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.cv-site .auth-close:hover {
    color: var(--cv-text);
    background: var(--cv-surface-alt);
}

body.cv-site .auth-icon { font-size: 48px; margin-bottom: 16px; }
body.cv-site .auth-title { font-size: var(--cv-fs-xl); font-weight: var(--cv-fw-bold); margin: 0 0 8px; }
body.cv-site .auth-subtitle { color: var(--cv-muted); font-size: var(--cv-fs-sm); margin: 0 0 28px; }
body.cv-site .auth-buttons { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
body.cv-site .auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: var(--cv-radius-lg);
    color: #fff;
    font-size: var(--cv-fs-lg);
    font-weight: var(--cv-fw-semibold);
    cursor: pointer;
    transition: transform var(--cv-transition), box-shadow var(--cv-transition);
}

body.cv-site .auth-btn:hover { transform: translateY(-2px); box-shadow: var(--cv-shadow); }
body.cv-site .auth-btn-tg { background: linear-gradient(135deg, #0088cc, #0077b5); }
body.cv-site .auth-btn-max { background: linear-gradient(135deg, #7B68EE, #6A5ACD); }
body.cv-site .auth-hint { color: var(--cv-muted); font-size: var(--cv-fs-xs); margin: 0; }
body.cv-site .auth-dev-hint {
    color: var(--cv-warning);
    font-size: var(--cv-fs-xs);
    line-height: var(--cv-lh-normal);
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #fff8e1;
    border-radius: var(--cv-radius-sm);
}
body.cv-site .auth-btn-cancel {
    margin-top: 24px;
    padding: 12px 32px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    background: var(--cv-surface);
    cursor: pointer;
    font-size: var(--cv-fs-sm);
    color: var(--cv-text-secondary);
}

body.cv-site .auth-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--cv-border);
    border-top-color: var(--cv-primary);
    border-radius: 50%;
    animation: cv-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes cv-spin { to { transform: rotate(360deg); } }

body.cv-site .header-user { display: flex; align-items: center; gap: 6px; }
body.cv-site .user-link,
body.cv-site .user-login-btn {
    text-decoration: none;
    color: var(--cv-text);
    font-weight: var(--cv-fw-semibold);
    font-size: var(--cv-fs-sm);
}

body.cv-site .user-link:hover,
body.cv-site .user-login-btn:hover { color: var(--cv-primary); }

@media (max-width: 767px) {
    body.cv-site .header-top-desktop { display: none; }
    body.cv-site .header-addr-short { display: inline; }
    body.cv-site .header-addr-full { display: none; }
    body.cv-site .header-search { display: none; }
    body.cv-site .cart-icon-header { display: none; }
    body.cv-site .cart-fab { display: flex; }
    body.cv-site { --cv-header-height: 68px; }
    body.cv-site .main {
        padding-top: calc(var(--cv-header-height) + var(--cv-gap-sm));
    }
}

@media (min-width: 768px) {
    body.cv-site .header-addr-short { display: none; }
    body.cv-site .header-addr-full { display: inline; }
}

/* --- Подвал --- */
body.cv-site .footer {
    background: var(--cv-text);
    color: #ccc;
    padding: var(--cv-gap-2xl) 0 var(--cv-gap-lg);
    margin-top: var(--cv-gap-2xl);
}

body.cv-site .footer h4 {
    color: #fff;
    margin-bottom: var(--cv-gap);
}

body.cv-site .footer a {
    color: #ddd;
}

body.cv-site .footer a:hover {
    color: #fff;
}

body.cv-site .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cv-gap-xl);
    margin-bottom: var(--cv-gap-xl);
}

body.cv-site .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--cv-gap);
    font-size: var(--cv-fs-sm);
    text-align: center;
}

@media (min-width: 768px) {
    body.cv-site .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Соцкнопки (шапка / подвал) */
body.cv-site .social-links {
    margin-top: 10px;
}

body.cv-site .social-links--header {
    margin-top: 6px;
}

body.cv-site .social-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.cv-site .social-button {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    transition: opacity 0.2s;
}

body.cv-site .social-button:hover {
    opacity: 0.85;
}

body.cv-site .social-button--telegram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.78 15.29l-.37 5.24c.53 0 .76-.23 1.03-.5l2.48-2.38 5.14 3.77c.94.52 1.61.25 1.87-.87l3.38-15.85h.01c.3-1.4-.5-1.95-1.42-1.6L1.17 9.59c-1.36.53-1.34 1.29-.23 1.63l5.47 1.71L19.09 5.3c.64-.42 1.23-.19.75.24'/%3E%3C/svg%3E");
}

body.cv-site .social-button--max {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3C/svg%3E");
}

body.cv-site .social-button--vkontakte {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14c5.6 0 6.93-1.33 6.93-6.93V8.93C22 3.33 20.67 2 15.07 2zm3.08 14.27h-1.46c-.55 0-.72-.44-1.71-1.42-.86-.83-1.24-.94-1.46-.94-.3 0-.39.09-.39.5v1.3c0 .36-.12.58-1.08.58-1.6 0-3.38-.97-4.62-2.77-1.88-2.64-2.4-4.63-2.4-4.77 0-.21.09-.4.5-.4h1.46c.37 0 .51.17.65.56.71 2.05 1.9 3.85 2.39 3.85.18 0 .27-.09.27-.58V9.9c-.06-.99-.58-1.07-.58-1.45 0-.17.14-.34.37-.34h2.3c.31 0 .42.17.42.55v2.96c0 .31.14.42.23.42.18 0 .33-.11.66-.44 1.02-1.14 1.75-2.9 1.75-2.9.1-.21.26-.4.63-.4h1.46c.44 0 .53.23.44.55-.19.89-2.02 3.48-2.02 3.48-.16.26-.22.37 0 .66.16.22.7.68 1.06 1.09.66.74 1.17 1.36 1.3 1.79.14.43-.07.65-.5.65z'/%3E%3C/svg%3E");
}

body.cv-site .social-button--odnoklassniki {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 7.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm0-5.5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-2.03.76-3.88 2-5.29C7.87 8.84 9.84 10 12 10s4.13-1.16 5-3.29C18.24 8.12 19 9.97 19 12c0 4.41-3.59 8-8 8z'/%3E%3C/svg%3E");
}

body.cv-site .header-contacts .social-links--header .social-button {
    width: 28px;
    height: 28px;
    background-size: 16px 16px;
}