/*
Theme Name: Sonder Esthetics
Theme URI: https://sonderesthetics.com
Description: Brand theme for Sonder Esthetics and Nail Care. Child of Twenty Twenty-Five. Colours and fonts come from the official brand kit — see /knowledge/business/sonder-esthetics/concepts/brand-identity.md
Author: Sonder Esthetics and Nail Care
Template: twentytwentyfive
Version: 1.0.0
Text Domain: sonder-esthetics
Update URI: false
*/

/* Brand fonts. Forum for headings, DM Sans for body — resolved 2026-08-21
   because the brand kit's "Javanese Text" is a Javanese-script font, not a
   Latin typeface. */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=DM+Sans:wght@300;400;500;700&display=swap');

body{
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------
   Focus rings, site-wide. Added 2026-08-28.

   WordPress core ships, inline and unconditionally:

     :where(.wp-site-blocks :focus){ outline-width:2px; outline-style:solid; }

   with no `outline-color`, so the ring is drawn in `currentColor` — whatever
   the element's own lettering happens to be. Two problems came out of that:

   1. **A mouse click leaves a ring behind.** A click gives an element `:focus`
      but not `:focus-visible`, so every `:focus-visible` rule in this file was
      being skipped and core's ring was what showed. Thanh saw it first on the
      tab bars, where it read as a green outlined pill after every click.

   2. **The keyboard ring had no fixed colour.** Green lettering gave a green
      ring, cream lettering a cream one, so the same control looked different
      depending on where it sat.

   Core's selector is wrapped in `:where()`, which has zero specificity, so
   plain selectors beat it without needing `!important`.

   These two rules are the floor, not the ceiling. They sit at the top of the
   file on purpose: the per-element `:focus-visible` rules further down match
   at the same specificity, so being later they still win — which is how the
   two `__choice` lists keep their inset ring.

   `:focus-visible` is the browser's own judgement about whether this user
   needs a focus indicator. Removing the ring for keyboard users would be an
   accessibility regression; removing it after a mouse click is not.

   A browser too old to know `:focus-visible` drops both rules as invalid and
   keeps core's ring, which is the behaviour before today.
   ------------------------------------------------------------------ */

/* A mouse click leaves nothing behind. */
.wp-site-blocks :focus:not(:focus-visible){
  outline:none;
}

/* Keyboard focus gets one ring, everywhere, in the brand copper. */
.wp-site-blocks :focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* Small uppercase label above a heading — the "eyebrow" in the mockup */
.sonder-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* Brand copper #b46c2b is a fill colour, not a text colour: at 12px on
     cream it measures 2.99:1 and on paper 3.41:1, both under the 4.5:1 AA
     floor. #885220 is the same hue darkened until it passes — 4.68:1 on
     cream, 5.34:1 on paper. Fills stay on the brand copper. */
  color:#885220;
  font-weight:500;
  margin-bottom:8px;
}

/* Price rows on the services page */
.sonder-price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:14px 0;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-price-row .name{font-family:'Forum',Georgia,serif;font-size:20px;}
.sonder-price-row .meta{color:var(--wp--preset--color--muted);white-space:nowrap;}
.sonder-price-row .meta b{color:var(--wp--preset--color--ink);font-weight:500;}

/* Acuity booking embed — keep it from overflowing on a phone */
.sonder-booking iframe{width:100%!important;max-width:100%!important;border:0;}

@media(max-width:781px){
  body{font-size:17px;}
  .sonder-price-row{gap:12px;}
}

/* Quote blocks. The parent theme gives quotes a large display size, which
   turns a testimonial inside a 3-column row into two words per line. Pin them
   to body size and give the citation some room. */
.wp-block-quote{
  font-size:16px;
  line-height:1.6;
  font-style:normal;
  border-left:2px solid var(--wp--preset--color--copper);
  padding-left:20px;
}
.wp-block-quote p{font-size:16px;line-height:1.6;}
.wp-block-quote cite{
  display:block;
  margin-top:12px;
  font-size:13px;
  font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}

/* Footer links sit on the dark green panel — the copper link colour is too
   low-contrast there. */
footer a{color:#ddd6c3;text-decoration:none;}
footer a:hover{color:#fff;text-decoration:underline;}

/* Two footer text colours were picked for light panels and fail on the dark
   green one: sage-light measured 4.38:1 and muted 2.28:1. Lightened until
   both pass — 6.28:1 and 4.69:1. Same hues, dark-panel values only. */
footer .has-sage-light-color{ color:#9db399!important; }
footer .has-muted-color{ color:#9a948a!important; }

/* Footer links, one per row with a 44px tap area (house minimum; they were
   30px). The address opens Maps and the phone dials. Approved by Thanh
   2026-09-27 from mockup/live/home.html. The Instagram mark is a CSS mask of
   mockup/icons/instagram.svg, not markup — the site editor would strip an
   <svg> inside a paragraph. */
footer a.sonder-foot-link{display:block;width:max-content;max-width:100%;padding:10px 0;line-height:24px;}
footer a.sonder-foot-ig{display:flex;align-items:center;gap:8px;}
footer a.sonder-foot-ig::before{
  content:"";flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='16.2' cy='7.8' r='0.6' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='16.2' cy='7.8' r='0.6' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Header navigation */
.wp-block-navigation a:hover{color:var(--wp--preset--color--green);}
.wp-block-navigation .wp-block-navigation-item__content{text-decoration:none;}

/* The current page's nav link — copper underline, matching the mockup.
   sonder-nav-current is added server-side in functions.php, since these are
   hand-typed URLs and core never marks one "current" on its own. */
.sonder-nav-current > .wp-block-navigation-item__content{
  color:var(--wp--preset--color--green);
  border-bottom:2px solid var(--wp--preset--color--copper);
  padding-bottom:2px;
}

/* On a phone, stack the footer columns with breathing room */
@media(max-width:781px){
  footer .wp-block-columns{gap:32px;}
}

/* Service menu tables. The last column holds a per-treatment Book link that
   deep-links into Acuity for that exact treatment, skipping its menu. */
.sonder-menu table{ width:100%; border-collapse:collapse; }
.sonder-menu th{
  font-family:'DM Sans',sans-serif;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--copper); font-weight:500;
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-menu td{
  padding:14px 12px; vertical-align:middle;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-menu td:first-child{
  font-family:'Forum',Georgia,serif; font-size:19px;
  color:var(--wp--preset--color--green);
}
.sonder-menu td:nth-child(2){ font-weight:500; white-space:nowrap; }
.sonder-menu td:nth-child(3){ color:var(--wp--preset--color--muted); white-space:nowrap; }
.sonder-menu td:last-child{ text-align:right; width:1%; white-space:nowrap; }

.sonder-menu td:last-child a{
  display:inline-block; text-decoration:none;
  font-family:'DM Sans',sans-serif; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--wp--preset--color--green);
  border:1px solid var(--wp--preset--color--green);
  border-radius:40px; padding:8px 18px;
  transition:background .18s ease, color .18s ease;
}
.sonder-menu td:last-child a:hover{
  background:var(--wp--preset--color--green);
  color:var(--wp--preset--color--paper);
}

/* On a phone a four-column price table is unreadable. Stack each row into a
   card instead, with the Book control full width. */
@media(max-width:781px){
  .sonder-menu thead{ display:none; }
  .sonder-menu tr{
    display:block; padding:16px 0;
    border-bottom:1px solid var(--wp--preset--color--border);
  }
  .sonder-menu td{ display:block; border:none; padding:2px 0; }
  .sonder-menu td:first-child{ font-size:20px; margin-bottom:4px; }
  .sonder-menu td:nth-child(2),
  .sonder-menu td:nth-child(3){ display:inline-block; margin-right:14px; }
  .sonder-menu td:last-child{ text-align:left; width:auto; margin-top:12px; }
  .sonder-menu td:last-child a{ display:block; text-align:center; padding:12px; }
}

/* Hours table on the Contact page. The default WordPress table block is a
   plain grid with a visible border on every cell — too basic next to the
   rest of the page. Restyled to match .sonder-menu: serif day names, hairline
   rows, no visible grid, and the closed day picked out in copper. */
.sonder-hours{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
}
.sonder-hours th{
  font-family:'DM Sans',sans-serif;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--copper); font-weight:500;
  text-align:left; padding:0 0 10px;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-hours th:last-child{ text-align:right; }
.sonder-hours td{
  padding:11px 0;
  border-bottom:1px solid var(--wp--preset--color--border);
  font-size:15px;
}
.sonder-hours tr:last-child td{ border-bottom:0; }
.sonder-hours td:first-child{
  font-family:'Forum',Georgia,serif; font-size:18px;
  color:var(--wp--preset--color--green);
}
.sonder-hours td:last-child{
  text-align:right; white-space:nowrap;
  color:var(--wp--preset--color--muted); font-weight:500;
}
.sonder-hours tr.is-closed td:last-child{
  color:var(--wp--preset--color--copper); font-weight:600;
  text-transform:uppercase; font-size:12px; letter-spacing:.1em;
}
/* ------------------------------------------------------------------
   Amelia booking form.

   COLOURS AND FONT ARE NOT SET HERE. They live in Amelia's own Customize
   screen (wp-admin -> Amelia -> Customize -> Step-by-step), saved into
   amelia_settings.customizedData. Amelia computes its shades in
   JavaScript and writes them as inline styles, so CSS here cannot win
   cleanly — and two sources for one colour is how a theme rots.
   Kim can change the accent colour there herself.

   What is left below is layout only.
   ------------------------------------------------------------------ */

/* Amelia ships small and scrolls INSIDE itself: the form is capped at 760px
   wide and 560px tall, and the calendar and time-slot list get their own inner
   scrollbar. Thanh's call — the page should scroll, never a box inside it.

   Two parts:
   1. Width. Fill our 1120px content column instead of floating at 760px.
   2. Height. `.am-fs__wrapper` is a flex row with a fixed 560px height, so
      every child stretches to it and then clips. Releasing the height on the
      wrapper AND its children lets the form grow as tall as its content, and
      the footer has to become static or it stays pinned mid-page.

   The #amelia-container prefix is needed: Amelia's own rules carry that
   specificity, so a shorter selector loses.
   ------------------------------------------------------------------ */
.amelia-v2-booking{
  max-width:1120px!important;
  margin-inline:auto!important;
}
.amelia-v2-booking,
.amelia-v2-booking #amelia-container{
  --am-mw-main:1120px!important;   /* Amelia default 760px */
}
.amelia-v2-booking .am-fs__main{
  --am-mw-fsm:900px!important;     /* Amelia default 520px */
}

/* Let it grow instead of scrolling inside itself. */
.amelia-v2-booking .am-fs__wrapper,
.amelia-v2-booking #amelia-container.am-fs__wrapper,
.amelia-v2-booking #amelia-container .am-fs__main,
.amelia-v2-booking #amelia-container .am-fs__main-inner,
.amelia-v2-booking #amelia-container .am-fs__main-content,
.amelia-v2-booking #amelia-container .am-fs-sb{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

/* The footer is absolutely pinned to the bottom of the old fixed height. With
   the height released it has to flow after the content instead. */
.amelia-v2-booking #amelia-container .am-fs__main-footer{
  position:static!important;
}

/* Sit flat on the page rather than floating in a card with a shadow. */
.amelia-v2-booking,
.amelia-v2-booking .am-fs__wrapper{
  box-shadow:none!important;
  border:0!important;
}

/* ------------------------------------------------------------------
   Services menu tabs.

   The service menu is 8 sections and ~30 treatments. As one page it is a
   wall. The bar below shows one section at a time. It is built in
   assets/menu-tabs.js from every group carrying `sonder-menu-section`, so
   the markup on the page stays plain groups and Kim's editor stays normal.

   The sections deliberately have no background colour of their own — with
   only one on screen at a time, alternating panels flicker between shades.
   ------------------------------------------------------------------ */
.sonder-menu-tabs{
  position:sticky;
  /* Below the sticky header, whose bottom edge assets/header.js publishes
     as `--sonder-header-h` — height plus the admin bar's offset, if any. */
  top:var(--sonder-header-h, 0px);
  z-index:20;
  background:var(--wp--preset--color--paper);
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-menu-tabs__inner{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:10px 16px;
}

/* ---- Wide screens: every section as a row of tabs. ---- */
.sonder-menu-tabs__strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.sonder-menu-tabs__tab{
  flex:0 0 auto;
  white-space:nowrap;
  cursor:pointer;
  background:transparent;
  border:1px solid transparent;
  border-radius:40px;
  /* Sized to match a button — same face, size, weight and tracking, so the
     strip and the Book buttons read as the same kind of control. */
  padding:10px 20px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.sonder-menu-tabs__tab:hover{ color:var(--wp--preset--color--green); }

/* Active is green lettering plus a copper rule beneath it, and no fill at all.
   Shared with the shop's brand bar and the product page, so all three bars are
   one component -- see section 5e.

   The rule is drawn on ::after rather than as a border, for two reasons: it
   stays a straight line inside the 40px corner radius, and adding it never
   changes a tab's size, so switching tabs cannot nudge the row. */
.sonder-menu-tabs__tab{ position:relative; }
.sonder-menu-tabs__tab::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
}
.sonder-menu-tabs__tab.is-active{
  color:var(--wp--preset--color--green);
}
.sonder-menu-tabs__tab.is-active::after{
  background:var(--wp--preset--color--copper);
}
.sonder-menu-tabs__tab:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* The mouse-click ring is dropped site-wide at the top of this file, so these
   tabs need nothing of their own. It was handled here first, on 2026-08-28,
   then lifted to a global rule the same day. */

/* The phone control does not exist above 781px. */
.sonder-menu-tabs__toggle,
.sonder-menu-tabs__list{ display:none; }

.sonder-menu-section[hidden]{ display:none!important; }
.sonder-menu-section{ scroll-margin-top:calc(var(--sonder-header-h, 0px) + 64px); }

/* ---- Phones: the section you are in, and a hamburger for the rest. ----

   Six tabs in a row is 745px of control in a 390px bar. It used to scroll
   sideways; now it collapses, and the bar is centred. */
@media(max-width:781px){
  .sonder-menu-tabs__strip{ display:none; }

  .sonder-menu-tabs__inner{
    display:flex;
    justify-content:center;
    padding:8px 12px;
  }

  .sonder-menu-tabs__toggle{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:100%;
    cursor:pointer;
    background:var(--wp--preset--color--green);
    border:1px solid var(--wp--preset--color--green);
    border-radius:40px;
    padding:9px 16px 9px 20px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wp--preset--color--paper);
    transition:background .18s ease, border-color .18s ease;
  }
  .sonder-menu-tabs__toggle:hover{
    background:var(--wp--preset--color--green-2);
    border-color:var(--wp--preset--color--green-2);
  }
  .sonder-menu-tabs__toggle:focus-visible{
    outline:2px solid var(--wp--preset--color--copper);
    outline-offset:2px;
  }
  .sonder-menu-tabs__current{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Three bars, becoming an X while the list is open so the control says what
     it will do next. */
  .sonder-menu-tabs__bars{
    flex:0 0 auto;
    display:block;
    position:relative;
    width:16px;
    height:12px;
  }
  .sonder-menu-tabs__bars span{
    position:absolute;
    left:0;
    width:16px;
    height:1.5px;
    background:currentColor;
    transition:transform .2s ease, opacity .2s ease;
  }
  .sonder-menu-tabs__bars span:nth-child(1){ top:0; }
  .sonder-menu-tabs__bars span:nth-child(2){ top:5px; }
  .sonder-menu-tabs__bars span:nth-child(3){ top:10px; }
  .sonder-menu-tabs.is-open .sonder-menu-tabs__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  .sonder-menu-tabs.is-open .sonder-menu-tabs__bars span:nth-child(2){ opacity:0; }
  .sonder-menu-tabs.is-open .sonder-menu-tabs__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

  /* A panel under the bar, centred on it — never a strip that scrolls. */
  .sonder-menu-tabs__list{
    display:block;
    position:absolute;
    top:calc(100% - 4px);
    left:50%;
    transform:translateX(-50%);
    z-index:30;
    width:min(320px, calc(100vw - 24px));
    margin:0;
    padding:6px;
    list-style:none;
    background:var(--wp--preset--color--paper);
    border:1px solid var(--wp--preset--color--border);
    border-radius:10px;
    box-shadow:0 10px 28px rgba(31,47,34,.10);
  }
  .sonder-menu-tabs__list[hidden]{ display:none; }
  .sonder-menu-tabs__list li{ margin:0; }
  .sonder-menu-tabs__choice{
    display:block;
    width:100%;
    text-align:center;
    cursor:pointer;
    background:transparent;
    border:0;
    border-radius:6px;
    padding:11px 14px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wp--preset--color--green);
    transition:background .15s ease, color .15s ease;
  }
  .sonder-menu-tabs__choice:hover{
    background:var(--wp--preset--color--cream);
    color:var(--wp--preset--color--copper);
  }
  .sonder-menu-tabs__choice.is-current{ color:var(--wp--preset--color--copper); }
  .sonder-menu-tabs__choice:focus-visible{
    outline:2px solid var(--wp--preset--color--copper);
    outline-offset:-2px;
  }
}

/* ------------------------------------------------------------------
   Buttons - hover and focus.

   Twenty Twenty-Five's button styles name two colours this palette does
   not have: `--wp--preset--color--base` for the hover lettering and
   `--wp--preset--color--accent-4` for the focus ring. WordPress merges
   the parent's element styles into ours key by key, and our theme.json
   only set a hover background, so both of the parent's declarations
   arrived pointing at nothing. An empty custom property voids the whole
   declaration: the hover lettering fell back to inherited ink, which is
   1.08:1 against the hover green and therefore invisible, and the focus
   ring never drew at all.

   theme.json now sets the hover text as well as the background, which
   settles every solid button. The two rules below cover what theme.json
   cannot express - the outline variant and the focus ring.

   Copper (hover) #b3612b is a shade deeper than the brand copper so that
   white lettering clears 4.5:1 on it, while the fill still clears 3:1
   against both the cream pages and the deep-green panels.
   ------------------------------------------------------------------ */

/* Outline buttons stay quieter than the solid ones: they fill green, not
   copper, so copper keeps meaning "the main action on this page". This is
   the 25 per-treatment Book buttons on Services plus two others. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover{
  background-color:var(--wp--preset--color--green);
  border-color:var(--wp--preset--color--green);
  color:var(--wp--preset--color--cream);
}

/* Core's focus ring points at a colour that does not exist here, so no ring
   was drawn for anyone navigating by keyboard. Same ring as the tab strip. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* ------------------------------------------------------------------
   Deep-green panels.

   The brand ink (#2c332d) and the heading colour (#1f2f22) are both close to
   the deep green (#1f2f22), so a panel with a green background renders its
   heading and body text invisible. Same for a solid button, which is green on
   green. This turns them cream instead.

   Panels that set their own text colour in the editor (`has-text-color`) are
   left alone — Kim's choice wins.
   ------------------------------------------------------------------ */
.wp-block-group.has-green-background-color:not(.has-text-color){
  color:var(--wp--preset--color--paper);
}
.wp-block-group.has-green-background-color:not(.has-text-color)
  :is(h1,h2,h3,h4,p,li):not(.sonder-eyebrow):not([class*="-color"]){
  color:var(--wp--preset--color--paper);
}

/* Copper is too dark to read on the green. Lighten it here only. */
.wp-block-group.has-green-background-color .sonder-eyebrow{ color:#d9a273; }

/* A solid button on its own panel colour disappears. Flip it to cream. */
.wp-block-group.has-green-background-color .wp-block-button__link:not(.has-background){
  background-color:var(--wp--preset--color--paper);
  color:var(--wp--preset--color--green);
  border-color:var(--wp--preset--color--paper);
}
.wp-block-group.has-green-background-color .wp-block-button__link:not(.has-background):hover{
  background-color:var(--wp--preset--color--copper-2);
  border-color:var(--wp--preset--color--copper-2);
  color:#fff;
}

/* ------------------------------------------------------------------
   Tables.

   One style for every table on the site, taken from the Contact page hours
   table: a copper uppercase header row, hairline rules between rows, the
   name column in Forum green, no cell grid, no row shading, and no padding
   on the outer edges so the first and last columns line up with the text
   above them.

   The `.sonder-hours` rules further up are the same values, so the hours
   table keeps the look it already had. Only its right-aligned last column
   and its "closed" row are particular to it.

   The block editor's "Stripes" style is not used — it paints rows a flat
   grey (#f0f0f0) that belongs to no brand. It was removed from the three
   service tables by services-table-style.php.
   ------------------------------------------------------------------ */
/* A table under a paragraph needs the same air a paragraph gets. */
.wp-block-table{ margin-top:24px; }
.wp-block-table table{
  width:100%;
  border-collapse:collapse;
}

/* Core draws a full cell grid and a 3px rule under the head. Strip both
   everywhere; the hairlines below are the only rules a table gets. */
.wp-block-table table,
.wp-block-table td,
.wp-block-table th{
  border-left:0;
  border-right:0;
  border-top:0;
}
.wp-block-table thead{
  border-bottom:1px solid var(--wp--preset--color--border);
}
.wp-block-table tfoot{
  border-top:1px solid var(--wp--preset--color--border);
}

.wp-block-table th{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--wp--preset--color--copper);
  text-align:left;
  padding:0 14px 10px;
  background:transparent;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.wp-block-table td{
  font-size:15px;
  padding:11px 14px;
  border-bottom:1px solid var(--wp--preset--color--border);
  vertical-align:top;
}
.wp-block-table tbody tr:last-child td{ border-bottom:0; }

/* The outer columns sit flush with the body text above the table. */
.wp-block-table th:first-child,
.wp-block-table td:first-child{ padding-left:0; }
.wp-block-table th:last-child,
.wp-block-table td:last-child{ padding-right:0; }

/* The name column, in the same face as every treatment heading. */
.wp-block-table td:first-child{
  font-family:'Forum',Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.3;
  color:var(--wp--preset--color--green);
}
/* The price column. Never wrapped. */
.wp-block-table td:nth-child(2){
  white-space:nowrap;
  font-weight:500;
}

/* On the service tables the description column takes most of the width and
   squeezes short names onto two lines. Hold the name column open. */
.sonder-table td:first-child{ min-width:180px; }

@media(max-width:781px){
  .wp-block-table th{ padding:0 8px 8px; font-size:10px; letter-spacing:.12em; }
  .wp-block-table td{ padding:10px 8px; font-size:14px; }
  .wp-block-table td:first-child{ font-size:16px; }
}

/* ------------------------------------------------------------------
   Sticky header.

   The header follows the page down. `--sonder-header-h` is published by
   assets/header.js and is what keeps the Services tab strip sitting under
   the header rather than behind it.
   ------------------------------------------------------------------ */
header.wp-block-template-part{
  position:sticky;
  top:0;
  z-index:100;
}
/* The admin bar is fixed to the top for logged-in users; sit under it. */
body.admin-bar header.wp-block-template-part{ top:32px; }
@media(max-width:782px){
  body.admin-bar header.wp-block-template-part{ top:46px; }
}

/* Full at the very top, compact everywhere else. assets/header.js pins the
   bar to the window (`sonder-header-pinned` on <html>) and toggles
   `is-compact` on the header as the page leaves the top. Two states, and CSS
   animates between them over 0.3s. Nothing is recomputed per scroll frame.

   History: until 2026-09-17 the bar shrank a little on every scroll step,
   driven by a variable set on <html> each frame. That made the browser
   re-check every element on the page every frame (19ms against a 17ms
   frame), which stuttered, and moved the page 82px under the finger. For
   part of 2026-09-17 it slid away instead; Thanh wanted a compact bar.

   Pinned, the bar is out of the page flow, and `.wp-site-blocks` gets a top
   padding the height of the full bar in its place, so the compact bar can
   be shorter without anything below it moving. Pinning waits for the
   script, which measures first, so the page does not jump on load. */
html.sonder-header-pinned header.wp-block-template-part{
  position:fixed;
  left:0;
  right:0;
}
html.sonder-header-pinned .wp-site-blocks{
  padding-top:var(--sonder-header-full, 0px);
}

/* 14px full, 6px compact. The block editor writes this padding inline,
   which nothing but !important can override. */
header.wp-block-template-part > .wp-block-group{
  padding-top:14px !important;
  padding-bottom:14px !important;
  transition:padding .3s cubic-bezier(.22,.61,.36,1);
}
header.wp-block-template-part.is-compact > .wp-block-group{
  padding-top:6px !important;
  padding-bottom:6px !important;
}

/* The logo folds from its real height (`--sonder-logo-h`, measured by the
   script) to nothing, and fades a little faster so it is gone before it is
   cropped. Its width is left alone, so the navigation and Book Now keep
   their places. */
header .wp-block-site-logo{
  overflow:hidden;
  max-height:var(--sonder-logo-h, 240px);
  transition:max-height .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
header.wp-block-template-part.is-compact .wp-block-site-logo{
  max-height:0;
  opacity:0;
}

/* While the script measures both states, nothing may animate and the logo
   must show its natural height. */
header.wp-block-template-part.is-measuring,
header.wp-block-template-part.is-measuring *{ transition:none !important; }
header.wp-block-template-part.is-measuring:not(.is-compact) .wp-block-site-logo{ max-height:none; }

/* The Services tab strip sits under whichever bar is showing. */
.sonder-menu-tabs{
  transition:top .3s cubic-bezier(.22,.61,.36,1);
}
html.sonder-header-compact .sonder-menu-tabs{
  top:var(--sonder-header-hc, 0px);
}
@media (prefers-reduced-motion:reduce){
  header.wp-block-template-part > .wp-block-group,
  header .wp-block-site-logo,
  .sonder-menu-tabs{ transition:none; }
}

/* ------------------------------------------------------------------
   The shop icons in the header.

   Only the account icon exists today; there is no cart block on the site
   yet. The selector covers both, so a cart added later inherits this
   without a second pass.

   WooCommerce draws these icons with `stroke="currentColor"`, so the link
   colour is the icon colour and nothing else needs setting. Core's link
   styles had them copper at rest and green on hover, which is backwards
   from the buttons; this puts them the same way round - green at rest,
   copper when you point at one.

   The underline is core's link style leaking onto an icon-only link, which
   drew a rule under the icon. Off.
   ------------------------------------------------------------------ */
header .wc-block-customer-account__link,
header .wc-block-mini-cart__button{
  color:var(--wp--preset--color--green);
  text-decoration:none;
  transition:color .18s ease;
}
header .wc-block-customer-account__link:hover,
header .wc-block-mini-cart__button:hover,
header .wc-block-customer-account__link:focus-visible,
header .wc-block-mini-cart__button:focus-visible{
  color:var(--wp--preset--color--copper-2);
}
/* Same ring as every other control on the site. */
header .wc-block-customer-account__link:focus-visible,
header .wc-block-mini-cart__button:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* ------------------------------------------------------------------
   Header on a phone.

   Below 600px - the width where WordPress swaps the nav links for the
   hamburger - the bar is one line: hamburger / logo / Book Now. The logo
   takes whatever is left between the two, which is tight but deliberate.

   The account and cart icons are not hidden here; assets/header.js moves
   them into the hamburger menu, and moves them back on a wider screen.
   ------------------------------------------------------------------ */
@media(max-width:599px){
  header .wp-block-group.alignwide{
    flex-wrap:nowrap;
    justify-content:flex-start;
    column-gap:10px;
  }

  header .wp-block-navigation{
    order:1;
    flex:0 0 auto;
    margin:0;
  }

  /* A zero basis: the logo claims none of the line for itself and then
     grows into whatever the hamburger and the button leave over. */
  header .wp-block-site-logo{
    order:2;
    flex:1 1 0;
    min-width:0;
    display:flex;
    justify-content:center;
  }
  header .wp-block-site-logo img{ max-width:100%; height:auto; }

  header .wp-block-buttons{
    order:3;
    flex:0 0 auto;
  }
  /* The logo holds the line open on its own, but pin the button right as
     well so nothing can slide left into the hamburger. */
  header .wp-block-buttons{ margin-left:auto; }
  /* A tighter button, so the logo keeps more of the line. */
  header .wp-block-button__link{
    padding-left:16px;
    padding-right:16px;
    font-size:12px;
    letter-spacing:.1em;
  }

  /* The shop icons, once header.js has moved them into the menu. The menu
     list carries order:1 from core, so the tray needs an order of its own
     or it lands above the links instead of under them. */
  .sonder-menu-icons{
    order:2;
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid var(--wp--preset--color--border);
  }

  /* Three lines, not two. Core's icon is a two-bar SVG, so it is hidden and
     the bars are drawn instead: ::before is the top line and carries the
     middle one as its box-shadow, ::after is the bottom line. */
  header .wp-block-navigation__responsive-container-open{
    position:relative;
    width:26px;
    height:18px;
    padding:0;
  }
  header .wp-block-navigation__responsive-container-open svg{ display:none; }
  header .wp-block-navigation__responsive-container-open::before,
  header .wp-block-navigation__responsive-container-open::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:currentColor;
  }
  header .wp-block-navigation__responsive-container-open::before{
    top:0;
    box-shadow:0 8px 0 currentColor;
  }
  header .wp-block-navigation__responsive-container-open::after{ bottom:0; }
}

/* ------------------------------------------------------------------
   Shop.

   Everything below is WooCommerce. Lift the whole block out to remove it.

   WooCommerce ships its own block templates for the shop, the product page,
   the cart and the checkout, so there is no theme file to edit — the brand
   arrives through theme.json and these corrections. Only four things
   actually clashed; the rest inherited correctly.
   ------------------------------------------------------------------ */

/* 1. Product names.

   Core paints every link copper via elements.link, so the product grid came
   out as a wall of copper headings. Everywhere else on this site copper means
   "the main action", and green means "a heading". Product names are headings.
   Green at rest, copper on hover — the same direction as the buttons and the
   header shop icons.

   The grid is WooCommerce's Product Collection block, not the classic
   `ul.products` loop, so the title is a `wp-block-post-title`. The classic
   selector is kept as a second line in case a block is ever swapped back. */
.wc-block-product-template .wp-block-post-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--wp--preset--color--green);
}
.wc-block-product-template .wp-block-post-title a:hover{
  color:var(--wp--preset--color--copper-2);
}

/* 2. The duplicated description.

   WooCommerce's product template puts a post-excerpt block above the price.
   None of these products carry an excerpt — Square does not supply one — so
   WordPress falls back to the full description, which then appears a second
   time in the Description tab immediately below. Hide the top copy and keep
   the tab, which is where a shopper expects to find it. */
.single-product .wp-block-post-excerpt{ display:none; }

/* 3. The sorting dropdown.

   A raw browser select next to Forum and DM Sans. Give it the hairline and
   the paper fill every other control on the site uses. */
.woocommerce .woocommerce-ordering select{
  font-family:var(--wp--preset--font-family--dm-sans);
  font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--ink);
  background-color:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-radius:999px;
  padding:9px 16px;
}
.woocommerce .woocommerce-ordering select:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* 4. Out of stock.

   The default is small grey text that reads as a caption. Say it plainly. */
.woocommerce .stock.out-of-stock{
  color:var(--wp--preset--color--muted);
  font-weight:600;
}

/* Thanh's rule: the page scrolls, never a box inside the page. WooCommerce
   caps its cart and checkout tables and lets them scroll internally. */
.woocommerce-page .woocommerce table.shop_table,
.woocommerce-page .woocommerce-checkout,
.woocommerce-page .wc-block-components-sidebar-layout{
  overflow:visible;
}


/* ====================================================================
   MOTION — reveal, stagger, parallax
   ====================================================================

   Paired with assets/reveal.js. That file measures and watches; every
   visual below is CSS reading a custom property it publishes.

   Three guard rails, in order of importance:

   1. Everything here hides under `.sonder-motion`, which reveal.js adds to
      <html> only once it is certain it can un-hide again. No JavaScript, an
      old browser, or a script error before that line all mean the page shows
      normally. Never write a hiding rule outside that class.

   2. `prefers-reduced-motion` is a hard stop, not a slower animation.
      reveal.js returns early and never adds the class, so nothing hides. The
      block at the bottom is a second belt for anything CSS-only added later.

   3. Only `opacity`, `transform` and `filter` are animated. Those are the
      three the browser can do without re-laying out the page, which is what
      keeps this smooth on Kim's phone.

   Distances live here, not in the JavaScript, so the feel is tuned in one
   file. */

/* 1. Reveal ---------------------------------------------------------- */

.sonder-motion .sonder-reveal{
  opacity:0;
  transform:translateY(22px);
  /* Slow out, no overshoot. A bounce reads as playful, which is the wrong
     register for a treatment room. */
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  /* Promote before the animation, not during it. Dropped again on arrival so
     long pages are not holding a layer per section. */
  will-change:opacity,transform;
}
.sonder-motion .sonder-reveal.is-revealed{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Headings carry a touch further than body copy, so a section arrives as a
   sentence rather than a slab. */
.sonder-motion .sonder-reveal:is(h1,h2,h3){
  transform:translateY(30px);
}

/* 2. Stagger ---------------------------------------------------------- */

/* Children arrive in order. reveal.js writes `--sonder-i`; the multiplier is
   the gap between them. 80ms is about the fastest that still reads as a
   sequence — past ~5 items it starts to feel like waiting, hence the cap. */
.sonder-motion .sonder-stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(min(var(--sonder-i,0), 5) * 80ms);
}
.sonder-motion .sonder-stagger.is-revealed > *{
  opacity:1;
  transform:none;
}

/* 3. Photos ----------------------------------------------------------- */

/* A photo does more than fade: it un-blurs and settles out of a slight
   over-scale, so it reads as coming into focus. The frame is clipped, so the
   scale never nudges the layout around it. */
.sonder-motion .sonder-photo{
  overflow:hidden;
}
.sonder-motion .sonder-photo img{
  opacity:0;
  transform:scale(1.06);
  filter:blur(8px);
  transition:opacity .9s ease,
             transform 1.1s cubic-bezier(.22,.61,.36,1),
             filter .9s ease;
  will-change:opacity,transform,filter;
}
.sonder-motion .sonder-photo.is-revealed img{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}

/* 4. Parallax --------------------------------------------------------- */

/* reveal.js publishes `--sonder-parallax-p`, -1 at the bottom of the screen
   through 0 at centre to 1 at the top. The distance is set here.

   28px total travel. Enough to feel deliberate, small enough that nobody
   notices it as an effect — which is the point. Anything past ~60px on a
   hero starts to fight the header. */
.sonder-motion .sonder-parallax{
  --sonder-parallax-travel:28px;
  transform:translate3d(0, calc(var(--sonder-parallax-p,0) * var(--sonder-parallax-travel)), 0);
}

/* A background photo can take more, because there is no text riding on it. */
.sonder-motion .sonder-parallax.is-photo{
  --sonder-parallax-travel:56px;
}

/* 5. Hover ------------------------------------------------------------ */

/* Cards lift on a mouse. `hover:hover` keeps this away from touch screens,
   where the state sticks after a tap and the card stays lifted. */
@media (hover:hover){
  .sonder-lift{
    transition:transform .35s cubic-bezier(.22,.61,.36,1),
               box-shadow .35s ease;
  }
  .sonder-lift:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(31,47,34,.10);
  }
}

