/* ============================================
   ESS PEE CAKES - Girly Pink Aesthetic Theme
   ============================================ */

@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&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Dancing+Script:wght@400;500;600;700&display=swap');

/* ============ ROOT VARIABLES ============ */
:root {
  --primaryFont: "DM Sans", sans-serif;
  --secondaryFont: "Cormorant Garamond", serif;
  --accentFont: "Dancing Script", cursive;

  --primaryColor: #E8527A;
  --secondaryColor: #C9375A;
  --pinkColor: #FFF0F5;
  --lightPink: #FFD6E3;
  --blushPink: #FADADD;
  --dustyRose: #E8A0B0;
  --creamColor: #FDF8F5;
  --paraColor: #7A5C65;
  --titleColor: #3D1A26;
  --ashColor: #FDF4F7;
  --whiteColor: #fff;
  --blackColor: #000;
  --offwhiteColor: #FFE4EE;
  --borderColor: rgba(232, 82, 122, 0.15);
  --darkParaColor: #9A7B8C;
  --fontSize: 16px;
  --transition: all ease .4s;
  --shadowSm: 0 4px 20px rgba(232, 82, 122, 0.12);
  --shadowMd: 0 8px 40px rgba(232, 82, 122, 0.18);
}

/* ============ GLOBAL ============ */
body {
  color: var(--paraColor) !important;
  font-family: var(--primaryFont) !important;
  background-color: var(--creamColor) !important;
  font-weight: 400;
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondaryFont) !important;
  color: var(--titleColor) !important;
  font-weight: 500 !important;
}
a { text-decoration: none; transition: var(--transition); }

.section-subtile, h6.section-subtile {
  font-family: var(--accentFont) !important;
  font-size: 22px !important;
  color: var(--primaryColor) !important;
  font-weight: 600 !important;
}

/* ============ NAVBAR TOP ============ */
.navbar-top {
  background: linear-gradient(135deg, var(--primaryColor) 0%, var(--secondaryColor) 100%) !important;
}
.navbar-top p, .navbar-top a, .navbar-top span, .navbar-top i {
  color: #fff !important;
  font-size: 13px;
}

/* ============ MAIN NAVBAR ============ */
.navbar-area {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borderColor);
  box-shadow: var(--shadowSm) !important;
}
.navbar-area.sticky {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 30px rgba(232, 82, 122, 0.15) !important;
}
.menu > ul > li > a {
  color: var(--titleColor) !important;
  font-family: var(--primaryFont) !important;
  font-weight: 500 !important;
  font-size: 15px;
}
.menu > ul > li > a:hover, .menu > ul > li > a.active {
  color: var(--primaryColor) !important;
}
.menu ul li a:hover, .menu ul li a.active { color: var(--primaryColor) !important; }

/* ============ BUTTONS ============ */
.btn {
  font-family: var(--primaryFont) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  transition: all 0.35s ease !important;
}
.btn.style-two, .btn.style-three {
  background: linear-gradient(135deg, var(--primaryColor) 0%, var(--secondaryColor) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 25px rgba(232, 82, 122, 0.4) !important;
}
.btn.style-two:hover, .btn.style-three:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 35px rgba(232, 82, 122, 0.5) !important;
}
.btn.style-one {
  background: transparent !important;
  color: var(--primaryColor) !important;
  border: 2px solid var(--primaryColor) !important;
}
.btn.style-one:hover {
  background: linear-gradient(135deg, var(--primaryColor) 0%, var(--secondaryColor) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ============ HERO ============ */
.hero-area {
  background: linear-gradient(135deg, #FFF0F5 0%, #FFF8FB 50%, #FFF0F5 100%) !important;
}
.hero-content h1 {
  font-size: clamp(36px, 5vw, 62px) !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}
.product-card.bg-white {
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(232, 82, 122, 0.15) !important;
  border: none !important;
}
.hero-thumb {
  border: 3px solid var(--primaryColor) !important;
  box-shadow: 0 4px 15px rgba(232, 82, 122, 0.2) !important;
}
.add-to-cart {
  background: linear-gradient(135deg, var(--primaryColor), var(--secondaryColor)) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(232, 82, 122, 0.4) !important;
}
.play-icon {
  background: linear-gradient(135deg, var(--primaryColor), var(--secondaryColor)) !important;
  box-shadow: 0 6px 20px rgba(232, 82, 122, 0.35) !important;
}
.play-icon i { color: #fff !important; }
.play-text { color: var(--titleColor) !important; font-family: var(--primaryFont) !important; font-weight: 600 !important; }

/* ============ CATEGORY ============ */
.category-area { background: #FFF8FB !important; }
.category-card.style-one .category-img {
  border: 4px solid var(--lightPink) !important;
  box-shadow: 0 8px 30px rgba(232, 82, 122, 0.15) !important;
  transition: var(--transition) !important;
}
.category-card.style-one:hover .category-img {
  border-color: var(--primaryColor) !important;
  box-shadow: 0 12px 40px rgba(232, 82, 122, 0.3) !important;
  transform: translateY(-5px) !important;
}
.category-card.style-one h3 a { color: var(--titleColor) !important; }
.category-card.style-one h3 a:hover { color: var(--primaryColor) !important; }
.category-card.style-one span { color: var(--dustyRose) !important; }

/* ============ FEATURED PRODUCTS ============ */
.featured-product.style-two {
  border-radius: 30px !important;
  overflow: hidden;
  box-shadow: var(--shadowMd) !important;
  transition: var(--transition) !important;
}
.featured-product.style-two:hover { transform: translateY(-6px) !important; }
.featured-product.style-two.bg-1 { background: linear-gradient(160deg, #F5E6E8 0%, #E8C5CC 100%) !important; }
.featured-product.style-two.bg-2 { background: linear-gradient(160deg, var(--primaryColor) 0%, var(--secondaryColor) 100%) !important; }
.featured-product.style-two.bg-3 { background: linear-gradient(160deg, #FFF0F5 0%, #FFD6E3 100%) !important; }
.featured-product.style-two .feature-info h3 { font-family: var(--secondaryFont) !important; font-size: 36px !important; }
.featured-product.style-two.bg-2 .feature-info h3,
.featured-product.style-two.bg-2 .feature-info p,
.featured-product.style-two.bg-2 .feature-info h6 { color: #fff !important; }
.featured-product.style-two .feature-img { width: 100% !important; border-radius: 0 0 30px 30px !important; }
.featured-product.style-two .feature-img img {
  width: 100% !important;
  max-height: 260px !important;
  object-fit: cover !important;
  border-radius: 0 0 30px 30px !important;
}

/* ============ PRODUCT CARDS ============ */
.product-card.style-two {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 20px rgba(232, 82, 122, 0.08) !important;
  border: 1px solid var(--borderColor) !important;
  transition: var(--transition) !important;
  overflow: hidden;
  padding-bottom: 20px;
}
.product-card.style-two:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 50px rgba(232, 82, 122, 0.2) !important;
}
.product-card.style-two .product-img img {
  height: 280px !important;
  width: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}
.product-card.style-two:hover .product-img img { transform: scale(1.05) !important; }
.product-card.style-two h3 a { font-family: var(--secondaryFont) !important; font-size: 22px !important; color: var(--titleColor) !important; }
.product-card.style-two h3 a:hover { color: var(--primaryColor) !important; }
.product-card.style-two .product-price { color: var(--primaryColor) !important; font-weight: 600 !important; }
.product-action li a, .product-action li button {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  color: var(--primaryColor) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.product-action li a:hover, .product-action li button:hover {
  background: var(--primaryColor) !important;
  color: #fff !important;
}

/* ============ ABOUT ============ */
.about-area { background: linear-gradient(135deg, #FFF0F5 0%, #FDFAFE 100%) !important; }
.about-img {
  border-radius: 30px !important;
  box-shadow: 0 15px 50px rgba(232, 82, 122, 0.2) !important;
  width: 100% !important;
  height: 450px !important;
  object-fit: cover !important;
}
.progress { height: 6px !important; border-radius: 10px !important; background: var(--lightPink) !important; }
.progress-bar { background: linear-gradient(90deg, var(--primaryColor), var(--secondaryColor)) !important; border-radius: 10px !important; }

/* ============ OFFER SECTION ============ */
.offer-area.style-two {
  background: linear-gradient(135deg, #FFF0F5 0%, #FFD6E3 50%, #FFF0F5 100%) !important;
  border: 1px solid rgba(232, 82, 122, 0.15) !important;
  box-shadow: 0 10px 50px rgba(232, 82, 122, 0.12) !important;
  padding: 70px 40px !important;
}

/* ============ TESTIMONIALS ============ */
.testimonial-bg { background: linear-gradient(135deg, #FFF0F5 0%, #FFF8FB 100%) !important; }
.testimonial-card.style-two {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 30px rgba(232, 82, 122, 0.1) !important;
  border: 1px solid var(--borderColor) !important;
}
.testimonial-card.style-two:hover {
  box-shadow: 0 16px 50px rgba(232, 82, 122, 0.2) !important;
  transform: translateY(-4px) !important;
}
.client-info h5 { color: var(--primaryColor) !important; }
.client-info span { color: var(--dustyRose) !important; }
.testimonial-card p { font-style: italic; }

/* ============ FOOTER ============ */
.footer-area.style-two, .footer-top.bg-f {
  background: linear-gradient(160deg, #3D1A26 0%, #5C2A38 100%) !important;
}
.footer-top h2 { color: #fff !important; }
.footer-widget-title { color: var(--lightPink) !important; }
.footer-menu li a, .footer-widget p, .contact-info li p {
  color: rgba(255,255,255,0.7) !important;
}
.footer-menu li a:hover { color: var(--lightPink) !important; }
.contact-info h6 { color: #fff !important; }
.contact-info li a { color: rgba(255,255,255,0.7) !important; }
.contact-info li a:hover { color: var(--lightPink) !important; }
.social-profile.style-five .social-icon {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
.social-profile.style-five .social-icon:hover { background: var(--primaryColor) !important; }
.social-profile.style-five .social-linkname { color: rgba(255,255,255,0.7) !important; }
.footer-bottom { background: #2A1019 !important; }
.footer-bottom p, .footer-bottom span, .footer-bottom a { color: rgba(255,255,255,0.6) !important; }
.footer-bottom a:hover { color: var(--lightPink) !important; }
.footer-widget-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--primaryColor), var(--dustyRose));
  border-radius: 2px;
  margin-top: 10px;
}

/* ============ BACK TO TOP ============ */
.progress-wrap.style-one {
  background: linear-gradient(135deg, var(--primaryColor), var(--secondaryColor)) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(232, 82, 122, 0.4) !important;
}

/* ============ SWIPER DOTS ============ */
.product-pagination .swiper-pagination-bullet { background: var(--lightPink) !important; }
.product-pagination .swiper-pagination-bullet-active {
  background: var(--primaryColor) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ashColor); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primaryColor), var(--secondaryColor)); border-radius: 3px; }
::selection { background: var(--lightPink); color: var(--titleColor); }

/* ============ FLOATING ANIMATION ============ */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.hero-slide-item > img { animation: floatUpDown 5s ease-in-out infinite; }

/* ============ MOBILE MENU ============ */
.menu { background: #fff !important; }
.menu .menu-mobile-header { background: #fff !important; border-bottom: 1px solid var(--borderColor) !important; }

@media (max-width: 768px) {
  .hero-content h1 { font-size: 36px !important; }
  .about-img { height: 300px !important; }
  .offer-area.style-two { padding: 40px 20px !important; }
}