/* ============================================================
   HONEST RUST TEBEX — PRODUCTION STOREFRONT v9
   ============================================================ */

:root {
    --hr-bg: #050705;
    --hr-panel: #0b0f0b;
    --hr-panel-2: #101510;
    --hr-panel-3: #151b15;

    --hr-line: #313a2f;
    --hr-line-soft: #222922;

    --hr-green: #8fd400;
    --hr-green-hi: #b8ff17;
    --hr-green-dark: #304700;

    --hr-orange: #e95f11;
    --hr-orange-hi: #ff7b22;
    --hr-orange-dark: #702100;

    --hr-text: #eff1eb;
    --hr-muted: #899286;

    /* Header logo controls */
    --hr-logo-width: 620px;
    --hr-logo-height: 185px;
    --hr-logo-left: 12px;
    --hr-header-height: 190px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background:
        radial-gradient(circle at 50% -15%, rgba(143,212,0,.055), transparent 34%),
        var(--hr-bg) !important;
    color: var(--hr-text);
}

body {
    min-height: 100vh;
}

.site,
.site-header,
.honest-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

.honest-header {
    position: relative;
    min-height: var(--hr-header-height);
    overflow: visible !important;

    border-bottom: 1px solid var(--hr-green-dark);
    background:
        linear-gradient(180deg, rgba(14,18,14,.995), rgba(6,8,6,.995));

    box-shadow:
        0 8px 32px rgba(0,0,0,.65),
        inset 0 -1px 0 rgba(143,212,0,.06);

    z-index: 100;
}

.honest-header-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--hr-header-height);

    margin: 0 !important;
    padding: 0 24px 0 0 !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 24px;

    position: relative;
}

/* Main brand attached to left edge */
.honest-brand {
    position: absolute !important;

    left: var(--hr-logo-left) !important;
    top: 50% !important;

    width: var(--hr-logo-width) !important;
    height: var(--hr-logo-height) !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;

    z-index: 2;
}

.honest-brand-link {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    text-decoration: none !important;
}

.honest-logo,
.honest-brand img {
    width: var(--hr-logo-width) !important;
    min-width: var(--hr-logo-width) !important;
    max-width: var(--hr-logo-width) !important;

    height: var(--hr-logo-height) !important;
    min-height: var(--hr-logo-height) !important;
    max-height: var(--hr-logo-height) !important;

    display: block !important;

    object-fit: contain !important;
    object-position: left center !important;
}

.honest-brand-text {
    color: #eee;
    font-size: 32px;
    font-weight: 950;
}

.honest-brand-text strong {
    color: var(--hr-green);
}

/* Navigation */
.honest-navigation {
    grid-column: 2 !important;
    justify-self: center !important;

    width: auto !important;
    margin: 0 !important;

    position: relative;
    z-index: 4;
}

.honest-store-nav-list {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    list-style: none !important;
}

.honest-store-nav-list li {
    margin: 0 !important;
}