/* A copper hairline that draws in from the left under a link. Keyboard users
   get it too — :focus-visible, not just :hover. */
.sonder-underline{
  background-image:linear-gradient(var(--wp--preset--color--copper),var(--wp--preset--color--copper));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size .4s cubic-bezier(.22,.61,.36,1);
  text-decoration:none;
}
.sonder-underline:hover,
.sonder-underline:focus-visible{
  background-size:100% 1px;
}

/* 5b. Smooth anchor scrolling ----------------------------------------- */

/* Under `.sonder-motion` only, so "reduce motion" and a no-JS page both keep
   the instant jump. A smooth scroll a reader did not ask for is the exact
   thing that setting exists to refuse.

   The sticky header would otherwise land on top of whatever was jumped to.
   `--sonder-header-h` is published by header.js and already includes the admin
   bar, so one rule covers logged-in and logged-out. */
html.sonder-motion{ scroll-behavior:smooth; }

.wp-block-post-content [id]{
  scroll-margin-top:calc(var(--sonder-header-h, 0px) + 32px);
}

/* 5c. Button shine ----------------------------------------------------- */

/* A soft copper light crosses the filled button once on hover. Transform
   only — the gradient never moves the layout, and nothing animates on a
   colour.

   The alpha stays low enough that the lettering is never crossed by anything
   it has to compete with.

   Two buttons were missed until 2026-08-28, both spotted by Thanh:

   1. **Outline buttons** were excluded on the grounds that "a sweep across a
      transparent button lights up the page behind it". That reasoning does not
      hold, because the sweep only ever runs on hover and an outline button is
      filled solid by then — measured on the Policies page's "Contact Us",
      which hovers to `#b3612b` with white lettering. Exclusion removed.

   2. **The product page's Add to cart** is `button.single_add_to_cart_button`,
      WooCommerce's own markup. It is not inside a `.wp-block-button` wrapper,
      so the selector never reached it, even though it carries
      `wp-element-button` and hovers to the same copper. Named explicitly.

   The Add to cart buttons on product CARDS were always fine — those are block
   buttons and sit inside the wrapper. */
.sonder-motion .wp-block-button .wp-block-button__link,
.sonder-motion .single_add_to_cart_button{
  position:relative;
  overflow:hidden;
}
.sonder-motion .wp-block-button .wp-block-button__link::after,
.sonder-motion .single_add_to_cart_button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(217,162,115,0) 35%,
    rgba(217,162,115,.30) 50%,
    rgba(217,162,115,0) 65%
  );
  transform:translateX(-110%);
}
.sonder-motion .wp-block-button .wp-block-button__link:hover::after,
.sonder-motion .wp-block-button .wp-block-button__link:focus-visible::after,
.sonder-motion .single_add_to_cart_button:hover::after,
.sonder-motion .single_add_to_cart_button:focus-visible::after{
  transform:translateX(110%);
  /* Slow out, no overshoot — the same curve as the reveal, so the whole site
     moves with one accent. */
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}

/* 5d. Services tab cross-fade ------------------------------------------ */

/* Only the arriving section moves. `menu-tabs.js` adds `is-entering` to it and
   takes the class off again when the animation ends, so a section can arrive
   more than once.

   Opacity and transform only, and the distance is smaller than the page
   reveal's: this is a panel changing inside a page that is already there, not
   a page arriving. */
@keyframes sonder-tab-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.sonder-motion .sonder-menu-section.is-entering{
  animation:sonder-tab-in .45s cubic-bezier(.22,.61,.36,1) both;
}

/* 5e. The sliding tab underline ----------------------------------------- */

/* One copper rule slides to the tab you picked, instead of the mark jumping
   from one tab to the next. `assets/tab-slider.js` measures the active item
   and publishes its position and width; everything drawn is here.

   This is deliberately shared. The Services bar is JS-built <button>s and the
   shop's brand bar is PHP-rendered <a> links carrying `!important` colour
   rules, and both drive the same component through the same helper. That is
   the point: two bars that cannot drift apart.

   The earlier green pill was replaced on 2026-08-28. A filled active state
   worked on Services but could not be made to work on the shop links, where
   WooCommerce's own background kept winning -- see memory.md, 2026-08-26.
   A rule that sits below the strip never touches a background, so there is
   nothing to clear.

   All of this sits under `.sonder-motion`. With no JavaScript, or reduce-motion
   on, the slider is never built and the static `is-active::after` rule above is
   what shows -- which tab is current never depends on this.

   Position moves on `transform`, size on `width`. Width is the one deliberate
   exception to the transform-only rule: the rule is out of flow, so its width
   re-lays out nothing but itself, and scaling instead would drag the rounded
   ends out of shape. */
.sonder-motion .sonder-menu-tabs__strip,
.sonder-motion .sonder-shop-filter__row{ position:relative; }

.sonder-motion .sonder-tab-slider{
  position:absolute;
  left:0;
  top:0;
  width:var(--sonder-tab-w, 0px);
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--wp--preset--color--copper);
  /* Both axes, not just the horizontal one. Every one of these strips is
     `flex-wrap:wrap`, and a rule anchored to the strip's bottom edge appears
     to underline whatever landed on the last row the moment one wraps. */
  transform:translate(var(--sonder-tab-x, 0px), var(--sonder-tab-y, 0px));
  pointer-events:none;
  z-index:0;
}

/* Transitions are off until the first measurement has landed, so the rule does
   not travel out of the top-left corner on page load. */
.sonder-motion .is-ready .sonder-tab-slider{
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             width .42s cubic-bezier(.22,.61,.36,1);
}

/* The lettering sits above the rule passing beneath it. */
.sonder-motion .sonder-menu-tabs__tab,
.sonder-motion .sonder-shop-filter__link{
  position:relative;
  z-index:1;
}

/* The slider draws the rule now, so the item must not draw it as well -- two
   coppers would show as a stub left behind by the slide. `has-slider` is put
   on the strip by tab-slider.js, and only when it has actually built one. */
.sonder-motion .has-slider .sonder-menu-tabs__tab.is-active::after,
.sonder-motion .has-slider .sonder-shop-filter__link.is-active::after{
  background:transparent;
}

/* 5f. Shop batch stagger ------------------------------------------------ */

/* Cards fetched by endless scrolling arrive one after another instead of a
   block landing at once. `shop-infinite.js` writes `--sonder-i` per card, per
   batch, and takes the class off again when the animation ends.

   Same 80ms step and same 5-card cap as the reveal stagger in section 2, so
   the two read as one behaviour. Past five the wait stops being a sequence and
   starts being a delay -- and a fetched page can be a lot more than five. */
@keyframes sonder-batch-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

.sonder-motion .sonder-batch-in{
  animation:sonder-batch-in .6s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(min(var(--sonder-i, 0), 5) * 80ms);
}

/* 6. Reduce motion — the hard stop ------------------------------------ */

/* reveal.js already bails out, so nothing above is hidden in the first place.
   This block exists so that a CSS-only effect added here later cannot
   reintroduce movement by forgetting to ask. */
@media (prefers-reduced-motion:reduce){
  .sonder-motion .sonder-reveal,
  .sonder-motion .sonder-stagger > *,
  .sonder-motion .sonder-photo img{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .sonder-motion .sonder-parallax{
    transform:none;
  }
  .sonder-lift:hover{
    transform:none;
  }
  .sonder-underline{
    transition:none;
  }
  /* The shine and the smooth scroll are both gated on `.sonder-motion`
     already; these are the second belt, in case that class is ever added
     before the media query is re-checked. */
  html.sonder-motion{ scroll-behavior:auto; }
  .sonder-motion .wp-block-button__link::after,
  .sonder-motion .single_add_to_cart_button::after{ display:none; }
  .sonder-motion .sonder-menu-section.is-entering{ animation:none; }
  .sonder-motion .sonder-batch-in{ animation:none; }
  /* No slider at all: hand the rule back to the item itself. tab-slider.js
     already bails out on reduce-motion, so nothing is built in the first
     place; this is the second belt. */
  .sonder-motion .sonder-tab-slider{ display:none; }
  .sonder-motion .has-slider .sonder-menu-tabs__tab.is-active::after,
  .sonder-motion .has-slider .sonder-shop-filter__link.is-active::after{
    background:var(--wp--preset--color--copper);
  }
}

/* 5. The product page — summary and tabs.

   Tabs are a plain strip on a single rule: no fills, no outlines, no corners.
   The folder-divider version was tried on 2026-08-22 and dropped — Thanh kept
   the colours and did not want the filing-cabinet look.

   Letters are green and turn copper on hover or when open. */
.sonder-product-summary{
  color:var(--wp--preset--color--muted);
  font-size:1.05rem;
  line-height:1.6;
  margin:0 0 1rem;
  max-width:52ch;
}

.woocommerce-tabs{ margin-top:2rem; }

.woocommerce-tabs ul.tabs{
  display:flex;
  flex-wrap:wrap;            /* Thanh's rule: the page scrolls, not a box. */
  gap:0 2rem;
  list-style:none;
  margin:0 0 1.75rem;
  padding:0 0 0.25rem;
  border:0;
  border-bottom:1px solid var(--wp--preset--color--border);
  overflow:visible;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after{ display:none; }

/* Each of these fights `html body .wp-block-woocommerce-product-details
   .is-style-minimal ul.tabs.wc-tabs li`, which no theme selector can outrank
   honestly. Hence the important flags, here and on the colours below. */
.woocommerce-tabs ul.tabs li{
  position:relative;
  margin:0;
  padding:0;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
}
.woocommerce-tabs ul.tabs li a{
  display:inline-block;
  padding:0.5rem 0;
  color:var(--wp--preset--color--green) !important;
  font-weight:500;
  text-decoration:none;
  /* `border-style:none` is one of the things WooCommerce's own rule forces on
     this anchor, so the rule needs the flag exactly like the colours above.
     Without it the underline is simply never drawn -- which is how the product
     page went without one until 2026-08-28, unnoticed because the active
     lettering changed colour and that read as enough. */
  border-bottom:3px solid transparent !important;
}
.woocommerce-tabs ul.tabs li a:hover{
  color:var(--wp--preset--color--copper) !important;
}
/* Green lettering, copper rule -- the same active state as the Services and
   shop bars. Thanh's call, 2026-08-28: the product page used to be the one
   bar with copper lettering, and matching the other two beat keeping it.
   These tabs are WooCommerce's own markup, so the rule is a border here and
   does not slide; the look matches, the motion does not. */
.woocommerce-tabs ul.tabs li.active a{
  color:var(--wp--preset--color--green) !important;
  border-bottom-color:var(--wp--preset--color--copper) !important;
}

.woocommerce-Tabs-panel{
  max-width:68ch;
  margin:0;
  /* No size here on purpose: the panels take the page's 18px body size, so a
     tab reads like the rest of the site. The one exception is set below. */
}
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li{ line-height:1.7; }
.woocommerce-Tabs-panel > :first-child{ margin-top:0; }

/* An ingredient list is a wall of Latin, and so is an allergen list. This is
   the one panel that drops below the page's body size — at 18px these run to
   a dozen lines of unbroken chemical names. Everything else in the tabs stays
   at the site's normal size. */
.sonder-ingredients{ font-size:0.95rem; }
.sonder-ingredients h3{
  color:var(--wp--preset--color--copper);
  font-size:1rem;
  font-weight:500;
  margin:1.5rem 0 0.5rem;
}
.sonder-allergens{
  border-left:2px solid var(--wp--preset--color--copper);
  padding:0.25rem 0 0.25rem 1rem;
  margin:0;
}
.sonder-patch-test{
  color:var(--wp--preset--color--muted);
  font-size:0.9rem;
  margin-top:1.5rem;
}

/* 6. Bold text.

   Body copy is DM Sans 300. Nothing styled `strong`, so the browser's own
   `bolder` resolved against a 300 parent and landed on 400 — the normal
   weight. Every bold word on the site was rendering as ordinary text. */
strong, b{ font-weight:600; }

/* 7. The hole in the middle of the product page.

   The buy column runs out after five short lines while the photo carries on
   for another 230 pixels, and on an out-of-stock product there is not even an
   Add to Cart button. The result was a pocket of empty cream in the middle of
   the page.

   Two moves: give the image column less of the width so the photo is naturally
   shorter, and cap its height. The `paper` panel behind it is the other half —
   GlyMed shoots on a pale grey backdrop, so an unframed photo reads as pasted
   onto the cream. Inside a warm panel it reads as placed. */
/* Scoped to `main` on purpose. `.single-product` sits on the body, so an
   unscoped `.wp-block-columns` rule also grabs the footer's four columns and
   squashes three of them. That happened on 2026-08-22. */
.single-product main .wp-block-columns > .wp-block-column:first-child{
  flex-basis:44% !important;
}
/* No frame. The photo sits on the page ground, same as everything else.
   The height cap stays — that is what closed the hole, and it is not the
   part Thanh objected to. */
.single-product .wp-block-woocommerce-product-image-gallery{
  background:none;
  border-radius:0;
  padding:0;
}
/* The photo fills its column. GlyMed's files are square 600x600, so at a 44%
   column the rendered height matches the width — about 493px on a desktop —
   and the bottom of the photo lands within a hair of the SKU line beside it.
   No height cap: the column width is the cap. */
.single-product .woocommerce-product-gallery__image img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  margin:0;
}
@media (max-width:781px){
  .single-product main .wp-block-columns > .wp-block-column:first-child{
    flex-basis:100% !important;
  }
}

/* 8. Bands, so the page is not one sheet of cream.

   The page now reads cream -> green -> paper -> cream -> green footer instead
   of a single unbroken colour. Both bands break out of the constrained layout
   with `calc(50% - 50vw)`, which is the only way to reach the window edge from
   inside a `is-layout-constrained` wrapper. `100vw` is deliberately not used:
   it counts the scrollbar and would put a horizontal scrollbar on the page. */
.single-product .wp-block-woocommerce-product-details{
  /* The constrained layout caps every child at the content width and centres
     it with auto margins. Both have to be released before the negative margin
     can reach the window edge. */
  max-width:none !important;
  width:auto !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:max(24px, calc(50vw - 560px));
  padding-right:max(24px, calc(50vw - 560px));
}

/* The paper band the tabs sit on. No border and no corners — this is a change
   of ground, not a box. */
.single-product .wp-block-woocommerce-product-details{
  background:var(--wp--preset--color--paper);
  padding-top:2.5rem;
  padding-bottom:3rem;
}
.single-product .woocommerce-tabs{ margin-top:0; }

/* 9. The price row.

   Bracket the price, the summary and the button between two hairlines, so the
   part of the page you act on is marked off without becoming a card. The price
   itself moves to Forum, which is what every other number on the site uses. */
.single-product .wp-block-woocommerce-product-price{
  font-family:var(--wp--preset--font-family--forum);
  color:var(--wp--preset--color--copper) !important;
  border-top:1px solid var(--wp--preset--color--border);
  padding-top:1.1rem;
  margin-top:0.5rem;
}
.single-product .wp-block-woocommerce-add-to-cart-form{
  border-bottom:1px solid var(--wp--preset--color--border);
  padding-bottom:1.5rem;
  margin-bottom:1.25rem;
}

/* 10. The title was rendering at the theme default (64px) — right for a page
   heading, too loud sitting beside a $00.00 price and an Add to Cart button. */
.single-product h1.wp-block-post-title{
  font-size:clamp(30px, 3.2vw, 42px) !important;
  line-height:1.15;
}

/* 11. In-stock reads as plainly as out-of-stock now (rule 4 above), plus a
   small filled dot so it registers before the words are even read. */
.woocommerce .stock.in-stock{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--wp--preset--color--ink);
  font-weight:600;
}
.woocommerce .stock.in-stock::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--wp--preset--color--green);
  flex:none;
}

