/* File: salonsite.css
   A salon's public website. Tokens only — see 12-styling-standard.md.
   The salon palette and the --sa accent come from .site in kapsel-base.css; this file
   only lays the page out. Container queries (cqi) rather than viewport media queries,
   so the page is also right inside the narrow dashboard preview. */

.site{min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
.site main{flex:1;width:100%;max-width:1040px;margin:0 auto;
  padding:0 16px 48px;display:flex;flex-direction:column;gap:56px}

/* ---------- header ---------- */
.s-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;background:var(--site-bg);border-bottom:1px solid var(--site-line)}
.s-head-name{font-family:var(--f-display);font-size:19px;text-decoration:none;margin-right:auto}
.s-head-nav{display:flex;gap:16px;font-size:13px}
.s-head-nav a{color:var(--site-muted);text-decoration:none}
.s-head-nav a:hover{color:var(--sa)}
.s-head-login{font-size:13px;color:var(--site-muted);text-decoration:none}
.s-head-login:hover{color:var(--sa)}

/* ---------- hero ---------- */
.s-hero{display:grid;grid-template-columns:1fr;gap:28px;padding-top:40px;align-items:start}
.s-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);margin-bottom:10px}
.s-hero-name{font-family:var(--f-display);font-weight:400;line-height:.98;
  font-size:clamp(40px,8.4cqi,84px);letter-spacing:-.01em}
.s-hero-tagline{margin-top:14px;font-size:17px;color:var(--site-muted);max-width:46ch}
.s-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ---------- the "today" panel ---------- */
.s-today{display:grid;gap:14px;padding:16px;border:1px solid var(--site-line);
  border-radius:var(--r-lg);background:var(--site-soft)}
.s-today-status{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;flex-wrap:wrap}
.s-dot{width:8px;height:8px;border-radius:50%;background:var(--site-muted);flex:none}
.s-today-status.is-open .s-dot{background:var(--ok)}
.s-today-status.is-closed .s-dot{background:var(--warn)}
.s-today-detail{color:var(--site-muted);font-weight:400}
.s-today-team{display:grid;gap:7px}
.s-today-avatars{display:flex}
.s-today-avatars .avatar{margin-right:-5px;box-shadow:0 0 0 2px var(--site-soft)}
.s-today-face{object-fit:cover;padding:0}
.s-today-always{font-family:var(--f-mono);font-size:12.5px;color:var(--sa)}

/* ---------- sections ---------- */
.s-section-name{font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,4.4cqi,42px);margin-bottom:24px}

/* ---------- services ---------- */
.s-cats{display:grid;grid-template-columns:1fr;gap:32px}
.s-cat-name{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);padding-bottom:8px;border-bottom:1px solid var(--site-line);margin-bottom:4px}
.s-list{list-style:none;margin:0;padding:0}
.s-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--site-line)}
.s-item-text{display:grid;gap:2px;margin-right:auto;min-width:min(100%,180px)}
.s-item-name{font-size:15px}
.s-item-meta{font-size:12.5px;color:var(--site-muted)}
.s-item-price{font-size:15px;white-space:nowrap}
.s-from{font-family:var(--f-ui);font-size:11.5px;color:var(--site-muted)}

/* ---------- team ---------- */
.s-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.s-team-card{display:grid;gap:8px;justify-items:start}
.s-team-photo{width:100%;max-width:200px;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg)}
.s-team-name{font-family:var(--f-display);font-weight:400;font-size:22px;margin-top:6px}
.s-team-title{font-size:13px;color:var(--site-muted)}
.s-tags{display:flex;gap:6px;flex-wrap:wrap}
.s-tag{font-size:11.5px;padding:2px 9px;border-radius:var(--r-pill);
  border:1px solid var(--site-line);color:var(--site-muted)}
.s-team-days{font-size:12.5px;color:var(--site-muted)}
.s-team-card .s-btn{margin-top:6px}

/* ---------- photos ---------- */
.s-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);display:block}
.s-swatch{background:color-mix(in srgb,var(--sa) calc(14% + var(--swatch) * 0.18%),var(--site-soft))}

/* ---------- about, hours, find us ---------- */
.s-about{display:grid;grid-template-columns:1fr;gap:40px}
.s-about-col .s-section-name{font-size:clamp(24px,3.2cqi,30px);margin-bottom:16px}
.s-about-text{display:grid;gap:12px;color:var(--site-muted);max-width:52ch}
.s-hours{display:grid;gap:2px;max-width:320px}
.s-hours-row{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--site-line);font-size:14px}
.s-hours-row.is-today{font-weight:600;color:var(--sa)}
.s-closed{margin-top:16px}
.s-closed ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}
.s-find{display:grid;gap:10px;font-size:14px}
.s-find-address{color:var(--site-muted);line-height:1.7}
.s-find-link{color:var(--sa);text-decoration:none}
.s-find-link:hover{text-decoration:underline}

