/* Store chrome on the blog (OWP-580, phase 7) — hand-written adjustments on top of the GENERATED store-chrome.css.
 * Loaded after it; same `.ow-chrome` scope. Keep this file small: anything that is a store rule belongs in the store's
 * SCSS and arrives here through wordpress/bin/extract-chrome-css.py. */

/* The announcement bar is pinned like on the store (the store's own rules: #poll-bar position: fixed; top: 0; z-index 1001,
 * height 0 until pollbar.js measures #poll-content; #pollbar-under is the spacer that pushes the page down). store-chrome.js
 * does the same measuring here (height of the bar + spacer, the cookie's nStickyNavHeight). Only additions: the bar sits below
 * WordPress's admin bar for logged-in users, and the arrow row is hidden unless minimised (the store clips it by height). */
body.admin-bar .ow-chrome #poll-bar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ow-chrome #poll-bar { top: 46px; } }
.ow-chrome #poll-bar #poll-arrow:not(.poll-arrow) { display: none; }
.ow-chrome #poll-bar #poll-arrow.poll-arrow:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* The blog theme's base link colour / underline must not restyle the store footer. */
.ow-chrome footer a:hover { text-decoration: none; }

/* ---- Header (phase 7.2) ---- */
/* The store's #site-wrapper wraps the whole page, so its absolute sidebar menu / overlay span the page. Here the chrome wrapper is
 * only the header block → the off-canvas menu and the overlay are fixed to the viewport; `.show-nav` lives on the wrapper. */
.ow-chrome-header { position: relative; background: #fff; }
.ow-chrome #site-menu { position: fixed; top: 0; bottom: 0; height: 100vh; }
.ow-chrome #site-overlay { position: fixed; top: 0; bottom: 0; height: 100vh; }
.ow-chrome-header.show-nav #site-menu { -webkit-transform: translateX(0); transform: translateX(0); }
.ow-chrome-header.show-nav #site-overlay { display: block; width: 100%; }
html.ow-disable-scrolling, body.ow-disable-scrolling { overflow: hidden; }
/* The store pins the mobile navbar (Bootstrap .navbar-fixed-top), pushes the page down with #push-content-down and hides/shows it
 * on scroll (hide-header-on-scroll.js). On the blog the whole header block is sticky below 1200px instead (there it holds only the
 * mobile navbar, the desktop header is display:none): always visible while scrolling, no spacer, the announcement bar above it
 * scrolls away naturally. A sticky element sticks only inside its parent, so the wrapper — a direct child of <body> — is the
 * sticky one, not the navbar inside it. */
.ow-chrome #nav-mobile.navbar-fixed-top { position: static; }
.ow-chrome #push-content-down { display: none; }
@media (max-width: 1199px) {
  /* top = the pinned announcement bar (+ the WP admin bar), set by store-chrome.js as --ow-chrome-sticky-top */
  .ow-chrome-header { position: -webkit-sticky; position: sticky; top: var(--ow-chrome-sticky-top, 0px); z-index: 1030; }
}
/* Bootstrap's .navbar-fixed-top rules are scoped under .ow-chrome; the store's `body { padding-top }` for them is not wanted here. */
/* The "free shipping / 365 days" pop-overs open on hover in the store; also on keyboard focus here (WCAG 2.1.1). */
.ow-chrome #free-shipping-alterations li:focus-within { overflow: visible; }
.ow-chrome #free-shipping-alterations li > span { outline: none; }

/* Per-visitor header items — every one store-chrome.js fills from /api/wp-layout-state gets its own skeleton until then
 * (.ow-chrome-pending on the header block, removed after the patch or when the request fails), instead of the neutral guess
 * ("SIGN IN" / "USA" / empty bag) that then jumps: the sign-in / my-profile slot, the region, the cart count — desktop header,
 * mobile navbar and the side menu. Each bar covers its own text only (background-clip: content-box), so they stay separate.
 * Without JavaScript the real text shows after 3 s. */
@keyframes ow-chrome-reveal { to { color: inherit; background-color: transparent; background-image: none; } }
@keyframes ow-chrome-pulse { from { background-color: #e6e6e6; } to { background-color: #f4f4f4; } }
#ow-chrome-header.ow-chrome-pending [data-nav-menu-sign-in] > a,
#ow-chrome-header.ow-chrome-pending [data-nav-menu-my-profile] > a,
#ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a,
#ow-chrome-header.ow-chrome-pending #site-menu li.sign-in > a,
#ow-chrome-header.ow-chrome-pending #site-menu li.sign-in + li > a {
  color: transparent; background-color: #e6e6e6; background-clip: content-box; -webkit-background-clip: content-box;
  border-radius: 3px; pointer-events: none; animation: ow-chrome-reveal 0s linear 3s forwards;
}
/* Skeleton widths = the average rendered width of the variants each slot can end up with (measured 2026-11-10 in the desktop
 * header, 11px Open Sans 300, incl. the link's 15px right padding = the gap to the next item; same at 1200 and 1440px):
 *   sign-in slot: "Sign In" 53.2 / "My Profile ▾" 87.4                 → 70px
 *   region:       "USA" 35.5 (no menu, no ▾) / "Europe ▾" 69.3 / "International ▾" 108.6 → 71px
 * so the row moves by the smallest amount on average when the real text arrives (the cart count is absolutely
 * positioned and moves nothing). The bar itself is the width minus the 15px gap (background-clip: content-box). */
#ow-chrome-header.ow-chrome-pending #desktop-header [data-nav-menu-sign-in] > a,
#ow-chrome-header.ow-chrome-pending #desktop-header [data-nav-menu-languages] > a {
  display: inline-block; box-sizing: border-box; overflow: hidden; white-space: nowrap; vertical-align: top;
}
#ow-chrome-header.ow-chrome-pending #desktop-header [data-nav-menu-sign-in] > a { width: 70px; }
#ow-chrome-header.ow-chrome-pending #desktop-header [data-nav-menu-languages] > a { width: 71px; }
/* the dark side menu: its links are full-width blocks, so a text-sized bar at the text's indent instead of a filled row */
#ow-chrome-header.ow-chrome-pending #site-menu li.sign-in > a,
#ow-chrome-header.ow-chrome-pending #site-menu li.sign-in + li > a,
#ow-chrome-header.ow-chrome-pending #site-menu [data-nav-menu-languages] > a {
  background: linear-gradient(#3a3a3a, #3a3a3a) 23px 50% / 110px 14px no-repeat; animation: ow-chrome-reveal 0s linear 3s forwards;
}
#ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a svg,
#ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a .glyphicon { visibility: hidden; }   /* the arrow, not focusable */
/* the cart count: a small round placeholder next to the bag */
#ow-chrome-header.ow-chrome-pending [data-shopping-cart-items] {
  /* where the store's count badge sits (.shopping-circle-header: absolute, top -2px, left 21px, 15px round) */
  display: block; position: absolute; top: -2px; left: 21px; z-index: 2; width: 15px; height: 15px; border-radius: 50%;
  background-color: #e6e6e6; animation: ow-chrome-reveal 0s linear 3s forwards;
}
@media (prefers-reduced-motion: no-preference) {
  #ow-chrome-header.ow-chrome-pending [data-nav-menu-sign-in] > a,
  #ow-chrome-header.ow-chrome-pending [data-nav-menu-my-profile] > a,
  #ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a,
  #ow-chrome-header.ow-chrome-pending [data-shopping-cart-items] { animation: ow-chrome-pulse 1s ease-in-out infinite alternate, ow-chrome-reveal 0s linear 3s forwards; }
  #ow-chrome-header.ow-chrome-pending #site-menu li.sign-in > a,
  #ow-chrome-header.ow-chrome-pending #site-menu li.sign-in + li > a,
  #ow-chrome-header.ow-chrome-pending #site-menu [data-nav-menu-languages] > a { animation: ow-chrome-reveal 0s linear 3s forwards; }
}

