/*
Theme Name: Tri‑G Gaming Store
Theme URI: https://example.com/tri-g
Author: Abdulrahman Shahbahai & ChatGPT
Author URI: https://3bdulrahman.me/
Description: WooCommerce theme for digital gaming subscriptions (Tri‑G). Dark/Light, gold accents, marquee deals, and product grids.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: tri-g
Tags: ecommerce, woocommerce, rtl-language-support, custom-colors, one-column, two-columns, grid-layout, custom-logo
*/

/* Root variables (customizable via Customizer) */
:root {
  --tg-bg: #0b0e12;
  --tg-surface: #12161c;
  --tg-text: #e6e8eb;
  --tg-muted: #94a3b8;
  --tg-gold: #c9a227;
  --tg-ink: #0f172a;
  --tg-card: #0f1318;
}

html[dir="rtl"] body {
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Naskh Arabic', Arial, sans-serif;
}

body {
  background: var(--tg-bg);
  color: var(--tg-text);
  margin: 0;
}

a { color: var(--tg-gold); text-decoration: none; }
a:hover { opacity: .85; }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* Header */
.tg-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: rgba(15,19,24,.8); border-bottom: 1px solid rgba(255,255,255,.06); }
.tg-header .wrap { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 16px; }
.tg-logo { display:flex; align-items:center; gap:12px; font-weight:800; }
.tg-logo img { height:42px; width:auto; }
.tg-nav { display:flex; gap:18px; flex-wrap:wrap; }
.tg-actions { display:flex; align-items:center; gap:10px; }

/* Marquee */
.tg-marquee { background: var(--tg-ink); color:#fff; padding:8px 0; overflow:hidden; }
.tg-marquee .inner { display:inline-block; white-space:nowrap; animation: tg-scroll 25s linear infinite; }
@keyframes tg-scroll { from { transform: translateX(100%);} to { transform: translateX(-100%);} }

/* Hero */
.tg-hero { background: linear-gradient(135deg, var(--tg-ink), #0b0e12 60%); border-bottom:1px solid rgba(255,255,255,.06); }
.tg-hero .grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; padding: 42px 0; }
.tg-hero h1 { font-size: clamp(28px, 4vw, 46px); margin:0 0 10px; }
.tg-hero p { color: var(--tg-muted); margin:0 0 20px; }
.tg-btn { display:inline-block; padding:12px 18px; border-radius:14px; background: var(--tg-gold); color:#111; font-weight:700; }

/* Cards */
.tg-section { padding: 36px 0; }
.tg-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.tg-card { background: var(--tg-card); border:1px solid rgba(255,255,255,.06); padding:14px; border-radius:16px; position:relative; }
.tg-badge { position:absolute; top:10px; left:10px; background: var(--tg-gold); color:#111; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; }
.tg-card h3 { margin:10px 0 6px; font-size:16px; }
.tg-price { font-size:18px; font-weight:800; }
.tg-card .tg-btn { width:100%; text-align:center; margin-top:10px; }

/* Footer */
.tg-footer { padding: 24px 0 40px; border-top:1px solid rgba(255,255,255,.06); color: var(--tg-muted); }

/* Responsive */
@media (max-width: 1024px) { .tg-hero .grid { grid-template-columns: 1fr; } .tg-grid { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 720px) { .tg-grid { grid-template-columns: repeat(2,1fr);} .tg-header .wrap { flex-wrap:wrap; } }



/* ====== v1.1 Home category & product blocks (inspired by reference) ====== */
.tg-section-header {
  text-align: center;
  font-size: clamp(20px, 3.4vw, 34px);
  margin: 22px 0 12px;
  font-weight: 800;
}
.tg-subtle {
  background: #0e1116;
}
.tg-icon-grid {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  padding: 10px 0 20px;
}
@media (max-width: 1200px){ .tg-icon-grid{ grid-template-columns: repeat(6,1fr);} }
@media (max-width: 992px){ .tg-icon-grid{ grid-template-columns: repeat(5,1fr);} }
@media (max-width: 768px){ .tg-icon-grid{ grid-template-columns: repeat(4,1fr);} }
@media (max-width: 520px){ .tg-icon-grid{ grid-template-columns: repeat(3,1fr);} }
.tg-icon-tile {
  background: linear-gradient(145deg, #1a2028, #0d1116);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  padding: 16px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  min-height: 120px;
}
.tg-icon-tile:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.tg-icon-tile img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 14px;
  display:block;
  margin-bottom: 8px;
}
.tg-icon-label {
  font-weight: 700; font-size: 14px; color: #eaeef3;
}

/* Product card style like screenshot */
.tg-product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px){ .tg-product-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 760px){ .tg-product-grid{ grid-template-columns: repeat(2,1fr);} }
.tg-product{
  border-radius: 18px;
  overflow: hidden;
  background: #12161c;
  border:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
}
.tg-product .thumb{ aspect-ratio: 4/5; background:#0b0e12; overflow:hidden; }
.tg-product .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tg-product .meta{ padding: 10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tg-product .title{ font-weight:800; font-size: 16px; }
.tg-chip{ background:#2a2f37; color:#fff; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; }