/* ============================================================
   TopGameCarry — theme overrides & additions
   Loaded AFTER design-system.css. Keep theme-specific tweaks here
   so design-system.css can be regenerated from the mockups freely.
   ============================================================ */

/* ---- Front page: home grids (class-based so mobile can override) ---- */
.home-hero{ padding:80px 0 64px; }

.home-games{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.home-news{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

@media (max-width:860px){
  /* hero inner padding on mobile (requested) */
  .home-hero{ padding:50px 20px 34px; }
  /* "Pick your game" → 2 per row on mobile */
  .home-games{ grid-template-columns:repeat(2,1fr); }
  /* News block → 2 per row on mobile */
  .home-news{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .home-news{ grid-template-columns:1fr; }
}

/* ---- [addproduct] cards: match the "Featured carries" reference ---- */
.pgrid--products .pcard-im{ aspect-ratio:1/1; }
.pgrid--products .pcard-from{ font-family:'Chakra Petch',monospace; text-transform:uppercase; letter-spacing:0.1em; font-size:9px; color:var(--faint); margin-top:14px; }
.pgrid--products .pcard-price{ font-family:'Archivo',sans-serif; font-weight:800; font-size:21px; margin-top:3px; }
.pgrid--products .pcard-btn{ margin-top:15px; }

/* ---- Mobile drawer: polish + support for wp_nav_menu items ---- */
.drawer{ padding:18px 18px 24px; overflow-y:auto; }
.drawer ul{ list-style:none; margin:0; padding:0; }
.drawer li{ list-style:none; margin:0; }
/* style BOTH the fallback .drawer-link anchors and assigned-menu <li><a> items */
.drawer-link,
.drawer li > a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Chakra Petch',monospace; text-transform:uppercase; letter-spacing:0.13em;
  font-size:14.5px; font-weight:600; color:var(--text);
  padding:15px 12px; border-bottom:1px solid var(--line-soft); border-radius:10px;
  transition:background .15s, color .15s, padding .15s;
}
.drawer-link:hover,
.drawer li > a:hover{ background:var(--surface); padding-left:16px; color:var(--accent-hi); }
.drawer li:last-of-type > a{ border-bottom:0; }
/* arrow for menu items (the fallback links already carry an inline SVG arrow) */
.drawer li > a::after{
  content:""; flex-shrink:0; width:8px; height:8px;
  border-top:2px solid var(--muted); border-right:2px solid var(--muted);
  transform:rotate(45deg); transition:border-color .15s, transform .15s;
}
.drawer li > a:hover::after{ border-color:var(--accent-hi); transform:rotate(45deg) translate(2px,-2px); }
.drawer-link svg{ color:var(--faint); transition:color .15s, transform .15s; }
.drawer-link:hover svg{ color:var(--accent-hi); transform:translateX(3px); }
/* current item */
.drawer li.current-menu-item > a{ color:var(--accent-hi); }

/* ---- [related] shortcode: iblock with image preview instead of icon ---- */
.iblock .ib-thumb{ flex-shrink:0; width:56px; height:56px; border-radius:11px; overflow:hidden; border:1px solid var(--line-soft); background:var(--surface); position:relative; }
.iblock .ib-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tgc-related{ display:flex; flex-direction:column; gap:12px; margin:22px 0; }

/* ---- Hot-sellers grid (4-up) on per-game boosting pages ---- */
.hotgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
@media(max-width:1000px){ .hotgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .hotgrid{ grid-template-columns:1fr; } }