/* 12. The quantity box. WooCommerce's own markup is a bare number input —
   the native spinner is invisible on some Chrome builds and, even when it
   shows, reads as a system control next to a custom button. This wraps it
   in the same pill shape as every other input on the site and adds two
   stacked arrows on the right (up over down — Thanh did not want a minus on
   the left and a plus on the right). JS: assets/quantity-stepper.js. */
.sonder-qty-wrap{
  display:flex;
  align-items:stretch;
  border:1px solid var(--wp--preset--color--border);
  border-radius:40px;
  background:var(--wp--preset--color--paper);
  overflow:hidden;
  width:fit-content;
  margin-right:14px;
}
.sonder-qty-wrap .quantity{
  margin:0;
}
.sonder-qty-wrap input.qty{
  width:48px;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:center;
  font-family:inherit;
  font-size:15px;
  padding:0 0 0 16px;
}
.sonder-qty-wrap input.qty::-webkit-inner-spin-button,
.sonder-qty-wrap input.qty::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.sonder-qty-arrows{
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--wp--preset--color--border);
}
.sonder-qty-arrows button{
  width:30px;
  height:22px;
  border:0;
  background:none;
  font-family:inherit;
  font-size:8px;
  line-height:1;
  color:var(--wp--preset--color--ink);
  cursor:pointer;
}
.sonder-qty-arrows button:hover,
.sonder-qty-arrows button:focus-visible{
  color:var(--wp--preset--color--copper);
}
.sonder-qty-up{
  border-bottom:1px solid var(--wp--preset--color--border);
}

@media (max-width:781px){
  .single-product .wp-block-woocommerce-product-details{
    padding-left:24px;
    padding-right:24px;
  }
}

/* 10. The shop page opening.

   Same shape as every other page: copper eyebrow, Forum headline, a short
   paragraph or two.

   The spacing is not eyeballed — it reproduces what a constrained block group
   does on the other pages, because `.sonder-shop-intro` is a plain div and so
   gets none of it for free:

     - the group's own padding is the `60` preset, top and bottom;
     - every child is separated by one block gap (1.2rem);
     - the first child has no top margin, which is the rule that was missing —
       without it the eyebrow sat 12px lower than on every other page;
     - body paragraphs run the full content width, as they do on About.

   Measured against /about/: eyebrow top 254, h1 top 293. Identical. */
.sonder-shop-intro{
  padding-top:var(--wp--preset--spacing--60);
  padding-bottom:var(--wp--preset--spacing--60);
}
.sonder-shop-intro > *{
  margin-top:var(--wp--style--block-gap, 1.2rem);
}
.sonder-shop-intro > :first-child{ margin-top:0; }

/* 11. Links on a green ground.

   Links went green on 2026-08-22, which is right on the cream page and
   invisible on a green band — green on green is 1:1. It hid the "policies"
   link in the Book page's "Before you book" section entirely.

   The theme already lightens the eyebrow to #d9a273 on green; links take the
   same colour, which is 6.29:1 there and passes AA.

   Scoped to `main`. The footer's own group carries
   `has-green-background-color` as well, so an unscoped rule repaints every
   footer link and the site title in the footer — that happened on 2026-08-22.
   The footer already paints its links paper and is left alone. */
main .wp-block-group.has-green-background-color a:where(:not(.wp-element-button)){
  color:#d9a273;
}
main .wp-block-group.has-green-background-color a:where(:not(.wp-element-button)):hover{
  color:var(--wp--preset--color--paper);
}

/* 12. The Book page's empty stretch.

   Amelia ships `.amelia-v2-booking #amelia-container.am-fs__wrapper
   { margin-top:100px }` in its own stylesheet — spacing meant for a page that
   is nothing but the widget. On top of the section padding above and below the
   join, it left roughly 295px of empty cream between "Choose a treatment and a
   time below" and the widget that the sentence points at.

   The 100px goes, and the booking group drops its own top padding: the group
   above it already supplies the gap, and the two of them are one section, not
   two. */
.amelia-v2-booking #amelia-container.am-fs__wrapper{
  margin-top:0 !important;
}
.wp-block-group:has(> .amelia-v2-booking){
  padding-top:0 !important;
}

/* The supplier's own note about its ingredient list — quieter than the list,
   louder than nothing. Sits directly under it. */
.sonder-ingredient-note{
  color:var(--wp--preset--color--muted);
  font-size:0.85rem;
  line-height:1.6;
  margin-top:1rem;
}

/* How to use, and Key ingredients. Same measure as the other panels; the key
   ingredient notes are long, so give the list a little room. */
.sonder-howto p,
.sonder-key-ingredients p{ line-height:1.7; }
.sonder-key-ingredients ul{
  margin:0 0 1rem;
  padding-left:1.1rem;
}
.sonder-key-ingredients li{ line-height:1.7; margin-bottom:0.4rem; }

/* 13. The shop filter bar.

   Deliberately the same control as the Services section bar: a row of pills on
   a wide screen, one pill plus a hamburger on a phone, centred. Two bars that
   look and behave alike, on the two pages that need one.

   Unlike the Services bar these are links to real archives, so paging through
   85 GlyMed products keeps the filter. */
/* The endless-scroll status line, in place of the numbered pagination. It is
   usually empty — it only speaks while loading, at the end, or on a failure. */
.sonder-shop-more{
  margin:2rem 0 0;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
  min-height:1.2em;
}
.sonder-shop-more.is-error{ color:var(--wp--preset--color--copper); }

/* The brand blurb between a brand's title and the filter bar. Sized down from
   body copy so it reads as a standfirst, not as the start of the page. */
.sonder-brand-blurb{
  max-width:60ch;
  /* The archive title block carries no bottom margin, so without this the
     blurb sits flush against the brand name. */
  margin:0.75rem 0 1.5rem;
}
.sonder-brand-blurb p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--wp--preset--color--muted);
}
@media(max-width:781px){
  .sonder-brand-blurb p{ font-size:15px; }
}

.sonder-shop-filter{
  /* The Services bar's own lighter paper strip, edge to edge, so the two read
     as the same control. Deliberately NOT sticky here — Thanh's call. */
  background:var(--wp--preset--color--paper);
  border-bottom:1px solid var(--wp--preset--color--border);
  /* The top margin is not decoration. An archive h1 carries no bottom margin
     and its descenders overflow the line box, so a strip flush against it
     slices through the "y" in "Glymed". */
  margin:1.75rem 0 2rem;
}
.sonder-shop-filter__inner{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:10px 16px;
}

.sonder-shop-filter__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.sonder-shop-filter__link{
  flex:0 0 auto;
  white-space:nowrap;
  background:transparent;
  /* Matched to .sonder-menu-tabs__tab: no resting outline, so only the filter
     you are on is drawn and the rest sit plainly on the paper. */
  border:1px solid transparent;
  border-radius:40px;
  padding:10px 20px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted) !important;
  text-decoration:none !important;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.sonder-shop-filter__link:hover{
  color:var(--wp--preset--color--green) !important;
}
/* The same treatment as the Services tab: green lettering, copper rule, no
   fill. The fill is what could never be cleared here -- WooCommerce's cascade
   kept winning, and forcing it turned the active lettering grey on green.
   Tried and reverted 2026-08-26; see memory.md. A rule that sits below the
   text has nothing to fight over. */
.sonder-shop-filter__link{ position:relative; }
.sonder-shop-filter__link::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
}
.sonder-shop-filter__link.is-active{
  color:var(--wp--preset--color--green) !important;
}
.sonder-shop-filter__link.is-active::after{
  background:var(--wp--preset--color--copper);
}
.sonder-shop-filter__link:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}

/* Same as the Services bar: the mouse-click ring is dropped site-wide at the
   top of this file, so this bar needs nothing of its own. */

/* The phone control does not exist above 781px. */
.sonder-shop-filter__toggle,
.sonder-shop-filter__list{ display:none; }

@media(max-width:781px){
  .sonder-shop-filter__row{ display:none; }
  .sonder-shop-filter__inner{
    display:flex;
    justify-content:center;
    /* Same as .sonder-menu-tabs__inner on a phone. */
    padding:8px 12px;
  }
  .sonder-shop-filter__toggle{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:100%;
    cursor:pointer;
    background:var(--wp--preset--color--green);
    border:1px solid var(--wp--preset--color--green);
    border-radius:40px;
    padding:9px 16px 9px 20px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wp--preset--color--paper);
    transition:background .18s ease, border-color .18s ease;
  }
  .sonder-shop-filter__toggle:hover{
    background:var(--wp--preset--color--green-2);
    border-color:var(--wp--preset--color--green-2);
  }
  .sonder-shop-filter__toggle:focus-visible{
    outline:2px solid var(--wp--preset--color--copper);
    outline-offset:2px;
  }
  .sonder-shop-filter__current{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sonder-shop-filter__bars{
    flex:0 0 auto;
    display:block;
    position:relative;
    width:16px;
    height:12px;
  }
  .sonder-shop-filter__bars span{
    position:absolute;
    left:0;
    width:16px;
    height:1.5px;
    background:currentColor;
    transition:transform .2s ease, opacity .2s ease;
  }
  .sonder-shop-filter__bars span:nth-child(1){ top:0; }
  .sonder-shop-filter__bars span:nth-child(2){ top:5px; }
  .sonder-shop-filter__bars span:nth-child(3){ top:10px; }
  .sonder-shop-filter.is-open .sonder-shop-filter__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  .sonder-shop-filter.is-open .sonder-shop-filter__bars span:nth-child(2){ opacity:0; }
  .sonder-shop-filter.is-open .sonder-shop-filter__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

  .sonder-shop-filter__list{
    display:block;
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    z-index:30;
    width:min(320px, calc(100vw - 24px));
    margin:0;
    padding:6px;
    list-style:none;
    background:var(--wp--preset--color--paper);
    border:1px solid var(--wp--preset--color--border);
    border-radius:10px;
    box-shadow:0 10px 28px rgba(31,47,34,.10);
  }
  .sonder-shop-filter__list[hidden]{ display:none; }
  .sonder-shop-filter__list li{ margin:0; }
  .sonder-shop-filter__choice{
    display:block;
    /* These choices are <a> links, not the <button>s the Services bar uses, so
       they never got WordPress's border-box reset. Without this, width:100%
       plus the 14px side padding runs 28px wider than the panel and the
       current item's copper outline hangs out of the right edge. */
    box-sizing:border-box;
    width:100%;
    text-align:center;
    border-radius:6px;
    padding:11px 14px;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wp--preset--color--green) !important;
    text-decoration:none !important;
    transition:background .15s ease, color .15s ease;
  }
  .sonder-shop-filter__choice:hover{
    background:var(--wp--preset--color--cream);
    color:var(--wp--preset--color--copper) !important;
  }
  .sonder-shop-filter__choice.is-current{ color:var(--wp--preset--color--copper) !important; }
  .sonder-shop-filter__choice:focus-visible{
    outline:2px solid var(--wp--preset--color--copper);
    outline-offset:-2px;
  }
}

/* 7. Card sections — the "what we offer" tiles and the testimonial cards.
   Both are plain wp-block-columns; the card look is opt-in per column
   through these two wrapper classes so no other columns block is affected. */
.sonder-card-row .wp-block-column{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-radius:14px;
  padding:28px 24px;
}

/* Testimonial quotes lose the default left-rule and margin once they are
   sitting inside their own card. */
.sonder-card-row .wp-block-quote{
  border-left:none;
  padding-left:0;
  margin:0;
}

/* The rating line under the testimonials title — small and copper, not a
   full eyebrow, so it reads as a data point rather than a section label. */
.sonder-rating{
  font-size:14px;
  color:var(--wp--preset--color--copper);
  font-weight:500;
  letter-spacing:.06em;
}

/* "More reviews on Google" under the testimonials (2026-09-27). The outline
   button's 35px side padding wrapped its label onto two lines at 390. */
@media(max-width:600px){
  .sonder-reviews-more .wp-block-button__link{padding-left:20px;padding-right:20px;white-space:nowrap;}
}

/* The hero photo — rounded, hairline border, a soft shadow that lifts it off
   the cream background without a hard edge. */
.sonder-hero-photo img{
  border-radius:18px;
  border:1px solid var(--wp--preset--color--border);
  box-shadow:0 40px 80px -40px rgba(31,47,34,.45);
}

/* The "what we offer" tile headings were rendering at the theme's default
   32px, which is too large for a 238px-wide card — "Microchanneling" had no
   room and the theme's default break-word split it mid-word. Matched to the
   approved mockup (26px) and told to wrap on whole words only, like the
   rest of the card copy, so a long word overflows gracefully instead of
   splitting mid-word. */
.sonder-card-row h3{
  font-size:26px;
  font-weight:400;
  line-height:1.15;
  margin:12px 0 8px;
  color:var(--wp--preset--color--green);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* The "01 / 02 / 03 / 04" tag above each offer tile's title — from the
   approved mockup. Same accessible copper as .sonder-eyebrow (#885220, not
   the raw brand copper — see that rule for the contrast numbers). */
.sonder-card-row .sonder-card-num{
  font-size:13px;
  letter-spacing:.18em;
  color:#885220;
  font-weight:500;
}

/* The offer tile's description paragraph, matched to the mockup. Scoped to
   a direct child so it never touches the testimonial quote text, which
   sits one level deeper inside a blockquote — and excludes the number tag
   above, which is also a direct-child <p> but needs to stay copper. */
.sonder-card-row > .wp-block-column > p:not(.sonder-card-num){
  font-size:16px;
  color:var(--wp--preset--color--muted);
}

/* Testimonial attribution, matched to the mockup — name in green, the
   "· Google Review" tag muted, normal case (overriding the site-wide
   uppercase quote-citation style, scoped to card testimonials only so a
   plain pull-quote elsewhere on the site is untouched). */
.sonder-card-row cite{
  text-transform:none;
  letter-spacing:normal;
  font-size:14px;
  font-weight:500;
  color:var(--wp--preset--color--green);
}
.sonder-card-row cite .sonder-testimonial-source{
  font-weight:400;
  color:var(--wp--preset--color--muted);
}

/* "Your skin deserves the real thing" checklist, matched to the mockup —
   a copper filled circle with a checkmark in place of the default bullet. */
.sonder-checklist{
  list-style:none;
  display:grid;
  gap:16px;
  margin:0;
  padding:0;
}
.sonder-checklist li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:16px;
  color:var(--wp--preset--color--ink);
  padding-left:0;
}
.sonder-checklist li::before{
  content:"✓";
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--wp--preset--color--copper);
  color:var(--wp--preset--color--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  margin-top:2px;
}

/* Kim's About-page portrait — matched to the mockup: fills its column,
   cropped rather than letterboxed, softer corners than the homepage hero
   photo since this one sits full-bleed inside its column, no border frame
   floating around it. */
.sonder-portrait-photo{
  border-radius:14px;
  border:1px solid var(--wp--preset--color--border);
  overflow:hidden;
}
.sonder-portrait-photo img{
  width:100%;
  height:100%;
  min-height:460px;
  object-fit:cover;
  display:block;
}

/* "Our standards" — five cards in one row instead of the offer tiles' four,
   so each card is narrower. Smaller padding and type than .sonder-card-row's
   base size, without touching the homepage offer tiles, which only carry
   .sonder-card-row. Compound selectors here always outrank the base rule's
   single-class one, so source order doesn't matter. */
.sonder-card-row.sonder-standards-row .wp-block-column{
  padding:20px 18px;
}
.sonder-card-row.sonder-standards-row h3{
  font-size:20px;
}
.sonder-card-row.sonder-standards-row > .wp-block-column > p{
  font-size:15px;
}

/* Policies list — copper numbered tag and a hairline rule between each
   item, matched to the mockup. */
