/* ---

Highlights Gallery Styles (Updated)

--- */
/* --- CRITICAL: Prevent FOUC (Flash of Unstyled Content) --- */

/* 1. Hero Section */
.hero-header h1,
.hero-header h2,
#media-card-gallery {
    opacity: 0;
    visibility: hidden;
}

/* 2. Product Grid Section */
.section-product-grid .grid-section-heading,
.section-product-grid .product-grid-card {
    opacity: 0;
    visibility: hidden;
}

/* 3. Horizontal Product Slider Section */
.section-horizontal-products .section-title-large,
.section-horizontal-products .view-all-btn {
    opacity: 0;
    visibility: hidden;
}

/* 4. Blog Grid Section */
.section-featured-blogs .section-header-wrapper,
.section-featured-blogs .bento-card {
    opacity: 0;
    visibility: hidden;
}

/* Fallback: If JS is disabled, show content so site is usable */
.no-js .hero-header h1,
.no-js .hero-header h2,
.no-js #media-card-gallery,
.no-js .grid-section-heading,
.no-js .product-grid-card,
.no-js .section-title-large,
.no-js .view-all-btn,
.no-js .section-header-wrapper,
.no-js .bento-card {
    opacity: 1 !important;
    visibility: visible !important;
}


.hero-header{

        width: 80%;

    margin: 0 auto;

    text-align: center;

    margin-bottom:70px;

}
.hero-header h1{
    color:var(--brand-accent);
       font-size:2rem;
}
.hero-header h2{
    font-size:1.4rem;
}

@media (min-width: 768px) {
    .hero-header h1{
    font-size:42px;
}
.hero-header h2{
    font-size:2.1rem;
}
}
.site-content{

    display:flex;

    flex-direction:column !important;



}

/* Base Section Styling */

.section-highlights {

  color: var(--color-text-body, #3b352f);

  overflow: hidden;

  margin-top: 28px;

}



.viewport-content {

  max-width: 980px;

  margin: 0 auto;

  padding: 0 20px;

}



.section-header-headline {

  font-size: 56px;

  font-weight: 600;

  color: var(--color-text-heading, #2e2a27);

  margin-bottom: 40px;

}



/* "Blackout" Slide Fix

 * The parent wrapper hides the overflow.

*/

#media-card-gallery {

  overflow: visible;

  position: relative;

  margin-bottom: 24px; /* Space for the controls bubble */

  /* --- NEW: Initial state for the clip-path animation --- */

  opacity: 0; /* Start completely transparent */

  /* This creates a small, centered circle initially */

  clip-path: circle(0% at 50% 50%);

  /* Add a transition for browsers that don't support clip-path animation via JS,

     or as a fallback. GSAP will override this. */

  transition: opacity 1s ease-out, clip-path 1.5s cubic-bezier(0.25, 1, 0.5, 1);

}

/* This class will be added by JS to trigger the final state */

#media-card-gallery.is-revealed {

  opacity: 1;

  /* Expand to cover the entire element */

  clip-path: circle(150% at 50% 50%); /* 150% ensures it covers corners */

}

/* * The Swiper container itself *must* be visible 

 * to show the "peeking" previous/next slides.

*/

.highlights-swiper {

  width: 100%;



  height: 85vh;

  max-height: 600px;

  min-height: 400px;

  max-width: 1480px;

  margin: 0 auto;

  overflow: visible;



  direction: ltr !important;

}



.swiper-wrapper {

  align-items: start;

}



.swiper-slide {

  width: 88vw; /* Shows partial slides */

  max-width: 1040px;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  /* No opacity or scale changes for a seamless glide */

  /* *  Prevent "blackout" flicker during drag

* This forces the slide onto its own GPU layer. */

  transform: translateZ(0);

  backface-visibility: hidden;

}



.swiper-slide .card {

  background: var(--color-card-bg);

  border-radius: 24px;

  height: 100%;

  width: 100%;

  position: relative;

  overflow: hidden;

}



/* Gradient Overlay for text readability */

.swiper-slide .card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 50%;

  background: linear-gradient(

    180deg,

    rgba(0, 0, 0, 0.6) 0%,

    rgba(0, 0, 0, 0) 100%

  );

  z-index: 2; /* Sits ON TOP of media */

  pointer-events: none;

}



