@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Cinzel+Decorative:wght@700&display=swap');

/* ============================================================
   RESET BASE
   ============================================================ */
*  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}


/* ============================================================
   TEMA CHIARO — VALORI DI DEFAULT (nessuna classe richiesta)
   Tutto ciò che è qui è il tema base del sito.
   ============================================================ */
body {
    background-color: #f5f7fa;
    color: #121212;
    transition: background-color 0.3s, color 0.3s;
}

/* --- NAVBAR --- */
.navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #e3e5e8;
    width: 100%;
    height: 60px;
    position: relative;
    z-index: 100;
}
.navbar-container {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}
.nav-logo {
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.logo-img {
    height: 40px;
    width: auto;
    display: block;
}
.nav-logo {
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.nav-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-left: 20px;
    height: 100%;
}
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
}
.dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: calc(100% + 0px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.dropdown-btn {
    background-color: transparent;
    color: #121212;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 0;
    transition: background 0.3s, color 0.3s;
}
.arrow {
    font-size: 10px;
    margin-left: 6px;
    color: #666;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: -6px;
    transform: skewX(-8deg);
    transform-origin: top left;
    background-color: #ffffff;
    width: 100%;
    min-width: 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    border-radius: 0;
    overflow: hidden;
    margin-top: 0;
}
.dropdown-content a {
    color: #121212;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    text-align: center;
    position: relative;
    isolation: isolate;
    transform: skewX(8deg);
    transition: background-color 0.2s, color 0.2s;
}
.dropdown-content a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -9px;
    width: calc(100% + 18px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.dropdown:hover .dropdown-btn {
    background: transparent;
    color: #121212;
}
.dropdown:hover::before {
    opacity: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a:hover {
    background: transparent;
    color: #121212;
}
.dropdown-content a:hover::before {
    opacity: 1;
}
.nav-item-link {
    color: #121212;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 0;
    border: none;
    position: relative;
    isolation: isolate;
    transition: background 0.3s, color 0.3s;
}
.nav-item-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: calc(100% + 0px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.nav-item-link:hover {
    background: transparent;
    color: #121212;
}
.nav-item-link:hover::before {
    opacity: 1;
}

/* --- LANG TOGGLE BUTTON --- */
.lang-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    margin-right: 6px;
    transition: transform 0.2s;
    flex-shrink: 0;
    color: inherit;
}
.lang-toggle-btn:hover {
    transform: scale(1.18);
}

/* --- THEME SWITCH TOGGLE --- */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 4px;
}

/* Gruppo toggle+carrello agganciato a destra */
.nav-right-group {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.theme-switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 52px;
}
.theme-switch input { display: none; }
.slider {
    background-color: #d0d0d0;
    bottom: 0; cursor: pointer;
    left: 0; position: absolute;
    right: 0; top: 0;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}
.slider .sun-icon,
.slider .moon-icon {
    font-size: 13px;
    line-height: 1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.slider .moon-icon { opacity: 0.35; }
.slider .sun-icon  { opacity: 1; }
.theme-switch input:checked + .slider .sun-icon  { opacity: 0.35; }
.theme-switch input:checked + .slider .moon-icon { opacity: 1; }
.slider:before {
    background-color: #ffffff;
    bottom: 3px; content: "";
    height: 20px; left: 3px;
    position: absolute;
    transition: transform 0.3s;
    width: 20px; z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.theme-switch input:checked + .slider { background-color: #2c3040; }
.theme-switch input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* --- CARRELLO NAVBAR --- */
.nav-cart-wrapper {
    color: #121212;
    text-decoration: none;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 10px;
    cursor: pointer;
    margin-right: 20px;
}
.nav-cart-link {
    color: #121212;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cart-badge {
    background-color: #e04060;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    right: -2px;
}

/* --- TITOLI PAGINA --- */
.page-title {
    color: #121212;
    margin-bottom: 40px;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.highlight-green { color: #dc143c; }
.highlight-white { color: #121212; } /* nero in light, bianco in dark */

/* --- PAGINA DECK (classico.html, esotico.html) --- */
.decks-page-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}
.decks-sections {
    display: flex;
    flex-direction: column;
    gap: 55px;
}
.deck-section {
    width: 100%;
}
.deck-section-title {
    font-size: 22px;
    font-family: 'Cinzel Decorative', serif;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid currentColor;
    color: #121212;
}
body.dark-theme .deck-section-title {
    color: #ffffff;
}
.deck-section-topmeta .deck-section-title { color: #c9962c; }
.deck-section-good .deck-section-title { color: #2e9e5b; }
.deck-section-rouge .deck-section-title { color: #c0392b; }
body.dark-theme .deck-section-topmeta .deck-section-title { color: #f0c14b; }
body.dark-theme .deck-section-good .deck-section-title { color: #4fd884; }
body.dark-theme .deck-section-rouge .deck-section-title { color: #e05c4a; }
.decks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 30px;
}
.deck-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 200px;
    cursor: pointer;
}
.deck-image-wrapper {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    transition: transform 0.3s ease, filter 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deck-box-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.deck-name {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s;
}
.deck-card:hover .deck-image-wrapper {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.45));
}
.deck-card:hover .deck-name {
    filter: brightness(0.8);
}
@media (max-width: 900px) {
    .decks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .decks-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FOOTER (index.html) --- */
.site-footer {
    background-color: #f5f6f7;
    color: #333333;
    margin-top: 60px;
    border-top: 1px solid #e0e2e6;
}
.site-footer-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 48px 30px 36px;
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.footer-brand {
    flex: 1 1 220px;
}
.footer-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: #dc143c;
    letter-spacing: 0.5px;
}
.footer-tagline {
    margin-top: 8px;
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
}
.footer-section {
    flex: 1 1 180px;
}
.footer-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    margin-bottom: 14px;
}
.footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #444444;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s;
}
.footer-link:hover { color: #111111; }
.footer-link-ig:hover  { color: #e1306c; }
.footer-link-tt:hover  { color: #69c9d0; }
.footer-link-yt:hover  { color: #ff0000; }
.footer-link-mail:hover { color: #dc143c; }
.footer-bottom {
    border-top: 1px solid #dde0e6;
    text-align: center;
    padding: 16px 20px;
    font-size: 12px;
    color: #999999;
}
body.dark-theme .site-footer {
    background-color: #111315;
    color: #c8cdd5;
    border-top-color: #1f2226;
}
body.dark-theme .footer-tagline { color: #7a8290; }
body.dark-theme .footer-section-title { color: #7a8290; }
body.dark-theme .footer-link { color: #c8cdd5; }
body.dark-theme .footer-link:hover { color: #ffffff; }
body.dark-theme .footer-bottom { border-top-color: #2a2d33; color: #4a5060; }
@media (max-width: 768px) {
    .site-footer { margin-top: 30px; }
    .site-footer-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        padding: 24px 20px 16px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { padding: 10px 20px; }
}


.hero-carousel-wrapper {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 0 20px;
}
.hero-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    background: #e8eaed;
    aspect-ratio: 16 / 5;
    cursor: grab;
}
.hero-carousel:active { cursor: grabbing; }
.hero-track {
    display: flex;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.hero-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a1a1a;
    text-shadow: none;
    user-select: none;
}
.hero-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.hero-slide-1 { background: linear-gradient(135deg, #f5c8d0, #dc143c); }
.hero-slide-2 { background: linear-gradient(135deg, #c8daf8, #3a7bd5); }
.hero-slide-3 { background: linear-gradient(135deg, #f8c8c8, #d54040); }
.hero-slide-4 { background: linear-gradient(135deg, #e8c8f8, #8e45d5); }
/* frecce */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.38);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
}
.hero-arrow:hover {
    background: rgba(0,0,0,0.65);
    transform: translateY(-50%) scale(1.1);
}
.hero-arrow-prev { left: 14px; }
.hero-arrow-next { right: 14px; }
/* pallini */
.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}
.hero-dot.active {
    background: #111111;
    transform: scale(1.35);
}
@media (max-width: 768px) {
    .hero-carousel { aspect-ratio: 16 / 7; }
    .hero-arrow { width: 36px; height: 36px; font-size: 17px; }
}

/* --- HOME ABOUT (index.html) --- */
.home-about {
    max-width: 1100px;
    margin: 0 auto 60px;
    padding: 0 20px;
}
.home-about-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.home-about-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #dc143c;
    margin-bottom: 12px;
}
.home-about-title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    color: #121212;
    line-height: 1.25;
    margin-bottom: 20px;
}
.home-about-text {
    font-size: 15px;
    line-height: 1.75;
    color: #444444;
    margin-bottom: 12px;
}
.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.home-feature-card {
    background: #f5f6f7;
    border: 1px solid #e0e2e6;
    border-radius: 12px;
    padding: 28px 24px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.home-feature-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.home-feature-icon { font-size: 32px; margin-bottom: 14px; }
.home-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 8px;
}
.home-feature-text {
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
}
body.dark-theme .home-about-title { color: #ffffff; }
body.dark-theme .home-about-text  { color: #b0b8c8; }
body.dark-theme .home-feature-card {
    background: #1a1c1f;
    border-color: #2a2d33;
}
body.dark-theme .home-feature-title { color: #ffffff; }
body.dark-theme .home-feature-text  { color: #8a94a8; }
@media (max-width: 768px) {
    .home-features { grid-template-columns: 1fr; gap: 16px; }
    .home-about-intro { margin-bottom: 28px; }
    .home-about { margin-bottom: 36px; }
    .home-about-text {
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    .home-feature-card {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --- NEWS BUBBLE CTA (index.html) --- */
.news-bubble-section {
    text-align: right;
    padding: 10px 48px 0;
}
.news-bubble-link {
    display: inline-block;
    text-decoration: none;
    animation: news-bounce 3s ease-in-out infinite;
    transition: transform 0.15s;
}
.news-bubble-link:hover {
    transform: translateY(-3px) scale(1.04);
    animation-play-state: paused;
}
@keyframes news-bounce {
    0%, 100% { transform: rotate(-1deg) scale(1); }
    50%       { transform: rotate(1deg)  scale(1.05); }
}
.news-bubble-img {
    display: block;
    height: 80px;
    width: auto;
}
@media (max-width: 768px) {
    .news-bubble-section { text-align: center; padding: 10px 20px 102px; }
    .news-bubble-img { height: 60px; }
}

/* --- PAGINA NEWS (news.html) --- */
.news-page-container {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 20px;
    color: #121212;
}
.news-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 10px;
}
.news-card {
    background: #f5f6f7;
    border: 1px solid #e0e2e6;
    border-left: 4px solid #dc143c;
    border-radius: 10px;
    padding: 24px 28px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.news-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.news-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.news-card-tag {
    background: #dc143c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
}
.news-card-date {
    font-size: 13px;
    color: #888888;
}
.news-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #121212;
    margin-bottom: 12px;
    line-height: 1.3;
}
.news-card-body {
    font-size: 15px;
    line-height: 1.75;
    color: #444444;
}
body.dark-theme .news-page-container { color: #ffffff; }
body.dark-theme .news-card {
    background: #1a1c1f;
    border-color: #2a2d33;
    border-left-color: #dc143c;
}
body.dark-theme .news-card-title { color: #ffffff; }
body.dark-theme .news-card-body  { color: #b0b8c8; }
body.dark-theme .news-card-date  { color: #7a8290; }

/* --- PAGINA DECKLIST (deck-blackwing.html ecc.) --- */
.deck-page-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    color: #121212;
}
.deck-main-container {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: flex-start;
}
.deck-description {
    flex: 0 0 230px;
    background-color: #e8eaed;
    border-radius: 8px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #222;
    align-self: flex-start;
}
.deck-description-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 14px;
    color: #e04060;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}
.deck-description p {
    margin-bottom: 12px;
}
.deck-grid-container {
    flex: 2;
    background-color: #e8eaed;
    border-radius: 8px;
    padding: 20px;
}
.section-title {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}
.monstri-text { color: #c95a20; }
.magie-text   { color: #2e8b57; }
.trappole-text { color: #cc2060; }
.extra-text   { color: #444444; }
.side-text    { color: #666666; }
.cards-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}
.side-deck-grid, .extra-deck-grid {
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
.card-item { cursor: pointer; }
.deck-card-img {
    width: 100%;
    height: auto;
    display: block;
    transition: box-shadow 0.2s;
}
.card-item:hover .deck-card-img {
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
}
.deck-preview-container {
    flex: 1;
    max-width: 350px;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    position: sticky;
    top: 100px;
    z-index: 10;
}
.card-preview { padding: 10px; }
.card-preview-img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid #d0d3d8;
    border-radius: 4px;
}
.card-info-header {
    background-color: #e8eaed;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #d0d3d8;
    color: #121212;
}
.card-info-content { padding: 15px; }

/* Pulsanti download deck */
.deck-download-container {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed #bbb;
    justify-content: flex-start;
}
.btn-download {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-icon { margin-right: 10px; font-size: 16px; }
.btn-txt {
    background-color: #dde0e5;
    color: #121212;
    border: 1px solid #bbb;
}
.btn-txt:hover {
    background-color: #c5c9d0;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.btn-ydk {
    background-color: #1b4d3e;
    color: #e04060;
    border: 1px solid #2e7d5c;
}
.btn-ydk:hover {
    background-color: #256b56;
    color: #a3f7bf;
    box-shadow: 0 0 15px rgba(91,198,138,0.4);
    transform: translateY(-2px);
}
.btn-download:active { transform: translateY(0); }

/* Video deck */
.deck-video-container {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 16 / 9;
    background-color: #e8eaed;
    border: 2px dashed #bbb;
    border-radius: 8px;
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-placeholder-text {
    color: #888;
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* --- PAGINA TIKTOK --- */
.tiktok-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}
.section-subtitle-global {
    color: #555555;
    font-size: 15px;
    margin-left: 20px;
    margin-bottom: 40px;
}
.tiktok-grid {
    display: block;
    width: 100%;
}
.tiktok-card {
    display: inline-block;
    vertical-align: top;
    width: 31%;
    margin-right: 3%;
    margin-bottom: 30px;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.tiktok-card:nth-child(3n) { margin-right: 0; }
.tiktok-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #d0d3d8;
}
.tiktok-video-wrapper.vertical { aspect-ratio: 9 / 16; }
.tiktok-video-wrapper.is-embedded {
    aspect-ratio: auto;
    background-color: transparent;
    display: flex;
    justify-content: center;
}
.tiktok-loading-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 10px;
}
.tiktok-play-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.tiktok-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tiktok-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 22px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.tiktok-play-thumb:hover .tiktok-play-icon {
    background-color: #e04060;
    transform: translate(-50%, -50%) scale(1.08);
}
.tiktok-fallback-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    color: #e04060;
    font-weight: bold;
    text-decoration: none;
    background-color: #d0d3d8;
}
.tiktok-fallback-link:hover { text-decoration: underline; }
.tiktok-placeholder-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    border-bottom: 2px solid #e04060;
}
.tiktok-card-info { padding: 15px; }
.tiktok-card-info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #121212;
}
.tiktok-card-info p {
    margin: 0;
    font-size: 13px;
    color: #555555;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .tiktok-card { width: 100%; margin-right: 0; }
}

/* --- PAGINA MERCHANDISING --- */
.merch-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}
.merch-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}
.merch-card {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    width: 31%;
    min-width: 280px;
    max-width: 360px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}
.merch-card:hover { transform: translateY(-4px); }
.merch-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #e8eaed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.merch-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-arrow-next {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: #e04060;
    padding: 8px 12px;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s;
    z-index: 2;
}
.merch-image-wrapper:hover .gallery-arrow-next { opacity: 1; }
.gallery-arrow-next:hover { background-color: #e04060; color: #000; }
.merch-card-info { padding: 15px; }
.merch-price {
    display: block;
    color: #e04060;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.merch-card-info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #121212;
}
.merch-card-info p {
    margin: 0;
    font-size: 13px;
    color: #555555;
    line-height: 1.4;
}

/* --- MODALE PRODOTTO --- */
.product-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 9999;
    overflow-y: auto;
}
.modal-content {
    background-color: #1e2124;
    max-width: 950px;
    margin: 50px auto;
    border-radius: 12px;
    position: relative;
    padding: 25px;
    border: 1px solid #32353b;
}
.modal-close {
    position: absolute;
    right: 20px; top: 15px;
    font-size: 32px;
    color: #b9bbbe;
    cursor: pointer;
}
.modal-close:hover { color: #ffffff; }
.modal-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .modal-layout { flex-direction: column; }
    .merch-card { width: 100%; max-width: 100%; }
}
.modal-gallery {
    flex: 1.2;
    background-color: #0f1112;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    position: relative;
    min-height: 350px;
}
#modal-big-img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.modal-nav-arrows {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}
.modal-nav-arrows button {
    background-color: #2f3136;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.modal-nav-arrows button:hover { background-color: #e04060; color: black; }
.modal-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.modal-details h2 { color: white; margin: 0 0 10px 0; }
.modal-price-tag {
    font-size: 24px;
    font-weight: bold;
    color: #e04060;
    margin-bottom: 15px;
}
.modal-divider {
    height: 1px;
    background-color: #2f3136;
    margin-bottom: 15px;
}
.modal-details h3 { color: #b9bbbe; font-size: 14px; margin-bottom: 8px; }
.modal-details p  { color: #ffffff; font-size: 14px; line-height: 1.5; margin: 0; white-space: pre-line; }
.btn-buy-now {
    margin-top: auto;
    background-color: #e04060;
    color: #000000;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.btn-buy-now:hover { background-color: #b01030; }
.btn-buy-now:active { transform: scale(0.98); }

/* Pulsante acquisto diretto tramite Stripe Payment Link */
.btn-stripe-direct {
    margin-top: 10px;
    background-color: #635bff;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.btn-stripe-direct:hover { background-color: #4f46e5; color: #ffffff; text-decoration: none; }
.btn-stripe-direct:active { transform: scale(0.98); }
.merch-card.item-in-cart {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(40%);
    border: 1px dashed #e04060;
}

/* --- CARRELLO --- */
.cart-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}
.cart-main-layout {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}
@media (max-width: 768px) { .cart-main-layout { flex-direction: column; } }
.cart-items-list { flex: 1.8; }
.cart-item-row {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    gap: 20px;
}
.cart-row-img {
    width: 70px; height: 70px;
    object-fit: contain;
    background-color: #e8eaed;
    border-radius: 4px;
}
.cart-row-details { flex: 1; }
.cart-row-details h3 { margin: 0 0 5px 0; font-size: 16px; color: #121212; }
.cart-row-price { color: #e04060; font-weight: bold; font-size: 15px; }
.cart-row-remove {
    background: transparent;
    border: 1px solid #ff5555;
    color: #ff5555;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.cart-row-remove:hover { background-color: #ff5555; color: #fff; }
.cart-summary-box {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    padding: 20px;
    border-radius: 8px;
    height: fit-content;
}
.cart-summary-box h2 { margin: 0 0 20px 0; font-size: 18px; color: #121212; }
.summary-row {
    display: flex;
    justify-content: space-between;
    color: #555555;
    margin-bottom: 12px;
    font-size: 14px;
}
.total-row {
    border-top: 1px solid #e3e5e8;
    padding-top: 15px;
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #121212;
}
.total-row #summary-total-price { color: #e04060; }
.btn-checkout {
    background-color: #e04060;
    color: black;
    border: none;
    width: 100%;
    padding: 14px;
    font-weight: bold;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
}
.btn-checkout:hover { background-color: #b01030; }
.back-to-shop {
    display: block;
    text-align: center;
    color: #555555;
    font-size: 13px;
    text-decoration: none;
    margin-top: 15px;
}
.back-to-shop:hover { color: #121212; }
.cart-empty-message { color: #888; text-align: center; padding: 40px; font-style: italic; }

/* --- CHECKOUT --- */
.checkout-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}
.checkout-main-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .checkout-main-layout { flex-direction: column; }
    .checkout-billing-fields, .checkout-summary-payment { width: 100% !important; }
}
.checkout-billing-fields { flex: 1.3; width: 60%; }
.checkout-billing-fields h2 { color: #121212; margin-bottom: 25px; }
.checkout-summary-payment {
    flex: 1;
    width: 40%;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 25px;
    box-sizing: border-box;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}
.form-group label { font-size: 14px; color: #121212; margin-bottom: 8px; }
.form-group label span { color: #888; }
.form-group input, .form-group select {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}
.form-row-double { display: flex; gap: 20px; width: 100%; }
.checkout-products-order {
    border-bottom: 1px solid #e3e5e8;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.checkout-item-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
}
.chk-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #121212;
}
.chk-item-left img {
    width: 50px; height: 50px;
    object-fit: contain;
    background-color: #e8eaed;
    border-radius: 4px;
}
.chk-item-right { color: #555555; font-weight: bold; }
.checkout-totals {
    border-bottom: 1px solid #e3e5e8;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.checkout-total-row {
    display: flex;
    justify-content: space-between;
    color: #121212;
    font-size: 14px;
    margin-bottom: 10px;
}
.final-total { font-size: 18px; font-weight: bold; margin-top: 15px; }
.final-total #chk-total { color: #e04060; }
.payment-methods-box { margin-bottom: 25px; }
.payment-methods-box h3 { color: #121212; font-size: 15px; margin-bottom: 15px; }
.payment-option { margin-bottom: 15px; color: #121212; font-size: 14px; }
.payment-option label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}
.card-inputs-container {
    background-color: #f0f2f5;
    padding: 15px;
    border-radius: 6px;
    margin-top: 10px;
    border: 1px solid #dde0e5;
}
.btn-place-order {
    background-color: #e04060;
    color: black;
    border: none;
    width: 100%;
    padding: 15px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-place-order:hover { background-color: #b01030; }
.stripe-element-wrapper {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 4px;
    padding: 12px;
}
#payment-element { margin-bottom: 20px; }
#payment-message { color: #ff5555; font-size: 14px; margin-top: 10px; min-height: 20px; }
#stripe-not-configured { color: #888; font-size: 13px; font-style: italic; }
#place-order-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid #000;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- ORDINE CONFERMATO --- */
.success-container {
    max-width: 600px;
    margin: 80px auto;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.success-icon { font-size: 64px; color: #e04060; margin-bottom: 20px; }
.success-title { color: #121212; font-size: 28px; margin-bottom: 15px; }
.success-message { color: #555555; font-size: 16px; line-height: 1.6; margin-bottom: 30px; }
.order-id-box {
    background-color: #f0f2f5;
    padding: 12px;
    border-radius: 4px;
    color: #e04060;
    font-family: monospace;
    font-size: 14px;
    margin-bottom: 30px;
    border: 1px solid #dde0e5;
    display: none;
}
.btn-return-home {
    display: inline-block;
    background-color: #e04060;
    color: #121212;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}
.btn-return-home:hover { background-color: #b01030; }


/* --- HAMBURGER MENU MOBILE --- */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    margin-right: 20px;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #121212;
    border-radius: 2px;
    transition: background-color 0.3s;
}

/* --- SIDEBAR MOBILE --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 500;
}
.sidebar-overlay.active { display: block; }
.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    z-index: 600;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding: 55px 0 20px;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}
.mobile-sidebar.active { right: 0; }
.sidebar-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #121212;
    line-height: 1;
    padding: 4px;
}
.sidebar-section-title {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 20px 6px;
}
.sidebar-link {
    display: block;
    padding: 13px 20px;
    color: #121212;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-link:hover { background-color: #8b0d22; color: #ffffff; }
.sidebar-sub-link {
    display: block;
    padding: 11px 20px 11px 36px;
    color: #444444;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #eeeeee;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-sub-link:hover { background-color: #6b0a1b; color: #ffffff; }

@media (max-width: 768px) {
    .nav-menu { display: none; }
    .hamburger-btn { display: none; }
    .nav-cart-wrapper { margin-right: 0; }
    .deck-main-container { flex-direction: column; }
    .deck-description { flex: none; width: 100%; }
    .deck-preview-container { display: none; }
}

/* ============================================================
   MOBILE / TABLET NAVBAR (≤1024px)
   ============================================================ */

/* Tab mobili (Deck, News) — nascosti su desktop */
.mobile-nav-tabs {
    display: none;
    align-items: stretch;
    flex: 1;
    margin-left: 6px;
}
.mobile-deck-tab {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    color: #121212;
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
    transition: color 0.3s;
}
.mobile-deck-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: calc(100% + 0px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
/* Rotazione freccia quando il submenu è aperto */
.mobile-deck-tab .arrow {
    display: inline-block;
    transition: transform 0.22s ease;
    font-size: 9px;
    margin-left: 5px;
    color: #666;
}
.mobile-deck-tab.open .arrow {
    transform: rotate(180deg);
}
.mobile-nav-link {
    color: #121212;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
    transition: color 0.3s;
}
.mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    width: calc(100% + 0px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Sotto-menu Deck (Esotico / Classico) — nascosto su desktop, dropdown a tendina ancorato al tasto Deck */
.mobile-deck-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
}
.mobile-deck-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -6px;
    flex-direction: column;
    transform: skewX(-8deg);
    transform-origin: top left;
    background-color: #ffffff;
    min-width: 130px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.mobile-deck-submenu.active {
    max-height: 140px;
}
.mobile-deck-submenu a {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Cinzel Decorative', serif;
    color: #121212;
    text-decoration: none;
    text-align: center;
    border-bottom: 1px solid #e3e5e8;
    transition: background-color 0.2s, color 0.2s;
    position: relative;
    isolation: isolate;
    transform: skewX(8deg);
}
.mobile-deck-submenu a:last-child {
    border-bottom: none;
}
.mobile-deck-submenu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -9px;
    width: calc(100% + 18px);
    height: 100%;
    background: #29b6f6;
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.mobile-deck-submenu a:hover {
    background: transparent;
}
.mobile-deck-submenu a:hover::before {
    opacity: 1;
}

@media (max-width: 1024px) {
    /* Mostra tab mobili */
    .mobile-nav-tabs { display: flex; }
    /* Mostra il container del sotto-menu */
    .mobile-deck-submenu { display: flex; }
    /* Nascondi nav desktop, hamburger e carrello */
    .nav-menu { display: none; }
    .hamburger-btn { display: none !important; }
    .nav-cart-wrapper { display: none !important; }
    /* Piccolo margine destro al gruppo controlli */
    .nav-right-group { padding-right: 12px; }
    /* Hover sui tab mobili: parallelogramma azzurro come nel desktop */
    .mobile-deck-tab:hover::before,
    .mobile-nav-link:hover::before,
    .mobile-deck-tab.open::before {
        opacity: 1;
    }
}

/* Dark theme — mobile nav */
body.dark-theme .mobile-deck-tab { color: #e0e0e0; }
body.dark-theme .mobile-deck-tab .arrow { color: #aaa; }
body.dark-theme .mobile-nav-link { color: #e0e0e0; }
body.dark-theme .mobile-deck-submenu {
    background-color: #1f2226;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
}
body.dark-theme .mobile-deck-submenu a {
    color: #e0e0e0;
    border-bottom-color: #333;
}

/* Mobile card zoom popup (doppio tap) */
#mobile-card-zoom-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
#mobile-card-zoom-overlay.active {
    visibility: visible;
    opacity: 1;
}
#mobile-card-zoom-img {
    max-width: 82vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    transform: scale(0.85);
    transition: transform 0.22s ease;
}
#mobile-card-zoom-overlay.active #mobile-card-zoom-img {
    transform: scale(1);
}

/* ============================================================
   TEMA SCURO — override completo con .dark-theme sul body
   ============================================================ */
body.dark-theme {
    background-color: #121212;
    color: #ffffff;
}
body.dark-theme .navbar {
    background-color: #1f2226;
    border-bottom: 2px solid #333;
}
body.dark-theme .dropdown-btn { color: #e0e0e0; }
body.dark-theme .arrow { color: #aaa; }
body.dark-theme .dropdown:hover .dropdown-btn {
    background: transparent;
    color: #e0e0e0;
}
body.dark-theme .nav-item-link:hover {
    background: transparent;
    color: #e0e0e0;
}
body.dark-theme .dropdown-content a:hover {
    background: transparent;
    color: #e0e0e0;
}
body.dark-theme .dropdown-content {
    background-color: #1f2226;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    border-radius: 0;
    overflow: hidden;
}
body.dark-theme .dropdown-content a { color: #e0e0e0; }
body.dark-theme .nav-item-link { color: #e0e0e0; }
body.dark-theme .nav-cart-wrapper { color: #ffffff; }
body.dark-theme .nav-cart-link   { color: #ffffff; }

body.dark-theme .page-title     { color: #ffffff; }
body.dark-theme .highlight-white { color: #ffffff; }

body.dark-theme .deck-grid-container {
    background-color: #1a1c1f;
}
body.dark-theme .deck-description {
    background-color: #1a1c1f;
    color: #d0d0d0;
}
body.dark-theme .deck-description-title {
    color: #e04060;
    border-bottom-color: #333;
}
body.dark-theme .hero-carousel { background: #1a1c1f; }
body.dark-theme .hero-slide { color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
body.dark-theme .hero-slide-1 { background: linear-gradient(135deg, #1b3a2d, #2e7d4f); }
body.dark-theme .hero-slide-2 { background: linear-gradient(135deg, #1a2540, #2e4a8a); }
body.dark-theme .hero-slide-3 { background: linear-gradient(135deg, #3a1a1a, #8a2e2e); }
body.dark-theme .hero-slide-4 { background: linear-gradient(135deg, #2a1a3a, #5e2e8a); }
body.dark-theme .hero-dot { background: rgba(255,255,255,0.45); }
body.dark-theme .hero-dot.active { background: #ffffff; }
body.dark-theme .monstri-text { color: #f48a60; }
body.dark-theme .magie-text   { color: #e04060; }
body.dark-theme .trappole-text { color: #ff5f9e; }
body.dark-theme .extra-text   { color: #fcfcfc; }
body.dark-theme .side-text    { color: #aaaaaa; }
body.dark-theme .deck-preview-container {
    background-color: #1a1c1f;
    border-color: #333;
}
body.dark-theme .card-preview-img { border-color: #333; }
body.dark-theme .card-info-header {
    background-color: #2a2d32;
    border-color: #333;
    color: #ffffff;
}
body.dark-theme .deck-page-container { color: #ffffff; }
body.dark-theme .deck-video-container {
    background-color: #1e2124;
    border-color: #3a3f47;
}
body.dark-theme .video-placeholder-text { color: #72767d; }
body.dark-theme .deck-download-container { border-top-color: #333; }
body.dark-theme .btn-txt {
    background-color: #2a2d32;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-theme .btn-txt:hover { background-color: #3a3f47; color: #ffffff; }

body.dark-theme .section-subtitle-global { color: #b9bbbe; }
body.dark-theme .tiktok-card {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .tiktok-video-wrapper { background-color: #0f1112; }
body.dark-theme .tiktok-placeholder-media { color: #4f545c; }
body.dark-theme .tiktok-loading-placeholder { color: #6a6f76; }
body.dark-theme .tiktok-fallback-link { background-color: #0f1112; }
body.dark-theme .tiktok-card-info h3 { color: #ffffff; }
body.dark-theme .tiktok-card-info p  { color: #b9bbbe; }

body.dark-theme .merch-card {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .merch-image-wrapper { background-color: #0f1112; }
body.dark-theme .merch-card-info h3 { color: #ffffff; }
body.dark-theme .merch-card-info p  { color: #b9bbbe; }

body.dark-theme .cart-item-row {
    background-color: #1f2226;
    border-color: #333;
}
body.dark-theme .cart-row-details h3 { color: #ffffff; }
body.dark-theme .cart-row-img { background-color: #0f1112; }
body.dark-theme .cart-summary-box {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .cart-summary-box h2 { color: #ffffff; }
body.dark-theme .summary-row         { color: #b9bbbe; }
body.dark-theme .total-row           { color: #ffffff; border-top-color: #2f3136; }
body.dark-theme .back-to-shop        { color: #b9bbbe; }
body.dark-theme .back-to-shop:hover  { color: #ffffff; }

body.dark-theme .checkout-billing-fields h2 { color: #ffffff; }
body.dark-theme .checkout-summary-payment {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .form-group label   { color: #ffffff; }
body.dark-theme .checkout-products-order { border-bottom-color: #2f3136; }
body.dark-theme .chk-item-left      { color: #ffffff; }
body.dark-theme .chk-item-left img  { background-color: #0f1112; }
body.dark-theme .chk-item-right     { color: #b9bbbe; }
body.dark-theme .checkout-totals    { border-bottom-color: #2f3136; }
body.dark-theme .checkout-total-row { color: #ffffff; }
body.dark-theme .payment-methods-box h3 { color: #ffffff; }
body.dark-theme .payment-option     { color: #ffffff; }
body.dark-theme .card-inputs-container {
    background-color: #141619;
    border-color: #232528;
}

body.dark-theme .success-container {
    background-color: #1f2226;
    border-color: #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
body.dark-theme .success-title   { color: #ffffff; }
body.dark-theme .success-message { color: #aaaaaa; }
body.dark-theme .order-id-box {
    background-color: #121212;
    border-color: #25282d;
}
body.dark-theme .hamburger-btn span { background-color: #e0e0e0; }
body.dark-theme .mobile-sidebar {
    background-color: #1f2226;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
}
body.dark-theme .sidebar-close-btn { color: #e0e0e0; }
body.dark-theme .sidebar-close-btn:hover { color: #ffffff; }
body.dark-theme .sidebar-link { color: #e0e0e0; border-bottom-color: #2f3136; }
body.dark-theme .sidebar-link:hover { background-color: #8b0d22; color: #ffffff; }
body.dark-theme .sidebar-sub-link { color: #b9bbbe; border-bottom-color: #2f3136; }

/* --- PAGINA DECKBUILDER --- */
.deckbuilder-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}
.deckbuilder-page-container,
.deckbuilder-page-container * {
    font-family: 'Cinzel Decorative', serif !important;
}
.deckbuilder-page-container .page-title.highlight-green,
.deckbuilder-page-container .section-subtitle-global {
    font-family: Arial, sans-serif !important;
}
.deckbuilder-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}
.deckbuilder-left { flex: 2; min-width: 0; }
.deckbuilder-right { flex: 0 0 340px; }

.deckbuilder-counters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.db-counter-box {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.db-counter-label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #888888;
    margin-bottom: 4px;
}
.db-counter-value { font-size: 22px; font-weight: bold; color: #121212; }
.db-counter-box.db-limit-reached .db-counter-value { color: #e04060; }

.db-deck-section {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    padding: 0 0 16px;
    margin-bottom: 20px;
    overflow: hidden;
}
.db-deck-section .section-title {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #e3e5e8;
    font-size: 16px;
}
.db-cards-area {
    min-height: 90px;
    padding: 16px 20px 0;
    position: relative;
}
.db-cards-area.drag-over { background-color: rgba(224, 64, 96, 0.08); outline: 2px dashed #e04060; outline-offset: -6px; }
.db-empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: #999999;
    font-size: 14px;
    padding: 24px 0;
    margin: 0;
}
.db-cards-area .card-item { position: relative; }
.db-cards-area .card-item[draggable="true"] { cursor: grab; }

.db-panel {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.db-panel-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #888888;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.db-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid #ccc;
    font-size: 14px;
    outline: none;
}
.db-search-input:focus { border-color: #e04060; }
.db-search-count {
    font-size: 12px;
    color: #888888;
    margin: 12px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.db-search-results {
    max-height: 440px;
    overflow-y: auto;
    padding-top: 12px;
}
.db-search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #999999;
    font-size: 14px;
    padding: 40px 0;
}
.db-search-placeholder-icon { font-size: 34px; }
.db-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.db-result-item {
    min-width: 0;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    padding: 4px;
    transition: background-color 0.15s;
}
.db-result-item:hover { background-color: #f2f3f5; }
.db-result-item img {
    width: 100%;
    aspect-ratio: 421 / 614;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    transition: box-shadow 0.2s;
}
.db-result-item:hover img { box-shadow: 0 0 8px 3px rgba(0,0,0,0.3); }
.db-result-name {
    display: block;
    font-size: 10px;
    color: #555555;
    margin-top: 4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-export-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.db-export-btn:last-child { margin-bottom: 0; }
.btn-danger {
    background-color: transparent;
    color: #e04060;
    border: 1px solid #e04060;
}
.btn-danger:hover {
    background-color: #e04060;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(224,64,96,0.4);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .deckbuilder-layout { flex-direction: column; }
    .deckbuilder-right { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 600px) {
    .deckbuilder-counters { flex-direction: column; }
}

body.dark-theme .db-counter-box,
body.dark-theme .db-deck-section,
body.dark-theme .db-panel {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .db-counter-label,
body.dark-theme .db-panel-title,
body.dark-theme .db-search-count,
body.dark-theme .db-empty-msg,
body.dark-theme .db-search-placeholder { color: #9aa0a6; }
body.dark-theme .db-counter-value { color: #ffffff; }
body.dark-theme .db-deck-section .section-title { border-bottom-color: #2f3136; }
body.dark-theme .db-search-count { border-bottom-color: #33373c; }
body.dark-theme .db-search-input {
    background-color: #17191c;
    border-color: #33373c;
    color: #ffffff;
}
body.dark-theme .db-result-item:hover { background-color: #2a2d31; }
body.dark-theme .db-result-name { color: #b9bbbe; }
body.dark-theme .db-cards-area.drag-over { background-color: rgba(224, 64, 96, 0.15); }
body.dark-theme .sidebar-sub-link:hover { background-color: #6b0a1b; color: #ffffff; }

/* --- PAGINA CONTATTACI --- */
.contact-page-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}
.contact-form-box {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 30px;
    margin-top: 25px;
    box-sizing: border-box;
}
.contact-form-box .form-group textarea {
    background-color: #ffffff;
    border: 1px solid #e3e5e8;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    font-family: Arial, sans-serif;
}
.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.contact-message {
    margin-top: 14px;
    font-size: 14px;
    min-height: 18px;
}
.contact-message-success { color: #2e8b57; }
.contact-message-error { color: #e04060; }

body.dark-theme .contact-form-box {
    background-color: #1e2124;
    border-color: #2f3136;
}
body.dark-theme .contact-form-box .form-group input,
body.dark-theme .contact-form-box .form-group textarea {
    background-color: #17191c;
    border-color: #33373c;
    color: #ffffff;
}