/* ================= SHOP THE OCCASION ================= */
.shop-occasion{
  background:#fbf0dd;
  padding:70px 20px;
}

.shop-title{
  text-align:center;
  font-size:34px;
  letter-spacing:4px;
  margin-bottom:30px;
}

/* ================= TABS ================= */
.shop-tabs{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-bottom:30px;
}

.tab-btn{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

.tab-btn.active{
  border-bottom:3px solid #e25b2a;
  font-weight:600;
}

/* ================= WRAP ================= */
.occasion-wrap{
  display:none;
}
.occasion-wrap.active{
  display:block;
}

/* ================= SWIPE VIEWPORT ================= */
.occasion-swipe{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;

  /* 🔥 THIS IS THE KEY FIX */
  max-width:620px;        /* one page visible */
  margin:0 auto;          /* center on PC */
}

.occasion-swipe::-webkit-scrollbar{
  display:none;
}

/* ================= PAGE (2x2 GRID) ================= */
.occasion-page{
  flex:0 0 100%;          /* 🔥 ONE PAGE = ONE VIEW */
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  scroll-snap-align:start;
}

/* ================= CARD ================= */
.occasion-card{
  position:relative;
  height:260px;
  background:#fbf0dd;
  text-decoration:none;
}

.occasion-card img{
  width:100%;
  height:100%;
  object-fit:contain;     /* 🔥 NO CROP */
  background:#fbf0dd;
}

.occasion-card span{
  position:absolute;
  bottom:14px;
  left:0;
  right:0;
  text-align:center;
  color:#fff;
  font-size:18px;
  text-shadow:0 4px 10px rgba(0,0,0,.6);
}

/* ================= ARROW (BOTTOM) ================= */
.occasion-nav{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:20px;
}

.nav-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:#fff;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:.25s ease;
}

.nav-btn:hover{
  background:#e25b2a;
  color:#fff;
  transform:scale(1.1);
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .occasion-swipe{
    max-width:100%;
  }

  .occasion-card{
    height:220px;
  }
}