﻿.shop-hero-banner {
      position: relative; padding: 60px 0 50px; overflow: hidden;
      background: linear-gradient(180deg, var(--bg2) 0%, var(--bg0) 100%);
      border-bottom: 1px solid var(--gold-border);
    }
    .shop-hero-banner::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(200,148,42,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .shop-hero-banner::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200,148,42,.45), transparent);
    }

    .featured-offer {
      display: grid; grid-template-columns: auto 1fr;
      gap: 36px; align-items: center;
      background: linear-gradient(135deg, rgba(200,148,42,.1), rgba(150,112,30,.04) 60%, transparent);
      border: 1px solid rgba(200,148,42,.32);
      border-radius: 18px; padding: 32px 36px;
      position: relative; overflow: hidden;
    }
    .featured-offer::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200,148,42,.55), transparent);
    }
    .featured-offer-emoji {
      font-size: 5.5rem;
      filter: drop-shadow(0 0 24px rgba(200,148,42,.5));
      animation: float 4s ease-in-out infinite;
      flex-shrink: 0;
    }
    .featured-offer-badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(200,148,42,.15); border: 1px solid rgba(200,148,42,.3);
      border-radius: 20px; padding: 5px 14px;
      font-family: 'Cinzel', serif; font-size: .68rem; font-weight: 700;
      color: var(--gold); text-transform: uppercase; letter-spacing: .1em;
      margin-bottom: 12px;
    }
    .featured-offer-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--gold); box-shadow: 0 0 6px var(--gold);
      animation: livePulse 2s ease infinite;
    }
    .featured-offer-title {
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: 1.65rem; font-weight: 700; color: var(--text-bright);
      margin-bottom: 10px; line-height: 1.2;
    }
    .featured-offer-desc {
      font-size: .88rem; color: var(--text-muted); line-height: 1.7;
      max-width: 560px; margin-bottom: 18px;
    }
    .featured-offer-pricing {
      display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
    }
    .featured-offer-pricing .old { font-size: .9rem; color: var(--text-dim); text-decoration: line-through; }
    .featured-offer-pricing .cur {
      font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700;
      color: var(--gold); text-shadow: 0 0 20px rgba(200,148,42,.35);
    }
    .featured-offer-pricing .disc {
      background: rgba(76,187,122,.14); border: 1px solid rgba(76,187,122,.3);
      border-radius: 20px; padding: 4px 12px;
      font-size: .8rem; color: var(--ok); font-weight: 700;
    }
    .featured-offer-actions { display: flex; gap: 12px; }

    .shop-tabs-wrap { margin-bottom: 32px; }

    .sub-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .sub-card {
      background: var(--panel); border: 1px solid rgba(200,148,42,.13);
      border-radius: var(--radius-xl); padding: 32px 28px;
      position: relative; overflow: hidden;
      transition: all .25s cubic-bezier(.2,.8,.2,1);
      display: flex; flex-direction: column; gap: 0;
    }
    .sub-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(200,148,42,.2), transparent);
      transition: background .25s ease;
    }
    .sub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-gold); }
    .sub-card.featured { border-color: rgba(200,148,42,.4); }
    .sub-card.featured::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .sub-card-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px; border-radius: 20px;
      font-family: 'Cinzel', serif; font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .1em;
      margin-bottom: 18px; align-self: flex-start;
    }
    .sub-price { font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
    .sub-price .per { font-size: .9rem; font-family: 'Inter', sans-serif; font-weight: 400; color: var(--text-muted); }
    .sub-desc  { font-size: .84rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 24px; }
    .sub-perks { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .sub-perk  { display: flex; align-items: center; gap: 10px; font-size: .83rem; color: var(--text-muted); }
    .sub-perk-ok { color: var(--ok); font-size: .78rem; flex-shrink: 0; }
    .sub-perk-no { color: var(--bg5);  font-size: .78rem; flex-shrink: 0; }
    .sub-perk strong { color: var(--text-bright); }

    .gem-packs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .gem-pack {
      background: var(--bg2); border: 1px solid var(--bg5);
      border-radius: var(--radius-lg); padding: 20px 18px;
      cursor: pointer; transition: all .2s ease;
      display: flex; flex-direction: column; gap: 6px;
      position: relative;
    }
    .gem-pack:hover { border-color: var(--gold-border); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
    .gem-pack.best  { border-color: rgba(200,148,42,.35); background: rgba(200,148,42,.05); }
    .gem-pack.best::before {
      content: 'Meilleure valeur';
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      background: linear-gradient(135deg, var(--gold-bright), var(--gold));
      color: #0a0500; font-family: 'Cinzel', serif; font-size: .6rem; font-weight: 700;
      padding: 3px 12px; border-radius: 20px; white-space: nowrap; letter-spacing: .05em;
    }
    .gem-pack-amount { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); }
    .gem-pack-bonus  { font-size: .72rem; color: var(--ok); font-weight: 600; }
    .gem-pack-price  { font-size: .88rem; color: var(--text-bright); font-weight: 600; margin-top: 4px; }

    .shop-section-sep {
      display: flex; align-items: center; gap: 14px;
      font-family: 'Cinzel', serif; font-size: .68rem;
      text-transform: uppercase; letter-spacing: .18em; color: var(--gold-dim);
      margin: 36px 0 20px;
    }
    .shop-section-sep::before, .shop-section-sep::after { content: ''; flex: 1; height: 1px; background: rgba(200,148,42,.1); }

    .shop-card-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.55; padding: 0 18px 14px; }

    /* Sidebar gem widget */
    .gem-pack-mini {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 0; border-bottom: 1px solid var(--bg3);
      cursor: pointer; transition: color .15s ease;
    }
    .gem-pack-mini:last-child { border-bottom: none; }
    .gem-pack-mini:hover .gem-mini-amount { color: var(--gold); }
    .gem-mini-amount { font-family: 'Cinzel', serif; font-size: .84rem; font-weight: 700; color: var(--text-bright); transition: color .15s; }
    .gem-mini-bonus  { font-size: .66rem; color: var(--ok); font-weight: 600; }
    .gem-mini-price  { font-size: .82rem; color: var(--text-muted); }

    @media (max-width: 900px) {
      .sub-grid          { grid-template-columns: 1fr; }
      .gem-packs-grid    { grid-template-columns: repeat(2,1fr); }
      .featured-offer    { grid-template-columns: 1fr; }
      .featured-offer-emoji { font-size: 4rem; text-align: center; }
    }
