/* Digital FSC V8 — role-aware, single-destination navigation. Responsive and compact. */
:root { --orange:#f38b31; --orange2:#ffb46b; --bg:#11100e; --surface:#1d1b18; --elev:#26221e; --border:#3b332b; --muted:#ada49b }
html { -webkit-text-size-adjust:100%; scroll-padding-top:78px }
body { max-width:100%; overflow-x:hidden }
#app { min-height:100dvh; overflow-x:clip }
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #ffb267; outline-offset:3px }
/* Hide V7's second horizontal nav. Company navigation remains on concept homepage only. */
.v8-top { position:relative; z-index:40; background:#191714; border-bottom:1px solid #383027 }
.v8-top-inner { width:min(1180px,100%); margin:auto; min-height:74px; padding:10px 23px; display:flex; align-items:center; gap:18px }
.v8-appbrand { display:flex; align-items:center; gap:12px; min-width:0; margin-right:auto }
.v8-cup { display:grid; place-items:center; flex:none; width:43px; height:43px; background:linear-gradient(135deg,#f59a41,#e87523); color:#311a0e; border-radius:14px; font-size:25px }
.v8-title { font-family:'Outfit',sans-serif; letter-spacing:-.035em; color:#fff8f1; font-size:19px; font-weight:800; line-height:1.1; white-space:nowrap }
.v8-title small { display:block; margin-top:4px; color:#a59c91; font-family:'DM Sans',sans-serif; font-size:9px; font-weight:800; letter-spacing:.1em }
.v8-one-nav { display:flex; align-items:center; margin-left:auto }
.v8-primary-tab { border:0; padding:12px 20px; min-width:119px; border-radius:12px; background:#f38b31; color:#261305; font-size:13px; font-weight:900; white-space:nowrap }
.v8-actions { display:flex; gap:8px; align-items:center; min-width:0 }
.v8-menu { position:relative; flex:none }
.v8-menu summary { display:flex; align-items:center; justify-content:center; gap:7px; list-style:none; cursor:pointer; border:1px solid #51443a; border-radius:12px; min-height:43px; padding:10px 13px; font-size:13px; font-weight:750; color:#ede6dd; background:#29241e }
.v8-menu summary::-webkit-details-marker { display:none }
.v8-menu[open] summary { border-color:#ad692e }
.v8-menu-panel { position:absolute; top:calc(100% + 9px); right:0; z-index:50; width:220px; display:grid; gap:4px; padding:9px; background:#27211c; border:1px solid #67503b; border-radius:16px; box-shadow:0 18px 48px #000a }
.v8-menu-panel button { border:0; background:transparent; color:#f7efe7; border-radius:9px; padding:13px 12px; text-align:left; font-size:13px; font-weight:700 }
.v8-menu-panel button:hover { background:#f38b3120 }
.v8-role-login,.v8-logout { background:none; border:1px solid #493a2d; border-radius:10px; padding:10px; color:#bbb0a2; font-size:12px; font-weight:700; white-space:nowrap }
.v8-shell { padding-top:28px; padding-bottom:48px }
.gj-loyalty-frame .v8-shell { padding-top:28px }
.v8-frame .heading { margin-bottom:20px }
.v8-frame .heading h1 { margin:4px 0 3px }
.v8-frame .card { border-color:#38322b; background:#1d1a17; box-shadow:0 8px 28px #00000022 }
.v8-frame .card h2 { font-size:clamp(20px,2vw,26px) }
.v8-frame .grid2 { gap:16px }
.v8-frame .form { gap:13px }
.v8-frame .form label:not(.checkline) { font-size:12px; margin-bottom:7px }
.v8-frame input { min-height:50px }
.v8-frame .buttons { gap:9px }
.v8-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; width:min(1180px,100%); margin:auto; padding:20px 24px 26px; font-size:11px; color:#7f786e; border-top:1px solid #302923 }
.v8-footer span:last-child { text-align:right }
/* POS: a much smaller, more focused checkout. */
.v8-pos-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:19px }
.v8-pos-head h1 { font:800 clamp(34px,4vw,49px)/1.03 'Outfit',sans-serif; margin:4px 0 5px; letter-spacing:-.05em }
.v8-pos-head p { color:#b7a99c; margin:0; font-size:13px }
.v8-secure-pill { border:1px solid #4d4835; background:#29291d; color:#e0c89b; border-radius:40px; font-size:11px; font-weight:800; white-space:nowrap; padding:9px 13px }
.v8-pos-mode { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 22px }
.v8-pos-mode button { display:flex; justify-content:center; align-items:center; gap:12px; border-radius:14px; padding:16px 10px; font-size:15px; font-weight:850; background:#29221c; color:#edd4be; border:1px solid #715039; min-height:58px }
.v8-pos-mode button.selected { background:linear-gradient(135deg,#f9a14f,#f1862a); color:#2c1607; border-color:#f39339 }
.v8-pos-mode button>span { font-size:19px }
.v8-pos-grid { align-items:start }
.v8-pos-grid .card { padding:26px 27px }
.v8-pos-grid .card h2 { margin-bottom:18px }
.v8-pos-form { gap:18px }
.v8-pos-form input { background:#161411; border-color:#40362c }
.v8-pos-form .v8-paid { display:flex; align-items:center; padding:12px 14px; min-height:51px; margin-bottom:0; border:1px solid #40382e; background:#29251f }
.v8-pos-form .primary { min-height:56px; font-size:15px; margin-top:3px }
.v8-recent-list { gap:7px }
.v8-recent { padding:13px 14px; background:#27231e; border:1px solid #302a24; border-radius:13px }
.v8-recent strong { display:block; font-weight:800; font-size:12px; overflow-wrap:anywhere }
.v8-recent small { display:block; font-size:11px; margin-top:5px }
.v8-recent .pill { font-size:10px; padding:6px 10px; flex:none }
.v8-pos-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:20px 2px }
.v8-inline-link { display:inline-flex; background:transparent; border:none; color:#b9a99c; font-size:12px; font-weight:700; gap:12px; align-items:center; padding:8px 0 }
.v8-inline-link span { color:#ec974e }
.v8-issued-details { margin-top:16px; border:1px solid var(--border); border-radius:16px; background:#201b17 }
.v8-issued-details>summary { padding:14px 18px; font-size:13px; font-weight:850; cursor:pointer; display:flex; justify-content:space-between; list-style:none }
.v8-issued-details summary::-webkit-details-marker { display:none }
.v8-issued-body { display:grid; gap:8px; padding:0 10px 10px }
.v8-staff-link { text-align:center; color:#bba78f; font-size:12px; margin:18px 0 0 }
.v8-staff-link summary { display:inline-block; cursor:pointer; padding:9px }
.v8-staff-link .textbutton { display:block; margin:auto }
/* No unnecessary nav overflow and no horizontal mobile crop. */
@media(max-width:760px) {
 .v8-top-inner { min-height:67px; padding:9px 14px; gap:10px }
 .v8-cup { width:36px; height:36px; border-radius:11px; font-size:21px }
 .v8-appbrand { gap:9px }
 .v8-title { font-size:16px }
 .v8-title small { font-size:8px; letter-spacing:.06em; margin-top:2px }
 .v8-one-nav { margin-left:auto }
 .v8-primary-tab { padding:11px 12px; min-width:0; min-height:39px; font-size:12px; border-radius:10px }
 .v8-actions { gap:6px }
 .v8-menu summary { min-height:39px; padding:8px 10px; border-radius:10px; font-size:12px }
 .v8-role-login { padding:8px; font-size:10px }
 .v8-logout { padding:9px }
 .v8-frame .gj-free-intro { padding:24px 16px 0 }
 .v8-frame .gj-free-copy h1 { font-size:37px }
 .gj-loyalty-frame .v8-shell { padding:22px 14px 52px }
 .v8-pos-head { gap:10px; margin-bottom:16px }
 .v8-pos-head h1 { font-size:37px }
 .v8-secure-pill { font-size:10px; padding:7px 8px }
 .v8-pos-mode { gap:8px; margin-bottom:16px }
 .v8-pos-mode button { padding:12px 5px; font-size:12px; min-height:51px; gap:4px }
 .v8-pos-mode button>span { font-size:17px }
 .v8-pos-grid .card { padding:19px; border-radius:18px }
 .v8-pos-grid .card h2 { font-size:23px }
 .v8-pos-form input { font-size:16px }
 .v8-footer { padding:18px 16px 25px; justify-content:center }
 .v8-footer span:last-child { text-align:center }
}
@media(max-width:385px){.v8-title small {display:none}.v8-title{font-size:15px}.v8-pos-mode button{font-size:11px}.v8-secure-pill{font-size:9px}}
@media(prefers-reduced-motion:reduce){.v8-frame .card,.v8-frame .primary,.v8-menu-panel{transition:none!important;animation:none!important}}