@font-face{
  font-family:BarberOswald;
  src:url("template-fonts/Oswald-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:BarberOswald;
  src:url("template-fonts/Oswald-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-display:swap
}
@font-face{
  font-family:BarberRoboto;
  src:url("template-fonts/Roboto-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:BarberRoboto;
  src:url("template-fonts/Roboto-Medium.woff2") format("woff2");
  font-weight:500;
  font-display:swap
}
:root{
  color-scheme:light;
  --ink:#171719;
  --muted:#67676f;
  --paper:#f5f4f0;
  --white:#fff;
  --soft:#ebe9e3;
  --deep:#111113;
  --panel:#fff;
  --line:#dedbd4;
  --red:#eb1616;
  --red-dark:#bd1111;
  --red-text:#bd1111;
  --red-text-on-dark:#f54343;
  --green:#187b47;
  --shadow:0 22px 60px rgba(17,17,19,.12);
  --focus-ring:#1769aa;
  --status-pending-bg:#fff3cd;
  --status-pending-ink:#6b4c00;
  --status-pending-line:#e4bd48;
  --status-waiting-bg:#e9f2ff;
  --status-waiting-ink:#174c86;
  --status-waiting-line:#8bb9e8;
  --status-confirmed-bg:#e5f5eb;
  --status-confirmed-ink:#17623c;
  --status-confirmed-line:#86c7a2;
  --status-on-process-bg:#eee9ff;
  --status-on-process-ink:#4d368c;
  --status-on-process-line:#aa98df;
  --status-completed-bg:#ddf4e6;
  --status-completed-ink:#105d35;
  --status-completed-line:#6fbd91;
  --status-cancelled-bg:#fde7e7;
  --status-cancelled-ink:#922020;
  --status-cancelled-line:#e49b9b;
  --status-active-bg:#ddf4e6;
  --status-active-ink:#105d35;
  --status-active-line:#6fbd91;
  --status-inactive-bg:#ececef;
  --status-inactive-ink:#56565e;
  --status-inactive-line:#bdbdc4;
  --s1:8px;
  --s2:12px;
  --s3:16px;
  --s4:24px;
  --s5:32px;
  --s6:48px;
  --s7:72px
}
.topbar,.notification-panel,.home-hero,.home-section.dark,.overview-item,.page-heading,.auth-copy,.booking-summary,.footer{
  --red-text:var(--red-text-on-dark)
}
* {
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.6 BarberRoboto,Arial,sans-serif
}
body.menu-open{
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img{
  display:block;
  max-width:100%
}
button,input,select,textarea{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
input,select,textarea{
  width:100%;
  min-height:50px;
  border:1px solid #d3d0c9;
  border-radius:0;
  background:#fff;
  color:var(--ink);
  padding:12px 14px;
  outline:0
}
textarea{
  resize:vertical
}
input:focus,select:focus,textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(235,22,22,.1)
}
label{
  display:grid;
  gap:7px;
  color:#3e3e42;
  font-size:13px;
  font-weight:500
}
fieldset{
  min-width:0;
  margin:0;
  border:0;
  padding:0
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2,h3,legend,.btn,.nav a,.nav-admin,.login-link,.subnav a{
  font-family:BarberOswald,Impact,sans-serif
}
h1,h2,h3{
  margin-bottom:var(--s3);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em
}
p {
  color:var(--muted)
}
[hidden]{
  display:none!important
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  padding:0!important
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px
}
:where(.option-card,.barber-option):has(input:focus-visible){
  border-color:var(--focus-ring);
  box-shadow:0 0 0 3px rgba(23,105,170,.2)
}
:where(.payment-choice):has(input:focus-visible){
  border-color:var(--focus-ring);
  box-shadow:0 0 0 3px rgba(23,105,170,.2)
}
:where(button,.btn,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select){
  min-height:44px
}
:where(.pagination a,.pagination button,.footer a,.settings-links a,.dashboard-shortcuts a,.text-link,.link-danger){
  min-height:44px
}
:where(.text-link,.link-danger){
  display:inline-flex;
  align-items:center
}
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:86px;
  border-bottom:1px solid #303034;
  background:rgba(17,17,19,.98);
  box-shadow:0 8px 28px rgba(0,0,0,.15)
}
.topbar-inner{
  display:flex;
  width:min(1320px,calc(100% - 48px));
  height:100%;
  margin:auto;
  align-items:center;
  gap:var(--s4)
}
.brand,.account-link,.footer-brand{
  display:flex;
  align-items:center;
  gap:var(--s2)
}
.brand{
  flex:0 0 auto;
  color:#fff
}
.brand-mark{
  display:grid;
  width:76px;
  height:52px;
  flex:0 0 auto;
  place-items:center;
  overflow:hidden;
  background:#0d0d0f
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain
}
.brand-copy strong,.brand-copy small,.account-meta strong,.account-meta small,.footer-brand strong,.footer-brand small{
  display:block
}
.account-link,.account-meta{
  min-width:0
}
.account-meta strong,.account-meta small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.brand strong{
  color:#fff;
  font-size:20px;
  letter-spacing:.045em;
  text-transform:uppercase
}
.brand small,.account-meta small{
  color:#929298;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.navigation{
  display:flex;
  min-width:0;
  flex:1;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s4)
}
.nav,.staff-nav,.account,.actions,.inline-form,.status-form,.row-actions,.queue-actions{
  display:flex;
  align-items:center
}
.nav{
  gap:2px
}
.nav a,.login-link,.nav-admin{
  position:relative;
  color:#d1d1d5;
  font-size:13px;
  letter-spacing:.06em;
  padding:32px 9px 29px;
  text-transform:uppercase
}
.nav a:hover,.login-link:hover,.nav-admin:hover,.nav a.active,.login-link.active,.nav-admin.active{
  color:#fff
}
.nav a.active:after,.login-link.active:after,.nav-admin.active:after{
  content:"";
  position:absolute;
  right:10px;
  bottom:22px;
  left:10px;
  height:2px;
  background:var(--red)
}
.account{
  gap:7px
}
.staff-notifications{
  position:relative;
  flex:0 0 auto
}
.notification-trigger{
  position:relative;
  display:inline-flex;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid #3d3d42;
  background:#19191c;
  color:#fff;
  cursor:pointer
}
.notification-trigger:hover,.notification-trigger[aria-expanded=true]{
  border-color:#6a6a70;
  background:#242428
}
.notification-trigger svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.notification-trigger-label{
  display:none
}
.notification-count{
  position:absolute;
  top:-7px;
  right:-7px;
  display:grid;
  min-width:22px;
  height:22px;
  padding:0 5px;
  place-items:center;
  border:2px solid #111113;
  border-radius:12px;
  background:var(--red);
  color:#fff;
  font:700 11px Arial,sans-serif
}
.notification-panel{
  position:absolute;
  top:calc(100% + 13px);
  right:0;
  z-index:12;
  width:min(390px,calc(100vw - 32px));
  border:1px solid #3a3a3f;
  background:#171719;
  box-shadow:0 22px 60px rgba(0,0,0,.46)
}
.notification-panel[hidden]{
  display:none
}
.notification-panel>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid #323237
}
.notification-panel h2{
  margin:2px 0 0;
  color:#fff;
  font-size:22px
}
.notification-panel-status{
  display:grid;
  justify-items:end;
  gap:2px
}
.notification-panel-status>span{
  color:#a9a9b0;
  font-size:12px;
  white-space:nowrap
}
.notification-refresh-status{
  color:#b8b8bd;
  font-size:10px;
  letter-spacing:.04em;
  white-space:nowrap
}
.notification-refresh-status.is-loading{
  color:#efc86e
}
.notification-refresh-status.is-error{
  color:#ff8d8d
}
.notification-list{
  max-height:min(430px,60vh);
  overflow-y:auto
}
.notification-item{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  align-items:start;
  gap:11px;
  min-height:88px;
  padding:15px 18px;
  border-bottom:1px solid #2e2e32;
  color:#fff
}
.notification-item:hover,.notification-item:focus-visible{
  background:#222226
}
.notification-dot{
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(236,28,36,.13)
}
.notification-item>span:nth-child(2){
  display:grid;
  min-width:0;
  gap:3px
}
.notification-item strong,.notification-item small,.notification-item time{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.notification-item small,.notification-item time{
  color:#aaaab1;
  font-size:11px
}
.notification-item>b{
  color:#fff;
  font-size:12px;
  white-space:nowrap
}
.notification-empty{
  display:grid;
  gap:6px;
  padding:28px 20px;
  text-align:center
}
.notification-empty strong{
  color:#fff
}
.notification-empty span{
  color:#aaaab1;
  font-size:12px
}
.notification-footer-link{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase
}
.notification-footer-link:hover{
  background:var(--red)
}
.booking-notification-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:160;
  display:grid;
  width:min(360px,calc(100vw - 32px));
  gap:3px;
  padding:17px 20px;
  border-left:4px solid var(--red);
  background:#171719;
  color:#fff;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(18px);
  transition:.22s ease
}
.booking-notification-toast.visible{
  opacity:1;
  transform:translateY(0)
}
.booking-notification-toast span{
  color:#b9b9c0;
  font-size:12px
}
.account-link{
  border-left:1px solid #3a3a3f;
  margin-left:5px;
  padding:4px 7px 4px 14px;
  color:#fff
}
.account-meta strong{
  font-size:12px
}
.avatar,.account-avatar{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-weight:600
}
.avatar{
  width:34px;
  height:34px
}
.avatar.large{
  width:64px;
  height:64px;
  font-size:24px
}
.account-avatar{
  width:46px;
  height:46px
}
.menu-toggle{
  display:none;
  border:1px solid #4b4b50;
  background:transparent;
  color:#fff
}
.menu-toggle b{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0)
}
.menu-backdrop{
  display:none
}
.main-shell{
  width:min(1320px,calc(100% - 48px));
  min-height:calc(100vh - 336px);
  margin:auto;
  padding:var(--s6) 0 var(--s7)
}
body[data-view=home] .main-shell{
  width:100%;
  padding:0
}
.actions{
  flex-wrap:wrap;
  gap:10px
}
.btn{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  padding:11px 22px;
  text-transform:uppercase;
  transition:.18s ease
}
.btn:hover{
  transform:translateY(-2px)
}
.btn.primary{
  background:var(--red);
  color:#fff
}
.btn.primary:hover{
  background:var(--red-dark)
}
.btn.ghost{
  border-color:#a9a69f;
  color:var(--ink)
}
.btn.ghost:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.btn.light{
  border-color:rgba(255,255,255,.65);
  color:#fff
}
.btn.light:hover{
  background:#fff;
  color:var(--ink)
}
.btn.danger{
  border-color:#efb8b8;
  background:#fff5f5;
  color:#b20e0e
}
.btn.danger:hover{
  border-color:#b20e0e;
  background:#b20e0e;
  color:#fff
}
.btn.small{
  min-height:44px;
  font-size:12px;
  padding:8px 14px
}
.btn.wide{
  width:100%
}
.topbar .btn.ghost{
  border-color:#55555b;
  color:#fff
}
.topbar .btn.ghost:hover{
  border-color:var(--red);
  color:#fff
}
.text-link,.link-danger{
  border:0;
  background:transparent;
  color:var(--red-text);
  font-weight:500;
  padding:0
}
.link-danger{
  cursor:pointer
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
  color:var(--red-text);
  font:600 13px/1.2 BarberOswald,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase
}
.eyebrow:before{
  content:"";
  width:24px;
  height:2px;
  background:currentColor
}
.tag{
  display:inline-flex;
  width:max-content;
  background:#f7eaea;
  color:#ad1717;
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  padding:5px 8px;
  text-transform:uppercase
}
:where(.tag,.status-badge)[class*="status-"]{
  border-width:1px;
  border-style:solid;
  font-weight:600
}
:where(.tag,.status-badge).status-pending{
  border-color:var(--status-pending-line);
  background:var(--status-pending-bg);
  color:var(--status-pending-ink)
}
:where(.tag,.status-badge).status-waiting{
  border-color:var(--status-waiting-line);
  background:var(--status-waiting-bg);
  color:var(--status-waiting-ink)
}
:where(.tag,.status-badge).status-confirmed{
  border-color:var(--status-confirmed-line);
  background:var(--status-confirmed-bg);
  color:var(--status-confirmed-ink)
}
:where(.tag,.status-badge).status-on_process{
  border-color:var(--status-on-process-line);
  background:var(--status-on-process-bg);
  color:var(--status-on-process-ink)
}
:where(.tag,.status-badge).status-completed{
  border-color:var(--status-completed-line);
  background:var(--status-completed-bg);
  color:var(--status-completed-ink)
}
:where(.tag,.status-badge).status-cancelled{
  border-color:var(--status-cancelled-line);
  background:var(--status-cancelled-bg);
  color:var(--status-cancelled-ink)
}
:where(.tag,.status-badge).status-active{
  border-color:var(--status-active-line);
  background:var(--status-active-bg);
  color:var(--status-active-ink)
}
:where(.tag,.status-badge).status-inactive{
  border-color:var(--status-inactive-line);
  background:var(--status-inactive-bg);
  color:var(--status-inactive-ink)
}
[data-queue-status=pending]{
  border-left-color:var(--status-pending-line)
}
[data-queue-status=waiting]{
  border-left-color:var(--status-waiting-line)
}
[data-queue-status=confirmed]{
  border-left-color:var(--status-confirmed-line)
}
[data-queue-status=on_process]{
  border-left-color:var(--status-on-process-line)
}
[data-queue-status=completed]{
  border-left-color:var(--status-completed-line)
}
[data-queue-status=cancelled]{
  border-left-color:var(--status-cancelled-line)
}
.muted{
  color:var(--muted)
}
.alert{
  position:fixed;
  top:102px;
  right:24px;
  z-index:180;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 30px;
  width:min(420px,calc(100% - 48px));
  align-items:center;
  gap:13px;
  overflow:hidden;
  border:1px solid #303034;
  border-radius:8px;
  background:#151517;
  color:#fff;
  padding:13px 13px 13px 14px;
  box-shadow:0 20px 52px rgba(17,17,19,.28);
  animation:alert-in .25s ease both;
  transition:opacity .2s ease,transform .2s ease
}
.alert.success{
  border-color:#303034;
  background:#151517;
  color:#fff
}
.alert.error{
  border-color:#5b2424;
  background:#1c1415;
  color:#fff
}
.alert-symbol{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:50%;
  background:#dff4e8;
  color:#08733e;
  font-size:18px;
  font-weight:700
}
.alert.error .alert-symbol{
  background:#ffe3e3;
  color:#b41218
}
.alert-copy{
  display:grid;
  min-width:0;
  gap:2px
}
.alert-copy strong{
  color:#fff;
  font:600 13px BarberOswald,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase
}
.alert-copy span{
  color:#c8c8cd;
  font-size:13px;
  line-height:1.4
}
.alert button{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 auto;
  place-items:center;
  border:0;
  background:transparent;
  color:currentColor;
  font-size:24px
}
.alert button:hover{
  background:#29292d
}
.alert.leaving{
  opacity:0;
  transform:translateY(-10px)
}
@keyframes alert-in{
  from{opacity:0;transform:translateY(-12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.empty-state{
  border:1px dashed #cbc8c0;
  background:#faf9f6;
  padding:var(--s5);
  text-align:center
}
.empty-state h3{
  font-size:25px
}
.empty-state p{
  margin-bottom:8px
}
.panel{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s5)
}
.stack{
  display:grid;
  gap:var(--s3)
}
.form-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3)
}
.upload-field small{
  color:var(--muted);
  font-size:11px;
  font-weight:400
}
.upload-field input[type=file]{
  min-height:56px;
  padding:8px;
  background:#faf9f6
}
.upload-field input[type=file]::file-selector-button{
  height:38px;
  border:0;
  background:var(--deep);
  color:#fff;
  font:600 12px BarberOswald;
  margin-right:12px;
  padding:0 15px;
  text-transform:uppercase;
  cursor:pointer
}
.current-photo{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:10px
}
.current-photo img{
  width:88px;
  height:66px;
  object-fit:cover
}
.current-photo span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase
}
.upload-preview{
  display:flex;
  min-width:0;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  background:#faf9f6;
  padding:10px
}
.upload-preview img{
  width:112px;
  height:84px;
  flex:0 0 auto;
  object-fit:cover;
  background:var(--soft)
}
.upload-preview>div,.upload-preview>span{
  min-width:0
}
.upload-preview strong,.upload-preview small{
  display:block;
  overflow-wrap:anywhere
}
.upload-preview small{
  color:var(--muted)
}
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s4)
}
.section-title h2,.section-title h3{
  margin:0
}
.section-title h2{
  font-size:29px
}
.section-title>span{
  color:var(--muted);
  font-size:13px
}
.page-action{
  display:flex;
  justify-content:center;
  margin-top:var(--s5)
}

/* Homepage */

.home-hero{
  position:relative;
  display:grid;
  min-height:min(820px,calc(100vh - 86px));
  padding:105px max(40px,calc((100vw - 1240px)/2));
  align-items:center;
  overflow:hidden;
  background:#0b0b0d;
  isolation:isolate
}
.home-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(90deg,rgba(8,8,10,.94),rgba(8,8,10,.7) 46%,rgba(8,8,10,.27) 76%),var(--hero-image);
  background-position:center;
  background-size:cover
}
.home-hero:after{
  display:none
}
.hero-logo-mark{
  position:absolute;
  top:48%;
  right:max(-24px,calc((100vw - 1440px)/2));
  z-index:-1;
  width:min(880px,62vw);
  max-height:90%;
  object-fit:contain;
  opacity:.18;
  transform:translateY(-50%) rotate(-30deg);
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.28))
}
.hero-content{
  width:min(760px,72vw)
}
.hero-kicker{
  display:block;
  margin-bottom:18px;
  color:#fff;
  font:400 14px BarberOswald,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase
}
.hero-content h1{
  margin:12px 0 22px;
  color:#fff;
  font-size:clamp(64px,7.2vw,106px);
  line-height:.9;
  text-transform:uppercase
}
.hero-content p{
  max-width:620px;
  color:#d2d2d5;
  font-size:18px
}
.hero-content .actions{
  margin-top:var(--s5)
}
.home-section{
  width:min(1240px,calc(100% - 48px));
  margin:auto;
  padding:105px 0
}
.home-section.dark{
  width:100%;
  max-width:none;
  padding-inline:max(24px,calc((100vw - 1240px)/2));
  background:var(--deep)
}
.home-section.dark h2,.home-section.dark h3{
  color:#fff
}
.home-section.dark p{
  color:#9d9da3
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  gap:var(--s7);
  margin-bottom:var(--s6);
  align-items:end
}
.section-head h2{
  margin:8px 0 0;
  color:var(--ink);
  font-size:clamp(44px,5vw,72px);
  text-transform:uppercase
}
.section-head>p{
  margin-bottom:6px;
  font-size:17px
}
.overview-grid{
  display:grid;
  grid-template-columns:.9fr 1.35fr .9fr
}
.overview-item{
  position:relative;
  display:flex;
  min-height:420px;
  overflow:hidden;
  flex-direction:column;
  border-right:1px solid #323236;
  background:#171719;
  color:#fff;
  padding:38px;
  transition:.2s
}
.overview-item:hover{
  z-index:1;
  background:#202023;
  transform:translateY(-6px)
}
.overview-number{
  color:var(--red-text);
  font:600 13px BarberOswald;
  letter-spacing:.14em
}
.overview-item h3{
  margin:60px 0 12px;
  color:#fff;
  font-size:34px;
  text-transform:uppercase
}
.overview-item p{
  color:#a5a5aa
}
.overview-item strong{
  margin-top:auto;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase
}
.barber-overview{
  display:grid;
  grid-template:1fr/1fr;
  touch-action:pan-y pinch-zoom;
  padding:0
}
.barber-overview-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden
}
.barber-overview-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  opacity:0;
  transform:scale(1.025);
  transition:opacity .55s ease,transform 4.8s linear
}
.barber-overview-media img.is-active{
  opacity:1;
  transform:scale(1)
}
.barber-overview:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(10,10,12,.95),rgba(10,10,12,.24))
}
.barber-overview-link{
  position:relative;
  z-index:2;
  display:flex;
  width:75%;
  height:100%;
  grid-area:1/1;
  flex-direction:column;
  color:#fff;
  padding:38px
}
.barber-overview-link strong{
  margin-top:auto
}
.barber-overview-current{
  margin-top:12px;
  color:#fff;
  font:600 12px BarberOswald;
  letter-spacing:.08em;
  text-transform:uppercase
}
.barber-overview-toggle{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:3;
  min-height:44px;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(10,10,12,.72);
  color:#fff;
  padding:6px 12px;
  font:600 11px BarberOswald;
  letter-spacing:.08em;
  text-transform:uppercase
}
.barber-overview-toggle:hover,.barber-overview-toggle:focus-visible{
  border-color:#fff;
  background:#fff;
  color:#111113
}
.service-showcase{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #333338
}
.service-preview{
  display:flex;
  min-height:280px;
  flex-direction:column;
  border-right:1px solid #333338;
  padding:38px 34px
}
.service-preview:nth-child(3n){
  border-right:0
}
.service-preview h3{
  margin:10px 0;
  font-size:29px;
  text-transform:uppercase
}
.service-preview .service-meta{
  margin-top:auto
}
.visit-strip{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:520px;
  background:#fff
}
.visit-photo{
  min-height:480px;
  background:center/cover no-repeat
}
.visit-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--s6) clamp(38px,6vw,86px)
}
.visit-copy h2{
  margin:10px 0 20px;
  font-size:clamp(42px,5vw,68px);
  text-transform:uppercase
}
.visit-details{
  display:grid;
  gap:12px;
  margin:20px 0 28px
}
.visit-details span{
  display:grid;
  grid-template-columns:90px 1fr;
  border-bottom:1px solid var(--line);
  padding-bottom:10px
}
.visit-details b{
  font-family:BarberOswald;
  text-transform:uppercase
}
.visit-details a,.location-detail dd a{
  width:fit-content;
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:4px
}
.visit-details a:hover,.location-detail dd a:hover{
  color:var(--red-text)
}
.visit-section{
  padding-bottom:42px
}
.reviews-section{
  padding-top:42px;
  padding-bottom:80px
}
.review-section-head{
  align-items:center
}
.review-score{
  display:flex;
  align-items:center;
  gap:16px;
  justify-self:end
}
.review-score>strong{
  color:var(--ink);
  font:600 64px/1 BarberOswald
}
.review-score>div{
  display:grid;
  gap:3px
}
.review-score .review-stars{
  font-size:23px
}
.review-score small{
  color:var(--muted);
  font-size:12px
}
.public-review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--s3)
}
.mobile-swipe-hint{
  display:none
}
.public-review-card{
  display:flex;
  min-height:270px;
  flex-direction:column;
  border:1px solid var(--line);
  background:#fff;
  padding:30px;
  transition:.2s
}
.public-review-card:hover{
  border-color:#c7c3b9;
  box-shadow:var(--shadow);
  transform:translateY(-3px)
}
.public-review-card>.review-stars{
  font-size:20px
}
.public-review-card blockquote{
  margin:30px 0;
  color:var(--ink);
  font-size:20px;
  line-height:1.5
}
.public-review-card footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:18px
}
.review-avatar{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--deep);
  color:#fff;
  font:600 18px BarberOswald
}
.public-review-card footer strong,.public-review-card footer small{
  display:block
}
.public-review-card footer small{
  margin-top:3px;
  color:var(--muted);
  font-size:11px
}

/* Public inner pages */

.page-heading{
  position:relative;
  display:flex;
  min-height:260px;
  margin:-48px calc((100% - var(--viewport-client-width,100vw))/2) var(--s6);
  padding:64px max(24px,calc((100vw - 1320px)/2));
  align-items:center;
  justify-content:space-between;
  gap:var(--s6);
  overflow:hidden;
  background:var(--deep);
  color:#fff
}
.page-heading:after{
  content:"";
  position:absolute;
  right:8%;
  bottom:-150px;
  width:250px;
  height:250px;
  border:38px solid var(--red);
  transform:rotate(30deg)
}
.page-heading>div,.page-heading>p,.page-heading>form,.page-heading>a{
  position:relative;
  z-index:1
}
.page-heading h1{
  margin:7px 0 0;
  color:#fff;
  font-size:clamp(48px,6vw,78px);
  text-transform:uppercase
}
.page-heading>p{
  max-width:520px;
  margin:0;
  color:#aaaab0
}
.page-heading.compact-heading{
  min-height:210px
}
.page-heading .btn.ghost{
  border-color:#666;
  color:#fff
}
.date-filter-card{
  display:grid;
  grid-template-columns:minmax(125px,auto) 178px 142px;
  align-items:stretch;
  gap:0;
  min-width:min(100%,500px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-top:4px solid var(--red);
  background:#fff;
  color:var(--ink);
  box-shadow:0 18px 45px rgba(0,0,0,.3)
}
.date-filter-copy{
  display:flex;
  min-width:0;
  padding:11px 15px;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--line)
}
.date-filter-copy small{
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.date-filter-copy strong{
  margin-top:2px;
  font:600 17px BarberOswald,sans-serif;
  white-space:nowrap
}
.date-filter-control{
  display:flex;
  align-items:stretch;
  background:#f5f3ee
}
.date-filter-control input{
  width:100%;
  min-width:0;
  min-height:60px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-weight:700;
  outline-offset:-3px
}
.page-heading .date-filter-submit{
  display:flex;
  min-height:60px;
  padding:0 17px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  background:var(--red);
  color:#fff
}
.date-filter-submit b{
  font-size:20px;
  font-weight:400;
  transition:transform .18s ease
}
.date-filter-submit:hover b{
  transform:translateX(4px)
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line)
}
.product-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:980px;
  margin-inline:auto
}
.product-card{
  position:relative;
  overflow:hidden;
  min-height:340px
}
.product-card-media{
  position:absolute;
  top:0;
  right:0;
  width:44%;
  height:160px;
  overflow:hidden;
  border-bottom:4px solid var(--red);
  background:var(--deep)
}
.product-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}
.product-card:hover .product-card-media img{
  transform:scale(1.045)
}
.product-card-media.is-empty{
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  background:linear-gradient(135deg,#17171a,#29292e);
  color:#8f8f97
}
.product-card-media.is-empty span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid #4b4b51;
  border-radius:50%
}
.product-card-media.is-empty svg{
  width:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.product-card-media.is-empty small{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase
}
.product-card>.service-index{
  max-width:50%
}
.product-card .service-content .tag{
  align-self:flex-start;
  margin-top:34px
}
.product-card .service-content h2{
  max-width:53%
}
.product-card .service-content p{
  margin-top:20px
}
.service-card{
  display:flex;
  min-height:300px;
  flex-direction:column;
  background:#fff;
  padding:28px;
  transition:.2s
}
.service-card:hover{
  z-index:1;
  box-shadow:var(--shadow);
  transform:translateY(-4px)
}
.service-index{
  color:var(--red-text);
  font:600 13px BarberOswald;
  letter-spacing:.14em
}
.service-content{
  display:flex;
  height:100%;
  flex-direction:column
}
.service-content .tag{
  margin-top:28px
}
.service-content h2{
  margin:10px 0 8px;
  font-size:31px;
  text-transform:uppercase
}
.service-content p{
  flex:0;
  margin-bottom:0
}
.public-product-empty{
  max-width:760px;
  margin:0 auto;
  padding:64px 32px
}
.public-product-empty h2{
  font-size:36px;
  text-transform:uppercase
}
.service-meta{
  display:flex;
  border-top:1px solid var(--line);
  margin-top:auto;
  padding-top:15px;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.service-meta strong{
  color:var(--red-text);
  font:600 20px BarberOswald
}
.service-meta span{
  color:var(--muted);
  font-size:12px
}
.barber-grid{
  display:flex;
  gap:var(--s4);
  overflow-x:auto;
  padding:3px 3px 16px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:3px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch
}
.barber-grid::-webkit-scrollbar{
  display:none
}
.barber-card{
  flex:0 0 calc((100% - 48px)/3);
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 35px rgba(17,17,19,.08);
  scroll-snap-align:start;
  scroll-snap-stop:always
}
.barber-card>img{
  width:100%;
  height:420px;
  object-fit:cover;
  background:#0d0d0f;
  filter:grayscale(.8);
  transition:.3s
}
.barber-card>img[src$="sc.svg"]{
  object-fit:contain;
  padding:72px;
  filter:none
}
.barber-card:hover>img{
  filter:none;
  transform:scale(1.02)
}
.barber-carousel-controls{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:10px
}
.barber-carousel-controls>button{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:20px
}
.barber-carousel-controls>button:hover:not(:disabled){
  border-color:var(--red);
  background:var(--red);
  color:#fff
}
.barber-carousel-controls>button:disabled{
  opacity:.35;
  cursor:not-allowed
}
.barber-carousel-dots{
  display:flex;
  align-items:center;
  gap:6px
}
.barber-carousel-dots button{
  width:8px;
  min-height:8px;
  height:8px;
  border:0;
  border-radius:99px;
  background:#c6c3bc;
  padding:0;
  transition:width .2s ease,background .2s ease
}
.barber-carousel-dots button.active{
  width:26px;
  background:var(--red)
}
.barber-carousel-controls>span{
  min-width:92px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
  text-transform:uppercase
}
.barber-carousel-note{
  margin:-38px 0 0;
  color:var(--muted);
  font-size:11px
}
.barber-info{
  padding:26px 28px 30px
}
.barber-info h2{
  margin:9px 0;
  font-size:31px;
  text-transform:uppercase
}
.available-dot{
  color:var(--green);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.location-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  min-height:540px;
  background:#fff;
  box-shadow:var(--shadow)
}
.shop-photo{
  width:100%;
  height:100%;
  min-height:540px;
  object-fit:cover
}
.location-detail{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--s6)
}
.location-detail h2{
  font-size:35px;
  text-transform:uppercase
}
.location-detail dl,.settings-preview dl{
  margin:10px 0 28px
}
.location-detail dl>div,.settings-preview dl>div{
  display:grid;
  grid-template-columns:100px 1fr;
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.location-detail dt,.settings-preview dt{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase
}
.location-detail dd,.settings-preview dd{
  margin:0
}

/* Auth and booking */

.auth-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 480px;
  max-width:1100px;
  min-height:620px;
  margin:20px auto;
  background:#fff;
  box-shadow:var(--shadow)
}
.auth-copy{
  position:relative;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  justify-content:center;
  background:var(--deep);
  padding:58px
}
.auth-copy:after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-100px;
  width:270px;
  height:270px;
  border:38px solid var(--red);
  transform:rotate(27deg)
}
.auth-copy>*{
  position:relative;
  z-index:1
}
.auth-copy h1{
  color:#fff;
  font-size:clamp(44px,5vw,66px);
  text-transform:uppercase
}
.auth-copy p{
  color:#aaaab0;
  font-size:17px
}
.auth-copy .text-link{
  margin-top:10px
}
.auth-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:0;
  padding:56px
}
.auth-panel h2{
  font-size:38px;
  text-transform:uppercase
}
.auth-panel-kicker{
  margin-bottom:8px
}
.auth-form-intro{
  margin:-4px 0 24px;
  line-height:1.65
}
.form-field{
  display:grid;
  gap:7px
}
.field-label-row{
  display:flex;
  min-height:22px;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.inline-auth-link{
  color:var(--red-text);
  font-size:12px;
  font-weight:600
}
.inline-auth-link:hover{
  text-decoration:underline
}
.password-control{
  position:relative
}
.password-control input{
  padding-right:108px
}
.password-control button{
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  min-height:0;
  border:0;
  border-left:1px solid var(--line);
  background:#f7f6f2;
  color:#4f4f54;
  font:600 11px BarberOswald,sans-serif;
  min-width:96px;
  padding:0 14px;
  text-transform:uppercase
}
.password-control button:hover{
  background:#eeeae3;
  color:var(--red-text)
}
.field-help{
  color:var(--muted);
  font-size:11px;
  font-weight:400
}
.field-help.is-invalid{
  color:#a20f0f
}
.field-help.is-valid{
  color:#12673a
}
.verification-code-input{
  min-height:74px;
  border-width:2px;
  font:600 34px/1 BarberOswald,sans-serif;
  letter-spacing:.32em;
  text-align:center
}
.verification-code-input::placeholder{
  color:#c5c3bf;
  letter-spacing:.32em
}
.auth-security-note{
  margin:20px 0 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  padding-top:18px
}
.auth-back-link{
  width:max-content
}
.auth-status{
  display:grid;
  justify-items:start
}
.auth-status-icon{
  display:grid;
  width:54px;
  height:54px;
  margin-bottom:22px;
  place-items:center;
  border-radius:50%;
  background:#e6f4eb;
  color:#12673a;
  font:600 28px BarberOswald,sans-serif
}
.auth-status h2{
  margin-bottom:12px
}
.auth-status p{
  line-height:1.65
}
.auth-status-error .auth-status-icon{
  background:#fae7e7;
  color:#971010
}
.auth-status-error .btn{
  margin-top:12px
}
.local-reset-preview{
  margin-top:24px;
  border:1px solid #efc86e;
  background:#fff9e8;
  padding:20px
}
.local-reset-preview h3{
  margin:12px 0 7px;
  font-size:22px
}
.local-reset-preview p{
  margin-bottom:16px;
  font-size:13px;
  line-height:1.55
}
.auth-panel-actions{
  display:grid;
  justify-items:center;
  gap:10px;
  margin-top:22px
}
.auth-request-new{
  margin-top:18px
}
.access-page{
  max-width:850px;
  min-height:460px;
  margin:20px auto;
  border:1px solid var(--line);
  background:#fff;
  padding:64px
}
.access-page h1{
  font-size:clamp(42px,6vw,68px);
  text-transform:uppercase
}
.access-page .actions{
  margin-top:var(--s5)
}
.booking-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--s4);
  align-items:start
}
.booking-main{
  display:grid;
  gap:var(--s4)
}
.booking-step{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s5)
}
.booking-step legend{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--s4);
  font-size:25px;
  text-transform:uppercase
}
.booking-step legend span{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  background:var(--red);
  color:#fff;
  font-size:16px
}
.option-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.option-card,.barber-option{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:13px;
  cursor:pointer
}
.option-card:hover,.barber-option:hover,.option-card:has(input:checked),.barber-option:has(input:checked){
  border-color:var(--red);
  background:#fff4f4
}
.option-card input,.barber-option input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.check-box{
  width:19px;
  height:19px;
  flex:0 0 auto;
  border:1px solid #aaa;
  background:#fff
}
.option-card input:checked+.check-box{
  border:5px solid var(--red)
}
.option-card strong,.option-card small,.barber-option strong,.barber-option small{
  display:block
}
.option-card small,.barber-option small{
  color:var(--muted);
  font-size:11px
}
.barber-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.barber-option img{
  width:46px;
  height:46px;
  object-fit:cover
}
.direct-choice-check{
  display:none;
  width:24px;
  height:24px;
  margin-left:auto;
  flex:0 0 auto;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:700
}
.barber-option:has(input:checked) .direct-choice-check{
  display:grid
}
.schedule-step{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--s3)
}
.schedule-step legend,.schedule-step .slot-note,.booking-hours-strip{
  grid-column:1/-1
}
.booking-hours-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid #2c2c30;
  background:var(--deep);
  color:#fff
}
.booking-hours-strip span{
  display:grid;
  gap:2px;
  border-right:1px solid #343438;
  padding:13px 16px;
  color:#bdbdc3;
  font-size:11px;
  line-height:1.35;
  text-transform:uppercase
}
.booking-hours-strip span:last-child{
  border-right:0
}
.booking-hours-strip b{
  color:#fff;
  font:600 18px BarberOswald,sans-serif
}
.slot-note{
  margin:0;
  color:var(--muted);
  font-size:13px
}
.booking-date-field{
  align-self:start
}
.booking-date-field input{
  height:56px;
  min-height:56px;
  background:#fff;
  font-weight:500
}
.booking-date-field small{
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  line-height:1.45
}
.time-picker-field{
  display:grid;
  gap:7px;
  color:#3e3e42;
  font-size:13px;
  font-weight:500
}
.time-slot-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.time-slot-option{
  display:grid;
  min-height:56px;
  place-items:center;
  gap:1px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:7px
}
.time-slot-option strong{
  font:600 16px BarberOswald,sans-serif
}
.time-slot-option span{
  color:var(--green);
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase
}
.time-slot-option:hover:not(:disabled),.time-slot-option.selected{
  border-color:var(--red);
  background:var(--red);
  color:#fff
}
.time-slot-option.selected span{
  color:#fff
}
.time-slot-option:disabled{
  background:#f0efec;
  color:#97979d;
  cursor:not-allowed;
  opacity:.68
}
.time-slot-option:disabled span{
  color:#8c4545
}
.time-slot-empty{
  grid-column:1/-1;
  display:grid;
  min-height:56px;
  place-items:center;
  border:1px dashed #c9c6bf;
  background:#faf9f6;
  color:var(--muted);
  padding:12px;
  text-align:center
}
.time-slot-empty.closed-day{
  gap:3px;
  border-color:#e1bebe;
  background:#fff5f4
}
.time-slot-empty.closed-day strong{
  color:#a71218;
  font:600 17px BarberOswald,sans-serif;
  text-transform:uppercase
}
.time-slot-empty.closed-day span{
  font-size:12px
}
.booking-summary{
  position:sticky;
  top:110px;
  display:grid;
  gap:var(--s3);
  border:1px solid #303034;
  background:var(--deep);
  color:#fff;
  padding:var(--s5)
}
.booking-summary h2{
  margin:0;
  color:#fff;
  font-size:30px
}
.booking-summary-details{
  display:grid;
  margin:0;
  border-top:1px solid #343438
}
.booking-summary-details>div{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:10px;
  border-bottom:1px solid #343438;
  padding:10px 0
}
.booking-summary-details dt{
  color:#aaaab0;
  font-size:11px
}
.booking-summary-details dd{
  margin:0;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:12px;
  text-align:right
}
.booking-summary .btn:disabled{
  border-color:#4b4b50;
  background:#35353a;
  color:#97979d;
  cursor:not-allowed
}
.booking-summary>div{
  display:flex;
  border-bottom:1px solid #343438;
  padding:12px 0;
  justify-content:space-between
}
.booking-summary>div span,.booking-summary small{
  color:#aaaab0
}
.booking-summary>div strong{
  color:#fff
}

/* Logout confirmation */
.logout-dialog{
  width:min(460px,calc(100% - 32px));
  max-width:none;
  margin:auto;
  overflow:visible;
  border:0;
  background:transparent;
  color:var(--ink);
  padding:0
}
.logout-dialog::backdrop{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(4px)
}
.logout-dialog-card{
  position:relative;
  border-top:5px solid var(--red);
  background:var(--paper);
  padding:40px;
  box-shadow:0 32px 100px rgba(0,0,0,.42)
}
.logout-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:23px;
  line-height:1
}
.logout-dialog-close:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.logout-dialog-icon{
  display:grid;
  width:58px;
  height:58px;
  margin-bottom:24px;
  place-items:center;
  border-radius:50%;
  background:var(--deep);
  color:#fff
}
.logout-dialog-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.logout-dialog-card h2{
  margin:9px 0 14px;
  font-size:clamp(32px,5vw,44px);
  line-height:1;
  text-transform:uppercase
}
.logout-dialog-card p{
  margin:0;
  color:var(--muted)
}
.logout-dialog-card p strong{
  color:var(--ink)
}
.logout-dialog-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:30px
}
.logout-dialog-actions .btn{
  width:100%
}

/* Booking success confirmation */
.booking-success-dialog{
  width:min(930px,calc(100% - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  margin:auto;
  overflow:auto;
  border:0;
  background:var(--paper);
  color:var(--ink);
  padding:0;
  box-shadow:0 32px 100px rgba(0,0,0,.4)
}
.booking-success-dialog::backdrop{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(4px)
}
.booking-success-shell{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  min-height:500px;
  align-items:center;
  gap:42px;
  padding:56px
}
.booking-success-message{
  position:relative
}
.booking-success-close{
  position:absolute;
  top:-36px;
  left:-36px;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:25px;
  line-height:1
}
.booking-success-close:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.booking-success-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--green);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}
.booking-success-kicker i{
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:50%;
  background:#dff3e8;
  font-style:normal
}
.booking-success-message h2{
  margin:24px 0 18px;
  font-size:clamp(39px,5vw,62px);
  line-height:.98;
  text-transform:uppercase
}
.booking-success-message h2:focus{
  outline:3px solid var(--focus-ring);
  outline-offset:6px
}
.booking-success-message h2 em{
  font-family:BarberRoboto,Arial,sans-serif;
  font-size:.72em;
  font-weight:500;
  letter-spacing:-.04em;
  text-transform:none
}
.booking-success-message p{
  max-width:390px;
  margin-bottom:27px
}
.booking-success-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.booking-ticket{
  overflow:hidden;
  border:1px solid #cbc8c0;
  border-radius:18px;
  background:#fff;
  box-shadow:13px 16px 0 rgba(23,23,25,.09);
  transform:rotate(1.2deg)
}
.booking-ticket>header{
  display:flex;
  min-height:76px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--deep);
  color:#fff;
  padding:17px 24px;
  font:600 11px BarberOswald,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase
}
.booking-ticket-brand{
  display:flex;
  align-items:center;
  gap:9px
}
.booking-ticket-brand img{
  width:46px;
  height:35px;
  object-fit:contain
}
.booking-ticket-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:25px 28px;
  border-bottom:1px dashed #d6d3cb
}
.booking-ticket-date strong,.booking-ticket-date span,.booking-ticket-status strong,.booking-ticket-status span{
  display:block
}
.booking-ticket-date strong{
  font:600 27px BarberOswald,sans-serif
}
.booking-ticket-date span{
  color:var(--muted);
  font-size:12px
}
.booking-ticket-status{
  text-align:right
}
.booking-ticket-status strong{
  font-size:12px
}
.booking-ticket-status span{
  color:var(--status-pending-ink);
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase
}
.booking-ticket-details{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr;
  margin:0;
  padding:25px 28px
}
.booking-ticket-details>div{
  min-width:0;
  padding-right:15px
}
.booking-ticket-details dt{
  margin-bottom:5px;
  color:#8a8990;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.booking-ticket-details dd{
  margin:0;
  overflow-wrap:anywhere;
  font-size:12px;
  font-weight:600
}
.booking-ticket>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px dashed #d6d3cb;
  padding:18px 28px
}
.booking-ticket>footer span{
  color:var(--muted);
  font-size:11px
}
.booking-ticket>footer strong{
  font:600 20px BarberOswald,sans-serif
}

