/* ============================================================
   YWCJ HOMEPAGE (reference-style rebuild)

   PALETTE / TYPE taken from the reference:
     accent #C2A18A | Abril Fatface (display)
     Montserrat (headings) | Poppins (body)

   SCOPE RULES
     * palette variables live on body.homepage so the existing
       header / footer can adapt their COLOUR;
     * the typography + design-token remap lives on .hp-home
       (the new <main>) so the header nav / logo / footer keep
       their original fonts;
     * the overlay header markup only changes on the homepage.
   ============================================================ */

body.homepage {
  --hp-accent: #C2A18A;
  --hp-accent-dark: #A98A73;
  --hp-cream: #F5F1EC;
  --hp-ink: #333333;
  --hp-soft: #6F6D66;
  --hp-display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --hp-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --hp-text: 'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --hp-header-h: 64px;
}

/* token remap — ONLY inside the new homepage main */
.hp-home {
  --color-accent: var(--hp-accent);
  --color-price: var(--hp-accent);
  --color-bg-alt: var(--hp-cream);
  --font-body: var(--hp-text);
  --font-serif: var(--hp-display);
}
.hp-home { display: block; }

/* ---------- shared bits ---------- */
.hp-eyebrow {
  display: block;
  font-family: var(--hp-text);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hp-accent);
}
.hp-section { max-width: 1280px; margin: 0 auto; padding: 76px 24px; }
.hp-head { text-align: center; margin-bottom: 44px; }
.hp-title {
  margin: 0;
  font-family: var(--hp-heading);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--hp-ink);
}
.hp-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--hp-text);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hp-accent);
}
.hp-more { text-align: center; margin-top: 44px; }
.hp-link {
  display: inline-block;
  font-family: var(--hp-text);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hp-accent);
  padding-bottom: 4px;
}
.hp-link:hover { color: var(--hp-accent); }

/* ============================================================
   01 HERO SLIDER — image-only, reference-style chrome
   The hero banners already carry their own headline + CTA, so no
   text is overlaid here. Fixed transparent header floats on top.
   ============================================================ */
