/*
  Blanc Ceramic — SimplyBook booking site Custom CSS (v2, 2026-10-19)
  Brand: Bisque #FFFAF0 | CTA Clay Loam Deep #8A6E4B | Text #3A2E1F | Links #6E5535
  Old v1 rules (#events / .timeline / ui-widget, written for the retired theme) removed —
  backup: _RELAY_中转站/SIMPLYBOOK_CUSTOM_CSS_BACKUP_2026-10-18.css
*/

/* 2026-10-19 · Home readability (A-統籌①b) — scoped to home-only blocks.
   Hero = umber panel + bisque text; contacts = bisque panel + brand links;
   cookie bar = one line, Accept and Necessary-only equally easy.
   CTA = Clay Loam Deep #8A6E4B (AA 4.57:1), hover #3A2E1F, radius 2px. */

#main-buttons .inner {
  max-width: 640px;
  margin: 48px 0 0 !important;
  padding: 36px 40px 40px !important;
  background: rgba(58, 46, 31, 0.9) !important;
  border-radius: 0;
  text-align: left !important;
}
#main-buttons #main_description,
#main-buttons #about-us .txt {
  color: #FFFAF0 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  text-align: left !important;
  text-shadow: none !important;
}
#main-buttons .bar.buttons_wrap {
  margin-top: 24px !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
#main_buttons_book_btn.main_btn {
  background: #8A6E4B !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #FFFAF0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  min-height: 48px;
  line-height: 48px !important;
  padding: 0 32px !important;
}
#main_buttons_book_btn.main_btn:hover { background: #3A2E1F !important; }
#main_buttons_book_btn.main_btn:focus-visible {
  outline: 2px solid #FFFAF0;
  outline-offset: 3px;
}

#contacts_data { opacity: 1 !important; transform: none !important; }
#contacts_data > .row {
  margin: 32px 0 48px !important;
  padding: 24px !important;
  background: #FFFAF0 !important;
  border-radius: 0;
}
#contacts_data #sb_map,
#contacts_data #map-view,
#contacts_data iframe { opacity: 1 !important; }
#contacts_data #contacts,
#contacts_data #contacts .info,
#contacts_data #contacts li { color: #3A2E1F !important; }
#contacts_data #contacts .icon { color: #8A6E4B !important; opacity: 1 !important; }
#contacts_data #contacts a {
  color: #6E5535 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contacts_data #contacts a:hover { color: #3A2E1F !important; }

#sb_cookies_block {
  background: #FFFAF0 !important;
  border-top: 1px solid #DDD0BE;
  color: #3A2E1F !important;
}
#sb_cookies_block .wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px !important;
}
#sb_cookies_block .text { font-size: 14px !important; margin: 0 !important; }
#sb_cookies_block .text a { color: #6E5535 !important; text-decoration: underline; }
#sb_cookies_block .buttons {
  display: flex !important;
  gap: 8px;
  margin: 0 !important;
}
#sb_cookies_block #sb_necessary_important_coo,
#sb_cookies_block #sb_accept_important_coo {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 18px !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
}
#sb_cookies_block #sb_necessary_important_coo {
  background: transparent !important;
  border: 1px solid #6E5535 !important;
  color: #6E5535 !important;
}
#sb_cookies_block #sb_accept_important_coo {
  background: #8A6E4B !important;
  border: 1px solid #8A6E4B !important;
  color: #FFFAF0 !important;
}

@media (max-width: 767px) {
  #main-buttons .inner {
    margin: 24px 0 0 !important;
    padding: 28px 24px 32px !important;
  }
  #main-buttons #main_description,
  #main-buttons #about-us .txt { font-size: 16px !important; }
  #main_buttons_book_btn.main_btn { display: block !important; text-align: center; }
  #contacts_data > .row { margin: 24px 0 32px !important; padding: 16px !important; }
  #sb_cookies_block .wrapper { gap: 10px; }
  #sb_cookies_block .text { font-size: 13px !important; text-align: center; }
  #sb_cookies_block .buttons { width: 100%; flex-direction: column; }
  #sb_cookies_block #sb_necessary_important_coo,
  #sb_cookies_block #sb_accept_important_coo { width: 100%; justify-content: center; white-space: normal; }
}

/* 2026-10-19 · Inner pages (A-統籌①b): booking steps, classes, memberships, gift cards, client area.
   Plain Bisque page (photo stays on Home only), white cards with a hairline, umber text,
   CTA #8A6E4B (AA), links #6E5535 (AA), no default blue, no pink weekends.
   Home = #sb_main.page--index. Prefix "#sb-main-container #sb_content" beats the theme's "#sb_content.masked …" rules. */

#sb_main:not(.page--index) #sb-main-container,
#sb_main:not(.page--index) #sb_content.masked {
  background: #FFFAF0 !important;
  background-image: none !important;
}
#sb-main-container #sb_booking_company_time { display: none !important; }

/* headings + text */
#sb_main:not(.page--index) #sb_content .title-main {
  color: #3A2E1F !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
#sb_main:not(.page--index) #sb_content .filter--header_title { font-size: 18px !important; }
#sb_main:not(.page--index) #sb_content,
#sb_main:not(.page--index) #sb_content p { color: #3A2E1F; }

/* links (no default blue) */
#sb-main-container #sb_content a:not(.btn):not(.main_btn),
#sb-main-container #sb_content .read-more,
#sb-main-container #sb_content .read-more .part,
#sb-main-container #sb_content .read-more i,
#sb-main-container #sb_content #sb_back_button a,
#sb-main-container #sb_content #sb_back_button a span,
#sb-main-container #sb_content #sb_booking_info .title-sub { color: #6E5535 !important; }

/* cards */
#sb-main-container #sb_content .panel {
  background: #FFFFFF !important;
  border: 1px solid #E6DCCB !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sb-main-container #sb_content .panel .title,
#sb-main-container #sb_content .panel .title a,
#sb-main-container #sb_content .panel .title-txt {
  color: #3A2E1F !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
#sb-main-container #sb_content .panel,
#sb-main-container #sb_content .panel .description,
#sb-main-container #sb_content .panel .info-bar { color: #3A2E1F !important; }
#sb-main-container #sb_content .badge.price,
#sb-main-container #sb_content .price .badge,
#sb-main-container #sb_content .panel .price { color: #6E5535 !important; font-weight: 600 !important; }
/* gift cards: hide the "DISCOUNT £xx" tag (price is shown below it) */
#sb_main.page--gift-card #sb_content .promotion-item__tag { display: none !important; }

/* buttons */
#sb-main-container #sb_content .btn.select,
#sb-main-container #sb_content .btn.custom,
#sb-main-container #sb_content .btn.price-formatter,
#sb-main-container #sb_content .btn-primary {
  background: #8A6E4B !important;
  border-color: #8A6E4B !important;
  color: #FFFAF0 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  min-height: 44px;
}
#sb-main-container #sb_content .btn.select:hover,
#sb-main-container #sb_content .btn.custom:hover,
#sb-main-container #sb_content .btn.price-formatter:hover,
#sb-main-container #sb_content .btn-primary:hover { background: #3A2E1F !important; border-color: #3A2E1F !important; }
#sb-main-container #sb_content .btn:focus-visible,
#sb-main-container #sb_content a:focus-visible { outline: 2px solid #3A2E1F !important; outline-offset: 2px; }

/* calendar + time slots */
#sb-main-container #sb_content .calendar .name.is-holiday { color: #3A2E1F !important; }
#sb-main-container #sb_content .calendar .date a.sb-available-date { color: #3A2E1F !important; }
#sb-main-container #sb_content .calendar .date.selected,
#sb-main-container #sb_content .calendar .date.selected a.sb-available-date { background: #8A6E4B !important; color: #FFFAF0 !important; }
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.free {
  background: #F8EBA2 !important;
  color: #3A2E1F !important;
  border: 1px solid #E6C778 !important;
  border-radius: 0 !important;
  font-weight: 600;
}
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.free:hover,
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.selected {
  background: #8A6E4B !important;
  border-color: #8A6E4B !important;
  color: #FFFAF0 !important;
}
#sb-main-container #sb_content .container-caption { color: #3A2E1F !important; font-weight: 600 !important; }

/* Side menu + footer (all pages): theme uses #A4855D text / bar = below AA */
#sb_menu #sb_menu_list_items_container li a { color: #6E5535 !important; }
#sb_menu #sb_menu_list_items_container li.active a { color: #3A2E1F !important; font-weight: 600 !important; }
#sb-main-container #footer, #sb-main-container #footer.masked { background: #3A2E1F !important; }
#sb-main-container #footer a { color: #FFFAF0 !important; text-decoration: underline; text-underline-offset: 3px; }

/* Membership cards on phones: theme pushes "Read more" outside the card */
@media (max-width: 767px) {
  #sb-main-container #sb_content .membership-item .one-line { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  #sb-main-container #sb_content .membership-item .btn-bar { margin: 16px 0 0 !important; width: 100% !important; justify-content: flex-end !important; align-items: center !important; flex-direction: row !important; gap: 12px; }
}