/* Dashboard, cashier and admin */

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  align-items:start;
  gap:var(--s4)
}
.dashboard-primary,.dashboard-side,.booking-list,.admin-list,.queue-list{
  display:grid
}
.dashboard-primary{
  gap:0
}
.dashboard-side{
  position:sticky;
  top:104px;
  align-self:start;
  align-content:start;
  gap:12px
}
.booking-list{
  gap:14px
}
.admin-list,.queue-list{
  gap:var(--s3)
}
.next-booking,.booking-row,.profile-block,.mini-stat,.side-link,.admin-booking,.queue-row{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s4)
}
.next-booking{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s4)
}
.date-block{
  display:grid;
  width:66px;
  height:72px;
  place-items:center;
  background:var(--deep);
  color:#fff
}
.date-block strong{
  font:600 28px/1 BarberOswald
}
.date-block span{
  margin-top:-12px;
  font-size:11px;
  text-transform:uppercase
}
.next-booking h3,.booking-row h3,.admin-booking h3,.queue-row h3,.manage-row h3{
  margin:8px 0 5px;
  font-size:23px
}
.next-booking p,.booking-row p,.admin-booking p,.queue-row p,.manage-row p{
  margin:0
}
.booking-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s3)
}
.booking-row-action{
  display:grid;
  align-content:center;
  justify-items:end
}
.review-form{
  display:grid;
  grid-column:1/-1;
  grid-template-columns:210px minmax(0,1fr) auto;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:var(--s3)
}
.profile-block{
  text-align:center
}
.profile-block>div,.dashboard-account-card .profile-block>div{
  min-width:0
}
.profile-block .avatar{
  margin:0 auto 12px
}
.profile-block h2{
  margin-bottom:4px
}
.profile-block p{
  margin:0
}
.profile-block h2,.profile-block p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.mini-stat,.side-link{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.mini-stat strong{
  font:600 28px BarberOswald
}
.side-link:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.star-rating{
  display:grid;
  align-content:center;
  gap:5px;
  min-width:190px;
  margin:0;
  border:0;
  padding:0
}
.star-rating legend,.review-message>span{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase
}
.star-options{
  display:flex;
  gap:2px
}
.star-options input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.star-options label{
  cursor:pointer;
  color:#d3d0c8;
  font-size:30px;
  line-height:1;
  transition:color .15s ease,transform .15s ease
}
.star-options label.selected{
  color:#f2b01e
}
.star-options label:hover{
  transform:translateY(-2px)
}
.star-options input:focus-visible+label{
  border-radius:2px;
  outline:2px solid var(--red);
  outline-offset:2px
}
.star-rating output{
  color:var(--muted);
  font-size:12px
}
.review-message{
  display:grid;
  gap:5px
}
.review-result{
  display:grid;
  grid-column:1/-1;
  gap:8px;
  border:1px solid #e4dac7;
  border-left:4px solid #f2b01e;
  background:#fffaf0;
  padding:18px 20px
}
.review-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.review-result-head strong{
  font:600 19px BarberOswald;
  text-transform:uppercase
}
.review-stars{
  display:flex;
  color:#d3d0c8;
  font-size:22px;
  letter-spacing:2px
}
.review-stars .filled{
  color:#f2b01e
}
.review-result p{
  margin:0;
  color:var(--ink);
  font-size:15px
}
.review-result small{
  color:var(--muted)
}
.admin-booking{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s4)
}
.admin-booking time{
  font:600 30px BarberOswald
}
.admin-booking small{
  color:var(--muted)
}
.inline-form,.status-form{
  gap:8px
}
.inline-form input{
  min-width:160px
}
.status-form select{
  min-width:145px;
  min-height:40px;
  padding:8px 10px
}
.admin-review{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  border-left:3px solid #f2b01e;
  background:#faf8f2;
  padding:9px 11px
}
.admin-review .review-stars{
  font-size:17px
}
.admin-review>span:last-child{
  color:var(--ink);
  font-size:13px
}
.owner-stats,.finance-stats{
  display:grid;
  gap:var(--s3);
  margin-bottom:var(--s4)
}
.owner-stats,.finance-stats,.cashier-stats{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))
}
.owner-stats article,.finance-stats article{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s4)
}
.owner-stats article:before,.finance-stats article:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:var(--red)
}
.owner-stats span,.finance-stats span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase
}
.owner-stats strong,.finance-stats strong{
  display:block;
  margin-top:7px;
  font:600 clamp(22px,2vw,31px) BarberOswald
}
.cashier-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s4);
  align-items:start
}
.finance-layout,.manage-layout,.expense-page,.settings-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr);
  gap:var(--s4);
  align-items:start
}
.cashier-form,.finance-form,.expense-form,.settings-form{
  display:grid;
  gap:var(--s3)
}
.finance-form,.manage-form{
  position:sticky;
  top:106px
}
.cashier-form-note{
  margin:-8px 0 2px;
  color:var(--muted);
  font-size:13px
}
.section-kicker{
  display:block;
  margin-bottom:3px;
  color:var(--red-text);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase
}
.cashier-services{
  display:grid;
  gap:10px
}
.cashier-services legend{
  margin-bottom:8px;
  font-weight:500
}
.walkin-barber-picker,.payment-picker{
  display:grid;
  gap:10px
}
.walkin-barber-picker>legend,.payment-picker>legend{
  margin-bottom:8px;
  color:#3e3e42;
  font-size:13px;
  font-weight:500
}
.walkin-barber-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.walkin-barber-option{
  min-height:72px
}
.payment-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.payment-choice{
  position:relative;
  display:grid;
  min-height:72px;
  place-items:center;
  gap:4px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:9px 6px;
  cursor:pointer;
  text-align:center
}
.payment-choice input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.payment-choice-icon{
  display:grid;
  width:28px;
  height:28px;
  place-items:center
}
.payment-choice-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.payment-choice>span:last-child{
  font-size:11px;
  font-weight:600
}
.payment-choice:hover,.payment-choice:has(input:checked){
  border-color:var(--red);
  background:#fff4f4;
  color:var(--red-text)
}
.payment-picker.compact{
  width:100%
}
.payment-picker.compact>legend{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important
}
.payment-picker.compact .payment-choice-grid{
  grid-template-columns:repeat(4,minmax(58px,1fr))
}
.payment-picker.compact .payment-choice{
  min-height:54px;
  padding:5px
}
.payment-picker.compact .payment-choice-icon{
  width:20px;
  height:20px
}
.payment-picker.compact .payment-choice-icon svg{
  width:19px;
  height:19px
}
.payment-picker.compact .payment-choice>span:last-child{
  font-size:9px
}
.walkin-advanced{
  border:1px solid var(--line);
  background:#faf9f6
}
.walkin-advanced summary{
  display:flex;
  min-height:50px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  list-style:none
}
.walkin-advanced summary::-webkit-details-marker{
  display:none
}
.walkin-advanced summary:after{
  content:"+";
  color:var(--red-text);
  font-size:21px
}
.walkin-advanced[open] summary:after{
  content:"−"
}
.walkin-advanced summary span{
  margin-left:auto;
  color:var(--muted);
  font-size:11px;
  font-weight:400
}
.walkin-advanced>div,.walkin-advanced>label{
  margin:0 14px 14px
}
.cashier-service-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.cashier-service-grid .option-card{
  min-height:68px;
  padding:11px
}
.cashier-summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line)
}
.cashier-summary div{
  display:grid;
  background:#f6f5f1;
  padding:12px
}
.cashier-summary span{
  color:var(--muted);
  font-size:11px
}
.queue-panel,.manage-list,.settings-preview{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s4)
}
.queue-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
  padding:var(--s3)
}
.queue-row.highlight{
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(235,22,22,.08)
}
.queue-number{
  display:grid;
  place-items:center;
  border-right:1px solid var(--line)
}
.queue-number span{
  font:600 24px BarberOswald
}
.queue-number small,.queue-info small{
  color:var(--muted)
}
.queue-actions{
  justify-content:flex-end;
  gap:8px
}
.print-ticket{
  display:none
}
.cashier-panel-hidden{
  display:none!important
}
[data-cashier-panel][hidden]{display:none!important}
.cashier-switcher{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:var(--s4);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 24px rgba(17,17,19,.06)
}
.cashier-switcher button{
  display:flex;
  min-width:0;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  background:#fff;
  color:var(--ink);
  font:600 13px BarberOswald,sans-serif;
  letter-spacing:.04em;
  padding:8px 12px;
  text-transform:uppercase
}
.cashier-switcher button+button{
  border-left:1px solid var(--line)
}
.cashier-switcher button.active,.cashier-switcher button[aria-selected=true]{
  background:var(--ink);
  color:#fff
}
.cashier-switcher span{
  display:grid;
  min-width:22px;
  height:22px;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font:700 11px Arial,sans-serif
}
.cashier-layout>*,[data-cashier-panel]{
  min-width:0;
  scroll-margin-top:150px
}
.booking-queue-row{
  border-left:3px solid var(--red)
}
.booking-queue-number span{
  font-size:18px;
  letter-spacing:.05em
}
.queue-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:5px
}
.queue-source-booking{
  background:var(--ink);
  color:#fff
}

/* Owner navigation and CRUD */

.subnav{
  display:flex;
  margin:-24px 0 var(--s5);
  overflow-x:auto;
  border:1px solid var(--line);
  background:#fff;
  scrollbar-width:thin
}
.subnav a{
  flex:0 0 auto;
  border-right:1px solid var(--line);
  font-size:13px;
  letter-spacing:.04em;
  padding:13px 17px;
  text-transform:uppercase
}
.subnav a:hover{
  color:var(--red-text)
}
.subnav a.active{
  background:var(--red);
  color:#fff
}
.manage-list{
  display:grid;
  gap:12px
}
.manage-list>.section-title{
  border-bottom:1px solid var(--line);
  padding-bottom:var(--s3)
}
.manage-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s3)
}
.manage-main{
  min-width:0
}
.manage-row h3{
  overflow-wrap:anywhere
}
.row-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px
}
.row-actions form{
  margin:0
}
.editable-row .manage-editor{
  grid-column:1/-1;
  border-top:1px solid var(--line);
  margin:2px -16px -16px;
  padding:var(--s4);
  background:#f8f7f4
}
.editor-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--s3);
  font:600 20px BarberOswald;
  text-transform:uppercase
}
.editor-close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:24px;
  line-height:1
}
.editor-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3)
}
.editor-wide{
  grid-column:1/-1
}
.barber-manage-row{
  grid-template-columns:72px minmax(0,1fr) auto
}
.barber-manage-row>img{
  width:72px;
  height:72px;
  object-fit:cover
}
.product-manage-row{
  grid-template-columns:72px minmax(0,1fr) auto
}
.product-manage-photo{
  display:grid;
  width:72px;
  height:72px;
  overflow:hidden;
  place-items:center;
  border:1px solid var(--line);
  background:#f2f1ed
}
.product-manage-photo img{
  width:100%;
  height:100%;
  object-fit:cover
}
.product-manage-photo.is-empty{
  color:var(--muted);
  font-size:28px
}
.cashier-account-row{
  grid-template-columns:46px minmax(0,1fr) auto
}
.money-row{
  grid-template-columns:minmax(0,1fr) auto
}
.money-action{
  display:grid;
  justify-items:end
}
.money-action strong{
  font:600 20px BarberOswald
}
.expense-page{
  grid-template-columns:390px minmax(0,1fr)
}
.settings-layout{
  grid-template-columns:minmax(0,1fr) 380px
}
.settings-form{
  padding:var(--s5)
}
.settings-form input[readonly]{
  border-style:dashed;
  background:#f0eee8;
  color:#505057;
  cursor:not-allowed
}
.settings-form label small{
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  line-height:1.45
}
.settings-group{
  display:grid;
  gap:var(--s3);
  border-top:1px solid var(--line);
  padding-top:var(--s4)
}
.business-hours-editor{
  display:grid;
  gap:14px;
  margin-top:8px
}
.business-hours-editor>.section-title{
  margin:0
}
.business-hours-editor>.section-title p{
  max-width:680px;
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px
}
.business-hours-editor>small{
  color:var(--muted);
  line-height:1.5
}
.business-hours-list{
  border:1px solid var(--line)
}
.business-hours-day{
  display:grid;
  grid-template-columns:minmax(130px,.55fr) minmax(0,1.45fr);
  align-items:end;
  gap:20px;
  padding:16px
}
.business-hours-day+.business-hours-day{
  border-top:1px solid var(--line)
}
.business-day-toggle{
  display:flex;
  min-height:44px;
  align-items:center;
  gap:12px;
  cursor:pointer
}
.business-day-toggle input{
  width:20px;
  height:20px;
  accent-color:var(--red)
}
.business-day-toggle span{
  display:grid;
  gap:2px
}
.business-day-toggle strong{
  font:600 17px BarberOswald;
  text-transform:uppercase
}
.business-day-toggle small{
  color:#15803d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.business-day-times{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  transition:opacity .2s
}
.business-day-times label{
  gap:5px;
  color:var(--muted);
  font-size:11px
}
.business-day-times input{
  color:var(--ink)
}
.business-hours-day.is-closed .business-day-toggle small{
  color:var(--red-text)
}
.business-hours-day.is-closed .business-day-times{
  opacity:.42
}
.settings-side{
  display:grid;
  gap:var(--s3)
}
.settings-preview img{
  width:100%;
  height:220px;
  object-fit:cover;
  margin:10px 0 20px
}
.settings-preview h2{
  font-size:30px
}
.email-test-panel{
  display:grid;
  gap:14px
}
.email-test-panel h2{
  margin:0;
  font-size:30px
}
.email-test-panel p,.email-test-panel>small{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6
}
.settings-links{
  display:grid;
  border:1px solid var(--line);
  background:#fff
}
.settings-links a{
  display:flex;
  border-bottom:1px solid var(--line);
  padding:15px 17px;
  justify-content:space-between
}
.settings-links a:last-child{
  border:0
}
.settings-links a:hover{
  color:var(--red-text)
}
.footer{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:48px;
  min-height:250px;
  background:var(--deep);
  color:#fff;
  padding:58px max(24px,calc((100vw - 1240px)/2))
}
.footer-brand{
  align-items:flex-start;
  justify-self:start
}
.footer-brand strong{
  color:#fff;
  font:600 24px BarberOswald;
  letter-spacing:.04em;
  text-transform:uppercase
}
.footer-brand small{
  color:#8f8f95
}
.footer-location{
  width:min(100%,380px);
  justify-self:center
}
.footer-nav{
  width:180px;
  justify-self:end
}
.footer>div:not(.footer-brand),.footer-nav{
  display:grid;
  align-content:start;
  gap:8px;
  color:#b8b8bd
}
.footer>div:not(.footer-brand):before,.footer-nav strong{
  content:"KUNJUNGI KAMI";
  margin-bottom:8px;
  color:#fff;
  font:600 14px BarberOswald;
  letter-spacing:.09em
}
.footer-location strong,.footer-nav>strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font:600 14px BarberOswald,sans-serif;
  letter-spacing:.09em
}
.footer-location a{
  display:flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  color:#b8b8bd;
  overflow-wrap:anywhere
}
.footer-nav a:hover{
  color:var(--red-text)
}
.footer-location a:hover,.footer-location a:focus-visible,.footer-nav a:focus-visible{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:4px
}
.footer-location .footer-whatsapp{
  display:grid;
  grid-template-columns:30px auto;
  grid-template-rows:auto auto;
  column-gap:10px;
  margin-top:6px;
  text-decoration:none
}
.footer-whatsapp img{
  width:28px;
  height:28px;
  grid-row:1/3;
  align-self:center;
  object-fit:contain
}
.footer-whatsapp span{
  color:#fff
}
.footer-whatsapp small{
  color:#8f8f95;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase
}

