.copy-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--positive);
    border-color: var(--positive);
    color: var(--positive-text);
    font-family: 'Poppins';
    border-radius: var(--border-radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.copy-toast.toast-error {
    background: var(--negative);
    border-color: var(--negative);
    color: var(--negative-text);
}

.copy-toast i {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-family: 'Poppins';
}

.text-header {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
}

.text-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.text-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
}

.text-desc {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 2;
}

.text-navigation {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 2;
}

.text-notice {
    font-size: 0.9rem;
}

html {
    height: 100%;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--text-primary);
    background-color: var(--background);
    overflow-x: hidden;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    background-image: var(--background-img);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 400px,
            rgba(0, 0, 0, 0) 700px);
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 400px,
            rgba(0, 0, 0, 0) 700px);
}

#root {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding: 0 clamp(15px, 4vw, 40px);
    min-height: 100%;
    font-family: 'Poppins';
}

.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}

.col-4 {
    grid-column: span 4;
}

.col-3 {
    grid-column: span 3;
}

.col-8 {
    grid-column: span 8;
}

.col-6 {
    grid-column: span 6;
    height: 100%;
}

.col-12 {
    grid-column: span 12;
}

.navigation-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 2rem;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    padding: 1rem 0;
}

.navigation-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.navigation-link:nth-child(1):hover {
    color: #F10E42;
}

.navigation-link:nth-child(2):hover {
    color: #EF5E10;
}

.navigation-link:nth-child(3):hover {
    color: #E99816;
}

.navigation-link:nth-child(4):hover {
    color: #44BB61;
}

.navigation-link:nth-child(5):hover {
    color: #3299CD;
}

.navigation-link:nth-child(6):hover {
    color: #9400D3;
}

.header-center-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 2rem 0;
    position: relative;
    z-index: 10;
}

.logo-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-btn:hover {
    transform: scale(1.05);
}

.store-logo {
    width: auto;
    max-height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.header-center-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7rem;
    margin-bottom: 3rem;
    margin-top: 2rem;
    padding: 1.5rem 0;
}

.header-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    min-width: 238px;
    text-decoration: none;
}

