/* Editorial storefront palette — matches the Hummingbird child theme and the mail templates.
   Deliberately no web-font @import: the theme already loads Cormorant/Inter, and a second
   request here would block render on every page for one band. */
:root {
  --wf-ref-ink:   #23201C;
  --wf-ref-mute:  #6B6259;
  --wf-ref-wine:  #8B0000;
  --wf-ref-gold:  #B08A3E;
  --wf-ref-line:  #DFD4C2;
  --wf-ref-parch: #F3EDE2;
}

.wf-referral-eyebrow {
  font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--wf-ref-gold); font-weight: 600; margin: 0 0 .5rem;
}
.wf-referral-title,
.wf-referral-page h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; line-height: 1.15; color: var(--wf-ref-ink);
  font-weight: 600; margin: 0 0 .75rem;
}
.wf-referral-body,
.wf-referral-lede { color: var(--wf-ref-mute); line-height: 1.7; max-width: 34rem; }
.wf-referral-lede { font-size: 1.0625rem; }

/* The code is the one thing on the page a customer needs to copy. Monospaced digits so
   O/0 confusion cannot creep back in visually, and selectable — never an image. */
.wf-referral-codebox {
  border: 1px solid var(--wf-ref-gold); border-radius: 3px;
  background: var(--wf-ref-parch); padding: 1.25rem 1.75rem;
  margin: 1.5rem auto; text-align: center;
  /* Sizes to the code rather than to a guessed width. max-width: 22rem was narrower than
     "FRIENDS-XXXXXX" at 1.875rem Cormorant, so the code broke across two lines on desktop
     while fitting on mobile, where the font drops to 1.5rem. */
  width: fit-content;
  max-width: 100%;
}
.wf-referral-code-label {
  font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--wf-ref-gold); font-weight: 600; margin: 0 0 .35rem;
}
.wf-referral-code {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.875rem; font-weight: 600; letter-spacing: .06em;
  color: var(--wf-ref-wine); margin: 0; user-select: all;
  /* A code split across two lines cannot be read aloud or copied by eye, which is most of the
     point of it. */
  white-space: nowrap;
}
/*
 * The account-sidebar row. The anchor itself is styled by the theme (account-menu__link is
 * display:flex, gap .5rem, padding .75rem 1rem) — all this adds is stacking the code under the
 * label so the row keeps the same height and left edge as Information / Addresses / Vouchers.
 */
.wf-referral-account__label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wf-referral-account__code {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--wf-ref-gold);
  margin-top: 0.125rem;
}

.wf-referral-band {
  border-top: 1px solid var(--wf-ref-line); border-bottom: 1px solid var(--wf-ref-line);
  background: var(--wf-ref-parch); padding: 2.5rem 0; margin: 2.5rem 0; text-align: center;
}
.wf-referral-band .wf-referral-body { margin-left: auto; margin-right: auto; }
.wf-referral-band .wf-referral-codebox { margin-left: auto; margin-right: auto; }

.wf-referral-link {
  display: inline-block; margin-top: 1rem;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wf-ref-wine); text-decoration: none; font-weight: 600;
}
.wf-referral-link:hover { color: var(--wf-ref-gold); }

.wf-referral-page h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.375rem; color: var(--wf-ref-ink); font-weight: 600; margin: 2rem 0 .75rem;
}
.wf-referral-steps, .wf-referral-terms { color: var(--wf-ref-mute); line-height: 1.8; max-width: 34rem; }
.wf-referral-summary { color: var(--wf-ref-gold); font-size: .9375rem; }

/* Cart note. Small, but it is the last moment before someone finds out the code did not
   apply, so the terms sit here as well as on the CMS page. */
.wf-referral-cart-note {
  font-size: .8125rem; line-height: 1.6; color: var(--wf-ref-mute);
  border-top: 1px solid var(--wf-ref-line); padding-top: .75rem; margin-top: .75rem;
}
.wf-referral-cart-terms { display: block; font-size: .75rem; opacity: .85; margin-top: .25rem; }

@media (max-width: 480px) {
  .wf-referral-title, .wf-referral-page h2 { font-size: 1.625rem; }
  /* Smaller here so white-space: nowrap cannot push the code past the edge of a narrow screen. */
  .wf-referral-code { font-size: 1.375rem; letter-spacing: .04em; }
  .wf-referral-codebox { padding: 1rem 1.25rem; }
}

/* Top utility bar link, sitting beside "Contact us". Matches its weight and colour rather
   than shouting — it is a standing offer, not a promotion of the week. */
