/* iHerb Affiliate Banners v3 */

.ihab-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 1.5em 0;
    clear: both;
}
.ihab-pos-top    { margin-top: 0; margin-bottom: 1.8em; }
.ihab-pos-middle { margin-top: 1.8em; margin-bottom: 1.8em; }
.ihab-pos-bottom { margin-top: 1.8em; margin-bottom: 0; }

.ihab-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
    line-height: 0;
}

.ihab-slide { display: none; width: 100%; }
.ihab-slide.ihab-active { display: block; }
.ihab-slide a { display: block; width: 100%; line-height: 0; }
.ihab-slide img { width: 100%; height: auto; display: block; border: none; border-radius: 8px; max-width: 100%; }

.ihab-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 8px 0 2px;
}
.ihab-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none; padding: 0;
    cursor: pointer;
    transition: background .3s;
    flex-shrink: 0;
}
.ihab-dot.ihab-dot-on { background: #5b8c3e; }

/* animation keyframes */
@keyframes ihabFadeOut { from{opacity:1} to{opacity:0} }
@keyframes ihabFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes ihabSlideOutLeft { from{transform:translateX(0);opacity:1} to{transform:translateX(-100%);opacity:0} }
@keyframes ihabSlideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes ihabZoomOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.93)} }
@keyframes ihabZoomIn  { from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:scale(1)} }

.ihab-fade-out  { animation: ihabFadeOut  .5s forwards; }
.ihab-fade-in   { animation: ihabFadeIn   .5s forwards; }
.ihab-sout-left { animation: ihabSlideOutLeft .5s forwards; }
.ihab-sin-right { animation: ihabSlideInRight .5s forwards; }
.ihab-zoom-out  { animation: ihabZoomOut  .4s forwards; }
.ihab-zoom-in   { animation: ihabZoomIn   .4s forwards; }

/* responsive */
@media (max-width: 767px) {
    .ihab-slide img { border-radius: 6px; }
    .ihab-slider    { border-radius: 6px; }
    .ihab-wrap      { margin: 1em 0; }
    .ihab-dot       { width: 7px; height: 7px; }
}
@media (max-width: 400px) {
    .ihab-wrap { margin: .8em 0; }
}