/* === src/components/sections/AboutIntro.astro === */
/* Featured founder (left, tall) + two stacked cards (right). Rows size to
     content: the founder image fills its column, while the two cards keep their
     photos at native aspect ratios (set inline) so nothing is cropped. */
  .ai-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 2vw, 24px); }
  .ai-founder { grid-row: span 2; }
  .ai-card { display: flex; flex-direction: column; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 0.5px solid rgba(61,57,53,0.16); overflow: hidden; text-decoration: none; transition: border-color 0.3s var(--ease-luxury), background 0.3s var(--ease-luxury); }
  .ai-card:hover { background: #fff; border-color: var(--anaya-pink-deep); }
  .ai-media { position: relative; display: block; overflow: hidden; background: #efeae6; flex: none; }
  .ai-media img { transition: transform 0.6s var(--ease-luxury); }
  .ai-card:hover .ai-media img { transform: scale(1.05); }
  /* Founder image fills the tall featured card; anchored to the top for the face. */
  .ai-founder .ai-media { flex: 1 1 auto; min-height: 260px; }
  .ai-founder .ai-media img { object-position: center top; }
  /* Why card crops its portrait photo to match the Experts card height; bias up
     to keep the therapist and client in frame. */
  .ai-why .ai-media img { object-position: center 28%; }
  .ai-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: clamp(24px, 2.4vw, 36px); }
  .ai-founder .ai-body { flex: 0 0 auto; }
  .ai-label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .ai-title { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); line-height: 1.12; color: var(--anaya-ink); }
  .ai-text { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: rgba(61,57,53,0.7); text-wrap: pretty; }
  .ai-cue { margin-top: auto; padding-top: 6px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--anaya-pink-deep); transition: color 0.3s var(--ease-luxury); }
  .ai-card:hover .ai-cue { color: var(--anaya-pink); }

  @media (max-width: 900px) {
    .ai-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .ai-founder { grid-row: auto; }
    .ai-media { flex: none; }
    .ai-founder .ai-media { aspect-ratio: 4 / 5; }
    .ai-card:not(.ai-founder) .ai-media { aspect-ratio: 16 / 10; }
  }

/* === src/components/sections/BeforeAfterCompare.astro === */
.bac { display: flex; flex-direction: column; gap: clamp(26px, 3.5vw, 40px); align-items: center; width: 100%; }

  /* Category tabs */
  .bac-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 2vw, 20px); }
  .bac-cat { appearance: none; background: none; border: none; padding: 8px 8px 12px; position: relative; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--v2-case-idle-fg); cursor: pointer; transition: color 0.3s var(--ease-luxury); }
  .bac-cat::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1.5px; background: var(--v2-eyebrow); transform: scaleX(0); transition: transform 0.35s var(--ease-luxury); }
  .bac-cat:hover { color: var(--v2-heading); }
  .bac-cat.is-active { color: var(--v2-heading); }
  .bac-cat.is-active::after { transform: scaleX(1); }
  /* Phones: single-line scroll strip with a smaller label (matches the price
     list tabs) so a third category (e.g. Body Treatments) never overflows. */
  @media (max-width: 575.98px) {
    .bac-cats { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .bac-cats::-webkit-scrollbar { display: none; }
    .bac-cat { flex: 0 0 auto; white-space: nowrap; font-size: 10.5px; letter-spacing: 0.1em; padding: 8px 5px 10px; }
  }

  /* Slider stage */
  .bac-main { width: 100%; display: flex; justify-content: center; }
  .bac-stage { width: 100%; display: flex; justify-content: center; }
  .bac-box { position: relative; height: min(58vh, 560px); aspect-ratio: 960 / 920; width: auto; max-width: 100%; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; }
  .bac-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .bac-clip { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); }
  .bac-clip img { top: 0; left: 0; max-width: none; }
  .bac-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #FBFAF9; z-index: 3; }
  .bac-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0.5px solid rgba(251,250,249,0.9); background: rgba(33,30,27,0.55); display: flex; align-items: center; justify-content: center; color: #FBFAF9; font-size: 13px; letter-spacing: 0.1em; }
  .bac-chip { position: absolute; top: 15px; z-index: 2; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: #FBFAF9; background: rgba(33,30,27,0.55); padding: 8px 14px; }
  .bac-chip-b { left: 15px; }
  .bac-chip-a { right: 15px; }

  /* With card: slider + card fill the row edge-to-edge */
  .bac--card .bac-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
  .bac--card .bac-stage { display: block; }
  .bac--card .bac-box { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 82vh; }

  .bac-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px); background: rgba(255,255,255,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.7); }
  .bac-card-label { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--anaya-ink); }
  .bac-card-changed { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(61,57,53,0.75); text-wrap: pretty; }
  .bac-benefits { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .bac-benefits li { position: relative; padding-left: 28px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(61,57,53,0.82); }
  .bac-benefits li::before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--anaya-pink-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .bac-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 0.5px solid rgba(61,57,53,0.14); }
  .bac-stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; background: rgba(255,255,255,0.55); border: 0.5px solid rgba(61,57,53,0.12); }
  .bac-stat-k { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(61,57,53,0.5); }
  .bac-stat-v { font-family: var(--font-display); font-size: 17px; color: var(--anaya-ink); }

  /* Treatment buttons */
  .bac-cases-wrap { position: relative; width: 100%; }
  .bac-cases { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; }
  .bac-case { appearance: none; padding: 12px 22px; border: 0.5px solid var(--v2-case-border); background: transparent; color: var(--v2-case-idle-fg); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.3s var(--ease-luxury), color 0.3s var(--ease-luxury), border-color 0.3s var(--ease-luxury); }
  .bac-case:hover { color: var(--v2-heading); border-color: var(--v2-heading); }
  .bac-case.is-active { background: var(--v2-case-active-bg); color: var(--v2-case-active-fg); border-color: var(--v2-case-active-bg); }

  /* Arrow controls (only shown once the strip scrolls, below 901px) */
  .bac-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 46px; align-items: center; justify-content: center; border: 0.5px solid var(--v2-case-border); background: var(--v2-dark-bg); color: var(--v2-case-idle-fg); font-family: var(--font-display); font-size: 24px; line-height: 1; cursor: pointer; }
  .bac-arrow-prev { left: 0; }
  .bac-arrow-next { right: 0; }

  @media (max-width: 860px) {
    .bac--card .bac-box { max-width: 460px; margin: 0 auto; max-height: 64vh; }
    /* Promote the slider + card out of the grid so the treatment-nav strip can
       sit between them: slider, then nav buttons, then the detail card. */
    .bac--card .bac-main { display: contents; }
    .bac--card .bac-cats { order: 0; }
    .bac--card .bac-stage { order: 1; width: 100%; }
    .bac--card .bac-cases-wrap { order: 2; }
    .bac--card .bac-card { order: 3; width: 100%; box-sizing: border-box; }
  }

  /* Stat pills at <=438px: two on top, the third full-width below. */
  @media (max-width: 438px) {
    .bac-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .bac-stat { padding: 12px 14px; }
    .bac-stat:nth-child(3) { grid-column: 1 / -1; }
  }

  /* Below 1029px: one horizontal scroll strip with arrows (uneven-width labels
     wrapped raggedly otherwise). */
  @media (max-width: 1028px) {
    .bac-cases { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 44px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 44px; cursor: grab; }
    .bac-cases:active { cursor: grabbing; }
    .bac-cases::-webkit-scrollbar { display: none; }
    .bac-case { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
    .bac-arrow { display: flex; }
  }

/* === src/components/sections/BeforeAfterGallery.astro === */
.bag { display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 56px); width: 100%; }

  /* Filter dropdown */
  .bag-filterbar { position: relative; width: min(440px, 100%); margin: 0 auto; }
  /* Matches .blog-cat-dd on the Journal exactly. It previously used the --v2-* tokens,
     which mostly resolve the same but left three differences: a transparent fill that
     disappeared into the section's pink background, a slightly different chevron tint,
     and an open-state chevron in --v2-dark-bg (pale pink on pink) instead of white. */
  .bag-dd { display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; padding: 15px 15px 15px 20px; border: 0.5px solid rgba(61,57,53,0.2); background: #fff; cursor: pointer; transition: border-color 0.3s var(--ease-luxury); }
  .bag-dd:hover, .bag-dd[aria-expanded="true"] { border-color: var(--anaya-pink-deep); }
  .bag-dd-fic { flex: none; width: 18px; height: 18px; color: var(--anaya-pink-deep); }
  .bag-dd-val { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0.01em; color: var(--anaya-ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bag-dd-ic { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(185,128,138,0.1); color: var(--anaya-pink-deep); transition: transform 0.35s var(--ease-luxury), background 0.3s var(--ease-luxury), color 0.3s var(--ease-luxury); }
  .bag-dd-ic svg { width: 15px; height: 15px; }
  .bag-dd[aria-expanded="true"] .bag-dd-ic { transform: rotate(180deg); background: var(--anaya-pink-deep); color: #fff; }

  .bag-list-dd { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: #fff; border: 0.5px solid rgba(61,57,53,0.16); box-shadow: 0 26px 56px rgba(0,0,0,0.22); max-height: 62vh; overflow-y: auto; padding: 6px; display: none; flex-direction: column; }
  .bag-list-dd.is-open { display: flex; }
  .bag-opt { appearance: none; background: none; border: none; border-bottom: 0.5px solid rgba(61,57,53,0.07); border-left: 2px solid transparent; text-align: left; padding: 13px 16px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.01em; color: rgba(61,57,53,0.78); cursor: pointer; transition: color 0.25s var(--ease-luxury), padding 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury); }
  .bag-opt:last-child { border-bottom: none; }
  .bag-opt:hover { padding-left: 22px; color: var(--anaya-ink); }
  .bag-opt.is-active { background: rgba(185,128,138,0.09); border-left-color: var(--anaya-pink-deep); color: var(--anaya-pink-deep); font-weight: 700; }

  /* Results carousel — each slide is the slider + detail card, one per view */
  .bag-slider { display: flex; align-items: center; gap: 16px; }
  @media (max-width: 640px) { .bag-slider { gap: 8px; } }
  .bag-track { flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bag-track::-webkit-scrollbar { display: none; }
  .bag-arrow { flex: none; }
  .bag-arrow:disabled { opacity: 0.3; pointer-events: none; }
  /* <=576px: full-width slide with the arrows floating over its left/right edges. */
  @media (max-width: 575.98px) {
    .bag-slider { position: relative; gap: 0; }
    .bag-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 40px; font-size: 20px; background: rgba(251,250,249,0.55); border-color: rgba(61,57,53,0.35); box-shadow: 0 1px 4px -1px rgba(33,30,27,0.16); }
    .bag-arrow:not(:disabled):hover, .bag-arrow:not(:disabled):active { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); color: #fbfaf9; }
    .bag-prev { left: 5px; }
    .bag-next { right: 5px; }
  }
  .bag-item { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
  .bag-item[hidden] { display: none; }

  .bag-stage { display: block; }
  .bag-box { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 78vh; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; background: #2c2925; }
  .bag-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .bag-clip { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); }
  .bag-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #FBFAF9; z-index: 3; }
  .bag-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0.5px solid rgba(251,250,249,0.9); background: rgba(33,30,27,0.55); display: flex; align-items: center; justify-content: center; color: #FBFAF9; font-size: 13px; letter-spacing: 0.1em; }
  .bag-chip { position: absolute; top: 15px; z-index: 2; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: #FBFAF9; background: rgba(33,30,27,0.55); padding: 8px 14px; }
  .bag-chip-b { left: 15px; }
  .bag-chip-a { right: 15px; }

  /* Detail card */
  .bag-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); background: rgba(255,255,255,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.7); }
  .bag-card-group { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v2-eyebrow); }
  .bag-card-label { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--v2-heading); }
  .bag-card-changed { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--v2-case-idle-fg); text-wrap: pretty; }
  .bag-benefits { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .bag-benefits li { position: relative; padding-left: 28px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--v2-case-idle-fg); }
  .bag-benefits li::before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--v2-eyebrow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .bag-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 0.5px solid rgba(61,57,53,0.14); }
  .bag-stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; background: rgba(255,255,255,0.55); border: 0.5px solid rgba(61,57,53,0.12); }
  .bag-stat-k { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(61,57,53,0.5); }
  .bag-stat-v { font-family: var(--font-display); font-size: 17px; color: var(--v2-heading); }

  .bag-empty { margin: 0; text-align: center; font-family: var(--font-body); font-size: 15px; color: var(--v2-case-idle-fg); }
  .bag-empty[hidden] { display: none; }

  /* Stack on tablets/phones: slider on top, card below. */
  @media (max-width: 860px) {
    .bag-item { grid-template-columns: 1fr; }
    .bag-box { max-width: 460px; margin: 0 auto; max-height: 64vh; }
    .bag-card { width: 100%; box-sizing: border-box; }
  }
  @media (max-width: 438px) {
    .bag-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .bag-stat:nth-child(3) { grid-column: 1 / -1; }
  }

