/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* The background shapes sit past the page edge. Clip them instead of showing a sideways scrollbar. */
html,
body {
  overflow-x: clip;
}

/* Soft colour washes and a few blurred shapes behind the content. */
body {
  background:
    radial-gradient(circle at 0% 12%, rgba(244, 230, 228, 0.95), transparent 28%),
    radial-gradient(circle at 100% 46%, rgba(228, 239, 232, 0.9), transparent 26%),
    var(--surface);
}

.hero,
.section,
.site-footer {
  position: relative;
}

.hero,
.site-footer {
  overflow: hidden;
}

.hero::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: var(--primary);
  -webkit-mask-image: url("/wp-content/uploads/2026/10/Rituals-maroon-logo.png");
  mask-image: url("/wp-content/uploads/2026/10/Rituals-maroon-logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.hero::before {
  width: 54rem;
  height: 38rem;
  left: -12rem;
  top: -6rem;
  opacity: 0.14;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.site-footer::before {
  width: 17rem;
  height: 12rem;
  right: -7rem;
  bottom: -5.5rem;
  background-color: #f4e6e4;
  opacity: 0.22;
  -webkit-mask-position: right bottom;
  mask-position: right bottom;
}

.hero > *,
.section > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

/* Inline groups such as "About the salon" read as buttons, not body text. */
.body-copy:has(> a.text-link) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.body-copy a.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--primary);
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.body-copy a.text-link + a.text-link {
  margin-inline-start: 0;
}

.body-copy a.text-link::after {
  content: "→";
  font-size: 0.95em;
  line-height: 1;
}

.body-copy a.text-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.body-copy a.text-link:focus,
.body-copy a.text-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  color: var(--primary);
}

.body-copy a.text-link:active {
  background: #4A1C28;
  border-color: #4A1C28;
  color: var(--on-primary);
  transform: translateY(1px);
}

/* Body treatments leads the grid: two columns, a short line, no icon. */
.card-grid.brxe-block > .treatment-card.brxe-div:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-content: center;
  align-items: end;
  column-gap: var(--space-l);
  row-gap: 0.7rem;
}

.card-grid.brxe-block > .treatment-card.brxe-div:first-child::before {
  display: none;
}

.card-grid.brxe-block > .treatment-card.brxe-div:first-child .card-title {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  padding-right: 0;
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.02;
}

.card-grid.brxe-block > .treatment-card.brxe-div:first-child .card-text {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
}

.card-grid.brxe-block > .treatment-card.brxe-div:first-child .text-link {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

@media (max-width: 478px) {
  .card-grid.brxe-block > .treatment-card.brxe-div:first-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .card-grid.brxe-block > .treatment-card.brxe-div:first-child .card-title,
  .card-grid.brxe-block > .treatment-card.brxe-div:first-child .card-text,
  .card-grid.brxe-block > .treatment-card.brxe-div:first-child .text-link {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
  }
}

/* A small mark in the top-right of each treatment card. */
.treatment-card.brxe-div .card-title {
  padding-right: 3.1rem;
}

.treatment-card.brxe-div::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: #f8f1ec center / 1.45rem 1.45rem no-repeat;
}

.treatment-card.brxe-div .text-link::after {
  z-index: 2;
}

