:root{
  --ring-size: 110px;
  --ring-border: 2px;
  --ring-color: #e1e1e1;
  --ring-inner-gap: 12px;
  --ring-fill: #e8e8e8;
  --label-color:#606060;
  --hover-color:#c7a176;
  --brand:#9f7a55;
  --radius: 100px;
  --radius-mobile: 30px;
  --img-scale-desktop: 1.4;
  --bleed-top: clamp(32px, 7vw, 88px);
  --media-h-mobile: clamp(140px, 26vh, 240px);
  --media-h-desktop: clamp(240px, 32vw, 360px);
} 

.hero{ position: relative; }

.hero__pane{
  direction: rtl;
  position: relative;
  border-radius: var(--radius);
  padding: clamp(12px, 1.5vw, 16px);
  overflow: visible;
  background: var(--bg, linear-gradient(135deg, #ffe3c6 0%, #f1d2b6 45%, #f5e8df 100%));
}
.hero__pane--1{ --bg: linear-gradient(135deg, #ffe3c6 0%, #f1d2b6 45%, #f5e8df 100%); }
.hero__pane--2{ --bg: linear-gradient(135deg, #d7f1ff 0%, #cfe2ff 40%, #eef6ff 100%); }
.hero__pane--3{ --bg: linear-gradient(135deg, #eaffd7 0%, #dff4c9 40%, #f4ffe8 100%); }
.hero__pane--4{ --bg: linear-gradient(135deg, #ffe3f3 0%, #ffd6ea 40%, #fff0f7 100%); }
.hero__pane--5{ --bg: linear-gradient(135deg, #fff2cc 0%, #ffe7a8 40%, #fff6dc 100%); }
.hero__pane--6{ --bg: linear-gradient(135deg, #ece9ff 0%, #ddd8ff 40%, #f4f2ff 100%); }

.hero__row{
  min-height: clamp(280px, 34vw, 460px);
  padding-inline: clamp(16px, 3vw, 28px);
}
.hero__img{
  max-height: clamp(220px, 32vw, 420px);
  object-fit: contain;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px){

  .hero__img{ margin-top: calc(-1 * var(--bleed-top)); filter: drop-shadow(0 6px 12px rgba(0,0,0,.09)); }
}

.hero__title{ font-family: dana; font-size: clamp(22px, 3vw, 50px); margin-bottom: .5rem; color:#2b2b2b }
.hero__desc{ font-size: clamp(14px, 1.25vw, 16px); color:#444; margin-bottom: 1rem; }

.hero__ctrl{ width:48px; height:48px; top:50%; transform: translateY(-50%); z-index:10; }
.hero__ctrl--prev{ inset-inline-start: 20px; }
.hero__ctrl--next{ inset-inline-end: 20px; }
.hero__ctrl .carousel-control-prev-icon,
.hero__ctrl .carousel-control-next-icon{
  filter: invert(35%) sepia(6%) saturate(430%) hue-rotate(354deg) brightness(92%) contrast(86%);
}

.thumbs{ direction: rtl;display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px; text-align:center }
.thumb{ width:130px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:var(--label-color); transition: transform .15s ease; }
.thumb:focus-visible,.thumb:hover{ transform: translateY(-2px) }
.thumb__ring{ width:var(--ring-size); height:var(--ring-size); position:relative; border-radius:50%; display:grid; place-items:center; }
.thumb__ring::before{ content:""; position:absolute; inset:0; border-radius:50%; border:var(--ring-border) dashed var(--ring-color); z-index:2 }
.thumb__ring::after{ content:""; position:absolute; inset:var(--ring-inner-gap); border-radius:50%; background:var(--ring-fill); z-index:0 }
.thumb img{ width:48px; height:auto; position:relative; z-index:1; transition: filter .2s ease; }
.thumb__label{ display:block; margin-top:.5rem; font-size:14px }
.thumb:hover .thumb__ring::before{ border-color:var(--hover-color) }
/* .thumb:hover img{ filter: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(7462%) hue-rotate(356deg) brightness(93%) contrast(102%) } */
.thumb.is-active .thumb__ring::before{ border-color: var(--brand) }
.thumb.is-active .thumb__label{ color: var(--brand) }

@media (max-width: 768px){	.hero__pane{
  border-radius: var(--radius-mobile);
}
  .hero__img{ max-height: 56vh; width:min(92%, 520px) }
}



.hero__row{ padding-inline: clamp(28px, 6vw, 64px); }

.hero__row{ min-height: clamp(240px, 30vw, 420px); }
.hero__img{ max-height: clamp(220px, 30vw, 400px); }

.hero__ctrl--prev{ inset-inline-start: 16px; }
.hero__ctrl--next{ inset-inline-end: 16px; }

@media (max-width: 768px){
  .hero__row{ padding-inline: clamp(16px, 4vw, 28px); }
}



.hero__pane{ overflow: visible; position: relative; }

.hero__mediaCol{ position: relative; }
.hero__mediaCol::before{
  content:"";
  display:block;
  height: var(--media-h-mobile);
}

.hero__img{
  position: absolute;
  top: calc(-1 * var(--bleed-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 520px);
  max-height: none;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.1));
}

@media (min-width: 768px){
  .hero__mediaCol::before{ height: var(--media-h-desktop); }
  .hero__img{
    left: 0;
    transform: none;
    width: min(100%, 520px);
  }
}

.hero__row{
  min-height: clamp(220px, 28vw, 380px);
  padding-inline: clamp(28px, 6vw, 64px);
}

.hero__ctrl{ z-index: 10; }
.hero__ctrl--prev{ inset-inline-start: 16px; }
.hero__ctrl--next{ inset-inline-end: 16px; }

.carousel-inner{ overflow: hidden; }
.carousel-item{ padding-top: var(--bleed-top); } 

.carousel-item{ padding-top: calc(var(--bleed-top) + 12px); }
.hero__img{ margin-top: 0 !important; }
@media (min-width: 768px){
  .hero__img{ margin-top: 0 !important; }
}


.hero__img{
  width: min(84vw, 470px) !important;
  max-height: clamp(200px, 28vw, 340px) !important;
}

@media (min-width: 992px){

  .hero__img{
    width: min(calc(42vw * var(--img-scale-desktop)),
               calc(500px * var(--img-scale-desktop))) !important;

    max-height: calc(var(--img-scale-desktop) *
                     clamp(220px, 26vw, 340px)) !important;
  }
}


/* === Dynamic === */
.hero__title{ color: var(--bs-secondary-color) !important; }
.hero__desc{ color: var(--bs-secondary-color, var(--bs-body-color)) !important; }


.thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.thumb{
  padding:.45rem .8rem; border-radius:12px;
  background: transparent;
  color: var(--bs-body-color);
}
.thumb:hover{
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
@supports (color: color-mix(in oklab, black, white)) {
  .thumb[aria-current="true"], .thumb.is-active{
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--bs-primary), transparent 70%);
  }
}
.thumb:focus-visible{ outline:2px solid var(--bs-primary); outline-offset:2px; }