/*
 * Hair by Finocas reusable campaign slot
 * --------------------------------------
 * Visual styles for the global promotion ribbon, homepage campaign spotlight,
 * booking notice and service eligibility labels. Campaign dates and copy live
 * in assets/js/promotion.js so future promotions can be replaced centrally.
 */
:root{
  --hbf-header-height:128px;
  --hbf-promo-height:0px;
}

.promotion-ribbon{
  position:fixed;
  top:var(--hbf-header-height);
  right:0;
  left:0;
  z-index:98;
  overflow:hidden;
  border-bottom:1px solid rgba(239,210,141,.34);
  background:
    radial-gradient(circle at 12% 50%,rgba(239,210,141,.16),transparent 19rem),
    linear-gradient(105deg,rgba(16,15,12,.99),rgba(5,5,5,.995) 58%,rgba(20,16,7,.99));
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  color:#fff;
}
.promotion-ribbon::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);
  transform:translateX(-100%);
  animation:hbf-promo-sheen 8s ease-in-out infinite;
}
.promotion-ribbon-inner{
  position:relative;
  min-height:78px;
  display:grid;
  grid-template-columns:auto minmax(260px,1fr) auto auto;
  align-items:center;
  gap:22px;
  padding-block:11px;
}
.promotion-discount-chip{
  min-width:92px;
  min-height:52px;
  display:grid;
  place-items:center;
  padding:8px 14px;
  border:1px solid rgba(239,210,141,.55);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(239,210,141,.16),rgba(212,175,55,.06));
  color:var(--gold-light,#efd28d);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
.promotion-ribbon-copy{min-width:0}
.promotion-ribbon-kicker{
  display:block;
  margin-bottom:2px;
  color:var(--gold-light,#efd28d);
  font-size:.62rem;
  font-weight:750;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.promotion-ribbon-title{
  display:block;
  color:#fff;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:clamp(1.05rem,1.7vw,1.42rem);
  font-weight:650;
  line-height:1.06;
}
.promotion-ribbon-meta{
  display:block;
  margin-top:3px;
  color:#bbb9b2;
  font-size:.65rem;
  line-height:1.25;
}
.promotion-countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(43px,1fr));
  gap:6px;
  min-width:205px;
}
.promotion-countdown-unit{
  min-height:49px;
  display:grid;
  align-content:center;
  justify-items:center;
  padding:4px 6px;
  border:1px solid rgba(229,192,123,.21);
  border-radius:11px;
  background:rgba(255,255,255,.028);
}
.promotion-countdown-unit b{
  color:#fff;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:1.22rem;
  font-variant-numeric:tabular-nums;
  line-height:.95;
}
.promotion-countdown-unit small{
  margin-top:4px;
  color:#aaa8a0;
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.promotion-ribbon-cta{
  min-height:48px;
  padding-inline:20px;
  white-space:nowrap;
}

body.hbf-promotion-active main{
  padding-top:var(--hbf-promo-height);
}
body.hbf-promotion-active .hero{
  min-height:max(700px,calc(100svh - var(--hbf-promo-height)));
}
body.hbf-promotion-active .page-hero{
  min-height:max(480px,calc(560px - var(--hbf-promo-height)));
}
body.hbf-promotion-active .mobile-menu{
  inset:calc(var(--hbf-header-height) + var(--hbf-promo-height)) 0 0 !important;
}
html.hbf-promotion-active{
  scroll-padding-top:calc(var(--hbf-header-height) + var(--hbf-promo-height) + 18px) !important;
}

/* Permanent reusable campaign position on the homepage. */
.promotion-zone{
  position:relative;
  padding:34px 0 0;
  background:#050505;
}
.promotion-spotlight{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) auto;
  align-items:center;
  gap:42px;
  padding:38px 42px;
  border:1px solid rgba(239,210,141,.48);
  border-radius:30px;
  background:
    radial-gradient(circle at 4% 50%,rgba(239,210,141,.17),transparent 21rem),
    radial-gradient(circle at 88% 12%,rgba(212,175,55,.11),transparent 22rem),
    linear-gradient(135deg,#11100e,#070707 68%,#0e0b05);
  box-shadow:0 28px 90px rgba(0,0,0,.43),inset 0 0 0 1px rgba(255,255,255,.018);
}
.promotion-spotlight::after{
  content:"";
  position:absolute;
  width:320px;
  aspect-ratio:1;
  right:-170px;
  bottom:-220px;
  border:1px solid rgba(229,192,123,.14);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(229,192,123,.025),0 0 0 78px rgba(229,192,123,.018);
}
.promotion-offer-mark{
  position:relative;
  z-index:1;
  min-height:170px;
  display:grid;
  align-content:center;
  justify-items:center;
  border:1px solid rgba(239,210,141,.5);
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,192,123,.13),rgba(212,175,55,.025) 64%,transparent 65%);
  text-align:center;
}
.promotion-offer-mark span,
.promotion-offer-mark small{
  color:var(--gold-light,#efd28d);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.promotion-offer-mark strong{
  display:block;
  margin-block:-4px;
  background:var(--gold-gradient,linear-gradient(118deg,#f1d493,#d4af37,#997a15));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:4.4rem;
  line-height:1;
}
.promotion-spotlight-copy{position:relative;z-index:1}
.promotion-spotlight-copy .eyebrow{margin-bottom:14px}
.promotion-spotlight-copy h2{
  max-width:720px;
  font-size:clamp(2.3rem,4vw,4.25rem);
}
.promotion-spotlight-copy p{
  max-width:680px;
  margin-top:16px;
}
.promotion-terms{
  margin-top:13px;
  color:#9e9c95;
  font-size:.68rem;
  line-height:1.45;
}
.promotion-spotlight-action{
  position:relative;
  z-index:1;
  min-width:250px;
  display:grid;
  gap:14px;
  justify-items:stretch;
}
.promotion-spotlight-action .promotion-countdown{
  min-width:0;
}
.promotion-spotlight-action .btn{width:100%}
.promotion-no-code{
  color:#aaa79e;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.09em;
  text-align:center;
  text-transform:uppercase;
}

/* Booking-page reminder shown before the booking interface. */
.promotion-booking-callout{
  padding:30px 0 0;
  background:#050505;
}
.promotion-booking-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:22px 25px;
  border:1px solid rgba(239,210,141,.38);
  border-radius:20px;
  background:linear-gradient(110deg,rgba(229,192,123,.09),rgba(255,255,255,.018) 52%,rgba(212,175,55,.045));
}
.promotion-booking-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(239,210,141,.5);
  border-radius:50%;
  color:var(--gold-light,#efd28d);
  font:700 1.42rem var(--serif,"Cormorant Garamond",Georgia,serif);
}
.promotion-booking-copy strong{
  display:block;
  color:#fff;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:1.48rem;
  line-height:1.05;
}
.promotion-booking-copy span{
  display:block;
  margin-top:5px;
  color:#bbb9b2;
  font-size:.76rem;
}
.promotion-booking-deadline{
  color:var(--gold-light,#efd28d);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.1em;
  text-align:right;
  text-transform:uppercase;
}

/* Service catalogue labels: no exact percentage is claimed per service. */
.promotion-service-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  margin-top:8px;
  padding:5px 9px;
  border:1px solid rgba(239,210,141,.34);
  border-radius:999px;
  background:rgba(212,175,55,.065);
  color:var(--gold-light,#efd28d);
  font-size:.57rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.15;
  text-transform:uppercase;
}
.promotion-service-tag::before{
  content:"✦";
  font-size:.65rem;
}
.row-price + .promotion-service-tag{margin-top:6px}

@keyframes hbf-promo-sheen{
  0%,70%,100%{transform:translateX(-105%)}
  82%{transform:translateX(105%)}
}

@media(max-width:1080px){
  .promotion-ribbon-inner{grid-template-columns:auto 1fr auto;gap:15px}
  .promotion-ribbon-meta{display:none}
  .promotion-ribbon-cta{display:none}
  .promotion-spotlight{grid-template-columns:155px 1fr;gap:30px}
  .promotion-offer-mark{min-height:145px}
  .promotion-offer-mark strong{font-size:3.75rem}
  .promotion-spotlight-action{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;min-width:0}
  .promotion-spotlight-action .btn{width:auto}
}

@media(max-width:760px){
  .promotion-ribbon-inner{
    min-height:104px;
    grid-template-columns:auto 1fr;
    gap:8px 12px;
    padding-block:9px;
  }
  .promotion-discount-chip{
    grid-row:1/3;
    min-width:72px;
    min-height:72px;
    padding-inline:8px;
    font-size:.58rem;
    white-space:normal;
  }
  .promotion-ribbon-kicker{font-size:.53rem;letter-spacing:.11em}
  .promotion-ribbon-title{font-size:1rem}
  .promotion-countdown{
    grid-column:2;
    grid-template-columns:repeat(3,minmax(39px,1fr));
    min-width:0;
    max-width:245px;
  }
  .promotion-countdown-unit{min-height:38px;padding:3px 4px;border-radius:9px}
  .promotion-countdown-unit b{font-size:1rem}
  .promotion-countdown-unit small{font-size:.43rem;margin-top:2px}
  .promotion-countdown-unit[data-promo-unit="seconds"]{display:none}
  body.hbf-promotion-active .hero{
    min-height:max(720px,calc(850px - var(--hbf-promo-height)));
  }
  body.hbf-promotion-active .page-hero{
    min-height:max(440px,calc(500px - var(--hbf-promo-height)));
  }
  .promotion-zone{padding-top:22px}
  .promotion-spotlight{
    grid-template-columns:1fr;
    gap:24px;
    padding:30px 21px;
    border-radius:24px;
    text-align:center;
  }
  .promotion-offer-mark{width:150px;min-height:150px;margin-inline:auto}
  .promotion-spotlight-copy .eyebrow{justify-content:center}
  .promotion-spotlight-copy p{margin-inline:auto}
  .promotion-spotlight-action{grid-column:auto;grid-template-columns:1fr}
  .promotion-spotlight-action .btn{width:100%}
  .promotion-booking-card{grid-template-columns:auto 1fr;padding:19px}
  .promotion-booking-deadline{grid-column:1/-1;text-align:left}
}

@media(max-width:430px){
  .promotion-ribbon-inner{gap:7px 9px}
  .promotion-discount-chip{min-width:64px;min-height:68px;font-size:.53rem}
  .promotion-ribbon-title{font-size:.9rem}
  .promotion-countdown{gap:4px}
}

@media(prefers-reduced-motion:reduce){
  .promotion-ribbon::before{animation:none}
}