.treatment-card.brxe-div:has(a[href="/treatments/"])::before,
.treatment-nav a[href="/treatments/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6.5 19.5v-1A4.5 4.5 0 0 1 11 14h2a4.5 4.5 0 0 1 4.5 4.5v1'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/facial-treatments/"])::before,
.treatment-nav a[href="/facial-treatments/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M9 10.5h.01M15 10.5h.01M9.4 14.6c.8.7 1.7 1.1 2.6 1.1s1.8-.4 2.6-1.1'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/eye-treatments/"])::before,
.treatment-nav a[href="/eye-treatments/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 7.2 12 7.2 21.5 12 21.5 12 18 16.8 12 16.8 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/dermapen-2/"])::before,
.treatment-nav a[href="/dermapen-2/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M13 5l6 6-8.5 8.5H4.5V15L13 5Z'/%3E%3Cpath d='M4 21h5'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/purederma/"])::before,
.treatment-nav a[href="/purederma/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 8c1.6 0 1.6-2 3.2-2S8.8 8 10.4 8s1.6-2 3.2-2 1.6 2 3.2 2 1.6-2 3.2-2'/%3E%3Cpath d='M4 13c1.6 0 1.6-2 3.2-2s1.6 2 3.2 2 1.6-2 3.2-2 1.6 2 3.2 2 1.6-2 3.2-2'/%3E%3Cpath d='M4 18c1.6 0 1.6-2 3.2-2s1.6 2 3.2 2 1.6-2 3.2-2 1.6 2 3.2 2 1.6-2 3.2-2'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/ladies-waxing/"])::before,
.treatment-nav a[href="/ladies-waxing/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 16.5C10 15 13 11 14 4c5.5 2 7.5 6.5 5.5 11.5-4 .8-8.5 1.8-13.5 1Z'/%3E%3Cpath d='M10 14.5c1-2.2 2.2-4 4.2-5.8'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/laser-ipl-hair-removal/"])::before,
.treatment-nav a[href="/laser-ipl-hair-removal/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.5 5.2L19 9.8l-5.5 1.7L12 17l-1.5-5.5L5 9.8l5.5-1.6L12 3Z'/%3E%3Cpath d='M5 19h4M15 19h4'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/manicures-and-pedicures/"])::before,
.treatment-nav a[href="/manicures-and-pedicures/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 15c0-4.4 2.1-8 5-8s5 3.6 5 8v4H7v-4Z'/%3E%3Cpath d='M7 15.2h10'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/treatments-for-men/"])::before,
.treatment-nav a[href="/treatments-for-men/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='8' r='3'/%3E%3Cpath d='M5.2 19.5v-1A4.2 4.2 0 0 1 9.4 14.3h2.2a4.2 4.2 0 0 1 4.2 4.2v1'/%3E%3Cpath d='M16 5.5h3.2V8.8'/%3E%3Cpath d='M19.2 5.5 15.2 9.5'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/ellie-harris/"])::before,
.treatment-nav a[href="/ellie-harris/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='8' r='2.2'/%3E%3Cpath d='M9 9.4h8'/%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M15.5 9.4V6.2'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/spa-packages/"])::before,
.treatment-nav a[href="/spa-packages/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.1'/%3E%3Ccircle cx='12' cy='5.6' r='2.1'/%3E%3Ccircle cx='12' cy='18.4' r='2.1'/%3E%3Ccircle cx='5.6' cy='12' r='2.1'/%3E%3Ccircle cx='18.4' cy='12' r='2.1'/%3E%3C/svg%3E");
}

.treatment-card.brxe-div:has(a[href="/gift-vouchers/"])::before,
.treatment-nav a[href="/gift-vouchers/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='9' rx='1.5'/%3E%3Cpath d='M4 14.5h16M12 10v9'/%3E%3Cpath d='M12 10c-1.8 0-3.2-2-2-3.4C11.2 5.4 12 7.6 12 10c0-2.4.8-4.6 2-3.4 1.2 1.4-.2 3.4-2 3.4Z'/%3E%3C/svg%3E");
}

/* Opening hours: today's time is the object, the rest of the week stays quiet. */
.hours-ready > #brxe-fuhfvg {
  display: none;
}

.visit-panel .hours-today {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0 0 1.1rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--line);
}

.visit-panel .hours-kicker {
  margin: 0;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.visit-panel .hours-now {
  margin: 0;
  color: var(--ink);
  font-family: Fraunces, serif;
  font-size: clamp(2.7rem, 4.2vw, 3.75rem);
  font-weight: 460;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.visit-panel .hours-day {
  margin: 0.15rem 0 0;
  color: var(--accent);
  font-family: Fraunces, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 450;
  line-height: 1.2;
}

.visit-panel .hours-ready .hours-list {
  gap: 0;
}

.visit-panel .hours-list > .brxe-block {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.visit-panel .hours-ready .hours-list div {
  padding: 0.32rem 0;
  border-bottom: 0;
  color: rgba(42, 33, 28, 0.72);
  font-size: 0.92rem;
}

.hours-ready .hours-list div[hidden] {
  display: none;
}

.visit-panel .hours-list .hours-day-name {
  font-weight: 600;
}

.hours-ready .hours-list dt,
.hours-ready .hours-list .hours-day-name {
  font-weight: 450;
}

.hours-ready .hours-note {
  margin-top: 0.45rem;
  color: rgba(42, 33, 28, 0.62);
  font-size: 0.85rem;
}

.hours-ready > #brxe-9rz8r8 {
  margin-top: 0.45rem;
  color: rgba(42, 33, 28, 0.62);
  font-size: 0.85rem;
}

/* About page photos keep the shape of the original files. */
.about-tagline.brxe-text-basic {
  margin: 0 0 var(--space-s);
  color: var(--accent);
  font-family: Fraunces, serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-style: italic;
  line-height: 1.3;
}

.about-photo.brxe-image,
.about-photo.brxe-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1.25rem;
  object-fit: cover;
  object-position: center;
}

.about-photo-portrait.brxe-image,
.about-photo-portrait.brxe-image img {
  aspect-ratio: 2 / 3;
}

.about-photo-wide.brxe-image,
.about-photo-wide.brxe-image img {
  margin-top: var(--space-l);
  aspect-ratio: 3 / 2;
}

.price-list.brxe-block {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-s);
}

