:root {
  --bg:#eeede8;
  --paper:#fff;
  --ink:#181a19;
  --muted:#64635d;
  --green:#272928;
  --sage:#eee8d9;
  --border:#d7d5ce;
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Inter',sans-serif;
  --radius:14px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

button,input,textarea,select {
  font:inherit
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:default;
  opacity:.45
}

a {
  color:inherit;
  text-decoration:none
}

button {
  border:0;
  background:none
}

img {
  max-width:100%;
  display:block
}

.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle
}

p {
  line-height:1.65
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2 {
  font-family:var(--serif);
  font-weight:400
}

h3 {
  font-size:16px;
  font-weight:550
}

input,textarea,select {
  border:1px solid #dce1d7;
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
  color:var(--ink);
  min-width:0;
  max-width:100%
}

input:focus,textarea:focus,select:focus {
  outline:2px solid #9cad93;
  outline-offset:2px
}

input[type=checkbox] {
  accent-color:var(--green);
  width:18px;
  height:18px;
  cursor:pointer
}

select {
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364635d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:44px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}

textarea {
  resize:vertical
}

button,a,input,select,textarea {
  touch-action:manipulation
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--green);
  outline-offset:4px
}

::selection {
  background:#d4dfca
}

label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:14px;
  font-weight:500;
  min-width:0
}

.header {
  height:110px;
  max-width:1320px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 48px;
  border-bottom:1px solid var(--border)
}

.brand {
  display:flex;
  align-items:center;
  flex-shrink:0
}

.header-brand-image {
  width:242px;
  height:auto
}

.header nav {
  display:flex;
  gap:34px;
  align-self:stretch;
  align-items:center
}

.header nav a {
  color:#7a7e73;
  font-size:14px;
  position:relative;
  padding:12px 0;
  transition:color .2s
}

.header nav a:hover,.header nav a.active {
  color:var(--green)
}

.header nav a.active:after {
  position:absolute;
  content:'';
  width:4px;
  height:4px;
  background:var(--green);
  border-radius:50%;
  bottom:0;
  left:50%
}

#account-nav {
  display:flex;
  align-items:center;
  gap:18px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  padding:14px 22px;
  min-height:46px;
  border-radius:7px;
  font-size:14px;
  font-weight:500;
  transition:background .2s,transform .2s,box-shadow .2s;
  white-space:nowrap
}

.button:hover:not(:disabled) {
  transform:translateY(-2px)
}

.button-primary {
  background:var(--green);
  color:white;
  border:1px solid var(--green)
}

.button-primary:hover:not(:disabled) {
  background:#273c2f;
  box-shadow:0 5px 14px #384e3f15
}

.button-primary:disabled {
  background:#a6b09e;
  border-color:#a6b09e;
  opacity:.65
}

.button-outline {
  border:1px solid #cdd3c6;
  background:transparent
}

.button-outline:hover:not(:disabled) {
  background:#edf0e8
}

.button .icon {
  width:17px;
  height:17px
}

.button-small {
  padding:9px 15px;
  min-height:36px
}

.text-button {
  padding:0;
  font-size:14px;
  font-weight:500;
  line-height:1.6
}

.text-button:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.subtle {
  color:var(--muted)
}

.avatar {
  border:1px solid #dce2d3;
  background:#e6ecdf;
  width:36px;
  height:36px;
  border-radius:50%;
  font-family:var(--serif);
  font-size:22px
}

.account-link {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px
}

.account-link .icon {
  width:17px
}

.page-heading {
  margin-bottom:42px
}

.eyebrow {
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:1.9px;
  color:#7b866e;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
  line-height:1.5
}

.small-line {
  width:23px;
  height:1px;
  background:#849476
}

.page-heading h1 {
  font-size:64px;
  line-height:1.08;
  letter-spacing:-1.3px;
  margin-bottom:16px
}

.page-heading h1 em {
  font-weight:400;
  color:#627357
}

.heading-description {
  font-size:14px;
  color:var(--muted);
  margin-bottom:0
}

.booking-page,.content-page {
  max-width:1224px;
  padding:49px 0 0;
  margin:0 auto
}

.booking-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 322px;
  gap:30px;
  align-items:start
}

.booking-panel {
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 3px 4px #30372702
}

.stepper {
  list-style:none;
  display:flex;
  justify-content:space-between;
  padding:25px 30px;
  margin:0;
  border-bottom:1px solid var(--border);
  background:#fefefb
}

.stepper li {
  position:relative;
  flex:1
}

.stepper li:not(:last-child):after {
  position:absolute;
  right:15px;
  top:15px;
  content:'';
  width:20px;
  border-top:1px solid #dce1d5
}

.stepper li:last-child {
  flex:0 0 auto
}

.stepper button {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  padding:0;
  white-space:nowrap
}

.stepper button:disabled {
  opacity:1;
  color:#9a9d94
}

.stepper .step-number {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e1e5da;
  border-radius:50%;
  font-size:14px;
  color:#8d9583
}

.stepper .current button {
  color:var(--green);
  font-weight:600
}

.stepper .current .step-number {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}

.stepper .done .step-number {
  background:#e8eee2;
  color:var(--green);
  border-color:#e8eee2
}

.step-number .icon {
  width:14px;
  height:14px
}

.step-body {
  padding:33px 30px 23px;
  min-height:497px
}

.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:23px
}

.section-title .eyebrow {
  font-size:14px;
  letter-spacing:1.5px;
  margin-bottom:8px
}

.section-title h2 {
  font-size:36px;
  line-height:1.1;
  letter-spacing:-.5px;
  margin-bottom:10px
}

.section-title p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin:0
}

.small-label {
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  display:flex;
  gap:9px;
  align-items:center;
  color:#78866c
}

.small-label .icon {
  width:18px
}

.category-tabs {
  display:flex;
  gap:5px;
  padding:5px;
  background:#f5f6f1;
  border:1px solid #eceee7;
  border-radius:7px;
  width:fit-content;
  margin-bottom:23px
}

.category-tabs button {
  padding:8px 15px;
  border-radius:5px;
  font-size:14px;
  transition:background .2s,color .2s
}

.category-tabs button.selected {
  background:#fff;
  box-shadow:0 1px 5px #0000000c;
  color:var(--green);
  font-weight:600
}

.category-tabs button:hover:not(.selected) {
  background:#eaeee3
}

.service-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.service-card {
  text-align:left;
  border:1px solid var(--border);
  border-radius:9px;
  padding:18px 18px 15px;
  display:flex;
  flex-direction:column;
  transition:background .22s,border-color .22s,box-shadow .22s,transform .22s;
  background:#fff
}

.service-card:hover {
  border-color:#aab59c;
  background:#fcfdf9;
  transform:translateY(-2px);
  box-shadow:0 4px 12px #30432806
}

.service-card.selected {
  background:#f2f6ed;
  border-color:#849874;
  box-shadow:0 0 0 1px #849874
}

.service-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}

.service-icon {
  background:#f0f3eb;
  border-radius:9px;
  color:#637656;
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px
}

.service-icon .icon {
  width:21px;
  height:21px
}

.selected .service-icon {
  background:#e6edde
}

.radio-circle {
  border:1px solid #dbe0d4;
  border-radius:50%;
  width:17px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center
}

.selected .radio-circle {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.radio-circle .icon {
  width:11px;
  height:11px
}

.service-card h3 {
  font-size:14px;
  font-weight:550;
  margin-bottom:7px
}

.service-card p {
  color:#81857b;
  font-size:14px;
  line-height:1.6;
  margin:0 0 16px;
  min-height:16px
}

.service-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  width:100%
}

.service-meta>span {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:14px;
  color:#888e81
}

.service-meta .icon {
  width:12px;
  height:12px
}

.service-meta strong {
  font-size:14px;
  font-weight:600
}

.pricing-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin:22px 0 0;
  font-size:14px;
  color:#858b7e
}

.pricing-note .icon {
  width:15px;
  height:15px;
  color:#8f9b7e
}

.booking-bottom {
  border-top:1px solid var(--border);
  padding:21px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.booking-bottom>.subtle {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px
}

.booking-bottom>.subtle .icon {
  width:13px;
  height:13px
}

.booking-bottom .button {
  font-size:14px;
  min-height:43px;
  padding:12px 17px;
  gap:18px
}

.booking-aside {
  position:sticky;
  top:25px
}

.studio-photo {
  height:252px;
  border-radius:13px 13px 0 0;
  overflow:hidden;
  position:relative;
  background:#867962
}

.studio-photo .salon-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  filter:brightness(.76) saturate(.65);
  transition:transform 1s
}

.studio-photo:hover .salon-photo {
  transform:scale(1.04)
}

.studio-photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#17201888,transparent 75%)
}

.photo-label {
  position:absolute;
  top:23px;
  left:22px;
  color:#fff;
  font-size:14px;
  letter-spacing:1.8px;
  font-weight:500;
  z-index:1
}