/* The announcement bar's reserved place (inc/store-chrome.php): the region's first-visit bar, invisible and inert, in the page flow
 * (the store's #poll-bar is fixed + height 0 until measured; here it is static so it takes its natural height) under a skeleton.
 * store-chrome.js swaps it for the visitor's own bar (same height for most visitors → no jump) or removes it. Without
 * JavaScript it folds away after 3 s (no bar can be rendered then). */
/* With JavaScript (`owb-js`, set first thing in <head>) store-chrome.js decides when the real text shows: on the visitor's state,
 * a failed request, or after 10 s. The 3-second reveal is only for pages without JavaScript; with it, a slow answer (2–5 s seen
 * on live for a signed-in admin) showed "SIGN IN" / "USA" before "MY PROFILE" / "EUROPE". */
.owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-sign-in] > a,
.owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-my-profile] > a,
.owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a,
.owb-js #ow-chrome-header.ow-chrome-pending #site-menu li.sign-in > a,
.owb-js #ow-chrome-header.ow-chrome-pending #site-menu li.sign-in + li > a,
.owb-js #ow-chrome-header.ow-chrome-pending #site-menu [data-nav-menu-languages] > a,
.owb-js #ow-chrome-header.ow-chrome-pending [data-shopping-cart-items],
.owb-js .ow-chrome-poll-bar.ow-poll-pending { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-sign-in] > a,
  .owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-my-profile] > a,
  .owb-js #ow-chrome-header.ow-chrome-pending [data-nav-menu-languages] > a,
  .owb-js #ow-chrome-header.ow-chrome-pending [data-shopping-cart-items],
  .owb-js .ow-chrome-poll-bar.ow-poll-pending { animation: ow-chrome-pulse 1s ease-in-out infinite alternate; }
}

@keyframes ow-poll-fold { to { max-height: 0; background-color: transparent; } }
.ow-chrome-poll-bar.ow-poll-pending { position: relative; overflow: hidden; max-height: 400px; background-color: #ececec;
  animation: ow-poll-fold 0s linear 3s forwards; }
@media (prefers-reduced-motion: no-preference) {
  .ow-chrome-poll-bar.ow-poll-pending { animation: ow-chrome-pulse 1s ease-in-out infinite alternate, ow-poll-fold 0s linear 3s forwards; }
}
.ow-chrome .ow-poll-ghost { visibility: hidden; pointer-events: none; }
.ow-chrome .ow-poll-ghost #poll-bar { position: static; height: auto !important; overflow: visible; }
.ow-chrome .ow-poll-ghost #pollbar-under,
.ow-chrome .ow-poll-ghost #poll-arrow { display: none; }

/* The region list's admin hint ("You see Region dropdown because…", assets/js/store-chrome.js bindRegionTooltip): Bootstrap 3's
 * bottom tooltip, as the store shows it (store-chrome.css carries only the base .tooltip rules). */
.ow-chrome .tooltip.fade { transition: opacity .15s linear; }
.ow-chrome .tooltip.bottom { margin-top: 3px; padding: 5px 0; }
.ow-chrome .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px; }
.ow-chrome .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
.ow-chrome .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }