/* ==========================================================================
   PRODUCT CARD SYSTEM
   ========================================================================== */

:root{
    --card-radius:12px;
    --image-radius:8px;

    --glow-title:0 0 10px rgba(255,255,255,.35);
    --glow-price:0 0 12px rgba(56,189,248,.45);
    --glow-stock:0 0 10px rgba(34,197,94,.45);
}

/* ==========================================================================
   CARD LAYOUT
   ========================================================================== */

.sa-products-item{
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
}

/* ==========================================================================
   GROUP CARDS (Homepage - UNTOUCHED)
   ========================================================================== */

.sa-products-item[data-type="group"] .aspect-group-card-image{
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:var(--image-radius);
}

.sa-products-item[data-type="group"] img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================================================================
   MODAL PRODUCT CARDS (GTA V, Tools, RDR2 Popup Items)
   ========================================================================== */

/* 1. Forces 1:1 Square Image Container */
.gm-card .sa-product-card-media {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* 2. Edge-to-Edge Cover Image */
.gm-card .sa-product-card-media img,
.gm-card img.aspect-product-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* 3. Title & Header Wrapping (Prevents 'Cherax: Le...' Truncation) */
.gm-card .sa-product-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.gm-card .sa-product-card-title {
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
}

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

.sa-products-item h3,
.sa-products-item [class*="title"]{

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;

    overflow:hidden;
    white-space:normal;

    min-height:2.7em;

    font-size:.95rem;
    font-weight:600;
    line-height:1.35;

    margin:0;

    text-shadow:var(--glow-title);
}

/* ==========================================================================
   PRICE
   ========================================================================== */

.sa-products-item [class*="price-wrapper"]{
    display:block;
    margin-top:6px;
}

.sa-products-item [class*="price"]{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    flex-wrap:wrap;

    font-weight:700;

    text-shadow:var(--glow-price);
}

.sa-products-item del,
.sa-products-item s{
    opacity:.6;
    font-size:.85em;
    white-space:nowrap;
}

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

.sa-products-item > :last-child{
    margin-top:auto;
}

.sa-products-item [class*="stock"],
.sa-products-item [class*="status"]{
    text-shadow:var(--glow-stock);
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.sa-products-item [class*="badge"]{
    white-space:nowrap;
}

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

@media (max-width:768px){

    .sa-products-item h3,
    .sa-products-item [class*="title"]{
        font-size:.9rem;
    }

    .sa-products-item .aspect-product-card-image{
        margin:.5rem 0;
    }
}
/* ==========================================================================
   BROWSE BY CATEGORY IMAGE FIX (CONTAIN & FIT)
   ========================================================================== */

/* Targets category card containers with 4:5 / 3:4 aspect ratios */
div[class*="aspect-[4/5]"],
div[class*="aspect-[3/4]"] {
    background-color: #0d0e12 !important; /* Dark matching card background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Forces image to fit fully inside without side-cropping */
div[class*="aspect-[4/5]"] img,
div[class*="aspect-[3/4]"] img {
    object-fit: contain !important; /* Shows full banner width */
    padding: 12px !important;       /* Prevents touching card edges */
    max-height: 100% !important;
    max-width: 100% !important;
}
/* ==========================================================================
   BROWSE BY CATEGORY - AMBIENT BLUR FILL
   ========================================================================== */

/* 1. Container setup */
div[class*="aspect-[4/5]"],
div[class*="aspect-[3/4]"] {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Create blurred ambient background from the image itself */
div[class*="aspect-[4/5]"]::before,
div[class*="aspect-[3/4]"]::before {
    content: "";
    position: absolute;
    inset: -10px; /* Slight overflow to prevent white edges */
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.6);
    transform: scale(1.1);
    z-index: 1;
}

/* 3. Keep main logo crisp and fully visible on top */
div[class*="aspect-[4/5]"] img,
div[class*="aspect-[3/4]"] img {
    position: relative !important;
    z-index: 2 !important;
    object-fit: contain !important;
    width: 90% !important;
    height: auto !important;
    max-height: 85% !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
/* ==========================================================================
   CUSTOM BLUE MARBLE CURSOR
   ========================================================================== */

/* Apply to the full page and all interactive elements */
html, body, a, button, input, select, textarea, [role="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><defs><linearGradient id="blueBase" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231e3a8a"/><stop offset="50%" stop-color="%230284c7"/><stop offset="100%" stop-color="%2338bdf8"/></linearGradient><filter id="glow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-color="%23000000" flood-opacity="0.6"/></filter></defs><g filter="url(%23glow)"><path d="M 3 3 L 10 20 L 13.2 13.2 L 20 10 Z" fill="url(%23blueBase)" stroke="%23ffffff" stroke-width="0.75" stroke-linejoin="round"/><path d="M 5 6 Q 8 10 6 15" fill="none" stroke="%23ffffff" stroke-width="0.4" opacity="0.6"/><path d="M 8 7 Q 12 8 14 11" fill="none" stroke="%23e0f2fe" stroke-width="0.3" opacity="0.5"/><path d="M 7 12 Q 10 12 11 16" fill="none" stroke="%23ffffff" stroke-width="0.3" opacity="0.45"/><path d="M 3 3 L 10 20 L 13.2 13.2 L 20 10 Z" fill="none" stroke="%230f172a" stroke-width="0.5"/></g></svg>') 0 0, auto !important;
}