/* Product sales, pagination, and reports */
.product-sale-panel{
  margin-top:24px
}
.product-sale-form{
  display:grid;
  gap:20px
}
.product-sale-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.product-sale-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  padding:12px
}
.product-sale-item strong,.product-sale-item small{
  display:block
}
.product-sale-item small{
  color:var(--muted)
}
.product-sale-item input{
  width:72px
}
.product-sale-summary{
  max-width:520px
}
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
  margin-top:20px
}
.pagination-summary{
  flex-basis:100%;
  text-align:center;
  font-size:14px;
  color:var(--muted)
}
.pagination :where(a,button){
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px
}
.pagination :where(a,button).active{
  background:var(--ink);
  color:#fff
}
.pagination a.active{
  border-color:var(--ink)
}
.report-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px
}
.table-scroll{
  min-width:0;
  overflow:auto;
  border:1px solid transparent;
  scrollbar-gutter:stable
}
.report-table{
  width:100%;
  border-collapse:collapse
}
.report-table th,.report-table td{
  border-bottom:1px solid var(--line);
  padding:13px;
  text-align:left
}
.report-table th{
  font:600 13px BarberOswald;
  text-transform:uppercase
}

/* Customer dashboard */

.history-title{
  margin-top:42px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.history-title h2{
  margin:2px 0 0;
  font-size:31px
}
.history-count{
  border-radius:999px;
  background:#ebe8e0;
  color:var(--ink)!important;
  padding:7px 12px;
  font-size:11px!important;
  text-transform:uppercase
}
.booking-history-card{
  grid-template-columns:minmax(0,1fr) 190px;
  overflow:hidden;
  padding:0;
  border-color:#d7d3ca;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.booking-history-card:hover{
  border-color:#bdb8ad;
  box-shadow:0 12px 30px rgba(17,17,20,.08);
  transform:translateY(-2px)
}
.booking-card-main{
  display:grid;
  gap:13px;
  padding:23px 26px
}
.booking-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.booking-card-top time{
  color:var(--muted);
  font-size:12px
}
.booking-card-main h3{
  margin:0;
  font-size:27px
}
.booking-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  color:var(--muted);
  font-size:12px
}
.booking-card-meta strong{
  margin-left:4px;
  color:var(--ink);
  font-weight:600
}
.booking-history-card .booking-row-action{
  display:flex;
  min-width:0;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  border-left:1px solid var(--line);
  background:#f6f4ee;
  padding:22px
}
.booking-history-card .booking-row-action small{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase
}
.booking-history-card .booking-row-action>strong{
  margin:5px 0;
  font:600 22px BarberOswald
}
.booking-history-card .review-form,.booking-history-card .review-result{
  margin:0 22px 22px
}
.review-result-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.review-edit-form{
  align-items:end;
  border:1px solid var(--line);
  background:#f8f7f3;
  padding:20px
}
.review-edit-actions{
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:7px
}
.dashboard-account-card{
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff
}
.dashboard-account-card .profile-block{
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  padding:22px;
  text-align:left
}
.dashboard-account-card .profile-block .avatar{
  margin:0;
  flex:0 0 auto
}
.dashboard-account-card .profile-block h2{
  margin:2px 0 3px;
  font-size:23px
}
.dashboard-account-card .profile-block p{
  color:var(--muted);
  font-size:12px
}
.dashboard-account-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  background:#f6f4ee
}
.dashboard-account-stats>div{
  display:grid;
  gap:3px;
  padding:18px
}
.dashboard-account-stats>div+div{
  border-left:1px solid var(--line)
}
.dashboard-account-stats strong{
  font:600 27px BarberOswald
}
.dashboard-account-stats span{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase
}
.dashboard-shortcuts{
  display:grid;
  border:1px solid var(--line);
  background:#fff;
  padding:18px 20px 4px
}
.dashboard-shortcuts>.section-kicker{
  margin-bottom:9px
}
.dashboard-shortcuts a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding:14px 0
}
.dashboard-shortcuts a span,.dashboard-shortcuts a strong,.dashboard-shortcuts a small{
  display:block
}
.dashboard-shortcuts a strong{
  font:600 17px BarberOswald;
  text-transform:uppercase
}
.dashboard-shortcuts a small{
  margin-top:2px;
  color:var(--muted);
  font-size:10px
}
.dashboard-shortcuts a b{
  color:var(--red-text);
  font-size:21px
}
.dashboard-shortcuts a:hover strong{
  color:var(--red-text)
}

/* Secure visit-photo flow */
.visit-photo-page{
  width:min(1120px,calc(100% - 28px));
  margin:clamp(28px,6vw,78px) auto
}
.visit-photo-code-card{
  width:min(620px,100%);
  margin:auto;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 24px 60px rgba(17,17,19,.09);
  padding:clamp(26px,6vw,58px)
}
.visit-photo-code-card h1,.visit-photo-heading h1{
  margin:10px 0 12px;
  font:700 clamp(38px,7vw,74px)/.94 BarberOswald,sans-serif;
  text-transform:uppercase
}
.visit-photo-code-card p,.visit-photo-heading p{
  max-width:620px;
  color:var(--muted);
  font-size:17px;
  line-height:1.65
}
.visit-photo-code-form{
  display:grid;
  gap:16px;
  margin-top:28px
}
.visit-photo-code-form input{
  font:600 clamp(18px,4vw,26px)/1.2 monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}
.visit-photo-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:30px
}
.visit-photo-code{
  min-width:260px;
  border-left:4px solid var(--red);
  background:var(--ink);
  color:#fff;
  padding:18px 22px
}
.visit-photo-code small,.visit-photo-code strong{
  display:block
}
.visit-photo-code small{
  color:#aaa;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase
}
.visit-photo-code strong{
  margin-top:5px;
  font:600 20px/1.2 monospace;
  letter-spacing:.04em
}
.visit-photo-layout{
  display:grid;
  gap:18px
}
.visit-photo-visit-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  border:1px solid var(--line);
  background:#fff;
  padding:22px
}
.visit-photo-visit-card h2{
  margin:4px 0;
  font:600 26px BarberOswald,sans-serif;
  text-transform:uppercase
}
.visit-photo-visit-card p{
  margin:0 0 5px
}
.visit-photo-visit-card small,.visit-photo-visit-card span{
  color:var(--muted)
}
.visit-photo-visit-card .visit-photo-queue{
  display:grid;
  min-width:112px;
  min-height:84px;
  place-items:center;
  background:var(--red);
  color:#fff;
  font:700 22px BarberOswald,sans-serif
}
.visit-photo-form{
  display:grid;
  gap:20px;
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(20px,4vw,38px)
}
.visit-photo-slots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.visit-photo-entry{
  display:grid;
  align-content:start;
  gap:10px
}
.visit-photo-slot{
  position:relative;
  display:grid;
  min-height:0;
  aspect-ratio:5/6;
  place-items:center;
  align-content:center;
  gap:10px;
  overflow:hidden;
  border:1px dashed #aaa;
  background:#f6f5f1;
  text-align:center;
  cursor:pointer
}
.visit-photo-slot>span{
  position:absolute;
  z-index:2;
  top:12px;
  left:12px;
  background:var(--ink);
  color:#fff;
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.08em;
  padding:7px 10px;
  text-transform:uppercase
}
.visit-photo-slot>b{
  display:grid;
  width:66px;
  height:66px;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--red-text);
  font:300 42px/1 Arial,sans-serif
}
.visit-photo-slot>small{
  position:relative;
  z-index:2;
  max-width:210px;
  color:var(--muted)
}
.visit-photo-slot.has-photo>small{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  max-width:none;
  background:rgba(17,17,19,.82);
  color:#fff;
  padding:9px
}
.visit-photo-slot.has-photo{
  background:#fff
}
.visit-photo-slot img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%) brightness(var(--visit-photo-brightness,118%)) contrast(var(--visit-photo-contrast,90%)) opacity(var(--visit-photo-density,100%))
}
.visit-photo-slot input{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer
}
.visit-photo-caption{
  display:grid;
  gap:7px;
  color:var(--ink);
  font-weight:700
}
.visit-photo-caption input{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:11px 12px;
  font:inherit
}
.visit-photo-caption input:focus{
  border-color:var(--red);
  outline:2px solid color-mix(in srgb,var(--red) 25%,transparent);
  outline-offset:1px
}
.visit-photo-adjustments{
  display:grid;
  gap:13px;
  min-width:0;
  margin:0;
  border:1px solid var(--line);
  background:#f7f6f2;
  padding:15px
}
.visit-photo-adjustments:disabled{
  opacity:.55
}
.visit-photo-adjustments legend{
  padding:0 6px;
  color:var(--ink);
  font:600 13px BarberOswald,sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase
}
.visit-photo-adjustments label{
  display:grid;
  gap:8px
}
.visit-photo-adjustments label>span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink);
  font-size:13px;
  font-weight:700
}
.visit-photo-adjustments output{
  min-width:44px;
  color:var(--red-text);
  font-variant-numeric:tabular-nums;
  text-align:right
}
.visit-photo-adjustments input[type="range"]{
  width:100%;
  min-height:28px;
  margin:0;
  accent-color:var(--red);
  cursor:pointer
}
.visit-photo-adjustments input[type="range"]:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px
}
.visit-photo-reset{
  min-height:44px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase;
  cursor:pointer
}
.visit-photo-reset:hover,.visit-photo-reset:focus-visible{
  border-color:var(--ink)
}
.visit-photo-adjustments>small{
  color:var(--muted);
  font-size:11px;
  line-height:1.45
}
.visit-photo-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:var(--muted);
  line-height:1.5
}
.visit-photo-consent input{
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--red)
}
.visit-photo-form .btn span{
  opacity:.7
}
.visit-photo-note{
  color:var(--muted);
  text-align:center
}
.visit-photo-closed{
  border-left:5px solid var(--red);
  background:#fff;
  padding:28px
}
.visit-photo-closed.success{
  border-left-color:#16804b;
  background:#edf8f2
}
.visit-photo-closed strong{
  font:600 24px BarberOswald,sans-serif;
  text-transform:uppercase
}
.visit-photo-closed p{
  margin:6px 0 0;
  color:var(--muted)
}
.visit-qr{
  display:block;
  width:180px;
  max-width:100%;
  height:auto;
  background:#fff
}
.visit-photo-status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px
}
.visit-photo-status span{
  background:#edf8f2;
  color:#12683f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  padding:5px 8px;
  text-transform:uppercase
}
.visit-photo-status code{
  color:var(--muted);
  font-size:11px
}
.queue-photo-gallery{
  max-width:360px;
  margin-top:10px;
  border:1px solid var(--line);
  background:#f7f6f2
}
.queue-photo-gallery summary{
  position:relative;
  padding:10px 34px 10px 12px;
  cursor:pointer;
  color:var(--ink);
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.045em;
  list-style:none;
  text-transform:uppercase
}
.queue-photo-gallery summary::-webkit-details-marker{
  display:none
}
.queue-photo-gallery summary::after{
  content:'+';
  position:absolute;
  top:50%;
  right:12px;
  color:var(--red-text);
  font-size:18px;
  transform:translateY(-50%)
}
.queue-photo-gallery[open] summary::after{
  content:'\2212'
}
.queue-photo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  border-top:1px solid var(--line);
  padding:10px
}
.queue-photo-item{
  display:grid;
  min-width:0;
  align-content:start;
  gap:6px
}
.queue-photo-grid a{
  display:block;
  min-width:0;
  overflow:hidden;
  background:#fff;
  aspect-ratio:5/6
}
.queue-photo-item>small{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  overflow-wrap:anywhere
}
.queue-photo-grid img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%) brightness(var(--visit-photo-brightness,118%)) contrast(var(--visit-photo-contrast,90%)) opacity(var(--visit-photo-density,100%))
}
.queue-photo-gallery>small{
  display:block;
  padding:0 10px 10px;
  color:var(--muted);
  line-height:1.45
}
.queue-sync-label{
  display:block;
  margin-top:2px;
  color:#12683f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase
}
.queue-sync-label.is-error{
  color:var(--red-text)
}
.booking-photo-pass{
  grid-column:1/-1;
  margin:0 18px 18px;
  border:1px solid var(--line);
  background:#f7f6f2
}
.booking-photo-pass summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none
}
.booking-photo-pass summary::-webkit-details-marker{
  display:none
}
.booking-photo-pass summary span,.booking-photo-pass summary small{
  display:block
}
.booking-photo-pass summary small{
  margin-top:3px;
  color:var(--muted)
}
.booking-photo-pass summary b{
  color:var(--red-text);
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase
}
.booking-photo-pass-body{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  align-items:center;
  gap:24px;
  border-top:1px solid var(--line);
  padding:20px
}
.booking-photo-pass-body strong{
  display:block;
  margin:5px 0 8px;
  font:600 18px monospace
}
.booking-photo-pass-body p{
  max-width:520px;
  color:var(--muted)
}

/* Cashier operations and reports */