/* ---------- THE OWNER'S DESIGN (the Website tab) ----------
   Every class below comes from a fixed list in SalonsiteDesignController, so a design can
   only ever pick one of these rules - never write its own. */

/* Type pairings. Classic is the base above (Bodoni Moda headings). */
.site.font-modern{--f-display:var(--f-ui)}
.site.font-modern .s-hero-name,.site.font-modern .s-section-name,
.site.font-modern .s-head-name,.site.font-modern .s-team-name{font-weight:700;letter-spacing:-.02em}
.site.font-warm{--f-display:"Fraunces",Georgia,serif}
.site.font-warm .s-hero-name,.site.font-warm .s-section-name{font-weight:500;letter-spacing:-.01em}

/* Top banner: centred, no panel */
.s-hero.hero-centred{justify-items:center;text-align:center;padding-top:56px}
.s-hero.hero-centred .s-hero-tagline{margin-inline:auto}
.s-hero.hero-centred .s-hero-actions{justify-content:center}

/* Top banner: the cover photo behind the name, darkened so the name always reads */
.s-hero.hero-cover{position:relative;padding:72px 24px 32px;border-radius:var(--r-lg);overflow:hidden;
  margin-top:24px;isolation:isolate;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72)),var(--cover) center/cover no-repeat}
.s-hero.hero-cover .s-eyebrow,.s-hero.hero-cover .s-hero-tagline{color:rgba(255,255,255,.86)}
.s-hero.hero-cover .s-btn.line{color:#fff;border-color:rgba(255,255,255,.6)}
.s-hero.hero-cover .s-today{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.2);color:#fff}
.s-hero.hero-cover .s-today .hint,.s-hero.hero-cover .s-today-detail{color:rgba(255,255,255,.8)}

/* Services as cards */
.services-cards .s-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding-top:10px}
.services-cards .s-item{flex-direction:column;align-items:flex-start;gap:8px;padding:16px;
  border:1px solid var(--site-line);border-radius:var(--r-lg);background:var(--site-soft)}
.services-cards .s-item-text{margin-right:0}
.services-cards .s-cat-name{border-bottom:0}

/* Team as a compact row */
.team-compact .s-team{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.team-compact .s-team-card{justify-items:center;text-align:center;gap:4px}
.team-compact .s-team-photo{max-width:96px;border-radius:50%}
.team-compact .avatar.lg{width:64px;height:64px;font-size:20px}
.team-compact .s-tags,.team-compact .s-team-days{display:none}
.team-compact .s-team-name{font-size:18px}

/* Photos as a scrolling strip */
.photos-strip .s-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
  padding-bottom:6px}
.photos-strip .s-photo{flex:0 0 min(72%,320px);scroll-snap-align:start}

/* ---------- paused notice ---------- */
.s-paused{margin-top:24px;border-left:3px solid var(--warn)}

/* ---------- footer ---------- */
.s-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--site-line);font-size:12.5px;color:var(--site-muted)}
.s-foot a{color:var(--sa)}

/* ---------- the sticky bar, phones only ---------- */
.s-sticky{display:none}

/* ---------- salon not found ---------- */
.site-missing{align-items:center;justify-content:center;text-align:center;padding:24px}
.site-missing-inner{display:grid;gap:12px;max-width:40ch;margin:auto}
.site-missing h1{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,6cqi,46px)}
.site-missing p{color:var(--site-muted)}
.site-missing-foot{font-size:12.5px;margin-top:16px}
.site-missing-foot a{color:var(--sa)}

