/* UK Coin Hunt — Header polish (additive) * Layered on top of the existing header without changing its layout. * Adds: sticky-on-scroll + shadow, cart/wishlist count badges, softer * icon hovers, slightly tighter vertical rhythm. */ :root { --hdp-gold: #cfa362; --hdp-gold-dark: #b88d4f; } /* --- Sticky header --- * * The theme's has overflow:auto which makes CSS `position: sticky` * unreliable (Chrome scrolls the element instead), so we use a * fixed-positioned header plus a body spacer that matches its height. */ body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #ffffff; transition: box-shadow .25s ease; } body.dark-mode > header { background: #1e1e1e; } body.admin-bar > header { top: 32px; } @media (max-width: 782px) { body.admin-bar > header { top: 46px; } } /* Spacer keeps the hero from tucking under the fixed header. JS sets the exact height on load + resize so it stays pixel-perfect. (The admin-bar offset is already baked in by html's margin-top, so we don't add it here.) */ body::before { content: ""; display: block; height: var(--hdp-header-h, 200px); flex-shrink: 0; background: transparent; } body.hdr-stuck > header { box-shadow: 0 4px 16px rgba(28, 28, 30, 0.08); } body.dark-mode.hdr-stuck > header { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } /* -------- Shrink on scroll -------- * Uses GPU-friendly properties (transform, opacity, max-height) with short * durations so the shrink lands instantly rather than crawling. */ body > header .logo-container { transform-origin: center left; transition: transform .18s ease; will-change: transform; } body.hdr-stuck > header .logo-container { transform: scale(0.7); } body > header #mobile-header-detection { transition: padding .18s ease; } body.hdr-stuck > header #mobile-header-detection { padding-top: 4px; padding-bottom: 4px; } /* Collapse the bottom row (category bar + nav + review stars) on scroll. * Target the 2nd .row inside header (the nav/categories row) without * using :has() — which can trigger repaint storms on some browsers. */ body > header .container > .row:nth-of-type(2) { transition: max-height .18s ease, opacity .14s ease; } body.hdr-stuck > header .container > .row:nth-of-type(2) { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; } /* Tighten vertical padding a touch (keeps layout identical) */ body > header .container > .row { margin-top: 0; margin-bottom: 0; } /* --- Current-page indicator in the main nav --- * WordPress decorates the active

with several different classes * depending on the page type (page, archive, category, etc.), so we cover * all of them for consistent highlighting. */ body > header .main-menu-bar .menu li.current-menu-item > a, body > header .main-menu-bar .menu li.current-menu-parent > a, body > header .main-menu-bar .menu li.current-menu-ancestor > a, body > header .main-menu-bar .menu li.current_page_item > a, body > header .main-menu-bar .menu li.current_page_parent > a, body > header .main-menu-bar .menu li.current_page_ancestor > a, body > header #sidebar-menu .menu li.current-menu-item > a, body > header #sidebar-menu .menu li.current_page_item > a { color: var(--hdp-gold-dark); font-weight: 600; position: relative; } /* A subtle gold underline anchored just below the text so the indicator * doesn't shift the menu layout. */ body > header .main-menu-bar .menu li.current-menu-item > a::after, body > header .main-menu-bar .menu li.current-menu-parent > a::after, body > header .main-menu-bar .menu li.current-menu-ancestor > a::after, body > header .main-menu-bar .menu li.current_page_item > a::after, body > header .main-menu-bar .menu li.current_page_parent > a::after, body > header .main-menu-bar .menu li.current_page_ancestor > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px; background: var(--hdp-gold); border-radius: 1px; } body.dark-mode > header .main-menu-bar .menu li.current-menu-item > a, body.dark-mode > header .main-menu-bar .menu li.current-menu-parent > a, body.dark-mode > header .main-menu-bar .menu li.current-menu-ancestor > a, body.dark-mode > header .main-menu-bar .menu li.current_page_item > a, body.dark-mode > header .main-menu-bar .menu li.current_page_parent > a, body.dark-mode > header .main-menu-bar .menu li.current_page_ancestor > a { color: var(--hdp-gold); } /* Sidebar / mobile drawer — same idea but as a left gold rail */ body > header #sidebar-menu .menu li.current-menu-item > a, body > header #sidebar-menu .menu li.current-menu-parent > a, body > header #sidebar-menu .menu li.current_page_item > a { border-left: 3px solid var(--hdp-gold); padding-left: 12px; color: var(--hdp-gold-dark); font-weight: 600; } /* --- Icon hover polish (applies to the existing .icon-btn buttons) --- */ body > header .icon-btn { transition: color .2s ease, background-color .2s ease; border-radius: 50%; } /* Reset native