.cashier-form,.queue-panel,.product-sale-panel{
  align-content:start
}
.product-sale-tools{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px
}
.product-search{
  display:grid;
  min-width:min(100%,280px);
  gap:6px
}
.product-search input{
  min-height:44px
}
.quantity-stepper{
  display:grid;
  grid-template-columns:44px minmax(52px,72px) 44px;
  align-items:stretch
}
.quantity-stepper button{
  display:grid;
  min-width:44px;
  min-height:44px;
  place-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:20px;
  line-height:1
}
.quantity-stepper button:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.quantity-stepper input{
  width:100%;
  min-height:44px;
  border-right:0;
  border-left:0;
  padding-inline:6px;
  text-align:center
}
.queue-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  border-block:1px solid var(--line);
  margin-bottom:var(--s3);
  padding:12px 0
}
.queue-filters,.history-filter{
  display:flex;
  flex-wrap:wrap;
  gap:4px
}
.queue-filters a,.history-filter a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.045em;
  padding:8px 14px;
  text-transform:uppercase
}
.queue-filters a:hover,.history-filter a:hover{
  border-color:var(--red);
  color:var(--red-text)
}
.queue-filters a.active,.history-filter a.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
.queue-refresh{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  text-align:right
}
.queue-refresh small{
  color:var(--muted);
  line-height:1.35
}
.queue-refresh time{
  display:block;
  color:var(--ink);
  font-weight:600
}
.history-filter{
  margin:-8px 0 var(--s4)
}
.status-actions,.status-action-form{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px
}
.status-actions{
  min-width:210px;
  flex-wrap:wrap
}
.status-action-form{
  margin:0
}
.status-action-form:has(.payment-picker){
  display:grid;
  min-width:290px;
  gap:8px
}
.status-action-form:has(.payment-picker)>.btn{
  width:100%
}
.status-action-form label{
  min-width:145px
}
.status-action-form select{
  min-height:44px;
  padding-block:8px
}
.status-terminal{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  border:1px solid var(--line);
  background:#f5f4f0;
  color:var(--muted);
  font-size:12px;
  padding:8px 12px
}
.management-nav{
  display:flex;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow-x:auto
}
.management-nav-group{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-content:flex-start;
  border-right:1px solid var(--line)
}
.management-nav-group:last-child{
  border-right:0
}
.management-nav-label{
  width:100%;
  border-bottom:1px solid var(--line);
  background:#f5f4f0;
  color:var(--muted);
  font:600 10px BarberOswald,sans-serif;
  letter-spacing:.11em;
  padding:7px 14px 5px;
  text-transform:uppercase
}
.management-nav-group a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  border-right:1px solid var(--line);
  font:600 13px BarberOswald,sans-serif;
  letter-spacing:.04em;
  padding:11px 15px;
  text-transform:uppercase
}
.management-nav-group a:last-child{
  border-right:0
}
.management-nav-group a:hover{
  color:var(--red-text)
}
.management-nav-group a.active{
  background:var(--red);
  color:#fff
}
.report-center-nav{
  width:fit-content;
  max-width:100%
}
.report-center-nav a{
  min-width:150px;
  text-align:center
}
.expense-period-section{
  margin-bottom:var(--s4);
  border:1px solid var(--line);
  background:#fff;
  padding:var(--s4)
}
.expense-period-section>.section-title{
  align-items:end
}
.expense-period-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line)
}
.expense-period-grid article{
  position:relative;
  overflow:hidden;
  min-height:145px;
  background:#f8f7f3;
  padding:24px
}
.expense-period-grid article:after{
  content:"";
  position:absolute;
  right:-22px;
  bottom:-30px;
  width:92px;
  height:92px;
  border:14px solid rgba(239,24,32,.08);
  transform:rotate(-30deg)
}
.expense-period-grid span,.expense-period-grid strong,.expense-period-grid small{
  display:block;
  position:relative;
  z-index:1
}
.expense-period-grid span{
  color:var(--red-text);
  font:600 12px BarberOswald,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase
}
.expense-period-grid strong{
  margin:9px 0 13px;
  font:600 clamp(25px,3vw,37px) BarberOswald,sans-serif
}
.expense-period-grid small{
  color:var(--muted);
  font-size:11px
}
.report-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s4);
  align-items:start
}
.report-details{
  min-width:0
}
.report-amount{
  font-weight:600;
  text-align:right!important;
  white-space:nowrap
}
.report-amount.positive{
  color:var(--green)
}
.report-amount.negative{
  color:#a71919
}
.table-scroll:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-color:var(--focus-ring)
}
.report-table :where(th,td):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:-3px
}

/* Responsive layout: wide to narrow */
@media(max-width:1280px){
  .topbar,.topbar-inner{
    height:74px
  }
  .topbar-inner{
    width:min(1320px,calc(100% - 32px))
  }
  .menu-toggle{
    display:flex;
    width:46px;
    height:42px;
    margin-left:auto;
    flex-direction:column;
    align-items:center;
    justify-content:center
  }
  .menu-toggle span{
    width:20px;
    height:2px;
    margin:2px;
    background:#fff;
    transition:.2s
  }
  .menu-toggle[aria-expanded=true] span:nth-child(1){
    transform:translateY(6px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2){
    opacity:0
  }
  .menu-toggle[aria-expanded=true] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg)
  }
  .navigation{
    position:fixed;
    top:74px;
    right:0;
    bottom:0;
    z-index:3;
    display:grid;
    width:min(390px,100%);
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    align-items:stretch;
    justify-content:stretch;
    justify-items:stretch;
    overflow-y:auto;
    background:#151517;
    padding:24px;
    box-shadow:-18px 0 50px rgba(0,0,0,.28);
    visibility:hidden;
    pointer-events:none;
    transform:translateX(105%);
    transition:transform .22s ease,visibility 0s linear .22s
  }
  .navigation.open{
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition-delay:0s
  }
  .navigation>.nav,.navigation>.staff-nav,.navigation>.account{
    width:100%
  }
  .staff-notifications{
    width:100%;
    border-top:1px solid #45454a;
    margin-top:12px;
    padding-top:12px
  }
  .notification-trigger{
    width:100%;
    height:48px;
    justify-content:flex-start;
    gap:11px;
    padding:0 14px
  }
  .notification-trigger-label{
    display:inline;
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase
  }
  .notification-count{
    position:static;
    margin-left:auto;
    border:0
  }
  .notification-panel{
    position:static;
    width:100%;
    margin-top:8px;
    box-shadow:none
  }
  .navigation:before{
    content:"MENU";
    color:#777;
    font:600 11px BarberOswald;
    letter-spacing:.16em
  }
  .nav,.staff-nav,.account{
    display:grid;
    gap:0
  }
  .nav a,.login-link,.nav-admin{
    border-bottom:1px solid #303034;
    color:#eee;
    font-size:18px;
    padding:14px 2px
  }
  .nav a.active:after,.login-link.active:after,.nav-admin.active:after{
    right:auto;
    bottom:11px;
    left:-10px;
    width:3px;
    height:26px
  }
  .account{
    border-top:1px solid #45454a;
    margin-top:12px;
    padding-top:12px
  }
  .account-link{
    border-left:0;
    margin-left:0;
    padding:10px 0
  }
  .account form .btn{
    width:100%
  }
  .account .btn.primary{
    margin-top:8px
  }
  .menu-backdrop:not([hidden]){
    position:fixed;
    top:74px;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    display:block;
    border:0;
    background:rgba(0,0,0,.52);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease
  }
  body.menu-open .menu-backdrop:not([hidden]){
    opacity:1;
    pointer-events:auto
  }
  .home-hero{
    min-height:760px;
    padding-top:82px
  }
  .hero-content{
    width:min(700px,75vw)
  }
  .overview-grid{
    grid-template-columns:1fr 1fr
  }
  .overview-item:last-child{
    grid-column:1/-1;
    min-height:280px
  }
  .service-showcase,.service-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .service-preview:nth-child(3n){
    border-right:1px solid #333
  }
  .service-preview:nth-child(2n){
    border-right:0
  }
  .barber-card{
    flex-basis:calc((100% - 24px)/2)
  }
  .booking-layout{
    grid-template-columns:minmax(0,1fr) 300px
  }
  .barber-options{
    grid-template-columns:repeat(2,1fr)
  }
  .dashboard-grid{
    grid-template-columns:minmax(0,1fr) 260px
  }
  .finance-layout,.manage-layout,.expense-page,.settings-layout{
    grid-template-columns:340px minmax(0,1fr)
  }
}

@media(max-width:960px){
  .booking-layout,.dashboard-grid,.cashier-layout,.finance-layout,.manage-layout,.expense-page,.settings-layout,.report-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .booking-summary,.dashboard-side,.finance-form,.manage-form{
    position:static
  }
  .cashier-switcher{
    position:sticky;
    top:82px;
    z-index:20
  }
  .queue-toolbar{
    align-items:stretch;
    flex-direction:column
  }
  .queue-refresh{
    justify-content:space-between;
    text-align:left
  }
  .management-nav{
    margin-right:-24px;
    margin-left:-24px;
    padding-left:24px;
    border-right:0;
    border-left:0
  }
  .management-nav-group{
    min-width:max-content
  }
}

@media(max-width:800px){
  .booking-success-shell{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    padding:46px 24px 30px
  }
  .booking-success-close{
    top:-34px;
    left:0
  }
  .booking-success-message h2{
    margin-top:20px
  }
  .booking-ticket{
    transform:none;
    box-shadow:8px 10px 0 rgba(23,23,25,.08)
  }
}

