/* Skip-links (unchanged behavior, tidier look) */
    .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{position:static;width:auto;height:auto;padding:.5rem .75rem;background:#0f172a;color:#fff;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}

    /* Fancy wrapper */
    .fancy-tabs {
      --surface:#0e1324;
      --card:#111832;
      --muted:#94a3b8;
      --text:#e6edf7;
      --accent:#6E7BFF;
      --ring: rgba(110,123,255,.35);
      margin-block: 1.25rem 2.5rem;
      border-radius: 18px;
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(110,123,255,.12), transparent 40%),
        radial-gradient(1000px 500px at 110% 0%, rgba(0,168,255,.10), transparent 40%),
        var(--surface);
      box-shadow: 0 20px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.05);
    }

    /* Tab bar container (uses your .slot-layout.tabs) */
    .fancy-tabs .tabs {
      position: relative;
      grid-template-columns: repeat(6, minmax(120px,1fr)); /* keep your grid model; responsive JS still works */
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding: .25rem;
      gap: .25rem;
      align-items: end;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    /* Hide extra native scroll chrome, keep accessible scrolling */
    .fancy-tabs .tabs::-webkit-scrollbar {height: 8px}
    .fancy-tabs .tabs::-webkit-scrollbar-thumb {background: rgba(255,255,255,.12); border-radius: 8px}

    /* Individual tab */
    .fancy-tabs .tab-link {
      /* keep required class names; just re-skin */
      position: relative;
      border: 1px solid transparent;  /* preserve your original property but visually transparent */
      border-bottom: none;
      border-radius: 10px;
      color: var(--muted);
      background: transparent;
      padding: .75rem .9rem;
      font-weight: 600;
      letter-spacing:.01em;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition: color .2s ease, background .2s ease, transform .12s ease;
      white-space: nowrap;
      outline: none;
    }
    .fancy-tabs .tab-link i {opacity:.9; font-size: .95rem}

    .fancy-tabs .tab-link:hover{color:#cfe1ff;background:rgba(255,255,255,.04)}
    .fancy-tabs .tab-link:focus{box-shadow: 0 0 0 3px var(--ring)}
    .fancy-tabs .tab-link.active{
      color: #ffffff;
      background: linear-gradient(180deg, rgba(110,123,255,.18), rgba(110,123,255,.10));
      border-color: rgba(110,123,255,.35);
    }
    /* Ink bar */
    .fancy-tabs .ink-bar{
      position:absolute;bottom:0;left:0;height:3px;width:120px;background:linear-gradient(90deg,#7cafff,#6E7BFF);
      border-radius: 999px;box-shadow: 0 6px 18px rgba(110,123,255,.45);
      transform: translateX(0);transition: transform .25s ease,width .25s ease;
    }

    /* Content surface */
    .fancy-tabs .tabs-content{
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      padding: 1.15rem 0 1.35rem;
    }
    .fancy-tabs .tab-content{
      color: var(--text);
      border: 1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        var(--card);
      border-radius: 14px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
      padding: 1.15rem 1.25rem;
      margin:0 1.15rem 0 1.15rem;
    }
    .fancy-tabs h4{margin:.25rem 0 .5rem;font-size:1.05rem;color:#fff;}
    .fancy-badge{
      display:inline-flex;align-items:center;gap:.4rem;
      padding:.3rem .55rem;border-radius:999px;
      font-size:.75rem;font-weight:600;color:#0b1220;background:#c7d2fe;
    }
    .fancy-meta{color:var(--muted);font-size:.9rem;margin:.5rem 0 1rem}

    /* mini grid cards inside tabs */
    .mini-card{
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      border-radius:12px;
      padding:.8rem;
      display:flex;gap:.75rem;align-items:center
    }
    .mini-card img{width:64px;height:64px;border-radius:10px;display:block}
    .mini-card h5{margin:.1rem 0 .2rem;font-size:.98rem;color:#fff;}
    .mini-card p{margin:0;color:var(--muted);font-size:.86rem}
    .price{font-weight:800}