/* Product & sub-item styles extracted from styles.css */

/* ===== PRODUCT ROW (4 columns, classic stripe on top) ===== */
.row-products .wrap{display:flex; flex-wrap:wrap; align-items:flex-start}
.row-products .wrap{margin-left:-16px}
.row-products .product{
    background:#14181e; border:1px solid #21262d; border-radius:0;
    padding:10px; margin:0 0 16px 16px;
    flex:0 0 220px; width:220px;
    height:104px; box-sizing:border-box;
    display:flex; flex-direction:column;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.row-products .product:hover{
    background:#1c2127;
    border-color:#2a3037;
}
.row-products .product.grad-accent{
    background:
        linear-gradient(90deg, rgba(232,159,42,0.30) 0%, rgba(232,159,42,0) 70%),
        #14181e;
}
.row-products .product.red-grad{
    background:
        linear-gradient(90deg, rgba(224,59,59,0.30) 0%, rgba(224,59,59,0) 70%),
        #14181e;
}
.row-products .product.purple-grad{
    background:
        linear-gradient(90deg, rgba(123,97,255,0.30) 0%, rgba(123,97,255,0) 70%),
        #14181e;
}
.row-products .product.purple-grad:hover{
    background:
        linear-gradient(90deg, rgba(123,97,255,0.40) 0%, rgba(123,97,255,0) 70%),
        #181c21;
    border-color:#2a3037;
}
.row-products .product.grad-accent:hover{
    background:
        linear-gradient(90deg, rgba(232,159,42,0.40) 0%, rgba(232,159,42,0) 70%),
        #181c21;
    border-color:#2a3037;
}
.row-products .product.red-grad:hover{
    background:
        linear-gradient(90deg, rgba(224,59,59,0.40) 0%, rgba(224,59,59,0) 70%),
        #181c21;
    border-color:#2a3037;
}
.row-products .product.teal-grad{
    background:
        linear-gradient(90deg, rgba(42,157,143,0.30) 0%, rgba(42,157,143,0) 70%),
        #14181e;
}
.row-products .product.teal-grad:hover{
    background:
        linear-gradient(90deg, rgba(42,157,143,0.40) 0%, rgba(42,157,143,0) 70%),
        #181c21;
    border-color:#2a3037;
}

.card-stripe.purple{ background:#7b61ff }
.card-stripe.red{ background:#e03b3b }
.card-stripe.teal{background:#2a9d8f}
.card-stripe{
    height:2px; background:#e89f2a; margin:-10px -10px 8px -10px; border-radius:0;
}
.card-title{
    font-weight:normal; margin:0 0 5px 0; line-height:1.28;
    font-size:17px;
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-height:2.6em;
    overflow:hidden; white-space:normal;
    overflow-wrap:break-word; word-wrap:break-word;
    text-shadow:0 2px 6px rgba(0,0,0,0.86);
    transition: color .14s ease, text-shadow .14s ease;
}
.row-products .card-row{
    display:flex; align-items:center; flex:0 0 56px; min-width:0;
}
.row-products .card-left{
    flex:0 0 70%; max-width:70%; height:100%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:left center;
    background-size:contain;
}
.row-products .card-left img{
    display:block; max-width:100%; max-height:100%; width:auto; height:auto;
}
.row-products .card-right{
    flex:0 0 30%; max-width:30%; text-align:center;
}
.row-products .card-right .btn{
    font-size:13px; padding:7px 11px;
}

/* Product cards: crisper base and hover (shadow refinements) */
.row-products .product{
    box-shadow:0 6px 12px rgba(0,0,0,0.28);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.row-products .product:hover{
    box-shadow:0 8px 14px rgba(0,0,0,0.36);
}

/* Button transitions inside product cards */
.row-products .product .card-right a.btn-primary{
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/* Variant button hover overrides */
.row-products .product.grad-accent .card-right a.btn-primary:hover{
    background:#c66d1f !important;
    border-color:#c66d1f !important;
    color:#111 !important;
}
.row-products .product.red-grad .card-right a.btn-primary.red:hover,
.row-products .product.red-grad .card-right a.btn-primary:hover{
    background:#b23333 !important;
    border-color:#b23333 !important;
    color:#fff !important;
}


/* Responsive: mobile single-column */
@media screen and (max-width:640px){
    .row-products .product{
        width:100%; flex:1 1 100%;
        margin:0 0 20px 0;
        padding-left:14px; padding-right:14px;
    }
    .row-products .wrap{margin-left:0}
    .row-products .product{margin-left:0}
}

/* Responsive: mid-width two-column layout */
@media screen and (max-width:1100px) and (min-width:641px){
    .row-products .wrap{margin-left:0}
    .row-products .product{
        flex:0 0 calc((100% - 16px)/2);
        width:calc((100% - 16px)/2);
        margin:0 16px 16px 0;
    }
    .row-products .product:nth-child(2n){margin-right:0}
}
/* Supplemental styles (kept separate to avoid editing styles.css) */

/* VIP tier color + gradient extraction (DB-driven images inline) */


/* ===== VIP ROW (one row at 1280px) ===== */
.row{margin-bottom:24px}


.row-vip .vip{
    /* keep same calc widths; only adjust min-height */
    min-height:90px;
}

.row-vip .vip .vip-thumb{
    /* ...existing code... */
    width:90px;
    height:90px;
    /* ...existing code... */
}


/* flip decoration: VIP = left accent bar, short/tasty tiles */
.row-vip .vip-wrap{
    display:flex; flex-wrap:wrap; /* keep wrap */
}
.row-vip .vip{
    background:#14181e; border:1px solid #21262d; margin:0 16px 16px 0; border-radius:4px;
    /* increase base height so larger thumbnail + text fit without overflow */
    min-height:90px;
    display:flex;
    align-items:flex-start; /* top-align so thumb doesn't vertically center and crowd text */
    padding:12px 12px 12px 14px;
    /* keep exact 3-up layout */
    width:calc((100% - 32px)/3);
    flex:0 0 calc((100% - 32px)/3);
    position: relative;    /* allow pseudo overlay to sit between bg and content */
    overflow: hidden;      /* clip the radial overlay to rounded corners */
}

/* remove right margin on every 3rd (end of row) */
.row-vip .vip:nth-child(3n){margin-right:0}

/* replace pseudo ::before square with an explicit .vip-thumb element */
.row-vip .vip .vip-thumb{
    /* slightly larger square placeholder for better image readability */
    display:block;
    width:90px;
    height:90px;
    margin-right:14px;
    border-radius:3px;
    flex:0 0 90px;
    align-self:flex-start; /* align to top of tile */
    box-sizing:border-box;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain; /* scale image fully inside the box without cropping */
}

/* ensure thumbnail + content render above the overlay */
.row-vip .vip > div,
.row-vip .vip .vip-thumb{
    position: relative;
    z-index: 2;
}

/* subtle radial inner shadow overlay (hidden by default) */
.row-vip .vip::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* sits above background but below content */
    border-radius: inherit;
    transition: opacity .18s ease;
    opacity: 0;
    /* darkened edges (inner vignette). tweak stops/alpha to taste */
    /* increased outer alpha from 0.36 -> 0.48 to make the edge-inner shadow a bit darker */
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.48) 100%);
    mix-blend-mode: multiply; /* subtle multiplication keeps colors rich but darker at edges */
}

/* reveal overlay on hover for all VIP tiles */
.row-vip .vip:hover::after{
    opacity: 1;
}

/* make the text column flexible so titles/copy wrap; prevents overflow when thumb grows */
.row-vip .vip > div{ flex:1 1 auto; min-width:0; }
.vip .head{ margin:0 0 6px 0 } /* small spacing tweak so head and copy fit nicely */

/* per-tier: use PNG blocks (one image file per tier). Keep background-color as fallback. */
.vip.l3 .vip-thumb{
    background-color:transparent;
    background-image: url("/img/orange.png"); /* moved to /img */
}
.vip.l2 .vip-thumb{
    background-color:transparent;
    background-image: url("/img/blue.webp"); /* moved to /img */
}
.vip.l1 .vip-thumb{
    background-color:transparent;
    background-image: url("/img/green.png"); /* moved to /img */
}
.vip.l4 .vip-thumb{
    background-color:transparent;
    background-image: url("/img/purple.png"); /* moved to /img */
}
.vip.l5 .vip-thumb{
    background-color:transparent;
    background-image: url("/img/red.png"); /* moved to /img */
}

/* tier-specific borders (reinforce accent) */
.vip.l3{border-color:#c96f1f; background:
        linear-gradient(90deg, rgba(232,159,42,0.32) 0%, rgba(232,159,42,0) 70%), #14181e;}
.vip.l2{border-color:#36b8aa; background:
        linear-gradient(90deg, rgba(42,157,143,0.30) 0%, rgba(42,157,143,0) 70%), #14181e;}
.vip.l1{border-color:#7dd653; background:
        linear-gradient(90deg, rgba(108,191,67,0.30) 0%, rgba(108,191,67,0) 70%), #14181e;}
.vip.l4{border-color:#8b79ff; background:
        linear-gradient(90deg, rgba(123,97,255,0.34) 0%, rgba(123,97,255,0) 72%), #14181e;}
.vip.l5{border-color:#b24141; background:
        linear-gradient(90deg, rgba(224,59,59,0.34) 0%, rgba(224,59,59,0) 72%), #14181e;}
/* smooth hover transition */
.row-vip .vip{transition:background .15s, border-color .15s}
/* hover: intensify gradient + brighten stripe + border (only change :before color via background-color) */
/* Juiced-up hover colors: nudged slightly darker for higher contrast with white copy */
/* L3 (orange) — slightly cleaner/brighter hover tone for better appeal */
.vip.l3:hover{
    background: #e89f2a;    /* sw-accent (cleaner/brighter orange) */
    border-color: #e89f2a;
}
.vip.l3:hover:before{ background-color: #e89f2a; }

/* L2 (teal) — probe a slightly lighter but still saturated teal (swatch-related).
   Color-only update: background, border-color and the :before accent.
   No box-shadow or ::after changes here — keep it simple. */
.vip.l2:hover{
    background: #33c3a9;    /* probe: lighter, saturated teal related to #2a9d8f */
    border-color: #33c3a9;
}
.vip.l2:hover:before{
    background-color: #33c3a9;
}

/* L1 (green) — slightly deeper for better contrast */
.vip.l1:hover{
    background:#5abf4a;    /* richer green for better contrast */
    border-color:#8ddf7d;
}
.vip.l1:hover:before{ background-color:#8ddf7d }

/* L4 (purple) — slightly deeper */
.vip.l4:hover{
    background:#543ed0;    /* darker purple for stronger contrast */
    border-color:#7a66ff;
}
.vip.l4:hover:before{ background-color:#8b79ff }

/* L5 (red, LIMITED) — darker / juicier hover + stronger inner vignette on hover so the red reads richer without washing */
.vip.l5:hover{
    background:#c63d3d;    /* darker, richer red for white copy legibility */
    border-color:#d94b4b;  /* slightly deeper accent border */
}
.vip.l5:hover:before{ background-color:#d94b4b }
.vip.l4:hover:before{ background-color:#7a66ff }
/* stronger inner vignette specifically for L5 on hover so the red reads richer without washing */
.row-vip .vip.l5:hover::after{
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.48) 100%); /* darker edge for red tiles */
    mix-blend-mode: multiply;
    opacity: 1; /* keep show on hover */
}

/* compact content */
.vip .head{
    font-weight: normal;
    margin:0 0 4px 0;
    /* bigger, slightly blurred shadow for improved contrast/readability (matches copy hover) */
    text-shadow: 1px 2px 8px rgba(0,0,0,0.96);
    transition: color .14s ease, text-shadow .14s ease;
    font-size:18px;
}
.vip .copy{color:#a9b1ba; font-size:14px; margin:0;
    transition: color .14s ease, text-shadow .14s ease;
}
/* on VIP hover make the perk description white with a crisp legibility */
.row-vip .vip:hover .copy{
    color:#ffffff;
    /* tight, near-black shadow for crisp legibility */
    text-shadow: 0 2px 8px rgba(0,0,0,0.92);
}
/* VIP row: slightly taller buttons */
.row-vip .btn { padding:12px 18px; } /* bump vertical padding for VIP tiles */

/* VIP tiles: crisper base shadow and modest hover lift */
.row-vip .vip{
    box-shadow: 0 6px 14px rgba(0,0,0,0.34);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.row-vip .vip:hover{
    box-shadow: 0 8px 16px rgba(0,0,0,0.40);
}

.vip.l4:hover{
    background:#654fe0;    /* juicier purple on hover */
    border-color:#8b79ff;  /* reinforce purple accent */
}
.vip.l4:hover:before{ background-color:#8b79ff }

/* juiced red hover for VIP L5 (limited) */
.vip.l5:hover{
    background:#e64b4b;    /* brighter, more saturated red on hover */
    border-color:#f16b6b;  /* warmer accent border */
}
.vip.l5:hover:before{ background-color:#f16b6b }

.vip.l3{
    border-color:#c96f1f;
    background:
            linear-gradient(90deg, rgba(232,159,42,0.32) 0%, rgba(232,159,42,0) 70%),
            #14181e;
}
.vip.l2{
    border-color:#36b8aa;
    background:
            linear-gradient(90deg, rgba(42,157,143,0.30) 0%, rgba(42,157,143,0) 70%),
            #14181e;
}
.vip.l1{
    border-color:#7dd653;
    background:
            linear-gradient(90deg, rgba(108,191,67,0.30) 0%, rgba(108,191,67,0) 70%),
            #14181e;
}
.vip.l4{
    border-color:#8b79ff;
    background:
            linear-gradient(90deg, rgba(123,97,255,0.34) 0%, rgba(123,97,255,0) 72%),
            #14181e;
}
.vip.l5{
    border-color:#b24141;
    background:
            linear-gradient(90deg, rgba(224,59,59,0.34) 0%, rgba(224,59,59,0) 72%),
            #14181e;
}

/* Hover states */
.vip.l3:hover{
    background:#e89f2a;
    border-color:#e89f2a;
}
.vip.l2:hover{
    background:#33c3a9;
    border-color:#33c3a9;
}
.vip.l1:hover{
    background:#5abf4a;
    border-color:#8ddf7d;
}
.vip.l4:hover{
    background:#543ed0;
    border-color:#7a66ff;
}
.vip.l5:hover{
    background:#c63d3d;
    border-color:#d94b4b;
}

/* Maintain inner vignette intensity for limited red tier */
.row-vip .vip.l5:hover::after{
    background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.48) 100%);
    opacity:1;
}

/* Ensure DB image inline style takes precedence over legacy CSS backgrounds */
.row-vip .vip .vip-thumb{
    background-size:contain !important;
}

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

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

/* ===== RARITY BADGES & BUTTON VARIANTS ===== */
.rarity-badge{
    display:inline-block;
    margin-left:6px;
    padding:2px 6px;
    font-size:11px;
    font-weight:700;
    line-height:1;
    color:#fff;
    background:#394048; /* default (Common fallback) */
    border-radius:3px;
    vertical-align:middle;
    white-space:nowrap;
}
.rarity-common{background:#394048}
.rarity-rare{background:#7b61ff}
.rarity-limited{background:#e03b3b} /* was dark red */
.rarity-hot{background:#e03b3b}

/* Button color overrides (products) */
.rarity-btn.rarity-common{background:#394048; border-color:#394048; color:#fff}
.rarity-btn.rarity-common:hover{background:#50585f; border-color:#50585f}
.rarity-btn.rarity-rare{background:#7b61ff; border-color:#7b61ff; color:#fff}
.rarity-btn.rarity-rare:hover{background:#654fe0; border-color:#654fe0}
.rarity-btn.rarity-limited{background:#e03b3b; border-color:#e03b3b; color:#fff}
.rarity-btn.rarity-limited:hover{background:#c53333; border-color:#c53333}
.rarity-btn.rarity-hot{background:#e03b3b; border-color:#e03b3b; color:#fff}
.rarity-btn.rarity-hot:hover{background:#c53333; border-color:#c53333}

/* --- Responsive: collapse VIP tiles to single column when space is insufficient --- */
@media screen and (max-width:960px){
    .row-vip .vip{
        width:100%;
        flex:0 0 100%;
        margin:0 0 16px 0;
    }
    .row-vip .vip:nth-child(3n){margin-right:0}
}
@media screen and (max-width:640px){
    .row-vip .vip{
        width:100% !important;
        flex:0 0 100% !important;
        margin:0 0 16px 0 !important;
    }
}

/* ===== Rebuilt Roulette Cases & Bundles (VIP-sized, 1:3 thumb:text) ===== */
.row-cases .case-wrap,
.row-bundles .bundle-wrap{
    display:flex;
    flex-wrap:wrap;
}

.row-cases .case,
.row-bundles .bundle{
    background:#14181e;
    border:1px solid #21262d;
    margin:0 16px 16px 0;
    border-radius:0;
    min-height:96px;
    display:flex;
    align-items:flex-start;
    padding:12px 12px 12px 14px;
    width:calc((100% - 32px)/3);
    flex:0 0 calc((100% - 32px)/3);
    position:relative;
    overflow:hidden;
    box-shadow:0 6px 12px rgba(0,0,0,0.28);
    transition:background .15s, border-color .15s, box-shadow .15s;
}
.row-cases .case:nth-child(3n),
.row-bundles .bundle:nth-child(3n){margin-right:0}
.row-cases .case:hover,
.row-bundles .bundle:hover{
    background:#1c2127;
    border-color:#2a3037;
    box-shadow:0 8px 14px rgba(0,0,0,0.36);
}

/* Full-width top stripe */
.case-stripe,
.bundle-stripe{
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:#e89f2a;
    pointer-events:none;
    z-index:3;
}
.bundle.purple-grad .bundle-stripe{background:#7b61ff}
.case.grad-accent .case-stripe{background:#e89f2a}

/* Fixed thumbnail (1 part) */
.case-thumb,
.bundle-thumb{
    flex:0 0 96px;
    width:96px;
    height:96px;
    margin-right:16px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    align-self:flex-start;
    z-index:2;
}

/* Text body (3 parts) */
.case-body,
.bundle-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:2px;
    z-index:2;
}

.case .head,
.bundle .head{
    font-weight:normal;
    margin:0 0 4px 0;
    font-size:18px;
    text-shadow:1px 2px 8px rgba(0,0,0,0.96);
}

/* ===== UNIFIED PRODUCT DESCRIPTION (prioritize vip-desc look) =====
   Replaces: .vip .copy, .vip-desc, .case-desc, .bundle-desc, .case .copy, .bundle .copy
*/
.product_description{
    margin:4px 0 0 0;            /* prefer vip-desc spacing */
    font-size:13px;              /* vip-desc size preferred over .copy 14px */
    color:#c9ced4;               /* vip-desc color for consistent readability */
    line-height:1.25;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
    transition: color .14s ease, text-shadow .14s ease;
}

/* Keep VIP hover behavior: descriptions turn white on vip hover */
.row-vip .vip:hover .product_description{
    color:#ffffff;
    text-shadow:0 2px 8px rgba(0,0,0,0.92);
}

/* NOTE: older per-section description selectors removed to avoid conflicts:
   .case .copy, .bundle .copy, .case-desc, .bundle-desc, .vip .copy, .vip-desc
   The unified .product_description covers all usages.
*/

/* Gradients + hover intensify (match product style) */
.case.grad-accent{
    background:
            linear-gradient(90deg, rgba(232,159,42,0.30) 0%, rgba(232,159,42,0) 70%),
            #14181e;
}
.case.grad-accent:hover{
    background:
            linear-gradient(90deg, rgba(232,159,42,0.40) 0%, rgba(232,159,42,0) 70%),
            #181c21;
    border-color:#2a3037;
}
.bundle.purple-grad{
    background:
            linear-gradient(90deg, rgba(123,97,255,0.30) 0%, rgba(123,97,255,0) 70%),
            #14181e;
}
.bundle.purple-grad:hover{
    background:
            linear-gradient(90deg, rgba(123,97,255,0.40) 0%, rgba(123,97,255,0) 70%),
            #181c21;
    border-color:#2a3037;
}

/* Swapped color variants (add case.purple-grad / bundle.grad-accent) */
.case.purple-grad{
    background:
            linear-gradient(90deg, rgba(123,97,255,0.30) 0%, rgba(123,97,255,0) 70%),
            #14181e;
}
.case.purple-grad:hover{
    background:
            linear-gradient(90deg, rgba(123,97,255,0.40) 0%, rgba(123,97,255,0) 70%),
            #181c21;
    border-color:#2a3037;
}
.bundle.grad-accent{
    background:
            linear-gradient(90deg, rgba(232,159,42,0.30) 0%, rgba(232,159,42,0) 70%),
            #14181e;
}
.bundle.grad-accent:hover{
    background:
            linear-gradient(90deg, rgba(232,159,42,0.40) 0%, rgba(232,159,42,0) 70%),
            #181c21;
    border-color:#2a3037;
}

/* Stripe color overrides for swapped variants */
.case.purple-grad .case-stripe{background:#7b61ff}
.bundle.grad-accent .bundle-stripe{background:#e89f2a}

/* Responsive collapse */
@media screen and (max-width:960px){
    .row-cases .case,
    .row-bundles .bundle{
        width:100%;
        flex:0 0 100%;
        margin:0 0 16px 0;
    }
}
@media screen and (max-width:640px){
    .row-cases .case,
    .row-bundles .bundle{
        width:100% !important;
        flex:0 0 100% !important;
        margin:0 0 16px 0 !important;
    }
    .case-thumb,
    .bundle-thumb{
        flex:0 0 84px;
        width:84px;
        height:84px;
        margin-right:14px;
    }
}

/* Ensure image scaling */
.case-thumb,
.bundle-thumb{background-size:contain !important}

/* Product buy button width tweak (final: fit coin + 4 digits within 30% column) */
.row-products .product .card-right .btn.btn-small.btn-primary{
    padding:7px 8px; /* was 7px 11px */
    min-width:0;
    box-sizing:border-box;
    white-space:nowrap;
}
.row-products .product .card-right .btn.btn-small.btn-primary.rarity-btn{
    padding:7px 9px; /* was 7px 14px */
    min-width:0;     /* remove 72px forcing overflow */
    box-sizing:border-box;
    white-space:nowrap;
}

/* Radial shadow for pizzacoin icon (improves contrast on gradients) */
.coin{
    border-radius:60%;
    /* halo-style multi drop-shadow for a centered radial feel */
    filter:drop-shadow(0 0 1px rgba(0,0,0,0.65)) drop-shadow(0 0 8px rgba(0,0,0,0.35));
    -webkit-filter:drop-shadow(0 0 1px rgba(0,0,0,0.65)) drop-shadow(0 0 8px rgba(0,0,0,0.35));
    /* no size change; keeps existing width/height from other rules */
}

/* VIP subnote: subtle warm gradient prompting purchase intent */
.vip-subnote{
    margin:-8px 0 12px 0; /* pulls closer to title, then space before tiles */
    padding:8px 12px;
    font-size:13px;
    line-height:1.25;
    color:#c9ced4;
}
/* Highlighted VIP section wrapper (title + subnote + tiles) */
.vip-section{
    /* smoother warm → near-black but with increased transparency on the warm stops,
       and much more transparent bottom-right (avoid muddy midtones) */
    background:
            linear-gradient(135deg,
            rgba(232,159,42,0.08) 0%,
            rgba(232,159,42,0.04) 26%,
            rgba(232,159,42,0.02) 44%,
            rgba(232,159,42,0.01) 56%,
            rgba(24,26,30,0.60) 78%,   /* made more transparent */
            rgba(8,9,11,0.30) 100%);   /* substantially more transparent at the corner */
    background-color:#0e0f12; /* fallback */
    border:1px solid rgba(33,38,45,0.7);
    border-radius:6px;
    padding:16px 18px 12px;
    margin:0 0 28px 0;
    position:relative;
    box-shadow:0 6px 12px rgba(0,0,0,0.28);
    overflow:hidden;
}

.vip-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 38% 30%,
            rgba(255,190,82,0.06) 0%,  /* reduced halo alpha */
            rgba(255,190,82,0.03) 18%,
            rgba(255,190,82,0.01) 36%,
            rgba(0,0,0,0.00) 60%);
    opacity:0.12; /* softened halo so it doesn't add mid-gray */
    pointer-events:none;
    mix-blend-mode:screen;
    z-index:1;
}

.vip-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("/img/CTA_Banner.jpg") center/cover no-repeat;
    /* increased opacity so the image is perceptible */
    opacity:0.40;
    pointer-events:none;
    /* overlay tends to preserve highlights while blending more gently with gradients */
    mix-blend-mode:overlay;
    /* keep a small amount of desaturation and slight contrast/brightness tweak so image reads nicely */
    filter:grayscale(0%) contrast(2.02) brightness(0.72);
    z-index:1;
    /* soften mask so the image remains visible across a larger interior area,
       but still fades toward edges to avoid hard borders */
    mask:radial-gradient(circle at 50% 42%,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.28) 76%,
    rgba(0,0,0,0.00) 96%);
}

/* ensure content sits above decorative layers */
.vip-section > * { position:relative; z-index:2; }

/* High-contrast mode: hide decorative image */
@media (forced-colors: active){
    .vip-section::after{display:none}
}

/* Accent VIP section title (complimentary styling) */
.vip-section .section-title{
    margin:0 0 14px 0; /* override global spacing inside container */
    letter-spacing:0.5px;
}

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

/* Minimal: vip-section border color change on hover only (no shadow/transform/animation) */
.vip-section{
    transition: border-color .18s ease;
    will-change: border-color;
}

/* gentle warm tint on hover, no elevation/animation applied */
.vip-section:hover{
    border-color: rgba(232,159,42,0.18); /* subtle complementary orange */
}

/* small screens: keep behavior identical (no transform/box-shadow) */
@media screen and (max-width:640px){
    .vip-section:hover{
        border-color: rgba(232,159,42,0.10);
    }
}

/* removed: vip-outline-pulse keyframes and other hover animation rules to avoid shadow/transform changes */