/* ==========================================================================
   FOOTER — DARK

   The page above is bone and white all the way down, so the footer is where
   it closes. An espresso band ends the page rather than letting it run out.

   The brand gradient appears exactly once, as a hairline across the top —
   the only place on the site the full palette is used at strength, which is
   what keeps it from becoming decoration.

   Contrast on a dark ground is the whole job here. Every value below was
   measured against white rather than chosen by eye.
   ========================================================================== */
.dftr {
  position: relative;
  overflow: hidden;   /* keeps the texture inside the footer */
  /* Warm ivory finish: a soft top-to-bottom fade with two very faint pools of
     light at the far edges, so the footer feels anchored rather than flat. The
     white payment boxes and the dark text both gain contrast against it. */
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 88% 74%, rgba(245,225,218,.30) 0%, rgba(245,225,218,0) 40%),
    linear-gradient(180deg, #FFFDFC 0%, #FBF7F4 48%, #F7EFEB 100%);
  color: #1C1A1A;
  padding-top: 76px;
}

/* Fabric-like diagonal texture, deliberately at the threshold of visibility.
   Above the gradient, below every piece of content. */
/* TEXTURE — a fine woven-fabric weave. Two crossing sets of hairlines at
   different pitches read as warp and weft, which suits a clothing label far
   better than a plain diagonal. Kept at the threshold of visibility so it adds
   depth without ever competing with the links. */
/* No grid or weave: a pair of soft leaf vines drawn along the far edges, so the
   texture is organic and the centre stays completely clear for the columns. */
/* Motifs drawn from what 5MA actually sells: a kurti on a hanger and a maxi
   dress, as fine outlines on the far edges. Reads immediately as a clothing
   label, and the centre stays clear for the columns. */
/* DEPTH — soft sculpted forms rather than flat line art. Each is a radial
   gradient with a light top-left and a shadowed lower-right, so it reads as a
   rounded shape catching light: dimensional without any 3D library. */
/* No decorative blobs here: sized background gradients render as visible
   rectangles, which looked broken. The footer's depth now comes purely from the
   base gradient on .dftr above. */

/* ACCENT — soft petal/leaf motifs echoing the gold lotus mark used on About Us.
   Placed only in the far lower corners, so the logo and the three link columns
   sit on a clean surface. Inline SVG in a data URI: no extra request. */
/* Fuller leaf blooms in the lower corners — deeper in tone so the footer has
   real presence, still well clear of the logo and the link columns. */
/* EMBOSSED GARMENTS — the same dress/hanger shapes, but drawn twice and offset
   by a pixel: a white pass above and a dark pass below. That is what makes them
   look pressed into the surface rather than printed on it. */
/* A single quiet garment outline at each far edge — small, soft and well away
   from the columns. Enough to say "clothing brand" without drawing attention. */
/* Full-width textile print. Every motif sits wholly inside a 140px tile, so it
   repeats seamlessly across the whole footer with no box edges — which is what
   made the earlier corner shapes show as rectangles. Blooms, leaf sprigs, seed
   dots and running-stitch marks: a fabric print for a clothing label. */
/* Herringbone weave — short diagonals turning direction row by row, the classic
   tailoring textile. Every stroke sits inside the 96px tile, so it repeats with
   no seams. Reads as woven cloth rather than a grid. */
/* The supplied ornamental artwork, tiled horizontally across the footer. It is
   already a soft ivory damask, so it needs no extra fading — it sits under the
   warm gradient above and behind all content. */
.dftr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("../images/decor/footer-pattern.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1000px auto;
}
/* Content sits above the background layers. The brand hairline is absolutely
   positioned, so it is excluded here and given its own z-index instead —
   otherwise this rule would knock it out of place. */
.dftr > *:not(.dftr__edge) { position: relative; z-index: 1; }
.dftr__edge { z-index: 2; }

/* The one full-strength moment */
.dftr__edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #4A266F 0%, #723665 22%, #9D485E 44%, #D25E4C 66%, #E56243 84%, #DE4149 100%);
}

