/* Glo Little Luxury — First Friday (v2 homepage section and /first-friday/).
 *
 * Loaded with ?design=v2 on the homepage and the First Friday page, after
 * glo-v2-base.css. Markup: glo_ff_render_feature() in inc/first-friday.php and
 * templates/page-first-friday-v2.php.
 *
 * The shape language is the hero gallery's: a photo tile with steps cut out of
 * its corners in the section ground, rounded where they meet the photo, with a
 * fillet on each side so the photo's new corners are round too. The date tile
 * and a close-up sit inside the steps like puzzle pieces. On phones the title
 * block steps up into the bottom of the photo instead.
 */

/* ==========================================================================
   1. Section
   ========================================================================== */
.glo-home-v2 .glo-v2-ff { background: var(--glo-bg); padding: clamp(56px, 8vw, 104px) 0; }
.glo-first-friday-v2 .glo-ffp-hero { background: var(--glo-bg); padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); }

/* ==========================================================================
   2. The feature: copy beside the stepped photo
   ========================================================================== */
.glo-ff {
  --ff-ground: var(--glo-bg);
  --ff-radius: 22px;
  --ff-fillet: 16px;
  --ff-gap: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.glo-ff__copy { max-width: 540px; }

.glo-ff .glo-ff__tag {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--glo-teal-ink);
}
.glo-ff .glo-ff__title {
  margin: 0 0 16px;
  font-family: var(--glo-font-display);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--glo-ink);
  text-wrap: balance;
}
.glo-ff .glo-ff__blurb {
  max-width: 46ch;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--glo-ink-soft);
  text-wrap: pretty;
}

/* What is in the set: three small tiles, photo and name. */
.glo-ff ul.glo-ff__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.glo-ff__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  background: var(--glo-cream);
}
.glo-ff__item-img {
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--glo-linen);
}
.glo-ff__item-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.glo-ff__item-name { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--glo-ink); overflow-wrap: anywhere; }

.glo-ff__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.glo-ff__now { font-family: var(--glo-font-display); font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--glo-ink); }
.glo-ff__now--soon { font-family: var(--glo-font-body); font-size: 18px; color: var(--glo-teal-ink); }
.glo-ff__was { font-size: 16px; color: var(--glo-ink-soft); }
.glo-ff .glo-ff__save { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--glo-coral); }

.glo-ff__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.glo-ff__btn { min-width: 180px; }
.glo-ff__count { font-size: 14px; color: var(--glo-ink-soft); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. The stepped photo
   ========================================================================== */
.glo-ff__media { position: relative; height: clamp(380px, 38vw, 500px); }
.glo-ff__photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--ff-radius);
  background: var(--glo-teal-50);
}
.glo-ff__photo img { width: 100%; height: 100%; object-fit: cover; }
.glo-ff__slot { padding: 12px; font-size: 13px; line-height: 1.4; text-align: center; color: var(--glo-ink-soft); }

/* A step: a block of section ground over the photo's corner. */
.glo-ff__cut { position: absolute; background: var(--ff-ground); }
.glo-ff__cut::before,
.glo-ff__cut::after {
  content: "";
  position: absolute;
  width: var(--ff-fillet);
  height: var(--ff-fillet);
  pointer-events: none;
}

/* Top-left step: the date tile. */
.glo-ff__cut--date {
  top: 0;
  left: 0;
  padding: 0 var(--ff-gap) var(--ff-gap) 0;
  border-bottom-right-radius: var(--ff-radius);
}
.glo-ff__cut--date::before,
.glo-ff__cut--date::after {
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--ff-fillet) - .5px), var(--ff-ground) var(--ff-fillet));
}
.glo-ff__cut--date::before { top: 0; left: 100%; }
.glo-ff__cut--date::after { top: 100%; left: 0; }

