/* =============================================
       GIN LIST
       ============================================= */
    /* Smoke/nebbia effect per la sezione gin */
    .gin-smoke-bg {
      position: relative;
      overflow: hidden;
    }
    .gin-smoke-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 30%, rgba(201,168,76,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(201,168,76,0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%, rgba(180,140,60,0.05) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
    .gin-smoke-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.02) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.015) 0%, transparent 35%),
        radial-gradient(ellipse at 40% 70%, rgba(255,255,255,0.02) 0%, transparent 45%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
      animation: smokeFloat 12s ease-in-out infinite alternate;
    }
    @keyframes smokeFloat {
      0% { transform: translateY(0) scale(1); opacity: 0.6; }
      100% { transform: translateY(-20px) scale(1.05); opacity: 1; }
    }

    .gin-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 12px;
      position: relative;
      z-index: 1;
    }

    .gin-card {
      position: relative;
      padding: 12px 8px 14px;
      border: 1px solid rgba(201, 168, 76, 0.06);
      background: rgba(255,255,255,0.02);
      opacity: 0; transform: translateY(14px);
      transition: opacity 0.5s, transform 0.5s;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .gin-card.visible { opacity: 1; transform: translateY(0); }

    .gin-card-img-wrap {
      width: 100%; height: 140px;
      display: flex; align-items: flex-end; justify-content: center;
      position: relative; overflow: hidden; padding: 0 0 10px;
      background: radial-gradient(ellipse at center bottom, rgba(201,168,76,0.04) 0%, transparent 65%);
      cursor: pointer;
    }
    .gin-card-img-wrap::after {
      content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
      width: 50%; height: 10px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.04) 50%, transparent 80%);
      border-radius: 50%; pointer-events: none;
    }

    .gin-card-img {
      height: 120px; width: auto; max-width: 90%; object-fit: contain;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2));
      position: relative; z-index: 1;
      transition: transform 0.3s;
    }
    .gin-card:active .gin-card-img { transform: scale(1.05); }
    .gin-card {
      transform-style: preserve-3d;
      transition: opacity 0.5s, transform 0.4s ease-out, box-shadow 0.4s ease-out;
    }
    .gin-card.tilt-active {
      transition: opacity 0.5s, transform 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    .gin-card-info {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding-top: 8px;
    }
    .gin-card-info-left { display: flex; flex-direction: column; gap: 2px; }
    .gin-card-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
    .gin-card-price { font-size: 14px; font-weight: 500; color: var(--gold); }
    .gin-card-desc {
      font-size: 11px; font-weight: 300; color: var(--text-secondary);
      line-height: 1.5; text-align: center; padding-top: 4px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .gin-card-badge {
      display: inline-block;
      font-size: 6px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
      color: var(--bg); background: var(--gold); padding: 2px 5px; border-radius: 2px;
      margin-bottom: -16px;
      z-index: 3;
    }

    /* --- GIN SECTION: atmospheric smoke/mist background --- */
    .gin-section-bg {
      position: relative;
      overflow: hidden;
    }
    .gin-section-bg::before {
      content: '';
      position: absolute;
      inset: -40px;
      background:
        radial-gradient(ellipse 80% 50% at 15% 25%, rgba(15, 90, 65, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 70% 60% at 85% 65%, rgba(201, 168, 76, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 35% at 50% 95%, rgba(15, 90, 65, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 5% 75%, rgba(201, 168, 76, 0.12) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
      filter: blur(30px);
      animation: ginMist 10s ease-in-out infinite alternate;
    }
    .gin-section-bg::after {
      content: '';
      position: absolute;
      inset: -20px;
      background:
        radial-gradient(ellipse 60% 40% at 70% 15%, rgba(201, 168, 76, 0.15) 0%, transparent 55%),
        radial-gradient(ellipse 100% 25% at 50% 5%, rgba(15, 90, 65, 0.2) 0%, transparent 50%),
        radial-gradient(circle 40% at 25% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 90% 40%, rgba(15, 90, 65, 0.2) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
      filter: blur(25px);
      animation: ginMist2 13s ease-in-out infinite alternate;
    }

    @keyframes ginMist {
      0% { opacity: 0.7; transform: scale(1) translateY(0); }
      50% { opacity: 1; transform: scale(1.08) translateY(-15px); }
      100% { opacity: 0.8; transform: scale(1.03) translateY(8px); }
    }
    @keyframes ginMist2 {
      0% { opacity: 0.9; transform: scale(1.03) translateX(0); }
      50% { opacity: 0.6; transform: scale(0.97) translateX(15px); }
      100% { opacity: 1; transform: scale(1.05) translateX(-8px); }
    }

    /* Floating botanical particles */
    .gin-particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }
    .gin-particle-juniper {
      width: 4px; height: 4px;
      background: rgba(40, 100, 70, 0.5);
      box-shadow: 0 0 6px rgba(40, 100, 70, 0.3);
      animation: particleFloat 8s ease-in-out infinite;
    }
    .gin-particle-gold {
      width: 3px; height: 3px;
      background: rgba(201, 168, 76, 0.4);
      box-shadow: 0 0 5px rgba(201, 168, 76, 0.2);
      animation: particleFloat 10s ease-in-out infinite;
    }
    .gin-particle-light {
      width: 2px; height: 2px;
      background: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
      animation: particleFloat 12s ease-in-out infinite;
    }
    @keyframes particleFloat {
      0% { opacity: 0; transform: translateY(20px) translateX(0); }
      20% { opacity: 0.8; }
      80% { opacity: 0.6; }
      100% { opacity: 0; transform: translateY(-60px) translateX(15px); }
    }

    /* Gin cards glassmorphism upgrade */
    .gin-section-bg .gin-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(201, 168, 76, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 12px;
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    /* Old section-gold-line — replaced by creative dividers */


    /* === Fumo + particelle disattivati (performance / pulizia) === */
    .gin-smoke-bg::before, .gin-smoke-bg::after,
    .gin-section-bg::before, .gin-section-bg::after,
    .gin-particle { display: none !important; animation: none !important; }