/* Shared editorial hero banner — loaded on every storefront page after shared.css.
   Everything is namespaced .hero-banner / .hb-* so it cannot collide with the
   product-card .hero-img rules in catalog.css.

   Variants in use:
     .hero-banner--photo       home page only: full-bleed photo, rotating text slides
     .hero-banner--short       with --photo on every other page: shorter, one saree photo
     .hero-banner--plain       quiet header without a photo (not used at the moment) */

:root{
  --hb-cream:#fdfbf7;
  --hb-oat:#f4ebdf;
  --hb-sand:#efe3d2;
  --hb-beige:#ddd0c0;
  --hb-coffee:#c2456f;
  --hb-espresso:#9c3257;
  --hb-charcoal:#1c1516;
  --hb-gray:#8a8078;
  --hb-serif:Georgia,"Times New Roman",Times,serif;
  --hb-script:"Segoe Script","Brush Script MT","Snell Roundhand","Apple Chancery",Georgia,cursive;
}

/* ===== Shell ===== */
.hero-banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  align-items:stretch;
  min-height:min(78vh,620px);
  background:linear-gradient(135deg,var(--hb-cream) 0%,#f7f0e6 52%,var(--hb-sand) 100%);
  border-bottom:1px solid #e8dccb;
  overflow:hidden;
}

/* ===== Text panel ===== */
.hb-panel{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(44px,5.6vw,84px) clamp(20px,3vw,48px) clamp(44px,5.6vw,84px) clamp(22px,4.6vw,76px);
}
/* Soft warm glow so the cream panel is not flat. */
.hb-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 8% 30%,rgba(255,252,246,.95) 0%,rgba(255,252,246,0) 62%);
}
.hb-panel > *{position:relative}

/* Handwritten accent, top-right of the cream panel (it stays legible there —
   over the photograph coffee-brown script would disappear). */
.hb-script{
  position:absolute;
  top:clamp(16px,2.6vw,34px);
  right:clamp(16px,2.4vw,38px);
  margin:0;
  font-family:var(--hb-script);
  font-style:italic;
  font-size:clamp(16px,1.7vw,24px);
  line-height:1.1;
  color:var(--hb-coffee);
  transform:rotate(-6deg);
  transform-origin:100% 50%;
  opacity:.92;
  white-space:nowrap;
  pointer-events:none;
}

/* ===== Slide stacking =====
   Every slide sits in the same grid cell, so the stage is as tall as the
   tallest slide and nothing jumps when the carousel advances. */
.hb-stage{display:grid}
.hb-stage > .hb-text{grid-area:1/1}

.hb-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .55s ease;
}
.hb-text.is-active{opacity:1;visibility:visible;pointer-events:auto}

.hb-eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--hb-coffee);
}
.hb-title{
  margin:0;
  font-family:var(--hb-serif);
  font-weight:400;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.07;
  letter-spacing:-.5px;
  color:var(--hb-charcoal);
}
.hb-title em{font-style:italic;color:var(--hb-espresso)}
.hb-sub{
  margin:clamp(14px,1.6vw,22px) 0 0;
  max-width:42ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.65;
  color:var(--hb-gray);
}
.hb-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(24px,2.8vw,38px);
  padding:15px 30px;
  border-radius:999px;
  background:var(--hb-coffee);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(194,69,111,.26);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hb-cta:hover{
  background:var(--hb-espresso);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(122,40,70,.32);
}
.hb-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.hb-cta:hover svg{transform:translateX(4px)}

/* Inner pages drop the breadcrumb / search form into the panel, left aligned.
   The two-class selectors outrank the centred .breadcrumb rules in the
   per-page stylesheets regardless of load order. */
