@media (max-width: 500px) {

    /* ================================================================== */
    /* ============================== MARQUEE =========================== */
    /* ================================================================== */

    .marquee {
        height: 10vw;
    }

    .marquee__item {
        font-size: 2.3vw;
    }

    /* ================================================================== */
    /* ============================= NAVBAR ============================= */
    /* ================================================================== */

    nav {
        width: 100%;
        height: 10vw;

        padding: 20vw 7vw;
    }

    .nav-left {
        gap: 5vw;
    }

    .nav-left img {
        width: 17vw;
        height: auto;
    }

    .nav-left h4 {
        font-size: 4.6vw;
    }

    .nav-left-text {
        gap: 0.5vw;
    }

    .nav-left-text-online {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1vw;
    }

    .nav-dot {
        width: 2.5vw;
        height: 2.5vw;
        background: #00C700;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-dot::after {
        width: 1.6vw;
        height: 1.6vw;
    }

    .nav-left-text-online p {
        font-size: 3vw;
        font-weight: 600;
        color: #383838;
    }

    .nav-left-text-online p span {
        font-size: 3vw;
        font-weight: 800;
        color: #1FCE1F;
    }

    .nav-right {
        display: block;
    }

    .nav-right ul { display: block; }
    .nav-right ul > li { display: none; }
    .nav-buttons li:nth-of-type(1) { display: none; }

    .nav-buttons li:nth-of-type(2) button {
        position: fixed;
        bottom: 5vw;
        right: 5vw;
        z-index: 99999;

        width: 16vw;
        height: 16vw;
    }

    .page-cart .nav-buttons li:nth-of-type(2) button {
        display: none;
    }

    .nav-buttons li:nth-of-type(2) button img {
        width: 8vw;
    }

    .nav-buttons li:nth-of-type(2) button .cart-badge {
        top: -2vw;
        right: -1vw;
        font-size: 6vw;
        -webkit-text-stroke: 0.7vw #4A4A4A;
    }

    .coin-toggle {
        bottom: 5vw;
        left: 5vw;
        width: 11vw;
        height: 11vw;
        box-shadow: 0 0.6vw 0 #4A4A4A;
    }

    .coin-toggle img {
        width: 6.5vw;
    }

    .coin-toggle.anim-toggle { bottom: 5vw !important; }
    .coin-toggle.cookie-toggle { bottom: 18vw !important; }
    .coin-toggle:not(.anim-toggle):not(.cookie-toggle) { bottom: 31vw !important; }

    .mobile-panel { z-index: 100001; }
    .voucher-modal { z-index: 100001; }
    .addcart-modal { z-index: 100001; }
    .cart-overlay { z-index: 100000; }
    .cart-panel { z-index: 100001; }
    .order-modal { z-index: 100001; }

    .nav-ham {
        display: flex;
    }

    .nav-ham svg {
        width: 6vw;
        height: auto;
    }

    /* ================================================================== */
    /* =============================== HOME ============================= */
    /* ================================================================== */

    .home {
        width: 100%;
        height: auto;

        padding: 35vw 7vw 2vw 7vw;
    }

    .home-grid {
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }

    .home-card--main    { order: 1; }
    .home-card--shop    { order: 2; }
    .home-card--discord { order: 3; }

    .home-card {
        width: 100%;
        height: auto;
        min-height: 52vw;
        border: 2px solid #4A4A4A;

        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;

        padding: 0;

        box-shadow: 0 0.05vw 0 #4A4A4A;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .home-card:hover {
        transform: translateY(-0.22vw);
        box-shadow: 0 0.3vw 0 #4A4A4A;
    }

    .home-card:active {
        transform: translateY(0.1vw);
        box-shadow: 0 0.1vw 0 #4A4A4A;
    }

    .home-card-background {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .home-card-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;

        transform: scale(1.1);
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .home-card:hover .home-card-background img {
        transform: scale(1.1) translate(3%, -3%);
    }

    .home-card-render {
        display: none;
    }

    .home-card-render img, .home-card-render video {
        display: block;
    }

    .home-card-text {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 2vw;

        padding: 7vw 6vw;
    }

    .home-card--main {
        grid-column: 1;
        grid-row: 1;
    }

    .home-card--main .home-card-render  {
        left: -10%;
        bottom: 0;
    }

    .home-card--main .home-card-render img, .home-card--main .home-card-render video {
        width: 11vw;
        height: auto;
    }

    .home-card--main .home-card-text {
        padding: 7vw 6vw;
    }

    .home-card-text p {
        font-size: 3.2vw;
        font-weight: 700;
        color: rgb(255, 255, 255, 0.9);
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);
        transform: none;
    }

    .home-card--main .home-card-text p span {
        font-weight: 800;
    }

    .home-card-text h2 {
        font-family: 'FiveByFive', sans-serif;
        font-weight: 500;
        color: #FFFFFF;
        text-shadow: 0 0.7vw 0 rgba(0, 0, 0, 0.25);
    }

    .home-card--main .home-card-text h2 {
        font-size: 8vw;
        line-height: 100%;
    }

    .home-card--main .home-card-text h2     { order: 1; }
    .home-card--main .home-card-text p      { order: 2; }
    .home-card--main .home-card-text button { order: 3; }

    .home-card-text button {
        background: #FFFFFF;
        outline: none;
        border: 2px solid #434343;
        cursor: pointer;

        font-size: 3.6vw;
        font-weight: 700;
        color: #434343;

        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 0 5vw;

        box-shadow: 0 0.5vw 0 #434343;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
    }

    .home-card-text button svg {
        width: 5vw;
        height: auto;
        transition: transform 0.25s ease;
    }

    .home-card-text button img {
        width: 5.5vw;
        height: auto;
        transition: transform 0.25s ease;
    }

    .home-card-text button:hover {
        background: #F2F2F2;
        transform: translateY(-0.2vw);
        box-shadow: 0 0.3vw 0 #434343;
    }

    .home-card-text button:hover svg,
    .home-card-text button:hover img {
        transform: translateX(0.4vw);
    }

    .home-card-text button:active {
        transform: translateY(0.1vw);
        box-shadow: 0 0.1vw 0 #434343;
    }

    .home-card--main .home-card-text button {
        width: 100%;
        height: 13vw;
        margin-top: 2vw;
    }

    .copy-ip-btn,
    .copy-ip-btn svg path {
        transition: background 0.25s ease, border-color 0.25s ease,
                    color 0.25s ease, stroke 0.25s ease, box-shadow 0.25s ease,
                    width 0.25s ease;
    }

    .copy-ip-btn .ip-text {
        display: inline-block;
        transition: opacity 0.16s ease, transform 0.16s ease, color 0.25s ease;
        will-change: opacity, transform;
    }

    .copy-ip-btn .ip-text.is-leaving {
        opacity: 0;
        transform: translateY(-0.55vw);
    }

    .copy-ip-btn .ip-text.is-entering {
        opacity: 0;
        transform: translateY(0.55vw);
    }

    .home-card-text button.copy-ip-btn.is-copied,
    .home-card-text button.copy-ip-btn.is-copied:hover {
        background: #3FBF46;
        border-color: #2C8A31;
        box-shadow: 0 0.5vw 0 #2C8A31;
        width: 100%;
    }

    .copy-ip-btn.is-copied .ip-text {
        color: #FFFFFF;
    }

    .copy-ip-btn.is-copied svg path {
        stroke: #FFFFFF;
    }

    .home-card--discord {
        grid-column: 1;
        grid-row: 2;
    }

    .home-card--discord .home-card-render  {
        right: -5%;
        bottom: 0;
    }

    .home-card--discord .home-card-render img, .home-card--discord .home-card-render video {
        width: 12vw;
        height: auto;
    }

    .home-card--discord .home-card-text {
        padding: 7vw 6vw;
    }

    .home-card--discord .home-card-text h2 {
        font-size: 8vw;
        line-height: 105%;
    }

    .home-card--discord .home-card-text button {
        width: 100%;
        height: 13vw;
        margin-top: 2vw;
    }

    .home-card--shop {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .home-card--shop .home-card-render  {
        right: -9%;
        bottom: 0;
    }

    .home-card--shop .home-card-render img, .home-card--shop .home-card-render video {
        width: 22vw;
        height: auto;
    }

    .home-card--shop .home-card-text {
        padding: 7vw 6vw;
    }

    .home-card--shop .home-card-text h2 {
        font-size: 0;
        line-height: 105%;
    }

    .home-card--shop .home-card-text h2::after {
        content: "NASZ SKLEP";
        font-size: 8vw;
    }

    .home-card--shop .home-card-text p {
        margin-top: 1vw;
        transform: translateY(0vw);
    }

    .home-card--shop .home-card-text button {
        width: 100%;
        height: 13vw;
        margin-top: 2vw;
    }

    .arrow-scrolldown {
        padding: 10vw 0 0 0;
    }

    .arrow-scrolldown img {
        width: 10vw;
        height: auto;

    }

    /* ================================================================== */
    /* ============================ FEATURED =========================== */
    /* ================================================================== */

    .featured {
        width: 100%;
        height: auto;

        padding: 10vw 7vw;
    }

    .featured-headline {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5vw;
    }

    .featured-headline-line {
        display: none;
    }

    .featured-headline h1 {
        font-size: 8vw;
        text-align: center;
    }

    .featured-tiles {
        margin-top: 10vw;

        width: 100%;
        height: auto;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 8vw;
    }

    .featured-tile {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: flex-start;
        row-gap: 0;
        column-gap: 2.4vw;

        padding: 0 0 2vw 0;
    }

    .featured-tile-top,
    .featured-tile-name,
    .featured-tile-set,
    .featured-tile-desc {
        flex: 0 0 100%;
    }

    .featured-tile-top {
        width: 100%;
        height: 35vw;
    }

    .featured-tile-render img {
        display: block;
        width: 40vw;
        height: auto;
    }

    .featured-tile-name {
        width: 100%;
        height: auto;

        padding: 3vw 1vw;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .featured-tile-name h4 {
        font-family: 'FiveByFive', sans-serif;
        font-size: 4vw;
        font-weight: 500;
        color: #464646;
        text-shadow: 0 0.1vw 0 rgba(0, 0, 0, 0.25);
        text-align: center;
    }

    .featured-tile-set {
        width: 100%;
        height: auto;

        background: #FFBE31;
        border-top: 2px solid #464646;
        border-bottom: 2px solid #464646;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        padding: 3vw 1vw;
    }

    .featured-tile-set h5 {
        font-size: 3vw;
        font-weight: 600;
        color: #FFFFFF;
        text-shadow: 0 0.1vw 0 rgba(0, 0, 0, 0.25);
    }

    .featured-tile-desc {
        width: 100%;
        height: auto;

        padding: 2vw 1vw;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .featured-tile-desc ul {
        list-style-type: none;

        height: 8vw;
        overflow: auto;

        display: flex;
        flex-direction: column;

        padding: 0 1vw;
    }

    .featured-tile-desc ul li p {
        font-size: 3vw;
        font-weight: 600;
        color: rgb(70, 70, 70, 0.83);
    }

    .featured-tile-price {
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .featured-tile-price h2 {
        font-family: 'Rubik One', sans-serif;
        font-size: 6vw;
        font-weight: 400;
        color: #FFA600;

        line-height: 115%;

        -webkit-text-stroke: 0.7vw #464646;
        paint-order: stroke fill;
        text-shadow: 0 0.3vw 0 rgba(0, 0, 0, 0.25);
    }

    .featured-tile-buy {
        margin-top: 0;
        width: auto;
        height: auto;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .featured-tile-buy button {
        position: relative;
        overflow: hidden;

        width: auto;
        height: auto;

        background: #FFA600;
        outline: none;
        border: 2px solid #464646;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;

        font-family: 'Rubik One', sans-serif;
        font-size: 3vw;
        font-weight: 400;
        color: #FFFFFF;

        -webkit-text-stroke: 0.7vw #4A4A4A;
        paint-order: stroke fill;
        text-shadow: 0 0.3vw 0 rgba(0, 0, 0, 0.25);

        padding: 2.5vw 4vw;

        box-shadow: 0 0.05vw 0 #464646;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
    }

    .featured-tile-buy button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 55%;
        height: 100%;

        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
        transform: skewX(-22deg);
        pointer-events: none;

        transition: left 0.6s ease;
    }

    .featured-tile-buy button:hover {
        background: #FFB733;
        transform: translateY(-0.2vw);
        box-shadow: 0 0.4vw 0 #464646;
    }

    .featured-tile-buy button:hover::before {
        left: 135%;
    }

    .featured-tile-buy button:active {
        transform: translateY(0.1vw);
        box-shadow: 0 0.1vw 0 #464646;
    }

    /* ================================================================== */
    /* ============================ SEE MORE ============================ */
    /* ================================================================== */

    .more {
        padding: 4vw 7vw 8vw 7vw;
        gap: 2.5vw;
    }

    .more h1 {
        font-size: 7vw;
        margin-top: 6vw;
    }

    .more p {
        font-size: 3.2vw;
    }

    .more button {
        width: 56vw;
        font-size: 4vw;
        padding: 3vw 0;
        margin-top: 3vw;

        -webkit-text-stroke: 0.6vw #4A4A4A;
        text-shadow: 0 0.6vw 0 rgba(0, 0, 0, 0.25);
    }

    /* ================================================================== */
    /* ============================= SOCIALS ============================ */
    /* ================================================================== */

    .socials {
        padding: 6vw 7vw 10vw 7vw;

        display: flex;
        flex-direction: column;
    }

    .socials-headline {
        display: contents;
    }

    .socials-headline-left {
        order: 1;
        align-items: center;
        text-align: center;
    }

    .socials-headline-left h1 {
        font-size: 6.5vw;
    }

    .socials-headline-left-buttons {
        margin-top: 4vw;
        justify-content: center;
        gap: 3vw;
    }

    .socials-headline-left-buttons button {
        height: 10vw;
        font-size: 3.2vw;
        gap: 2.5vw;
        padding: 0 6vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .socials-headline-left-buttons button:nth-of-type(1) img { width: 5vw; }
    .socials-headline-left-buttons button:nth-of-type(2) img { width: 7vw; }

    .socials-container {
        order: 2;
        margin-top: 8vw;
    }

    .socials-panel--tiktok .social-card  { width: 100%; }
    .socials-panel--youtube .social-card { width: 100%; }

    .social-card { scroll-snap-align: center; gap: 1.5vw; }

    .social-card-title { font-size: 3.4vw; }
    .social-card-sub   { font-size: 2.8vw; }

    .social-card-badge {
        top: 1.5vw;
        left: 1.5vw;
        padding: 0.6vw 1.6vw;

        font-size: 2.4vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);
    }

    .social-card-play { width: 12vw; height: 12vw; }
    .social-card-play::before {
        margin-left: 1vw;
        border-left: 4vw solid #464646;
        border-top: 2.4vw solid transparent;
        border-bottom: 2.4vw solid transparent;
    }

    .socials-arrow {
        width: 9vw;
        height: 9vw;
        top: calc(50% - 4.5vw);

        box-shadow: 0 0.5vw 0 #464646;
    }

    .socials-arrow[data-dir="prev"] { 
        left: -1vw; 
    }
    .socials-arrow[data-dir="next"] { 
        right: -1vw; 
    }

    .socials-arrow img { width: 3.4vw; }

    .socials-headline-right {
        order: 3;
        width: 100%;
        height: auto;

        margin-top: 9vw;
        padding: 5vw 7vw;
    }

    .socials-headline-right-decoration img { 
        width: 14vw; 
    }

    .socials-headline-right-decoration img:nth-of-type(1) {
        bottom: -20%;
        left: -8%;
    }

    .socials-headline-right-decoration img:nth-of-type(2) {
        top: -20%;
        right: -3%;
    }

    .socials-headline-text {
        gap: 2vw;
        align-items: center;
    }

    .socials-headline-text h4 {
        font-size: 6vw;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .socials-headline-links { justify-content: center; gap: 4vw; }
    .socials-headline-links img { width: 8vw; }

    /* ================================================================== */
    /* ============================== FOOTER ============================ */
    /* ================================================================== */

    footer {
        padding: 0 7vw 6vw 7vw;
    }

    .footer-top {
        flex-direction: column;
        gap: 5vw;
    }

    .footer-top-left,
    .footer-top-right {
        width: 100%;
        height: auto;
    }

    .footer-top-left-decorations { display: none; }

    .footer-top-left-cont {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 4vw;

        padding: 6vw;
    }

    .footer-top-left-cont img { width: 24vw; }

    .footer-top-left-text {
        align-items: center;
        gap: 4vw;
    }

    .footer-top-left-text h2 { font-size: 8vw; }

    .footer-top-left-bottom {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5vw;
    }

    .footer-top-left-bottom button {
        order: 2;
        flex-basis: 100%;

        width: 100%;
        height: 12vw;
        font-size: 4vw;

        justify-content: center;
        gap: 3vw;
        padding: 0 6vw;
    }

    .footer-top-left-bottom button img { width: 5vw; }

    .footer-top-left-bottom a { order: 1; }
    .footer-top-left-bottom a:nth-of-type(1) svg { width: 9vw; }
    .footer-top-left-bottom a:nth-of-type(2) svg { width: 8vw; }
    .footer-top-left-bottom a:nth-of-type(3) svg { width: 9vw; }
    .footer-top-left-bottom a:nth-of-type(4) svg { width: 7.5vw; }

    .footer-top-right {
        gap: 4vw;
        padding: 6vw;
    }

    .footer-top-right h2 { font-size: 7vw; }

    .footer-top-right button {
        width: 100%;
        height: 12vw;
        font-size: 4vw;

        justify-content: space-between;
        padding: 0 6vw;
    }

    .footer-top-right button img { width: 5vw; }

    .footer-top-right-decorations {
        right: 0;
        bottom: auto;
        top: 3vw;
    }

    .footer-top-right-decorations img { width: 26vw; }

    .footer-copyright {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vw;

        padding: 5vw 0;
    }

    .footer-copyright p,
    .footer-copyright p:nth-of-type(2) {
        font-size: 3vw;
        text-align: center;
    }

    /* ================================================================== */
    /* =============================== SHOP ============================= */
    /* ================================================================== */

    .shop {
        padding: 35vw 7vw 8vw 7vw;
    }

    .shop-headline { gap: 4vw; }

    .shop-headline-top { justify-content: center; }
    .shop-headline-top h1, .shop-headline-top h2 { font-size: 9vw; }
    .shop-headline-top-line { display: none; }

    .shop-headline-buttons {
        flex-direction: column;
        gap: 3vw;
    }

    .shop-headline-left-buttons {
        flex-direction: column;
        width: 100%;
        gap: 3vw;
    }

    .shop-headline-left-buttons button,
    .shop-headline-buttons > button {
        width: 100%;
        height: 13vw;
        font-size: 4vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .shop-section-headline {
        justify-content: center;
        margin: 9vw 0 5vw 0;
    }

    .shop-section-headline h3 {
        font-size: 6.5vw;
        white-space: normal;
        text-align: center;
    }

    .shop-section-line { display: none; }

    .ranks-head {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .rank-card { width: 100%; }

    .rank-card--promo + .rank-card {
        margin-top: 7vw;
    }

    .rank-card-features + .rank-card {
        margin-top: 12vw;
    }

    .rank-card-box { height: 52vw; }

    .rank-card-render img, .rank-card-render video { width: 55vw; }

    .rank-card h4 {
        font-size: 7vw;
        padding: 3vw 0;
    }

    .rank-btn {
        width: 80%;
        height: 11vw;
        margin-bottom: 3vw;
        font-size: 4vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .rank-card:not(.rank-card--promo) .rank-btn {
        width: 80%;
    }

    .rank-card--elita .rank-card-box { height: 56vw; }

    .rank-card--promo .rank-card-promo {
        height: auto;
        padding: 7vw 6vw;
        gap: 4vw;
    }
    .rank-card-promo-render { display: none; }
    .rank-card--promo h4 {
        font-size: 6.5vw;
        padding: 0;
    }

    .ranks-elita-band { display: none; }
    .ranks-body { display: none; }

    .rank-card-features {
        display: flex;
        flex-direction: column;
        width: 100%;

        margin-top: 1.5vw;
    }

    .rank-feat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4vw;

        padding: 3vw 2vw;
    }

    .rank-feat:nth-child(even) {
        background: rgba(0, 0, 0, 0.035);
    }

    .rank-feat span {
        font-family: 'FiveByFive', sans-serif;
        font-size: 3.4vw;
        font-weight: 500;
        color: #4A4A4A;
    }

    .rank-feat span:first-child {
        flex: 1;
        font-weight: 700;
        color: #303030;
    }

    .rank-feat span:last-child {
        flex-shrink: 0;
        text-align: right;
        white-space: nowrap;
    }

    .rank-feat .ranks-icon {
        flex-shrink: 0;
        width: 5.5vw;
        height: auto;
    }

    .rank-card--elita {
        position: relative;
        overflow: visible;
        border: 2px solid #9B3CE6;
    }

    .rank-card--elita .rank-card-render img, .rank-card--elita .rank-card-render video { width: 60vw; }

    .rank-card--elita + .rank-card-features .rank-feat {
        background: rgba(155, 60, 230, 0.10);
    }

    .rank-card--elita + .rank-card-features .rank-feat:nth-child(even) {
        background: rgba(155, 60, 230, 0.18);
    }

    .rank-elita-stars {
        display: block;
        position: absolute;
        inset: -6vw;
        z-index: 5;
        pointer-events: none;
    }

    .rank-elita-stars img {
        position: absolute;
        width: 11vw;
        height: auto;
    }

    .rank-elita-stars img:nth-child(1) { top: 7%;    left: 0; }
    .rank-elita-stars img:nth-child(2) { top: 0;     right: 10%; }
    .rank-elita-stars img:nth-child(3) { top: 38%;   right: 0; }
    .rank-elita-stars img:nth-child(4) { top: 52%;   left: 0; }
    .rank-elita-stars img:nth-child(5) { bottom: 5%; right: 8%; }
    .rank-elita-stars img:nth-child(6) { bottom: 0;  left: 8%; }

    .shop-products-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6vw;
    }

    .shop-product-mini .featured-tile-name {
        flex: none;
        width: 100%;
        padding: 3vw 1vw;
    }

    .shop-product-mini-top {
        height: 48vw;
        overflow: hidden;
    }

    .shop-product-mini-render img { width: 46vw; }

    .shop-product-mini-buy {
        gap: 2vw;
        padding: 0 3vw 3vw 3vw;
    }

    .shop-mini-price {
        height: 11vw;
        font-size: 4vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .shop-mini-info {
        width: 11vw;
        height: 11vw;
    }

    .shop-mini-info svg { width: 5vw; }

    /* ================================================================== */
    /* ========================= MODAL VOUCHER ========================= */
    /* ================================================================== */

    .voucher-box {
        width: 88vw;
        padding: 7vw 6vw 0 6vw;
    }

    .voucher-close {
        top: 3vw;
        right: 4vw;
        font-size: 6vw;
    }

    .voucher-title {
        font-size: 8vw;
    }

    .voucher-notification {
        margin-top: 4vw;
        padding: 2.5vw 3vw;
        font-size: 2.8vw;
    }

    .voucher-fields {
        margin-top: 5vw;
        gap: 3vw;
    }

    .voucher-field {
        gap: 1.5vw;
    }

    .voucher-field label {
        font-size: 3.4vw;
    }

    .voucher-input {
        height: 11vw;
        padding: 0 3vw;
        gap: 2.5vw;
    }

    .voucher-field:nth-child(1) .voucher-input img {
        width: 7vw;
        height: 7vw;
    }

    .voucher-field:nth-child(2) .voucher-input img {
        width: 6.5vw;
        height: 6.5vw;
    }

    .voucher-input input {
        font-size: 3vw;
    }

    .voucher-activate {
        margin-top: 5vw;
        width: 55vw;
        height: 11vw;
        font-size: 3.2vw;

        -webkit-text-stroke: 0.6vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .voucher-render {
        margin-top: 5vw;
    }

    .voucher-render img {
        width: 72vw;
    }

    /* ================================================================== */
    /* ============================ KOSZYK (cart.html) ================= */
    /* ================================================================== */

    .cart {
        padding: 35vw 7vw 8vw 7vw;
    }

    .cart-headline { justify-content: center; }
    .cart-headline h2 { font-size: 8vw; }
    .cart-headline-line { display: none; }

    .cart-container {
        flex-direction: column;
        align-items: stretch;
        gap: 5vw;
        margin-top: 6vw;
    }

    .cart-col-left,
    .cart-col-right {
        display: contents;
    }

    .cart-container .cart-rewards-row { display: none; }
    .cart-container .cart-personal     { order: 1; }
    .cart-container .cart-summary-box  { order: 2; }
    .cart-container .cart-unlock-box   { order: 3; }
    .cart-container .cart-upsell       { order: 4; }
    .cart-container .cart-rewards      { order: 5; }
    .cart-container .cart-payment      { order: 6; }
    .cart-container .cart-discount-box { order: 7; }
    .cart-container .cart-creator-box  { order: 7; }
    .cart-container .cart-summary      { order: 8; }

    .cart-personal {
        height: auto;
        padding: 6vw;
    }

    .cart-personal-title { font-size: 6vw; }

    .cart-fields {
        flex-direction: column;
        gap: 4vw;
    }

    .cart-field { gap: 2vw; }
    .cart-field label { font-size: 3.6vw; }

    .cart-input {
        height: 11vw;
        gap: 2.5vw;
        padding: 0 3vw;
    }

    .cart-input img { width: 5.5vw; height: 5.5vw; }
    .cart-input input { font-size: 3.2vw; }

    .cart-payment { padding: 6vw; }
    .cart-payment-title { font-size: 6vw; margin-bottom: 4vw; }

    .payment-grid { gap: 2.5vw; }

    .payment-method {
        width: 100%;
        height: 13vw;
        padding: 0 4vw;
    }

    .payment-method-name {
        width: auto;
        font-size: 3vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .payment-method-logo { height: 4.5vw; }
    .payment-method[data-method="przelew"] .payment-method-logo { height: 5vw; }
    .payment-method[data-method="terbex"]  .payment-method-logo { height: 6vw; }
    .payment-method[data-method="twisto"]  .payment-method-logo { height: 6.5vw; }
    .payment-method[data-method="sms"]     .payment-method-logo { height: 5.5vw; }

    .cart-promo { gap: 3vw; }
    .cart-promo .cart-check span { font-size: 3.6vw; }
    .cart-promo-row {
        flex-direction: column;
        gap: 3vw;
    }
    .cart-promo-input { flex: none; height: 11vw; padding: 0 3vw; font-size: 3.2vw; }
    .cart-promo-btn {
        width: 100%;
        height: 11vw;
        font-size: 3.4vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    .cart-terms { padding: 6vw; gap: 4vw; }
    .cart-terms-title { font-size: 6vw; margin-bottom: 1vw; }
    .cart-check { gap: 3vw; }
    .cart-check input { width: 5.5vw; height: 5.5vw; }
    .cart-check.cart-check--all input { width: 6.5vw; height: 6.5vw; }
    .cart-terms .cart-check span { font-size: 3.7vw; }
    .cart-terms .cart-check.cart-check--all span { font-size: 4.2vw; }

    .cart-container .cart-box { padding: 5vw; }
    .cart-container .cart-box-title { font-size: 5vw; }
    .cart-summary-box,
    .cart-summary { gap: 4vw; }

    .cart-container .cart-items { gap: 4vw; }
    .cart-container .cart-items .cart-item:not(:last-child) { padding-bottom: 4vw; }
    .cart-container .cart-upsell { gap: 4vw; }

    .cart-container .cart-item {
        column-gap: 4vw;
        align-items: center;
    }
    .cart-container .cart-item-thumb { width: 16vw; height: 16vw; }
    .cart-container .cart-item-thumb img { width: 115%; }
    .cart-container .cart-item-info { gap: 2vw; }
    .cart-container .cart-item-info h4 { font-size: 3.2vw; }
    .cart-container .cart-item-price { font-size: 3.6vw; }
    .cart-container .cart-item-remove { font-size: 5vw; }

    .cart-container .cart-qty-btn { width: 8vw; height: 8vw; font-size: 4.5vw; }
    .cart-container .cart-qty-val { min-width: 9vw; height: 8vw; font-size: 3.6vw; }

    .cart-container .cart-free-btn,
    .cart-container .cart-add-btn {
        font-size: 3vw;
        padding: 2vw 5vw;
        -webkit-text-stroke: 0.4vw #4A4A4A;
    }

    .cart-container .cart-upsell-title { font-size: 5.5vw; }

    .cart-container .cart-rewards { gap: 3vw; }
    .cart-container .cart-reward { padding: 3vw 3.5vw 3.3vw; }
    .cart-container .cart-reward-info { margin-bottom: 2.6vw; align-items: flex-start; gap: 3vw; }
    .cart-container .cart-reward-info span { font-size: 3.6vw; letter-spacing: 0; }
    .cart-container .cart-reward-info span:first-child { white-space: normal; min-width: 0; }
    .cart-container .cart-reward-info span:last-child { flex-shrink: 0; }
    .cart-container .cart-reward-bar { height: 1.6vw; }

    .cart-summary-rows { gap: 2.5vw; }
    .cart-summary-row span { font-size: 3.6vw; }
    .cart-summary-row span:last-child { font-size: 4vw; }

    .cart-summary-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 4vw;
        padding-top: 4vw;
    }

    .cart-summary-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .cart-summary-total-label,
    .cart-summary-total-value { font-size: 5vw; }

    .cart-summary-action { align-items: stretch; }

    .cart-summary-action .cart-checkout {
        width: 100%;
        max-width: none;
        height: 12vw;
        font-size: 3.4vw;
    }

    .cart-summary-vat { font-size: 2.8vw; }

    /* ================================================================== */
    /* ===================== MODAL "A MOŻE COŚ JESZCZE?" =============== */
    /* ================================================================== */

    .order-box {
        width: 92vw;
    }

    .order-scroll {
        padding: 6vw 6vw 2vw;
    }

    .order-close {
        top: 3vw;
        right: 4vw;
        font-size: 6vw;
    }

    .order-title {
        font-size: 6.5vw;
        margin-bottom: 4vw;
    }

    .order-title span {
        font-size: 8.5vw;
    }

    .order-carousel { gap: 1.5vw; }

    .order-arrow { font-size: 8vw; }

    .order-track {
        gap: 3vw;
        padding-top: 6vw;
    }

    .order-product {
        flex: 0 0 calc((100% - 3vw) / 2);
    }

    .order-product-top { height: 24vw; }

    .order-product-render img { height: 28vw; }

    .order-product-name {
        padding: 2vw 1vw;
        font-size: 2.8vw;
    }

    .order-product-btn {
        margin: 0 2vw 2vw 2vw;
        height: 8vw;
        font-size: 2.6vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);
    }

    .order-footer {
        gap: 2.5vw;
        padding: 3vw 6vw 6vw;
    }

    .order-sum {
        margin: 0;
        font-size: 3.6vw;
    }

    .order-sum span { font-size: 4vw; }

    .order-pay {
        margin-top: 0;
        width: 82vw;
        height: 15vw;
        font-size: 4.2vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
    }

    /* ================================================================== */
    /* ============= WYSUWANY PANEL KOSZYKA (<aside>) ================== */
    /* ================================================================== */

    .cart-panel { width: 80vw; }

    .cart-panel .cart-header { padding: 9vw 4vw 2vw 4vw; gap: 2vw; }
    .cart-panel .cart-title { font-size: 5vw; }
    .cart-panel .cart-close { top: 2vw; right: 3vw; font-size: 5vw; }

    .cart-panel .cart-body {
        gap: 3vw;
        padding: 1vw 4vw 4vw 4vw;
    }

    .cart-panel .cart-box { padding: 3.5vw; }

    .cart-panel .cart-rewards { gap: 2.5vw; }
    .cart-panel .cart-reward { padding: 2.5vw 3vw; }
    .cart-panel .cart-reward-info { margin-bottom: 1.5vw; }
    .cart-panel .cart-reward-info span { font-size: 2.6vw; }
    .cart-panel .cart-reward-bar { height: 0.8vw; }

    .cart-panel .cart-items { gap: 3vw; }
    .cart-panel .cart-items .cart-item:not(:last-child) { padding-bottom: 3vw; }
    .cart-panel .cart-item { column-gap: 3vw; }
    .cart-panel .cart-item-thumb { width: 13vw; height: 13vw; }
    .cart-panel .cart-item-info { gap: 1.5vw; }
    .cart-panel .cart-item-info h4 { font-size: 2.8vw; }
    .cart-panel .cart-item-price { font-size: 3.2vw; }
    .cart-panel .cart-item-remove { font-size: 4vw; }

    .cart-panel .cart-qty-btn { width: 7vw; height: 7vw; font-size: 4vw; }
    .cart-panel .cart-qty-val { min-width: 8vw; height: 7vw; font-size: 3.4vw; }

    .cart-panel .cart-free-btn,
    .cart-panel .cart-add-btn {
        font-size: 2.6vw;
        padding: 1.6vw 4vw;
        -webkit-text-stroke: 0.35vw #4A4A4A;
    }

    .cart-panel .cart-upsell-title { font-size: 4.2vw; }

    .cart-panel .cart-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 3vw;
        padding: 4vw;
    }

    .cart-panel .cart-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .cart-panel .cart-total-label,
    .cart-panel .cart-total-value { font-size: 4.8vw; }

    .cart-panel .cart-checkout {
        flex: none;
        width: 100%;
        max-width: none;
        height: 14vw;
        font-size: 3vw;
        -webkit-text-stroke: 0.4vw #4A4A4A;
    }

    /* ================================================================== */
    /* ============================ RANKINGI (rankings.html) =========== */
    /* ================================================================== */

    .rankings {
        padding: 35vw 7vw 8vw 7vw;
    }

    .rankings-headline { justify-content: center; }
    .rankings-headline h2 { font-size: 8vw; }
    .rankings-headline-line { display: none; }

    .rankings-container { margin-top: 3vw; }

    .rankings-server-headline { margin: 9vw 0 5vw 0; }
    .rankings-server-headline:first-child { margin-top: 2vw; }
    .rankings-server-headline h3 {
        font-size: 6.5vw;
        white-space: normal;
    }
    .rankings-server-line { display: none; }

    .ranking-server-tiles {
        grid-template-columns: 1fr;
        gap: 5vw;
    }

    .ranking-server-tile {
        width: 100%;
        height: 20vw;
    }

    .ranking-server-tile-cont {
        padding: 0 4vw 0 0;
    }

    .ranking-server-tile:last-child {
        grid-column: auto;
        justify-self: stretch;
    }

    .ranking-server-tile-render img { width: 24vw; }
    .ranking-server-tile:nth-of-type(3) .ranking-server-tile-render img { width: 20.5vw; }
    .ranking-server-tile:nth-of-type(4) .ranking-server-tile-render img { width: 17vw; }
    .ranking-server-tile:nth-of-type(5) .ranking-server-tile-render img { width: 17vw; }
    .ranking-server-tile:nth-of-type(7) .ranking-server-tile-render img { width: 20.5vw; }

    .ranking-server-tile-text h5,
    .ranking-server-tile-text span { font-size: 4.6vw; }

    .ranking-server-btns { display: flex; }

    .ranking-server-tile { display: none; }

    .ranking-server-tile.is-visible {
        display: block;
        animation: ranking-tile-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .ranking-server-tile.is-visible.is-leaving {
        animation: ranking-tile-out 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .ranking-players-tiles,
    .ranking-guilds-tiles {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .ranking-players-col-title {
        font-size: 5vw;
        text-align: center;
        margin-bottom: 4vw;
    }

    .ranking-players-list { gap: 2.5vw; }

    .ranking-player-tile {
        gap: 3vw;
        padding: 3vw 3.5vw;
    }

    .ranking-player-rank { width: 9vw; font-size: 5.5vw; }
    .ranking-player-head { width: 7vw; height: 7vw; }
    .ranking-player-name { font-size: 3.4vw; }
    .ranking-player-points { font-size: 3.4vw; }
    .ranking-player-points .rp-num { font-size: 3.4vw; }

    .ranking-btns { gap: 2vw; margin-top: 4vw; }
    .ranking-more-btn,
    .ranking-less-btn {
        width: 30vw;
        height: 9vw;
        font-size: 3vw;
    }

    /* ================================================================== */
    /* ============================ REGULAMIN (rules.html) ============= */
    /* ================================================================== */

    .rules {
        padding: 35vw 7vw 8vw 7vw;
    }

    .rules-headline { gap: 5vw; }
    .rules-headline-top { justify-content: center; }
    .rules-headline h2 { font-size: 8vw; white-space: normal; }
    .rules-headline-line { display: none; }

    .rules-buttons {
        flex-direction: column;
        width: 100%;
        gap: 3vw;
    }

    .rules-buttons button {
        width: 100%;
        height: 11vw;

        font-size: 4vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);

        box-shadow: 0 0.6vw 0 #4A4A4A;
    }

    .rules-container {
        margin-top: 6vw;
        padding: 5vw 4vw;
    }

    .rules-tile { gap: 5vw; }

    .rules-tile ul h4 {
        font-size: 5vw;
        padding-bottom: 3vw;
    }

    .rules-tile ul li {
        margin-left: 5vw;
        font-size: 3.2vw;
    }

    .rules-contact {
        margin-top: 6vw;
        height: auto;
        gap: 1.5vw;
        padding: 6vw 5vw;
    }

    .rules-contact h5 {
        font-size: 3.4vw;
        -webkit-text-stroke: 0.4vw #4A4A4A;
        text-shadow: 0 0.35vw 0 rgba(0, 0, 0, 0.25);
    }

    /* ================================================================== */
    /* ==================== MODAL DODAJ DO KOSZYKA ===================== */
    /* ================================================================== */

    .addcart-box {
        width: 88vw;
        padding: 5vw 5vw 6vw 5vw;
    }

    .addcart-close {
        top: 3vw;
        right: 4vw;
        font-size: 6vw;
    }

    .addcart-title {
        font-size: 5.5vw;
        margin-bottom: 5vw;
    }

    .addcart-body {
        flex-direction: column;
        gap: 4vw;
    }

    .addcart-product {
        flex: none;
        width: 100%;
    }

    .addcart-render {
        flex: none;
        height: 32vw;
        overflow: hidden;
    }

    .addcart-render > img {
        height: 28vw;
    }

    .addcart-name {
        height: 10vw;
        padding: 0 2vw;
    }

    .addcart-name h4 {
        font-size: 3vw;
    }

    .addcart-controls {
        flex: none;
        width: 100%;
        gap: 4vw;
    }

    .addcart-qty-block {
        gap: 2.5vw;
        padding: 3vw;
    }

    .addcart-label {
        font-size: 3vw;
    }

    .addcart-qty {
        gap: 2vw;
    }

    .addcart-qty-btn {
        width: 6.5vw;
        height: 6.5vw;
        font-size: 4vw;
        -webkit-text-stroke: 0.6vw #4A4A4A;
        box-shadow: 0 0.4vw 0 #4A4A4A;
    }

    .addcart-qty-val {
        width: 8vw;
        height: 6.5vw;
        font-size: 3vw;
    }

    .addcart-slider {
        height: 1.8vw;
    }

    .addcart-slider::-webkit-slider-thumb {
        width: 4.5vw;
        height: 4.5vw;
    }

    .addcart-slider::-moz-range-thumb {
        width: 4.5vw;
        height: 4.5vw;
    }

    .addcart-buy {
        flex-direction: column;
        align-items: center;
        padding: 3.5vw;
        gap: 2.5vw;
    }

    .addcart-price {
        font-size: 4.4vw;
    }

    .addcart-add {
        height: 8.5vw;
        padding: 0 4vw;
        font-size: 2.8vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 0.4vw 0 #4A4A4A;
    }

    /* ================================================================== */
    /* ===================== MODAL INFORMACJE (GUI) =================== */
    /* ================================================================== */

    .info-box {
        width: 92vw;
        padding: 5vw 4vw 6vw 4vw;
    }

    .info-box .shop-mini-price {
        width: 62vw;
        margin-top: 5vw;
        white-space: nowrap;
    }

    .info-close {
        top: 3vw;
        right: 4vw;
        font-size: 6vw;
    }

    .info-title {
        font-size: 5.5vw;
    }

    .info-desc {
        max-width: 78vw;
        margin: 3vw 0 5vw 0;
        font-size: 3vw;
    }

    .info-gui-scroll {
        width: 100%;
        overflow-x: auto;
        padding: 14px;
    }

    .info-gui {
        width: max-content;
        padding: 12px 15px;
        box-shadow: 8px 0 0 0 #555555,
            0 8px 0 0 #555555,
            4px 4px 0 0 #555555,
            -8px 0 0 0 #e8e8e8,
            0 -8px 0 0 #e8e8e8,
            -4px -4px 0 0 #e8e8e8,
            0 0 0 4px #b5b4b5,
            4px 8px 0 0 #555,
            8px 4px 0 0 #555,
            -4px -8px 0 0 #e8e8e8,
            -8px -4px 0 0 #e8e8e8,
            8px -4px 0 0 #000,
            4px -8px 0 0 #000,
            -8px 4px 0 0 #000,
            -4px 8px 0 0 #000,
            -8px -8px 0 0 #000,
            8px 8px 0 0 #000,
            -12px 0 0 0 #000,
            -12px -4px 0 0 #000,
            12px 0 0 0 #000,
            12px 4px 0 0 #000,
            0 -12px 0 0 #000,
            -4px -12px 0 0 #000,
            0 12px 0 0 #000,
            4px 12px 0 0 #000;
    }

    .info-gui-title {
        padding-left: 6px;
        padding-bottom: 9px;
        font-size: 27px;
        line-height: 38px;
    }

    .info-boxes {
        grid-template-columns: repeat(9, 58px);
        grid-auto-rows: 58px;
    }

    .info-slot {
        width: 50px;
        height: 50px;
        box-shadow: 2px 2px 0 2px #e8e8e8,
            -2px -2px 0 2px #555,
            0 0 0 4px #8b8b8b;
    }

    .info-item {
        width: 38px;
    }

    .info-tooltip {
        min-width: 173px;
        height: 46px;
        padding: 0 19px;
        bottom: calc(100% + 6px);
    }

    .info-tooltip h5 {
        font-size: 14px;
    }

    /* ================================================================== */
    /* ============================= CONFIRM ============================ */
    /* ================================================================== */

    .confirm {
        padding: 35vw 7vw 8vw 7vw;
    }

    .confirm-container {
        margin-top: 6vw;
        height: auto;
        min-height: 40vw;
    }

    .confirm-content {
        justify-content: center;
        padding: 7vw 5vw;
    }

    /* render chowany jak w home-card — na mobilce nie ma na niego miejsca */
    .confirm-content img { display: none; }

    .confirm-content-left {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 1.5vw;
    }

    .confirm-content-left h2 {
        font-size: 8vw;
        text-shadow: 0 0.35vw 0 rgba(0, 0, 0, 0.5);
    }

    .confirm-content-left p {
        font-size: 3vw;
        text-shadow: 0 0.35vw 0 rgba(0, 0, 0, 0.1);
    }

    .confirm-summary {
        margin-top: 9vw;
        padding: 0;
    }

    .confirm-summary-headline {
        justify-content: center;
        margin-bottom: 5vw;
    }

    .confirm-summary-headline h3 {
        font-size: 6.5vw;
        white-space: normal;
        text-align: center;
    }

    .confirm-summary-line { display: none; }

    .confirm-summary-tiles {
        flex-direction: column;
        gap: 4vw;
    }

    .confirm-tile {
        padding: 5vw;
    }

    .confirm-tile h4 {
        font-size: 5vw;
    }

    .confirm-tile--products h4 {
        margin-bottom: 4vw;
    }

    .confirm-products {
        gap: 2.5vw;
    }

    .confirm-product span {
        font-size: 3.4vw;
    }

    .confirm-product--total {
        margin-top: 4vw;
    }

    .confirm-tile--details {
        gap: 3.5vw;
    }

    .confirm-detail {
        gap: 1vw;
    }

    .confirm-detail h5 {
        font-size: 2.8vw;
    }

    .confirm-detail p {
        font-size: 3.6vw;
    }

    .confirm-tile--help h4 {
        margin-bottom: 2.5vw;
    }

    .confirm-tile--help p {
        font-size: 3.4vw;
        margin-bottom: 4vw;
    }

    .confirm-tile--help button {
        height: 12vw;
        font-size: 4vw;

        -webkit-text-stroke: 0.4vw #4A4A4A;
        text-shadow: 0 0.35vw 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 0.4vw 0 #4A4A4A;
    }

    .confirm-tile--help button:hover {
        transform: none;
        box-shadow: 0 0.4vw 0 #4A4A4A;
    }

    /* ================================================================== */
    /* ========================= COOKIE CONSENT ======================== */
    /* ================================================================== */

    .cookie-banner {
        left: 4vw;
        right: 4vw;
        bottom: 4vw;

        width: auto;
        max-width: none;

        box-shadow: 0 1vw 0 #4A4A4A;
        padding: 5vw;
        gap: 3.5vw;
    }

    .cookie-banner-head { gap: 3vw; }

    .cookie-banner-icon { font-size: 7vw; }

    .cookie-banner-head h4 { font-size: 5vw; }

    .cookie-banner-text {
        font-size: 3.2vw;
        line-height: 1.7;
    }

    .cookie-banner-buttons {
        gap: 3vw;
        margin-top: 1vw;
    }

    .cookie-btn-close {
        width: 13vw;
        height: 13vw;
        font-size: 5vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        box-shadow: 0 0.6vw 0 #4A4A4A;
    }

    .cookie-btn-accept {
        height: 13vw;
        font-size: 3.8vw;
        padding: 0 4vw;
        -webkit-text-stroke: 0.5vw #4A4A4A;
        box-shadow: 0 0.6vw 0 #4A4A4A;
    }

    .cookie-btn-close:hover,
    .cookie-btn-accept:hover {
        transform: none;
    }

    /* ================================================================== */
    /* ====================== MODAL ULEPSZ RANGĘ ======================== */
    /* ================================================================== */

    .upgrade-modal { z-index: 100001; }

    .upgrade-box {
        width: 88vw;
        max-height: 90vh;
        overflow-y: auto;
        padding: 7vw 6vw;
    }

    /* box się scrolluje — elementy nie mogą się ściskać do max-height */
    .upgrade-box > * {
        flex-shrink: 0;
    }

    .upgrade-box--choose {
        width: 92vw;
    }

    .upgrade-close {
        top: 3vw;
        right: 4vw;
        font-size: 6vw;
    }

    .upgrade-title {
        font-size: 8vw;
    }

    /* ------------------------- krok 1: formularz ---------------------- */

    .upgrade-form {
        margin-top: 1vw;
        gap: 5vw;
    }

    .upgrade-section-title {
        font-size: 6vw;
        margin-bottom: 3vw;
    }

    .upgrade-terms {
        gap: 3vw;
    }

    .upgrade-terms .cart-check span {
        font-size: 3.2vw;
    }

    .upgrade-next {
        margin-top: 5vw;
        width: 55vw;
        height: 11vw;
        flex-shrink: 0;
        font-size: 3.2vw;

        -webkit-text-stroke: 0.6vw #4A4A4A;
        text-shadow: 0 0.5vw 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 0.5vw 0 #4A4A4A;
    }

    /* --------------------- krok 2: wybór ulepszenia ------------------- */

    .upgrade-compare {
        margin-top: 5vw;

        flex-direction: column;
        align-items: center;
        gap: 4vw;
    }

    .upgrade-current {
        gap: 2vw;
    }

    .upgrade-current-label {
        font-size: 3.6vw;
        text-shadow: 0 0.2vw 0 rgba(0, 0, 0, 0.25);
    }

    .upgrade-nick {
        gap: 1.5vw;
    }

    .upgrade-nick img {
        width: 4.5vw;
        height: 4.5vw;
    }

    .upgrade-nick span {
        font-size: 3.2vw;
        text-shadow: 0 0.2vw 0 rgba(0, 0, 0, 0.25);
    }

    /* strzałka między aktualną rangą a opcjami — obrócona w dół */
    .upgrade-arrow {
        margin-top: 0;
        transform: rotate(90deg);
    }

    .upgrade-arrow img {
        width: 7vw;
    }

    .upgrade-tile {
        width: 38vw;
        gap: 2vw;
        padding: 0 0 2.5vw 0;
        box-shadow: 0 0.6vw 0 #464646;
    }

    .upgrade-tile-box {
        height: 24vw;
    }

    .upgrade-tile-render img {
        width: 30vw;
    }

    .upgrade-option--elita .upgrade-tile-render img {
        width: 33vw;
    }

    .upgrade-tile h4 {
        font-size: 4.5vw;
        text-shadow: 0 0.3vw 0 rgba(0, 0, 0, 0.25);
    }

    .upgrade-options {
        gap: 4vw;
    }

    .upgrade-option {
        gap: 2.5vw;
    }

    .upgrade-price-row {
        gap: 1.2vw;
    }

    .upgrade-price-new {
        font-size: 4vw;
        -webkit-text-stroke: 0.6vw #4A4A4A;
    }

    .upgrade-price-old {
        font-size: 2.6vw;
        text-shadow: 0 0.25vw 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-0.3vw);
    }

    .upgrade-option .rank-btn {
        width: 100%;
        height: 8.5vw;
        margin-bottom: 0;
        font-size: 2.8vw;

        -webkit-text-stroke: 0.5vw #4A4A4A;
        text-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.25);
        box-shadow: 0 0.4vw 0 #464646;
    }

    /* ------------- suma + przejdź do płatności (jak koszyk) ----------- */

    .upgrade-summary {
        margin-top: 5vw;
        padding-top: 4vw;

        flex-direction: column;
        align-items: stretch;
        gap: 4vw;
    }

    .upgrade-summary .cart-summary-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .upgrade-summary .cart-summary-total-label,
    .upgrade-summary .cart-summary-total-value {
        font-size: 3.5vw;
    }

    .upgrade-summary .cart-summary-action {
        align-items: stretch;
        gap: 1.5vw;
    }

    .upgrade-summary .cart-checkout {
        width: 100%;
        max-width: none;
        height: 12vw;
        font-size: 3.4vw;
    }

    .upgrade-summary .cart-summary-vat {
        font-size: 2.8vw;
    }

}