/* === src/components/sections/Faq.astro === */
.faq-item { border-bottom: 0.5px solid rgba(61,57,53,0.16); }
  .faq-item:first-child { border-top: 0.5px solid rgba(61,57,53,0.16); }
  .faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 2.4vw, 30px) 0; font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 25px); line-height: 1.25; color: var(--anaya-ink); transition: color 0.3s var(--ease-luxury); }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q:hover { color: var(--anaya-pink-deep); }
  .faq-icon { flex: none; font-family: var(--font-body); font-size: 24px; line-height: 1; color: var(--anaya-pink-deep); transition: transform 0.35s var(--ease-luxury); }
  details[open] .faq-icon { transform: rotate(45deg); }
  .faq-a { overflow: hidden; transition: height 0.38s var(--ease-luxury); }
  .faq-a__inner { padding: 0 0 clamp(22px, 2.4vw, 30px); max-width: 760px; }
  @media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* === src/components/sections/Footer.astro === */
/* Footer link columns: auto-fit by default. */
  .ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }
  /* 934-1159px: 4 auto columns left one group orphaned under the tall "Most
     Loved". Switch to 3 columns and stack Connect under Explore (and Visit
     under Treatments), with Most Loved spanning the middle. */
  @media (min-width: 934px) and (max-width: 1159px) {
    .ft-cols { grid-template-columns: 1fr 1.25fr 1fr; grid-template-areas: "a b c" "e b d"; align-items: start; column-gap: clamp(30px, 5vw, 60px); }
    .ft-cols > :nth-child(1) { grid-area: a; }
    .ft-cols > :nth-child(2) { grid-area: b; }
    .ft-cols > :nth-child(3) { grid-area: c; }
    .ft-cols > :nth-child(4) { grid-area: d; }
    .ft-cols > :nth-child(5) { grid-area: e; }
    /* space between the two stacked groups in the side columns */
    .ft-cols > :nth-child(4), .ft-cols > :nth-child(5) { margin-top: 16px; }
  }
  /* 689-933px: two balanced columns — Treatments then Most Loved on the left,
     Explore then Connect and Visit on the right (source order flows this way). */
  @media (min-width: 689px) and (max-width: 933px) {
    .ft-cols { display: block; columns: 2; column-gap: clamp(30px, 5vw, 60px); }
    .ft-cols > * { break-inside: avoid; margin-bottom: 40px; }
  }
  /* Phones (<=688px): stack the footer link groups into a single column. */
  @media (max-width: 688px) {
    .ft-cols { grid-template-columns: 1fr; gap: 32px; }
  }

  /* Newsletter content sits in one block; the block moves, the text stays left. */
  .ft-nl-inner { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 440px; align-items: flex-start; text-align: left; }
  /* Desktop (>=761px): the whole block hugs the right edge, content stays left-aligned. */
  @media (min-width: 761px) {
    .ft-nl { align-items: flex-end !important; }
  }
  /* Mobile (<761px): centre the stacked logo, description and newsletter block. */
  @media (max-width: 760px) {
    .ft-brand { align-items: center !important; text-align: center; }
    .ft-brand img { height: clamp(120px, 34vw, 160px) !important; }
    .ft-brand p { margin-left: auto !important; margin-right: auto !important; }
    .ft-nl { align-items: center !important; }
    .ft-nl-inner { align-items: center; text-align: center; }
    .ft-nl-inner form { margin: 0 auto; justify-content: center; }
    .ft-nl-inner [data-nl-success] { justify-content: center; }
  }

/* === src/components/sections/Header.astro === */
/* The header is position:fixed at top:0, so for a logged-in user the admin bar
     (32px tall, z-index 99999) is painted over its first 32px. The bar swallows
     the clicks there: the logo's top 12px of 56 and the Treatments trigger's top
     29px of 90 are both inside that band, so aiming at the upper half of either
     hits #wpadminbar instead of the link. Push the header below the bar.
     WordPress switches the bar to 46px under 782px, and to position:absolute
     under 600px -- once it scrolls away with the page, top:0 is right again.
     !important because Header.astro sets top:0 inline, which no selector beats. */
  .admin-bar [data-header] { top: 32px !important; }
  @media screen and (max-width: 782px) { .admin-bar [data-header] { top: 46px !important; } }
  @media screen and (max-width: 600px) { .admin-bar [data-header] { top: 0 !important; } }

.tx-mega-in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr; }
  .tx-mega-rail { display: flex; flex-direction: column; gap: 2px; padding: 40px 26px 40px clamp(20px, 5vw, 50px); border-right: 0.5px solid rgba(61,57,53,0.12); }
  .tx-mega-cat { appearance: none; background: none; border: none; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 4px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.1; color: rgba(61,57,53,0.7); transition: background 0.25s cubic-bezier(0.22,0.61,0.36,1), color 0.25s cubic-bezier(0.22,0.61,0.36,1); }
  .tx-mega-cat > span:last-child { color: var(--anaya-pink-deep); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; }
  .tx-mega-cat:hover { color: var(--anaya-ink); }
  .tx-mega-cat[aria-selected="true"] { background: rgba(185,128,138,0.12); color: var(--anaya-ink); }
  .tx-mega-cat[aria-selected="true"] > span:last-child { opacity: 1; transform: none; }
  .tx-mega-panels { padding: 42px clamp(20px, 5vw, 50px) 46px; }
  .tx-mega-panel[hidden] { display: none; }
  /* Flat course list, flowed into balanced columns (no sub-category headers). */
  .tx-mega-list { column-count: 3; column-gap: clamp(24px, 3vw, 50px); }
  .tx-mega-link { display: block; break-inside: avoid; margin-bottom: 14px; font-family: var(--font-display); font-size: 16px; line-height: 1.25; color: rgba(61,57,53,0.82); text-decoration: none; transition: color 0.2s cubic-bezier(0.22,0.61,0.36,1); }
  .tx-mega-link.is-active { color: var(--anaya-pink-deep); }
  .tx-mega-link:hover { color: var(--anaya-pink-deep); }
  .tx-mega-all { display: inline-block; margin-top: 36px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anaya-pink-deep); text-decoration: none; border-bottom: 0.5px solid var(--anaya-pink-deep); padding-bottom: 3px; }
  .drawer-type { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(61,57,53,0.5); padding: 12px 0 2px; }

  /* Mobile Treatments: vertical category accordion, styled like the desktop rail. */
  .mtx { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(61,57,53,0.14); }
  .mtx-cat { width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 4px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.1; color: rgba(61,57,53,0.72); transition: background 0.25s cubic-bezier(0.22,0.61,0.36,1), color 0.25s cubic-bezier(0.22,0.61,0.36,1); }
  .mtx-cat:hover { background: rgba(61,57,53,0.04); color: var(--anaya-ink); }
  .mtx-cat-ic { flex: none; font-family: var(--font-body); font-size: 19px; line-height: 1; color: rgba(61,57,53,0.4); transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), color 0.25s; }
  .mtx-cat[aria-expanded="true"] { background: rgba(185,128,138,0.12); color: var(--anaya-ink); }
  .mtx-cat[aria-expanded="true"] .mtx-cat-ic { transform: rotate(45deg); color: var(--anaya-pink-deep); }
  .mtx-catpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22,0.61,0.36,1); }
  .mtx-clip { overflow: hidden; min-height: 0; }
  .mtx-inner { display: flex; flex-direction: column; padding: 6px 0 12px 16px; }
  .mtx-all { align-self: flex-start; margin-top: 14px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anaya-pink-deep); text-decoration: none; border-bottom: 0.5px solid var(--anaya-pink-deep); padding-bottom: 3px; }

  /* Full-width menu on tablet and phone */
  @media (max-width: 1180px) {
    [data-mobile-menu] nav { width: 100vw !important; }
  }

/* === src/components/sections/Hero.astro === */
/* Side-by-side hero on narrow desktops (993–1108px): the text column is tight,
     so keep the two CTAs on one row by letting them share the width instead of
     wrapping onto two lines. */
  @media (min-width: 993px) and (max-width: 1108px) {
    .hero-cta-row { flex-wrap: nowrap; }
    .hero-cta-row .luxury-btn { flex: 1 1 0; min-width: 0; padding-inline: 18px !important; }
  }
  /* Hero CTAs stack full-width below 576px so labels never truncate. */
  @media (max-width: 575px) {
    .hero-cta-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .hero-cta-row .luxury-btn { width: 100%; flex: none; padding-inline: 20px !important; }
  }