/* ---------- wider than a phone ---------- */
@container site (min-width:720px){
  .s-hero{grid-template-columns:1fr 280px;gap:48px;padding-top:56px}
  .s-cats{grid-template-columns:1fr 1fr;gap:32px 48px}
  /* AS MANY COLUMNS AS THE OWNER HAS SWITCHED ON - ONE, TWO OR THREE, NEVER AN EMPTY ONE */
  /* as many across as fit at a readable width - three on a desktop, two on a tablet -
     never three squeezed until the opening hours wrap */
  .s-about{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
  .s-about>.s-about-col:first-child:not(:last-child){min-width:0}
  .s-hero.hero-centred,.s-hero.hero-cover{grid-template-columns:1fr}
  .s-hero.hero-cover{grid-template-columns:1fr 280px;padding:96px 40px 40px;align-items:end}
  .services-cards .s-cats{grid-template-columns:1fr}
}

/* ---------- phones ---------- */
@media (max-width:720px){
  .s-head-nav{display:none}
  /* Room for the sticky bar, so the footer is never under it. */
  .site main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .s-sticky{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--site-bg);border-top:1px solid var(--site-line)}
  .s-sticky .s-btn{flex:1;min-height:44px}
  .s-photos{grid-template-columns:repeat(2,1fr)}
  .s-item{gap:10px}
  .s-item-price{margin-left:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE BOOKING SHEET AND MANAGE BOOKING  (02-product-spec.md 1.3 and 1.4)
   The sheet itself, .pick, .date, .slot and .times come from kapsel-base.css.
   Everything here is the booking flow's own additions.
   ══════════════════════════════════════════════════════════════════════════ */

.s-book-overlay{background:var(--site-bg)}
.s-sheet-title{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.s-sheet-err{margin-top:-6px}
.s-step{font-size:11.5px;color:var(--site-muted);margin-left:auto}
.s-sheet-close{margin-left:auto;font-size:26px;line-height:1;text-decoration:none;
  color:var(--site-muted);padding:0 4px}
.s-sheet-actions{display:flex;gap:10px;margin-left:auto}
.s-total{font-size:12.5px}

/* ---------- step 1: services ---------- */
.s-pick-group{display:grid;gap:2px}
.s-pick-cat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);margin-bottom:8px}
.s-svc-text{display:grid;gap:2px}
.s-svc-name{font-size:14.5px}
.s-svc-meta{font-size:12px;color:var(--site-muted)}
.s-svc-price{font-size:14px;white-space:nowrap}

/* The hair lengths, shown only once a service is ticked. Indented so they read as
   belonging to the service above rather than as more services. */
.s-lens{display:grid;gap:4px;margin:-2px 0 10px 28px;padding-left:12px;
  border-left:2px solid var(--sa-soft)}
.s-len{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:7px 2px;cursor:pointer}
.s-len input{accent-color:var(--sa);width:17px;height:17px;flex:none}
.s-len-extra{font-size:12px;color:var(--site-muted)}

/* ---------- step 2: stylists ---------- */
.s-sty{grid-template-columns:auto auto 1fr auto}
.s-sty-text{display:grid;gap:2px}
.s-sty-name{font-size:14.5px}
.s-sty-meta{font-size:12px;color:var(--site-muted)}
.s-sty-price{font-size:14px;white-space:nowrap}
/* "Anyone available" has no avatar, so it needs the same column count as the rest. */
.s-sty:not(:has(.avatar)){grid-template-columns:auto 1fr auto}

/* ---------- step 3: dates and times ---------- */
/* ---------- the month calendar (SalonsiteCalendarView), in the booking flow and on
   "change your time". Replaced a sideways strip of date chips with no month on it. ---------- */
.s-cal{display:grid;gap:8px;padding:12px;border:1px solid var(--site-line);border-radius:var(--r-lg);
  background:var(--site-soft)}
.s-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.s-cal-month{font-family:var(--f-display);font-size:20px}
.s-cal-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--site-line);background:var(--site-bg);
  color:var(--site-ink);font-size:22px;line-height:1;cursor:pointer}
.s-cal-nav:hover:not(:disabled){border-color:var(--sa);color:var(--sa)}
.s-cal-nav:disabled{opacity:.3;cursor:default}
.s-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.s-cal-wd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  color:var(--site-muted);padding:2px 0 4px}
.s-cal-day{aspect-ratio:1;max-height:52px;display:grid;place-items:center;border-radius:12px;font-size:15px;
  border:1px solid transparent;background:transparent;color:var(--site-ink);font-family:var(--f-ui);padding:0}
button.s-cal-day{cursor:pointer;font-weight:600;background:var(--site-bg);border-color:var(--site-line);position:relative}
button.s-cal-day::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--sa)}
button.s-cal-day:hover{border-color:var(--sa)}
.s-cal-day.is-none{color:var(--site-muted);opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.s-cal-day.is-out{color:var(--site-muted);opacity:.25}
.s-cal-day.is-today{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--sa) 45%,transparent)}
button.s-cal-day.is-chosen{background:var(--sa);border-color:var(--sa);color:var(--sa-ink)}
button.s-cal-day.is-chosen::after{background:var(--sa-ink)}
.s-cal-chosen{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-weight:700;font-size:15px;margin-top:6px}
.s-cal-chosen span{font-weight:400;font-size:12.5px;color:var(--site-muted)}
.s-time-group{display:grid;gap:8px}
.slot{cursor:pointer;display:grid;gap:3px;justify-items:center}
.s-slot-dots{display:flex;gap:2px}
.s-slot-dot{width:3px;height:3px;border-radius:50%;background:var(--site-muted)}
.slot[aria-pressed="true"] .s-slot-dot{background:var(--sa-ink)}

/* ---------- step 4: details ---------- */
.s-optional{font-weight:400;color:var(--site-muted)}
.s-pay{border-left:3px solid var(--sa)}
.s-policy{font-size:12.5px}
.s-summary{display:grid;gap:4px}
.s-code{font-family:var(--f-mono);font-size:24px;letter-spacing:.4em;text-align:center}

/* ---------- confirmation ---------- */
.s-conf-wrap{align-items:flex-start;justify-content:center;padding:24px 16px 48px}
.s-conf{width:100%;max-width:520px;margin:0 auto;display:grid;gap:10px}
.s-conf-head{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,7cqi,44px);line-height:1.05}
.s-conf-ref{font-size:30px;letter-spacing:.14em;color:var(--sa);margin-top:6px}
.s-conf-card{display:grid;gap:18px;margin-top:14px;padding:18px;
  border:1px solid var(--site-line);border-radius:var(--r-lg);background:var(--site-soft)}