/* ------------------------------------------------------------ 2. MAIN -- */
.dftr-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.05fr;
  gap: 48px 40px;
  padding-bottom: 56px;
}

.dftr-brand { min-width: 0; }
.dftr-brand__mark { display: inline-block; margin-bottom: 26px; }
.dftr-brand__mark img { display: block; width: 124px; height: auto; }

/* 12.62:1 on the ground */
.dftr-brand__say {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: #1C1A1A;
  max-width: 26ch;
  margin: 0 0 26px;
}
/* 6.14:1 — the accent has to be lighter here than it is on white, or it
   drops to 2.4 against the espresso */
.dftr-brand__say em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: #75174E;
}

/* --------------------------------------------------------------------------
   ASK US ON WHATSAPP

   A white pill with a hairline, not a filled green button. Green filled is
   what every site does with WhatsApp; a quiet pill sits inside the brand and
   lets the mark itself carry the recognition.

   The green arrives on hover — the fill sweeps in from the left rather than
   simply switching, which is what makes it feel considered rather than
   sudden.
   -------------------------------------------------------------------------- */
.dftr-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 26px;
  border: 1px solid #E4DCD8;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #1C1A1A;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .45s cubic-bezier(.16,1,.3,1),
              color .35s ease,
              box-shadow .45s cubic-bezier(.16,1,.3,1);
}

/* The sweep. A pseudo-element rather than a background transition, because a
   background cannot be animated from one edge. */
.dftr-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #177046;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}

.dftr-wa img {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.dftr-wa span { line-height: 1; }

.dftr-wa:hover {
  border-color: #177046;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(23,112,70,.20);
}
.dftr-wa:hover::before { transform: scaleX(1); }

.dftr-wa:focus-visible {
  outline: 2px solid #177046;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dftr-wa, .dftr-wa::before { transition: none; }
  .dftr-wa:hover::before { transform: scaleX(1); }
}


/* --------------------------------------------------------- 2b. COLUMNS -- */
.dftr-col { min-width: 0; }

.dftr-col__head {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1C1A1A;                 /* black; was #6D6767 */
  -webkit-text-fill-color: #1C1A1A; /* stop the site-wide h3 gradient from tinting it */
  background-image: none;
  margin: 0 0 20px;
}

.dftr-col ul { list-style: none; margin: 0; padding: 0; }
.dftr-col li { margin-bottom: 11px; }
.dftr-col li:last-child { margin-bottom: 0; }

.dftr-col a,
.dftr-col__plain li {
  font-size: 15px;
  color: #4E4A49;            /* 8.71:1 */
  transition: color .25s ease;
}
.dftr-col a:hover { color: #75174E; }

.dftr-open {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(120,80,70,.10);
}
.dftr-open > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.dftr-open dt { font-size: 15px; color: #6D6767; margin: 0; font-weight: 400;}
.dftr-open dd { font-size: 15px; color: #1C1A1A; margin: 0; font-weight: 400;}

/* ----------------------------------------------- 3. PAYMENT AND SOCIAL -- */
.dftr-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(120,80,70,.10);
}

.dftr-pay { display: flex; align-items: center; gap: 20px; }

.dftr-pay__label {
display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: capitalize;
  color: #6D6767;
  white-space: nowrap;
  margin: 0;
}

/* On white the marks need no chip behind them. Same height, own widths —
   a shared box would squash Google Pay and PhonePe against Mastercard. */
.dftr-pay__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dftr-pay__list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  padding: 0 9px;
  background: #fff;
  border: 1px solid rgba(120,80,70,.10);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(120, 80, 70, 0.06);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.dftr-pay__list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28, 26, 26, 0.08);
}
/* Same box for every mark; each logo keeps its own ratio, so none is
   stretched. Height is capped and width follows the artwork. */
.dftr-pay__list img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 22px;
  object-fit: contain;
}

.dftr-soc {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The four marks mix fill and stroke. Setting color alone leaves any path
   carrying its own fill attribute unstyled, which is why they vanished. */
.dftr-soc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}