/* === src/components/sections/Instagram.astro === */
/* Section padding lives here rather than inline so it can shrink on narrower
     viewports: the grid gets much taller once it wraps to fewer columns, and a
     flat 100px above and below then reads as a large empty gap. */
  .ig-section { padding: 100px clamp(20px, 5vw, 50px); }
  .ig-section .ig-inner { gap: 50px; }
  @media (max-width: 992px) {
    .ig-section { padding-top: 32px; padding-bottom: 32px; }
    /* The 50px gap between the heading and the grid is the other half of the
       section's height here, so it tightens with the padding. */
    .ig-section .ig-inner { gap: 28px; }
  }
  @media (max-width: 640px) {
    .ig-section { padding-top: 24px; padding-bottom: 24px; }
    .ig-section .ig-inner { gap: 22px; }
  }
/* Smash Balloon grid, held to the same 1000px column the Juicer embed used so
     the section's rhythm is unchanged. The plugin renders in normal flow, so
     unlike the old iframe there is no runtime height to measure. */
  .ig-feed { max-width: 1000px; margin: 0 auto; }
  /* The plugin's own wrapper carries an inline padding-bottom for its button. */
  .ig-feed #sb_instagram { padding-bottom: 0 !important; }
  /* The section already provides the eyebrow (@anaya.aestheticsbali) and the
     "Follow Anaya" heading, so the plugin's header and its blue follow button
     would state both a second time. Switch "Header" and "Follow" off in the
     feed's own settings too -- this rule is only the safety net for when the
     feed is re-saved with the defaults restored. */
  .ig-feed .sb_instagram_header,
  .ig-feed #sbi_load { display: none !important; }
  /* Inherit the brand type rather than the plugin's own stack. */
  .ig-feed #sb_instagram, .ig-feed #sb_instagram * { font-family: inherit; }

/* === src/components/sections/Marquee.astro === */
.brand-track { animation: v3Marquee 46s linear infinite; }
  /* Pause the scroll while hovering so a logo can actually be hovered. */
  .brand-marquee:hover .brand-track { animation-play-state: paused; }

  .brand-logo {
    max-height: 32px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Resting state: unified monochrome; multiply hides the white-bg logos. */
    filter: grayscale(1);
    opacity: 0.55;
    mix-blend-mode: multiply;
    transition: filter 0.45s var(--ease-luxury), opacity 0.45s var(--ease-luxury), transform 0.45s var(--ease-luxury);
  }
  /* Hover: bloom into full colour + a gentle lift. */
  .brand-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    mix-blend-mode: normal;
    transform: scale(1.12);
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-logo { transition: none; }
  }

/* === src/components/sections/MonthlyPromo.astro === */
/* Desktop: the promo rises up over the pinned Price List ("most loved")
     while the engine holds that panel and darkens its veil. margin-top pulls
     this section up so it overlaps the extra viewport the engine reserves
     (see engine plStageUpdate `reveal`); min-height keeps it covering the
     viewport so nothing shows through as the panel releases. flex centres the
     content vertically in the taller section. */
  #monthly-promo.promo-rise {
    z-index: 6;
    margin-top: -100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  /* Two equal 50/50 columns (poster + copy), spanning the full content width so
     the section lines up with the navigation and the poster reads large. */
  .promo-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; box-sizing: border-box; }
  /* Full 9:16 poster, shown uncropped, filling its half of the row. */
  .promo-media { position: relative; overflow: hidden; aspect-ratio: 9 / 16; width: 100%; align-self: center; background: #4a0d16; }
  .promo-badge { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 10px 18px; background: rgba(251,250,249,0.94); color: var(--anaya-pink-deep); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(33,30,27,0.12); }
  /* Tablet (993-1024): keep side-by-side, but shrink the poster + copy so they
     fit without overflow and the copy fills the space beside the poster. */
  @media (min-width: 993px) and (max-width: 1024px) {
    .promo-wrap { gap: clamp(28px, 3vw, 48px); }
  }
  /* At 992px and below: stack the poster and copy vertically, with the poster
     filling the full width. */
  @media (max-width: 992px) {
    .promo-wrap { grid-template-columns: 1fr; }
    .promo-media { height: auto; width: 100%; }
    .promo-copy p { max-width: none !important; }
  }
  /* Phones: make the CTA full-width too. */
  @media (max-width: 575.98px) {
    .promo-copy .luxury-btn { width: 100%; align-self: stretch; padding-inline: 20px !important; }
  }

/* === src/components/sections/Results.astro === */
.results-viewall { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border: 0.5px solid var(--v2-case-border); color: var(--v2-heading); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--ease-luxury), color 0.3s var(--ease-luxury), gap 0.3s var(--ease-luxury); }
  .results-viewall:hover { background: var(--v2-eyebrow); border-color: var(--v2-eyebrow); color: var(--v2-dark-bg); gap: 15px; }

/* === src/components/sections/Testimonials.astro === */
.t-row { display: flex; align-items: center; gap: 16px; }
  @media (max-width: 640px) { .t-row { gap: 8px; } }
  /* <=576px: full-width card with the arrows floating over its left/right edges. */
  @media (max-width: 575.98px) {
    .t-row { position: relative; gap: 0; }
    .t-row .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 40px; font-size: 20px; background: rgba(251,250,249,0.55); border-color: rgba(61,57,53,0.35); box-shadow: 0 1px 4px -1px rgba(33,30,27,0.16); }
    .t-row .slider-arrow:hover, .t-row .slider-arrow:active { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); color: #fbfaf9; }
    .t-row [data-tslider-prev] { left: 5px; }
    .t-row [data-tslider-next] { right: 5px; }
  }

/* === src/components/sections/Treatments.astro === */
.tx-card__img { transition: transform 0.7s var(--ease-luxury); }
  .tx-card:hover .tx-card__img { transform: scale(1.05); }
  .tx-card__cue { transition: color 0.3s var(--ease-luxury); }
  .tx-card:hover .tx-card__cue { color: var(--anaya-pink); }
  @media (max-width: 760px) {
    .tx-card { aspect-ratio: 4 / 5; }
  }

/* === src/components/sections/Vip.astro === */
/* Phones: let the CTA fill the width. */
  @media (max-width: 575.98px) {
    .vip-cta { width: 100%; align-self: stretch; padding-inline: 20px !important; }
  }

/* === src/components/sections/WhyAnaya.astro === */
/* Hover-dim the other rows (was React state; pure CSS is enough here). */
  [data-why-ct]:hover [data-why-row]:not(:hover) { opacity: 0.35; }

/* === src/components/ui/BlogCard.astro === */
.blog-card { display: flex; flex-direction: column; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 0.5px solid rgba(61,57,53,0.16); overflow: hidden; text-decoration: none; transition: border-color 0.3s var(--ease-luxury), background 0.3s var(--ease-luxury); }
  .blog-card:hover { background: #fff; border-color: var(--anaya-pink-deep); }
  .blog-card-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #efeae6; }
  .blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-luxury); }
  .blog-card:hover .blog-card-media img { transform: scale(1.05); }
  .blog-card-cat { position: absolute; top: 14px; left: 14px; padding: 6px 12px; background: rgba(251,250,249,0.94); color: var(--anaya-pink-deep); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
  .blog-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: clamp(22px, 2vw, 30px); }
  .blog-card-title { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.22; color: var(--anaya-ink); }
  .blog-card-blurb { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: rgba(61,57,53,0.65); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-card-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(61,57,53,0.5); }
  .blog-card-dot { color: var(--anaya-pink-deep); }

/* === src/pages/404.astro === */
/* Phones: stack the CTAs full-width so labels never truncate. */
  @media (max-width: 575px) {
    .nf-ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .nf-ctas .luxury-btn { width: 100%; padding-inline: 20px !important; }
  }

