@import url(https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);
/*
 * Shadow DOM CSS for Webflow Code Components
 *
 * Webflow renders code components inside Shadow DOM, which blocks
 * styles from the parent document. This file must be imported in
 * every .webflow.tsx file so the Webflow CLI bundles it inside
 * the Shadow DOM boundary.
 *
 * What's included:
 *   - Font imports (Google Fonts + custom @font-face)
 *   - Keyframe animations
 *   - Hover / active / focus states (can't be done with inline styles)
 *   - Media queries for mobile responsiveness
 *   - Shadow DOM fixes for shadows, transforms, transitions, borders
 */

/* ──────────────────────────────────────────────
   1. FONTS
   Shadow DOM can't access fonts from the parent document.
   ────────────────────────────────────────────── */

@font-face {
  font-family: "Sofia Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/65afb6f327861b43479ce5a2/68d2afb3953565aeb93c0d0c_Sofia%20Pro%20Light.woff2")
    format("woff2");
}

@font-face {
  font-family: "Optima Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/65afb6f327861b43479ce5a2/68d2af310413a8005581ccc2_OptimaLTPro-Roman.woff2")
    format("woff2");
}

/* ──────────────────────────────────────────────
   2. KEYFRAME ANIMATIONS
   ────────────────────────────────────────────── */

@keyframes olio-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes olio-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
}

@keyframes olio-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes olio-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes olio-option-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes olio-popup-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes olio-popup-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes olio-popup-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes olio-popup-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

/* ──────────────────────────────────────────────
   3. HOVER / ACTIVE / FOCUS STATES
   These can't be done with inline styles.
   ────────────────────────────────────────────── */

/* Option buttons – hover & press */
.olio-option-btn {
  transition: all 0.2s ease;
}

.olio-option-btn:hover:not(.olio-option-selected) {
  border-color: #c9a3a8 !important;
  background: #fdf7f8 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(142, 80, 89, 0.08);
}

.olio-option-btn:active:not(.olio-option-selected) {
  transform: scale(0.98);
  box-shadow: none;
}

.olio-option-selected:hover {
  background: #7a4049 !important;
}

.olio-option-selected:active {
  transform: scale(0.98);
}

/* Info icon hover */
.olio-info-circle {
  transition: fill 0.2s ease;
}

.olio-info-icon:hover .olio-info-circle {
  fill: #8e5059;
}

.olio-info-icon:hover {
  color: #fff !important;
}

.olio-info-icon-selected:hover .olio-info-circle {
  fill: rgba(255, 255, 255, 0.25);
}

.olio-info-icon-selected:hover {
  color: #fff !important;
}

/* Primary button hover */
.olio-primary-btn {
  transition: all 0.2s ease;
}

.olio-primary-btn:hover:not(:disabled) {
  background: #7a4049 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(142, 80, 89, 0.25);
}

.olio-primary-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: none;
}

/* Staggered option entrance animation */
.olio-option-stagger {
  opacity: 0;
  animation: olio-option-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Input focus states */
.olio-input:focus {
  border-color: #c9a3a8 !important;
  box-shadow: 0 0 0 2px rgba(142, 80, 89, 0.1);
  outline: none;
}

/* Treatment recommendation cards */
.olio-treatment-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.olio-treatment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(61, 13, 17, 0.15);
}

.olio-treatment-card:active {
  transform: scale(0.98);
}

/* Shared card hover behavior for section cards */
.olio-card-hover {
  transition:
    transform 300ms ease-in-out,
    box-shadow 300ms ease-in-out;
  box-shadow: 0 4px 10px rgba(142, 80, 89, 0.15);
}

@media (hover: hover) {
  .olio-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(142, 80, 89, 0.2);
  }
}