@media(max-width:760px){
  :root{
    --s5:24px;
    --s6:36px;
    --s7:52px
  }
  body{
    font-size:15px
  }
  .brand small{
    display:none
  }
  .brand strong{
    font-size:18px
  }
  .brand-mark{
    width:44px;
    height:44px
  }
  .navigation{
    width:100%
  }
  .main-shell{
    width:min(100% - 28px,1320px);
    padding:36px 0 58px
  }
  .alert{
    top:88px;
    right:14px;
    width:calc(100% - 28px)
  }
  .home-hero{
    min-height:620px;
    padding:72px 22px
  }
  .hero-logo-mark{
    top:42%;
    right:-30%;
    width:112vw;
    max-height:68%;
    opacity:.1
  }
  .hero-content{
    width:100%;
    max-width:calc(100vw - 44px)
  }
  .hero-kicker{
    font-size:12px
  }
  .hero-content h1{
    max-width:100%;
    font-size:clamp(48px,14vw,61px)
  }
  .hero-content p{
    font-size:16px
  }
  .home-section{
    width:calc(100% - 28px);
    padding:68px 0
  }
  .home-section.dark{
    width:100%;
    padding-inline:14px
  }
  .section-head{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:30px
  }
  .section-head h2{
    font-size:43px
  }
  .overview-grid,.service-showcase,.service-grid,.visit-strip,.location-layout{
    grid-template-columns:1fr
  }
  .overview-item,.overview-item:last-child{
    grid-column:auto;
    min-height:330px
  }
  .barber-overview-link{
    width:88%
  }
  .business-hours-day{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:10px
  }
  .business-day-times{
    grid-template-columns:1fr
  }
  .service-preview{
    min-height:260px;
    border-right:0!important;
    border-bottom:1px solid #333
  }
  .review-score{
    justify-self:start
  }
  .public-review-grid{
    display:flex;
    gap:14px;
    margin-right:-14px;
    overflow-x:auto;
    padding:3px 14px 18px 0;
    scroll-behavior:smooth;
    scroll-padding-left:0;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch
  }
  .public-review-card{
    min-height:240px;
    flex:0 0 min(84vw,340px);
    scroll-snap-align:start;
    scroll-snap-stop:always
  }
  .mobile-swipe-hint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:6px 0 0;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.04em;
    text-transform:uppercase
  }
  .barber-card{
    flex-basis:min(84vw,340px)
  }
  .barber-carousel-controls{
    justify-content:center;
    gap:9px
  }
  .barber-carousel-note{
    margin:8px 0 0;
    text-align:center
  }
  .visit-photo{
    min-height:340px
  }
  .visit-copy{
    padding:38px 25px
  }
  .visit-details span{
    grid-template-columns:80px 1fr
  }
  .page-heading{
    display:grid;
    min-height:230px;
    margin-top:-36px;
    margin-bottom:32px;
    padding:42px 22px;
    align-content:center;
    gap:14px
  }
  .page-heading h1{
    font-size:47px
  }
  .page-heading>p{
    margin:0
  }
  .page-heading.compact-heading{
    min-height:200px
  }
  .inline-form{
    width:100%;
    align-items:stretch
  }
  .inline-form input{
    min-width:0
  }
  .inline-form .btn{
    flex:0 0 auto
  }
  .date-filter-card{
    grid-template-columns:1fr auto;
    width:100%;
    min-width:0
  }
  .date-filter-copy{
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .date-filter-control input{
    min-height:56px
  }
  .page-heading .date-filter-submit{
    min-height:56px
  }
  .date-filter-submit span{
    display:none
  }
  .barber-card>img{
    height:370px
  }
  .shop-photo{
    min-height:340px
  }
  .location-detail{
    padding:30px 24px
  }
  .location-detail h2{
    font-size:30px
  }
  .location-detail dl>div{
    grid-template-columns:80px 1fr
  }
  .auth-page{
    grid-template-columns:1fr;
    min-height:0;
    margin:0
  }
  .auth-copy{
    min-height:360px;
    padding:40px 26px
  }
  .auth-panel{
    min-height:450px;
    padding:40px 26px
  }
  .auth-page-forgot-password .auth-copy,.auth-page-reset-password .auth-copy{
    min-height:270px
  }
  .auth-page-forgot-password .auth-panel,.auth-page-reset-password .auth-panel{
    min-height:420px
  }
  .access-page{
    min-height:430px;
    padding:40px 25px
  }
  .booking-step{
    padding:22px 18px
  }
  .option-grid,.barber-options,.schedule-step,.form-two,.editor-form{
    grid-template-columns:1fr
  }
  .cashier-service-grid{
    grid-template-columns:1fr
  }
  .walkin-barber-grid{
    grid-template-columns:1fr
  }
  .payment-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .time-slot-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .schedule-step legend,.schedule-step .slot-note,.booking-hours-strip,.editor-wide{
    grid-column:auto
  }
  .booking-hours-strip{
    grid-template-columns:1fr
  }
  .booking-hours-strip span{
    grid-template-columns:80px minmax(0,1fr);
    align-items:center;
    border-right:0;
    border-bottom:1px solid #343438
  }
  .booking-hours-strip span:last-child{
    border-bottom:0
  }
  .profile-block{
    grid-column:1/-1
  }
  .next-booking{
    grid-template-columns:auto 1fr
  }
  .next-booking>strong{
    grid-column:2
  }
  .booking-row,.admin-booking,.queue-row{
    grid-template-columns:1fr
  }
  .booking-row-action{
    justify-items:start
  }
  .admin-booking time{
    font-size:24px
  }
  .status-form{
    width:100%;
    align-items:stretch
  }
  .status-form select{
    min-width:0
  }
  .status-form .btn{
    flex:0 0 auto
  }
  .queue-number{
    display:flex;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
    justify-content:space-between
  }
  .queue-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    justify-content:stretch
  }
  .queue-actions>.btn{
    width:100%
  }
  .queue-actions .status-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto
  }
  .queue-actions .status-form select{
    width:auto;
    min-width:0
  }
  .subnav{
    margin-top:-16px;
    margin-right:-14px;
    margin-left:-14px;
    padding-left:14px;
    border-right:0;
    border-left:0
  }
  .subnav a{
    padding:12px 14px
  }
  .panel,.queue-panel,.manage-list,.settings-preview{
    padding:20px
  }
  .manage-row,.barber-manage-row,.product-manage-row,.cashier-account-row,.money-row{
    grid-template-columns:1fr
  }
  .barber-manage-row>img{
    width:100%;
    height:210px
  }
  .product-manage-photo{
    width:100%;
    height:180px
  }
  .row-actions{
    justify-content:flex-start
  }
  .editable-row .manage-editor{
    margin:2px -16px -16px;
    padding:20px 16px
  }
  .settings-form{
    padding:22px
  }
  .settings-preview img{
    height:200px
  }
  .footer{
    grid-template-columns:1fr;
    gap:30px;
    padding-block:44px
  }
  .barber-card>img,.barber-overview img{
    filter:none
  }
  .barber-card:hover>img{
    transform:none
  }
  .page-heading:after{
    display:none
  }
  .footer-location,.footer-nav{
    width:100%;
    justify-self:start
  }
  .dashboard-grid{
    gap:26px
  }
  .dashboard-primary{
    min-width:0
  }
  .dashboard-side{
    position:static;
    grid-template-columns:1fr
  }
  .booking-history-card{
    grid-template-columns:1fr
  }
  .booking-history-card .booking-row-action{
    align-items:flex-start;
    border-top:1px solid var(--line);
    border-left:0;
    padding:17px 22px
  }
  .booking-card-top{
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  .booking-history-card .review-form,.booking-history-card .review-result{
    margin:0 14px 14px
  }
  .review-form,.review-edit-form{
    grid-template-columns:1fr
  }
  .review-result-footer{
    align-items:flex-start;
    flex-direction:column
  }
  .review-edit-actions{
    flex-direction:row
  }
  .dashboard-account-card .profile-block{
    padding:20px
  }
  .product-sale-grid{
    grid-template-columns:1fr
  }
  .product-sale-panel{
    margin-top:0
  }
  .report-toolbar{
    align-items:stretch;
    flex-direction:column
  }
  .report-center-nav{
    width:auto;
    margin-right:-14px;
    margin-left:-14px;
    padding-left:14px
  }
  .report-center-nav a{
    min-width:138px
  }
  .expense-period-section{
    padding:20px
  }
  .expense-period-section>.section-title{
    align-items:flex-start;
    flex-direction:column
  }
  .expense-period-grid{
    grid-template-columns:1fr
  }
  .cashier-stats{
    display:flex;
    margin-right:-14px;
    overflow-x:auto;
    padding-right:14px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin
  }
  .cashier-stats article{
    min-width:168px;
    flex:0 0 168px;
    padding:16px;
    scroll-snap-align:start
  }
  .cashier-switcher{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .cashier-switcher button{
    font-size:11px;
    padding-inline:6px;
    white-space:normal
  }
  .cashier-panel-hidden{
    display:none!important
  }
  .queue-filters,.history-filter{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%
  }
  .history-filter{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .queue-filters a,.history-filter a{
    min-width:0;
    padding-inline:8px
  }
  .status-actions,.status-action-form{
    width:100%;
    justify-content:stretch
  }
  .status-action-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto
  }
  .status-action-form:has(.payment-picker){
    min-width:0;
    grid-template-columns:minmax(0,1fr)
  }
  .status-action-form:only-child{
    grid-template-columns:minmax(0,1fr)
  }
  .status-action-form label{
    min-width:0
  }
  .status-action-form .btn{
    width:100%
  }
  .management-nav{
    margin-right:-14px;
    margin-left:-14px;
    padding-left:14px
  }
  .product-sale-tools{
    align-items:stretch;
    flex-direction:column
  }
  .product-search{
    width:100%;
    min-width:0
  }
  .product-sale-item{
    align-items:flex-start;
    flex-direction:column
  }
  .quantity-stepper{
    width:100%;
    grid-template-columns:44px minmax(0,1fr) 44px
  }
  .upload-preview{
    align-items:stretch;
    flex-direction:column
  }
  .upload-preview img{
    width:100%;
    height:180px
  }
}

@media(max-width:680px){
  .visit-photo-heading{
    align-items:stretch;
    flex-direction:column
  }
  .visit-photo-code{
    min-width:0
  }
  .visit-photo-visit-card{
    grid-template-columns:auto minmax(0,1fr)
  }
  .visit-photo-visit-card>strong{
    grid-column:2
  }
  .visit-photo-visit-card .visit-photo-queue{
    min-width:82px
  }
  .visit-photo-slots{
    grid-template-columns:1fr;
    gap:18px
  }
  .visit-photo-slot{
    min-height:0
  }
  .booking-photo-pass-body{
    grid-template-columns:1fr
  }
  .booking-photo-pass-body .visit-qr{
    width:150px
  }
}

@media(max-width:520px){
  .logout-dialog{
    width:calc(100% - 20px)
  }
  .logout-dialog-card{
    padding:32px 22px 22px
  }
  .logout-dialog-actions{
    grid-template-columns:1fr
  }
  .booking-success-dialog{
    width:calc(100% - 20px);
    max-height:calc(100dvh - 20px)
  }
  .booking-success-shell{
    gap:24px;
    padding:44px 16px 24px
  }
  .booking-success-message h2{
    font-size:38px
  }
  .booking-success-actions{
    display:grid;
    grid-template-columns:1fr
  }
  .booking-success-actions .btn{
    width:100%
  }
  .booking-ticket>header,.booking-ticket-main,.booking-ticket-details,.booking-ticket>footer{
    padding-right:18px;
    padding-left:18px
  }
  .booking-ticket-main{
    display:grid
  }
  .booking-ticket-status{
    text-align:left
  }
  .booking-ticket-details{
    grid-template-columns:1fr;
    gap:14px
  }
}

@media(max-width:430px){
  .hero-content h1{
    font-size:47px
  }
  .service-card{
    min-height:260px;
    padding:24px
  }
  .product-card{
    min-height:320px
  }
  .product-card-media{
    height:148px
  }
  .product-card .service-content p{
    margin-top:16px
  }
  .row-actions .btn{
    flex:1
  }
  .row-actions form{
    display:flex;
    flex:1
  }
  .row-actions form .btn{
    width:100%
  }
  .booking-card-main{
    padding:20px
  }
  .booking-card-meta{
    display:grid;
    gap:5px
  }
  .review-result-head{
    align-items:flex-start;
    flex-direction:column
  }
  .review-stars{
    font-size:19px
  }
  .dashboard-account-stats{
    grid-template-columns:1fr
  }
  .dashboard-account-stats>div+div{
    border-top:1px solid var(--line);
    border-left:0
  }
}

@media(hover:none),(pointer:coarse){
  .barber-card>img,.barber-overview img{
    filter:none
  }
  .barber-card:hover>img{
    transform:none
  }
  .public-review-card:hover,.service-card:hover{
    box-shadow:none;
    transform:none
  }
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    transition:none!important
  }
  .barber-grid,.public-review-grid{
    scroll-behavior:auto
  }
  .barber-overview-media img{
    transition:none
  }
}