/* === src/pages/about.astro === */
  /* Our Experts — swipeable slider (3 / 2 / 1 per view) with side arrows */
  .experts-stage { display: flex; align-items: center; gap: 16px; }
  [data-experts-grid] { flex: 1 1 auto; min-width: 0; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-experts-grid]::-webkit-scrollbar { display: none; }
  [data-experts-card] { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
  @media (max-width: 980px) { [data-experts-card] { flex-basis: calc((100% - 24px) / 2); } }
  @media (max-width: 640px) { [data-experts-card] { flex-basis: 100%; } }

  /* As Featured In — auto-playing press slider (2 / 1 per view) with side arrows */
  .press-stage { display: flex; align-items: center; gap: 14px; width: 100%; }
  .press-track { flex: 1 1 auto; min-width: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .press-track::-webkit-scrollbar { display: none; }
  /* <=576px: full-width card with the arrows floating over its left/right edges. */
  @media (max-width: 575.98px) {
    .experts-stage, .press-stage { position: relative; gap: 0; }
    .experts-stage .slider-arrow, .press-stage .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 40px; font-size: 20px; background: rgba(251,250,249,0.55); border-color: rgba(61,57,53,0.35); box-shadow: 0 1px 4px -1px rgba(33,30,27,0.16); }
    .experts-stage .slider-arrow:hover, .press-stage .slider-arrow:hover, .experts-stage .slider-arrow:active, .press-stage .slider-arrow:active { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); color: #fbfaf9; }
    .experts-stage [data-experts-prev], .press-stage [data-press-prev] { left: 5px; }
    .experts-stage [data-experts-next], .press-stage [data-press-next] { right: 5px; }
  }
  .press-slide { flex: 0 0 calc((100% - 20px) / 2); scroll-snap-align: start; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 0.5px solid rgba(61,57,53,0.14); }
  @media (max-width: 767px) { .press-slide { flex-basis: 100%; } }
  /* Founder: at 992px and below stack vertically and slot the image directly under
     the heading + founder name, above the story. The image is a separate grid column,
     so the text column is promoted with display:contents and its children reordered:
     eyebrow, h1, name (1) -> portrait (4) -> story (5) -> button (9).

     Ordered by role, not by position. The story is a WYSIWYG field, so its paragraph
     count is whatever the editor typed — the previous :nth-child(4..6) rules assumed
     exactly two, and a third paragraph took the button's slot, leaving the button on
     the default order:0 and pushing it above the portrait. */
  @media (max-width: 992px) {
    #founder [data-v3-split] { grid-template-columns: 1fr !important; gap: 24px !important; }
    #founder [data-v3-split] > div:nth-child(2) { display: contents !important; }

    /* Anything from the story, however many blocks it is, sits after the portrait. */
    #founder [data-v3-split] > div:nth-child(2) > * { order: 5; }
    /* Eyebrow, heading and founder name stay above it. */
    #founder [data-v3-split] > div:nth-child(2) > .type-eyebrow,
    #founder [data-v3-split] > div:nth-child(2) > h1,
    #founder [data-v3-split] > div:nth-child(2) > .type-caption { order: 1; }
    /* Show the full founder portrait (1066x1600, 2:3) instead of cropping it */
    #founder [data-v3-split] > div:first-child { order: 4; height: auto !important; aspect-ratio: 1066 / 1600; }
    /* Button always last, whatever the story contains. */
    #founder .founder-cta { order: 9; justify-self: start; }
  }
  /* Phones only: let the founder CTA fill the width. */
  @media (max-width: 575.98px) {
    #founder .founder-cta { justify-self: stretch; align-self: stretch; width: 100%; padding-inline: 20px !important; }
  }
  /* Why Choose Anaya — bento mosaic (heading + 5 image cards) */
  .why-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "head a b c" "head d d e";
    gap: 16px;
  }
  .why-head { grid-area: head; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-right: clamp(10px, 2vw, 24px); }
  .why-cell { position: relative; min-height: 320px; overflow: hidden; display: flex; align-items: flex-end; background: #2c2925; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; box-shadow: 0 14px 34px rgba(33,30,27,0.10); }
  .why-cell__img { transition: transform 0.6s var(--ease-luxury); }
  .why-cell:hover .why-cell__img { transform: scale(1.06); }
  /* Lightbox slider */
  .why-lb__stage { display: flex; align-items: center; gap: 14px; width: min(1040px, 94vw); }
  .why-lb__track { flex: 1 1 auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
  .why-lb__track::-webkit-scrollbar { display: none; }
  /* Slides, images and dots are injected at runtime and styled inline in the
     <script> (Astro's scoped styles won't reach runtime-created nodes). */
  .why-lb__nav { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(251,250,249,0.10); border: 0.5px solid rgba(251,250,249,0.5); color: #FBFAF9; font-family: var(--font-display); font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.3s var(--ease-luxury); }
  .why-lb__nav:hover { background: rgba(251,250,249,0.22); }
  @media (max-width: 600px) {
    .why-lb__nav { width: 40px; height: 40px; font-size: 22px; }
  }
  @media (max-width: 1024px) {
    .why-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "a b" "c d" "e e"; }
    .why-head { padding: 4px 0 18px; }
    .why-cell { min-height: 280px; }
  }
  @media (max-width: 600px) {
    .why-bento { grid-template-columns: 1fr; grid-template-areas: "head" "a" "b" "c" "d" "e"; }
    .why-cell { min-height: 240px; }
  }

/* === src/pages/blog.astro === */
.blog-layout { display: grid; grid-template-columns: 1fr 240px; gap: clamp(34px, 4.5vw, 72px); align-items: start; }
  .blog-main-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(26px, 3vw, 38px); padding-bottom: 18px; border-bottom: 0.5px solid rgba(61,57,53,0.16); }
  .blog-count { letter-spacing: 0.18em; text-transform: uppercase; color: var(--anaya-ink); font-weight: 700; }
  .blog-count-showing { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .blog-count-showing:not(:empty)::before { content: '·'; margin-right: 12px; color: rgba(61,57,53,0.3); }
  .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, 2.4vw, 32px); row-gap: clamp(30px, 3.4vw, 48px); }

  /* Sidebar (right) — vertical list on desktop */
  .blog-side-inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px; }
  /* The label is a deliberately small caption — shield it from the global
     responsive h2 rule (anaya.css) that would otherwise blow it past the
     240px column and overflow the page below 1280px. */
  .blog-side-heading { font-size: 12px !important; }
  .blog-cat-dd { display: none; }
  .blog-cat-list { display: flex; flex-direction: column; gap: 4px; }
  .blog-cat-btn { appearance: none; text-align: left; background: none; border: none; border-bottom: 0.5px solid rgba(61,57,53,0.1); padding: 11px 4px; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.02em; color: rgba(61,57,53,0.72); transition: color 0.25s var(--ease-luxury), padding-left 0.25s var(--ease-luxury); }
  .blog-cat-btn:hover { color: var(--anaya-ink); padding-left: 10px; }
  .blog-cat-btn.is-active { color: var(--anaya-pink-deep); font-weight: 700; }

  /* Category type-to-search — only rendered inside the mobile/tablet dropdown. */
  .blog-cat-search { display: none; }
  .blog-cat-btn[hidden] { display: none; }
  .blog-cat-empty { margin: 4px 0 2px; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; color: rgba(61,57,53,0.5); }

  /* <1024px: collapse the list into a dropdown */
  @media (max-width: 1023px) {
    .blog-layout { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
    .blog-side { order: -1; }
    .blog-side-inner { position: relative; top: auto; gap: 0; }
    .blog-side-heading { display: none; }

    /* Trigger — a refined filter control, not a plain input */
    .blog-cat-dd { display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; padding: 15px 15px 15px 20px; border: 0.5px solid rgba(61,57,53,0.2); background: #fff; cursor: pointer; transition: border-color 0.3s var(--ease-luxury); }
    .blog-cat-dd:hover, .blog-cat-dd[aria-expanded="true"] { border-color: var(--anaya-pink-deep); }
    .blog-cat-dd-fic { flex: none; width: 18px; height: 18px; color: var(--anaya-pink-deep); }
    .blog-cat-dd-val { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0.01em; color: var(--anaya-ink); line-height: 1.1; }
    .blog-cat-dd-ic { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(185,128,138,0.1); color: var(--anaya-pink-deep); transition: transform 0.35s var(--ease-luxury), background 0.3s var(--ease-luxury), color 0.3s var(--ease-luxury); }
    .blog-cat-dd-ic svg { width: 15px; height: 15px; }
    .blog-cat-dd[aria-expanded="true"] .blog-cat-dd-ic { transform: rotate(180deg); background: var(--anaya-pink-deep); color: #fff; }

    /* Panel */
    .blog-cat-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; gap: 0; background: #fff; border: 0.5px solid rgba(61,57,53,0.16); box-shadow: 0 26px 56px rgba(33,30,27,0.16); max-height: 62vh; overflow-y: auto; padding: 6px; display: none; }
    .blog-cat-list.is-open { display: flex; }
    .blog-cat-search { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1; margin-bottom: 4px; padding: 11px 14px; background: #fff; border-bottom: 0.5px solid rgba(61,57,53,0.1); }
    .blog-cat-search-ic { flex: none; width: 15px; height: 15px; color: var(--anaya-pink-deep); }
    .blog-cat-input { flex: 1 1 auto; min-width: 0; appearance: none; border: none; background: none; padding: 0; font-family: var(--font-body); font-size: 14px; color: var(--anaya-ink); }
    .blog-cat-input::placeholder { color: rgba(61,57,53,0.45); }
    .blog-cat-input:focus { outline: none; }
    .blog-cat-btn { padding: 13px 16px; border-bottom: 0.5px solid rgba(61,57,53,0.07); border-left: 2px solid transparent; }
    .blog-cat-btn:last-child { border-bottom: none; }
    .blog-cat-btn:hover { padding-left: 20px; color: var(--anaya-ink); }
    .blog-cat-btn.is-active { background: rgba(185,128,138,0.09); border-left-color: var(--anaya-pink-deep); color: var(--anaya-pink-deep); font-weight: 700; }
  }
  @media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

  /* Pagination */
  .blog-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(44px, 5vw, 64px); }
  .blog-pager:empty { display: none; }
  .blog-pager .blog-page-btn { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; appearance: none; border: 0.5px solid rgba(61,57,53,0.2); background: rgba(255,255,255,0.7); color: rgba(61,57,53,0.72); font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.04em; cursor: pointer; transition: color 0.25s var(--ease-luxury), border-color 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury); }
  .blog-pager .blog-page-btn:hover:not(:disabled) { color: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }
  .blog-pager .blog-page-btn.is-active { color: #fff; background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }
  .blog-pager .blog-page-btn:disabled { opacity: 0.38; cursor: default; }
  .blog-pager .blog-page-arrow { font-size: 20px; line-height: 1; }
  /* Phones: smaller buttons (and the JS shows only 3 numbers) so it fits one row. */
  @media (max-width: 512px) {
    .blog-pager { gap: 6px; }
    .blog-pager .blog-page-btn { min-width: 36px; height: 36px; padding: 0 7px; font-size: 12.5px; }
    .blog-pager .blog-page-arrow { font-size: 17px; }
  }

/* === src/pages/blog/[slug].astro === */
/* Header inner uses the same content width + padding as the hero/body, so the
     back link lines up with the image and article on every screen size. */
  .post-head-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 50px); display: flex; flex-direction: column; gap: clamp(30px, 4vw, 48px); }
  .post-title { margin: 0 auto; max-width: 820px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; color: var(--anaya-ink); text-wrap: balance; text-align: center; }

  .post-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(61,57,53,0.6); text-decoration: none; transition: color 0.25s var(--ease-luxury), gap 0.25s var(--ease-luxury); }
  .post-back:hover { color: var(--anaya-pink-deep); gap: 12px; }

  /* Hero image, aligned to the content width below it */
  .post-hero { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 50px); }
  .post-hero-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #efeae6; }
  .post-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Meta row above the image — author (with date beneath) on the left, read time on the right */
  .post-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; }
  .post-meta-top { margin: 0 0 18px; }
  .post-meta-author { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-body); color: var(--anaya-ink); }
  .post-meta-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: rgba(185,128,138,0.1); padding: 5px; box-sizing: border-box; flex: none; }
  .post-meta-authorname { display: flex; flex-direction: column; gap: 3px; }
  .post-meta-authorname > span { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.1; }
  .post-meta-authordate { font-size: 11.5px; font-weight: 400; letter-spacing: 0.04em; color: rgba(61,57,53,0.55); line-height: 1.1; }
  .post-meta-chip { padding: 5px 12px; background: rgba(185,128,138,0.12); color: var(--anaya-pink-deep); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
  .post-meta-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.04em; color: rgba(61,57,53,0.6); }
  .post-meta-item svg { color: var(--anaya-pink-deep); flex: none; }

  /* Two-column body + sidebar */
  .post-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 50px) clamp(60px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 5vw, 80px); align-items: start; }
  .post-main { min-width: 0; }

  .post-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: rgba(61,57,53,0.82); margin: 0 0 22px; text-wrap: pretty; }
  .post-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; color: var(--anaya-ink); margin: 40px 0 16px; }
  .post-body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.2; color: var(--anaya-ink); margin: 30px 0 12px; }
  .post-body ul { margin: 0 0 24px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
  .post-body li { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(61,57,53,0.82); }
  .post-body h2:first-child, .post-body p:first-child { margin-top: 0; }

  /* --- Block editor output -------------------------------------------------
     Posts written in wp-admin emit elements the ported JSON never produced
     (ordered lists, quotes, figures, tables, links, separators). These carry
     the same treatment as the rules above so an article written in Gutenberg
     matches one rendered from blog.json. Selectors stay on the element rather
     than .wp-block-* classes, so pasted or classic-editor markup styles too. */
  .post-body > *:first-child { margin-top: 0; }
  .post-body > *:last-child { margin-bottom: 0; }
  .post-body h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.25; color: var(--anaya-ink); margin: 26px 0 10px; }
  .post-body h5, .post-body h6 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anaya-pink-deep); margin: 24px 0 10px; }
  .post-body ol { margin: 0 0 24px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
  .post-body li { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(61,57,53,0.82); }
  .post-body li::marker { color: var(--anaya-pink-deep); }
  .post-body ul ul, .post-body ol ol, .post-body ul ol, .post-body ol ul { margin: 10px 0 0; }
  .post-body a { color: var(--anaya-pink-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; transition: color 0.3s var(--ease-luxury); }
  .post-body a:hover { color: var(--anaya-ink); }
  .post-body strong, .post-body b { font-weight: 700; color: var(--anaya-ink); }
  .post-body em, .post-body i { font-style: italic; }
  .post-body blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 1.5px solid var(--anaya-pink-deep); }
  .post-body blockquote p { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--anaya-ink); margin-bottom: 12px; }
  .post-body blockquote cite, .post-body blockquote figcaption { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: rgba(61,57,53,0.5); }
  .post-body figure { margin: 30px 0; }
  .post-body img { max-width: 100%; height: auto; display: block; }
  .post-body figcaption { margin-top: 10px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(61,57,53,0.55); text-align: center; }
  .post-body hr { margin: 40px 0; border: none; border-top: 0.5px solid rgba(61,57,53,0.18); }
  .post-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-family: var(--font-body); font-size: 15px; }
  .post-body th, .post-body td { text-align: left; padding: 12px 14px; border-bottom: 0.5px solid rgba(61,57,53,0.14); color: rgba(61,57,53,0.82); }
  .post-body th { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .post-body code { font-size: 0.92em; padding: 2px 6px; background: rgba(61,57,53,0.06); }
  .post-body pre { overflow-x: auto; padding: 18px; background: rgba(61,57,53,0.06); margin: 0 0 24px; }
  .post-body pre code { padding: 0; background: none; }
  /* Wide/full blocks can't break out of the article column. */
  .post-body .alignwide, .post-body .alignfull { max-width: 100%; margin-inline: 0; }
  .post-body .aligncenter { margin-inline: auto; }
  .post-body .wp-block-image.alignleft, .post-body .alignleft { float: left; margin: 6px 26px 18px 0; max-width: 50%; }
  .post-body .wp-block-image.alignright, .post-body .alignright { float: right; margin: 6px 0 18px 26px; max-width: 50%; }
  .post-body .wp-block-buttons { margin: 0 0 24px; }
  .post-body .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding-inline: 46px; background: var(--anaya-pink-deep); color: #fbfaf9; font-family: var(--font-body); font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 0; }
  @media (max-width: 620px) {
    .post-body .alignleft, .post-body .alignright { float: none; max-width: 100%; margin-inline: 0; }
  }

  /* Tags — under the copy, wraps freely as the list grows */
  .post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(34px, 4vw, 48px); padding-top: 28px; border-top: 0.5px solid rgba(61,57,53,0.14); }
  .post-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .post-tag { padding: 7px 14px; border: 0.5px solid rgba(61,57,53,0.2); background: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; color: rgba(61,57,53,0.72); text-decoration: none; transition: color 0.25s var(--ease-luxury), border-color 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury); }
  .post-tag:hover { color: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }

  /* Sidebar (scrolls with the page — no sticky) */
  .post-side { display: flex; flex-direction: column; gap: 40px; }
  .post-side-block { display: flex; flex-direction: column; gap: 16px; }
  /* Small caption-style label — !important shields it from the global responsive
     h2 rule (anaya.css) that would otherwise blow it up to ~36px below 1280px. */
  .post-side-heading { margin: 0; font-family: var(--font-body); font-size: 11px !important; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--anaya-ink); padding-bottom: 14px; border-bottom: 0.5px solid rgba(61,57,53,0.16); }

  .post-share { display: flex; flex-wrap: wrap; gap: 10px; }
  .post-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0.5px solid rgba(61,57,53,0.22); background: rgba(255,255,255,0.7); color: rgba(61,57,53,0.75); cursor: pointer; transition: color 0.25s var(--ease-luxury), border-color 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury), transform 0.25s var(--ease-luxury); }
  .post-share-btn:hover { color: #fff; background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); transform: translateY(-2px); }
  .post-copy-ok { min-height: 14px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; color: var(--anaya-pink-deep); }

  .post-topics { display: flex; flex-wrap: wrap; gap: 8px; }
  .post-topic { padding: 7px 13px; border: 0.5px solid rgba(61,57,53,0.2); background: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; color: rgba(61,57,53,0.72); text-decoration: none; transition: color 0.25s var(--ease-luxury), border-color 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury); }
  .post-topic:hover { color: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }
  .post-topic.is-active { color: #fff; background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }

  .post-rel { display: flex; flex-direction: column; }
  .post-rel-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 0.5px solid rgba(61,57,53,0.12); text-decoration: none; }
  .post-rel-item:first-child { padding-top: 0; }
  .post-rel-item:last-child { border-bottom: none; padding-bottom: 0; }
  .post-rel-thumb { flex: none; width: 68px; height: 68px; overflow: hidden; background: #efeae6; }
  .post-rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-luxury); }
  .post-rel-item:hover .post-rel-thumb img { transform: scale(1.06); }
  .post-rel-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .post-rel-date { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(61,57,53,0.5); }
  .post-rel-title { font-family: var(--font-display); font-size: 15px; line-height: 1.28; color: var(--anaya-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.25s var(--ease-luxury); }
  .post-rel-item:hover .post-rel-title { color: var(--anaya-pink-deep); }

  /* Stack sidebar under the article on narrower screens: one block per row, so
     Browse topics reads below Share this article rather than beside it. */
  @media (max-width: 960px) {
    .post-wrap { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 60px); }
    .post-side { position: static; top: auto; display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 40px; border-top: 0.5px solid rgba(61,57,53,0.14); }
  }