.glo-ff__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 14px 20px 16px;
  border-radius: 16px;
  background: var(--glo-teal-deep);
  color: var(--glo-teal-100);
}
.glo-ff .glo-ff__date-label { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--glo-teal-100); }
.glo-ff .glo-ff__date-day {
  font-family: var(--glo-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

/* Bottom-left step: a close-up of the set. */
.glo-ff__cut--detail {
  bottom: 0;
  left: 0;
  padding: var(--ff-gap) var(--ff-gap) 0 0;
  border-top-right-radius: var(--ff-radius);
}
.glo-ff__cut--detail::before,
.glo-ff__cut--detail::after {
  background: radial-gradient(circle at 100% 0, transparent calc(var(--ff-fillet) - .5px), var(--ff-ground) var(--ff-fillet));
}
.glo-ff__cut--detail::before { bottom: 100%; left: 0; }
.glo-ff__cut--detail::after { bottom: 0; left: 100%; }
.glo-ff__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(112px, 11vw, 148px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--glo-linen);
}

/* ==========================================================================
   4. Tablet and phone
   Tablet: the photo moves above the copy. Phone: the date step moves to the
   top right (the hero's corner), the close-up drops out, and the tag and
   title step up into the bottom of the photo.
   ========================================================================== */
@media (max-width: 900px) {
  .glo-ff { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .glo-ff__media { order: -1; height: clamp(340px, 62vw, 460px); }
  .glo-ff__copy { max-width: 620px; }
}

@media (max-width: 600px) {
  .glo-ff { --ff-radius: 20px; --ff-fillet: 14px; --ff-gap: 8px; gap: 0; }
  .glo-ff__media { height: auto; aspect-ratio: 4 / 4.4; }
  .glo-ff__cut--detail { display: none; }

  .glo-ff__cut--date {
    left: auto;
    right: 0;
    padding: 0 0 var(--ff-gap) var(--ff-gap);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--ff-radius);
  }
  .glo-ff__cut--date::before,
  .glo-ff__cut--date::after {
    background: radial-gradient(circle at 0 100%, transparent calc(var(--ff-fillet) - .5px), var(--ff-ground) var(--ff-fillet));
  }
  .glo-ff__cut--date::before { left: auto; right: 100%; }
  .glo-ff__cut--date::after { left: auto; right: 0; }
  .glo-ff__date { min-width: 0; padding: 10px 16px 12px; border-radius: 14px; }
  .glo-ff .glo-ff__date-label { font-size: 12px; }
  .glo-ff .glo-ff__date-day { font-size: 21px; }

  /* The title block steps up into the photo's bottom-left corner. */
  .glo-ff__head {
    position: relative;
    z-index: 1;
    width: 86%;
    margin-top: -76px;
    padding: 16px 16px 0 0;
    border-top-right-radius: var(--ff-radius);
    background: var(--ff-ground);
  }
  .glo-ff__head::before,
  .glo-ff__head::after {
    content: "";
    position: absolute;
    width: var(--ff-fillet);
    height: var(--ff-fillet);
    background: radial-gradient(circle at 100% 0, transparent calc(var(--ff-fillet) - .5px), var(--ff-ground) var(--ff-fillet));
    pointer-events: none;
  }
  .glo-ff__head::before { bottom: 100%; left: 0; }
  .glo-ff__head::after { top: calc(76px - var(--ff-fillet)); left: 100%; }

  .glo-ff .glo-ff__tag { margin-bottom: 8px; }
  .glo-ff .glo-ff__title { margin-bottom: 12px; font-size: clamp(26px, 7.4vw, 30px); }
  .glo-ff .glo-ff__blurb { margin-bottom: 20px; font-size: 15px; }

  .glo-ff ul.glo-ff__items { gap: 8px; margin-bottom: 20px; }
  .glo-ff__item { flex-direction: column; gap: 8px; padding: 10px 6px 12px; text-align: center; }
  .glo-ff__item-img { width: 48px; height: 48px; }
  .glo-ff__item-name { font-size: 12px; }

  .glo-ff__now { font-size: 28px; }
  .glo-ff__now--soon { font-size: 17px; }
  .glo-ff__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
  .glo-ff__btn { width: 100%; min-width: 0; }
  .glo-ff__count { text-align: center; }
}

/* ==========================================================================
   5. /first-friday/: header band
   ========================================================================== */
.glo-ffp-head { background: var(--glo-bg); }
.glo-ffp-head__inner { padding-top: clamp(32px, 5vw, 64px); padding-bottom: 8px; }
.glo-first-friday-v2 .glo-ffp-head__title {
  margin: 0 0 12px;
  font-family: var(--glo-font-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--glo-ink);
}
.glo-first-friday-v2 .glo-ffp-head__lede { max-width: 58ch; margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--glo-ink-soft); text-wrap: pretty; }
.glo-first-friday-v2 .glo-ffp-head__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.glo-ffp-head__date {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--glo-teal-50);
  font-size: 14px;
  font-weight: 600;
  color: var(--glo-teal-ink);
}
.glo-ffp-head__count { font-size: 14px; color: var(--glo-ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .glo-first-friday-v2 .glo-ffp-head__lede { font-size: 16px; }
}

/* ==========================================================================
   6. /first-friday/: the other sets
   ========================================================================== */
.glo-ffp-sets__head { flex-direction: column; align-items: flex-start; gap: 6px; }
.glo-first-friday-v2 .glo-ffp-sets__head h2 { margin: 0; }
.glo-first-friday-v2 .glo-ffp-sets__note { margin: 0; font-size: 15px; color: var(--glo-ink-soft); }

.glo-ffp-sets__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.glo-ffset {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 16px 20px;
  border-radius: var(--glo-radius-lg);
  background: var(--glo-surface);
  box-shadow: 0 1px 2px rgba(23, 24, 26, .04), 0 8px 24px rgba(23, 24, 26, .05);
}
.glo-ffset__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.glo-ffset__thumb { aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--glo-cream); }
.glo-ffset__thumb img { width: 100%; height: 100%; padding: 6px; object-fit: contain; background: #fff; }
.glo-ffset__thumb:first-child { border-bottom-left-radius: 4px; }
.glo-ffset__thumb:last-child { border-top-right-radius: 4px; }

.glo-ffset__body { display: flex; flex: 1; flex-direction: column; padding: 0 4px; }
.glo-first-friday-v2 .glo-ffset__cat { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--glo-teal-ink); }
.glo-first-friday-v2 .glo-ffset__name { margin: 0 0 10px; font-family: var(--glo-font-display); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--glo-ink); }
.glo-first-friday-v2 ul.glo-ffset__list { display: grid; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--glo-ink-soft); }
.glo-first-friday-v2 .glo-ffset__list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--glo-border); }
.glo-first-friday-v2 .glo-ffset__list a:hover { text-decoration-color: currentColor; }
.glo-ffset__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: auto; font-variant-numeric: tabular-nums; }
.glo-ffset__now { font-family: var(--glo-font-display); font-size: 24px; font-weight: 600; color: var(--glo-ink); }
.glo-ffset__now--soon { font-family: var(--glo-font-body); font-size: 16px; color: var(--glo-teal-ink); }
.glo-ffset__was { font-size: 15px; color: var(--glo-ink-soft); }
.glo-first-friday-v2 .glo-ffset__save { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--glo-coral); }
.glo-ffset__btn { width: 100%; margin-top: 16px; }
.glo-ffset__price + .glo-ffset__btn,
.glo-ffset__save + .glo-ffset__btn { margin-top: 16px; }
.glo-ffset__list + .glo-ffset__btn { margin-top: auto; }

