/** Shopify CDN: Minification failed

Line 2081:0 Unexpected "("

**/
/* ==========================================================
   SMART LIFESTYLE COMBOS
   CSS PART 1 — FOUNDATION
   ========================================================== */

:root{
  --slc-bg:#f8f8f6;
  --slc-surface:#ffffff;

  --slc-text:#1f1f1f;
  --slc-text-light:#6d6d6d;

  --slc-border:#e8e6e1;

  --slc-accent:#111111;

  --slc-radius:20px;

  --slc-shadow:
    0 2px 10px rgba(0,0,0,.04),
    0 10px 30px rgba(0,0,0,.05);

  --slc-transition:.35s ease;

  --slc-max-width:1400px;
}


/* ==========================================================
   SECTION
   ========================================================== */

.slc-section{

  background:var(--slc-bg);

  padding:72px 0;

  position:relative;

  overflow:hidden;

}


.slc-section .page-width{

  max-width:var(--slc-max-width);

}


/* ==========================================================
   HEADER
   ========================================================== */

.slc-header{

  margin-bottom:42px;

  text-align:center;

}


.slc-heading{

  margin:0;

  color:var(--slc-text);

  font-size:42px;

  font-weight:700;

  line-height:1.15;

  letter-spacing:-0.03em;

}


.slc-subheading{

  margin-top:16px;

  max-width:760px;

  margin-left:auto;

  margin-right:auto;

  color:var(--slc-text-light);

  font-size:17px;

  line-height:1.7;

}


/* ==========================================================
   CAROUSEL
   ========================================================== */

.slc-track{

  display:flex;

  gap:28px;

  overflow-x:auto;

  overflow-y:hidden;

  scroll-snap-type:x mandatory;

  scroll-behavior:smooth;

  padding-bottom:10px;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;

}


.slc-track::-webkit-scrollbar{

  display:none;

}


/* ==========================================================
   CARD
   ========================================================== */

.slc-card{

  flex:0 0 380px;

  background:var(--slc-surface);

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

  overflow:hidden;

  border:1px solid var(--slc-border);

  box-shadow:var(--slc-shadow);

  scroll-snap-align:start;

  transition:all var(--slc-transition);

  position:relative;

}


/* ==========================================================
   IMAGE
   ========================================================== */

.slc-card__media{

  position:relative;

  overflow:hidden;

  aspect-ratio:4/3;

  background:#f1f1f1;

}


.slc-cover{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .8s ease;

}


/* ==========================================================
   CONTENT
   ========================================================== */

.slc-card__content{

  padding:28px;

}


/* ==========================================================
   DESKTOP HOVER
   ========================================================== */

@media (hover:hover){

  .slc-card:hover{

    transform:translateY(-8px);

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

  }

  .slc-card:hover .slc-cover{

    transform:scale(1.05);

  }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:990px){

  .slc-section{

    padding:56px 0;

  }

  .slc-heading{

    font-size:34px;

  }

  .slc-card{

    flex:0 0 330px;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:749px){

  .slc-section{

    padding:42px 0;

  }

  .slc-header{

    margin-bottom:28px;

  }

  .slc-heading{

    font-size:28px;

  }

  .slc-subheading{

    font-size:15px;

  }

  .slc-track{

    gap:18px;

    padding-left:16px;

    padding-right:16px;

  }

  .slc-card{

    flex:0 0 86%;

  }

  .slc-card__content{

    padding:22px;

  }

}

/* ==========================================================
   SMART LIFESTYLE COMBOS
   CSS PART 2 — CARD CONTENT
   ========================================================== */


/* ==========================
   BADGE
========================== */

.slc-badge{

  position:absolute;

  top:18px;

  left:18px;

  z-index:2;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:#111;

  color:#fff;

  font-size:12px;

  font-weight:600;

  letter-spacing:.03em;

  line-height:1;

}


/* ==========================
   TITLE
========================== */

.slc-title{

  margin:0;

  color:var(--slc-text);

  font-size:24px;

  font-weight:700;

  line-height:1.3;

  letter-spacing:-.02em;

}


/* ==========================
   DESCRIPTION
========================== */

.slc-description{

  margin:12px 0 24px;

  color:var(--slc-text-light);

  font-size:15px;

  line-height:1.7;

}


/* ==========================
   PRODUCT LIST
========================== */

.slc-products{

  margin:0;

  padding:0;

  list-style:none;

}


.slc-products li{

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 0;

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

  color:var(--slc-text);

  font-size:15px;

  line-height:1.5;

}


.slc-products li:last-child{

  border-bottom:none;

}


/* Tick */

.slc-products li::before{

  content:"";

  width:8px;

  height:8px;

  border-radius:50%;

  background:#111;

  flex-shrink:0;

}


/* ==========================
   PRICE BLOCK
========================== */

.slc-price{

  display:flex;

  align-items:flex-end;

  gap:12px;

  margin-top:28px;

}


.slc-price--compare{

  color:#999;

  font-size:16px;

  text-decoration:line-through;

}


.slc-price--sale{

  color:#111;

  font-size:28px;

  font-weight:700;

  line-height:1;

}


/* ==========================
   SAVINGS
========================== */

.slc-saving{

  display:inline-flex;

  align-items:center;

  margin-top:12px;

  padding:7px 12px;

  border-radius:999px;

  background:#eef7ee;

  color:#207227;

  font-size:13px;

  font-weight:600;

}


/* ==========================
   BUTTON WRAPPER
========================== */

.slc-actions{

  display:flex;

  gap:12px;

  margin-top:30px;

}


/* ==========================
   BUTTON BASE
========================== */

.slc-btn{

  flex:1;

  display:inline-flex;

  justify-content:center;

  align-items:center;

  min-height:48px;

  border-radius:12px;

  cursor:pointer;

  font-size:15px;

  font-weight:600;

  transition:.3s ease;

  text-decoration:none;

}


/* Primary */

.slc-btn--primary{

  background:#111;

  color:#fff;

  border:none;

}


.slc-btn--primary:hover{

  background:#000;

}


/* Secondary */

.slc-btn--secondary{

  background:#fff;

  color:#111;

  border:1px solid #dcdcdc;

}


.slc-btn--secondary:hover{

  border-color:#111;

}


/* ==========================
   MOBILE
========================== */

@media(max-width:749px){

  .slc-title{

    font-size:22px;

  }

  .slc-description{

    font-size:14px;

  }

  .slc-price--sale{

    font-size:24px;

  }

  .slc-actions{

    flex-direction:column;

  }

  .slc-btn{

    width:100%;

  }

}

/* ==========================================================
   SMART LIFESTYLE COMBOS
   CSS PART 3 — POLISH & INTERACTIONS
   ========================================================== */


/* ==========================
   IMAGE OVERLAY
========================== */

.slc-card__media::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(
      to top,
      rgba(0,0,0,.18),
      rgba(0,0,0,0) 45%
  );

  pointer-events:none;

}


/* ==========================
   IMAGE LOADING
========================== */

.slc-cover{

  backface-visibility:hidden;

  will-change:transform;

}


/* ==========================
   CARD BORDER ANIMATION
========================== */

.slc-card{

  isolation:isolate;

}

.slc-card::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  padding:1px;

  background:linear-gradient(
      135deg,
      rgba(255,255,255,.9),
      rgba(0,0,0,.06)
  );

  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

          mask-composite:exclude;

  opacity:0;

  transition:.35s ease;

  pointer-events:none;

}

.slc-card:hover::before{

  opacity:1;

}


/* ==========================
   BUTTON EFFECTS
========================== */

.slc-btn{

  position:relative;

  overflow:hidden;

}

.slc-btn::after{

  content:"";

  position:absolute;

  inset:0;

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

  transform:translateX(-100%);

  transition:.5s ease;

}

.slc-btn:hover::after{

  transform:translateX(0);

}


/* ==========================
   ACTIVE STATE
========================== */

.slc-btn:active{

  transform:scale(.98);

}


/* ==========================
   FOCUS ACCESSIBILITY
========================== */

.slc-btn:focus-visible,
.slc-card:focus-within{

  outline:2px solid #111;

  outline-offset:3px;

}


/* ==========================
   SMOOTH REPAINT
========================== */

.slc-card,
.slc-cover,
.slc-btn{

  transform:translateZ(0);

}


/* ==========================
   SCROLL PADDING
========================== */

.slc-track{

  scroll-padding-left:24px;

}


/* ==========================
   DESKTOP SPACING
========================== */

@media(min-width:1200px){

  .slc-track{

    gap:34px;

  }

}


/* ==========================
   MOBILE TOUCH
========================== */

@media(max-width:749px){

  .slc-track{

    scroll-padding-left:16px;

    scroll-snap-type:x mandatory;

  }

  .slc-card{

    border-radius:18px;

  }

}


/* ==========================
   REDUCED MOTION
========================== */

@media(prefers-reduced-motion:reduce){

  .slc-card,
  .slc-cover,
  .slc-btn,
  .slc-card::before{

    transition:none !important;

  }

}


/* ==========================
   HIDE EMPTY ELEMENTS
========================== */

.slc-description:empty,
.slc-saving:empty{

  display:none;

}


/* ==========================
   PRINT
========================== */

@media print{

  .slc-actions{

    display:none;

  }

}
.slc-toast{

position:fixed;

left:50%;

bottom:30px;

transform:translateX(-50%) translateY(30px);

background:#111;

color:#fff;

padding:14px 20px;

border-radius:12px;

font-size:14px;

font-weight:500;

z-index:99999;

opacity:0;

transition:.3s;

pointer-events:none;

}

.slc-toast.is-visible{

opacity:1;

transform:translateX(-50%) translateY(0);

}

.slc-toast.is-error{

background:#b42318;

}

/* ==========================================================
   SMART LIFESTYLE COMBOS
   CSS PART 4 — BUNDLE PREVIEW MODAL
   ========================================================== */

/* ==========================
   MODAL BASE
   ========================== */

.slc-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.slc-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ==========================
   OVERLAY
   ========================== */

.slc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ==========================
   DIALOG
   ========================== */

.slc-modal__dialog {
  position: relative;
  z-index: 1;

  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 48px));

  overflow-y: auto;

  background: var(--slc-surface);
  border: 1px solid var(--slc-border);
  border-radius: 24px;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, .18),
    0 4px 16px rgba(0, 0, 0, .08);

  transform: translateY(20px) scale(.98);
  transition: transform .25s ease;
}

.slc-modal.is-open .slc-modal__dialog {
  transform: translateY(0) scale(1);
}


/* ==========================
   CLOSE BUTTON
   ========================== */

.slc-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;

  z-index: 3;

  width: 42px;
  height: 42px;

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

  padding: 0;

  border: 1px solid var(--slc-border);
  border-radius: 50%;

  background: rgba(255, 255, 255, .95);
  color: var(--slc-text);

  font-size: 26px;
  line-height: 1;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.slc-modal__close:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: rotate(90deg);
}

.slc-modal__close:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}


/* ==========================
   CONTENT
   ========================== */

.slc-modal__content {
  padding: 36px;
}


/* ==========================
   HEADER
   ========================== */

.slc-modal__header {
  padding-right: 54px;
  margin-bottom: 28px;
}

.slc-modal__badge {
  display: inline-flex;
  align-items: center;

  margin-bottom: 10px;
  padding: 7px 12px;

  border-radius: 999px;

  background: #111;
  color: #fff;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.slc-modal__title {
  margin: 0;

  color: var(--slc-text);

  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.slc-modal__description {
  margin: 10px 0 0;

  color: var(--slc-text-light);

  font-size: 15px;
  line-height: 1.6;
}


/* ==========================
   PRODUCT LIST
   ========================== */

.slc-modal__products {
  display: flex;
  flex-direction: column;

  border-top: 1px solid var(--slc-border);
  border-bottom: 1px solid var(--slc-border);
}

.slc-modal__product {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 16px 0;

  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.slc-modal__product:last-child {
  border-bottom: none;
}


/* ==========================
   PRODUCT IMAGE
   ========================== */

.slc-modal__product-image {
  display: block;

  width: 86px;
  height: 86px;

  flex: 0 0 86px;

  overflow: hidden;

  border-radius: 14px;

  background: #f4f4f2;
}

.slc-modal__product-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .3s ease;
}

.slc-modal__product-image:hover img {
  transform: scale(1.05);
}

.slc-modal__image-placeholder {
  width: 100%;
  height: 100%;

  background: #f1f1ef;
}


/* ==========================
   PRODUCT INFO
   ========================== */

.slc-modal__product-info {
  min-width: 0;
  flex: 1;
}

.slc-modal__product-title {
  display: block;

  color: var(--slc-text);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  text-decoration: none;
}

.slc-modal__product-title:hover {
  text-decoration: underline;
}

.slc-modal__product-price {
  margin-top: 7px;

  color: var(--slc-text-light);

  font-size: 14px;
  font-weight: 500;
}


/* ==========================
   SUMMARY
   ========================== */

.slc-modal__summary {
  padding-top: 22px;
}

.slc-modal__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: var(--slc-text);

  font-size: 15px;
  font-weight: 600;
}

.slc-modal__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.slc-modal__prices strong {
  color: var(--slc-text);

  font-size: 24px;
  font-weight: 700;
}

.slc-modal__compare-price {
  color: #999;

  font-size: 14px;
  text-decoration: line-through;
}

.slc-modal__saving {
  display: inline-flex;

  margin-top: 10px;
  padding: 7px 11px;

  border-radius: 999px;

  background: #eef7ee;
  color: #207227;

  font-size: 12px;
  font-weight: 600;
}


