/* Coltopia store: the coltopia.com "sticker" look applied to the Summit
   structure. Rules here are UNLAYERED on purpose: Tailwind v4 (browser build)
   puts every utility in @layer utilities, and unlayered author CSS wins over
   layered CSS regardless of specificity, so nothing below needs !important
   to beat a utility class. Palette hooks come from partials/head.html:
   --primary-color (lime, buttons), --secondary-color (gold, headline/price). */

/* ------------------------------------------------------------- ground */
body {
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  background: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }
.container { max-width: var(--content-width) !important; }
button, .btn, [\@click] { cursor: pointer; }
::selection { background: var(--secondary-color); color: #2e2708; }

/* ------------------------------------------------------------- type */
h1, h2, h3, h4 {
  font-family: 'Bangers', Impact, 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 {
  color: var(--secondary-color);
  -webkit-text-stroke: 1px #000;
  text-shadow: 3px 3px 0 #000;
}
h2 { color: #fff; text-shadow: 2px 2px 0 #000; }
h3 { color: #fff; letter-spacing: 0.05em; }
h4 { color: var(--blue); letter-spacing: 0.1em; text-shadow: 2px 2px 0 #000; }

/* Summit's eyebrows are <p class="uppercase font-bold ..."> above each title */
p.uppercase {
  font-family: 'Bangers', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--blue);
  text-shadow: 2px 2px 0 #000;
}
.text-primary { color: var(--secondary-color); }
.text-muted { color: var(--text-muted); }
a { transition: color 0.12s ease; }
.mono, code, kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ------------------------------------------------------------- surfaces */
.bg-content {
  background: var(--content-color);
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #000;
}
/* the slide-in cart drawer is a full-height panel, not a card */
.bg-content.h-full {
  border-radius: 0;
  box-shadow: none;
  border-width: 0 0 0 2px;
}
.bg-content-light {
  background: var(--content-light-color);
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #000;
}
.border-content-light { border-color: #000 !important; }

/* ------------------------------------------------------------- buttons */
.bg-primary {
  background: var(--primary-color);
  color: #04280a;
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #000;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.bg-primary:hover { opacity: 1; transform: translateY(-1px); background: var(--hover-color); }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary p, .bg-primary i, .bg-primary span {
  color: #04280a;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.bg-primary h1, .bg-primary h2 { -webkit-text-stroke: 0; }
.bg-secondary { background: var(--secondary-color); color: #2e2708; border: 2px solid #000; border-radius: 8px; box-shadow: 3px 3px 0 #000; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine:hover:before {
  animation: 0.5s linear shine;
  background-color: rgba(255, 255, 255, 0.25);
  content: "";
  height: 300px; left: -100px; position: absolute; top: -100px;
  transform: rotate(30deg); width: 10%;
}
/* the big "Store Menu" block: gold sticker */
.store-menu-toggle {
  background: var(--secondary-color);
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #000;
}
.store-menu-toggle:hover { background: #ffd65c; transform: translateY(-3px); }
.store-menu-toggle h2 { color: #2e2708; font-size: 2.4rem; text-shadow: none; }
.store-menu-toggle p { color: #5a4a10; text-shadow: none; }

/* ------------------------------------------------------------- hero */
#appBg, #appBg .fade, .card-loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#appBg { max-height: 420px; overflow: hidden; opacity: var(--hero-opacity); }
#appBg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-position); image-rendering: auto; }
#appBg .fade { background: linear-gradient(0deg, var(--background-color), transparent 70%); }
#storeApp { position: relative; z-index: 5; }
/* soft voxel grid behind the hero (the site's .pixelbox), shows through when
   no hero image is configured and sits under it when one is */
#hero {
  background-image:
    linear-gradient(rgba(173, 190, 58, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 190, 58, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgba(213, 201, 140, 0.10), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(143, 167, 61, 0.16), transparent 50%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
#hero .icon {
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #000;
  background: var(--primary-color);
  color: #04280a;
  text-shadow: none;
}
#hero #discord .icon { background: var(--blue); color: #061a26; }
#hero .icon i { color: inherit; }
#hero .count {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
#hero h1 { font-size: 1.9rem; }
#hero p { color: var(--text-muted); font-weight: 600; text-shadow: 1px 1px 0 #000; }
#hero .player-wrap:hover { opacity: 1; }
#hero .logo img { filter: drop-shadow(4px 4px 0 #000); }
/* text wordmark used when no logo image is configured */
.hero-wordmark {
  display: inline-block;
  font-family: 'Bangers', Impact, sans-serif;
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: 0.06em;
  color: var(--secondary-color);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 5px 5px 0 #000;
  line-height: 1;
  padding: 0.35em 0.2em;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.hero-wordmark:hover { transform: rotate(-1.5deg) scale(1.02); }
.mobile-player-wrapper .inner-wrapper {
  background: var(--content-color);
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #000;
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- screenshot strip */
.banner {
  overflow: hidden;
  padding: 14px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.banner-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: banner-scroll 55s linear infinite;
  will-change: transform;
}
.banner:hover .banner-track { animation-play-state: paused; }
.banner-card {
  flex: none;
  width: 300px;
  height: 187px;
  padding: 6px;
  background: var(--content-color);
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-1.5deg);
}
.banner-card:nth-child(even) { transform: rotate(1.5deg); }
.banner-card:nth-child(3n) { transform: rotate(-0.5deg); }
.banner-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #000;
}
@keyframes banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .banner-track { animation: none; } }
@media only screen and (max-width: 768px) {
  .banner-card { width: 220px; height: 137px; }
  .banner-track { animation-duration: 40s; }
}

/* ------------------------------------------------------------- header strip */
.content-header { padding-left: 2.5rem; }
.content-header .user-block { border-radius: 0 8px 8px 0; }
.category-meta a, .socials a { color: #fff; }
.category-meta a:hover, .socials a:hover { color: var(--secondary-color); transform: translateY(-3px); }

/* ------------------------------------------------------------- product cards */
.category-packages > .bg-content { overflow: hidden; }
.category-packages .h-48 { border: 0; border-bottom: 2px solid #000; border-radius: 0; box-shadow: none; }
.category-packages h3 { font-size: 1.5rem; }
.category-packages .text-primary,
.product-price h3 {
  font-family: 'Bangers', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--secondary-color);
  -webkit-text-stroke: 0.5px #000;
  text-shadow: 2px 2px 0 #000;
}
.category-packages .line-through { font-family: 'Rubik', sans-serif; -webkit-text-stroke: 0; text-shadow: none; color: var(--text-muted); }
.category-packages .bg-red-500 {
  background: var(--red);
  color: #fff;
  border: 2px solid #000;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  font-family: 'Bangers', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  padding: 2px 8px;
}
.category-packages button.bg-content-light { color: #fff; font-weight: 700; }
.category-packages button.bg-content-light:hover { background: var(--primary-color); color: #04280a; transform: translateY(-1px); }

/* legacy product page (direct /products/<slug> links) */
.product-name { font-family: 'Bangers', Impact, sans-serif; font-size: 2.4rem; color: var(--secondary-color); -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 #000; letter-spacing: 0.04em; }
.product-name span { font-family: 'Rubik', sans-serif; font-size: 0.95rem; color: var(--text-muted); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; }
.product-price h3 { font-size: 2rem; }
.product-img { border: 2px solid #000; border-radius: 10px; box-shadow: 5px 5px 0 #000; max-width: 100%; }
.small-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 0.08em; color: var(--blue); text-shadow: 2px 2px 0 #000; margin-top: 1rem; }
.product-det-border { flex: 1; height: 2px; background: #000; }
.add-btn, .add-gift-btn, .close-gift {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 8px; font-weight: 700; font-size: 0.95rem;
  border: 2px solid #000; box-shadow: 3px 3px 0 #000; cursor: pointer;
  background: var(--primary-color); color: #04280a; font-family: inherit;
}
.add-gift-btn { background: var(--secondary-color); color: #2e2708; }
.close-gift { background: var(--content-light-color); color: #fff; }
.product-page { padding: 1.5rem 0; }

/* ------------------------------------------------------------- forms */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--background-color);
  border: 2px solid #000;
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  padding: 10px 13px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-color); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.8; }

/* ------------------------------------------------------------- modals + alerts */
.modal-nav { padding-right: 15px !important; padding-left: 5px !important; }
.modal-nav::-webkit-scrollbar { width: 8px !important; border-radius: 100px !important; overflow: hidden; }
.modal-nav::-webkit-scrollbar-track { background: var(--content-light-color); border-radius: 100px !important; }
.modal-nav::-webkit-scrollbar-thumb { background: #000; border-radius: 100px !important; }
.modal-nav i { color: #fff; }
.modal-nav .bg-primary i { color: #04280a; }
#notification-alert {
  background: var(--red);
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #000;
  color: #fff;
}
#notification-alert .font-medium { text-transform: capitalize; }
.gift-icon { box-shadow: 2px 2px 0 #000; cursor: pointer; background: var(--content-light-color); font-size: 14px !important; border: 2px solid #000; }
.card-loading { background: var(--background-color); z-index: 5; opacity: 0.85; }
.loader {
  width: 48px; height: 48px; border: 5px solid var(--secondary-color); border-bottom-color: transparent;
  border-radius: 50%; display: inline-block; box-sizing: border-box; animation: 1s linear infinite rotation;
}
.custom-avatar { overflow: hidden; border-radius: 10px; }

/* ------------------------------------------------------------- footer */
footer {
  background: #0c0e0c;
  border-top: 2px solid #000;
  box-shadow: 0 -4px 0 var(--content-color);
}
footer h3 { font-size: 1.4rem; }
footer h4 { font-size: 1.05rem; }
footer a:hover { color: var(--secondary-color); text-decoration: none; }
footer .bg-primary { box-shadow: 2px 2px 0 #000; }
#paynow { max-width: 38px; margin: 0 auto; padding-top: 5px; }
#paynow path { fill: #ffffff; }

/* ------------------------------------------------------------- sidebar order */
.sidebar .top-customer { order: 2; }
.sidebar .recent-payments { order: 3; }
.sidebar .giftcards { order: 10; }
.sidebar .text-block { order: 15; }

/* ------------------------------------------------------------- motion */
@keyframes shine { 0% { left: -100px; } to { left: calc(100% + 100px); } }
@keyframes rotation { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media only screen and (max-width: 768px) {
  .sidebar .store-menu-toggle, .view--home #mobile-secondary { display: none !important; }
  .bg-content { box-shadow: 4px 4px 0 #000; }
  .hero-wordmark { text-shadow: 4px 4px 0 #000; }
}