/* oc_viewed_together v1.2.0 | Orientica.pl
   Mobile:  natywny swipe, zero przycisków
   Desktop: przyciski + scrollBy
   ============================================================ */

/* ── Sekcja ────────────────────────────────────────────────── */
.oc-vt-section {
    margin: 40px 0 24px;
    padding: 28px 0 0;
    border-top: 1px solid var(--border-subtle, rgba(214,185,140,0.15));
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Nagłówek ──────────────────────────────────────────────── */
.oc-vt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.oc-vt-icon {
    font-size: 16px;
    opacity: 0.5;
    color: var(--text-gold, #D6B98C);
}
.oc-vt-title {
    font-family: "Libre Baskerville", serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-gold, #D6B98C);
    margin: 0;
    white-space: nowrap;
    opacity: 0.75;
}
.oc-vt-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(214,185,140,0.3), transparent);
}

/* ── Wrapper ───────────────────────────────────────────────── */
.oc-vt-track-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Clip dla desktop — przycina track do obszaru między przyciskami */
    overflow: hidden;
}

/* ── Strzałki (TYLKO DESKTOP) ──────────────────────────────── */
.oc-vt-nav {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-gold, rgba(214,185,140,0.3));
    border-radius: 0;
    background: var(--bg-card, #6B4B3E);
    color: var(--text-gold, #D6B98C);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
    position: relative;
    z-index: 2;
    /* Na mobile całkowicie ukryte */
    display: none;
}
.oc-vt-nav:hover {
    background: var(--accent-primary, #A3683A);
    border-color: var(--accent-primary, #A3683A);
    color: var(--text-light, #E8D8C3);
}
.oc-vt-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Clip (dla desktop overflow:hidden działa przez wrapper) ── */
.oc-vt-track-clip {
    flex: 1;
    min-width: 0;
    /* overflow:hidden jest na wrapperze — clip nie potrzebuje własnego */
    overflow: hidden;
}

/* ── Track ─────────────────────────────────────────────────── */
.oc-vt-track {
    display: flex;
    gap: 12px;
    /* Natywny scroll z ukrytym scrollbarem — działa na obu */
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.oc-vt-track::-webkit-scrollbar { display: none; }

/* ── Karta ─────────────────────────────────────────────────── */
.oc-vt-card {
    flex: 0 0 calc(50% - 6px); /* mobile: 2 kolumny */
    min-width: 130px;
    max-width: 260px;
    scroll-snap-align: start;
}
.oc-vt-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-subtle, rgba(214,185,140,0.15));
    background: var(--bg-darkest, #2A1D19);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .2s;
}
.oc-vt-card-link:hover {
    border-color: var(--text-gold, #D6B98C);
    box-shadow: 0 0 18px rgba(214,185,140,0.2);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

/* ── Zdjęcie ──────────────────────────────────────────────── */
.oc-vt-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--bg-dark, #3B2A24);
}
.oc-vt-card-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.oc-vt-card-link:hover .oc-vt-card-img { transform: scale(1.05); }
.oc-vt-no-img {
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--text-muted, #A89677); opacity: .3;
}
.oc-vt-card-overlay {
    position: absolute; inset: 0;
    background: rgba(42,29,25,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s;
}
.oc-vt-card-overlay span {
    font-size: 11px; font-weight: 700;
    text-transform: lowercase; letter-spacing: .1em;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    padding: 4px 12px;
}
.oc-vt-card-link:hover .oc-vt-card-overlay { opacity: 1; }

/* ── Body karty ─────────────────────────────────────────────── */
.oc-vt-card-body {
    padding: 8px 10px 12px;
    background: var(--accent-green, #5E6B4A);
    text-align: center;
}
.oc-vt-card-name {
    font-family: "Libre Baskerville", serif;
    font-size: 12px; font-weight: 400;
    color: var(--text-light, #E8D8C3);
    line-height: 1.4; margin: 0 0 5px;
    text-transform: lowercase;
}
.oc-vt-card-price {
    font-family: "Lato", sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--text-gold, #D6B98C); margin: 0;
}

/* ============================================================
   TABLET (≥ 600px) — 3 kolumny, nadal bez przycisków
   ============================================================ */
@media (min-width: 600px) {
    .oc-vt-card {
        flex: 0 0 calc(33.333% - 8px);
    }
}

/* ============================================================
   DESKTOP (≥ 768px) — 4 kolumny + przyciski
   ============================================================ */
@media (min-width: 768px) {
    /* Pokaż przyciski */
    .oc-vt-nav {
        display: flex;
    }

    .oc-vt-card {
        flex: 0 0 calc(25% - 9px);
        max-width: 220px;
    }

    /* Na desktop overlay ma sens */
    .oc-vt-card-overlay { display: flex; }
}

@media (min-width: 992px) {
    .oc-vt-card {
        flex: 0 0 calc(20% - 10px); /* 5 kart na szerokim ekranie */
        max-width: 200px;
    }
}