/* Tablet: three sets do not fill two columns, so each set becomes one row,
   photos on the left. */
@media (max-width: 980px) and (min-width: 641px) {
  .glo-ffp-sets__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .glo-ffset { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; padding: 16px 20px 16px 16px; }
  .glo-ffset__thumbs { align-self: center; }
}
@media (max-width: 640px) {
  .glo-ffp-sets__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ==========================================================================
   7. /first-friday/: how it works
   ========================================================================== */
.glo-first-friday-v2 .glo-ffp-how__title { margin: 0 0 clamp(20px, 3vw, 32px); }
.glo-first-friday-v2 ol.glo-ffp-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.glo-ffp-how__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.glo-ffp-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px 12px 12px 4px;
  background: var(--glo-teal-50);
  font-family: var(--glo-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--glo-teal-ink);
}
.glo-first-friday-v2 .glo-ffp-how__step h3 { margin: 6px 0 6px; font-size: 17px; font-weight: 600; color: var(--glo-ink); }
.glo-first-friday-v2 .glo-ffp-how__step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--glo-ink-soft); }
@media (max-width: 900px) {
  .glo-first-friday-v2 ol.glo-ffp-how__steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .glo-ffset, .glo-ff__btn { transition: none; }
}

/* ==========================================================================
   8. Homepage showcase (owner, 9 Oct): the hair range as one portrait still
   life beside the date and one button to the First Friday page.
   The photo is 2:3. Desktop frames it 4:5, which only trims wall and table
   (every product sits between 15% and 85% of its height); phones show all of
   it, because the title block steps up into its bottom edge.
   ========================================================================== */
.glo-ff--showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 448px); }
.glo-ff--showcase .glo-ff__media { height: auto; aspect-ratio: 4 / 5; }
.glo-ff--showcase .glo-ff__photo { background: var(--glo-teal-deep); }
.glo-ff--showcase .glo-ff__photo img { object-position: 50% 48%; }
.glo-ff--showcase .glo-ff__price { margin-top: 4px; }
@media (max-width: 900px) {
  .glo-ff--showcase { grid-template-columns: minmax(0, 1fr); }
  .glo-ff--showcase .glo-ff__media { width: 100%; max-width: 460px; height: auto; }
}
@media (max-width: 600px) {
  .glo-ff--showcase .glo-ff__media { max-width: none; aspect-ratio: 2 / 3; }
}

