.row {
    margin-bottom: 24px;
}

.row-vip .vip {
    min-height: 90px;
    background: #14181e;
    border: 1px solid #21262d;
    margin: 0 16px 16px 0;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    padding: 12px 12px 12px 14px;
    width: calc((100% - 32px)/3);
    flex: 0 0 calc((100% - 32px)/3);
    position: relative;
    overflow: hidden;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-shadow: 0 6px 14px rgba(0,0,0,0.34);
}

.row-vip .vip .vip-thumb {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 14px;
    border-radius: 3px;
    flex: 0 0 90px;
    align-self: flex-start;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain !important;
}

.row-vip .vip-wrap {
    display: flex;
    flex-wrap: wrap;
}

.row-vip .vip:nth-child(3n) {
    margin-right: 0;
}

.row-vip .vip > div,
.row-vip .vip .vip-thumb {
    position: relative;
    z-index: 2;
}

.row-vip .vip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    transition: opacity .18s ease;
    opacity: 0;
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.48) 100%);
    mix-blend-mode: multiply;
}

.row-vip .vip:hover::after {
    opacity: 1;
}

.row-vip .vip > div {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch; /* changed from center - let children control their own alignment */
    gap: 14px;
    height: 100%; /* make centering deterministic (fills the .vip card height) */
}

.vip .head {
    margin: 0 0 4px 0;
    font-weight: normal;
    text-shadow: 1px 2px 8px rgba(0,0,0,0.96);
    transition: color .14s ease, text-shadow .14s ease;
    font-size: 18px;
    display: block; /* removed flex */
}

/* Dedicated button container (right column) - takes full height */
.vip-button-column {
    flex: 0 0 auto;
    display: flex;
    align-items: center; /* vertically center the button within this column */
    order: 2;
    align-self: stretch; /* take full height of parent */
}

/* (Optional) keep the button from introducing vertical offset inside the centered column */
.vip-button-column .vip-buy-btn {
    margin: 0;
}

/* Text content container (right of thumb, left of button) */
.vip-text-column {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
    align-self: flex-start; /* keep text at the top */
}

.vip .head .vip-buy-btn {
    margin: 0; /* remove all margins */
}

.vip .product_description {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #c9ced4;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
    transition: color .14s ease, text-shadow .14s ease;
}

.row-vip .vip.l3 .vip-thumb {
    background-color: transparent;
    background-image: url("/img/orange.png");
}

.vip.l2 .vip-thumb {
    background-color: transparent;
    background-image: url("/img/blue.webp");
}

.vip.l1 .vip-thumb {
    background-color: transparent;
    background-image: url("/img/green.png");
}

.vip.l4 .vip-thumb {
    background-color: transparent;
    background-image: url("/img/purple.png");
}

.vip.l5 .vip-thumb {
    background-color: transparent;
    background-image: url("/img/red.png");
}

.vip.l3 {
    border-color: #c96f1f;
    background: linear-gradient(90deg, rgba(232,159,42,0.32) 0%, rgba(232,159,42,0) 70%),
    #14181e;
}

.vip.l2 {
    border-color: #36b8aa;
    background: linear-gradient(90deg, rgba(42,157,143,0.30) 0%, rgba(42,157,143,0) 70%),
    #14181e;
}

.vip.l1 {
    border-color: #7dd653;
    background: linear-gradient(90deg, rgba(108,191,67,0.30) 0%, rgba(108,191,67,0) 70%),
    #14181e;
}

.vip.l4 {
    border-color: #8b79ff;
    background: linear-gradient(90deg, rgba(123,97,255,0.34) 0%, rgba(123,97,255,0) 72%),
    #14181e;
}

.vip.l5 {
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, rgba(6,7,9,0.98) 0%, rgba(20,24,30,0.98) 100%) padding-box,
        linear-gradient(90deg, rgba(224,59,59,0.92) 0%, rgba(130,30,30,0.72) 35%, rgba(224,59,59,0.92) 100%) border-box;
}

.vip.l3:hover {
    background: #e89f2a;
    border-color: #e89f2a;
}