/* === src/pages/contact.astro === */
.ct-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: stretch; }
  /* Desktop: the image stretches to match the details column's height. */
  .ct-media { position: relative; min-height: 460px; overflow: hidden; min-width: 0; }
  /* .ct-details { display: flex; flex-direction: column; justify-content: center; gap: 28px; min-width: 0; } */
  .ct-details { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .ct-block { display: flex; flex-direction: column; gap: 7px; }
  .ct-media .image-slot { width: 100%; max-width: 100%; }
  /* Link hover: use the deep pink (matches the labels) instead of the lighter
     brand tint, so every contact link highlights the same, consistent colour. */
  .ct-details a[data-v2-link-pink]:hover { color: var(--anaya-pink-deep) !important; }
  /* Below 860px stack in one column, image above the contact details. */
  @media (max-width: 860px) {
    .ct-grid { grid-template-columns: 1fr; overflow: hidden; }
    .ct-media { aspect-ratio: 4 / 3; width: 100%; max-width: 100%; min-height: 0; }
  }

/* === Floating booking bar (template-parts/section-book-bar.php) ===
   Only on the widths where the header's "Book Now" is hidden, and only while the
   treatment index / price list are on screen (theme.js adds .is-visible). Kept out of
   the flow entirely so it cannot affect layout when hidden. */
.bookbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;                     /* under the header (100), over the page */
  /* Blush wash rising into the marble canvas, finished with a pink top rule and the
     logogram — the same flat, square-cornered band language as the marquee, but warm
     rather than a plain white strip. No dark panel and no pill: neither appears
     anywhere else on the site. */
  background:
    linear-gradient(180deg, var(--fem-blush) 0%, var(--brand-color-bg) 78%);
  border-top: 1.5px solid var(--brand-color-primary);
  box-shadow: 0 -12px 34px rgba(185, 128, 138, 0.13);
  padding: 13px clamp(20px, 5vw, 50px);
  /* Hidden state: pushed down and non-interactive, so it cannot be tabbed into. */
  transform: translateY(105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.42s var(--ease-luxury), opacity 0.32s var(--ease-luxury), visibility 0.32s;
}
  .bookbar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }

  /* Same content width as the sections above it, so the copy and button line up with
     the page rather than with the viewport. */
  .bookbar-inner {
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  /* Logogram, as the footer and the newsletter popup use it: a small brand anchor so
     the bar reads as part of the site rather than a generic sticky strip. */
  .bookbar-mark { flex: 0 0 auto; display: flex; align-items: center; }
  .bookbar-mark img { display: block; width: 34px; height: auto; opacity: 0.9; }

  .bookbar-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .bookbar-lead {
    font-family: var(--font-display); font-size: 19px; line-height: 1.16;
    color: var(--anaya-ink); text-wrap: pretty;
  }
  .bookbar-sub {
    font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; line-height: 1.3;
    color: var(--anaya-pink-deep);
  }
  .bookbar-cta { flex: 0 0 auto; }

  /* The WhatsApp FAB is fixed bottom-right with inline styles, so it would sit on top
     of the bar. Lift it while the bar is showing. */
  .bookbar.is-visible ~ [data-v2-fab],
  body:has(.bookbar.is-visible) [data-v2-fab] { bottom: 100px !important; }

  /* Desktop keeps the header button, so the bar is not needed there. */
  @media (min-width: 1181px) { .bookbar { display: none; } }

  @media (max-width: 640px) {
    .bookbar-inner { gap: 14px; }
    .bookbar-mark { display: none; }         /* the copy needs the width more */
    .bookbar-lead { font-size: 17px; }
  }
  @media (max-width: 460px) {
    .bookbar { padding: 11px clamp(20px, 5vw, 50px); }
    .bookbar-lead { font-size: 15px; }
    .bookbar-sub { display: none; }          /* one line of copy on the smallest screens */
    .bookbar-cta { height: 44px !important; padding-inline: 18px !important; font-size: 13px; }
  }

/* === Reservation form section (page-reservation.php) ===
   A pink wash rather than the off-white canvas, to set the booking step apart from the
   pages that lead to it, and so the white inputs read as inputs — on the off-white
   canvas they were almost the same value.

   --fem-blush, not the deeper --fem-rose: rose is fine behind short VIP and
   before/after copy, but this section is a dense form plus a column of contact detail,
   and at that density the stronger tint fights the text. Blush keeps every label,
   value and heading above 5:1 while still reading as pink. */
.rsv-section { background: var(--fem-blush); }

/* Shares .ct-grid with the contact page, so the form takes the wider column and the
   clinic details the narrower one. Whatever the booking plugin outputs lands in here;
   these are baseline styles so an unstyled plugin form still sits on-brand. */
.rsv-form { min-width: 0; }
  .rsv-form label { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--anaya-pink-deep); margin-bottom: 6px; }
  .rsv-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .rsv-form select,
  .rsv-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--anaya-ink);
    background: #fff;
    border: 0.5px solid rgba(61,57,53,0.22);
    border-radius: 0;
    transition: border-color 0.3s var(--ease-luxury);
  }
  .rsv-form input:focus, .rsv-form select:focus, .rsv-form textarea:focus {
    outline: none;
    border-color: var(--anaya-pink-deep);
  }
  .rsv-form textarea { min-height: 130px; resize: vertical; }

