/* ===================================================================
   Bestsellers — [bestsellers_categorias] shortcode
   Layout: header → pills → tabbed slider
   Cards use pgb-destaques-cards.css (shared)
   =================================================================== */

/* Header */
.pgb-bestsellers__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    gap: 8px;
}
h2.pgb-bestsellers__heading {
    font-size: clamp(1.4rem, 2vw, 2rem) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #222 !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
}
.pgb-bestsellers__desc {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-size: 0.9rem;
    color: #222;
    line-height: 1.6;
    font-weight: 500;
    max-width: 100%;
}

/* Pills */
.pgb-bestsellers__pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    position: relative;
}
.pgb-bestsellers__pill {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 100px;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #888 !important;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    max-width: fit-content;
}
.pgb-bestsellers__pill:hover {
    border-color: none !important;
    color: #222 !important;
    background-color: transparent !important;
}
.pgb-bestsellers__pill--active {
    background: #0069a7 !important;
    color: #fff !important;
    border-color: #113042 !important;
}

/* Panels */
.pgb-bestsellers__panel {
    display: none;
}
.pgb-bestsellers__panel--active {
    display: block;
    opacity: 1;
    transition: opacity 0.15s ease;
}
.pgb-bestsellers__panel--fading {
    opacity: 0;
}

/* Slider wrapper */
.pgb-bestsellers__slider-wrap {
    position: relative;
    min-width: 0;
}
.pgb-bestsellers__slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}
.pgb-bestsellers__slider::-webkit-scrollbar { display: none; }
.pgb-bestsellers__slide {
    flex: 0 0 calc(20% - 12px);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-width: 0;
    display: flex;
}
.pgb-bestsellers__slide .product-item {
    flex: 1;
}

/* Nav buttons — same pattern as destaques */
.pgb-bestsellers__btn {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    width: 46px !important; height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,0.92) !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease;
    pointer-events: auto !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.pgb-bestsellers__slider-wrap:hover .pgb-bestsellers__btn:not([hidden]) {
    opacity: 1;
}
.pgb-bestsellers__btn:hover {
    background: rgba(255,255,255,0.85) !important;
    color: #333 !important;
}
.pgb-bestsellers__btn:focus-visible {
    opacity: 1;
    outline: 3px solid #0069A7 !important;
    outline-offset: 2px;
}
.pgb-bestsellers__btn[hidden] { display: none !important; }
.pgb-bestsellers__btn--prev { left: -12px !important; }
.pgb-bestsellers__btn--next { right: -12px !important; }

/* Progress bar */
.pgb-bestsellers__progress {
    width: 100%;
    height: 2px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-top: 16px;
    overflow: hidden;
}
.pgb-bestsellers__progress-bar {
    height: 100%;
    width: 0%;
    background: #333;
    border-radius: 2px;
    transition: width 0.15s ease-out;
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
    .pgb-bestsellers__slide {
        flex: 0 0 calc(33.333% - 10px);
    }
}
@media (max-width: 768px) {
    .pgb-bestsellers__desc {
        max-width: 100%;
    }
    /* 1 card + peek do proximo (imagem grande, menos texto) */
    .pgb-bestsellers__slider .pgb-bestsellers__slide {
        flex: 0 0 80%;
        max-width: 320px;
    }
    /* Imagem do produto a ocupar a largura toda do card */
    .pgb-bestsellers .product-image-wrapper { width: 100%; max-width: none; }
    .pgb-bestsellers .main-image,
    .pgb-bestsellers .hover-image { width: 100%; height: 100%; }
    /* Titulo limitado a 2 linhas */
    .pgb-bestsellers .product-title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Esconder metadados que poluem o card em mobile */
    .pgb-bestsellers .product-min-quantity,
    .pgb-bestsellers .data-entrega-grelha { display: none; }
    /* Pills: horizontal scroll */
    .pgb-bestsellers__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-right: -20px;
        padding-right: 20px;
    }
    .pgb-bestsellers__pills::-webkit-scrollbar { display: none; }
    .pgb-bestsellers__pill {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    /* Gradient fade hint for more pills */
    .pgb-bestsellers__pills::after {
        content: '';
        position: sticky;
        right: 0;
        flex-shrink: 0;
        width: 40px;
        background: linear-gradient(90deg, transparent, #fff);
        pointer-events: none;
    }
    .pgb-bestsellers__btn { width: 40px !important; height: 40px !important; }
    .pgb-bestsellers__btn--prev { left: 4px !important; }
    .pgb-bestsellers__btn--next { right: 4px !important; }
}

/* Setas inuteis em touch — eram alvo de toque fantasma (opacity:0 + pointer-events:auto) */
@media (hover: none) {
    .pgb-bestsellers__btn { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pgb-bestsellers__panel--active { transition: none; }
    .pgb-bestsellers__slider { scroll-behavior: auto; }
    .pgb-bestsellers__progress-bar { transition: none; }
    .pgb-bestsellers__btn { transition: none; }
    .pgb-bestsellers__pill { transition: none; }
}