.vip.l3:hover:before {
    background-color: #e89f2a;
}

.vip.l2:hover {
    background: #33c3a9;
    border-color: #33c3a9;
}

.vip.l2:hover:before {
    background-color: #33c3a9;
}

.vip.l1:hover {
    background: #5abf4a;
    border-color: #8ddf7d;
}

.vip.l1:hover:before {
    background-color: #8ddf7d;
}

.vip.l4:hover {
    background: #543ed0;
    border-color: #7a66ff;
}

.vip.l4:hover:before {
    background-color: #8b79ff;
}

.vip.l5:hover:before {
    background-color: #b62a2a;
}

.row-vip .vip.l5:hover::after {
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.48) 100%);
    mix-blend-mode: multiply;
    opacity: 1;
}

.vip .copy {
    color: #a9b1ba;
    font-size: 14px;
    margin: 0;
    transition: color .14s ease, text-shadow .14s ease;
}

.row-vip .vip:hover .copy {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.92);
}

.row-vip .btn {
    padding: 12px 18px;
    font-size: 16px;
    text-shadow: #0b0e13 1px 1px 0;
}

.row-vip .vip:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.40);
}

.vip.l5:hover {
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, rgba(10,12,15,1) 0%, rgba(24,29,36,1) 100%) padding-box,
        linear-gradient(90deg, rgba(255,90,90,1) 0%, rgba(170,45,45,0.80) 35%, rgba(255,90,90,1) 100%) border-box;
}

.vip-desc {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #c9ced4;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

.limited-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: #8b2a2a;
    border-radius: 3px;
    border: none;
    box-shadow: none;
    vertical-align: middle;
    white-space: nowrap;
}

.rarity-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #394048;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

.rarity-common {
    background: #394048;
}

.rarity-rare {
    background: #7b61ff;
}

.rarity-limited {
    background: #e03b3b;
}

.rarity-hot {
    background: #e03b3b;
}

.product_description {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #c9ced4;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    transition: color .14s ease, text-shadow .14s ease;
}

.row-vip .vip:hover .product_description {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.92);
}

.coin {
    border-radius: 60%;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.65)) drop-shadow(0 0 8px rgba(0,0,0,0.35));
    -webkit-filter: drop-shadow(0 0 1px rgba(0,0,0,0.65)) drop-shadow(0 0 8px rgba(0,0,0,0.35));
}

.vip-subnote {
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.25;
    color: #c9ced4;
}

.vip-section {
    background: linear-gradient(90deg,
    rgba(22,25,30,0.84) 0%,
    rgba(18,21,26,0.74) 30%,
    rgba(14,16,20,0.62) 62%,
    rgba(8,9,11,0.40) 100%);
    background-color: #0e0f12;
    border: 1px solid rgba(66,73,84,0.74);
    border-radius: 6px;
    padding: 16px 18px 12px;
    margin: 0 0 28px 0;
    position: relative;
    box-shadow: 0 6px 12px rgba(0,0,0,0.28);
    overflow: hidden;
    transition: border-color .18s ease;
    will-change: border-color;
}

.vip-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 38% 30%,
    rgba(170,178,190,0.09) 0%,
    rgba(170,178,190,0.04) 18%,
    rgba(170,178,190,0.015) 36%,
    rgba(0,0,0,0.00) 60%);
    opacity: 0.16;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}

.vip-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/img/CTA_Banner.jpg") center/cover no-repeat;
    opacity: 0.28;
    pointer-events: none;
    mix-blend-mode: overlay;
    filter: grayscale(100%) saturate(0) contrast(1.58) brightness(0.60);
    z-index: 1;
    mask: radial-gradient(circle at 50% 42%,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.28) 76%,
    rgba(0,0,0,0.00) 96%);
}

.vip-section > * {
    position: relative;
    z-index: 2;
}

.vip-section .section-title {
    margin: 0 0 14px 0;
    letter-spacing: 0.5px;
}

.vip-section .vip-pre-header {
    margin: -16px -18px 14px -18px;
    border-radius: 6px 6px 0 0;
}

