@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root {
  --color-primary: #9d4edd;
  /* Pro Tip: Use a dark abstract pattern or a blurred FiveM screenshot for the background */
  --bg-image: url("https://i.imgur.com/your-dark-pattern.jpg"); 
}

body {
  font-family: 'Inter', sans-serif;
  background-attachment: fixed;
}

/* Give the package cards a subtle purple glow on hover */
.store-products-list .store-product,
.store-products-images .store-product {
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(157, 78, 221, 0.15);
}

/* Style the Category Buttons */
.site-home-categories .category {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-brighter-bg);
}

.site-home-categories .category:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Smooth out the buttons */
.btn-primary {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

/* Style the Sidebar Widgets */
.widget {
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
/* Center the main container */
.site-header, 
.site-content, 
.site-footer-inner, 
.site-home-categories {
    max-width: var(--content-inner-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix the category box stretching */
.site-home-categories {
    display: grid;
    /* This prevents one category from taking the whole screen width */
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); 
    justify-content: center; /* Centers the category icons */
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Add a background 'container' feel to the main area */
.site-content {
    background: rgba(255, 255, 255, 0.02); /* Very subtle lift from the pitch black */
    border-radius: 12px;
    padding: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.site-home-categories .category {
    background: var(--color-brighter-bg) !important;
    border: 1px solid rgba(157, 78, 221, 0.2); /* Faint purple border */
    padding: 30px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.site-home-categories .category:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.1);
    transform: translateY(-5px);
}


.site-home-categories .category {
    background: var(--color-brighter-bg) !important;
    border: 1px solid rgba(157, 78, 221, 0.2); /* Faint purple border */
    padding: 30px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.site-home-categories .category:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.1);
    transform: translateY(-5px);
}

.site-home-categories .category .image {
    width: 60px !important; /* Forces the box icon to be a reasonable size */
    margin-bottom: 15px;
}

.site-header-inner {
    height: auto !important; /* Removes the forced tall height */
    padding: 60px 0 !important;
    text-align: center;
}

.site-title {
    font-size: 48px !important;
    letter-spacing: -1px;
    text-transform: lowercase; /* Matches your 'aScripts' branding */
}
.site-home-categories .category .image {
    width: 60px !important; /* Forces the box icon to be a reasonable size */
    margin-bottom: 15px;
}