/* TG desktop responsive — applied only at min-width:1024px */

/* =========================================================
   TERANGAMING — Global Desktop Stylesheet
   Applied only at min-width: 1024px
   Mobile (<768px) rendering is preserved untouched.
   Brand: yellow #FFD600 / black #0A0A0A
   ========================================================= */

:root {
  --tg-yellow: #FFD600;
  --tg-black: #0A0A0A;
  --tg-container: 1280px;
  --tg-text-width: 800px;
  --tg-header-h: 72px;
}

/* =========================================================
   OPTIONAL TABLET TWEAKS (768px – 1023px)
   Keep mobile look but allow grids to breathe slightly.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Intentionally minimal — mobile must stay strictly identical
     below 768px and tablet should look mobile-like for now. */
}

/* =========================================================
   DESKTOP (>= 1024px)
   ========================================================= */
@media (min-width: 1024px) {

  /* ---------- 1. UNLOCK 480px BODY CONSTRAINTS ---------- */
  html,
  body {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  /* ---------- 2. CENTRAL CONTAINER ---------- */
  /* Generic helper for inner content of full-bleed sections. */
  .tg-container,
  main,
  .page-wrap,
  #main,
  #livraison-seo,
  #seo-longform {
    max-width: var(--tg-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
  }

  /* ---------- 3. HEADER — FULL WIDTH ---------- */
  #site-header,
  #header,
  header.tg-h {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    height: var(--tg-header-h) !important;
    z-index: 1000 !important;
    background: #0A0A0A;
    border-bottom: 1px solid #1a1a1a;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Inner header content aligned to central container */
  #site-header > *,
  #header > *,
  header.tg-h > * {
    max-width: var(--tg-container);
    width: 100%;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
  }

  /* Push body content below fixed header */
  body {
    padding-top: 0;
  }
  main,
  .page-wrap,
  #main,
  .hero {
    padding-top: calc(var(--tg-header-h) + 24px) !important;
  }

  /* Sticky page header variants (cgv, retours, livraison, paiement…) */
  header.tg-h {
    position: sticky !important;
  }

  /* ---------- 4. SEARCH / STICKY BARS ---------- */
  #search-bar,
  .search-sticky {
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  #search-bar > *,
  .search-sticky > * {
    max-width: var(--tg-container);
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
    box-sizing: border-box;
  }

  /* ---------- 5. HIDE MOBILE-ONLY UI ---------- */
  #bottom-nav,
  #fab,
  #fab-menu,
  .sticky-buy,
  #sticky-buy-bar,
  .swipe-hint {
    display: none !important;
  }

  /* ---------- 6. DRAWER (slide-in mobile menu) ---------- */
  #drawer,
  #nav-drawer {
    display: none !important;
  }

  /* ---------- 7. SECTIONS / PADDING ---------- */
  .home-section,
  .section,
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------- 8. PRODUCT LISTING GRIDS ---------- */
  .products-grid,
  .prod-grid,
  .grid,
  .subcat-grid,
  .univers-grid,
  #home-physical-store {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
  }

  /* Country selector — wider grid */
  .countries-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 14px !important;
  }

  /* Platform carousels become wrapped grids */
  .plat-carousel-wrap,
  .plat-carousel {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  /* Horizontal home rows / scrolls — keep scroll but widen */
  .cards-scroll,
  .home-carousel-row,
  #home-bestsellers,
  #home-ingame,
  #home-physical-top,
  .similar-scroll,
  .gallery-thumbs,
  .gr-wrap,
  .tabs-wrap,
  .cat-tabs-wrap,
  .tabs {
    max-width: var(--tg-container);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
  }

  /* ---------- 9. CATEGORY / TEXT-PAGE GRIDS ---------- */
  .platforms,
  .cat-grid,
  .games-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  /* Guarantee / delivery cards */
  .guarantee-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .delivery-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* Trust grid (notre-histoire) */
  .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* SEO USP rows -> 3 columns */
  .seo-usp {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* Related CTA cards */
  .related-cta {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  /* Tournament details / cards */
  .trn-details {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .trn-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* ---------- 10. TEXT PAGES — NARROW READING WIDTH ---------- */
  /* CGV, retours, paiement-mobile-money, cartes-cadeaux-gaming,
     produits-gaming, livraison-dakar-senegal, comparatif-prix,
     tournament-rules, notre-histoire, notre-univers, suivi, 404 */
  body[data-page="text"] main,
  .cgv-page main,
  .text-page main,
  .page-wrap > .art-list,
  .page-wrap > .contact-card,
  .page-wrap > p,
  .page-wrap > h1,
  .page-wrap > h2,
  .page-wrap > h3,
  main > h1,
  main > h2,
  main > h3,
  main > p,
  main > ul,
  main > ol,
  main > table,
  main > .callout,
  main > details,
  main > .steps,
  main > .toc {
    max-width: var(--tg-text-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero on text pages — keep wide gradient but center content */
  .hero {
    max-width: none !important;
    width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    text-align: center;
  }
  .hero > * {
    max-width: var(--tg-text-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 11. TABLES ---------- */
  table {
    font-size: 14px !important;
    max-width: var(--tg-text-width);
    margin-left: auto;
    margin-right: auto;
  }
  table th,
  table td {
    padding: 10px 12px !important;
  }

  /* ---------- 12. TOC (table of contents tag style) ---------- */
  .toc,
  #toc,
  #toc-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 8px !important;
    max-width: var(--tg-text-width);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- 13. PRICE / TRUST ROWS ---------- */
  .amounts-row {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .trust-row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .spec-bubbles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .fps-stats-table {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  /* ---------- 14. CART / ACCOUNT ---------- */
  #progress-wrap {
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  #progress-wrap > * {
    max-width: var(--tg-container);
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
  }

  #pay-method-grid,
  .payment-options {
    grid-template-columns: repeat(4, 1fr) !important;
    max-height: none !important;
  }

  .form-row {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .cb-rules {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ---------- 15. MODALS / BOTTOM SHEETS ---------- */
  .modal-sheet,
  #buy-modal,
  .overlay .sheet,
  .flt-drawer {
    max-width: 640px !important;
    width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 20px !important;
    bottom: auto !important;
    top: 50% !important;
    margin-top: 0 !important;
  }
  #buy-modal {
    align-items: center !important;
  }
  .flt-drawer {
    transform: translate(-50%, -50%) !important;
  }

  /* ---------- 16. FOOTER (#tg-footer) ---------- */
  #tg-footer {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    padding: 48px 0 !important;
    background: #0A0A0A;
  }
  #tg-footer > * {
    max-width: var(--tg-container);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
  }
  #tg-footer .ppf-cols {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
  }
  #tg-footer .ppf-socials,
  #tg-footer .ppf-payments,
  #tg-footer .ppf-trust {
    justify-content: flex-start;
  }

  /* ---------- 17. CONSENT BAR ---------- */
  #tg-consent-bar {
    max-width: 720px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ---------- 18. STORE / HERO SLIDER ---------- */
  .hero-slider {
    max-width: var(--tg-container);
    margin: 0 auto !important;
    border-radius: 24px;
    overflow: hidden;
  }

  /* Tournament hero */
  #hero,
  .hero-slides {
    max-width: var(--tg-container);
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 24px;
    overflow: hidden;
  }

  /* ---------- 19. SUIVI / MAP ---------- */
  #map {
    max-width: var(--tg-container);
    margin: 0 auto;
    height: 520px !important;
    border-radius: 16px;
  }
  .search-card {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .info-grid {
    grid-template-columns: repeat(4, minmax(200px, 1fr)) !important;
  }

  /* ---------- 20. CODE.HTML / 404 ---------- */
  .card {
    max-width: 600px !important;
  }
  .links {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 21. TYPOGRAPHY POLISH ---------- */
  h1 {
    font-size: clamp(32px, 3.2vw, 48px) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(18px, 1.4vw, 22px) !important;
  }
  p,
  li {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }

  /* ---------- 22. PSN HERO vw UNITS CAP (homepage hero
     internal text). Inline file handles full layout, but we
     keep the vw units from blowing up. ---------- */
  .tg-hero {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- 23. HOVER STATES ---------- */
  .prod-card,
  .product-card,
  .trn-card,
  .cat-grid > *,
  .platforms > *,
  .games-grid > *,
  .trust-card,
  .related-cta > * {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .prod-card:hover,
  .product-card:hover,
  .trn-card:hover,
  .cat-grid > *:hover,
  .platforms > *:hover,
  .games-grid > *:hover,
  .trust-card:hover,
  .related-cta > *:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    border-color: var(--tg-yellow);
  }

  /* ---------- 24. SCROLLBARS ---------- */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #0A0A0A;
  }
  ::-webkit-scrollbar-thumb {
    background: #1f1f1f;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--tg-yellow);
  }

  /* ---------- 25. ENSURE FIXED ELEMENTS CENTERED PROPERLY
     for inline JS-injected components that used left:50%
     transform:translateX(-50%) with max-width:480px. ---------- */
  [style*="max-width: 480px"][style*="left: 50%"] {
    max-width: 100% !important;
  }

  /* ---------- 26. KEEP GOOGLE TRANSLATE HIDDEN ---------- */
  #tg-gt-hide,
  .goog-te-banner-frame,
  .skiptranslate {
    display: none !important;
  }
}