.sonder-policy-list{
  list-style:none;
  counter-reset:sonder-policy;
  margin:0;
  padding:0;
}
.sonder-policy-list li{
  counter-increment:sonder-policy;
  display:flex;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-policy-list li::before{
  content:counter(sonder-policy,decimal-leading-zero);
  flex:0 0 auto;
  font-size:13px;
  letter-spacing:.1em;
  color:#885220;
  font-weight:500;
  padding-top:6px;
}
/* Title and description share one flex item, stacked, so the title runs
   the full width instead of sitting in a narrow left column next to the
   description — the layout it had before this fix. */
.sonder-policy-body{
  flex:1 1 auto;
  min-width:0;
}
.sonder-policy-title{
  display:block;
  font-weight:500;
  font-size:18px;
  color:var(--wp--preset--color--green);
  margin-bottom:4px;
}
.sonder-policy-desc{
  color:var(--wp--preset--color--muted);
  font-size:16px;
}

/* Shop grid — each product gets the same card look as the homepage offer
   tiles: border, soft corners, a lift on hover. Approved 2026-08-29,
   matching the mockup's shop.html preview.

   Two-tone card, refined the same day: the photo runs edge to edge with no
   inset, `overflow:hidden` clips it to the card's own top corners instead of
   the image having its own radius, and only the text block below gets
   padding — which is what makes the paper-coloured strip under the photo
   read as its own band. */
.wc-block-product-template .wc-block-product{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-radius:14px;
  overflow:hidden;
  padding:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wc-block-product-template .wc-block-product:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px -24px rgba(31,47,34,.4);
}
.wc-block-product-template .wc-block-product .wc-block-components-product-image{
  margin:0;
}
.wc-block-product-template .wc-block-product .wc-block-components-product-image img{
  display:block;
  width:100%;
  border-radius:0;
}
.wc-block-product-template .wc-block-product .wp-block-post-title{
  margin:16px 16px 0;
  text-align:left;
  font-family:var(--wp--preset--font-family--forum);
  font-size:25px;
  letter-spacing:.01em;
}
/* Bold read as chunky — Forum has no real bold weight, so it was a faked
   one. Traded for size and a touch of letter-spacing instead, which reads
   as more legible without the synthetic-bold look. !important still needed:
   the visible text is the <a> inside the H2, and WooCommerce/the parent
   theme sets its own weight on that link with enough specificity to beat a
   plain `.wp-block-post-title` rule. */
.wc-block-product-template .wc-block-product .wp-block-post-title a{
  font-weight:400 !important;
}
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price{
  margin:8px 16px 0;
  text-align:left;
  color:var(--wp--preset--color--copper);
}
/* Same reasoning as the title, and the same specificity issue: the rendered
   amount is nested spans WooCommerce styles directly. */
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price .woocommerce-Price-amount{
  font-weight:400 !important;
  font-size:17px !important;
  letter-spacing:.02em;
}
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button{
  margin:14px 16px 16px;
}
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link{
  display:block;
  width:100%;
  text-align:center;
}

/* The single product photo — a bordered card, matching the shop grid and
   the mockup. Thanh asked for this back in 2026-08-29 after previously
   having it removed (see the "no frame" note above) because padding around
   a non-square photo left a gap of background showing through — the "hole".
   No padding here, only a border and clipped corners, so the photo still
   fills the box edge to edge and that gap can't reopen. */
.single-product .wp-block-woocommerce-product-image-gallery{
  border:1px solid var(--wp--preset--color--border);
  border-radius:14px;
  overflow:hidden;
}

/* The cream seam between the CTA band and the footer.

   WordPress gives every top-level block a block-gap top margin
   (`:where(.wp-site-blocks) > * { margin-block: 1.2rem 0 }`), and the footer
   template part is one of them. Everywhere else the block above is cream, so
   the 19.2px is invisible. On Home the block above is the green "Book when it
   suits you" band, and the gap drew a cream stripe between two greens.

   Found 2026-09-03. An empty paragraph left at the end of the Home page was
   masking this — it was removed first, which only moved the same 19.2px onto
   the footer's own margin. Both had to go. */
footer.wp-block-template-part{ margin-block-start:0; }

/* ------------------------------------------------------------------
   Services: the Skin treatments split, and a line between services.
   Added 2026-09-17 for Kim's change, approved by Thanh in the mockup first.

   Inside Skin treatments a second row picks between two groups:
   Personalized treatments and Restoration & relaxation. The two buttons
   are pills like the outline Book buttons; the picked one is filled green.
   assets/menu-tabs.js shows the row and hides the group not picked. With
   JavaScript off the row stays hidden and both groups show, like the
   sections do.

   Every service now ends in a light rule, 40px each side, and so does each
   group's opening line. Before this the services were separated by space
   only; the mockup had the rules and Thanh chose the mockup's look.
   ------------------------------------------------------------------ */
.sonder-sub-switch{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block:8px 28px;
}
.sonder-sub-switch[hidden]{ display:none; }
.sonder-sub-switch__btn{
  font-family:var(--wp--preset--font-family--dm-sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:15px 35px;
  border-radius:40px;
  border:1px solid var(--wp--preset--color--ink);
  background:transparent;
  color:var(--wp--preset--color--ink);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sonder-sub-switch__btn.is-active,
.sonder-sub-switch__btn:hover{
  background:var(--wp--preset--color--green);
  border-color:var(--wp--preset--color--green);
  color:var(--wp--preset--color--cream);
}
.sonder-sub-switch__btn:focus-visible{
  outline:2px solid var(--wp--preset--color--copper);
  outline-offset:2px;
}
/* The same copper shine as every other button, section 5c. */
.sonder-motion .sonder-sub-switch__btn{
  position:relative;
  overflow:hidden;
}
.sonder-motion .sonder-sub-switch__btn::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(217,162,115,0) 35%, rgba(217,162,115,.30) 50%, rgba(217,162,115,0) 65%);
  transform:translateX(-110%);
}
.sonder-motion .sonder-sub-switch__btn:hover::after,
.sonder-motion .sonder-sub-switch__btn:focus-visible::after{
  transform:translateX(110%);
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .sonder-motion .sonder-sub-switch__btn::after{ display:none; }
}

.sonder-sub-pane[hidden]{ display:none!important; }

/* The group's opening line: body size, muted, and a rule under it. */
.sonder-menu-section .sonder-sub-intro{
  color:var(--wp--preset--color--muted);
  padding-bottom:40px;
  margin-bottom:40px;
  border-bottom:1px solid var(--wp--preset--color--border);
}

/* The rule under each service. Each service ends in its Book button block,
   whose 56px bottom margin is set inline by the editor, hence !important.
   The last service in a group or section draws no rule. */
.sonder-menu-section .wp-block-buttons{
  padding-bottom:40px;
  margin-bottom:40px!important;
  border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-menu-section .wp-block-buttons:last-child{
  padding-bottom:0;
  margin-bottom:0!important;
  border-bottom:0;
}


/* ====================================================================
   CART, CHECKOUT AND ORDER RECEIVED — the V2 design, 2026-09-23
   ====================================================================

   From mockup/cart-v2.html, checkout-v2.html and thank-you-v2.html (the
   mockup's v2- and v3- rules). The cart and checkout are WooCommerce's own
   React blocks, so everything here aims at their `.wc-block-*` classes; the
   words are in assets/checkout-blocks.js and the data in inc/checkout.php.
   The order-received page is our own markup ([sonder_order_received]).

   Blocks put layout classes on the sidebar container by its own width —
   `is-large` is the two-column case — so the sticky summary keys off that
   rather than a viewport breakpoint. */

/* The same room above the eyebrow as the contact and about pages: their
   first section carries the "Section" spacing (88px) as top padding, which
   put the eyebrow 107px under the header against these pages' 19px —
   measured 2026-09-23 at 1440px. */
.sonder-cart-page,
.sonder-checkout-page,
.sonder-received-page{ padding-top:var(--wp--preset--spacing--60); }
/* Nothing more on top of that: on cart and checkout the block gap after
   WooCommerce's (usually empty) notices box added 19px, and on the order
   page a paragraph's default 12px — 126 and 119 against the contact page's
   107. */
.sonder-cart-page > .sonder-eyebrow,
.sonder-checkout-page > .sonder-eyebrow,
.sonder-received > .sonder-eyebrow:first-child{ margin-top:0; }

.sonder-cart-page h1,
.sonder-checkout-page h1{ margin-bottom:40px; }

/* The marketing tick box (plugin 0.8.0) under the email field. WooCommerce
   draws its label 20px tall; the whole row is the tap target, so give it the
   house 44px. */
.wc-block-components-address-form__sonder-marketing-optin label{
  min-height:44px; display:flex; align-items:center;
}
/* The eyebrow over each of the three headings, as on every other page:
   the cart counts what is in it, the checkout's is the way back to the cart,
   the order-received page says what was paid. The link keeps the eyebrow's
   copper; the underline is what says it is a link. */
.sonder-crumb a{ color:inherit;text-underline-offset:3px; }
.sonder-crumb a:hover{ color:var(--wp--preset--color--green); }

/* Two columns, summary on the right, and the summary travels with the page. */
.sonder-cart-page .wc-block-components-sidebar-layout.is-large,
.sonder-checkout-page .wc-block-components-sidebar-layout.is-large{
  align-items:flex-start;gap:64px;flex-wrap:nowrap;
}
.sonder-cart-page .is-large .wc-block-components-main,
.sonder-checkout-page .is-large .wc-block-components-main{
  flex:1 1 auto;width:auto;padding-right:0;
}
.sonder-cart-page .is-large .wc-block-components-sidebar{
  flex:0 0 348px;width:348px;padding:28px 26px;
  position:sticky;top:104px;
}
.sonder-checkout-page .is-large .wc-block-components-sidebar{
  flex:0 0 380px;width:380px;padding-left:0;
  position:sticky;top:104px;
}

/* ---- Cart ------------------------------------------------------------ */

/* The table's column headings add nothing to three lines. */
.sonder-cart-page .wc-block-cart-items__header{ display:none; }

/* Each line is a grid: photo, name and controls, price. Top-aligned — centred
   floated the price away from the name it belongs to. */
.sonder-cart-page .wc-block-cart-items,
.sonder-cart-page .wc-block-cart-items tbody{ display:block; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row:last-child{ border-bottom:none; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row > td{
  display:block;padding:0;border:0;grid-row:1;
}
/* WooCommerce places the cells itself (product across two columns, the
   quantity on a second row); pin each one to ours. */
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{ grid-column:1; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{ grid-column:2; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{ grid-column:3; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__product{ grid-column:1; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__total{ grid-column:2; }

/* Paper tile. The GlyMed shots carry their own white-grey backdrop; multiply
   lets it fall away into the tile without bringing in white, which is not in
   the brand. */
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a{
  display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;padding:8px;box-sizing:border-box;
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:10px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img{
  max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;
}

.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
  font-family:var(--wp--preset--font-family--forum);font-size:21px;line-height:1.2;
  color:var(--wp--preset--color--green);text-decoration:none;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:hover{ color:var(--wp--preset--color--copper); }

/* Thanh, 2026-09-23: no product description and no unit price under the name. */
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata__description{ display:none; }

/* The brand, as on the product page — a line of item data whose label hides. */
.wc-block-components-product-details__brand{
  font-size:14px;color:var(--wp--preset--color--muted);margin-top:3px;
}
.wc-block-components-product-details__brand .wc-block-components-product-details__name{ display:none; }
.wc-block-components-product-details{ list-style:none;margin:0;padding:0; }

.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
  display:flex;align-items:center;gap:16px;margin-top:12px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:2px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector::after{ border:0; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link{ color:var(--wp--preset--color--muted); }

.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{
  font-size:18px;color:var(--wp--preset--color--ink);text-align:right;margin-top:2px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge{ display:none; }

/* The appointment. It is a held time, not a thing in a box, so it is its own
   card: copper on the leading edge, no photo, the price split laid out as
   labelled figures. The line's own price is the deposit, so it is labelled
   "Deposit today" and is the one figure in green. */
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking{
  grid-template-columns:1fr auto;
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-left:3px solid var(--wp--preset--color--copper);
  border-radius:12px;padding:26px 28px;margin-bottom:36px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__image{ display:none; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__product::before{
  content:"Appointment";display:block;margin-bottom:8px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#885220;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-components-product-name{ font-size:28px;line-height:1.15; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__total{ text-align:right; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__total::before{
  content:"Deposit today";display:block;margin-bottom:5px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted);
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__total .wc-block-components-product-price{
  font-size:19px;color:var(--wp--preset--color--green);font-weight:500;
}
/* Cart only — the checkout summary lays the same lines out its own way.
   The Appointment and Deposit rows are the checkout's; the cart hides them,
   and the " / " spans WooCommerce puts between rows. */
.sonder-cart-page .is-sonder-booking :is(
  .wc-block-components-product-details__appointment,
  .wc-block-components-product-details__deposit
),
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details > * > span:not(.wc-block-components-product-details__name):not(.wc-block-components-product-details__value){ display:none; }

/* The appointment card first, above the products, as on the mockup. Seen
   2026-09-23 with a real booking: WooCommerce lists it last. */
.sonder-cart-page table.wc-block-cart-items tbody{ display:flex;flex-direction:column; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking{ order:-1; }

/* "With Kim", and the figure labels without WooCommerce's colon: the label
   element hides and the words come from here. One full-width rule above the
   figures, drawn under the "With" line, not a short one over each figure. */
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__with .wc-block-components-product-details__value::before{ content:"With "; }
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__with{
  padding-bottom:20px;border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details{
  display:flex;flex-wrap:wrap;column-gap:28px;margin-top:10px;
}
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__when,
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__with{ flex:0 0 100%; }
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__when{ font-size:17px;color:var(--wp--preset--color--ink); }
.sonder-cart-page .is-sonder-booking .wc-block-components-product-details__with{ font-size:15px;color:var(--wp--preset--color--muted);margin-top:4px; }
.is-sonder-booking .wc-block-components-product-details__when .wc-block-components-product-details__name,
.is-sonder-booking .wc-block-components-product-details__with .wc-block-components-product-details__name{ display:none; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-components-product-details__service-price{
  margin-top:20px;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-components-product-details__due-in-the-studio{
  margin-top:20px;flex:1 1 auto;
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking :is(.wc-block-components-product-details__service-price,.wc-block-components-product-details__due-in-the-studio) .wc-block-components-product-details__name{ display:none; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking :is(.wc-block-components-product-details__service-price,.wc-block-components-product-details__due-in-the-studio)::before{
  display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted);
}
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-components-product-details__service-price::before{ content:"Service price"; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-components-product-details__due-in-the-studio::before{ content:"Due in the studio"; }
.sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking :is(.wc-block-components-product-details__service-price,.wc-block-components-product-details__due-in-the-studio) .wc-block-components-product-details__value{
  display:block;font-size:19px;color:var(--wp--preset--color--ink);margin-top:5px;
}

/* The summary card. */
.sonder-cart-page .wc-block-cart__sidebar{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:14px;
  padding:28px 26px;box-sizing:border-box;
}
.sonder-cart-page .wc-block-cart__totals-title{
  font-family:var(--wp--preset--font-family--forum);font-size:23px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--wp--preset--color--green);
  padding:0;margin:0 0 8px;text-align:left;
}
.sonder-cart-page .wc-block-components-totals-wrapper{
  border-color:var(--wp--preset--color--border);padding-left:0;padding-right:0;
}

/* The summary's order, as on the mockup: heading, deposit, products, sales
   tax, then a rule and "Pay today". The deposit and products lines are drawn
   by assets/checkout-blocks.js in WooCommerce's order-meta slot, which sits
   at the foot of the summary; `display:contents` on the wrappers between
   lets each piece take its own place in one column, and `order` sets it.
   The due-in-studio note stays last, under the button. */
.sonder-cart-page .wc-block-cart__sidebar{ display:flex;flex-direction:column; }
.sonder-cart-page .wc-block-cart__sidebar :is(
  .wp-block-woocommerce-cart-order-summary-block,
  .wp-block-woocommerce-cart-order-summary-totals-block,
  .wc-block-components-totals-wrapper.slot-wrapper,
  .wc-block-components-order-meta
){ display:contents; }
.sonder-cart-page .wc-block-cart__totals-title{ order:1; }
.sonder-cart-page .wc-block-cart__sidebar .sonder-sum-lines{ order:2;padding:6px 0 0; }
.sonder-cart-page .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-taxes-block{ order:3;border-top:0;padding:0; }
/* An empty description line under the tax, which WooCommerce wraps onto a
   row of its own. */
.sonder-cart-page .wp-block-woocommerce-cart-order-summary-taxes-block .wc-block-components-totals-item__description:empty{ display:none; }
/* Thanh, 2026-09-23: one line only in the summary, between the tax and "Pay
   today". Every other rule WooCommerce draws here — under the heading,
   between the totals wrappers, as pseudo-elements — is taken out, and so is
   the rule above the due-in-studio note. */
.sonder-cart-page .wc-block-cart__sidebar :is(
  .wc-block-cart__totals-title,
  .wp-block-woocommerce-cart-order-summary-block,
  .wp-block-woocommerce-cart-order-summary-totals-block,
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item,
  .sonder-due-note
){ border:0!important;box-shadow:none; }
.sonder-cart-page .wc-block-cart__sidebar :is(
  .wc-block-cart__totals-title,
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item
)::before,
.sonder-cart-page .wc-block-cart__sidebar :is(
  .wc-block-cart__totals-title,
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item
)::after{ display:none; }
.sonder-cart-page .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item){
  order:4;border-top:1px solid var(--wp--preset--color--border)!important;
  margin-top:10px;padding:16px 0 6px;
}
.sonder-cart-page .wc-block-cart__payment-options{ order:5; }
.sonder-cart-page .wc-block-cart__submit{ order:6; }
.sonder-cart-page .sonder-due-note{ order:7; }
.sonder-cart-page .sonder-sum-line,
.sonder-cart-page .wp-block-woocommerce-cart-order-summary-taxes-block .wc-block-components-totals-item{
  display:flex;justify-content:space-between;gap:18px;padding:10px 0;
  font-size:16px;color:var(--wp--preset--color--muted);
}
.sonder-cart-page .sonder-sum-line .wc-block-components-totals-item__value{ color:var(--wp--preset--color--ink); }
.sonder-cart-page .wc-block-cart__submit{ margin-top:20px; }
.sonder-cart-page .wc-block-cart__submit-button{ width:100%; }

/* Cross-sells. Quiet on the page cream, not a shouting band. */
.sonder-also{ margin-top:56px; }
.sonder-also > h2{ font-size:28px!important;margin-bottom:24px!important; }
.sonder-also .wc-block-product{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:12px;
  padding:20px;text-align:center;
}
.sonder-also .wc-block-components-product-image{
  height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.sonder-also .wc-block-components-product-image img{
  max-height:132px;width:auto!important;object-fit:contain;mix-blend-mode:multiply;
}
.sonder-also .wp-block-post-title{
  font-family:var(--wp--preset--font-family--forum);font-size:18px!important;line-height:1.25;
}
.sonder-also .wp-block-post-title a{ color:var(--wp--preset--color--green);text-decoration:none; }

/* ---- Totals, cart and checkout alike --------------------------------- */

:is(.sonder-cart-page,.sonder-checkout-page) .wc-block-components-totals-item{
  font-size:16px;color:var(--wp--preset--color--muted);
}
:is(.sonder-cart-page,.sonder-checkout-page) .wc-block-components-totals-item__value{
  color:var(--wp--preset--color--ink);
}
:is(.sonder-cart-page,.sonder-checkout-page) .wc-block-components-totals-footer-item{
  font-size:20px;color:var(--wp--preset--color--green);
}
:is(.sonder-cart-page,.sonder-checkout-page) .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label,.wc-block-components-totals-item__value){
  color:var(--wp--preset--color--green);font-weight:500;font-size:20px;
}

/* What is left to pay in the studio, under the totals. */
.sonder-due-note{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--wp--preset--color--border);
  font-size:14px;color:var(--wp--preset--color--muted);line-height:1.55;
}
.sonder-due-note p{ margin:0 0 10px; }
.sonder-due-note p:last-child{ margin-bottom:0; }
.sonder-due-note b{ color:var(--wp--preset--color--green); }

/* ---- Checkout -------------------------------------------------------- */

/* Numbered stages, so the page has a visible end. WooCommerce draws its
   numbers in a left gutter with a line between; here they are copper discs
   beside the stage title, as on the mockup and the site's `.check .dot`. */
.sonder-checkout-page .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number{
  padding-left:0;margin-bottom:44px;
}
/* WooCommerce's connecting line down the left of each stage. */
.sonder-checkout-page .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before{ display:none; }
.sonder-checkout-page .wc-block-components-checkout-step__heading{ margin-bottom:12px; }
.sonder-checkout-page .wc-block-components-checkout-step__title{
  display:flex;align-items:center;gap:12px;
  font-family:var(--wp--preset--font-family--forum);font-size:24px;font-weight:400;
  color:var(--wp--preset--color--green);text-transform:none;letter-spacing:0;
}
.sonder-checkout-page .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before{
  content:counter(checkout-step) / "";
  position:static;flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--wp--preset--color--copper);color:var(--wp--preset--color--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--wp--preset--font-family--dm-sans);font-size:14px;font-weight:500;line-height:1;
  transform:none;
}

/* Quiet reassurance under each stage title. */
.sonder-checkout-page .wc-block-components-checkout-step__description,
.sonder-quiet{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14px;color:var(--wp--preset--color--muted);line-height:1.55;margin:0 0 18px;
}
/* WooCommerce also draws its stage line with this same pseudo-element, so
   every part of that is undone here. */
.sonder-checkout-page .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before,
.sonder-checkout-page .wc-block-components-checkout-step__description::before{
  content:"•";color:#885220;flex:0 0 auto;
  position:static;border:0;left:auto;bottom:auto;top:auto;
}
.sonder-quiet .m{ color:#885220;flex:0 0 auto; }

/* Fields: paper, hairline, square corners — the site's contact form. */
.sonder-checkout-page .wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.sonder-checkout-page .wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.sonder-checkout-page .wc-blocks-components-select .wc-blocks-components-select__select,
.sonder-checkout-page .wc-block-components-textarea{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:2px;
  color:var(--wp--preset--color--ink);
}
.sonder-checkout-page .wc-block-components-text-input label,
.sonder-checkout-page .wc-blocks-components-select__label{ color:var(--wp--preset--color--muted); }
.sonder-checkout-page .wc-block-components-text-input.is-active input:focus,
.sonder-checkout-page .wc-blocks-components-select__select:focus{
  border-color:var(--wp--preset--color--copper);box-shadow:0 0 0 1px var(--wp--preset--color--copper);
}

/* Square draws the card fields in its own frame; only the box around them
   is ours. */
.sonder-checkout-page .wc-block-components-radio-control-accordion-option,
.sonder-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option{
  background:var(--wp--preset--color--paper);
  border-color:var(--wp--preset--color--border);
}
/* The chosen method is outlined in the text colour by default — a heavy
   dark box. Hairline instead, square corners like the fields. */
.sonder-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:inset 0 0 0 1px var(--wp--preset--color--border);border-radius:2px;
}
.sonder-checkout-page .wc-block-components-radio-control--highlight-checked::after{
  border-color:var(--wp--preset--color--border);border-radius:2px;
}

/* The non-refundable condition keeps the bordered card; it is the louder of
   the two notes above the button. */
.sonder-checkout-notice{ margin:8px 0 22px; }
.sonder-warn{
  background:var(--wp--preset--color--paper);
  border-left:3px solid var(--wp--preset--color--copper);
  padding:14px 18px;margin-top:18px;
  font-size:15px;color:var(--wp--preset--color--muted);line-height:1.55;
}
.sonder-warn b{ color:var(--wp--preset--color--copper); }

.sonder-checkout-page .wc-block-checkout__terms{
  font-size:14px;color:var(--wp--preset--color--muted);border-top:0;padding-top:0;margin-bottom:18px;
}
.sonder-checkout-page .wc-block-checkout__actions_row{ display:block; }
.sonder-checkout-page .wc-block-components-checkout-place-order-button{ width:100%; }

/* The order summary card. */
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:14px;
  padding:10px 24px 14px;
}
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title{
  border-top:0;margin-top:14px;
}
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text{
  font-family:var(--wp--preset--font-family--forum);font-size:23px;font-weight:400;
  color:var(--wp--preset--color--green);margin:0 0 8px;
}
.sonder-checkout-page .wc-block-components-order-summary{ padding-left:0;padding-right:0; }

/* One line in the summary, above "Pay today" — the same as the cart
   (Thanh, 2026-09-23). Every other rule WooCommerce draws here goes. */
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block :is(
  .wc-block-components-checkout-order-summary__title,
  .wc-block-components-order-summary,
  .wp-block-woocommerce-checkout-order-summary-totals-block,
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item,
  .sonder-due-note
){ border:0!important;box-shadow:none; }
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block :is(
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item
)::before,
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block :is(
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item
)::after{ display:none; }
.sonder-checkout-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item){
  border-top:1px solid var(--wp--preset--color--border)!important;
  margin-top:10px;padding:16px 0 6px;
}
.sonder-checkout-page .wc-block-components-order-summary-item{ font-size:15px;align-items:center; }
.sonder-checkout-page .wc-block-components-order-summary-item__image{
  width:44px;height:44px;flex:0 0 44px;box-sizing:border-box;padding:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wp--preset--color--cream);
  border:1px solid var(--wp--preset--color--border);border-radius:8px;
}
.sonder-checkout-page .wc-block-components-order-summary-item__image img{
  max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;
}
.sonder-checkout-page .wc-block-components-order-summary-item__quantity{
  background:var(--wp--preset--color--copper);color:var(--wp--preset--color--paper);border:0;
}
.sonder-checkout-page .wc-block-components-order-summary-item__individual-prices,
.sonder-checkout-page .wc-block-components-order-summary-item .wc-block-components-product-metadata__description{ display:none; }
.sonder-checkout-page .wc-block-components-order-summary-item .wc-block-components-product-name{
  font-size:15px;color:var(--wp--preset--color--ink);
}

/* The appointment in the summary: the cart's copper edge, smaller, and no
   photo, so the one non-product line is recognisable on both pages. */
.sonder-checkout-page .wc-block-components-order-summary-item.is-sonder-booking{
  border-left:3px solid var(--wp--preset--color--copper);padding-left:14px;margin-bottom:10px;
}
.sonder-checkout-page .is-sonder-booking .wc-block-components-order-summary-item__image{ display:none; }
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-name{
  font-family:var(--wp--preset--font-family--forum);font-size:19px;line-height:1.2;
  color:var(--wp--preset--color--green);
}
/* As on the mockup: the appointment first, then two lines under its name —
   "Tuesday 29 September 2026 · 13:15 · with Kim" and "Deposit $31.25 of
   $125.00". inc/checkout.php sends those two as the item-data rows
   Appointment and Deposit; here they show, one per line, and the cart's four
   rows (When, With, Service price, Due in the studio) hide, as do the " / "
   spans WooCommerce puts between rows and the price on the right, which is
   the deposit already in the second line. An earlier version assembled the
   lines from the four rows with flex `order`; it could not wrap as text in
   the 246px column and broke each line in two (2026-09-23). */
.sonder-checkout-page .wc-block-components-order-summary__content{ display:flex;flex-direction:column; }
.sonder-checkout-page .wc-block-components-order-summary-item.is-sonder-booking{ order:-1; }
.sonder-checkout-page .is-sonder-booking :is(
  .wc-block-components-order-summary-item__total-price,
  .wc-block-cart-item__prices,
  .wc-block-components-product-details__when,
  .wc-block-components-product-details__with,
  .wc-block-components-product-details__service-price,
  .wc-block-components-product-details__due-in-the-studio,
  .wc-block-components-product-details__name
),
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-details > span > span:not(.wc-block-components-product-details__name):not(.wc-block-components-product-details__value){ display:none; }
.sonder-checkout-page .is-sonder-booking .wc-block-components-order-summary-item__description{ padding-right:0; }
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-details{ display:block;margin-top:5px; }
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-details__appointment{
  display:block;font-size:14px;line-height:1.45;color:var(--wp--preset--color--muted);
}
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-details__deposit{
  display:block;font-size:15px;line-height:1.45;color:var(--wp--preset--color--ink);margin-top:8px;
}
/* No trailing space: WooCommerce already puts one between the hidden label
   and the value. */
.sonder-checkout-page .is-sonder-booking .wc-block-components-product-details__deposit::before{ content:"Deposit"; }

/* WooCommerce redraws the summary's default blocks if they are taken out of
   the page content (tried 2026-09-23: the whole summary appeared twice), so
   the coupon field and the subtotal are hidden here instead, as on the
   mockup. */
.sonder-checkout-page :is(
  .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
  .wp-block-woocommerce-checkout-order-summary-subtotal-block
){ display:none; }

@media (max-width:600px){
  .sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row{ grid-template-columns:72px 1fr;gap:16px; }
  .sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a{ width:72px;height:72px; }
  .sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{ grid-column:2;grid-row:2;text-align:left;margin-top:0; }
  .sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking{ grid-template-columns:1fr;padding:22px 20px; }
  .sonder-cart-page table.wc-block-cart-items .wc-block-cart-items__row.is-sonder-booking .wc-block-cart-item__total{ grid-column:1;grid-row:2;text-align:left; }
}

/* ---- Order received -------------------------------------------------- */

/* 19px from eyebrow to heading, as measured on the contact, cart and checkout
   pages. This page is our own markup, so the gap is set here — the whole 19,
   because it collapses with the eyebrow's 8px margin rather than adding. */
.sonder-received h1{ margin:0; }
.sonder-received .sonder-eyebrow + h1{ margin-top:19px; }
.sonder-received__lede{ margin:12px 0 40px;color:var(--wp--preset--color--ink); }
.paid-tag{
  display:inline-block;background:var(--wp--preset--color--green);color:var(--wp--preset--color--paper);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.sonder-received__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-bottom:56px;
}

/* Leads with the date, because the date is the fact being confirmed. */
.sonder-when{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-left:3px solid var(--wp--preset--color--copper);border-radius:12px;padding:28px;
}
.sonder-when p{ margin:0; }
.sonder-when .k{ font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#885220;font-weight:500; }
.sonder-when .big{
  font-family:var(--wp--preset--font-family--forum);font-size:34px;line-height:1.15;
  color:var(--wp--preset--color--green);margin-top:10px;
}
.sonder-when .svc{ font-size:18px;color:var(--wp--preset--color--ink);margin-top:10px; }
.sonder-when .loc{ font-size:15px;color:var(--wp--preset--color--muted);margin-top:6px;line-height:1.6; }
.sonder-when .money{
  display:flex;gap:26px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--wp--preset--color--border);
}
.sonder-when .money > div{ min-width:118px; }
.sonder-when .k2{ font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted); }
.sonder-when .v{ font-size:19px;color:var(--wp--preset--color--ink);margin-top:5px; }
.sonder-when .v.paid{ color:var(--wp--preset--color--green);font-weight:500; }
.sonder-when .wp-element-button{ display:inline-block;margin-top:24px;text-decoration:none; }

.sonder-next{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:14px;padding:26px 24px;
}
.sonder-next h3{ font-size:22px;margin:0 0 16px; }
.sonder-next .checks{ display:grid;gap:16px; }
.sonder-next .check{ display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--wp--preset--color--ink); }
.sonder-next .check .dot{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;margin-top:2px;
  background:var(--wp--preset--color--copper);color:var(--wp--preset--color--paper);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.sonder-next__call{ margin-top:22px;font-size:15px;color:var(--wp--preset--color--muted);line-height:1.6; }
.sonder-next__call b{ color:var(--wp--preset--color--green); }
.sonder-next .wp-element-button{ display:inline-block;margin-top:22px;text-decoration:none; }
.wp-element-button.is-ghost{
  background:transparent;color:var(--wp--preset--color--green);
  box-shadow:inset 0 0 0 1px var(--wp--preset--color--green);
}
.wp-element-button.is-ghost:hover{ background:var(--wp--preset--color--green);color:var(--wp--preset--color--paper); }

.sonder-receipt{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:12px;padding:26px 28px;
}
.sonder-receipt h2{ font-size:26px;margin:0 0 3px; }
.sonder-receipt .ref{ font-size:14px;color:var(--wp--preset--color--muted);margin:0 0 20px; }
.sonder-line{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-line:has(+ .sonder-row){ border-bottom:none; }
.sonder-line h3{ font-size:21px;margin:0; }
.sonder-line .brand{ font-size:14px;color:var(--wp--preset--color--muted);margin:3px 0 0; }
.sonder-line .price{ font-size:18px;color:var(--wp--preset--color--ink);white-space:nowrap;margin-top:2px; }
.sonder-thumb{
  width:96px;height:96px;box-sizing:border-box;padding:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:10px;
}
.sonder-thumb img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply; }
.sonder-row{
  display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  font-size:15px;color:var(--wp--preset--color--muted);
}
.sonder-row .v{ color:var(--wp--preset--color--ink); }
.sonder-line + .sonder-row{ border-top:1px solid var(--wp--preset--color--border);padding-top:14px;margin-top:6px; }
.sonder-row.tot{
  border-top:1px solid var(--wp--preset--color--border);margin-top:10px;padding-top:15px;
  font-size:20px;color:var(--wp--preset--color--green);
}
.sonder-row.tot .v{ color:var(--wp--preset--color--green);font-weight:500; }

@media (max-width:900px){
  .sonder-received__grid{ grid-template-columns:1fr;gap:40px; }
  .sonder-when .big{ font-size:29px; }
}
@media (max-width:600px){
  .sonder-when,.sonder-receipt{ padding:22px 20px; }
  .sonder-line{ grid-template-columns:72px 1fr;gap:16px; }
  .sonder-thumb{ width:72px;height:72px; }
  .sonder-line .price{ grid-column:2; }
}

/* ====================================================================
   CONFIRM YOUR EMAIL — inc/email-verification.php, 2026-09-23
   ==================================================================== */

/* The notice an unconfirmed account sees on every account screen. The same
   paper card and copper edge as the appointment card, because it is the one
   thing on the page that needs doing. */
.sonder-verify-notice{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);
  border-left:3px solid var(--wp--preset--color--copper);
  border-radius:12px;padding:26px 28px;margin:0 0 32px;
}
.sonder-verify-notice h2{ font-size:28px;margin:0 0 10px; }
.sonder-verify-notice p{ margin:0 0 16px; }
.sonder-verify-notice form{ margin:0 0 14px; }
.sonder-verify-notice__small{ font-size:14px;color:var(--wp--preset--color--muted);margin:0!important; }

/* ====================================================================
   ACCOUNT — LOG IN / CREATE ACCOUNT, 2026-09-23
   ====================================================================

   mockup/account.html (the acct- rules there), approved by Thanh. Markup:
   woocommerce/myaccount/form-login.php. WooCommerce's own form styles are
   `.woocommerce form .form-row ...` and `.woocommerce form.login`; every rule
   here is scoped under .sonder-account so it outranks them and touches no
   other form. Operate, not Persuade: two tasks side by side, equal weight. */

.sonder-account{
  max-width:1120px;margin-left:auto!important;margin-right:auto!important;
  padding-top:var(--wp--preset--spacing--60);
}
/* WooCommerce's wrapper caps the account page at 1000px; the rest of the site
   runs to 1120. Only the logged-out page is widened — the logged-in account
   screens keep their own layout. */
/* woocommerce-blocktheme.css sets `.woocommerce-account main .woocommerce
   { max-width:1000px }`; the same selector plus the condition outranks it. */
.woocommerce-account main .woocommerce:has(> .sonder-account){ max-width:1120px; }
/* 107px from header to eyebrow, as on the other pages: the section padding
   and nothing else. */
.sonder-account > .sonder-eyebrow{ margin-top:0; }
/* WooCommerce's hidden order-attribution fields sit in their own element,
   which took a grid row and doubled the gap above the note. Its inputs still
   submit while it is not displayed. */
.sonder-account .woocommerce-form > wc-order-attribution-inputs{ display:none; }
.sonder-account h1{ margin-top:19px;margin-bottom:0; }
.sonder-account__lede{ margin:14px 0 40px;color:var(--wp--preset--color--ink); }

.sonder-account__grid{ display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch; }
.sonder-account__grid.is-single{ grid-template-columns:minmax(0,560px); }
.sonder-account__card{
  display:flex;flex-direction:column;
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:14px;
  padding:34px 34px 30px;
}
.sonder-account__card h2{ font-size:32px;margin:0; }
.sonder-account__sub{ color:var(--wp--preset--color--muted);margin:6px 0 0; }

/* WooCommerce boxes each form in a thin border; the card is the box here. */
.sonder-account .woocommerce-form.login,
.sonder-account .woocommerce-form.register{
  border:0;padding:0;margin:26px 0 0;border-radius:0;
  display:grid;gap:20px;
}
.sonder-account .woocommerce-form .form-row{ margin:0;padding:0; }
.sonder-account .woocommerce-form .form-row label{
  display:block;margin-bottom:7px;line-height:1.4;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  /* #885220, not the copper fill: 12px copper labels measured 3.41:1 on paper,
     under the 4.5:1 AA floor; this is 4.74:1. Approved with the account
     mockup, 2026-09-27. */
  color:#885220;
}
/* The required mark: dark copper text, never red (not in the brand) and never
   the copper fill, which fails contrast at this size. */
.sonder-account .required,
.sonder-account .woocommerce-form .form-row .required{ color:#885220;text-decoration:none; }

.sonder-account .woocommerce-form .form-row .input-text{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:2px;
  padding:12px 14px;min-height:48px;
}
.sonder-account .woocommerce-form .form-row .input-text:focus{
  outline:none;border-color:var(--wp--preset--color--copper);
  box-shadow:0 0 0 1px var(--wp--preset--color--copper);
}
/* WooCommerce's show-password button: the word, in copper, not an icon. */
.sonder-account .password-input{ display:block;position:relative; }
.sonder-account .woocommerce-form .form-row .password-input .input-text{ padding-right:76px; }
.sonder-account .woocommerce-form .show-password-input{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-width:56px;min-height:44px;padding:0 10px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#885220;
}
/* WooCommerce draws an eye with a background image on ::before. */
.sonder-account .woocommerce-form .show-password-input::before{ display:none; }
.sonder-account .woocommerce-form .show-password-input::after{ content:"Show";font-family:inherit; }
.sonder-account .woocommerce-form .show-password-input.display-password::after{ content:"Hide"; }
.sonder-account .show-password-input:focus-visible{ outline:2px solid var(--wp--preset--color--copper);outline-offset:2px; }

.sonder-account__remember label{
  display:flex!important;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font-size:15px!important;letter-spacing:0!important;text-transform:none!important;font-weight:400!important;
  color:var(--wp--preset--color--ink)!important;margin:0!important;
}
.sonder-account__remember input{ width:18px;height:18px;accent-color:var(--wp--preset--color--green);margin:0; }

.sonder-account .woocommerce-form button[type="submit"]{
  width:100%;margin:0;min-height:48px;
  background:var(--wp--preset--color--green);color:var(--wp--preset--color--paper);
  border:0;border-radius:40px;
}
.sonder-account .woocommerce-form button[type="submit"]:hover{ background:var(--wp--preset--color--copper-2);color:#fff; }

.sonder-account .lost_password{ text-align:center;font-size:15px;margin:0; }
.sonder-account .lost_password a{ color:var(--wp--preset--color--green); }

.sonder-account__foot{
  margin:auto 0 0;padding-top:22px;border-top:1px solid var(--wp--preset--color--border);
  font-size:15px;color:var(--wp--preset--color--muted);text-align:center;
}
/* Room above the log-in card's foot line. On desktop the equal-height cards
   add more; stacked on a phone this is all there is. */
.sonder-account .woocommerce-form.login{ margin-bottom:28px; }
.sonder-account__foot a{ color:var(--wp--preset--color--green); }

.sonder-account__why{ list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px; }
.sonder-account__why li{ position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--wp--preset--color--ink); }
.sonder-account__why li::before{
  content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--wp--preset--color--copper);
}
.sonder-account__hint{ display:block;font-size:14px;line-height:1.5;color:var(--wp--preset--color--muted);margin-top:6px; }
.sonder-account__quiet{ display:flex;gap:9px;font-size:14px;line-height:1.55;color:var(--wp--preset--color--muted);margin:0; }
.sonder-account__quiet .m{ color:#885220; }
.sonder-account__legal{ font-size:13px;line-height:1.55;color:var(--wp--preset--color--muted);text-align:center;margin:0; }
.sonder-account__legal a{ color:var(--wp--preset--color--muted); }
.sonder-account__legend{ font-size:13px;color:var(--wp--preset--color--muted);margin-top:18px; }

/* WooCommerce's strength meter under the new password. */
.sonder-account .woocommerce-password-strength{ font-size:14px;border-radius:2px;margin-top:8px; }
.sonder-account .woocommerce-password-hint{ display:block;font-size:13px;color:var(--wp--preset--color--muted);margin-top:6px; }

@media (max-width:900px){
  .sonder-account__grid{ grid-template-columns:1fr;gap:28px; }
}
@media (max-width:600px){
  .sonder-account__card{ padding:26px 22px 24px; }
}

/* ---- Appointments tab — inc/account-appointments-tab.php, 2026-09-23 ----
   Amelia's Customer Panel draws the list itself; this is only the frame. */
.sonder-appointments-tab h2{ font-size:30px;margin:6px 0 12px; }
.sonder-appointments-tab__rule{
  background:var(--wp--preset--color--paper);
  border-left:3px solid var(--wp--preset--color--copper);
  padding:14px 18px;margin:0 0 28px;
  font-size:15px;line-height:1.55;color:var(--wp--preset--color--muted);
}
.sonder-appointments-tab__rule a{ color:var(--wp--preset--color--green); }
.sonder-appointments-link{ margin-top:8px; }
.sonder-appointments-link a{ color:var(--wp--preset--color--green); }

/* ====================================================================
   ACCOUNT — SIGNED IN, 2026-09-27
   ====================================================================

   mockup/account-home.html + the acct- block in mockup/styles.css, revised
   and approved by Thanh 2026-09-27. Markup: woocommerce-acct-v2/myaccount/*.php,
   which only whoever sees the new design gets (sonder_acct_v2() in
   functions.php). Every rule is scoped to those templates' own .sonder-acct
   classes, or to body.sonder-acct-v2, so nobody else's account page changes.

   Two things the rolled-back attempt (2026-09-26) got wrong, measured on live
   2026-09-27 and fixed here: WooCommerce holds the signed-in page to 1000px
   with a 30% / 68% float split (the menu came out 300px against the design's
   220px), and the heading belongs above the menu and the panel, not inside
   the panel (the template does that). */

/* Width: the same 1120px as the log-in page and the rest of the site. */
.woocommerce-account main .woocommerce:has(> .sonder-acct){ max-width:1120px; }
.sonder-acct{
  max-width:1120px;margin-left:auto!important;margin-right:auto!important;
  padding-top:var(--wp--preset--spacing--60);
  /* The page template adds no space under the content, so without this the
     footer sat flush against the last card. */
  padding-bottom:var(--wp--preset--spacing--60);
}

/* The heading, across the whole width. Same measures as the log-in page. */
.sonder-acct-head{ margin-bottom:48px; }
.sonder-acct-head > .sonder-eyebrow{ margin-top:0; }
.sonder-acct-head h1{ margin-top:19px;margin-bottom:0; }
.sonder-acct-lede{ margin:14px 0 0;color:var(--wp--preset--color--ink); }

/* The shell: menu 220px, panel the rest. WooCommerce floats both at 30% and
   68%; the floats and widths are reset, not fought. */
.sonder-acct-shell{ display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start; }
.woocommerce-account .sonder-acct .woocommerce-MyAccount-navigation,
.woocommerce-account .sonder-acct .woocommerce-MyAccount-content{ float:none;width:auto;margin:0; }

/* The menu. */
.sonder-acct-nav{ position:relative; }
.woocommerce-account .sonder-acct .sonder-acct-menu{ list-style:none;margin:0;padding:0;display:grid;gap:2px; }
.woocommerce-account .sonder-acct .sonder-acct-menu li{ margin:0;padding:0;border:0; }
.sonder-acct-menu a{
  position:relative;display:block;padding:12px 0;border-bottom:1px solid var(--wp--preset--color--border);
  color:var(--wp--preset--color--ink);text-decoration:none;font-size:16px;
}
/* WooCommerce underlines the current item
   (`.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a`); the
   design marks it with the bar below instead. Measured on live 2026-09-27. */
.woocommerce-account .sonder-acct .sonder-acct-menu li a,
.woocommerce-account .sonder-acct .sonder-acct-menu li.is-active a{ text-decoration:none; }
.sonder-acct-menu a:hover{ color:var(--wp--preset--color--green); }
.sonder-acct-menu a[aria-current="page"]{ color:var(--wp--preset--color--green);font-weight:500; }
/* "You are here" is more than a heavier weight: a copper bar just outside the
   list's edge. */
.sonder-acct-menu a[aria-current="page"]::before{
  content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;
  border-radius:2px;background:var(--wp--preset--color--copper);
}
.sonder-acct-menu a:focus-visible,
.sonder-acct-nav__toggle:focus-visible,
.sonder-acct-body a:focus-visible{ outline:2px solid var(--wp--preset--color--copper);outline-offset:2px; }
.sonder-acct-nav__toggle{ display:none; }

/* Quiet label inside a panel, and a panel's own heading. */
.sonder-acct-k{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#885220;font-weight:500;margin:0;
}
.sonder-acct-body h2.sonder-acct-h{ font-size:24px;margin:0 0 14px; }

/* The upcoming appointment card — the cart's appointment card. */
.sonder-acct-upcoming > .sonder-acct-k{ margin-bottom:0; }
.sonder-acct-appt{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-left:3px solid var(--wp--preset--color--copper);border-radius:12px;padding:26px 28px;
}
.sonder-acct-appt + .sonder-acct-appt{ margin-top:18px; }
.sonder-acct-appt .sonder-acct-k{ margin:0; }
.sonder-acct-appt h3{ font-size:26px;margin:8px 0 0;line-height:1.2; }
.sonder-acct-appt__when{ font-size:17px;color:var(--wp--preset--color--ink);margin:10px 0 0; }
.sonder-acct-appt__with{ font-size:15px;color:var(--wp--preset--color--muted);margin:4px 0 0; }
.sonder-acct-appt__actions{ margin:10px 0 0; }
.sonder-acct-appt__actions a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;color:var(--wp--preset--color--green);text-decoration:underline;
}
.sonder-acct-book{ margin:26px 0 0; }
.sonder-acct-book .wp-element-button,
.sonder-acct-empty .wp-element-button,
.sonder-acct-after .wp-element-button{ display:inline-block;text-decoration:none; }

/* Quick links to Orders and Forms. */
.sonder-acct-quick{ display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px; }
.sonder-acct-qcard{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-radius:12px;padding:20px 22px;text-decoration:none;display:grid;gap:5px;
}
.sonder-acct-qcard__t{ font-family:var(--wp--preset--font-family--forum);font-size:20px;color:var(--wp--preset--color--green);line-height:1.2; }
.sonder-acct-qcard__s{ font-size:14px;color:var(--wp--preset--color--muted); }
.sonder-acct-qcard__go{ font-size:14px;color:var(--wp--preset--color--green);text-decoration:underline;margin-top:10px; }

/* Empty state. Also used by inc/account-forms.php for everyone, so it is not
   scoped to .sonder-acct. */
.sonder-acct-empty{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-radius:12px;padding:40px 28px;text-align:center;
}
.sonder-acct-empty p{ color:var(--wp--preset--color--muted);max-width:52ch;margin:0 auto; }
.sonder-acct-empty p + p{ margin-top:8px; }
.sonder-acct-empty .wp-element-button{ margin-top:22px; }

/* The list card: orders, forms, addresses and saved cards — one component.
   The forms rows come from inc/account-forms.php for everyone, so this is not
   scoped to .sonder-acct either. */
.sonder-acct-list{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-radius:14px;padding:6px 26px;
}
.sonder-acct-rec{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--wp--preset--color--border);
}
.sonder-acct-rec:last-child{ border-bottom:none; }
.sonder-acct-rec p{ margin:0; }
.sonder-acct-rec__nm{ font-family:var(--wp--preset--font-family--forum);font-size:20px;color:var(--wp--preset--color--green);line-height:1.2; }
.sonder-acct-rec__meta{ font-size:14px;color:var(--wp--preset--color--muted);margin-top:4px!important;line-height:1.5; }
.sonder-acct-rec__side{ display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end; }
.sonder-acct-rec__val{ font-size:18px;color:var(--wp--preset--color--ink);white-space:nowrap; }
.sonder-acct-rec__side a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:var(--wp--preset--color--muted);text-decoration:underline;
}
.sonder-acct-rec__side a:hover{ color:var(--wp--preset--color--green); }
.sonder-acct-rec address{ font-style:normal;font-size:16px;line-height:1.6;color:var(--wp--preset--color--ink); }
.sonder-acct-addr > .sonder-acct-k{ margin-bottom:12px; }
.sonder-acct-addr + .sonder-acct-addr{ margin-top:32px; }
/* Orders split into Appointment deposits / Shop orders (2026-09-27). The label
   is an h2 for screen readers, drawn as the small copper label. */
.sonder-acct-body h2.sonder-acct-k{ font-family:inherit;font-size:11px;line-height:1.4;margin:0 0 12px; }
.sonder-acct-group + .sonder-acct-group{ margin-top:40px; }
.sonder-acct-rec__meta + .sonder-acct-rec__meta{ margin-top:0!important; }
.sonder-acct-rec__val del{ color:var(--wp--preset--color--muted); }
.sonder-acct-hint{ font-size:14px;line-height:1.5;color:var(--wp--preset--color--muted);margin:12px 0 0; }
.sonder-acct-after{ margin:26px 0 0; }
/* The outlined "Add a card" button is the site's .wp-element-button.is-ghost,
   defined above with the thank-you page. */

/* One form's answers, read-only (Forms > View answers). */
.sonder-acct-back{ margin:0 0 18px; }
.sonder-acct-back a{ color:var(--wp--preset--color--green); }
.sonder-acct-answers{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-radius:14px;padding:6px 26px;margin:22px 0 0;
}
.sonder-acct-answers dt{ font-size:14px;color:var(--wp--preset--color--muted);padding-top:18px; }
.sonder-acct-answers dd{ margin:4px 0 0;padding-bottom:18px;border-bottom:1px solid var(--wp--preset--color--border);color:var(--wp--preset--color--ink); }
.sonder-acct-answers dd:last-child{ border-bottom:none; }

/* The record of agreement under a form's answers: when, from where, and the
   wording agreed to (inc/account-forms.php, sonder_render_consent_record()). */
.sonder-acct-consent{
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-left:3px solid var(--wp--preset--color--copper);border-radius:14px;
  padding:22px 26px;margin:22px 0 0;
}
.sonder-acct-consent__facts{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:12px 0 0; }
.sonder-acct-consent__facts dt{ font-size:14px;color:var(--wp--preset--color--muted); }
.sonder-acct-consent__facts dd{ margin:0;color:var(--wp--preset--color--ink);overflow-wrap:anywhere; }
.sonder-acct-consent__note{ font-size:14px;color:var(--wp--preset--color--muted);margin:22px 0 8px; }
.sonder-acct-consent__wording{
  background:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--border);
  border-radius:8px;padding:18px 20px;font-size:15px;line-height:1.6;color:var(--wp--preset--color--ink);
}
@media (max-width:600px){
  .sonder-acct-consent{ padding:20px; }
  .sonder-acct-consent__facts{ grid-template-columns:minmax(0,1fr);gap:2px; }
  .sonder-acct-consent__facts dd{ margin-bottom:10px; }
}

/* Your details: the log-in page's fields. WooCommerce floats first and last
   name at 47% each; the grid replaces that. */
/* The form sits in a paper card, as the log-in form does. */
.sonder-acct-details{
  display:grid;gap:32px;
  background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
  border-radius:14px;padding:34px 34px 30px;
}
.woocommerce-account .sonder-acct .sonder-acct-details .form-row .input-text{ background:var(--wp--preset--color--cream); }
.sonder-acct-fields{ display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0;margin:0;padding:0;min-width:0; }
.sonder-acct-fields > legend{ padding:0;margin-bottom:16px; }
.sonder-acct-fields .clear{ display:none; }
.woocommerce-account .sonder-acct .sonder-acct-fields .form-row{ float:none;width:auto;margin:0;padding:0; }
.woocommerce-account .sonder-acct .sonder-acct-fields .form-row-wide,
.sonder-acct-fields .sonder-acct-quiet{ grid-column:1 / -1; }
.woocommerce-account .sonder-acct .form-row label{
  display:block;margin-bottom:7px;line-height:1.4;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#885220;
}
.woocommerce-account .sonder-acct .required{ color:#885220;text-decoration:none; }
.woocommerce-account .sonder-acct .form-row .input-text,
.woocommerce-account .sonder-acct .form-row select{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--border);border-radius:2px;
  padding:12px 14px;min-height:48px;
}
.woocommerce-account .sonder-acct .form-row .input-text:focus{
  outline:none;border-color:var(--wp--preset--color--copper);
  box-shadow:0 0 0 1px var(--wp--preset--color--copper);
}
.sonder-acct .sonder-acct-hint{ display:block;margin-top:6px; }
.sonder-acct-quiet{ font-size:14px;line-height:1.55;color:var(--wp--preset--color--muted);margin:0; }
.sonder-acct .password-input{ display:block;position:relative; }
.woocommerce-account .sonder-acct .form-row .password-input .input-text{ padding-right:76px; }
.woocommerce-account .sonder-acct .show-password-input{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-width:56px;min-height:44px;padding:0 10px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#885220;
}
.woocommerce-account .sonder-acct .show-password-input::before{ display:none; }
.woocommerce-account .sonder-acct .show-password-input::after{ content:"Show";font-family:inherit; }
.woocommerce-account .sonder-acct .show-password-input.display-password::after{ content:"Hide"; }
.sonder-acct .show-password-input:focus-visible{ outline:2px solid var(--wp--preset--color--copper);outline-offset:2px; }
.woocommerce-account .sonder-acct .woocommerce-password-strength{ font-size:14px;border-radius:2px;margin-top:8px; }
.woocommerce-account .sonder-acct .woocommerce-EditAccountForm button[type="submit"]{
  min-height:48px;margin:0;border:0;border-radius:40px;
  background:var(--wp--preset--color--green);color:var(--wp--preset--color--paper);
}
.woocommerce-account .sonder-acct .woocommerce-EditAccountForm button[type="submit"]:hover{
  background:var(--wp--preset--color--copper-2);color:#fff;
}

/* The unconfirmed-email card sits in the panel with no heading above it. */
.sonder-acct .sonder-verify-notice{ margin-top:0; }

/* WooCommerce's own notices ("Account details changed", "Confirm your email
   address to check for past orders") come in its blue. In the account area they
   take the site's paper card with the copper edge, and the icon goes green. */
.sonder-acct .wc-block-components-notice-banner{
  background:var(--wp--preset--color--paper);color:var(--wp--preset--color--ink);
  border:1px solid var(--wp--preset--color--border);border-left:3px solid var(--wp--preset--color--copper);
  border-radius:12px;font-size:15px;
}
.sonder-acct .wc-block-components-notice-banner > svg{
  background-color:var(--wp--preset--color--green);fill:var(--wp--preset--color--paper);
}
.sonder-acct .wc-block-components-notice-banner.is-error > svg{ background-color:#b4190f; }
.sonder-acct .wc-block-components-notice-banner a{ color:var(--wp--preset--color--green); }

/* ---- Appointments: Amelia's Customer Panel in the brand ----------------
   Amelia writes its colours as custom properties in a style attribute on
   .am-cap__wrapper (navy #17295A sidebar, blue #1246D6 primary), from its own
   Customize screen. The brief says to restyle it from the theme rather than
   change Amelia's settings, so the properties are overridden here, for this
   panel only. **`!important` is needed and deliberate**: an inline custom
   property beats any stylesheet rule without it. Read in Thanh's session,
   2026-09-27.

   Its own sidebar (name, "Appointments", "Toggle Sidebar", a second Log out)
   is hidden: the account menu is the one menu and holds the one Log out. */
body.sonder-acct-v2 .sonder-appointments-tab .am-cap__wrapper{
  --am-c-primary:#1f2f22 !important;
  --am-c-main-bgr:#f1ead6 !important;
  --am-c-main-heading-text:#1f2f22 !important;
  --am-c-main-text:#2c332d !important;
  --am-c-main-text-op10:rgba(44,51,45,.1) !important;
  --am-c-sb-bgr:#1f2f22 !important;
  --am-c-inp-bgr:#f1ead6 !important;
  --am-c-inp-border:#d8cdb4 !important;
  --am-c-inp-text:#2c332d !important;
  --am-c-inp-placeholder:#686053 !important;
  --am-c-drop-bgr:#f1ead6 !important;
  --am-c-drop-text:#2c332d !important;
  --am-c-btn-prim:#1f2f22 !important;
  --am-c-btn-prim-text:#f1ead6 !important;
  --am-c-btn-sec:#2c3a2e !important;
  --am-c-btn-sec-text:#f1ead6 !important;
  --am-c-scroll-op30:rgba(180,108,43,.3) !important;
  --am-c-scroll-op10:rgba(180,108,43,.1) !important;
  --am-font-family:"DM Sans", sans-serif !important;
}
/* Each Amelia button, and the filter bar, set their own colour properties in
   their own style attribute (blue #265CF2) — measured 2026-09-27 — so they are
   overridden where they are set. Scoped to the account page as a whole, not the
   tab, because Amelia may open its reschedule and cancel dialogs outside it. */
body.sonder-acct-v2 .am-button--primary{
  --am-c-btn-first:#1f2f22 !important;
  --am-c-btn-second:#f1ead6 !important;
  --am-c-btn-first-op80:rgba(31,47,34,.8) !important;
  --am-c-btn-first-op30:rgba(31,47,34,.3) !important;
  --am-c-btn-first-op20:rgba(31,47,34,.1) !important;
}
body.sonder-acct-v2 .sonder-appointments-tab .am-capf{
  --am-c-capf-heading-text:#1f2f22 !important;
  --am-c-capf-text:#2c332d !important;
  --am-c-capf-text-op10:rgba(44,51,45,.1) !important;
  --am-c-select-border:#d8cdb4 !important;
  --am-c-select-bgr:#f1ead6 !important;
}
/* The reschedule window and the date-range picker, in the brand (2026-09-28).
   Thanh rescheduled a test booking and the calendar was Amelia blue. Read in
   his session: the window opens inside the tab, but its calendar
   (.am-advsc__wrapper), the window itself (.am-slide-popup__block), each
   appointment card (.am-cc), the date-range box and its drop-down (which
   Amelia puts OUTSIDE the tab, on <body>) each write their OWN colour
   properties inline, so the panel's overrides above never reach them. Same
   palette as the booking form, whose colours are saved in Amelia's own
   Customize screen (sbsNew): sage #7D9679 for open days and times, #546A50
   for busier ones, green #1F2F22 selected, cream text on green. */
body.sonder-acct-v2 .am-advsc__wrapper{
  --am-c-cal-init:#1f2f22 !important;
  --am-c-cal-init-text:#1f2f22 !important;
  --am-c-cal-init-op10:rgba(31,47,34,.1) !important;
  --am-c-cal-init-op20:rgba(31,47,34,.2) !important;
  --am-c-cal-init-op30:rgba(31,47,34,.3) !important;
  --am-c-cal-init-op60:rgba(31,47,34,.6) !important;
  --am-c-cal-low:#7d9679 !important;
  --am-c-cal-low-text:#1f2f22 !important;
  --am-c-cal-low-op10:rgba(125,150,121,.1) !important;
  --am-c-cal-low-op20:rgba(125,150,121,.2) !important;
  --am-c-cal-low-op30:rgba(125,150,121,.3) !important;
  --am-c-cal-low-op60:rgba(125,150,121,.6) !important;
  --am-c-cal-low-op80:rgba(125,150,121,.8) !important;
  --am-c-cal-high:#546a50 !important;
  --am-c-cal-high-text:#1f2f22 !important;
  --am-c-cal-high-op10:rgba(84,106,80,.1) !important;
  --am-c-cal-high-op20:rgba(84,106,80,.2) !important;
  --am-c-cal-high-op30:rgba(84,106,80,.3) !important;
  --am-c-cal-high-op60:rgba(84,106,80,.6) !important;
  --am-c-cal-high-op80:rgba(84,106,80,.8) !important;
  --am-c-cal-selected:#1f2f22 !important;
  --am-c-cal-selected-text:#f1ead6 !important;
  --am-c-cal-selected-op80:rgba(31,47,34,.8) !important;
  --am-c-cal-waiting:#f1ead6 !important;
  --am-c-cal-waiting-text:#2c332d !important;
  --am-c-cal-waiting-op40:rgba(44,51,45,.4) !important;
  --am-c-advsc-bgr-op10:rgba(44,51,45,.1) !important;
}
body.sonder-acct-v2 .am-slide-popup__block{
  --am-c-spb-bgr:#f1ead6 !important;
  --am-c-spb-text:#2c332d !important;
  --am-c-spb-text-op10:rgba(44,51,45,.1) !important;
  --am-c-csd-bgr:#f1ead6 !important;
  --am-c-csd-text:#2c332d !important;
  --am-c-csd-text-op10:rgba(44,51,45,.1) !important;
  --am-c-scroll-op30:rgba(180,108,43,.3) !important;
  --am-c-scroll-op10:rgba(180,108,43,.1) !important;
}
body.sonder-acct-v2 .am-cc{
  --am-c-cc-primary:#1f2f22 !important;
  --am-c-cc-primary-op15:rgba(31,47,34,.15) !important;
  --am-c-cc-primary-op70:rgba(31,47,34,.7) !important;
}
body.sonder-acct-v2 .am-capa__wrapper{ --am-c-capa-primary:#1f2f22 !important; }
body.sonder-acct-v2 .am-date-picker__wrapper,
body.sonder-acct-v2 .am-date-picker__popper{ --am-c-primary:#1f2f22 !important; }

body.sonder-acct-v2 .sonder-appointments-tab .am-fs-sb{ display:none!important; }
/* On a narrow screen Amelia adds its own menu button, which opens a drawer with
   the same sidebar — name, Services, a second Log out. Hidden with it. */
body.sonder-acct-v2 .sonder-appointments-tab .am-caph__menu{ display:none!important; }
/* Phone: the date range gets its own line. At 198px its two dates broke
   mid-word ("Septembe / r 27"); full width they wrap between words. */
@media (max-width:600px){
  body.sonder-acct-v2 .sonder-appointments-tab .am-capf__menu{ flex-wrap:wrap!important;row-gap:10px; }
  body.sonder-acct-v2 .sonder-appointments-tab .am-capf__menu-datepicker{ flex:1 1 100%!important;width:100%!important;max-width:none!important; }
  body.sonder-acct-v2 .sonder-appointments-tab .am-capf__menu-datepicker .el-range-input{ font-size:14px!important; }
}
/* Amelia gives the panel a 100px top margin and a fixed 700px height, which
   left a gap above it and a tall empty box below one appointment. */
body.sonder-acct-v2 .sonder-appointments-tab .am-cap__wrapper{
  max-width:none!important;width:100%!important;box-shadow:none!important;
  margin-top:0!important;height:auto!important;
}
body.sonder-acct-v2 .sonder-appointments-tab [id^="amelia-v2-booking"]{ height:auto!important; }
body.sonder-acct-v2 .sonder-appointments-tab .am-fs__main{
  width:100%!important;max-width:none!important;height:auto!important;min-height:320px;
  background:var(--wp--preset--color--paper)!important;
  border:1px solid var(--wp--preset--color--border);border-radius:14px;
}

/* ---- Phones ------------------------------------------------------------ */
@media (max-width:900px){
  .sonder-acct-shell{ grid-template-columns:minmax(0,1fr);gap:28px; }

  /* The menu becomes the services page's control: the page you are on in a
     pill, and the list opening under it (assets/account-menu.js adds the pill;
     without it the plain list shows). Never a row that scrolls sideways. */
  .sonder-acct-nav.has-toggle{ display:flex;justify-content:center; }
  .sonder-acct-nav__toggle{
    display:flex;align-items:center;gap:14px;max-width:100%;min-height:44px;cursor:pointer;
    background:var(--wp--preset--color--green);border:1px solid var(--wp--preset--color--green);
    border-radius:40px;padding:9px 16px 9px 20px;
    font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--wp--preset--color--paper);
    transition:background .18s ease, border-color .18s ease;
  }
  .sonder-acct-nav__toggle:hover{ background:var(--wp--preset--color--green-2);border-color:var(--wp--preset--color--green-2); }
  .sonder-acct-nav__current{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .sonder-acct-nav__bars{ flex:0 0 auto;display:block;position:relative;width:16px;height:12px; }
  .sonder-acct-nav__bars span{
    position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
    transition:transform .2s ease, opacity .2s ease;
  }
  .sonder-acct-nav__bars span:nth-child(1){ top:0; }
  .sonder-acct-nav__bars span:nth-child(2){ top:5px; }
  .sonder-acct-nav__bars span:nth-child(3){ top:10px; }
  .sonder-acct-nav.is-open .sonder-acct-nav__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  .sonder-acct-nav.is-open .sonder-acct-nav__bars span:nth-child(2){ opacity:0; }
  .sonder-acct-nav.is-open .sonder-acct-nav__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

  .woocommerce-account .sonder-acct .sonder-acct-nav.has-toggle .sonder-acct-menu{
    display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
    z-index:30;width:min(320px, calc(100vw - 24px));padding:6px;gap:0;
    background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--border);
    border-radius:10px;box-shadow:0 10px 28px rgba(31,47,34,.10);
  }
  .woocommerce-account .sonder-acct .sonder-acct-nav.has-toggle.is-open .sonder-acct-menu{ display:grid; }
  .sonder-acct-nav.has-toggle .sonder-acct-menu a{
    /* border-box: the page measures content-box, which made each item
       44 + 22 = 66px tall instead of the design's 44. Measured 2026-09-27. */
    box-sizing:border-box;
    border:0;border-radius:6px;padding:11px 14px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  }
  .sonder-acct-nav.has-toggle .sonder-acct-menu a:hover{ background:var(--wp--preset--color--cream); }
  .sonder-acct-nav.has-toggle .sonder-acct-menu a[aria-current="page"]{ color:#885220; }
  .sonder-acct-nav.has-toggle .sonder-acct-menu a[aria-current="page"]::before{ display:none; }
}
@media (max-width:600px){
  .sonder-acct-appt{ padding:22px 20px; }
  .sonder-acct-quick{ grid-template-columns:minmax(0,1fr); }
  .sonder-acct-list,.sonder-acct-answers{ padding:6px 20px; }
  .sonder-acct-rec{ grid-template-columns:minmax(0,1fr);gap:8px; }
  .sonder-acct-rec__side{ justify-content:flex-start; }
  .sonder-acct-fields{ grid-template-columns:minmax(0,1fr); }
  .sonder-acct-details{ padding:26px 22px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .sonder-acct-nav__toggle,.sonder-acct-nav__bars span{ transition:none; }
}

/* =========================================================================
   LEGAL PAGES — Privacy, Terms and Conditions, Accessibility (2026-09-27).
   Approved in mockup/live/privacy.html; text in wp-pages/. Three bands: a
   cream heading, a paper panel with the "On this page" list (built by
   assets/legal.js) beside a 720px text column, and a green close. Copper as
   decoration only; copper-coloured small text is #885220 (4.74:1 on paper).
   ========================================================================= */
.sonder-legal-band + .sonder-legal-band{ margin-block-start:0 !important; }
.sonder-legal-hero{ padding-bottom:var(--wp--preset--spacing--50) !important; }
.sonder-legal-hero .sonder-legal-meta{ font-size:14px; color:#5f5a52; margin-top:.6em; }
.sonder-legal-hero .sonder-legal-intro,
.sonder-legal-close p{
  max-width:680px; margin-left:max(0px,calc((100% - 1120px) / 2)) !important;
}
.sonder-legal-hero .sonder-legal-intro{ font-size:18px; line-height:1.65; }
.sonder-legal-grid{ display:grid; grid-template-columns:240px minmax(0,720px); gap:96px; align-items:start; }
.sonder-legal-grid > *{ margin-block-start:0; }
.sonder-legal-toc{ position:sticky; top:120px; font-size:14px; }
.sonder-legal-toc-title{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#885220; margin:0 0 12px; }
.sonder-legal-toc ol,.sonder-legal-toc-phone ol{ list-style:none; margin:0; padding:0; }
.sonder-legal-toc ol{ border-left:1px solid rgba(31,47,34,.15); }
.sonder-legal-toc a{
  display:flex; align-items:center; min-height:44px; box-sizing:border-box;
  padding:4px 0 4px 16px; margin-left:-1px; border-left:2px solid transparent;
  color:var(--wp--preset--color--ink); text-decoration:none; line-height:1.35;
}
.sonder-legal-toc a:hover,.sonder-legal-toc a:focus-visible{ border-left-color:var(--wp--preset--color--copper); color:var(--wp--preset--color--green); }
.sonder-legal-also{ margin-top:28px; padding-top:16px; border-top:1px solid rgba(31,47,34,.15); font-size:13px; color:#5f5a52; }
.sonder-legal-toc .sonder-legal-also a{
  display:inline-flex; min-height:44px; margin-right:14px; padding:0; border:0;
  color:var(--wp--preset--color--green); text-decoration:underline; text-underline-offset:3px;
}
.sonder-legal-toc-phone{ display:none; }
.sonder-legal-text > *{ margin-block-start:0; }
.sonder-legal-text h2{
  display:flex; gap:14px; align-items:baseline;
  margin:36px 0 14px; padding-top:36px; border-top:1px solid rgba(31,47,34,.12);
  font-size:clamp(24px,1.1rem + .8vw,30px); scroll-margin-top:120px;
}
.sonder-legal-text > h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.sonder-legal-text h2 .n{ font-family:var(--wp--preset--font-family--dm-sans); font-size:13px; letter-spacing:.12em; color:#885220; min-width:22px; }
.sonder-legal-text h3{ margin:22px 0 8px; font-family:var(--wp--preset--font-family--dm-sans); font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--wp--preset--color--green); }
.sonder-legal-text p,.sonder-legal-text li{ font-size:16px; line-height:1.7; }
.sonder-legal-text p{ margin:0 0 14px; }
.sonder-legal-text ul{ list-style:none; padding-left:0; margin:10px 0 14px; }
.sonder-legal-text ul li{ position:relative; padding-left:22px; margin:8px 0; }
.sonder-legal-text ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--wp--preset--color--copper); }
.sonder-legal-text a{ color:var(--wp--preset--color--green); text-underline-offset:3px; }
.sonder-legal-close .sonder-legal-address{ font-size:14px; opacity:.85; margin-top:18px; }
@media (max-width:900px){
  .sonder-legal-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .sonder-legal-toc{ display:none; }
  .sonder-legal-toc-phone{ display:block; margin:0 0 28px; background:rgba(255,255,255,.45); border:1px solid rgba(31,47,34,.12); border-radius:12px; }
  .sonder-legal-toc-phone summary{ cursor:pointer; min-height:48px; display:flex; align-items:center; padding:0 16px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--wp--preset--color--green); }
  .sonder-legal-toc-phone ol{ padding:0 16px 12px; }
  .sonder-legal-toc-phone a{ display:flex; align-items:center; min-height:44px; color:var(--wp--preset--color--ink); text-decoration:none; border-top:1px solid rgba(31,47,34,.08); }
  .sonder-legal-text h2{ margin-top:28px; padding-top:28px; }
}

/* The footer's legal row under the copyright line. */
footer .sonder-legal-links a{ display:inline-block; padding:10px 0; line-height:24px; margin-right:18px; }

/* =========================================================================
   STUDIO — the staff side of the account page (inc/staff-portal.php),
   2026-09-27. From mockup/staff-portal.html; rules prefixed stf-.
   ========================================================================= */
.stf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:34px; }
.stf-stat{ background:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--border); border-radius:14px; padding:18px 20px; }
.stf-stat .n{ font-family:var(--wp--preset--font-family--forum); font-size:38px; color:var(--wp--preset--color--green); line-height:1; }
.stf-stat .l{ font-size:14px; color:var(--wp--preset--color--muted); margin-top:8px; }
.stf-list{ padding-top:6px; padding-bottom:6px; }
.stf-day{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#885220; font-weight:500; margin:26px 0 10px; }
.stf-day:first-child{ margin-top:12px; }
.stf-appt{ display:grid; grid-template-columns:86px minmax(0,1fr) auto; gap:18px; align-items:start; padding:18px 0; border-bottom:1px solid var(--wp--preset--color--border); }
.stf-appt:last-child{ border-bottom:0; }
.stf-time{ font-family:var(--wp--preset--font-family--forum); font-size:22px; color:var(--wp--preset--color--green); line-height:1.1; }
.stf-time small{ display:block; font-family:var(--wp--preset--font-family--dm-sans); font-size:13px; color:var(--wp--preset--color--muted); margin-top:4px; }
.stf-who{ font-family:var(--wp--preset--font-family--forum); font-size:21px; color:var(--wp--preset--color--green); line-height:1.2; margin:0; }
.stf-what{ font-size:15px; color:var(--wp--preset--color--ink); margin:3px 0 0; }
.stf-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.stf-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:1.2; padding:6px 10px; border-radius:999px; border:1px solid var(--wp--preset--color--border); background:var(--wp--preset--color--cream); color:var(--wp--preset--color--ink); white-space:nowrap; }
.stf-chip.ok{ background:rgba(84,106,80,.12); border-color:rgba(84,106,80,.35); color:#2f4430; }
.stf-chip.ok::before{ content:"✓"; font-size:12px; }
.stf-chip.warn{ background:rgba(180,108,43,.12); border-color:rgba(180,108,43,.45); color:#7a4a1c; }
.stf-chip.warn::before{ content:"!"; font-weight:600; }
.stf-chip.new{ background:var(--wp--preset--color--green); border-color:var(--wp--preset--color--green); color:var(--wp--preset--color--paper); vertical-align:middle; }
.stf-chip.stf-flag{ white-space:normal; max-width:100%; }
.stf-acts{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; align-self:center; }
.stf-acts .act,.stf-client .act{ min-height:44px; display:inline-flex; align-items:center; color:var(--wp--preset--color--green); text-underline-offset:3px; font-size:15px; }
.stf-note{ font-size:14px; color:var(--wp--preset--color--muted); line-height:1.55; margin-top:14px; }
.stf-search{ display:flex; gap:12px; margin-bottom:18px; }
.stf-search input{ flex:1; min-width:0; min-height:48px; padding:0 16px; border:1px solid var(--wp--preset--color--border); border-radius:10px; background:#fff; font:inherit; font-size:16px; }
.stf-client{ display:grid; grid-template-columns:1.2fr 1.3fr 1fr auto; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--wp--preset--color--border); }
.stf-client:last-child{ border-bottom:0; }
.stf-client .meta{ font-size:14px; color:var(--wp--preset--color--muted); line-height:1.5; margin:0; overflow-wrap:anywhere; }
.stf-head{ display:flex; flex-wrap:wrap; gap:6px 28px; align-items:baseline; margin-bottom:6px; }
.stf-contact{ font-size:15px; color:var(--wp--preset--color--ink); margin:0; }
.stf-contact a{ color:var(--wp--preset--color--green); }
.stf-sec{ margin-top:34px; }
.stf-consent{ padding:16px 0; border-bottom:1px solid var(--wp--preset--color--border); }
.stf-consent:last-child{ border-bottom:0; }
.stf-consent .nm{ font-family:var(--wp--preset--font-family--forum); font-size:20px; color:var(--wp--preset--color--green); margin:0; }
.stf-consent .meta{ font-size:14px; color:var(--wp--preset--color--muted); margin:4px 0 0; }
.stf-consent details{ margin-top:6px; }
.stf-consent summary{ cursor:pointer; min-height:44px; display:inline-flex; align-items:center; color:var(--wp--preset--color--green); text-decoration:underline; text-underline-offset:3px; font-size:15px; }
.stf-consent .words{ background:var(--wp--preset--color--cream); border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.6; color:var(--wp--preset--color--ink); max-height:220px; overflow:auto; }
.stf-answers-box{ padding-top:14px; padding-bottom:18px; }
.stf-answers{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 24px; font-size:15px; margin:0; }
.stf-answers dt{ color:var(--wp--preset--color--muted); padding-top:10px; }
.stf-answers dd{ margin:0; padding-top:10px; color:var(--wp--preset--color--ink); overflow-wrap:anywhere; }
.stf-lock{ background:var(--wp--preset--color--paper); border:1px dashed var(--wp--preset--color--border); border-radius:12px; padding:16px 18px; font-size:15px; color:var(--wp--preset--color--muted); line-height:1.55; }
.stf-order{ padding:16px 0; border-bottom:1px solid var(--wp--preset--color--border); }
.stf-order:last-child{ border-bottom:0; }
.stf-mark{ background:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--border); border-radius:14px; padding:22px 24px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.stf-mark .n{ font-family:var(--wp--preset--font-family--forum); font-size:30px; color:var(--wp--preset--color--green); }
@media (max-width:900px){
  .stf-stats{ gap:10px; }
  .stf-stat{ padding:14px 12px; }
  .stf-stat .n{ font-size:30px; }
  .stf-appt{ grid-template-columns:58px minmax(0,1fr); gap:12px; }
  .stf-acts{ grid-column:2; flex-direction:row; align-items:center; gap:18px; }
  .stf-client{ grid-template-columns:1fr; gap:6px; }
  .stf-answers{ grid-template-columns:1fr; }
  .stf-answers dd{ padding-top:2px; }
}

/* Studio actions — stage B (inc/staff-portal-actions.php). */
.stf-inline{ display:inline; margin:0; }
.stf-acts .act.stf-in,.stf-acts button.stf-in{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px;
  border:0; border-radius:999px; background:var(--wp--preset--color--green); color:var(--wp--preset--color--paper);
  font:inherit; font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
}
.stf-more{ position:relative; }
.stf-more summary{ list-style:none; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; font-size:15px; color:var(--wp--preset--color--muted); text-decoration:underline; text-underline-offset:3px; }
.stf-more summary::-webkit-details-marker{ display:none; }
.stf-more summary::after{ content:"▾"; margin-left:6px; font-size:11px; }
.stf-menu{ position:absolute; right:0; top:100%; z-index:20; min-width:210px; background:#fff; border:1px solid var(--wp--preset--color--border); border-radius:12px; box-shadow:0 10px 26px rgba(31,47,34,.12); padding:6px; display:grid; }
.stf-menu a{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--wp--preset--color--ink); text-decoration:none; font-size:15px; }
.stf-menu a:hover,.stf-menu a:focus-visible{ background:var(--wp--preset--color--cream); }
.stf-menu a.stf-danger{ color:#8a2f1d; }
.stf-now{ background:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--border); border-radius:14px; padding:18px 22px; margin-bottom:26px; }
.stf-now .meta{ font-size:15px; color:var(--wp--preset--color--muted); margin:4px 0 0; }
.stf-form fieldset,.stf-rs fieldset{ border:0; padding:0; margin:0 0 22px; min-width:0; }
.stf-form legend,.stf-legend{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#885220; font-weight:500; margin:0 0 12px; }
.stf-check{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer; }
.stf-check input{ width:20px; height:20px; accent-color:var(--wp--preset--color--green); }
.stf-hold{ background:rgba(180,108,43,.10); border:1px solid rgba(180,108,43,.35); border-radius:12px; padding:16px 18px; font-size:15px; line-height:1.6; color:#4a3217; margin:0 0 18px; }
.stf-btns{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:8px; }
.stf-ghost{ min-height:44px; display:inline-flex; align-items:center; color:var(--wp--preset--color--green); text-underline-offset:3px; }
.stf-pills{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.stf-pill{ position:relative; text-decoration:none; }
.stf-pill input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.stf-pill span{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; min-height:48px; padding:6px 14px; border:1px solid var(--wp--preset--color--border); border-radius:12px; background:#fff; font-size:15px; color:var(--wp--preset--color--ink); line-height:1.2; text-align:center; }
.stf-pill span small{ font-size:12px; color:var(--wp--preset--color--muted); }
.stf-pill.on span,.stf-pill input:checked + span{ background:var(--wp--preset--color--green); border-color:var(--wp--preset--color--green); color:var(--wp--preset--color--paper); }
.stf-pill.on span small,.stf-pill input:checked + span small{ color:var(--wp--preset--color--paper); opacity:.85; }
.stf-pill input:focus-visible + span,.stf-pill:focus-visible span{ outline:2px solid var(--wp--preset--color--copper); outline-offset:2px; }
.stf-rs .act{ min-height:44px; display:inline-flex; align-items:center; color:var(--wp--preset--color--green); }
@media (max-width:900px){
  .stf-appt{ position:relative; }
  .stf-more{ position:static; }
  .stf-menu{ left:0; right:0; min-width:0; }
}

/* ==========================================================================
   STUDIO — BOOK FOR A CLIENT and the client's CONFIRM PAGE (stage C,
   2026-09-27). Design: mockup/staff-portal.html#st-book and
   mockup/hold-confirm.html.
   ========================================================================== */
.stf-field{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px; min-width:0; }
.stf-field label{ font-size:14px; color:var(--wp--preset--color--ink); }
.stf-field input,.stf-field select,.stf-field textarea{ font:inherit; font-size:16px; min-height:48px; padding:10px 14px; border:1px solid var(--wp--preset--color--border); border-radius:10px; background:#fff; color:var(--wp--preset--color--ink); width:100%; min-width:0; box-sizing:border-box; }
.stf-field textarea{ min-height:90px; }
.stf-find-row{ display:flex; gap:10px; align-items:stretch; }
.stf-find-row > input,.stf-find-row > select{ flex:1 1 auto; }
.stf-find-row .wp-element-button{ flex:none; }
.stf-found{ margin:4px 0 12px; }
.stf-pickrow{ display:flex; flex-direction:column; gap:2px; min-height:44px; padding:12px 0; border-bottom:1px solid var(--wp--preset--color--border); text-decoration:none; color:var(--wp--preset--color--ink); }
.stf-pickrow:last-child{ border-bottom:0; }
.stf-pickrow .meta{ font-size:14px; color:var(--wp--preset--color--muted); }
.stf-pickrow:hover .stf-who,.stf-pickrow:focus-visible .stf-who{ text-decoration:underline; text-underline-offset:3px; }
.stf-book .stf-now{ margin-bottom:0; }
.stf-book .stf-now .meta a{ color:var(--wp--preset--color--green); text-underline-offset:3px; display:inline-flex; min-height:44px; align-items:center; }
.stf-link{ width:100%; margin-top:10px; font:inherit; font-size:14px; padding:10px 12px; border:1px solid rgba(180,108,43,.35); border-radius:8px; background:#fff; color:var(--wp--preset--color--ink); box-sizing:border-box; }
@media (max-width:640px){ .stf-find-row{ flex-direction:column; } }

.sonder-hold-page{ max-width:720px; }
.sonder-hold .sonder-received__lede{ max-width:640px; }
.sonder-hold-box{ background:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--border); border-radius:12px; padding:16px 18px; margin:0 0 16px; }
.sonder-hold-box p{ margin:0; line-height:1.6; }
.sonder-hold-box .t{ font-family:var(--wp--preset--font-family--forum, 'Forum', Georgia, serif); font-size:21px; color:var(--wp--preset--color--green); }
.sonder-hold-step{ margin-top:34px; }
.sonder-hold h2.sonder-hold-k{ font-family:inherit; font-size:11px; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; color:#885220; font-weight:500; margin:0 0 14px; }
.sonder-hold-q{ margin:0 0 20px; }
.sonder-hold-q fieldset{ border:0; padding:0; margin:0; min-width:0; }
.sonder-hold-qq{ display:block; font-size:16px; color:var(--wp--preset--color--ink); margin:0 0 8px; padding:0; line-height:1.5; }
.sonder-hold-opt{ color:var(--wp--preset--color--muted); font-size:14px; }
.sonder-hold-opts{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.sonder-hold-opts label,.sonder-hold-agree{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; color:var(--wp--preset--color--ink); cursor:pointer; }
.sonder-hold-opts input,.sonder-hold-agree input{ width:20px; height:20px; accent-color:var(--wp--preset--color--green); flex:none; margin:0; }
.sonder-hold-q input[type=text],.sonder-hold-q textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--wp--preset--color--border); border-radius:10px; background:#fff; min-height:48px; }
.sonder-hold-q textarea{ min-height:90px; }
.sonder-hold-words{ background:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--border); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6; color:var(--wp--preset--color--ink); max-height:180px; overflow:auto; margin:14px 0 6px; }
.sonder-hold-words:focus-visible{ outline:2px solid var(--wp--preset--color--copper); outline-offset:2px; }
.sonder-hold-q.has-error input[type=text],.sonder-hold-q.has-error textarea{ border-color:#a4372b; }
.sonder-hold-err{ color:#a4372b; font-size:14px; margin:6px 0 0; }
.sonder-hold-err::before{ content:"! "; font-weight:600; }
.sonder-hold-alert{ border:1px solid #a4372b; background:#fbeeec; color:#5e1f18; border-radius:12px; padding:14px 16px; margin:0 0 18px; font-size:15px; line-height:1.55; }
.sonder-hold-alert ul{ margin:6px 0 0; padding-left:20px; }
.sonder-hold-alert a{ color:inherit; }
.sonder-hold-pay{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-top:30px; padding-top:24px; border-top:1px solid var(--wp--preset--color--border); }
.sonder-hold-pay .amt{ font-size:15px; color:var(--wp--preset--color--muted); margin:0; }
.sonder-hold-pay .amt b{ font-family:var(--wp--preset--font-family--forum, 'Forum', Georgia, serif); font-size:26px; color:var(--wp--preset--color--green); font-weight:400; display:block; }
/* The confirm page sits in an ordinary page's content, which holds children
   to the narrow reading width; this page follows the account area instead:
   1120px, the same room above the eyebrow and below the last block. */
.sonder-hold{ max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; padding-top:var(--wp--preset--spacing--60); padding-bottom:var(--wp--preset--spacing--60); box-sizing:border-box; }

/* ============================================================================
   REDESIGN v2 — HOME, SERVICES, ABOUT, POLICIES, CONTACT AND THE SHOP TABS
   2026-09-28. Rebuilt by hand from mockup/site-v2.css, reviewed and approved
   by Thanh ("It looks good make it live"). Nothing was copied across blind:
   the markup was re-typed into wp-pages/ as block markup.

   SCOPE. Every rule sits under a body class that functions.php adds only on
   its own page — `sh-home` (front page), `sh-services`, `sh-about`,
   `sh-policies`, `sh-contact`, and `sh-shop` on every shop tab — and then
   under `main`, so no rule can reach the header, the footer, the mini-cart,
   or any other page. The ornament rules hang on generic selectors
   (`.has-green-background-color::before`, the first group of the page), so
   this scoping is what keeps a lotus or a sprig off the booking, cart,
   checkout and account pages. Never drop the page class from a rule here.

   ICONS are CSS masks of the files in assets/icons/, drawn to
   reference/icon-diagram-style.md. CONTRAST: the Services price (#b26a28 on
   cream, 3.07:1) passes only as large text — keep it 24px or larger at every
   width; the Services time (--muted on cream, 4.52:1) must stay on cream.
   ========================================================================= */

/* ------------------------------------------------------- 0. THE EDGE RULE */
/* Thanh, 2026-09-28: nothing may hang off the screen edge at a fixed
   distance. A band is as wide as the window, so an ornament pinned to the
   band's own edge drifts further from the words on a wider screen and leaves
   a dead gap each side. Every ornament is pinned to the CENTRE instead and
   stopped 16px short of the edge, so it sits with the content at any width.

   50% - 700px is the content's own left edge (1120 wide, plus a little), and
   `max(16px, ...)` is the floor that keeps it on screen when the window is
   narrow. This is the only place the number is written down. */
.sh-home main{
  --sh-content-edge: 700px;   /* half the 1120 content, plus 140px of overlap */
  --sh-ornament-gap: 16px;    /* the smallest distance kept from a screen edge */
}

/* ---------------------------------------------------------------- 1. HERO */
/* More air above the fold than the other bands, so the top of the page reads
   as the important one. The section's own padding is set inline by the block
   editor, so this one override needs !important. */
.sh-home main .sh-hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(60px,7.5vw,108px) !important;
  padding-bottom:clamp(56px,7vw,104px) !important;
}

/* The lotus, faint, rising from the bottom of the band UNDER the words — never
   behind them. Reviewed 2026-09-28: pinned to the band it ran behind both
   buttons and the facts line, the thing Thanh had already objected to. It now
   hangs from the facts line itself (`.sh-meta`, below), so it starts 36px
   under the last word at any width and the band's overflow crops the rest.
   It sits in the text column, so it can never drift to the window edge. */
.sh-home main .sh-meta{ position:relative; }
.sh-home main .sh-meta::after{
  content:"";
  position:absolute;
  left:-18px;
  top:calc(100% + 36px);
  width:250px;
  height:308px;
  background:url("assets/icons/motif-lotus.svg") center top/contain no-repeat;
  opacity:.16;
  pointer-events:none;
}
.sh-home main .sh-hero > *{ position:relative; z-index:1; }

/* Asymmetry: the words take the larger share, the photograph the smaller, so
   the two halves stop reading as a 50/50 split. */
.sh-home main .sh-hero-copy{ flex:1 1 54%; }

.sh-home main .sh-hero h1{
  font-size:clamp(40px,5.6vw,74px);
  line-height:1.04;
  letter-spacing:-.02em;
  max-width:15ch;
  margin:14px 0 0;
}
.sh-home main .sh-hero-copy > p:not(.sonder-eyebrow):not(.sh-meta-item){
  max-width:44ch;
  line-height:1.45;
  margin-top:14px;
}
.sh-home main .sh-hero-copy .wp-block-buttons{ gap:14px; }

/* The quiet facts under the buttons, on a hairline so they read as a footer
   to the hero rather than a fourth paragraph. */
.sh-home main .sh-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  margin-top:var(--wp--preset--spacing--40);
  padding-top:20px;
  border-top:1px solid var(--wp--preset--color--border);
  max-width:540px;
}
.sh-home main .sh-meta-item{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* Ink, not muted: 9.46:1 on cream. The lotus no longer passes behind this
     line (it hangs below it since 2026-09-28), but ink is kept for weight. */
  color:var(--wp--preset--color--ink);
}
.sh-home main .sh-meta-place::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/location.svg") center/contain no-repeat;
          mask:url("assets/icons/location.svg") center/contain no-repeat;
}

/* The photograph, arched at the top — the shape echoes the logo's crescent
   without copying it. */
.sh-home main .sh-hero-photo{
  flex:1 1 46%;
  max-width:440px;
  margin-left:auto;
  position:relative;
}
.sh-home main .sh-hero-photo img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:220px 220px 18px 18px;
  border:1px solid var(--wp--preset--color--border);
  box-shadow:0 50px 90px -50px rgba(31,47,34,.5);
}
/* The copper crescent that sat outside the hero photograph's top-left
   corner was removed on Thanh's instruction, 2026-09-28 — "I don't like the
   moon next to the profile picture." The rule is deleted rather than hidden,
   so no later edit can bring it back by accident. The hero keeps its arched
   photograph and its faint lotus; nothing replaces the crescent. */

/* -------------------------------------------------------------- 2. PLEDGE */
.sh-home main .sh-pledge h2{
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.1;
  max-width:17ch;
}
.sh-home main .sh-pledge .wp-block-columns > .wp-block-column:first-child p{
  max-width:44ch;
  line-height:1.65;
}

/* Four promises, each with the line icon that carries its meaning. */
.sh-home main .sh-pledge-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 36px;
}
.sh-home main .sh-pledge-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:0;
  padding:0;
  font-size:16px;
  line-height:1.5;
  color:var(--wp--preset--color--ink);
}
.sh-home main .sh-pledge-list li::before{
  content:"";
  flex:0 0 auto;
  width:26px;
  height:26px;
  margin-top:1px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/leaf.svg") center/contain no-repeat;
          mask:url("assets/icons/leaf.svg") center/contain no-repeat;
}
.sh-home main .sh-pledge-list li:nth-child(1)::before{
  -webkit-mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
          mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
}
.sh-home main .sh-pledge-list li:nth-child(2)::before{
  -webkit-mask:url("assets/icons/consult.svg") center/contain no-repeat;
          mask:url("assets/icons/consult.svg") center/contain no-repeat;
}
.sh-home main .sh-pledge-list li:nth-child(3)::before{
  -webkit-mask:url("assets/icons/clock.svg") center/contain no-repeat;
          mask:url("assets/icons/clock.svg") center/contain no-repeat;
}
.sh-home main .sh-pledge-list li:nth-child(4)::before{
  -webkit-mask:url("assets/icons/droplet.svg") center/contain no-repeat;
          mask:url("assets/icons/droplet.svg") center/contain no-repeat;
}

/* -------------------------------------------------------------- 3. OFFERS */
/* A lotus watermark sat here until 2026-09-28. Thanh reported the tiles as
   "kind of broken", and this was why: the band is only as tall as its tallest
   tile, so the flower had nowhere to go except behind the fourth tile's words
   and across its top hairline — measured at 1280, the drawing crossed both.
   There is no room in this band for a watermark clear of the text, so it is
   gone rather than shrunk to a speck. The `position:relative` and the
   `z-index` wrapper that existed only to hold it behind the tiles went too. */
.sh-home main .sh-offers h2{
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.1;
}

/* The tiles lose their filled box. A hairline over each one, a copper
   numeral and open space do the separating instead, which is quieter and
   stops four equal cards being the whole idea. */
.sh-home main .sh-offer-row{
  align-items:stretch;
  gap:30px 40px;
}
.sh-home main .sh-offer{
  background:transparent;
  border:0;
  border-radius:0;
  border-top:1px solid var(--wp--preset--color--border);
  padding:26px 0 0;
  transition:border-top-color .25s ease;
}
.sh-home main .sh-offer:hover{
  /* The theme's card lift draws a soft rectangle shadow on hover. With the box
     gone that shadow floats under nothing and reads as a fault, so both the
     lift and the shadow are cancelled; the rule turning copper is the whole
     hover state. */
  transform:none;
  box-shadow:none;
  border-top-color:var(--wp--preset--color--copper);
}
.sh-home main .sh-offer .sonder-card-num{
  margin:0 0 10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  color:#885220;
}
.sh-home main .sh-offer h3{
  font-size:clamp(21px,1.8vw,26px);
  line-height:1.2;
  margin:0 0 10px;
}
.sh-home main .sh-offer > p:not(.sonder-card-num){
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  /* Ink for the same reason as the hero meta line: the watermark lotus passes
     behind the fourth tile, and muted falls to 4.07:1 there. */
  color:var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------- 4. STEPS */
/* A three-step explainer, sitting directly under the offer tiles on the same
   cream. The shallow arch that used to straddle this seam was removed on
   Thanh's instruction, 2026-09-28 — he read it as a stray curve. Nothing
   replaces it, so no division is drawn between the two bands. */
.sh-home main .sh-steps h2{
  font-size:clamp(28px,3vw,42px);
  line-height:1.1;
}
.sh-home main .sh-steps-list{
  list-style:none;
  counter-reset:sh-step;
  margin:var(--wp--preset--spacing--50) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 44px;
}
.sh-home main .sh-step{
  position:relative;
  margin:0;
  padding:0;
}
.sh-home main .sh-step::before{
  content:"";
  display:block;
  width:30px;
  height:30px;
  margin-bottom:16px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/booking.svg") center/contain no-repeat;
          mask:url("assets/icons/booking.svg") center/contain no-repeat;
}
.sh-home main .sh-step:nth-child(2)::before{
  -webkit-mask:url("assets/icons/consult.svg") center/contain no-repeat;
          mask:url("assets/icons/consult.svg") center/contain no-repeat;
}
.sh-home main .sh-step:nth-child(3)::before{
  -webkit-mask:url("assets/icons/leaf.svg") center/contain no-repeat;
          mask:url("assets/icons/leaf.svg") center/contain no-repeat;
}
/* The dotted hairline that used to tie one step to the next was removed on
   Thanh's instruction, 2026-09-28. Each step now stands alone under its icon. */
.sh-home main .sh-step-label{
  margin:0 0 8px;
  font-family:var(--wp--preset--font-family--forum);
  font-size:clamp(21px,1.8vw,26px);
  line-height:1.15;
  color:var(--wp--preset--color--green);
}
.sh-home main .sh-step-note{
  margin:0;
  max-width:34ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------- 5. TESTIMONIALS */
.sh-home main .sh-love h2{
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.1;
}
/* One quote leads at full width, two follow side by side — the weight is the
   point, and three equal cards was the templated answer. */
.sh-home main .sh-love-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 44px;
  align-items:start;
}
.sh-home main .sh-quote-feature{ grid-column:1 / -1; }
.sh-home main .sh-quote-feature .wp-block-quote{
  margin:0;
  padding:30px 0 0;
  border:0;
  border-top:1px solid var(--wp--preset--color--border);
}
.sh-home main .sh-quote-feature .wp-block-quote p{
  margin:0 0 18px;
  max-width:34ch;
  font-family:var(--wp--preset--font-family--forum);
  font-size:clamp(23px,2.5vw,33px);
  line-height:1.32;
  color:var(--wp--preset--color--green);
}
.sh-home main .sh-quote-small .wp-block-quote{
  margin:0;
  padding:22px 0 0;
  border:0;
  border-top:1px solid var(--wp--preset--color--border);
}
.sh-home main .sh-quote-small .wp-block-quote p{
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--wp--preset--color--ink);
}
.sh-home main .sh-love cite{
  display:block;
  text-transform:none;
  letter-spacing:normal;
  font-size:14px;
  font-weight:500;
  color:var(--wp--preset--color--green);
}
.sh-home main .sh-love cite .sonder-testimonial-source{
  font-weight:400;
  color:var(--wp--preset--color--muted);
}
/* "Rated 5.0 on Google", with five stars drawn from the same library.
   These are FILLED, not stroked, at Thanh's instruction 2026-09-28: five
   outline stars read as an empty rating, "zero out of five". This is the one
   deliberate exception to the stroke-only rule in
   `reference/icon-diagram-style.md`, and it is a rating mark rather than an
   icon. `icons/star.svg` is the outline version and is kept in the library. */
.sh-home main .sh-love .sonder-rating{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#885220;
}
.sh-home main .sh-love .sonder-rating::before{
  content:"";
  flex:0 0 auto;
  width:95px;
  height:19px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask-image:url("assets/icons/star-filled.svg");
  -webkit-mask-position:left center;
  -webkit-mask-size:19px 19px;
  -webkit-mask-repeat:repeat-x;
          mask-image:url("assets/icons/star-filled.svg");
          mask-position:left center;
          mask-size:19px 19px;
          mask-repeat:repeat-x;
}

/* ----------------------------------------------------------------- 6. CTA */
.sh-home main .sh-cta{ position:relative; overflow:hidden; }
.sh-home main .sh-cta-row{ align-items:center; }
.sh-home main .sh-cta-copy{ flex:1 1 62%; }
.sh-home main .sh-cta-action{ flex:0 0 auto; text-align:right; }
.sh-home main .sh-cta h2{
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.1;
  margin:0 0 12px;
}
.sh-home main .sh-cta-copy p{
  margin:0;
  max-width:46ch;
  font-size:17px;
}
/* The cream sprig, in the closing band of every page. Thanh liked it beside
   the home page's Book Online button and asked for it at the bottom of the
   rest. One set of rules, five page scopes, so it cannot drift between
   pages. Held to the centre rule like every other ornament, so it never
   drifts out to the window edge. */
.sh-home main .sh-cta,
.sh-services main .has-green-background-color,
.sh-about main .has-green-background-color,
.sh-policies main .has-green-background-color,
.sh-contact main .has-green-background-color{
  position:relative;
  overflow:hidden;
}
.sh-home main .sh-cta::before,
.sh-services main .has-green-background-color::before,
.sh-about main .has-green-background-color::before,
.sh-policies main .has-green-background-color::before,
.sh-contact main .has-green-background-color::before{
  content:"";
  position:absolute;
  right:max(16px, calc(50% - 700px));
  top:50%;
  transform:translateY(-50%);
  width:140px;
  height:140px;
  background-color:var(--wp--preset--color--cream);
  -webkit-mask:url("assets/icons/motif-sprig.svg") center/contain no-repeat;
          mask:url("assets/icons/motif-sprig.svg") center/contain no-repeat;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.sh-home main .sh-cta > *,
.sh-services main .has-green-background-color > *,
.sh-about main .has-green-background-color > *,
.sh-policies main .has-green-background-color > *,
.sh-contact main .has-green-background-color > *{
  position:relative;
  z-index:1;
}
.sh-home main .sh-cta > *{ position:relative; z-index:1; }

/* ------------------------------------------------------------ 7. NARROWER */
@media (max-width:1024px){
  .sh-home main .sh-hero-photo{ max-width:380px; }
  .sh-home main .sh-pledge-list{ gap:20px 26px; }
}

/* Below the width that fits four across, the tiles go two to a row instead of
   being squeezed into 160px columns. Four tiles need about 220px each to hold
   a title and a readable line of copy; under that they turn into a ragged
   column of three-word lines, which is how they were reported. */
@media (max-width:1120px){
  .sh-home main .sh-offer-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 40px;
  }
}

@media (max-width:781px){
  /* On a phone there is no room beside the words, so the ornaments shrink and
     sit inside the screen rather than filling the space behind the copy. */
  .sh-home main .sh-hero-photo{
    max-width:100%;
    margin:38px auto 0;
  }
  .sh-home main .sh-hero-photo img{ border-radius:150px 150px 14px 14px; }

  .sh-home main .sh-meta{ gap:6px 18px; }

  .sh-home main .sh-pledge-list{ grid-template-columns:1fr; gap:18px; }

  .sh-home main .sh-offer-row{ grid-template-columns:1fr; gap:26px; }
  .sh-home main .sh-offer{ padding-top:22px; }

  .sh-home main .sh-steps-list{ grid-template-columns:1fr; gap:28px; }
  .sh-home main .sh-step{ border-top:1px solid var(--wp--preset--color--border); padding-top:24px; }
  .sh-home main .sh-step-note{ max-width:46ch; }

  .sh-home main .sh-love-grid{ grid-template-columns:1fr; gap:30px; }
  .sh-home main .sh-quote-feature .wp-block-quote p{ max-width:34ch; }

  .sh-home main .sh-cta::before{
    right:var(--sh-ornament-gap);
    top:auto;
    bottom:-34px;
    transform:none;
    width:130px;
    height:130px;
    opacity:.16;
  }
  .sh-home main .sh-cta-action{ text-align:left; margin-top:26px; }

}

/* Under 1100px the hero's facts line sits too close to the band's foot: the
   lotus showed as a 20-50px sliver of petal tips, and stacked on a phone the
   photograph follows directly. Both measured 2026-09-28. */
@media (max-width:1099px){
  .sh-home main .sh-meta::after{ display:none; }

  /* The same corner placement for the sprig on the other four pages' green
     bands. Reviewed 2026-09-28: without it the 140px sprig sat mid-band from
     1024 down and ran behind the band's sentence and button. */
  .sh-services main .has-green-background-color::before,
  .sh-about main .has-green-background-color::before,
  .sh-policies main .has-green-background-color::before,
  .sh-contact main .has-green-background-color::before{
    right:var(--sh-ornament-gap, 16px);
    top:auto;
    bottom:-34px;
    transform:none;
    width:130px;
    height:130px;
    opacity:.16;
  }
}

@media (max-width:600px){
  .sh-home main .sh-love .sonder-rating{ font-size:11.5px; gap:10px; }
  .sh-home main .sh-love .sonder-rating::before{ width:80px; height:16px;
    -webkit-mask-size:16px 16px; mask-size:16px 16px; }
}

/* The reveal animation the theme already runs must not be defeated by a
   stacking context added above. */
.sh-home main .sonder-reveal{ will-change:opacity, transform; }

/* ==========================================================================
   SERVICES PAGE, DESIGN v2                                  2026-09-28
   --------------------------------------------------------------------------
   Every rule sits under `.sh-services`, which is on this page's <main> only.
   The approved direction is "price-forward rows": the page's job is to answer
   "what does it cost, and how long", so the price is the loudest thing in each
   row, not the quietest.

   The build script wrapped each service in `.sh-svc` and split its one-string
   price line ("$375 · 50 min") into `.sh-price` and `.sh-time`. No word, price,
   time or link was changed anywhere.

   Contrast, measured: the name and the price are `--green` on cream, very
   high. `.sh-time` is `--muted` #686053 on cream at 4.52:1 — it clears AA for
   small text with almost nothing to spare, so nothing may be drawn behind it.
   ========================================================================= */

/* ------------------------------------------------------ 1. THE PAGE HEAD */
/* Only the size changes. A `max-width` was tried here first and it broke the
   alignment: the theme gives every child of a constrained block an auto left
   and right margin the moment it has a max-width, so a measure on the heading
   slides it sideways out of line with the eyebrow above it. Measured on the
   render: the eyebrow sat at x=80 and the heading at x=57. Left as the theme
   lays it out — flush left, in line with the eyebrow and the intro. */
.sh-services main .entry-content > .wp-block-group:first-child h1{
  font-size:clamp(40px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.02em;
}

/* ------------------------------------------------------ 2. THE PRICE ROW */
/* Name left, price right, both on the first line; the description and the
   booking link run the full width beneath. There are no explicit grid rows:
   the two `grid-column` values put the first pair on row 1 by themselves, and
   a full-width child is what starts the next row. */
.sh-services main .sh-svc{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:44px;
  align-items:baseline;
  border-top:1px solid var(--wp--preset--color--border);
  padding-top:26px;
  margin-top:34px;
}
.sh-services main .sh-svc h3{
  grid-column:1;
  margin:0;
  font-size:clamp(21px,1.9vw,27px);
  line-height:1.2;
  max-width:26ch;
}
/* The price line. `.sonder-eyebrow` wants small copper capitals; this cancels
   that and lets the two spans inside set their own weight. */
.sh-services main .sh-svc h3 + p.sonder-eyebrow{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  margin:0;
  font-size:inherit;
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
  white-space:nowrap;
}
/* The price in copper, at Thanh's request 2026-09-28. It is the brand copper
   #b46c2b darkened by about 2 per cent to #b26a28, and the reason is measured,
   not taste: the raw brand copper is 2.99:1 on cream, and a large price needs
   3:1 — it misses by 0.01. #b26a28 reads 3.07:1 and is indistinguishable to
   the eye. A shade of a brand colour used as a contrast fix is allowed; a new
   hue would not be. */
.sh-services main .sh-price{
  font-family:var(--wp--preset--font-family--forum);
  font-size:clamp(25px,2.3vw,34px);
  line-height:1;
  color:#b26a28;
}
.sh-services main .sh-time{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}
.sh-services main .sh-svc > p:not(.sonder-eyebrow){
  grid-column:1 / -1;
  max-width:72ch;
  margin:14px 0 0;
  font-size:16px;
  line-height:1.65;
}

/* ------------------------------------------------- 3. THE SECTION BREAK */
/* Thanh, 2026-09-28: "Have the double lines a break between sections such as
   the procell microchanneling." A single hairline separates one service from
   the next, so a new SECTION had no stronger mark than a new row — the heading
   simply appeared among the hairlines. A section now opens on a double rule,
   and the first service under a heading drops its own single rule, so the
   heading is not underlined and the double line is unmistakably the break.
   `~` leaves the first section alone: it follows the page head, not a section. */
.sh-services main .sonder-menu-section h2{
  border-top:6px double var(--wp--preset--color--border);
  padding-top:52px;
}
/* The section's own heading is its first child and already follows the tab
   bar; only the headings BELOW it mark a break inside the tab. */
.sh-services main .sonder-menu-section > h2:first-child{
  border-top:0;
  padding-top:0;
}
/* Nothing draws its own single rule right under a double one. */
.sh-services main .sonder-menu-section h2 + .sh-svc,
.sh-services main .sh-svc.sh-first{
  border-top:0;
  padding-top:0;
  margin-top:30px;
}

/* --------------------------------------------------- 3. THE BOOKING LINK */
/* Thanh, 2026-09-28: "Leave the button as it was from the original." So the
   `is-style-outline` pill is untouched — no colour, border, padding, size or
   label change. An attempt to reduce all twenty-six to a quiet text link with
   an arrow was built and rendered, then withdrawn on his instruction. All that
   remains here is the space above the button; the wrapper's grid sets it, and
   the block's own 56px bottom margin was removed in the build so the two do
   not stack into a gap. */
.sh-services main .sh-svc > .wp-block-buttons{
  grid-column:1 / -1;
  padding-bottom:0;
  border-bottom:0;
  /* the theme sets 40px here with !important, so this needs one too */
  margin:22px 0 0 !important;
}

/* ---------------------------------------------------------- 4. NARROWER */
/* One column. The price must stop asking for `grid-column:2` — on a
   single-column grid that opens an implicit second column and squeezes the
   name into a sliver. */
@media (max-width:781px){
  .sh-services main .sh-svc{
    grid-template-columns:1fr;
    column-gap:0;
    padding-top:22px;
    margin-top:26px;
  }
  .sh-services main .sh-svc h3 + p.sonder-eyebrow{
    grid-column:1;
    align-items:flex-start;
    margin-top:10px;
  }
  .sh-services main .sh-svc h3{ max-width:none; }
  .sh-services main .sh-svc > p:not(.sonder-eyebrow){ margin-top:12px; }
}

/* ------------------------------------------------- 5. THE SECTION ICONS */
/* One line icon per section heading, from mockup/icons/. Painted as a CSS mask
   rather than an inline <svg>, because the WordPress site editor strips an
   svg placed inside a heading block; a mask survives it. The class on the
   heading is set in the build script by reading what the heading says, and it
   is what the rebuild carries over as `className`.
   Icons: leaf = skin treatments · sparkle = procell · brow-lash = brow and lash
   · droplet = waxing · nails = nails · add = add-ons · star = packages. */
.sh-services main .sonder-menu-section h2{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:clamp(30px,3vw,42px);
  line-height:1.1;
}
.sh-services main .sonder-menu-section h2::before{
  content:"";
  flex:0 0 auto;
  width:32px;
  height:32px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/leaf.svg") center/contain no-repeat;
          mask:url("assets/icons/leaf.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-sparkle::before{
  -webkit-mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
          mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-brow::before{
  -webkit-mask:url("assets/icons/brow-lash.svg") center/contain no-repeat;
          mask:url("assets/icons/brow-lash.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-wax::before{
  -webkit-mask:url("assets/icons/droplet.svg") center/contain no-repeat;
          mask:url("assets/icons/droplet.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-nails::before{
  -webkit-mask:url("assets/icons/nails.svg") center/contain no-repeat;
          mask:url("assets/icons/nails.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-add::before{
  -webkit-mask:url("assets/icons/add.svg") center/contain no-repeat;
          mask:url("assets/icons/add.svg") center/contain no-repeat;
}
.sh-services main h2.sh-ic-star::before{
  -webkit-mask:url("assets/icons/star.svg") center/contain no-repeat;
          mask:url("assets/icons/star.svg") center/contain no-repeat;
}
@media (max-width:781px){
  .sh-services main .sonder-menu-section h2{ gap:14px; }
  .sh-services main .sonder-menu-section h2::before{ width:26px; height:26px; }
}

/* ==========================================================================
   ABOUT PAGE, DESIGN v2                                     2026-09-28
   --------------------------------------------------------------------------
   Scoped under `.sh-about`, on this page's <main> only. Same page furniture
   as Services so the site reads as one thing: a section break drawn as a
   double rule, copper line icons, hairlines rather than boxes.
   ========================================================================= */

/* ------------------------------------------------------ 1. THE PAGE HEAD */
.sh-about main .entry-content > .wp-block-group:first-child h1{
  font-size:clamp(40px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.02em;
}
/* The photograph is left exactly as the live page shows it: square corners,
   no frame, no shadow, nothing behind it. An arched top and a copper crescent
   were built here first and withdrawn on Thanh's instruction 2026-09-28 —
   "I don't like how the portrait was cropped, leave it like how it was in the
   live page." Nothing is set for it at all, so the theme's own image rules
   are what you see. */
.sh-about main .sh-portrait{ position:relative; }

/* -------------------------------------------------- 2. THE SECTION BREAK */
/* NO double line on this page. Three were drawn at first, one before every
   top-level section, then cut to one before "Our standards" — and Thanh had
   that one removed too on 2026-09-28. The rule is deleted rather than set to
   `border-top:0`, so nothing is left to re-appear if a later rule changes the
   border shorthand. The About page separates its sections with space alone.
   The Services page keeps its double rules: Thanh asked for them there, and a
   26-service list needs a stronger break than the short About page does. */

/* ------------------------------------------------- 3. THE FIVE STANDARDS */
/* Five equal columns could not hold a value and its meaning; that is the
   shape Thanh called "kind of broken" on the home page. Two across, each
   under its own hairline, with the line icon that carries the meaning. */
.sh-about main .sh-values{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.sh-about main .sh-values .wp-block-column{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  column-gap:22px;
  align-items:start;
  border-top:1px solid var(--wp--preset--color--border);
  padding-top:22px;
}
.sh-about main .sh-values .wp-block-column::before{  grid-column:1;
  grid-row:1 / span 2;

  content:"";
  width:30px;
  height:30px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/heart.svg") center/contain no-repeat;
          mask:url("assets/icons/heart.svg") center/contain no-repeat;
}
.sh-about main .sh-values .wp-block-column:nth-child(2)::before{
  -webkit-mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
          mask:url("assets/icons/sparkle.svg") center/contain no-repeat;
}
.sh-about main .sh-values .wp-block-column:nth-child(3)::before{
  -webkit-mask:url("assets/icons/scales.svg") center/contain no-repeat;
          mask:url("assets/icons/scales.svg") center/contain no-repeat;
}
.sh-about main .sh-values .wp-block-column:nth-child(4)::before{
  -webkit-mask:url("assets/icons/consult.svg") center/contain no-repeat;
          mask:url("assets/icons/consult.svg") center/contain no-repeat;
}
.sh-about main .sh-values .wp-block-column:nth-child(5)::before{
  -webkit-mask:url("assets/icons/clock.svg") center/contain no-repeat;
          mask:url("assets/icons/clock.svg") center/contain no-repeat;
}
.sh-about main .sh-values h3{
  grid-column:2;
  margin:0 0 8px;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.2;
}
.sh-about main .sh-values p{
  grid-column:2;
  margin:0;
  font-size:15.5px;
  line-height:1.6;
}

@media (max-width:781px){
  .sh-about main .sh-values{ grid-template-columns:1fr; gap:26px; }
}

/* Reviewed 2026-09-28: the comment above says "two across, each under its own
   hairline", but the theme's `.sonder-card-row` box (paper fill, border,
   14px radius, 28px padding) and `.sonder-lift` hover still applied, so the
   page showed five full-width boxes, each holding one short line. The box is
   cancelled here and the grid made three across (three, then two), so each
   standard is a title and its line under a hairline — the stated intent. */
.sh-about main .sh-values .wp-block-column{
  background:none;
  border:0;
  border-top:1px solid var(--wp--preset--color--border);
  border-radius:0;
  padding:24px 0 0;
}
.sh-about main .sh-values .sonder-lift:hover{ transform:none; box-shadow:none; }
@media (min-width:782px){
  .sh-about main .sh-values{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 48px; }
}
@media (min-width:1100px){
  .sh-about main .sh-values{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---------------------------------------------- 4. WHY "SONDER" — THE MARK */
/* The one idea the studio is named for, so it is set as the page's quiet
   centrepiece rather than a paragraph: a small copper lotus (the logo's own
   flower, drawn to the icon rule), the heading and the definition centred
   on a short measure, the definition in Forum. Not one word changes. */
.sh-about main .sh-why{ text-align:center; }
.sh-about main .sh-why::before{
  content:"";
  display:block;
  width:48px;
  height:48px;
  margin:0 auto 14px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/lotus.svg") center/contain no-repeat;
          mask:url("assets/icons/lotus.svg") center/contain no-repeat;
}
.sh-about main .sh-why > p{
  max-width:34em;
  margin-left:auto !important;
  margin-right:auto !important;
  font-family:var(--wp--preset--font-family--forum);
  font-size:clamp(21px,2vw,26px);
  line-height:1.45;
  color:var(--wp--preset--color--green);
}
.sh-about main .sh-why > p em{ font-style:italic; }

/* ==========================================================================
   POLICIES PAGE, DESIGN v2                                  2026-09-28
   --------------------------------------------------------------------------
   One change, and it is a TAG change, not a word change: each rule's topic was
   a <span class="sonder-policy-title">, so it looked like a label but carried
   no heading semantics and the page could not be scanned or jumped through.
   The span becomes an <h2>, keeping its class. Thanh approved it. Every word,
   and the list structure, is untouched.
   ========================================================================= */
.sh-policies main .entry-content > .wp-block-group:first-child h1{
  font-size:clamp(40px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.02em;
}
/* The span's own quiet look was set by .sonder-policy-title; as an h2 it also
   inherits the theme's heading voice. This settles it as a heading the site's
   way — Forum, green — and drops the box the span used to sit in. */
.sh-policies main .sh-rule{
  margin:0 0 10px;
  font-family:var(--wp--preset--font-family--forum);
  font-size:clamp(21px,1.9vw,26px);
  font-weight:400;
  line-height:1.2;
  color:var(--wp--preset--color--green);
}
.sh-policies main .sonder-policy-body{
  border-top:1px solid var(--wp--preset--color--border);
  margin-top:26px;
  padding-top:22px;
}
.sh-policies main .sonder-policy-desc{
  max-width:74ch;
  font-size:16px;
  line-height:1.7;
}

/* ---------------------------------------- 4. THE LINE, AND THE ARTWORK */
/* Thanh, 2026-09-28: "No need for the line after the paragraph just the line
   after the number is fine." The line by the number is the design's own —
   a border on `.sonder-policy-body`, which starts to the right of the number.
   The line after the paragraph belongs to the theme, on `.sonder-policy-list
   li`. Only the theme's goes. */
.sh-policies main .sonder-policy-list li{
  border-bottom:0;
  padding:22px 0;
}
/* A copper line icon on each rule's topic, so six rules can be told apart at a
   glance and not only by their numbers. Painted as a mask, like every other
   icon on the site, because the WordPress editor strips an inline svg. */
.sh-policies main .sonder-policy-title::before{
  content:"";
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:12px;
  vertical-align:-3px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/clock.svg") center/contain no-repeat;
          mask:url("assets/icons/clock.svg") center/contain no-repeat;
}
.sh-policies main .sonder-policy-list li:nth-child(2) .sonder-policy-title::before{
  -webkit-mask:url("assets/icons/booking.svg") center/contain no-repeat;
          mask:url("assets/icons/booking.svg") center/contain no-repeat;
}
.sh-policies main .sonder-policy-list li:nth-child(3) .sonder-policy-title::before{
  -webkit-mask:url("assets/icons/card.svg") center/contain no-repeat;
          mask:url("assets/icons/card.svg") center/contain no-repeat;
}
.sh-policies main .sonder-policy-list li:nth-child(4) .sonder-policy-title::before{
  -webkit-mask:url("assets/icons/guests.svg") center/contain no-repeat;
          mask:url("assets/icons/guests.svg") center/contain no-repeat;
}
.sh-policies main .sonder-policy-list li:nth-child(5) .sonder-policy-title::before{
  -webkit-mask:url("assets/icons/shield.svg") center/contain no-repeat;
          mask:url("assets/icons/shield.svg") center/contain no-repeat;
}
.sh-policies main .sonder-policy-list li:nth-child(6) .sonder-policy-title::before{
  -webkit-mask:url("assets/icons/exchange.svg") center/contain no-repeat;
          mask:url("assets/icons/exchange.svg") center/contain no-repeat;
}
/* The page head gets a faint lotus in its empty right-hand side — held to the
   centre rule the other pages use, so it never drifts to the window edge. */
.sh-policies main .entry-content > .wp-block-group:first-child{
  position:relative;
  overflow:hidden;
}
.sh-policies main .entry-content > .wp-block-group:first-child > *{ position:relative; z-index:1; }
.sh-policies main .entry-content > .wp-block-group:first-child::after{
  content:"";
  position:absolute;
  right:max(16px, calc(50% - 700px));
  top:50%;
  transform:translateY(-50%);
  width:240px;
  height:295px;
  background:url("assets/icons/motif-lotus.svg") center/contain no-repeat;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}

/* ==========================================================================
   CONTACT PAGE, DESIGN v2                                   2026-09-28
   --------------------------------------------------------------------------
   Scoped under `.sh-contact`. Every fact on this page — address, phone, email,
   hours — is the live page's own, untouched. The only markup change is an
   icon class on each of the three headings.
   ========================================================================= */
.sh-contact main .entry-content > .wp-block-group:first-child{
  position:relative;
  overflow:hidden;
}
.sh-contact main .entry-content > .wp-block-group:first-child > *{ position:relative; z-index:1; }
.sh-contact main .entry-content > .wp-block-group:first-child h1{
  font-size:clamp(40px,5.4vw,68px);
  line-height:1.05;
  letter-spacing:-.02em;
}
/* A faint lotus in the head, beside the "Book online 24/7" button — the one
   part of the head with an empty right side. Thanh, 2026-09-28: the intro
   sentence must use the full width, so on this page the words keep no lane.
   The lotus hangs from the button row instead: it starts level with the
   button, sits at the content's right edge (never the window's) and the
   band's overflow crops its stem. Below 782px the button row is too narrow. */
.sh-contact main .entry-content > .wp-block-group:first-child > .wp-block-buttons::after{
  content:"";
  position:absolute;
  right:0;
  top:-18px;
  width:170px;
  height:209px;
  background:url("assets/icons/motif-lotus.svg") center top/contain no-repeat;
  opacity:.16;
  pointer-events:none;
}
@media (max-width:781px){
  .sh-contact main .entry-content > .wp-block-group:first-child > .wp-block-buttons::after{ display:none; }
}

/* THE LOTUS LANE — Policies and Shop heads (Contact moved its lotus instead). Reviewed 2026-09-28: the
   head lotus ran behind the intro at 1280 and behind the whole head at 390.
   Now the lotus is centred in its band (it was cropped by the band's top
   edge), and the words keep 260px clear on the right, so the two never meet.
   `padding-right`, not `max-width`: a max-width makes the theme's
   constrained layout centre the element (the Services head trap).
   Under 1100px there is no empty side to hold it, so it goes. */
.sh-policies main .entry-content > .wp-block-group:first-child > :not(.wp-block-buttons),
.sh-shop main .sonder-shop-intro > *{
  padding-right:260px;
  box-sizing:border-box;
}
@media (max-width:1099px){
  .sh-policies main .entry-content > .wp-block-group:first-child::after,
  .sh-shop main .sonder-shop-intro::after{ display:none; }
  .sh-policies main .entry-content > .wp-block-group:first-child > :not(.wp-block-buttons),
  .sh-shop main .sonder-shop-intro > *{ padding-right:0; }
}
/* One line icon per block, so the page reads as three answers — where, how to
   reach us, and when — instead of three bold sentences. */
.sh-contact main h3{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.2;
}
.sh-contact main h3::before{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:24px;
  background-color:var(--wp--preset--color--copper);
  -webkit-mask:url("assets/icons/location.svg") center/contain no-repeat;
          mask:url("assets/icons/location.svg") center/contain no-repeat;
}
.sh-contact main h3.sh-ic-email::before{
  -webkit-mask:url("assets/icons/email.svg") center/contain no-repeat;
          mask:url("assets/icons/email.svg") center/contain no-repeat;
}
.sh-contact main h3.sh-ic-clock::before{
  -webkit-mask:url("assets/icons/clock.svg") center/contain no-repeat;
          mask:url("assets/icons/clock.svg") center/contain no-repeat;
}
/* The hours table: hairlines only, no box, so it reads as a list of times. */
.sh-contact main table{ border-collapse:collapse; width:100%; }
.sh-contact main table td,
.sh-contact main table th{
  border:0;
  border-bottom:1px solid var(--wp--preset--color--border);
  padding:12px 0;
  font-size:16px;
}
/* The times run to the right edge of the column, so the table fills its side
   of the page instead of stopping short and leaving a gap — Thanh, 2026-09-28.
   Day names hold the left, times hold the right, and both columns straddle the
   full width whatever the window is. */
.sh-contact main table td:last-child,
.sh-contact main table th:last-child{ text-align:right; }
.sh-contact main table tr:last-child td{ border-bottom:0; }

/* Two groups in the left column, so they get a group's worth of space: the
   "Get in touch" heading sat 20px under the Maps link and read as part of the
   address. Reviewed 2026-09-28. */
.sh-contact main h3.sh-ic-email{ margin-top:44px; }

/* The studio's own sign, under the contact details. A real photograph, not
   artwork: it is what a first-time client looks for when they walk into
   Phenix Salon Suites, and it fills the left column's empty lower half.
   Source: `raw/photos/room.jpg`, copied unchanged to `mockup/photos/`. */
.sh-contact main .sh-studio-photo{ margin:40px 0 0; }
.sh-contact main .sh-studio-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:14px;
}

/* ==========================================================================
   SHOP ARCHIVE, DESIGN v2                                   2026-09-28
   --------------------------------------------------------------------------
   CSS only — this surface gets no markup change at all. The Shop has no
   wp-pages/ file, so the real rebuild is the THEME, not a page: the same
   stylesheet block, without the mockup's page class.
   ========================================================================= */
.sh-shop main .sonder-shop-intro{ position:relative; overflow:hidden; }
.sh-shop main .sonder-shop-intro > *{ position:relative; z-index:1; }
.sh-shop main .sonder-shop-intro h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.06;
  letter-spacing:-.02em;
}
/* the same faint lotus as the Policies and Contact heads: centred in the band,
   in the lane the words keep clear (see THE LOTUS LANE) */
.sh-shop main .sonder-shop-intro::after{
  content:"";
  position:absolute;
  right:max(16px, calc(50% - 700px));
  top:50%;
  transform:translateY(-50%);
  width:240px;
  height:295px;
  background:url("assets/icons/motif-lotus.svg") center/contain no-repeat;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
/* ---- the product grid: the shelf itself -------------------------------- */
/* Reviewed 2026-09-28: four rules here matched nothing in the rendered page
   (`.wc-block-grid__product`, `.wc-block-grid__product-title`, the brand
   `h2` and the blurb measure) and were removed. The grid is WooCommerce's
   product-collection block: cards are `li.wc-block-product`, titles are
   `.wp-block-post-title`.

   Tried and withdrawn 2026-09-28: `mix-blend-mode:multiply` on the photos, to
   even out their two backgrounds (pure white, pale studio grey). White became
   paper, but the grey went a muddy taupe and the shelf read patchier than
   before. The real fix is the photos themselves — one background for all. */
.sh-shop main .wc-block-grid__product-image img{
  border:1px solid var(--wp--preset--color--border);
  background:var(--wp--preset--color--paper);
}
/* The price in the site's copper, matching the Services menu. Small text here,
   so it is #885220 — the accessible copper, 5.34:1 on the card's paper — not
   the raw brand copper, which is 3.41:1 on paper and would fail at this size. */
.sh-shop main .woocommerce-Price-amount{
  color:#885220;
  font-weight:500;
}
.sh-shop main .wc-block-components-product-button__button{
  width:100%;
  margin-top:10px;
}
/* The sort menu pushed the page 33px sideways at 320px, on live as well —
   measured 2026-09-28. Let it shrink with the row. */
.sh-shop main .wc-block-catalog-sorting,
.sh-shop main .woocommerce-ordering{ min-width:0; max-width:100%; }
.sh-shop main .woocommerce-ordering select{ max-width:100%; }