.vip-section:hover {
    border-color: rgba(66,73,84,0.74);
}

.row-vip .vip-item {
    width: calc((100% - 32px)/3);
    flex: 0 0 calc((100% - 32px)/3);
    margin: 0 16px 16px 0;
    min-width: 0;
}

.row-vip .vip-item:nth-child(3n) {
    margin-right: 0;
}

.row-vip .vip-item > .vip {
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
}

.vip-sample-box {
    margin: 6px 0 0 0;
    padding: 8px 10px 9px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.vip-sample-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: linear-gradient(180deg,
    rgba(214,222,232,0.00) 0%,
    rgba(214,222,232,0.00) 28%,
    rgba(214,222,232,0.10) 52%,
    rgba(214,222,232,0.22) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 1;
}

@supports not ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))){

    .vip-sample-box::before{
        background:transparent;
        -webkit-mask:none;
        mask:none;
        border:1px solid rgba(170,178,190,0.24);
        padding:0;
    }

}

.vip-sample-list {
    margin: 0;
    padding: 0 0 0 18px;
    color: rgba(236,240,245,0.90);
    font-size: 14px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.vip-sample-list li {
    margin: 2px 0;
}

/* Rust shop comparison lists: same row model for top VIP tiers */
.vip-perks-compare {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vip-perks-compare li {
    margin: 0;
    position: relative;
    padding: 6px 8px 6px 26px;
    border-radius: 3px;
    color: #d2ddd0;
}

.vip-perks-compare li:nth-child(odd) {
    background: rgba(255,255,255,0.042);
}

.vip-perks-compare li:nth-child(even) {
    background: rgba(255,255,255,0.022);
}

.vip-perks-compare li::before {
    content: "✓";
    position: absolute;
    left: 8px;
    top: 6px;
    color: #9fdfa1;
    font-weight: 700;
}

.vip-perks-compare li.perk-off {
    color: #818a95;
    opacity: 0.75;
}

.vip-perks-compare li.perk-off::before {
    content: "✕";
    color: #9b8d8d;
}

.row-vip .vip-item.vip-item-wide {
    width: 100%;
    flex: 0 0 100%;
    margin-right: 0;
}

.row-vip .vip-item.vip-item-wide + .vip-item {
    clear: both;
}

.vip-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 0;
    text-decoration: none;
}

.row-vip-rustshop .vip-buy-btn.btn-primary.red {
    background: rgba(201,42,26,0.18);
    border: 1px solid #c92a1a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 7px rgba(0,0,0,0.34);
}

.row-vip-rustshop .vip-buy-btn.btn-primary.red:hover {
    background: rgba(224,68,28,0.30);
    border-color: #e0441c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 9px rgba(0,0,0,0.38);
}

.row-vip-rustshop .vip-buy-btn.btn-primary.red:active,
.row-vip-rustshop .vip-buy-btn.btn-primary.red.active {
    background: rgba(148,24,14,0.44);
    border-color: #94180e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.34);
}

.vip-buy-btn:hover {
    text-decoration: none;
}

@media screen and (max-width:960px) {
    .row-vip .vip-item {
        width: 100%;
        flex: 0 0 100%;
        margin: 0 0 16px 0;
    }

    .row-vip .vip-item:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width:890px) {
    .row-vip .vip-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 16px 0 !important;
    }
}

@media (forced-colors: active) {
    .vip-section::after {
        display: none;
    }
}

@media (forced-colors: active) {
    .vip-subnote {
        background: Canvas;
        border: 1px solid ButtonBorder;
        box-shadow: none;
    }
}

@media screen and (max-width:960px) {
    .row-vip .vip-item.vip-item-wide {
        width: 100%;
        flex: 0 0 100%;
        margin: 0 0 16px 0;
    }
}
.row-vip .vip {
    align-items: stretch; /* override flex-start */
}

/* Remove the broken 100% height hack */
.row-vip .vip > div {
    height: auto;         /* override height:100% */
    align-self: stretch;  /* make sure it fills card height */
}

