/**
 * MERCH.CSS — Стили раздела «Мерч»
 * Каталог товаров: карточки с каруселью изображений, описанием, ценой, статусом.
 */

.merch-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Сетка товаров */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    padding: 10px 0;
}

/* Карточка товара */
.merch-item {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid #1a1a1a;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.merch-item:hover {
    border-color: #333;
    background: rgba(255, 255, 255, 0.025);
}

/* ===== КАРУСЕЛЬ ===== */
.merch-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
    user-select: none;
    cursor: pointer;
}

/* Видимый фокус для навигации с клавиатуры (a11y) */
.merch-carousel:focus-visible {
    outline: 2px solid #888;
    outline-offset: -2px;
}

.merch-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(85%) contrast(1.05);
    transition: filter 0.5s ease, transform 0.6s ease;
}

.merch-item:hover .merch-carousel img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.03);
}

/* Стрелки */
.merch-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid #333;
    color: #aaa;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
    z-index: 2;
    padding: 0;
}

.merch-item:hover .merch-carousel-btn {
    opacity: 1;
}

.merch-carousel-btn:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
}

.merch-carousel-btn.prev { left: 6px; }
.merch-carousel-btn.next { right: 6px; }

/* Точки-индикаторы */
.merch-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 2;
}

.merch-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #444;
    transition: background 0.3s ease;
}

.merch-carousel-dot.active {
    background: #fff;
}

/* Placeholder если нет картинки */
.merch-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #080808;
}

/* Статус (доступен / нет) */
.merch-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #444;
    color: #aaa;
    z-index: 2;
}

.merch-status.sold-out {
    color: #555;
    border-color: #222;
}

/* Инфо-блок */
.merch-info {
    padding: 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.merch-name {
    font-family: 'Special Elite', cursive;
    font-size: 1.05rem;
    color: #ccc;
    margin-bottom: 8px;
    line-height: 1.3;
}

.merch-desc {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 14px;
    flex: 1;
    white-space: pre-line;
}

.merch-price {
    font-family: 'Special Elite', cursive;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

/* Кнопки действия */
.merch-actions {
    display: flex;
    gap: 8px;
}

.merch-btn {
    flex: 1;
    padding: 9px 0;
    border: 1px solid #444;
    background: none;
    color: #888;
    font-family: 'IM Fell English', serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.merch-btn:hover {
    border-color: #888;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Приписка в оверлее — кроваво-красная, заглавными, дрожит при наведении */
.merch-note {
    text-align: center;
    font-size: 0.95rem;
    color: #b32626;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    font-family: 'IM Fell English', serif;
    text-shadow: 0 0 6px rgba(180, 30, 30, 0.55),
                 0 0 14px rgba(140, 20, 20, 0.35);
}

@media (hover: hover) {
    .merch-note:hover {
        animation: merch-note-shudder 0.15s infinite;
        will-change: transform;
    }
}

@keyframes merch-note-shudder {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-0.5px, 0.5px) rotate(0.6deg); }
    50%  { transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
    75%  { transform: translate(-0.5px, -0.5px) rotate(0.4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Пустой каталог */
.merch-empty {
    text-align: center;
    padding: 60px 20px;
    color: #555;
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .merch-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
    }

    .merch-carousel-btn {
        opacity: 1; /* на тач-устройствах стрелки всегда видны */
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .merch-grid {
        grid-template-columns: 1fr;
    }
}

/* LIGHTBOX STYLES */
.lightbox-overlay {
    background: rgba(0, 0, 0, 0.95) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important; /* Устанавливаем максимальный z-index, чтобы быть над всеми оверлеями */
    cursor: default;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lightbox-overlay[hidden] {
    display: none !important;
}

.lightbox-content {
    position: relative;
    /* Устанавливаем стабильный контейнер с пропорциями 16:9 */
    width: 90vw;
    max-width: 1200px;
    /* Вычисляем ширину так, чтобы контейнер всегда вписывался в экран и сохранял 16:9 */
    width: min(90vw, calc(85vh * 16 / 9));
    aspect-ratio: 16 / 9;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2); /* Легкая подложка для пустых зон 16:9 */
}

.lightbox-content img {
    width: 100%;
    height: 100%;
    /* Вписываем фото в 16:9 без искажения пропорций */
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    cursor: zoom-out;
}

/* Кнопки теперь привязаны к краям стабильного 16:9 контейнера */
.lightbox-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2010;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.lightbox-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* Счётчик «n / total» в лайтбоксе */
.lightbox-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    font-family: monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #ccc;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    z-index: 2010;
    pointer-events: none;
}

.lightbox-btn.prev { 
    left: 0; 
    border-radius: 4px 0 0 4px;
}
.lightbox-btn.next { 
    right: 0; 
    border-radius: 0 4px 4px 0;
}

/* На мобилках делаем кнопки чуть меньше */
@media (max-width: 768px) {
    .lightbox-content {
        width: 95vw;
        aspect-ratio: 16 / 9;
    }
    .lightbox-btn {
        display: none !important; /* Скрываем стрелки, оставляем только свайп */
    }
}

.merch-carousel {
    cursor: zoom-in;
}

/* СКРЫВАЕМ СТРЕЛКИ КАРУСЕЛИ НА МОБИЛКАХ В СПИСКЕ ТОВАРОВ */
@media (max-width: 768px) {
    .merch-carousel-controls-desktop {
        display: none !important;
    }
    
    .merch-carousel {
        /* На мобилке вся область картинки — это просто кнопка открытия Lightbox */
        cursor: pointer;
    }
}