/* Staggered card entrance */
.olio-card-stagger {
  opacity: 0;
  animation: olio-option-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ──────────────────────────────────────────────
   4. MOBILE RESPONSIVENESS
   ────────────────────────────────────────────── */

/* Tablet: 3-column background grid */
@media (max-width: 1024px) {
  .olio-bg-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .olio-modal {
    padding: 24px 20px !important;
    min-height: auto !important;
    border-radius: 0 !important;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  .olio-options-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .olio-title {
    font-size: 24px !important;
  }

  .olio-nav-text {
    display: none !important;
  }

  .olio-form {
    max-width: 100% !important;
  }

  .olio-recommendations-grid {
    grid-template-columns: 1fr !important;
    max-width: 300px !important;
  }

  .olio-recommendations-title {
    font-size: 28px !important;
  }

  /* Mobile: 2-column background grid */
  .olio-bg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}
/* Step 1 illustration button strokes inside Webflow shadow DOM */
.olio-step1-stroke-btn {
  border: 1px solid #272727 !important;
}

.olio-step1-stroke-pill {
  border: 1px solid #8e5059 !important;
}
.olio-step3-scale-hover {
  transform-origin: 50% 50%;
  transition: transform 220ms ease !important;
}

.olio-step3-scale-hover:hover {
  transform: scale(1.05) !important;
}

/* Offer card price tag stroke inside Webflow shadow DOM */
.olio-offer-price-tag {
  border: 1px solid rgba(39, 39, 39, 0.5) !important;
}

/* Member FAQ readability + mobile performance in Webflow shadow DOM */
.olio-faq-question {
  line-height: 1.2 !important;
}

@media (max-width: 640px) {
  .olio-faq-card {
    box-shadow: none !important;
  }
}

/**
 * Shadow DOM CSS Fixes
 *
 * ONLY styles that don't work properly in Shadow DOM.
 * Colors, backgrounds, and text colors work fine - not included here.
 */

/* ============================================
   FONTS - Must be imported in Shadow DOM
   ============================================ */

:host {
  --font-open-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-playfair-display: "Playfair Display", ui-serif, Georgia, serif;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.font-sans {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* Font weights - explicit declarations for Shadow DOM */
.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extrabold {
  font-weight: 800 !important;
}

.font-serif,
[style*="--font-playfair-display"] {
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
}

/* ============================================
   ACCESSIBILITY - Screen reader only
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   PSEUDO-ELEMENTS - After/Before states
   ============================================ */
/* Active filter button underline */
.after\:absolute::after {
  content: "";
  position: absolute;
}

.after\:bottom-0::after {
  bottom: 0;
}

.after\:left-0::after {
  left: 0;
}

.after\:right-0::after {
  right: 0;
}

.after\:h-0\.5::after {
  height: 0.125rem;
}

.after\:bg-aco-dark-gray::after {
  background-color: #36363a;
}

.after\:bg-aco-dark-gray\/50::after {
  background-color: rgba(54, 54, 58, 0.5);
}

/* Hover states for filter buttons */
.hover\:after\:absolute:hover::after {
  content: "";
  position: absolute;
}

.hover\:after\:bottom-0:hover::after {
  bottom: 0;
}

.hover\:after\:left-0:hover::after {
  left: 0;
}

.hover\:after\:right-0:hover::after {
  right: 0;
}

.hover\:after\:h-0\.5:hover::after {
  height: 0.125rem;
}

.hover\:after\:bg-aco-dark-gray\/50:hover::after {
  background-color: rgba(54, 54, 58, 0.5);
}

/* ============================================
   BORDERS - Divider lines, card borders
   ============================================ */
.border {
  border-width: 1px;
  border-style: solid;
}

.border-2 {
  border-width: 2px;
  border-style: solid;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
}

/* Border Colors - ACO brand colors */
.border-aco-dark-gray\/10 {
  border-color: rgba(54, 54, 58, 0.1);
}

.border-aco-dark-gray\/15 {
  border-color: rgba(54, 54, 58, 0.15);
}

.border-aco-dark-gray\/20 {
  border-color: rgba(54, 54, 58, 0.2);
}

.border-aco-yellow {
  border-color: #ffe357;
}

.border-gray-200 {
  border-color: rgb(229, 231, 235);
}

.border-gray-300 {
  border-color: rgb(209, 213, 219);
}

.border-pinpin-dark-blue {
  border-color: #002571;
}

.border-olio-muted-red\/35 {
  border-color: rgba(142, 80, 89, 0.35);
}

/* ============================================
   FOCUS STATES - Input borders and rings
   ============================================ */
*:focus-visible {
  outline: none;
}

/* Focus within container */
.has-\[\:focus\]\:border-aco-yellow:has(:focus),
.has-\[\:focus\]\:border-aco-yellow:focus-within {
  border-color: #ffe357 !important;
}

.has-\[\:focus\]\:shadow-none:has(:focus),
.has-\[\:focus\]\:shadow-none:focus-within {
  box-shadow: none !important;
}

/* Focus Rings */
.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}

.focus-visible\:ring-aco-yellow\/20:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 227, 87, 0.2);
}

.focus-visible\:ring-aco-dark-gray\/20:focus-visible {
  box-shadow: 0 0 0 2px rgba(54, 54, 58, 0.2);
}

.focus-visible\:ring-offset-2:focus-visible {
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff),
    0 0 0 calc(2px + 2px) var(--tw-ring-color, currentColor);
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px currentColor;
}