.s-conf-block{display:grid;gap:5px}
.s-conf-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted)}
.s-conf-row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.s-conf-total{padding-top:7px;margin-top:3px;border-top:1px solid var(--site-line);font-weight:600}
.s-conf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- manage booking ---------- */
.s-ref{font-size:19px;letter-spacing:.1em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-ref-input{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.s-manage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.s-manage-actions form{display:contents}
.s-manage-notice,.s-manage-cutoff,.s-cancel-warn{display:grid;gap:8px}
.s-cancel-warn{border-left:3px solid var(--bad)}
.s-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--site-line))}
.s-keep{display:grid;gap:4px;margin-bottom:6px}
/* A plain-text button, for "Show every service" inside a sentence. */
.s-link{background:none;border:0;padding:0;color:var(--sa);font:inherit;
  text-decoration:underline;cursor:pointer}

/* ---------- phones ---------- */
@media (max-width:600px){
  .s-sheet-actions{width:100%;margin-left:0}
  .s-sheet-actions .s-btn{flex:1;min-height:44px}
  .sheet-f{flex-direction:column;align-items:stretch;gap:10px}
  .s-total{text-align:center}
  .s-manage-actions .s-btn{flex:1;min-height:44px}
  .s-conf-ref{font-size:26px}
}

/* ---------- reviews, social links and the map (the Website tab) ---------- */
.s-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.s-review{margin:0;padding:18px;border:1px solid var(--site-line);border-radius:var(--r-lg);background:var(--site-soft);
  display:grid;gap:10px}
.s-review blockquote{margin:0;font-family:var(--f-display);font-size:18px;line-height:1.35}
.s-review figcaption{font-size:13px;color:var(--site-muted)}
.s-review figcaption::before{content:"— "}
.s-social{display:flex;gap:12px;flex-wrap:wrap}
.s-social a,.s-foot-social a{color:var(--sa);text-decoration:none;font-weight:600}
.s-social a:hover,.s-foot-social a:hover{text-decoration:underline}
.s-foot-social{display:flex;gap:12px;margin:0}
.s-map{margin-top:28px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--site-line);aspect-ratio:16/7;min-height:240px}
.s-map iframe{width:100%;height:100%;border:0;display:block}

/* ══════════════════════════════════════════════════════════════════════════
   THE LOOK (14 Oct 2026) - "make it look less like a document"
   Before this the page was text on one flat colour from top to bottom. It now has
   SHAPE: a tinted banner with the salon's monogram as its picture, sections that sit
   on cards, a team that scrolls sideways on a phone, a tinted visit band and a closing
   footer. Everything is drawn from the salon's own tokens (--sa, --site-*), so every
   colour preset, a custom colour, all three type pairings and dark mode still apply -
   nothing here names a colour of its own.
   ══════════════════════════════════════════════════════════════════════════ */

.site{--s-tint:color-mix(in srgb,var(--sa) 9%,var(--site-bg));
      --s-tint-2:color-mix(in srgb,var(--sa) 16%,var(--site-bg));
      --s-card:color-mix(in srgb,var(--site-soft) 70%,var(--site-bg))}
.site main{gap:72px}

