/*
 * La Boutique — Instagram Section
 * Loaded last so it wins over Smash Balloon plugin CSS.
 * All rules target .section-instagram to stay scoped.
 */

/* ── SECTION WRAPPER ─────────────────────────────────────────── */
.section-instagram {
  padding-top:    clamp(40px, 7vw, 72px) !important;
  padding-bottom: clamp(40px, 7vw, 72px) !important;
  background:     #ffffff !important;
  border-top:     1px solid #ece9e4 !important;
  width:          100% !important;
  box-sizing:     border-box !important;
}

/* ── INNER COLUMN (everything inside is centered) ───────────── */
.section-instagram__inner {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
  max-width:       860px !important;
  width:           100% !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  padding-left:    clamp(16px, 4vw, 32px) !important;
  padding-right:   clamp(16px, 4vw, 32px) !important;
  box-sizing:      border-box !important;
}

/* ── ICON ────────────────────────────────────────────────────── */
.section-instagram__icon-link {
  display:         inline-flex !important;
  align-self:      center !important;
  margin-bottom:   16px !important;
  transition:      transform 0.22s ease, opacity 0.22s ease !important;
}
.section-instagram__icon-link:hover {
  transform: scale(1.1) !important;
  opacity:   0.87 !important;
}

/* ── TITLE ───────────────────────────────────────────────────── */
.section-instagram__title {
  font-size:      clamp(1rem, 2.4vw, 1.32rem) !important;
  font-weight:    300 !important;
  letter-spacing: 0.08em !important;
  color:          #1a1a1a !important;
  margin:         0 0 6px 0 !important;
  text-align:     center !important;
}

/* ── HANDLE ──────────────────────────────────────────────────── */
.section-instagram__handle {
  display:        inline-block !important;
  font-size:      0.83rem !important;
  font-weight:    400 !important;
  letter-spacing: 0.1em !important;
  color:          #999 !important;
  text-decoration:none !important;
  margin-bottom:  clamp(28px, 4.5vw, 44px) !important;
  transition:     color 0.18s !important;
}
.section-instagram__handle:hover { color: #d6249f !important; }

/* ── FEED WRAPPER ────────────────────────────────────────────── */
.section-instagram__feed {
  width:          100% !important;
  max-width:      100% !important;
  margin-bottom:  clamp(28px, 4.5vw, 44px) !important;
  box-sizing:     border-box !important;
}

/* Force Smash Balloon's root containers to full width, no float, no margin tricks */
.section-instagram__feed #sb_instagram,
.section-instagram__feed .sbi_container,
.section-instagram__feed div[id^="sbi_"] {
  width:     100% !important;
  max-width: 100% !important;
  float:     none !important;
  margin:    0 !important;
  padding:   0 !important;
}

/* Hide all plugin chrome */
.section-instagram__feed .sbi_header,
.section-instagram__feed #sbi_header,
.section-instagram__feed .sbi_header_text,
.section-instagram__feed .sbi_follow_btn,
.section-instagram__feed #sbi_follow_btn,
.section-instagram__feed .sbi_load_btn_text,
.section-instagram__feed .sbi_load_btn,
.section-instagram__feed #sbi_load,
.section-instagram__feed .sb_instagram_header,
.section-instagram__feed .sbi-load-more-btn-wrap {
  display: none !important;
}

/* ── PHOTO GRID ──────────────────────────────────────────────── */
.section-instagram__feed #sbi_images {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   8px !important;
  padding:               0 !important;
  margin:                0 !important;
  width:                 100% !important;
  float:                 none !important;
}

/* Each cell */
.section-instagram__feed .sbi_item {
  float:   none !important;
  width:   auto !important;
  padding: 0 !important;
  margin:  0 !important;
}

/* Photo container — rounded */
.section-instagram__feed .sbi_photo_wrap {
  display:       block !important;
  border-radius: 10px !important;
  overflow:      hidden !important;
  position:      relative !important;
  transition:    transform 0.26s ease, box-shadow 0.26s ease !important;
}
.section-instagram__feed .sbi_photo_wrap:hover {
  transform:  scale(1.035) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14) !important;
  z-index:    1 !important;
}

/* Image fills cell perfectly */
.section-instagram__feed .sbi_photo_wrap img,
.section-instagram__feed .sbi_photo img {
  display:    block !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* ── FALLBACK TEXT ───────────────────────────────────────────── */
.section-instagram__fallback-text {
  font-size:    clamp(0.86rem, 1.8vw, 0.98rem) !important;
  color:        #999 !important;
  font-weight:  300 !important;
  max-width:    340px !important;
  line-height:  1.9 !important;
  text-align:   center !important;
  margin-bottom:clamp(20px, 4vw, 36px) !important;
}

/* ── CTA BUTTON ──────────────────────────────────────────────── */
.section-instagram__cta {
  display:        inline-flex !important;
  align-items:    center !important;
  padding:        12px 36px !important;
  border-radius:  50px !important;
  background:     linear-gradient(120deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  color:          #fff !important;
  font-size:      0.82rem !important;
  font-weight:    400 !important;
  letter-spacing: 0.12em !important;
  text-decoration:none !important;
  box-shadow:     0 3px 16px rgba(200,36,120,0.28) !important;
  transition:     opacity 0.2s, transform 0.2s !important;
  border:         none !important;
}
.section-instagram__cta:hover {
  opacity:   0.87 !important;
  transform: translateY(-2px) !important;
  color:     #fff !important;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.section-instagram.reveal {
  opacity:    0 !important;
  transform:  translateY(22px) !important;
  transition: opacity 0.65s ease, transform 0.65s ease !important;
}
.section-instagram.in-view {
  opacity:   1 !important;
  transform: none !important;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .section-instagram__feed #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }
}