/* Store header: brand and store at left, the two ways to search at the
   center (a red pill slides to the active one), time and actions at right.
   A thin Easy-colored rule closes the bar. */
.topbar{
  --header-height:100px;
  --hd-red:#AF1212;--hd-red-2:#D60000;--hd-ink:#16191B;--hd-ink-2:#5B636A;--hd-line:#ECEDEF;
  position:relative;height:var(--header-height);padding:0 clamp(24px,3.2vw,60px);gap:18px;
  background:linear-gradient(180deg,#fff 0%,#FCFCFC 100%);color:var(--hd-ink);
  border-bottom:0;box-shadow:0 10px 30px -18px rgba(22,25,27,.18);
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--hd-red) 0%,var(--hd-red-2) 62%,#F5C400 88%,#FDF737 100%);
}
.topbar .brand{gap:16px;flex-shrink:0}
.topbar .logo{width:60px;height:60px;filter:drop-shadow(0 4px 10px rgba(175,18,18,.22))}
.brand-copy{display:flex;flex-direction:column;gap:7px;text-align:left}
.brand-eyebrow{font-size:11px;font-weight:800;letter-spacing:2.2px;line-height:1;color:var(--hd-red)}
.topbar .claim{font-size:23px;line-height:1.05;letter-spacing:-.6px;font-weight:750;opacity:1;color:var(--hd-ink)}

/* Selector: two equal halves and a sliding thumb. */
.topbar .view-switch{
  position:relative;grid-template-columns:1fr 1fr;margin:0;gap:0;padding:6px;
  background:#F2F3F4;border:1px solid #E7E8EA;border-radius:22px;box-shadow:inset 0 1px 2px rgba(22,25,27,.06);
  min-width:min(560px,42vw);
}
/* Shown only when the 3D advisor is available (body.av3d), as before. */
body.av3d .topbar .view-switch{display:grid}
.topbar .view-switch::before{
  content:'';position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:16px;
  background:linear-gradient(135deg,var(--hd-red-2) 0%,var(--hd-red) 100%);
  box-shadow:0 8px 18px -6px rgba(175,18,18,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.topbar .view-switch:has(button[data-view="manual"][aria-pressed="true"])::before{transform:translateX(100%)}
.topbar .view-switch:not(:has(button[aria-pressed="true"]))::before{opacity:0}
.topbar .view-switch button{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:60px;padding:0 20px;border-radius:16px;background:none;color:var(--hd-ink-2);text-align:left;
  transition:color .25s;
}
.topbar .view-switch button:hover{background:none;color:var(--hd-ink)}
.topbar .view-switch button[aria-pressed="true"],.topbar .view-switch button[aria-pressed="true"]:hover{color:#fff}
.topbar .view-switch button[aria-pressed="true"]::after{content:none}
.vs-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#fff;color:var(--hd-red);
  box-shadow:0 1px 2px rgba(22,25,27,.08);flex-shrink:0;transition:background .25s,color .25s}
.vs-ic .ic{width:19px;height:19px}
.topbar .view-switch button[aria-pressed="true"] .vs-ic{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.vs-txt{display:flex;flex-direction:column;gap:3px;line-height:1}
.vs-label{font-size:16px;font-weight:750;letter-spacing:-.2px;white-space:nowrap}
.vs-hint{font-size:12px;font-weight:550;opacity:.72;white-space:nowrap}

/* Right side: time, admin, home. */
.top-clock{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-right:18px;margin-right:4px;border-right:1px solid var(--hd-line);line-height:1}
.tc-time{font-size:24px;font-weight:750;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--hd-ink)}
.tc-date{font-size:12px;font-weight:600;color:var(--hd-ink-2);white-space:nowrap}
.topbar .btn-voz,.topbar .btn-home{min-height:52px;height:52px;border-radius:16px;box-shadow:none}
.topbar .btn-voz{width:52px;padding:0;border:1px solid var(--hd-line);background:#fff;color:#7A838A;display:grid;place-items:center}
.topbar .btn-voz .ic{width:22px;height:22px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.topbar .btn-voz:hover{background:#fff;color:var(--hd-red);border-color:#E3C9C9}
.topbar .btn-voz:hover .ic{transform:rotate(60deg)}
.topbar .btn-home{padding:0 22px;gap:10px;font-size:16px;font-weight:700;color:#fff;background:var(--hd-ink);border:1px solid var(--hd-ink)}
.topbar .btn-home .ic{width:20px;height:20px}
.topbar .btn-home:hover{background:#2A2F33;color:#fff}
.topbar :is(button,a):focus-visible{outline:3px solid var(--hd-red);outline-offset:4px}
main{height:calc(100% - 100px)}

@media(min-width:1600px){.topbar{--header-height:110px}.topbar .claim{font-size:25px}.topbar .view-switch button{min-height:64px}.vs-label{font-size:18px}.tc-time{font-size:27px}main{height:calc(100% - 110px)}}
@media(max-width:1280px){.top-clock{display:none}}
@media(max-width:1000px){.topbar{gap:12px;padding:0 22px}.topbar .brand{gap:12px}.topbar .logo{width:52px;height:52px}.topbar .claim{font-size:19px}.brand-eyebrow{font-size:9.5px;letter-spacing:1.6px}
  .topbar .view-switch{min-width:0}.vs-hint{display:none}.topbar .view-switch button{padding:0 14px;min-height:54px}.vs-ic{width:30px;height:30px}.topbar .btn-home{padding:0 16px}}
@media(max-width:760px){.topbar{--header-height:144px;flex-wrap:wrap;align-content:center;gap:10px 12px;padding:12px 18px}.topbar .logo{width:46px;height:46px}.topbar .brand{margin-right:auto}.topbar .spacer{display:none}
  .topbar .view-switch{order:4;width:100%;padding:4px;border-radius:16px}.topbar .view-switch::before{top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:12px}
  .topbar .view-switch button{min-height:44px;border-radius:12px;gap:8px}.vs-ic{width:26px;height:26px;border-radius:8px}.vs-ic .ic{width:15px;height:15px}.vs-label{font-size:14px}
  .topbar .btn-voz,.topbar .btn-home{height:44px;min-height:44px;border-radius:13px}.topbar .btn-voz{width:44px}.topbar .btn-home{padding:0 14px;font-size:14px}main{height:calc(100% - 144px)}}
@media(prefers-reduced-motion:reduce){.topbar .view-switch::before,.topbar .view-switch button,.vs-ic,.topbar .btn-voz .ic{transition:none}}