/* Caption (Right-Aligned) */

.caption-container {

  position: absolute;

  top: 24px;

  right: 40px;

  left: auto;

  z-index: 3; /* Sits ON TOP of gradient */

  text-align: right !important;

  direction: rtl !important;

  width: 100%;

}



.caption-title {

  font-size: 32px;

  font-weight: 600;

  max-width: 500px;

  line-height: 1.2;

  color: #fff;

  margin-left: auto;

  margin-right: 0;



  /* GSAP Default State: Hidden */

  opacity: 0;

  transform: translateY(20px);

}

.caption {

  font-size: 24px;

  color: var(--bg-primary);

  padding-top: 2px;

  font-weight: 500;

  margin: 0 !important;

  opacity: 0;

  transform: translateY(20px);

  text-align: right !important;

  width: 80% !important;

  line-height: 1.2;

}

.caption-link {

  font-weight: 400;

  text-decoration: none;

  margin-top: 12px;

  display: inline-block;

  margin-left: auto;

  margin-right: 0;



  /* GSAP Default State: Hidden */

  opacity: 0;

  transform: translateY(20px);



  background: var(--color-badge-accent);

  border-radius: 20px;

  padding: 6px 18px;

  color: white;

  font-size: 19px;

  margin-top: 19px;

}

.caption-link:hover {

  text-decoration: none;

}



/* Media (Image) Container */

.media-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; /* Image fills the entire card */

  z-index: 1; /* Sits at the BOTTOM */

}



.media-container img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 50%;

}



/* Responsive */

@media (max-width: 768px) {

  .section-header-headline {

    font-size: 40px;

  }

  .caption-container {

    top: 0px;

    right: 24px;

  }

  .highlights-swiper {

    height: 65vh;

    max-height: 400px;

  }

  .highlights-swiper .swiper-slide {
display:flex;
flex-direction:column;
    width: 80% !important;

  }

  .caption {

    font-size: 16px;

    max-width: 80%;

  }

  .caption-title {

    font-size: 20px;

    max-width: 70%;

  }

  .caption-link {

    font-size: 18px;

  }

}

/* --- SECTION STYLING --- */
.section-horizontal-products {
    padding-top: 100px;
    padding-bottom: 80px;
}

.products-header-container {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 0 20px; /* Add horizontal padding for smaller screens */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align title and button at the bottom */
}

.section-title-large {
    font-size: clamp(1.7rem, 4vw, 2rem); /* Responsive title size */
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.view-all-btn {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #444;
    transition: color 0.3s;
}
.view-all-btn:hover {
    color: #000;
}


/* --- SWIPER / SCROLL CONTAINER --- */
.products-swiper-container {
    padding:10px 20px;
    overflow: hidden; /* Important for the horizontal scroll */
}

/* Ensure the Swiper itself fills the space */
.products-swiper {
    width: 100%;
    /* Add extra padding on the left to show the first slide nicely */
    padding-left: 20px; 
}

/* Tablet/Desktop adjustment for padding */
@media (min-width: 768px) {
    .products-swiper {
        padding-left: 50px;
    }
}

/* Slides are set to 'auto' width to control their size */
.product-slide {
    width: 280px; /* Fixed width for the slides on desktop */
    height: fit-content; /* Fixed height for consistent cards */

    flex-shrink: 0; /* Important for horizontal scrolling */
    transition: opacity 0.3s;
    display:flex;
    flex-direction:column;
}

/* --- CARD DESIGN (Matching products.jpg) --- */
.product-card {
    display: block;
    width: 100%;
    height: 100%;
    min-height:380px;
    max-height:400px;
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Large rounded corners */
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card-arrow{
    min-width: 30px;
    background: #f7b66d3d;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    height: auto;
    aspect-ratio: 1;
}

.product-slide:hover .card-arrow svg {
    transform: rotate(-45deg);
}
/* New Image Wrapper (Replaces .card-bg) */
.card-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Necessary to contain the scaled image on hover */
}

/* The actual <img> tag styling */
.product-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CRITICAL: This mimics background-size: cover */
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: brightness(0.9); /* Replaces the dark filter */
}

/* Apply the hover effect directly to the <img> tag */
.product-card:hover .product-featured-img {
    transform: scale(1.03); 
}