/* === src/pages/offers.astro === */
/* Poster ~35% of the row, copy ~65%. */
  .off-wrap { grid-template-columns: 0.6fr 1fr; }
  /* Every other offer mirrors: image on the right, copy on the left. */
  .off-wrap.off-reverse { grid-template-columns: 1fr 0.6fr; }
  .off-wrap.off-reverse .off-media { order: 2; }
  .off-wrap.off-reverse .off-copy { order: 1; }
  .off-media { overflow: hidden; margin-inline: auto; background: #4a0d16; line-height: 0; }
  .off-media img { display: block; width: 100%; height: auto; }
  /* Below 992px: stack, poster full-width above the copy (for every offer). */
  @media (max-width: 992px) {
    .off-wrap, .off-wrap.off-reverse { grid-template-columns: 1fr; }
    .off-wrap.off-reverse .off-media { order: 0; }
    .off-wrap.off-reverse .off-copy { order: 0; }
    .off-media { width: 100%; }
    .off-media img { height: auto; width: 100%; }
  }
  @media (max-width: 575.98px) {
    .off-cta { width: 100%; align-self: stretch; padding-inline: 20px !important; }
  }

/* === src/pages/pricelist.astro === */
.plx {
    display: flex; flex-direction: column; gap: clamp(30px, 4vw, 46px);
    /* One type scale for every price card, so families and sizes stay
       consistent. Two families only: --font-display for treatment / sub-treatment
       headings, --font-body for labels, rows, prices and notes. */
    --plx-fs-name: clamp(22px, 2vw, 27px);   /* treatment title (display) */
    --plx-fs-sub: clamp(16px, 1.5vw, 19px);  /* sub-treatment heading (display) */
    --plx-fs-label: 10.5px;                  /* uppercase group labels (body) */
    --plx-fs-blurb: 12px;                    /* descriptive paragraphs (body) */
    --plx-fs-item: 13px;                     /* row name + every price (body) */
    --plx-fs-note: 11.5px;                   /* row / heading notes (body) */
  }
  .plx-footnote { margin: 0; text-align: center; color: rgba(61,57,53,0.5); }

  /* Tabs */
  .plx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 2vw, 22px); }
  .plx-tab { appearance: none; background: none; border: none; padding: 8px 8px 12px; position: relative; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(61,57,53,0.5); cursor: pointer; transition: color 0.3s var(--ease-luxury); }
  .plx-tab::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1.5px; background: var(--anaya-pink-deep); transform: scaleX(0); transition: transform 0.35s var(--ease-luxury); }
  .plx-tab:hover { color: var(--anaya-ink); }
  .plx-tab.is-active { color: var(--anaya-ink); }
  .plx-tab.is-active::after { transform: scaleX(1); }
  /* <576px: keep the three tabs on one line (a scrollable strip) instead of an
     uneven 2 + 1 wrap. */
  @media (max-width: 575.98px) {
    .plx-tabs { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .plx-tabs::-webkit-scrollbar { display: none; }
    .plx-tab { flex: 0 0 auto; white-space: nowrap; font-size: 10.5px; letter-spacing: 0.1em; padding: 8px 5px 10px; }
  }

  /* Panels */
  .plx-panel { display: none; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
  .plx-panel.is-active { display: flex; }

  /* Treatment filter — a "find a treatment" dropdown scoped to the active tab,
     matching the blog category filter's design. */
  .plx-filterbar { position: relative; width: min(440px, 100%); margin: 0 auto; }
  .plx-filter-dd { display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; padding: 15px 15px 15px 20px; border: 0.5px solid rgba(61,57,53,0.2); background: #fff; cursor: pointer; transition: border-color 0.3s var(--ease-luxury); }
  .plx-filter-dd:hover, .plx-filter-dd[aria-expanded="true"] { border-color: var(--anaya-pink-deep); }
  .plx-filter-fic { flex: none; width: 18px; height: 18px; color: var(--anaya-pink-deep); }
  .plx-filter-val { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0.01em; color: var(--anaya-ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plx-filter-ic { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(185,128,138,0.1); color: var(--anaya-pink-deep); transition: transform 0.35s var(--ease-luxury), background 0.3s var(--ease-luxury), color 0.3s var(--ease-luxury); }
  .plx-filter-ic svg { width: 15px; height: 15px; }
  .plx-filter-dd[aria-expanded="true"] .plx-filter-ic { transform: rotate(180deg); background: var(--anaya-pink-deep); color: #fff; }

  .plx-filter-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: #fff; border: 0.5px solid rgba(61,57,53,0.16); box-shadow: 0 26px 56px rgba(33,30,27,0.16); max-height: 62vh; overflow-y: auto; padding: 6px; display: none; flex-direction: column; }
  .plx-filter-list.is-open { display: flex; }
  /* Type-to-search field, pinned above the scrolling options. */
  .plx-filter-search { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -6px 6px; padding: 12px 16px; background: #fff; border-bottom: 0.5px solid rgba(61,57,53,0.1); }
  .plx-filter-search-ic { flex: none; width: 15px; height: 15px; color: var(--anaya-pink-deep); }
  .plx-filter-input { flex: 1 1 auto; min-width: 0; appearance: none; border: none; background: none; padding: 0; font-family: var(--font-body); font-size: 14px; color: var(--anaya-ink); }
  .plx-filter-input::placeholder { color: rgba(61,57,53,0.45); }
  .plx-filter-input:focus { outline: none; }
  .plx-filter-empty { margin: 4px 0 6px; padding: 6px 16px; font-family: var(--font-body); font-size: 13px; color: rgba(61,57,53,0.5); }
  .plx-filter-opts { display: flex; flex-direction: column; }
  .plx-filter-opt[hidden] { display: none; }
  .plx-filter-opt { appearance: none; background: none; border: none; border-bottom: 0.5px solid rgba(61,57,53,0.07); border-left: 2px solid transparent; text-align: left; padding: 13px 16px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.01em; color: rgba(61,57,53,0.78); cursor: pointer; transition: color 0.25s var(--ease-luxury), padding 0.25s var(--ease-luxury), background 0.25s var(--ease-luxury); }
  .plx-filter-opt:last-child { border-bottom: none; }
  .plx-filter-opt.is-sub { padding-left: 32px; font-size: 13px; color: rgba(61,57,53,0.6); }
  .plx-filter-opt:hover { padding-left: 22px; color: var(--anaya-ink); }
  .plx-filter-opt.is-sub:hover { padding-left: 36px; }
  .plx-filter-opt.is-active { background: rgba(185,128,138,0.09); border-left-color: var(--anaya-pink-deep); color: var(--anaya-pink-deep); font-weight: 700; }

  /* Slider — arrows sit in the margins beside the track (matches homepage .t-row) */
  .plx-slider { display: flex; align-items: center; gap: 16px; }
  @media (max-width: 640px) { .plx-slider { gap: 8px; } }
  .plx-track { --plx-gap: clamp(16px, 1.8vw, 24px); flex: 1 1 auto; min-width: 0; display: flex; gap: var(--plx-gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0; cursor: grab; }
  .plx-track:active { cursor: grabbing; }
  .plx-track::-webkit-scrollbar { display: none; }

  /* Narrow cards: 2 per view (>=1280px), 1 per view below. Wide cards (treatments
     with sub-categories): always the full track width. Fixed-height card with an
     internally scrolling body. */
  .plx-card { flex: 0 0 auto; width: calc((100% - var(--plx-gap)) / 2); scroll-snap-align: start; display: flex; flex-direction: column; height: clamp(440px, 64vh, 580px); background: rgba(255,255,255,0.8); border: 0.5px solid rgba(61,57,53,0.16); box-sizing: border-box; }
  .plx-card.is-wide { width: 100%; }
  @media (max-width: 1279.98px) { .plx-card { width: 100%; } }

  /* Wide cards use the extra width: flow their price sections into two balanced
     columns so heavy treatments read across instead of scrolling down.
     The columns live on .plx-cols, an auto-height wrapper inside the scrolling
     body -- never on the body itself. Multi-column inside a *fixed-height* box
     fragments sideways into a third and fourth column that cannot be scrolled to
     (Exilite lost 50 of its 69 rows that way). With an auto height the browser
     balances into exactly two columns and the body scrolls vertically.
     A two-column grid was the other candidate, but grid aligns rows: one tall
     section (Chemical Peels, 8 rows) then leaves a dead gap beside it and pushes
     the next section below. Columns flow continuously instead, so no gaps. */
  .plx-card.is-wide .plx-card-body { display: block; }
  .plx-card.is-wide .plx-cols { display: block; column-count: 2; column-gap: clamp(28px, 3.4vw, 56px); }
  .plx-card.is-wide .plx-pg { margin-bottom: 14px; break-inside: avoid; -webkit-column-break-inside: avoid; }
  .plx-card.is-wide .plx-pg:last-child { margin-bottom: 0; }
  /* Author-controlled column break: force this section to start the next column. */
  .plx-card.is-wide .plx-pg--newcol { break-before: column; -webkit-column-break-before: always; }
  /* Below 992px the wide slide stacks into a single vertical column. */
  @media (max-width: 991.98px) {
    .plx-card.is-wide .plx-cols { column-count: auto; display: flex; flex-direction: column; gap: 14px; }
    .plx-card.is-wide .plx-pg { margin-bottom: 0; }
    .plx-card.is-wide .plx-pg--newcol { break-before: auto; -webkit-column-break-before: auto; }
  }

  /* Header: group (full width), name + range price on one row, blurb (full).
     Below 768px the range price drops beneath the name and detail. */
  .plx-card-head { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 8px; align-items: baseline; padding: clamp(20px, 2vw, 26px); border-bottom: 0.5px solid rgba(61,57,53,0.12); }
  .plx-card-group { grid-column: 1 / -1; font-family: var(--font-body); font-size: var(--plx-fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .plx-card-name { grid-column: 1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--plx-fs-name); line-height: 1.15; color: var(--anaya-ink); }
  .plx-card-range { grid-column: 2; justify-self: end; font-family: var(--font-body); font-size: var(--plx-fs-item); letter-spacing: 0.04em; color: var(--anaya-pink-deep); white-space: nowrap; }
  .plx-card-blurb { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: var(--plx-fs-blurb); line-height: 1.55; color: rgba(61,57,53,0.62); text-wrap: pretty; }
  @media (max-width: 767.98px) {
    .plx-card-head { grid-template-columns: 1fr; }
    .plx-card-range { grid-column: 1; justify-self: start; order: 1; margin-top: 2px; }
  }

  .plx-card-body { flex: 1 1 auto; overflow-y: auto; padding: 8px clamp(20px, 2vw, 26px) clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 14px; }
  /* Sections wrapper. A plain stack on narrow cards (the spacing the body's own
     gap used to provide); wide cards turn it into two columns, see above. */
  .plx-cols { display: flex; flex-direction: column; gap: 14px; }
  .plx-card-body::-webkit-scrollbar { width: 4px; }
  .plx-card-body::-webkit-scrollbar-thumb { background: rgba(61,57,53,0.2); }
  .plx-pg { display: flex; flex-direction: column; gap: 6px; }
  /* Sub-category heading inside a card (e.g. "Premium Weight Loss Injection"
     under Injectables) — more prominent than a plain group title. */
  /* Sub-treatment heading; when the sub carries its own price it sits on the
     right (so we don't repeat the name as a row beneath it). */
  .plx-pg-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 6px; }
  .plx-pg-sub { font-family: var(--font-display); font-weight: 600; font-size: var(--plx-fs-sub); line-height: 1.2; color: var(--anaya-pink-deep); }
  .plx-pg-subprice { font-weight: 700; }
  @media (max-width: 767.98px) {
    .plx-pg-subhead { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
  .plx-pg-blurb { margin: 0 0 2px; font-family: var(--font-body); font-size: var(--plx-fs-blurb); line-height: 1.55; color: rgba(61,57,53,0.6); text-wrap: pretty; }
  /* Group label (e.g. "Package of 4 injections", "Add ons") — shares the same
     uppercase-label style as the card group so labels read consistently. */
  .plx-pg-title { display: inline-block; font-family: var(--font-body); font-size: var(--plx-fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anaya-ink); margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(185,128,138,0.35); }
  .plx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  /* Zebra striping makes a long list (e.g. Fillers) far easier to scan across
     from a treatment name to its price. Soft brand pink instead of grey. */
  .plx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; padding: 9px 12px; }
  .plx-row:nth-of-type(odd) { background: color-mix(in srgb, var(--brand-color-primary) 24%, transparent); }
  .plx-item { font-family: var(--font-body); font-size: var(--plx-fs-item); line-height: 1.4; color: rgba(61,57,53,0.85); }

  /* Treatment name + its info icon sit on one line, vertically centred together. */
  .plx-name { display: inline-flex; align-items: center; gap: 7px; }
  /* Info icon — only appears on treatments that carry a description. An SVG mark
     keeps the "i" perfectly centred inside the circle. */
  .plx-info { flex: none; appearance: none; border: 1px solid rgba(185,128,138,0.6); background: transparent; color: var(--anaya-pink-deep); width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background 0.25s var(--ease-luxury), color 0.25s var(--ease-luxury), border-color 0.25s var(--ease-luxury); }
  .plx-info-ic { width: 11px; height: 11px; display: block; }
  .plx-info:hover, .plx-info:focus-visible { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); color: #fff; outline: none; }

  /* Detail panel — centred modal on desktop, bottom sheet on phones. */
  .plx-modal[hidden] { display: none; }
  .plx-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); }
  .plx-modal-backdrop { position: absolute; inset: 0; background: rgba(33,30,27,0.5); }
  .plx-modal-card { position: relative; z-index: 1; width: min(500px, 100%); max-height: 84vh; overflow-y: auto; background: var(--brand-color-bg, #fff); border: 0.5px solid rgba(61,57,53,0.16); box-shadow: 0 30px 70px rgba(33,30,27,0.28); padding: clamp(26px, 3vw, 40px); }
  .plx-modal-x { position: absolute; top: 14px; right: 16px; appearance: none; border: none; background: none; font-size: 26px; line-height: 1; color: rgba(61,57,53,0.5); cursor: pointer; transition: color 0.2s var(--ease-luxury); }
  .plx-modal-x:hover { color: var(--anaya-pink-deep); }
  .plx-modal-title { margin: 0 30px 6px 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: var(--anaya-ink); }
  .plx-modal-meta { margin: 0 0 16px; font-family: var(--font-body); font-size: var(--plx-fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .plx-modal-meta[hidden] { display: none; }
  .plx-modal-desc { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: rgba(61,57,53,0.82); text-wrap: pretty; }
  .plx-modal-steps { margin-top: 18px; padding-top: 16px; border-top: 0.5px solid rgba(61,57,53,0.14); }
  .plx-modal-steps[hidden] { display: none; }
  .plx-modal-steps-label { display: block; font-family: var(--font-body); font-size: var(--plx-fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anaya-ink); margin-bottom: 6px; }
  .plx-modal-steps-text { margin: 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: rgba(61,57,53,0.6); }
  @media (max-width: 560px) {
    .plx-modal { align-items: flex-end; padding: 0; }
    .plx-modal-card { width: 100%; max-height: 88vh; border: none; }
  }
  .plx-note { display: block; font-family: var(--font-body); font-size: var(--plx-fs-note); line-height: 1.45; color: rgba(61,57,53,0.5); margin-top: 2px; }
  .plx-price { font-family: var(--font-body); font-size: var(--plx-fs-item); color: var(--anaya-ink); white-space: nowrap; text-align: right; }

  /* <768px: stack each row — the name (and its detail), then the price below it.
     The name is emphasised but not bold, with more separation for easy scanning. */
  @media (max-width: 767.98px) {
    .plx-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px; }
    .plx-item { font-size: 14px; font-weight: 400; color: var(--anaya-ink); }
    .plx-price { text-align: left; }
  }

  /* Arrows — visual from the global .slider-arrow; keep both visible for
     consistency with the other sliders, just dim the one that's at the end. */
  .plx-arrow:disabled { opacity: 0.3; pointer-events: none; }

  /* <=576px: let the card use the full width and float the arrows over its
     left/right edges (smaller, semi-transparent) instead of squeezing beside it. */
  @media (max-width: 575.98px) {
    .plx-slider { position: relative; gap: 0; }
    .plx-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 40px; font-size: 20px; background: rgba(251,250,249,0.55); border-color: rgba(61,57,53,0.35); box-shadow: 0 1px 4px -1px rgba(33,30,27,0.16); }
    .plx-arrow:hover, .plx-arrow:active { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); color: #fbfaf9; }
    .plx-prev { left: 5px; }
    .plx-next { right: 5px; }
  }

/* === src/pages/treatments/[category].astro === */
.tx-searchbar { display: flex; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
  .tx-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
  .tx-search-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(61,57,53,0.45); pointer-events: none; }
  .tx-searchbar input { width: 100%; height: 52px; padding: 0 20px 0 48px; border: 0.5px solid rgba(61,57,53,0.3); background: #fff; font-family: var(--font-body); font-size: 14px; color: var(--anaya-ink); box-sizing: border-box; }
  .tx-searchbar input:focus { outline: none; border-color: var(--anaya-pink-deep); }
  .tx-search-field:focus-within .tx-search-ic { color: var(--anaya-pink-deep); }
  .tx-filter-btn { display: none; flex: none; height: 52px; padding: 0 26px; border: 0.5px solid var(--anaya-pink-deep); background: #fff; color: var(--anaya-pink-deep); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

  .tx-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(30px, 4vw, 56px); align-items: start; }

  /* Filter rail */
  .tx-side { align-self: start; }
  .tx-side-inner { display: flex; flex-direction: column; gap: 28px; }
  .tx-side-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 0.5px solid rgba(61,57,53,0.16); padding-bottom: 14px; }
  .tx-clear { appearance: none; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--anaya-pink-deep); text-decoration: underline; text-underline-offset: 3px; }
  .tx-side-actions { display: flex; align-items: center; gap: 14px; }
  /* Both close affordances belong to the collapsed panel only — the desktop rail is
     always open, so there is nothing to close. Shown in the <=1022px block below. */
  .tx-side-close, .tx-side-done { display: none; }
  .tx-fgroup { display: flex; flex-direction: column; gap: 14px; }
  .tx-fgroup-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--anaya-ink); }
  .tx-checks { display: flex; flex-direction: column; gap: 11px; }
  .tx-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; color: rgba(61,57,53,0.82); }
  .tx-check input { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; border: 0.5px solid rgba(61,57,53,0.4); background: #fff; cursor: pointer; position: relative; border-radius: 2px; }
  .tx-check input:checked { background: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }
  .tx-check input:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
  .tx-check:hover { color: var(--anaya-ink); }

  /* Price range */
  .tx-range-inputs { display: flex; align-items: center; gap: 10px; }
  .tx-range-inputs input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0.5px solid rgba(61,57,53,0.3); background: #fff; font-family: var(--font-body); font-size: 13px; color: var(--anaya-ink); box-sizing: border-box; }
  .tx-range-inputs input:focus { outline: none; border-color: var(--anaya-pink-deep); }
  .tx-range-inputs span { flex: none; color: rgba(61,57,53,0.5); }
  .tx-range { position: relative; height: 30px; margin-top: 2px; }
  .tx-range-track { position: absolute; top: 13px; left: 0; right: 0; height: 3px; background: rgba(61,57,53,0.2); border-radius: 3px; }
  .tx-range-fill { position: absolute; top: 0; height: 100%; background: var(--anaya-pink-deep); border-radius: 3px; }
  .tx-range input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
  .tx-range input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--anaya-pink-deep); cursor: pointer; box-shadow: 0 1px 4px rgba(33,30,27,0.2); }
  .tx-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--anaya-pink-deep); cursor: pointer; }

  /* Results */
  .tx-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: clamp(24px, 3vw, 34px); min-height: 20px; }
  .tx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Chips are created in JS, so their rules must be :global (scoped selectors
     would never match a document.createElement node). */
  .tx-chip { appearance: none; display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 15px; border: 0.5px solid var(--anaya-pink-deep); background: rgba(185,128,138,0.09); border-radius: 100px; cursor: pointer; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; color: var(--anaya-pink-deep); transition: background 0.25s var(--ease-luxury), color 0.25s var(--ease-luxury); }
  .tx-chip span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--anaya-pink-deep); color: #fff; font-size: 11px; line-height: 1; transition: background 0.25s var(--ease-luxury), color 0.25s var(--ease-luxury); }
  .tx-chip:hover { background: var(--anaya-pink-deep); color: #fff; }
  .tx-chip:hover span { background: #fff; color: var(--anaya-pink-deep); }

  /* In the stylesheet, not inline: the filter JS clears inline `display` when a
     group is shown, which would otherwise wipe an inline `display:flex`. */
  [data-tx-group] { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); margin-bottom: clamp(40px, 5vw, 64px); }
  .tx-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
  .tx-cat-item { display: flex; flex-direction: column; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 0.5px solid rgba(61,57,53,0.16); overflow: hidden; text-decoration: none; transition: border-color 0.3s var(--ease-luxury), background 0.3s var(--ease-luxury); }
  .tx-cat-item:hover { background: #fff; }
  .tx-cat-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #efeae6; }
  .tx-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-luxury); }
  .tx-cat-item:hover .tx-cat-media img { transform: scale(1.05); }
  .tx-cat-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: clamp(22px, 2vw, 30px); }
  .tx-cat-cue { transition: color 0.3s var(--ease-luxury); }
  .tx-cat-item:hover .tx-cat-cue { color: var(--anaya-pink); }

  /* Results grid gets narrower with the rail, so drop to 2 columns sooner */
  @media (max-width: 1180px) { .tx-cat-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Tablet / phone: rail collapses into a toggle drawer */
  @media (max-width: 1023px) {
    .tx-layout { grid-template-columns: 1fr; }
    .tx-filter-btn { display: inline-flex; align-items: center; justify-content: center; }
    /* Animate open/close via grid-template-rows 0fr <-> 1fr (no height measuring,
       never clips). The visual box lives on the inner wrapper so nothing shows
       when collapsed. */
    .tx-side { position: static; display: grid; grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; transition: grid-template-rows 0.4s var(--ease-luxury), opacity 0.3s var(--ease-luxury), margin-bottom 0.4s var(--ease-luxury); }
    .tx-side.is-open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 34px; }
    /* Clip layer has no padding so it collapses fully to 0; the padded/bordered
       box sits inside it and is hidden when collapsed. */
    .tx-side-clip { overflow: hidden; min-height: 0; }
    .tx-side-inner { gap: 24px; padding: 24px; border: 0.5px solid rgba(61,57,53,0.16); background: rgba(255,255,255,0.6); box-sizing: border-box; }

    /* Close X, top-right of the panel head — where a dismiss control is looked for
       first. 40px box so it clears the 44px touch guidance with the head padding. */
    .tx-side-close {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; margin: -10px -10px -10px 0;
      appearance: none; background: none; border: none; padding: 0; cursor: pointer;
      color: rgba(61,57,53,0.55);
      transition: color 0.25s var(--ease-luxury);
    }
    .tx-side-close:hover { color: var(--anaya-pink-deep); }

    /* The panel is taller than the viewport once every group is open, so the X at the
       top scrolls away. This repeats the exit at the end of the list, and doubles as
       the "I am done choosing" action. */
    .tx-side-done {
      display: block; width: 100%;
      appearance: none; cursor: pointer;
      padding: 13px 18px;
      background: var(--brand-color-primary);
      border: 0.5px solid var(--brand-color-primary); border-radius: 0;
      font-family: var(--font-body); font-size: 12px; font-weight: 700;
      letter-spacing: 0.04em; color: var(--brand-color-text-dark);
      transition: opacity 0.3s var(--ease-luxury);
    }
    .tx-side-done:hover { opacity: 0.82; }

    .tx-cat-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 780px) { .tx-cat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .tx-cat-grid { grid-template-columns: 1fr; } }

  /* Mobile/tablet: at 992px and below stack vertically — the intro image sits
     right under the "Our Treatments" eyebrow. Tighter spacing between the stacked
     items and full-width copy. */
  @media (max-width: 992px) {
    [data-v3-split] { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: 1fr !important; gap: 26px !important; }
    .intro-text { display: contents !important; }
    .intro-text > * { order: 4; }
    .intro-text > *:first-child { order: 1; }
    .intro-text > h1 { order: 2; }
    .intro-img { order: 3; height: min(52vh, 460px) !important; }
    .intro-text p.type-body-md { max-width: none !important; }
  }
  /* Category hero CTA goes full-width below 576px (matches the other hero CTAs) */
  @media (max-width: 575px) {
    .intro-cta { width: 100% !important; align-self: stretch !important; padding-inline: 20px !important; }
  }