.price-row.brxe-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.price-row.brxe-block > .price-name {
  flex: 1 1 auto;
  min-width: 0;
}

.price-row.brxe-block > .price-amount {
  flex: 0 0 auto;
}

.price-name,
.price-amount {
  margin: 0;
}

.price-name {
  font-weight: 500;
}

.price-amount {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-note.brxe-text-basic {
  margin: 0.35rem 0 0;
  color: rgba(42, 33, 28, 0.62);
  font-size: 0.92rem;
}

.price-list.brxe-block + .section-title.brxe-heading,
.price-note.brxe-text-basic + .section-title.brxe-heading {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.treatment-nav.brxe-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr));
  gap: 0.75rem;
}

.treatment-nav.brxe-block > .brxe-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 100%;
  min-height: 6.75rem;
  margin: 0;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
  font-family: Outfit, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}

.treatment-nav.brxe-block > .brxe-button::before {
  content: "";
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background-color: #f8f1ec;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.3rem 1.3rem;
}

.treatment-nav.brxe-block > .brxe-button:hover {
  border-color: var(--accent);
  background: #fffdfb;
  color: var(--ink);
}

.treatment-nav.brxe-block > .brxe-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.treatment-nav.brxe-block > a[aria-current="page"] {
  border-color: var(--primary);
  background: #f8f1ec;
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--ink);
}

.treatment-nav a[href="/aesthetics/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c2.4 3.4 5.2 6.4 5.2 9.6a5.2 5.2 0 0 1-10.4 0c0-3.2 2.8-6.2 5.2-9.6Z'/%3E%3C/svg%3E");
}

.treatment-nav a[href="/dermalogica/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237A3142' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3.5h5M10.2 3.5V6h3.6V3.5'/%3E%3Cpath d='M8.2 6h7.6l.7 2.1A4.4 4.4 0 0 1 18 11.4v7.1a1.8 1.8 0 0 1-1.8 1.8H7.8A1.8 1.8 0 0 1 6 18.5v-7.1c0-1.3.5-2.4 1.5-3.3L8.2 6Z'/%3E%3C/svg%3E");
}

.page-photos.brxe-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
  gap: 0.85rem;
  margin-top: var(--space-l);
}

.page-photos .brxe-image,
.page-photos .brxe-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1.25rem;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 3 / 2;
}

.page-photos .photo-portrait.brxe-image,
.page-photos .photo-portrait.brxe-image img {
  aspect-ratio: 2 / 3;
  max-width: 22rem;
}

.page-photos .photo-banner.brxe-image,
.page-photos .photo-banner.brxe-image img,
.page-photos .photo-wide.brxe-image,
.page-photos .photo-wide.brxe-image img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

.page-photos .photo-square.brxe-image,
.page-photos .photo-square.brxe-image img {
  aspect-ratio: 1 / 1;
}

.page-photos .photo-small.brxe-image,
.page-photos .photo-small.brxe-image img {
  max-width: 14rem;
}

.photo-pair.brxe-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.photo-pair.brxe-block > .brxe-image {
  flex: 0 0 auto;
  width: 22rem;
  max-width: 100%;
}

.photo-pair.brxe-block > .photo-small.brxe-image {
  width: 14rem;
}

.treatment-group.brxe-block {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.about-with-portrait.brxe-container {
  display: grid;
  grid-template-columns: minmax(14rem, 0.82fr) minmax(0, 1.18fr);
  column-gap: var(--space-l);
  align-items: start;
}

.about-with-portrait.brxe-container > .brxe-image {
  grid-column: 1;
  grid-row: 1 / span 8;
}

.about-with-portrait.brxe-container > :not(.brxe-image) {
  grid-column: 2;
}

@media (max-width: 991px) {
  .about-with-portrait.brxe-container {
    grid-template-columns: 1fr;
  }

  .about-with-portrait.brxe-container > .brxe-image,
  .about-with-portrait.brxe-container > :not(.brxe-image) {
    grid-column: auto;
    grid-row: auto;
  }

  .about-with-portrait.brxe-container > .brxe-image {
    order: 2;
  }
}

/* Content eases up as each block enters the screen. */
@media (prefers-reduced-motion: no-preference) {
  .will-rise {
    opacity: 0;
    transform: translateY(24px);
  }

  .will-rise.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.75s ease, transform 0.75s ease;
    transition-delay: var(--rise, 0ms);
  }
}