/* Department pages — wavy pastel title panels (matches homepage section titles) */
:root {
  --dept-title-panel-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M18,48 Q18,18 48,18 Q 64.20,14.75 80.40,18 Q 96.60,21.25 112.80,18 Q 129.00,14.75 145.20,18 Q 161.40,21.25 177.60,18 Q 193.80,14.75 210.00,18 Q 226.20,21.25 242.40,18 Q 258.60,14.75 274.80,18 Q 291.00,21.25 307.20,18 Q 323.40,14.75 339.60,18 Q 355.80,21.25 372.00,18 Q402,18 402,48 Q 402.95,61.00 402,74.00 Q 401.05,87.00 402,100.00 Q 402.95,113.00 402,126.00 Q 401.05,139.00 402,152.00 Q402,182 372,182 Q 355.80,185.25 339.60,182 Q 323.40,178.75 307.20,182 Q 291.00,185.25 274.80,182 Q 258.60,178.75 242.40,182 Q 226.20,185.25 210.00,182 Q 193.80,178.75 177.60,182 Q 161.40,185.25 145.20,182 Q 129.00,178.75 112.80,182 Q 96.60,185.25 80.40,182 Q 64.20,178.75 48.00,182 Q18,182 18,152 Q 17.05,139.00 18,126.00 Q 18.95,113.00 18,100.00 Q 17.05,87.00 18,74.00 Q 18.95,61.00 18,48.00 Z'/%3E%3C/svg%3E");
  --dept-title-panel-py: clamp(0.85rem, 2vw, 1.2rem);
  --dept-title-panel-px: clamp(1.2rem, 3.2vw, 2rem);
  --dept-title-panel-py-mobile: clamp(0.7rem, 2.8vw, 0.95rem);
  --dept-title-panel-gap-y: clamp(1.15rem, 2.8vw, 1.75rem);
}