/* Overlay for Text at the Bottom */
.card-overlay {

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;


        gap: 6px;
    padding: 14px 8px;

}
.card-overlay h3{
    color:var(--brand-primary);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-arrow svg {
    width: 18px;
    height: 18px;
    color: #f5a45d;
    transform: none; /* To make it point diagonally up-right */
    transition: transform 0.3s ease;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .product-slide {
        width: 250px; 
        height: fit-content;
  
    }
    .product-card{
        height:auto;
              aspect-ratio:280/400;
              min-height:0;
    }
    .products-header-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .section-title-large {
        margin-bottom: 10px;
    }
    .products-swiper {
        padding-left: 20px;
    }
}
/* --- Section Container --- */
.section-featured-blogs {
    padding: 80px 20px 119px 20px;
    background-color: #f8f9fa; /* Light grey background to make white cards pop */
}

/* --- Centered Header --- */
.section-header-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

.section-heading-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #111;
    group: transition;
}

.section-heading-link h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.section-heading-link .link-arrow {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    transition: transform 0.3s ease, color 0.3s ease;
}

.section-heading-link:hover .link-arrow {
    color: #000;
    transform: translateY(5px); /* Subtle nudge down on hover */
}

/* --- The Grid Layout --- */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 col */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Desktop: 2 columns */
@media (min-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Card Design --- */
.bento-card {
    background: #fff;
    border-radius: 24px; /* Matches the rounded look in your image */
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 270px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.04);
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Content Side */
.bento-content {
    flex: 1;
    padding: 30px; /* Generous padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%; /* Text takes slightly more space */
}

.bento-cat-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 2px;
    font-weight: 600;
}

.bento-title {
    margin: 0 0 15px 0;
}

.bento-title a {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    color: #222;
    text-decoration: none;
    transition: color 0.2s;
}

.bento-title a:hover {
    color: #555;
}

.bento-excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: auto; /* Pushes button to bottom */
}

.bento-read-more {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}


/* Image Side */
.bento-image {
    width: 50%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    display: block;
}

.bento-card:hover .bento-image {
    transform: scale(1.05); /* Subtle zoom effect */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
    .bento-card {
        flex-direction: column-reverse; /* Image on top, Text bottom */
        min-height: auto;
    }

    .bento-image {
        width: 100%;
        height: 200px;
    }

    .bento-content {
        width: 100%;
        padding: 25px;
    }
    
    .section-heading-link h2 {
        font-size: 1.8rem;
    }
}










/* --- Section & Header Styling --- */
.section-product-grid {
    padding: 60px 20px;
  
}

.product-grid-header {
    max-width: 1200px;
    margin: 0 auto 30px;
    text-align: center;
}

.grid-section-heading {
    display: inline-block;
    text-decoration: none;
    color: #111;
}

.grid-section-heading h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.view-more-text {
    display: block;
    font-size: 0.9rem;
    color: #666;
    transition: color 0.3s;
}

.grid-section-heading:hover .view-more-text {
    color: #000;
}

/* --- GRID LAYOUT --- */
.product-grid-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    
    /* Mobile: 2 columns */
    grid-template-columns: repeat(1, 1fr);
}

/* Desktop: 4 columns in one row */
@media (min-width: 420px) {
    .product-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Desktop: 4 columns in one row */
@media (min-width: 600px) {
    .product-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Desktop: 4 columns in one row */
@media (min-width: 900px) {
    .product-image-container{
        height:350px;
    }
    .product-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- CARD DESIGN --- */
.product-grid-card {
    background-color: #fff; /* White background as requested */
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.product-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: #111;
}

/* --- IMAGE HANDLING (The Key Feature) --- */
.product-image-container {
    height:200px; /* Define a fixed height for the image area */
    display: flex;
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
    padding: 12px;
    overflow: hidden;
}

.contained-product-img {
    width: 100%;
    height: 100%;
    /* CRITICAL: Ensures the whole image is visible (like the bottle) */
    object-fit: contain; 
    transition: transform 0.3s ease;
}

.product-grid-card:hover .contained-product-img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* --- INFO/TEXT STYLING --- */
.product-info {
    padding: 15px;
    text-align: center;

justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
    color:var(--brand-primary);
}

.product-cta {
    display: block;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    background: var(--brand-accent);
    border-radius: 27px;
    padding: 8px;
    margin-top: 17px;
}