/**
 * Дополнительные стили для сайта CAVELAMP
 * Добавлено: убрано подчеркивание ссылок, улучшен дизайн карточек и кнопок
 */

/* 1. УБИРАЕМ ПОДЧЕРКИВАНИЕ У ВСЕХ ССЫЛОК */
a, 
a:link, 
a:visited {
    text-decoration: none;
}

/* Возвращаем подчеркивание при наведении для интерактивности */
a:hover,
a:active {
    text-decoration: underline;
}

/* 2. УЛУЧШАЕМ ТИПОГРАФИКУ */
body, 
p, 
.main-content {
    line-height: 1.6; /* Увеличиваем межстрочный интервал */
    font-size: 16px;
}

/* 3. ОФОРМЛЕНИЕ КАРТОЧЕК ТОВАРОВ (мерч) */
/* Не применяем к блоку мерча темы (.merch-card и др.) — у них свой дизайн без окантовок */
.product, 
.merch-item, 
[class*="product"] {
    border: 1px solid rgba(199, 163, 91, 0.2); /* Тонкая рамка цвета бренда */
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

/* Карточки мерча темы: без окантовок и теней у названия, цены */
#merch .merch-info,
#merch .merch-title,
#merch .merch-brand,
#merch .merch-price,
#merch .merch-photo {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#merch .merch-card {
    border: none !important;
    outline: none !important;
    padding-top: 6px !important;
}

/* Расстояния в карточке мерча: компактно */
#merch .merch-brand {
    margin-top: 1px !important;
}
#merch .merch-price {
    margin-top: 2px !important;
}
#merch .merch-card .btn-primary-small,
#merch .merch-card .js-merch-buy,
#merch .merch-card a.btn-primary-small {
    margin-top: 2px !important;
}

.product:hover,
[class*="product"]:hover {
    border-color: #c7a35b; /* Цвет рамки при наведении */
    box-shadow: 0 12px 25px rgba(199, 163, 91, 0.1);
    transform: translateY(-3px);
}

/* 4. СТИЛИЗАЦИЯ КНОПОК "КУПИТЬ" */
button, 
.button, 
[class*="btn"],
[class*="button"],
a:has(.buy-button),
a[href*="купить"] {
    display: inline-block;
    background-color: #c7a35b; /* Теплый акцентный цвет под этнику */
    color: #1e1e1e !important; /* Темный текст для контраста */
    border: none;
    border-radius: 40px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(199, 163, 91, 0.2);
}

/* Состояние кнопки при наведении */
button:hover,
.button:hover,
[class*="btn"]:hover {
    background-color: #b08c4a;
    color: #1e1e1e !important;
    box-shadow: 0 8px 18px rgba(176, 140, 74, 0.3);
    transform: scale(1.02);
    text-decoration: none !important; /* Отключаем подчеркивание на кнопках */
}

/* 5. ЗАГОЛОВКИ - ДЕЛАЕМ ВЫРАЗИТЕЛЬНЕЕ */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 2rem;
    border-bottom: 2px solid rgba(199, 163, 91, 0.3);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* 6. ДЛЯ РАЗДЕЛА С МУЗЫКОЙ */
.track-list, 
[class*="track"] {
    list-style: none;
    padding-left: 0;
}

.track-list li,
[class*="track"] li {
    padding: 8px 0;
    border-bottom: 1px dashed #eaeaea;
    font-size: 1.1rem;
}

/* 7. АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    .product,
    [class*="product"] {
        padding: 15px;
    }
    
    button, 
    .button {
        padding: 10px 24px;
        font-size: 14px;
        width: 100%; /* Кнопки на всю ширину на мобильных */
        text-align: center;
    }
}