/* =========================================================================
   Shiv Shakti — full-bleed banner slider (home page)
   The artwork in images/banner/ carries the logo and products on one side and
   leaves the other side empty. Each slide places its caption (.ss-banner-copy)
   in that empty side, using per-slide variables set inline on the slide:
     --cx     horizontal centre of the caption, as % of the banner width
     --w      caption width                         (default 34%)
     --top    top inset                             (default 7%)
     --floor  bottom inset, clears the art's own dividers/waves (default 14%)
     --mpos   image focus on phones, where the art is cropped (default 72%)
   data-theme="dark" | "light" picks cream-on-maroon or maroon-on-cream text.
   ========================================================================= */
.ss-banner{
  position:relative;
  width:100%;
  margin:0; padding:0;            /* opt out of the site-wide section padding */
  background:var(--maroon-950,#280509);
  overflow:hidden;
  border-bottom:2px solid rgba(217,176,74,.55);
  line-height:0;                   /* no inline-block gap under the slides */
}
.ss-banner .swiper{width:100%;}
.ss-banner .swiper-slide{
  width:100%;
  background:var(--maroon-950,#280509);
}
.ss-banner-link{display:block; width:100%;}
.ss-banner img{
  display:block; width:100%; height:100%;
  aspect-ratio:2168/725;          /* the artwork's native ratio — no crop */
  object-fit:cover; object-position:center;
}

/* ----------------------------------------------------------------- caption */
.ss-banner-copy{
  position:absolute; z-index:3;
  top:var(--top,7%); bottom:var(--floor,14%);
  left:var(--cx,24%); width:var(--w,34%);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.5;
  color:var(--cream-100,#fbf5e8);
  pointer-events:none;              /* empty caption area still clicks through to the banner */
  visibility:hidden; transition:visibility 0s .5s;
}
.ss-banner-copy.only-sm{display:none;}     /* art already fills this slide on wide screens */
.ss-banner-copy a{pointer-events:auto;}
.ss-banner .swiper-slide-active .ss-banner-copy,
.ss-banner .swiper:not(.swiper-initialized) .ss-banner-copy{visibility:visible; transition-delay:0s;}

/* staggered rise-in each time a slide becomes active */
.ss-banner-copy > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .45s ease, transform .8s var(--ease-out,cubic-bezier(.22,.61,.36,1));
}
.ss-banner .swiper-slide-active .ss-banner-copy > *,
.ss-banner .swiper:not(.swiper-initialized) .ss-banner-copy > *{opacity:1; transform:none;}
.ss-banner .swiper-slide-active .ss-banner-copy > :nth-child(1){transition-delay:.30s;}
.ss-banner .swiper-slide-active .ss-banner-copy > :nth-child(2){transition-delay:.42s;}
.ss-banner .swiper-slide-active .ss-banner-copy > :nth-child(3){transition-delay:.56s;}
.ss-banner .swiper-slide-active .ss-banner-copy > :nth-child(4){transition-delay:.70s;}

.ss-bc-eyebrow{
  display:inline-flex; align-items:center; gap:clamp(8px,.8vw,14px);
  margin:0 0 clamp(8px,.9vw,16px);
  font-size:clamp(.64rem,.72vw,.86rem); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-300,#e8c876);
}
.ss-bc-eyebrow::before,
.ss-bc-eyebrow::after{
  content:""; width:clamp(18px,2.2vw,42px); height:1px;
  background:linear-gradient(90deg,transparent,currentColor);
}
.ss-bc-eyebrow::after{transform:scaleX(-1);}

.ss-bc-title{
  margin:0 0 clamp(8px,.9vw,16px);
  font-family:var(--display,'Cinzel',serif); font-weight:600;
  font-size:clamp(1.4rem,2.55vw,3.3rem); line-height:1.12; letter-spacing:.01em;
  color:var(--cream-100,#fbf5e8);
  text-shadow:0 2px 22px rgba(20,3,6,.45);
  text-wrap:balance;
}
.ss-bc-title em{
  font-style:normal;
  text-shadow:none;               /* a shadow would paint over the clipped gradient and dull it */
  background:linear-gradient(90deg,var(--gold-300,#e8c876) 0%,#fff1c9 25%,var(--gold-400,#d9b04a) 50%,#fff1c9 75%,var(--gold-300,#e8c876) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ssBannerShimmer 7s linear infinite;
}
@keyframes ssBannerShimmer{to{background-position:200% center;}}

.ss-bc-text{
  max-width:38ch; margin:0 0 clamp(14px,1.55vw,28px);
  font-size:clamp(.82rem,1vw,1.14rem); line-height:1.6;
  color:#efdfc6;
  text-wrap:pretty;
}

.ss-bc-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,.8vw,14px);}
.ss-bc-ctas .btn{
  padding:clamp(9px,.82vw,15px) clamp(16px,1.6vw,30px);
  font-size:clamp(.74rem,.82vw,.96rem);
  white-space:nowrap;
}
.ss-bc-ctas .btn-outline-gold{
  color:#fff3d6; border-color:rgba(232,200,118,.7);
  background:rgba(40,5,9,.25);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.ss-bc-ctas .btn-outline-gold:hover{background:rgba(217,176,74,.18); border-color:var(--gold-300,#e8c876);}

/* maroon-on-cream slides */
.ss-banner [data-theme="light"] .ss-banner-copy{color:var(--maroon-800,#511019);}
.ss-banner [data-theme="light"] .ss-bc-eyebrow{color:var(--maroon-600,#8a1c2a);}
.ss-banner [data-theme="light"] .ss-bc-eyebrow::before,
.ss-banner [data-theme="light"] .ss-bc-eyebrow::after{background:linear-gradient(90deg,transparent,var(--gold-600,#a9791f));}
.ss-banner [data-theme="light"] .ss-bc-title{color:var(--maroon-800,#511019); text-shadow:0 1px 0 rgba(255,255,255,.6);}
.ss-banner [data-theme="light"] .ss-bc-title em{
  background-image:linear-gradient(90deg,var(--maroon-500,#a52332) 0%,var(--gold-600,#a9791f) 25%,var(--maroon-600,#8a1c2a) 50%,var(--gold-600,#a9791f) 75%,var(--maroon-500,#a52332) 100%);
}
.ss-banner [data-theme="light"] .ss-bc-text{color:var(--ink-soft,#5a4139);}
.ss-banner [data-theme="light"] .btn-outline{background:rgba(255,253,248,.55);}

/* narrow desktops: the banner is too short for the paragraph */
@media (max-width:1100px) and (min-width:901px){
  .ss-bc-text{display:none;}
  .ss-bc-title{margin-bottom:clamp(12px,1.4vw,18px);}
}

/* un-initialised swiper (script blocked) degrades to the first banner only */
.ss-banner .swiper:not(.swiper-initialized) .swiper-wrapper{display:block;}
.ss-banner .swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide{display:none;}

/* ------------------------------------------------------------------ arrows */
.ss-banner-btn{
  position:absolute; top:50%; z-index:5;
  width:52px; height:52px; margin-top:-26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer;
  border:1px solid rgba(217,176,74,.5);
  background:rgba(40,5,9,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--gold-300,#e8c876);
  opacity:0; transform:translateX(0) scale(.9);
  transition:opacity .35s ease, transform .35s ease, background .25s, color .25s;
}
.ss-banner-btn svg{width:20px; height:20px;}
.ss-banner:hover .ss-banner-btn{opacity:1; transform:translateX(0) scale(1);}
.ss-banner-btn:hover{background:rgba(110,22,34,.85); color:#fff3d6;}
.ss-banner-btn.prev{left:26px;}
.ss-banner-btn.next{right:26px;}
.ss-banner-btn:focus-visible{opacity:1;}
.ss-banner-btn.swiper-button-disabled{opacity:0 !important;}

/* -------------------------------------------------------------------- dots */
.ss-banner::after{            /* keeps the dots readable over bright artwork */
  content:""; position:absolute; left:0; right:0; bottom:0; height:84px; z-index:4;
  background:linear-gradient(180deg,transparent,rgba(40,5,9,.42));
  pointer-events:none;
}
/* the extra qualifiers outrank Swiper's own .swiper-pagination-horizontal rule */
.ss-banner .ss-banner-dots,
.ss-banner .ss-banner-dots.swiper-pagination-horizontal{
  position:absolute; left:50%; right:auto; bottom:16px; z-index:5;
  width:auto; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:8px 14px; border-radius:999px;
  background:rgba(40,5,9,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ss-banner-dots .swiper-pagination-bullet{
  width:9px; height:9px; margin:0 !important; opacity:1;
  border-radius:999px; background:rgba(251,245,232,.45);
  border:1px solid rgba(40,5,9,.35);
  transition:width .35s var(--ease-out,cubic-bezier(.22,.61,.36,1)), background .3s;
}
.ss-banner-dots .swiper-pagination-bullet-active{
  width:30px; background:linear-gradient(90deg,var(--gold-400,#d9b04a),var(--gold-300,#e8c876));
}

/* ------------------------------------------------- intro band under banner */
.hero.hero-compact{padding:0;}
.hero.hero-compact .hero-grid{
  grid-template-columns:1fr;
  max-width:920px; margin:0 auto;
  padding:64px 32px 74px;
  text-align:center;
}
.hero.hero-compact .hero-copy{display:flex; flex-direction:column; align-items:center;}
.hero.hero-compact .eyebrow{justify-content:center;}
.hero.hero-compact h1{margin-bottom:18px;}
.hero.hero-compact p.lead{max-width:640px; margin:0 auto 32px;}
.hero.hero-compact .hero-ctas{justify-content:center;}
.hero.hero-compact .trust-row{justify-content:center;}

@media (max-width:900px){
  /* wide artwork gets too short on narrow screens — crop the empty side,
     and move the caption into a panel under the picture */
  .ss-banner img{aspect-ratio:21/9; object-position:var(--mpos,72%) center;}
  .ss-banner .swiper-slide{height:auto; display:flex; flex-direction:column;}
  .ss-banner-copy,
  .ss-banner-copy.only-sm{
    position:relative; inset:auto; transform:none;
    width:auto; flex:1;
    display:flex; justify-content:flex-start;
    padding:22px 20px 58px;
    background:
      radial-gradient(90% 120% at 50% 0%,rgba(217,176,74,.16),transparent 60%),
      linear-gradient(180deg,var(--maroon-900,#3a0a11),var(--maroon-950,#280509));
  }
  .ss-banner [data-theme="light"] .ss-banner-copy{
    background:
      radial-gradient(90% 120% at 50% 0%,rgba(232,200,118,.35),transparent 60%),
      linear-gradient(180deg,#fcf6e9,#f4e7cc);
  }
  .ss-bc-eyebrow{font-size:.66rem; letter-spacing:.2em;}
  .ss-bc-title{font-size:clamp(1.35rem,5vw,1.9rem);}
  .ss-bc-text{font-size:.9rem;}
  .ss-bc-ctas .btn{padding:11px 20px; font-size:.82rem;}
  .ss-banner::after{display:none;}         /* the dots now sit on the caption panel */
  /* keep the arrows on the picture, not on the caption panel */
  .ss-banner-btn{top:calc(100vw * 9 / 42); width:44px; height:44px; margin-top:-22px; opacity:1;}
  .ss-banner-btn.prev{left:12px;}
  .ss-banner-btn.next{right:12px;}
}
@media (max-width:560px){
  .ss-banner img{aspect-ratio:16/9; object-position:var(--mpos,76%) center;}
  .ss-banner-copy{padding:20px 16px 52px;}
  .ss-banner-dots{bottom:10px;}
  .ss-banner-btn{display:none;}
  .hero.hero-compact .hero-grid{padding:40px 16px 48px;}
}