.header-icon-sphere {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 40%, transparent);
    border: 1px solid var(--primary-hover-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.header-icon-wrapper:hover .header-icon-sphere {
    background: color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.header-icon-sphere i {
    color: var(--icon-primary);
    font-size: 24px;
}

.header-icon-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-icon-text.text-right {
    text-align: right;
}

.header-icon-title {
    color: var(--text-primary);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
}

.header-icon-subtitle {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.header-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    margin-bottom: 22px;
    box-shadow: var(--box-shadow);
    min-height: 100px;
    overflow: hidden;
}

.header-left {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    z-index: 2;
}

.store-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.server-favicon {
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.server-favicon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-favicon:hover {
    transform: scale(1.1);
}

.store-title {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.store-subtitle {
    color: var(--primary-color);
    margin: 0;
    line-height: 1.3;
}

.header-center {
    position: absolute;
    left: 50%;
    top: -70px;
    transform: translateX(-50%);
    z-index: 3;
}

.store-logo {
    width: 400px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.header-right {
    display: flex;
    align-items: stretch;
    z-index: 2;
    position: relative;
    margin: -2rem 0;
}

.primary-button,
.secondary-button {
    border: none;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.primary-button {
    background: var(--primary-color);
}

.primary-button:hover {
    background: var(--primary-hover-color);
    transform: translateY(-1px);
}

.primary-button i {
    color: var(--icon-primary);
    font-size: 1.2rem;
}

.primary-button .button-text {
    color: var(--icon-primary);
    font-weight: 600;
}

.secondary-button {
    background: var(--primary-color);
}

.secondary-button:hover {
    background: var(--primary-hover-color);
    transform: translateY(-1px);
}

.secondary-button i {
    color: var(--icon-primary);
    font-size: 1.2rem;
}

.secondary-button .button-text {
    color: var(--icon-primary);
    font-weight: 600;
}

.positive-button,
.negative-button {
    border: none;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.positive-button {
    background: var(--positive);
}

.positive-button:hover {
    background: var(--positive-hover-color);
    transform: translateY(-1px);
}

.positive-button i {
    color: var(--positive-text);
    font-size: 1.2rem;
}

.positive-button .button-text {
    color: var(--positive-text);
    font-weight: 600;
}

.negative-button {
    background: var(--negative);
}

.negative-button:hover {
    background: var(--negative-hover-color);
    transform: translateY(-1px);
}

.negative-button i {
    color: var(--negative-text);
    font-size: 1.2rem;
}

.negative-button .button-text {
    color: var(--negative-text);
    font-weight: 600;
}

.primary-button.disabled,
.secondary-button.disabled,
.positive-button.disabled,
.negative-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-badge {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--negative);
    color: var(--negative-text);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.header-login-block {
    background: linear-gradient(to top right, var(--primary-color), var(--primary-hover-color));
    display: flex;
    align-items: center;
    padding: 0 1.5rem 0 3.5rem;
    text-decoration: none;
    position: relative;
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%);
    min-width: 280px;
    transition: filter 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
    z-index: 1;
    cursor: pointer;
}

.header-login-block:hover {
    filter: brightness(1.05);
    min-width: 310px;
    padding-left: 4rem;
}

.header-login-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    padding-right: 90px;
    padding-left: 10px;
    text-align: right;
}

.header-login-player {
    position: absolute;
    right: 30px;
    bottom: 0;
    height: 140%;
    z-index: 2;
    pointer-events: none;
    transform: translateY(33%);
}

.header-login-player img {
    height: 100%;
    width: auto;
    object-fit: contain;
    transform: scaleX(-1);
}

.header-cart-block {
    background: linear-gradient(to top right, var(--secondary-color), var(--secondary-hover-color));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4rem 0 3rem;
    text-decoration: none;
    position: relative;
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%);
    min-width: 240px;
    margin-right: -50px;
    z-index: 0;
    transition: filter 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
    cursor: pointer;
}

.header-cart-block:hover {
    filter: brightness(1.05);
    min-width: 270px;
    padding-left: 3.5rem;
}

.header-cart-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-left: 10px;
}

.header-block-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.header-block-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1.3;
}

.header-block-icon {
    display: none;
    font-size: 1.25rem;
    color: var(--text-primary);
}

@media (max-width: 768px) {

    .header-center {
        display: none;
    }

    .header-center-row {
        display: none;
    }

    .navigation-row {
        display: none;
    }

    .header-block {
        padding: 1rem;
        padding-right: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        margin-top: 1.5rem;
        min-height: 60px;
        overflow: hidden;
    }

    .header-left {
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
        text-align: left;
    }

    .server-favicon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .server-favicon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .store-info {
        gap: 0;
        text-align: left;
    }

    .store-title {
        font-size: 1.2rem;
    }

    .store-subtitle {
        display: none;
    }

    .header-right {
        flex-shrink: 0;
        margin: -1rem 0;
    }

    .header-login-block {
        min-width: 50px;
        padding: 0 1rem 0 2rem;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
        justify-content: center;
    }

    .header-login-content {
        display: none;
    }

    .header-login-player {
        display: none;
    }

    .header-cart-block {
        min-width: 50px;
        padding: 0 1.25rem 0 1.5rem;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
        margin-right: -20px;
    }

    .header-cart-content {
        display: none;
    }

    .header-block-icon {
        display: block;
    }

    .header-login-block:hover,
    .header-cart-block:hover {
        min-width: 50px;
        filter: brightness(1.1);
    }
}

.footer {
    width: 100%;
    margin-top: 10rem;
    font-family: 'Poppins';
}

.footer-top {
    background: var(--footer-bg);
    border-top: 10px solid var(--footer-stroke);
    padding: 2.5rem 0;
    position: relative;
}

.footer-top-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(15px, 4vw, 40px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-copyright p {
    color: var(--footer-description);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.footer-disclaimer {
    opacity: 0.7;
    font-size: 0.85rem !important;
}

.footer-pages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-page-link {
    color: var(--footer-description);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-pages > :nth-child(1) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(1):hover {
    color: #F10E42;
}

.footer-pages > :nth-child(2) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(2):hover {
    color: #EF5E10;
}

.footer-pages > :nth-child(3) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(3):hover {
    color: #E99816;
}

.footer-pages > :nth-child(4) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(4):hover {
    color: #44BB61;
}

.footer-pages > :nth-child(5) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(5):hover {
    color: #3299CD;
}

.footer-pages > :nth-child(6) .footer-page-link:hover,
.footer-pages > .footer-page-link:nth-child(6):hover {
    color: #9400D3;
}

.footer-center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer-logo-wrapper {
    position: relative;
    margin-top: -150px;
}

.footer-logo {
    width: auto;
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.05);
}

.footer-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-socials {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-bottom {
    background: var(--footer-dark);
    padding: 1.5rem 0;
}

.footer-bottom-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(15px, 4vw, 40px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-credits {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.footer-credits a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-credits a:hover {
    color: var(--primary-color);
}

.social-cube-btn {
    position: relative;
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
}

.social-cube-face {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.social-cube-face i {
    font-size: 20px;
}

.social-cube-shadow {
    position: absolute;
    bottom: -4px;
    left: 4px;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    z-index: 1;
    opacity: 0.7;
}

.social-cube-btn:hover .social-cube-face {
    transform: translateY(-3px);
}

.social-cube-btn:active .social-cube-face {
    transform: translateY(2px);
}

.social-discord .social-cube-face { background-color: #5865F2; }
.social-discord .social-cube-shadow { background-color: #4752C4; }

.social-youtube .social-cube-face { background-color: #F10E42; }
.social-youtube .social-cube-shadow { background-color: #C00B35; }

.social-instagram .social-cube-face { background-color: #EF5E10; }
.social-instagram .social-cube-shadow { background-color: #BF4B0D; }

.social-x .social-cube-face { background-color: #E99816; }
.social-x .social-cube-shadow { background-color: #BA7A12; }

.social-facebook .social-cube-face { background-color: #44BB61; }
.social-facebook .social-cube-shadow { background-color: #36964E; }

.social-tiktok .social-cube-face { background-color: #3299CD; }
.social-tiktok .social-cube-shadow { background-color: #287AA4; }

.social-bluesky .social-cube-face { background-color: #9400D3; }
.social-bluesky .social-cube-shadow { background-color: #7600A9; }

@media (max-width: 768px) {
    .footer {
        margin-top: 2rem;
    }

    .footer-top {
        padding: 2rem 0;
    }

    .footer-top-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-left {
        order: 2;
        align-items: center;
    }

    .footer-copyright {
        align-items: center;
    }

    .footer-pages {
        justify-content: center;
    }

    .footer-center {
        order: 1;
    }

    .footer-logo-wrapper {
        margin-top: -60px;
    }

    .footer-logo {
        max-height: 100px;
    }

    .footer-right {
        order: 3;
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-bottom {
        padding: 1.25rem 0;
    }

    .footer-credits {
        font-size: 0.85rem;
    }

    .social-cube-btn {
        width: 44px;
        height: 44px;
    }

    .social-cube-face,
    .social-cube-shadow {
        width: 44px;
        height: 44px;
    }

    .social-cube-face i {
        font-size: 18px;
    }
}

.sale-banner {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: visible;
}

.sale-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sale-name {
    color: var(--text-primary);
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

.sale-subtitle {
    color: var(--primary-color);
    margin: 0;
    text-align: left;
    line-height: 1.2;
}



.sale-countdown {
    background: var(--block-light);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    min-width: 280px;
}

.countdown-grid {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 45px;
}

.countdown-unit strong {
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.countdown-unit small {
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .sale-banner {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .sale-info {
        width: 100%;
        order: 2;
        gap: 0;
        align-items: center;
    }

    .sale-name {
        font-size: 1.5rem;
        margin-top: 0;
        text-align: center;
    }

    .sale-subtitle {
        display: none;
    }

    .sale-countdown {
        width: 100%;
        padding: 1rem;
        order: 3;
        min-width: auto;
    }

    .countdown-grid {
        justify-content: space-around;
        gap: 0.75rem;
    }

    .countdown-unit {
        min-width: 40px;
    }

    .countdown-unit strong {
        font-size: 1.5rem;
    }

    .countdown-unit small {
        font-size: 0.65rem;
    }
}

.category-grid {
    gap: 22px;
}

.category-grid.has-featured .col-6:first-child {
    grid-row: span 2;
}

.category-grid.has-featured .col-6:first-child .category-button {
    height: 100%;
}

.category-grid.has-featured .col-6:first-child .category-content {
    align-items: flex-start;
    justify-content: flex-end;
}

.category-button {
    border-radius: var(--border-radius);
    display: flex;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 200px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.category-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.category-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
}

.category-grid.has-featured .col-6:first-child .category-button::after {
    mask-image: linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
    -webkit-mask-image: linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
}

.category-button:hover {
    transform: translateY(-2px);
}

.category-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
    position: relative;
    align-items: flex-start;
    justify-content: center;
}

.category-content h2 {
    color: var(--text-primary);
    margin: 0;
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
}

.category-content p {
    color: var(--text-primary);
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.category-image-container {
    display: none;
}

@media (max-width: 768px) {
    .category-grid .col-6 {
        grid-column: span 12;
    }

    .category-grid.has-featured .col-6:first-child {
        grid-row: span 1;
    }

    .category-grid.has-featured .col-6:first-child .category-button {
        height: 200px;
    }

    .category-grid.has-featured .col-6:first-child .category-content {
        justify-content: center;
    }

    .category-button {
        height: 200px;
        padding: 1.5rem;
    }

    .category-content h2 {
        font-size: 32px;
    }

    .category-content p {
        font-size: 16px;
    }
}

.subcategory-button {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 200px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
}

.subcategory-button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.subcategory-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
    position: relative;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}

.subcategory-content h2 {
    color: var(--text-primary);
    margin: 0;
    font-size: 36px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
}

.subcategory-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.subcategory-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-shrink: 0;
    padding-left: 2rem;
}

.subcategory-image {
    max-height: 150px;
    max-width: 150px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.subcategory-button:hover .subcategory-image {
    transform: scale(1.05);
}

.subcategory-sphere {
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 400px;
    height: 500px;
    border-radius: 50%;
    background-color: var(--block-dark);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .subcategory-button {
        height: 180px;
        padding: 1.5rem;
    }

    .subcategory-sphere {
        width: 350px;
        height: 300px;
        left: -150px;
        bottom: -120px;
    }

    .subcategory-content h2 {
        font-size: 28px;
    }

    .subcategory-content p {
        font-size: 14px;
    }

    .subcategory-image-container {
        padding-left: 1rem;
    }

    .subcategory-image {
        max-height: 100px;
        max-width: 100px;
    }
}

.homepage-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: visible;
    padding: 3rem 2rem 2rem 2rem;
}

.homepage-header {
    text-align: center;
    margin-bottom: 2rem;
}

.homepage-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.homepage-description {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.8;
}

.homepage-button {
    background: var(--block-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.homepage-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.homepage-button i {
    color: var(--text-secondary);
    font-size: 1.4rem;
}

.homepage-button .button-text {
    color: var(--text-secondary);
    font-weight: 700;
}

.module-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  align-items: start;
}

.payment-goal-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.payment-goal-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.payment-goal-icon-bg {
  position: absolute;
  left: 25%;
  top: 30%;
  transform: translateY(-50%) translateX(-50%) rotate(-15deg);
  font-size: 25rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.payment-goal-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.payment-goal-title {
  color: var(--text-primary);
  margin: 0;
}

.payment-goal-amount {
  text-align: right;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.payment-goal-amount span {
  color: var(--text-primary);
  opacity: 0.8;
}

.payment-goal-progress-container {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
}

.payment-goal-progress-bar {
  width: 100%;
  height: 50px;
  background: var(--block-dark);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.payment-goal-progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
  position: relative;
}

.payment-goal-percentage {
  color: var(--icon-primary);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}

.payment-goal-repeatable {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.payment-goal-repeatable i {
  color: var(--primary-color);
  font-size: 1rem;
}

@media (max-width: 768px) {
  .payment-goal-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .payment-goal-icon-bg {
    font-size: 15rem;
    left: 33%;
    transform: translateY(-50%) translateX(-50%) rotate(-15deg);
    opacity: 0.4;
  }

  .payment-goal-header {
    margin-bottom: 1rem;
  }

  .payment-goal-title {
    font-size: 1.3rem;
  }

  .payment-goal-amount span {
    font-size: 1rem;
  }

  .payment-goal-progress-bar {
    height: 40px;
  }

  .payment-goal-percentage {
    font-size: 0.95rem;
    padding-right: 0.5rem;
  }

  .payment-goal-repeatable {
    font-size: 0.85rem;
  }
}

.giftcard-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.giftcard-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.giftcard-icon-bg {
  position: absolute;
  left: -120px;
  top: -350px;
  transform: rotate(-15deg);
  font-size: 45rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.giftcard-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.giftcard-title {
  color: var(--text-primary);
  margin: 0;
}

.giftcard-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.giftcard-input {
  flex: 1;
  background: var(--block-dark);
  border-radius: var(--border-radius);
  border: none;
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-family: 'Poppins';
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.3s ease;
}

.giftcard-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.giftcard-input:focus {
  outline: none;
}

.giftcard-btn {
  background: var(--primary-color);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.875rem 1.5rem;
  color: var(--icon-primary);
  font-family: 'Poppins';
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.giftcard-btn:hover {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .giftcard-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .giftcard-icon-bg {
    font-size: 40rem;
    left: -90px;
    top: -300px;
    transform: rotate(-15deg);
    opacity: 0.4;
  }

  .giftcard-header {
    margin-bottom: 1rem;
  }

  .giftcard-title {
    font-size: 1.3rem;
  }

  .login-form {
    flex-direction: column;
    gap: 1rem;
    max-width: none;
  }

  .giftcard-form {
    flex-direction: column;
    gap: 0.75rem;
  }

  .giftcard-input,
  .giftcard-btn {
    width: 100%;
  }

  .col-6,
  .col-4 {
    grid-column: span 12;
  }
}

.textbox-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.textbox-sphere {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 300px;
    border-radius: 50%;
    background-color: var(--block-dark);
    opacity: 50%;
    pointer-events: none;
}

.textbox-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.textbox-icon-bg {
  position: absolute;
  left: -120px;
  top: -250px;
  transform: rotate(-15deg);
  font-size: 25rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.textbox-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.textbox-title {
  color: var(--text-primary);
  margin: 0;
}

.textbox-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
}

@media (max-width: 768px) {
  .textbox-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .textbox-header {
    margin-bottom: 1rem;
  }

  .textbox-title {
    font-size: 1.3rem;
  }

  .textbox-description {
    font-size: 0.9rem;
  }

  .textbox-icon-bg {
    font-size: 40rem;
    left: -90px;
    top: -300px;
    transform: rotate(-15deg);
    opacity: 0.4;
  }
}

.serverstatus-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.serverstatus-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.serverstatus-icon-bg {
  position: absolute;
  left: -120px;
  top: -350px;
  transform: rotate(-15deg);
  font-size: 45rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.serverstatus-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.serverstatus-title {
  color: var(--text-primary);
  margin: 0;
}

.serverstatus-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.serverstatus-description i {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .serverstatus-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .serverstatus-icon-bg {
    font-size: 40rem;
    left: -90px;
    top: -300px;
    transform: rotate(-15deg);
    opacity: 0.4;
  }

  .serverstatus-header {
    margin-bottom: 1rem;
  }

  .serverstatus-title {
    font-size: 1.3rem;
  }

  .serverstatus-description {
    font-size: 0.9rem;
  }
}

.topdonator-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topdonator-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
}

.topdonator-icon-bg {
  position: absolute;
  left: -70px;
  top: -210px;
  transform: rotate(-15deg);
  font-size: 25rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.topdonator-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.topdonator-title {
  color: var(--text-primary);
  margin: 0;
}

.topdonator-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
}

.topdonator-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.topdonator-username {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 600;
}

.topdonator-amount {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.topdonator-amount strong {
  color: var(--positive);
  font-weight: 700;
}

.topdonator-skin-container {
  position: absolute;
  bottom: -60px;
  right: 20px;
  width: 120px;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.topdonator-skin {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.topdonator-skin-placeholder {
  width: 80px;
  height: 80px;
  background: var(--block-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.topdonator-skin-placeholder i {
  font-size: 2.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.topdonator-empty {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 2rem 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {

  .topdonator-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    min-height: 220px;
  }

  .topdonator-icon-bg {
    font-size: 20rem;
    left: -40px;
    top: -80px;
    transform: rotate(-15deg);
    opacity: 0.4;
  }

  .topdonator-header {
    margin-bottom: 1rem;
  }

  .topdonator-title {
    font-size: 1.3rem;
  }

  .topdonator-username {
    font-size: 1.1rem;
  }

  .topdonator-amount {
    font-size: 0.9rem;
  }

  .topdonator-skin-container {
    width: 100px;
    height: 160px;
    right: 10px;
  }

  .topdonator-empty {
    font-size: 0.9rem;
  }
}

.featured-package-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    min-height: 250px;
}

.featured-image-container {
    background: var(--block-light);
    border-radius: var(--border-radius);
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    z-index: 2;
}

.featured-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.featured-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.featured-header {
    margin: 0;
}

.featured-title {
    color: var(--text-primary);
    margin: 0;
}

.featured-price-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.featured-price {
    color: var(--primary-color);
    font-weight: 700;
    margin: 0;
}

.featured-price-old {
    color: var(--negative);
    text-decoration: line-through;
    margin: 0;
}

.featured-price-sale {
    color: var(--sale-tag);
    font-weight: 700;
    margin: 0;
}

.featured-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.payments-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
}

.payments-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.payments-accent-block {
  width: 80px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 0px 0px 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.payments-icon-bg {
  position: absolute;
  right: 33%;
  top: 50%;
  transform: translateY(-50%) translateX(50%) rotate(-15deg);
  font-size: 35rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.payments-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.payments-title {
  color: var(--text-primary);
  margin: 0;
}

.payment-avatars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.payment-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.payment-avatar-container {
  background: var(--block-light);
  border-radius: var(--border-radius);
  padding: 1rem;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.payment-avatar-img {
  width: 120%;
  height: auto;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.payment-avatar-placeholder {
  font-size: 3rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.payment-name {
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payments-empty {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 2rem 0;
}

@media (max-width: 768px) {
  .payments-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .payments-header {
    margin-bottom: 1.5rem;
  }

  .payments-icon-bg {
    font-size: 15rem;
    right: 33%;
    transform: translateY(-50%) translateX(50%) rotate(-15deg);
    opacity: 0.4;
  }

  .payments-title {
    font-size: 1.3rem;
  }

  .payment-avatars-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
  }

  .payment-avatar-container {
    width: 60px;
    height: 60px;
    padding: 0.5rem;
  }

  .payment-avatar-img {
    width: 110%;
    bottom: -8px;
  }

  .payment-name {
    font-size: 0.85rem;
  }
}

.cms-page-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
  padding: 3rem 2rem 2rem 2rem;
}

.cms-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.cms-page-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.cms-page-description {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .navigation-page-row {
        display: none;
    }

    .cms-page-block {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .cms-page-header {
        margin-bottom: 1.5rem;
    }

    .cms-page-title {
        font-size: 1.8rem;
    }

    .cms-page-description {
        font-size: 0.95rem;
    }
}

.login-page-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    margin-bottom: 2rem;
    overflow: visible;
}

.login-page-content {
    padding: 3rem 2rem 5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.login-page-header {
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.login-page-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.login-page-description {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.8;
}

.login-platform-toggle {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.login-platform-btn {
    flex: 1;
    background: var(--block-dark);
    border-radius: var(--border-radius);
    border: none;
    padding: 2rem 2rem;
    color: var(--text-secondary);
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.login-platform-btn.mode-active {
    background: var(--block-light);
    color: var(--text-primary);
}

.login-platform-btn:hover {
    background: var(--block-light);
    color: var(--text-primary);
}

.login-form {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    align-items: center;
}

.login-form:focus-within {
    outline: none;
}

.login-input {
    flex: 1;
    background: var(--block-dark);
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.3s ease;
}

.login-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.login-input:focus {
    outline: none;
}

.login-submit-btn {
    flex-shrink: 0;
    font-size: 1rem;
    align-self: stretch;
    font-weight: 600;
}

@media (max-width: 768px) {
    .login-page-content {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
        gap: 1.5rem;
    }

    .login-page-title {
        font-size: 1.8rem;
    }

    .login-page-description {
        font-size: 0.95rem;
    }

    .login-platform-toggle {
        flex-direction: column;
        gap: 0.75rem;
    }

    .login-platform-btn {
        padding: 1.5rem 1.5rem;
    }

    .login-form {
        flex-direction: column;
        gap: 1rem;
        max-width: none;
    }


    .login-submit-btn {
        width: 100%;
        align-self: stretch;
        justify-content: center;
    }
}

.package-page-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    margin-bottom: 2rem;
    overflow: visible;
}

.package-page-content {
    padding: 3rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.package-page-header {
    text-align: left;
}

.package-page-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.package-page-description {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.8;
}

.package-page-divider {
    border: none;
    border-top: var(--block-border-width) solid var(--block-border);
    margin: 0;
    width: 100%;
}

.package-page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.package-page-pricing {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.package-price {
    color: var(--text-secondary);
    font-size: 1.8rem;
    font-weight: 700;
}

.package-original-price {
    color: var(--negative);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: line-through;
}

.package-page-actions {
    display: flex;
    gap: 1rem;
    flex-direction: row;
}

.package-action-btn {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .package-page-content {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
        gap: 1.5rem;
    }

    .package-page-title {
        font-size: 1.8rem;
    }

    .package-page-description {
        font-size: 0.95rem;
    }

    .package-page-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .package-page-actions {
        width: 100%;
        flex-direction: row;
    }

    .package-action-btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .package-price,
    .package-sale-price {
        font-size: 1.5rem;
    }

    .package-original-price {
        font-size: 1rem;
    }
}

.package-page-image-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 2rem;
}

.package-page-image {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
    .package-page-image-block {
        min-height: 300px;
        padding: 1.5rem;
    }
}

.gift-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1rem;
    color: var(--text-primary);
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    width: 100%;
}

.gift-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.gift-submit-btn {
    margin-top: 1rem;
    width: 100%;
}

.cube-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.cube-modal.show {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.cube-modal-content {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-width: 500px;
    width: 100%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.cube-modal.show .cube-modal-content {
    transform: scale(1);
}

.cube-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.cube-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.cube-modal-body {
    padding: 0 2rem 2rem 2rem;
}

.gift-input-group {
    display: flex;
    background-color: var(--block-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    width: 100%;
}

.gift-input-group form {
    width: 100%;
    display: flex;
    margin: 0;
}

.gift-input-icon {
    padding: 1rem 1.25rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.cube-modal-actions {
    display: flex;
    gap: 1rem;
}

.cube-modal-actions .gift-submit-btn,
.cube-modal-actions .gift-modal-close {
    flex: 1;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
}

.cube-modal-actions .gift-submit-btn i {
    color: var(--icon-primary);
}

.cube-modal-actions .gift-submit-btn .button-text {
    color: var(--icon-primary);
    font-weight: 700;
}

.cube-modal-actions .gift-modal-close i {
    color: var(--negative-text);
    font-weight: 700;
}

.cube-modal-actions .gift-modal-close .button-text {
    color: var(--negative-text);
    font-weight: 700;
}

@media (max-width: 768px) {
    .cube-modal {
        padding: 15px;
    }

    .cube-modal-content {
        max-width: none;
    }

    .cube-modal-header {
        padding: 1.5rem;
    }

    .cube-modal-title {
        font-size: 1.3rem;
    }

    .cube-modal-body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .gift-input-group {
        flex-direction: column;
    }

    .cube-modal-actions {
        flex-direction: column;
    }

    .gift-submit-btn {
        width: 100%;
    }
}

.checkout-page-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: visible;
}

.checkout-page-content {
    padding: 40px 30px;
}

.checkout-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.checkout-header-flex .text-title {
    margin: 0;
}

.checkout-total-price {
    color: var(--positive);
}

.checkout-divider {
    border: 0;
    border-top: var(--block-border-width) solid var(--block-border);
    margin: 20px 0;
    width: 100%;
}

.checkout-package-header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    width: 100%;
}

.checkout-package-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
}

.checkout-label-package {
    text-align: left;
}

.checkout-package-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    width: 100%;
    background-color: var(--block-dark);
    padding: 20px;
    border-radius: 6px;
    align-items: center;
    margin-bottom: 10px;
}

.checkout-package-price {
    color: var(--primary-color);
    text-align: center;
}

.checkout-quantity-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--footer-bg);
    border-radius: 4px;
    padding: 4px;
}

.quantity-field .quantity {
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    width: 50px;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.quantity-field .quantity::-webkit-outer-spin-button,
.quantity-field .quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-field .btn-tertiary {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    line-height: 1;
}

.quantity-field .btn-tertiary:hover:not(:disabled) {
    color: var(--primary-color);
}

.quantity-field .btn-tertiary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.checkout-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.checkout-btn-info {
    background-color: var(--primary-color);
    color: var(--icon-primary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.checkout-btn-info:hover {
    background-color: var(--primary-hover-color);
}

.checkout-btn-remove {
    background-color: var(--negative);
    color: var(--negative-text);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.checkout-btn-remove:hover {
    background-color: var(--negative-hover-color);
}

.checkout-footer {
    margin-top: 30px;
    padding-top: 20px;
}

.checkout-agreements {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.checkout-agreement-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.checkout-agreement-item .checkout-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkout-checkmark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  margin-top: 1px;
}

.checkout-checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--icon-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkout-agreement-item .checkout-checkbox:checked ~ .checkout-checkmark {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.checkout-agreement-item .checkout-checkbox:checked ~ .checkout-checkmark::after {
  opacity: 1;
}

.checkout-agreement-item:hover .checkout-checkmark {
  border-color: var(--primary-color);
}

.checkout-agreement-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkout-agreement-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.checkout-agreement-link:hover {
  color: var(--primary-hover-color);
  text-decoration: underline;
}

.checkout-agreement-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 15px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: var(--border-radius);
  color: #e74c3c;
  font-size: 0.85rem;
  font-weight: 600;
}

.checkout-agreement-error i {
  font-size: 0.9rem;
}

.checkout-footer-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.checkout-btn-continue {
    background: var(--block-light);
    padding: 12px 24px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.checkout-btn-continue:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.checkout-btn-checkout {
    background-color: var(--primary-color);
    color: var(--icon-primary);
    padding: 12px 24px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.checkout-btn-checkout:hover {
    background-color: var(--primary-hover-color);
    transform: translateY(-2px);
}

/* Options Form Styles */
.options-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.options-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.options-label {
    color: var(--text-primary);
    font-family: 'Poppins';
    font-size: 0.95rem;
    font-weight: 500;
}

.options-input {
    background: var(--block-dark);
    border: var(--block-border-width) solid var(--block-border);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.25rem;
    color: var(--text-primary);
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.3s ease;
    width: 100%;
}

.options-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.options-input:focus {
    outline: none;
}

.options-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.options-input-group .options-input {
    flex: 1;
}

.options-input-append {
    background: var(--block-dark);
    border: var(--block-border-width) solid var(--block-border);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.25rem;
    color: var(--text-secondary);
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 500;
}

.options-discord-btn {
    background: #5865F2;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.875rem 1.5rem;
    color: #fff;
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.options-discord-btn:hover {
    background: #4752C4;
    transform: translateY(-1px);
}

.options-form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.options-back-btn {
    background: var(--block-dark);
    border: var(--block-border-width) solid var(--block-border);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.5rem;
    color: var(--text-primary);
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.options-back-btn:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .options-input-group {
        flex-direction: column;
    }

    .options-input-group .options-input {
        width: 100%;
    }

    .options-discord-btn {
        width: 100%;
        text-align: center;
    }

    .options-form-actions {
        flex-direction: column;
    }

    .options-back-btn,
    .options-form-actions .checkout-btn-checkout {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .checkout-header-flex .text-title {
        font-size: 1.5rem;
    }

    .checkout-package-label {
        font-size: 0.85rem;
    }

    .text-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .checkout-header-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .checkout-header-flex .text-title {
        font-size: 1.1rem;
    }

    .checkout-package-header {
        display: none;
    }

    .checkout-package-row {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px 15px;
        text-align: center;
    }

    .checkout-package-row .col-3 {
        grid-column: span 12;
    }

    .checkout-package-row .text-desc {
        text-align: center;
    }

    .checkout-package-price {
        text-align: center;
    }

    .checkout-quantity-form {
        justify-content: center;
    }

    .checkout-actions {
        justify-content: center;
    }

    .text-title {
        font-size: 1.3rem;
    }

    .checkout-footer .text-title {
        font-size: 1.1rem;
    }

    .checkout-footer-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .checkout-page-content {
        padding: 30px 20px;
    }

    .checkout-btn-continue,
    .checkout-btn-checkout {
        width: 100%;
        justify-content: center;
    }
}

.category-page-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 3rem 2rem 2rem 2rem;
    position: relative;
}

.category-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.category-page-header h1 {
    margin: 0 0 1rem 0;
}

.category-page-header p {
    margin: 0;
}

.category-page-header h1 {
    color: var(--text-primary);
}

.category-page-description p {
    color: var(--text-secondary);
}

.category-page-content {
    color: var(--text-primary);
    line-height: 1.8;
}

.category-page-content h1,
.category-page-content h2,
.category-page-content h3,
.category-page-content h4,
.category-page-content h5,
.category-page-content h6 {
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.category-page-content p {
    margin-bottom: 1rem;
}

.category-page-content a {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.category-page-content a:hover {
    opacity: 0.8;
}

.category-page-content ul,
.category-page-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.category-page-content li {
    margin-bottom: 0.5rem;
}

.category-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

.category-page-content code {
    background: var(--block-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.category-page-content pre {
    background: var(--block-light);
    padding: 1rem;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

.category-page-content pre code {
    background: none;
    padding: 0;
}

@media (max-width: 768px) {
    .category-page-block {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .category-page-header h1 {
        font-size: 1.3rem;
    }

    .category-page-header p {
        font-size: 0.9rem;
    }

    .category-page-content {
        font-size: 0.95rem;
    }
}

.packages-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.package-list-item {
    background: var(--block-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-list-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.package-list-info .text-title {
    min-width: 200px;
}

.package-list-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    text-align: right;
    order: 5;
}

.package-list-price .package-price-row {
    margin-bottom: 0;
    justify-content: flex-end;
}

.package-price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upsell-package-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.upsell-package-price {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

.package-price-old {
    color: var(--negative);
    text-decoration: line-through;
    font-weight: 600;
}

.package-price {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

.package-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--negative);
    font-weight: 600;
    font-size: 0.9rem;
}

.package-list-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.package-list-actions .primary-button,
.package-list-actions .secondary-button,
.package-list-actions .negative-button {
    padding: 0.75rem;
    min-width: 45px;
    justify-content: center;
}

.package-gift-section-list,
.package-gift-section-grid {
    margin-top: 1rem;
    width: 100%;
}

.package-gift-section-list {
    background: var(--block-dark);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    border: 4px solid var(--block-border);
}

.gift-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    transition: color 0.3s ease;
}

.gift-toggle-btn:hover {
    color: var(--primary-color);
}

.gift-form-container-list,
.gift-form-container-grid {
    display: none;
    margin-top: 1rem;
}

.gift-form-container-list.show,
.gift-form-container-grid.show {
    display: block;
}

.gift-input-group {
    display: flex;
    gap: 0.5rem;
}

.package-gift-section-list .gift-toggle-btn,
.package-gift-section-list .gift-input-group {
    margin: 0 auto;
}

.gift-input {
    flex: 1;
    background: var(--block-light);
    border: none;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: 'Poppins';
}

.gift-input:focus {
    outline: none;
}

.gift-submit-btn {
    background: var(--primary-color);
    border: none;
    color: var(--icon-primary);
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.gift-submit-btn:hover {
    opacity: 0.9;
}

.packages-grid-container {
    width: 100%;
}

.featured-package-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    height: 100%;
}

.featured-image-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    flex-shrink: 0;
}

.featured-image {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.featured-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.featured-header {
    text-align: left;
}

.featured-title {
    color: var(--text-primary);
    margin: 0;
}

.featured-price-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.featured-price {
    color: var(--primary-color);
    font-weight: 700;
}

.featured-price-old {
    color: var(--negative);
    font-weight: 600;
    text-decoration: line-through;
}

.featured-price-sale {
    color: var(--primary-color);
    font-weight: 700;
}

.featured-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.featured-buttons .primary-button,
.featured-buttons .secondary-button,
.featured-buttons .negative-button {
    flex: 1;
    min-width: 45px;
    justify-content: center;
}

@media (max-width: 991px) {
    .package-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .package-list-info {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .package-list-info .text-title {
        min-width: auto;
        text-align: left;
    }

    .package-list-price {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .package-list-item {
        padding: 1.5rem;
    }

    .package-price-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .package-list-actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }

    .package-list-actions .primary-button,
    .package-list-actions .secondary-button,
    .package-list-actions .negative-button {
        flex: 1;
        justify-content: center;
    }

    .featured-package-block {
        padding: 1.5rem;
        text-align: center;
        flex-direction: column;
    }

    .featured-image-container {
        order: 1;
        min-width: auto;
    }

    .featured-image {
        max-width: 200px;
        max-height: 200px;
    }

    .featured-content {
        order: 2;
        align-items: center;
    }

    .featured-header {
        text-align: center;
    }

    .featured-price-container {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .featured-buttons {
        width: 100%;
        flex-direction: row;
    }

    .featured-buttons .primary-button,
    .featured-buttons .secondary-button,
    .featured-buttons .negative-button {
        flex: 1;
    }
}

.vote-button {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    min-height: 150px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.vote-button:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.3);
}

.vote-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    z-index: 2;
    position: relative;
}

.vote-content h2 {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.vote-content p {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .vote-button {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1rem;
        justify-content: center;
    }

    .vote-content {
        align-items: center;
        justify-content: center;
    }

    .vote-content p {
        font-size: 1.2rem;
    }

    .col-6 {
        grid-column: span 12;
    }
}

.patron-card {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.patron-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.patron-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.patron-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.patron-image {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patron-image img {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.patron-image-placeholder {
    font-size: 80px;
    color: var(--text-primary);
    opacity: 0.1;
}

.patron-details {
    display: flex;
    background-color: var(--block-dark);
    flex-direction: column;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    gap: 0.5rem;
    align-items: center;
}

.patron-player-name {
    color: var(--primary-color);
    margin: 0;
    line-height: 1.2;
}

.patron-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .patron-card {
        min-height: 280px;
        padding: 1.5rem;
    }

    .patron-eclipse {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }

    .patron-header {
        margin-top: 0.5rem;
    }

    .patron-icon {
        font-size: 1.3rem;
    }

    .patron-image {
        height: 100px;
    }

    .patron-image img {
        width: 100px;
        height: 100px;
    }

    .patron-player-name {
        font-size: 1.3rem;
    }

    .patron-subtitle {
        font-size: 0.85rem;
    }

    .col-3 {
        grid-column: span 12;
    }
}

.patron-tier-bar {
    border: var(--block-border-width) solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 16px 24px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

.patron-tier-diamond {
    background: #20c0e6;
}

.patron-tier-emerald {
    background: #20e650;
}

.patron-tier-netherite {
    background: #e4274a;
}

.faq-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: visible;
    margin-bottom: 2rem;
    width: 100%;
}

.faq-content {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 3rem 2rem 2rem 2rem;
}

.faq-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.faq-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.faq-description {
    color: var(--text-secondary);
    margin: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: var(--block-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--block-dark);
}

.faq-text {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.faq-arrow {
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: var(--block-dark);
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-answer p {
    padding: 1.5rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

.rules-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: visible;
    margin-bottom: 2rem;
    width: 100%;
}

.rules-content {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 3rem 2rem 2rem 2rem;
}

.rules-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.rules-title {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.rules-description {
    color: var(--text-secondary);
    margin: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.rules-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.rule-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--block-light);
    border-radius: var(--border-radius);
    align-items: flex-start;
    transition: all 0.3s ease;
}

.rule-item:hover {
    background: var(--block-dark);
    border-color: var(--negative);
}

.rule-number {
    background: var(--negative);
    color: var(--negative-text);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rule-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.rule-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.3;
}

.rule-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 768px) {

    .faq-content,
    .rules-content {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .faq-header,
    .rules-header {
        margin-bottom: 1.5rem;
    }

    .faq-title,
    .rules-title {
        font-size: 1.8rem;
    }

    .faq-description,
    .rules-description {
        font-size: 0.9rem;
    }

    .faq-question {
        padding: 1rem 1.25rem;
    }

    .faq-text {
        font-size: 0.9rem;
    }

    .faq-answer p {
        padding: 1.25rem;
        font-size: 0.85rem;
    }

    .rule-item {
        padding: 1rem 1.25rem;
        gap: 0.875rem;
    }

    .rule-number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .rule-title {
        font-size: 0.9rem;
    }

    .rule-desc {
        font-size: 0.85rem;
    }
}

.package-upsell-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.package-img-block {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
    margin: 0 auto 1rem auto;
}

.package-img-block img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Clickable image trigger (upsell / coin-slider / ranktable) — no button chrome or box */
.package-img-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.package-name {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.package-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--negative);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.package-countdown i {
    font-size: 1rem;
}

.package-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.package-price {
    color: var(--text-secondary);
    font-size: 1.5rem;
    font-weight: 700;
}

.package-price-old {
    color: var(--negative);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: line-through;
}

.package-grid-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 2;
}

.package-button-group {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
}

.package-btn-info,
.package-btn-cart {
    flex: 1;
    background: var(--primary-color);
    border: none;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: var(--icon-primary);
    font-weight: 600;
}

.package-btn-info i,
.package-btn-cart i {
    font-size: 1.1rem;
}

.package-btn-info:hover,
.package-btn-cart:hover {
    background: var(--primary-hover-color);
    transform: translateY(-1px);
}

.package-btn-info {
    background: var(--primary-color);
    color: var(--icon-primary);
}

.package-btn-info:hover {
    background: var(--primary-hover-color);
}

.package-btn-cart[disabled],
.package-btn-info[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .package-upsell-block {
        padding: 1.5rem;
    }

    .package-img-block img {
        max-width: 120px;
        max-height: 120px;
    }

    .package-price {
        font-size: 1.3rem;
    }

    .package-price-old {
        font-size: 1rem;
    }

    .package-button-group {
        max-width: 100%;
    }

    .package-btn-info,
    .package-btn-cart {
        padding: 0.65rem 1.25rem;
    }
}

.ranktable-block {
    background-color: var(--block-color);
    width: 100%;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow-x: auto;
    margin-top: 1rem;
}

.rank-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 5px;
    background-color: transparent;
    border: none;
}

.rank-table thead th {
    background-color: transparent;
    padding: 35px 20px;
    border: none;
    vertical-align: bottom;
}

.rank-table tbody tr:nth-child(odd) td,
.rank-table tbody tr:nth-child(odd) th {
    background-color: var(--block-light);
}

.rank-table tbody tr:nth-child(odd) th:first-child,
.rank-table tbody tr:nth-child(odd) td:first-child {
    border-radius: 8px 0 0 8px;
}

.rank-table tbody tr:nth-child(odd) th:last-child,
.rank-table tbody tr:nth-child(odd) td:last-child {
    border-radius: 0 8px 8px 0;
}

.rank-table tbody tr:nth-child(even) td,
.rank-table tbody tr:nth-child(even) th {
    background-color: transparent;
}

.rank-table tbody td,
.rank-table tbody th {
    border: none;
}

.rank-table tbody th,
.rank-table tbody td {
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

.rank-table .feature-description {
    text-align: left;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 250px;
    transition: color 0.3s;
}

.rank-table .feature-question {
    margin-left: 8px;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.rank-table .feature-question:hover {
    color: var(--primary-color);
}

.rank-table .feature-yes {
    color: var(--positive);
    font-size: 28px;
    transition: color 0.3s;
}

.rank-table .feature-no {
    color: var(--negative);
    font-size: 28px;
    transition: color 0.3s;
}

.rank-table .feature-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: color 0.3s;
}

.package-img-src {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.rank-table thead th:hover .package-img-src {
    transform: scale(1.1) rotate(3deg);
}

.rank-table .package-new-price {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.1rem;
}

.block-header.rank-header {
    min-height: auto;
    margin-top: 30px;
    max-height: none;
}

.rank-table-header-cell {
    width: 250px;
}

.rank-header-content .package-countdown {
    justify-content: center;
    margin-bottom: 15px;
}

.rank-header-content .package-img-wrapper {
    margin-bottom: 15px;
}

.rank-header-content .text-title {
    margin-bottom: 15px !important;
    font-size: 1.2rem !important;
}

.rank-header-content .package-price-row {
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    display: flex !important;
}

.rank-header-content .package-new-price,
.rank-header-content .package-price {
    font-size: 1rem !important;
}

.rank-header-content .package-new-price {
    margin-left: 10px;
}

.rank-header-content .package-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.rank-header-content .package-btn-info,
.rank-header-content .package-btn-cart,
.rank-header-content .package-btn-remove {
    padding: 10px 15px !important;
}

.rank-table-header-cell {
    padding: 15px !important;
    vertical-align: top;
    position: relative;
}

.rank-table-features-label {
    background-color: var(--block-light);
    color: var(--text-primary);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    position: absolute;
    top: 15px;
    left: 0px;
    right: 15px;
    bottom: 35px;
}

.rank-table-features-label i {
    font-size: 4.0rem;
}

.rank-table-header-cell .rank-table-features-label {
    margin: 0;
}

.mobile-only {
    display: none !important;
    margin-top: 1rem;
}

@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

@media (max-width: 991px) {
    .rank-table thead th {
        min-width: 200px;
    }
}


.gc-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 1rem;
}

.gc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gc-amount-btn {
    background-color: var(--block-color);
    border-radius: var(--border-radius);
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
}

.gc-amount-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.gc-value-sm {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
}

.gc-currency-sm {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.gc-row-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gc-card-premium {
    background-color: var(--block-color);
    border-radius: var(--border-radius);
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.gc-card-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}

.gc-style-4:hover {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.gc-style-5:hover {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.gc-value-premium {
    font-size: 3rem;
    font-weight: 900;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.gc-currency-premium {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.gc-star-bg {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 280px;
    height: 280px;
    opacity: 0.15;
    z-index: 1;
    transition: all 0.3s ease;
    color: var(--block-light);
}

.gc-card-premium:hover .gc-star-bg {
    opacity: 0.25;
    transform: rotate(15deg);
}

.gc-star-bg svg {
    width: 100%;
    height: 100%;
    fill: var(--block-light);
}

@media (max-width: 991px) {
    .gc-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {

    .gc-row,
    .gc-row-premium {
        grid-template-columns: 1fr;
    }
}

.notice-grid {
    margin-top: 22px;
}

.announcement-grid {
    margin-top: 22px;
}

.announcement-content-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
}

.announcement-image-block {
    background: var(--block-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 300px;
}

.announcement-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.announcement-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.announcement-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.announcement-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    text-transform: uppercase;
}

.announcement-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin-top: 1rem;
}

.announcement-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--block-light);
    color: var(--text-secondary);
    padding: 14px 28px;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2rem;
}

.announcement-button:hover {
    filter: brightness(1.1);
}

.announcement-button i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.announcement-button:hover i {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .announcement-content-block {
        padding: 30px 20px;
        text-align: center;
        align-items: center;
    }

    .announcement-image-block {
        min-height: 200px;
    }

    .announcement-title {
        font-size: 1.6rem;
    }

    .announcement-text {
        max-width: 100%;
    }
}

.staff-tier-bar {
  border: var(--block-border-width) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 16px 24px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-top: 0.5rem;
}

.staff-tier-owner {
  background: #f08c00;
}

.staff-tier-administrator {
  background: #e63946;
}

.staff-tier-moderator {
  background: #4361ee;
}

.staff-tier-helper {
  background: #2dc653;
}

.staff-tier-media {
  background: #9b5de5;
}

.staff-card {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  height: 100%;
}

.staff-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.staff-image img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.staff-image-placeholder {
  font-size: 80px;
  color: var(--text-primary);
  opacity: 0.1;
}

.staff-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.staff-player-name {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .staff-card {
    padding: 1rem;
  }

  .staff-image {
    height: 100px;
  }

  .staff-image img {
    width: 100px;
    height: 100px;
  }

  .staff-player-name {
    font-size: 1.1rem;
  }
}

/* ========================================
   Coin Slider Addon
   ======================================== */

.coin-slider-wrap {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: 20px;
  margin-bottom: 4px;
}

.coin-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.coin-slider-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #b9b6b3;
  transition: color 0.2s ease;
  flex: 1;
  text-align: center;
}

.coin-slider-label:first-child {
  text-align: left;
}

.coin-slider-label:last-child {
  text-align: right;
}

.coin-slider-label.active {
  color: var(--primary-color);
}

.coin-stage .package-card-price-row {
  margin-bottom: 16px;
}

.coin-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--block-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.coin-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 2px solid var(--block-dark);
}

.coin-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.coin-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 2px solid var(--block-dark);
  box-sizing: border-box;
}

.coin-slider-input::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.coin-stages {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: 16px;
}

.coin-stage {
  display: block;
}

.coin-stage.d-none {
  display: none !important;
}

.coin-stage.active {
  display: block !important;
}

.coin-stage .primary-button {
  width: 100%;
  justify-content: center;
}
/* Package Info Modal Styles */

.cube-package-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.cube-package-modal.show {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.cube-package-modal-content {
    background: var(--block-color);
    border: var(--block-border-width) solid var(--block-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.cube-package-modal.show .cube-package-modal-content {
    transform: scale(1);
}

.cube-package-modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--negative);
    color: var(--negative-text);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    text-decoration: none;
    padding: 0;
    font-size: 0.85rem;
    z-index: 2;
}

.cube-package-modal-close-btn:hover {
    background-color: var(--negative-hover-color);
}

.cube-package-modal-close-btn i {
    color: var(--negative-text);
}

.cube-package-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 3rem;
}

.cube-package-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.cube-package-modal-body {
    padding: 0 2rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cube-package-modal-description {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-height: 40vh;
    overflow-y: auto;
    word-wrap: break-word;
}

/* Themed scrollbar for the package modal's scrollable areas */
.cube-package-modal-body,
.cube-package-modal-description {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--block-dark);
}

.cube-package-modal-body::-webkit-scrollbar,
.cube-package-modal-description::-webkit-scrollbar {
    width: 8px;
}

.cube-package-modal-body::-webkit-scrollbar-track,
.cube-package-modal-description::-webkit-scrollbar-track {
    background: var(--block-dark);
    border-radius: var(--border-radius);
}

.cube-package-modal-body::-webkit-scrollbar-thumb,
.cube-package-modal-description::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--border-radius);
    border: 2px solid var(--block-dark);
}

.cube-package-modal-body::-webkit-scrollbar-thumb:hover,
.cube-package-modal-description::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover-color);
}

.cube-package-modal-description {
    /* keep a little breathing room so text doesn't sit under the scrollbar */
    padding-right: 0.5rem;
}

.cube-package-modal-description p,
.cube-package-modal-description h1,
.cube-package-modal-description h2,
.cube-package-modal-description h3,
.cube-package-modal-description h4,
.cube-package-modal-description h5,
.cube-package-modal-description h6,
.cube-package-modal-description ul,
.cube-package-modal-description ol,
.cube-package-modal-description blockquote {
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.cube-package-modal-description h1,
.cube-package-modal-description h2,
.cube-package-modal-description h3,
.cube-package-modal-description h4,
.cube-package-modal-description h5,
.cube-package-modal-description h6 {
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

.cube-package-modal-description a {
    color: var(--primary-color);
    text-decoration: underline;
}

.cube-package-modal-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.cube-package-modal-description ul,
.cube-package-modal-description ol {
    padding-left: 1.5rem;
}

.cube-package-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: var(--block-border-width) solid var(--block-border);
    padding-top: 1.25rem;
    margin-top: auto;
}

.cube-package-modal-pricing {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cube-package-modal-pricing .package-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cube-package-modal-pricing .package-original-price {
    font-size: 1rem;
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.7;
}

.cube-package-modal-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cube-package-modal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 1rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
    font-size: 1rem;
}

.cube-package-modal-btn-cart,
.cube-package-modal-btn-gift {
    background-color: var(--primary-color, #27ae60);
    color: var(--icon-primary, #fff);
}

.cube-package-modal-btn-cart:hover,
.cube-package-modal-btn-gift:hover {
    background-color: var(--primary-hover-color, var(--primary-color, #27ae60));
}

.cube-package-modal-btn-subscribe {
    background-color: var(--secondary-color, #6c757d);
    color: var(--text-primary, #fff);
}

.cube-package-modal-btn-subscribe:hover {
    opacity: 0.85;
}

.cube-package-modal-btn-remove {
    background-color: var(--negative, #dc3545);
    color: var(--negative-text, #fff);
}

.cube-package-modal-btn-remove:hover {
    background-color: var(--negative-hover-color, #c82333);
}

.cube-package-modal-btn-cart i,
.cube-package-modal-btn-gift i,
.cube-package-modal-btn-subscribe i,
.cube-package-modal-btn-remove i {
    color: inherit;
}

@media (max-width: 768px) {
    .cube-package-modal {
        padding: 15px;
    }

    .cube-package-modal-content {
        max-width: none;
        max-height: 92vh;
    }

    .cube-package-modal-header {
        padding: 1.5rem 2.5rem;
    }

    .cube-package-modal-title {
        font-size: 1.25rem;
    }

    .cube-package-modal-body {
        padding: 0 1.25rem 1.25rem 1.25rem;
    }

    .cube-package-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .cube-package-modal-actions {
        justify-content: center;
    }
}




/* ---------------------------------------------------------------------------
   Grouped rank tiles with duration pills (see ranktable.twig).
   One tile per rank; each pill is a separate Tebex package.
   --------------------------------------------------------------------------- */

.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.rank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.rank-image-link { display: block; width: 100%; }

.rank-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--border-radius);
}

.rank-image-default { background: var(--block-light); }

.rank-title {
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rank-title a { color: var(--text-primary); text-decoration: none; }

.rank-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.rank-pill {
  flex: 1 1 auto;
  min-width: 54px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rank-pill:hover { border-color: var(--primary-color); }

.rank-pill.is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.rank-prices { width: 100%; text-align: center; }

.rank-price {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.rank-price .discount {
  opacity: 0.6;
  font-size: 0.85em;
  margin-right: 6px;
}

.rank-ctas { width: 100%; }

.rank-cta[disabled] { opacity: 0.5; pointer-events: none; }

/* .btn-primary is defined outside store.css, so the rank CTA styles itself
   rather than depending on it. Declared last so it wins the cascade. */
.rank-cta,
.rank-cta:link,
.rank-cta:visited {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background: var(--primary-color);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.15s ease;
}

.rank-cta:hover { background: var(--primary-hover-color); }

.rank-cta[disabled] { opacity: 0.5; pointer-events: none; }

/* The explicit display:block above beats the UA stylesheet's [hidden] rule,
   so the non-selected CTAs need this or every duration renders at once. */
.rank-cta[hidden],
.rank-price[hidden] { display: none; }

/* The tile header (artwork + name) is a button that opens Cube's package
   modal, so it must be stripped of default button chrome. */
.rank-open {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.rank-open .rank-title {
  display: block;
  margin-top: 12px;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

.rank-open:hover .rank-title { color: var(--primary-color); }


/* ==========================================================================
   OceanMC — ocean palette

   Cube generates its colour block from the "Colourway" option, which only
   offers seven grey-based presets and is injected inline (so it loads after
   this file). Custom Themes are ignored by this template entirely — their
   stylesheet never reaches the page. Higher specificity is what wins here:
   "html:root" (0,1,1) beats the generated ":root" (0,1,0) regardless of
   load order. Delete this block to fall straight back to Dark-Blue.
   ========================================================================== */

html:root {
  /* surfaces — abyss below, shallows above */
  --background: #061421;
  --background-img: none;

  --block-color: #0E2438;
  --block-light: #17334D;
  --block-dark: #0A1B2B;
  --block-border: #1B3D5C;
  --block-border-width: 1px;

  --border-radius: 12px;
  --box-shadow: 0 10px 30px rgba(2, 12, 22, 0.55);

  /* accents — bright water, sand as the warm counterpoint */
  --primary-color: #2FB6F2;
  --primary-hover-color: #58C9F8;
  --secondary-color: #F5B942;
  --secondary-hover-color: #FFC961;

  /* text — never pure white; it reads cold against navy */
  --text-primary: #EAF6FF;
  --text-secondary: #9FC0D8;
  --icon-primary: #EAF6FF;

  /* status */
  --positive: #3FD9A0;
  --positive-hover-color: #57E6B1;
  --positive-text: #04372A;
  --negative: #FF6B6B;
  --negative-hover-color: #FF8585;
  --negative-text: #5C1414;
  --sale-tag: #FF7A59;

  /* footer — the sea floor */
  --footer-bg: #050F1A;
  --footer-dark: #030A12;
  --footer-stroke: #0C2135;
  --footer-description: #9FC0D8;
}

/* Light falls from the surface and fades with depth. Fixed so it stays put
   while the page scrolls instead of sliding away. */
html body {
  background-color: var(--background);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(47, 182, 242, 0.20), transparent 62%),
    linear-gradient(180deg, #0A2237 0%, #061421 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Raised surfaces catch a little light on their top edge. */
.rank-card,
.store-product,
.package-upsell-block,
.category-page-block,
.cube-package-modal-content {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

/* Tiles lift toward the cursor. */
.rank-card,
.store-product {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rank-card:hover,
.store-product:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: 0 14px 34px rgba(2, 12, 22, 0.65);
}

/* Primary actions get a current running through them. */
.rank-cta,
.rank-cta:link,
.rank-cta:visited {
  background-image: linear-gradient(180deg, #45C2F7 0%, #1E9FDD 100%);
}

.rank-cta:hover { background-image: linear-gradient(180deg, #63D0FA 0%, #2FB0EC 100%); }

/* The selected duration should be unmistakable. */
.rank-pill { background-color: rgba(255, 255, 255, 0.03); }

.rank-pill:hover {
  background-color: rgba(47, 182, 242, 0.12);
  border-color: var(--primary-color);
}

.rank-pill.is-active {
  background-image: linear-gradient(180deg, #45C2F7 0%, #1E9FDD 100%);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(47, 182, 242, 0.55), 0 4px 14px rgba(47, 182, 242, 0.30);
}

/* Sale prices in coral, so a discount reads as a highlight and not an error. */
.rank-price .discount,
.rank-price del.discount { color: var(--sale-tag); opacity: 0.85; }

/* Placeholder art shouldn't be a flat grey slab. */
.rank-image-default {
  background-image: linear-gradient(160deg, #17334D 0%, #0A1B2B 100%);
  border: 1px solid var(--block-border);
}


/* ==========================================================================
   Home page — even category tiles, and some shape on the info panels
   ========================================================================== */

/* Cube promotes the first category to a double-height "featured" tile, which
   made Ranks tower over the other three. Level them all to one size. The
   "html" prefix is only there to out-specify the base rules above. */
html .category-grid.has-featured .col-6:first-child { grid-row: auto; }

html .category-grid .category-button { height: 221px; }

/* ...and undo the featured tile's bottom-left text and one-sided blur mask so
   it reads identically to its neighbours. */
html .category-grid.has-featured .col-6:first-child .category-content {
  align-items: flex-start;
  justify-content: center;
}

html .category-grid.has-featured .col-6:first-child .category-button::after {
  mask-image: none;
}

/* --- Info panels -------------------------------------------------------- */

/* Flat slabs get a waterline along the top, a soft glow off the top-right,
   and a lit top edge — the same language as the rank cards. */
.textbox-block,
.payment-goal-block,
.giftcard-block,
.payments-block {
  overflow: hidden;
  border: var(--block-border-width) solid var(--block-border);
  background-image:
    radial-gradient(620px 220px at 100% 0%, rgba(47, 182, 242, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.textbox-block::before,
.payment-goal-block::before,
.giftcard-block::before,
.payments-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity: 0.8;
  z-index: 2;
}

.textbox-block:hover,
.payment-goal-block:hover,
.giftcard-block:hover,
.payments-block:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 32px rgba(2, 12, 22, 0.55);
}

/* A short accent rule under each panel title. */
.textbox-title,
.payment-goal-title,
.giftcard-title,
.payments-title {
  position: relative;
  padding-bottom: 14px;
}

.textbox-title::after,
.payment-goal-title::after,
.giftcard-title::after,
.payments-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* The community goal bar should look like it's filling with water. */
.payment-goal-progress-fill {
  background-image: linear-gradient(90deg, #1E9FDD 0%, #45C2F7 50%, #7FE0FF 100%);
  border-radius: 999px;
}

.payment-goal-progress-bar {
  border-radius: 999px;
  overflow: hidden;
}

/* ==========================================================================
   Panel background art

   Cube decorates three of the home panels with one giant glyph — a 400px "%",
   a 720px "*" and a 560px "$" — set as plain text inside .*-icon-bg.
   font-size:0 drops the character, then each panel gets an ocean motif in its
   place: waves where something fills up, bubbles on the gift card.
   ========================================================================== */

.payment-goal-icon-bg,
.giftcard-icon-bg,
.payments-icon-bg {
  font-size: 0;
  line-height: 0;
  opacity: 1;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Community goal — a rising swell, bottom-left. */
.payment-goal-icon-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 25 q 30 -20 60 0 t 60 0 t 60 0 t 60 0' opacity='.40'/%3E%3Cpath d='M0 55 q 30 -20 60 0 t 60 0 t 60 0 t 60 0' opacity='.32'/%3E%3Cpath d='M0 85 q 30 -20 60 0 t 60 0 t 60 0 t 60 0' opacity='.25'/%3E%3Cpath d='M0 115 q 30 -20 60 0 t 60 0 t 60 0 t 60 0' opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left -20px bottom 12px;
  background-size: 300px auto;
}

/* Gift card — bubbles drifting up the right-hand side. */
.giftcard-icon-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%232FB6F2'%3E%3Ccircle cx='150' cy='62' r='34' stroke-width='3' opacity='.18'/%3E%3Ccircle cx='96' cy='122' r='20' stroke-width='2.5' opacity='.14'/%3E%3Ccircle cx='158' cy='142' r='12' stroke-width='2' opacity='.12'/%3E%3Ccircle cx='62' cy='58' r='8' stroke-width='2' opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right -20px center;
  background-size: 260px auto;
}

/* Recent payments — a wide, calm swell across the bottom. */
.payments-icon-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 30 q 40 -24 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.34'/%3E%3Cpath d='M0 62 q 40 -24 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.26'/%3E%3Cpath d='M0 94 q 40 -24 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.20'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center bottom 10px;
  background-size: 720px auto;
}

/* Keep panel content above the artwork. */
.payment-goal-content,
.giftcard-content,
.payments-content {
  position: relative;
  z-index: 1;
}

/* Cube sizes and centres these layers around the giant glyph (641x396 offset
   to -320,-197 on a 599x284 panel), which beat the inset:0 above and drew the
   artwork mostly outside the card. Pin them to the panel instead — the extra
   ancestor class is only there to out-specify Cube's own rule. */
.payment-goal-block .payment-goal-icon-bg,
.giftcard-block .giftcard-icon-bg,
.payments-block .payments-icon-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
}

/* ==========================================================================
   Information & Privacy panels

   These two were the only blocks with no artwork and no icon, so they read as
   arbitrary slabs of text. Each now gets an identity (an icon badge above the
   title), more colour in the fill, waves along the bottom and bubbles in the
   top corner.
   ========================================================================== */

/* Deeper, warmer fill than the flat --block-color. */
.textbox-block {
  background-image:
    radial-gradient(560px 260px at 100% 0%, rgba(47, 182, 242, 0.16), transparent 68%),
    radial-gradient(460px 240px at 0% 100%, rgba(63, 217, 160, 0.08), transparent 72%),
    linear-gradient(165deg, #12314A 0%, #0D2338 55%, #0A1B2B 100%);
}

/* Cube ships an empty 900x300 ellipse here; make it the glow off the seabed. */
.textbox-sphere {
  background: radial-gradient(closest-side, rgba(47, 182, 242, 0.20), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Copy sits above every decorative layer. */
.textbox-content { z-index: 1; }

/* Waves along the bottom of the copy. */
.textbox-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  pointer-events: none;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 34 q 40 -26 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.30'/%3E%3Cpath d='M0 66 q 40 -26 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.22'/%3E%3Cpath d='M0 98 q 40 -26 80 0 t 80 0 t 80 0 t 80 0 t 80 0 t 80 0' opacity='.16'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom -16px;
  background-size: 780px auto;
}

/* A few bubbles in the top corner. */
.textbox-block::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 210px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cg fill='none' stroke='%232FB6F2'%3E%3Ccircle cx='150' cy='48' r='28' stroke-width='3' opacity='.26'/%3E%3Ccircle cx='96' cy='96' r='16' stroke-width='2.5' opacity='.20'/%3E%3Ccircle cx='158' cy='112' r='10' stroke-width='2' opacity='.17'/%3E%3Ccircle cx='60' cy='44' r='7' stroke-width='2' opacity='.14'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -12px top 6px;
  background-size: 230px auto;
}

/* An icon badge above each title, so the panels announce what they are. */
.textbox-title::before {
  content: "\f129";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: var(--primary-color);
  background: rgba(47, 182, 242, 0.12);
  border: 1px solid rgba(47, 182, 242, 0.38);
  box-shadow: 0 0 18px rgba(47, 182, 242, 0.18);
}

/* The row holds exactly these two columns, so nth-child tells them apart:
   1 = Information (info glyph), 2 = Privacy (padlock, in seafoam). */
.col-6:nth-child(2) .textbox-title::before {
  content: "\f023";
  color: var(--positive);
  background: rgba(63, 217, 160, 0.12);
  border-color: rgba(63, 217, 160, 0.38);
  box-shadow: 0 0 18px rgba(63, 217, 160, 0.18);
}

.col-6:nth-child(2) .textbox-title::after {
  background: linear-gradient(90deg, var(--positive), var(--primary-color));
}

/* ==========================================================================
   Category tiles + store header

   Cube already uses ::before (dark scrim) and ::after (backdrop blur) on
   .category-button, so the tile artwork and icons hang off .category-content
   instead. Each tile gets its own glyph and tint so the four read as distinct
   destinations rather than four identical slabs.
   ========================================================================== */

.category-button { overflow: hidden; }

/* Span the tile so the artwork can sit against the right edge. */
.category-content { width: 100%; }

.category-content::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
  border: 1px solid transparent;
  margin-bottom: 6px;
  content: "\f521";
  color: var(--primary-color);
  background: rgba(47, 182, 242, 0.14);
  border-color: rgba(47, 182, 242, 0.38);
  box-shadow: 0 0 18px rgba(47, 182, 242, 0.18);
}

/* Waves washing in from the right of each tile. */
.category-content::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -34px;
  width: 300px;
  height: 110px;
  pointer-events: none;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 30 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.30'/%3E%3Cpath d='M0 62 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.22'/%3E%3Cpath d='M0 94 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.15'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom;
  background-size: 300px auto;
}

/* The category row holds exactly these four columns, in order. */
.col-6:nth-child(2) .category-content::before {
  content: "\f084";
  color: var(--secondary-color);
  background: rgba(245, 185, 66, 0.14);
  border-color: rgba(245, 185, 66, 0.38);
  box-shadow: 0 0 18px rgba(245, 185, 66, 0.18);
}

.col-6:nth-child(3) .category-content::before {
  content: "\f06b";
  color: var(--positive);
  background: rgba(63, 217, 160, 0.14);
  border-color: rgba(63, 217, 160, 0.38);
  box-shadow: 0 0 18px rgba(63, 217, 160, 0.18);
}

.col-6:nth-child(4) .category-content::before {
  content: "\f51e";
  color: #7FE0FF;
  background: rgba(127, 224, 255, 0.14);
  border-color: rgba(127, 224, 255, 0.38);
  box-shadow: 0 0 18px rgba(127, 224, 255, 0.18);
}

/* --- Store header ------------------------------------------------------- */

.header-block {
  border: var(--block-border-width) solid var(--block-border);
  background-image:
    radial-gradient(760px 320px at 14% 0%, rgba(47, 182, 242, 0.18), transparent 70%),
    linear-gradient(120deg, #12314A 0%, #0D2338 58%, #0A1B2B 100%);
}

/* Same waterline the panels carry. */
.header-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity: 0.8;
  z-index: 3;
}

/* Waves along the bottom and bubbles behind the store name. */
.header-block::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 620px;
  height: 124px;
  pointer-events: none;
  z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke='%232FB6F2'%3E%3Ccircle cx='152' cy='44' r='26' stroke-width='3' opacity='.24'/%3E%3Ccircle cx='98' cy='92' r='15' stroke-width='2.5' opacity='.18'/%3E%3Ccircle cx='158' cy='104' r='9' stroke-width='2' opacity='.15'/%3E%3Ccircle cx='58' cy='40' r='7' stroke-width='2' opacity='.13'/%3E%3C/g%3E%3C/svg%3E") no-repeat left 300px top -14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 30 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.30'/%3E%3Cpath d='M0 62 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.22'/%3E%3Cpath d='M0 94 q 37 -24 75 0 t 75 0 t 75 0 t 75 0' opacity='.15'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -20px bottom -26px;
  background-size: 200px auto, 340px auto;
}

/* Cube lays a flat rgba(0,0,0,.4) scrim over each tile, which reads dead next
   to the tinted panels below. Same strength, but tinted — so it still works as
   a scrim if a category image is added later. */
.category-button::before {
  background: linear-gradient(115deg,
    rgba(24, 68, 104, 0.55) 0%,
    rgba(10, 27, 43, 0.55) 60%,
    rgba(6, 20, 33, 0.64) 100%);
}

/* ==========================================================================
   Page background + header polish
   ========================================================================== */

/* An ocean behind the whole store. body::before is already taken by Cube, so
   this rides on ::after — fixed, so it stays put while the page scrolls, and
   pinned behind everything. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%232FB6F2'%3E%3Ccircle cx='90' cy='500' r='30' stroke-width='2.5' opacity='.10'/%3E%3Ccircle cx='170' cy='420' r='16' stroke-width='2' opacity='.08'/%3E%3Ccircle cx='510' cy='470' r='38' stroke-width='2.5' opacity='.09'/%3E%3Ccircle cx='430' cy='380' r='14' stroke-width='2' opacity='.07'/%3E%3Ccircle cx='300' cy='545' r='20' stroke-width='2' opacity='.07'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M0 120 q 90 -56 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0' opacity='.16'/%3E%3Cpath d='M0 190 q 90 -56 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0' opacity='.13'/%3E%3Cpath d='M0 260 q 90 -56 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0' opacity='.10'/%3E%3Cpath d='M0 330 q 90 -56 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0 t 180 0' opacity='.07'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 1100px auto, 100% 420px;
}

/* The logo is a 500x500 pixel-art PNG shown at 400x180. The browser was
   smoothing it on the way down, which is what made it look out of focus;
   pixelated keeps the pixel edges crisp. */
img.store-logo,
.header-center-logo img,
.server-favicon img {
  image-rendering: pixelated;
}

/* Live count badges on the IP and Discord spheres. */
.header-icon-sphere { position: relative; }

.omc-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #04283C;
  background: linear-gradient(180deg, #7FE0FF 0%, #2FB6F2 100%);
  border: 2px solid var(--background);
  box-shadow: 0 3px 10px rgba(2, 12, 22, 0.5);
}

/* Tidy the top row: even alignment and a clearer hover. */
.header-center-row { align-items: center; }

.header-icon-wrapper {
  text-decoration: none;
  transition: transform 0.18s ease;
}

.header-icon-wrapper:hover { transform: translateY(-2px); }

/* ==========================================================================
   Fixed top navigation bar (built by function.js)
   ========================================================================== */

.omc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 56px;
  background: rgba(6, 18, 30, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--block-border);
  box-shadow: 0 6px 22px rgba(2, 12, 22, 0.45);
}

/* Push the page down so the bar never covers the store header. */
body.has-omc-topbar { padding-top: 56px; }

.omc-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 16px;
}

.omc-topbar-side { display: flex; align-items: center; gap: 8px; }
.omc-topbar-mid { flex: 1 1 auto; }
.omc-topbar-right { justify-content: flex-end; }

.omc-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--block-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.omc-tb-btn:hover {
  background: rgba(47, 182, 242, 0.16);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

/* The three right-hand actions each carry their own colour, matching the
   category tiles so the same idea reads the same way across the store. */
.omc-tb-cart:hover   { background: rgba(63, 217, 160, 0.18); border-color: var(--positive); color: var(--positive); }
.omc-tb-patron:hover { background: rgba(245, 185, 66, 0.18); border-color: var(--secondary-color); color: var(--secondary-color); }
.omc-tb-portal:hover { background: rgba(127, 224, 255, 0.18); border-color: #7FE0FF; color: #7FE0FF; }

.omc-tb-user,
.omc-tb-cart-text {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 38px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s ease;
}

.omc-tb-user:hover,
.omc-tb-cart-text:hover { background: rgba(255, 255, 255, 0.05); }

.omc-tb-cart-text { text-align: right; }

.omc-tb-user-text { display: flex; flex-direction: column; line-height: 1.15; }

.omc-tb-user-name {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.omc-tb-user-sub { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

.omc-topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  image-rendering: pixelated;
  border: 1px solid var(--block-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 13px;
}

/* Below ~720px the wordy bits would collide, so only the icons survive. */
@media (max-width: 720px) {
  .omc-tb-user-text, .omc-tb-cart-text { display: none; }
}

/* ==========================================================================
   Patron page (patron-page.twig)
   ========================================================================== */

.patron-page { padding: 8px 0 40px; }

.patron-page-head { text-align: center; margin-bottom: 34px; }
.patron-page-head .text-desc { margin-top: 8px; color: var(--text-secondary); }

.patron-tier {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 22px;
  background: var(--block-color);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.patron-tier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity: 0.8;
}

.patron-tier-netherite::before { background: linear-gradient(90deg, transparent, #C9A227, transparent); }
.patron-tier-diamond::before   { background: linear-gradient(90deg, transparent, #7FE0FF, transparent); }
.patron-tier-emerald::before   { background: linear-gradient(90deg, transparent, var(--positive), transparent); }

.patron-tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.patron-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(47, 182, 242, 0.14);
  border: 1px solid rgba(47, 182, 242, 0.38);
  color: var(--primary-color);
}

.patron-tier-netherite .patron-tier-icon { background: rgba(201, 162, 39, 0.14); border-color: rgba(201, 162, 39, 0.4); color: #E3BE45; }
.patron-tier-diamond .patron-tier-icon   { background: rgba(127, 224, 255, 0.14); border-color: rgba(127, 224, 255, 0.4); color: #7FE0FF; }
.patron-tier-emerald .patron-tier-icon   { background: rgba(63, 217, 160, 0.14); border-color: rgba(63, 217, 160, 0.4); color: var(--positive); }

.patron-tier-title { margin: 0; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; }

.patron-tier-count {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--block-border);
}

.patron-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
}

.patron-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--block-border);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.patron-card:hover { transform: translateY(-2px); border-color: var(--primary-color); }

.patron-avatar {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  image-rendering: pixelated;
}

.patron-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  word-break: break-word;
}

/* ==========================================================================
   Store logo sharpness

   Measured, not guessed. The file is 500x500, but the artwork inside it only
   occupies 488x254 at offset 6,123 — the rest is transparent padding. Because
   object-fit:contain fits the whole 500px-tall CANVAS into a 180px-tall box,
   the logo was being painted at roughly 176x91. A 488px-wide graphic squeezed
   into 176px is the blur.

   Also: 31.5% of its visible pixels are semi-transparent, so this is soft,
   anti-aliased artwork, not pixel art. image-rendering:pixelated (which I had
   applied earlier) is for UPSCALING crisp pixels; on a 2.78x downscale of
   anti-aliased art it throws pixels away and makes it worse. Back to auto.

   Raising the box height lets the artwork paint far larger. The centre row had
   ~48px of slack beneath it and plenty of empty space around the logo.
   ========================================================================== */

img.store-logo,
.header-center-logo img {
  image-rendering: auto;
  width: 100%;
  height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(2, 12, 22, 0.45));
}

.header-center-logo { height: auto; }

/* The small header-block mark is downscaled too (75 -> 60), so the same
   reasoning applies: let the browser resample it smoothly. */
.server-favicon img { image-rendering: auto; }

@media (max-width: 720px) {
  img.store-logo,
  .header-center-logo img { height: 200px; }
}

/* Cube clamps the logo with .store-logo { max-height: 180px }, which silently
   capped the height set above — max-height beats height. Override both, and
   pin an explicit width so the box does not collapse to a square. */
img.store-logo,
.header-center-logo img {
  width: 460px;
  max-width: 100%;
  height: 210px;
  max-height: 210px;
}

@media (max-width: 720px) {
  img.store-logo,
  .header-center-logo img { width: 300px; height: 140px; max-height: 140px; }
}

/* The header logo was replaced 2026-08-24 with a 1003x442 source that fills its
   canvas, so it now paints at 460x203 - a 0.46x downscale, which is inherently
   sharp. The unsharp mask that used to live here was removed with it: sharpening
   an already-crisp downscale only adds halos; the filter and its injector were
   removed from function.js at the same time. If the logo is ever swapped back
   for a low-detail source, the height here is what to lower first. */

/* Category tiles: give them the same shell as the information / privacy /
   giftcard / goal panels further down the page. They were completely
   transparent, so the fixed wave backdrop showed straight through them - which
   is why they read as decoration scattered at random rather than as cards. */
html .category-button {
  background-color: var(--block-color);
  border: 1px solid #1B3D5C;
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Cube writes background-image inline on this <a>, and an inline style beats any
   stylesheet - so the glow cannot go on the element itself. It lives on ::before,
   which has the side benefit of leaving a real category image visible if one is
   ever set. ::after is not free: Cube uses it for the tile backdrop-blur. */
html .category-button::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0), var(--primary-color), rgba(0, 0, 0, 0))
      no-repeat top left,
    var(--tile-motif) no-repeat right 22px top 18px,
    radial-gradient(620px 220px at 100% 0%, rgba(47, 182, 242, 0.16), rgba(47, 182, 242, 0) 60%),
    linear-gradient(115deg, rgba(24, 68, 104, 0.42) 0%, rgba(10, 26, 42, 0.30) 100%);
  background-size: 100% 3px, 118px auto, auto, auto;
}

/* The same 48x2 accent the panel titles carry, left-aligned to sit under the
   tile heading instead of centred. */
html .category-content h2 {
  position: relative;
  padding-bottom: 10px;
}

html .category-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

html .category-button:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 182, 242, 0.55);
  box-shadow: 0 14px 34px rgba(2, 12, 22, 0.62);
}

/* One card height for the whole page. 340px is not arbitrary: the Information
   and Privacy copy is the tallest content on the page and needs 331px once the
   surrounding whitespace is tightened below, so anything shorter would clip it.
   Everything else grows to meet it. The payments row is left alone - it spans
   the full width and is not part of this grid. */
html .textbox-block {
  height: 409px;
}

html .payment-goal-block,
html .giftcard-block {
  height: 284px;
}

/* Buying back the 44px the panels needed, from padding only - the copy keeps its
   16px/32px type so nothing gets harder to read. */
/* The shorter cards would otherwise float their content in the middle of all
   that new height. Centre the panels, and give the tiles a real card layout:
   icon pinned top, heading and call-to-action pushed to the bottom by the
   auto margin, artwork filling the space between. */
html .payment-goal-block,
html .giftcard-block {
  display: flex;
  align-items: center;
}

html .payment-goal-content,
html .giftcard-content {
  width: 100%;
}

html .category-button {
  align-items: stretch;
}

html .category-button .category-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}

html .category-button .category-content h2 {
  margin-top: auto;
}

/* ---- Rank duration slider ---------------------------------------------
   Replaces the row of duration pills. function.js builds the slider and
   adds .has-slider once it succeeds, so the pills only disappear if there
   is really something to replace them with. The pills themselves are kept
   in the DOM - the slider clicks them to do the actual switching. */
html .rank-card.has-slider .rank-pills { display: none; }

/* The card is a centred column flex, which shrink-wraps a plain block child
   to its content (141px) and squashed the tick labels together. */
html .rank-slider-wrap {
  align-self: stretch;
  width: 100%;
  padding: 10px 4px 2px;
}

html .rank-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

html .rank-slider:focus { outline: none; }

/* --pct is set per card by function.js so the filled part of the track
   tracks the thumb. The two vendor blocks cannot be combined - one bad
   selector would drop the whole rule. */
html .rank-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(47, 182, 242, 0.30);
  background: linear-gradient(
    90deg,
    var(--primary-color) 0 var(--pct, 0%),
    rgba(47, 182, 242, 0.16) var(--pct, 0%) 100%
  );
}

html .rank-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(47, 182, 242, 0.30);
  background: linear-gradient(
    90deg,
    var(--primary-color) 0 var(--pct, 0%),
    rgba(47, 182, 242, 0.16) var(--pct, 0%) 100%
  );
}

html .rank-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--primary-color);
  box-shadow: 0 0 0 4px rgba(47, 182, 242, 0.18), 0 2px 6px rgba(2, 12, 22, 0.6);
  transition: box-shadow .15s ease, transform .15s ease;
}

html .rank-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--primary-color);
  box-shadow: 0 0 0 4px rgba(47, 182, 242, 0.18), 0 2px 6px rgba(2, 12, 22, 0.6);
}

html .rank-slider:hover::-webkit-slider-thumb,
html .rank-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(47, 182, 242, 0.26), 0 2px 8px rgba(2, 12, 22, 0.7);
  transform: scale(1.06);
}

html .rank-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

html .rank-tick {
  flex: 1 1 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color .15s ease;
}

html .rank-tick:first-child { text-align: left; }
html .rank-tick:last-child { text-align: right; }
html .rank-tick.is-active { color: var(--primary-color); }

/* ---- Basket + gift button row -----------------------------------------
   The basket link and a square gift button share one row. Only one .rank-cta
   is ever visible (the rest are [hidden] by the duration slider), so the flex
   row only ever lays out the live one plus the gift button. */
html .rank-ctas {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

/* Slightly smaller than it was, to leave room for the gift button. */
html .rank-cta {
  flex: 1 1 auto;
  font-size: 14px;
  padding: 10px 12px;
}

html .rank-gift {
  flex: 0 0 auto;
  width: 42px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  border: 1px solid rgba(245, 185, 66, 0.45);
  background: rgba(245, 185, 66, 0.14);
  color: var(--secondary-color);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

html .rank-gift:hover,
html .rank-gift:focus-visible {
  background: var(--secondary-color);
  color: #10233A;
  transform: translateY(-1px);
}

/* ---- Gift modal ---------------------------------------------------------
   Dressed like the information / goal / giftcard panels: block base, border,
   corner glow, 3px waterline and bubbles. Scoped to #giftModal rather than
   .cube-modal so the package modal is left as it is. */
html #giftModal .cube-modal-content {
  background-color: var(--block-color);
  background-image:
    radial-gradient(620px 220px at 100% 0%, rgba(47, 182, 242, 0.16), rgba(47, 182, 242, 0) 60%);
  border: 1px solid #1B3D5C;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  /* clips the waterline and bubbles to the rounded corners */
  overflow: hidden;
}

html #giftModal .cube-modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--primary-color), rgba(0, 0, 0, 0));
}

html #giftModal .cube-modal-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 210px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='200' viewBox='0 0 230 200'%3E%3Cg fill='none' stroke='%232FB6F2' stroke-width='2'%3E%3Ccircle cx='170' cy='44' r='26' stroke-opacity='0.22'/%3E%3Ccircle cx='118' cy='80' r='14' stroke-opacity='0.18'/%3E%3Ccircle cx='198' cy='98' r='9' stroke-opacity='0.16'/%3E%3Ccircle cx='143' cy='24' r='6' stroke-opacity='0.20'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -12px top 6px;
  background-size: 230px auto;
}

/* keep the form above the artwork */
html #giftModal .cube-modal-header,
html #giftModal .cube-modal-body {
  position: relative;
  z-index: 1;
}

html #giftModal .cube-modal-title {
  position: relative;
  padding-bottom: 12px;
}

html #giftModal .cube-modal-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Confirm on the right. Done with order rather than row-reverse so the submit
   button still comes first in the DOM for keyboard and screen-reader users. */
html #giftModal .gift-submit-btn { order: 2; }
html #giftModal .gift-modal-close { order: 1; }

/* ---- Sale banner --------------------------------------------------------
   Sits directly under the welcome header. Built by function.js only when a
   sale is actually running, so these rules match nothing the rest of the
   time. Green rather than the usual cyan so it reads as a promotion and not
   as another panel. */
html .omc-sale-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 2rem;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  background-color: var(--block-color);
  background-image:
    radial-gradient(620px 220px at 100% 0%, rgba(47, 182, 242, 0.16), rgba(47, 182, 242, 0) 60%);
  border: 1px solid #1B3D5C;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

html .omc-sale-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), #4ADE5C, rgba(0, 0, 0, 0));
}

html .omc-sale-badge {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 8px;
  background: #4ADE5C;
  color: #0B2A12;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .02em;
  box-shadow: 0 0 18px rgba(74, 222, 92, 0.35);
}

html .omc-sale-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* balances the badge so the title sits optically centred */
html .omc-sale-spacer {
  flex: 0 0 auto;
  width: 120px;
}

@media (max-width: 720px) {
  html .omc-sale-bar { gap: 12px; padding: 12px; }
  html .omc-sale-badge { font-size: 15px; padding: 8px 12px; }
  html .omc-sale-title { font-size: 15px; }
  html .omc-sale-spacer { display: none; }
}

/* ---- Telling the homepage panels apart ---------------------------------
   Every panel had the identical cyan waterline, the identical bubble
   cluster and the identical wave, so the page read as one texture repeated
   five times. Each panel now owns an accent colour, and the shared artwork
   is flipped/offset per panel so no two are the same picture. */
html .textbox-block                     { --panel-accent: #2FB6F2; }
html .col-6:nth-child(2) .textbox-block { --panel-accent: #3FD9A0; }
html .payment-goal-block                { --panel-accent: #F5B942; }
html .giftcard-block                    { --panel-accent: #7FD1FF; }
html .payments-block                    { --panel-accent: #3FD9A0; }

/* a lit top edge gives the cards some thickness */
html .textbox-block,
html .payment-goal-block,
html .giftcard-block,
html .payments-block {
  box-shadow: var(--box-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html .textbox-block:hover,
html .payment-goal-block:hover,
html .giftcard-block:hover,
html .payments-block:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 182, 242, 0.45);
  border-color: color-mix(in srgb, var(--panel-accent) 45%, transparent);
  box-shadow: 0 14px 34px rgba(2, 12, 22, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* waterline and title accent take the panel's own colour */
html .textbox-block::before,
html .payment-goal-block::before,
html .giftcard-block::before,
html .payments-block::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--panel-accent), rgba(0, 0, 0, 0));
}

html .textbox-title::after,
html .payment-goal-title::after,
html .giftcard-title::after,
html .payments-title::after {
  background: linear-gradient(90deg, var(--panel-accent), var(--secondary-color));
}

/* same bubble sprite, different framing per panel */
html .col-6:nth-child(2) .textbox-block::after { transform: scaleX(-1); opacity: .75; }
html .payment-goal-block::after { transform: scaleX(-1) translateY(10px); opacity: .60; }
html .giftcard-block::after     { transform: translateY(6px) scale(1.15); opacity: .70; }
html .payments-block::after     { transform: scaleX(-1) scale(1.3); opacity: .50; }

/* ---- Crate card buttons -------------------------------------------------
   Cube's "i" button is retired in favour of clicking the artwork, and the
   basket link shares its row with a gift button, same as the rank tiles. */
html .omc-hidden-info { display: none !important; }

html .upsell-buttons {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

html .omc-cart-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 10px 12px;
}

/* the artwork is the way into the description now, so make it feel clickable */
html .omc-pkg-open {
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

html .omc-pkg-open:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(47, 182, 242, 0.35));
}

html .omc-pkg-open:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 8px;
}

/* The crate basket link now takes the .rank-cta class outright rather than
   being styled to match, so .omc-cart-btn is gone. What is left here is the
   tick spacing: pinning the outer labels to the ends of the track made the
   gap either side of them look wider than the gaps between the middle ones.
   Centring every label in its own equal column evens that out, and the extra
   side padding pulls the whole control in a little. */
html .rank-tick:first-child,
html .rank-tick:last-child {
  text-align: center;
}

html .rank-slider-wrap {
  padding-left: 16px;
  padding-right: 16px;
}

/* ---- Sale countdown -----------------------------------------------------
   Only rendered when function.js has a future end date to count towards. */
html .omc-sale-timer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

html .omc-sale-unit {
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(2, 12, 22, 0.55);
  border: 1px solid rgba(74, 222, 92, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

html .omc-sale-unit b {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

html .omc-sale-unit i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #4ADE5C;
}

/* ---- Panels: colour, not just a tinted outline --------------------------
   The wash was the same cyan on every panel, so they read as one texture
   repeated. Each now gets a two-corner wash in its own accent, and the icon
   badge picks the accent up as well. */
html .textbox-block,
html .payment-goal-block,
html .giftcard-block,
html .payments-block {
  background-image:
    radial-gradient(680px 260px at 100% 0%,
      color-mix(in srgb, var(--panel-accent) 26%, transparent), transparent 62%),
    radial-gradient(520px 240px at 0% 100%,
      color-mix(in srgb, var(--panel-accent) 13%, transparent), transparent 68%);
  border-color: color-mix(in srgb, var(--panel-accent) 30%, #1B3D5C);
}

html .textbox-title::before,
html .payment-goal-title::before,
html .giftcard-title::before,
html .payments-title::before {
  color: var(--panel-accent);
  background: color-mix(in srgb, var(--panel-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--panel-accent) 42%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--panel-accent) 24%, transparent);
}

html .textbox-block::before,
html .payment-goal-block::before,
html .giftcard-block::before,
html .payments-block::before {
  height: 4px;
  filter: saturate(1.3) brightness(1.15);
}

/* Each panel gets its own piece of sea life instead of the shared bubbles.
   function.js sets --panel-motif per panel (the data URIs are long and the
   colour differs per box, so they are built there rather than inlined here).
   Only .textbox-block previously had an ::after at all, so content/position
   are declared here for all four rather than assumed. */
html .textbox-block::after,
html .payment-goal-block::after,
html .giftcard-block::after,
html .payments-block::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 18px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transform: none;
  background-image: var(--panel-motif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- Slider labels sit under the thumb ---------------------------------
   A range thumb's centre only travels between halfThumb and width-halfThumb,
   so labels spread evenly across the whole width drift outwards at the ends
   (the first was 20px right of its thumb, the last 24px left). function.js
   gives each label --tick-f, its own stop as a fraction of the track, and
   the same arithmetic the browser uses puts it exactly on the thumb.
   18px below is the thumb width; keep the two in step. */
html .rank-ticks {
  position: relative;
  display: block;
  height: 15px;
  margin-top: 2px;
}

html .rank-tick {
  position: absolute;
  top: 0;
  left: calc(9px + (100% - 18px) * var(--tick-f, 0));
  transform: translateX(-50%);
  flex: none;
  text-align: center;
  white-space: nowrap;
}

/* ---- Basket button states ----------------------------------------------
   Adding happens in the background now, so the button itself has to be the
   feedback - there is no cart counter anywhere in the header to update. */
html .rank-cta.is-busy {
  opacity: .7;
  cursor: progress;
}

html .rank-cta.is-added {
  background: #4ADE5C;
  color: #0B2A12;
}

/* already in the basket - clicking removes it */
html .rank-cta.is-in-basket {
  background: rgba(255, 107, 107, 0.16);
  border: 1px solid rgba(255, 107, 107, 0.5);
  color: #FF6B6B;
}

html .rank-cta.is-in-basket:hover {
  background: #FF6B6B;
  color: #2A0B0B;
}


/* ===== OMC RANK LIST MODE ===== */
html body .rank-grid{grid-template-columns:1fr;gap:14px}
html body .rank-card{display:grid;grid-template-columns:minmax(140px,1fr) minmax(200px,1.7fr) minmax(110px,auto) auto;align-items:center;column-gap:26px;padding:14px 24px;text-align:left}
html body .rank-card .rank-image{display:none}
html body .rank-card .rank-open{grid-column:1;display:flex;align-items:center;justify-content:flex-start;padding:0;margin:0;min-height:0;width:auto;background:none}
html body .rank-card .rank-title{margin:0;text-align:left;font-size:1.05rem;line-height:1.2}
html body .rank-card .rank-slider-wrap{grid-column:2;margin:0;padding:0;width:100%}
html body .rank-card .rank-prices{grid-column:3;margin:0;text-align:right;white-space:nowrap}
html body .rank-card .rank-prices .rank-price{margin:0;justify-content:flex-end}
html body .rank-card .rank-ctas{grid-column:4;margin:0;justify-content:flex-end;flex-wrap:nowrap}
@media (max-width:900px){
html body .rank-card{grid-template-columns:1fr;row-gap:12px;justify-items:center;text-align:center;padding:18px}
html body .rank-card .rank-open,html body .rank-card .rank-slider-wrap,html body .rank-card .rank-prices,html body .rank-card .rank-ctas{grid-column:1}
html body .rank-card .rank-open,html body .rank-card .rank-ctas,html body .rank-card .rank-prices .rank-price{justify-content:center}
html body .rank-card .rank-title,html body .rank-card .rank-prices{text-align:center}
}
/* ===== END OMC RANK LIST MODE ===== */
html body .rank-card{cursor:pointer}
html body .rank-card .rank-slider-wrap,html body .rank-card .rank-ticks{cursor:default}


/* ===== OMC RANK ROW DESIGNS =====
   Each row carries data-rank (set in function.js from its title) and picks up
   its own accent colour plus a line-art motif. The motif is painted as a mask
   so one colour drives both, and both pseudo-elements are absolutely
   positioned - the card is a grid, so a static ::before would become a cell. */
html body .rank-card{position:relative;overflow:hidden;padding-left:92px;
  --rank-accent:#4FC3F7;--rank-tint:rgba(79,195,247,.10);
  border-left:3px solid var(--rank-accent);
  background-image:linear-gradient(90deg,var(--rank-tint) 0%,rgba(0,0,0,0) 46%),
    linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,0));
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html body .rank-card:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(2,12,22,.6),inset 0 0 0 1px var(--rank-accent)}
html body .rank-card:hover .rank-title{color:var(--rank-accent)}
html body .rank-card .rank-title{transition:color .18s ease}
html body .rank-card::before,html body .rank-card::after{content:"";position:absolute;pointer-events:none;
  background:var(--rank-accent);
  -webkit-mask:var(--rank-motif) no-repeat center/contain;
  mask:var(--rank-motif) no-repeat center/contain}
html body .rank-card::before{left:24px;top:50%;width:46px;height:46px;margin-top:-23px;opacity:.9}
html body .rank-card::after{right:-34px;top:50%;width:150px;height:150px;margin-top:-75px;opacity:.055}
html body .rank-card[data-rank="shell"]{--rank-accent:#E9C9A0;--rank-tint:rgba(233,201,160,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M50%2088%20C20%2078%208%2052%2012%2030'%2F%3E%3Cpath%20d%3D'M50%2088%20C34%2074%2028%2048%2030%2024'%2F%3E%3Cpath%20d%3D'M50%2088%20L50%2020'%2F%3E%3Cpath%20d%3D'M50%2088%20C66%2074%2072%2048%2070%2024'%2F%3E%3Cpath%20d%3D'M50%2088%20C80%2078%2092%2052%2088%2030'%2F%3E%3Cpath%20d%3D'M12%2030%20A40%2040%200%200%201%2088%2030'%2F%3E%3C%2Fsvg%3E")}
html body .rank-card[data-rank="coral"]{--rank-accent:#FF7F6B;--rank-tint:rgba(255,127,107,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M50%2092%20L50%2058'%2F%3E%3Cpath%20d%3D'M50%2066%20C40%2058%2034%2046%2034%2034'%2F%3E%3Cpath%20d%3D'M50%2058%20C60%2050%2066%2038%2066%2026'%2F%3E%3Cpath%20d%3D'M34%2038%20C28%2032%2022%2028%2016%2026'%2F%3E%3Cpath%20d%3D'M66%2030%20C72%2024%2078%2020%2084%2018'%2F%3E%3Cpath%20d%3D'M50%2076%20C44%2070%2038%2066%2032%2064'%2F%3E%3C%2Fsvg%3E")}
html body .rank-card[data-rank="sandy"]{--rank-accent:#F5C542;--rank-tint:rgba(245,197,66,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M50%2010%20L62%2040%20L94%2043%20L70%2063%20L78%2094%20L50%2077%20L22%2094%20L30%2063%20L6%2043%20L38%2040%20Z'%2F%3E%3C%2Fsvg%3E")}
html body .rank-card[data-rank="beach"]{--rank-accent:#3FD9A0;--rank-tint:rgba(63,217,160,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M52%2092%20C52%2070%2050%2058%2046%2046'%2F%3E%3Cpath%20d%3D'M46%2046%20C38%2034%2024%2030%2012%2034'%2F%3E%3Cpath%20d%3D'M46%2046%20C46%2028%2054%2018%2068%2012'%2F%3E%3Cpath%20d%3D'M46%2046%20C58%2038%2074%2040%2086%2050'%2F%3E%3Cpath%20d%3D'M46%2046%20C36%2044%2026%2050%2018%2060'%2F%3E%3C%2Fsvg%3E")}
html body .rank-card[data-rank="ocean"]{--rank-accent:#2F9BF2;--rank-tint:rgba(47,155,242,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2034%20C18%2022%2030%2046%2042%2034%20C54%2022%2066%2046%2078%2034%20C84%2028%2090%2028%2094%2030'%2F%3E%3Cpath%20d%3D'M6%2056%20C18%2044%2030%2068%2042%2056%20C54%2044%2066%2068%2078%2056%20C84%2050%2090%2050%2094%2052'%2F%3E%3Cpath%20d%3D'M6%2078%20C18%2066%2030%2090%2042%2078%20C54%2066%2066%2090%2078%2078%20C84%2072%2090%2072%2094%2074'%2F%3E%3C%2Fsvg%3E")}
html body .rank-card[data-rank="custom"]{--rank-accent:#B98BFF;--rank-tint:rgba(185,139,255,.13);
  --rank-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2072%20L10%2028%20L32%2046%20L50%2018%20L68%2046%20L90%2028%20L84%2072%20Z'%2F%3E%3Cpath%20d%3D'M16%2084%20L84%2084'%2F%3E%3C%2Fsvg%3E")}
@media (max-width:900px){
html body .rank-card{padding-left:18px}
html body .rank-card::before{display:none}
}
/* ===== END OMC RANK ROW DESIGNS ===== */


/* ===== OMC LIST ROWS (shells and any other list-mode category) =====
   Same shape as the rank rows: name left, price middle, buttons right,
   an accent edge and a motif so the ladder reads at a glance. */
html body .packages-list-container{display:grid;grid-template-columns:1fr;gap:14px}
html body .package-list-item{position:relative;overflow:hidden;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:22px;
  padding:14px 24px 14px 92px;border-radius:12px;
  background-color:#0E2438;border:1px solid #1B3D5C;border-left:3px solid var(--tier-accent);
  --tier-accent:#4FC3F7;--tier-tint:rgba(79,195,247,.10);
  background-image:linear-gradient(90deg,var(--tier-tint) 0%,rgba(0,0,0,0) 46%),
    linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,0));
  box-shadow:0 10px 30px rgba(2,12,22,.55);
  transition:transform .18s ease,box-shadow .18s ease}
html body .package-list-item:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(2,12,22,.6),inset 0 0 0 1px var(--tier-accent)}
html body .package-list-item:hover .text-title{color:var(--tier-accent)}
html body .package-list-item .text-title{transition:color .18s ease}
html body .package-list-item::before,html body .package-list-item::after{content:"";
  position:absolute;pointer-events:none;background:var(--tier-accent);
  -webkit-mask:var(--tier-motif) no-repeat center/contain;
  mask:var(--tier-motif) no-repeat center/contain}
html body .package-list-item::before{left:24px;top:50%;width:46px;height:46px;margin-top:-23px;opacity:.9}
html body .package-list-item::after{right:-34px;top:50%;width:150px;height:150px;margin-top:-75px;opacity:.055}
html body .package-list-item .package-list-info{display:flex;align-items:center;
  justify-content:space-between;gap:20px;min-width:0}
html body .package-list-item .package-list-price{white-space:nowrap}
html body .package-list-item .package-list-actions{display:flex;align-items:center;gap:8px}
html body .package-list-item .omc-hidden-info{display:none}
html body .package-list-item[data-tier="1"]{--tier-accent:#8FE3F5;--tier-tint:rgba(143,227,245,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'50'%20cy%3D'54'%20r%3D'26'%2F%3E%3Cpath%20d%3D'M40%2044%20C43%2039%2047%2037%2052%2037'%2F%3E%3C%2Fsvg%3E")}
html body .package-list-item[data-tier="2"]{--tier-accent:#7FD1A6;--tier-tint:rgba(127,209,166,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cellipse%20cx%3D'50'%20cy%3D'30'%20rx%3D'24'%20ry%3D'9'%2F%3E%3Cpath%20d%3D'M26%2030%20V50%20C26%2055%2037%2059%2050%2059%20C63%2059%2074%2055%2074%2050%20V30'%2F%3E%3Cpath%20d%3D'M26%2050%20V68%20C26%2073%2037%2077%2050%2077%20C63%2077%2074%2073%2074%2068%20V50'%2F%3E%3C%2Fsvg%3E")}
html body .package-list-item[data-tier="3"]{--tier-accent:#F5C542;--tier-tint:rgba(245,197,66,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M32%2034%20C24%2044%2018%2058%2018%2068%20C18%2080%2032%2088%2050%2088%20C68%2088%2082%2080%2082%2068%20C82%2058%2076%2044%2068%2034%20Z'%2F%3E%3Cpath%20d%3D'M40%2034%20C40%2024%2044%2016%2050%2012%20C56%2016%2060%2024%2060%2034'%2F%3E%3C%2Fsvg%3E")}
html body .package-list-item[data-tier="4"]{--tier-accent:#E0A45C;--tier-tint:rgba(224,164,92,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%2046%20C14%2032%2030%2024%2050%2024%20C70%2024%2086%2032%2086%2046%20V50%20H14%20Z'%2F%3E%3Crect%20x%3D'14'%20y%3D'50'%20width%3D'72'%20height%3D'30'%20rx%3D'6'%2F%3E%3Cpath%20d%3D'M42%2050%20H58%20V64%20H42%20Z'%2F%3E%3C%2Fsvg%3E")}
html body .package-list-item[data-tier="5"]{--tier-accent:#7FB2FF;--tier-tint:rgba(127,178,255,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M28%2020%20H72%20L92%2044%20L50%2090%20L8%2044%20Z'%2F%3E%3Cpath%20d%3D'M8%2044%20H92'%2F%3E%3Cpath%20d%3D'M28%2020%20L38%2044%20L50%2090'%2F%3E%3Cpath%20d%3D'M72%2020%20L62%2044%20L50%2090'%2F%3E%3C%2Fsvg%3E")}
html body .package-list-item[data-tier="6"]{--tier-accent:#C08BFF;--tier-tint:rgba(192,139,255,.13);
  --tier-motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M50%2090%20V34'%2F%3E%3Cpath%20d%3D'M22%2030%20V56'%2F%3E%3Cpath%20d%3D'M78%2030%20V56'%2F%3E%3Cpath%20d%3D'M22%2044%20H78'%2F%3E%3Cpath%20d%3D'M50%2034%20L38%2018'%2F%3E%3Cpath%20d%3D'M50%2034%20L62%2018'%2F%3E%3Cpath%20d%3D'M22%2030%20L14%2018'%2F%3E%3Cpath%20d%3D'M78%2030%20L86%2018'%2F%3E%3C%2Fsvg%3E")}
/* ===== END OMC LIST ROWS ===== */

/* ===== OMC MODAL ACTIONS =====
   The description modal ends with the same pair of controls as the cards,
   pinned to the bottom right of the footer. */
html body .cube-package-modal-footer{display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
html body .cube-package-modal-actions{display:flex;align-items:center;gap:8px;
  margin-left:auto;justify-content:flex-end}
html body .cube-package-modal-actions .rank-cta{width:auto;min-width:150px}
html body .cube-package-modal-actions .rank-cta i{display:none}

/* ===== OMC LOGIN PREFIX =====
   One bordered box: a shaded, unselectable prefix beside the typing area. */
html body .omc-login-input-wrap{display:flex;align-items:stretch;width:100%}
html body .omc-login-input-wrap .omc-login-prefix{display:none}
html body .omc-login-input-wrap.has-prefix{border:1px solid #1B3D5C;border-radius:10px;
  background:#0B1E30;overflow:hidden}
html body .omc-login-input-wrap.has-prefix .omc-login-prefix{display:flex;align-items:center;
  padding:0 16px;font-weight:700;font-size:1.05rem;color:#8FB4D6;
  background:rgba(255,255,255,.06);border-right:1px solid #1B3D5C;
  user-select:none;-webkit-user-select:none;cursor:default}
html body .omc-login-input-wrap.has-prefix .login-input{border:0;border-radius:0;
  background:transparent;flex:1 1 auto;min-width:0}
html body .omc-login-input-wrap .login-input{width:100%}

/* ===== OMC MOBILE =====
   Phones get one column everywhere, a top bar that keeps only what is
   tappable, and touch targets that clear 44px. */
@media (max-width:780px){
  html body .omc-topbar-inner{padding:0 10px;gap:8px}
  html body .omc-tb-cart-text,html body .omc-tb-user-sub{display:none}
  html body .omc-tb-btn{width:40px;height:40px}
  html body .omc-tb-user-name{font-size:.9rem}
  html body .omc-topbar-avatar{width:30px;height:30px}

  html body .header-center-logo img,html body .header-center-logo{max-width:78vw;height:auto}
  html body .header-block{flex-direction:column;text-align:center}
  html body .header-left,html body .header-right{width:100%}
  html body .navigation-row,html body .header-center-row{flex-wrap:wrap;justify-content:center;gap:12px}

  html body .omc-sale-bar{flex-direction:column;gap:10px;text-align:center;padding:14px}
  html body .omc-sale-title{font-size:1rem;line-height:1.3}

  html body .category-grid,html body .packages-grid-container{grid-template-columns:1fr;gap:14px}
  html body .grid-row>[class*="col-"]{flex:0 0 100%;max-width:100%}
}
@media (max-width:780px){
  html body .package-list-item{grid-template-columns:1fr;row-gap:12px;
    padding:16px 18px;text-align:center;justify-items:center}
  html body .package-list-item::before{display:none}
  html body .package-list-item .package-list-info{flex-direction:column;gap:6px;text-align:center}
  html body .package-list-item .package-list-actions{width:100%;justify-content:center}

  html body .rank-card .rank-cta,html body .package-list-item .rank-cta{min-height:44px;flex:1 1 auto;max-width:260px}
  html body .rank-gift{min-width:44px;min-height:44px}

  html body .cube-package-modal-content{width:94vw;max-width:94vw;max-height:88vh;padding:18px}
  html body .cube-package-modal-footer{flex-direction:column;align-items:stretch;gap:12px}
  html body .cube-package-modal-actions{margin-left:0;justify-content:center;width:100%}
  html body .cube-package-modal-actions .rank-cta{flex:1 1 auto;min-width:0}
  html body .cube-package-modal-title{font-size:1.15rem;line-height:1.3}

  html body .login-platform-toggle{width:100%}
  html body .login-platform-btn{flex:1 1 0;min-height:44px}
  html body .login-input{min-height:44px}

  html body .footer-top-container,html body .footer-bottom-container{flex-direction:column;
    gap:16px;text-align:center}
}
/* ===== END OMC MOBILE ===== */


/* ===== OMC CHECKOUT ROWS =====
   The "i" is gone - the whole row opens the description instead. */
html body .checkout-package-row .omc-hidden-info{display:none}
html body .checkout-package-row.omc-row-clickable{cursor:pointer;border-radius:10px;
  transition:background-color .16s ease}
html body .checkout-package-row.omc-row-clickable:hover{background-color:rgba(79,195,247,.07)}
/* Opened from the basket there is no price or cart button to show. */
html body #cubePackageModal.omc-modal-basic .cube-package-modal-footer{display:none}
/* ===== END OMC CHECKOUT ROWS ===== */


/* ===== OMC BASKET RECIPIENT CHIP =====
   Who each line is for, beside the bin. Blue = your own account,
   gold = a gift, amber = a gift on a line whose quantity is above one
   (Tebex cannot split a package between people). */
html body .checkout-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}
html body .omc-recipient{display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:700;
  white-space:nowrap;max-width:190px;overflow:hidden;
  color:#9FD2F5;background:rgba(79,195,247,.12);border:1px solid rgba(79,195,247,.35)}
html body .omc-recipient span{overflow:hidden;text-overflow:ellipsis}
html body .omc-recipient i{font-size:.85em;opacity:.9}
html body .omc-recipient.is-gift{color:#F5C542;background:rgba(245,197,66,.12);
  border-color:rgba(245,197,66,.4)}
html body .omc-recipient.is-mixed{color:#FFB27F;background:rgba(255,140,80,.14);
  border-color:rgba(255,140,80,.5)}
@media (max-width:780px){
  html body .omc-recipient{max-width:120px;padding:5px 9px;font-size:.75rem}
}
/* ===== END OMC BASKET RECIPIENT CHIP ===== */


/* ===== OMC EDITABLE RECIPIENT ===== */
html body .omc-recipient.is-editable{cursor:text}
html body .omc-recipient.is-editable:hover{filter:brightness(1.25)}
html body .omc-recipient.is-editing{padding:2px 6px}
html body .omc-recipient-input{width:130px;max-width:40vw;border:0;outline:0;
  background:rgba(0,0,0,.35);color:inherit;font:inherit;font-weight:700;
  border-radius:999px;padding:5px 10px}
html body .checkout-package-row.omc-row-working{opacity:.55;pointer-events:none}
/* ===== END OMC EDITABLE RECIPIENT ===== */


/* ===== OMC IN-CART TICK =====
   A green check to the left of Add to Cart once the item is in the basket.
   The button label itself never changes. */
html body .omc-in-cart-check{display:none;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  color:#3FD9A0;background:rgba(63,217,160,.16);border:1px solid rgba(63,217,160,.5);
  font-size:.8rem}
html body .omc-in-cart-check.is-on{display:inline-flex}
html body .rank-cta.is-added{box-shadow:0 0 0 2px rgba(63,217,160,.7)}
html body .rank-cta.is-busy{opacity:.7;pointer-events:none}
/* ===== END OMC IN-CART TICK ===== */