.hero-banner .breadcrumb{
  justify-content:flex-start;
  margin-top:clamp(16px,1.8vw,22px);
  color:var(--hb-gray);
  font-size:12.5px;
}
.hero-banner .breadcrumb a{color:var(--hb-coffee)}
.hero-banner .breadcrumb a:hover{color:var(--hb-espresso);text-decoration:underline;text-underline-offset:3px}
.hero-banner .listing-search{justify-content:flex-start;margin-top:clamp(18px,2vw,26px)}
.hero-banner .listing-search input{border-color:var(--hb-beige);background:#fffdfa}
.hero-banner .listing-search input:focus{border-color:var(--hb-coffee)}
.hero-banner .listing-search button{background:var(--hb-coffee)}
.hero-banner .listing-search button:hover{background:var(--hb-espresso);color:#fff}
.hero-banner .error-actions{margin-top:clamp(20px,2.4vw,30px)}
.hero-banner .error-actions a{border-color:var(--hb-beige);background:#fffdfa;color:var(--hb-espresso)}
.hero-banner .error-actions a:hover{border-color:var(--hb-coffee)}

/* ===== Carousel dots ===== */
.hb-dots{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:clamp(26px,3.2vw,42px);
}
.hb-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--hb-beige);
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}
.hb-dot:hover{background:#c9b7a2}
.hb-dot.is-active{width:28px;background:var(--hb-coffee)}
.hb-dot:focus-visible{outline:2px solid var(--hb-coffee);outline-offset:3px}

/* ===== Image side ===== */
.hb-media{
  position:relative;
  overflow:hidden;
  background:var(--hb-oat);
}
.hb-figure{
  position:absolute;
  inset:0;
  background-position:center 22%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .9s ease,transform 9s linear;
}
.hb-figure.is-active{opacity:1;transform:scale(1)}

/* Blurred leaf silhouettes for dappled, sunlit texture. */
.hb-leaf{
  position:absolute;
  inset:-8% -5%;
  z-index:1;
  pointer-events:none;
  background:url("/img/leaf-shadow.svg") center/cover no-repeat;
  opacity:.17;
  filter:blur(4px);
  mix-blend-mode:multiply;
  animation:hb-sway 12s ease-in-out infinite alternate;
}

/* Warm wash + a cream feather along the seam so the photo melts into the panel. */
.hb-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(247,240,230,.96) 0%,rgba(247,240,230,.42) 8%,rgba(247,240,230,0) 20%),
    linear-gradient(180deg,rgba(194,69,111,.10) 0%,rgba(122,40,70,.20) 100%);
}

/* ===== Entrance animation (staggered) ===== */
@keyframes hb-rise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes hb-script-in{
  from{opacity:0;transform:rotate(-6deg) translateY(-10px)}
  to{opacity:.92;transform:rotate(-6deg) translateY(0)}
}
@keyframes hb-sway{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-16px,12px,0) rotate(1.4deg)}
}

.hb-text.is-active > *{animation:hb-rise .75s cubic-bezier(.22,.7,.3,1) both}
.hb-text.is-active > *:nth-child(1){animation-delay:.05s}
.hb-text.is-active > *:nth-child(2){animation-delay:.14s}
.hb-text.is-active > *:nth-child(3){animation-delay:.23s}
.hb-text.is-active > *:nth-child(4){animation-delay:.32s}
.hb-text.is-active > *:nth-child(5){animation-delay:.41s}
.hb-script{animation:hb-script-in .8s .5s cubic-bezier(.22,.7,.3,1) both}
.hb-dots{animation:hb-rise .75s .55s cubic-bezier(.22,.7,.3,1) both}

/* ===== Photo variant (home page only) =====
   The photograph fills the whole banner; the model sits on the right, so a warm
   maroon-ink wash on the left carries cream lettering over the golden bokeh. */
