/* [PL] Królestwo Polskie – sklep (sklep.html), wersja 3. Dokłada się do style.css: węgiel i brąz, kremowy pergamin,
   karmazyn jako akcent, Eczar w nagłówkach. Kolor pakietu (sklep.json → "kolor") trafia na kartę jako zmienna --pk:
   tarcza herbowa, pasek u góry karty, poświata i znaczniki korzyści. Bez color-mix() poświata jest neutralna. */

/* ================================================================ pasek: „Sklep” jako bieżąca strona */
.bar-nav a[aria-current="page"] { color: #fff; }
.bar-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-nav a[aria-current="page"] { color: var(--red-lt); }
.foot-nav a[aria-current="page"] { color: var(--on); }

/* ================================================================ hero */
.shop-hero { position: relative; display: grid; align-items: end; min-height: clamp(560px, 72vh, 780px); overflow: hidden; isolation: isolate; background: #0e0b09; }
.shop-hero .hero-art img { object-position: 64% 30%; transform-origin: 60% 36%; }
.shop-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(10, 8, 6, 0.8) 0, rgba(10, 8, 6, 0) 170px),
  linear-gradient(90deg, rgba(12, 9, 7, 0.92) 0%, rgba(12, 9, 7, 0.66) 34%, rgba(12, 9, 7, 0.1) 64%),
  linear-gradient(0deg, #120e0b 0%, rgba(18, 14, 11, 0.9) 24%, rgba(18, 14, 11, 0) 62%); }
.shop-hero-in { padding: calc(var(--bar-h) + 72px) 0 calc(150px + clamp(26px, 3vw, 44px)); }
.shop-hero .pill .i { width: 16px; height: 16px; color: var(--red-txt); }
.shop-title { font: 700 clamp(60px, 8.4vw, 140px)/0.86 var(--f-d); letter-spacing: -0.03em; color: #f6efe3; text-wrap: balance; }
.shop-title em { font-style: normal; color: var(--red-lt); }
.shop-lead { max-width: 33em; margin-top: clamp(20px, 2.6vh, 30px); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: #e9e0d0; }

/* ================================================================ karty pakietów (nachodzą na hero) */
.shop-tiers { padding-top: 0; }
.tier-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; margin-top: -150px; }
.tier {
  --pk: #59616a;
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  padding: 30px clamp(22px, 2.2vw, 32px) 26px; border-radius: 18px;
  background: linear-gradient(180deg, #2a2019 0%, #1c1510 100%);
  box-shadow: inset 0 4px 0 var(--pk), inset 0 0 0 1px var(--line), 0 50px 80px -40px rgba(0, 0, 0, 0.95);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}
.tier::before { content: ""; position: absolute; inset: 9px 8px 8px; border: 1.5px dashed rgba(239, 230, 214, 0.1); border-radius: 11px; pointer-events: none; }
.tier::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 260px; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 100% at 0% 0%, rgba(239, 230, 214, 0.07), transparent 70%);
  background: radial-gradient(110% 100% at 0% 0%, color-mix(in srgb, var(--pk) 30%, transparent), transparent 70%);
}
.tier-hd { display: flex; align-items: flex-start; gap: 14px; }
.tier-arms { width: 66px; height: auto; flex: none; overflow: visible; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); }
.tier-arms .f { fill: var(--pk); }
.tier-arms .s { fill: url(#tier-sheen); }
.tier-arms .c { fill: none; stroke: #f6efe3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tier-arms .o { fill: none; stroke: rgba(239, 230, 214, 0.72); stroke-width: 3; }
.tier-flag { align-self: center; padding: 7px 11px 6px; border-radius: 4px; font: 650 12.5px/1 var(--f-ui); font-stretch: 86%; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--red); box-shadow: 0 6px 16px -6px rgba(166, 31, 26, 0.8); }
.tier-n { margin-left: auto; font: 600 14px/1 var(--f-ui); color: var(--on-3); font-variant-numeric: tabular-nums; }
.tier-name { margin-top: 22px; font: 700 clamp(32px, 2.8vw, 42px)/1 var(--f-d); letter-spacing: -0.015em; }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.tier-amt { font: 800 clamp(60px, 5vw, 78px)/0.85 var(--f-d); letter-spacing: -0.03em; color: #fff; font-variant-numeric: lining-nums; }
.tier-cur { font: 700 26px/1 var(--f-d); color: var(--on); }
.tier-per { font-size: 15px; color: var(--on-3); }
.tier-list { display: grid; gap: 13px; margin-top: 20px; }
.tier-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--on-2); }
.tier-list .i { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 6px; stroke-width: 2.6; color: #fff; background: var(--pk); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.tier-act { margin-top: auto; padding-top: 26px; }
.tier-btn { width: 100%; height: auto; min-height: 52px; padding: 12px 18px; white-space: normal; text-align: center; line-height: 1.25; }
.tier-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.4; text-align: center; color: var(--on-3); }
.tier-note .i { width: 16px; height: 16px; margin-top: 1px; color: var(--red-txt); }
/* pakiet polecany: karmazynowa ramka i lekko uniesiona karta */
.tier.is-top { background: linear-gradient(180deg, #34261d 0%, #1f1712 100%); box-shadow: inset 0 4px 0 var(--pk), inset 0 0 0 1.5px rgba(220, 74, 61, 0.85), 0 0 0 6px rgba(166, 31, 26, 0.12), 0 60px 90px -40px #000; }
.tier.is-top::before { border-color: rgba(220, 74, 61, 0.22); }
@media (min-width: 981px) {
  .tier.is-top { transform: translateY(-16px); }
  .tier:hover { transform: translateY(-4px); }
  .tier.is-top:hover { transform: translateY(-20px); }
}

/* ================================================================ szybsza kolejka */
.queue {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(26px, 3vw, 40px) clamp(24px, 3.4vw, 46px); border-radius: 18px;
  background: var(--noise), linear-gradient(135deg, #2c1e16 0%, #1a130f 100%); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.queue::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(239, 230, 214, 0.13); border-radius: 11px; pointer-events: none; }
.queue-txt, .seats { position: relative; }
.queue-kick { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-3); }
.queue-kick .i { width: 18px; height: 18px; color: var(--red-txt); }
.queue-title { margin-top: 8px; font: 700 clamp(30px, 3vw, 46px)/1 var(--f-d); letter-spacing: -0.015em; }
.queue-txt p:last-child { max-width: 40ch; margin-top: 14px; font-size: 17px; color: var(--on-2); }
.seats { padding: 18px; border-radius: 12px; background: rgba(10, 8, 6, 0.45); box-shadow: inset 0 0 0 1px var(--line); }
.seats-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; }
.seats-grid i, .seats-key i { display: block; aspect-ratio: 3 / 4; border-radius: 4px; background: rgba(239, 230, 214, 0.1); box-shadow: inset 0 0 0 1px rgba(239, 230, 214, 0.15); }
.seats-grid i.vip, .seats-key i.vip { background: var(--red-hi); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 14px rgba(220, 74, 61, 0.5); }
.seats-key { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 14px; font-size: 14px; color: var(--on-3); }
.seats-key span { display: inline-flex; align-items: center; gap: 8px; }
.seats-key i { width: 11px; flex: none; border-radius: 3px; }
.seats-key b { font: 700 17px/1 var(--f-d); color: var(--on); }

/* ================================================================ jak to działa */
.shop-how .steps { margin-top: 8px; }

/* ================================================================ RWD */
@media (max-width: 980px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; margin-inline: auto; gap: 18px; }
  .queue { grid-template-columns: minmax(0, 1fr); max-width: 580px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .shop-hero { min-height: 0; }
  .shop-hero .hero-art img { object-position: 58% 30%; transform-origin: 58% 36%; }
  .shop-scrim { background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.75) 0, rgba(10, 8, 6, 0) 140px),
    linear-gradient(0deg, #120e0b 0%, rgba(18, 14, 11, 0.94) 38%, rgba(18, 14, 11, 0.45) 66%, rgba(18, 14, 11, 0.1) 100%); }
  .shop-hero-in { padding: calc(var(--bar-h) + 150px) 0 126px; }
  .shop-title { font-size: 15.5vw; }
  .shop-lead { font-size: 16.5px; }
  .tier-grid { margin-top: -96px; }
}
@media (max-width: 560px) {
  .tier { padding-inline: 20px; }
  .seats { padding: 14px; }
  .seats-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px 8px; }
  .seats-grid i { aspect-ratio: 1; }
}