/* Make centering bulletproof */
.vip-button-column {
    justify-content: center;  /* optional, harmless */
}
.row-vip .vip .vip-thumb {
    align-self: center; /* was flex-start */
}

/* rust-shop specific card grid: keep even spacing even when wide OIL-RIG card is first */
.row-vip-rustshop .vip-wrap {
    margin-left: -8px;
    margin-right: -8px;
}

.row-vip-rustshop .vip-item {
    width: calc((100% - 48px)/3);
    flex: 0 0 calc((100% - 48px)/3);
    margin: 0 8px 16px !important;
}

.row-vip-rustshop .vip-item:nth-child(3n) {
    margin-right: 8px !important;
}

.row-vip-rustshop .vip-item.vip-item-wide {
    width: calc(100% - 16px);
    flex: 0 0 calc(100% - 16px);
}

/* rust-shop: colorful tiers use the same faint placeholder art with subtle hue tints */
.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l1 {
    border: 1px solid rgba(20,34,22,0.62);
    background:
        linear-gradient(90deg, rgba(7,9,8,0.92) 0%, rgba(20,24,30,0.90) 100%) padding-box,
        linear-gradient(90deg, rgba(22,62,30,0.22) 0%, rgba(12,30,16,0.15) 100%) padding-box,
        url("/img/vip_t1_bg.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l1:hover {
    border: 1px solid rgba(28,50,32,0.74);
    background:
        linear-gradient(90deg, rgba(10,12,12,0.94) 0%, rgba(24,29,36,0.92) 100%) padding-box,
        linear-gradient(90deg, rgba(28,74,38,0.22) 0%, rgba(16,38,20,0.15) 100%) padding-box,
        url("/img/vip_t1_bg.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l3 {
    border: 1px solid rgba(38,28,18,0.62);
    background:
        linear-gradient(90deg, rgba(8,8,7,0.92) 0%, rgba(20,24,30,0.90) 100%) padding-box,
        linear-gradient(90deg, rgba(84,54,16,0.24) 0%, rgba(38,24,12,0.17) 100%) padding-box,
        url("/img/vip_t2_bg.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l3:hover {
    border: 1px solid rgba(58,40,24,0.74);
    background:
        linear-gradient(90deg, rgba(11,11,9,0.94) 0%, rgba(24,29,36,0.92) 100%) padding-box,
        linear-gradient(90deg, rgba(100,62,20,0.24) 0%, rgba(44,28,14,0.17) 100%) padding-box,
        url("/img/vip_t2_bg.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l4 {
    border: 1px solid rgba(30,24,42,0.62);
    background:
        linear-gradient(90deg, rgba(7,7,9,0.92) 0%, rgba(20,24,30,0.90) 100%) padding-box,
        linear-gradient(90deg, rgba(50,28,86,0.22) 0%, rgba(22,14,44,0.15) 100%) padding-box,
        url("/img/vip_t3_bg.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item:not(.vip-item-wide) .vip.l4:hover {
    border: 1px solid rgba(44,34,66,0.74);
    background:
        linear-gradient(90deg, rgba(10,10,13,0.94) 0%, rgba(24,29,36,0.92) 100%) padding-box,
        linear-gradient(90deg, rgba(62,34,102,0.22) 0%, rgba(28,18,52,0.15) 100%) padding-box,
        url("/img/vip_t3_bg.webp") center/cover no-repeat padding-box;
}

/* rust-shop: OIL RIG card gets a faint thematic background image */
.row-vip-rustshop .vip-item-wide .vip.l5 {
    border: 1px solid rgba(34,22,22,0.62);
    background:
        linear-gradient(90deg, rgba(6,7,9,0.92) 0%, rgba(20,24,30,0.90) 100%) padding-box,
        linear-gradient(90deg, rgba(56,16,16,0.26) 0%, rgba(30,12,12,0.17) 100%) padding-box,
        url("/img/oilrig.webp") center/cover no-repeat padding-box;
}

.row-vip-rustshop .vip-item-wide .vip.l5:hover {
    border: 1px solid rgba(52,30,30,0.74);
    background:
        linear-gradient(90deg, rgba(16,11,12,0.94) 0%, rgba(30,20,22,0.92) 100%) padding-box,
        linear-gradient(90deg, rgba(72,20,20,0.24) 0%, rgba(38,14,14,0.15) 100%) padding-box,
        url("/img/oilrig.webp") center/cover no-repeat padding-box;
}

@media screen and (max-width:960px) {
    .row-vip-rustshop .vip-item,
    .row-vip-rustshop .vip-item.vip-item-wide {
        width: calc(100% - 16px);
        flex: 0 0 calc(100% - 16px);
        margin: 0 8px 16px !important;
    }
}

/* rust-shop: coin packs stub */
.coinpacks-section {
    background: linear-gradient(90deg,
    rgba(22,25,30,0.84) 0%,
    rgba(18,21,26,0.74) 30%,
    rgba(14,16,20,0.62) 62%,
    rgba(8,9,11,0.40) 100%);
    background-color: #0e0f12;
    border: 1px solid rgba(66,73,84,0.74);
    border-radius: 6px;
    padding: 16px 18px 14px;
    margin: 0 0 28px 0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.34);
    position: relative;
    overflow: hidden;
    transition: border-color .18s ease;
    will-change: border-color;
}

.coinpacks-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 38% 30%,
    rgba(170,178,190,0.09) 0%,
    rgba(170,178,190,0.04) 18%,
    rgba(170,178,190,0.015) 36%,
    rgba(0,0,0,0.00) 60%);
    opacity: 0.16;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}

.coinpacks-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("/img/CTA_Banner.jpg") center/cover no-repeat;
    opacity: 0.28;
    pointer-events: none;
    mix-blend-mode: overlay;
    filter: grayscale(100%) saturate(0) contrast(1.58) brightness(0.60);
    z-index: 1;
    mask: radial-gradient(circle at 50% 42%,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.28) 76%,
    rgba(0,0,0,0.00) 96%);
}