.honest-store-nav-list a {
    min-height: 50px;
    padding: 0 17px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #202620;
    background:
        linear-gradient(180deg, #131813, #090c09);

    color: #dce0d9 !important;

    text-decoration: none !important;
    text-transform: uppercase;

    font-size: 12px;
    font-weight: 900;

    transition: .16s ease;
}

.honest-store-nav-list a:hover,
.honest-store-nav-list .active > a {
    border-color: #52642e;

    color: var(--hr-green-hi) !important;

    box-shadow:
        inset 0 -2px 0 var(--hr-green),
        inset 0 0 16px rgba(143,212,0,.04);
}

.honest-server-nav-kicker {
    min-width: 36px;
    height: 24px;
    padding: 0 7px;

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

    border: 1px solid var(--hr-green);
    background: rgba(143,212,0,.06);

    color: var(--hr-green-hi);

    font-size: 9px;
    font-weight: 900;
}

.honest-server-nav-pvp .honest-server-nav-kicker {
    border-color: var(--hr-orange);

    background: rgba(233,95,17,.06);

    color: var(--hr-orange-hi);
}

/* Right header */
.honest-header-actions {
    grid-column: 3 !important;
    justify-self: end !important;

    display: flex;
    align-items: center;
    gap: 8px;

    position: relative;
    z-index: 4;
}

.honest-login,
.honest-discord,
.honest-currency > summary {
    height: 46px;
    padding: 0 15px;

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

    border: 1px solid #333c32;
    background: #0d110d;

    color: #f1f2ed !important;

    text-decoration: none !important;
    text-transform: uppercase;

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;
}

.honest-discord {
    border-color: #5865f2;
}

.honest-currency {
    position: relative;
}

.honest-currency > summary {
    min-width: 68px;

    list-style: none;
}

.honest-currency > summary::-webkit-details-marker {
    display: none;
}

.honest-currency-menu {
    position: absolute;
    z-index: 700;

    top: calc(100% + 6px);
    right: 0;

    min-width: 100px;

    padding: 6px;

    display: grid;
    gap: 3px;

    border: 1px solid #343d32;
    background: #080b08;

    box-shadow: 0 16px 34px rgba(0,0,0,.55);
}

.honest-currency-menu a {
    padding: 8px 10px;

    color: #bdc3ba !important;
    text-decoration: none !important;

    font-size: 10px;
    font-weight: 800;
}

.honest-currency-menu a:hover,
.honest-currency-menu a.active {
    background: rgba(143,212,0,.08);
    color: var(--hr-green-hi) !important;
}

.honest-cart {
    min-width: 112px !important;
    height: 46px !important;

    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid var(--hr-orange-hi) !important;
    background:
        linear-gradient(180deg, #d34a09, #822500) !important;

    color: #fff !important;

    font-size: 11px !important;
    font-weight: 900 !important;
}

.honest-cart-symbol {
    font-size: 14px;
}

.honest-cart-count {
    min-width: 21px;
    height: 21px;
    padding: 0 5px;

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

    border-radius: 20px;

    background: var(--hr-green);

    color: #0b1007;

    font-size: 10px;
}

.honest-sale-banner {
    margin: 0 !important;
    padding: 8px 20px !important;

    background: var(--hr-orange) !important;
    color: #fff !important;

    text-align: center;

    font-weight: 900;
}

/* ============================================================
   STOREFRONT GRID
   ============================================================ */

.honest-store-shell {
    width: min(1820px, calc(100% - 28px));
    margin: 16px auto 38px;

    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr)
        310px;

    gap: 14px;

    align-items: start;
}

.honest-store-main {
    min-width: 0;
}

/* ============================================================
   LEFT RAIL
   ============================================================ */

.honest-category-rail {
    display: grid;
    gap: 12px;
}

.honest-rail-heading {
    min-height: 48px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #394336;

    background:
        linear-gradient(180deg, #171d17, #0a0e0a);

    color: var(--hr-green-hi);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .8px;
}

.honest-rail-server {
    overflow: hidden;

    border: 1px solid #394336;

    background:
        linear-gradient(180deg, #111611, #080b08);
}

.honest-rail-server-pve {
    box-shadow: inset 3px 0 0 var(--hr-green);
}

.honest-rail-server-pvp {
    box-shadow: inset 3px 0 0 var(--hr-orange);
}

.honest-rail-server-title {
    padding: 13px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #f0f1ec !important;
    text-decoration: none !important;
}

.honest-rail-server-title > span:last-child {
    display: grid;
    gap: 2px;
}

.honest-rail-server-title strong {
    font-size: 13px;
}

.honest-rail-server-title small {
    color: #7d867a;

    font-size: 9px;
    font-weight: 700;
}

.honest-rail-icon {
    min-width: 46px;
    height: 32px;

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

    border: 1px solid var(--hr-green);

    color: var(--hr-green-hi);

    font-size: 10px;
    font-weight: 900;
}

.honest-rail-server-pvp .honest-rail-icon {
    border-color: var(--hr-orange);

    color: var(--hr-orange-hi);
}

.honest-rail-subcats {
    display: grid;

    border-top: 1px solid #252c24;
}

.honest-rail-subcats a {
    padding: 10px 13px;

    border-bottom: 1px solid #20261f;

    color: #cbd1c7 !important;

    text-decoration: none !important;

    font-size: 11px;
    font-weight: 800;
}

.honest-rail-subcats a:hover,
.honest-rail-subcats a.active {
    background: rgba(143,212,0,.06);

    color: var(--hr-green-hi) !important;
}

.honest-rail-server-pvp .honest-rail-subcats a:hover,
.honest-rail-server-pvp .honest-rail-subcats a.active {
    background: rgba(233,95,17,.06);

    color: var(--hr-orange-hi) !important;
}

.honest-support-box {
    padding: 15px;

    display: grid;
    gap: 8px;

    border: 1px solid #394336;

    background:
        linear-gradient(180deg, #101510, #080a08);
}

.honest-support-box strong {
    color: var(--hr-green-hi);
}

.honest-support-box p {
    margin: 0 0 5px;

    color: #b6bbb2;

    font-size: 11px;
    line-height: 1.45;
}

.honest-support-box span {
    color: #969f92;

    font-size: 10px;
}

/* ============================================================
   HERO
   ============================================================ */

.honest-store-hero {
    min-height: 420px;
    padding: 24px 26px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border: 1px solid #3b4438;

    background-size: cover;
    background-position: center;

    box-shadow:
        inset 0 0 0 1px rgba(143,212,0,.05),
        0 12px 34px rgba(0,0,0,.43);
}

.honest-hero-content {
    width: min(900px, 78%);

    display: grid;
    gap: 20px;
}

.honest-hero-store-logo {
    display: block;

    width: min(760px, 100%);
    height: auto;
    max-height: 225px;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 9px 18px rgba(0,0,0,.72));
}

.honest-server-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.honest-switch-label,
.honest-switch {
    min-height: 58px;
    padding: 9px 14px;

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

    border: 1px solid #3b4438;

    background:
        rgba(7,10,7,.88);

    color: #ebede7 !important;
    text-decoration: none !important;
}

.honest-switch-label {
    min-width: 175px;

    color: #9fa69c !important;

    font-size: 11px;
    font-weight: 900;
}

.honest-switch {
    min-width: 165px;
}

.honest-switch small {
    color: #899186;

    font-size: 9px;
    font-weight: 900;
}

.honest-switch strong {
    font-size: 12px;
}

.honest-switch-pve {
    border-color: var(--hr-green);

    box-shadow:
        inset 0 0 14px rgba(143,212,0,.07);
}

.honest-switch-pve small {
    color: var(--hr-green-hi);
}

.honest-switch-pvp {
    border-color: var(--hr-orange);

    box-shadow:
        inset 0 0 14px rgba(233,95,17,.07);
}

.honest-switch-pvp small {
    color: var(--hr-orange-hi);
}

.honest-switch-soon {
    opacity: .62;
}

/* Benefits strip */
.honest-benefits-strip {
    margin-top: 10px;

    min-height: 52px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border: 1px solid #34402f;

    background:
        linear-gradient(90deg, rgba(143,212,0,.06), #090c09, rgba(143,212,0,.04));
}

.honest-benefits-strip > div {
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-right: 1px solid #293128;

    color: #aeb5aa;

    font-size: 10px;
    font-weight: 800;
}

.honest-benefits-strip > div:last-child {
    border-right: 0;
}

.honest-benefits-strip strong {
    color: var(--hr-green-hi);
}

/* ============================================================
   HOME / SERVER CARDS
   ============================================================ */

.honest-home-block,
.honest-category-header,
.honest-package-full {
    margin-top: 12px;
    padding: 16px;

    border: 1px solid #384136;

    background:
        linear-gradient(180deg, rgba(17,22,17,.99), rgba(8,10,8,.99));
}

.honest-section-title {
    margin-bottom: 12px;

    min-height: 45px;
    padding: 0 12px;

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

    border: 1px solid #323b30;

    background:
        linear-gradient(180deg, #151a15, #0a0d0a);
}

.honest-section-title h2 {
    margin: 0;

    color: #eceee8;

    font-size: 15px;
}

.honest-section-title span {
    color: #818a7e;

    font-size: 9px;
    font-weight: 900;
}

.honest-server-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.honest-server-card {
    padding: 16px;

    border: 1px solid #354034;

    background:
        linear-gradient(180deg, #0d120d, #080a08);
}

.honest-server-card-pve {
    border-top: 2px solid var(--hr-green);
}

.honest-server-card-pvp {
    border-top: 2px solid var(--hr-orange);
}

.honest-server-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.honest-server-card h3 {
    margin: 0 0 3px;

    font-size: 18px;
}

.honest-server-card p {
    margin: 0;

    color: #818a7f;

    font-size: 10px;
}

.honest-server-badge {
    min-width: 50px;
    height: 36px;

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

    border: 1px solid var(--hr-green);

    color: var(--hr-green-hi);

    font-size: 10px;
    font-weight: 900;
}

.honest-server-card-pvp .honest-server-badge {
    border-color: var(--hr-orange);

    color: var(--hr-orange-hi);
}

.honest-server-card-links {
    margin: 13px 0;

    display: grid;
    gap: 5px;
}

.honest-server-card-links a,
.honest-server-card-links .honest-empty {
    padding: 9px 10px;

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

    border: 1px solid #2e372c;

    background: #090c09;

    color: #cbd1c7 !important;
    text-decoration: none !important;

    font-size: 10px;
    font-weight: 800;
}

.honest-server-card-links a:hover {
    border-color: #53642e;

    color: var(--hr-green-hi) !important;
}

.honest-server-card-pvp .honest-server-card-links a:hover {
    border-color: var(--hr-orange);

    color: var(--hr-orange-hi) !important;
}

.honest-open-store {
    min-height: 42px;

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

    border: 1px solid var(--hr-green);

    background:
        linear-gradient(180deg, #3e5a00, #182400);

    color: #efffbf !important;

    text-decoration: none !important;

    font-size: 10px;
    font-weight: 900;
}

.honest-server-card-pvp .honest-open-store {
    border-color: var(--hr-orange-hi);

    background:
        linear-gradient(180deg, #c34609, #722100);

    color: #fff !important;
}

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */

.honest-widget-sidebar {
    display: grid;
    gap: 11px;
}

.honest-side-widget,
.honest-widget-sidebar .widget {
    overflow: hidden;

    border: 1px solid #394336 !important;

    background:
        linear-gradient(180deg, #111611, #080a08) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.34);
}

.honest-side-title,
.honest-widget-sidebar .widget-title {
    min-height: 44px;
    margin: 0 !important;
    padding: 0 12px !important;

    display: flex;
    align-items: center;
    gap: 8px;

    border-bottom: 1px solid #2e362c;

    background:
        linear-gradient(180deg, #171c17, #0c100c) !important;

    color: #eff1eb !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.honest-widget-sidebar .widget-content {
    padding: 12px !important;
}

.honest-cart-items {
    display: grid;
}

.honest-cart-line {
    min-height: 48px;
    padding: 9px 10px;

    display: grid;
    grid-template-columns: minmax(0,1fr) auto 18px;
    gap: 7px;
    align-items: center;

    border-bottom: 1px solid #252d24;
}

.honest-cart-line-name {
    min-width: 0;

    color: #e5e8e1;

    font-size: 10px;
}

.honest-cart-line-price {
    color: var(--hr-green-hi);

    font-size: 10px;
    font-weight: 900;
}

.honest-cart-line-price small {
    color: #7e887b;

    font-size: 8px;
}

.honest-cart-remove {
    color: #8e968b !important;
    text-decoration: none !important;

    font-size: 18px;
    text-align: center;
}

.honest-cart-total {
    padding: 10px 11px;

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

    border-top: 1px solid #313a2f;

    color: #9ea69a;

    font-size: 10px;
}

.honest-cart-total strong {
    color: #eef0e9;
}

.honest-cart-buttons {
    padding: 10px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.honest-cart-view,
.honest-checkout-button {
    min-height: 38px;

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

    border: 1px solid var(--hr-orange-hi);

    background:
        linear-gradient(180deg, #c2470b, #792200);

    color: #fff !important;

    text-decoration: none !important;

    font-size: 9px;
    font-weight: 900;
}

.honest-checkout-button {
    border-color: var(--hr-green);

    background:
        linear-gradient(180deg, #3e5a00, #182400);

    color: #efffbf !important;
}

.honest-cart-empty {
    padding: 18px;

    color: #80897e;

    text-align: center;

    font-size: 10px;
}

.honest-security-content {
    padding: 12px;

    display: grid;
    gap: 8px;

    color: #99a296;

    font-size: 9px;
}

.honest-widget-sidebar .avatar {
    border: 1px solid #4b5747;
}

.honest-widget-sidebar .username {
    color: #eceee8 !important;
}

.honest-widget-sidebar .price,
.honest-widget-sidebar strong {
    color: var(--hr-green-hi) !important;
}

.honest-widget-sidebar .purchase {
    padding: 7px 0 !important;

    border-bottom: 1px solid #252b24;
}

/* ============================================================
   CATEGORY + PRODUCTS
   ============================================================ */

.honest-category-header {
    margin-top: 0;
}

.honest-eyebrow {
    display: inline-block;
    margin-bottom: 7px;

    color: var(--hr-green-hi);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.honest-category-header h1,
.honest-package-header h1 {
    margin: 0;

    color: #eff1eb;

    font-size: 29px;
}

.honest-category-header .category-description {
    margin-top: 7px;

    color: #aab1a7;
}

.honest-subcategory-grid {
    margin-top: 11px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.honest-subcategory-grid a {
    min-height: 70px;
    padding: 12px;

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

    border: 1px solid #374136;

    background:
        linear-gradient(180deg, #0d120d, #080a08);

    color: #e9ebe5 !important;
    text-decoration: none !important;
}

.honest-subcategory-grid a:hover {
    border-color: var(--hr-green);
}

.honest-subcategory-grid strong {
    font-size: 13px;
}

.honest-subcategory-grid span {
    margin-top: 4px;

    color: #80897e;

    font-size: 8px;
    font-weight: 900;
}

.honest-package-section-title {
    margin-top: 12px;
}

.honest-products-grid,
.store-products-grid,
.store-products-tiles {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
}

.honest-product-card {
    position: relative;
    overflow: hidden;

    min-width: 0;

    padding: 0 !important;

    border: 1px solid #394336 !important;

    background:
        linear-gradient(180deg, #121812, #070a07) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.honest-product-card::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(90deg, transparent, var(--hr-green), transparent);
}

.honest-product-card:hover {
    transform: translateY(-3px);

    border-color: #607543 !important;

    box-shadow:
        0 13px 30px rgba(0,0,0,.46);
}

.honest-product-media {
    height: 190px;

    display: block;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 35%, rgba(143,212,0,.075), transparent 47%),
        #070a07;
}

.honest-product-media .image {
    width: 100% !important;
    height: 100% !important;

    padding: 10px;

    object-fit: contain !important;
}

.honest-product-placeholder {
    width: 100%;
    height: 100%;

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

    color: var(--hr-green);

    font-size: 58px;
    font-weight: 950;

    opacity: .45;
}

.honest-product-body {
    padding: 11px;
}

.honest-product-card .product-title {
    min-height: 42px;
    margin: 0 0 9px !important;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;

    font-size: 14px !important;
}

.honest-product-card .product-title a {
    color: #eef0ea !important;

    text-decoration: none !important;
}

.honest-product-card .countdown {
    color: var(--hr-orange-hi);

    font-size: 8px;
}

.honest-product-action-zone {
    display: grid;
    gap: 7px;
}

.honest-no-products {
    margin-top: 12px;
    padding: 18px;

    border: 1px dashed #3a4437;

    color: #899286;
}

/* Tebex buttons / prices */
.btn-primary,
.btn-success {
    border: 1px solid var(--hr-orange-hi) !important;

    background:
        linear-gradient(180deg, #d64b0b, #852600) !important;

    color: #fff !important;

    font-weight: 900 !important;
}

.btn-secondary,
.btn-tertiary {
    border-color: #394337 !important;

    background: #0f140f !important;

    color: #d7dcd4 !important;
}

.price,
.text-price {
    color: var(--hr-green-hi) !important;

    font-weight: 900 !important;
}

/* ============================================================
   PACKAGE PAGE
   ============================================================ */

.honest-package-full {
    margin-top: 0;
}

.honest-package-header {
    padding-bottom: 12px;

    border-bottom: 1px solid #30392e;
}

.honest-package-layout {
    margin-top: 14px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 14px;
}

.honest-package-visual,
.honest-package-buy {
    min-width: 0;
}

.honest-package-image {
    width: 100% !important;
    max-width: 600px !important;
    height: 360px !important;

    margin: 0 auto !important;

    display: block !important;

    object-fit: contain !important;

    background: #070a07;
}

.honest-package-actions {
    padding: 13px;

    border: 1px solid #384236;

    background: #090c09;
}

.honest-package-buy-note {
    margin-top: 8px;
    padding: 12px;

    display: grid;
    gap: 4px;

    border: 1px solid #33402f;

    background: rgba(143,212,0,.045);
}

.honest-package-buy-note strong {
    color: var(--hr-green-hi);

    font-size: 10px;
}

.honest-package-buy-note span {
    color: #8f988c;

    font-size: 9px;
}

.honest-package-description {
    margin-top: 15px;
    padding-top: 15px;

    border-top: 1px solid #30392e;

    color: #c0c6bc;
}

/* ============================================================
   BASKET / CHECKOUT / FORMS / MODALS
   ============================================================ */

.checkout,
.basket,
.store-basket,
.checkout-container,
.modal-content,
.form,
.form-group,
.panel {
    color: var(--hr-text);
}

.modal-content,
.checkout-container,
.store-basket,
.panel {
    border: 1px solid #394336 !important;

    background:
        linear-gradient(180deg, #101510, #070a07) !important;

    box-shadow:
        0 16px 45px rgba(0,0,0,.55);
}

.form-control,
input,
select,
textarea {
    border: 1px solid #3b4638 !important;

    background: #080b08 !important;

    color: #eef0e9 !important;

    box-shadow: none !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--hr-green) !important;

    outline: 0 !important;

    box-shadow:
        0 0 0 2px rgba(143,212,0,.08) !important;
}

.table,
table {
    color: #dce1d8;
}

.table td,
.table th,
table td,
table th {
    border-color: #2e372c !important;
}

.alert {
    border-radius: 0 !important;
}

/* ============================================================
   DELIVERY
   ============================================================ */

.honest-delivery-strip {
    margin-top: 12px;

    min-height: 48px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid #35412f;

    background:
        linear-gradient(90deg, rgba(143,212,0,.08), #090c09, rgba(143,212,0,.04));

    color: #aeb6aa;

    font-size: 10px;
}

.honest-delivery-strip strong {
    color: var(--hr-green-hi);
}

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

.honest-footer {
    width: 100% !important;
    max-width: none !important;

    margin-top: 30px !important;

    border-top: 1px solid #293227 !important;

    background: #040604 !important;
}

.honest-footer-inner {
    width: min(1820px, calc(100% - 28px));

    margin: 0 auto;
    padding: 18px 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.honest-footer-brand {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.honest-footer-brand img {
    max-width: 230px;
    max-height: 62px;

    object-fit: contain;
    object-position: left center;
}

.honest-footer-brand span {
    color: #626b5f;

    font-size: 7px;
    letter-spacing: 1.5px;
}

.honest-footer-nav {
    display: flex;
    gap: 15px;
}

.honest-footer-nav a {
    color: #9ea69b !important;

    text-decoration: none !important;

    font-size: 9px;
    font-weight: 900;
}

.honest-footer-payments {
    justify-self: end;

    display: grid;
    justify-items: end;
    gap: 6px;
}

.honest-footer-payments > span {
    color: #70796e;

    font-size: 8px;
    font-weight: 900;
}

.honest-footer-payments .we-accept {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    list-style: none;
}

.honest-footer-payments img {
    width: auto;
    height: 19px;
}

.honest-footer .copyright {
    width: min(1820px, calc(100% - 28px));

    margin: 0 auto;
    padding: 7px 0 14px;

    color: #5d665a !important;

    font-size: 8px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

.honest-mobile-toggle {
    display: none;
}

@media (max-width: 1500px) {
    :root {
        --hr-logo-width: 430px;
        --hr-logo-height: 128px;
        --hr-header-height: 138px;
    }

    .honest-store-nav-list a {
        padding: 0 10px !important;

        font-size: 10px;
    }

    .honest-discord {
        display: none;
    }

    .honest-store-shell {
        grid-template-columns:
            220px
            minmax(0, 1fr)
            280px;
    }

    .honest-products-grid,
    .store-products-grid,
    .store-products-tiles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .honest-store-hero {
        min-height: 370px;
    }
}

@media (max-width: 1180px) {
    :root {
        --hr-logo-width: 300px;
        --hr-logo-height: 90px;
        --hr-header-height: 105px;
    }

    .honest-store-shell {
        grid-template-columns:
            215px
            minmax(0, 1fr);
    }

    .honest-widget-sidebar {
        grid-column: 1 / -1;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .honest-store-hero {
        min-height: 330px;
    }

    .honest-hero-content {
        width: 88%;
    }
}

@media (max-width: 850px) {
    :root {
        --hr-logo-width: 210px;
        --hr-logo-height: 64px;
        --hr-logo-left: 10px;
        --hr-header-height: 82px;
    }

    .honest-header {
        min-height: auto;
    }

    .honest-header-inner {
        min-height: auto;

        padding: 8px 10px 0 !important;

        display: grid !important;

        grid-template-columns:
            1fr
            auto !important;
    }

    .honest-brand {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: var(--hr-logo-width) !important;

        transform: none !important;

        grid-column: 1 !important;
    }

    .honest-header-actions {
        grid-column: 2 !important;
    }

    .honest-currency {
        display: none;
    }

    .honest-navigation {
        grid-column: 1 / -1 !important;
        grid-row: 2;

        width: 100% !important;

        padding: 7px 0 10px;
    }

    .honest-store-nav-list {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;
    }

    .honest-store-nav-list a {
        white-space: nowrap;
    }

    .honest-store-shell {
        width: calc(100% - 16px);

        grid-template-columns: 1fr;
    }

    .honest-category-rail,
    .honest-widget-sidebar {
        grid-template-columns: 1fr;
    }

    .honest-store-hero {
        min-height: 430px;
        padding: 18px;

        background-position: center;
    }

    .honest-hero-content {
        width: 100%;
    }

    .honest-hero-store-logo {
        width: min(560px, 100%);
        max-height: 175px;
    }

    .honest-server-switcher {
        flex-direction: column;
    }

    .honest-switch-label,
    .honest-switch {
        width: 100%;
    }

    .honest-benefits-strip {
        grid-template-columns: 1fr;
    }

    .honest-benefits-strip > div {
        min-height: 42px;

        border-right: 0;
        border-bottom: 1px solid #293128;
    }

    .honest-benefits-strip > div:last-child {
        border-bottom: 0;
    }

    .honest-server-cards,
    .honest-subcategory-grid,
    .honest-package-layout {
        grid-template-columns: 1fr;
    }

    .honest-products-grid,
    .store-products-grid,
    .store-products-tiles {
        grid-template-columns: 1fr !important;
    }

    .honest-package-image {
        height: 280px !important;
    }

    .honest-footer-inner {
        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;
    }

    .honest-footer-brand,
    .honest-footer-payments {
        justify-self: center;
        justify-items: center;
    }

    .honest-footer-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   HONEST RUST TEBEX — v11 REAL PNG FRAME ASSETS
   CSS borders are intentionally minimized. The visible framing
   comes from actual PNG assets generated for this theme.
   ============================================================ */

/* Frame helper defaults */
.honest-header,
.honest-store-hero,
.honest-category-rail,
.honest-home-block,
.honest-category-header,
.honest-package-full,
.honest-side-widget,
.honest-widget-sidebar .widget,
.honest-server-card,
.honest-product-card,
.honest-delivery-strip,
.honest-footer {
    position: relative;
    isolation: isolate;
}

/* Actual metal texture inside panels */
.honest-home-block,
.honest-category-header,
.honest-package-full,
.honest-side-widget,
.honest-widget-sidebar .widget,
.honest-server-card,
.honest-product-card,
.honest-support-box {
    background:
        linear-gradient(rgba(7,10,7,.90), rgba(7,10,7,.94)),
        var(--hr-metal-texture) center / 520px 520px repeat !important;

    border: 0 !important;
}

/* ------------------------------------------------------------
   HEADER FRAME ASSET
   ------------------------------------------------------------ */
.honest-header {
    border: 0 !important;
    background:
        linear-gradient(rgba(6,8,6,.96), rgba(6,8,6,.97)),
        var(--hr-metal-texture) center / 600px 600px repeat !important;
}

.honest-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: var(--hr-frame-header) center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------
   HERO FRAME ASSET
   ------------------------------------------------------------ */
.honest-store-hero {
    border: 0 !important;
    overflow: visible !important;
}

.honest-store-hero::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 8;
    pointer-events: none;

    border: 56px solid transparent;
    border-image-source: var(--hr-frame-hero);
    border-image-slice: 56;
    border-image-width: 56px;
    border-image-repeat: stretch;
}

/* ------------------------------------------------------------
   LEFT SIDEBAR — one tall frame around the whole category rail
   ------------------------------------------------------------ */
.honest-category-rail {
    padding: 34px 26px 30px !important;
    border: 0 !important;

    background:
        linear-gradient(rgba(6,9,6,.92), rgba(6,9,6,.96)),
        var(--hr-metal-texture) center / 480px 480px repeat !important;
}

.honest-category-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    border: 44px solid transparent;
    border-image-source: var(--hr-frame-sidebar);
    border-image-slice: 44;
    border-image-width: 44px;
    border-image-repeat: stretch;
}

.honest-category-rail > * {
    position: relative;
    z-index: 8;
}

/* Strip frame for Categories and section headings */
.honest-rail-heading,
.honest-section-title,
.honest-side-title,
.honest-widget-sidebar .widget-title {
    border: 0 !important;
    min-height: 46px !important;

    background:
        var(--hr-frame-section) center / 100% 100% no-repeat,
        #0b0f0b !important;

    box-shadow: none !important;
}

/* Inner sidebar category cards are simplified so the outer frame dominates */
.honest-rail-server {
    border: 1px solid rgba(86,97,81,.58) !important;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.55) !important;
}

.honest-rail-server-pve {
    border-left: 3px solid var(--hr-green) !important;
}

.honest-rail-server-pvp {
    border-left: 3px solid var(--hr-orange) !important;
}

/* ------------------------------------------------------------
   WIDGET FRAME ASSET
   ------------------------------------------------------------ */
.honest-side-widget,
.honest-widget-sidebar .widget,
.honest-support-box,
.honest-home-block,
.honest-category-header,
.honest-package-full,
.honest-delivery-strip {
    border: 0 !important;
    overflow: visible !important;
}

.honest-side-widget::after,
.honest-widget-sidebar .widget::after,
.honest-support-box::after,
.honest-home-block::after,
.honest-category-header::after,
.honest-package-full::after,
.honest-delivery-strip::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 5;
    pointer-events: none;

    border: 38px solid transparent;
    border-image-source: var(--hr-frame-widget);
    border-image-slice: 38;
    border-image-width: 38px;
    border-image-repeat: stretch;
}

.honest-side-widget > *,
.honest-widget-sidebar .widget > *,
.honest-support-box > *,
.honest-home-block > *,
.honest-category-header > *,
.honest-package-full > *,
.honest-delivery-strip > * {
    position: relative;
    z-index: 8;
}

/* ------------------------------------------------------------
   PVE / PVP SERVER CARD FRAME ASSETS
   ------------------------------------------------------------ */
.honest-server-card {
    border: 0 !important;
    overflow: visible !important;
}

.honest-server-card::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 4;
    pointer-events: none;

    border: 40px solid transparent;
    border-image-slice: 40;
    border-image-width: 40px;
    border-image-repeat: stretch;
}

.honest-server-card-pve::after {
    border-image-source: var(--hr-frame-pve);
}

.honest-server-card-pvp::after {
    border-image-source: var(--hr-frame-pvp);
}

.honest-server-card > * {
    position: relative;
    z-index: 8;
}

/* ------------------------------------------------------------
   PRODUCT CARD FRAME ASSET
   ------------------------------------------------------------ */
.honest-product-card {
    border: 0 !important;
    overflow: visible !important;

    box-shadow: none !important;
}

.honest-product-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    height: auto !important;
    z-index: 6;
    pointer-events: none;

    border: 34px solid transparent;
    border-image-source: var(--hr-frame-product);
    border-image-slice: 34;
    border-image-width: 34px;
    border-image-repeat: stretch;

    background: none !important;
}

.honest-product-card > * {
    position: relative;
    z-index: 9;
}

.honest-product-media {
    margin: 8px 8px 0 !important;

    border: 1px solid rgba(75,84,70,.55) !important;

    box-shadow:
        inset 0 0 26px rgba(0,0,0,.76) !important;
}

/* ------------------------------------------------------------
   SUBCATEGORY CARDS
   ------------------------------------------------------------ */
.honest-subcategory-grid a {
    position: relative;
    border: 0 !important;

    background:
        linear-gradient(rgba(8,11,8,.93), rgba(8,11,8,.95)),
        var(--hr-metal-texture) center / 360px 360px repeat !important;
}

.honest-subcategory-grid a::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;

    border: 30px solid transparent;
    border-image-source: var(--hr-frame-product);
    border-image-slice: 34;
    border-image-width: 30px;
    border-image-repeat: stretch;
}

/* ------------------------------------------------------------
   BUTTON ASSETS
   ------------------------------------------------------------ */
.honest-open-store,
.honest-checkout-button,
.btn-secondary.honest-green-button {
    border: 0 !important;

    background:
        var(--hr-button-green) center / 100% 100% no-repeat !important;

    color: #f2ffcb !important;

    box-shadow: none !important;
}

.honest-server-card-pvp .honest-open-store,
.honest-cart-view,
.btn-primary,
.btn-success,
.honest-cart {
    border: 0 !important;

    background:
        var(--hr-button-orange) center / 100% 100% no-repeat !important;

    color: #fff !important;

    box-shadow: none !important;
}

.honest-switch-pve {
    background:
        var(--hr-button-green) center / 100% 100% no-repeat !important;

    border: 0 !important;
}

.honest-switch-pvp {
    background:
        var(--hr-button-orange) center / 100% 100% no-repeat !important;

    border: 0 !important;
}

/* Neutral switch plate still uses metal */
.honest-switch-label,
.honest-switch-soon {
    border: 0 !important;

    background:
        linear-gradient(rgba(9,12,9,.95), rgba(9,12,9,.97)),
        var(--hr-metal-texture) center / 260px 260px repeat !important;

    box-shadow:
        inset 0 0 0 1px rgba(89,99,83,.65),
        inset 0 0 16px rgba(0,0,0,.5) !important;
}

/* ------------------------------------------------------------
   FOOTER FRAME ASSET
   ------------------------------------------------------------ */
.honest-footer {
    border: 0 !important;
    overflow: visible !important;

    background:
        linear-gradient(rgba(5,7,5,.96), rgba(5,7,5,.97)),
        var(--hr-metal-texture) center / 600px 600px repeat !important;
}

.honest-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: var(--hr-frame-footer) center / 100% 100% no-repeat;
}

.honest-footer > * {
    position: relative;
    z-index: 5;
}

/* ------------------------------------------------------------
   PACKAGE / CHECKOUT INNER PLATES
   ------------------------------------------------------------ */
.honest-package-actions,
.honest-package-buy-note,
.checkout-container,
.store-basket,
.modal-content,
.panel {
    border: 0 !important;

    background:
        linear-gradient(rgba(7,10,7,.94), rgba(7,10,7,.96)),
        var(--hr-metal-texture) center / 420px 420px repeat !important;

    box-shadow:
        inset 0 0 0 1px rgba(91,101,85,.54),
        inset 0 0 24px rgba(0,0,0,.58) !important;
}

/* ------------------------------------------------------------
   Remove leftover line-style framing
   ------------------------------------------------------------ */
.honest-benefits-strip {
    border: 0 !important;
    background:
        var(--hr-frame-section) center / 100% 100% no-repeat,
        #080b08 !important;

    box-shadow: none !important;
}

.honest-benefits-strip > div {
    border-right: 0 !important;
}

.honest-delivery-strip {
    background:
        linear-gradient(rgba(8,11,8,.92), rgba(8,11,8,.95)),
        var(--hr-metal-texture) center / 360px 360px repeat !important;
}

/* Content always above the PNG overlays */
.honest-header-inner,
.honest-store-hero > *,
.honest-category-rail > *,
.honest-home-block > *,
.honest-category-header > *,
.honest-package-full > *,
.honest-side-widget > *,
.honest-widget-sidebar .widget > *,
.honest-server-card > *,
.honest-product-card > *,
.honest-footer > * {
    position: relative;
    z-index: 10;
}

/* Mobile: use slightly thinner visual framing */
@media (max-width: 850px) {
    .honest-category-rail {
        padding: 28px 22px 26px !important;
    }

    .honest-store-hero::after {
        border-width: 40px;
        border-image-width: 40px;
    }

    .honest-side-widget::after,
    .honest-widget-sidebar .widget::after,
    .honest-support-box::after,
    .honest-home-block::after,
    .honest-category-header::after,
    .honest-package-full::after,
    .honest-delivery-strip::after {
        border-width: 30px;
        border-image-width: 30px;
    }

    .honest-product-card::before {
        border-width: 28px;
        border-image-width: 28px;
    }
}

/* ============================================================
   v11.3 DARK BUTTON FRAME - TEBEX ASSET FIX
   ============================================================

   IMPORTANT:
   --hr-button-dark is injected in Webstore/layout.html with:
   https://cdn.tebex.io/store/1434647/templates/310792/assets/0d902abd0b6481a140b6c747036417fd0c2563c7.png?updated=2cb8ecd362454bc364e87473d2e6910cd5ff78c420a77c1882a15b9301f1802a

   Do not use url("button-dark-frame.png") directly in this CSS.
   Tebex resolves uploaded assets through the Twig asset() helper.
*/

/* Every clickable/button control uses the SAME full dark PNG frame. */
.honest-store-nav-list a,
.honest-login,
.honest-discord,
.honest-currency > summary,
.honest-cart,
.honest-switch,
.honest-switch-label,
.honest-switch-pve,
.honest-switch-pvp,
.honest-switch-soon,
.honest-open-store,
.honest-cart-view,
.honest-checkout-button,
.honest-copy-server,
.honest-package-actions a,
.honest-package-actions button,
.package-actions a,
.package-actions button,
.btn,
.btn-primary,
.btn-success,
.btn-secondary,
.btn-tertiary,
button,
input[type="button"],
input[type="submit"],
a.button {
    /* Kill old green/orange frame/background rules. */
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;

    /* Full graphical frame asset + dark inner plate. */
    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.97), rgba(5,7,5,.97)) !important;
    background-position:
        center,
        center !important;
    background-size:
        100% 100%,
        calc(100% - 20px) calc(100% - 14px) !important;
    background-repeat:
        no-repeat,
        no-repeat !important;

    background-color: transparent !important;

    min-height: 52px !important;
    padding: 10px 26px !important;

    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;

    position: relative;
    isolation: isolate;

    box-shadow:
        0 4px 12px rgba(0,0,0,.35) !important;

    transition:
        filter .15s ease,
        text-shadow .15s ease,
        transform .15s ease !important;
}

/* Make the frame visibly thicker on larger CTA buttons. */
.honest-open-store,
.honest-cart-view,
.honest-checkout-button,
.honest-package-actions a,
.honest-package-actions button,
.package-actions a,
.package-actions button,
.btn-primary,
.btn-success {
    min-height: 58px !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
}

/* Header/nav needs a more compact frame. */
.honest-store-nav-list a,
.honest-login,
.honest-discord,
.honest-currency > summary,
.honest-cart {
    min-height: 48px !important;
    padding: 8px 22px !important;
}

/* Neutral text */
.honest-store-nav-list a,
.honest-login,
.honest-discord,
.honest-currency > summary,
.honest-switch-label,
.honest-switch-soon,
.honest-cart-view,
.btn-secondary,
.btn-tertiary {
    color: #e7e9e4 !important;
}

/* PVE accents - frame remains dark */
.honest-switch-pve,
.honest-server-card-pve .honest-open-store,
.honest-checkout-button {
    color: var(--hr-green-hi) !important;
    text-shadow: 0 0 9px rgba(143,212,0,.42) !important;
}

/* PVP/purchase accents - frame remains dark */
.honest-switch-pvp,
.honest-server-card-pvp .honest-open-store,
.honest-cart,
.honest-package-actions a,
.honest-package-actions button,
.package-actions a,
.package-actions button,
.btn-primary,
.btn-success {
    color: var(--hr-orange-hi) !important;
    text-shadow: 0 0 9px rgba(233,95,17,.40) !important;
}

/* Hover: brighten the SAME dark frame, don't switch graphics. */
.honest-store-nav-list a:hover,
.honest-login:hover,
.honest-discord:hover,
.honest-currency > summary:hover,
.honest-cart:hover,
.honest-switch:hover,
.honest-open-store:hover,
.honest-cart-view:hover,
.honest-checkout-button:hover,
.honest-copy-server:hover,
.honest-package-actions a:hover,
.honest-package-actions button:hover,
.package-actions a:hover,
.package-actions button:hover,
.btn:hover,
button:hover {
    filter: brightness(1.16) !important;
    transform: translateY(-1px);
}

/* Current/selected navigation is still visibly selected without changing frame. */
.honest-store-nav-list a.active,
.honest-store-nav-list a[aria-current="page"] {
    color: var(--hr-green-hi) !important;
    text-shadow: 0 0 10px rgba(143,212,0,.50) !important;
    filter: brightness(1.13);
}

/* Product CTAs span the card width. */
.honest-product-card .btn,
.honest-product-card .btn-primary,
.honest-product-card .btn-success,
.honest-product-card .btn-secondary,
.honest-product-card .package-actions a,
.honest-product-card .package-actions button {
    width: 100% !important;
}

/* Explicit helper classes also point to the same dark graphic. */
.honest-frame-button-dark,
.honest-frame-button-green,
.honest-frame-button-orange {
    border: 0 !important;
    border-image: none !important;
    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.97), rgba(5,7,5,.97)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 20px) calc(100% - 14px) !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* ============================================================
   v11.4 CATEGORY BUTTONS USE DARK FRAME
   ============================================================ */

/* Main PVE/PVP category buttons in the left category rail */
.honest-rail-server-title {
    min-height: 52px !important;
    padding: 9px 22px !important;

    border: 0 !important;
    border-image: none !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(16,19,16,.97), rgba(5,7,5,.97)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 20px) calc(100% - 14px) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: transparent !important;

    position: relative;
    z-index: 2;
}

/* Individual sub-category rows: Premium / VIP / Items / Kits etc. */
.honest-rail-subcats {
    gap: 3px !important;
    padding: 3px 0 0 !important;
    border-top: 0 !important;
}

.honest-rail-subcats a {
    min-height: 40px !important;
    padding: 6px 20px !important;

    border: 0 !important;
    border-bottom: 0 !important;
    border-image: none !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(13,16,13,.96), rgba(5,7,5,.96)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 16px) calc(100% - 10px) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: transparent !important;

    display: flex !important;
    align-items: center !important;

    transition:
        filter .15s ease,
        color .15s ease,
        text-shadow .15s ease !important;
}

/* PVE active/hover: same dark frame, green accent only */
.honest-rail-server-pve .honest-rail-server-title:hover,
.honest-rail-server-pve .honest-rail-server-title.active,
.honest-rail-server-pve .honest-rail-subcats a:hover,
.honest-rail-server-pve .honest-rail-subcats a.active {
    color: var(--hr-green-hi) !important;
    text-shadow: 0 0 8px rgba(143,212,0,.45) !important;
    filter: brightness(1.13);
}

/* PVP active/hover: same dark frame, orange accent only */
.honest-rail-server-pvp .honest-rail-server-title:hover,
.honest-rail-server-pvp .honest-rail-server-title.active,
.honest-rail-server-pvp .honest-rail-subcats a:hover,
.honest-rail-server-pvp .honest-rail-subcats a.active {
    color: var(--hr-orange-hi) !important;
    text-shadow: 0 0 8px rgba(233,95,17,.44) !important;
    filter: brightness(1.13);
}

/* Category-page subcategory cards also use the same dark button frame */
.honest-subcategory-grid a {
    min-height: 72px !important;
    padding: 12px 26px !important;

    border: 0 !important;
    border-image: none !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(14,17,14,.97), rgba(5,7,5,.97)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 22px) calc(100% - 16px) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: transparent !important;

    position: relative;
    z-index: 1;
}

/* Disable the old product-frame overlay on subcategory buttons */
.honest-subcategory-grid a::after {
    display: none !important;
}

/* Category card hover stays dark, only brightens */
.honest-subcategory-grid a:hover {
    border: 0 !important;
    filter: brightness(1.14);
    color: var(--hr-green-hi) !important;
}

/* ============================================================
   v11.5 HEADER / FOOTER / CATEGORY / CART POLISH
   ============================================================ */

/* ------------------------------------------------------------
   FIX: desktop mobile-menu ghost button
   v11.3 global button styling was overriding display:none.
   ------------------------------------------------------------ */
.honest-mobile-toggle {
    display: none !important;
}

/* ------------------------------------------------------------
   HEADER: keep actions away from the right metal frame edge
   ------------------------------------------------------------ */
.honest-header-actions {
    margin-right: 58px !important;
}

/* Slightly more breathing room inside the header frame */
.honest-header-inner {
    padding-right: 18px !important;
}

/* Header/footer frame overlays stay crisp and don't blur from filters */
.honest-header::before,
.honest-footer::before {
    filter: none !important;
    opacity: 1 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ------------------------------------------------------------
   CATEGORY BUTTONS: taller + larger typography
   ------------------------------------------------------------ */
.honest-rail-server-title {
    min-height: 62px !important;
    padding: 11px 22px !important;
    gap: 12px !important;
}

.honest-rail-server-title strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
    letter-spacing: .15px;
}

.honest-rail-server-title small {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.honest-rail-icon {
    min-width: 48px !important;
    height: 34px !important;
    font-size: 11px !important;
}

.honest-rail-subcats {
    gap: 5px !important;
    padding-top: 5px !important;
}

.honest-rail-subcats a {
    min-height: 48px !important;
    padding: 8px 20px !important;

    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: .08px;
}

/* Slightly stronger frame presence on category buttons */
.honest-rail-server-title,
.honest-rail-subcats a {
    background-size:
        100% 100%,
        calc(100% - 18px) calc(100% - 12px) !important;
}

/* ------------------------------------------------------------
   RIGHT SIDEBAR / YOUR CART:
   keep all content inside the safe inner area of frame-widget.png
   ------------------------------------------------------------ */
.honest-cart-preview {
    min-height: 148px !important;
    padding: 16px 22px 19px !important;
    box-sizing: border-box !important;
}

.honest-cart-preview .honest-side-title {
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 0 8px !important;

    border-bottom: 1px solid rgba(92,105,88,.36) !important;
    background: rgba(9,12,9,.58) !important;
}

.honest-cart-preview .honest-cart-empty {
    min-height: 46px !important;
    padding: 7px 10px 3px !important;

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

    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

/* Filled cart content also stays clear of frame corners */
.honest-cart-preview .honest-cart-items,
.honest-cart-preview .honest-cart-total,
.honest-cart-preview .honest-cart-buttons {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

/* Give security widget the same safe inner inset */
.honest-security-widget {
    padding: 16px 22px 19px !important;
    box-sizing: border-box !important;
}

.honest-security-widget .honest-side-title {
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 0 8px !important;
    background: rgba(9,12,9,.58) !important;
}

.honest-security-widget .honest-security-content {
    padding: 4px 8px 2px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

/* ------------------------------------------------------------
   RESPONSIVE: restore mobile navigation button only on mobile
   ------------------------------------------------------------ */
@media (max-width: 850px) {
    .honest-mobile-toggle {
        display: inline-flex !important;
    }

    .honest-header-actions {
        margin-right: 8px !important;
    }
}

@media (max-width: 1180px) and (min-width: 851px) {
    .honest-header-actions {
        margin-right: 38px !important;
    }
}

/* ============================================================
   v11.6 RESPONSIVE FOUNDATION
   One fluid coordinate system for HEADER / BODY / FOOTER.
   ============================================================ */

:root {
    /*
       vw-based desktop dimensions keep the physical proportions
       stable when browser zoom changes the CSS viewport width.
    */
    --hr-page-gutter: max(14px, 1.15vw);
    --hr-layout-gap: max(12px, .75vw);

    --hr-left-rail-width: max(245px, 13.6vw);
    --hr-right-rail-width: max(285px, 16.2vw);

    --hr-logo-width: 19vw;
    --hr-logo-height: max(78px, 5.55vw);
    --hr-logo-left: max(10px, .65vw);
    --hr-header-height: max(96px, 6.9vw);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   GLOBAL PAGE WIDTH
   No fixed 1820px cap on desktop.
   ------------------------------------------------------------ */
.honest-store-shell,
.honest-footer-inner,
.honest-footer .copyright {
    width: calc(100% - var(--hr-page-gutter) - var(--hr-page-gutter)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.honest-header,
.honest-header-inner {
    min-height: var(--hr-header-height) !important;
}

.honest-header-inner {
    width: 100% !important;
    max-width: none !important;

    padding-left: var(--hr-page-gutter) !important;
    padding-right: var(--hr-page-gutter) !important;

    grid-template-columns: 1fr auto 1fr !important;
    gap: var(--hr-layout-gap) !important;
}

.honest-brand {
    left: var(--hr-logo-left) !important;
    width: var(--hr-logo-width) !important;
    height: var(--hr-logo-height) !important;
}

.honest-logo,
.honest-brand img {
    width: var(--hr-logo-width) !important;
    min-width: var(--hr-logo-width) !important;
    max-width: var(--hr-logo-width) !important;

    height: var(--hr-logo-height) !important;
    min-height: var(--hr-logo-height) !important;
    max-height: var(--hr-logo-height) !important;
}

.honest-navigation {
    justify-self: center !important;
}

.honest-store-nav-list {
    gap: max(3px, .22vw) !important;
}

.honest-store-nav-list a {
    min-height: max(46px, 2.55vw) !important;
    padding-left: max(12px, .82vw) !important;
    padding-right: max(12px, .82vw) !important;

    font-size: max(10px, .60vw) !important;
}

.honest-server-nav-kicker {
    min-width: max(32px, 1.85vw) !important;
    height: max(22px, 1.25vw) !important;
    padding-left: max(5px, .36vw) !important;
    padding-right: max(5px, .36vw) !important;

    font-size: max(8px, .47vw) !important;
}

.honest-header-actions {
    gap: max(6px, .42vw) !important;
    margin-right: max(42px, 3vw) !important;
}

.honest-login,
.honest-discord,
.honest-currency > summary,
.honest-cart {
    min-height: max(44px, 2.45vw) !important;
    height: auto !important;

    padding-left: max(11px, .75vw) !important;
    padding-right: max(11px, .75vw) !important;

    font-size: max(10px, .56vw) !important;
}

.honest-cart {
    min-width: max(104px, 6vw) !important;
}

.honest-cart-symbol {
    font-size: max(12px, .72vw) !important;
}

.honest-cart-count {
    min-width: max(18px, 1.05vw) !important;
    height: max(18px, 1.05vw) !important;
}

/* ------------------------------------------------------------
   MAIN 3-COLUMN STOREFRONT
   Side rails use viewport-relative proportions.
   ------------------------------------------------------------ */
.honest-store-shell {
    margin-top: max(14px, .85vw) !important;
    margin-bottom: max(28px, 2vw) !important;

    grid-template-columns:
        var(--hr-left-rail-width)
        minmax(0, 1fr)
        var(--hr-right-rail-width) !important;

    gap: var(--hr-layout-gap) !important;
}

.honest-store-main {
    width: 100%;
    min-width: 0;
}

.honest-category-rail,
.honest-widget-sidebar {
    min-width: 0;
}

/* ------------------------------------------------------------
   HERO scales with viewport instead of fixed desktop pixels.
   ------------------------------------------------------------ */
.honest-store-hero {
    min-height: max(320px, 21vw) !important;

    padding:
        max(18px, 1.25vw)
        max(20px, 1.35vw) !important;
}

.honest-hero-content {
    width: min(58vw, 84%) !important;
    gap: max(14px, 1vw) !important;
}

.honest-hero-store-logo {
    width: min(42vw, 100%) !important;
    max-width: none !important;
    max-height: none !important;
}

.honest-server-switcher {
    gap: max(5px, .4vw) !important;
}

.honest-switch-label,
.honest-switch {
    min-height: max(52px, 3vw) !important;
    padding:
        max(7px, .48vw)
        max(11px, .75vw) !important;
}

.honest-switch-label {
    min-width: max(150px, 9vw) !important;
    font-size: max(10px, .57vw) !important;
}

.honest-switch {
    min-width: max(145px, 8.6vw) !important;
}

.honest-switch small {
    font-size: max(8px, .46vw) !important;
}

.honest-switch strong {
    font-size: max(10px, .62vw) !important;
}

/* ------------------------------------------------------------
   CONTENT BLOCKS
   ------------------------------------------------------------ */
.honest-benefits-strip {
    margin-top: max(8px, .55vw) !important;
    min-height: max(48px, 2.8vw) !important;
}

.honest-benefits-strip > div {
    padding-left: max(10px, .7vw) !important;
    padding-right: max(10px, .7vw) !important;
    gap: max(6px, .4vw) !important;

    font-size: max(9px, .53vw) !important;
}

.honest-home-block,
.honest-category-header,
.honest-package-full {
    margin-top: max(10px, .65vw) !important;
    padding: max(14px, .85vw) !important;
}

.honest-section-title {
    min-height: max(42px, 2.55vw) !important;
    padding-left: max(10px, .65vw) !important;
    padding-right: max(10px, .65vw) !important;
}

.honest-section-title h2 {
    font-size: max(14px, .78vw) !important;
}

.honest-section-title span {
    font-size: max(8px, .46vw) !important;
}

.honest-server-cards {
    gap: var(--hr-layout-gap) !important;
}

.honest-server-card {
    padding: max(14px, .85vw) !important;
}

/*
   Product grids adapt continuously instead of jumping at the old
   1500px breakpoint.
*/
.honest-products-grid,
.store-products-grid,
.store-products-tiles {
    grid-template-columns:
        repeat(auto-fit, minmax(max(240px, 14vw), 1fr)) !important;
}

/* ------------------------------------------------------------
   LEFT CATEGORY RAIL
   Keep its internal proportions tied to viewport width.
   ------------------------------------------------------------ */
.honest-category-rail {
    padding:
        max(28px, 1.8vw)
        max(22px, 1.35vw)
        max(26px, 1.55vw) !important;
}

.honest-rail-server-title {
    min-height: max(58px, 3.25vw) !important;
    padding:
        max(9px, .58vw)
        max(18px, 1.05vw) !important;
}

.honest-rail-server-title strong {
    font-size: max(14px, .78vw) !important;
}

.honest-rail-server-title small {
    font-size: max(9px, .52vw) !important;
}

.honest-rail-icon {
    min-width: max(42px, 2.5vw) !important;
    height: max(31px, 1.85vw) !important;
    font-size: max(10px, .57vw) !important;
}

.honest-rail-subcats a {
    min-height: max(44px, 2.55vw) !important;
    padding:
        max(7px, .44vw)
        max(17px, 1vw) !important;

    font-size: max(12px, .68vw) !important;
}

/* ------------------------------------------------------------
   RIGHT SIDEBAR
   ------------------------------------------------------------ */
.honest-widget-sidebar {
    gap: var(--hr-layout-gap) !important;
}

.honest-cart-preview,
.honest-security-widget {
    padding:
        max(15px, .9vw)
        max(20px, 1.2vw)
        max(18px, 1.05vw) !important;
}

/* ------------------------------------------------------------
   FOOTER uses the exact same page width as the storefront.
   ------------------------------------------------------------ */
.honest-footer {
    margin-top: max(24px, 1.6vw) !important;
}

.honest-footer-inner {
    padding-top: max(14px, .95vw) !important;
    padding-bottom: max(14px, .95vw) !important;

    gap: max(14px, 1vw) !important;
}

.honest-footer-brand img {
    width: 12vw !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
}

.honest-footer-brand span {
    font-size: max(6px, .38vw) !important;
    letter-spacing: max(1px, .08vw) !important;
}

.honest-footer-nav {
    gap: max(10px, .8vw) !important;
}

.honest-footer-nav a {
    font-size: max(8px, .48vw) !important;
}

.honest-footer-payments {
    gap: max(4px, .32vw) !important;
}

.honest-footer-payments > span {
    font-size: max(7px, .42vw) !important;
}

.honest-footer-payments .we-accept {
    gap: max(5px, .4vw) !important;
}

.honest-footer-payments img {
    height: max(17px, 1vw) !important;
}

.honest-footer .copyright {
    padding-top: max(5px, .36vw) !important;
    padding-bottom: max(10px, .7vw) !important;

    font-size: max(7px, .4vw) !important;
}

/* ============================================================
   TABLET
   Only structural changes remain breakpoint-based.
   ============================================================ */
@media (max-width: 1240px) and (min-width: 851px) {
    :root {
        --hr-page-gutter: max(12px, 1.1vw);
        --hr-layout-gap: max(10px, .8vw);

        --hr-logo-width: 22vw;
        --hr-logo-height: max(72px, 6.4vw);
        --hr-header-height: max(92px, 7.6vw);
    }

    .honest-store-shell {
        grid-template-columns:
            max(220px, 20vw)
            minmax(0, 1fr) !important;
    }

    .honest-widget-sidebar {
        grid-column: 1 / -1 !important;

        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .honest-header-actions {
        margin-right: max(30px, 2.5vw) !important;
    }

    .honest-store-hero {
        min-height: max(310px, 27vw) !important;
    }

    .honest-hero-content {
        width: min(70vw, 90%) !important;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 850px) {
    :root {
        --hr-page-gutter: 8px;
        --hr-layout-gap: 8px;

        --hr-logo-width: min(52vw, 220px);
        --hr-logo-height: 64px;
        --hr-logo-left: 10px;
        --hr-header-height: 82px;
    }

    .honest-header {
        min-height: auto !important;
    }

    .honest-header-inner {
        min-height: auto !important;

        padding:
            8px
            10px
            0 !important;

        grid-template-columns:
            1fr
            auto !important;
    }

    .honest-brand {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: var(--hr-logo-width) !important;
        height: var(--hr-logo-height) !important;

        transform: none !important;

        grid-column: 1 !important;
    }

    .honest-logo,
    .honest-brand img {
        width: var(--hr-logo-width) !important;
        min-width: 0 !important;
        max-width: var(--hr-logo-width) !important;

        height: var(--hr-logo-height) !important;
        min-height: 0 !important;
        max-height: var(--hr-logo-height) !important;
    }

    .honest-header-actions {
        grid-column: 2 !important;
        margin-right: 0 !important;
    }

    .honest-navigation {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
    }

    .honest-store-shell {
        width: calc(100% - 16px) !important;
        grid-template-columns: 1fr !important;
    }

    .honest-widget-sidebar {
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }

    .honest-store-hero {
        min-height: 430px !important;
        padding: 18px !important;
    }

    .honest-hero-content {
        width: 100% !important;
    }

    .honest-hero-store-logo {
        width: min(92vw, 560px) !important;
    }

    .honest-server-switcher {
        flex-direction: column !important;
    }

    .honest-switch-label,
    .honest-switch {
        width: 100% !important;
        min-width: 0 !important;
    }

    .honest-benefits-strip {
        grid-template-columns: 1fr !important;
    }

    .honest-server-cards {
        grid-template-columns: 1fr !important;
    }

    .honest-products-grid,
    .store-products-grid,
    .store-products-tiles {
        grid-template-columns: 1fr !important;
    }

    .honest-footer-inner {
        grid-template-columns: 1fr !important;
    }

    .honest-footer-brand,
    .honest-footer-payments {
        justify-self: center !important;
        justify-items: center !important;
    }

    .honest-footer-brand img {
        width: min(52vw, 230px) !important;
    }

    .honest-footer-nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   v11.7 FOOTER LAYOUT FIX
   Keep all footer content inside frame-footer.png safe area.
   ============================================================ */

.honest-footer {
    position: relative !important;

    min-height: clamp(150px, 8.4vw, 180px) !important;

    display: flex !important;
    align-items: center !important;

    margin-top: clamp(28px, 1.8vw, 38px) !important;

    box-sizing: border-box !important;
}

/*
   The footer frame has thick decorative edges.
   These insets keep real content away from those edges.
*/
.honest-footer-inner {
    width: 100% !important;
    max-width: none !important;

    min-height: inherit !important;

    margin: 0 !important;

    padding:
        clamp(32px, 1.95vw, 42px)
        clamp(58px, 4.1vw, 88px)
        clamp(30px, 1.75vw, 38px) !important;

    box-sizing: border-box !important;

    grid-template-columns:
        minmax(260px, 1fr)
        auto
        minmax(300px, 1fr) !important;

    align-items: center !important;
    column-gap: clamp(22px, 2vw, 44px) !important;
}

/* ------------------------------------------------------------
   LEFT: BRAND
   ------------------------------------------------------------ */
.honest-footer-brand {
    justify-self: start !important;
    align-self: center !important;

    display: grid !important;
    justify-items: start !important;
    align-content: center !important;

    gap: 4px !important;

    min-width: 0 !important;
}

.honest-footer-brand img {
    width: clamp(190px, 11vw, 260px) !important;
    height: auto !important;

    max-width: none !important;
    max-height: 68px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

.honest-footer-brand span {
    margin-left: 4px !important;

    color: #747d70 !important;

    font-size: clamp(6px, .38vw, 8px) !important;
    line-height: 1 !important;

    letter-spacing: clamp(1px, .09vw, 1.8px) !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   CENTER: NAVIGATION
   ------------------------------------------------------------ */
.honest-footer-nav {
    justify-self: center !important;
    align-self: center !important;

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

    gap: clamp(15px, 1.05vw, 24px) !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.honest-footer-nav a {
    color: #b0b7ad !important;

    font-size: clamp(8px, .52vw, 11px) !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: .15px !important;

    text-decoration: none !important;
}

.honest-footer-nav a:hover {
    color: var(--hr-green-hi) !important;
    text-shadow: 0 0 7px rgba(143,212,0,.38) !important;
}

/* ------------------------------------------------------------
   RIGHT: PAYMENT AREA
   ------------------------------------------------------------ */
.honest-footer-payments {
    justify-self: end !important;
    align-self: center !important;

    display: grid !important;
    justify-items: end !important;
    align-content: center !important;

    gap: clamp(5px, .35vw, 8px) !important;

    min-width: 0 !important;
}

.honest-footer-payments > span {
    color: #838b80 !important;

    font-size: clamp(7px, .43vw, 9px) !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    white-space: nowrap !important;
}

.honest-footer-payments .we-accept {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: clamp(6px, .48vw, 10px) !important;

    list-style: none !important;
}

.honest-footer-payments .we-accept li {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
}

.honest-footer-payments img {
    width: auto !important;
    height: clamp(18px, 1.15vw, 24px) !important;

    max-width: 72px !important;

    object-fit: contain !important;
}

/* ------------------------------------------------------------
   COPYRIGHT:
   anchor it inside the lower-left safe area instead of allowing
   it to stretch under the whole frame.
   ------------------------------------------------------------ */
.honest-footer .copyright {
    position: absolute !important;

    left: clamp(62px, 4.25vw, 92px) !important;
    bottom: clamp(18px, 1.05vw, 24px) !important;

    width: auto !important;
    max-width: 36vw !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #515a4f !important;

    font-size: clamp(5.5px, .34vw, 7px) !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Keep decorative frame above background but below real content. */
.honest-footer::before {
    z-index: 2 !important;

    background-position: center !important;
    background-size: 100% 100% !important;

    filter: none !important;
    opacity: 1 !important;
}

.honest-footer-inner,
.honest-footer .copyright {
    position: relative;
    z-index: 5 !important;
}

/* Copyright must remain absolutely anchored on desktop. */
.honest-footer .copyright {
    position: absolute !important;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1240px) and (min-width: 851px) {
    .honest-footer {
        min-height: 150px !important;
    }

    .honest-footer-inner {
        padding:
            31px
            48px
            29px !important;

        grid-template-columns:
            minmax(220px, 1fr)
            auto
            minmax(250px, 1fr) !important;

        column-gap: 18px !important;
    }

    .honest-footer-brand img {
        width: clamp(165px, 17vw, 220px) !important;
    }

    .honest-footer-nav {
        gap: 12px !important;
    }

    .honest-footer-nav a {
        font-size: 8px !important;
    }

    .honest-footer-payments img {
        height: 18px !important;
    }

    .honest-footer .copyright {
        left: 52px !important;
        bottom: 17px !important;
        max-width: 40vw !important;
        font-size: 5.5px !important;
    }
}

/* ============================================================
   MOBILE:
   stop forcing the wide desktop footer geometry.
   ============================================================ */
@media (max-width: 850px) {
    .honest-footer {
        min-height: 0 !important;

        display: block !important;

        padding:
            34px
            18px
            30px !important;
    }

    .honest-footer-inner {
        min-height: 0 !important;

        padding: 0 !important;

        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }

    .honest-footer-brand,
    .honest-footer-payments {
        justify-self: center !important;
        justify-items: center !important;
    }

    .honest-footer-brand img {
        width: min(54vw, 230px) !important;
        max-height: 70px !important;
    }

    .honest-footer-brand span {
        margin-left: 0 !important;
    }

    .honest-footer-nav {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    .honest-footer-payments .we-accept {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .honest-footer .copyright {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        margin-top: 18px !important;

        text-align: center !important;
        white-space: normal !important;
    }
}

/* ============================================================
   v11.8 VIEWPORT LOCK
   Break the storefront out of any Tebex parent max-width.
   ============================================================ */

/*
   IMPORTANT:
   100% can still mean "100% of a constrained Tebex parent".
   100vw always means the actual browser viewport.
*/
html,
body,
.site {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
}

body {
    overflow-x: clip !important;
}

.site {
    overflow-x: clip !important;
}

/* ------------------------------------------------------------
   MAIN STOREFRONT:
   center directly against viewport, not theme parent.
   ------------------------------------------------------------ */
.honest-store-shell {
    width: calc(100vw - (var(--hr-page-gutter) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-top: max(14px, .85vw) !important;
    margin-right: 0 !important;
    margin-bottom: max(28px, 2vw) !important;
    margin-left: 0 !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    grid-template-columns:
        var(--hr-left-rail-width)
        minmax(0, 1fr)
        var(--hr-right-rail-width) !important;

    gap: var(--hr-layout-gap) !important;
}

/* Prevent any theme wrapper from shrinking our block contents. */
.honest-store-shell > *,
.honest-store-main,
.honest-category-rail,
.honest-widget-sidebar {
    min-width: 0 !important;
    max-width: none;
}

/* Main center column must consume all remaining grid space. */
.honest-store-main {
    width: 100% !important;
}

/* ------------------------------------------------------------
   Header/footer also explicitly use viewport width.
   ------------------------------------------------------------ */
.honest-header,
.honest-footer {
    width: 100vw !important;
    max-width: 100vw !important;
}

.honest-header-inner {
    width: 100vw !important;
    max-width: 100vw !important;
}

.honest-footer-inner {
    width: 100% !important;
    max-width: none !important;
}

/* ------------------------------------------------------------
   At large effective widths (browser zoom-out), don't switch
   to a tiny centered desktop canvas. Keep scaling fluidly.
   ------------------------------------------------------------ */
@media (min-width: 1800px) {
    :root {
        --hr-page-gutter: 1.1vw;
        --hr-layout-gap: .72vw;

        --hr-left-rail-width: 13.5vw;
        --hr-right-rail-width: 16vw;
    }

    .honest-store-shell {
        grid-template-columns:
            13.5vw
            minmax(0, 1fr)
            16vw !important;
    }

    .honest-store-hero {
        min-height: 21vw !important;
    }

    .honest-category-rail {
        font-size: .66vw;
    }

    .honest-rail-server-title {
        min-height: 3.2vw !important;
    }

    .honest-rail-subcats a {
        min-height: 2.45vw !important;
        font-size: .66vw !important;
    }

    .honest-cart-preview,
    .honest-security-widget {
        font-size: .58vw;
    }
}

/* ------------------------------------------------------------
   Tablet remains structural.
   ------------------------------------------------------------ */
@media (max-width: 1240px) and (min-width: 851px) {
    .honest-store-shell {
        width: calc(100vw - 24px) !important;

        grid-template-columns:
            max(220px, 20vw)
            minmax(0, 1fr) !important;
    }
}

/* ------------------------------------------------------------
   Mobile remains a single viewport-width column.
   ------------------------------------------------------------ */
@media (max-width: 850px) {
    html,
    body,
    .site {
        width: 100% !important;
        max-width: 100% !important;
    }

    .honest-store-shell {
        width: calc(100vw - 16px) !important;

        left: 50% !important;
        transform: translateX(-50%) !important;

        grid-template-columns: 1fr !important;
    }

    .honest-header,
    .honest-footer,
    .honest-header-inner {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   v11.9 CATEGORY RAIL CLEANUP
   - PVE/PVP server headings are labels, not framed buttons
   - subcategory buttons keep button-dark-frame.png
   ============================================================ */

/* Remove the graphical button frame from the two server headings. */
.honest-rail-server-title {
    min-height: max(52px, 2.95vw) !important;

    padding:
        max(7px, .42vw)
        max(8px, .50vw) !important;

    gap: max(6px, .34vw) !important;

    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;

    background-image: none !important;
    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;
    transform: none !important;
}

/* PVE/PVP badge: compact, no large dark outer frame. */
.honest-rail-icon {
    min-width: max(40px, 2.20vw) !important;
    width: max(40px, 2.20vw) !important;
    height: max(30px, 1.70vw) !important;

    padding: 0 max(5px, .28vw) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(12,16,10,.82) !important;

    border: 1px solid var(--hr-green-hi) !important;
    box-shadow:
        inset 0 0 8px rgba(143,212,0,.08),
        0 0 5px rgba(143,212,0,.08) !important;
}

.honest-rail-server-pvp .honest-rail-icon {
    border-color: var(--hr-orange-hi) !important;
    box-shadow:
        inset 0 0 8px rgba(233,95,17,.08),
        0 0 5px rgba(233,95,17,.08) !important;
}

/* Move the server title text left and tighten the two-line block. */
.honest-rail-server-title > span:last-child {
    margin-left: 0 !important;
    padding-left: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;
}

.honest-rail-server-title strong {
    font-size: max(14px, .76vw) !important;
    line-height: 1 !important;

    letter-spacing: .08px !important;
}

.honest-rail-server-title small {
    margin-top: 3px !important;

    font-size: max(8px, .46vw) !important;
    line-height: 1 !important;
}

/* Do not make the server heading look like a button on hover. */
.honest-rail-server-pve .honest-rail-server-title:hover,
.honest-rail-server-pve .honest-rail-server-title.active {
    background: transparent !important;
    filter: none !important;
    transform: none !important;

    color: #edf2e8 !important;
    text-shadow: none !important;
}

.honest-rail-server-pvp .honest-rail-server-title:hover,
.honest-rail-server-pvp .honest-rail-server-title.active {
    background: transparent !important;
    filter: none !important;
    transform: none !important;

    color: #edf2e8 !important;
    text-shadow: none !important;
}

/* Subcategory rows remain the actual framed buttons. */
.honest-rail-subcats {
    margin-top: 1px !important;
    gap: max(4px, .24vw) !important;
}

.honest-rail-subcats a {
    min-height: max(44px, 2.45vw) !important;

    padding-left: max(13px, .72vw) !important;
    padding-right: max(13px, .72vw) !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(13,16,13,.96), rgba(5,7,5,.96)) !important;

    background-position: center, center !important;
    background-size:
        100% 100%,
        calc(100% - 16px) calc(100% - 10px) !important;
    background-repeat: no-repeat, no-repeat !important;

    font-size: max(12px, .66vw) !important;
}

/* Keep the colored server rail as the main PVE/PVP visual identifier. */
.honest-rail-server-pve {
    border-left-color: var(--hr-green-hi) !important;
}

.honest-rail-server-pvp {
    border-left-color: var(--hr-orange-hi) !important;
}

/* ============================================================
   v11.10 PRODUCT CARD CENTERING
   Applies to Premium / VIP / Items and all future package cards.
   ============================================================ */

/* Force the whole Tebex product card into a clean vertical layout. */
.honest-product-card,
.store-product.honest-product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    text-align: center !important;
}

/* Remove any old Tebex float / half-width media behavior. */
.honest-product-card .honest-product-media,
.honest-product-card > .image-link,
.store-product.honest-product-card > .image-link {
    width: calc(100% - 16px) !important;
    max-width: none !important;

    height: max(210px, 12.5vw) !important;

    margin:
        8px
        8px
        0 !important;

    padding: 0 !important;

    float: none !important;
    flex: 0 0 auto !important;

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

    overflow: hidden !important;

    box-sizing: border-box !important;
}

/* Center the actual package artwork inside the media bay. */
.honest-product-card .honest-product-media .image,
.honest-product-card > .image-link > img.image,
.store-product.honest-product-card > .image-link > img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 auto !important;
    padding: max(12px, .75vw) !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    float: none !important;
}

/* Body always sits below the image and spans the full card. */
.honest-product-body {
    width: 100% !important;

    margin: 0 !important;
    padding:
        max(12px, .72vw)
        max(14px, .82vw)
        max(15px, .9vw) !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
}

/* Product title centered for Premium / VIP / Items. */
.honest-product-card .product-title {
    width: 100% !important;
    min-height: max(40px, 2.25vw) !important;

    margin:
        0
        0
        max(8px, .5vw) !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    text-align: center !important;
}

.honest-product-card .product-title a {
    width: 100% !important;

    display: block !important;

    text-align: center !important;

    font-size: max(14px, .78vw) !important;
    line-height: 1.15 !important;
}

/* Countdown stays centered under the title. */
.honest-product-card .countdown {
    display: block !important;

    margin: 2px auto 0 !important;

    text-align: center !important;
}

/* Center all price/action content. */
.honest-product-action-zone {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: max(7px, .42vw) !important;

    text-align: center !important;
}

/* Catch common Tebex price/action wrappers used inside package-actions.twig. */
.honest-product-action-zone .price,
.honest-product-action-zone .package-price,
.honest-product-action-zone .text-muted,
.honest-product-action-zone p,
.honest-product-action-zone span {
    text-align: center !important;
}

/* Keep CTA framed and centered, but don't let it touch the product frame. */
.honest-product-card .honest-product-action-zone .btn,
.honest-product-card .honest-product-action-zone .btn-primary,
.honest-product-card .honest-product-action-zone .btn-success,
.honest-product-card .honest-product-action-zone .btn-secondary,
.honest-product-card .honest-product-action-zone a.button,
.honest-product-card .honest-product-action-zone button {
    width: min(100%, 92%) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* Placeholder is centered exactly like a real image. */
.honest-product-placeholder {
    width: 100% !important;
    height: 100% !important;

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

    text-align: center !important;
}

/* Tablet / mobile: don't create unnecessarily tall image bays. */
@media (max-width: 1240px) {
    .honest-product-card .honest-product-media,
    .honest-product-card > .image-link,
    .store-product.honest-product-card > .image-link {
        height: clamp(190px, 24vw, 250px) !important;
    }
}

@media (max-width: 850px) {
    .honest-product-card .honest-product-media,
    .honest-product-card > .image-link,
    .store-product.honest-product-card > .image-link {
        height: clamp(210px, 58vw, 310px) !important;
    }
}

/* ============================================================
   v11.11 PRODUCT PRICE EMPHASIS
   Premium / VIP / Items / future package cards
   ============================================================ */

/* Main package price: larger, brighter, clearly separated. */
.honest-product-card .honest-product-action-zone .price,
.honest-product-card .honest-product-action-zone .text-price,
.honest-product-card .honest-product-action-zone .package-price {
    display: block !important;

    width: 100% !important;

    margin:
        max(5px, .30vw)
        0
        max(10px, .62vw) !important;

    padding: 0 !important;

    color: #b9ff00 !important;

    font-size: clamp(22px, 1.45vw, 30px) !important;
    line-height: 1 !important;

    font-weight: 950 !important;
    letter-spacing: .2px !important;

    text-align: center !important;

    text-shadow:
        0 0 4px rgba(185,255,0,.85),
        0 0 10px rgba(143,212,0,.42),
        0 1px 0 #000 !important;
}

/*
   Some Tebex package-actions templates place the price in a
   generic strong/bold element rather than .price.
*/
.honest-product-card .honest-product-action-zone > strong,
.honest-product-card .honest-product-action-zone > b {
    display: block !important;

    width: 100% !important;

    margin:
        max(5px, .30vw)
        0
        max(10px, .62vw) !important;

    color: #b9ff00 !important;

    font-size: clamp(22px, 1.45vw, 30px) !important;
    line-height: 1 !important;

    font-weight: 950 !important;

    text-align: center !important;

    text-shadow:
        0 0 4px rgba(185,255,0,.85),
        0 0 10px rgba(143,212,0,.42),
        0 1px 0 #000 !important;
}

/* Preserve ordinary muted/secondary text at normal size. */
.honest-product-card .honest-product-action-zone .text-muted,
.honest-product-card .honest-product-action-zone small {
    font-size: max(9px, .52vw) !important;
    text-shadow: none !important;
}

/* Give the action area enough vertical breathing room. */
.honest-product-action-zone {
    gap: max(9px, .52vw) !important;
}

/* Mobile price remains prominent without overflowing. */
@media (max-width: 850px) {
    .honest-product-card .honest-product-action-zone .price,
    .honest-product-card .honest-product-action-zone .text-price,
    .honest-product-card .honest-product-action-zone .package-price,
    .honest-product-card .honest-product-action-zone > strong,
    .honest-product-card .honest-product-action-zone > b {
        font-size: clamp(22px, 6vw, 28px) !important;
    }
}

/* ============================================================
   v11.12 PVE PARENT CATEGORY HUB
   HONEST PVE #1 -> Premium / VIP / Items cards
   ============================================================ */

.honest-category-hub-grid {
    width: 100%;

    margin-top: max(12px, .8vw);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: max(12px, .8vw);
}

.honest-category-hub-card {
    min-width: 0;

    padding: max(10px, .6vw);

    display: flex;
    flex-direction: column;

    color: #edf2e8 !important;
    text-decoration: none !important;

    border: 24px solid transparent !important;
    border-image-source: var(--hr-frame-product) !important;
    border-image-slice: 58 fill !important;
    border-image-width: 24px !important;
    border-image-repeat: stretch !important;

    background:
        linear-gradient(180deg, rgba(12,15,12,.98), rgba(5,7,5,.98)) !important;

    box-shadow:
        inset 0 0 30px rgba(0,0,0,.38),
        0 5px 18px rgba(0,0,0,.28) !important;

    transition:
        transform .16s ease,
        filter .16s ease !important;
}

.honest-category-hub-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
}

.honest-category-hub-media {
    width: 100%;
    aspect-ratio: 1.28 / 1;

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

    overflow: hidden;

    background:
        radial-gradient(circle at center, rgba(143,212,0,.06), transparent 58%),
        rgba(3,5,3,.90);

    border: 1px solid rgba(126,139,120,.22);
}

.honest-category-hub-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.honest-category-hub-copy {
    min-height: max(150px, 8vw);

    padding:
        max(13px, .8vw)
        max(8px, .48vw)
        max(7px, .4vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.honest-category-hub-copy strong {
    color: #f1f4ef;

    font-size: clamp(20px, 1.25vw, 28px);
    line-height: 1;

    font-weight: 950;
    text-transform: uppercase;

    letter-spacing: .25px;
}

.honest-category-hub-copy p {
    min-height: 42px;

    margin:
        max(8px, .5vw)
        0
        max(13px, .8vw);

    color: #9da69a;

    font-size: clamp(11px, .68vw, 14px);
    line-height: 1.35;
}

.honest-category-hub-copy span {
    width: 92%;
    min-height: max(48px, 2.7vw);

    margin-top: auto;
    padding: 8px 20px;

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

    color: var(--hr-green-hi);

    font-size: clamp(10px, .62vw, 13px);
    font-weight: 950;

    border: 0 !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(14,17,14,.96), rgba(5,7,5,.96)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 18px) calc(100% - 12px) !important;
    background-repeat: no-repeat, no-repeat !important;

    text-shadow: 0 0 8px rgba(143,212,0,.30);
}

.honest-category-hub-card:hover .honest-category-hub-copy span {
    color: #ddff8f;
    text-shadow: 0 0 10px rgba(143,212,0,.50);
}

.honest-category-hub-placeholder {
    font-size: 72px;
    font-weight: 950;
    color: var(--hr-green-hi);
}

@media (max-width: 1180px) {
    .honest-category-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .honest-category-hub-grid {
        grid-template-columns: 1fr;
    }

    .honest-category-hub-copy {
        min-height: 135px;
    }
}

/* ============================================================
   v11.13 PACKAGE ACTIONS FIX
   Fix empty / invisible utility buttons on package detail page.
   ============================================================ */

/* Tebex uses [hidden] dynamically in package-actions.twig.
   Our global button styling must NEVER make those controls visible. */
.honest-package-actions [hidden],
.honest-package-actions .product-actions [hidden],
.honest-package-actions .quantity-field[hidden],
.honest-package-actions a[hidden],
.honest-package-actions button[hidden] {
    display: none !important;
}

/* Main package actions container */
.honest-package-actions .actions.product-actions {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Price stays clear and prominent */
.honest-package-actions .product-actions > .price {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 78px !important;

    margin: 0 6px 0 0 !important;
    padding: 0 !important;

    color: #b9ff00 !important;

    font-size: clamp(22px, 1.35vw, 30px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;

    text-align: left !important;

    text-shadow:
        0 0 4px rgba(185,255,0,.75),
        0 0 9px rgba(143,212,0,.35) !important;
}

/* Only the real purchase CTAs get the large dark frame. */
.honest-package-actions .product-actions > a.add,
.honest-package-actions .product-actions > a.subscribe,
.honest-package-actions .product-actions > button.open-basket-cta {
    min-width: 170px !important;
    min-height: 54px !important;

    padding: 9px 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--hr-orange-hi) !important;

    font-size: clamp(12px, .72vw, 15px) !important;
    font-weight: 950 !important;

    line-height: 1 !important;
    text-align: center !important;

    text-indent: 0 !important;
    overflow: visible !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.97), rgba(5,7,5,.97)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 20px) calc(100% - 14px) !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* Gift is a real secondary action, not an anonymous square glyph. */
.honest-package-actions .product-actions > button.gift {
    min-width: 112px !important;
    min-height: 54px !important;

    padding: 9px 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #e7e9e4 !important;

    font-family: inherit !important;
    font-size: clamp(11px, .66vw, 14px) !important;
    font-weight: 900 !important;

    line-height: 1 !important;
    text-align: center !important;

    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.97), rgba(5,7,5,.97)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 20px) calc(100% - 14px) !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* Remove Tebex glyph-only pseudo styling from Gift. */
.honest-package-actions .product-actions > button.gift::before,
.honest-package-actions .product-actions > button.gift::after {
    display: none !important;
    content: none !important;
}

/* ------------------------------------------------------------
   Quantity controller appears only after package is in basket.
   Keep it as ONE compact control, not 3-4 giant framed buttons.
   ------------------------------------------------------------ */
.honest-package-actions .quantity-field.with-open-basket {
    flex: 1 1 300px !important;

    width: auto !important;
    max-width: 390px !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 4px !important;

    display: grid !important;
    grid-template-columns: 46px minmax(110px, 1fr) 72px 46px !important;
    align-items: center !important;
    gap: 5px !important;

    border: 1px solid rgba(92,105,88,.38) !important;

    background:
        linear-gradient(180deg, rgba(15,18,15,.98), rgba(6,8,6,.98)) !important;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.38) !important;
}

/* Small +/- controls: no giant frame */
.honest-package-actions .quantity-field .adjust {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #d7ddd2 !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-indent: 0 !important;

    border: 1px solid rgba(113,126,106,.40) !important;
    border-radius: 0 !important;

    background-image: none !important;
    background: #0c100c !important;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.45) !important;

    transform: none !important;
}

/* Kill glyph pseudo icons so literal + and - remain visible. */
.honest-package-actions .quantity-field .adjust::before,
.honest-package-actions .quantity-field .adjust::after {
    display: none !important;
    content: none !important;
}

.honest-package-actions .quantity-field .adjust:hover {
    color: var(--hr-green-hi) !important;
    border-color: rgba(143,212,0,.58) !important;
    filter: brightness(1.10) !important;
    transform: none !important;
}

/* "in Basket" button */
.honest-package-actions .quantity-field .open-basket {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--hr-green-hi) !important;

    font-size: clamp(10px, .60vw, 13px) !important;
    font-weight: 950 !important;

    text-indent: 0 !important;
    white-space: nowrap !important;

    border: 1px solid rgba(143,212,0,.26) !important;

    background-image: none !important;
    background: rgba(12,19,7,.92) !important;

    box-shadow: none !important;

    transform: none !important;
}

/* Quantity numeric input */
.honest-package-actions .quantity-field input.quantity {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 42px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    color: #fff !important;
    background: #080b08 !important;

    border: 1px solid rgba(113,126,106,.42) !important;
    border-radius: 0 !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    text-align: center !important;

    appearance: textfield;
    -moz-appearance: textfield;
}

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

/* Package buy panel spacing */
.honest-package-buy .honest-package-actions {
    width: 100% !important;
    min-height: 88px !important;

    padding: 18px 14px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}

/* Mobile */
@media (max-width: 720px) {
    .honest-package-actions .actions.product-actions {
        align-items: stretch !important;
    }

    .honest-package-actions .product-actions > .price {
        width: 100% !important;
        text-align: center !important;
    }

    .honest-package-actions .product-actions > a.add,
    .honest-package-actions .product-actions > a.subscribe,
    .honest-package-actions .product-actions > button.open-basket-cta,
    .honest-package-actions .product-actions > button.gift {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .honest-package-actions .quantity-field.with-open-basket {
        flex: 1 1 100% !important;

        width: 100% !important;
        max-width: none !important;

        grid-template-columns: 44px minmax(90px, 1fr) 64px 44px !important;
    }
}

/* ============================================================
   v11.14 CATEGORY HUB IMAGE CONTAIN FIX
   Show full Premium / VIP / Items artwork without cropping.
   ============================================================ */

.honest-category-hub-media {
    padding: max(10px, .65vw) !important;
    box-sizing: border-box !important;

    background:
        radial-gradient(circle at center, rgba(143,212,0,.035), transparent 62%),
        rgba(3,5,3,.94) !important;
}

/* IMPORTANT: do not crop category artwork */
.honest-category-hub-media img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;
}

/* Keep all three cards visually consistent even if source images differ */
.honest-category-hub-card {
    overflow: hidden !important;
}

.honest-category-hub-pve .honest-category-hub-media {
    aspect-ratio: 1.28 / 1 !important;
    min-height: 0 !important;
}

/* Slightly smaller inner artwork on very wide desktop so all frame edges show */
@media (min-width: 1400px) {
    .honest-category-hub-media {
        padding: max(12px, .8vw) !important;
    }
}

/* Mobile: keep the same full-image behavior */
@media (max-width: 720px) {
    .honest-category-hub-media {
        padding: 10px !important;
    }
}

/* ============================================================
   v11.16 CATEGORY IMAGE SIZE + FULL FRAME FIX
   Premium / VIP / Items
   ============================================================ */

/*
   All three hub images now use full standalone assets.
   Keep contain so no artwork/frame edge is ever cropped.
   Reduce inner padding slightly so artwork appears larger.
*/
.honest-category-hub-media {
    padding: max(6px, .38vw) !important;
}

.honest-category-hub-media img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
}

/* On large desktop keep only a small breathing gap around full frame. */
@media (min-width: 1400px) {
    .honest-category-hub-media {
        padding: max(7px, .45vw) !important;
    }
}

@media (max-width: 720px) {
    .honest-category-hub-media {
        padding: 6px !important;
    }
}

/* ============================================================
   v11.17 PACKAGE MODAL / CLOSE BUTTON FIX
   ============================================================ */

/* ------------------------------------------------------------
   PACKAGE POPUP VISIBILITY
   Keep the whole package panel inside the current viewport.
   ------------------------------------------------------------ */
[data-popup].honest-package-full,
.honest-package-full[data-popup] {
    width: min(1080px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;

    max-height: calc(100vh - 28px) !important;

    margin:
        14px
        auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    box-sizing: border-box !important;

    position: relative !important;
}

/* Make sure the lower package description is reachable by scrolling. */
[data-popup].honest-package-full .honest-package-description,
.honest-package-full[data-popup] .honest-package-description {
    padding-bottom: 26px !important;
}

/* Keep the package title clear of the close control. */
[data-popup].honest-package-full .honest-package-header,
.honest-package-full[data-popup] .honest-package-header {
    padding-right: 132px !important;
}

/* ------------------------------------------------------------
   CLOSE BUTTON
   Tebex themes/runtime may use different close class names.
   All known variants get the same visible HONEST RUST control.
   ------------------------------------------------------------ */
[data-popup] > .close,
[data-popup] .close,
[data-popup] > .modal-close,
[data-popup] .modal-close,
[data-popup] > .popup-close,
[data-popup] .popup-close,
[data-popup] > .close-modal,
[data-popup] .close-modal,
.modal .close,
.modal-content > .close,
.modal-content .modal-close,
#popup-modal .close,
#popup-modal .modal-close,
button[data-dismiss="modal"],
button[aria-label="Close"] {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    z-index: 100 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #eef2e8 !important;

    font-family: inherit !important;
    font-size: 0 !important;
    line-height: 1 !important;
    font-weight: 950 !important;

    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.98), rgba(5,7,5,.98)) !important;
    background-position: center, center !important;
    background-size: 100% 100%, calc(100% - 16px) calc(100% - 10px) !important;
    background-repeat: no-repeat, no-repeat !important;

    background-color: transparent !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.38) !important;

    overflow: visible !important;
    transform: none !important;
    filter: none !important;

    cursor: pointer !important;
}

/* Always supply readable content even when Tebex glyph text is hidden/empty. */
[data-popup] > .close::before,
[data-popup] .close::before,
[data-popup] > .modal-close::before,
[data-popup] .modal-close::before,
[data-popup] > .popup-close::before,
[data-popup] .popup-close::before,
[data-popup] > .close-modal::before,
[data-popup] .close-modal::before,
.modal .close::before,
.modal-content > .close::before,
.modal-content .modal-close::before,
#popup-modal .close::before,
#popup-modal .modal-close::before,
button[data-dismiss="modal"]::before,
button[aria-label="Close"]::before {
    content: "×  CLOSE" !important;

    display: inline-block !important;

    color: #eef2e8 !important;

    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    letter-spacing: .6px !important;
    text-indent: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Kill invisible icon/glyph overlays that can sit above the label. */
[data-popup] .close::after,
[data-popup] .modal-close::after,
[data-popup] .popup-close::after,
[data-popup] .close-modal::after,
.modal .close::after,
.modal-content .modal-close::after,
#popup-modal .close::after,
#popup-modal .modal-close::after,
button[data-dismiss="modal"]::after,
button[aria-label="Close"]::after {
    display: none !important;
    content: none !important;
}

[data-popup] .close:hover,
[data-popup] .modal-close:hover,
[data-popup] .popup-close:hover,
[data-popup] .close-modal:hover,
.modal .close:hover,
.modal-content .modal-close:hover,
#popup-modal .close:hover,
#popup-modal .modal-close:hover,
button[data-dismiss="modal"]:hover,
button[aria-label="Close"]:hover {
    color: #fff !important;

    filter: brightness(1.18) !important;
    transform: none !important;

    text-shadow: 0 0 8px rgba(143,212,0,.35) !important;
}

/* ------------------------------------------------------------
   POPUP CONTENT LAYOUT
   Prevent image / buy panel from making popup wider than viewport.
   ------------------------------------------------------------ */
[data-popup].honest-package-full .honest-package-layout,
.honest-package-full[data-popup] .honest-package-layout {
    min-width: 0 !important;
}

[data-popup].honest-package-full .honest-package-visual,
[data-popup].honest-package-full .honest-package-buy,
.honest-package-full[data-popup] .honest-package-visual,
.honest-package-full[data-popup] .honest-package-buy {
    min-width: 0 !important;
}

[data-popup].honest-package-full .honest-package-image,
.honest-package-full[data-popup] .honest-package-image {
    max-width: 100% !important;
    height: auto !important;
}

/* ------------------------------------------------------------
   SHORT VIEWPORTS (small laptop / zoom / browser bars)
   ------------------------------------------------------------ */
@media (max-height: 760px) {
    [data-popup].honest-package-full,
    .honest-package-full[data-popup] {
        max-height: calc(100vh - 16px) !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    [data-popup].honest-package-full .honest-package-header,
    .honest-package-full[data-popup] .honest-package-header {
        padding-right: 118px !important;
    }

    [data-popup] > .close,
    [data-popup] .close,
    [data-popup] .modal-close,
    [data-popup] .popup-close,
    [data-popup] .close-modal,
    .modal .close,
    .modal-content .modal-close,
    #popup-modal .close,
    #popup-modal .modal-close,
    button[data-dismiss="modal"],
    button[aria-label="Close"] {
        top: 9px !important;
        right: 9px !important;

        width: 106px !important;
        min-width: 106px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */
@media (max-width: 720px) {
    [data-popup].honest-package-full,
    .honest-package-full[data-popup] {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;

        max-height: calc(100vh - 12px) !important;

        margin: 6px auto !important;
    }

    [data-popup].honest-package-full .honest-package-header,
    .honest-package-full[data-popup] .honest-package-header {
        padding-right: 100px !important;
    }

    [data-popup] > .close,
    [data-popup] .close,
    [data-popup] .modal-close,
    [data-popup] .popup-close,
    [data-popup] .close-modal,
    .modal .close,
    .modal-content .modal-close,
    #popup-modal .close,
    #popup-modal .modal-close,
    button[data-dismiss="modal"],
    button[aria-label="Close"] {
        width: 90px !important;
        min-width: 90px !important;

        right: 6px !important;
        top: 6px !important;
    }

    [data-popup] > .close::before,
    [data-popup] .close::before,
    [data-popup] .modal-close::before,
    [data-popup] .popup-close::before,
    [data-popup] .close-modal::before,
    .modal .close::before,
    .modal-content .modal-close::before,
    #popup-modal .close::before,
    #popup-modal .modal-close::before,
    button[data-dismiss="modal"]::before,
    button[aria-label="Close"]::before {
        content: "× CLOSE" !important;
        font-size: 10px !important;
    }
}

/* ============================================================
   v11.18 REAL TEBEX PRODUCT POPUP FIX
   Targets the actual DOM created by Tebex main.js:
   .popup.store-product-popup
     > .popup-scroll-cont
       > .popup-content.store-product-popup-content
         > .popup-close
         > package content...
   ============================================================ */

/* Full-screen popup overlay */
.popup.store-product-popup {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 99999 !important;

    background: rgba(0, 0, 0, .78) !important;

    overflow: hidden !important;
}

/* This is the ACTUAL viewport scroller created by Tebex */
.store-product-popup > .popup-scroll-cont {
    width: 100% !important;
    height: 100% !important;

    padding: 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
}

/* Actual popup content container */
.store-product-popup .popup-content.store-product-popup-content {
    width: min(1080px, calc(100vw - 28px)) !important;
    max-width: 1080px !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding:
        18px
        24px
        28px !important;

    box-sizing: border-box !important;

    position: relative !important;

    overflow: visible !important;

    color: #edf2e8 !important;

    border: 24px solid transparent !important;
    border-image-source: var(--hr-frame-section) !important;
    border-image-slice: 58 fill !important;
    border-image-width: 24px !important;
    border-image-repeat: stretch !important;

    border-radius: 0 !important;

    background:
        linear-gradient(180deg, rgba(12,15,12,.99), rgba(5,7,5,.99)) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.62),
        inset 0 0 28px rgba(0,0,0,.38) !important;
}

/* ============================================================
   REAL CLOSE BUTTON
   Tebex creates <button class="popup-close">Close</button>
   directly inside .popup-content.
   ============================================================ */
.store-product-popup .popup-close {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin:
        0
        0
        8px
        auto !important;

    padding: 0 14px !important;

    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;

    z-index: 120 !important;

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

    float: none !important;

    color: #eef2e8 !important;

    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    letter-spacing: .55px !important;

    text-align: center !important;
    text-indent: 0 !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(18,21,18,.98), rgba(5,7,5,.98)) !important;
    background-position: center, center !important;
    background-size:
        100% 100%,
        calc(100% - 16px) calc(100% - 10px) !important;
    background-repeat: no-repeat, no-repeat !important;

    background-color: transparent !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.42) !important;

    overflow: visible !important;

    transform: none !important;
    filter: none !important;

    cursor: pointer !important;
}

/* Keep Tebex's real "Close" text, add only X before it */
.store-product-popup .popup-close::before {
    content: "×" !important;

    display: inline-block !important;

    margin-right: 7px !important;

    color: var(--hr-orange-hi) !important;

    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.store-product-popup .popup-close::after {
    display: none !important;
    content: none !important;
}

.store-product-popup .popup-close:hover {
    color: #fff !important;

    filter: brightness(1.16) !important;
    transform: none !important;

    text-shadow: 0 0 7px rgba(143,212,0,.35) !important;
}

/* ============================================================
   PACKAGE CONTENT INSIDE REAL POPUP
   The original .honest-package-full wrapper is stripped by Tebex,
   so target its CHILDREN inside .store-product-popup-content.
   ============================================================ */

.store-product-popup-content .honest-package-header {
    width: 100% !important;

    margin: 0 0 16px !important;
    padding:
        0
        0
        14px !important;

    box-sizing: border-box !important;
}

.store-product-popup-content .honest-package-header h1,
.store-product-popup-content .honest-package-header .product-title {
    margin-right: 0 !important;
}

.store-product-popup-content .honest-package-layout {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .85fr) !important;

    gap: 18px !important;

    align-items: start !important;
}

.store-product-popup-content .honest-package-visual,
.store-product-popup-content .honest-package-buy {
    min-width: 0 !important;
}

.store-product-popup-content .honest-package-image {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: min(54vh, 520px) !important;

    margin: 0 auto !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;
}

.store-product-popup-content .honest-package-buy {
    display: flex !important;
    flex-direction: column !important;

    gap: 12px !important;
}

.store-product-popup-content .honest-package-description {
    width: 100% !important;

    margin-top: 18px !important;
    padding:
        18px
        0
        8px !important;

    box-sizing: border-box !important;

    overflow-wrap: anywhere !important;
}

/* Ensure long descriptions don't create horizontal overflow */
.store-product-popup-content .honest-package-description,
.store-product-popup-content .honest-package-description * {
    max-width: 100% !important;
}

/* ============================================================
   SHORT VIEWPORT
   Popup-scroll-cont handles vertical scrolling.
   ============================================================ */
@media (max-height: 760px) {
    .store-product-popup > .popup-scroll-cont {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .store-product-popup .popup-content.store-product-popup-content {
        padding:
            12px
            18px
            22px !important;
    }

    .store-product-popup .popup-close {
        width: 106px !important;
        min-width: 106px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .store-product-popup-content .honest-package-image {
        max-height: 46vh !important;
    }
}

/* ============================================================
   TABLET / MOBILE
   ============================================================ */
@media (max-width: 820px) {
    .store-product-popup > .popup-scroll-cont {
        padding: 6px !important;
    }

    .store-product-popup .popup-content.store-product-popup-content {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;

        padding:
            10px
            12px
            20px !important;

        border-width: 16px !important;
        border-image-width: 16px !important;
    }

    .store-product-popup .popup-close {
        width: 94px !important;
        min-width: 94px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        font-size: 10px !important;
    }

    .store-product-popup .popup-close::before {
        font-size: 14px !important;
        margin-right: 5px !important;
    }

    .store-product-popup-content .honest-package-layout {
        grid-template-columns: 1fr !important;
    }

    .store-product-popup-content .honest-package-image {
        max-height: 54vh !important;
    }
}

/* ============================================================
   v11.19 SHOP BY SERVER HUB CARDS
   Two visual cards: PVE / PVP
   ============================================================ */

.honest-server-hub-section {
    overflow: visible !important;
}

.honest-server-hub-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: max(14px, .9vw);
}

.honest-server-hub-card {
    min-width: 0;

    padding: max(10px, .62vw);

    display: flex;
    flex-direction: column;

    color: #edf2e8 !important;
    text-decoration: none !important;

    border: 26px solid transparent !important;
    border-image-source: var(--hr-frame-product) !important;
    border-image-slice: 58 fill !important;
    border-image-width: 26px !important;
    border-image-repeat: stretch !important;

    background:
        linear-gradient(180deg, rgba(11,14,11,.98), rgba(5,7,5,.98)) !important;

    box-shadow:
        inset 0 0 28px rgba(0,0,0,.36),
        0 6px 18px rgba(0,0,0,.30) !important;

    transition:
        transform .16s ease,
        filter .16s ease !important;
}

.honest-server-hub-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
}

.honest-server-hub-pve {
    box-shadow:
        inset 0 0 24px rgba(143,212,0,.045),
        0 0 14px rgba(143,212,0,.07),
        0 6px 18px rgba(0,0,0,.30) !important;
}

.honest-server-hub-pvp {
    box-shadow:
        inset 0 0 24px rgba(233,95,17,.045),
        0 0 14px rgba(233,95,17,.07),
        0 6px 18px rgba(0,0,0,.30) !important;
}

.honest-server-hub-media {
    width: 100%;
    aspect-ratio: 1.45 / 1;

    padding: max(7px, .45vw);

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

    box-sizing: border-box;

    background:
        radial-gradient(circle at center, rgba(143,212,0,.035), transparent 62%),
        rgba(3,5,3,.94);

    border: 1px solid rgba(126,139,120,.20);
}

.honest-server-hub-pvp .honest-server-hub-media {
    background:
        radial-gradient(circle at center, rgba(233,95,17,.04), transparent 62%),
        rgba(3,5,3,.94);
}

.honest-server-hub-media img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;
}

.honest-server-hub-copy {
    min-height: max(155px, 8.6vw);

    padding:
        max(13px, .8vw)
        max(10px, .6vw)
        max(8px, .48vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.honest-server-hub-badge {
    min-width: 50px;
    min-height: 28px;

    margin-bottom: 8px;
    padding: 4px 10px;

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

    color: var(--hr-green-hi);

    border: 1px solid var(--hr-green-hi);

    font-size: clamp(9px, .54vw, 12px);
    font-weight: 950;

    background: rgba(13,19,8,.82);
}

.honest-server-hub-pvp .honest-server-hub-badge {
    color: var(--hr-orange-hi);
    border-color: var(--hr-orange-hi);
    background: rgba(30,11,5,.82);
}

.honest-server-hub-copy > strong {
    color: #f2f5ef;

    font-size: clamp(21px, 1.28vw, 30px);
    line-height: 1;

    font-weight: 950;
    letter-spacing: .15px;
}

.honest-server-hub-copy > p {
    min-height: 42px;

    margin:
        max(8px, .48vw)
        0
        max(13px, .78vw);

    color: #9ca59a;

    font-size: clamp(11px, .68vw, 14px);
    line-height: 1.35;
}

.honest-server-hub-cta {
    width: 92%;
    min-height: max(50px, 2.8vw);

    margin-top: auto;
    padding: 8px 22px;

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

    color: var(--hr-green-hi);

    font-size: clamp(10px, .64vw, 14px);
    font-weight: 950;

    background-image:
        var(--hr-button-dark),
        linear-gradient(180deg, rgba(14,17,14,.96), rgba(5,7,5,.96)) !important;
    background-position: center, center !important;
    background-size:
        100% 100%,
        calc(100% - 18px) calc(100% - 12px) !important;
    background-repeat: no-repeat, no-repeat !important;

    text-shadow: 0 0 8px rgba(143,212,0,.30);
}

.honest-server-hub-pvp .honest-server-hub-cta {
    color: var(--hr-orange-hi);
    text-shadow: 0 0 8px rgba(233,95,17,.30);
}

.honest-server-hub-card:hover .honest-server-hub-cta {
    filter: brightness(1.12);
}

@media (max-width: 900px) {
    .honest-server-hub-grid {
        grid-template-columns: 1fr;
    }

    .honest-server-hub-copy {
        min-height: 145px;
    }
}

/* ============================================================
   v11.20 PVP CATEGORY HUB
   Premium / VIP / Gems
   ============================================================ */

.honest-category-hub-pvp .honest-category-hub-card {
    box-shadow:
        inset 0 0 26px rgba(233,95,17,.04),
        0 0 12px rgba(233,95,17,.06),
        0 5px 18px rgba(0,0,0,.28) !important;
}

.honest-category-hub-pvp .honest-category-hub-media {
    background:
        radial-gradient(circle at center, rgba(233,95,17,.045), transparent 62%),
        rgba(3,5,3,.94) !important;
}

.honest-category-hub-pvp .honest-category-hub-copy span {
    color: var(--hr-orange-hi) !important;

    text-shadow:
        0 0 8px rgba(233,95,17,.34) !important;
}

.honest-category-hub-pvp .honest-category-hub-card:hover .honest-category-hub-copy span {
    color: #ffb078 !important;

    text-shadow:
        0 0 10px rgba(233,95,17,.52) !important;
}

/* Gems card gets a slightly stronger orange glow */
.honest-category-hub-pvp .honest-category-hub-gems {
    box-shadow:
        inset 0 0 28px rgba(233,95,17,.055),
        0 0 16px rgba(233,95,17,.09),
        0 5px 18px rgba(0,0,0,.30) !important;
}

/* ============================================================
   v11.21 SERVER HUB IMAGE SIZE FIX
   Smaller PVE/PVP artwork in SHOP BY SERVER cards.
   ============================================================ */

/*
   Keep the media area balanced, but do not let the PVE/PVP artwork
   fill the entire card.
*/
.honest-server-hub-media {
    min-height: clamp(190px, 12vw, 250px) !important;

    padding:
        clamp(10px, .65vw, 16px)
        clamp(12px, .8vw, 20px) !important;

    box-sizing: border-box !important;
}

/* PVE + PVP server artwork */
.honest-server-hub-media img {
    width: clamp(165px, 11.5vw, 225px) !important;
    height: auto !important;

    max-width: 68% !important;
    max-height: clamp(145px, 9.5vw, 190px) !important;

    margin: 0 auto !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
}

/* Keep both cards visually equal */
.honest-server-hub-pve .honest-server-hub-media img,
.honest-server-hub-pvp .honest-server-hub-media img {
    width: clamp(165px, 11.5vw, 225px) !important;
    max-width: 68% !important;
}

/* Tablet */
@media (max-width: 1180px) {
    .honest-server-hub-media {
        min-height: 200px !important;
    }

    .honest-server-hub-media img {
        width: clamp(160px, 18vw, 210px) !important;
        max-width: 64% !important;
        max-height: 175px !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .honest-server-hub-media {
        min-height: 180px !important;
        padding: 10px !important;
    }

    .honest-server-hub-media img {
        width: min(190px, 62vw) !important;
        max-width: 72% !important;
        max-height: 165px !important;
    }
}

/* ============================================================
   v11.22 COMPACT SHOP BY SERVER
   Shrink the entire PVE/PVP server hub, not only the images.
   ============================================================ */

.honest-server-hub-section {
    padding: max(10px, .55vw) !important;
}

.honest-server-hub-section .honest-section-title {
    min-height: max(38px, 2.15vw) !important;

    padding:
        max(6px, .34vw)
        max(10px, .58vw) !important;
}

.honest-server-hub-section .honest-section-title h2 {
    font-size: clamp(13px, .72vw, 17px) !important;
}

.honest-server-hub-section .honest-section-title span {
    font-size: clamp(7px, .40vw, 9px) !important;
}

.honest-server-hub-grid {
    gap: max(10px, .58vw) !important;
}

/* Entire PVE/PVP cards become shorter and tighter */
.honest-server-hub-card {
    min-height: 0 !important;

    padding: max(7px, .40vw) !important;

    border-width: 18px !important;
    border-image-width: 18px !important;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.32),
        0 4px 12px rgba(0,0,0,.24) !important;
}

/* Smaller media bay */
.honest-server-hub-media {
    width: 100% !important;

    aspect-ratio: auto !important;
    min-height: clamp(145px, 8.6vw, 185px) !important;
    height: clamp(145px, 8.6vw, 185px) !important;

    padding: clamp(6px, .34vw, 10px) !important;
}

/* Smaller PVE / PVP artwork */
.honest-server-hub-media img {
    width: clamp(125px, 8.4vw, 165px) !important;
    max-width: 48% !important;

    height: auto !important;
    max-height: clamp(120px, 7.8vw, 155px) !important;

    object-fit: contain !important;
}

/* Compact text block */
.honest-server-hub-copy {
    min-height: 0 !important;

    padding:
        max(8px, .45vw)
        max(8px, .45vw)
        max(7px, .40vw) !important;
}

.honest-server-hub-badge {
    min-width: 42px !important;
    min-height: 23px !important;

    margin-bottom: 5px !important;
    padding: 2px 8px !important;

    font-size: clamp(8px, .43vw, 10px) !important;
}

.honest-server-hub-copy > strong {
    font-size: clamp(17px, .96vw, 22px) !important;
    line-height: 1 !important;
}

.honest-server-hub-copy > p {
    min-height: 0 !important;

    margin:
        max(5px, .28vw)
        0
        max(8px, .45vw) !important;

    font-size: clamp(9px, .52vw, 12px) !important;
    line-height: 1.25 !important;
}

/* Compact Open Store button */
.honest-server-hub-cta {
    width: 82% !important;

    min-height: clamp(38px, 2.15vw, 45px) !important;

    padding:
        5px
        16px !important;

    font-size: clamp(9px, .50vw, 11px) !important;

    background-size:
        100% 100%,
        calc(100% - 14px) calc(100% - 8px) !important;
}

/* Tablet */
@media (max-width: 1180px) {
    .honest-server-hub-media {
        height: 160px !important;
        min-height: 160px !important;
    }

    .honest-server-hub-media img {
        width: 145px !important;
        max-width: 52% !important;
        max-height: 138px !important;
    }

    .honest-server-hub-cta {
        width: 88% !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .honest-server-hub-card {
        border-width: 15px !important;
        border-image-width: 15px !important;
    }

    .honest-server-hub-media {
        height: 150px !important;
        min-height: 150px !important;
    }

    .honest-server-hub-media img {
        width: 135px !important;
        max-width: 56% !important;
        max-height: 130px !important;
    }

    .honest-server-hub-cta {
        width: 92% !important;
        min-height: 40px !important;
    }
}

/* ============================================================
   v11.28 SERVER CARDS RESTORED
   Valid HTML + live BattleMetrics banner + working OPEN STORE CTA.
   ============================================================ */

/* Force the two server cards to stay in the expected grid. */
.honest-server-hub-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: max(10px, .58vw) !important;
}

.honest-server-hub-card {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    box-sizing: border-box !important;

    cursor: default !important;
}

/* The whole card is no longer a link. */
.honest-server-hub-card:hover {
    transform: none !important;
}

/* Status area */
.honest-server-status-box {
    width: 88% !important;

    margin:
        max(4px, .25vw)
        auto
        max(9px, .50vw) !important;

    padding: 6px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(110,124,105,.28) !important;

    background:
        linear-gradient(180deg, rgba(12,15,12,.96), rgba(5,7,5,.96)) !important;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.38) !important;
}

.honest-server-status-pve {
    border-color: rgba(143,212,0,.28) !important;
}

.honest-server-status-pvp {
    border-color: rgba(233,95,17,.30) !important;
}

.honest-server-status-label {
    width: 100% !important;

    color: #7f887c !important;

    font-size: clamp(7px, .40vw, 9px) !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: .45px !important;

    text-align: center !important;
}

/* BattleMetrics 500x80 banner */
.honest-server-status-banner {
    width: min(100%, 500px) !important;
    max-width: 500px !important;

    height: auto !important;
    max-height: 80px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;

    object-fit: contain !important;

    border: 0 !important;
}

/* Hidden unless the BattleMetrics banner fails. */
.honest-server-status-fallback {
    width: 100% !important;
    min-height: 42px !important;

    padding: 7px 12px !important;

    display: none;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    color: #b9c0b5 !important;
    background: rgba(8,11,8,.94) !important;

    border: 1px solid rgba(105,117,100,.28) !important;

    font-size: clamp(8px, .46vw, 10px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;
}

.honest-server-status-pve .honest-server-status-fallback:hover {
    color: var(--hr-green-hi) !important;
    border-color: rgba(143,212,0,.44) !important;
}

.honest-server-status-pvp .honest-server-status-fallback:hover {
    color: var(--hr-orange-hi) !important;
    border-color: rgba(233,95,17,.46) !important;
}

/* OPEN STORE is the only category link inside the card. */
.honest-server-hub-cta {
    width: 82% !important;

    margin:
        0
        auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;
    cursor: pointer !important;
}

.honest-server-hub-cta:hover {
    filter: brightness(1.14) !important;
    transform: translateY(-1px) !important;
}

/* Do not let old v11.26/27 status rules interfere. */
.honest-bm-status,
.honest-bm-banner-link,
.honest-bm-banner,
.honest-server-live-badges,
.honest-server-live-row {
    display: none !important;
}

@media (max-width: 900px) {
    .honest-server-hub-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .honest-server-status-box {
        width: 92% !important;
    }

    .honest-server-hub-cta {
        width: 92% !important;
    }
}