.operations-panel{margin-bottom:20px}
.operations-list{margin:24px 0;padding:24px;min-width:0}
.operations-note{padding:16px;background:#f1f1ef;color:#242424;line-height:1.6;overflow-wrap:anywhere}
.operation-record{padding:20px 0;border-bottom:1px solid #c8c8c8;min-width:0;overflow-wrap:anywhere}
.operation-record:last-of-type{border-bottom:0}
.operation-record h2,.operation-record h3{margin:8px 0}
.operation-record p{margin:8px 0;color:#454545}
.operation-details summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700;color:#161616}
.operation-details summary:focus-visible{outline:3px solid #b61b22;outline-offset:3px}
.operation-form{display:grid;gap:18px;margin-top:16px}
.operation-form label{display:grid;gap:8px;min-width:0}
.operation-form .operation-check{display:flex;align-items:center;gap:12px;min-height:44px}
.operation-check input{width:24px;height:24px;flex-shrink:0}
.audit-values{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,2fr);gap:8px 12px;line-height:1.5}
.audit-values dt{font-weight:700}
.audit-values dd{margin:0;overflow-wrap:anywhere}
.operations-list .btn{min-height:44px}
@media(max-width:600px){.operations-list{padding:16px}.operation-form .form-two,.operation-details .form-two{grid-template-columns:minmax(0,1fr)}.operations-panel .inline-form{display:grid;gap:12px}.operation-record .section-title{align-items:flex-start;flex-wrap:wrap}.audit-values{grid-template-columns:minmax(0,1fr)}.audit-values dd{margin-bottom:8px}}

@media print{
  .topbar,.footer,.btn,.subnav,.report-toolbar,.alert{
    display:none!important
  }
  .main-shell{
    width:100%;
    padding:0
  }
  .page-heading{
    min-height:auto;
    margin:0 0 20px;
    padding:20px;
    background:#fff;
    color:#000
  }
  .page-heading h1{
    color:#000
  }
  .manage-list,.owner-stats article{
    break-inside:avoid
  }
}

.pos-checkout{border:1px solid var(--line,#ccc);padding:14px;min-width:0;width:100%;display:grid;gap:14px;text-align:left;background:#fff}
.pos-checkout legend{font-weight:700;padding:0 5px}
.pos-member-section,.pos-payment-section,.pos-cash-tender{display:grid;gap:10px;min-width:0}
.pos-member-section{align-content:start}
.pos-member-details{display:grid;gap:10px;min-width:0}
.pos-payment-section{border-top:1px solid var(--line);padding-top:13px}
.pos-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pos-section-heading strong{font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.pos-section-heading span,.pos-checkout small{color:var(--muted);font-size:12px}
.pos-checkout label{display:grid;gap:5px;min-width:0;font-size:13px;font-weight:600}
.pos-checkout input,.pos-checkout select{width:100%;min-width:0;min-height:44px}
.pos-checkout p,.pos-checkout small{margin:0;overflow-wrap:anywhere;line-height:1.4}
.pos-checkout .pos-member-status{background:#f5f4f0;border-left:3px solid var(--ink);padding:9px 10px;font-size:12px}
.pos-checkout .pos-payment-summary{display:grid;gap:7px;background:#f5f4f0;padding:10px 12px;font-size:13px}
.pos-payment-summary span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.pos-payment-summary span:last-child{border-top:1px solid var(--line);padding-top:7px;font-weight:700}
.pos-payment-summary span:last-child strong{font-size:17px;color:var(--red-text)}
.pos-tender-title{font-size:13px;font-weight:600}
.pos-tender-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pos-tender-presets button{min-width:0;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:700;line-height:1.2;font-family:inherit;cursor:pointer}
.pos-tender-presets button:hover,.pos-tender-presets button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.pos-tender-presets button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pos-tender-presets button:disabled{opacity:.45;cursor:not-allowed;background:#f5f4f0;color:var(--muted);border-color:var(--line)}
.pos-checkout [data-pos-received]{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.pos-checkout .pos-change{padding:9px 10px;background:#f5f4f0;font-weight:700;font-size:13px}
.pos-checkout .pos-change[data-state=short]{background:#fff1f1;color:var(--red-text)}
.status-action-form:has(.pos-checkout){display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;min-width:0}
.queue-payment-details{min-width:0}
.queue-payment-details>summary{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:8px 16px;cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;list-style:none;white-space:nowrap}
.queue-payment-details>summary::-webkit-details-marker{display:none}
.queue-payment-details .queue-payment-open{display:none}
.queue-payment-details[open] .queue-payment-closed{display:none}
.queue-payment-details[open] .queue-payment-open{display:inline}
.queue-payment-details>summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.queue-payment-details[open]{flex:0 0 100%;width:100%;order:-1}
.queue-payment-details[open]>summary{justify-content:flex-start;width:max-content;max-width:100%;margin-bottom:14px;background:#fff;color:var(--ink)}
.queue-payment-details[open]>summary:before{content:'−';margin-right:8px;font-size:18px;line-height:1}
.queue-payment-details:not([open])+.pos-complete-submit{display:none}
.queue-row:has(.queue-payment-details[open]){grid-template-columns:82px minmax(0,1fr);align-items:start;gap:14px 18px}
.queue-row:has(.queue-payment-details[open])>.queue-number{align-self:start}
.queue-row:has(.queue-payment-details[open])>.queue-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;width:100%;border-top:1px solid var(--line);padding-top:16px}
.queue-row:has(.queue-payment-details[open]) .status-action-form:has(.pos-checkout){display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:none}
.queue-row:has(.queue-payment-details[open]) .status-action-form:has(.pos-checkout)>.payment-picker{grid-column:1/-1;max-width:520px}
.queue-row:has(.queue-payment-details[open]) .status-action-form:has(.pos-checkout)>.pos-checkout{grid-column:1/-1}
.queue-row:has(.queue-payment-details[open])>.queue-actions>.pos-complete-submit{min-width:220px;min-height:48px}
.queue-row:has(.queue-payment-details[open])>.queue-actions>.status-action-form>.btn,.queue-row:has(.queue-payment-details[open])>.queue-actions>.btn[data-print-ticket]{min-height:48px}
.queue-row:has(.queue-payment-details[open]) .pos-checkout:has(.pos-member-section){grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}
.queue-row:has(.queue-payment-details[open]) .pos-member-section{max-width:520px}
.queue-row:has(.queue-payment-details[open]) .pos-payment-section{border-top:1px solid var(--line);padding-top:16px}
.queue-row:has(.queue-payment-details[open]) .pos-cash-tender{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;align-items:start}
.queue-row:has(.queue-payment-details[open]) .pos-tender-title{grid-column:1/-1}
.queue-row:has(.queue-payment-details[open]) .pos-tender-presets{grid-column:1;grid-row:2/span 2}
.queue-row:has(.queue-payment-details[open]) [data-pos-cash-label]{grid-column:2;grid-row:2}
.queue-row:has(.queue-payment-details[open]) .pos-change{grid-column:2;grid-row:3}
@media(max-width:860px){.queue-row:has(.queue-payment-details[open]) .pos-cash-tender{grid-template-columns:minmax(0,1fr)}.queue-row:has(.queue-payment-details[open]) .pos-tender-title,.queue-row:has(.queue-payment-details[open]) .pos-tender-presets,.queue-row:has(.queue-payment-details[open]) [data-pos-cash-label],.queue-row:has(.queue-payment-details[open]) .pos-change{grid-column:1;grid-row:auto}}
@media(max-width:760px){.queue-row:has(.queue-payment-details[open]){grid-template-columns:minmax(0,1fr)}.queue-row:has(.queue-payment-details[open])>.queue-actions{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr)}.queue-row:has(.queue-payment-details[open]) .status-action-form:has(.pos-checkout){display:flex;flex-direction:column}.queue-row:has(.queue-payment-details[open]) .status-action-form:has(.pos-checkout)>.payment-picker{max-width:none}.queue-row:has(.queue-payment-details[open])>.queue-actions>.pos-complete-submit{width:100%;min-width:0}}
@media(max-width:760px){.queue-row:has(.queue-payment-details:not([open]))>.queue-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.queue-row:has(.queue-payment-details:not([open]))>.queue-actions>.queue-payment-details{grid-column:1/-1}.queue-row:has(.queue-payment-details:not([open]))>.queue-actions>.status-action-form,.queue-row:has(.queue-payment-details:not([open]))>.queue-actions>.btn[data-print-ticket]{width:100%;min-width:0}}
.pos-cash-panel{margin-block:20px}
#cash-session-detail{scroll-margin-top:100px}
@media(max-width:960px){#cash-session-detail{scroll-margin-top:210px}}
.pos-cash-panel>p{margin-block:14px}
.pos-cash-panel>h3{margin-top:28px}
.pos-cash-panel .operation-details{margin-block:16px}
.pos-product-receipts{margin-top:24px}
.cashier-switcher{grid-template-columns:repeat(4,minmax(0,1fr))}
.pos-checkout [hidden],[data-reward-service-label][hidden],[data-reward-value-label][hidden]{display:none!important}
@media(max-width:600px){.cashier-switcher{grid-template-columns:repeat(2,minmax(0,1fr))}.status-action-form:has(.pos-checkout){width:100%}.pos-cash-panel .form-two{grid-template-columns:1fr}}

.pos-cash-panel{display:grid;gap:22px}
.cash-day-reminder{margin:0 0 16px;border-left:4px solid var(--red);background:#fff5f2;padding:14px 18px;color:#302b2a;line-height:1.5}
.cash-day-reminder a,.cash-accounting-note a{color:#9c1414;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cash-day-reminder a:focus-visible,.cash-accounting-note a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.cash-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0}
.cash-panel-head h2{margin:4px 0 6px;font:600 34px/1.15 BarberOswald,Arial,sans-serif}
.cash-panel-head p{max-width:72ch;margin:0;color:#414146;line-height:1.5}
.cash-session-state{flex:none;border:1px solid #bdbdc4;background:#ececef;padding:6px 10px;color:#34343a;font-size:13px;font-weight:700}
.cash-session-state.is-open{border-color:#86c7a2;background:#e5f5eb;color:#17623c}
.cash-open-form{display:flex;align-items:end;gap:12px;max-width:700px;border-top:1px solid var(--line);padding-top:18px}
.cash-open-form label{flex:1;min-width:0}
.cash-open-form .btn{flex:none;min-height:50px}
.cash-session-meta{margin:0;color:#414146;font-size:14px}
.cash-session-meta a{display:inline-block;margin-left:8px;color:#a01515;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cash-session-meta a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.cash-accounting-note{margin:-10px 0 0;color:#414146;line-height:1.5}
.cash-balance{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.cash-balance>div{display:grid;align-content:center;gap:6px;min-width:0;border:1px solid var(--line);padding:18px;overflow-wrap:anywhere}
.cash-balance-main{background:var(--deep);border-color:var(--deep)!important;color:#fff}
.cash-balance span{font-size:13px;font-weight:700}
.cash-balance strong{font:600 clamp(24px,3vw,35px)/1.18 BarberOswald,Arial,sans-serif}
.cash-balance small{font-size:12px;color:#e5e5e5}
.cash-actions{display:grid;gap:10px}
.cash-action{border:1px solid var(--line);min-width:0}
.cash-action summary,.cash-history summary{display:flex;align-items:center;min-height:52px;cursor:pointer;padding:10px 16px;font-weight:700;list-style:none}
.cash-action summary::-webkit-details-marker,.cash-history summary::-webkit-details-marker{display:none}
.cash-action summary:after,.cash-history summary:after{content:'+';margin-left:auto;padding-left:16px;font:600 25px/1 BarberOswald,Arial,sans-serif}
.cash-action[open] summary:after,.cash-history[open] summary:after{content:'−'}
.cash-action summary:focus-visible,.cash-history summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.cash-action-body{border-top:1px solid var(--line);padding:17px}
.cash-action-body>p{margin:0 0 16px;color:#414146}
.cash-action-form{align-items:end}
.cash-form-wide{grid-column:1/-1}
.cash-action-form textarea{min-height:50px}
.cash-difference{margin:0;border:1px solid var(--line);background:#f6f5f1;padding:10px 12px;color:#252529}
.cash-action-form .btn{min-height:48px}
.cash-list-section{min-width:0;border-top:1px solid var(--line);padding-top:20px}
.cash-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cash-list-head h3{margin:0;font:600 26px/1.2 BarberOswald,Arial,sans-serif}
.cash-list-head span{color:#45454a;font-size:13px}
.cash-empty{margin:0;border:1px dashed #aaa;padding:15px;color:#414146}
.cash-movement{padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.cash-movement>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px 12px}
.cash-movement>div strong{font-weight:700}
.cash-movement-amount{font-weight:700;font-variant-numeric:tabular-nums}
.cash-movement-amount.is-out{color:#a01515}
.cash-movement p{margin:4px 0 0;color:#303034}
.cash-movement small{display:block;margin-top:5px;color:#4b4b50}
#cash-session-detail{margin:0;min-width:0}
.cash-history{min-width:0;border:1px solid var(--line)}
.cash-history summary{background:#f6f5f1}
.cash-history summary span{margin-left:8px;color:#4b4b50;font-size:13px;font-weight:400}
.cash-history summary:after{margin-left:auto}
.cash-history-body{border-top:1px solid var(--line);padding:0 17px 17px}
.cash-session-row{padding:17px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.cash-session-row:last-of-type{border-bottom:0}
.cash-session-row-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.cash-session-row h4{margin:0;font-size:16px}
.cash-session-row-head span{color:#414146;font-size:14px}
.cash-session-row-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.cash-session-row-values p{display:grid;gap:2px;min-width:0;margin:0;font-size:14px}
.cash-session-row-values span{color:#4b4b50;font-size:12px}
.cash-session-row-values strong{font-variant-numeric:tabular-nums}
.cash-session-note{margin:0 0 10px;color:#414146}
.cash-session-row-actions{display:flex;flex-wrap:wrap;gap:8px}
.cash-session-row-actions .btn{min-height:44px}
.cash-detail-panel{min-width:0;border:1px solid var(--line);padding:20px;scroll-margin-top:150px}
.cash-detail-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.cash-detail-head h3{margin:0;font:600 26px/1.2 BarberOswald,Arial,sans-serif}
.cash-detail-head p{margin:4px 0 0;color:#414146}
.cash-detail-head .btn{flex:none;min-height:44px}
.cash-detail-people{margin:12px 0;color:#414146}
.cash-detail-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cash-detail-totals div{display:grid;gap:4px;min-width:0;border:1px solid var(--line);padding:12px;overflow-wrap:anywhere}
.cash-detail-totals span{font-size:12px;color:#45454a}
.cash-detail-totals strong{font:600 21px/1.2 BarberOswald,Arial,sans-serif}
.cash-detail-flow,.cash-detail-note{margin:11px 0;color:#303034}
.cash-detail-panel .cash-list-head{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.cash-detail-panel .cash-list-head h4{margin:0;font:600 24px/1.2 BarberOswald,Arial,sans-serif}
@media(max-width:700px){
  .cash-panel-head{display:block}
  .cash-panel-head h2{font-size:30px}
  .cash-session-state{display:inline-block;margin-top:12px}
  .cash-balance{grid-template-columns:minmax(0,1fr)}
  .cash-balance>div{padding:14px}
  .cash-balance strong{font-size:29px}
  .cash-session-row-values{grid-template-columns:minmax(0,1fr)}
  .cash-session-row-values p{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
  .cash-detail-head{display:grid}
  .cash-detail-head .btn{justify-self:start}
  .cash-detail-totals{grid-template-columns:minmax(0,1fr)}
  .cash-detail-totals div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
}
@media(max-width:600px){
  .pos-cash-panel{gap:18px;padding:18px}
  .cash-open-form{display:grid;grid-template-columns:minmax(0,1fr)}
  .cash-open-form .btn{width:100%}
  .cash-action-body,.cash-history-body{padding:14px}
  .cash-action-form{grid-template-columns:minmax(0,1fr)}
  .cash-session-row-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .cash-session-row-actions .btn{width:100%}
  .cash-detail-panel{padding:14px}
}

.membership-section{min-width:0;margin-bottom:24px}
.membership-section-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}
.membership-section-head h2{margin:0;font:600 30px/1.15 BarberOswald,Arial,sans-serif}
.membership-section-head p{max-width:68ch;margin:6px 0 0;color:#48484c;line-height:1.5}
.membership-count{flex:none;align-self:center;border:1px solid var(--line);padding:5px 10px;color:#333;font-size:13px;font-weight:700}
.membership-guide{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}
.membership-guide summary,.membership-editor summary,.membership-member-detail summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-weight:700;list-style:none}
.membership-guide summary::-webkit-details-marker,.membership-editor summary::-webkit-details-marker,.membership-member-detail summary::-webkit-details-marker{display:none}
.membership-guide summary:after,.membership-editor summary:after,.membership-member-detail summary:after{content:'+';margin-left:auto;padding-left:16px;font:600 23px/1 BarberOswald,Arial,sans-serif}
.membership-guide[open] summary:after,.membership-editor[open] summary:after,.membership-member-detail[open] summary:after{content:'−'}
.membership-guide summary:focus-visible,.membership-editor summary:focus-visible,.membership-member-detail summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.membership-guide-body{padding:0 0 14px;color:#424247}
.membership-guide-body p{max-width:78ch;margin:0 0 10px}
.membership-editor{border:1px solid var(--ink);margin-bottom:18px}
.membership-editor>summary{background:var(--deep);color:#fff;padding:0 18px}
.membership-editor-body{padding:18px}
.membership-editor-body>p{margin:0 0 18px;color:#444}
.membership-form{min-width:0;align-items:start}
.membership-form label{min-width:0}
.membership-form small{display:block;margin-top:3px;color:#454545;font-weight:400}
.membership-rule-form,.membership-entry-form{max-width:920px;gap:16px 18px}
.membership-rule-form label,.membership-entry-form label{display:grid;align-content:start;gap:7px}
.membership-rule-form input,.membership-rule-form select,.membership-entry-form input,.membership-entry-form select{width:100%;min-width:0;min-height:48px}
.membership-rule-form small,.membership-entry-form small{margin:0}
.membership-form-wide,.membership-form-note,.membership-form-actions{grid-column:1/-1}
.membership-form-note{margin:0;color:#444}
.membership-form-actions{display:flex;justify-content:flex-start}
.membership-rule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.membership-rule{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--line);padding:17px;overflow-wrap:anywhere}
.membership-rule-head,.membership-member-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.membership-rule h3,.membership-member h3{margin:0;font:600 24px/1.2 BarberOswald,Arial,sans-serif;overflow-wrap:anywhere}
.membership-rule p{margin:0}
.membership-rule-frequency{font-size:14px;color:#48484c}
.membership-rule-benefit{font-weight:700}
.membership-rule form{margin-top:auto;padding-top:7px}
.membership-rule .btn{min-height:44px}
.membership-state{flex:none;border:1px solid #bdbdc4;background:#ececef;padding:4px 8px;color:#34343a;font-size:12px;font-weight:700}
.membership-state.is-active{border-color:#86c7a2;background:#e5f5eb;color:#17623c}
.membership-member-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.membership-tier{border:1px solid #b7aba0;background:#f7f2ed;padding:4px 8px;color:#3d332b;font-size:12px;font-weight:700}
.membership-search{display:grid;gap:8px;margin-bottom:18px}
.membership-search>label{font-size:14px;font-weight:700;color:#303034}
.membership-search-row{display:flex;gap:10px;max-width:720px}
.membership-search-row input{min-width:0;flex:1}
.membership-search-row .btn{flex:none;min-height:50px}
.membership-member-list{display:grid;gap:14px}
.membership-member{min-width:0;border:1px solid var(--line);padding:19px;overflow-wrap:anywhere}
.membership-member-identity{margin:4px 0 0;color:#414146;font-size:14px}
.membership-member-identity span{padding:0 5px}
.membership-member-stats{display:flex;gap:0;margin:16px 0;border-block:1px solid var(--line)}
.membership-member-stats p{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0;padding:9px 18px 9px 0}
.membership-member-stats p+p{border-left:1px solid var(--line);padding-left:18px}
.membership-member-stats strong{font:600 26px/1 BarberOswald,Arial,sans-serif}
.membership-member-stats span{font-size:13px;color:#45454a}
.membership-rewards{margin:0 0 13px}
.membership-rewards>strong{font-size:14px}
.membership-rewards ul{margin:6px 0 0;padding-left:20px}
.membership-rewards li{margin-bottom:3px}
.membership-rewards li span{color:#48484c}
.membership-member-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.membership-member-detail{min-width:0;border:1px solid var(--line)}
.membership-member-detail summary{padding:0 13px;font-size:14px}
.membership-member-detail[open]{grid-column:1/-1}
.membership-detail-body{border-top:1px solid var(--line);padding:16px}
.membership-detail-body>p{margin:0 0 10px}
.membership-detail-body>small{color:#454545}
.membership-payment{padding:9px 0;border-bottom:1px solid var(--line)}
.membership-payment:first-child{padding-top:0}
.membership-payment p{margin:0;font-size:14px;overflow-wrap:anywhere}
.membership-payment p:first-child{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.membership-payment p span{color:#48484c}
.membership-delete-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.membership-delete-form small{color:#454545}
.membership-empty{margin:0;border:1px dashed #aaa;padding:16px;color:#414146}
@media(max-width:860px){.membership-rule-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .membership-section{padding:18px;margin-bottom:16px}
  .membership-section-head{display:block;margin-bottom:16px}
  .membership-section-head h2{font-size:27px}
  .membership-count{display:inline-block;margin-top:11px}
  .membership-editor-body,.membership-detail-body{padding:14px}
  .membership-form{grid-template-columns:minmax(0,1fr)}
  .membership-search-row{display:grid;grid-template-columns:minmax(0,1fr)}
  .membership-search-row .btn{width:100%}
  .membership-member{padding:14px}
  .membership-member-head{flex-wrap:wrap}
  .membership-member-stats p{display:grid;gap:0;flex:1}
  .membership-member-stats strong{font-size:24px}
  .membership-member-actions{grid-template-columns:minmax(0,1fr)}
  .membership-member-detail[open]{grid-column:auto}
}