/* ---- Round 2 (council 10/19: brand / UX / a11y all 7 → fixes) ---- */
/* home hero: room from the side menu, sentence-case CTA, hover keeps its edge */
@media (min-width: 768px) {
  #main-buttons .inner { margin: 64px 0 0 clamp(24px, 5vw, 72px) !important; }
}
#main_buttons_book_btn.main_btn { text-transform: none !important; letter-spacing: 0.01em !important; }
#main_buttons_book_btn.main_btn:hover { background: #6E5535 !important; }

/* step bar: theme fades future steps to 30% */
#sb-main-container #sb_content #sb_booking_info li.step_info_item a { opacity: 1 !important; }
#sb-main-container #sb_content #sb_booking_info li.step_info_item .title-small,
#sb-main-container #sb_content #sb_booking_info li.step_info_item .title-sub { color: #7D6B57 !important; }
#sb-main-container #sb_content #sb_booking_info li.passed .title-small,
#sb-main-container #sb_content #sb_booking_info li.passed .title-sub { color: #6E5535 !important; }
#sb-main-container #sb_content #sb_booking_info li.active .title-small { color: #3A2E1F !important; font-weight: 600 !important; }

/* back link: theme draws a white arrow image (invisible on Bisque) → plain text arrow */
#sb-main-container #sb_content #sb_back_button a::before,
#sb-main-container #sb_content #sb_back_button a .fa { display: none !important; }
#sb-main-container #sb_content #sb_back_button a span:last-child::before { content: "\2190\00a0"; }

/* titles left-aligned (design system: don't centre everything) */
#sb_main:not(.page--index) #sb_content .title-main { text-align: left !important; }

/* qty −/+ : bigger targets */
#sb-main-container #sb_content .sb_group_count {
  min-width: 36px !important; min-height: 36px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-color: #C9BBA6 !important; color: #3A2E1F !important;
}
#sb-main-container #sb_content .sb-group-counter-input-div { min-height: 36px; display: inline-flex !important; align-items: center; justify-content: center; }

/* time slots: 44px tall; hover = outline only (selected stays solid) */
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell { min-height: 44px; }
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.free:hover {
  background: #F8EBA2 !important; color: #3A2E1F !important;
  border-color: #8A6E4B !important; box-shadow: inset 0 0 0 1px #8A6E4B;
}

/* gift-card prices same tone as service prices */
#sb-main-container #sb_content .promotion-item .info-bar [class*="price"] { color: #6E5535 !important; font-weight: 600; }

/* cart / account buttons (owner 10/19: "這個位置有點醜"): brown circles → quiet outlined squares,
   dark line icons (theme icons are white SVGs → filter to dark), small counter */
#sb_main .sb-cart-btn,
#sb_main #sb_client_info.avatar {
  background: #FFFFFF !important;
  border: 1px solid #D9CCB8 !important;
  border-radius: 0 !important;
  transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
#sb_main .sb-cart-btn:hover,
#sb_main #sb_client_info.avatar:hover { border-color: #8A6E4B !important; }
#sb_main .sb-cart-btn::before,
#sb_main #sb_client_info .logged-out::before,
#sb_main #sb_client_info .logged-in::before {
  background-color: transparent !important;
  border-radius: 0 !important;
  filter: brightness(0);
  opacity: 0.78;
}
/* the dark tick badge on the account button (owner 10/19: 很醜) → hidden */
#sb_main #sb_client_info .login-container__remember-check { display: none !important; }
/* cart icon (owner 10/19: 線條太複雜) → one simple tote-bag line icon, 1.5px stroke */
#sb_main .sb-cart-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2E1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
#sb_main .sb-cart-btn > i.fa { display: none !important; }
#sb_main .sb-cart-btn .sb-qty {
  background: #F3ECDF !important;
  color: #3A2E1F !important;
  border: 1px solid #D9CCB8;
  min-width: 18px; height: 18px !important;
  font-size: 11px !important; font-weight: 600;
}

/* links that sit on dark/active fills keep light text */
#sb-main-container #sb_content .dropdown-menu .active > a,
#sb-main-container #sb_content .nav-pills .active > a,
#sb-main-container #sb_content .pagination .active > a { color: #FFFAF0 !important; }

/* focus rings everywhere */
#sb_cookies_block #sb_necessary_important_coo:focus-visible,
#sb_cookies_block #sb_accept_important_coo:focus-visible,
#sb_book_btn:focus-visible,
#sb_multiple_booking_btn:focus-visible,
#sb_menu a:focus-visible,
.sb-cart-btn:focus-visible { outline: 2px solid #3A2E1F !important; outline-offset: 2px; }
#sb-main-container #footer a:focus-visible { outline: 2px solid #FFFAF0 !important; outline-offset: 2px; }

/* phone cookie bar: compact, two buttons side by side */
@media (max-width: 767px) {
  #sb_cookies_block .wrapper { padding: 10px 12px !important; gap: 8px; }
  #sb_cookies_block .text { font-size: 12.5px !important; text-align: left !important; line-height: 1.45; }
  #sb_cookies_block .buttons { flex-direction: row !important; }
  #sb_cookies_block #sb_necessary_important_coo,
  #sb_cookies_block #sb_accept_important_coo {
    flex: 1 1 0; width: auto !important; padding: 4px 10px !important;
    font-size: 13px !important; line-height: 1.2; text-align: center;
  }
}

/* info notices (e.g. My Bookings "no appointments yet"): no Bootstrap grey/blue */
#sb-main-container #sb_content .alert-info {
  background: #F3ECDF !important; color: #3A2E1F !important;
  border: 1px solid #E6DCCB !important; border-radius: 0 !important;
}

/* ---- Round 3 (council re-score 7.5–8) ---- */
/* step bar: same font as page, breathing room above the page title */
#sb-main-container #sb_content #sb_booking_info .title-small,
#sb-main-container #sb_content #sb_booking_info .title-sub { font-family: inherit !important; }
#sb_main:not(.page--index) #sb_content #sb_booking_info { margin-bottom: 24px !important; }
/* phones: theme hides the "Read more" label → say what the chevron opens */
@media (max-width: 767px) {
  #sb-main-container #sb_content .wrap-read-more,
  #sb-main-container #sb_content .wrap-read-more .read-more { width: auto !important; min-width: 0 !important; max-width: none !important; }
  #sb-main-container #sb_content .wrap-read-more .read-more { min-height: 44px; padding: 0 12px !important; display: inline-flex !important; align-items: center; white-space: nowrap; }
  #sb-main-container #sb_content .read-more::after { content: "Details"; margin-left: 6px; font-size: 14px; font-weight: 600; color: #6E5535; }
}
/* contacts: Instagram tile without the grey-blue fill */
#contacts_data #contacts .social a.btn {
  background: transparent !important; border: 1px solid #E6DCCB !important;
  border-radius: 0 !important; color: #6E5535 !important;
}