.photo-brand {
  position:absolute;
  top:18px;
  right:20px;
  width:36px;
  height:auto;
  z-index:1;
  opacity:.9
}

.photo-caption {
  position:absolute;
  bottom:25px;
  left:25px;
  font-family:var(--serif);
  color:#fff;
  font-size:30px;
  line-height:1.12;
  z-index:1
}

.photo-caption em {
  color:#edf0de
}

.visit-summary {
  background:#fff;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 13px 13px;
  padding:26px 25px
}

.visit-summary .eyebrow {
  font-size:14px;
  margin-bottom:14px;
  letter-spacing:1.6px
}

.visit-summary h3 {
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  margin-bottom:12px;
  letter-spacing:-.2px
}

.visit-summary>p:not(.eyebrow) {
  color:#818779;
  font-size:14px;
  line-height:1.8;
  margin-bottom:0
}

.summary-divider {
  border-top:1px solid var(--border);
  margin:23px 0 17px
}

.empty-summary {
  display:flex;
  align-items:center;
  gap:8px;
  color:#88937c;
  font-size:14px
}

.empty-summary .icon {
  width:15px
}

.aside-note {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:24px 8px
}

.aside-note>.icon {
  width:18px;
  height:18px;
  color:#819071;
  margin-top:2px
}

.aside-note strong {
  font-size:14px;
  font-weight:500;
  color:#66725a
}

.aside-note p {
  font-size:14px;
  color:#8b9083;
  line-height:1.8;
  margin:5px 0 0
}

.summary-line {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  gap:8px;
  padding:10px 0;
  color:#7b8472
}

.summary-line>span:first-child {
  display:flex;
  align-items:center;
  gap:6px
}

.summary-line .icon {
  width:14px;
  height:14px
}

.summary-line>span:last-child {
  color:var(--ink)
}

.summary-hint {
  font-size:14px;
  color:var(--muted)
}

.summary-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:19px;
  margin-top:16px;
  font-size:14px
}

.summary-total strong {
  font-size:22px;
  font-weight:500
}

.visit-summary .pay-note {
  font-size:14px!important;
  margin-top:10px
}

.booking-promises {
  display:flex;
  align-items:center;
  gap:50px;
  justify-content:center;
  padding:35px 0 9px
}

.booking-promises span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#8b9280
}

.booking-promises .icon {
  width:15px;
  height:15px;
  color:#8b997b
}

.footer {
  max-width:1224px;
  margin:46px auto 0;
  padding:23px 0 28px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:19px;
  color:#929789;
  font-size:14px
}

.footer-logo {
  flex-shrink:0;
  width:146px
}

.footer-logo img {
  width:100%;
  height:auto
}

.footer p {
  margin:0
}

.footer>span {
  margin-left:auto
}

.footer .text-button {
  font-size:14px;
  margin-left:18px
}

.date-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:28px 0 17px
}

.date-heading>strong {
  font-size:14px;
  font-weight:500
}

.date-picker-label {
  display:flex;
  align-items:center;
  flex-direction:row;
  gap:6px;
  font-size:14px;
  color:#758469;
  position:relative;
  padding:8px;
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden
}

.date-picker-label input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  padding:0
}

.date-picker-label input::-webkit-calendar-picker-indicator {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:pointer
}

.date-picker-label .icon {
  width:15px;
  height:15px
}

.date-strip {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:9px;
  margin-bottom:28px
}

.date-pill {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  padding:13px 4px;
  border-radius:9px;
  transition:background .2s,color .2s
}

.date-pill span {
  font-size:14px;
  color:#93998b
}

.date-pill strong {
  font-size:17px;
  font-weight:500
}

.date-pill.selected {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.date-pill.selected span {
  color:#d9e2d1
}

.date-pill:hover:not(.selected) {
  background:#f2f5ed
}

.slot-heading {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  margin:0 0 14px
}

.slot-heading .icon {
  width:15px;
  height:15px;
  color:#7c8b70
}

.slot-heading>span {
  margin-left:auto;
  color:#7b8872;
  font-weight:500
}

.time-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px
}

.time-slot {
  border:1px solid var(--border);
  border-radius:6px;
  padding:11px 0;
  font-size:14px;
  transition:background .2s,color .2s
}

.time-slot:hover:not(:disabled) {
  border-color:#829573;
  background:#f2f6ed
}

.time-slot.selected {
  color:#fff;
  background:var(--green)!important;
  border-color:var(--green)
}

.time-slot:disabled {
  text-decoration:line-through;
  background:#f5f5f2;
  color:#9ba192;
  opacity:.6
}

.empty-slots {
  grid-column:1/-1;
  color:var(--muted);
  font-size:14px;
  margin:4px 0 10px
}

.outside-times {
  margin-top:23px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fcfcf7;
  overflow:hidden
}

.outside-times summary {
  padding:15px 13px;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:14px
}

.outside-times summary::-webkit-details-marker {
  display:none
}

.outside-times summary>span {
  display:flex;
  align-items:center;
  gap:6px
}

.outside-times summary .icon {
  width:15px;
  height:15px;
  color:#8c977e
}

.chevron {
  font-size:16px;
  padding-left:10px
}

.outside-times>p {
  padding:0 14px;
  font-size:14px;
  color:var(--muted);
  margin:0 0 14px
}

.outside-times .time-grid {
  padding:0 14px 15px
}

.repeat-option {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:24px;
  padding-top:21px;
  border-top:1px solid var(--border)
}

.repeat-icon {
  color:#829475
}

.repeat-icon .icon {
  width:18px
}

.repeat-option strong {
  font-size:14px;
  font-weight:500
}

.repeat-option p {
  font-size:14px;
  color:var(--muted);
  margin:4px 0 0
}

.repeat-option select {
  margin-left:auto;
  padding:12px 44px 12px 14px;
  font-size:14px;
  max-width:125px
}

.timezone-note {
  font-size:14px;
  color:#929988;
  margin:18px 0 0
}

.account-gate {
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:35px 10px 18px
}

.gate-icon {
  background:#eaf0e3;
  border-radius:50%;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#768967;
  margin-bottom:21px
}

.gate-icon .icon {
  width:24px;
  height:24px
}

.account-gate h3 {
  font-family:var(--serif);
  font-size:28px;
  margin-bottom:12px;
  font-weight:400
}

.account-gate>p {
  font-size:14px;
  color:#858c7c;
  margin-bottom:22px
}

.account-gate .signin-caption {
  font-size:14px;
  margin-top:20px;
  margin-bottom:26px
}

.signin-caption .text-button {
  margin-left:3px;
  font-size:14px;
  color:var(--green)
}

.gate-assurance {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#87937a
}

.gate-assurance .icon {
  width:14px;
  height:14px
}

.details-form {
  padding-top:7px
}

.verified-banner {
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:7px;
  background:#eff4e9;
  color:#627353;
  font-size:14px;
  padding:13px 12px;
  margin-bottom:25px
}

.verified-banner .icon {
  width:17px;
  height:17px
}

.verified-banner span {
  margin-left:auto;
  overflow-wrap:anywhere
}

.field-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
  margin-bottom:24px
}

.details-form label {
  font-size:14px
}

.details-form input,.details-form textarea {
  font-size:14px;
  padding:13px
}

.optional {
  font-weight:400;
  color:#949b89;
  font-size:14px;
  display:contents
}

.details-form textarea::placeholder {
  font-size:14px;
  line-height:1.8;
  color:#a3a99a
}

.form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--border)
}

.form-error {
  color:#a24d42;
  font-size:14px;
  margin:13px 0;
  line-height:1.5
}

.form-error:empty {
  display:none
}

.review-service {
  display:flex;
  align-items:center;
  gap:13px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f6f8f2
}

.review-service h3 {
  margin:0 0 4px;
  font-size:15px
}

.review-service p {
  font-size:14px;
  color:var(--muted);
  margin:0
}

.review-service>strong {
  margin-left:auto;
  font-size:20px;
  font-weight:500
}

.review-list {
  font-size:14px;
  margin:24px 0
}

.review-list>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px
}

.review-list dt {
  color:var(--muted);
  flex-shrink:0
}

.review-list dd {
  margin:0;
  text-align:right;
  overflow-wrap:anywhere
}

.info-box {
  border:1px solid #e1e8d8;
  background:#f0f4e9;
  border-radius:9px;
  padding:18px;
  display:flex;
  align-items:flex-start;
  gap:12px
}

.info-box>.icon {
  color:#7b8f68;
  margin-top:1px;
  width:18px;
  height:18px
}

.info-box strong {
  font-size:14px;
  font-weight:500
}

.info-box p {
  font-size:14px;
  color:#7e8973;
  line-height:1.75;
  margin:5px 0 0
}

.fine-print {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
  margin:16px 0 0
}

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:30px
}