.wf-referral-nav {
  margin-left: 1.25rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.wf-referral-nav:hover,
.wf-referral-nav:focus {
  color: var(--wf-burgundy, #8b0000);
  text-decoration: underline;
}

#_desktop_ps_contactinfo,
#_desktop_ps_contactinfo .ps-contactinfo {
  display: inline-flex;
  align-items: center;
}

/* A hairline between "Contact us" and this link. Two plain-text links side by side read as one
   phrase without something between them — spacing alone was not enough to separate them. */
.wf-referral-nav::before {
  content: "|";
  margin-right: 1.25rem;
  color: currentColor;
  opacity: 0.35;
}

/*
 * MOBILE.
 *
 * The top utility bar is `d-none d-md-block`, so this link vanishes entirely below 768px — the
 * header there is only burger / logo / search / account / cart, with no room for a text link.
 * So the entry also lives in ps_mainmenu, which builds the burger menu, and is hidden from the
 * DESKTOP tree only. One menu entry, the right placement at each size, and no user ever sees it
 * twice: desktop gets the top bar, mobile gets the burger.
 *
 * ⚠️ Without this rule the desktop nav goes back to seven items and wraps onto two lines below
 * 1400px, which is what moving it to the top bar was meant to fix.
 */
.ps-mainmenu__desktop [data-id="lnk-refer-a-friend"] {
  display: none;
}

/* --------------------------- Earned rewards list -------------------------- */
/* Capped to roughly the text measure of the page. Without it the row spans the full window and
   `margin-left: auto` throws the copy icon hundreds of pixels away from the code it copies. */
.wf-referral-rewards { margin: 2rem 0; max-width: 34rem; }

.wf-referral-rewards__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-referral-rewards__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wf-ref-line);
}

/* Spent and expired rewards stay listed rather than disappearing — a customer who remembers
   having one should find out what became of it, not find an empty list. */
.wf-referral-rewards__item--spent { opacity: 0.55; }

.wf-referral-rewards__code {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wf-ref-gold);
}

.wf-referral-rewards__meta { font-size: 0.875rem; }

/* Pushed to the right-hand edge of the row, level with the code it copies. */
.wf-referral-rewards__item .wf-referral-iconbtn { margin-left: auto; }

/* ---------------------- Copy + send, one row ------------------------------- */
/*
 * Copy, WhatsApp, email and the share sheet are one decision, so they are one row. They were a
 * text button and then a separate headed block, which read as two unrelated features stacked on
 * top of each other.
 *
 * ⚠️ .wf-referral-copy carries NO styling any more -- it is a JS hook and nothing else. It used
 * to style a text button (min-width: 6.5rem, padding, margin-top), and when the copy control
 * became an icon those rules were still in the file, later than .wf-referral-iconbtn, so they
 * won: the clipboard button rendered 6.5rem wide and pushed down a line while the other three
 * stayed square. Do not give this class dimensions again.
 *
 * Wraps rather than scrolls: on a narrow phone the icons drop onto a second line instead of
 * pushing the code box wider than the screen.
 */
.wf-referral-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

/*
 * Icon-only, square, same height as the theme's small button so the row has one baseline.
 * Burgundy on parchment, filling in on hover -- the brand palette, not WhatsApp green: three
 * differently-coloured buttons beside each other would read as three unrelated things.
 */
.wf-referral-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--wf-ref-gold);
  border-radius: 3px;
  background: transparent;
  color: var(--wf-ref-wine);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* pointer-events: none so a click always reports the BUTTON as its target rather than the path
   inside it -- the copy handler is delegated from document and walks up with closest(). */
.wf-referral-iconbtn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  pointer-events: none;
}

.wf-referral-iconbtn:hover,
.wf-referral-iconbtn:focus-visible {
  background: var(--wf-ref-wine);
  color: #fff;
  /* The anchors inherit the theme's link underline on hover, which draws a line under an icon. */
  text-decoration: none;
}

.wf-referral-cart-note--pending { color: var(--wf-ref-wine); font-weight: 600; }

/* ------------------------- Invite strip (top of page) ---------------------- */
/*
 * One quiet line above everything, for a visitor who arrived on a friend's link.
 *
 * ⚠️ This replaced a branch of the homepage band, which sits roughly 60% down the front page.
 * An invited visitor could read the entire homepage and never learn a discount was waiting, and
 * on any other landing page would never see it at all.
 *
 * Burgundy on parchment rather than a full burgundy bar: it sits directly above the header, and
 * a saturated band there competed with the logo.
 */
.wf-referral-strip {
  background: var(--wf-ref-parch);
  border-bottom: 1px solid var(--wf-ref-line);
  font-size: 0.8125rem;
  color: var(--wf-ref-ink);
}

.wf-referral-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
}

.wf-referral-strip__text { margin: 0; text-align: center; }

.wf-referral-strip__link {
  color: var(--wf-ref-wine);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 0.5rem;
}

/* Sits at the right-hand end without pushing the message off-centre: the flex row centres the
   text, and the button is pulled out of that centring by the auto margin. */
.wf-referral-strip__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wf-ref-mute);
  cursor: pointer;
  flex: none;
}

.wf-referral-strip__close:hover { color: var(--wf-ref-wine); }
.wf-referral-strip__close svg { pointer-events: none; }

/* The cart line that names the applied code, beside the now-open voucher field. */
.wf-referral-cart-note--applied { color: var(--wf-ref-wine); font-weight: 600; }

.wf-referral-cart-note__code {
  display: inline-block;
  letter-spacing: 0.08em;
  color: var(--wf-ref-gold);
}