.focus\:ring-aco-dark-gray\/20:focus {
  box-shadow: 0 0 0 2px rgba(54, 54, 58, 0.2);
}

.focus\:ring-offset-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff),
    0 0 0 calc(2px + 2px) var(--tw-ring-color, currentColor);
}

/* ============================================
   DROP SHADOWS - Cards and buttons
   ============================================ */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Custom shadows used by components where arbitrary Tailwind shadow values
   are not emitted in Shadow DOM builds. */
.shadow-treatment-showcase-tabs {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PINPIN DEALS - Overlay layer in Shadow DOM
   ============================================ */
.deal-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Custom shadow for cards */
.shadow-\[0_0_10px_rgba\(54\,54\,58\,0\.1\)\] {
  box-shadow: 0 0 10px rgba(54, 54, 58, 0.1);
}

/* Drop shadows */
.drop-shadow-\[0_2px_6px_rgba\(54\,54\,58\,0\.06\)\] {
  filter: drop-shadow(0 2px 6px rgba(54, 54, 58, 0.06));
}

/* Input inset shadow */
.shadow-\[inset_0_1\.5px_1\.5px_0_rgba\(54\,54\,58\,0\.05\)\] {
  box-shadow: inset 0 1.5px 1.5px 0 rgba(54, 54, 58, 0.05);
}

/* ============================================
   TRANSFORMS - Button hover/active states
   ============================================ */
.hover\:scale-\[1\.005\]:hover {
  transform: scale(1.005);
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.active\:scale-\[0\.98\]:active {
  transform: scale(0.98);
}

.active\:scale-95:active {
  transform: scale(0.95);
}

/* Translate utilities */
.translate-y-0 {
  transform: translateY(0);
}

.translate-y-1 {
  transform: translateY(0.25rem);
}

.-translate-y-1 {
  transform: translateY(-0.25rem);
}

.-translate-y-2 {
  transform: translateY(-0.5rem);
}

.hover\:-translate-y-0\.5:hover {
  transform: translateY(-0.125rem);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

/* Shared card hover behavior for Olio cards */
.olio-card-hover {
  transition:
    transform 300ms ease-in-out,
    box-shadow 300ms ease-in-out;
  box-shadow: 0 4px 10px rgba(142, 80, 89, 0.15);
}

@media (hover: hover) {
  .olio-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(142, 80, 89, 0.2);
  }
}

/* Rotate utilities */
.rotate-0 {
  transform: rotate(0deg);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.-rotate-45 {
  transform: rotate(-45deg);
}

.-rotate-90 {
  transform: rotate(-90deg);
}

/* Combined transforms */
.translate-y-0.rotate-0 {
  transform: translateY(0) rotate(0deg);
}

.translate-y-1.rotate-45 {
  transform: translateY(0.25rem) rotate(45deg);
}

.-translate-y-2.-rotate-45 {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* Scale utilities */
.scale-0 {
  transform: scale(0);
}

.scale-90 {
  transform: scale(0.9);
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

/* ============================================
   OPACITY
   ============================================ */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* ============================================
   DISABLED STATES
   ============================================ */
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:hover\:scale-100:disabled:hover {
  transform: scale(1);
}

.disabled\:active\:scale-100:disabled:active {
  transform: scale(1);
}

.disabled\:hover\:shadow-none:disabled:hover {
  box-shadow: none;
}

/* ============================================
   TRANSITIONS
   ============================================ */
.transition {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* Easing functions */
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   TEXT ALIGNMENT - For Shadow DOM
   ============================================ */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ============================================
   ISOLATION - Stacking context
   ============================================ */
.isolate {
  isolation: isolate;
}

/* ============================================
   BLUR / FILTER - Glass effects
   ============================================ */
.blur-none {
  filter: blur(0px);
}

.blur-sm {
  filter: blur(4px);
}

.blur {
  filter: blur(8px);
}

.blur-md {
  filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}