/*
 * Shared nav chrome: utility top bar, main nav, category bar, mobile
 * menu offset, preloader. Extracted from the <style> block that lived
 * in <head> on every page of the original static build (index.html
 * lines 11–218, and duplicated near-identically in every pages/*.html
 * file) — this was NOT in css/style.css, so it needs its own enqueue
 * (see functions.php). Site-wide, loaded on every page via header.php.
 */

  /* ============ Utility top bar ============ */
  .tg-topbar { background: #fff; border-bottom: 1px solid var(--gray-200); font-size: 0.82rem; color: #6B7280; }
  .tg-topbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .tg-topbar-left, .tg-topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .tg-topbar a { color: #6B7280; display: inline-flex; align-items: center; gap: 6px; }
  .tg-topbar a:hover { color: var(--orange); }
  .tg-topbar-divider { width: 1px; height: 14px; background: var(--gray-200); display: inline-block; }
  @media (max-width: 700px) { .tg-topbar-left { display: none; } }

  /* ============ Main nav (logo / search / actions) ============ */
  .tg-sticky-wrap { position: sticky; top: 0; z-index: 100; }
  .tg-mainnav { background: #fff; border-bottom: 1px solid var(--gray-200); }
  .tg-mainnav .container { display: flex; align-items: center; gap: 32px; padding-top: 18px; padding-bottom: 18px; }
  .tg-logo img { height: 40px; display: block; image-rendering: -webkit-optimize-contrast; }
  .tg-search { flex: 1 1 auto; display: flex; max-width: 640px; }
  .tg-search input { flex: 1; border: 1.5px solid var(--gray-200); border-right: none; border-radius: 10px 0 0 10px; padding: 12px 16px; font-size: 0.92rem; font-family: inherit; color: var(--gray-900); background: #fff; }
  .tg-search input:focus { outline: none; border-color: var(--orange); }
  .tg-search button { width: 50px; border: none; background: var(--orange); color: #fff; border-radius: 0 10px 10px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
  .tg-search button:hover { background: var(--orange-dark); }
  .tg-nav-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
  .tg-action { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--gray-700); position: relative; font-size: 0.72rem; font-weight: 600; }
  .tg-action:hover { color: var(--orange); }
  .tg-action .cart-badge { position: absolute; top: -6px; right: -10px; }
  .tg-hamburger { display: none; background: none; border: none; color: var(--gray-900); cursor: pointer; }
  @media (max-width: 900px) { .tg-mainnav .tg-search { display: none; } }
  @media (max-width: 768px) {
    .tg-mainnav .container { gap: 16px; }
    .tg-nav-actions { gap: 14px; }
    .tg-hamburger { display: block; }
  }

  /* ============ Category bar ============ */
  .tg-catbar { background: var(--orange); }
  .tg-catbar .container { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .tg-catbar .container::-webkit-scrollbar { display: none; }
  .tg-cat-link { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; padding: 13px 16px; }
  .tg-cat-link.is-home { background: #fff; color: var(--orange); border-radius: 8px; margin: 6px 0; padding: 7px 16px; }
  .tg-cat-link:not(.is-home):hover { color: #1A1A1A; }
  .tg-cat-drop { position: relative; }
  .tg-cat-drop-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg); padding: 10px; z-index: 50; }
  .tg-cat-drop:hover .tg-cat-drop-menu { display: block; }
  .tg-cat-drop-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--gray-700); font-size: 0.85rem; font-weight: 500; }
  .tg-cat-drop-menu a:hover { background: var(--orange-light); color: var(--orange-dark); }
  @media (max-width: 768px) { .tg-catbar { display: none; } }

  /* ============ Mobile menu offset (this page's header is taller than the shared default) ============ */
  @media (max-width: 768px) {
    .mobile-menu-overlay { top: 112px; height: calc(100vh - 112px); }
  }

  /* --- Preloader --- */
  #preloader { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, visibility 0.4s ease; }
  #preloader.pl-hide { opacity: 0; visibility: hidden; pointer-events: none; }
  #preloader .pl-logo { width: 120px; height: auto; animation: pl-pulse 1.1s ease-in-out infinite; image-rendering: -webkit-optimize-contrast; }
  @keyframes pl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.7; } }
  body.pl-lock { overflow: hidden; }