/* === src/pages/treatments/[category]/[treatment].astro === */
[data-tx-link]:hover { color: var(--anaya-pink-deep); border-color: var(--anaya-pink-deep); }

  /* Hero image: taller portrait ratio (see note) */
  .tx-hero-media { aspect-ratio: 4 / 5; }
  @media (max-width: 992px) { .tx-hero-media { aspect-ratio: 3 / 4; width: 100%; } }
  @media (max-width: 560px) { .tx-hero-media { aspect-ratio: 4 / 5; } }

  /* Main-image prev/next nav: transparent, white chevron with a soft shadow so
     it stays legible over any photo. */
  .tx-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; cursor: pointer; background: rgba(26,25,22,0.25); color: #fff; font-family: var(--font-display); font-size: 30px; line-height: 1; transition: background 0.3s var(--ease-luxury); }
  /* The Cormorant guillemet sits low in its em box; nudge it up to optically centre. */
  .tx-gallery-nav span { display: block; transform: translateY(-3px); }
  .tx-gallery-nav:hover { background: var(--anaya-pink-deep); }

  /* Hero gallery thumbnails: flex to fill the width of the main image when there
     are a few, but keep a min-width so 6+ scroll horizontally instead of shrinking. */
  .tx-thumbs { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .tx-thumbs::-webkit-scrollbar { display: none; }
  .tx-thumbs button { flex: 1 1 0; min-width: 84px; height: 82px; scroll-snap-align: start; padding: 0; border: 0.5px solid rgba(61,57,53,0.2); background: none; cursor: pointer; overflow: hidden; opacity: 0.55; transition: opacity 0.3s var(--ease-luxury), border-color 0.3s var(--ease-luxury); }
  .tx-thumbs button.is-active { opacity: 1; border-color: var(--anaya-pink-deep); }
  .tx-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* CTA buttons: inline on wider screens... */
  .tx-btn-row { flex-wrap: nowrap; }
  /* ...but stack full-width below 576px so the labels never truncate. */
  @media (max-width: 575px) {
    .tx-btn-row { flex-direction: column; align-items: stretch; width: 100%; }
    .tx-btn-row .luxury-btn { width: 100%; padding-inline: 20px !important; }
  }

  /* Related treatments: slider (~3 per view) with bullets */
  .tx-rel-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .tx-rel-grid::-webkit-scrollbar { display: none; }
  /* Related cards carry .tx-cat-item as well, so the surface, border, media ratio,
     padding, type scale and hover all come from the category listing's card. Only the
     carousel geometry lives here — the two lists drifted apart once before because
     this block re-declared the whole card. */
  .tx-rel-item { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
  .tx-rel-dots { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
  .tx-rel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(61,57,53,0.25); cursor: pointer; transition: background 0.3s var(--ease-luxury), transform 0.3s var(--ease-luxury); }
  @media (max-width: 900px) { .tx-rel-item { flex-basis: calc((100% - 18px) / 2); } }
  @media (max-width: 560px) { .tx-rel-item { flex-basis: 100%; } }
  @media (max-width: 1023px) {
    [data-tx-detail] { grid-template-columns: 1fr !important; }
  }
  /* Hero: at 992px and below stack vertically — the image gallery sits right
     under the category eyebrow, with full-width copy. */
  @media (max-width: 992px) {
    [data-tx-split] { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: 1fr !important; }
    .txhero-text { display: contents !important; }
    .txhero-text > * { order: 4; }
    .txhero-text > *:first-child { order: 1; }
    .txhero-text > h1 { order: 2; }
    .txhero-media-col { order: 3; }
    .txhero-text p.type-body-lg { max-width: none !important; }
  }
  @media (max-width: 760px) {
    [data-tx-trust] { grid-template-columns: 1fr !important; gap: 26px !important; }
    .tx-aftercare { grid-template-columns: 1fr !important; gap: 30px !important; }
  }

/* === src/pages/vip.astro === */
.vip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
  .vip-card { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 0.5px solid rgba(61,57,53,0.16); padding: clamp(26px, 2.4vw, 38px); transition: border-color 0.3s var(--ease-luxury), background 0.3s var(--ease-luxury); }
  .vip-card:hover { background: #fff; border-color: var(--anaya-pink-deep); }
  .vip-name { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--anaya-pink-deep); }
  .vip-pay { font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--anaya-ink); }
  .vip-credit { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--anaya-ink); margin-top: 6px; }
  .vip-credit strong { color: var(--anaya-pink-deep); font-weight: 700; }
  .vip-bonus { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: rgba(61,57,53,0.72); text-wrap: pretty; }
  .vip-val { color: rgba(61,57,53,0.5); }
  /* The tier-card link on the VIP page. Named .vip-cta in the Astro source,
     where scoping kept it away from the homepage section's button of the same
     name; the markup calls it .vip-tier-cta, so the selector follows it. */
  .vip-tier-cta { margin-top: auto; padding-top: 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--anaya-pink-deep); text-decoration: none; transition: color 0.3s var(--ease-luxury); }
  .vip-tier-cta:hover { color: var(--anaya-pink); }

  /* Featured top tier (Graphene) — full width, horizontal on desktop */
  .vip-card--feature { display: grid; grid-template-columns: minmax(240px, 0.8fr) 1.2fr; gap: clamp(20px, 3vw, 50px); align-items: center; background: #fff; border-color: var(--anaya-pink-deep); }
  .vip-card--feature .vip-feature-head { display: flex; flex-direction: column; gap: 8px; border-right: 0.5px solid rgba(61,57,53,0.16); padding-right: clamp(20px, 3vw, 50px); }
  .vip-card--feature .vip-pay { font-size: clamp(36px, 4vw, 56px); }
  .vip-card--feature .vip-feature-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

  @media (max-width: 900px) { .vip-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) {
    .vip-grid { grid-template-columns: 1fr; }
    .vip-card--feature { grid-template-columns: 1fr; }
    .vip-card--feature .vip-feature-head { border-right: none; padding-right: 0; border-bottom: 0.5px solid rgba(61,57,53,0.16); padding-bottom: 18px; }
  }