/* SUCK IT CONSULTING — OFFICIAL MERCH STORE STYLESHEET */
/* Do not steal. We will find you. We have IT people. Sort of. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000080;
  font-family: 'Comic Sans MS', 'Comic Neue', cursive;
  color: #fff;
  font-size: 13px;
  min-width: 820px;
}

a { color: #88aaff; text-decoration: underline; cursor: pointer; }
a:hover { color: #ffff00; }

/* ── ANIMATIONS ── */
.blink { animation: blink 0.7s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.fire { animation: fire 0.4s infinite alternate; font-weight:bold; }
@keyframes fire { 0%{color:#ff0} 50%{color:#ff6600} 100%{color:#ff0000} }

.rainbow { animation: rb 1.2s linear infinite; }
@keyframes rb {
  0%{color:#f00} 14%{color:#f80} 28%{color:#ff0} 42%{color:#0f0}
  57%{color:#0ff} 71%{color:#00f} 85%{color:#f0f} 100%{color:#f00}
}

.spin { animation: spin 8s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05); color:#ff6600;} }

.bounce { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.marquee-wrap { overflow:hidden; white-space:nowrap; }
.marquee-inner { display:inline-block; animation: mq 22s linear infinite; }
.marquee-inner.rev { animation-direction:reverse; animation-duration:28s; }
@keyframes mq { 0%{transform:translateX(100%)} 100%{transform:translateX(-160%)} }

/* ── HEADER ── */
.site-header { background:#000010; position:relative; overflow:hidden; height:120px; }
#starfield { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.header-inner {
  position:relative; z-index:2; display:flex; align-items:center;
  height:120px; padding:0 12px; gap:12px;
}
.logo-main {
  font-family:Impact,'Arial Black',sans-serif; font-size:30px; color:#ff0000;
  text-shadow:3px 3px 0 #000,-1px -1px 0 #ffff00; line-height:1;
}
.logo-store {
  font-family:Impact,'Arial Black',sans-serif; font-size:18px; color:#00ffff;
  text-shadow:2px 2px 0 #000080; line-height:1;
}
.logo-sub { font-size:10px; color:#888; font-style:italic; }

/* ── NAV ── */
.main-nav { width:100%; border-collapse:collapse; }
.main-nav td {
  background:#004080; border:2px outset #8080ff; padding:5px 6px;
  text-align:center; font-weight:bold; font-size:11px; cursor:pointer; color:#ffff00;
}
.main-nav td:hover, .main-nav td.active { background:#002266; color:#fff; }
.main-nav td a { color:inherit; text-decoration:none; display:block; }
.cart-bubble {
  background:#ff0000; color:#fff; border-radius:50%;
  font-size:9px; padding:1px 4px; display:inline-block;
  font-family:Tahoma,sans-serif; margin-left:2px; vertical-align:top; line-height:14px;
}

/* ── TICKER ── */
.ticker {
  background:#000040; padding:3px 0;
  border-top:2px solid #ffff00; border-bottom:2px solid #ffff00;
  color:#00ffff; font-size:12px; font-weight:bold;
}

/* ── UNDER CONSTRUCTION ── */
.under-con {
  background:repeating-linear-gradient(45deg,#ffff00,#ffff00 10px,#000 10px,#000 20px);
  color:#000; font-weight:bold; text-align:center; padding:4px; font-size:11px;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  background:#000020; padding:3px 8px;
  font-size:10px; color:#888; font-family:Tahoma,sans-serif;
  border-bottom:1px solid #222;
}

/* ── LAYOUT ── */
.page-layout { display:flex; align-items:flex-start; }
.main-col { flex:1; padding:10px; min-width:0; }
.sidebar { width:240px; flex-shrink:0; padding:8px; border-left:2px groove #4444ff; }

/* ── SECTION ── */
.section-title {
  font-size:17px; font-weight:bold; color:#ffff00; text-align:center;
  border-bottom:2px dashed #ffff00; padding-bottom:5px; margin-bottom:12px;
}
.content-box {
  background:#00003a; border:2px inset #4444ff;
  padding:10px; margin-bottom:10px; line-height:1.75; color:#e8e8ff;
}
.pixel-hr { border:none; border-top:4px double #ffff00; margin:10px 0; }

/* ── PRODUCT GRID ── */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.product-grid.cols4 { grid-template-columns:repeat(4,1fr); }

.product-card {
  background:#00001a; border:2px solid #333366;
  display:flex; flex-direction:column; transition:border-color 0.15s;
}
.product-card:hover { border-color:#ffff00; }

.product-img {
  background:#000830; display:flex; align-items:center;
  justify-content:center; font-size:60px; height:130px;
  border-bottom:1px solid #222244; position:relative; overflow:hidden;
  cursor:pointer;
}
.product-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,transparent 60%);
  pointer-events:none;
}

.badge {
  position:absolute; top:6px; left:6px;
  font-size:9px; font-weight:bold; padding:2px 6px; font-family:Tahoma,sans-serif;
  color:#fff; z-index:2;
}
.badge.new  { background:#006600; }
.badge.hot  { background:#cc0000; animation:blink 1s step-end infinite; }
.badge.sale { background:#ff6600; }
.badge.ltd  { background:#6600cc; }

.product-info { padding:8px; flex:1; display:flex; flex-direction:column; }
.product-name { font-size:12px; font-weight:bold; color:#ffff00; margin-bottom:3px; line-height:1.3; }
.product-sub  { font-size:10px; color:#777; font-family:Tahoma,sans-serif; margin-bottom:5px; }
.product-price {
  font-size:17px; font-weight:bold; color:#00ff66;
  font-family:'Courier New',monospace; margin-bottom:5px;
}
.original-price {
  font-size:11px; color:#666; text-decoration:line-through;
  font-family:Tahoma,sans-serif; margin-right:5px;
}
.star-row { color:#ffcc00; font-size:11px; margin-bottom:5px; }
.star-row .ct { color:#888; font-size:10px; font-family:Tahoma,sans-serif; }

.btn-add {
  background:#003366; border:2px outset #6688cc; color:#aaccff;
  font-size:11px; padding:5px 0; cursor:pointer; width:100%;
  text-align:center; font-family:'Comic Sans MS',cursive; font-weight:bold;
  margin-top:auto; display:block;
}
.btn-add:hover { background:#004499; color:#ffff00; border-color:#ffff00; }
.btn-add:active { border-style:inset; }
.btn-add.added { background:#003300; border-color:#00ff00; color:#00ff00; }

/* ── BUTTONS ── */
.btn-primary {
  background:#003366; border:3px outset #6688cc; color:#fff;
  font-size:13px; font-weight:bold; padding:7px 20px; cursor:pointer;
  text-align:center; font-family:'Comic Sans MS',cursive;
  display:inline-block; text-decoration:none;
}
.btn-primary:hover { background:#004499; color:#ffff00; }
.btn-primary:active { border-style:inset; }

.btn-danger {
  background:#330000; border:2px outset #aa4444; color:#ff8888;
  font-size:11px; padding:3px 10px; cursor:pointer;
  font-family:'Comic Sans MS',cursive;
}
.btn-danger:hover { background:#550000; color:#fff; }

/* ── WIN98 ── */
.win98-btn {
  background:#c0c0c0;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
  color:#000; font-family:'Comic Sans MS',cursive;
  font-size:11px; padding:3px 10px; cursor:pointer; font-weight:bold;
}
.win98-btn:active {
  border-top:2px solid #808080; border-left:2px solid #808080;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.win98-window {
  background:#c0c0c0;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #404040; border-bottom:2px solid #404040;
  margin-bottom:8px;
}
.win98-titlebar {
  background:linear-gradient(to right,#000080,#1084d0);
  color:#fff; font-size:11px; font-weight:bold; padding:2px 4px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:Tahoma,sans-serif;
}
.win98-body { padding:6px; font-size:11px; font-family:Tahoma,sans-serif; color:#000; }

/* ── SIDEBAR ── */
.sidebar-box {
  background:#0a0a40; border:2px solid #4444ff; padding:8px; margin-bottom:8px;
}
.sidebar-title {
  color:#ffff00; font-weight:bold; font-size:12px;
  border-bottom:1px dashed #ffff00; margin-bottom:6px; padding-bottom:3px;
  text-align:center;
}

/* ── FORMS ── */
.retro-input, .retro-select {
  background:#000030; color:#fff; border:1px inset #4444ff;
  font-family:'Comic Sans MS',cursive; font-size:12px; padding:4px; width:100%;
}
.retro-select option { background:#000030; }
.retro-label { font-size:11px; color:#aaa; display:block; margin-bottom:3px; }

/* ── CART ── */
.cart-row {
  display:flex; align-items:center; gap:10px;
  background:#00001a; border:1px solid #333366; padding:8px; margin-bottom:6px;
}
.cart-emoji { font-size:40px; flex-shrink:0; width:55px; text-align:center; }
.cart-qty {
  background:#000030; color:#fff; border:1px inset #4444ff;
  font-family:'Courier New',monospace; font-size:13px; width:48px; padding:2px 4px; text-align:center;
}

/* ── PRODUCT DETAIL ── */
.detail-img {
  background:#000830; display:flex; align-items:center;
  justify-content:center; font-size:100px; height:260px;
  border:2px inset #4444ff; position:relative;
}
.size-btn {
  background:#001133; border:2px outset #3355aa; color:#aabbff;
  font-size:12px; padding:5px 12px; cursor:pointer;
  font-family:'Comic Sans MS',cursive; display:inline-block; margin:3px;
}
.size-btn:hover, .size-btn.active { background:#002266; border-color:#ffff00; color:#fff; }

/* ── CHECKOUT ── */
.checkout-section {
  background:#00001a; border:2px solid #333366; padding:10px; margin-bottom:12px;
}
.checkout-title {
  font-size:14px; font-weight:bold; color:#00ccff;
  margin-bottom:10px; border-bottom:1px dashed #333366; padding-bottom:5px;
}
.order-row {
  display:flex; justify-content:space-between;
  font-size:12px; color:#ccc; padding:3px 0;
  border-bottom:1px dotted #111133;
}
.order-row.total {
  color:#ffff00; font-weight:bold; font-size:15px;
  border-bottom:none; margin-top:6px; padding-top:6px;
  border-top:2px solid #ffff00;
}

/* ── HERO ── */
.hero-banner {
  background:linear-gradient(135deg,#00001a,#001a00,#001a1a);
  border:3px solid #ffff00; padding:14px; text-align:center; margin-bottom:12px;
}

/* ── CATEGORY FILTER ── */
.cat-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cat-btn {
  background:#001a4d; border:2px outset #3355aa; color:#aabbff;
  font-size:11px; padding:4px 12px; cursor:pointer; font-family:'Comic Sans MS',cursive;
}
.cat-btn:hover, .cat-btn.active { background:#002266; border-color:#ffff00; color:#ffff00; }

/* ── REVIEWS ── */
.review-block {
  background:#00001a; border-left:3px solid #4488ff; padding:8px; margin-bottom:8px;
}
.review-author { color:#ffff00; font-size:11px; font-weight:bold; }
.review-date   { color:#555; font-size:10px; font-family:Tahoma,sans-serif; }
.review-body   { font-size:12px; color:#ccc; margin-top:4px; line-height:1.5; }

/* ── ALERTS ── */
.alert-box { padding:8px 10px; margin-bottom:10px; font-size:12px; }
.alert-success { background:#001a00; border:2px dashed #00ff00; color:#aaffaa; }
.alert-warning { background:#1a0e00; border:2px dashed #ff8800; color:#ffcc88; }
.alert-danger  { background:#1a0000; border:2px dashed #ff4444; color:#ffaaaa; }

/* ── FOOTER ── */
.site-footer { border-top:3px double #ffff00; background:#000020; padding:4px 8px; }
.footer-copy  { text-align:center; font-size:9px; color:#444; font-family:Tahoma,sans-serif; }

/* ── TRUST BADGES ── */
.trust-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.trust-badge {
  background:#001133; border:2px solid #003366;
  padding:5px 8px; text-align:center; font-size:10px;
  color:#aabbff; font-family:Tahoma,sans-serif; flex:1; min-width:0;
}