.catalog-grid .service-card {
  padding:26px;
  min-height:230px
}

.catalog-grid .service-card h3 {
  font-size:20px;
  font-family:var(--serif)
}

.catalog-grid .service-card p {
  font-size:14px;
  max-width:260px
}

.catalog-grid .service-icon {
  width:44px;
  height:44px
}

.catalog-grid .service-meta strong {
  font-size:18px
}

.catalog-grid .service-meta>span {
  font-size:14px
}

.catalog-grid .service-card-top>.icon {
  color:#9aaa8b;
  width:18px
}

.studio-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start
}

.studio-large {
  height:690px;
  width:100%;
  object-fit:cover;
  border-radius:160px 160px 12px 12px;
  filter:saturate(.65)
}

.studio-story {
  padding-top:26px
}

.studio-story h2 {
  font-size:40px;
  line-height:1.16
}

.studio-story>p:not(.eyebrow) {
  font-size:14px;
  color:#7d8673;
  max-width:400px
}

.studio-story h3 {
  font-size:14px;
  margin-top:27px
}

.hours-list {
  max-width:350px
}

.hours-list>div {
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
  color:#78846d
}

.studio-story .button {
  margin-top:23px
}

.empty-state {
  padding:65px 25px;
  border:1px solid var(--border);
  border-radius:12px;
  text-align:center;
  background:#fff
}

.empty-state>.icon {
  width:36px;
  height:36px;
  color:#94a384;
  margin-bottom:18px
}

.empty-state h2 {
  font-size:37px;
  margin-bottom:12px
}

.empty-state p {
  color:var(--muted);
  font-size:14px;
  margin-bottom:25px
}

.appointment-list {
  display:flex;
  flex-direction:column;
  gap:15px
}

.appointment-card {
  display:flex;
  align-items:center;
  gap:23px;
  padding:25px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px
}

.appointment-date {
  background:#eff3e8;
  border-radius:9px;
  min-width:65px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#718061
}

.appointment-date strong {
  font-family:var(--serif);
  font-size:32px;
  font-weight:400;
  line-height:1
}

.appointment-date span {
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px
}

.appointment-info {
  min-width:0;
  flex:1
}

.appointment-title {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:9px;
  flex-wrap:wrap
}

.appointment-title h3 {
  margin:0;
  font-size:18px;
  font-family:var(--serif)
}

.appointment-info>p {
  font-size:14px;
  color:#8a9280;
  margin:4px 0;
  overflow-wrap:anywhere
}

.badge {
  display:inline-flex;
  padding:5px 9px;
  font-size:14px;
  border-radius:5px;
  background:#f0f1ec;
  color:#899080;
  white-space:nowrap
}

.badge-pending {
  background:#f7efd9;
  color:#9a7b30
}

.badge-confirmed {
  background:#e9f1df;
  color:#6f8654
}

.badge-declined,.badge-cancelled {
  background:#f4e9e5;
  color:#a18275
}

.repeat-caption .icon {
  width:12px;
  height:12px;
  margin-right:4px
}

.appointment-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px
}

.appointment-actions>.text-button {
  font-size:14px
}

.danger {
  color:#a46756
}

.appointment-info>.recurrence-note {
  font-size:14px;
  color:#687e57;
  margin-top:10px
}

.admin-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:32px
}

.admin-stats>div {
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:15px
}

.admin-stats>div>span {
  font-size:14px;
  color:var(--muted)
}

.admin-stats strong {
  font-family:var(--serif);
  font-size:36px;
  font-weight:400
}

.admin-stats small {
  font-family:var(--sans);
  font-size:14px;
  color:#8a937e
}

.admin-stats .stat-text {
  font-size:29px
}

.admin-tabs {
  display:flex;
  border-bottom:1px solid #dbe0d3;
  gap:30px;
  margin-bottom:30px
}

.admin-tabs button {
  padding:15px 0;
  font-size:14px;
  color:#88917c;
  border-bottom:2px solid transparent
}

.admin-tabs button.selected {
  border-color:var(--green);
  color:var(--green)
}

.admin-filter {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px
}

.admin-filter h2 {
  font-size:29px;
  margin:0 auto 0 0
}

.admin-filter select {
  font-size:14px;
  padding:9px
}

.admin-form {
  max-width:800px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px;
  background:#fff
}

.admin-form h2 {
  font-size:33px;
  margin-bottom:10px
}

.admin-form>p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:25px
}

.admin-form h3 {
  font-size:15px;
  margin-top:27px
}

.shift-grid {
  margin-top:23px
}

.shift-row {
  display:grid;
  grid-template-columns:1fr 120px 20px 120px;
  align-items:center;
  gap:15px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
  font-size:14px
}

.shift-row>input {
  padding:9px;
  font-size:14px
}

.switch-label {
  display:flex;
  align-items:center;
  flex-direction:row;
  gap:10px;
  font-size:14px;
  line-height:1.6
}

.admin-form>.switch-label {
  margin-bottom:20px
}

.admin-form>.field-grid {
  max-width:400px
}

.price-table {
  margin-bottom:25px
}

.price-table-head,.price-row {
  display:grid;
  grid-template-columns:1fr 130px 130px;
  align-items:center;
  gap:22px;
  padding:17px 0;
  border-bottom:1px solid var(--border)
}

.price-table-head {
  font-size:14px;
  color:var(--muted)
}

.price-row>div {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:14px
}

.price-row strong {
  font-weight:500
}

.price-row>div>span {
  font-size:14px;
  color:var(--muted)
}

.price-input {
  position:relative
}

.price-input>span {
  position:absolute;
  left:12px;
  top:13px;
  font-size:14px;
  color:#8b9780
}

.price-input input {
  width:100%;
  padding-left:26px;
  font-size:14px
}

.rule-setting {
  flex-direction:row;
  align-items:center;
  gap:30px;
  justify-content:space-between;
  padding:22px 0;
  border-bottom:1px solid var(--border)
}

.rule-setting p {
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  max-width:560px;
  margin:6px 0 0
}

.rule-setting strong {
  font-weight:500;
  font-size:14px
}

.rule-setting input {
  flex-shrink:0
}

.rule-setting input[type=number] {
  width:70px
}

.admin-form>.info-box {
  margin:24px 0
}

.admin-form>.button {
  margin-top:12px
}

.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  max-width:min(520px,calc(100vw - 32px));
  transform:translate(-50%,25px);
  background:#354a3b;
  color:#fff;
  padding:16px 24px;
  border-radius:9px;
  box-shadow:0 6px 24px #0002;
  font-size:14px;
  line-height:1.6;
  opacity:0;
  pointer-events:none;
  z-index:100;
  transition:opacity .25s,transform .25s
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

dialog {
  border:1px solid var(--border);
  border-radius:17px;
  padding:39px;
  width:450px;
  max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 40px);
  color:var(--ink);
  background:#fdfefa;
  box-shadow:0 25px 100px #0002
}

dialog[open] {
  animation:modalIn .25s ease-out
}

dialog::backdrop {
  background:#27302455;
  backdrop-filter:blur(4px)
}

.modal-close {
  position:absolute;
  right:17px;
  top:17px;
  padding:6px;
  color:#87907b
}

.modal-close .icon {
  width:18px;
  height:18px
}

.modal-mark {
  width:142px;
  height:auto;
  display:block;
  margin:0 0 25px
}

dialog h2 {
  font-size:40px;
  line-height:1.05;
  margin-bottom:14px
}

dialog .eyebrow {
  font-size:14px
}

dialog label {
  font-size:14px;
  margin-bottom:17px
}

dialog input {
  font-size:14px
}

dialog .modal-description {
  font-size:14px;
  color:#849079;
  margin-bottom:25px;
  overflow-wrap:anywhere
}

.full-width {
  width:100%
}

.modal-switch {
  text-align:center;
  font-size:14px;
  color:#8b937f;
  margin:23px 0 0
}

.modal-switch .text-button {
  font-size:14px;
  color:var(--green)
}

.dev-email {
  background:#fff5d8;
  border:1px solid #ede2c1;
  border-radius:7px;
  padding:12px 14px;
  margin-bottom:20px;
  color:#937a34;
  font-size:14px
}

.dev-email strong {
  font-size:14px
}

.dev-email p {
  margin:5px 0 0
}

.code-input {
  font-size:24px!important;
  letter-spacing:10px;
  text-align:center
}

.success-circle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#e8efdf;
  color:#748e5c;
  margin-bottom:25px
}

.success-circle .icon {
  width:28px;
  height:28px
}

.success-detail {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border-radius:10px;
  background:#f0f4e8;
  margin-bottom:25px;
  font-size:14px
}

.success-detail>span {
  font-size:14px;
  color:#839075
}

.cancel-keep {
  margin-top:17px
}

.account-menu {
  display:flex;
  flex-direction:column;
  gap:15px
}