/* These are <img> files, not inline SVG, so they need a size — an <img>
   with no width and an SVG with no intrinsic size renders at 0x0, which is
   why nothing appeared. Height is shared; width follows each mark's own
   ratio so none is stretched. */
.dftr-soc img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .9;
  transition: opacity .25s ease;
}

.dftr-soc a:hover { transform: translateY(-2px); }
.dftr-soc a:hover img { opacity: 1; }

/* ----------------------------------------------------------- 4. LEGAL -- */
.dftr-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(120,80,70,.10);
  font-size: 15px;
  color: #6D6767;            /* 5.31:1 */
}
.dftr-legal a { color: #6D6767; transition: color .25s ease; }
.dftr-legal a:hover { color: #75174E; }


/* ==========================================================================
   DARK FOOTER — PER DEVICE
   ========================================================================== */

@media (max-width: 1199.98px) {
  .dftr { padding-top: 60px; }
  .dftr-main { gap: 40px 32px; padding-bottom: 44px; }
  .dftr-brand__say { font-size: 18px; }
}

/* TABLET — the brand takes the full row, three columns follow */
@media (max-width: 991.98px) {
  .dftr-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .dftr-brand { grid-column: 1 / -1; }
  .dftr-brand__say { max-width: 44ch; }
}

@media (max-width: 767.98px) {
  .dftr { padding-top: 48px; }
  .dftr-main { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .dftr-brand__mark img { width: 108px; }
  .dftr-brand__say { font-size: 17px; max-width: none; }

  .dftr-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 0;
  }
  .dftr-pay { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* chips keep their uniform size and just wrap onto more rows */

  .dftr-legal { flex-direction: column; gap: 6px; }
}


/* ==========================================================================
   PRESERVED — newsletter, back to top, WhatsApp float
   Used outside the footer markup, so they survive the rebuild.
   ========================================================================== */
/* ==========================================================================
   PRESERVED — newsletter, back to top, WhatsApp float
   These are used outside the footer markup, so they survive the rebuild.
   ========================================================================== */
/* --------------------------------------------------------------------------
   2. NEWSLETTER
   The card lifts above the footer's top edge, so the section reads as a
   closing invitation rather than another row of links.
   -------------------------------------------------------------------------- */
.ftr-news {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 40px 48px;
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(28,26,26,.04),
              0 22px 56px rgba(28,26,26,.09);
}

.ftr-news__eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  color: #75174E;
  margin-bottom: 12px;
}

.ftr-news__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #1C1A1A;
  margin: 0 0 12px;
}

.ftr-news__text {
  font-size: 15px;
  line-height: 1.65;
  color: #6D6767;
  margin: 0;
}

/* Input and button share one pill, so the pair reads as a single control */
.ftr-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 24px;
  background: #FFFFFF;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  transition: border-color .24s ease, box-shadow .24s ease;
}

.ftr-field:focus-within {
  border-color: #75174E;
  box-shadow: 0 0 0 4px rgba(170,82,83,.10);
}

.ftr-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: #1C1A1A;
}

.ftr-field__input::placeholder { color: #6D6767; }

.ftr-field__input:focus { outline: none; }

.ftr-field__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .24s ease;
}

.ftr-field__btn:hover { background: #94215F; }

.ftr-field__btn svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }

.ftr-field__btn:hover svg { transform: translateX(4px); }