/* ==========================
   ADD ALL BUTTON
   ========================== */

.slc-modal__add-all {
  width: 100%;

  min-height: 52px;

  margin-top: 24px;
  padding: 14px 20px;

  border: none;
  border-radius: 13px;

  background: #111;
  color: #fff;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.slc-modal__add-all:hover {
  background: #000;
}

.slc-modal__add-all:active {
  transform: scale(.985);
}

.slc-modal__add-all:disabled {
  cursor: not-allowed;
  opacity: .6;
}


/* ==========================
   SPINNER
   ========================== */

.slc-spinner {
  display: inline-block;

  width: 15px;
  height: 15px;

  margin-right: 8px;

  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;

  border-radius: 50%;

  vertical-align: -3px;

  animation: slc-spin .7s linear infinite;
}

@keyframes slc-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ==========================
   BODY LOCK
   ========================== */

body.slc-modal-open {
  overflow: hidden;
}


/* ==========================
   MOBILE MODAL
   ========================== */

@media (max-width: 749px) {

  .slc-modal {
    align-items: flex-end;
    padding: 0;
  }

  .slc-modal__dialog {
    width: 100%;
    max-height: 90vh;

    border-radius: 24px 24px 0 0;

    transform: translateY(30px);
  }

  .slc-modal.is-open .slc-modal__dialog {
    transform: translateY(0);
  }

  .slc-modal__content {
    padding: 28px 20px 24px;
  }

  .slc-modal__header {
    padding-right: 48px;
    margin-bottom: 22px;
  }

  .slc-modal__title {
    font-size: 24px;
  }

  .slc-modal__description {
    font-size: 14px;
  }

  .slc-modal__close {
    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;

    font-size: 23px;
  }

  .slc-modal__product {
    gap: 14px;
    padding: 14px 0;
  }

  .slc-modal__product-image {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    border-radius: 11px;
  }

  .slc-modal__product-title {
    font-size: 14px;
  }

  .slc-modal__price-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .slc-modal__prices {
    width: 100%;
    justify-content: space-between;
  }

}


/* ==========================
   REDUCED MOTION
   ========================== */

@media (prefers-reduced-motion: reduce) {

  .slc-modal,
  .slc-modal__dialog,
  .slc-modal__close,
  .slc-modal__product-image img,
  .slc-modal__add-all {
    transition: none !important;
  }

  .slc-spinner {
    animation: none;
  }

}

/* =========================================================
   SMART BUNDLES — FINAL CAROUSEL FIX
   ========================================================= */

/*
   Remove the visual wrapper.
   Smart cards will behave like direct
   children of .slc-track.
*/
.slc-smart-generated {
  display: contents;
}


/*
   Desktop / Laptop
   Exactly 3 complete cards visible.
*/
.slc-track .slc-card--smart {
  flex: 0 0 calc((100% - 68px) / 3);
  width: calc((100% - 68px) / 3);
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  scroll-snap-align: start;
}


/*
   Images stay inside card.
*/
.slc-track .slc-card--smart img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


/*
   Large desktop
*/
@media (min-width: 1200px) {

  .slc-track .slc-card--smart {
    flex-basis: calc((100% - 68px) / 3);
    width: calc((100% - 68px) / 3);
  }

}


/*
   Tablet
*/
@media (min-width: 750px) and (max-width: 1199px) {

  .slc-track {
    gap: 20px;
  }

  .slc-track .slc-card--smart {
    /* 2 cards, only 1 gap between them (20px) — not 2 */
    flex: 0 0 calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
  }

}


/*
   Mobile
*/
@media (max-width: 749px) {

  .slc-track {
    gap: 16px;
  }

  .slc-track .slc-card--smart {
    flex: 0 0 88%;
    width: 88%;
    min-width: 88%;
  }

}

/* ==========================================================
   SMART LIFESTYLE COMBOS
   CSS PART 5 — SMART CARD (AUTO-GENERATED) STYLES
   ========================================================== */

/* Smart cards have no image block, so give content
   a bit more breathing room at the top */
.slc-card--smart .slc-card__content{
  padding-top:28px;
}

/* ==========================
   BADGE (inline, not overlay)
========================== */
.slc-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  padding:6px 12px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
}

/* ==========================
   TITLE
========================== */
.slc-card__title{
  margin:0;
  color:var(--slc-text);
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
}

/* ==========================
   DESCRIPTION
========================== */
.slc-card__description{
  margin:12px 0 20px;
  color:var(--slc-text-light);
  font-size:14px;
  line-height:1.6;

  /* keep to 2 lines max so cards stay same height */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==========================
   PRODUCT LIST (with images)
========================== */
.slc-card__products{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:24px;
}

.slc-product{
  display:flex;
  align-items:center;
  gap:12px;
}

.slc-product__image{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:10px;
  overflow:hidden;
  background:#f1f1ef;
}

.slc-product__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.slc-product__info{
  min-width:0;
  flex:1;
}

.slc-product__title{
  color:var(--slc-text);
  font-size:14px;
  font-weight:600;
  line-height:1.4;

  /* truncate long titles to one line */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.slc-product__price{
  margin-top:3px;
  color:var(--slc-text-light);
  font-size:13px;
  font-weight:500;
}

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

  .slc-card__title{
    font-size:22px;
  }

  .slc-product__image{
    flex:0 0 44px;
    width:44px;
    height:44px;
  }

}
/* =========================================================
   SahiCart — Complete the Look
   IKEA-inspired visual refinement
   Safe override layer — existing functionality untouched
   ========================================================= */

.slc-section {
  width: 100%;
  background: #ffffff;
  padding: 42px 0 48px;
}

.slc-section .page-width {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Header ---------- */

.slc-header {
  margin: 0 0 22px;
}

.slc-heading {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}

.slc-subheading {
  max-width: 620px;
  margin-top: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5F5E5A;
}


/* ---------- Card ---------- */

.slc-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

.slc-card:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

/* ---------- Lifestyle image ---------- */

.slc-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F5F5F2;
}

.slc-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.slc-card:hover .slc-cover {
  transform: scale(1.025);
}

/* ---------- Badge ---------- */

.slc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 9px;
  background: #ffffff;
  color: #1A1A1A;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Content ---------- */

.slc-card__content {
  padding: 16px 16px 17px;
  background: #ffffff;
}

.slc-title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #1A1A1A;
}

.slc-description {
  margin: 6px 0 13px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5F5E5A;
}

/* ---------- Included products ---------- */

.slc-products {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ECECEC;
}

.slc-products li {
  position: relative;
  padding: 7px 0 7px 14px;
  border-bottom: 1px solid #ECECEC;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #333333;
}

.slc-products li::before {
  content: "•";
  position: absolute;
  left: 1px;
  color: #0B6FB4;
}

/* ---------- Pricing ---------- */

.slc-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.slc-price--sale {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #1A1A1A;
}