.coinpacks-section > * {
    position: relative;
    z-index: 2;
}

.coinpacks-section:hover {
    border-color: rgba(66,73,84,0.74);
}

.coinpacks-section .section-title {
    margin: 0 0 10px 0;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.coinpacks-section .coinpacks-pre-header {
    margin: -16px -18px 12px -18px;
    border-radius: 6px 6px 0 0;
}

.coinpacks-subnote {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #c9ced4;
}

.coinpacks-grid {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.coinpack-tile {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(66,73,84,0.62);
    border-radius: 4px;
    padding: 12px 10px;
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coinpack-icon {
    width: 62px;
    height: 62px;
    display: block;
    margin: 0 auto 8px auto;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.72)) drop-shadow(0 0 10px rgba(0,0,0,0.45));
}

.coinpack-amount {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.coinpack-bonus {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #e6e9ed;
    margin: 0 0 6px 0;
    min-height: 16px;
}

.coinpack-bonus-empty {
    opacity: 0;
}

.coinpack-tile.coinpack-green .coinpack-bonus {
    color: #b5e4a6;
}

.coinpack-tile.coinpack-gold .coinpack-bonus {
    color: #f0c783;
}

.coinpack-tile.coinpack-red .coinpack-bonus {
    color: #ff9b9b;
}

.coinpack-price {
    margin-top: auto;
    min-width: 86px;
    min-height: 32px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: #0b0e13 1px 1px 0;
    background: rgba(47,158,68,0.22);
    border: 1px solid #2f9e44;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 7px rgba(0,0,0,0.34);
}

.coinpack-price:hover {
    background: rgba(55,178,77,0.32);
    border-color: #37b24d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 9px rgba(0,0,0,0.38);
}

.coinpack-price:active {
    background: rgba(43,138,62,0.46);
    border-color: #2b8a3e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.34);
}

@media screen and (max-width:960px) {
    .coinpacks-grid {
        flex-wrap: wrap;
    }

    .coinpack-tile {
        flex: 1 1 calc(50% - 5px);
    }
}

@media screen and (max-width:560px) {
    .coinpack-tile {
        flex: 1 1 100%;
    }
}