.ftr-news__note {
  font-size: 14px;
  line-height: 1.65;
  color: #6D6767;
  margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   6. BACK TO TOP
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #75174E;
  color: #fff;
  box-shadow: 0 6px 20px rgba(170,82,83,.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .3s, background .24s ease;
  z-index: 1030;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.to-top:hover { background: #94215F; }

.ftr-news { padding: 40px 32px; gap: 36px; }

.ftr-news { grid-template-columns: 1fr; gap: 26px; padding: 32px; }

.ftr-news { padding: 24px 24px; border-radius: 18px; }

.to-top { right: 24px; bottom: 78px; }

.ftr-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

.ftr-field__input { height: 42px; padding-inline: 8px; }

.ftr-field__btn { justify-content: center; width: 100%; }

.ftr-links a,
  .ftr-links a::before,
  .ftr-social a,
  .ftr-field__btn svg,
  .to-top { transition: none; }

@media (max-width: 1199.98px) {
  .ftr-news { padding: 40px 32px; gap: 36px; }
}

@media (max-width: 991.98px) {
  .ftr-news { grid-template-columns: 1fr; gap: 26px; padding: 32px; }
}

@media (max-width: 767.98px) {
  .ftr-news { padding: 24px 24px; border-radius: 18px; }
  .to-top { right: 24px; bottom: 78px; }
}

@media (max-width: 575.98px) {
  .ftr-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }
  .ftr-field__input { height: 42px; padding-inline: 8px; }
  .ftr-field__btn { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ftr-links a,
  .ftr-links a::before,
  .ftr-social a,
  .ftr-field__btn svg,
  .to-top { transition: none; }
}

/* The newsletter's own wrapper and form row, which were never styled */
.ftr-news__copy { max-width: 46ch; }
.ftr-news__form { margin-top: 20px; }


/* --------------------------------------------------------------------------
   STABILITY

   The footer jumped because the payment logos were lazy-loaded: a lazy image
   reserves no space until it decodes, so the band collapsed and then sprang
   open a moment later. They are 2-5KB each and sit at the foot of every
   page, so they now load eagerly with their box size fixed in CSS — the
   space is reserved before anything arrives.

   The row is also given a minimum height so it holds its shape even if a
   file fails outright.
   -------------------------------------------------------------------------- */
.ftr-pay__row { min-height: 78px; }
.ftr-pay__list { min-height: 34px; }

/* A missing SVG must not collapse its box */
.ftr-pay__list img { min-width: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ftr-links a,
  .ftr-links a::before,
  .ftr-pay__list li,
  .ftr-pay__list img,
  .ftr-social a,
  .ftr-wa { transition: none; }
  .ftr-links a:hover { transform: none; }
  .ftr-links a:hover::before { transform: scaleX(1); }
  .ftr-social a:hover,
  .ftr-pay__list li:hover { transform: none; }
}

/* ---- Global benefits strip (above the footer) ---------------------------
   One coral gradient band with four trust items. Grid-based, no JS and no
   carousel: every benefit stays visible at all sizes. */
.bstrip { padding: 0 0 40px; background: transparent; }
.bstrip__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center; gap: 0;
  border-radius: 20px; padding: 26px 18px;
  background: linear-gradient(100deg, #D9705C 0%, #C55A55 52%, #B04A56 100%);
  box-shadow: 0 14px 38px rgba(150, 70, 70, .16);
}
.bstrip__item {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 22px; min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, .18);   /* thin, semi-transparent */
}
.bstrip__item:first-child { border-left: 0; }
.bstrip__ico {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  color: #F7DFA5;                                    /* pale gold */
}
/* Every icon renders at the SAME optical size. The wrapper stays 36px for
   alignment, but the artwork inside is capped at 26px on BOTH axes — so a tall
   icon (the cotton reel) can no longer appear larger than a wide one, and
   uploaded images match the built-in SVGs exactly. Aspect ratio is preserved. */
.bstrip__ico svg,
.bstrip__ico img {
  width: 26px; height: 26px;
  max-width: 26px; max-height: 26px;
  display: block; object-fit: contain;
}
.bstrip__text { display: flex; flex-direction: column; min-width: 0; }
.bstrip__title {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.25; color: #fff;
  letter-spacing: .01em; overflow-wrap: anywhere;
}
.bstrip__sub {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 12.5px; font-weight: 400; line-height: 1.4; margin-top: 3px;
  color: rgba(255, 255, 255, .82); overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .bstrip__title { font-size: 15px; }
  .bstrip__item { padding: 6px 16px; gap: 12px; }
}
/* Tablet: 2 x 2. Dividers move so they never sit in an awkward position. */
@media (max-width: 900px) {
  .bstrip__inner { grid-template-columns: 1fr 1fr; row-gap: 20px; padding: 24px 14px; }
  .bstrip__item { border-left: 0; padding: 4px 14px; }
  .bstrip__item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.18); }
}
/* Mobile: keep 2 x 2 — all four benefits stay visible, no carousel. */
@media (max-width: 560px) {
  .bstrip { padding-bottom: 28px; }
  .bstrip__inner { border-radius: 16px; padding: 20px 8px; row-gap: 18px; }
  .bstrip__item { gap: 9px; padding: 2px 10px; }
  .bstrip__ico { width: 28px; height: 28px; flex-basis: 28px; }
  .bstrip__ico svg, .bstrip__ico img { width: 21px; height: 21px; max-width: 21px; max-height: 21px; }
  .bstrip__title { font-size: 12.5px; }
  .bstrip__sub { font-size: 10.5px; margin-top: 2px; }
}
/* Very narrow: single column rather than cramped text. */
@media (max-width: 360px) {
  .bstrip__inner { grid-template-columns: 1fr; row-gap: 14px; }
  .bstrip__item, .bstrip__item:nth-child(even) { border-left: 0; }
}