.hp-hero { position: relative; height: 88vh; min-height: 560px; overflow: hidden; background: #1b1b1b; }
.hp-hero__slides { position: absolute; inset: 0; }
.hp-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease; }
.hp-hero__slide.is-active { opacity: 1; visibility: visible; }
.hp-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hp-hero__slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,.22) 100%);
}
.hp-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hp-hero__arrow:hover { background: #fff; color: #222; border-color: #fff; }
.hp-hero__arrow svg { width: 22px; height: 22px; }
.hp-hero__arrow--prev { left: 26px; }
.hp-hero__arrow--next { right: 26px; }
.hp-hero__dots { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.hp-hero__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer; transition: background .25s ease;
}
.hp-hero__dots button.is-active { background: #fff; }

/* ============================================================
   02 COLLECTION FEATURE — full-bleed image left, white card right
   Measured off the reference site at 1440: the section spans the whole
   viewport, the photo is flush with the left edge, and the white card
   floats over it with ~100px of air before the right edge.
   ============================================================ */
.hp-collection {
  position: relative;
  display: grid; grid-template-columns: 64% 36%;
  align-items: center;
  padding: 80px 0 40px;
}
.hp-collection__media { height: 560px; background-size: cover; background-position: center; }
.hp-collection__card {
  position: relative; z-index: 2;
  background: #fff;
  padding: 56px 50px;
  /* A stretched grid item computes its width from the track AND its margins:
     with margin-left:-100 / margin-right:100 the border-box stays exactly
     one track wide (518px @1440), while the box shifts 100px left to overlap
     the photo and keeps 100px of air before the right edge — matching the
     reference. Using margin-left alone would widen the card instead.        */
  margin-left: -100px;
  margin-right: 100px;
  box-shadow: 0 26px 70px rgba(0,0,0,.10);
}
.hp-collection__title {
  margin: 12px 0 16px;
  font-family: var(--hp-heading);
  font-weight: 600; font-size: 30px; line-height: 1.28;
  letter-spacing: -0.02em; color: var(--hp-ink);
}
.hp-collection__text { margin: 0 0 24px; font-family: var(--hp-text); font-size: 14.5px; line-height: 1.95; color: var(--hp-soft); }

/* ---------- 03 / 05 product grids ---------- */
.hp-grid { display: grid; gap: 28px; }
.hp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hp-card { position: relative; }
.hp-card__media {
  display: block; position: relative; overflow: hidden;
  background: #f4f2ee; aspect-ratio: 4 / 5;
}
.hp-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-card__media img.hp-hover { opacity: 0; transition: opacity .55s ease; }
.hp-card:hover .hp-card__media img.hp-hover { opacity: 1; }
.hp-card__media img:not(.hp-hover) { transition: transform .9s ease; }
.hp-card:hover .hp-card__media img:not(.hp-hover) { transform: scale(1.03); }
.hp-card__badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--hp-accent); color: #fff;
  font-family: var(--hp-text); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px;
}
.hp-card__info { padding-top: 16px; }
.hp-card__cat {
  display: block; margin-bottom: 6px;
  font-family: var(--hp-text); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #9b988f;
}
.hp-card__title {
  display: block; text-decoration: none;
  font-family: var(--hp-heading); font-weight: 600; font-size: 14px; line-height: 1.5;
  color: var(--hp-ink);
}
.hp-card__title:hover { color: var(--hp-accent); }
.hp-card__price { display: block; margin-top: 7px; font-family: var(--hp-text); font-size: 14px; color: var(--hp-accent); }
.hp-card__price del { color: #b3b1a9; margin-right: 8px; }
.hp-empty { grid-column: 1 / -1; text-align: center; color: var(--hp-accent); font-family: var(--hp-text); font-size: 14px; padding: 30px 0; }
.hp-skel { aspect-ratio: 4 / 5; background: #f4f2ee; }

/* ============================================================
   04 CATEGORY MOSAIC
   3 columns; the centre tile spans two rows; white caps labels are
   centred; a circular arrow tile closes the grid bottom-right —
   the same rhythm as the reference.
   ============================================================ */
.hp-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px;
  gap: 4px;
  padding: 0; margin: 0;
}
.hp-cat { position: relative; display: block; overflow: hidden; background: #eceae5; }
/* the source shots are 3:4 portraits with a caption baked in at the very
   bottom — bias the crop upwards so faces stay in frame and the baked
   caption is cropped away (we render our own label instead). */
.hp-cat img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; transition: transform 1s ease; }
.hp-cat:hover img { transform: scale(1.05); }
.hp-cat span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.18);
  color: #fff;
  font-family: var(--hp-text); font-size: 15px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background .3s ease, letter-spacing .3s ease;
}
.hp-cat:hover span { background: rgba(0,0,0,.3); letter-spacing: .28em; }
/* explicit bento placement */
.hp-cat:nth-child(1) { grid-area: 1 / 2 / 3 / 3; }   /* Dresses — tall centre */
.hp-cat:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }   /* Knitwear */
.hp-cat:nth-child(3) { grid-area: 1 / 1 / 2 / 2; }   /* Tops */
.hp-cat:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }   /* Sets */
.hp-cat:nth-child(5) { grid-area: 2 / 3 / 3 / 4; }   /* Outerwear */
.hp-cat:nth-child(6) { grid-area: 3 / 1 / 4 / 2; }   /* Bottoms */
.hp-cat:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }   /* Trending */
.hp-cats__all {
  grid-area: 3 / 3 / 4 / 4;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--hp-cream);
  text-decoration: none;
  transition: background .3s ease;
}
/* the tile links to /shop.html ("shop all"), so it carries a photo like its
   neighbours instead of reading as an empty cell. The asset is 720x720 with
   the words "Best Seller" burnt in near the bottom — the 1.59:1 crop plus
   object-position 10% keeps them out of frame. */
