/* =====================================================================
   LOFT HOMEPAGE COMPONENTS  v1          (class prefix: hp-)
   Replaces: updated-HP-v8.css + cbTemplateUpdates.css + the inline
   <style> block that used to live in every changeout asset.

   RULES OF THE SYSTEM
   - Campaign values (positions, colors) are set as CSS variables on the
     section's style="" attribute. No campaign <style> block, no !important.
   - Breakpoint: phones < 1024px, desktop >= 1024px.
   - Everything lives under .hp-root, so nothing leaks into the site.
   - Spacing utilities (hp-mt-*, hp-mb-*, hp-pt-*, hp-pb-*) are the only
     rules that use !important.

   CONTENTS
    0  Site wrapper reset (.homepage)
    1  Root + base
    2  Utilities (show/hide, spacing)
    3  Buttons  (hp-cta, hp-cta--outline, hp-cta--link, hp-cta--ul)
    4  Promo bar                (hp-bar)
   4b  Promo nav                (hp-promo)
    5  Quick links, mobile      (hp-quicklinks)
    6  Hero / banner            (hp-hero)   <- image, video, text, CTAs
    7  Category row             (hp-cats)
    8  Editorial tiles          (hp-tiles)
    9  Featured shops           (hp-featured)
   10  Recommended for you      (hp-rfk)
   11  Social / Curalate        (hp-social)
   12  Charity bar              (hp-charity)
   13  Video                    (hp-video)
   ===================================================================== */


/* ---------------------------------------------------------------- 0. SITE WRAPPER */
/* The site's .homepage wrapper adds a 20px top margin on desktop and caps its width.
   The HP is full bleed, so reset both (same as the old updated-HP-v8.css). */
.homepage { margin-top: 0 !important; max-width: none; }
.homepage a { text-decoration: none; }


/* ---------------------------------------------------------------- 1. ROOT + BASE */

.hp-root {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.56vw;               /* phones: 1em = 1.56vw */
  text-decoration-skip-ink: none;
}
@media (min-width: 1024px) and (max-width: 1679.98px) {
  .hp-root { font-size: 0.95vw; }  /* desktop: 1em = 0.95vw */
}
@media (min-width: 1680px) {
  .hp-root { font-size: 1em; }
}

.hp-root *, .hp-root ::before, .hp-root ::after { box-sizing: border-box; }
.hp-root a { text-decoration: none; }