.slc-price--compare {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #777777;
  text-decoration: line-through;
}

/* ---------- Savings ---------- */

.slc-saving {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #357A38;
}

/* ---------- Actions ---------- */

.slc-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.slc-btn {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.slc-btn:hover {
  opacity: 0.88;
}

/* Main CTA */
.slc-btn--primary {
  flex: 1;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
}

/* Add All */
.slc-btn--secondary {
  flex: 0 0 auto;
  background: #ffffff;
  color: #111111;
  border: 1px solid #111111;
}

/* ---------- Tablet ---------- */

@media (max-width: 989px) {
  .slc-section {
    padding: 36px 0 42px;
  }

  .slc-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .slc-heading {
    font-size: 25px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 749px) {
  .slc-section {
    padding: 32px 0 36px;
  }

  .slc-header {
    margin-bottom: 18px;
  }

  .slc-heading {
    font-size: 23px;
  }

  .slc-subheading {
    font-size: 13px;
    line-height: 1.45;
  }

  .slc-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 0 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .slc-track::-webkit-scrollbar {
    display: none;
  }

  .slc-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .slc-card__media {
    aspect-ratio: 4 / 3;
  }

  .slc-card__content {
    padding: 14px 14px 15px;
  }

  .slc-title {
    font-size: 16px;
  }

  .slc-description {
    font-size: 12px;
  }

  .slc-products li {
    font-size: 11.5px;
  }

  .slc-price--sale {
    font-size: 17px;
  }

  .slc-actions {
    margin-top: 13px;
  }

  .slc-btn {
    min-height: 44px;
    padding: 10px 12px;
  }
}
/* =========================================================
   Complete the Look — Desktop correction
   Mobile styling remains unchanged
   ========================================================= */

@media (min-width: 990px) {

  .slc-section {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .slc-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    align-items: stretch;
  }


  .slc-card__media {
    aspect-ratio: 4 / 3;
  }

  .slc-card__content {
    padding: 14px 15px 16px;
  }

  .slc-title {
    font-size: 16px;
  }

  .slc-description {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .slc-products {
    margin-bottom: 13px;
  }

  .slc-products li {
    font-size: 11.5px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .slc-price--sale {
    font-size: 17px;
  }

  .slc-actions {
    margin-top: 13px;
  }

}
/*
==========================================================
SMART LIFESTYLE COMBOS
Version 2.0
Functional Build
==========================================================
*/

(() => {
  "use strict";

  class SmartLifestyleCombos {

    constructor(section) {
      this.section = section;
      this.track = section.querySelector(".slc-track");
      this.mode = section.dataset.mode || "manual";
      this.activeCard = null;
      this.modalEscapeHandler = null;

      this.init();
    }


    /* ======================================================
       INITIALIZATION
       ====================================================== */

      init() {

          this.bindEvents();

          /*
          ======================================================
          SMART BUNDLING
          ======================================================
          */

          if (
              this.mode === "smart" ||
              this.mode === "manual_smart"
          ) {

              this.renderSmartBundles();

          }

      }

    /* ======================================================
       CARD EVENTS
       ====================================================== */

    bindEvents() {

      this.section.addEventListener("click", (event) => {

        const addAllBtn =
          event.target.closest(".slc-add-all");

        if (addAllBtn) {
          event.preventDefault();
          this.handleAddAll(addAllBtn);
          return;
        }


        const viewBtn =
          event.target.closest(".slc-btn--primary");

        if (viewBtn) {
          event.preventDefault();
          this.handleViewSetup(viewBtn);
        }

      });

    }


    /* ======================================================
       CARD HELPERS
       ====================================================== */

    getCard(element) {

      if (!element) return null;

      return element.closest(".slc-card");

    }


    getBundleData(card) {

    if (!card) return null;

    /*
    ======================================================
    PRIMARY SOURCE
    Bundle JSON — if available
    ======================================================
    */

    const dataElement =
        card.querySelector(".slc-bundle-data");

    if (dataElement) {

        try {

            const data =
                JSON.parse(
                    dataElement.textContent.trim()
                );

            let products =
                Array.isArray(data.products)
                    ? data.products
                    : [];


            /*
            Make sure every product has
            a valid variant_id.
            */

            const variantIds =
                (card.dataset.products || "")
                    .split(",")
                    .map(id => id.trim())
                    .filter(Boolean);


            products = products.map(
                (product, index) => {

                    if (
                        !product.variant_id &&
                        variantIds[index]
                    ) {

                        product.variant_id =
                            Number(
                                variantIds[index]
                            );

                    }

                    return product;

                }
            );


            return {

                id: data.id || "",

                title: data.title || "",

                description:
                    data.description || "",

                badge:
                    data.badge || "",

                total_price:
                    Number(
                        data.total_price || 0
                    ),

                compare_price:
                    Number(
                        data.compare_price || 0
                    ),

                mode:
                    card.dataset.mode ||
                    "manual",

                products

            };

        } catch (error) {

            console.warn(
                "Bundle JSON could not be read. Falling back to card data.",
                error
            );

        }

    }


    /*
    ======================================================
    FALLBACK SOURCE
    Existing data-products attribute
    ======================================================
    */

    const variantIds =
        (card.dataset.products || "")
            .split(",")
            .map(id => id.trim())
            .filter(Boolean);


    if (variantIds.length === 0) {

        console.error(
            "Smart Lifestyle Combos: No variant IDs found.",
            card
        );

        return null;

    }


    /*
    Build minimal product objects
    for Add All functionality.
    */

    const products =
        variantIds.map(id => ({

            variant_id:
                Number(id),

            available:
                true

        }));


    return {

        id:
            card.dataset.bundleId || "",

        title:
            card.dataset.bundleTitle || "",

        description:
            "",

        badge:
            "",

        total_price:
            0,

        compare_price:
            0,

        mode:
            card.dataset.mode || "manual",

        products

    };

}

getSmartProducts() {

    const dataElement =
        document.querySelector(
            '[id^="slc-smart-products-"]'
        );

    if (!dataElement) {

        console.warn(
            "Smart Lifestyle Combos: Smart product data not found."
        );

        return [];

    }

    try {

        const products =
            JSON.parse(
                dataElement.textContent.trim()
            );

        if (!Array.isArray(products)) {

            console.warn(
                "Smart Lifestyle Combos: Smart product data is not an array."
            );

            return [];

        }

        return products;

    } catch (error) {

        console.error(
            "Smart Lifestyle Combos: Unable to parse smart products.",
            error
        );

        return [];

    }

}

      generateSmartBundles() {

    const products = this.getSmartProducts();

    if (!products.length) {
        return [];
    }

    /*
    ======================================================
    SMART BUNDLE SETTINGS
    ======================================================
    */

    const productsPerBundle =
        Number(
            this.section.dataset.productsPerBundle
        ) || 4;

    const hideOutOfStock =
        this.section.dataset.hideOutOfStock !== "false";

    const prioritizeBestsellers =
        this.section.dataset.prioritizeBestsellers === "true";

    const prioritizeNew =
        this.section.dataset.prioritizeNew === "true";

    const preferredCollection =
        this.section.dataset.preferredCollection || "";

    const cardsToShow =
        Number(
            this.section.dataset.cardsToShow
        ) || 6;


    /*
    ======================================================
    FILTER PRODUCTS
    ======================================================
    */

    let availableProducts =
        products.filter(product => {

            if (
                hideOutOfStock &&
                product.available === false
            ) {
                return false;
            }

            return true;

        });


    if (preferredCollection) {

        availableProducts =
            availableProducts.filter(
                product =>
                    product.collection_handle ===
                    preferredCollection
            );

    }


    if (!availableProducts.length) {
        return [];
    }


    /*
    ======================================================
    SCORE PRODUCT
    ======================================================
    */

    const getProductScore = (product) => {

        let score = 0;


        /*
        Bestseller priority
        */

        if (prioritizeBestsellers) {

            const tags =
                Array.isArray(product.tags)
                    ? product.tags
                    : [];

            const tagText =
                tags
                    .join(" ")
                    .toLowerCase();

            if (
                tagText.includes("bestseller") ||
                tagText.includes("best-seller") ||
                tagText.includes("best seller")
            ) {
                score += 30;
            }

        }


        /*
        New arrival priority
        */

        if (prioritizeNew && product.created_at) {

            const createdTime =
                new Date(
                    product.created_at
                ).getTime();

            const daysSinceCreated =
                (
                    Date.now() -
                    createdTime
                ) /
                (
                    1000 *
                    60 *
                    60 *
                    24
                );

            if (
                daysSinceCreated <= 30
            ) {
                score += 20;
            }

        }


        return score;

    };


    /*
    ======================================================
    PRODUCT RELATION SCORE
    ======================================================
    */

    const getMatchScore =
        (productA, productB) => {

            let score = 0;


            /*
            Product type match
            */

            if (
                productA.type &&
                productB.type &&
                productA.type.toLowerCase() ===
                productB.type.toLowerCase()
            ) {
                score += 15;
            }


            /*
            Shared tags
            */

            const tagsA =
                Array.isArray(productA.tags)
                    ? productA.tags
                    : [];

            const tagsB =
                Array.isArray(productB.tags)
                    ? productB.tags
                    : [];


            const normalizedA =
                tagsA.map(tag =>
                    String(tag)
                        .trim()
                        .toLowerCase()
                );


            const normalizedB =
                tagsB.map(tag =>
                    String(tag)
                        .trim()
                        .toLowerCase()
                );


            normalizedA.forEach(tag => {

                if (
                    tag &&
                    normalizedB.includes(tag)
                ) {
                    score += 10;
                }

            });


            /*
            Vendor match
            */

            if (
                productA.vendor &&
                productB.vendor &&
                productA.vendor.toLowerCase() ===
                productB.vendor.toLowerCase()
            ) {
                score += 3;
            }


            return score;

        };


    /*
    ======================================================
    GROUP PRODUCTS BY COLLECTION
    ======================================================
    */

    const collectionGroups =
        new Map();


    availableProducts.forEach(product => {

        const collectionId =
            product.collection_id ||
            product.collection_handle ||
            product.collection_title;

        if (!collectionId) {
            return;
        }


        if (
            !collectionGroups.has(
                collectionId
            )
        ) {

            collectionGroups.set(
                collectionId,
                {
                    id:
                        product.collection_id ||
                        product.collection_handle,

                    handle:
                        product.collection_handle,

                    title:
                        product.collection_title ||
                        "Complete the Look",

                    products: []
                }
            );

        }


        collectionGroups
            .get(collectionId)
            .products
            .push(product);

    });


    /*
    ======================================================
    BUILD ONE SMART BUNDLE PER COLLECTION
    ======================================================
    */

    const bundles = [];


    collectionGroups.forEach(
        collection => {

            let collectionProducts =
                [...collection.products];


            /*
            Remove duplicate product IDs
            inside the same collection.
            */

            const uniqueProducts =
                new Map();

            collectionProducts.forEach(
                product => {

                    if (
                        !uniqueProducts.has(
                            product.id
                        )
                    ) {

                        uniqueProducts.set(
                            product.id,
                            product
                        );

                    }

                }
            );


            collectionProducts =
                Array.from(
                    uniqueProducts.values()
                );


            /*
            A bundle needs at least 2 products.
            */

            if (
                collectionProducts.length < 2
            ) {
                return;
            }


            /*
            Highest priority products first.
            */

            collectionProducts.sort(
                (a, b) =>
                    getProductScore(b) -
                    getProductScore(a)
            );


            /*
            Select the best base product.
            */

            const baseProduct =
                collectionProducts[0];


            /*
            Find the best related products
            FROM THE SAME COLLECTION.
            */

            const matches =
                collectionProducts
                    .filter(product =>
                        product.id !==
                        baseProduct.id
                    )
                    .map(product => ({

                        product,

                        score:
                            getMatchScore(
                                baseProduct,
                                product
                            ) +
                            getProductScore(
                                product
                            )

                    }))
                    .sort(
                        (a, b) =>
                            b.score -
                            a.score
                    );


            /*
            Create exactly ONE bundle
            for this collection.
            */

            const bundleProducts = [

                baseProduct,

                ...matches
                    .slice(
                        0,
                        Math.max(
                            0,
                            productsPerBundle - 1
                        )
                    )
                    .map(
                        match =>
                            match.product
                    )

            ];


            /*
            Minimum 2 products.
            */

            if (
                bundleProducts.length < 2
            ) {
                return;
            }


            /*
            Save collection bundle.
            */

            bundles.push({

                id:
                    `smart-${collection.id}`,

                title:
                    `${collection.title} Essentials`,

                description:
                    `Smart picks from ${collection.title}`,

                products:
                    bundleProducts,

                mode:
                    "smart",

                collection_id:
                    collection.id,

                collection_handle:
                    collection.handle,

                collection_title:
                    collection.title

            });

        }
    );

    return bundles.slice(0, cardsToShow);

}

renderSmartBundles() {

    if (!this.track) {
        return;
    }

    const bundles = this.generateSmartBundles();

    if (!bundles.length) {
        return;
    }

    /*
    Smart cards ko existing manual cards ke saath
    mix nahi karna.
    */

    

    bundles.forEach((bundle, index) => {

        const products =
            Array.isArray(bundle.products)
                ? bundle.products
                : [];

        if (!products.length) {
            return;
        }

        const totalPrice =
            products.reduce(
                (total, product) =>
                    total +
                    Number(product.price || 0),
                0
            );

        const comparePrice =
            products.reduce(
                (total, product) =>
                    total +
                    Number(
                        product.compare_at_price ||
                        product.price ||
                        0
                    ),
                0
            );

        const productTitles =
            products
                .map(product => product.title)
                .filter(Boolean)
                .join(", ");

        const productVariantIds =
            products
                .map(product =>
                    product.variant_id
                )
                .filter(Boolean)
                .join(",");

        const productListHTML =
            products
                .map(product => {

                    const image =
                        product.image
                            ? `
                                <img
                                    src="${this.escapeHTML(product.image)}"
                                    alt="${this.escapeHTML(product.title || "")}"
                                    loading="lazy"
                                >
                              `
                            : "";

                    return `
                        <div class="slc-product">
                            <div class="slc-product__image">
                                ${image}
                            </div>

                            <div class="slc-product__info">
                                <div class="slc-product__title">
                                    ${this.escapeHTML(
                                        product.title || ""
                                    )}
                                </div>

                                <div class="slc-product__price">
                                    ${this.formatMoney(
                                        Number(product.price || 0)
                                    )}
                                </div>
                            </div>
                        </div>
                    `;

                })
                .join("");

        const card =
            document.createElement("article");

        card.className =
            "slc-card slc-card--smart";

        card.dataset.mode =
            "smart";

        card.dataset.bundleId =
            bundle.id || `smart-${index}`;

        card.dataset.products =
            productVariantIds;

        card.innerHTML = `

            <div class="slc-card__content">

                <div class="slc-card__badge">
                    Smart Pick
                </div>

                <h3 class="slc-card__title">
                    ${this.escapeHTML(
                        bundle.title || "Complete the Look"
                    )}
                </h3>

                <p class="slc-card__description">
                    ${this.escapeHTML(
                        productTitles
                    )}
                </p>

                <div class="slc-card__products">
                    ${productListHTML}
                </div>

                <div class="slc-price">

                    ${
                        comparePrice > totalPrice
                            ? `
                                <span class="slc-price--compare">
                                    ${this.formatMoney(
                                        comparePrice
                                    )}
                                </span>
                              `
                            : ""
                    }

                    <span class="slc-price--sale">
                        ${this.formatMoney(
                            totalPrice
                        )}
                    </span>

                </div>

                <div class="slc-actions">

                    <button
                        class="slc-btn slc-btn--primary"
                        type="button"
                    >
                        View Setup
                    </button>

                    <button
                        class="slc-btn slc-btn--secondary slc-add-all"
                        type="button"
                    >
                        Add All
                    </button>

                </div>

            </div>

            <script
                type="application/json"
                class="slc-bundle-data"
            >
                ${JSON.stringify({
                    id:
                        bundle.id ||
                        `smart-${index}`,

                    title:
                        bundle.title || "Complete the Look",

                    description:
                        productTitles,

                    badge:
                        "Smart Pick",

                    total_price:
                        totalPrice,

                    compare_price:
                        comparePrice,

                    products:
                        products
                })}
            </script>
        `;

        this.track.appendChild(card);

    });

    
}

    /* ======================================================
       BUTTON LOADING
       ====================================================== */

    setLoading(button, loading = true) {

      if (!button) return;


      if (loading) {

        button.disabled = true;

        button.dataset.originalHTML =
          button.innerHTML;

        button.innerHTML = `
          <span class="slc-spinner"></span>
          Adding...
        `;

      } else {

        button.disabled = false;

        if (button.dataset.originalHTML) {

          button.innerHTML =
            button.dataset.originalHTML;

          delete button.dataset.originalHTML;

        }

      }

    }


    /* ======================================================
       ADD ALL TO CART
       ====================================================== */

    async handleAddAll(button) {

      const card =
        this.getCard(button);


      /*
      If button is inside modal,
      use the original active card.
      */

      const bundle =
        card
          ? this.getBundleData(card)
          : this.getBundleData(this.activeCard);


      if (!bundle || bundle.products.length === 0) {

        this.showError(
          "Bundle information is unavailable."
        );

        return;

      }


      this.setLoading(button, true);


      try {

        /*
        Remove duplicate variants.
        */

        const uniqueProducts =
          bundle.products.filter(
            (product, index, self) =>
              product &&
              product.variant_id &&
              index ===
                self.findIndex(
                  item =>
                    item.variant_id ===
                    product.variant_id
                )
          );


        if (uniqueProducts.length === 0) {

          throw new Error(
            "No valid products found."
          );

        }


        /*
        Check availability.
        */

        const unavailableProducts =
          uniqueProducts.filter(
            product =>
              product.available === false
          );


        if (unavailableProducts.length > 0) {

          this.showToast(
            "Some products are currently unavailable.",
            true
          );

          return;

        }


        /*
        Shopify cart items.
        */

        const items =
          uniqueProducts.map(
            product => ({

              id:
                Number(product.variant_id),

              quantity: 1

            })
          );


        const response =
  await fetch(
    "/cart/add.js",
    {

      method: "POST",

      headers: {
        "Content-Type":
          "application/json",

        "Accept":
          "application/json"
      },

      body:
  JSON.stringify({
    items,
    sections:
      "cart-drawer-section",
    sections_url:
      window.location.pathname
  })

    }
  );


        if (!response.ok) {

          throw new Error(
            "Unable to add bundle."
          );

        }


        const cart =
          await response.json();


        this.showSuccess(
          "Bundle added to cart"
        );

        this.closeBundleModal();

        /*
        Update cart drawer using data
        already returned by /cart/add.js —
        no second network request needed.
        */

        this.applyCartUpdate(cart);


      } catch (error) {

        console.error(
          "Smart Lifestyle Combos:",
          error
        );

        this.showError(
          "Something went wrong. Please try again."
        );


      } finally {

        this.setLoading(
          button,
          false
        );

      }

    }


    /* ======================================================
       VIEW SETUP
       ====================================================== */

    handleViewSetup(button) {

      const card =
        this.getCard(button);


      const bundle =
        this.getBundleData(card);


      if (!bundle || !bundle.products.length) {

        this.showError(
          "Bundle information is unavailable."
        );

        return;

      }


      /*
      Remember original card.
      */

      this.activeCard = card;


      /*
      Build product HTML.
      */

      const productsHTML =
        bundle.products
          .map(product => {

            const price =
              this.formatMoney(
                product.price
              );


            const image =
              product.image
                ? `
                  <img
                    src="${this.escapeHTML(product.image)}"
                    alt="${this.escapeHTML(product.title)}"
                    loading="lazy"
                  >
                `
                : `
                  <div class="slc-modal__image-placeholder"></div>
                `;


            return `

              <div class="slc-modal__product">

                <a
                  href="${this.escapeHTML(product.url || "#")}"
                  class="slc-modal__product-image"
                >
                  ${image}
                </a>


                <div class="slc-modal__product-info">

                  <a
                    href="${this.escapeHTML(product.url || "#")}"
                    class="slc-modal__product-title"
                  >
                    ${this.escapeHTML(product.title)}
                  </a>


                  <div class="slc-modal__product-price">
                    ${price}
                  </div>

                </div>

              </div>

            `;

          })
          .join("");


      /*
      Savings.
      */

      const savings =
        bundle.compare_price >
        bundle.total_price

          ? bundle.compare_price -
            bundle.total_price

          : 0;


      const comparePriceHTML =
        bundle.compare_price >
        bundle.total_price

          ? `
            <span class="slc-modal__compare-price">
              ${this.formatMoney(
                bundle.compare_price
              )}
            </span>
          `

          : "";


      const savingsHTML =
        savings > 0

          ? `
            <div class="slc-modal__saving">
              Save ${this.formatMoney(savings)}
            </div>
          `

          : "";


      /*
      Modal HTML.
      */

      const html = `

        <div class="slc-modal__header">

          ${
            bundle.badge
              ? `
                <span class="slc-modal__badge">
                  ${this.escapeHTML(
                    bundle.badge
                  )}
                </span>
              `
              : ""
          }


          <h2 class="slc-modal__title">
            ${this.escapeHTML(
              bundle.title
            )}
          </h2>


          ${
            bundle.description
              ? `
                <p class="slc-modal__description">
                  ${this.escapeHTML(
                    bundle.description
                  )}
                </p>
              `
              : ""
          }

        </div>


        <div class="slc-modal__products">

          ${productsHTML}

        </div>


        <div class="slc-modal__summary">

          <div class="slc-modal__price-row">

            <span>
              Bundle Total
            </span>


            <div class="slc-modal__prices">

              ${comparePriceHTML}

              <strong>
                ${this.formatMoney(
                  bundle.total_price
                )}
              </strong>

            </div>

          </div>


          ${savingsHTML}

        </div>


        ${
          bundle.products.length > 0

            ? `
              <button
                type="button"
                class="slc-modal__add-all slc-add-all"
              >
                Add All to Cart
              </button>
            `

            : ""
        }

      `;


      this.openBundleModal(html);

      this.bindModalEvents();

    }


    /* ======================================================
       ESCAPE HTML
       ====================================================== */

    escapeHTML(value) {

      const div =
        document.createElement("div");

      div.textContent =
        value || "";

      return div.innerHTML;

    }


    /* ======================================================
       TOAST
       ====================================================== */

    showToast(
      message,
      isError = false
    ) {

      const toast =
        document.createElement("div");


      toast.className =
        "slc-toast";


      if (isError) {

        toast.classList.add(
          "is-error"
        );

      }


      toast.textContent =
        message;


      document.body.appendChild(
        toast
      );


      requestAnimationFrame(() => {

        toast.classList.add(
          "is-visible"
        );

      });


      setTimeout(() => {

        toast.classList.remove(
          "is-visible"
        );


        setTimeout(() => {

          toast.remove();

        }, 300);

      }, 2500);

    }


    showError(message) {

      this.showToast(
        message,
        true
      );

    }


    showSuccess(message) {

      this.showToast(
        message
      );

    }


    /* ======================================================
       CART REFRESH
       ====================================================== */

    applyCartUpdate(cart) {

    try {

        /*
        ======================================================
        UPDATE CART DRAWER SECTION
        Using HTML already returned by /cart/add.js —
        no extra fetch needed.
        ======================================================
        */

        const drawerHTML =
            cart &&
            cart.sections &&
            cart.sections["cart-drawer-section"];


        if (drawerHTML) {

            const parser =
                new DOMParser();


            const documentFragment =
                parser.parseFromString(
                    drawerHTML,
                    "text/html"
                );


            const newDrawer =
                documentFragment.querySelector(
                    "#cart-drawer"
                );


            const currentDrawer =
                document.querySelector(
                    "#cart-drawer"
                );


            if (
                newDrawer &&
                currentDrawer
            ) {

                currentDrawer.replaceWith(
                    newDrawer
                );

            }

        }


        /*
        ======================================================
        CART UPDATED EVENT
        Reusing the cart object we already have.
        ======================================================
        */

        document.dispatchEvent(
            new CustomEvent(
                "cart:updated",
                {
                    detail:
                        cart
                }
            )
        );

        document.dispatchEvent(
            new CustomEvent(
               "cart:update",
              {
                  bubbles: true,
                  detail: {
                      cart: cart
                  }
              }
          )
      );

         /*
        ======================================================
        OPEN UPDATED HORIZON DRAWER
        ======================================================
        */

        requestAnimationFrame(() => {

            this.openCartDrawer();

        });


    } catch (error) {

        console.error(
            "Smart Lifestyle Combos: Cart update failed.",
            error
        );


        /*
        Fallback
        */

        this.openCartDrawer();

    }

}


    /* ======================================================
       MONEY
       ====================================================== */

    formatMoney(cents) {

      if (
        typeof Shopify !==
          "undefined" &&
        Shopify.formatMoney
      ) {

        return Shopify.formatMoney(
          cents
        );

      }


      return `₹${(
        cents / 100
      ).toFixed(2)}`;

    }


    /* ======================================================
       MODAL CREATE
       ====================================================== */

    createModal() {

      if (
        document.querySelector(
          ".slc-modal"
        )
      ) {

        return;

      }


      const modal =
        document.createElement("div");


      modal.className =
        "slc-modal";


      modal.setAttribute(
        "role",
        "dialog"
      );


      modal.setAttribute(
        "aria-modal",
        "true"
      );


      modal.setAttribute(
        "aria-label",
        "Bundle preview"
      );


      modal.innerHTML = `

        <div class="slc-modal__overlay"></div>


        <div class="slc-modal__dialog">

          <button
            type="button"
            class="slc-modal__close"
            aria-label="Close"
          >
            &times;
          </button>


          <div class="slc-modal__content"></div>

        </div>

      `;


      document.body.appendChild(
        modal
      );

    }


    /* ======================================================
       OPEN MODAL
       ====================================================== */

    openBundleModal(html) {

      this.createModal();


      const modal =
        document.querySelector(
          ".slc-modal"
        );


      if (!modal) return;


      const content =
        modal.querySelector(
          ".slc-modal__content"
        );


      if (!content) return;


      content.innerHTML =
        html;


      modal.classList.add(
        "is-open"
      );


      document.body.classList.add(
        "slc-modal-open"
      );


      const closeButton =
        modal.querySelector(
          ".slc-modal__close"
        );


      if (closeButton) {

        requestAnimationFrame(() => {

          closeButton.focus();

        });

      }

    }


    /* ======================================================
       MODAL EVENTS
       ====================================================== */

    bindModalEvents() {

      const modal =
        document.querySelector(
          ".slc-modal"
        );


      if (!modal) return;


      const closeButton =
        modal.querySelector(
          ".slc-modal__close"
        );


      const overlay =
        modal.querySelector(
          ".slc-modal__overlay"
        );


      const addAllButton =
        modal.querySelector(
          ".slc-modal__add-all"
        );


      /*
      Close button.
      */

      if (closeButton) {

        closeButton.onclick =
          () => {

            this.closeBundleModal();

          };

      }


      /*
      Overlay.
      */

      if (overlay) {

        overlay.onclick =
          () => {

            this.closeBundleModal();

          };

      }


      /*
      Modal Add All.
      */

      if (addAllButton) {

        addAllButton.onclick =
          async () => {

            await this.handleAddAll(
              addAllButton
            );

          };

      }


      /*
      Remove previous ESC listener.
      */

      if (
        this.modalEscapeHandler
      ) {

        document.removeEventListener(
          "keydown",
          this.modalEscapeHandler
        );

      }


      /*
      New ESC listener.
      */

      this.modalEscapeHandler =
        (event) => {

          if (
            event.key === "Escape"
          ) {

            this.closeBundleModal();

          }

        };


      document.addEventListener(
        "keydown",
        this.modalEscapeHandler
      );

    }


    /* ======================================================
       CLOSE MODAL
       ====================================================== */

    closeBundleModal() {

      const modal =
        document.querySelector(
          ".slc-modal"
        );


      if (!modal) return;


      modal.classList.remove(
        "is-open"
      );


      document.body.classList.remove(
        "slc-modal-open"
      );


      if (
        this.modalEscapeHandler
      ) {

        document.removeEventListener(
          "keydown",
          this.modalEscapeHandler
        );


        this.modalEscapeHandler =
          null;

      }


      /*
      Return focus to original
      View Setup button if possible.
      */

      if (this.activeCard) {

        const button =
          this.activeCard.querySelector(
            ".slc-btn--primary"
          );


        if (button) {

          requestAnimationFrame(() => {

            button.focus();

          });

        }

      }

    }


    /* 
    ======================================================
    CART DRAWER
    ====================================================== 
    */

    openCartDrawer() {

      /*
      Horizon cart drawer.
      */

      const drawer =
        document.querySelector(
          "#cart-drawer"
        );


      if (!drawer) {

        /*
        Fallback event.
        */

        document.dispatchEvent(
          new CustomEvent(
            "cart:open"
          )
        );

        return;

      }


      /*
      Horizon / custom drawer.
      */

      if (
        typeof drawer.open ===
        "function"
      ) {

        drawer.open();

        return;

      }


      /*
      Generic fallback.
      */

      drawer.dispatchEvent(
        new CustomEvent(
          "open",
          {
            bubbles: true
          }
        )
      );

    }

  }


  /* ========================================================
     INITIALIZE
     ======================================================== */

  function initSmartLifestyleCombos() {

    document
      .querySelectorAll(
        ".slc-section"
      )
      .forEach(section => {

        new SmartLifestyleCombos(
          section
        );

      });

  }


  if (
    document.readyState ===
    "loading"
  ) {

    document.addEventListener(
      "DOMContentLoaded",
      initSmartLifestyleCombos
    );

  } else {

    initSmartLifestyleCombos();

  }


  /* ========================================================
     THEME EDITOR — LIVE RELOAD SUPPORT
     Shopify Theme Editor replaces section HTML via AJAX
     when a merchant changes a setting, without a full page
     reload. This re-initializes just the section that
     changed, so bundles + buttons keep working inside
     the customizer without needing a manual refresh.
     ======================================================== */

  document.addEventListener(
    "shopify:section:load",
    (event) => {

      const section =
        event.target.querySelector(
          ".slc-section"
        );

      if (section) {

        new SmartLifestyleCombos(
          section
        );

      }

    }
  );

})();
/* ==========================================================
   SAHICART — Smart Lifestyle Combos
   Premium CRO polish
   CSS-only override — functionality preserved
========================================================== */

.slc-section {
  padding: 48px 0;
  background: #ffffff;
}

.slc-section .page-width {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Header ---------- */

.slc-header {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.slc-heading {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111111;
}

.slc-subheading {
  max-width: 620px;
  margin: 8px auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
}

/* ---------- Bundle track ---------- */

.slc-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.slc-track::-webkit-scrollbar {
  display: none;
}

/* ---------- Bundle card ---------- */

.slc-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.slc-card:hover {
  border-color: #d6d6d6;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* ---------- Media ---------- */

.slc-card__media {
  position: relative;
  overflow: hidden;
  background: #f6f6f4;
}

.slc-cover {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* ---------- Badge ---------- */

.slc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Content ---------- */

.slc-card__content {
  padding: 18px;
}

.slc-title {
  margin: 0 0 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #111111;
}

.slc-description {
  display: -webkit-box;
  margin: 0 0 14px;
  overflow: hidden;
  color: #707070;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- Product list ---------- */

.slc-products {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #eeeeee;
}

.slc-products li {
  position: relative;
  min-width: 0;
  padding: 9px 0 9px 13px;
  border-bottom: 1px solid #eeeeee;
  color: #292929;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.slc-products li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111111;
}

/* ---------- Price ---------- */

.slc-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.slc-price--compare {
  color: #888888;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-decoration: line-through;
}

.slc-price--sale {
  color: #111111;
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Saving ---------- */

.slc-saving {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #f2f6ea;
  color: #42651d;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Actions ---------- */

.slc-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 16px;
}

.slc-btn {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.slc-btn--primary {
  border: 1px solid #111111;
  background: #111111;
  color: #ffffff;
}

.slc-btn--primary:hover {
  background: #2b2b2b;
  border-color: #2b2b2b;
}

.slc-btn--secondary {
  min-width: 82px;
  border: 1px solid #d5d5d5;
  background: #ffffff;
  color: #111111;
}

.slc-btn--secondary:hover {
  border-color: #111111;
  background: #f7f7f7;
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 749px) {

  .slc-section {
    padding: 34px 0;
  }

  .slc-section .page-width {
    padding-left: 16px;
    padding-right: 16px;
  }

  .slc-header {
    margin-bottom: 20px;
    text-align: left;
  }

  .slc-heading {
    font-size: 25px;
  }

  .slc-subheading {
    margin-top: 6px;
    font-size: 13px;
  }

  .slc-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .slc-track::-webkit-scrollbar {
    display: none;
  }

  .slc-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .slc-card:hover {
    transform: none;
    box-shadow: none;
  }

  .slc-cover {
    height: 125px;
  }

  .slc-card__content {
    padding: 15px;
  }

  .slc-title {
    font-size: 18px;
  }

  .slc-description {
    font-size: 12.5px;
    margin-bottom: 11px;
  }

  .slc-products {
    margin-bottom: 13px;
  }

  .slc-products li {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
  }

  .slc-price--sale {
    font-size: 19px;
  }

  .slc-actions {
    margin-top: 13px;
  }

  .slc-btn {
    min-height: 40px;
    padding: 9px 12px;
  }

}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

  .slc-card,
  .slc-btn {
    transition: none !important;
  }

}