.hp-cats__all img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 10%;
  transition: transform 1.2s ease;
}
.hp-cats__all:hover img { transform: scale(1.04); }
.hp-cats__all:hover { background: #eee7de; }
.hp-cats__all-circle {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; color: var(--hp-ink);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .3s ease, color .3s ease;
}
.hp-cats__all:hover .hp-cats__all-circle { transform: translateX(4px); color: var(--hp-accent); }
.hp-cats__all-circle svg { width: 22px; height: 22px; }

/* ============================================================
   06 ABOUT — text left, media + play button right
   ============================================================ */
.hp-about { background: var(--hp-cream); }
.hp-about__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 96px 24px;
  display: grid; grid-template-columns: 40% 60%;
  gap: 56px; align-items: center;
}
.hp-about__col { max-width: 420px; }
.hp-about__title {
  margin: 14px 0 18px;
  font-family: var(--hp-display); font-weight: 400;
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04;
  letter-spacing: .02em; color: var(--hp-ink);
}
.hp-about__text {
  margin: 0 0 28px;
  font-family: var(--hp-text); font-size: 14.5px; line-height: 2;
  color: #5f5d57;
}
.hp-about__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; background: #e8e4dd;
}
.hp-about__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform 1.2s ease; }
.hp-about__media:hover img { transform: scale(1.03); }

/* ---------- 07 trends / social strip ----------
   Full-bleed like the reference site: the photo band runs edge to edge with
   no gutters, so it must escape the 1280px reading column that .hp-section
   imposes (hence the higher-specificity body.homepage prefix, which also
   survives the narrower .hp-section padding in the mobile media query).   */
.hp-trends { padding-bottom: 40px; }
body.homepage .hp-trends { max-width: none; padding-left: 0; padding-right: 0; }
.hp-ig-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: none; margin: 0; }
.hp-ig { position: relative; display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center top; }
.hp-ig::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .35s ease; }
.hp-ig:hover::after { background: rgba(0,0,0,.18); }
.hp-ig__tag { position: absolute; left: 16px; top: 16px; z-index: 2; color: #fff; font-family: var(--hp-text); font-size: 12px; letter-spacing: .1em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ---------- 08 service band ---------- */
.hp-services {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; max-width: 1080px; margin: 0 auto;
  padding: 68px 24px 84px; text-align: center;
  border-top: 1px solid var(--color-border);
}
.hp-service svg { width: 46px; height: 46px; color: var(--hp-accent); }
.hp-service h3 { margin: 18px 0 10px; font-family: var(--hp-heading); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--hp-ink); }
.hp-service p { margin: 0 auto; max-width: 300px; font-family: var(--hp-text); font-size: 13px; line-height: 1.9; color: #7a7871; }

/* ============================================================
   OVERLAY HEADER (homepage only)
   Reference behaviour: the header floats transparently over the
   hero with white type; once the page is scrolled it turns solid.
   The promo/announcement bar was removed site-wide on request, so
   the header sits flush with the top of the viewport.
   ============================================================ */
body.homepage .cm-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  background-color: transparent; border-bottom: 0; box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
body.homepage.is-scrolled .cm-header {
  top: 0; background-color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.04);
}

