/* ============================================================
   E-Berry Skincare — Brand Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;1,400;1,500&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --eb-primary:    #C0395B;
  --eb-dark:       #8B1A35;
  --eb-accent:     #F4A7B9;
  --eb-bg-light:   #FDF6F0;
  --eb-bg-alt:     #FCEEF4;
  --eb-text-dark:  #1E1E1E;
  --eb-text-muted: #7A6B6B;
  --eb-success:    #4CAF50;
  --eb-white:      #ffffff;
  --eb-radius:     14px;
  --eb-radius-sm:  8px;
  --eb-shadow:     0 6px 24px rgba(192,57,91,0.12);
  --eb-shadow-lg:  0 12px 40px rgba(192,57,91,0.18);
}

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--eb-text-dark);
  background: var(--eb-white);
}

h1, h2, h3, h4, h5, .display-3, .display-4, .display-5 {
  font-family: 'Playfair Display', serif;
}

.eb-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--eb-text-muted);
  font-size: 1.15rem;
}

/* ── Bootstrap Color Overrides ─────────────────────────── */
.text-primary    { color: var(--eb-primary) !important; }
.bg-primary      { background-color: var(--eb-primary) !important; }
.border-primary  { border-color: var(--eb-primary) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--eb-primary), var(--eb-dark));
  border: none;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
  transition: opacity .25s, transform .2s;
}
.btn-primary:hover, .btn-primary:focus {
  opacity: .88;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(192,57,91,.3);
}

.btn-outline-primary {
  border-color: var(--eb-primary);
  color: var(--eb-primary);
  border-radius: 999px;
  font-weight: 600;
}
.btn-outline-primary:hover {
  background: var(--eb-primary);
  color: #fff;
}

/* ── Spinner ────────────────────────────────────────────── */
#spinner { opacity:0; visibility:hidden; transition:opacity .8s ease-out,visibility 0s linear .5s; z-index:99999; }
#spinner.show { transition:opacity .8s ease-out,visibility 0s linear 0s; visibility:visible; opacity:1; }
#spinner .spinner-grow { color: var(--eb-primary) !important; }

/* ── Back to top ────────────────────────────────────────── */
.back-to-top {
  position:fixed; right:30px; bottom:30px;
  width:45px; height:45px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--eb-primary),var(--eb-dark));
  color:#fff; transition:.5s; z-index:99;
}

/* ── WhatsApp Float ─────────────────────────────────────── */
.wa-float {
  position:fixed; right:24px; bottom:90px; z-index:1100;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  background:#25d366; color:#fff;
  border-radius:999px; padding:10px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-weight:700; font-size:.85rem;
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover { color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.26); }
.wa-float i { font-size:1.3rem; }
@media(max-width:767.98px){
  .wa-float { width:52px; height:52px; border-radius:50%; justify-content:center; padding:0; right:16px; bottom:88px; }
  .wa-float .wa-label { display:none; }
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  padding:10px 0;
  background: linear-gradient(90deg,var(--eb-dark),var(--eb-primary));
}
.topbar a { color:#fff !important; font-size:.88rem; }
.topbar .icon-eb { color:var(--eb-accent); }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-wrapper {
  background: rgba(18, 14, 16, 0.98);
  backdrop-filter:blur(10px);
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.navbar-logo { width:85px; height:85px; object-fit:contain; border-radius:50%; box-shadow: 0 4px 12px rgba(0,0,0,0.3); margin-right: 4px; }

.brand-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:#fff; line-height:1; }
.brand-sub   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.95rem; color:rgba(255,255,255,.7); }

.navbar-nav .nav-link { font-size:.95rem; font-weight:500; color:rgba(255,255,255,.8); padding:6px 14px; border-radius:8px; transition:.2s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color:var(--eb-primary); background:rgba(255,255,255,.08); }

.navbar .dropdown-menu { border:none; border-radius:var(--eb-radius); box-shadow:var(--eb-shadow); }
.navbar .dropdown-menu .dropdown-item:hover { background:var(--eb-bg-alt); color:var(--eb-primary); }

/* Cart nav icon */
.cart-nav-link { position:relative; }
.cart-nav-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; border-radius:999px;
  background:var(--eb-primary); color:#fff;
  font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* Search button */
.search-btn { width:42px;height:42px;border-radius:50%;border:none;background:var(--eb-bg-alt);color:var(--eb-primary);transition:.3s; }
.search-btn:hover { background:var(--eb-primary); color:#fff; }

/* ── Hero Crossfade Slider ──────────────────────────────── */
.hero-slider { position:relative; width:100%; height:100vh; overflow:hidden; }
.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.2s ease-in-out;
  z-index:0;
}
.hero-slide.active { opacity:1; z-index:1; }
.hero-slide img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.04);
  animation:heroZoom 8s ease-in-out infinite alternate;
}
@keyframes heroZoom { 0%{transform:scale(1)} 100%{transform:scale(1.06)} }

.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(139,26,53,.78) 0%,rgba(192,57,91,.45) 60%,rgba(30,30,30,.55) 100%);
  z-index:2;
}

.hero-caption {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center;
  padding:0 8%;
}

.hero-content { max-width:640px; }
.hero-content h4 { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem; color:var(--eb-accent); letter-spacing:.04em; margin-bottom:.6rem; }
.hero-content h1 { font-family:'Playfair Display',serif; font-size:clamp(2.4rem,5vw,4rem); color:#fff; line-height:1.08; margin-bottom:1rem; }
.hero-content p  { color:rgba(255,255,255,.88); font-size:1.08rem; margin-bottom:2rem; max-width:520px; }
.hero-buttons .btn { padding:.9rem 2.2rem; font-size:1rem; }

/* Slide indicator dots */
.hero-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:10px; }
.hero-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35); border:none; cursor:pointer; transition:.3s; }
.hero-dot.active { background:#fff; width:28px; border-radius:999px; }

/* ── Parallax Sections ─────────────────────────────────── */
.parallax-section {
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  position:relative;
}
.parallax-section::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(139,26,53,.82),rgba(192,57,91,.6));
}
.parallax-section > * { position:relative; z-index:1; }
@supports (-webkit-touch-callout: none) {
  .parallax-section { background-attachment:scroll; }
}

/* ── Promo Marquee ─────────────────────────────────────── */
.promo-marquee {
  background:var(--eb-dark); color:#fff; overflow:hidden;
  padding:10px 0; white-space:nowrap;
}
.promo-marquee-inner {
  display:inline-flex; gap:3rem;
  animation:marquee 22s linear infinite;
}
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.promo-marquee span { font-size:.88rem; letter-spacing:.03em; }

/* ── Testimonials ──────────────────────────────────────── */
.testimonial-card {
  background:var(--eb-white);
  border:1px solid rgba(192,57,91,.1);
  border-radius:var(--eb-radius);
  padding:2rem;
  position:relative;
  transition:transform .25s, box-shadow .25s;
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--eb-shadow); }
.testimonial-card::before {
  content:'\201C'; position:absolute; top:10px; left:18px;
  font-size:4rem; color:var(--eb-accent); font-family:serif; line-height:1; opacity:.5;
}
.testimonial-stars { color:#f5a623; letter-spacing:2px; font-size:.9rem; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--eb-accent); }

/* ── Trending Strip ────────────────────────────────────── */
.trending-card {
  background:var(--eb-white);
  border:1px solid rgba(192,57,91,.1);
  border-radius:var(--eb-radius);
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.trending-card:hover { transform:translateY(-5px); box-shadow:var(--eb-shadow-lg); }
.trending-card img { width:100%; height:200px; object-fit:cover; }
.trending-card-body { padding:1.2rem; }
.trending-badge {
  position:absolute; top:12px; left:12px;
  background:var(--eb-primary); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px;
}

/* ── Process Steps ─────────────────────────────────────── */
.process-step { text-align:center; position:relative; }
.process-num {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--eb-primary),var(--eb-dark));
  color:#fff; font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
}
.process-connector {
  position:absolute; top:28px; left:calc(50% + 34px); width:calc(100% - 68px);
  height:2px; background:var(--eb-accent);
}

/* ── Brand Logos Strip ─────────────────────────────────── */
.brand-strip { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; opacity:.55; filter:grayscale(1); transition:.4s; }
.brand-strip:hover { opacity:1; filter:grayscale(0); }
.brand-strip span { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--eb-text-muted); letter-spacing:.06em; }

/* ── Why E-Berry Feature Cards ─────────────────────────── */
.feature-card {
  background:var(--eb-white);
  border-radius:var(--eb-radius);
  padding:2rem 1.5rem;
  text-align:center;
  border:1px solid rgba(192,57,91,.1);
  transition:transform .25s, box-shadow .25s;
}
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--eb-shadow); }
.feature-icon {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--eb-primary),var(--eb-dark));
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
}
.feature-icon i { color:#fff; font-size:1.5rem; }
.feature-card h5 { font-family:'Playfair Display',serif; color:var(--eb-primary); margin-bottom:.5rem; }
.feature-card p  { color:var(--eb-text-muted); font-size:.92rem; margin:0; }

/* ── GSAP Scroll Reveal ────────────────────────────────── */
.gs-reveal { opacity:0; transform:translateY(40px); transition:none; }

/* ── Stats Block ────────────────────────────────────────── */
.stats-block {
  background: linear-gradient(135deg,var(--eb-dark),var(--eb-primary));
  border-radius:var(--eb-radius);
  padding:2.5rem;
  color:#fff;
  text-align:center;
}
.stat-item h2 { font-family:'Playfair Display',serif; font-size:2.8rem; color:#fff; margin-bottom:.25rem; }
.stat-item p  { color:rgba(255,255,255,.8); font-size:.88rem; margin:0; }

/* ── Sections ───────────────────────────────────────────── */
.section-tag { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--eb-primary); display:block; margin-bottom:.5rem; }

/* ── Gallery Tabs ───────────────────────────────────────── */
.gallery .tab-class .nav-item a.active { background:var(--eb-primary) !important; border-color:var(--eb-primary) !important; }
.gallery .tab-class .nav-item a.active span { color:#fff !important; }
.gallery .gallery-img { position:relative; overflow:hidden; border-radius:var(--eb-radius-sm); }
.gallery .gallery-img img { transition:.5s; width:100%; height:100%; object-fit:cover; }
.gallery .gallery-img:hover img { transform:scale(1.08); }
.gallery .gallery-img .gallery-overlay { position:absolute;inset:0;background:rgba(192,57,91,.45);opacity:0;transition:.4s;border-radius:var(--eb-radius-sm);display:flex;align-items:flex-end;padding:1rem; }
.gallery .gallery-img:hover .gallery-overlay { opacity:1; }
.gallery .gallery-img .search-icon { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:.4s;z-index:2; }
.gallery .gallery-img:hover .search-icon { opacity:1; }

/* ── Contact ────────────────────────────────────────────── */
.contact-card {
  background:var(--eb-white);
  border:1px solid rgba(192,57,91,.15);
  border-radius:var(--eb-radius);
  padding:1.5rem;
  transition:box-shadow .25s;
}
.contact-card:hover { box-shadow:var(--eb-shadow); }
.contact-card i { color:var(--eb-primary); }

/* ── Consultation Form ──────────────────────────────────── */
.consultation-hero {
  background: linear-gradient(135deg,var(--eb-bg-alt),var(--eb-bg-light));
  border-radius:var(--eb-radius);
  padding:3rem 2rem;
}
.form-control:focus, .form-select:focus { border-color:var(--eb-primary) !important; box-shadow:0 0 0 .2rem rgba(192,57,91,.18) !important; }
.form-check-input:checked { background-color:var(--eb-primary); border-color:var(--eb-primary); }

/* ── Cart Page ──────────────────────────────────────────── */
.cart-item-row { background:var(--eb-white); border-radius:var(--eb-radius-sm); border:1px solid rgba(192,57,91,.1); padding:1rem; margin-bottom:.75rem; }
.cart-item-row img { width:70px;height:70px;object-fit:cover;border-radius:var(--eb-radius-sm); }
.qty-ctrl { display:inline-flex;align-items:center;gap:.4rem; }
.qty-ctrl button { width:30px;height:30px;border-radius:50%;border:1px solid rgba(192,57,91,.3);background:var(--eb-white);color:var(--eb-primary);font-weight:700;transition:.2s; }
.qty-ctrl button:hover { background:var(--eb-primary);color:#fff; }

.order-summary-card {
  background:var(--eb-bg-alt);
  border:1px solid rgba(192,57,91,.15);
  border-radius:var(--eb-radius);
  padding:1.5rem;
  position:sticky; top:100px;
}

/* ── Checkout ───────────────────────────────────────────── */
.payment-option { border:2px solid rgba(192,57,91,.15); border-radius:var(--eb-radius-sm); padding:1rem; cursor:pointer; transition:.2s; }
.payment-option:hover, .payment-option.selected { border-color:var(--eb-primary); background:var(--eb-bg-alt); }

/* ── Order Confirmation ─────────────────────────────────── */
.success-icon { width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--eb-primary),var(--eb-dark));display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem; }
.success-icon i { color:#fff;font-size:2rem; }
.order-track-step { display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid rgba(192,57,91,.08); }
.step-dot { width:12px;height:12px;border-radius:50%;background:var(--eb-accent); }
.step-dot.active { background:var(--eb-primary); }

/* ── Product Page Overrides ─────────────────────────────── */
.product-chip { background:rgba(192,57,91,.1);color:var(--eb-primary); }
.product-price { color:var(--eb-primary); }
.stock-pill.in-stock  { background:rgba(76,175,80,.12); color:#2e7d32; }
.stock-pill.low-stock { background:rgba(255,193,7,.18); color:#8a6200; }
.stock-pill.out-stock { background:rgba(192,57,91,.12); color:var(--eb-dark); }
.product-image-wrap { background:linear-gradient(135deg,rgba(192,57,91,.06),rgba(244,167,185,.25)); }
.product-card { border-radius:var(--eb-radius); box-shadow:0 4px 16px rgba(192,57,91,.08); }
.cart-fab { background:var(--eb-primary); box-shadow:0 6px 22px rgba(192,57,91,.4); }
.cart-fab:hover { background:var(--eb-dark); }

/* ── Breadcrumb Section ─────────────────────────────────── */
.bg-breadcrumb {
  background: linear-gradient(rgba(139,26,53,.65),rgba(192,57,91,.55)),
              url(../img1/productshowcase.jpg) center/cover no-repeat;
  min-height:280px;
  display:flex; align-items:center;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer { background:#1a0810; }
.footer h5 { font-family:'Playfair Display',serif; color:#fff; margin-bottom:1.2rem; font-size:1.1rem; }
.footer a, .footer p { color:rgba(255,255,255,.75); font-size:.92rem; line-height:2; text-decoration:none; transition:.2s; }
.footer a:hover { color:var(--eb-accent) !important; letter-spacing:.03em; }
.footer .footer-divider { border-color:rgba(255,255,255,.08); }
.footer .social-link {
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75); transition:.2s;
}
.footer .social-link:hover { background:var(--eb-primary); border-color:var(--eb-primary); color:#fff; }

.copyright { background:#100509 !important; border-top:1px solid rgba(255,255,255,.06); }
.copyright span, .copyright a { color:rgba(255,255,255,.6); font-size:.85rem; }

/* ── Newsletter ─────────────────────────────────────────── */
.newsletter-form .form-control { border-right:0; border-radius:999px 0 0 999px; border-color:rgba(192,57,91,.3); }
.newsletter-form .btn { border-radius:0 999px 999px 0; }

/* ── About Page ─────────────────────────────────────────── */
.about-story-img { border-radius:var(--eb-radius); box-shadow:var(--eb-shadow-lg); object-fit:cover; width:100%; height:420px; }
.loyalty-card { background:var(--eb-bg-alt); border:1px solid rgba(192,57,91,.15); border-radius:var(--eb-radius); padding:1.5rem; }

/* ── Toast ──────────────────────────────────────────────── */
.eb-toast { position:fixed;bottom:150px;right:22px;z-index:9999;padding:.6rem 1.1rem;border-radius:999px;background:#222;color:#fff;font-size:.82rem;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:280px; }
.eb-toast.show { opacity:1;transform:translateY(0); }
.eb-toast.success { background:#4CAF50; }
.eb-toast.error   { background:#C0395B; }
.eb-toast.info    { background:#0a58ca; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:767.98px){
  .hero-content h1 { font-size:2rem; }
  .hero-buttons { flex-direction:column; gap:.75rem; }
  .hero-buttons .btn { width:100%; text-align:center; }
  .stats-block { padding:1.5rem; }
  .stat-item h2 { font-size:2rem; }
}