/* ---------- the top bar: a little glass, and nothing but the salon and Book ---------- */
.s-head{background:color-mix(in srgb,var(--site-bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.s-head-name{font-size:21px}

/* ---------- the banner: a tinted card with the monogram as its picture ---------- */
.s-hero{position:relative;overflow:hidden;isolation:isolate;margin-top:20px;
  padding:44px 24px 28px;border-radius:28px;background:var(--s-tint)}
.s-hero::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;
  right:-140px;top:-160px;background:radial-gradient(circle,var(--s-tint-2) 0%,transparent 70%)}
.s-hero::after{content:attr(data-mark);position:absolute;z-index:-1;right:-6px;bottom:-0.18em;
  font-family:var(--f-display);font-size:clamp(150px,34cqi,330px);line-height:1;letter-spacing:-.04em;
  color:var(--sa);opacity:.09;pointer-events:none;white-space:nowrap}
.s-hero .s-eyebrow{color:var(--sa)}
.s-hero .s-btn{min-height:46px;padding:12px 24px;font-size:15px}
.s-today{background:var(--site-bg);border-color:transparent;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
/* A cover photo has a picture already - no monogram over it. */
.s-hero.hero-cover::before,.s-hero.hero-cover::after{content:none}
.s-hero.hero-centred::after{right:50%;transform:translateX(50%)}

/* ---------- a label above each heading, so a section announces itself ---------- */
.s-kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sa);
  margin-bottom:6px}
.s-section-name{margin-bottom:22px}

/* ---------- services: each category is a card ---------- */
.s-cat{background:var(--s-card);border:1px solid var(--site-line);border-radius:22px;padding:18px 20px 8px}
.s-cat-name{border-bottom:0;color:var(--sa);margin-bottom:0}
.s-item{border-bottom:1px solid color-mix(in srgb,var(--site-line) 70%,transparent);padding:13px 0}
.s-item:last-child{border-bottom:0}
.s-item-name{font-weight:600}
.s-item-price{font-weight:600}
.s-book{border-color:color-mix(in srgb,var(--sa) 40%,var(--site-line));color:var(--sa)}
.s-book:hover{background:var(--sa);color:var(--sa-ink);border-color:var(--sa)}
/* the "cards" style keeps its own tiles inside the category, so its card is quieter */
.services-cards .s-cat{background:transparent;border:0;padding:0}

/* ---------- the team: cards with a tinted portrait well ---------- */
.team-cards .s-team-card{background:var(--s-card);border:1px solid var(--site-line);border-radius:22px;
  padding:22px;justify-items:center;text-align:center;gap:6px}
.team-cards .s-team-card .avatar.lg,.team-cards .s-team-photo{width:104px;height:104px;max-width:104px;
  border-radius:50%;font-size:34px;box-shadow:0 0 0 6px var(--s-tint)}
.team-cards .s-team-card .s-tags{justify-content:center}
.team-cards .s-team-card .s-btn{margin-top:10px}

/* ---------- reviews sit on the tint ---------- */
.s-review{background:var(--s-tint);border-color:transparent;border-radius:22px}

/* ---------- the visit band: full width, tinted, three cards ---------- */
.s-band{margin-inline:calc(50% - 50cqi);padding:56px calc(50cqi - 50%) 56px;background:var(--s-tint)}
.s-band .s-about-col{background:var(--site-bg);border-radius:22px;padding:22px}
.s-band .s-about-col .s-section-name{margin-bottom:14px}
.site main:has(> .s-band:last-child){padding-bottom:0}

/* ---------- the footer: a closing band, not a line of small print ---------- */
.s-foot{display:block;padding:0;border-top:0;background:var(--s-tint-2);color:var(--site-ink);font-size:13.5px}
.s-foot-inner{max-width:1040px;margin:0 auto;padding:36px 16px 22px;display:grid;gap:16px}
.s-foot-name{display:block;font-family:var(--f-display);font-size:26px;line-height:1.1}
.s-foot-address{display:block;color:var(--site-muted);margin-top:4px}
.s-foot-reach{display:flex;gap:16px;flex-wrap:wrap}
.s-foot-reach a{color:var(--site-ink);font-weight:600;text-decoration:none}
.s-foot-reach a:hover{color:var(--sa)}
.s-foot-base{max-width:1040px;margin:0 auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--site-muted);
  border-top:1px solid color-mix(in srgb,var(--site-ink) 10%,transparent)}
.s-foot-base a{color:var(--site-muted)}
.s-foot-kapsel{margin-left:auto}
.s-foot-login{text-decoration:none}

@container site (min-width:720px){
  .s-hero{padding:64px 48px 48px}
  .s-hero.hero-cover{padding:110px 48px 48px}
  .s-cats{gap:20px}
  .s-foot-inner{grid-template-columns:1.2fr 1fr auto;align-items:start;padding-top:44px}
  .s-foot-reach{flex-direction:column;gap:6px}
}

/* ---------- phones: shorter, and the team scrolls sideways ---------- */
@media (max-width:720px){
  .site main{gap:52px}
  .s-hero{margin-inline:-6px;padding:34px 20px 22px}
  .s-hero .s-hero-actions .s-btn{flex:1}
  /* THE TEAM WAS A FULL SCREEN OF CARDS STACKED; NOW IT IS ONE ROW YOU SWIPE */
  .team-cards .s-team{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none}
  .team-cards .s-team::-webkit-scrollbar{display:none}
  .team-cards .s-team-card{flex:0 0 74%;scroll-snap-align:center}
  .s-band{padding-block:40px}
  .s-band .s-about{gap:12px}
  .s-foot-base{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .s-foot-kapsel{margin-left:0}
}

/* ---------- phones: a service row never wraps its Book button onto a line of its own ----------
   Name and time on the left, price over Book on the right - one compact row however long the
   price ("from R 650", "R 260–320") or the name. */
/* A CATEGORY CARD IS ITS OWN CONTAINER: a narrow card - a phone, or one of two cards on a
   tablet - gets the compact row (price over Book), whatever the screen is. Keyed on the
   screen, the two-column tablet layout dropped every Book onto a line of its own. */
.s-cat{container-type:inline-size;container-name:cat}
@container cat (max-width:460px){
  .s-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
    column-gap:12px;row-gap:6px;align-items:center;padding:11px 0}
  .s-item-text{grid-row:1 / span 2;min-width:0;margin:0}
  .s-item-price{grid-column:2;grid-row:1;justify-self:end;margin:0;font-size:15px}
  .s-item .s-book{grid-column:2;grid-row:2;justify-self:end;padding:5px 12px 5px 14px;min-height:30px}
}
@media (max-width:720px){
  .s-cat{padding:14px 14px 4px;border-radius:18px}
  .s-section-name{margin-bottom:16px}
  .s-band .s-about-col{padding:18px}
  .s-hours-row{padding:5px 0}
  .s-hero .s-today{gap:10px;padding:14px}
}

