/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;min-height:480px}
.hero-full-image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:clamp(480px,42vw,900px);padding:clamp(36px,5vw,72px) calc(max(var(--site-gutter),calc((100vw - var(--site-max-width))/2)) + var(--site-gutter));background-color:var(--m);background-repeat:no-repeat;background-position:right center;background-size:auto min(100%,900px)}
.hero-full-image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--m) 0%,var(--m) 45%,rgba(232,245,238,.78) 58%,transparent 76%)}
.hero-full-image-content{position:relative;z-index:2;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:min(100%,620px)}
.hero-full-image-content h1{max-width:14ch;margin:0;font-size:clamp(32px,4vw,56px);line-height:1.08}
.hero-full-image-content p{max-width:58ch;margin:0;color:var(--s);font-size:clamp(15px,1.2vw,18px);line-height:1.65}
.hero-full-image-link{position:absolute;inset:0;z-index:1}
.sl{display:none;min-height:480px;align-items:center;gap:clamp(24px,4vw,48px);padding:48px 40px;max-width:1280px;margin:auto;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sl.on{display:grid;animation:f .5s}

/* Text side */
.sl-text{display:flex;flex-direction:column;gap:10px;max-width:520px}
.sl-cat{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g);background:var(--m);padding:4px 10px;border-radius:20px;width:fit-content}
.sl-text h1{font-size:clamp(22px,3vw,36px);font-weight:800;line-height:1.2;margin:0}
.sl-text p{font-size:16px;color:var(--s);margin:0}
.sl-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.sl-price b{font-size:28px;font-weight:800;color:var(--t)}
.sl-price s{color:var(--s);font-size:15px}
.sl-price em{color:var(--g);font-style:normal;font-weight:800;font-size:13px;background:var(--m);padding:2px 8px;border-radius:4px}

/* Image side */
.sl-img{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:3 / 2;
  height:auto;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(4px);
}
.sl-img a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.sl-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:12px;
}



/* Sahaj Elements full-width banner slider */

/* Sahaj Elements smooth full-width banner slider */
.hero-banner-slider {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FAF8F2;
}

.hero-banner-slides {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    width: 100%;
}

.hero-banner-slide {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px);
    z-index: 0;
    transition:
        opacity 650ms ease,
        transform 650ms ease,
        visibility 0s linear 650ms;
}

.hero-banner-slide.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    z-index: 1;
    transition:
        opacity 650ms ease,
        transform 650ms ease,
        visibility 0s;
}

.hero-banner-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-banner-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #234C32;
    box-shadow: 0 2px 10px #0002;
    cursor: pointer;
    font-size: 20px;
}

.hero-banner-prev {
    left: 16px;
}

.hero-banner-next {
    right: 16px;
}

.hero-banner-dots {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
}

.hero-banner-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.hero-banner-dots button.is-active {
    background: #234C32;
    outline: 2px solid #fff;
}

@media (max-width: 600px) {
    .hero-banner-arrow {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .hero-banner-prev {
        left: 8px;
    }

    .hero-banner-next {
        right: 8px;
    }

    .hero-banner-dots {
        bottom: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-slide {
        transition: none;
        transform: none;
    }
}




/* Nav arrows & dots */
.dots{position:absolute;bottom:16px;left:0;right:0;text-align:center}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#0003;margin:3px;cursor:pointer}
.dots button.on{background:var(--b);width:26px;border-radius:6px}
.ar{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:0;border-radius:50%;width:40px;height:40px;box-shadow:0 2px 10px #0002;font-size:20px;z-index:5;cursor:pointer}
.ar:hover{background:var(--m)}

@media(max-width:900px){
  .sl{grid-template-columns:1fr;padding:32px 20px;min-height:auto;gap:20px}
  .sl-img{height:min(65vw,360px);aspect-ratio:auto}
  .sl-text h1{font-size:clamp(22px,6vw,34px)}
  .hero-full-image{grid-template-columns:minmax(0,1fr);gap:20px;min-height:auto;padding:32px 20px min(100vw,460px);background-position:center bottom;background-size:min(100%,460px) auto}
  .hero-full-image-overlay{background:linear-gradient(180deg,var(--m) 0%,var(--m) 48%,rgba(232,245,238,0) 70%)}
  .hero-full-image-content{grid-column:1;width:100%;max-width:620px}
  .hero-full-image-content h1{font-size:clamp(30px,6vw,40px)}
}