.hero-banner--photo{
  display:block;
  min-height:clamp(480px,46vw,720px);
  background:#2a1418;
  border-bottom:0;
}
.hero-banner--photo .hb-media{position:absolute;inset:0;z-index:0;background:#2a1418}
.hero-banner--photo .hb-figure{background-position:72% 30%}
.hero-banner--photo .hb-media::after{
  background:
    linear-gradient(90deg,rgba(38,12,20,.86) 0%,rgba(38,12,20,.66) 28%,rgba(38,12,20,.22) 52%,rgba(38,12,20,0) 66%),
    linear-gradient(0deg,rgba(28,10,16,.45) 0%,rgba(28,10,16,0) 34%);
}
.hero-banner--photo .hb-panel{
  min-height:inherit;
  max-width:min(640px,54%);
  padding:clamp(48px,6vw,96px) clamp(22px,3vw,48px) clamp(48px,6vw,96px) clamp(24px,6vw,104px);
}
.hero-banner--photo .hb-panel::before{display:none}
.hero-banner--photo .hb-script{
  position:static;
  align-self:flex-start;
  margin:0 0 6px;
  transform:rotate(-4deg);
  transform-origin:0 50%;
  color:#f3b6c9;
  font-size:clamp(18px,1.9vw,27px);
}
/* Thin rule with a diamond — the flourish under "BOUTIQUE" in the logo. */
.hb-ornament{
  display:block;position:relative;width:128px;height:12px;margin:4px 0 clamp(18px,2vw,26px);
  background:linear-gradient(90deg,rgba(243,182,201,0) 0%,#e7a3b9 30%,#e7a3b9 70%,rgba(243,182,201,0) 100%) center/100% 1px no-repeat
}
.hb-ornament::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  background:#e7a3b9;transform:translate(-50%,-50%) rotate(45deg)
}
.hero-banner--photo .hb-eyebrow{color:#f3b6c9}
.hero-banner--photo .hb-title{
  color:#fff8ef;
  font-size:clamp(38px,4.8vw,70px);
  text-shadow:0 2px 24px rgba(20,6,10,.35);
}
.hero-banner--photo .hb-sub{color:rgba(255,244,236,.86)}
.hero-banner--photo .hb-cta{background:#d6457a;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.hero-banner--photo .hb-cta:hover{background:#fff8ef;color:#9c3257}
.hero-banner--photo .hb-dot{background:rgba(255,248,239,.4)}
.hero-banner--photo .hb-dot:hover{background:rgba(255,248,239,.7)}
.hero-banner--photo .hb-dot.is-active{background:#f3b6c9}

/* ===== Short photo variant (every other page) =====
   Same look as the home banner, shorter; the saree photo fills the width. */
.hero-banner--short{min-height:clamp(300px,27vw,400px)}
.hero-banner--short .hb-figure{background-position:center 42%}
/* Portrait photos: keep the face in frame (the model sits right of centre, head near the top). */
.hero-banner--short .hb-figure--face{background-position:70% 16%}
.hero-banner--short .hb-media::after{
  background:
    linear-gradient(90deg,rgba(38,12,20,.9) 0%,rgba(38,12,20,.74) 34%,rgba(38,12,20,.3) 62%,rgba(38,12,20,.12) 100%),
    linear-gradient(0deg,rgba(28,10,16,.35) 0%,rgba(28,10,16,0) 40%);
}
.hero-banner--short .hb-panel{
  max-width:min(700px,62%);
  padding:clamp(34px,4vw,60px) clamp(22px,3vw,48px) clamp(34px,4vw,60px) clamp(24px,6vw,104px);
}
.hero-banner--short .hb-title{font-size:clamp(32px,3.6vw,52px)}
.hero-banner--short .hb-ornament{margin-bottom:clamp(12px,1.4vw,18px)}
/* The home carousel uses this size too. It carries more (script line, two-line title,
   button, dots), so it sits tighter and the dots pin to the bottom edge to fit. */
.hero-banner--short[data-hero-carousel] .hb-panel{padding-top:clamp(22px,2.2vw,34px);padding-bottom:clamp(40px,3.6vw,52px)}
.hero-banner--short[data-hero-carousel] .hb-title{font-size:clamp(30px,2.9vw,44px)}
.hero-banner--short .hb-script{margin-bottom:0}
.hero-banner--short .hb-sub{margin-top:clamp(10px,1.1vw,14px)}
.hero-banner--short .hb-cta{margin-top:clamp(14px,1.4vw,20px);padding:12px 26px}
.hero-banner--short .hb-dots{position:absolute;left:clamp(24px,6vw,104px);bottom:clamp(16px,1.6vw,22px);margin:0}
/* Breadcrumb, search box and error buttons on the dark wash. */
.hero-banner--photo .breadcrumb{color:rgba(255,244,236,.7)}
.hero-banner--photo .breadcrumb a{color:#f3b6c9}
.hero-banner--photo .breadcrumb a:hover{color:#fff8ef}
.hero-banner--photo .listing-search input{border-color:rgba(255,248,239,.35);background:rgba(255,253,250,.96)}
.hero-banner--photo .listing-search button{background:#d6457a}
.hero-banner--photo .listing-search button:hover{background:#fff8ef;color:#9c3257}
.hero-banner--photo .error-actions a{border-color:rgba(255,248,239,.4);background:rgba(255,253,250,.96)}

/* ===== Plain variant (no photo; kept for pages that want a quiet header) =====
   No photograph: just the page title, breadcrumb and any search box on cream. */
.hero-banner--plain{
  display:block;
  min-height:0;
  background:linear-gradient(180deg,#fffcf8 0%,#f6efe6 100%);
}
.hero-banner--plain .hb-panel{
  padding:clamp(26px,3.2vw,44px) clamp(20px,4.6vw,76px) clamp(24px,3vw,40px);
}
.hero-banner--plain .hb-panel::before{display:none}
.hero-banner--plain .hb-title{font-size:clamp(28px,3.2vw,42px)}
.hero-banner--plain .hb-eyebrow{margin-bottom:10px}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .hero-banner{grid-template-columns:minmax(0,48fr) minmax(0,52fr);min-height:min(70vh,520px)}
  .hero-banner--compact{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
}
@media (max-width:760px){
  .hero-banner,
  .hero-banner--compact{
    grid-template-columns:1fr;
    min-height:0;
  }
  .hb-panel{padding:clamp(52px,9vw,64px) 20px 34px}
  .hb-script{
    position:static;
    align-self:flex-end;
    margin:0 0 14px;
    transform:rotate(-4deg);
    transform-origin:center;
  }
  .hb-media{min-height:clamp(280px,62vw,400px)}
  .hb-media::after{
    background:
      linear-gradient(180deg,rgba(247,240,230,.95) 0%,rgba(247,240,230,0) 16%),
      linear-gradient(180deg,rgba(194,69,111,.06) 0%,rgba(122,40,70,.18) 100%);
  }
  .hb-sub{max-width:none}
  .hero-banner .listing-search input{width:100%}

  /* Phones: the photo stays full-bleed with the model centred; the wash comes up
     from the bottom so the text sits under her. */
  .hero-banner--photo{min-height:clamp(560px,150vw,680px);display:flex;align-items:flex-end}
  .hero-banner--photo .hb-media{min-height:0}
  .hero-banner--photo .hb-figure{background-position:74% 20%}
  .hero-banner--photo .hb-media::after{
    background:linear-gradient(0deg,rgba(38,12,20,.92) 0%,rgba(38,12,20,.72) 38%,rgba(38,12,20,0) 66%);
  }
  .hero-banner--photo .hb-panel{max-width:none;min-height:0;width:100%;min-width:0;flex:1 1 auto;padding:0 20px 34px}
  .hero-banner--photo .hb-stage{grid-template-columns:minmax(0,1fr)}
  .hero-banner--photo .hb-script{transform:rotate(-3deg)}
  .hero-banner--plain .hb-panel{padding:24px 20px 22px}
  .hero-banner--short{min-height:clamp(340px,90vw,440px)}
  .hero-banner--short .hb-panel{padding:0 20px 28px}
  .hero-banner--short .hb-media::after{
    background:linear-gradient(0deg,rgba(38,12,20,.92) 0%,rgba(38,12,20,.7) 55%,rgba(38,12,20,.25) 100%);
  }
}

@media (max-width:420px){
  .hb-cta{width:100%;justify-content:center}
  .hero-banner .listing-search{flex-wrap:wrap}
}

/* ===== Motion preferences ===== */
@media (prefers-reduced-motion:reduce){
  .hb-text,
  .hb-figure,
  .hb-cta,
  .hb-dot{transition:none}
  .hb-text.is-active > *,
  .hb-script,
  .hb-dots,
  .hb-leaf{animation:none}
  .hb-script{opacity:.92}
  .hb-figure.is-active{transform:none}
}