/* 
 * Lovi — Clinical Minimalist Beauty Stylesheet
 * Deep Indigo Ink on Near-White Porcelain canvas with a single Electric Violet accent
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Geist:wght@400;500;600&display=swap');

:root {
  /* Colors */
  --color-indigo-ink: #151581;
  --color-electric-violet: #5465ff;
  --gradient-electric-violet: linear-gradient(270deg, rgba(102, 127, 255, 0.8) 19.614%, rgba(206, 162, 255, 0.8) 50.0389%, rgba(255, 133, 177, 0.8) 86.0908%);
  --color-lavender-mist: #a1a1cd;
  --color-lilac-accent: #9f73e6;
  --color-petal-blush: #de62de;
  --color-verified-green: #00bb76;
  --color-alert-rose: #f25c75;
  --color-info-blue: #20a2e3;
  --color-porcelain: #f6f6fa;
  --color-paper-white: #ffffff;
  --color-bone: #f6f5f4;
  --color-fog: #d6d6d6;
  --color-pebble: #bfbfbd;
  --color-graphite: #292824;
  --color-ash: #949392;

  /* Typography — Font Families */
  --font-sans-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-es-rebond-grotesque: 'Inter Tight', 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-es-rebond-grotesque-medium: 'Inter Tight', 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.25px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.29;
  --tracking-body-sm: -0.35px;
  --text-body: 16px;
  --leading-body: 1.38;
  --tracking-body: -0.44px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.38;
  --tracking-body-lg: -0.5px;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: -1.49px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.14;
  --tracking-heading-sm: -0.64px;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --tracking-heading: -0.99px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 0.92;
  --tracking-heading-lg: -1.58px;
  --text-display: 48px;
  --leading-display: 0.91;
  --tracking-display: -2.02px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-104: 104px;
  --spacing-112: 112px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-5: 40px;
  --radius-full: 48px;

  /* Named Radii */
  --radius-tags: 12px;
  --radius-cards: 24px;
  --radius-images: 16px;
  --radius-buttons: 48px;
  --radius-phone-mockup: 36px;

  /* Shadows */
  --shadow-xl: rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-canvas: #f6f6fa;
  --surface-card: #ffffff;
  --surface-warm-block: #f6f5f4;
}

/* --- Global Resets & Base Styles --- */
body, html {
  background-color: var(--color-porcelain) !important;
  color: var(--color-graphite) !important;
  font-family: var(--font-inter) !important;
  font-size: var(--text-body) !important;
  line-height: var(--leading-body) !important;
  letter-spacing: var(--tracking-body) !important;
  -webkit-font-smoothing: antialiased;
}

.page-wraper {
  background-color: var(--color-porcelain) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, .title-head, .post-title, .title {
  font-family: var(--font-es-rebond-grotesque) !important;
  color: var(--color-indigo-ink) !important;
  font-weight: 400 !important; /* Lovi display uses weight 400 with architecture proportions, no bold */
  text-transform: none !important;
}

h1 {
  font-size: var(--text-display) !important;
  line-height: var(--leading-display) !important;
  letter-spacing: var(--tracking-display) !important;
}

h2, .title-head {
  font-size: var(--text-heading-lg) !important;
  line-height: var(--leading-heading-lg) !important;
  letter-spacing: var(--tracking-heading-lg) !important;
}

h3 {
  font-size: var(--text-heading) !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: var(--tracking-heading) !important;
}

h4 {
  font-size: var(--text-subheading) !important;
  line-height: var(--leading-subheading) !important;
  letter-spacing: var(--tracking-subheading) !important;
}

p, .post-desc {
  color: var(--color-graphite) !important;
  font-family: var(--font-inter) !important;
  line-height: var(--leading-body) !important;
  letter-spacing: var(--tracking-body) !important;
}

/* Secondary/Muted copy */
.text-secondary, .categ-sumry, .title-ext {
  color: var(--color-lavender-mist) !important;
  font-family: var(--font-inter) !important;
  font-size: var(--text-body-sm) !important;
  letter-spacing: var(--tracking-body-sm) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* --- Layout Elements --- */
.container, .container-fluid, .container-large {
  max-width: var(--page-max-width) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.section-area {
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-gap) !important;
  background-color: var(--color-porcelain) !important;
}

/* --- Navigation Header --- */
.header {
  background-color: var(--color-paper-white) !important;
  border-bottom: 1px solid var(--color-fog) !important;
  position: sticky !important;
  top: 0;
  z-index: 999;
}

.menu-bar {
  background-color: var(--color-paper-white) !important;
  padding: 16px 0 !important;
}

.menu-logo img {
  max-height: 60px !important;
  filter: hue-rotate(220deg) saturate(2); /* Tint toward indigo ink */
}

/* Navigation Dropdown List */
.dropdown-menu {
  background-color: var(--color-paper-white) !important;
  border-radius: var(--radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 16px !important;
}

.cart-btn {
  background-color: var(--color-porcelain) !important;
  color: var(--color-indigo-ink) !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 16px !important;
  font-family: var(--font-inter) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
}

.cart-btn span {
  background-color: var(--color-indigo-ink) !important;
  color: var(--color-paper-white) !important;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 6px;
}

/* --- Hero Section Redesign --- */
.hero-slider4 {
  background-color: var(--color-porcelain) !important;
  padding: 100px 0 60px 0 !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-content .title {
  font-size: var(--text-display) !important;
  line-height: var(--leading-display) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--color-indigo-ink) !important;
  margin-bottom: 24px !important;
}

.hero-content .title span {
  color: var(--color-indigo-ink) !important;
}



.hero-media {
  position: relative;
  max-width: 320px;
  margin: 40px auto 0 auto !important;
  border-radius: var(--radius-phone-mockup) !important;
  overflow: hidden;
  box-shadow: var(--shadow-xl) !important;
  border: 8px solid var(--color-graphite);
  background-color: var(--color-paper-white);
}

.hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Scanner overlay moment */
.hero-media::after {
  content: "Face scan in progress...";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(21, 21, 129, 0.85);
  color: var(--color-paper-white);
  font-family: var(--font-inter);
  font-size: var(--text-caption);
  padding: 4px 12px;
  border-radius: var(--radius-tags);
  white-space: nowrap;
}

/* Voice Input Bar inside mockup */
.hero-media .window {
  display: none !important; /* Hide old background window artifacts */
}

/* Custom Voice Pill */
.hero-media::before {
  content: "Ask Lóvi anything... 🎙️";
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  height: 44px;
  line-height: 44px;
  background: var(--gradient-electric-violet);
  color: var(--color-paper-white);
  font-family: var(--font-inter);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-buttons);
  text-align: left;
  padding-left: 16px;
  box-shadow: 0px 4px 12px rgba(84,101,255,0.3);
  z-index: 2;
}

.flow-img-content, .flow-img-wrap {
  display: none !important; /* Clean minimal layout — hide excessive clutter images */
}

.bg-text {
  display: none !important; /* Remove giant decorative text */
}

/* --- Cards & Blocks Redesign --- */
.blog-post, .item-card, .gallery-post-child, .about-img-box5 {
  background-color: var(--surface-card) !important;
  border-radius: var(--radius-cards) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
  padding: var(--card-padding) !important;
  margin-bottom: 30px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.blog-post:hover, .item-card:hover, .gallery-post-child:hover {
  transform: translateY(-4px) !important;
  box-shadow: rgba(36, 36, 41, 0.12) 0px 12px 42px 0px, rgba(37, 36, 41, 0.09) 0px 2px 4px 0px !important;
}

.ld-post-media img, .item-media img, .post-media img {
  border-radius: var(--radius-images) !important;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Category grid specific card tweaks */
.blog-card-v1 {
  display: flex !important;
  flex-direction: column !important;
}

.ld-post-info {
  padding: 16px 0 0 0 !important;
}

.post-title a {
  color: var(--color-indigo-ink) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.post-title a:hover {
  color: var(--color-electric-violet) !important;
}

/* --- Floating Section Containers --- */
.gsap-sticky-card-wrapper {
  gap: 24px;
}

/* Redesign Section Containers as Floating Paper Tablets */
.categ-winfo, .gallery-area, .feedback-swiper3 {
  background-color: var(--color-porcelain) !important;
}

/* Give major content blocks a beautiful structural rounded containment */
.content-block {
  background-color: var(--color-porcelain) !important;
  padding: 0 24px !important;
}

/* --- Buttons --- */
.btn, .btn-primary, .btn-secondary, .btn-white, .btn-link {
  font-family: var(--font-inter) !important;
  font-weight: 500 !important;
  font-size: var(--text-body-sm) !important;
  border-radius: var(--radius-buttons) !important;
  padding: 12px 28px !important;
  text-transform: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid var(--color-indigo-ink) !important;
  box-shadow: none !important;
}

/* Lovi buttons: minimal outlines and clean ink styles, no solid primary colors */
.btn-primary, .btn-secondary {
  background-color: var(--color-indigo-ink) !important;
  color: var(--color-paper-white) !important;
  border-color: var(--color-indigo-ink) !important;
}

.btn-primary:hover, .btn-secondary:hover {
  background-color: var(--color-paper-white) !important;
  color: var(--color-indigo-ink) !important;
}

.btn-white {
  background-color: var(--color-paper-white) !important;
  color: var(--color-indigo-ink) !important;
  border-color: var(--color-fog) !important;
}

.btn-white:hover {
  background-color: var(--color-porcelain) !important;
  border-color: var(--color-indigo-ink) !important;
}

.btn-link {
  border: none !important;
  background: none !important;
  color: var(--color-indigo-ink) !important;
  padding: 0 !important;
  text-decoration: underline !important;
  display: inline-flex;
  align-items: center;
}

.btn-link:hover {
  color: var(--color-electric-violet) !important;
}

/* --- Services & Panels Redesign --- */
.gallery-area {
  border-radius: var(--radius-3xl-5) !important;
  background-color: var(--color-paper-white) !important;
  padding: var(--spacing-64) !important;
  box-shadow: var(--shadow-xl) !important;
  margin: 80px 0 !important;
}

.panel {
  margin-bottom: 40px !important;
  border-bottom: 1px solid var(--color-fog) !important;
  padding-bottom: 40px !important;
}

.panel:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.full-media img {
  border-radius: var(--radius-images) !important;
  box-shadow: var(--shadow-xl) !important;
}

.gallery-post-child {
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.media-counter {
  display: none !important; /* Remove heavy old layout counter */
}

/* --- Star Ratings & Trust Indicators --- */
.star-rating, .fa-star, .checked {
  color: var(--color-verified-green) !important; /* Green stars - clinical/medical authority choice */
}

.verified-badge {
  color: var(--color-verified-green) !important;
  font-family: var(--font-inter) !important;
  font-size: var(--text-caption) !important;
  font-weight: 600 !important;
}

/* --- Products / Swiper Items --- */
.item-info {
  background-color: var(--color-paper-white) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 0 0 !important;
}

.item-info .price span {
  color: var(--color-indigo-ink) !important;
  font-family: var(--font-es-rebond-grotesque-medium) !important;
  font-weight: 500 !important;
  font-size: var(--text-body-lg) !important;
}

/* --- Footer Redesign --- */
.footer-style5 {
  background-color: var(--color-graphite) !important;
  color: var(--color-ash) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.footer-top {
  padding: 80px 0 40px 0 !important;
}

.footer-title {
  color: var(--color-paper-white) !important;
  font-family: var(--font-es-rebond-grotesque) !important;
  font-size: var(--text-body-lg) !important;
  margin-bottom: 24px !important;
}

.footer_widget ul li a {
  color: var(--color-ash) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer_widget ul li a:hover {
  color: var(--color-paper-white) !important;
}

.subscribe-form3 input {
  background-color: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-buttons) !important;
  color: var(--color-paper-white) !important;
  padding: 12px 20px !important;
}

.subscribe-form3 button {
  background-color: var(--color-paper-white) !important;
  color: var(--color-graphite) !important;
  border-radius: var(--radius-buttons) !important;
  padding: 8px 16px !important;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 30px 0 !important;
}



/* --- Header Navigation & Menu Styles --- */
.nav.navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav.navbar-nav > li {
  position: relative !important;
}

.nav.navbar-nav > li > a {
  color: var(--color-indigo-ink) !important;
  font-family: var(--font-inter) !important;
  font-weight: 500 !important;
  font-size: var(--text-body-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 16px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nav.navbar-nav > li > a:hover {
  color: var(--color-electric-violet) !important;
}

/* Sub-menus (Dropdowns) */
.sub-menu {
  background-color: var(--color-paper-white) !important;
  border-radius: var(--radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 12px 0 !important;
  min-width: 220px !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  display: none; /* Controlled by template JS */
  list-style: none !important;
  margin: 0 !important;
  z-index: 999 !important;
}

.nav.navbar-nav > li:hover .sub-menu {
  display: block !important;
}

.sub-menu li a {
  color: var(--color-graphite) !important;
  font-family: var(--font-inter) !important;
  font-size: var(--text-body-sm) !important;
  padding: 10px 20px !important;
  display: block !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-align: left !important;
}

.sub-menu li a:hover {
  background-color: var(--color-porcelain) !important;
  color: var(--color-indigo-ink) !important;
}

/* Secondary Actions Menu */
.secondary-menu ul {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.secondary-menu ul li {
  margin: 0 !important;
  display: inline-flex !important;
}

/* Style the triggers in the secondary menu to look identical to cart-btn */
.secondary-menu button.cart-btn {
  border: none !important;
  cursor: pointer !important;
  outline: none !important;
}

.secondary-menu button.cart-btn:hover {
  background-color: var(--color-fog) !important;
}

.secondary-menu .dropdown-menu {
  margin-top: 8px !important;
}