/* ==========================================================================
   9. /first-friday/: the duos. Tall photo cards (the owner's 9:16 Canva art,
   words and all). Five across on desktop. The page scrolls one way only
   (owner, 10 Oct: the sideways row read as broken on phones), so below that
   the cards wrap: three then two, centred, on tablets; two a row on phones,
   where the fifth lies on its side across the row (photo at the same width
   as the cards above, details beside it) instead of standing alone. Each
   card's name, items, price and button line up; the button sits on the
   card's floor.
   ========================================================================== */
.glo-first-friday-v2 .glo-ffp-duos { background: var(--glo-bg); padding-top: clamp(24px, 4vw, 40px); }
.glo-ffp-duos__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.glo-ffduo { display: flex; flex-direction: column; min-width: 0; }
.glo-ffduo__photo {
  display: block;
  aspect-ratio: 628 / 1115;
  overflow: hidden;
  border-radius: var(--glo-radius-lg);
  background: var(--glo-teal-50);
}
.glo-ffduo__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.glo-ffduo__photo img { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .glo-ffduo:hover a.glo-ffduo__photo img { transform: scale(1.03); }
}
.glo-ffduo__body { display: flex; flex: 1; flex-direction: column; padding: 14px 2px 0; }
.glo-first-friday-v2 .glo-ffduo__name { margin: 0 0 6px; font-family: var(--glo-font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--glo-ink); text-wrap: balance; }
.glo-first-friday-v2 .glo-ffduo__name a { color: inherit; text-decoration: none; }
.glo-first-friday-v2 .glo-ffduo__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.glo-first-friday-v2 ul.glo-ffduo__list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--glo-ink-soft); }
.glo-first-friday-v2 .glo-ffduo__list li + li::before { content: "+"; margin-right: 6px; color: var(--glo-ink-soft); }
.glo-first-friday-v2 .glo-ffduo__list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--glo-border); }
.glo-first-friday-v2 .glo-ffduo__list a:hover { text-decoration-color: currentColor; }
.glo-ffduo .glo-ffset__price { margin-top: auto; }
.glo-ffduo__btn { width: 100%; margin-top: auto; }
.glo-ffduo .glo-ffset__price ~ .glo-ffduo__btn { margin-top: 14px; }

@media (max-width: 1080px) {
  .glo-ffp-duos__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 14px; }
  .glo-ffduo { flex: 0 0 calc((100% - 28px) / 3); max-width: 260px; }
}
@media (max-width: 640px) {
  .glo-ffp-duos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .glo-ffduo:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - 12px) / 2) minmax(0, 1fr); gap: 12px; }
  .glo-ffduo:last-child:nth-child(odd) .glo-ffduo__body { padding-top: 4px; }
  .glo-ffduo__photo { border-radius: 16px; }
  .glo-first-friday-v2 .glo-ffduo__name { font-size: 17px; }
  .glo-first-friday-v2 ul.glo-ffduo__list { font-size: 13px; }
  .glo-ffduo .glo-ffset__now { font-size: 20px; }
  .glo-ffduo__btn { min-height: 44px; padding-left: 8px; padding-right: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  a.glo-ffduo__photo img { transition: none; }
}

/* ==========================================================================
   10. Campaign colour (style guide 1.2, 2 Oct): First Friday leads with clay
   red, the guide's "small, stronger campaign accent", so the date reads as
   the event's own colour rather than the brand teal around it. Rouge stays
   for sale prices and errors. White on clay red 5.78:1, blush 4.7:1, clay
   red on milk 5.8:1.
   ========================================================================== */
.glo-ff__date { background: var(--glo-clay, #A94358); color: var(--glo-blush, #F2DEE1); }
.glo-ff .glo-ff__date-label { color: var(--glo-blush, #F2DEE1); }
.glo-ff .glo-ff__tag { color: var(--glo-clay, #A94358); }
.glo-ffp-head__date { background: var(--glo-blush, #F2DEE1); color: var(--glo-clay, #A94358); }

/* Duo card price line (owner, 9 Oct): separately, crossed out; the duo
   price; the saving in the store's Save badge. */
.glo-first-friday-v2 p.glo-ffduo__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 14px; font-variant-numeric: tabular-nums; }
.glo-ffduo__was { font-size: 15px; color: var(--glo-ink-soft); }
.glo-ffduo__now { font-family: var(--glo-font-display); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--glo-ink); }
.glo-ffduo .glo-ffduo__save { align-self: center; }
@media (max-width: 640px) {
  .glo-ffduo__now { font-size: 19px; }
  .glo-ffduo__was { font-size: 13px; }
}