body.page-massage .massage-pricing-intro__title,
body.page-pedicure .pedicure-pricing-intro__title {
  --dept-title-panel-bg: linear-gradient(152deg, #cfe3d8 0%, #c3d9cd 48%, #b7cfc2 100%);
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: min(100%, 46rem);
  margin: var(--dept-title-panel-gap-y) auto;
  padding: var(--dept-title-panel-py) var(--dept-title-panel-px);
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--dept-title-panel-bg) !important;
  -webkit-mask-image: var(--dept-title-panel-wave);
  mask-image: var(--dept-title-panel-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  text-align: center;
}

body.page-massage .massage-pricing-intro__title,
body.page-pedicure .pedicure-pricing-intro__title {
  font-family: 'EB Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.85rem, 3.8vw, 2.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.03em !important;
}

/* Category pricing list titles — full-width wavy panel, centered text */
body.page-massage .massage-category-hero__title,
body.page-massage .massage-uncategorized-title,
body.page-massage .pricing-category h3.massage-category-hero__title,
body.page-massage .category-section .pricing-category h3.massage-category-hero__title,
body.page-pedicure .massage-category-hero__title,
body.page-pedicure .pricing-category h3.massage-category-hero__title,
body.page-pedicure .category-section .pricing-category h3.massage-category-hero__title {
  --dept-title-panel-bg: linear-gradient(152deg, #cfe3d8 0%, #c3d9cd 48%, #b7cfc2 100%);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--dept-title-panel-gap-y) 0 !important;
  padding: var(--dept-title-panel-py) var(--dept-title-panel-px);
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--dept-title-panel-bg) !important;
  -webkit-mask-image: var(--dept-title-panel-wave);
  mask-image: var(--dept-title-panel-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  font-family: 'EB Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
}

body.page-massage .massage-pricing-intro__inner::before,
body.page-pedicure .pedicure-pricing-intro__inner::before {
  display: none;
}

body.page-massage .massage-pricing-intro__title::before,
body.page-pedicure .pedicure-pricing-intro__title::before,
body.page-massage .massage-category-hero__title::before,
body.page-massage .massage-uncategorized-title::before,
body.page-massage .pricing-category h3.massage-category-hero__title::before,
body.page-massage .category-section .pricing-category h3.massage-category-hero__title::before,
body.page-pedicure .massage-category-hero__title::before,
body.page-pedicure .pricing-category h3.massage-category-hero__title::before,
body.page-pedicure .category-section .pricing-category h3.massage-category-hero__title::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: block !important;
  background:
    radial-gradient(ellipse 95% 38% at 50% 0%, rgba(255, 255, 255, 0.45), transparent 72%),
    radial-gradient(ellipse 65% 30% at 0% 100%, rgba(255, 255, 255, 0.2), transparent 68%),
    radial-gradient(ellipse 65% 30% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 68%);
}

/* Massage — green tones */
body.page-massage .massage-pricing-intro__title {
  --dept-title-panel-bg: linear-gradient(152deg, #bfd4c8 0%, #b3c9bd 48%, #a7beb2 100%);
  color: #163329 !important;
}

body.page-massage .massage-category-hero__title,
body.page-massage .massage-uncategorized-title {
  --dept-title-panel-bg: linear-gradient(152deg, #cfe3d8 0%, #c3d9cd 48%, #b7cfc2 100%);
  color: #0f3329 !important;
}

body.page-massage .category-section:nth-child(even) .massage-category-hero__title,
body.page-massage .category-section:nth-child(even) .massage-uncategorized-title {
  --dept-title-panel-bg: linear-gradient(152deg, #d8e8e0 0%, #ccdfd5 48%, #c0d6ca 100%);
}

body.page-massage .massage-category-hero__title::before,
body.page-massage .massage-uncategorized-title::before,
body.page-massage .massage-pricing-intro__title::before {
  background:
    radial-gradient(ellipse 95% 38% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 72%),
    radial-gradient(ellipse 65% 30% at 0% 100%, rgba(255, 255, 255, 0.1), transparent 68%),
    radial-gradient(ellipse 65% 30% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%, rgba(26, 64, 53, 0.05) 100%);
}

/* Pedicure — warm tones */
body.page-pedicure .pedicure-pricing-intro__title {
  --dept-title-panel-bg: linear-gradient(152deg, #e0bea8 0%, #d4b298 48%, #c8a688 100%);
  color: #7c2410 !important;
}

body.page-pedicure .massage-category-hero__title,
body.page-pedicure .pricing-category h3.massage-category-hero__title,
body.page-pedicure .category-section .pricing-category h3.massage-category-hero__title {
  --dept-title-panel-bg: linear-gradient(152deg, #edd4c0 0%, #e2c6ad 48%, #d7b99a 100%);
  color: #5c2a0a !important;
}

body.page-pedicure .category-section:nth-child(even) .massage-category-hero__title,
body.page-pedicure .category-section:nth-child(even) .pricing-category h3.massage-category-hero__title {
  --dept-title-panel-bg: linear-gradient(152deg, #f3e6d8 0%, #e8d8c8 48%, #ddcab8 100%);
}

body.page-pedicure .pedicure-home-visit-panel .massage-category-hero__title {
  border-bottom: none !important;
  padding-bottom: clamp(0.85rem, 2vw, 1.2rem) !important;
}

/* Pedicure — Naš pristop title */
body.page-pedicure .pedicure-philosophy__badge {
  --dept-title-panel-bg: linear-gradient(152deg, #f5dcc8 0%, #f0d0b8 48%, #e8c4a8 100%);
  --wavy-panel-safe-inline: clamp(2.75rem, 7vw, 4.25rem);
  --wavy-panel-bg-outset-inline: clamp(1.5rem, 4vw, 2.25rem);
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: min(100%, 46rem);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.1rem, 2.4vw, 1.45rem) var(--wavy-panel-safe-inline);
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
  text-align: center;
}

body.page-pedicure .pedicure-philosophy__badge::after {
  content: '';
  position: absolute;
  inset: -0.35rem calc(-1 * var(--wavy-panel-bg-outset-inline));
  pointer-events: none;
  z-index: -2;
  background: var(--dept-title-panel-bg);
  -webkit-mask-image: var(--dept-title-panel-wave);
  mask-image: var(--dept-title-panel-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body.page-pedicure .pedicure-philosophy__badge::before {
  content: '';
  position: absolute;
  inset: -0.35rem calc(-1 * var(--wavy-panel-bg-outset-inline));
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 95% 38% at 50% 0%, rgba(255, 255, 255, 0.45), transparent 72%),
    radial-gradient(ellipse 65% 30% at 0% 100%, rgba(255, 255, 255, 0.2), transparent 68%),
    radial-gradient(ellipse 65% 30% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 68%);
  -webkit-mask-image: var(--dept-title-panel-wave);
  mask-image: var(--dept-title-panel-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body.page-pedicure .pedicure-philosophy__badge {
  font-family: 'EB Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: #7c2410 !important;
  margin: var(--dept-title-panel-gap-y) auto !important;
}

/* Mobile price pills — wavy panel backgrounds */
@media (max-width: 1023px) {
  body.page-massage .massage-price-row .massage-duration,
  body.page-pedicure .pedicure-price-row .massage-duration,
  body.page-pedicure .pedicure-price-row .pedicure-price-cell .massage-duration {
    --mobile-price-pill-bg: #d8ebe2;
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.page-massage .massage-price-row .massage-duration::after,
  body.page-pedicure .pedicure-price-row .massage-duration::after,
  body.page-pedicure .pedicure-price-row .pedicure-price-cell .massage-duration::after {
    content: '';
    position: absolute;
    inset: -2px -3px;
    pointer-events: none;
    z-index: -1;
    background: var(--mobile-price-pill-bg);
    -webkit-mask-image: var(--dept-title-panel-wave);
    mask-image: var(--dept-title-panel-wave);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  body.page-massage .massage-price-row .massage-duration .massage-duration__label,
  body.page-massage .massage-price-row .massage-duration__value,
  body.page-pedicure .pedicure-price-row .massage-duration .massage-duration__label,
  body.page-pedicure .pedicure-price-row .massage-duration__value {
    position: relative;
    z-index: 1;
  }
}

/* Category hero description — match wavy title panel horizontal insets */
body.page-massage .massage-category-panel .massage-category-hero__lead,
body.page-pedicure .massage-category-panel .massage-category-hero__lead,
body.page-pedicure .pedicure-home-visit-panel .massage-category-hero__lead {
  padding-inline: var(--dept-title-panel-px);
  box-sizing: border-box;
}

body.page-massage .massage-category-panel .massage-category-hero__lead ul,
body.page-massage .massage-category-panel .massage-category-hero__lead ol,
body.page-pedicure .massage-category-panel .massage-category-hero__lead ul,
body.page-pedicure .massage-category-panel .massage-category-hero__lead ol,
body.page-pedicure .pedicure-home-visit-panel .massage-category-hero__lead ul,
body.page-pedicure .pedicure-home-visit-panel .massage-category-hero__lead ol {
  margin-left: 0;
  padding: 0.35rem 0 0.35rem 1.1rem;
  border-left: none;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 768px) {
  body.page-massage .massage-category-hero__title,
  body.page-massage .massage-uncategorized-title,
  body.page-massage .pricing-category h3.massage-category-hero__title,
  body.page-massage .category-section .pricing-category h3.massage-category-hero__title,
  body.page-pedicure .massage-category-hero__title,
  body.page-pedicure .pricing-category h3.massage-category-hero__title,
  body.page-pedicure .category-section .pricing-category h3.massage-category-hero__title {
    padding: var(--dept-title-panel-py-mobile) clamp(1rem, 3vw, 1.35rem) !important;
  }

  body.page-massage .massage-category-panel .massage-category-hero__lead,
  body.page-pedicure .massage-category-panel .massage-category-hero__lead,
  body.page-pedicure .pedicure-home-visit-panel .massage-category-hero__lead {
    padding-inline: clamp(1rem, 3vw, 1.35rem);
  }
}