/* ---- Round 4 · match www.blanceramic.com (owner 10/19: 貼近官網) ---- */
/* same HarmonyOS files the Framer site serves (CORS: *) */
@font-face { font-family: "Blanc Harmony"; font-style: normal; font-weight: 300; font-display: swap; src: url("https://framerusercontent.com/assets/ITAcL2sTmA1KPk0GkwLGjCRbM.woff2") format("woff2"); }
@font-face { font-family: "Blanc Harmony"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://framerusercontent.com/assets/KbEq1vy5jbM951GFXoNqxFPu0o.woff2") format("woff2"); }
@font-face { font-family: "Blanc Harmony"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://framerusercontent.com/assets/OW57xiEhPg0VFFydtLKUHXrGY.woff2") format("woff2"); }
body, #sb_main, #sb_main h1, #sb_main h2, #sb_main h3, #sb_main h4, #sb_main h5, #sb_main p,
#sb_main button, #sb_main input, #sb_main select, #sb_main textarea, #sb_main .btn, #sb_main label,
#sb_cookies_block, #sb_cookies_block * { font-family: "Blanc Harmony", OpenSans, Arial, sans-serif !important; }
#sb_main:not(.page--index) #sb_content .title-main { font-weight: 700 !important; font-size: 32px !important; letter-spacing: -0.01em; }

/* cards like the site: Bisque with a hairline, square corners, regular-weight names, bold price */
#sb-main-container #sb_content .panel { background: transparent !important; border-color: #E2D6C3 !important; }
#sb-main-container #sb_content .panel .title,
#sb-main-container #sb_content .panel .title a,
#sb-main-container #sb_content .panel .title-txt { font-weight: 400 !important; font-size: 20px !important; letter-spacing: -0.005em; }
#sb-main-container #sb_content .badge.price,
#sb-main-container #sb_content .panel .price { font-weight: 700 !important; }
/* buttons: site label style (regular, sentence case) */
#sb-main-container #sb_content .btn.select,
#sb-main-container #sb_content .btn.custom,
#sb-main-container #sb_content .btn.price-formatter,
#sb-main-container #sb_content .btn-primary,
#sb_book_btn, #main_buttons_book_btn.main_btn { font-weight: 400 !important; font-size: 15px !important; letter-spacing: 0.02em !important; text-transform: none !important; }

/* category list: description shown on the card (no hidden "Read more"); Taster first, Membership last */
#sb_main #sb_category_step_container { display: flex !important; flex-direction: column; }
#sb_main #sb_category_step_container .category-item:has(.btn.select[href*="/category/9/"]) { order: -1; }
#sb_main #sb_category_step_container .category-item:has(.btn.select[href*="/category/5/"]) { order: 1; }
#sb_main #sb_category_step_container .category-item:has(.btn.select[href*="/category/3/"]) { order: 2; }
#sb_main #sb_category_step_container .category-item:has(.btn.select[href*="/category/4/"]) { order: 3; }
#sb_main .category-item .wrap-collapse-content { display: block !important; height: auto !important; }
#sb_main .category-item .wrap-read-more { display: none !important; }
#sb_main .category-item .collapse-content { color: #5A4A38 !important; font-size: 15px; line-height: 1.55; }
#sb_main .category-item .collapse-content .btn-bar-full-info { display: none !important; }
#sb_main .category-item .collapse-content::before { display: none !important; }
#sb_main .category-item.panel { display: flex !important; flex-direction: column; }
#sb_main .category-item .wrap-collapse-content { order: 2; padding: 0 16px 16px; }
#sb_main .category-item .collapse-content { padding-top: 0 !important; }
@media (min-width: 768px) {
  #sb_main .category-item .one-line .content { min-height: 0 !important; }
  #sb_main .category-item .one-line .btn-bar { padding-bottom: 0 !important; }
  #sb_main .category-item .wrap-collapse-content { margin-top: -22px; padding: 0 200px 18px 0 !important; }
}
@media (max-width: 767px) {
  #sb_main .category-item .mobile-title { order: 0; }
  #sb_main .category-item .wrap-collapse-content { order: 1; padding: 0 16px 4px; }
  #sb_main .category-item .one-line { order: 2; }
}

/* step bar: hide "Service add-ons" and "Provider" (6-step flow only; theme gives steps no own class).
   The add-on page itself still appears for services that have add-ons — only the label in the bar goes. */
#sb_main #sb_booking_info li.step_info_item:nth-child(3):nth-last-child(4),
#sb_main #sb_booking_info li.step_info_item:nth-child(4):nth-last-child(3) { display: none !important; }

/* calendar: unavailable days in warm grey, not the theme's blue-grey */
#sb-main-container #sb_content .calendar .date .day-off { color: #B9AC9A !important; }

/* phone header (owner 10/19: 三橫線): three matching 40px outlined squares on one line — only where the theme shows the menu button (≤1024px) */
@media (max-width: 1024px) {
  #sb_main #header .logo_wrap { align-items: center !important; }
  #sb_main #header .items-wrapper { align-items: center !important; gap: 8px; }
  #sb_main #header .nav-trigger { align-self: center !important; width: 40px !important; height: 40px !important; margin-left: 8px !important; align-items: center; justify-content: center; }
  #sb_main #header .hamburger {
    width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center; position: relative;
    background: #FFFFFF !important; border: 1px solid #D9CCB8 !important; border-radius: 0 !important;
  }
  #sb_main #header .hamburger:hover { border-color: #8A6E4B !important; }
  #sb_main #header .hamburger-box { position: relative !important; left: auto !important; top: auto !important; width: 18px !important; height: 12px !important; }
  #sb_main #header .hamburger-inner,
  #sb_main #header .hamburger-inner::before,
  #sb_main #header .hamburger-inner::after { width: 18px !important; height: 1.5px !important; border-radius: 0 !important; }
  #sb_main #header .hamburger-inner { top: 50% !important; margin-top: -0.75px !important; }
  #sb_main #header .hamburger:not(.is-active) .hamburger-inner,
  #sb_main #header .hamburger-inner::before,
  #sb_main #header .hamburger-inner::after { background-color: #3A2E1F !important; }
  #sb_main #header .hamburger:not(.is-active) .hamburger-inner::before { top: -5px !important; }
  #sb_main #header .hamburger:not(.is-active) .hamburger-inner::after { top: 5px !important; }
}
/* cart counter: small, top-right, out of the way */
#sb_main .sb-cart-btn .sb-qty { top: -6px !important; right: -6px !important; bottom: auto !important; left: auto !important; min-width: 16px !important; height: 16px !important; font-size: 10px !important; padding: 0 4px !important; }

/* focus rings for the header buttons (a11y council) */
#sb_main #header .hamburger:focus-visible,
#sb_main #sb_client_info .logged-out:focus-visible,
#sb_main #sb_client_info.avatar:focus-visible { outline: 2px solid #3A2E1F !important; outline-offset: 2px; }

/* ---- Round 5 (council round 4: brand 7.5–8 / UX 7–7.5 / a11y 8) ---- */
/* white blocks → Bisque with hairline, like the site's cards */
#sb-main-container #sb_content #sb_dateview_container,
#sb-main-container #sb_content .timeline-wrapper { background: transparent !important; border: 1px solid #E2D6C3 !important; border-radius: 0 !important; box-shadow: none !important; }
#sb_main .sb-cart-btn, #sb_main #sb_client_info.avatar { background: transparent !important; }
@media (max-width: 1024px) { #sb_main #header .hamburger { background: transparent !important; } }
/* time slots = outlined like the site's cards; yellow only on hover; solid when chosen */
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.free {
  background: transparent !important; border: 1px solid #8A6E4B !important; box-shadow: none !important; font-weight: 400 !important;
}
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.free:hover { background: #F8EBA2 !important; border-color: #8A6E4B !important; box-shadow: none !important; }
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell.selected { background: #8A6E4B !important; color: #FFFAF0 !important; }
#sb-main-container #sb_content #sb_time_slots_container .slot { background: transparent !important; }
#sb-main-container #sb_content .time-legend .circle { background: transparent !important; border: 1px solid #8A6E4B; border-radius: 0 !important; }
/* side menu like the site's navigation: small caps-style uppercase */
#sb_menu #sb_menu_list_items_container li a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px !important; }
/* Taster card gets the site's "Start here" label */
#sb_main .category-item:has(.btn.select[href*="/category/9/"]) .title::before {
  content: "Start here"; display: block; width: max-content; margin-bottom: 8px; padding: 3px 8px;
  background: #F8EBA2; color: #3A2E1F; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4;
}
#sb_main .category-item:has(.btn.select[href*="/category/9/"]) .title { flex-direction: column !important; align-items: flex-start !important; }
/* time page: the "Workshops" / "Membership - Open Studio" provider card means nothing to customers */
#sb-main-container #sb_content #sb_sidebar_container .provider-item { display: none !important; }
/* phones: less dead space above page titles and inside category cards */
@media (max-width: 767px) {
  #sb_main:not(.page--index) #steps-nav { margin: 0 !important; padding: 0 !important; }
  #sb_main:not(.page--index) #sb_booking_content { margin-top: 12px !important; }
  #sb_main:not(.page--index) #sb_content .title-main { margin-top: 8px !important; }
  #sb_main .category-item .mobile-title .title { margin-bottom: 4px !important; }
}

/* desktop side bar: logo, menu and language picker on one left edge (logo was centred, menu left → looked cut off) */
@media (min-width: 1025px) {
  #sb_main #header .logo { text-align: left !important; }
  #sb_main #sb_google_translate, #sb_main #sb_google_translate * { text-align: left !important; }
}

/* ---- Round 6 (owner 10/19: 整體排版 council) ---- */
/* desktop Taster card: the "Start here" label makes the title taller → don't pull the description up there */
@media (min-width: 768px) {
  #sb_main .category-item:has(.btn.select[href*="/category/9/"]) .wrap-collapse-content { margin-top: 4px !important; }
}
/* memberships: only two plans → the theme's "Filter by attached items / Please note!" block is noise */
#sb_main.page--membership #sb_membership_filter_container { display: none !important; }
/* sign-in / sign-up (Client step): same Bisque-and-hairline look as the rest */
#sb-main-container #sb_content .client-login-bar { background: transparent !important; border: 1px solid #E2D6C3 !important; }
#sb-main-container #sb_content .client-login-bar::before,
#sb-main-container #sb_content .client-login-bar::after { display: none !important; }
#sb-main-container #sb_content .client-login-bar .icon { background: transparent !important; border: 1px solid #E2D6C3; border-radius: 0 !important; }
#sb-main-container #sb_content .custom-form { background: transparent !important; border: 1px solid #E2D6C3 !important; }
#sb-main-container #sb_content .custom-form::before,
#sb-main-container #sb_content .custom-form::after { display: none !important; }
#sb-main-container #sb_content .form-control {
  background: #FFFFFF !important; border: 1px solid #948268 !important; border-radius: 0 !important;
  color: #3A2E1F !important; height: 44px !important; font-size: 16px !important;
}
#sb-main-container #sb_content textarea.form-control { height: auto !important; min-height: 88px; }
#sb_main :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px !important; }
#sb-main-container #sb_content .form-control:focus { border-color: #8A6E4B !important; box-shadow: 0 0 0 2px #8A6E4B !important; outline: 2px solid transparent; }
#sb-main-container #sb_content .has-error .form-control,
#sb-main-container #sb_content .form-control[aria-invalid="true"] { border-color: #A94442 !important; }
#sb-main-container #sb_content .form-control[readonly],
#sb-main-container #sb_content .form-control[disabled] { background: #F3ECDF !important; }

/* back link: theme leaves 33px padding for its (now hidden) arrow image → line up with the page title */
#sb-main-container #sb_content #sb_back_button a { padding-left: 0 !important; }
/* time slots: keep "13:00 – 15:00" on one line; the "Available" legend adds nothing */
#sb-main-container #sb_content #sb_time_slots_container .slot { width: auto !important; min-width: 136px; }
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell { white-space: nowrap; flex-wrap: nowrap !important; justify-content: center; align-items: center; padding: 12px 14px !important; }
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell .end-time { display: inline !important; white-space: nowrap; }
#sb-main-container #sb_content .time-legend { display: none !important; }

/* ---- Round 7 · full polish (owner 10/19: 全面精修; council round 6: brand 7.5/8.5, UX 8/7.5, a11y 8) ---- */
/* BUG: on desktop the cookie bar sits inside #footer, so the footer's bisque link colour made "Terms and Conditions" invisible */
#sb-main-container #footer #sb_cookies_block .text a,
#sb_main #sb_cookies_block .text a { color: #6E5535 !important; }
/* desktop cookie bar: text and both buttons on one line */
@media (min-width: 1025px) {
  /* the bar spans the full window under the 270px side bar → start the content after it */
  #sb_cookies_block .wrapper { flex-wrap: nowrap !important; justify-content: space-between !important; max-width: none; margin: 0 !important; padding: 12px 32px 12px 300px !important; }
  #sb_cookies_block .text { flex: 1; text-align: left !important; }
}
/* step bar: left-aligned like the page title, short gaps, Clay underline on the current step */
@media (min-width: 768px) {
  #sb_main #sb_booking_info ul { justify-content: flex-start !important; gap: 40px; }
  #sb_main #sb_booking_info li.step_info_item { width: auto !important; flex: 0 0 auto !important; text-align: left !important; }
  #sb_main #sb_booking_info li.step_info_item .content { text-align: left !important; align-items: flex-start !important; }
  #sb_main #sb_booking_info li.step_info_item a::before { background: transparent !important; }
  #sb_main #sb_booking_info li.step_info_item.active a::before { background: #8A6E4B !important; height: 2px !important; }
}
/* today in the calendar is not a selection — quiet underline instead of bold */
#sb-main-container #sb_content .calendar .date.today:not(.selected) a { font-weight: 400 !important; text-decoration: underline; text-underline-offset: 4px; }
/* icons inside cards: one colour */
#sb-main-container #sb_content .panel .info-bar i,
#sb-main-container #sb_content .panel .bar-flex-item i { color: #8A6E4B !important; }
/* "Read more"/"Details": regular weight, quiet outline on phones */
#sb-main-container #sb_content .read-more, #sb-main-container #sb_content .read-more .part { font-weight: 400 !important; }
@media (max-width: 767px) {
  #sb-main-container #sb_content .read-more::after { font-weight: 400 !important; }
  #sb-main-container #sb_content .wrap-read-more .read-more { background: transparent !important; border: 1px solid #E2D6C3 !important; }
}
/* back link: 44px tap target, breathing room above the title on phones */
/* (desktop: the theme hides this link — the step bar is the way back there) */
@media (max-width: 767px) {
  #sb-main-container #sb_content #sb_back_button { margin: 8px 0 0 !important; }
  #sb-main-container #sb_content #sb_back_button a { display: inline-flex !important; align-items: center; min-height: 44px; }
}
/* memberships: button column to the right edge */
#sb-main-container #sb_content .membership-item .btn-bar { margin-left: auto; }
/* gift cards: even gap between cards, real price colour */
#sb_main.page--gift-card #sb_promotion_items_container { flex-wrap: wrap; gap: 16px; }
#sb_main.page--gift-card #sb_promotion_items_container .promotion-item { margin: 0 !important; }
@media (min-width: 768px) { #sb_main.page--gift-card #sb_promotion_items_container .promotion-item { width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px); } }
#sb-main-container #sb_content .promotion-item .bar-flex-item.price .txt { color: #6E5535 !important; font-weight: 700 !important; }
/* memberships / gift cards: page titles + quiet tabs (theme shows no heading there) */
#sb_main.page--membership #booking-result-tabs::before { content: "Memberships"; }
#sb_main.page--gift-card #booking-result-tabs::before { content: "Gift cards"; }
#sb_main.page--membership #booking-result-tabs::before,
#sb_main.page--gift-card #booking-result-tabs::before {
  display: block; margin: 24px 0 16px; padding-left: 15px; color: #3A2E1F; font: 700 32px/1.2 "Blanc Harmony", OpenSans, Arial, sans-serif; letter-spacing: -0.01em;
}
#booking-result-tabs .tabs-container { display: flex !important; justify-content: flex-start !important; gap: 24px; }
#booking-result-tabs .tab-link, #booking-result-tabs .tab-link a {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
#booking-result-tabs .tab-link a { color: #6E5535 !important; padding: 8px 0 !important; border-bottom: 2px solid transparent !important; }
#booking-result-tabs .tab-link.active a { color: #3A2E1F !important; border-bottom-color: #8A6E4B !important; }
/* sign-in step: "Sign up and continue" first (most people here are new), one hairline between the two */
#sb-main-container #sb_content .custom-form > .row { display: flex !important; flex-wrap: wrap; flex-direction: row-reverse; margin-left: 0 !important; margin-right: 0 !important; }
body { background: #FFFAF0 !important; }
#sb-main-container #sb_content .custom-form .col-sm-6 > .border { display: none !important; }
@media (min-width: 768px) { #sb-main-container #sb_content .custom-form > .row > .col-sm-6:first-child { border-left: 1px solid #E2D6C3; } }
@media (max-width: 767px) { #sb-main-container #sb_content .custom-form > .row { flex-direction: column; } } /* phones keep DOM order (a11y: focus order = visual order) */
#sb-main-container #sb_content .custom-form .btn.custom { min-width: 180px; }
/* side menu a touch larger; language picker without the white Google box */
#sb_menu #sb_menu_list_items_container li a { font-size: 13px !important; }
#sb_main #sb_google_translate .goog-te-combo,
#sb_main #sb_google_translate select { background-color: transparent !important; border: 1px solid #E2D6C3 !important; border-radius: 0 !important; color: #3A2E1F !important; }

/* sign-in step: same left edge and title spacing as the other steps */
#sb-main-container #sb_content .client_login_step_wrap .container-fluid.column { padding-left: 0 !important; padding-right: 0 !important; }
#sb-main-container #sb_content #client-login.section { padding-top: 0 !important; }
#sb-main-container #sb_content #client-login .title-main { margin: 8px 0 20px !important; }

/* memberships: theme's -15px / 15px gutters left the cards 30px narrower than every other page */
#sb-main-container #sb_content #sb_membership_list_container { margin-left: 0 !important; margin-right: 0 !important; }
#sb-main-container #sb_content #sb_membership_list_container > div { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Round 8 · last alignment pass (council round 7: brand 8.5/8.8, UX 8.5/8, a11y 8.5) ---- */
/* step bar: sub-labels on the same edge as the step names; clear gap before the page title */
#sb-main-container #sb_content #sb_booking_info .title-sub { margin-left: 0 !important; padding-left: 0 !important; }
@media (min-width: 768px) {
  #sb_main:not(.page--index) #sb_content #sb_booking_info { margin-bottom: 32px !important; }
  #sb_main #sb_booking_info li.step_info_item.active { padding-bottom: 6px !important; }
}
/* memberships: buttons to the card's right edge (desktop); one column of details on phones */
#sb-main-container #sb_content .membership-item .one-line { justify-content: space-between !important; flex: 1 1 auto !important; width: 100% !important; }
#sb-main-container #sb_content .membership-item .btn-bar { margin-left: auto !important; margin-right: 0 !important; }
@media (max-width: 767px) {
  #sb-main-container #sb_content .membership-item .info-bar .flex-bar-row { flex: 0 0 100% !important; width: 100% !important; }
}
/* memberships / gift cards: tabs on the title's left edge on desktop too */
#booking-result-tabs .tabs-container { float: none !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
/* time slots: theme puts a space AND a non-breaking space before the end time → close the gap */
#sb-main-container #sb_content #sb_time_slots_container a.sb-cell .end-time { margin-left: -0.3em; }
/* sign-in: social box text on the form's content edge (desktop), smaller box on phones so the form starts higher */
@media (min-width: 768px) { #sb-main-container #sb_content .client-login-bar { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 767px) {
  #sb-main-container #sb_content .client-login-bar { padding: 8px 12px !important; margin: 12px 0 !important; }
}

/* Confirm step (10/18, colours updated 10/19): Confirm booking = main button; hide package-credits hint */
#sb_book_btn {
  background-color: #8A6E4B !important;
  color: #FFFAF0 !important;
  border-color: #8A6E4B !important;
  border-radius: 0 !important;
  min-height: 44px;
}
#sb_book_btn:hover { background-color: #3A2E1F !important; border-color: #3A2E1F !important; }
#sb_multiple_booking_btn {
  background-color: #FFFFFF !important;
  color: #6E5535 !important;
  border: 1px solid #6E5535 !important;
  border-radius: 0 !important;
  min-height: 44px;
}
.package-use-credits-msg {
  display: none !important;
}

/* ===== Sign-in step (H50, 2026-10-19 · A-統籌①b) =====
   Heading "One small step." + why-an-account line; social row = text then buttons side by side,
   Google first with a clear outline; no Title Case. */
#sb-main-container #sb_content #client-login h2.title-main{padding-bottom:0 !important;margin-bottom:20px !important}
#sb-main-container #sb_content #client-login h2.title-main::after{content:"An account keeps your bookings and any gift card balance in one place.";display:block;margin-top:10px;max-width:62ch;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:0;color:#5C4B37;text-transform:none}
#sb-main-container #sb_content #client-login .client-login-bar{padding:20px 24px !important}
#sb-main-container #sb_content #client-login .client-login-bar .social{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:flex-start !important;gap:12px 24px;height:auto !important}
#sb-main-container #sb_content #client-login .client-login-bar .social .txt{text-transform:none !important;text-align:left !important;font-size:16px !important;line-height:1.4;color:#3A2E1F !important;margin:0 !important;padding:0 !important;flex:0 0 auto}
#sb-main-container #sb_content #client-login .client-login-bar .social .buttons{margin:0 !important;padding:0 !important;flex:0 0 auto;width:auto !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links{display:flex !important;flex-wrap:wrap;gap:12px;margin:0 !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn{display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:10px;width:auto !important;min-width:0 !important;height:44px !important;margin:0 !important;padding:0 18px !important;border:1px solid #948268 !important;border-radius:0 !important;background:#fff !important;box-shadow:none !important;text-transform:none !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn.gl{border-color:#3A2E1F !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn .icon{display:inline-flex !important;align-items:center;justify-content:center;width:20px !important;height:20px !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn .icon svg{width:20px !important;height:20px !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn .btn--txt{margin:0 !important;font-size:15px !important;font-weight:500;line-height:1;color:#3A2E1F !important;text-transform:none !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn:hover{background:#F7EFE3 !important}
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn:focus-visible{outline:2px solid #3A2E1F;outline-offset:2px}
@media (max-width:640px){
  #sb-main-container #sb_content #client-login .client-login-bar{padding:16px !important}
  #sb-main-container #sb_content #client-login .client-login-bar .social{flex-direction:column;align-items:stretch}
  #sb-main-container #sb_content #client-login .client-login-bar .social .buttons,
  #sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links{width:100% !important}
  #sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn{flex:1 1 0}
}

/* ---- Round 9 · top bar (owner 10/19 夜：「這個位置看起來還是不舒服」) ----
   1) desktop: the step bar repeated as a big page title ("Category" twice) → the bar is the heading; h2 kept for screen readers (phones keep the h2: the theme hides the bar there)
   2) step names sit on the logo's line; one hairline under the bar, the current step's Clay bar sits on it
   3) every step the same height, so the bar never jumps when a step gains its sub-label */
@media (min-width: 768px) {
  #sb_main #sb_booking_content > div > h2.title-main,
  #sb_main #sb_booking_content > div > .title > h2.title-main {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  #sb-main-container #sb_content #client-login h2.title-main {
    position: static !important; width: auto !important; height: auto !important; margin: 8px 0 20px !important;
    overflow: visible !important; clip: auto !important; white-space: normal !important;
  }
}
@media (min-width: 768px) {
  #sb_main:not(.page--index) #steps-nav { padding: 0 !important; margin: 0 !important; }
  #sb_main:not(.page--index) #sb_content #sb_booking_info { margin-bottom: 32px !important; border-bottom: 1px solid #E2D6C3; }
  #sb_main:not(.page--index) #sb_booking_content { margin-top: 0 !important; }
  #sb_main:not(.page--index) #sb_booking_content .step-content { margin-top: 0 !important; padding-top: 0 !important; }
  #sb_main #sb_booking_info ul { gap: 48px !important; align-items: stretch !important; margin: 0 !important; }
  #sb_main #sb_booking_info li.step_info_item,
  #sb_main #sb_booking_info li.step_info_item.active { height: 100px !important; padding: 52px 0 0 !important; }
  #sb_main #sb_booking_info li.step_info_item a { height: 100% !important; align-items: flex-start !important; }
  #sb_main #sb_booking_info li.step_info_item a::before { top: auto !important; bottom: -1px !important; }
  #sb_main #sb_booking_info li.step_info_item .title-small { font-size: 16px !important; line-height: 22px !important; font-weight: 500 !important; letter-spacing: 0.01em; }
  #sb_main #sb_booking_info li.step_info_item.active .title-small { font-weight: 600 !important; }
  #sb_main #sb_booking_info li.step_info_item .title-sub { font-size: 13px !important; line-height: 18px !important; margin-top: 2px !important; max-width: 220px; }
}

/* Loyalty points: plugin is on but no service earns points → empty page in the menu. Hidden until it is set up (council 10/19). */
#sb_main li.menu-item:has(> a[href="#bonus"]) { display: none !important; }

/* sign-up consent rows (owner 10/19 screenshot): text hangs beside its box instead of wrapping under it; all rows one weight; subscribe row reads as optional */
#sb-main-container #sb_content .form-group--terms, #sb-main-container #sb_content .promotions-letter-flag { margin: 0 0 12px !important; }
#sb-main-container #sb_content .form-group--terms > label, #sb-main-container #sb_content .promotions-letter-flag > label {
  display: flex !important; align-items: flex-start !important; gap: 12px; margin: 0 !important; padding: 0 !important;
  font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; color: #3A2E1F !important; text-transform: none !important; cursor: pointer;
}
#sb-main-container #sb_content .form-group--terms .custom-checkbox, #sb-main-container #sb_content .promotions-letter-flag .custom-checkbox { flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 0 !important; position: relative; }
#sb-main-container #sb_content .form-group--terms .custom-label, #sb-main-container #sb_content .promotions-letter-flag .custom-label { width: 22px !important; height: 22px !important; border: 1px solid #948268 !important; border-radius: 0 !important; background: #FFFFFF !important; margin: 0 !important; }
#sb-main-container #sb_content .form-group--terms a { color: #3A2E1F !important; font-weight: 400 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: #B9AC9A; }
#sb-main-container #sb_content .form-group--terms .required { color: #A94442 !important; text-decoration: none !important; margin-left: 2px; }
#sb-main-container #sb_content .promotions-letter-flag { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid #E2D6C3; }
#sb-main-container #sb_content .promotions-letter-flag > label { color: #5C4B37 !important; }
#sb-main-container #sb_content .custom-checkbox input:checked + .custom-label { background: #8A6E4B !important; border-color: #8A6E4B !important; }
#sb-main-container #sb_content .custom-checkbox input:checked + .custom-label::before { content: "" !important; position: absolute; left: 7px; top: 3px; width: 7px; height: 12px; border: solid #FFFAF0; border-width: 0 2px 2px 0; transform: rotate(45deg); background: none !important; }
#sb-main-container #sb_content .custom-checkbox input:focus-visible + .custom-label { outline: 2px solid #3A2E1F; outline-offset: 2px; }
/* sign-up is the main action on this step (most guests are new) → solid; sign-in outlined */
#sb-main-container #sb_content #sb_sign_up_btn, #sb-main-container #sb_content #sb_sign_in_btn { min-height: 44px; border-radius: 0 !important; text-transform: none !important; font-size: 15px !important; padding: 10px 28px !important; }
#sb-main-container #sb_content #sb_sign_up_btn { background: #8A6E4B !important; border: 1px solid #8A6E4B !important; color: #FFFAF0 !important; }
#sb-main-container #sb_content #sb_sign_up_btn:hover { background: #6E5535 !important; border-color: #6E5535 !important; }
#sb-main-container #sb_content #sb_sign_in_btn { background: transparent !important; border: 1px solid #6E5535 !important; color: #6E5535 !important; }

/* review r9: sign-up labels on one line, flush with their boxes; "Remind password" readable; language picker without the white rounded Google box */
#sb-main-container #sb_content #client-login .field_wrap:not(.remember-me) > label.control-label { white-space: nowrap; float: none !important; width: 100% !important; padding-left: 0 !important; margin-left: 0 !important; text-align: left !important; }
#sb-main-container #sb_content #client-login .remind-pass { color: #6E5535 !important; text-decoration: underline !important; text-underline-offset: 3px; }
#sb_main #sb_google_translate .goog-te-gadget-simple { background: transparent !important; border: 1px solid #E2D6C3 !important; border-radius: 0 !important; }
#sb-main-container #sb_content #client-login .field_wrap.remember-me { display: flex !important; align-items: center; gap: 10px; }
#sb-main-container #sb_content #client-login .field_wrap.remember-me > label { display: inline !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }

/* ==== Booking friction fixes · council 2026-10-20 (COUNCIL_BOOKING_FRICTION_2026-10-20.md) ==== */
/* Phones: "Sign up and continue" before "Sign in" (most people at this step are new; desktop already shows sign-up first). */
@media (max-width: 767px) {
  #sb-main-container #sb_content .custom-form > .row { flex-direction: column-reverse !important; }
  #sb-main-container #sb_content .custom-form > .row > .col-sm-6:first-child { border-top: 1px solid #E2D6C3; margin-top: 8px; padding-top: 16px; }
}
/* Say the password rule up front (Password security settings → Client). */
#sb-main-container #sb_content #sb_sign_up_form .field_wrap:has(#sb_profile_x_password)::after {
  content: "At least 8 characters."; display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #5C4A33;
}
/* Phones: keep the last button clear of the cookie bar. */
@media (max-width: 767px) {
  body:has(#sb_cookies_block[style*="display: block"]) #sb-main-container { padding-bottom: 140px !important; }
}
/* Phones/tablets: Time step shows which class was chosen (title · duration · price). */
@media (max-width: 991px) {
  #sb_datetime_step_container #sb_sidebar_container { display: block !important; width: 100% !important; float: none !important; }
  #sb_datetime_step_container #sb_sidebar_container .provider-item,
  #sb_datetime_step_container #sb_sidebar_container .btn-bar.has-read-more,
  #sb_datetime_step_container #sb_sidebar_container .wrap-collapse-content { display: none !important; }
  #sb_datetime_step_container #sb_sidebar_container .service-item { margin: 0 0 12px !important; padding: 12px 16px !important; }
  #sb_datetime_step_container #sb_sidebar_container .service-item .title { margin: 0 0 4px !important; font-size: 18px !important; }
}

/* ==== v18 polish · post-build review 2026-10-20 (7/10 → fixes) ==== */
/* Social buttons: the icon must never shrink (it collapsed to a dot in narrow buttons). */
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn .icon { flex: 0 0 20px !important; min-width: 20px !important; }
/* Sign-up form: close the ~70px gap under the password (container padding + margin), hint a touch larger. */
#sb-main-container #sb_content #sb_sign_up_form .sb-client-fields { padding-bottom: 16px !important; margin-bottom: 16px !important; }
#sb-main-container #sb_content #sb_sign_up_form .sb-client-fields .field_wrap:last-child { margin-bottom: 0 !important; }
#sb-main-container #sb_content #sb_sign_up_form .field_wrap:has(#sb_profile_x_password)::after { font-size: 14px !important; }

/* ==== round 3 · review 8/10 (2026-10-20) ==== */
/* Google and Facebook buttons share one border (Google is often blocked inside Instagram's browser, so it no longer gets a darker frame; it stays first). */
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn.gl { border-color: #948268 !important; }
/* Phones: breathing room between "Sign up and continue" and the Sign in section below it. */
@media (max-width: 767px) {
  #sb-main-container #sb_content .custom-form > .row > .col-sm-6:first-child { margin-top: 24px !important; }
}
/* "Remember me" box matches the consent boxes (22px, #948268 frame). */
#sb-main-container #sb_content #sb_sign_in_form .custom-checkbox { flex: 0 0 22px; width: 22px !important; height: 22px !important; position: relative; }
#sb-main-container #sb_content #sb_sign_in_form .custom-checkbox .custom-label { width: 22px !important; height: 22px !important; border: 1px solid #948268 !important; border-radius: 0 !important; background: #FFFFFF !important; }

/* ==== round 4 · brand pass — match the website (2-stance council 2026-10-20) ==== */
/* Social sign-in buttons: one quiet CTA-brown frame for both. */
#sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn, #sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn.gl { border-color: #8A6E4B !important; }
/* Only big headings are bold (as on the website): prices sit in umber, medium. */
#sb_main .service-item .price, #sb-main-container #sb_content .service-item .price { font-weight: 500 !important; color: #3A2E1F !important; }
/* "Start here" label: readable 14px. */
#sb_main .category-item:has(.btn.select[href*="/category/9/"]) .title::before { font-size: 14px !important; letter-spacing: 0.06em !important; padding: 4px 10px !important; }
/* Party size − / + : 44px touch targets with a visible frame. */
#sb-main-container #sb_content .sb_group_count { width: 44px !important; height: 44px !important; min-width: 44px !important; border: 1px solid #8A6E4B !important; display: inline-flex !important; align-items: center; justify-content: center; }
/* Time step "what you chose" card = the page's Glaze Bud Yellow moment (website yellow cards). */
#sb_datetime_step_container #sb_sidebar_container .service-item { background: #FCF3C9 !important; border-color: #E1D9AA !important; }
/* Cookie bar: no shadow; the two copies (main + footer) must be the same height or the back one peeks out as a double line. */
#sb_cookies_block { box-shadow: none !important; }
#sb_cookies_block .text a, #sb-main-container #footer #sb_cookies_block .text a { font-size: inherit !important; }
/* "Necessary only" as prominent as "Accept all": Kiln Mist Sage fill + CTA-brown frame (website cookie card uses Sage for the non-accept buttons). */
#sb_cookies_block #sb_necessary_important_coo { background: #BCD0CE !important; color: #3A2E1F !important; border: 1px solid #8A6E4B !important; }
@media (max-width: 767px) {
  /* Website gutter + card padding (24px). */
  #steps-content { padding-left: 24px !important; padding-right: 24px !important; }
  #sb_main .category-item, #sb_main .service-item { padding: 24px !important; }
  /* Compact cookie bar (~109px): two text lines + one row of 44px buttons ("Necessary only" / "Accept all" via Custom wording). */
  #sb_cookies_block { padding: 0 !important; }
  #sb_cookies_block .wrapper { padding: 10px 16px !important; gap: 8px !important; }
  #sb_cookies_block .text, #sb-main-container #footer #sb_cookies_block .text { font-size: 13px !important; line-height: 1.4 !important; }
  #sb_cookies_block #sb_necessary_important_coo, #sb_cookies_block #sb_accept_important_coo { min-height: 44px !important; }
}

/* ==== v19 · round 5 (owner 10/20「2.3.4 開始」, 「1.5 沒問題」) ==== */
/* Header: Bisque + one hairline like the website (the owner's three 40px squares stay). */
#sb_main #header { background: #FFFAF0 !important; }
@media (max-width: 1024px) {
  #sb_main #header { padding: 12px 24px !important; border-bottom: 1px solid #E2D6C3 !important; }
  /* the logo file is 600×600 with the wordmark in its middle third → crop the empty top and bottom:
     same wordmark size, header 120px → 73px; the wordmark's left edge sits on the 24px gutter */
  #sb_main #header .logo_wrap, #sb_main #header .logo, #sb_main #header .logo a { height: 48px !important; }
  #sb_main #header .logo a { display: block; }
  #sb_main #header .logo img { width: 90px !important; height: 48px !important; object-fit: cover; object-position: 50% 50%; margin-left: -14px; }
}
@media (min-width: 1025px) {
  #sb_main #header { border-right: 1px solid #E2D6C3 !important; }
}

/* Footer: was the one dark strip on every page → Bisque, hairline, small link. */
#sb-main-container #footer, #sb-main-container #footer.masked { background: #FFFAF0 !important; border-top: 1px solid #E2D6C3 !important; }
#sb-main-container #footer a { color: #6E5535 !important; font-size: 13px !important; }
#sb-main-container #footer a:focus-visible { outline-color: #3A2E1F !important; }

/* Cards on the time and sign-in steps: the website's 24px inner edge. */
#sb-main-container #sb_content #sb_dateview_container .section-pd,
#sb-main-container #sb_content .timeline-wrapper .tab-pd { padding: 24px !important; }
#sb_datetime_step_container #sb_sidebar_container .service-item { padding: 16px 24px !important; }
#sb-main-container #sb_content #client-login .client-login-bar { padding: 24px !important; }
#sb-main-container #sb_content #client-login .custom-form { padding: 24px 0 !important; }
#sb-main-container #sb_content #client-login .custom-form > .row > .col-sm-6 { padding-left: 24px !important; padding-right: 24px !important; }

/* Home: hero and contacts on the same 24px gutter as the header and the booking steps (phones). */
@media (max-width: 767px) {
  #sb_main.page--index #main-buttons .container-fluid { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Home hero = a bright studio photo (Design settings → Banner image) in a band at the top, Bisque below;
   the text card turns light so photo + card read as one calm block (design system §6: no dark photo + dark panel). */
#sb_main.page--index #sb-main-container {
  background-color: #FFFAF0 !important; background-repeat: no-repeat !important; background-attachment: scroll !important;
  background-size: 100% auto !important; background-position: 50% 0 !important;
}
/* the theme lays a 65% Clay-brown mask over the whole home page → the photo turned muddy and the page bottom tan */
#sb_main.page--index #sb-main-container #sb_content.masked { background: transparent !important; }
@media (max-width: 767px) {
  /* phones: the photo first (the wheel room), the card overlapping its lower edge — not text over the floor */
  #sb_main.page--index #sb-main-container { background-size: auto 300px !important; background-position: 50% 0 !important; }
  #sb_main.page--index #main-buttons .inner { margin-top: 150px !important; } /* Book now inside the first screen (UX review) */
}
#main-buttons .inner { background: rgba(255, 250, 240, 0.94) !important; border: 1px solid #E2D6C3; }
#main-buttons #main_description,
#main-buttons #about-us .txt { color: #3A2E1F !important; }
#main_buttons_book_btn.main_btn:hover { background: #3A2E1F !important; }
#main_buttons_book_btn.main_btn:focus-visible { outline-color: #3A2E1F !important; }

/* Header shadow (theme) read as a dark line under the new hairline. */
#sb_main #header { box-shadow: none !important; }

/* Category lists: the theme drops the margin of the LAST card in the code (Hug), but CSS moves Courses / For Two after it → two cards touched. */
#sb_main .category-step > .category-item { margin-bottom: 15px !important; }

/* Loyalty points: the v16 rule looked for href="#bonus", the menu link is "/v2/bonus/" → still showing. */
#sb_main li.menu-item:has(> a[href*="bonus"]) { display: none !important; }

/* ---- v19 review round (brand 7.5 → fixes) ---- */
/* Hero on tablets and desktops: the photo first, the card overlapping its lower edge (same as phones).
   The photo is 100% wide at 2000×1033 → its height is 51.6% of the content width. */
@media (min-width: 768px) and (max-width: 1024px) {
  #sb_main.page--index #main-buttons .inner { margin-top: calc(51.6vw - 213px) !important; }
}
@media (min-width: 1025px) {
  #sb_main.page--index #main-buttons .inner { margin-top: calc((100vw - 282px) * 0.516 - 170px) !important; } /* 1366×768: Book now still clears the cookie bar */
}
/* Contacts (map, phone, address): the theme hides them until you scroll; on the light page that left an empty band in the first screen. */
#main #main-content #sb_content #main-buttons .wrapper #contacts_data { visibility: visible !important; }
/* Required-field stars in the brand brown, not error red (the star is still there). Only the star: the label itself also carries .required. */
#sb-main-container #sb_content span.required,
#sb-main-container #sb_content .form-group--terms .required { color: #8A6E4B !important; }

/* ---- v19 review round 2 (UX 7.5 / a11y 7 → fixes) ---- */
/* Back-to-top: clear of the footer hairline; chevron #6E5535 (theme #A4855D on Bisque ≈ 2:1). */
#sb_main #sb_scroll_top_btn { bottom: 48px !important; color: #6E5535 !important; border: 1px solid #E2D6C3 !important; }
#sb_main #sb_scroll_top_btn i { color: #6E5535 !important; }
/* Phones: calendar keeps 16px sides (day cells ~42px wide) and a short bottom, so the start times sit higher. */
@media (max-width: 767px) {
  #sb-main-container #sb_content #sb_dateview_container .section-pd { padding: 16px 16px 8px !important; }
}
/* Calendar: the whole day cell is the tap target (theme: only the 17×18px number was a link). */
#sb-main-container #sb_content .calendar .date a { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 40px; }
/* Sign-in step: the theme marks no step as current → the step right after the last finished one gets the current-step look. */
#sb_main #sb_booking_info li.step_info_item.passed + li.step_info_item:not(.passed):not(.active) .title-small { color: #3A2E1F !important; font-weight: 600 !important; }
@media (min-width: 768px) {
  #sb_main #sb_booking_info li.step_info_item.passed + li.step_info_item:not(.passed):not(.active) a::before { background: #8A6E4B !important; height: 2px !important; }
}

/* ---- v19 review round 3 (brand 8 / UX 8.5 / a11y 8 → last fixes) ---- */
/* Phones: map and contact list on the same 24px edge as the card (they sat at 55px). */
@media (max-width: 767px) {
  #sb_main.page--index #contacts_data > .row { padding: 0 !important; }
  #sb_main.page--index #contacts_data > .row > div,
  #sb_main.page--index #contacts_data [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Hero card gets the website's own headline (www.blanceramic.com home hero), so the card leads with a line, not an address. */
#main-buttons #main_description::before {
  content: "A quiet place to work with clay."; display: block; margin: 0 0 12px; color: #3A2E1F;
  font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
@media (max-width: 767px) { #main-buttons #main_description::before { font-size: 24px; } }
/* Sign-up / sign-in labels: one weight with the widget (500). */
#sb-main-container #sb_content #client-login label.control-label { font-weight: 500 !important; }
/* Phones: start times a little higher (smaller caption, less top padding). */
@media (max-width: 767px) {
  #sb-main-container #sb_content .timeline-wrapper .tab-pd { padding-top: 16px !important; }
  #sb-main-container #sb_content .timeline-wrapper .container-caption { font-size: 20px !important; margin-bottom: 12px !important; }
}
/* Calendar: weekday row quieter (500, no grey rules — it was the heaviest thing on the step);
   next-month days that CAN be booked read as next month (Clay brown, AA 4.6:1), not as this month. */
#sb-main-container #sb_content .calendar .weeks-name .name { font-weight: 500 !important; border-bottom: 0 !important; color: #5C4B37 !important; }
#sb-main-container #sb_content .calendar .date.prev-or-next-month a.sb-available-date { color: #8A6E4B !important; }
/* "Available start times": same weight as the widget (500). */
#sb-main-container #sb_content .container-caption { font-weight: 500 !important; }

/* ---- v19 · owner screenshot 10/21 (desktop, service step) ---- */
@media (min-width: 768px) {
  /* The theme hides a 3px see-through border under the step list → the current step's Clay underline sat 3px above the hairline. */
  #sb_main #sb_booking_info ul { border-bottom: 0 !important; }
  /* Steps are 100px tall, but a step with a sub-label (the class you picked, e.g. "Pottery Throwing Taster Class") needed 124px
     (15px inside padding top and bottom) → the sub-label sat on the hairline. Same 100px bar: name at the logo's middle, sub-label 6px above the line. */
  #sb_main #sb_booking_info li.step_info_item,
  #sb_main #sb_booking_info li.step_info_item.active { padding-top: 40px !important; }
  #sb_main #sb_booking_info li.step_info_item .content { padding: 12px 0 0 !important; }
}
/* Menu: "Classes" opens the same list as "Services" (every course is under Services → Courses), so a taster booked from it showed "Classes" as current. One way in. */
#sb_main li.menu-item:has(> a[href*="book-class"]) { display: none !important; }
/* Party size: one hairline box  − 1 +  (as in the website popup) instead of two loose squares and a floating number. */
#sb-main-container #sb_content .service-item .active-count { border: 1px solid #8A6E4B !important; height: 44px !important; box-sizing: border-box; align-items: center; }
#sb-main-container #sb_content .service-item .sb_group_count { border: 0 !important; height: 42px !important; }
#sb-main-container #sb_content .service-item .active-count { background: #FFFFFF !important; }
#sb-main-container #sb_content .service-item .sb_group_count,
#sb-main-container #sb_content .service-item .sb-group-counter-input-div { background: transparent !important; }

/* ==== v20 · other-page QA (2026-10-21, A-統籌①b 6th · QA_v19_v5_2026-10-21.md) ==== */
/* Sign-in page outside the booking steps (/v2/client/sign-in/: the website's gift-card "Buy" buttons and the header's "Sign up" land here).
   It has no step container around it, so the Client-step rule above (no side padding) left it touching the screen edge on phones
   and the side bar and the top of the window on desktop. Same edges as the booking steps: 24px on phones, 15px on desktop. */
#sb-main-container #sb_content > div > .client_login_step_wrap { padding-top: 16px !important; padding-bottom: 32px !important; }
#sb-main-container #sb_content > div > .client_login_step_wrap > .container-fluid.column { padding-left: 24px !important; padding-right: 24px !important; }
@media (min-width: 768px) {
  #sb-main-container #sb_content > div > .client_login_step_wrap { padding-top: 40px !important; padding-bottom: 48px !important; }
  #sb-main-container #sb_content > div > .client_login_step_wrap > .container-fluid.column { padding-left: 15px !important; padding-right: 15px !important; }
}
/* Terms page (T&C plugin; the text came from the old Wix site as 12px "h6" blocks with 1.2 line height, ~130 characters a line on desktop):
   15px / 1.6, about 70 characters a line, no white box, one title instead of two, less empty space above it on phones. */
#sb_main #news-single.license { padding: 16px 0 32px !important; }
#sb_main #news-single.license > .container-fluid.column { padding-left: 24px !important; padding-right: 24px !important; }
@media (min-width: 768px) {
  #sb_main #news-single.license { padding-top: 32px !important; }
  #sb_main #news-single.license > .container-fluid.column { padding-left: 15px !important; padding-right: 15px !important; }
}
#sb_main #news-single.license .article { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
#sb_main #news-single.license .article .cap { display: none !important; }
#sb_main #news-single.license .license--content { max-width: 68ch; color: #3A2E1F; }
#sb_main #news-single.license .license--content :is(h6, p, li) { font-family: inherit !important; font-size: 15px !important; line-height: 1.6 !important; font-weight: 400 !important; color: #3A2E1F !important; }
#sb_main #news-single.license .license--content strong { font-weight: 600 !important; }
#sb_main #news-single.license .license--content h2 { margin: 8px 0 16px !important; font-size: 32px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #3A2E1F !important; }
#sb_main #news-single.license .license--content h3 { margin: 32px 0 8px !important; font-size: 22px !important; line-height: 1.3 !important; color: #3A2E1F !important; }
#sb_main #news-single.license .license--content p { margin: 0 0 12px !important; }
#sb_main #news-single.license .license--content ul { margin: 0 0 12px !important; padding-left: 20px !important; }
#sb_main #news-single.license .license--content li { margin: 0 0 8px !important; }
/* Tabs (gift cards, memberships, My Bookings): the theme draws a 1px white line at the right end of the tab row */
#booking-result-tabs .tabs-container { border: 0 !important; }
/* Gift cards (desktop): the name wrapped beside the button on some cards, so "12 months / price" and Select sat at different heights
   in the same row → name on its own line across the card, then the details with Select beside them. */
@media (min-width: 768px) {
  #sb_main.page--gift-card .promotion-item .one-line { display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "title title" "info btn"; align-items: end; column-gap: 16px; row-gap: 12px; }
  #sb_main.page--gift-card .promotion-item .one-line > .content { display: contents !important; }
  #sb_main.page--gift-card .promotion-item .one-line > .content > .title { grid-area: title; margin: 0 !important; }
  #sb_main.page--gift-card .promotion-item .one-line > .content > .info-bar { grid-area: info; margin: 0 !important; }
  #sb_main.page--gift-card .promotion-item .one-line > .btn-bar { grid-area: btn; align-self: center; margin: 0 !important; padding: 0 !important; }
  #sb_main.page--gift-card .promotion-item .one-line > .btn-bar .btn { margin: 0 !important; }
  /* same 20px gap under the tabs as the membership page (theme: 45px) */
  #sb_main.page--gift-card .promotion-list { padding-top: 20px !important; }
}
/* Memberships (phones): "Read more" sat 6px lower than "Start for £…" (its 44px link hung out of a 32px wrapper);
   the button stopped 5px short of the card's right edge. */
@media (max-width: 767px) {
  #sb-main-container #sb_content .membership-item .btn-bar .wrap-read-more { display: flex !important; align-items: center; }
  #sb-main-container #sb_content .membership-item .btn-bar .btn.price-formatter { margin: 0 !important; }
}
/* My Bookings (desktop): tabs under the page title, as on the gift-card and membership pages (they floated to the far right). */
@media (min-width: 768px) {
  #sb_main.page--my_bookings #booking-result-view .top_wrap > .title-main,
  #sb_main.page--my_bookings #booking-result-view .top_wrap > #booking-result-tabs { float: none !important; }
  #sb_main.page--my_bookings #booking-result-view .top_wrap { padding-top: 24px !important; }
  #sb_main.page--my_bookings #booking-result-view .top_wrap > .title-main { padding-bottom: 16px !important; }
}
/* Memberships: the "Sessions:" line started 4px further right than the other detail lines (different wrapper in the theme). */
#sb-main-container #sb_content .membership-item .session-remind { display: flex !important; align-items: center; gap: 0 !important; }
#sb-main-container #sb_content .membership-item .session-remind > .ico { margin: 0 4px 0 0 !important; }
#sb-main-container #sb_content .membership-item .session-remind > .d-flex { margin-left: 0 !important; padding-left: 0 !important; }
/* Sign-in "New here?" box: the theme's clearfix ::before / ::after count as flex items, so the sentence sat 24px to the right of the
   Google button on desktop and 12px lower on phones. */
#sb-main-container #sb_content #client-login .client-login-bar .social::before,
#sb-main-container #sb_content #client-login .client-login-bar .social::after { display: none !important; content: none !important; }
/* …and with that fixed, the sign-up form sat 20px further in than the box above it (theme gives the form 20px left padding on desktop):
   one inner edge for the "New here?" box and the sign-up form. */
@media (min-width: 768px) { #sb-main-container #sb_content #client-login #sb_sign_up_form { padding-left: 0 !important; } }
/* review round (brand 8.5 → fixes): */
@media (min-width: 768px) {
  /* sign-in card: the theme mirrors the sign-up form's 20px on the sign-in form's right side → 24px inside on both sides, equal input widths */
  #sb-main-container #sb_content #client-login #sb_sign_in_form { padding-right: 0 !important; }
  /* gift cards: the theme's 30px bottom padding under the tabs → same 20px gap as Memberships */
  #sb_main.page--gift-card #booking-result-view { padding-bottom: 0 !important; }
  /* My Bookings: title and tabs at the same height as on the other tab pages */
  #sb_main.page--my_bookings #booking-result-view .top_wrap > .title-main { line-height: 1.2 !important; padding-bottom: 0 !important; margin-bottom: 16px !important; }
}
/* Terms: "Back" sat 50px lower than on the booking steps; the title breaks evenly ("Blanc Ceramic —" / "Terms & Conditions") */
#sb_main #news-single.license .return-btn { margin-top: 0 !important; }
#sb_main #news-single.license .license--content h2 { text-wrap: balance; }
/* review round (UX / a11y 8.8 → fixes): */
/* very narrow phones (≤ 400px: iPhone SE, or 400% zoom): Google / Facebook stack instead of squeezing "Facebook" against its border */
@media (max-width: 400px) {
  #sb-main-container #sb_content #client-login .client-login-bar .btn-bar__social-links a.btn { flex: 1 1 120px; }
}
/* Terms "Back": a 44px tap target like the booking steps' back link */
#sb_main #news-single.license .return-btn a { display: inline-flex !important; align-items: center; min-height: 44px; }

/* ==== v21 · service list: say what each class is (owner 10/21: the new descriptions sat behind "Read more" on desktop) ==== */
/* Card reads like the website popup: name → description → time / price → party size + Select. */
#sb_main #sb_service_step_container .service-item.panel { display: flex !important; flex-direction: column; }
#sb_main #sb_service_step_container .service-item > .mobile-title { display: block !important; order: 0; }
#sb_main #sb_service_step_container .service-item > .wrap-collapse-content { display: block !important; height: auto !important; order: 1; }
#sb_main #sb_service_step_container .service-item > .one-line { order: 2; }
#sb_main #sb_service_step_container .service-item > .one-line .content > .title { display: none !important; }
#sb_main #sb_service_step_container .service-item .collapse-content { padding: 0 !important; margin: 6px 0 14px !important; max-width: 52ch; color: #5C4B37 !important; font-size: 15px !important; line-height: 1.6 !important; }
#sb_main #sb_service_step_container .service-item .collapse-content .btn-bar-full-info,
#sb_main #sb_service_step_container .service-item .collapse-content::before { display: none !important; }
#sb_main #sb_service_step_container .service-item > .one-line .info-bar { margin-top: 0 !important; }
@media (min-width: 768px) {
  #sb_main #sb_service_step_container .service-item .wrap-read-more { display: none !important; }
  #sb_main #sb_service_step_container .service-item > .one-line .content { min-height: 0 !important; }
  /* Select on the same line as the party-size box */
  #sb_main #sb_service_step_container .service-item > .one-line > .btn-bar { align-self: flex-end; padding-bottom: 0 !important; }
  #sb_main #sb_service_step_container .service-item > .one-line > .btn-bar .btn.select { margin: 0 !important; }
  /* courses have no party-size box → Select centred on the details instead of hanging between two rows */
  #sb_main #sb_service_step_container .service-item:not(:has(.active-count)) > .one-line > .btn-bar { align-self: center; }
}
/* Phones: the first three lines; "Details" opens the rest. */
@media (max-width: 767px) {
  #sb_main #sb_service_step_container .service-item > .wrap-collapse-content:not(.in) .collapse-content { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}

/* ---- v21 · returning customers (2-stance council 2026-10-21: brand voice 7.5 → fixes, UX 7.5 → fixes) ---- */
/* Sign-in step, phones: "Sign up and continue" comes first and "Sign in" is far down the page → people who already have an account were signing up again. */
@media (max-width: 767px) {
  #sb-main-container #sb_content #client-login h2.title-main::after {
    content: "An account keeps your bookings and any gift card balance in one place.\A\A Have an account? Sign in further down.";
    white-space: pre-line;
  }
  /* the hint belongs with the heading, not with the "New here?" box below it */
  #sb-main-container #sb_content #client-login h2.title-main { margin-bottom: 36px !important; }
}
/* Step bar: hide "Service add-ons" and "Provider" by their label too — the nth-child rule (round 4) missed them when the bar briefly had a different number of steps (seen 2 in ~10 loads). */
#sb_main #sb_booking_info li.step_info_item:has(> a[aria-label^="Service Add-ons"]),
#sb_main #sb_booking_info li.step_info_item:has(> a[aria-label^="Provider"]) { display: none !important; }
/* Phones: gift-card, membership and My Bookings pages on the same 24px edge as the booking steps (they kept the theme's 15px). */
@media (max-width: 767px) {
  #sb_main:is(.page--gift-card, .page--membership, .page--my_bookings) #sb_content .container-fluid.column { padding-left: 24px !important; padding-right: 24px !important; }
  #sb_main:is(.page--gift-card, .page--membership) #booking-result-tabs::before { padding-left: 24px !important; }
}

/* ==== v22 · 2026-10-21 (A-統籌①b 6th) ==== */
/* Home hero photo pinned here: twice today SimplyBook dropped the banner's image record (Design settings → Banner image),
   and the theme fell back to its stock photo of a face (owner rule: no faces). Both files are the same wheel-room photo;
   if the first one ever goes, the second shows through. */
#sb_main.page--index #sb-main-container {
  background-image: url("/uploads/blanceramic/image_files/background/66001a4d93f6fa20f20360d882667507.jpg"), url("/uploads/blanceramic/image_files/background/01937e869f1e4ac78aa0c76d33cfcff7.jpg") !important;
}