/* The phone layout's screens (phone-*.js). Chrome, cards and controls are in phone.css. */
.p-pad { padding: 4px 4px 0; }
.p-row--base { align-items: baseline; gap: 10px; }
.p-divide { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; }
.p-divide-dark { border-top: 1px solid rgba(243, 236, 224, .16); padding-top: 12px; margin-top: 2px; }
.p-field-label { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
html[data-os="android"] .p-field-label { font: 600 12px var(--body); letter-spacing: 0; text-transform: none; color: var(--rust-ink, #a83a17); }
.p-li__title.is-hidden { color: var(--ink-500); }
.p-li__sub.is-rust { color: var(--rust-600); font-weight: 600; }
.is-strong { font-weight: 700; }
.p-card--sand { background: var(--sand-200); }
.p-card--tonal { background: var(--sage-100); color: var(--sage-ink); }
.p-card--tonal .p-small, .p-card--tonal .p-cardlabel { color: var(--sage-ink); }
.p-btn--sage { background: var(--sage-600); color: var(--sand-50); }
.p-btn--outline-sage { color: var(--sage-ink); box-shadow: inset 0 0 0 1px var(--sage-600); }

/* home: today card, next appointment */
.p-today { gap: 6px; transition: background .2s; }
.p-today__sub { font-size: 14.5px; font-weight: 500; }
.p-card--sage .p-today__sub, .p-card--sage .p-small { color: var(--sand-50); }
html[data-os="android"] .p-today.is-open { background: var(--sage-100); color: var(--sage-ink); }
html[data-os="android"] .p-today.is-open .p-cardlabel { color: var(--sage-ink); }
html[data-os="android"] .p-today .p-big84 { font-size: 76px; }
.p-next { gap: 12px; }
.p-next__svc { font: 400 32px/.92 var(--display); text-transform: uppercase; }
html[data-os="android"] .p-next__svc { font-size: 28px; }

/* requests / inbox */
.p-lead { gap: 10px; }
.p-lead__name { font-size: 17px; font-weight: 600; }
.p-lead__from { margin-top: -4px; }
.p-lead__msg { margin: 0; font-size: 15px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.p-tile--40.is-new { background: var(--warn-bg); color: var(--warn-ink); }
html[data-os="android"] .p-tile--40 { font: 700 16px var(--body); }

/* bookings */
.p-online { padding: 14px 16px; }
.p-online__t { font-size: 15.5px; }
html[data-os="android"] .p-online { background: var(--sand-200); }
html[data-os="android"] .p-online.is-on { background: var(--sage-100); color: var(--sage-ink); }
html[data-os="android"] .p-online.is-on .p-small { color: var(--sage-ink); }
.p-pend { gap: 8px; }
.p-pend__t { font-size: 16px; }
.p-pend__k { font-size: 13px; font-weight: 600; }
.p-pend__ago { color: var(--warn-ink); }
.p-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.p-days::-webkit-scrollbar { display: none; }
.p-day { flex: none; width: 48px; height: 68px; border: 0; border-radius: 16px; background: var(--sand-50); color: var(--ink-900); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.p-day__w { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.p-day__n { font: 400 24px/1 var(--display); }
.p-day i { position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--rust-600); }
.p-day.is-on { background: var(--ink-900); color: var(--sand-100); }
.p-day.is-on .p-day__w { color: var(--ink-300); }
.p-day.is-on i { background: var(--rust-400); }
html[data-os="android"] .p-day { width: 52px; height: 72px; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--ink-400); }
html[data-os="android"] .p-day__n { font: 700 18px var(--body); }
html[data-os="android"] .p-day.is-on { background: var(--rust-600); color: var(--sand-50); box-shadow: none; }
html[data-os="android"] .p-day.is-on .p-day__w { color: var(--sand-50); }
html[data-os="android"] .p-day.is-on i { background: var(--sand-50); }
.p-appt__time { flex: none; width: 62px; font: 600 12px var(--mono); color: var(--rust-600); }
html[data-os="android"] .p-appt__time { width: 56px; font: 700 14px var(--body); color: var(--rust-ink, #a83a17); }
.p-chair { gap: 10px; }
.p-chair__svc { font: 400 36px/.92 var(--display); text-transform: uppercase; }
.p-card--tonal .p-progress { background: rgba(63, 74, 54, .15); }
.p-card--tonal .p-progress i { background: var(--sage-600); }
.p-card--tonal .p-divide-dark { border-top-color: rgba(63, 74, 54, .18); }

/* the calendar */
.p-cal { background: var(--sand-50); border-radius: 22px; overflow: hidden; }
html[data-os="android"] .p-cal { border-radius: 20px; }
.p-cal__scroll { --cols: 2; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--g, 40px); scrollbar-width: none; overscroll-behavior-x: contain; }
.p-cal__scroll::-webkit-scrollbar { display: none; }
.p-cal__track { position: relative; --g: 40px; --col: 150px; }
.p-cal__head { display: flex; padding: 10px 0 8px; border-bottom: 1px solid var(--line); position: relative; }
.p-cal__corner { position: sticky; left: 0; z-index: 3; width: var(--g); flex: none; background: var(--sand-50); }
.p-cal__day { width: var(--col); flex: none; scroll-snap-align: start; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-900); padding: 0; }
.p-cal__dow { font-size: 11px; font-weight: 600; color: var(--ink-500); }
.p-cal__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 500; }
.p-cal__day.is-today .p-cal__dow { color: var(--rust-600); }
.p-cal__day.is-today .p-cal__num { background: var(--rust-600); color: var(--sand-50); font-weight: 700; }
.p-cal__day.is-sel:not(.is-today) .p-cal__num { background: var(--ink-900); color: var(--sand-50); font-weight: 700; }
html[data-os="android"] .p-cal__dow { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-600); }
html[data-os="android"] .p-cal__num { width: 32px; height: 32px; font-size: 17px; }
html[data-os="android"] .p-cal__day.is-sel:not(.is-today) .p-cal__num { background: var(--warn-bg); color: var(--warn-ink); }
.p-cal__body { display: flex; position: relative; padding-top: 12px; }
.p-cal__gutter { position: sticky; left: 0; z-index: 3; width: var(--g); flex: none; background: var(--sand-50); }
.p-cal__gutter span { position: absolute; right: 6px; font-size: 10.5px; color: var(--ink-500); white-space: nowrap; }
html[data-os="android"] .p-cal__gutter span { right: 8px; font-size: 10px; color: var(--ink-600); }
.p-cal__area { position: relative; flex: none; width: calc(var(--col) * 7); }
.p-cal__line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.p-cal__col { position: absolute; top: 0; bottom: 0; width: var(--col); border-left: 1px solid var(--line); cursor: pointer; }
.p-cal__col.is-closed { background: rgba(31, 26, 22, .035); cursor: default; }
.p-ev { position: absolute; box-sizing: border-box; overflow: hidden; padding: 3px 4px; display: flex; flex-direction: column; gap: 1px; border: 0; text-align: left; cursor: pointer; border-radius: 6px; font: inherit; z-index: 1; }
.p-ev b { font-size: 12px; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.p-ev span { font-size: 11px; line-height: 1.15; font-weight: 500; overflow-wrap: anywhere; }
.p-ev--rust { background: var(--warn-bg); color: var(--warn-ink); }
.p-ev--sage { background: var(--sage-100); color: var(--sage-ink); }
.p-ev--ochre { background: var(--ochre-100, #f6ead2); color: var(--ochre-ink, #7a520c); }
.p-ev--ink { background: var(--sand-300); color: var(--ink-900); }
.p-ev--req { background: var(--ochre-100, #f6ead2); color: var(--ochre-ink, #7a520c); border: 1.5px dashed var(--ochre, #c98a1e); }
.p-ev--block { color: var(--ink-600); cursor: default; }
html[data-os="android"] .p-ev { border-radius: 4px; }
html[data-os="android"] .p-ev b { font-weight: 600; }
html[data-os="android"] .p-ev span { font-weight: 400; }
html[data-os="android"] .p-ev--rust { background: var(--rust-600); color: var(--sand-50); }
html[data-os="android"] .p-ev--sage { background: var(--sage-600); color: var(--sand-50); }
html[data-os="android"] .p-ev--ochre { background: var(--ochre, #c98a1e); color: var(--sand-50); }
html[data-os="android"] .p-ev--ink { background: var(--ink-800); color: var(--sand-50); }
html[data-os="android"] .p-ev--req { border-style: solid; }
.p-cal__now { position: absolute; left: 0; right: 0; border-top: 1.5px solid var(--rust-600); z-index: 2; pointer-events: none; }
.p-cal__now i { position: absolute; left: -4px; top: -4.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--rust-600); }
html[data-os="android"] .p-cal__now { border-top-width: 2px; right: auto; }
html[data-os="android"] .p-cal__now i { left: -5px; top: -6px; width: 10px; height: 10px; }
.p-cal__nowt { position: absolute; right: 4px; z-index: 4; font-size: 10.5px; font-weight: 700; color: var(--rust-600); background: var(--sand-50); padding: 0 2px; }
.p-cal__nav { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sand-50); cursor: pointer; display: grid; place-items: center; color: var(--ink-900); }
html[data-os="android"] .p-cal__nav { background: var(--sand-200); }
.p-cal__label { font-size: 15px; font-weight: 600; }
.p-cal__month { font-size: 24px; font-weight: 500; }
.p-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 4px; font-size: 12.5px; color: var(--ink-600); }
.p-legend span { display: inline-flex; align-items: center; gap: 6px; }
.p-sw { width: 10px; height: 10px; border-radius: 3px; }
.p-sw--rust { background: var(--warn-bg); }
.p-sw--sage { background: var(--sage-100); }
.p-sw--ochre { background: var(--ochre-100, #f6ead2); }
.p-sw--ink { background: var(--sand-300); }
.p-sw--req { background: var(--sand-50); box-shadow: inset 0 0 0 1.5px var(--ochre, #c98a1e); }
html[data-os="android"] .p-sw--rust { background: var(--rust-600); }
html[data-os="android"] .p-sw--sage { background: var(--sage-600); }
@media (min-width: 600px) { .p-cal__scroll { --cols: 4; } }
@media (min-width: 900px) { .p-cal__scroll { --cols: 7; } }

/* customers */
.p-cust { gap: 10px; }

/* hours */
.p-hours { flex-wrap: wrap; row-gap: 8px; }
.p-hours__d { width: 44px; flex: none; font-weight: 600; }
.p-hours__d.is-today { color: var(--rust-600); }
.p-hours__v { font-size: 15px; }
.p-hours__v.is-closed { color: var(--ink-500); }
.p-hours__times { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.p-time { min-width: 0; flex: 1; max-width: 120px; height: 38px; border: 0; border-radius: 10px; background: var(--sand-200); padding: 0 8px; font: 500 15px var(--body); color: var(--ink-900); }

/* services add row */
.p-addrow .p-input { flex: 1; height: 44px; background: var(--sand-50); }
html[data-os="android"] .p-addrow .p-input { background: none; box-shadow: inset 0 0 0 1px var(--ink-500); border-radius: 8px; height: 52px; }

/* photos */
.p-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-spot { padding: 8px 8px 12px; gap: 10px; }
.p-spot__img { height: 110px; border-radius: 14px; display: flex; align-items: flex-end; padding: 8px 10px; }
.p-spot__img img { position: absolute; inset: 0; }
.p-spot__cap { font: 500 10px var(--mono); color: var(--placeholder-ink, #9a8f82); position: relative; }
.p-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.p-photo, .p-up { aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: block; background: var(--sand-300); }
.p-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-up { border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-900); }
.p-up b { font: 400 30px/1 var(--display); }
.p-up span { font-size: 12px; font-weight: 600; }
html[data-os="android"] .p-photos { gap: 4px; border-radius: 20px; overflow: hidden; }
html[data-os="android"] .p-photo, html[data-os="android"] .p-up { border-radius: 0; }
@media (min-width: 600px) { .p-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .p-spots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .p-photos { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* account */
.p-owner { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: inherit; }
.p-owner__name { font-size: 17px; }
html[data-os="android"] .p-owner { background: var(--sand-200); border-radius: 28px; }

/* request a change */
.p-ask { gap: 12px; }
.p-ask__title { font: 400 30px/.92 var(--display); text-transform: uppercase; }
.p-ask__usage { font: 500 11px var(--mono); color: var(--rust-400); }
html[data-os="android"] .p-ask__usage { font: 600 13px var(--body); }
.p-change__t { font-size: 15px; font-weight: 500; }

/* store */
.p-pack { gap: 12px; }
.p-pack__n { font: 400 30px/.9 var(--display); text-transform: uppercase; color: var(--warn-ink); }
.p-pack__ico { width: 44px; height: 44px; border-radius: 14px; background: var(--rust-600); color: var(--sand-50); display: grid; place-items: center; flex: none; }
.p-dropcard { gap: 6px; }
.p-dropcard__name { font: 400 34px/.9 var(--display); text-transform: uppercase; }
.p-payout { font: 400 60px/.85 var(--display); }
.p-order { gap: 10px; }
.p-order__num { font: 600 12px var(--mono); color: var(--rust-600); }
.p-order__name { font-size: 17px; }
.p-order__items { font-size: 14.5px; white-space: pre-line; }
.p-order__st { font-size: 13.5px; font-weight: 600; margin-top: -4px; }
.p-order__st.is-pack { color: var(--rust-ink, #a83a17); }
.p-order__st.is-ready { color: var(--warn-ink); }
.p-order__st.is-done { color: var(--sage-ink); }
.p-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-prod { padding: 8px 8px 12px; gap: 10px; }
.p-prod__img { height: 120px; border-radius: 14px; display: block; }
.p-prod__tag { left: 6px; top: 6px; }
.p-prod__text { padding: 0 4px; text-decoration: none; color: inherit; }
.p-prod__text strong { font-size: 14.5px; line-height: 1.2; }
.p-stock { gap: 4px; padding: 0 2px; }
.p-stock__n { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-600); }
.p-stock__n.is-rust { color: var(--rust-600); }
.p-step { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sand-200); font-size: 17px; font-weight: 600; cursor: pointer; color: var(--ink-900); flex: none; }
@media (min-width: 600px) { .p-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .p-prods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-os="android"] .p-prods { grid-template-columns: minmax(0, 1fr); gap: 3px; }
html[data-os="android"] .p-prod { flex-direction: row; flex-wrap: wrap; align-items: center; border-radius: 4px; padding: 10px 12px 10px 10px; gap: 8px 14px; }
html[data-os="android"] .p-prods > :first-child { border-radius: 20px 20px 4px 4px; }
html[data-os="android"] .p-prods > :last-child { border-radius: 4px 4px 20px 20px; }
html[data-os="android"] .p-prod__img { width: 56px; height: 56px; flex: none; }
html[data-os="android"] .p-prod__tag { display: none; }
html[data-os="android"] .p-prod__text { flex: 1; }
html[data-os="android"] .p-prod.is-hidden .p-prod__text strong { color: var(--ink-500); }
html[data-os="android"] .p-stock { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-500); gap: 0; padding: 0; overflow: hidden; }
html[data-os="android"] .p-step { width: 38px; height: 36px; border-radius: 0; background: none; }
html[data-os="android"] .p-stock__n { min-width: 64px; padding: 0 4px; }
@media (min-width: 600px) { html[data-os="android"] .p-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-os="android"] .p-prods > * { border-radius: 20px; } }
.p-drop { gap: 10px; }
.p-drop__name { font: 400 48px/.88 var(--display); text-transform: uppercase; }
.p-drop__cd { font: 400 40px/.9 var(--display); color: var(--rust-400); }
.p-drop__block { color: var(--rust-400); }
.p-kv--link { text-decoration: none; color: inherit; }

/* portfolio */
.p-topproj { padding: 8px 8px 14px; gap: 10px; }
.p-topproj__img { height: 160px; }
.p-topproj__tag { left: 8px; bottom: 8px; }
.p-proj { padding: 8px 8px 14px; gap: 10px; position: relative; }
.p-proj__img { height: 170px; display: block; transition: opacity .2s; }
.p-proj.is-hidden .p-proj__img { opacity: .45; }
.p-proj__feat { left: 8px; top: 8px; }
.p-proj__arrows { position: absolute; right: 16px; top: 16px; display: flex; gap: 6px; }
.p-arrow { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.p-proj__text { padding: 0 8px; text-decoration: none; color: inherit; }
.p-proj__text strong { font-size: 16.5px; }
.p-proj > .p-row { padding: 0 8px; gap: 10px; }
.p-proj__state { font-size: 14px; font-weight: 600; }
html[data-os="android"] .p-proj__img { height: 140px; }

/* ---------- account, booking setup and the full editors (phone-kit.js, phone-account.js,
   phone-booking-setup.js, phone-media.js) ---------- */
.p-row--end { justify-content: flex-end; }
.p-row--end:has(> [hidden]:only-child) { display: none; }
.p-cardtitle { margin: 0; font: 400 26px/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.p-subtitle { margin: 0; font-size: 16px; font-weight: 700; }
.p-body { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.p-card .p-small, .p-stack > .p-small { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.p-note { color: var(--warn-ink); }
.p-rust { color: var(--rust-600); font-weight: 600; }
.p-ok { color: var(--sage-600); font-weight: 600; }
.p-mono { font-family: var(--mono); font-size: 13px; }
.p-wrap { overflow-wrap: anywhere; white-space: normal; }
.p-how { align-self: flex-end; }
.p-field__hint { font-size: 12.5px; color: var(--ink-500); padding: 0 4px; }
.p-select { appearance: auto; padding-right: 10px; }
.p-card .p-select { background: var(--sand-200); }
.p-fields2, .p-fields3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-fields3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.p-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.p-check input { width: 20px; height: 20px; flex: none; accent-color: var(--rust-600); margin: 0; }
.p-check--top { align-items: flex-start; }
.p-check--top input { margin-top: 2px; }
.p-err { font-size: 12.5px; font-weight: 600; color: var(--rust-600); padding: 0 4px; }
.p-formerr { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; font-weight: 600; }
.p-notice { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; line-height: 1.45; }
.p-notice p { margin: 0; }
.p-notice .p-small { color: var(--warn-ink); }
.p-notice .p-input { background: var(--sand-50); }
.p-subform { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.p-kvs { display: flex; flex-direction: column; }
.p-kvs > .p-kv:first-child { border-top: 0; }
.p-kvs .p-kv { padding: 10px 0; font-size: 14.5px; }
.p-kvs .p-kv span { min-width: 0; overflow-wrap: anywhere; }
.p-setrow .p-li__sub { line-height: 1.35; }
.p-setrow--wrap { flex-wrap: wrap; }
.p-li.is-off .p-li__title, .p-li.is-pending .p-li__title { color: var(--ink-500); }
.p-team__end { align-items: flex-end; flex: none; }
.p-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); max-width: 100%; }
.p-confirm__q { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.p-copy { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--sand-200); min-width: 0; }
.p-copy code { flex: 1; min-width: 0; font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
.p-stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--sand-200); flex: none; }
.p-stepper__b { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font: 600 18px var(--body); color: var(--ink-900); cursor: pointer; }
.p-stepper__b:disabled { color: var(--ink-300); cursor: default; }
.p-stepper__v { min-width: 72px; text-align: center; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.p-more summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.p-bullets { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.p-quote { margin: 0; font-size: 15px; font-style: italic; color: var(--ink-600); overflow-wrap: anywhere; }
.p-arrow { background: var(--sand-200); flex: none; }
.p-arrow:disabled { color: var(--ink-300); cursor: default; }
html[data-os="android"] .p-cardtitle { font: 600 20px var(--body); text-transform: none; }

/* billing */
.p-bill { gap: 6px; }
.p-bill__plan { font: 400 40px/.92 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.p-bill__change { font-size: 13px; font-weight: 600; color: var(--rust-400); }
.p-plans { display: grid; gap: 8px; }
.p-plan { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--sand-200); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.p-plan[aria-checked="true"] { background: var(--sand-100); box-shadow: inset 0 0 0 2px var(--rust-600); }
.p-plan__name { font-size: 15.5px; }
.p-plan__price { font: 400 26px/1 var(--display); }
html[data-os="android"] .p-bill__plan { font: 600 30px/1.05 var(--body); text-transform: none; }

/* domain */
.p-addr { margin: 0; font: 600 18px var(--mono); overflow-wrap: anywhere; }
.p-price { margin: 0; font-size: 14px; }
.p-steps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 6px 10px; flex-wrap: wrap; }
.p-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.p-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-300); font-size: 11.5px; }
.p-steps li.is-on { color: var(--ink-900); }
.p-steps li.is-on span { background: var(--rust-600); color: var(--sand-50); }
.p-steps li.is-done span { background: var(--sage-600); color: var(--sand-50); }
.p-dflow { display: flex; flex-direction: column; gap: 12px; }
.p-dresults { padding: 0 14px; background: var(--sand-200); }
.p-dresults .p-li.is-off { opacity: .55; }
.p-chev-t { font-size: 20px; color: var(--ink-500); }
.p-done { padding: 12px 14px; border-radius: 16px; background: var(--sage-100); color: var(--sage-ink); }
.p-done .p-small { color: var(--sage-ink); }
.p-pick--line { background: var(--sand-200); }
.p-dns .p-li { gap: 10px; }
.p-dns__type { flex: none; min-width: 52px; font: 600 11px var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--sand-300); text-align: center; }
.p-dns__row.is-locked .p-li__title { color: var(--ink-500); }
.p-dns__acts { align-items: flex-end; flex: none; }
.p-dns__form { padding: 12px 0; border-top: 1px solid var(--line); }
.p-typed { border: 0; border-radius: 20px; padding: 18px; max-width: min(420px, calc(100vw - 32px)); background: var(--sand-50); color: var(--ink-900); box-shadow: 0 20px 50px -20px rgba(31, 26, 22, .5); }
.p-typed::backdrop { background: rgba(31, 26, 22, .35); }
.p-typed p { margin: 0; font-size: 15px; line-height: 1.45; }
.p-typed .p-input { background: var(--sand-200); }

/* setup */
.p-swatch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.p-swatch__c { width: 18px; height: 18px; border-radius: 6px; background: var(--sand-300); box-shadow: inset 0 0 0 1px var(--line); }
.p-swatch__n { text-transform: capitalize; }
.p-swatch code { font: 500 12px var(--mono); color: var(--ink-600); }

/* help */
.p-help { gap: 12px; }
.p-help__mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink-400); font-size: 13px; font-weight: 700; color: var(--sand-50); }
.p-help.is-done .p-help__mark { background: var(--sage-600); box-shadow: none; }
.p-help__st { flex: none; font: 500 11px var(--mono); color: var(--ink-500); white-space: nowrap; }
.p-help.is-done .p-help__st { color: var(--sage-600); }
.p-help__ask .p-small { color: var(--ink-300); }

/* booking setup */
.p-bkonline { gap: 8px; }
.p-bkonline.is-on { background: var(--sage-100); color: var(--sage-ink); }
.p-bkonline.is-on .p-li__sub { color: var(--sage-ink); }
.p-bkonline .p-btn--text { padding: 0; }
.p-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tabs__b { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sand-50); color: var(--ink-900); font: 600 13.5px var(--body); cursor: pointer; white-space: nowrap; }
.p-tabs__b[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-100); }
.p-tabs__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rust-600); color: var(--sand-50); font-size: 11px; display: inline-grid; place-items: center; }
html[data-os="android"] .p-tabs__b { border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--ink-500); }
html[data-os="android"] .p-tabs__b[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-ink); box-shadow: none; }
.p-seg { overflow-x: auto; scrollbar-width: none; }
.p-seg::-webkit-scrollbar { display: none; }
.p-seg button { flex: 1 0 auto; }
.p-appt-row .p-li { align-items: flex-start; }
.p-appt-row .p-chip { margin-top: 2px; }
.p-inline:not(:empty) { padding: 0 0 12px; }
.p-appt-d { background: var(--sand-100); gap: 8px; }
.p-appt-d__svc { margin: 0; font: 400 28px/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.p-appt-d__when { margin: 0; font-size: 15px; font-weight: 600; }
.p-appt-d .p-textarea, .p-appt-d .p-input { background: var(--sand-50); }
.p-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.p-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.p-staff { gap: 10px; }
.p-staff .p-input { flex: 1; min-width: 0; height: 40px; background: var(--sand-200); }
.p-money { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 600; }
.p-money .p-input { width: 92px; height: 38px; background: var(--sand-200); }
.p-q { gap: 10px; flex-wrap: wrap; }
.p-q__acts { gap: 4px; }
.p-q .p-arrow { width: 30px; height: 30px; }
.p-pro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-times { font-size: 14px; }
.p-times .p-time { flex: 0 1 120px; }
.p-card .p-time, .p-card input[type="date"].p-input { background: var(--sand-200); }
.p-ins__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-ins__tile small { font-size: 12px; color: var(--ink-500); }
.p-ins__bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.p-ins__wk { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 4px; }
.p-ins__bar { flex: 1; display: flex; flex-direction: column-reverse; border-radius: 4px; overflow: hidden; }
.p-ins__seg { display: block; width: 100%; }
.p-ins__seg.is-on { background: var(--warn-bg); }
.p-ins__seg.is-own { background: var(--sand-300); }
html[data-os="android"] .p-ins__seg.is-on { background: var(--rust-600); }
.p-ins__x { font-size: 9.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; height: 12px; }
.p-ins__heatwrap { overflow-x: auto; }
.p-ins__heat { display: flex; flex-direction: column; gap: 2px; min-width: max-content; }
.p-ins__hrow { display: grid; grid-template-columns: 34px repeat(var(--hours), 22px); gap: 2px; align-items: center; }
.p-ins__hh, .p-ins__hd { font-size: 10px; color: var(--ink-500); text-align: center; }
.p-ins__cell { height: 18px; border-radius: 4px; background: rgba(194, 70, 31, calc(.06 + var(--v, 0) * .85)); }
.p-ins__track { display: block; height: 8px; border-radius: 999px; background: var(--sand-300); overflow: hidden; }
.p-ins__fill { display: block; height: 100%; background: var(--rust-600); border-radius: inherit; }

/* services, photos, a project */
.p-svc { gap: 10px; }
.p-svc.is-hidden .p-input { color: var(--ink-500); }
.p-svc__order { display: inline-flex; gap: 6px; }
.p-svc__state { font-weight: 600; }
.p-svc .p-input, .p-svc .p-textarea { background: var(--sand-200); }
.p-spotsx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.p-spotx { gap: 10px; }
.p-spotx__img { aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 8px 10px; }
.p-spotx__img--square { aspect-ratio: 1; }
.p-spotx__img--tall { aspect-ratio: 4 / 5; max-height: 360px; }
.p-spotx__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.p-picker__b { aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--sand-300); position: relative; }
.p-picker__b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-picker__b[aria-pressed="true"], .p-picker__b[aria-selected="true"] { outline: 3px solid var(--rust-600); outline-offset: -3px; }
.p-photosx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-photox { margin: 0; padding: 8px 8px 10px; gap: 8px; }
.p-photox__img { aspect-ratio: 1; border-radius: 14px; }
.p-photox__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-photox .p-input { height: 40px; font-size: 14px; padding: 0 10px; background: var(--sand-200); }
.p-up--card { aspect-ratio: auto; min-height: 180px; border-radius: 22px; padding: 12px; text-align: center; }
.p-pjphotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-pjphoto { padding: 8px; gap: 8px; }
.p-pjphoto.is-cover { box-shadow: inset 0 0 0 2px var(--rust-600); }
.p-pjphoto__img { aspect-ratio: 4 / 3; border-radius: 14px; }
.p-pjphoto__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-pjphoto__tag { left: 6px; top: 6px; }
.p-pjphoto .p-arrow { width: 30px; height: 30px; }
@media (min-width: 600px) {
  .p-spotsx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-photosx, .p-pjphotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .p-ins__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Store: the deeper pages (phone-store-more.js, phone-store-grow.js, phone-store-kit.js) ---------- */
.p-st-cardhead { gap: 10px; flex-wrap: wrap; }
.p-st-cardtitle { font-size: 16px; font-weight: 700; }
.p-st-big { font: 400 30px/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.p-st-mono { font-family: var(--mono); font-size: 14px; }
.p-st-wrap { white-space: normal; overflow-wrap: anywhere; }
.p-st-pad { margin: 0; padding: 14px 0; }
.p-st-pad0 { margin: 0; padding: 0 4px; overflow-wrap: anywhere; }
.p-st-hint { margin: 0; }
.p-st-link { color: inherit; text-decoration: none; }
a.p-st-link:hover { text-decoration: underline; }
.p-st-labelrow { padding-right: 4px; }
.p-st-labelrow .p-label { padding-top: 6px; }
.p-st-note { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; background: var(--sand-200); }
.p-st-note.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.p-st-note.is-ok { background: var(--sage-100); color: var(--sage-ink, #3c4734); }
.p-st-note.is-bad { background: var(--warn-bg); color: var(--rust-600); font-weight: 600; }
.p-st-err { margin: 0; color: var(--rust-600); font-size: 14px; font-weight: 600; }
.p-st-err[hidden], .p-st-warn[hidden] { display: none; }
.p-st-warn { font-size: 13px; color: var(--rust-600); font-weight: 600; padding: 0 4px; }
.p-st-tz { font: 500 11px var(--mono); color: var(--ink-500); padding: 0 4px; }
.p-st-ideas__l { align-self: center; padding: 0 4px; }
.p-st-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.p-st-cols, .p-st-editor, .p-st-order, .p-st-pack, .p-st-three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.p-st-cols > *, .p-st-editor > *, .p-st-order > *, .p-st-pack > *, .p-st-three > * { min-width: 0; }
.p-st-foot { padding-top: 4px; }
.p-st-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p-st-select { appearance: auto; padding-right: 10px; }
.p-st-scrollx { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* cards in the store pages: picks and boxes show against the card */
.p-st-card .p-pick:not([aria-pressed="true"]) { background: var(--sand-200); }
.p-card--ink .p-pick[aria-pressed="true"] { background: var(--rust-600); color: var(--sand-50); }
.p-card--ink.p-st-card .p-input { background: var(--ink-800); color: var(--sand-100); color-scheme: dark; }
.p-card--ink .p-st-tz { color: var(--ink-300); }
.p-card--ink .p-field > span { color: var(--ink-300); }
.p-pick--s { height: 30px; padding: 0 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.p-pick--quiet { color: var(--rust-600); }
.p-pick--new { box-shadow: inset 0 0 0 1.5px var(--sand-400); background: none !important; }
.p-st-addin { height: 36px; width: auto; min-width: 0; flex: 1 1 140px; border-radius: 999px; font-size: 14px; }
.p-st-card .p-list { background: var(--sand-100); }

/* in-place confirm */
.p-st-confirm { display: inline-flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); max-width: 100%; }
.p-st-confirm__q { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.p-st-confirm.is-light { background: rgba(243, 236, 224, .14); color: var(--sand-100); }

/* money, weight, a day and a time */
.p-st-money { display: flex; align-items: center; gap: 2px; height: 48px; border-radius: 16px; background: var(--sand-50); padding: 0 14px; min-width: 0; }
.p-st-card .p-st-money { background: var(--sand-200); }
.p-st-money__sign { font: 500 16px var(--body); color: var(--ink-500); }
.p-st-money__in, .p-st-money .p-input { flex: 1; min-width: 0; border: 0; background: none !important; height: 100%; padding: 0 0 0 2px; font: 500 16px var(--body); color: var(--ink-900); outline: 0; box-shadow: none !important; }
.p-st-money:focus-within { outline: 2px solid var(--rust-600); }
.p-st-money__hint { font-size: 12.5px; color: var(--ink-600); padding: 0 4px; }
.p-st-money__hint.is-bad { color: var(--rust-600); }
.p-st-money__hint.is-good { color: var(--sage-600); font-weight: 600; }
.p-st-weight { display: flex; flex-direction: column; gap: 8px; }
.p-st-weight__n { width: 84px; flex: none; }
.p-st-whenfield .p-chips { gap: 6px; }
.p-st-when { min-width: 0; }

/* stock steppers */
.p-st-step { display: inline-flex; align-items: center; flex: none; height: 38px; border-radius: 999px; background: var(--sand-200); }
.p-st-step__b { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; cursor: pointer; font: 600 18px var(--body); color: var(--ink-900); }
.p-st-step__n { width: 44px; height: 38px; border: 0; background: none; text-align: center; font: 600 16px var(--mono); color: var(--ink-900); -moz-appearance: textfield; appearance: textfield; }
.p-st-step__n::-webkit-outer-spin-button, .p-st-step__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.p-st-step.is-low .p-st-step__n { color: var(--ochre-ink, #7a520c); }
.p-st-step.is-out .p-st-step__n { color: var(--rust-600); }
.p-card .p-st-step { background: var(--sand-100); }
.p-st-delta { font: 600 13px var(--mono); color: var(--sage-600); white-space: nowrap; }
.p-st-delta.is-minus { color: var(--rust-600); }
.p-st-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.p-st-thumb--lg { width: 72px; height: 72px; border-radius: 14px; }
.p-st-check { width: 22px; height: 22px; flex: none; accent-color: var(--rust-600); cursor: pointer; }
.p-st-meter { display: block; height: 8px; border-radius: 999px; background: var(--sand-300); overflow: hidden; }
.p-st-meter span { display: block; height: 100%; border-radius: inherit; background: var(--rust-600); }
.p-st-meter.is-sage span { background: var(--sage-600); }
.p-card--ink .p-st-meter { background: rgba(243, 236, 224, .18); }
.p-st-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink-600); flex: none; }
.p-st-x:hover { background: var(--sand-300); }

/* the product editor */
.p-st-opts { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.p-st-optfield { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p-st-opt { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--ink-900); color: var(--sand-100); font: 600 13.5px var(--body); }
.p-st-opt .p-st-x { color: var(--ink-300); }
.p-st-opt .p-st-x:hover { background: rgba(243, 236, 224, .14); }
.p-st-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .25); }
.p-st-sw.is-none { background: repeating-linear-gradient(135deg, var(--sand-400) 0 3px, var(--sand-200) 3px 6px); }
.p-st-size { min-width: 46px; }
.p-st-vtable { display: flex; flex-direction: column; }
.p-st-vrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sw name step" "more more more"; gap: 10px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.p-st-vrow > .p-switch { grid-area: sw; }
.p-st-vrow > .p-st-step { grid-area: step; }
.p-st-vrow.is-off { grid-template-areas: "sw name step"; opacity: .7; }
.p-st-vrow__name { grid-area: name; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.p-st-vrow__name b { font-size: 16px; }
.p-st-vrow__more { grid-area: more; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.p-st-vrow__more .p-input, .p-st-vrow__more .p-st-money { height: 40px; border-radius: 12px; font-size: 14px; }
.p-st-ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-st-ptile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p-st-ptile .p-input { height: 38px; border-radius: 10px; font-size: 13.5px; padding: 0 10px; }
.p-st-ptile__img { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--sand-300); }
.p-st-ptile__img .p-tag { position: absolute; left: 8px; top: 8px; }
.p-st-ptile--add { aspect-ratio: 4 / 5; align-items: center; justify-content: center; border-radius: 14px; border: 2px dashed var(--sand-400); cursor: pointer; font: 600 13.5px var(--body); color: var(--ink-600); }
.p-st-ptile--add b { font: 400 34px/1 var(--display); }

/* Stock, the map, receiving, counting */
.p-st-lowrow { gap: 10px; }
.p-st-mapcard { gap: 8px; }
.p-st-map { border-collapse: separate; border-spacing: 3px; font-size: 13px; min-width: 100%; }
.p-st-map th { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); padding: 2px 4px; text-align: center; white-space: nowrap; }
.p-st-map th[scope="row"] { text-align: left; text-transform: none; letter-spacing: 0; font: 600 13px var(--body); color: var(--ink-900); padding-right: 8px; min-width: 110px; }
.p-st-map th[scope="row"] a { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.p-st-map th[scope="row"] small { font: 500 11px var(--mono); color: var(--ink-500); }
.p-st-map__c { min-width: 34px; height: 30px; border-radius: 8px; text-align: center; font: 600 12.5px var(--mono); background: var(--sand-200); }
.p-st-map__c.is-gap { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.p-st-map__c.is-out { background: var(--rust-600); color: var(--sand-50); }
.p-st-map__c.is-2 { background: var(--warn-bg); color: var(--warn-ink); }
.p-st-map__c.is-5 { background: var(--ochre-100); color: var(--ochre-ink, #7a520c); }
.p-st-map__c.is-8 { background: var(--sage-100); color: var(--sage-ink, #3c4734); }
.p-st-map__c.is-more { background: var(--sage-600); color: var(--sand-50); }
.p-st-rows { display: flex; flex-direction: column; }
.p-st-qrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.p-st-qrow:first-child { border-top: 0; }
.p-st-kvdark { border-top-color: var(--line-dark); }
.p-st-kvdark span:last-child { color: var(--sand-100); }
.p-st-progress { background: var(--sand-300); }
.p-st-count__item { gap: 14px; align-items: center; }
.p-st-count__step { justify-content: center; gap: 18px; padding: 6px 0; }
.p-st-count__n { font: 400 96px/.85 var(--display); min-width: 2ch; text-align: center; }
.p-st-count__n.is-over { color: var(--sage-600); }
.p-st-count__n.is-under { color: var(--rust-600); }

/* Bulk edit */
.p-st-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.p-st-filters::-webkit-scrollbar { display: none; }
.p-st-filters .p-pick { flex: none; }
.p-st-bulk { display: flex; flex-direction: column; background: var(--sand-50); border-radius: 22px; padding: 2px 14px; }
.p-st-brow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "box img t status" "step step price price"; gap: 8px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.p-st-brow:first-child { border-top: 0; }
.p-st-brow > .p-st-check { grid-area: box; }
.p-st-brow > .p-st-thumb { grid-area: img; }
.p-st-brow__t { grid-area: t; }
.p-st-brow__status { grid-area: status; }
.p-st-brow > .p-st-brow__c:not(.p-st-brow__price) { grid-area: step; }
.p-st-brow__price { grid-area: price; }
.p-st-brow__price .p-st-money { height: 38px; border-radius: 12px; background: var(--sand-200); }
.p-st-brow--head { display: flex; gap: 10px; cursor: pointer; }
.p-st-brow.is-sel { background: var(--warn-bg); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.p-st-brow__c.is-edited .p-st-step, .p-st-brow__c.is-edited .p-st-money, .p-st-brow__status.is-edited .p-chip { box-shadow: 0 0 0 2px var(--rust-600); }
.p-st-was { font: 600 11px var(--mono); color: var(--rust-600); }
.p-st-dock { position: sticky; bottom: calc(var(--p-bot, 0px) + 92px); z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.p-st-selbar[hidden], .p-st-pendbar[hidden] { display: none; }
.p-st-selbar, .p-st-pendbar { box-shadow: 0 10px 30px -12px rgba(31, 26, 22, .45); }
.p-st-acts { gap: 6px; }
.p-st-acts .p-pick { height: 32px; font-size: 13px; padding: 0 11px; }
.p-st-amount { max-width: 220px; }
.p-st-amount .p-input { height: 40px; background: var(--ink-800); color: var(--sand-100); }
.p-st-modal__list { max-height: 40vh; overflow-y: auto; background: var(--sand-100); border-radius: 16px; padding: 0 14px; }
.p-st-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(31, 26, 22, .4); }
.p-st-modal { position: fixed; z-index: 61; left: 0; right: 0; top: 50%; margin: 0 auto; translate: 0 -50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--sand-50); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px -20px rgba(31, 26, 22, .5); color: var(--ink-900); }
.p-st-modal__t { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.p-st-problems { padding: 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); }

/* drops: picking pieces, Live */
.p-st-pickrow { cursor: pointer; align-items: center; }
.p-st-liveminis .p-mini { background: rgba(243, 236, 224, .1); color: var(--sand-100); }
.p-st-liveminis .p-mini span { color: var(--ink-300); }
.p-st-sell { padding: 6px 0; }
.p-st-fc { margin: 0; }
.p-kv .is-rust { color: var(--rust-600); font-weight: 600; }
.p-kv .is-ochre { color: var(--ochre-ink, #7a520c); font-weight: 600; }

/* Packing */
.p-st-dots { display: flex; gap: 4px; padding: 0 4px; }
.p-st-dots span { flex: 1; max-width: 40px; height: 5px; border-radius: 999px; background: var(--sand-400); }
.p-st-dots span.is-done { background: var(--sage-600); }
.p-st-dots span.is-on { background: var(--rust-600); }
.p-st-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--sand-50); text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.p-st-item.is-on { background: var(--sage-100); }
.p-st-item__box { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink-400); font-weight: 700; color: var(--sand-50); }
.p-st-item.is-on .p-st-item__box { background: var(--sage-600); box-shadow: none; }
.p-st-item__q { font: 600 15px var(--mono); flex: none; }
.p-st-addr { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.45; }

/* Customers */
.p-st-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-st-group { background: var(--sand-50); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-st-group b { font: 400 34px/.9 var(--display); }
.p-st-group__go { font-size: 13px; font-weight: 600; color: var(--rust-600); margin-top: auto; }
.p-st-story { margin: 0; font-size: 16px; line-height: 1.45; }
.p-st-minis2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-st-person .p-mini { background: var(--sand-200); }

/* Discounts and raffles */
.p-st-disc.is-quiet, .p-st-quiet { background: var(--sand-200); }
.p-st-code { font: 600 18px var(--mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.p-st-dname { font-size: 17px; overflow-wrap: anywhere; }
.p-st-disc .p-input { height: 38px; border-radius: 10px; font-size: 13px; flex: 1; min-width: 0; }
.p-st-sentence { margin: 0; font: 400 26px/1.35 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.p-st-pill { display: inline-flex; align-items: center; vertical-align: baseline; border-radius: 999px; background: var(--ink-900); color: var(--sand-100); padding: 0 4px 0 12px; margin: 2px 0; max-width: 100%; }
.p-st-pill--text { padding: 2px 12px; font-size: .8em; }
.p-st-pill__sel { appearance: auto; height: 34px; border: 0; background: none; color: inherit; font: 600 15px var(--body); text-transform: none; max-width: 100%; padding: 0 4px; cursor: pointer; color-scheme: dark; }
.p-st-builder { gap: 14px; }
.p-st-igcheck { margin: -4px 0 0; padding: 0 4px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.p-st-igcheck:empty { display: none; }
.p-st-igcheck .is-ok { color: var(--sage-600); font-weight: 600; }
.p-st-igcheck .is-bad { color: var(--rust-600); font-weight: 600; }

/* Reports */
.p-st-rbars { height: 120px; }
.p-up.is-down { color: var(--rust-600); }
.p-st-happened { margin: 0; font-size: 15px; line-height: 1.4; cursor: default; }
.p-st-happened.is-cost { color: var(--rust-600); }

/* Your shop */
.p-st-swatches { gap: 10px; }
.p-st-swatch { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .2); }
.p-st-swatch.is-site { background: conic-gradient(var(--rust-600) 0 25%, var(--sage-600) 0 50%, var(--ink-900) 0 75%, var(--sand-400) 0); }
.p-st-swatch.is-on { box-shadow: 0 0 0 3px var(--sand-50), 0 0 0 5px var(--ink-900); }
.p-st-pvwell { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 20px 14px; border-radius: 22px; background: var(--sand-300); min-width: 0; }
.p-st-pv { background: var(--ink-900); padding: 6px; border-radius: 12px; min-width: 0; }
.p-st-pv.is-laptop { flex: 1 1 auto; max-width: 360px; }
.p-st-pv.is-phone { width: 96px; flex: none; border-radius: 16px; }
.p-st-pv__screen { display: flex; flex-direction: column; gap: 4px; background: var(--sand-50); border-radius: 8px; padding: 6px; min-height: 120px; overflow: hidden; }
.p-st-pv__bar { font: 600 8px var(--mono); text-transform: uppercase; color: var(--ink-600); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-st-pv__band { font: 600 7px var(--mono); color: var(--sand-50); padding: 3px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; }
.p-st-pv__chips { display: flex; gap: 3px; }
.p-st-pv__chips i { width: 18px; height: 6px; border-radius: 999px; background: var(--sand-300); }
.p-st-pv__grid { display: grid; gap: 3px; }
.p-st-pv__grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-st-pv__grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-st-pv__tile { display: block; background: var(--sand-300); border-radius: 3px; }
.p-st-pv__look { font: 600 7px var(--mono); color: var(--ink-500); text-transform: uppercase; padding: 6px 0; text-align: center; background: var(--sand-200); border-radius: 3px; }

/* Store settings and Stripe */
.p-st-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sage-100); color: var(--sage-600); font-weight: 700; font-size: 13px; }
.p-st-mark.is-bad { background: var(--warn-bg); color: var(--rust-600); }
.p-st-editrow { border-top: 1px solid var(--line); }
.p-list > .p-st-editrow:first-child { border-top: 0; }
.p-st-editrow > .p-li { border-top: 0; }
.p-st-form { padding: 4px 0 14px; }
.p-st-under { padding: 0 0 12px; }
.p-st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-st-steps li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--sand-50); min-width: 0; }
.p-st-steps li.is-on { background: var(--ink-900); color: var(--sand-100); }
.p-st-steps li.is-on .p-small { color: var(--ink-300); }
.p-st-steps__n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--sand-300); }
.p-st-steps li.is-done .p-st-steps__n { background: var(--sage-600); color: var(--sand-50); }
.p-st-steps li.is-on .p-st-steps__n { background: var(--rust-600); color: var(--sand-50); }
html[data-os="android"] .p-st-bulk, html[data-os="android"] .p-st-group, html[data-os="android"] .p-st-item { border-radius: 16px; }
html[data-os="android"] .p-st-sentence { font: 500 20px/1.5 var(--body); text-transform: none; }

@media (min-width: 600px) {
  .p-st-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-st-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-st-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* TikTok's picture on Social accounts (phone-social.js tiktokCard). */
.p-tt__av { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; margin-right: 10px; }
/* church (phone-church.js): the next service, four even tiles, which form a message came from. */
a.p-church { text-decoration: none; }
.p-church__big { font: 400 52px/.9 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
html[data-os="android"] .p-church__big { font-size: 46px; }
.p-minis--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-os="android"] .p-minis--even { display: grid; overflow: visible; margin: 0; padding: 0; }
html[data-os="android"] .p-minis--even .p-mini { min-width: 0; }
@media (min-width: 600px) { .p-minis--even { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-lead__form { margin-bottom: -4px; }
.p-lead__private { color: var(--ink-600); font-style: italic; }
.p-formpick { margin-top: -4px; }

/* ---------- Media (phone-mediafeed.js) ---------- */
.p-media-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-600); }
.p-media-list { display: flex; flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.p-media-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.p-media-item:first-child { border-top: 0; }
.p-media-item.is-hidden .p-media-pic { opacity: .45; }
.p-media-pic { flex: none; display: block; width: 112px; border-radius: 10px; overflow: hidden; background: var(--sand-200); }
.p-media-thumb { display: block; width: 112px; height: 63px; object-fit: cover; }
.p-media-thumb--none { background: var(--sand-300); }
.p-media-title { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.p-media-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.p-media-src .p-btn + .p-btn, .p-media-src .p-row .p-confirm { margin-left: 0; }
@media (min-width: 600px) {
  .p-media-pic, .p-media-thumb { width: 160px; }
  .p-media-thumb { height: 90px; }
}