/* ============================================================================
   Windmill ID — shared shell (header, admin sub-nav, footer). WP-Shell §3.4.
   Scoped to .wid-shell: page bodies keep their own styling. Same file on the
   site and the admin (synced by scripts/sync-shell-assets.sh), so the two
   render pixel-identically. Brand green + the admin's type stack, header and
   footer only.
   ========================================================================== */
.wid-shell{
  --wid-brand:#84c02a; --wid-brand-d:#6ea31f; --wid-ink:#173300; --wid-ink-2:#3c4a30;
  --wid-muted:#6f7a63; --wid-surface:#f5f8f0; --wid-surface-2:#eef3e5; --wid-border:#e4ebda;
  --wid-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wid-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--wid-ui);font-size:14px;line-height:1.4;color:var(--wid-ink);
  -webkit-font-smoothing:antialiased;box-sizing:border-box}
.wid-shell *,.wid-shell *::before,.wid-shell *::after{box-sizing:border-box}

/* Skip link: first tab stop on every page. */
.wid-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#1e2a17;color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:13px;font-family:"Hanken Grotesk",system-ui,sans-serif}
.wid-skip:focus{left:0;color:#fff;outline:2.5px solid #557f16;outline-offset:2px}

/* ---- header --------------------------------------------------------------- */
.wid-header{margin:0 0 24px}
.wid-shell .wid-nav.navbar{background:var(--wid-brand) !important;padding:0;min-height:60px;box-shadow:0 1px 0 rgba(23,51,0,.12)}
.wid-shell .wid-bar{display:flex;align-items:center;gap:14px;min-height:60px;padding-top:0;padding-bottom:0}
.wid-shell .wid-brand.navbar-brand{display:inline-flex;align-items:center;background:#fff;border-radius:8px;
  padding:5px 8px;margin:0;line-height:0;box-shadow:0 1px 2px rgba(23,51,0,.15)}
.wid-shell .wid-brand img{display:block;width:200px;height:36px;max-width:100%}
.wid-shell .wid-toggler.navbar-toggler{border:1px solid rgba(23,51,0,.35);padding:5px 8px;border-radius:8px}
.wid-shell .wid-toggler .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(23,51,0,.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.wid-shell .wid-nav .nav-link{color:var(--wid-ink) !important;font-weight:600;font-size:16px;padding:8px 11px;
  display:inline-flex;align-items:center;gap:6px;border-radius:8px;position:relative;white-space:nowrap;text-decoration:none}
.wid-shell .wid-nav .nav-link:hover{background:rgba(255,255,255,.28);color:#000 !important}
.wid-shell .wid-nav .nav-link.is-current{background:rgba(255,255,255,.55);box-shadow:inset 0 -2px 0 var(--wid-ink)}
.wid-shell .wid-nav .nav-link:focus-visible,.wid-shell .wid-subnav a:focus-visible,.wid-footer a:focus-visible{
  outline:2.5px solid #557f16;outline-offset:2px;border-radius:6px}
.wid-shell .wid-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:10px;background:#b23a4b;color:#fff;font-size:11.5px;font-weight:800;line-height:1}
/* Identity cluster: width reserved so the primary nav never jumps when shell.js swaps clusters. */
.wid-shell .wid-identity{align-items:center}
.wid-shell .wid-cluster{list-style:none;display:flex}
.wid-shell .wid-cluster > .navbar-nav{flex-direction:row;align-items:center;gap:2px}
.wid-shell .wid-chip{background:#fff;border-radius:999px;padding:6px 12px !important;font-weight:700;max-width:260px;
  overflow:hidden;text-overflow:ellipsis}
.wid-shell .wid-legacy{font-weight:500;color:var(--wid-muted);font-size:12px}
.wid-shell .wid-nav .nav-link.wid-cta{background:var(--wid-ink);color:#fff !important;border-radius:999px;padding:7px 13px}
.wid-shell .wid-nav .nav-link.wid-cta:hover{background:#000;color:#fff !important}
.wid-shell .wid-signout{opacity:.9}
/* E5 (8 Oct 2026): the header expands at 992 px (navbar-expand-lg) — at 768 a signed-in visitor's items did not fit
   (the tablet scrolled sideways by up to 113 px); tablets get the menu button. */
@media (min-width:992px){
  .wid-shell .wid-identity{min-width:240px;justify-content:flex-end}
  .wid-shell .wid-primary{margin-left:6px}
}
/* Steve, 17 Oct 2026: the nav text is 16px (Bootstrap's default, as the old windmill-id.com; 14px since 8 Sep). In the
   960 px container (992–1199 px) a signed-in Admin's nine links then squeezed the logo to 122 px (183 at 14px), so the
   links' side padding is 5px there; 11px from 1200 px. header-nav-size-check.js measures it.
   Steve, 17 Oct 2026 (later): Orders carries a red count of pending orders beside Basket's. Both counts on an Admin's
   header squeezed the logo to 160 px again, so in this range the side padding is 3px, the icon/label/count gap 4px,
   the logo-to-links gap 8px and the main links' left margin 0 (PREVIEW_COUNTS=1 measures the widest case: 16 px spare). */
@media (min-width:992px) and (max-width:1199.98px){
  .wid-shell .wid-nav .nav-link{padding-left:3px;padding-right:3px;gap:4px}
  .wid-shell .wid-bar{gap:8px}
  .wid-shell .wid-primary{margin-left:0}
}
@media (max-width:991.98px){
  .wid-shell .wid-collapse{padding:8px 0 12px}
  .wid-shell .wid-cluster > .navbar-nav{flex-direction:column;align-items:stretch}
  .wid-shell .wid-identity{border-top:1px solid rgba(23,51,0,.18);margin-top:6px;padding-top:6px}
  .wid-shell .wid-chip{max-width:none}
  .wid-shell .wid-cluster{display:block}
  .wid-shell .wid-cluster > .navbar-nav .nav-link{display:flex;justify-content:flex-start;border-radius:8px}
  /* Steve, 18 Oct 2026: the account links start at the main links' left edge (align-items:center above centred them,
     about 140 px in); the name chip and Create account stay pills. */
  .wid-shell .wid-identity{align-items:stretch}
  .wid-shell .wid-cluster > .navbar-nav .wid-chip,.wid-shell .wid-cluster > .navbar-nav .wid-cta{width:fit-content}
}

/* ---- admin sub-nav (second row, same look as the SKU Manager filter row) --- */
.wid-shell .wid-subnav{background:#fff;border-bottom:1px solid var(--wid-border)}
.wid-shell .wid-subnav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px;min-height:42px;align-items:stretch}
.wid-shell .wid-subnav-list a{display:inline-flex;align-items:center;padding:0 12px;min-height:42px;color:var(--wid-ink-2);
  font-weight:600;font-size:13.5px;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.wid-shell .wid-subnav-list a:hover{color:var(--wid-ink);background:var(--wid-surface)}
.wid-shell .wid-subnav-list a.is-current{color:var(--wid-ink);border-bottom-color:var(--wid-brand)}

/* ---- footer --------------------------------------------------------------- */
.wid-footer{margin-top:40px;background:var(--wid-surface);border-top:1px solid var(--wid-border);padding:30px 0 18px;color:var(--wid-ink-2)}
.wid-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:767.98px){.wid-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.wid-footer-grid{grid-template-columns:1fr}}
.wid-footer-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--wid-muted);margin:0 0 10px}
.wid-footer-links{list-style:none;margin:0;padding:0}
.wid-footer-links li{margin:0 0 7px}
.wid-footer a{color:var(--wid-ink-2);text-decoration:none}
.wid-footer a:hover{color:var(--wid-ink);text-decoration:underline}
.wid-footer-phone{font-size:15px;margin:0 0 4px}
.wid-footer-phone a{font-weight:800;color:var(--wid-ink)}
.wid-footer-email{margin:0 0 12px;font-size:13.5px}
.wid-footer-role{border-top:1px solid var(--wid-border);padding-top:10px}
.wid-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--wid-border);margin-top:22px;padding-top:12px}
.wid-copy{margin:0;font-size:12.5px;color:var(--wid-muted)}
/* The version line (Steve, 6 Oct 2026): small, muted, on every page; the dot says which environment at a glance.
   Green = Development, Blue = Live — tokens, with a dark-scheme pair, both readable on light and dark surfaces. */
.wid-shell{--wid-env-dev:#3d8b1f;--wid-env-live:#1f6fd1}
@media (prefers-color-scheme:dark){.wid-shell{--wid-env-dev:#7cc94f;--wid-env-live:#6fa8ff}}
.wid-version{margin:0;font-family:var(--wid-mono);font-size:11.5px;color:var(--wid-muted);display:inline-flex;align-items:center;gap:6px}
.wid-timing{margin:0;font-family:var(--wid-mono);font-size:11.5px;color:var(--wid-muted)}
.wid-env-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.wid-env-dev{background:var(--wid-env-dev)}
.wid-env-live{background:var(--wid-env-live)}

/* WP-D1 F1 (Steve, 29 Sep): THE header row — breadcrumbs left; Edit · SEO · Help (an Admin's) and the USER-ID
   right — part of the shell header on every storefront and admin page (templates/shell/crumbrow.phtml). The rules
   moved here from the site's style.css and the admin's admin-shell.css so both apps draw one element one way. */
.wid-crumbwrap { padding-top: .5rem; padding-bottom: .25rem; }
.shop-crumbrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.shop-crumbrow .breadcrumb { margin-bottom: 0; }
.shop-crumbrow__tools {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.shop-crumbrow__user {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .875rem;
}
@media (max-width: 575.98px) {
    .shop-crumbrow { gap: .35rem; }
}

/* ---- E5 (8 Oct 2026): tap targets of at least 44 × 44 px below 992 px (phones and tablets) ------------------------ */
@media (max-width:991.98px){
  .wid-shell .navbar-toggler{min-width:44px;min-height:44px}
  .wid-shell .wid-cluster > .navbar-nav .nav-link,.wid-shell .wid-primary .nav-link{min-height:44px;display:flex;align-items:center}
  .wid-footer-links a,.wid-footer-phone a,.wid-footer-email a{display:inline-flex;align-items:center;min-height:44px}
  .wid-shell .wid-skip:focus,.wid-shell .visually-hidden-focusable:focus{min-height:44px;display:inline-flex;align-items:center}
}


/* E6 phase 3: the "We set no cookies" badge (token mode, a passed zero-cookie check) — the footer's text line size. */
.wid-nocookies { margin: 0; font-size: inherit; }
.wid-nocookies a { display: inline-flex; align-items: center; gap: .35em; color: inherit; }
/* Steve, 10 Oct: the logo is the size of the footer's text line, in the footer's own text colour (currentColor). */
.wid-nocookies__logo { width: 1.2em; height: 1.2em; width: 1lh; height: 1lh; flex: none; color: inherit; }
.wid-nocookies a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }