:root {

  --bg-main: #faf7f5;

  --bg-white: #ffffff;

  --text-dark: #111111;

  --text-muted: #666666;

  --accent: #c9a27c; /* soft gold */

}



/* 1. BASE RESET */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  background: var(--bg-main); /* Fixed: Removed red !important */

  color: var(--text-dark);

  font-family: 'Inter', sans-serif;

  line-height: 1.7;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



section {

  padding: 5rem 0;

}



h2, h3 {

  letter-spacing: -0.4px;

  font-family: 'Playfair Display', serif;

}



/* 2. HEADER & NAV */

.header {

  background: rgba(255,255,255,0.85);

  backdrop-filter: blur(8px);

  position: sticky;

  top: 0;

  z-index: 100;

  padding: 1rem 0;

  border-bottom: 1px solid rgba(0,0,0,0.05);

}



.header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  font-size: 1.6rem;

}



.nav a {

  text-decoration: none;

  color: var(--text-dark);

  margin-left: 1.5rem;

  font-size: 0.9rem;

  font-weight: 500;

  transition: color 0.3s;

}



.nav a:hover {

  color: var(--accent);

}



/* 3. HERO SECTION (Fixed: Moved out of Media Query) */

.hero {

  background:

    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),

    url("images/hero-skincare.jpg") center/cover no-repeat;

  padding: 8rem 0;

  text-align: center;

}



.hero h2 {

  font-size: 3.5rem;

  margin-bottom: 1rem;

}



.btn {

  display: inline-block;

  background: var(--text-dark);

  color: #fff;

  padding: 1rem 2rem;

  text-decoration: none;

  border-radius: 50px;

  margin-top: 2rem;

  transition: background 0.3s;

}



.btn:hover {

  background: var(--accent);

}



/* 4. CATEGORIES */

.categories {

  background: var(--bg-white);

}



.cat-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

  margin-top: 3rem;

}



.cat-card {

  background: #fff;

  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(0,0,0,0.05);

  transition: transform 0.3s ease;

  text-align: center;

}



.cat-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

}



.cat-card span {

  display: block;

  padding: 1.2rem;

  font-weight: 600;

}



.cat-card:hover {

  transform: translateY(-10px);

}



/* 5. PRODUCT GRID (Fixed: Added Desktop Layout) */

.product-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  margin-top: 3rem;

}



.product-card {

  background: #fff;

  padding: 2rem;

  border-radius: 20px;

  border: 1px solid #eee;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.product-card h4 {

  font-family: 'Playfair Display', serif;

  font-size: 1.3rem;

  margin-bottom: 1rem;

}



.product-card .small {

  font-size: 0.75rem;

  color: var(--text-muted);

  margin-top: 1rem;

}



/* 6. PRODUCT PAGE SPECIFICS */

.product-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: start;

}



.product-image img {

  width: 100%;

  border-radius: 20px;

}



.product-btn {

  display: inline-block;

  background: var(--text-dark);

  color: #fff;

  padding: 1rem 2rem;

  text-decoration: none;

  border-radius: 50px;

  text-align: center;

}



/* 7. FOOTER */

.footer {

  padding: 4rem 0;

  background: #fff;

  text-align: center;

  border-top: 1px solid #eee;

}



/* 8. MOBILE OPTIMIZATION */

@media (max-width: 992px) {

  .product-grid {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 768px) {

  .header .container {

    flex-direction: column;

  }

 

  .nav {

    margin-top: 1rem;

  }



  .nav a {

    margin: 0 0.5rem;

  }



  .hero h2 {

    font-size: 2.2rem;

  }



  .product-grid, .product-layout, .cat-grid {

    grid-template-columns: 1fr;

  }

}

/* --- PASTEL ATTENTION CARDS --- */



.grid-details {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  padding: 4rem 0;

}



.pin-card {

  padding: 2rem;

  border-radius: 20px;

  transition: transform 0.3s ease;

  border: 1px solid rgba(0,0,0,0.03); /* Very subtle border */

}



.pin-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0,0,0,0.05);

}



/* Specific Pastel Backgrounds */

.mint-box {

  background-color: #f0f7f4; /* Soft Sage/Mint */

}



.cream-box {

  background-color: #fffaf0; /* Warm Vanilla/Cream */

}



.lavender-box {

  background-color: #f5f3f7; /* Soft Lavender/Blue */

}



.card-title {

  font-family: var(--font-header);

  font-size: 1.5rem;

  margin-bottom: 1.2rem;

  color: #333;

}



.pin-list {

  list-style: none;

  padding: 0;

}



.pin-list li {

  margin-bottom: 0.8rem;

  font-size: 0.9rem;

  line-height: 1.5;

}



.pin-list span {

  font-weight: bold;

  margin-right: 8px;

  color: #c9a27c; /* Bronze accent for the numbers */

}

/* --- PINTEREST BLOG LAYOUT --- */



.pinterest-layout {

  background-color: #ffffff;

}



.hero-flex {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 5rem;

  align-items: center;

  padding: 4rem 0;

}



/* Image Styling */

.hero-image {

  position: relative;

}



.main-pin-img {

  width: 100%;

  border-radius: 12px;

  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; /* Neumorphic soft shadow */

}



.floating-badge {

  position: absolute;

  top: 20px;

  left: 20px;

  background: rgba(255,255,255,0.9);

  padding: 8px 15px;

  font-family: var(--font-header);

  font-style: italic;

  font-size: 0.9rem;

  border-radius: 50px;

}



/* Typography Styling */

.sub-header {

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 0.75rem;

  color: #c9a27c;

  font-weight: 600;

  display: block;

  margin-bottom: 1rem;

}



.italic-tagline {

  font-family: var(--font-header);

  font-style: italic;

  font-size: 1.4rem;

  color: #555;

  margin: 1.5rem 0;

}



.benefit-pills {

  display: flex;

  gap: 10px;

  margin-bottom: 2rem;

}



.benefit-pills span {

  font-size: 0.7rem;

  background: #f4f4f4;

  padding: 5px 12px;

  border-radius: 50px;

  color: #777;

}



/* The "Save" style Button */

.pinterest-btn {

  display: inline-block;

  background: #0000FF /* Pinterest Red or stay with Black #111 */

  color: white;

  padding: 1.2rem 2.5rem;

  text-decoration: none;

  border-radius: 50px;

  font-weight: 600;

  transition: 0.3s;

}



/* Detail Cards Grid */

.grid-details {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  padding-bottom: 6rem;

}



.pin-card {

  padding: 2.5rem;

  border-radius: 20px;

  background: #fafafa;

  transition: 0.3s;

}



.pin-card:hover {

  background: #fff;

  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}



.card-title {

  font-family: var(--font-header);

  font-size: 1.8rem;

  margin-bottom: 1.5rem;

  position: relative;

}



.pin-list {

  list-style: none;

}



.pin-list li {

  margin-bottom: 1rem;

  font-size: 0.9rem;

  color: #666;

}



.pin-list span {

  font-family: var(--font-header);

  font-weight: bold;

  margin-right: 10px;

  color: #c9a27c;

}



/* Mobile */

@media (max-width: 900px) {

  .hero-flex, .grid-details {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .benefit-pills { justify-content: center; }

}

/* Clean Aesthetic Product Page Spacing */



/* Add elegant spacing around the main layout */

.pinterest-layout {

  padding: 4rem 0; /* Creates generous breathing room at the top and bottom */

  background-color: #fafafa; /* A very subtle off-white backrgound feels less stark */

}



/* 1. Neater Hero Section */

.hero-flex {

  gap: 6rem; /* Increases the gap between the image and text for better separation */

  align-items: flex-start; /* Aligns items to the top for a more structured feel */

}



/* 2. Clearer Text Spacing & Hierarchy */

.hero-text h1 {

  margin-bottom: 0.5rem; /* Tighter gap below the title makes the description feel more connected */

  font-size: 2.6rem; /* Sligthly reducing size creates a more balanced hierarchy */

}



.sub-header {

  margin-bottom: 0.8rem; /* Clear separation for the 'CURATED GLOW FINDS' label */

  color: #c9a27c; /* Gold accent color adds a premium touch */

}



.italic-tagline {

  margin: 1.5rem 0 2rem 0; /* Creates distinct space above and below the glass skin quote */

  border-left: 2px solid #eee; /* A subtle left border makes the quote stand out elegantly */

  padding-left: 1.5rem;

}



.intro-text {

  margin-bottom: 2rem; /* Distinct gap before the benefit pills and button */

  line-height: 1.8; /* Increased line height significantly improves text readability */

}



/* 3. Streamlined Pills & Button */

.benefit-pills {

  margin-bottom: 2.5rem; /* Creates a substantial gap before the primary action button */

}



.benefit-pills span {

  background: transparent;

  border: 1px solid #e0e0e0; /* Clean, subtle borders replace a solid gray background */

  color: #888;

  font-weight: 400;

}



.pinterest-btn {

  padding: 1rem 3rem; /* A wider padding creates a more professional, intentional look */

  font-weight: 500;

  letter-spacing: 0.05em; /* Subtle spacing makes the button text look more premium */

}



/* 4. Neater Detail Cards at the Bottom */

.grid-details {

  gap: 3rem; /* Increases space between the "Why We Love It," "How to Use," and "Who It's For" boxes */

  padding: 5rem 0;

}



.pin-card {

  padding: 3rem; /* Increased padding inside the boxes makes the text feel uncrowded */

  border: 1px solid #f0f0f0; /* Clear, subtle borders define each section without heavy shadows */

  background: white;

}



/* specific style for "How to Use" and "Who Should Use" lists to make them scan better */

.pin-list li {

  margin-bottom: 1.2rem; /* Clear vertical spacing between each list item improves scannability */

  line-height: 1.6;

}
/* --- E-COMMERCE STYLE PRICE & HEADER --- */
.product-info-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #f0f0f0; /* Subtle divider */
  padding-bottom: 1rem;
}

.badge-best {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9c27b0; 
  text-transform: uppercase;
  margin-bottom: 4px;
}

.brand-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
}

.product-title-detail {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #444;
  margin: 4px 0 10px 0;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.stars { color: #000; font-size: 1rem; }
.rating-count { color: #777; font-size: 0.85rem; }

.price-container {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.current-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #000;
}

.original-price {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: #999;
}

.discount-tag {
  color: #2e7d32; /* Nykaa-style green */
  font-weight: 600;
  font-size: 1rem;
}

.tax-info {
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
}
/* --- START OF E-COMMERCE PRODUCT LAYOUT --- */


   .split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; 
    justify-content: center; /* This pulls both columns toward the middle */
    align-items: start;
    max-width: 1000px; /* Prevents the grid from stretching too wide on big monitors */
    margin: 0 auto; /* Centers the whole grid on the page */
}

/* ... all other new styles ... */

/* --- END OF E-COMMERCE PRODUCT LAYOUT --- */
/* Styling for the Amazon Link Button */
.amazon-affiliate-btn {
    background: #fc2779; /* Nykaa Pink */
    color: white;
    text-decoration: none;
    padding: 15px;
    text-align: center;
    flex: 1;
    font-weight: 700;
    border-radius: 8px;
    display: inline-block;
    transition: 0.3s;
}

.amazon-affiliate-btn:hover { background: #d61f65; }

/* Tab Visibility Logic */
.tab-content { display: none; padding: 30px 0; }
.tab-content.active { display: block; }
/* Tighten the gap between hero and details */
.product-hero {
    padding-bottom: 20px !important; /* Reduces space below the image/text */
    margin-bottom: 0 !important;
}

.hero-flex {
    align-items: flex-start !important; /* Keeps image and text aligned at the top */
}

.product-details {
    padding-top: 10px !important; /* Brings the colorful cards up */
}

/* Ensure the image doesn't have forced bottom margin */
.main-pin-img {
    margin-bottom: 10px !important;
}
/* Force the product details section to slide UP */
.product-details {
    margin-top: -60px !important; /* Adjust this number to move it even higher */
    position: relative;
    z-index: 5; /* Ensures the cards stay on top of the hero background */
}

/* Remove any remaining inner spacing from the hero section */
.product-hero {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

/* Tighten the gap for mobile users too */
@media (max-width: 768px) {
    .product-details {
        margin-top: -30px !important;
    }
}