body.homepage .cm-header__logo,
body.homepage .cm-header__logotype,
body.homepage .cm-header__nav a,
body.homepage .cm-header__actions .header__icon { color: #fff; }
body.homepage .cm-header__actions .header__icon svg { stroke: #fff; }
body.homepage .cm-header .menu-toggle span { background-color: #fff; }
body.homepage .cm-header__nav a { transition: color .25s ease, opacity .25s ease; }
body.homepage .cm-header__nav a:hover,
body.homepage .cm-header__nav a.is-active { color: #fff; opacity: .62; }

body.homepage.is-scrolled .cm-header__logo,
body.homepage.is-scrolled .cm-header__logotype,
body.homepage.is-scrolled .cm-header__nav a,
body.homepage.is-scrolled .cm-header__actions .header__icon { color: var(--hp-ink); }
body.homepage.is-scrolled .cm-header__actions .header__icon svg { stroke: var(--hp-ink); }
body.homepage.is-scrolled .cm-header .menu-toggle span { background-color: var(--hp-ink); }
body.homepage.is-scrolled .cm-header__nav a:hover,
body.homepage.is-scrolled .cm-header__nav a.is-active { color: var(--hp-accent); opacity: 1; }

/* reference-style nav type + "Search" text + dark Sign Up button */
body.homepage .cm-header__nav a {
  text-transform: uppercase; letter-spacing: .13em; font-size: 11.5px;
}
body.homepage .cm-header__search {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font-family: inherit; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; transition: color .25s ease, opacity .25s ease;
}
body.homepage .cm-header__search:hover { opacity: .62; }
body.homepage.is-scrolled .cm-header__search { color: var(--hp-ink); }
body.homepage.is-scrolled .cm-header__search:hover { color: var(--hp-accent); opacity: 1; }

/* ---------- header / footer colour adaptation (homepage) ---------- */
body.homepage .cm-footer__brandcircle { background: var(--hp-accent); color: #fff; }
body.homepage .cm-footer__links a:hover,
body.homepage .cm-footer__email:hover,
body.homepage .cm-footer__social a:hover { color: var(--hp-accent); }
body.homepage .cm-footer__btn { background-color: var(--hp-ink); border-color: var(--hp-ink); }
body.homepage .cm-footer__btn:hover { background-color: var(--hp-accent); border-color: var(--hp-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hp-about__inner { grid-template-columns: 1fr; gap: 36px; padding: 76px 24px; }
  .hp-about__col { max-width: none; }
}
@media (max-width: 1024px) {
  .hp-collection { grid-template-columns: 1fr; }
  .hp-collection__media { height: 440px; }
  .hp-collection__card { margin: -60px 20px 0; padding: 40px 32px; }
  .hp-cats { grid-auto-rows: 250px; }
  body.homepage .cm-header__nav a { letter-spacing: .08em; font-size: 11px; }
}
@media (max-width: 760px) {
  .hp-section { padding: 56px 18px; }
  .hp-hero { height: 72vh; min-height: 440px; }
  .hp-hero__arrow { display: none; }
  .hp-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* drop the explicit bento placement so 8 cells flow into 2 columns */
  .hp-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .hp-cat:nth-child(1), .hp-cat:nth-child(2), .hp-cat:nth-child(3),
  .hp-cat:nth-child(4), .hp-cat:nth-child(5), .hp-cat:nth-child(6),
  .hp-cat:nth-child(7), .hp-cats__all { grid-area: auto; }
  .hp-cat span { font-size: 12px; letter-spacing: .16em; }
  .hp-cats__all-circle { width: 44px; height: 44px; }
  .hp-ig-strip { grid-template-columns: repeat(2, 1fr); }
  .hp-services { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 60px; }
  .hp-about__inner { padding: 60px 18px; }
  .hp-title { font-size: 26px; }
  .hp-collection { padding: 56px 0 24px; }
  .hp-card__title { font-size: 13px; }
  .hp-card__price { font-size: 13px; }
  body.homepage .cm-header__search { display: none; }
}

/* ============================================================
   Bento mosaic driven by #hpCats wrapper (2026-09-20)
   .hp-cats is a 3x3 grid; the wrapper itself must not create a
   grid item, so use display:contents and let the 8 category tiles
   auto-flow while .hp-cats__all keeps its explicit 3/3 slot.
   ============================================================ */
.hp-cats__grid { display: contents; }
.hp-cats__grid .hp-cat { grid-area: auto; }
@media (max-width: 960px) {
  .hp-cats__grid .hp-cat { grid-area: auto; }
}