/* relatedthumbnails.css · v2.3.1 — palette Orola + responsive
 *
 * Migliorie v2.3.1:
 * - rimosse frecce di navigazione (solo swipe + pagination)
 * - gap tra header e slider ridotto
 * - breakpoints estesi (480, 768, 1024, 1400)
 * - mobile (≤575): card più compatte, nome più piccolo
 * - tablet (768-991): 3.2 prodotti visibili
 * - desktop (≥1024): 4 prodotti
 * - desktop wide (≥1400): 4.5 prodotti
 * - anti-FOUC migliorato: visibilità via opacity senza saltare layout
 * - aspect-ratio 1:1 sulle immagini (riserva spazio prima del load)
 */

.related-thumbnails-section,
#related-thumbnails-container {
    --rt-navy:       #14233c;
    --rt-navy-soft:  #1c3464;
    --rt-gold:       #caa133;
    --rt-gold-dark:  #b89427;
    --rt-gold-soft:  #e9c75c;
    --rt-cream:      #faf6e7;
    --rt-cream-deep: #f3ead4;
    --rt-border:     #e8d8a8;
    --rt-text-muted: #6f6a5e;
    --rt-bg-white:   #ffffff;
}

/* =========================================================
   HEADER SEZIONE · v2.3.4 zero top margin + gap minimo titolo/slider
   ========================================================= */
.related-thumbnails-section {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 0; /* azzera spazi residui dovuti a inline-block whitespace */
}

.related-thumbnails-header {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.related-thumbnails-kicker {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rt-gold-dark);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.related-thumbnails-kicker::before,
.related-thumbnails-kicker::after {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--rt-gold);
    opacity: 0.6;
}

.related-thumbnails-title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-style: italic !important;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important;
    font-weight: 500 !important;
    color: var(--rt-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* =========================================================
   CONTAINER PRINCIPALE — gap ridotto verso header
   ========================================================= */
#related-thumbnails-container {
    width: 100% !important;
    max-width: 100% !important;
    /* v2.3.5 — margin-top più negativo: lo slider si avvicina ulteriormente al titolo */
    margin: -10px 0 12px 0 !important;
    padding: 0 !important;
    clear: both !important;
    display: block !important;
    position: relative;
}

#related-thumbnails-swiper {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    opacity: 0;
    transition: opacity 250ms ease;
    padding: 0 0 18px 0;
}

#related-thumbnails-swiper.swiper-initialized,
#related-thumbnails-swiper.rt-ready {
    opacity: 1;
}

/* =========================================================
   PRE-SIZING SLIDE — anti-FOUC con breakpoints aggiornati
   ========================================================= */
#related-thumbnails-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

/* Mobile-first più compatto v2.3.2 — più prodotti visibili a colpo d'occhio */
#related-thumbnails-swiper .swiper-slide {
    width: calc(100% / 3.2);  /* mobile small: ~31% */
    flex-shrink: 0;
    min-width: 0;
    height: auto;
}

@media (min-width: 480px) {
    #related-thumbnails-swiper .swiper-slide { width: calc(100% / 3.5); }
}

@media (min-width: 768px) {
    #related-thumbnails-swiper .swiper-slide { width: calc(100% / 4); }
}

@media (min-width: 1024px) {
    #related-thumbnails-swiper .swiper-slide { width: calc(100% / 4.5); }
}

@media (min-width: 1400px) {
    #related-thumbnails-swiper .swiper-slide { width: calc(100% / 5); }
}

/* =========================================================
   CARD PRODOTTO · cream con accent oro, hover navy
   ========================================================= */
.related-product-item {
    text-align: center;
    padding: 8px 8px 10px 8px;
    background: var(--rt-bg-white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--rt-border);
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.related-product-item:hover {
    border-color: var(--rt-navy);
    box-shadow:
        0 0 0 1px var(--rt-navy),
        0 6px 18px rgba(20, 35, 60, 0.10);
    background: var(--rt-cream);
}

.related-product-item a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    outline: none;
}

.related-product-item a:focus-visible {
    box-shadow: 0 0 0 2px var(--rt-gold);
    border-radius: 4px;
}

.related-product-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: var(--rt-bg-white);
    padding: 0;
    border-radius: 4px;
    transition: transform 300ms ease;
}

.related-product-item:hover img {
    transform: scale(1.04);
}

/* Nome prodotto · v2.3.2 NASCOSTO (solo immagine).
   Manteniamo il nodo nel DOM per a11y/screen-readers + SEO; visually-hidden. */
.related-product-item__name,
.product-name-overlay {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Card più compatta dato che non c'è più il nome sotto · v2.3.5 padding-top 0 */
.related-product-item {
    padding: 0 4px 4px 4px;
    border-radius: 6px;
}

@media (max-width: 575px) {
    .related-product-item {
        padding: 0 3px 3px 3px;
        border-radius: 5px;
    }
}

/* =========================================================
   PAGINATION · pallini oro, attivo navy allungato
   ========================================================= */
#related-thumbnails-container .swiper-pagination {
    bottom: 0 !important;
    position: absolute;
    z-index: 5;
    width: 100%;
    text-align: center;
    line-height: 0;
}

#related-thumbnails-container .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 3px !important;
    background: var(--rt-gold) !important;
    opacity: 0.45 !important;
    border-radius: 3px;
    transition:
        background 200ms ease,
        width 200ms ease,
        opacity 200ms ease;
    cursor: pointer;
}

#related-thumbnails-container .swiper-pagination-bullet:hover {
    opacity: 0.85 !important;
}

#related-thumbnails-container .swiper-pagination-bullet-active {
    background: var(--rt-navy) !important;
    width: 18px !important;
    opacity: 1 !important;
    border-radius: 3px;
}

/* Nasconde frecce nav anche se presenti (per safety) — v2.3.1 le rimuove da HTML */
#related-thumbnails-container .swiper-button-next,
#related-thumbnails-container .swiper-button-prev {
    display: none !important;
}