/* =====================================
   HERO
===================================== */

.hero{

  position:relative;

  overflow:hidden;

  padding:90px 0 120px;

  background:linear-gradient(
      180deg,
      #ffffff 0%,
      #faf8f4 100%);

}

.hero-content{

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:80px;


}

/* ===========================
   Hero Badge
=========================== */

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:10px 18px;

  margin-bottom:28px;

  border-radius:999px;

  background:rgba(174,145,85,.10);

  color:var(--accent);

  font-weight:600;

}

.badge-dot{

  width:8px;

  height:8px;

  border-radius:50%;

  background:var(--accent);

}

.hero-title{

  font-size:56px;

  font-weight:700;

  line-height:1.15;

}

.hero-description{

  max-width:520px;

  margin-bottom:42px;

  color:var(--text-secondary);

  font-size:18px;

  line-height:2;

}

.hero-actions{

  display:flex;

  gap:20px;

}

.hero-actions .btn{

  width:auto;

  min-width:190px;

}

.hero-image img{

  width:100%;

  display:block;

  border-radius:32px;

  border:8px solid #ffffff;

  box-shadow:
      0 30px 60px rgba(0,0,0,.12),
      0 8px 20px rgba(0,0,0,.06);

  transition:
      transform .5s ease,
      box-shadow .5s ease;

}
.hero-image{

  animation:imageFloat .9s ease-out;

}

@keyframes imageFloat{

  from{

      opacity:0;

      transform:translateX(-40px);

  }

  to{

      opacity:1;

      transform:translateX(0);

  }

}
.hero-image img:hover{

  transform:scale(1.02);

  box-shadow:

      0 35px 70px rgba(0,0,0,.16),

      0 10px 25px rgba(0,0,0,.08);

}
/* ===========================
   Hero Decoration
=========================== */


.hero-decoration{

  position:absolute;

  inset:0;

  pointer-events:none;

}

.circle{

  position:absolute;

  border-radius:50%;

  filter:blur(80px);

  opacity:.15;

  animation:float 12s ease-in-out infinite;

}

.circle-1{

  width:420px;

  height:420px;

  background:var(--accent);

  top:-120px;

  left:-120px;

}

.circle-2{

  width:520px;

  height:520px;

  background:var(--primary);

  bottom:-220px;

  right:-180px;

}
@keyframes float{

  0%{
      transform:translateY(0);
  }

  50%{
      transform:translateY(-20px);
  }

  100%{
      transform:translateY(0);
  }

}
.hero-badge,
.hero-title,
.hero-description,
.hero-actions{

    opacity:0;

    transform:translateY(30px);

    animation:fadeUp .8s ease forwards;

}

.hero-title{

    animation-delay:.2s;

}

.hero-description{

    animation-delay:.4s;

}

.hero-actions{

    animation-delay:.6s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================
   FEATURED
===================================== */

.featured{

  padding:120px 0;

}
.featured-grid{

  display:grid;

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

  gap:32px;

  margin-top:32px;

  align-items:stretch;

}

.section-heading{

  text-align:center;

  max-width:650px;

  margin:0 auto 64px;

}

.section-badge{

  display:inline-block;

  padding:8px 18px;

  border-radius:999px;

  background:rgba(174,145,85,.10);

  color:var(--accent);

  font-weight:600;

  margin-bottom:20px;

}

.section-heading h2{

  font-size:42px;

  margin-bottom:18px;

}

.section-heading p{

  color:var(--text-secondary);

  line-height:2;

}
/* =====================================
   CATEGORIES
===================================== */

.categories{

  padding:120px 0;

}
.categories-grid{

  margin-top:60px;

  display:grid;

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

  gap:32px;

  align-items:stretch;

}
.category-card{

  position:relative;

  overflow:hidden;

  border-radius:28px;

  cursor:pointer;

  aspect-ratio:3 / 4;

  background:var(--background);

  transition:
        transform .35s ease,
        box-shadow .35s ease;
  
  overflow: hidden;
}
.category-link{

  color:#fff;

  transition:.35s;

}
.category-card:hover{

  transform: translateY(-10px);


  box-shadow:
        0 25px 60px rgba(0,0,0,.18);

}

.category-card img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .6s ease;

}
.category-card:hover img{

  transform:scale(1.08);

}
.category-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:36px;

}
.category-overlay h3{

  font-size:34px;

  color:#fff;

  margin-bottom:10px;

}

.category-overlay p{

  color:rgba(255,255,255,.88);

  margin-bottom:22px;

  line-height:1.8;

}

.category-overlay::before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(

      to top,

      rgba(0,0,0,.78),

      rgba(0,0,0,.15),

      transparent

  );

  z-index:-1;

}
.category-card:hover .category-link{

  color:var(--accent);

  letter-spacing:.6px;

  padding-right:8px;

}
/* =====================================
   BEST-SELLERS
===================================== */
.best-sellers{

  padding:120px 0;

}

.bestSellerSwiper{

  margin-top:60px;

  padding-bottom:60px;

}

.swiper-slide{

  height:auto;

}

.swiper-pagination{

  margin-top:20px;

}

/* =====================================
   BRAND STORY
===================================== */

.brand-story {

  padding: 120px 0;

  background: var(--background);

}

.brand-story-grid {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 64px;

  align-items: center;

}

.brand-story-image img {

  width: 100%;

  border-radius: var(--radius-xl);

  display: block;

}

.brand-story-text h2 {

  font-size: 34px;

  margin-block: var(--space-4) var(--space-5);

  line-height: 1.4;

}

.brand-story-text p {

  color: var(--text-secondary);

  line-height: 2;

  margin-bottom: var(--space-7);

}

/* =====================================
   INSTAGRAM CTA
===================================== */

.instagram-cta {

  padding: 90px 0;

  background: var(--primary);

}

.instagram-cta-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-7);

  flex-wrap: wrap;

}

.instagram-cta h2 {

  color: var(--surface);

  font-size: 30px;

  margin-block: var(--space-3) var(--space-2);

}

.instagram-cta p {

  color: rgba(255, 255, 255, .75);

}

.instagram-cta .section-badge {

  background: rgba(255, 255, 255, .12);

  color: var(--surface);

}

.instagram-cta .btn {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  width: auto;

  white-space: nowrap;

}

@media (max-width: 900px) {

  .brand-story-grid {

    grid-template-columns: 1fr;

  }

  .instagram-cta-inner {

    flex-direction: column;

    text-align: center;

  }

}