/* Mobile keeps the same warm background; the texture is eased back so the
   stacked links stay perfectly clean. */
@media (max-width: 640px) {
  .dftr::after { opacity: .7; background-size: 700px auto; }
}

/* ==========================================================================
   SITE-WIDE dark footer + floating Benefits Strip overlap.
   Applies on every page (the footer/benefits are the global footer). Placed
   after the base rules in this same file so it cleanly supersedes the previous
   light footer. Footer structure/content, the uploaded logo, payment logos and
   the semantic WhatsApp icon are untouched; the light damask texture is faded.
   ========================================================================== */

/* Benefits strip — premium rose -> orchid band, floating over the footer top */
.bstrip{ position: relative; z-index: 3; padding-bottom: 0; margin-bottom: -52px; }
.bstrip__inner{
  background:
    radial-gradient(circle at 88% 0%, rgba(247,175,206,.06), transparent 42%),
    linear-gradient(180deg, #2D1B2F 0%, #241626 100%);   /* same plum family as the footer */
  border: 1px solid rgba(247,175,206,.12);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(18,9,18,.22);
}
.bstrip__ico{ color: #F7AFCE; }                          /* rose accent so icons read on the dark card */
.bstrip__title{ color: #FDE7D2; }
.bstrip__sub{ color: #C6B3BD; }
.bstrip__item{ border-left-color: rgba(255,255,255,.12); }
.bstrip__item:nth-child(even){ border-left-color: rgba(255,255,255,.12); }

/* Footer — deep plum -> aubergine, with room at the top for the overlapping strip */
.dftr{
  position: relative;
  padding-top: 104px;
  background:
    radial-gradient(circle at 85% 0%, rgba(247,175,206,.06), transparent 40%),
    linear-gradient(180deg, #2D1B2F 0%, #231525 55%, #19101B 100%);
  border-top: 0;
  color: #E9E1E5;
}
.dftr::after{ opacity: .05; }
.dftr__edge{ opacity: .45; }
.dftr-col__head{ background-image: none; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; }
.dftr-brand__say{ color: #EDE6EA; }
.dftr-brand__say em{ color: #F7AFCE; }
.dftr-col, .dftr-col__plain, .dftr-col__plain li, .dftr-col__plain dt{ color: #ECE6EA; }
.dftr-col a, .dftr-col__plain a{ color: #F2ECEF; }
.dftr-col a:hover, .dftr-col__plain a:hover{ color: #FFFFFF; }
.dftr-col__plain a[href^="mailto"]{ color: #F7AFCE; }
.dftr-col__plain a[href^="mailto"]:hover{ color: #FFFFFF; }
.dftr-open dt{ color: #CFC4CB; }
.dftr-open dd{ color: #FFFFFF; }
.dftr-open, .dftr-band, .dftr-legal{ border-top-color: rgba(253,231,210,.10); }
.dftr-legal, .dftr-legal a{ color: #C3B7BF; }
.dftr-legal a:hover{ color: #FFFFFF; }
.dftr-pay__label{ color: #ECE6EA; }
.dftr-soc a{ background: #FFFFFF; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.dftr-soc a:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.dftr-soc a img, .dftr-soc img{ opacity: 1; }

/* Back-to-top control */
.to-top{ background: #342435; color: #FFF8F4; }
.to-top:hover{ background: #342435; color: #FFF8F4; }

/* Overlap: gentler where the strip stacks taller on smaller screens */
@media (max-width: 768px){
  .bstrip{ margin-bottom: -40px; }
  .dftr{ padding-top: 86px; }
}
@media (max-width: 430px){
  .bstrip{ margin-bottom: -34px; }
  .dftr{ padding-top: 74px; }
}

/* --- Global floating WhatsApp button (desktop only) ----------------------- */
.wa-float {
  position: fixed;
  right: 24px;                  /* same right edge as the back-to-top button */
  bottom: 150px;                /* stacked well above the back-to-top with a large clear gap */
  width: 48px;                  /* same size as the back-to-top button */
  height: 48px;
  border-radius: 50%;
  background: #25D366;          /* official WhatsApp green */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.38);
  text-decoration: none;
  z-index: 1029;                /* just below the back-to-top (1030); below drawers/modals */
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: wa-float-in .45s ease forwards;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float__icon { font-size: 24px; line-height: 1; position: relative; z-index: 2; }
/* Keep the icon white in every state — overrides the global a:hover colour. */
.wa-float,
.wa-float:hover,
.wa-float:focus,
.wa-float:active,
.wa-float:visited,
.wa-float:hover .wa-float__icon,
.wa-float:focus .wa-float__icon { color: #fff; }
.wa-float:hover { transform: translateY(0) scale(1.06); box-shadow: 0 10px 26px rgba(37,211,102,.5); }
.wa-float:focus-visible { outline: 3px solid rgba(37,211,102,.5); outline-offset: 3px; }

/* Soft premium pulse — a gentle ring expands and fades, button stays stable. */
.wa-float__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: 1;
  pointer-events: none;         /* decorative only — it grows to 1.55x while invisible and was swallowing taps on form controls beneath it (e.g. the password eye on phones) */
  animation: wa-float-pulse 2.6s ease-out infinite;
}

/* While a text field is focused on a touch screen the keyboard is open and the
   floats are useless — hide them so they can never cover a field's eye button
   (body.is-typing is set by main.js). */
@media (max-width: 991.98px) {
  body.is-typing .wa-float,
  body.is-typing .to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .15s ease, visibility 0s linear .15s; }
}

/* Tooltip to the LEFT of the icon (button is on the right edge). */
.wa-float__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #25D366;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37,211,102,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.wa-float__tip::after {              /* little arrow pointing right at the icon */
  content: ""; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: #25D366;
}
.wa-float:hover .wa-float__tip,
.wa-float:focus-visible .wa-float__tip {
  opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

@keyframes wa-float-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wa-float-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Hide while a drawer/modal is open (body gets .is-locked) so it never covers
   the mini-cart, nav drawer, or any overlay. */
body.is-locked .wa-float { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; }

/* Respect reduced-motion: no pulse, no entrance animation. */
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; opacity: 1; transform: none; }
  .wa-float__ring { animation: none; opacity: 0; }
  .wa-float:hover { transform: scale(1.04); }
}

/* WhatsApp button is shown on ALL screen sizes. On mobile it sits above the
   back-to-top button (which moves to bottom:78px there) with a clear gap. */
@media (max-width: 767.98px) {
  .wa-float { bottom: 138px; }   /* clears the back-to-top at bottom:78px (78 + 48 + 12) */
}