/** Shopify CDN: Minification failed

Line 266:0 Unexpected "<"

**/
/* P.Louise — "Bad B*tch Energy" Homepage Banner
   A contained, rounded hero card carrying a pre-composed campaign image with a
   text + CTA cluster placed in the empty pink space of the artwork. A scroll-
   triggered entrance animation reveals the card; a thin promo/announce bar and
   a title sit above it.

   Tokens fall back to the prototype values when the theme doesn't define the
   P.Louise design-system custom properties on :root. */

.hb {
  --hb-paper:        var(--paper, #FFF6FB);
  --hb-brand:        var(--brand, #FF2E93);
  --hb-pink-300:     var(--pink-300, #FF7DB4);
  --hb-deep-plum:    var(--deep-plum, #3B0A45);
  --hb-plum-700:     var(--plum-700, #3B0A45);
  --hb-plum-500:     var(--plum-500, #5A2266);
  --hb-soft-blush:   var(--soft-blush, #FFD6E7);
  --hb-champagne:    var(--champagne, #DFAF71);
  --hb-gold-deep:    var(--gold-deep, #B98842);

  --hb-grad-brand:   var(--grad-brand, linear-gradient(100deg, #FF2E93 0%, #FF5A7A 55%, #FF9B71 100%));
  --hb-glow-pink:    var(--glow-pink, 0 8px 28px rgba(255,46,147,.45));
  --hb-shadow-lg:    var(--shadow-lg, 0 18px 48px rgba(59,10,69,.18));

  --hb-font-body:    var(--font-body, "Poppins", system-ui, sans-serif);
  --hb-font-heading: var(--font-heading, "Poppins", system-ui, sans-serif);

  --hb-ease-out:     var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --hb-ease-bounce:  var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* ---------- Announcement bar ---------- */
.hb-announce {
  background: transparent;
  color: var(--hb-plum-700);
  text-align: center;
  font-family: var(--hb-font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.hb-announce p { margin: 0; }
.hb-announce b,
.hb-announce strong { color: var(--hb-brand); font-weight: 700; }

/* ---------- Title above the banner ---------- */
.hb-heading {
  max-width: 1240px;
  margin: 28px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  text-align: center;
  font-family: var(--hb-font-body);
}
.hb-heading__eyebrow {
  display: block;
  font-family: var(--hb-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--hb-gold-deep);
  margin-bottom: 8px;
}
.hb-heading__title {
  margin: 0;
  font-family: var(--hb-font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 44px);
  line-height: .98;
  letter-spacing: -.01em;
  background: var(--hb-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hb-heading__sub {
  margin: 10px auto 0;
  max-width: 560px;
  font-family: var(--hb-font-body);
  font-weight: 400;
  font-size: clamp(12.5px, 1.4vw, 15px);
  line-height: 1.5;
  color: var(--hb-plum-500);
}

/* ---------- Banner container (contained, not full-bleed) ---------- */
.hb-banner {
  max-width: 1736px;
  margin: 20px auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.hb-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 38px);
}
/* Stretched link — makes the whole banner clickable */
.hb-hero__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hb-hero__media { position: relative; display: block; }
.hb-hero__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.hb-hero__media .hb-desktop { display: block; }
.hb-hero__media .hb-mobile  { display: none; }

/* ---------- CTA cluster (overlay in the empty pink space) ---------- */
.hb-cta {
  position: absolute;
  left: 6%;
  bottom: 6.8%;
  width: min(440px, 42%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  z-index: 2;
  pointer-events: none; /* clicks fall through to the banner-wide link... */
}
.hb-btn { pointer-events: auto; } /* ...except the CTA button itself */
.hb-cta__eyebrow {
  font-family: var(--hb-font-heading);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hb-gold-deep);
  margin-bottom: -4px;
}
.hb-cta__head {
  font-family: var(--hb-font-heading);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--hb-plum-700);
  text-wrap: balance;
  margin: 0;
}

/* CTA button (design-system primary, lg — hero-tuned) */
.hb-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: 999px;
  background: var(--hb-grad-brand);
  box-shadow: var(--hb-glow-pink);
  color: #fff;
  text-transform: uppercase;
  font-family: var(--hb-font-heading);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 20px);
  min-height: clamp(48px, 4.5vw, 60px);
  padding: 0 clamp(28px, 3.5vw, 46px);
  letter-spacing: .04em;
  transition: transform var(--hb-ease-out) .18s, filter var(--hb-ease-out) .18s;
}
.hb-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.hb-btn:active { transform: scale(0.96); }
/* shine sweep */
.hb-btn::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg) translateX(-120%);
}

.hb-cta__microcopy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-family: var(--hb-font-body);
  font-size: clamp(11px, 1vw, 14px);
  color: var(--hb-plum-500);
  font-weight: 500;
}
.hb-cta__microcopy .hb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hb-pink-300); }
.hb-cta__microcopy .hb-stars { color: var(--hb-brand); font-weight: 700; letter-spacing: 1px; }

/* ---------- Reveal animation ----------
   Resting state is fully visible. The hidden start state is applied only when
   JS "arms" the hero (and only while the tab is visible so transitions can
   actually run), so off-screen renders / no-JS still show the artwork. */
@media (prefers-reduced-motion: no-preference) {
  .hb-hero.is-in .hb-btn::after {
    animation: hbShine 3.6s var(--hb-ease-out) 1.4s infinite;
  }
  .hb-hero.hb-armed .hb-cta > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 760ms var(--hb-ease-out), transform 820ms var(--hb-ease-bounce);
  }
  .hb-hero.hb-armed.is-in .hb-cta > * { opacity: 1; transform: translateY(0); }
  .hb-hero.hb-armed.is-in .hb-cta > *:nth-child(1) { transition-delay: 560ms; }
  .hb-hero.hb-armed.is-in .hb-cta > *:nth-child(2) { transition-delay: 680ms; }
  .hb-hero.hb-armed.is-in .hb-cta > *:nth-child(3) { transition-delay: 800ms; }
  .hb-hero.hb-armed.is-in .hb-cta > *:nth-child(4) { transition-delay: 920ms; }
}

@keyframes hbShine {
  0%   { transform: skewX(-18deg) translateX(-160%); }
  18%  { transform: skewX(-18deg) translateX(420%); }
  100% { transform: skewX(-18deg) translateX(420%); }
}

/* ---------- Responsive (≤ 760px) ---------- */
@media (max-width: 760px) {
  .hb-hero__media .hb-desktop { display: none; }
  .hb-hero__media .hb-mobile  { display: block; }

  /* Image fills the whole banner container */
  .hb-hero__media,
  .hb-hero__media img {
    width: 100%;
    height: 100%;
  }
  .hb-hero__media img { object-fit: cover; }

  /* CTA overlays the bottom of the artwork with a soft scrim for legibility */
  .hb-cta {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    transform: none;
    width: 100%;
    padding: 84px 22px 0;
    align-items: center;
    text-align: center;
    gap: 16px;
    z-index: 2;
    background: transparent;
  }
  .hb-cta__eyebrow { font-size: 12px; margin-bottom: 0; color: var(--hb-champagne); }
  .hb-cta__head { display: none; }
  .hb-cta__microcopy { justify-content: center; font-size: 13px; color: rgba(255,255,255,.92); }
}
</content>
</invoke>