/* On a phone the footer's contact block sits directly under "Find us" saying the same thing -
   so it shows only when the owner has switched "Find us" off (the Website tab). */
@media (max-width:720px){
  .site:has(.s-find) .s-foot-inner{display:none}
}

/* ---------- the top bar: name left, links and Book now in the middle, Log in right ----------
   A three-column grid with equal outer columns, so the middle group is truly centred on the
   page whatever the length of the salon's name. */
.s-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;flex-wrap:nowrap}
.s-head-name{margin-right:0;justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-head-mid{display:flex;align-items:center;gap:22px}
.s-head-nav{gap:20px;font-size:14px}
.s-head-login{justify-self:end;font-size:13px;font-weight:600;color:var(--site-ink);text-decoration:none;
  padding:7px 16px;border:1px solid var(--site-line);border-radius:var(--r-pill)}
.s-head-login:hover{border-color:var(--sa);color:var(--sa)}
@media (max-width:720px){
  /* THE LINKS ARE HIDDEN ON A PHONE (THE STICKY BAR HAS BOOK NOW), SO THE MIDDLE IS BOOK NOW */
  .s-head{gap:10px;padding:10px 14px}
  .s-head-login{padding:6px 12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PHOTOS AND SERVICES (14 Oct 2026) - "we need the photos, and services look plain"
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- the banner with the cover photo beside the name ---------- */
.s-hero-photo{position:relative;margin:0;align-self:stretch}
.s-hero-photo-link img{display:block;width:100%;height:100%;min-height:300px;max-height:460px;object-fit:cover;
  border-radius:22px;box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.s-hero-photo .s-today{position:absolute;left:-28px;bottom:22px;max-width:250px}
.s-hero.has-photo::after{opacity:.06}

/* ---------- photos: a mosaic, the cover large ---------- */
.photos-grid .s-photos{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
.photos-grid .s-photo{border-radius:18px;aspect-ratio:1;height:100%}
.photos-grid .s-photo:first-child{grid-column:span 2;grid-row:span 2}
.s-photo{transition:transform .25s ease,box-shadow .25s ease}
.s-photo:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(0,0,0,.5)}

/* ---------- services: chips, icons, rows with a pill and an arrow ---------- */
.s-cat-jump{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 22px}
.s-chip{padding:8px 16px;border-radius:999px;background:var(--s-tint);color:var(--site-ink);
  font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent}
.s-chip:hover{border-color:var(--sa);color:var(--sa)}
.s-cat{scroll-margin-top:80px;padding:20px 20px 10px}
.s-cat-head{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.s-cat-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;
  background:var(--sa);color:var(--sa-ink)}
.s-cat-icon svg{width:24px;height:24px}
.s-cat-head .s-cat-name{font-family:var(--f-display);font-size:22px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--site-ink);padding:0;margin:0}
.s-cat-count{margin-left:auto;font-size:12px;color:var(--site-muted)}
.s-item{padding:14px 0}
.s-item-name{font-size:16px}
.s-item-meta{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:4px;
  padding:3px 9px 3px 7px;border-radius:999px;background:var(--s-tint);font-family:var(--f-ui);font-size:12px;
  color:var(--site-ink)}
.s-item-meta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.s-item-price{font-family:var(--f-ui);font-size:17px;font-weight:700;color:var(--site-ink)}
.s-item-price .s-from{font-weight:500}
.s-book{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 16px;border-radius:999px;
  background:var(--sa);color:var(--sa-ink);border:0;font-size:13.5px;font-weight:700;text-decoration:none;
  transition:gap .15s ease,filter .15s ease}
.s-book svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-book:hover{gap:9px;filter:brightness(1.08);background:var(--sa);color:var(--sa-ink)}

@container site (min-width:720px){
  .s-hero.has-photo{grid-template-columns:1.1fr .9fr;align-items:center}
}

@media (max-width:720px){
  .s-hero-photo{margin-top:6px}
  .s-hero-photo-link img{min-height:240px;max-height:300px}
  .s-hero-photo .s-today{position:relative;left:auto;bottom:auto;max-width:none;margin:-40px 12px 0}
  .photos-grid .s-photos{grid-template-columns:repeat(2,1fr);gap:8px}
  .photos-grid .s-photo:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
  .s-cat-jump{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
  .s-cat-jump::-webkit-scrollbar{display:none}
  .s-chip{white-space:nowrap}
  .s-cat-icon{width:38px;height:38px;border-radius:12px}
  .s-cat-head .s-cat-name{font-size:20px}
  .s-item .s-book{padding:6px 10px 6px 14px;font-size:13px;min-height:0}
}
/* the mosaic packs itself, so any number of photos leaves no hole */
.photos-grid .s-photos{grid-auto-flow:dense}
/* With 4, 8 or 12 photos the large cover leaves one cell over at the end of a four-wide
   mosaic; the last photo takes both cells of that row instead of leaving a hole. */
@container site (min-width:721px){
  .photos-grid .s-photo:last-child:nth-child(4n){grid-column:span 2;aspect-ratio:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   WIDTH (14 Oct 2026) - "too much space on the sides on desktop"
   The page was capped at 1040px, so a 1920px screen had 440px of nothing each side. The
   content now runs to 1280px (1440px on very large screens) with side padding that grows
   with the screen, and the top bar, the visit band's cards and the footer all line up on
   the SAME edges as the content - one column down the page, not three different ones.
   ══════════════════════════════════════════════════════════════════════════ */

.site{--s-max:1280px;--s-pad:clamp(16px,3.2vw,48px)}
.site main{max-width:calc(var(--s-max) + 2 * var(--s-pad));padding-inline:var(--s-pad)}

/* the top bar and the footer use the same column as the content */
.s-head{padding-inline:max(var(--s-pad),calc((100% - var(--s-max)) / 2))}
.s-foot-inner,.s-foot-base{max-width:calc(var(--s-max) + 2 * var(--s-pad));padding-inline:var(--s-pad)}

/* a grid track never grows past its share because of what is inside it - this is what
   pushed the photo mosaic off the side of a phone */
.s-cats{grid-template-columns:minmax(0,1fr)}
.photos-grid .s-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-photo{min-width:0;max-width:100%}

@container site (min-width:720px){
  .s-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-cards .s-cats{grid-template-columns:minmax(0,1fr)}
}
/* wide screens: the room goes to the content, not to the margins */
@container site (min-width:1200px){
  .s-hero{padding:72px 64px 56px}
  .s-hero.has-photo{grid-template-columns:1fr 1fr;gap:64px}
  .s-hero-photo-link img{max-height:520px}
  .s-hero-name{font-size:clamp(64px,6.4cqi,104px)}
  .s-cats{gap:24px}
  /* auto-FIT: three stylists fill the row rather than leaving an empty fourth column */
  .team-cards .s-team{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
  .s-reviews{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .s-band .s-about{gap:24px}
}
/* (set on .site's CHILDREN: a container query can style what is inside the container, never
   the container itself) */
@container site (min-width:1700px){
  .site > *{--s-max:1440px}
  /* three columns only when the categories fill them - 3 or 6 of them; otherwise two, so
     four categories never leave one alone on a row. The photo mosaic stays four wide,
     which is what keeps it free of holes. */
  .s-cats:has(> .s-cat:nth-child(3):last-child),
  .s-cats:has(> .s-cat:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:720px){
  .photos-grid .s-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container site (min-width:2200px){
  .site > *{--s-max:1600px}
}
/* two visit cards across (a tablet): the third takes the whole row rather than half of it */
@container site (min-width:720px) and (max-width:1023px){
  .s-about > .s-about-col:nth-child(3):last-child{grid-column:1 / -1}
}

/* ---------- booking on a wide screen: the salon beside the sheet ----------
   On a phone the wrapper is invisible (display:contents) and the panel hidden, so the sheet
   is exactly what it was. On a wide screen the sheet stops floating alone in an empty page:
   the salon's cover photo, name and contacts sit beside it. */
.s-book-wrap{display:contents}
.s-book-aside{display:none}
@media (min-width:1024px){
  .s-book-overlay{align-items:center;padding:24px}
  .s-book-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:28px;
    width:100%;max-width:1280px;height:min(860px,calc(100dvh - 48px));margin:auto}
  .s-book-wrap > .sheet{height:100%;max-height:none;margin:0}
  .s-book-aside{display:block;position:relative;overflow:hidden;border-radius:28px;background:var(--s-tint-2)}
  .s-book-aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .s-book-aside::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
  .s-book-aside-text{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:4px;
    padding:32px 36px;color:#fff;font-size:14px}
  .s-book-aside-name{font-family:var(--f-display);font-size:clamp(34px,3.4vw,52px);line-height:1.05;margin-bottom:6px}
  .s-book-aside-text span{opacity:.9}
  .s-book-aside-back{margin-top:12px;color:#fff;font-weight:600;text-decoration:none;opacity:.9}
  .s-book-aside-back:hover{text-decoration:underline}
  /* no photo: the tint, and dark text */
  .s-book-aside.no-photo::after{content:none}
  .s-book-aside.no-photo .s-book-aside-text,.s-book-aside.no-photo .s-book-aside-back{color:var(--site-ink)}
}
@media (min-width:1024px){
  /* the body takes the spare height, so the footer sits on the sheet's bottom edge */
  .s-book-wrap > .sheet .sheet-b{flex:1}
}

/* ---------- powered by Rooikat ----------
   The black bar Kapsel's own pages end with (kapselsite.css), markup from
   KapselsiteRooikatFooterView. Restated here because this page loads neither style.css nor
   kapselsite.css. The values are Rooikat's, as literals, and ALWAYS the dark ones whatever
   the theme or the salon's palette - the developer's choice, as on kapsel.co.za. The
   caracal's #1a1a1a shading matches the bar and does not show; known, and NOT recoloured.

   Sticky to the bottom of the screen on a computer, as on kapsel.co.za, so it is always
   in view and settles at the end of the page. On a phone it stays in place at the end
   instead: the Book now / My booking bar already owns the bottom of a phone's screen.

   THE FONT: Syne stops at 800. The wordmark asks for 900 (as style.css does) and is drawn
   with 800 - but only if 800 is LOADED. Asking Google for wght@900 returns 600 alone, and
   the wordmark was then a browser-faked bold of 600. SalonsiteHeadView asks for 600;800,
   the same as kapsel.co.za. */
.app-footer-bar{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 16px calc(7px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #2a2a2a;background:#1a1a1a;width:100%;color-scheme:dark;
  position:sticky;bottom:0;z-index:20}
.app-footer-powered{font-size:9px;font-family:'Syne',sans-serif;letter-spacing:.14em;
  font-weight:600;color:#555555;text-transform:uppercase}
.app-footer-logo{display:flex;align-items:center;line-height:1;letter-spacing:.12em;
  color:#DB8926;text-transform:uppercase}
.app-footer-name{font-size:11px;font-family:'Syne',sans-serif;font-weight:900;
  letter-spacing:.12em;color:#DB8926;text-transform:uppercase}
/* the base line no longer closes the page, so it needs no safe-area padding of its own */
.s-foot-base{padding-bottom:14px}
/* On a phone the Book now / My booking bar is fixed to the bottom of the screen, and the
   Rooikat bar is the last thing on the page - so it carries the room for the booking bar,
   or the booking bar would sit on top of it. 64px is that bar's own height. */
@media (max-width:720px){
  .app-footer-bar{position:static;padding-bottom:calc(64px + 14px + env(safe-area-inset-bottom,0px))}
}

/* ---------- photos open full screen ----------
   Each photo is a link (.s-photo-link carries the grid item's .s-photo); the image fills
   it. lightbox.js opens the viewer; with it off the link shows the photo full size. */
/* The image is taken OUT of the sizing (absolute): in flow, its own 600px height stretched
   the grid's rows and the mosaic stopped being square. The link alone sizes the tile now,
   exactly as the bare image did before. */
.s-photo-link{display:block;position:relative;overflow:hidden;cursor:zoom-in;padding:0}
.s-photo-link img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.s-photo-link:focus-visible{outline:3px solid var(--sa);outline-offset:3px}
.s-hero-photo-link{display:block;height:100%;cursor:zoom-in;border-radius:inherit}
.s-hero-photo-link:focus-visible{outline:3px solid var(--sa);outline-offset:3px}

/* the viewer: the whole screen, dark, the photo as large as it will go without cropping */
html.s-lb-open{overflow:hidden}
.s-lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr;align-items:center;background:rgba(12,10,12,.95);color:#fff;
  padding:max(8px,env(safe-area-inset-top,0px)) 8px max(12px,env(safe-area-inset-bottom,0px));
  animation:s-lb-in .18s ease}
.s-lb[hidden]{display:none}
@keyframes s-lb-in{from{opacity:0}to{opacity:1}}
.s-lb-top{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px}
.s-lb-count{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.s-lb-fig{grid-column:2;margin:0;height:100%;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px}
.s-lb-img{max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.s-lb-cap{font-size:13px;color:rgba(255,255,255,.7);text-align:center}
.s-lb-btn{display:grid;place-items:center;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border-radius:50%;transition:background .15s}
.s-lb-btn:hover{background:rgba(255,255,255,.24)}
.s-lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.s-lb-close{width:44px;height:44px;font-size:18px}
.s-lb-nav{width:52px;height:52px;font-size:34px;line-height:1;margin:0 8px;padding-bottom:4px}
.s-lb-nav[hidden]{visibility:hidden;display:grid}
/* a phone swipes, so the arrows shrink and sit over the photo's edges */
@media (max-width:720px){
  .s-lb{grid-template-columns:1fr;padding-inline:0}
  .s-lb-fig{grid-column:1;grid-row:2}
  .s-lb-img{max-height:calc(100dvh - 130px);border-radius:0}
  .s-lb-nav{grid-row:2;position:relative;z-index:1;width:40px;height:40px;font-size:26px;
    background:rgba(0,0,0,.35)}
  .s-lb-prev{grid-column:1;justify-self:start;margin-left:8px}
  .s-lb-next{grid-column:1;justify-self:end;margin-right:8px}
}
/* The cover photo's sizing is aimed at its own link (.s-hero-photo-link img). As
   `.s-hero-photo img` it also caught the team faces in the "Today" card that sits inside
   the same figure, and stretched each into a strip 300px tall once stylists had photos. */