.initial-loading {
  text-align:center;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#86917c;
  font-size:14px;
  gap:20px
}

.loader {
  width:24px;
  height:24px;
  border:2px solid #dee5d6;
  border-top-color:#718561;
  border-radius:50%;
  animation:spin 1s linear infinite
}

.skip-link {
  position:absolute;
  left:15px;
  top:-60px;
  z-index:200;
  padding:12px;
  background:var(--green);
  color:#fff;
  border-radius:5px
}

.skip-link:focus {
  top:15px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

[aria-busy=true] {
  opacity:.6;
  cursor:wait
}

.page-enter {
  animation:pageIn .4s ease both
}

.step-enter {
  animation:stepIn .3s ease both
}

@keyframes pageIn {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes stepIn {
  from {
    opacity:.4;
    transform:translateX(8px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}

@keyframes modalIn {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98)
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}















/* Salon workspace: compact controls that remain usable on small screens. */
.admin-tabs { flex-wrap: wrap; gap: 8px; }
.admin-section-heading, .admin-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-section-heading { margin-bottom: 24px; }
.admin-section-heading .button { flex-shrink: 0; }
.admin-items { display: grid; gap: 12px; margin-top: 28px; }
.admin-item { border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.admin-item h3 { margin: 0 0 8px; }
.admin-item p { margin: 4px 0; overflow-wrap: anywhere; }
.admin-item-actions { display: flex; gap: 18px; align-items: center; }
.owner-badge { font-size: 12px; font-weight: 600; color: var(--green); white-space: nowrap; }
#vacation-form, #team-form { display: grid; gap: 16px; max-width: 620px; }
#service-form .field-grid { gap: 16px; }


/* Daily operations */
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 14px 0 28px; }
.workspace-heading h1 { font-size: clamp(32px, 4vw, 46px); margin: 8px 0 10px; letter-spacing: -.8px; }
.workspace-heading p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.workspace-heading-actions { display: flex; align-items: center; gap: 20px; }
.operations-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.operation-stat { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; gap: 10px; border: 1px solid var(--border); border-radius: 12px; background: white; text-align: left; transition: background .2s, border-color .2s; }
.operation-stat.selected { background: var(--sage); border-color: var(--green); }
.operation-stat:hover { border-color: var(--green); }
.operation-stat > span { font-size: 13px; font-weight: 600; }
.operation-stat strong { font-size: 34px; line-height: 1; font-weight: 500; }
.operation-stat small { color: var(--muted); font-size: 11px; }
.admin-page .admin-tabs { gap: 8px; }
.admin-page .admin-tabs button { padding: 14px 18px; color: var(--ink); }
.admin-page .admin-tabs button.selected { font-weight: 600; }
.operations-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.operations-filters button { padding: 10px 16px; border-radius: 24px; border: 1px solid var(--border); font-size: 12px; background: white; }
.operations-filters button.selected { background: var(--green); color: white; border-color: var(--green); }
.operations-search { display: flex; gap: 16px; align-items: flex-end; padding: 20px; background: white; border: 1px solid var(--border); border-radius: 12px; }
.operations-search label:first-child { flex: 1; }
.operations-search label { font-size: 12px; margin: 0; }
.operations-search input { margin-bottom: 0; min-height: 44px; }
.operations-search .text-button { padding: 14px 0; white-space: nowrap; }
.result-count { color: var(--muted); font-size: 12px; padding: 18px 0 8px; }
.agenda-day { margin: 16px 0 0; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.operation-appointment { display: grid; grid-template-columns: 80px minmax(0, 1fr) 160px; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: white; }
.agenda-time { display: flex; flex-direction: column; gap: 6px; }
.agenda-time strong { font-size: 23px; font-weight: 500; }
.agenda-time span { color: var(--muted); font-size: 12px; }
.agenda-detail .appointment-title h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.agenda-service { margin: 10px 0; font-size: 13px; }
.agenda-service strong { margin-left: 10px; }
.agenda-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; }
.agenda-contact a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.agenda-note { padding: 12px; background: var(--bg); border-radius: 6px; font-size: 12px; line-height: 1.6; margin: 12px 0; overflow-wrap: anywhere; }
.agenda-warning { color: #925d24; font-size: 12px; line-height: 1.6; margin: 12px 0; }
.agenda-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; text-align: center; }
.agenda-actions .fine-print { margin: 0; }
.operations-empty { background: white; border: 1px dashed var(--border); margin-top: 10px; }
.shift-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.shift-tools span, .admin-save-bar > span { font-size: 12px; color: var(--muted); }
.admin-save-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: white; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; position: sticky; bottom: 0; padding-bottom: 10px; }



.workspace-heading { margin: 0 0 18px; }
.workspace-heading h1 { font-size: clamp(30px, 3vw, 38px); }
.operations-stats { margin-bottom: 18px; }
.operation-stat { padding: 16px 20px; gap: 6px; }
.operation-stat strong { font-size: 28px; }
.admin-page .admin-tabs { margin-bottom: 18px; }
.operations-filters { margin-bottom: 14px; }
.operations-search { padding: 14px 18px; }
.language-control { margin: 0; display: inline-flex; }
.language-control select { width: auto; min-width: 105px; padding: 8px 36px 8px 14px; margin: 0; font-size: 16px; min-height: 44px; background-color: var(--paper); }
html[lang="sq"] .button { letter-spacing: 0; }

/* Editorial palette and touch-first booking. Inter pairs with an open serif face. */
:root { --gold: #c0ae7f; --gold-dark: #776039; --radius: 18px; }
html { scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
h1, h2 { font-weight: 700; }
h1 em, h2 em { font-style: normal; }
input, textarea, select { font-size: 16px; min-height: 52px; border-color: var(--border); border-radius: 10px; }
input:focus, textarea:focus, select:focus { outline-color: var(--gold-dark); }
input[type=checkbox] { min-height: 22px; width: 22px; height: 22px; flex-shrink: 0; }
label { font-size: 14px; }
::selection { background: var(--gold); color: var(--ink); }
.button, .button-small, .booking-bottom .button { min-height: 52px; padding: 14px 24px; font-size: 16px; font-weight: 600; border-radius: 100px; gap: 12px; line-height: 1.3; white-space: normal; text-align: center; }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover:not(:disabled) { background: #44463e; box-shadow: 0 6px 20px #181a1915; }
.button-primary:disabled { background: #deddd6; color: #67665f; border-color: #deddd6; opacity: 1; }
.button-outline { border-color: #aaa79c; background: transparent; }
.button-outline:hover:not(:disabled) { background: #e8e3d7; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.text-button, .account-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 8px 4px; }
.button .icon { width: 20px; height: 20px; }
.avatar { width: 44px; height: 44px; font-family: var(--sans); font-size: 18px; background: var(--sage); border-color: var(--border); }
.header { max-width: 1280px; height: auto; min-height: 104px; padding: 22px 0; margin: 0 auto; gap: 24px; border-color: #aaa79c; }
.header-brand-image { width: 224px; }
.header nav { gap: 28px; }
.header nav a { font-size: 14px; color: #53534d; min-height: 44px; display: flex; align-items: center; }
.header nav a.active:after { width: 100%; left: 0; height: 1px; border-radius: 0; bottom: 4px; }
#account-nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.language-control select { height: 44px; min-height: 44px; font-size: 16px; min-width: 104px; padding: 8px 34px 8px 14px; background-position: right 10px center; border-radius: 100px; background-color: transparent; border-color: #aaa79c; }
.booking-page, .content-page { max-width: 1280px; padding-top: 44px; margin: 0 auto; }
.page-heading { margin-bottom: 36px; }
.eyebrow { font-size: 11px; color: var(--gold-dark); letter-spacing: 2px; font-weight: 600; }
.small-line { background: var(--gold-dark); }
.page-heading h1 { font-size: clamp(48px, 6.4vw, 86px); line-height: 1.02; letter-spacing: -3px; margin-bottom: 20px; }
.page-heading h1 em { color: var(--gold-dark); }
.heading-description { font-size: 16px; line-height: 1.7; max-width: 520px; color: var(--muted); }
.booking-page > .page-heading { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 60px; align-items: end; }
.booking-page > .page-heading .eyebrow { grid-column: 1 / -1; }
.booking-page > .page-heading h1 { margin-bottom: 0; }
.booking-page > .page-heading h1 br { display: block; }
.booking-page > .page-heading h1 em:before { content: none; }
.booking-page > .page-heading .heading-description { max-width: 330px; margin-bottom: 8px; }
.booking-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 32px; }
.booking-panel { overflow: visible; box-shadow: 0 10px 34px #27292806; scroll-margin-top: 20px; }
.stepper { padding: 16px 28px; background: #faf9f5; border-radius: 18px 18px 0 0; gap: 12px; }
.stepper li, .stepper li:last-child { flex: 1; }
.stepper li:after { display: none; }
.stepper button { min-height: 48px; gap: 10px; font-size: 14px; white-space: normal; line-height: 1.25; text-align: left; }
.stepper button:disabled { color: #707067; }
.stepper .step-number { width: 32px; height: 32px; font-family: var(--sans); font-size: 13px; flex-shrink: 0; border-color: #c8c5ba; color: #626259; }
.stepper .current .step-number { background: var(--gold); border-color: var(--gold); color: #181a19; }
.stepper .done .step-number { background: var(--green); color: #fff; border-color: var(--green); }
.step-body { min-height: 0; padding: 28px; }
.section-title { margin-bottom: 24px; }
.section-title h2 { font-family: var(--sans); font-weight: 600; font-size: 28px; letter-spacing: -1px; margin-bottom: 8px; line-height: 1.2; }
.section-title .eyebrow { display: none; }
.section-title p:not(.eyebrow) { font-size: 14px; color: var(--muted); }
.small-label { display: none; }
.category-tabs { background: transparent; padding: 0; border: 0; gap: 8px; flex-wrap: wrap; }
.category-tabs button { min-height: 44px; padding: 10px 16px; font-size: 14px; border: 1px solid var(--border); border-radius: 100px; }
.category-tabs button.selected { background: var(--green); color: white; }
.service-grid { grid-template-columns: 1fr; gap: 12px; }
.service-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 4px; align-items: center; padding: 22px; border-color: var(--border); border-radius: 14px; position: relative; }
.service-card-top { display: contents; }
.service-icon { background: var(--sage); color: var(--gold-dark); width: 44px; height: 44px; grid-row: 1 / 3; border-radius: 50%; }
.service-card-top > .icon { position: absolute; right: 20px; top: 20px; width: 18px; }
.service-card h3 { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 1.35; font-weight: 600; margin: 0; padding-right: 16px; }
.service-card p { grid-column: 2; grid-row: 2; font-size: 14px; color: var(--muted); margin: 0; min-height: 0; line-height: 1.5; }
.service-meta { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 62px; margin: 0; }
.service-meta > span { font-size: 13px; color: var(--muted); }
.service-meta strong { font-size: 18px; font-weight: 600; }
.service-card:hover, .service-card.selected { background: #f6f2e8; border-color: var(--gold-dark); box-shadow: none; transform: translateY(-2px); }
.pricing-note { font-size: 13px; color: var(--muted); align-items: flex-start; }
.pricing-note .icon { color: var(--gold-dark); width: 18px; height: 18px; }
.booking-bottom, .form-footer { position: sticky; bottom: 0; z-index: 5; padding: 18px 28px; background: #fff; border-top: 1px solid var(--border); border-radius: 0 0 18px 18px; gap: 12px; }
.form-footer { margin: 24px -28px -28px; }
.selection-total { display: flex; flex-direction: column; flex: 1; text-align: right; gap: 3px; }
.selection-total strong { font-size: 15px; font-weight: 600; }
.selection-total span { font-size: 12px; color: var(--muted); }
.booking-aside { top: 24px; }
.studio-photo { height: 225px; border-radius: 18px 18px 0 0; }
.studio-photo .salon-photo { filter: brightness(.72) saturate(.45); }
.photo-label { font-size: 10px; letter-spacing: 1.3px; color: #fff; }
.photo-caption { font-size: 29px; font-weight: 600; }
.photo-caption em { color: #e4d5ad; }
.visit-summary { padding: 24px; background: var(--green); color: #f8f6ef; border: 0; border-radius: 0 0 18px 18px; }
.visit-summary .eyebrow { color: var(--gold); font-size: 10px; }
.visit-summary h3 { font-family: var(--sans); font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.5px; }
.visit-summary > p:not(.eyebrow), .summary-line, .summary-hint, .empty-summary { color: #d5d3c9; font-size: 14px; }
.summary-line { padding: 10px 0; }
.summary-line > span:last-child { color: white; }
.summary-total, .summary-divider { border-color: #5c5d55; }
.summary-total { font-size: 14px; }
.summary-total strong { font-size: 28px; color: var(--gold); }
.visit-summary .pay-note { font-size: 12px!important; }
.aside-note { padding: 18px 4px; }
.aside-note strong, .aside-note p { color: var(--muted); font-size: 13px; }
.booking-promises { padding: 26px 0 0; gap: 30px; }
.booking-promises span { color: var(--muted); font-size: 12px; }
.date-heading { margin: 24px 0 18px; gap: 12px; }
.date-heading > strong { font-size: 18px; }
.date-picker-label { min-height: 48px; font-size: 14px; color: var(--ink); padding: 10px 14px; }
.week-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.week-navigation .button { min-height: 44px; min-width: 44px; padding: 8px; }
.week-navigation > span { font-size: 14px; color: var(--muted); }
.date-strip { gap: 8px; margin-bottom: 24px; }
.date-pill { padding: 14px 4px; min-width: 44px; min-height: 76px; gap: 5px; border-radius: 12px; }
.date-pill span { font-size: 13px; color: var(--muted); }
.date-pill strong { font-size: 22px; }
.date-pill.selected { background: var(--gold); color: var(--ink); border-color: var(--gold-dark); }
.date-pill.selected span { color: var(--ink); }
.slot-heading { font-size: 14px; }
.slot-heading > span { color: var(--ink); }
.time-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.time-slot { min-height: 52px; font-size: 16px; font-weight: 500; border-radius: 10px; padding: 12px 8px; }
.time-slot:hover:not(:disabled), .date-pill:hover:not(.selected) { background: var(--sage); border-color: var(--gold-dark); }
.empty-slots { font-size: 15px; line-height: 1.6; padding: 16px; background: #f5f3ed; border-radius: 10px; margin: 0; }
.availability-status { min-height: 120px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--muted); }
.outside-times, .booking-options { margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; background: #faf9f5; }
.outside-times summary, .booking-options summary { min-height: 56px; padding: 16px; font-size: 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; list-style: none; }
.booking-options summary::-webkit-details-marker { display: none; }
.booking-options summary > .icon { margin-left: auto; color: var(--gold-dark); }
.booking-options summary .optional { display: inline; font-size: 12px; }
.outside-times > p { font-size: 14px; padding: 0 16px; }
.repeat-option { flex-wrap: wrap; margin: 0; padding: 0 16px 16px; border: 0; }
.repeat-option strong { display: none; }
.repeat-option p { margin: 0; font-size: 14px; }
.repeat-icon { display: none; }
.repeat-option select { font-size: 16px; max-width: none; min-width: 160px; margin: 10px 0 0; }
.timezone-note { font-size: 12px; color: var(--muted); }
.details-form input, .details-form textarea, dialog input, .shift-row > input, .price-input input { font-size: 16px; }
.details-form label, dialog label { font-size: 14px; }
.details-form textarea::placeholder { font-size: 15px; color: #77746b; }
.verified-banner { background: var(--sage); color: #4b483e; font-size: 14px; flex-wrap: wrap; padding: 16px; }
.account-gate { padding: 12px 0 16px; }
.account-gate h3 { font-family: var(--sans); font-size: 24px; font-weight: 600; }
.account-gate > p, .account-gate .signin-caption { font-size: 15px; color: var(--muted); }
.gate-icon { background: var(--sage); color: var(--gold-dark); }
.gate-assurance { color: var(--muted); font-size: 13px; }
.review-service { gap: 16px; }
.review-service h3 { font-size: 20px; }
.review-service p, .review-list, .info-box p { font-size: 15px; }
.review-service > strong { font-size: 26px; }
.review-list dd { overflow-wrap: anywhere; }
.info-box { background: var(--sage); color: #413f35; }
.info-box strong { font-size: 15px; color: #413f35; }
.info-box p { color: #555247; }
.fine-print { color: var(--muted); font-size: 13px; }
.catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.catalog-grid .service-card { padding: 24px; }
.catalog-grid .service-card h3 { font-family: var(--sans); font-size: 22px; }
.catalog-grid .service-card p { font-size: 14px; }
.catalog-grid .service-meta strong { font-size: 20px; }
.catalog-grid .service-icon { display: flex; }
.studio-large { border-radius: 18px; }
.studio-story h2 { font-size: 46px; }
.studio-story > p:not(.eyebrow) { font-size: 16px; color: var(--muted); }
.hours-list { font-size: 15px; }
.footer { max-width: 1280px; margin: 44px auto 0; padding: 24px 0; color: var(--muted); font-size: 12px; }
.footer .text-button { font-size: 13px; }
.footer-logo { width: 145px; }
dialog { width: 520px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 36px; background: #f9f8f4; border-radius: 20px; }
dialog h2 { font-size: 42px; font-weight: 700; letter-spacing: -1.5px; }
dialog .modal-description, .modal-switch, .modal-switch .text-button { font-size: 15px; color: var(--muted); }
.modal-close { min-height: 44px; min-width: 44px; padding: 12px; color: var(--ink); }
.modal-mark { margin-bottom: 24px; }
.toast { font-size: 15px; max-width: min(500px,calc(100vw - 32px)); bottom: 24px; }
/* All workspace actions use the same readable controls. */
.operation-stat { border-radius: 14px; min-height: 112px; padding: 20px; }
.operation-stat > span, .operation-stat small, .operations-search label { font-size: 14px; }
.admin-tabs button, .operations-filters button { min-height: 48px; font-size: 14px; }
.operations-search input, .admin-form input, .admin-form select { font-size: 16px; }
.admin-form { border-radius: 18px; }
.admin-form h2, .workspace-heading h1 { font-family: var(--sans); font-weight: 600; }
.admin-save-bar { gap: 20px; padding: 18px 0; }
.workspace-heading p:not(.eyebrow), .agenda-service, .agenda-contact { font-size: 15px; }
.agenda-actions { gap: 8px; }
.operation-appointment { grid-template-columns: 80px minmax(0,1fr) 190px; }

@media (max-width: 1360px) {
  .header, .booking-page, .content-page, .footer { margin-left: 32px; margin-right: 32px; }
}
@media (max-width: 1100px) {
  .header { flex-wrap: wrap; gap: 12px 24px; padding: 16px 0; }
  .header nav { order: 3; width: 100%; justify-content: center; gap: 40px; }
  .booking-layout { grid-template-columns: minmax(0,1fr) 290px; gap: 22px; }
  .stepper { padding: 12px 20px; gap: 8px; }
  .stepper button { gap: 6px; font-size: 13px; }
  .step-body { padding: 24px; }
  .booking-bottom { padding: 16px 24px; }
  .form-footer { margin: 24px -24px -24px; padding: 16px 24px; }
  .service-card { padding: 18px; gap: 6px 12px; }
  .service-card p { padding-right: 0; }
  .booking-page > .page-heading { column-gap: 24px; grid-template-columns: 1.4fr 1fr; }
  .booking-page > .page-heading h1 { font-size: 62px; }
  .selection-total { display: none; }
  .booking-bottom { justify-content: space-between; }
  .operations-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .booking-layout { grid-template-columns: minmax(0,1fr); }
  .booking-aside { display: none; }
  .booking-page > .page-heading { display: block; }
  .booking-page > .page-heading h1 { margin-bottom: 16px; }
  .booking-page > .page-heading .heading-description { max-width: 520px; }
  .selection-total { display: flex; }
  .studio-layout { grid-template-columns: 1fr; }
  .studio-large { height: 440px; }
  .operation-appointment { grid-template-columns: 70px minmax(0,1fr); }
  .agenda-actions { grid-column: 1/-1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .catalog-grid { grid-template-columns: 1fr; }
  .footer { flex-wrap: wrap; gap: 12px 20px; }
  .footer > span { margin-left: 0; }
  .footer .text-button { margin-left: auto; }
}
@media (max-width: 600px) {
  .header, .booking-page, .content-page, .footer { margin-left: 16px; margin-right: 16px; }
  .header { padding: 14px 0 6px; gap: 8px; }
  .header-brand-image { width: 124px; }
  .header .button { min-height: 44px; font-size: 14px; padding: 10px 14px; }
  .header .button > span { display: none; }
  #account-nav { gap: 6px; max-width: calc(100% - 132px); flex-wrap: nowrap; margin-left: auto; }
  .language-control { flex-shrink: 0; }
  .language-control select { min-width: 104px; width: 104px; }
  .header nav { gap: 0; justify-content: space-between; }
  .header nav a, html[lang="sq"] .header nav a { font-size: 14px; padding: 10px 4px; }
  .account-link { font-size: 13px; }
  .workspace-link { display: none; }
  .account-link:not(.workspace-link) { width: 44px; height: 44px; padding: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; }
  .account-link:not(.workspace-link) > span { display: none; }
  .account-link .icon { display: block; width: 19px; height: 19px; }
  .avatar { width: 44px; height: 44px; flex-shrink: 0; }
  .booking-page, .content-page { padding-top: 24px; }
  .page-heading, .booking-page > .page-heading { margin-bottom: 24px; }
  .page-heading h1, .booking-page > .page-heading h1 { font-size: 48px; letter-spacing: -2px; line-height: 1.06; margin-bottom: 14px; }
  .booking-page > .page-heading h1 br { display: block; }
  .booking-page > .page-heading h1 em:before { content: none; }
  html[lang="sq"] .booking-page > .page-heading h1 { font-size: 40px; }
  .page-heading .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .heading-description { font-size: 15px; line-height: 1.6; }
  .stepper { gap: 4px; padding: 12px; }
  .stepper button { flex-direction: column; gap: 6px; font-size: 12px; min-height: 64px; text-align: center; width: 100%; }
  .stepper .step-number { width: 30px; height: 30px; }
  .step-body { padding: 20px 14px; }
  .section-title { margin-bottom: 20px; }
  .section-title h2 { font-size: 24px; letter-spacing: -.7px; }
  .section-title p:not(.eyebrow) { font-size: 14px; }
  .service-card { grid-template-columns: minmax(0,1fr) 65px; padding: 18px 16px; gap: 8px 12px; min-height: 120px; }
  .service-card .service-icon { display: none; }
  .service-card h3, .service-card p { grid-column: 1; }
  .service-card h3 { font-size: 17px; padding: 0; }
  .service-card p { font-size: 14px; }
  .service-meta { grid-column: 2; grid-row: 2; }
  .service-card-top > .icon { right: 16px; top: 20px; }
  .service-meta strong { font-size: 18px; }
  .pricing-note { line-height: 1.6; }
  .booking-bottom { padding: 14px 14px max(14px,env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 10px; }
  .booking-bottom .button { flex: 1; padding: 14px 16px; min-height: 54px; }
  .selection-total { width: 100%; flex-basis: 100%; order: -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .selection-total strong { font-size: 14px; }
  .form-footer { margin: 24px -14px -20px; padding: 14px 14px max(14px,env(safe-area-inset-bottom)); }
  .form-footer .button { min-height: 54px; font-size: 15px; padding: 14px 18px; }
  .booking-promises { gap: 10px; flex-wrap: wrap; padding-top: 20px; }
  .booking-promises span { font-size: 12px; }
  .date-heading { flex-wrap: wrap; margin: 0 0 18px; }
  .date-heading > strong { font-size: 17px; }
  .date-picker-label { font-size: 14px; padding: 10px; }
  .date-strip { grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 3px; overflow-x: auto; padding-bottom: 5px; }
  .date-pill { min-height: 74px; }
  .date-pill span { font-size: 12px; }
  .date-pill strong { font-size: 20px; }
  .time-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .time-slot { min-height: 52px; font-size: 16px; }
  .outside-times summary { flex-wrap: wrap; gap: 8px; }
  .outside-times summary > span:last-child { margin-left: auto; }
  .repeat-option select { width: 100%; margin: 10px 0 0; }
  .field-grid, .details-form .field-grid, .admin-form > .field-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .verified-banner { gap: 8px; font-size: 13px; }
  .verified-banner span { margin-left: 0; flex-basis: 100%; }
  .review-service { flex-wrap: wrap; }
  .review-service > strong { margin-left: auto; }
  .review-list > div { gap: 16px; }
  .review-list dt { flex-shrink: 0; max-width: 40%; }
  .account-gate > .button { width: 100%; }
  .account-gate h3 { font-size: 23px; }
  .studio-story h2 { font-size: 38px; }
  .studio-large { height: 350px; }
  .catalog-grid .service-card { padding: 22px 16px; }
  .catalog-grid .service-card h3 { font-size: 19px; }
  .catalog-grid .service-icon { display: none; }
  .appointment-card { flex-wrap: wrap; padding: 18px; gap: 16px; }
  .appointment-info { flex: 1; min-width: 0; }
  .appointment-title { flex-wrap: wrap; }
  .appointment-title h3 { font-size: 24px; }
  .appointment-actions { width: 100%; margin-left: 0; }
  .footer-logo { width: 125px; }
  .footer p { font-size: 12px; }
  .footer > span { font-size: 12px; }
  .footer .text-button { font-size: 13px; }
  dialog { padding: 28px 20px; max-height: calc(100dvh - 20px); }
  dialog h2 { font-size: 36px; }
  .modal-mark { width: 120px; }
  .toast { bottom: 130px; font-size: 14px; }
  .workspace-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .workspace-heading h1 { font-size: 30px; }
  .workspace-heading-actions { width: 100%; justify-content: space-between; }
  .operations-stats { gap: 10px; }
  .operation-stat { padding: 16px; }
  .operation-stat > span { font-size: 14px; }
  .operation-stat small { font-size: 12px; }
  .operations-search { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .operations-search label { width: 100%; }
  .operations-search label:first-child { flex-basis: 100%; }
  .operations-filters { gap: 8px; }
  .admin-tabs { gap: 6px; }
  .admin-page .admin-tabs button { flex: 1 1 auto; padding: 12px; }
  .admin-form { padding: 20px 16px; }
  .admin-form h2 { font-size: 25px; }
  .admin-item, .admin-section-heading { flex-direction: column; align-items: stretch; gap: 14px; }
  .admin-item { padding: 18px; }
  .admin-item-actions { justify-content: space-between; }
  .operation-appointment { grid-template-columns: 55px minmax(0,1fr); padding: 16px; gap: 14px; }
  .agenda-time strong { font-size: 19px; }
  .agenda-actions { justify-content: stretch; }
  .agenda-actions .button { flex: 1; }
  .agenda-actions .text-button { flex: 1; }
  .shift-row { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; padding: 14px 0; }
  .shift-row .switch-label { grid-column: 1/-1; min-height: 44px; }
  .shift-row > input { width: 100%; min-width: 0; padding: 12px 8px; }
  .admin-save-bar { flex-wrap: wrap; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .admin-save-bar .button { width: 100%; }
}
@media (max-width: 360px) {
  .header-brand-image { width: 115px; }
  #account-nav { max-width: calc(100% - 123px); }
  .page-heading h1, .booking-page > .page-heading h1 { font-size: 42px; }
  html[lang="sq"] .booking-page > .page-heading h1 { font-size: 33px; }
  .header nav a, html[lang="sq"] .header nav a { font-size: 13px; }
  .selection-total { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

.reserve-guest { border: 0; padding: 0; margin: 0; min-width: 0; }
[hidden] { display: none !important; }

.notification-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: 6px; border-radius: 20px; background: var(--ink); color: white; font: 600 12px var(--sans); vertical-align: middle; }
.notification-recipients { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.notification-recipients legend { font-weight: 600; margin-bottom: 12px; }
.notification-recipient { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding: 14px 0; }
.notification-recipient input { width: 22px; height: 22px; flex-shrink: 0; }
.notification-recipient strong, .notification-recipient small { display: block; overflow-wrap: anywhere; }
.notification-recipient small { color: var(--muted); margin-top: 4px; }
.notification-feed { margin-top: 30px; }
.notification-feed h2 { font-size: 24px; }
.notification-feed .admin-section-heading p { font-size: 14px; color: var(--muted); margin: 8px 0; }
.notification-list { display: grid; gap: 14px; }
.notification-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.notification-item.unread { border-left: 4px solid var(--gold-dark); }
.notification-item h3 { margin: 8px 0; }
.notification-item p { margin: 6px 0; overflow-wrap: anywhere; }
.notification-item .button { flex-shrink: 0; }
@media (max-width: 600px) { .notification-item { flex-direction: column; align-items: stretch; padding: 18px; gap: 12px; } }

/* Admin workspace: compact navigation, readable forms and reachable actions. */
.admin-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 28px; align-items: start; }
.admin-sidebar { position: sticky; top: 24px; }
.admin-navigation { display: flex; flex-direction: column; gap: 4px; }
.nav-group-label { margin: 20px 12px 8px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.nav-group-label:first-child { margin-top: 4px; }
.admin-navigation a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.admin-navigation a .icon { width: 19px; height: 19px; flex-shrink: 0; }
.admin-navigation a:hover { background: #ffffff80; }
.admin-navigation a[aria-current="page"] { background: var(--green); color: white; font-weight: 600; }
.admin-navigation a[aria-current="page"] .notification-count { background: white; color: var(--ink); }
.admin-navigation a .notification-count { margin-left: auto; }
.admin-section-picker { display: none; }
.admin-content { min-width: 0; outline: none; }
.admin-page .workspace-heading { margin-bottom: 28px; }
.workspace-heading .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.workspace-heading .owner-badge { text-transform: none; letter-spacing: 0; font-size: 11px; }
.admin-page .workspace-heading-actions { gap: 10px; flex-shrink: 0; }
.admin-page .button, .admin-dialog .button { border-radius: 10px; min-height: 44px; padding: 11px 16px; font-size: 14px; }
.admin-page .text-button, .admin-dialog .text-button { min-height: 44px; padding: 10px 8px; border-radius: 8px; font-size: 14px; }
.admin-page .text-button:hover, .admin-dialog .text-button:hover { background: #20252108; }
.admin-page .operations-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 24px; }
.admin-page .operation-stat { min-height: 92px; padding: 14px; gap: 10px; }
.admin-page .operation-stat > span { font-size: 12px; line-height: 1.4; }
.admin-page .operation-stat strong { font-size: 26px; }
.admin-page .admin-section-heading { margin-bottom: 18px; }
.admin-content h2 { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -.5px; }
.admin-section-heading p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.admin-page .operations-filters { gap: 6px; }
.admin-page .operations-filters button { min-height: 44px; padding: 10px 14px; font-size: 13px; border-radius: 9px; }
.admin-page .operations-search { padding: 16px; gap: 14px; }
.admin-page .operations-search label { min-width: 0; font-size: 13px; }
.admin-page .operations-search label:last-child { width: 190px; }
.agenda-toolbar, .agenda-days { display: flex; align-items: center; gap: 8px; }
.agenda-toolbar { justify-content: space-between; margin: 10px 0 0; }
.admin-page .agenda-toolbar .button { min-height: 40px; padding: 8px 12px; }
.single-booking-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 12px 16px; background: var(--sage); border-radius: 10px; font-size: 14px; }
.admin-page .result-count { padding-top: 14px; }
.admin-page .operation-appointment { grid-template-columns: 62px minmax(0,1fr) 145px; gap: 18px; padding: 20px; }
.admin-page .agenda-time strong { font-size: 21px; }
.admin-page .agenda-contact a { min-height: 30px; display: inline-flex; align-items: center; }
.admin-page .agenda-actions { gap: 6px; }
.admin-page .admin-form { max-width: none; padding: 26px; border-radius: 14px; }
.admin-page label, .admin-dialog label { min-width: 0; }
.admin-page input:not([type="checkbox"]):not([type="radio"]), .admin-page select, .admin-page textarea,
.admin-dialog input:not([type="checkbox"]):not([type="radio"]), .admin-dialog select, .admin-dialog textarea { width: 100%; min-height: 48px; border-radius: 8px; font-size: 16px; margin-bottom: 0; }
.admin-page input:disabled, .admin-page select:disabled, .admin-dialog input:disabled, .admin-dialog select:disabled { background-color: #f1f2ef; color: #73786f; opacity: .75; cursor: not-allowed; }
.admin-page .shift-row { grid-template-columns: minmax(125px,1fr) 125px auto 125px; gap: 12px; }
.admin-page .shift-row .switch-label { min-height: 44px; cursor: pointer; }
.shift-closed .switch-label span { color: var(--muted); }
.admin-page .admin-form > .field-grid { max-width: none; }
.admin-page .admin-form .field-grid { margin: 18px 0; }
.admin-page .admin-form .form-error { color: #a13f30; margin: 16px 0 0; }
.form-error:not(:empty) { padding: 12px; border-radius: 8px; background: #fff1ec; }
.form-error:empty { display: none; }
.admin-save-bar { z-index: 2; gap: 14px; padding: 16px 0; box-shadow: 0 -10px 16px -16px #20252140; }
.admin-save-bar > div { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-save-bar .admin-draft-status { max-width: 240px; font-size: 12px; line-height: 1.5; }
.has-draft .admin-draft-status { color: #8a5917; font-weight: 500; }
.admin-page .rule-setting { gap: 20px; cursor: pointer; }
.admin-page .rule-setting input[type="number"] { width: 78px; flex-shrink: 0; }
.admin-page .rule-setting input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }
.admin-page .admin-item h3, .notification-item h3 { overflow-wrap: anywhere; }
.email-settings { margin-top: 28px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.email-settings > summary { display: flex; align-items: center; gap: 10px; padding: 18px 20px; min-height: 60px; cursor: pointer; font-size: 15px; font-weight: 600; }
.email-settings > summary::after { content: '+'; margin-left: auto; font-size: 22px; }
.email-settings[open] > summary::after { content: '−'; }
.email-settings > summary .owner-badge { font-size: 11px; }
.email-settings > summary::-webkit-details-marker { display: none; }
.email-settings .admin-form { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; }
.admin-dialog h2 { font-family: var(--sans); font-size: 28px; line-height: 1.2; letter-spacing: -.7px; padding-right: 20px; }
.admin-dialog .modal-description { line-height: 1.6; }
.reservation-dialog { width: 640px; padding: 28px; overflow-x: hidden; overflow-y: auto; }
.reserve-section, .reserve-existing { padding: 0; margin: 20px 0; border: 0; min-width: 0; }
.reserve-section > legend { font-size: 14px; font-weight: 600; margin-bottom: 14px; padding: 0; }
.reserve-client-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.reserve-client-modes label { flex-direction: row; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 10px; min-height: 48px; margin: 0; cursor: pointer; }
.reserve-client-modes label:has(input:checked) { border-color: var(--green); background: var(--sage); }
.reserve-client-modes input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; margin: 0; accent-color: var(--green); }
.reservation-dialog .field-grid { margin-top: 16px; }
.reservation-footer { position: static; padding-top: 16px; border-top: 1px solid var(--border); }
.reserve-summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 14px; }
.reserve-summary > div { display: flex; flex-direction: column; gap: 4px; }
.reserve-summary span { color: var(--muted); font-size: 13px; }
.reserve-summary > strong { font-size: 22px; white-space: nowrap; }
.reservation-footer .form-footer { margin-top: 16px; gap: 10px; }
.admin-page [aria-busy="true"], .admin-dialog [aria-busy="true"] { opacity: .6; cursor: progress; }
.admin-page .button[aria-busy="true"]::after, .admin-dialog .button[aria-busy="true"]::after { content: ''; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .admin-page .button[aria-busy="true"]::after, .admin-dialog .button[aria-busy="true"]::after { animation: none; } }
@media (max-width: 1000px) {
  .admin-layout { grid-template-columns: 180px minmax(0,1fr); gap: 20px; }
  .admin-page .operation-appointment { grid-template-columns: 62px minmax(0,1fr); }
  .admin-page .agenda-actions { grid-column: 1/-1; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
  .admin-page .operations-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-save-bar { flex-wrap: wrap; }
  .admin-save-bar > div { flex: 1 1 auto; }
  .admin-page .shift-row { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .admin-page .shift-row .switch-label { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .admin-layout { display: block; }
  .admin-sidebar { position: static; margin-bottom: 20px; }
  .admin-navigation { display: none; }
  .admin-section-picker { display: flex; font-size: 12px; gap: 6px; }
  .admin-section-picker select { font-weight: 600; background-color: white; }
  .admin-page .workspace-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
  .admin-page .workspace-heading-actions { width: 100%; }
  .workspace-heading-actions .button-primary { flex: 1; }
  .admin-page .workspace-heading h1 { font-size: 28px; }
  .admin-page .operations-stats { margin-bottom: 20px; }
  .admin-page .operation-stat { min-height: 76px; flex-direction: row; align-items: center; justify-content: space-between; }
  .admin-page .admin-form { padding: 20px 16px; }
  .admin-page .operations-search label:last-child { width: 100%; }
  .admin-page .operations-search { flex-wrap: wrap; }
  .admin-page .operations-search label { width: 100%; flex-basis: 100%; }
  .admin-page .operation-appointment { padding: 16px; gap: 14px; grid-template-columns: 52px minmax(0,1fr); }
  .admin-page .admin-save-bar > div { width: 100%; flex-wrap: wrap; }
  .admin-page .admin-save-bar .button { flex: 1; width: auto; }
  .admin-save-bar .admin-draft-status { max-width: none; }
  .email-settings > summary { flex-wrap: wrap; font-size: 14px; padding: 16px; }
  .email-settings > summary .owner-badge { display: none; }
  .reservation-dialog { padding: 24px 18px; }
  .reserve-client-modes { gap: 8px; }
  .reserve-client-modes label { padding: 10px 8px; font-size: 13px; }
  .reservation-footer .form-footer { flex-direction: row; }
  .reservation-footer .button-primary { flex: 1; }
}
.reservation-footer .form-footer { position: static; margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.reservation-dialog .reserve-section label { margin-bottom: 12px; }
.reservation-dialog .reserve-section { margin: 16px 0; }
.reservation-dialog .reserve-existing { margin: 0; }
.reservation-dialog .reserve-guest .field-grid { margin-top: 0; }
.reservation-dialog { scroll-padding-block: 20px; }
.admin-view-picker { display: none; }
@media (max-width: 760px) {
  .workspace-mode .header > nav { display: none; }
  .workspace-mode .header { padding-bottom: 14px; }
  .admin-page .operations-stats, .admin-page .operations-filters { display: none; }
  .admin-view-picker { display: flex; font-size: 13px; margin-bottom: 14px; }
  .admin-view-picker select { background-color: white; }
  .admin-page .admin-section-heading p { display: none; }
}
.service-translations { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.service-translations > summary { cursor: pointer; padding: 14px 0; min-height: 48px; font-size: 14px; font-weight: 500; }
.service-translations[open] > summary { margin-bottom: 8px; }
.admin-dialog-footer { position: sticky; bottom: -36px; padding: 16px 0 24px; margin-bottom: -24px; border-top: 1px solid var(--border); background: #f9f8f4; }
.dialog-actions { display: flex; justify-content: space-between; gap: 12px; }
.admin-dialog-footer .form-error:not(:empty) { margin-bottom: 12px; }
@media (max-width: 760px) { .admin-dialog-footer { bottom: -28px; } .dialog-actions .button-primary { flex: 1; } }

/* Keep modal contents within the viewport, including native date/select controls. */
dialog { width: min(450px, calc(100vw - 24px)); max-width: calc(100vw - 24px); overscroll-behavior: contain; }
dialog form, dialog fieldset, dialog label, dialog .field-grid > *, dialog .reserve-summary > div { min-width: 0; max-width: 100%; }
dialog fieldset { min-inline-size: 0; }
dialog input:not([type="radio"]):not([type="checkbox"]), dialog select, dialog textarea { width: 100%; max-width: 100%; min-width: 0; }
dialog select { text-overflow: ellipsis; }
dialog h2, dialog p, dialog label, dialog summary, dialog .reserve-summary { overflow-wrap: anywhere; }
dialog h2 { padding-right: 26px; }
dialog .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reservation-dialog { width: min(640px, calc(100vw - 24px)); }
.reserve-summary > div { flex: 1; }
.reserve-client-modes label { overflow-wrap: anywhere; }
.optional-contact { margin: 4px 0 16px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.optional-contact summary { padding: 14px 0; cursor: pointer; font-size: 14px; font-weight: 500; min-height: 48px; }
.optional-contact .fine-print { margin-bottom: 16px; }
.booking-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
.booking-modes button { min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.booking-modes button[aria-pressed="true"] { background: var(--green); color: white; border-color: var(--green); }
#guest-details-form > label { margin-bottom: 18px; }
#guest-details-form > .fine-print { margin-bottom: 20px; }
.review-list dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  dialog .field-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  dialog input, dialog select, dialog textarea { font-size: 16px; }
  dialog .eyebrow { padding-right: 24px; font-size: 11px; }
  .reservation-dialog { padding: 24px 18px; }
}
@media (max-width: 400px) {
  .reserve-client-modes { grid-template-columns: minmax(0,1fr); }
  .reservation-footer .form-footer, .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .reservation-footer .form-footer .button, .dialog-actions .button { width: 100%; }
  dialog h2 { font-size: 30px; }
}
@media (max-height: 600px) {
  .admin-dialog-footer { position: static; margin-bottom: 0; }
}

/* Size native date/time editors explicitly: iOS can otherwise retain their intrinsic width. */
input:is([type="date"], [type="time"]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  text-align: left;
  overflow: hidden;
}
input:is([type="date"], [type="time"])::-webkit-date-and-time-value {
  min-inline-size: 0;
  min-block-size: 1.5em;
  text-align: left;
}
input:is([type="date"], [type="time"])::-webkit-datetime-edit {
  min-inline-size: 0;
  padding: 0;
}
.admin-page input:is([type="date"], [type="time"]),
.admin-dialog input:is([type="date"], [type="time"]),
.admin-page select, .admin-dialog select { height: 48px; line-height: 1.5; }
.date-picker-label input { height: 100%; min-height: 0; }
.field-grid > * { min-width: 0; }
.admin-page .field-grid > label, .admin-dialog .field-grid > label, .details-form .field-grid > label { margin: 0; gap: 8px; }
.admin-dialog .field-grid { gap: 16px; margin-bottom: 20px; align-items: end; }
.reservation-dialog .reserve-client-modes label { margin-bottom: 0; }
.reservation-dialog .modal-description { margin-bottom: 20px; }
.reschedule-notes { display: grid; gap: 8px; margin: 0 0 20px; }
.reschedule-notes .fine-print { margin: 0; line-height: 1.6; }
#reschedule-status { margin: 0 0 16px; }
#reschedule-status:empty { display: none; }
.reservation-dialog .info-box > div { min-width: 0; overflow-wrap: anywhere; }
.reservation-footer .button { min-width: 0; }
.reservation-dialog .reserve-summary:empty { display: none; }

@media (max-width: 340px) {
  .header .brand { flex-basis: 100%; justify-content: center; }
  #account-nav { width: 100%; max-width: none; justify-content: center; margin-left: 0; }
}
@media (forced-colors: active) {
  select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 14px; }
}