

:root {
  --ig-top: #E8A33D;
  --ig-discount: #FF4655;
  --ig-new: #5CC8E8;
}


#ig-head {
  max-width: 1200px; margin: 0 auto; padding: 108px 2.5rem 0;
  position: relative; z-index: 1; width: 100%; flex-shrink: 0;
}
.ig-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ig-head-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.ig-head-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.8s infinite; }
.ig-head-title {
  font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 900;
  display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em;
}
.ig-head-title i { color: var(--text); }
.ig-head-sub { color: var(--text-dim); font-size: .92rem; margin-top: .45rem; max-width: 46ch; }


.ig-jump {
  position: sticky; top: 87px; z-index: 5; display: flex; gap: 4px;
  padding: 5px; border-radius: 50px; background: rgba(8,8,8,.72);
  border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow-x: auto; scrollbar-width: none;
}
.ig-jump::-webkit-scrollbar { display: none; }
.ig-jump-btn {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 50px;
  color: var(--text-muted); font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: color .2s ease, background .2s ease; cursor: pointer; position: relative; z-index: 1;
}
.ig-jump-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ig-jump-btn.active { color: var(--text); background: rgba(255,255,255,.1); }
.ig-jump-btn .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }


#ig-body { max-width: 1200px; margin: 0 auto; padding: 2.4rem 2.5rem 100px; position: relative; z-index: 1; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 1.4rem; }


.ig-section {
  position: relative; overflow: hidden;
  border: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(13,13,13,.4) 40%);
  border-radius: var(--radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  scroll-margin-top: 150px; transition: border-color .3s;
}
.ig-section:hover { border-color: rgba(255,255,255,.2); }
.ig-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--section-color, var(--blue)) 0%, transparent 85%);
}
.ig-section::after {
  content: ''; position: absolute; top: -50%; right: -10%; width: 320px; height: 320px;
  background: var(--section-color, var(--blue)); opacity: .09; filter: blur(120px); border-radius: 50%; pointer-events: none;
}

.ig-section-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--glass-border); }
.ig-section-badge {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--section-color, var(--blue)) 28%, #0A0A0A), #0A0A0A);
  border: 1px solid color-mix(in srgb, var(--section-color, var(--blue)) 55%, var(--glass-border));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35), inset 0 0 14px color-mix(in srgb, var(--section-color, var(--blue)) 30%, transparent);
  color: var(--section-color, var(--text));
}
.ig-section-badge i { width: 19px; height: 19px; }
.ig-section-titles { flex: 1; min-width: 0; }
.ig-section-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.ig-section-meta { font-size: .76rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }


.ig-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
  padding: 22px 26px;
}
.ig-empty { grid-column: 1 / -1; padding: 2.4rem 0; text-align: center; color: var(--text-muted); font-size: .85rem; }

.ig-card {
  position: relative;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden;
  background: rgba(255,255,255,.025);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ig-card:hover {
  border-color: rgba(255,255,255,.28);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  background: rgba(255,255,255,.045);
}
.ig-card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--glass); display: block; }
.ig-card-thumb-placeholder {
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.ig-card-thumb-placeholder i { width: 28px; height: 28px; opacity: .5; }

@supports not (aspect-ratio: 16 / 9) {
  .ig-card-thumb, .ig-card-thumb-placeholder { height: 0; padding-top: 56.25%; position: relative; }
  .ig-card-thumb { object-position: top; }
}
.ig-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ig-card-title {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .86rem; line-height: 1.25;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ig-card-store {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 750;
}
.ig-card-scores { display: flex; gap: 10px; font-size: .68rem; color: var(--text-dim); }
.ig-card-scores span { display: flex; align-items: center; gap: 3px; }
.ig-card-prices { margin-top: auto; display: flex; align-items: baseline; gap: 8px; margin-inline: -15px; padding: 8px 15px 0; border-top: 1px solid var(--glass-border); }
.ig-card-price-old { font-size: .74rem; color: var(--text-muted); text-decoration: line-through; }
.ig-card-price-new { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.08rem; color: var(--text); letter-spacing: -0.01em; }
.ig-card-badge {
  position: absolute; margin: 10px 0 0 10px; z-index: 2;
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 8px;
  background: rgba(10,10,10,.75); border: 1px solid rgba(255,70,85,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #FF6B78; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

@media (max-width: 640px) {
  #ig-head, #ig-body { padding-left: 1.2rem; padding-right: 1.2rem; }
  .ig-jump { position: static; }
  .ig-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 18px; }
}
