/* House of Honey: the class and service pages (/service-page/<slug>), the
 * service list (/book-online-old) and the plans page (/pricing-plans/...).
 * These were Wix Bookings and Wix Pricing Plans pages; sizes and spacing were
 * measured from the live pages at 1280px. Desktop rules first, then phones. */

/* ---------- Service page ---------- */
.svc-hero { height: 360px; overflow: hidden; background: #ddd; }
.svc-hero img { width: 100%; height: 100%; object-fit: cover; }

.svc { max-width: calc(720px + 32px); margin: 0 auto; padding: 72px var(--gutter-r) 64px var(--gutter-l); font: 400 16px/1.5 var(--sans); color: var(--ink); }
.svc-note { background: #f2f2f2; padding: 15px 13px; margin-bottom: 33px; font: 400 14px/1.5 var(--sans); color: var(--black); }
.svc-note a { color: inherit; }
.svc h1 { font: 700 40px/1.2 var(--sans); color: var(--ink); text-wrap: pretty; }
.svc__tag { margin-top: 20px; }
.svc-facts { display: flex; width: max-content; max-width: 100%; flex-wrap: wrap; margin: 32px 0 0; padding: 0; list-style: none; border: 1px solid #d5d5d5; }
.svc-facts li { padding: 16px 16px; line-height: 24px; }
.svc-facts li + li { border-left: 1px solid #d5d5d5; }
.svc-book { display: flex; width: max-content; align-items: center; justify-content: center; min-width: 132px; min-height: 40px; margin-top: 32px; padding: 8px 28px; background: var(--green); color: var(--white); font: 400 16px/1.2 var(--sans); text-decoration: none; transition: background .2s; }
.svc-book:hover { background: #0f6b30; }
.svc-spots { margin-top: 30px; }
.svc-rule { border: 0; border-top: 1px solid #d5d5d5; margin: 32px 0 0; }
.svc h2 { font: 700 20px/1.4 var(--sans); color: var(--ink); margin-top: 28px; }
.svc h2 + p, .svc h2 + .svc-desc { margin-top: 16px; }
.svc-desc p + p { margin-top: 1em; }
.svc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; }
.svc-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.svc-sessions-head { margin-top: 44px !important; }
.svc-rule + .svc-sessions-head { margin-top: 28px !important; }
.svc-tz { margin-top: 12px; text-align: right; }
.sessions { list-style: none; margin: 14px 0 0; padding: 0 28px; border: 1px solid #c8c8c8; }
.session { display: grid; grid-template-columns: 198px 248px 1fr; align-items: start; padding: 26px 0 15px; border-bottom: 1px solid #b8b8b8; }
.session:last-child { border-bottom: 0; }
.session__time small, .session__who { display: block; font-size: 14px; line-height: 20px; color: #525252; }
.session__time small { margin-top: 6px; }
.session__who { padding-top: 30px; }
.sessions--empty { display: grid; place-items: center; min-height: 200px; text-align: center; }
.svc-pager { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.svc-pager span:first-child { color: #8c8c8c; text-decoration: underline; }
.svc-pager a { color: var(--ink); }
.svc-contact { margin-top: 16px; }
.svc-contact a { color: inherit; text-decoration: none; }
.svc-contact a:hover { text-decoration: underline; }

/* ---------- Service list (/book-online-old) ---------- */
.svc-list { padding: 80px var(--gutter-r) 24px var(--gutter-l); }
.svc-list h1 { text-align: center; font: 700 32px/1.3 var(--sans); color: var(--ink); }
.svc-tabs { display: flex; justify-content: center; margin: 36px auto 0; width: max-content; max-width: 100%; border-bottom: 1px solid #c8c8c8; }
.svc-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 6px 28px 10px; font: 400 16px/1.4 var(--sans); color: var(--ink); cursor: pointer; }
.svc-tabs button[aria-pressed="true"] { border-bottom-color: var(--green); }
.svc-cards { display: grid; grid-template-columns: repeat(3, 290px); justify-content: center; gap: 33px 34px; margin-top: 60px; }
.svc-card { display: flex; flex-direction: column; border: 1px solid #c8c8c8; background: var(--white); min-height: 565px; }
.svc-card[hidden] { display: none; }
.svc-card > a:first-child img { width: 100%; aspect-ratio: 290 / 194; object-fit: cover; }
.svc-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 30px 31px 70px; }
.svc-card h2 { font: 700 24px/1.35 var(--sans); color: var(--ink); }
.svc-card h2 a { text-decoration: none; }
.svc-card h2 a:hover { text-decoration: underline; }
.svc-card__tag { display: none; margin-top: 12px; font-size: 16px; line-height: 1.5; }
.svc-card hr { border: 0; border-top: 1px solid #c8c8c8; margin: 24px 0 18px; }
.svc-card__facts { font: 400 16px/32px var(--sans); }
.svc-card__facts { margin-bottom: 30px; }
.svc-card .svc-book { margin-top: auto; align-self: flex-start; min-width: 0; padding-inline: 16px; }
.svc-card__more { position: absolute; left: 31px; bottom: 30px; font: 400 16px/1.2 var(--sans); color: var(--ink); }

/* ---------- Plans & Pricing ---------- */
.plans { padding: 52px var(--gutter-r) 24px var(--gutter-l); }
.plans h1 { text-align: center; font: 700 56px/1.3 var(--sans); color: var(--ink); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 295px); justify-content: center; align-items: start; gap: 32px 32px; margin-top: 50px; }
.plan { border: 1px solid #c8c8c8; background: var(--white); text-align: center; display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; }
.plan__top { padding: 28px 30px 30px; display: flex; flex-direction: column; }
.plan h2 { font: 400 20px/1.5 var(--sans); color: var(--ink); text-wrap: wrap; }
.plan__price { display: flex; justify-content: center; align-items: flex-start; margin-top: 4px; font: 300 70px/1.15 var(--sans); color: var(--ink); }
.plan__price sup { font: 400 18px/1 var(--sans); margin: 6px 4px 0 0; }
.plan__every { font-size: 12px; line-height: 1.4; margin-top: 2px; }
.plan__desc { margin-top: 14px; font: 400 14px/1.45 var(--sans); }
.plan__valid { margin-top: 10px; font: 400 12px/1.4 var(--sans); }
.plan .svc-book { margin-top: auto; width: 100%; min-height: 48px; font-size: 14px; }
.plan__top > p:nth-last-child(2) { margin-bottom: 28px; }
.plan details, .plan__none { border-top: 1px solid #c8c8c8; }
.plan summary { display: none; }
.plan ul { list-style: none; margin: 0; padding: 22px 30px 24px; font: 400 14px/1.45 var(--sans); }
.plan li + li { margin-top: 13px; }

@media (max-width: 1000px) {
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 300px)); }
}

@media (max-width: 640px) {
  .svc-hero { height: auto; aspect-ratio: 390 / 270; }
  .svc { padding-top: 44px; padding-bottom: 50px; font-size: 17px; }
  .svc-note { font-size: 16px; padding: 14px 16px; margin-bottom: 28px; }
  .svc h1 { font-size: 32px; }
  .svc__tag { margin-top: 14px; }
  .svc-facts { flex-direction: column; width: auto; margin-top: 28px; }
  .svc-facts li { padding: 14px 18px; }
  .svc-facts li + li { border-left: 0; border-top: 1px solid #d5d5d5; }
  .svc-book { width: 100%; min-height: 48px; font-size: 17px; }
  .svc h2 { font-size: 22px; }
  .svc-gallery { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
  .svc-gallery img:nth-child(3):last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .svc-tz { text-align: left; font-size: 16px; }
  .sessions { padding: 0 18px; }
  .session { grid-template-columns: 1fr; padding: 18px 0 16px; }
  .session__date { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #b8b8b8; }
  .session__time small, .session__who { font-size: 16px; line-height: 1.5; }
  .session__time small { margin-top: 2px; }
  .session__who { padding-top: 0; }
  .sessions--empty { min-height: 160px; padding: 20px; }
  .svc-contact { overflow-wrap: anywhere; }

  .svc-list { padding-top: 44px; }
  .svc-list h1 { font-size: 30px; }
  .svc-tabs { margin-top: 24px; width: 100%; }
  .svc-tabs button { flex: 1; padding-inline: 6px; font-size: 16px; }
  .svc-cards { grid-template-columns: minmax(0, 360px); gap: 26px; margin-top: 32px; }
  .svc-card { min-height: 0; }
  .svc-card__body { padding: 24px 22px 26px; }
  .svc-card__tag { display: block; }
  .svc-card .svc-book { align-self: stretch; margin-top: 22px; }
  .svc-card__more { position: static; margin-top: 18px; text-align: center; }

  .plans { padding-top: 40px; }
  .plans h1 { font-size: 30px; }
  .plan-grid { grid-template-columns: minmax(0, 360px); gap: 26px; margin-top: 30px; }
  .plan { grid-row: auto; display: block; }
  .plan h2 { font-size: 22px; }
  .plan__desc { font-size: 16px; }
  .plan__every, .plan__valid { font-size: 14px; }
  .plan summary { display: flex; justify-content: center; padding: 12px; cursor: pointer; list-style: none; }
  .plan summary::-webkit-details-marker { display: none; }
  .plan summary svg { width: 18px; height: 18px; transition: rotate .2s; }
  .plan details[open] summary svg { rotate: 180deg; }
  .plan details { border-top: 0; }
  .plan__none { display: none; }
  .plan details[open] ul { border-top: 1px solid #c8c8c8; }
  .plan ul { font-size: 16px; }
  .plan .svc-book { font-size: 16px; }
}