/* :where() keeps this at zero specificity so component classes (hp-tiles padding, etc.) can override it */
:where(.hp-root) section {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.hp-root picture { position: relative; width: 100%; display: block; }
.hp-root picture img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}
.hp-root img { max-width: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.hp-root sup { font-size: 0.5em; top: 0; vertical-align: super; }

.hp-root h1, .hp-root h2, .hp-root h4, .hp-root h5, .hp-root h6, .hp-root p {
  font-family: poppins, sans-serif;
  position: relative;
  display: block;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* Section title (h3). --display = the serif used for "Featured Shops" */
.hp-root .hp-title {
  position: relative;
  display: block;
  margin: 0 0 0.5em;
  padding: 0.7em 0.1em;
  color: #000;
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-size: 6.75em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.hp-root .hp-title--display {
  font-family: Analogue, serif;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .hp-root .hp-title { font-size: 3em; }
}

.hp-rel { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }

/* Small print */
.hp-disclaimer {
  display: block;
  position: relative;
  width: 100%;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 1.518em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: normal;
  z-index: 100;
}
.hp-disclaimer > a, .hp-disclaimer > span {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .hp-disclaimer { font-size: 0.8em; }
}


/* ---------------------------------------------------------------- 2. UTILITIES */

/* Show / hide by breakpoint */
.hp-desktop-only { display: none !important; }
.hp-mobile-only { display: revert !important; }
@media (min-width: 1024px) {
  .hp-desktop-only { display: revert !important; }
  .hp-mobile-only { display: none !important; }
}

/* Spacing: hp-mt / hp-mb / hp-pt / hp-pb  -N--m (phones) and -N--dt (desktop), N = 0..10.
   Margins: N=1 is 5px on phones, 0.5rem on desktop. Padding: N=1 is 0.5rem. N>=2 is N x 0.5rem. */
@media (max-width: 1023.98px) {
  .hp-mt-0--m { margin-top: 0 !important; }
  .hp-mt-1--m { margin-top: 5px !important; }
  .hp-mt-2--m { margin-top: 1rem !important; }
  .hp-mt-3--m { margin-top: 1.5rem !important; }
  .hp-mt-4--m { margin-top: 2rem !important; }
  .hp-mt-5--m { margin-top: 2.5rem !important; }
  .hp-mt-6--m { margin-top: 3rem !important; }
  .hp-mt-7--m { margin-top: 3.5rem !important; }
  .hp-mt-8--m { margin-top: 4rem !important; }
  .hp-mt-9--m { margin-top: 4.5rem !important; }
  .hp-mt-10--m { margin-top: 5rem !important; }
  .hp-mb-0--m { margin-bottom: 0 !important; }
  .hp-mb-1--m { margin-bottom: 5px !important; }
  .hp-mb-2--m { margin-bottom: 1rem !important; }
  .hp-mb-3--m { margin-bottom: 1.5rem !important; }
  .hp-mb-4--m { margin-bottom: 2rem !important; }
  .hp-mb-5--m { margin-bottom: 2.5rem !important; }
  .hp-mb-6--m { margin-bottom: 3rem !important; }
  .hp-mb-7--m { margin-bottom: 3.5rem !important; }
  .hp-mb-8--m { margin-bottom: 4rem !important; }
  .hp-mb-9--m { margin-bottom: 4.5rem !important; }
  .hp-mb-10--m { margin-bottom: 5rem !important; }
  .hp-pt-0--m { padding-top: 0 !important; }
  .hp-pt-1--m { padding-top: 0.5rem !important; }
  .hp-pt-2--m { padding-top: 1rem !important; }
  .hp-pt-3--m { padding-top: 1.5rem !important; }
  .hp-pt-4--m { padding-top: 2rem !important; }
  .hp-pt-5--m { padding-top: 2.5rem !important; }
  .hp-pt-6--m { padding-top: 3rem !important; }
  .hp-pt-7--m { padding-top: 3.5rem !important; }
  .hp-pt-8--m { padding-top: 4rem !important; }
  .hp-pt-9--m { padding-top: 4.5rem !important; }
  .hp-pt-10--m { padding-top: 5rem !important; }
  .hp-pb-0--m { padding-bottom: 0 !important; }
  .hp-pb-1--m { padding-bottom: 0.5rem !important; }
  .hp-pb-2--m { padding-bottom: 1rem !important; }
  .hp-pb-3--m { padding-bottom: 1.5rem !important; }
  .hp-pb-4--m { padding-bottom: 2rem !important; }
  .hp-pb-5--m { padding-bottom: 2.5rem !important; }
  .hp-pb-6--m { padding-bottom: 3rem !important; }
  .hp-pb-7--m { padding-bottom: 3.5rem !important; }
  .hp-pb-8--m { padding-bottom: 4rem !important; }
  .hp-pb-9--m { padding-bottom: 4.5rem !important; }
  .hp-pb-10--m { padding-bottom: 5rem !important; }
}
@media (min-width: 1024px) {
  .hp-mt-0--dt { margin-top: 0 !important; }
  .hp-mt-1--dt { margin-top: 0.5rem !important; }
  .hp-mt-2--dt { margin-top: 1rem !important; }
  .hp-mt-3--dt { margin-top: 1.5rem !important; }
  .hp-mt-4--dt { margin-top: 2rem !important; }
  .hp-mt-5--dt { margin-top: 2.5rem !important; }
  .hp-mt-6--dt { margin-top: 3rem !important; }
  .hp-mt-7--dt { margin-top: 3.5rem !important; }
  .hp-mt-8--dt { margin-top: 4rem !important; }
  .hp-mt-9--dt { margin-top: 4.5rem !important; }
  .hp-mt-10--dt { margin-top: 5rem !important; }
  .hp-mb-0--dt { margin-bottom: 0 !important; }
  .hp-mb-1--dt { margin-bottom: 0.5rem !important; }
  .hp-mb-2--dt { margin-bottom: 1rem !important; }
  .hp-mb-3--dt { margin-bottom: 1.5rem !important; }
  .hp-mb-4--dt { margin-bottom: 2rem !important; }
  .hp-mb-5--dt { margin-bottom: 2.5rem !important; }
  .hp-mb-6--dt { margin-bottom: 3rem !important; }
  .hp-mb-7--dt { margin-bottom: 3.5rem !important; }
  .hp-mb-8--dt { margin-bottom: 4rem !important; }
  .hp-mb-9--dt { margin-bottom: 4.5rem !important; }
  .hp-mb-10--dt { margin-bottom: 5rem !important; }
  .hp-pt-0--dt { padding-top: 0 !important; }
  .hp-pt-1--dt { padding-top: 0.5rem !important; }
  .hp-pt-2--dt { padding-top: 1rem !important; }
  .hp-pt-3--dt { padding-top: 1.5rem !important; }
  .hp-pt-4--dt { padding-top: 2rem !important; }
  .hp-pt-5--dt { padding-top: 2.5rem !important; }
  .hp-pt-6--dt { padding-top: 3rem !important; }
  .hp-pt-7--dt { padding-top: 3.5rem !important; }
  .hp-pt-8--dt { padding-top: 4rem !important; }
  .hp-pt-9--dt { padding-top: 4.5rem !important; }
  .hp-pt-10--dt { padding-top: 5rem !important; }
  .hp-pb-0--dt { padding-bottom: 0 !important; }
  .hp-pb-1--dt { padding-bottom: 0.5rem !important; }
  .hp-pb-2--dt { padding-bottom: 1rem !important; }
  .hp-pb-3--dt { padding-bottom: 1.5rem !important; }
  .hp-pb-4--dt { padding-bottom: 2rem !important; }
  .hp-pb-5--dt { padding-bottom: 2.5rem !important; }
  .hp-pb-6--dt { padding-bottom: 3rem !important; }
  .hp-pb-7--dt { padding-bottom: 3.5rem !important; }
  .hp-pb-8--dt { padding-bottom: 4rem !important; }
  .hp-pb-9--dt { padding-bottom: 4.5rem !important; }
  .hp-pb-10--dt { padding-bottom: 5rem !important; }
}


/* ---------------------------------------------------------------- 3. BUTTONS */
/* White block button (default), outline, text link, underlined link.
   Two or more .hp-cta inside one .hp-ctas are sized equal by the JS
   (opt out with hp-ctas--no-match). */

.hp-ctas {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}

.hp-root a.hp-cta, .hp-root span.hp-cta {
  display: inline-block;
  position: relative;
  height: auto;
  margin: 0 0.4em;
  padding: 0 2.5em;
  overflow: hidden;
  font-family: poppins, sans-serif;
  font-size: 2.3625em;
  font-weight: 600;
  line-height: 2.6;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  background-color: #fff;
  border: 0.08em solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
/* set by the JS once the group has been size-matched */
.hp-root a.hp-cta.hp-cta--fit, .hp-root span.hp-cta.hp-cta--fit { padding-left: 0; padding-right: 0; }

.hp-root a.hp-cta--outline, .hp-root span.hp-cta--outline {
  padding: 0 2.2em;
  line-height: 2.5;
  background-color: transparent;
  border: 1px solid;
}

/* Plain underlined text link used on banners ("Learn More", "See What's New").
   Size comes from --hp-link-size (default .95rem). */
.hp-root a.hp-cta--link, .hp-root span.hp-cta--link {
  padding: 0 2.2em;
  font-size: var(--hp-link-size, 0.95rem);
  line-height: 2.5;
  color: inherit;
  background-color: transparent;
  border: 0;
  text-decoration: underline;
}

/* Underlined inline link ("Donate Now") */
.hp-root a.hp-cta--ul, .hp-root span.hp-cta--ul {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 1024px) {
  .hp-root a.hp-cta, .hp-root span.hp-cta { padding: 0 4.1em; font-size: 0.875em; line-height: 3.4; }
  .hp-root a.hp-cta--outline, .hp-root span.hp-cta--outline { padding: 0 5.3em; line-height: 3.5; }
  .hp-root a.hp-cta--link, .hp-root span.hp-cta--link { padding: 0 5.3em; font-size: var(--hp-link-size, 0.95rem); line-height: 3.5; }
  .hp-root a.hp-cta--ul, .hp-root span.hp-cta--ul { padding: 0; font-size: 1em; line-height: normal; }
}


/* ---------------------------------------------------------------- 4. PROMO BAR */
/* One section for phone + desktop. Use <br class="hp-mobile-only"> for the
   phone line breaks. Colors: style="--hp-bar-bg:#afbed1; --hp-bar-color:#5e0e33" */

.hp-bar {
  text-align: center;
  background-color: var(--hp-bar-bg, #afbed1);
  color: var(--hp-bar-color, #5e0e33);
}
.hp-bar__inner {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1.8em 0 0.3em;
  overflow: hidden;
}
.hp-root a.hp-bar__link {
  font-family: poppins, sans-serif;
  color: inherit;
  text-decoration: none;
  font-size: 2.98625em;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: normal;
}
.hp-bar .hp-disclaimer { padding-bottom: 0.5rem; }
@media (min-width: 1024px) {
  .hp-bar__inner { padding: 2.1em 0 2em; }
  .hp-root a.hp-bar__link { font-size: 1.5em; line-height: 1.4em; }
  .hp-bar .hp-disclaimer { font-size: 0.7125em; margin-top: 0.7em; padding-bottom: 0; }
}


/* ---------------------------------------------------------------- 4b. PROMO NAV */
/* Two or three offers side by side on desktop; a swipeable carousel on phones
   (arrows + auto-advance every 4s, added by the JS). Use instead of hp-bar.
   Colors: style="--hp-promo-bg:#afbed1; --hp-promo-color:#5e0e33"
   hp-promo--2 = two offers (default is three, middle one with dividers). */

.hp-promo {
  position: relative;
  margin: 0;
  background-color: var(--hp-promo-bg, #afbed1);
  color: var(--hp-promo-color, #5e0e33);
}
.hp-promo__wrap { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.hp-promo__track {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 3.5em 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  font-family: poppins, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.02em;
}
.hp-promo__track::-webkit-scrollbar { display: none; }
.hp-root a.hp-promo__item {
  position: relative;
  display: block;
  flex: 0 0 100%;
  font-size: 1em;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}
.hp-promo__item > div { position: relative; margin: 0; padding: 0; overflow: hidden; }
.hp-root .hp-promo h6 {
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 3em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.hp-root .hp-promo p {
  margin: 0.8em 0 0;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 2.0475em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.hp-promo .js-promo-details-trigger { text-decoration: underline; cursor: pointer; line-height: 1.35; }

/* phone carousel arrows (created by the JS) */
.hp-promo__arrow {
  position: absolute;
  top: 50%;
  width: 8%;
  height: auto;
  margin: 0 0.8em;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  z-index: 5;
}
.hp-promo__arrow svg { display: block; width: 100%; height: auto; }
.hp-promo__arrow path { fill: currentColor; }
.hp-promo__arrow--l { left: 0; }
.hp-promo__arrow--r { right: 0; }

@media (min-width: 1024px) {
  .hp-promo { margin: 1em 0 1.4em; }
  .hp-promo__track {
    justify-content: space-between;
    align-items: stretch;
    padding: 0.8em 0;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .hp-root a.hp-promo__item { display: flex; align-items: center; justify-content: center; flex: 1 1 0; padding: 0.4em; }
  .hp-root a.hp-promo__item:nth-child(2) { flex: 0 0 auto; min-width: 33.3333%; white-space: nowrap; border-left: solid 1px; border-right: solid 1px; }
  .hp-promo--2 a.hp-promo__item:nth-child(2) { min-width: 50%; border-right: none; }
  .hp-root .hp-promo h6 { font-size: 1.6em; }
  .hp-root .hp-promo p { font-size: 0.96em; }
  .hp-promo__arrow { display: none; }
}


/* ---------------------------------------------------------------- 5. QUICK LINKS (phones only) */

.hp-quicklinks { display: block; }
.hp-quicklinks__track {
  display: flex;
  align-items: center;
  width: 100%;
  height: 9em;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-quicklinks__track::-webkit-scrollbar { display: none; }
.hp-root .hp-quicklinks__track a {
  flex: 0 0 auto;
  display: inline-block;
  margin: 0 0 0 1em;
  padding: 0 1.2em;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.3875em;
  font-style: normal;
  font-weight: 600;
  line-height: 2.2;
  letter-spacing: 0.02em;
  border-radius: 1em;
  background-color: #eee;
}
.hp-root .hp-quicklinks__track a:last-child { margin-right: 1em; }
@media (min-width: 1024px) {
  .hp-quicklinks { display: none; }
}


/* ---------------------------------------------------------------- 6. HERO / BANNER */
/* One component for the top hero and every banner.

   <section class="hp-hero hp-hero--... " style="--hp-hero-...">
     <div class="hp-hero__media"> picture / still + video </div>
     <div class="hp-hero__txt">
       <div class="hp-hero__block">  eyebrow, h1, sub, .hp-ctas  </div>
       <div class="hp-hero__disc">  small print  </div>
     </div>
   </section>

   The block (text + buttons) is placed on the art by its CENTER point:
     --hp-hero-x-m / --hp-hero-y-m      phone   (% of the hero)
     --hp-hero-x-dt / --hp-hero-y-dt    desktop
   Other variables (all optional):
     --hp-hero-color            text color                      (#fff)
     --hp-hero-align-m / -dt    text-align                      (center)
     --hp-hero-w-m / -dt        block width                     (max-content)
     --hp-hero-h1-m / -dt       h1 size                         (8.53125em / 6.5625em)
     --hp-hero-sub-m / -dt      subhead size                    (2.7em / 1.6em)
     --hp-hero-sub-mr-m / -dt   subhead right inset, in em of the subhead (0)
     --hp-hero-gap-m / -dt      extra space between a plain subhead and the buttons (0)
     --hp-hero-disc-bottom-m/-dt  small print distance from bottom
     --hp-hero-disc-color       small print color               (the text color)
     --hp-link-size             size of an hp-cta--link         (.95rem)
*/

.hp-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}
.hp-hero__media img, .hp-hero__media video {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}

.hp-hero__txt {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: 1;
  color: var(--hp-hero-color, #fff);
  pointer-events: none;           /* only the text and buttons take clicks */
}
.hp-hero__block {
  position: absolute;
  left: var(--hp-hero-x-m, 50%);
  top: var(--hp-hero-y-m, 80%);
  transform: translate(-50%, -50%);
  width: var(--hp-hero-w-m, max-content);
  text-align: var(--hp-hero-align-m, center);
  pointer-events: auto;
}
.hp-hero__block .hp-ctas { width: 100%; }

.hp-hero__eyebrow {
  display: block;
  width: 100%;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: 2.025em;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: normal;
}
.hp-hero__h1 {
  display: block;
  padding: 0;
  color: inherit;
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-size: var(--hp-hero-h1-m, 8.53125em);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 0.88;
}
.hp-hero__sub {
  display: block;
  margin-right: var(--hp-hero-sub-mr-m, 0);
  padding: 0.5em 1em 0.6em;
  color: inherit;
  font-family: poppins, sans-serif;
  font-size: var(--hp-hero-sub-m, 2.7em);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
/* --plain: banner subhead (no padding, lighter) */
.hp-hero__sub--plain { padding: 0; font-weight: 500; letter-spacing: normal; line-height: 1.2; }
.hp-hero__h1 + .hp-ctas,
.hp-hero__sub + .hp-ctas { margin-top: 1em; }
.hp-hero__sub--plain + .hp-ctas { margin-top: var(--hp-hero-gap-m, 0); }

.hp-hero__disc {
  position: absolute;
  left: 0;
  bottom: var(--hp-hero-disc-bottom-m, 0);
  width: 100%;
  padding: 1em;
  color: var(--hp-hero-disc-color, inherit);
  font-family: poppins, sans-serif;
  font-size: 1.518em;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  z-index: 100;
  pointer-events: auto;
}
.hp-root .hp-hero__disc > a, .hp-root .hp-hero__disc > span {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .hp-hero__block {
    left: var(--hp-hero-x-dt, 50%);
    top: var(--hp-hero-y-dt, 70%);
    width: var(--hp-hero-w-dt, max-content);
    text-align: var(--hp-hero-align-dt, center);
  }
  .hp-hero__h1 { font-size: var(--hp-hero-h1-dt, 6.5625em); }
  .hp-hero__sub {
    margin-right: var(--hp-hero-sub-mr-dt, 0);
    padding: 1em 0 1.1em;
    font-size: var(--hp-hero-sub-dt, 1.6em);
    font-weight: 600;
    line-height: 1.2;
  }
  .hp-hero__sub--plain { padding: 0; font-weight: 500; line-height: 1.1; }
  .hp-hero__sub--plain + .hp-ctas { margin-top: var(--hp-hero-gap-dt, 0); }
  .hp-hero__disc { bottom: var(--hp-hero-disc-bottom-dt, 0); font-size: 0.8em; }
}


/* ---------------------------------------------------------------- 7. CATEGORY ROW */
/* Six tiles. Images 200px wide x any height (2x).  Scrolls sideways on phones. */

.hp-cats { margin: 0 0 4%; text-align: left; }
.hp-cats__inner { position: relative; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; text-align: center; }
.hp-cats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 3em 2.2em;
  width: 100%;
  height: auto;
  margin: 1.8em 0;
  padding: 0 0 0 2em;
  overflow-x: scroll;
  scrollbar-width: none;
}
.hp-cats__grid::-webkit-scrollbar { display: none; }
.hp-root a.hp-cat { display: block; position: relative; padding: 0 0 0.2em; font-size: 1.35em; text-decoration: none; }
.hp-root a.hp-cat > img { display: block; position: relative; width: auto; height: 330px; margin: 0; }
.hp-root .hp-cat__title {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.5em 0 0;
  overflow: hidden;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
@media (min-width: 1024px) {
  .hp-cats__inner { width: 90.2778%; }
  .hp-cats__grid { column-gap: 2em; margin: 0; padding: 0; overflow: hidden; }
  .hp-root a.hp-cat > img { width: 100%; height: auto; }
  .hp-root .hp-cat__title { padding: 0.9em 0 0; font-size: 1em; }
}


/* ---------------------------------------------------------------- 8. EDITORIAL TILES */
/* Two across on desktop, stacked on phones. Images 807px wide (2x).
   Each tile: still image, optional video over it, button below.            */

.hp-tiles { width: 100%; margin: 0 auto; padding-bottom: 5px; text-align: left; }
.hp-tiles__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: start;
  align-content: start;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  font-family: poppins, sans-serif;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  text-align: center;
}
.hp-root a.hp-tile { display: block; position: relative; height: auto; margin: 0; padding: 0; overflow: hidden; color: inherit; font-size: 1em; text-decoration: none; }
.hp-root .hp-tile__body { position: relative; width: 100%; height: auto; margin: 0; padding: 0; overflow: hidden; }
.hp-root .hp-tile__media { position: relative; width: 100%; margin: 0; padding: 0; }
.hp-root .hp-tile__media img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}
.hp-root .hp-tile__cta {
  display: inline-block;
  position: relative;
  top: calc(var(--hp-tile-lift, 60px) * -1);   /* lifts the button onto the image */
  z-index: 2;                                  /* stays above a video laid over the image */
  height: auto;
  margin: 0 0.4em;
  padding: 0 2.5em;
  overflow: hidden;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.3625em;
  font-weight: 600;
  line-height: 2.6;
  letter-spacing: normal;
  text-align: center;
  background-color: #fff;
  border: 0.08em solid transparent;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .hp-tiles { width: 97.4%; }
  .hp-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 2.8em 1.4em; }
  .hp-root .hp-tile__cta { --hp-tile-lift: 82px; font-size: 1em; }
}


/* ---------------------------------------------------------------- 9. FEATURED SHOPS */
/* Four tiles. Scrolls sideways on phones. */

.hp-featured { background: #fff; }
.hp-featured__inner {
  position: relative;
  width: 97.381%;
  height: auto;
  margin: 0 0 0 2.5em;
  padding: 0 0 1.9em;
  overflow: hidden;
}
.hp-featured__head { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; text-align: center; }
.hp-root .hp-featured__head .hp-title { padding: 0.7em 0.1em; }
.hp-featured__scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-featured__scroll::-webkit-scrollbar { display: none; }
.hp-featured__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  align-content: start;
  width: 260%;
  height: auto;
  margin: 0;
  padding: 0 3em 0 0;
}
.hp-root a.hp-featured__item { display: block; position: relative; margin: 0; padding: 0 0 0.2em; overflow: hidden; font-size: 1em; text-align: center; text-decoration: none; }
.hp-root .hp-featured__item > img { display: block; position: relative; width: 100%; height: auto; margin: 0; }
.hp-root .hp-featured__item > span {
  display: inline-block;
  padding: 1.4em 0;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 1024px) {
  .hp-featured__inner { width: 97.4%; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; margin: 0 auto; padding: 0 0 1.2em; }
  .hp-featured__head { width: 100%; padding: 0 0 1.3em; }
  .hp-root .hp-featured__head .hp-title { padding: 0.7em 0.1em 0.1em; }
  .hp-featured__scroll { width: 79.5%; overflow: hidden; }
  .hp-featured__grid { width: 100%; gap: 1.3em; padding: 0; }
  .hp-root .hp-featured__item > span { font-size: 1em; }
}


/* ---------------------------------------------------------------- 10. RECOMMENDED FOR YOU */

.hp-rfk__content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: visible; text-align: center; }
.hp-rfk__embed { position: relative; width: 100%; height: auto; min-height: 300px; margin: 6em 0 0; padding: 0; overflow: visible; }
@media (min-width: 1024px) {
  .hp-rfk__content { width: 91.4%; }
  .hp-rfk__embed { margin: 2em 0 0; }
}
/* Reflektion widget: keep its tiles laid out as a row */
.homepage .reflektion-tiles .reflektion-recommendations .reflection-rkid { display: -webkit-box; display: -ms-flexbox; display: flex; }


/* ---------------------------------------------------------------- 11. SOCIAL / CURALATE */

.hp-social { padding: 10em 0 4em; }
.hp-social__content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: visible; text-align: center; }
.hp-social__embed { position: relative; width: 100%; height: auto; min-height: 300px; margin: 5em 0 0; padding: 0; overflow: visible; }
.hp-social .hp-ctas { margin-top: 4.5em; padding: 2em; }
.hp-root .hp-social a.hp-cta--outline { margin-bottom: 1em; }
@media (min-width: 1024px) {
  .hp-social { padding: 4em 0; }
  .hp-root .hp-social__content > .hp-title { padding: 0; }
  .hp-social__embed { margin: 2em 0 0; }
  .hp-social .hp-ctas { margin-top: 2.8em; padding: 0; }
  .hp-root .hp-social a.hp-cta--outline { margin: 0 1.4em; }
}


/* ---------------------------------------------------------------- 12. CHARITY BAR */
/* Default 3 items. Add hp-charity--2 or hp-charity--4 for 2 or 4.
   Logos 2x, cropped 550px x 130px. */

.hp-charity { background-color: #fff4f4; }
.hp-charity__content { position: relative; width: 92.8%; height: auto; margin: 0 auto; padding: 2.7em 0 3.5em; overflow: hidden; }
.hp-charity__item { position: relative; width: 100%; height: auto; margin: 0; padding: 5.2em 0 4.2em; overflow: hidden; text-align: center; }
.hp-charity__item:not(:last-of-type) { border-bottom: 1px solid #bfbfbf; }
.hp-charity__item:first-of-type { padding-top: 2em; }
.hp-charity__item > img { display: block; position: relative; width: 80%; height: auto; margin: 0 auto 0.4em; }
.hp-charity__item > p {
  padding-bottom: 0.8em;
  color: #000;
  font-family: poppins, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .hp-charity__content { width: 100%; display: flex; flex-flow: row; justify-content: center; align-items: center; padding: 2.8em 0; }
  .hp-charity__item { width: 33.33%; padding: 0; }
  .hp-charity--2 .hp-charity__item { width: 50%; }
  .hp-charity--4 .hp-charity__item { width: 25%; }
  .hp-charity__item:not(:last-of-type) { border-right: 1px solid #bfbfbf; border-bottom: 0 none; }
  .hp-charity__item:first-of-type { padding-top: 0; }
  .hp-charity__item > img { width: 17.2em; }
  .hp-charity__item > p { font-size: 1em; }
}


/* ---------------------------------------------------------------- 13. VIDEO */
/* Videos replace GIFs. A still image always sits under the video, so the page
   paints at once and the video plays over it once it has loaded.

   Put the file in  <source data-src="...mp4">  (NOT src). The JS loads it
   when the video is near the screen, and only on the breakpoint that shows it.

   hp-video              wrapper for a video that stands alone
   hp-video--overlay     wrapper laid over a still image
   hp-video__m           video shown on phones only
   hp-video__dt          video shown on desktop only
   (no __m / __dt        one video for both)                                   */

.hp-video { position: relative; width: 100%; margin: 0; padding: 0; }
.hp-video--overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.hp-video video { display: block; width: 100%; height: auto; margin: 0; }
.hp-video--overlay video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.hp-video video.hp-video__dt { display: none; }
@media (min-width: 1024px) {
  .hp-video video.hp-video__m { display: none; }
  .hp-video video.hp-video__dt { display: block; }
}
.hp-hero__media .hp-video--overlay { z-index: 1; }