/* GW Collection Header
   Built from Figma 29:5936 (desktop 1440 x 361) / 30:7350 (mobile 390 x 582).

   Mobile-first: the base rules ARE the mobile frame; the >=1025px block is the
   desktop row. Every colour is a scoped custom property whose var() fallback is
   the Figma literal itself, so a blank setting keeps the design rather than
   voiding the property.

   Three colours exist in this design and no others: #FFFFFF, #A88E57, #242424.
   Zero border-radius, zero borders, zero shadows, and NO scrim over the image
   (measured: rendered-vs-source pixel deltas are 0).
*/

.gw-collection-header {
  background: var(--gw-ch-bg, #ffffff);
}

.gw-collection-header *,
.gw-collection-header *::before,
.gw-collection-header *::after {
  box-sizing: border-box;
}

/* Capped at 1440 and centred: above that width the section does NOT bleed to
   the viewport edge. */
.gw-collection-header__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.gw-collection-header__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---------- media ----------
   The image is DOM-second (desktop puts it right of the copy) and lifted to the
   top of the mobile stack with order:-1 — no row-reverse, nothing else moves.
   The fill is absolutely positioned exactly as Figma emits it (absolute inset-0
   size-full object-cover), which also removes any dependence on a percentage
   height resolving against a stretched flex item. */
.gw-collection-header__media {
  order: -1;
  position: relative;
  flex: none;
  width: 100%;
  height: 267px;
  overflow: hidden;
}

/* img only — the panel is never rendered without a real image, so there is no
   placeholder svg to size. */
.gw-collection-header__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- text column ---------- */
.gw-collection-header__body {
  flex: none;
  width: 100%;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* ---------- breadcrumb ----------
   In flow on mobile as the first item of the stack; lifted out of flow on
   desktop (see the >=1025 block). */
.gw-collection-header__crumbs {
  margin: 0;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-ch-text-color, #242424);
  white-space: nowrap;
}

.gw-collection-header__crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
}

/* The separator is a literal " / " with a space either side; white-space:pre
   keeps both spaces, which a collapsing context would otherwise trim. */
.gw-collection-header__crumb-sep {
  white-space: pre;
}

/* ---------- tag ----------
   140 x 40 in the frame. Width is NOT hardcoded: 9px padding either side of the
   122px "HEAVEN INSPIRED" text run gives exactly 140, and letting it size to
   content keeps a merchant-edited label correct. */
.gw-collection-header__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 9px;
  border-radius: 0;
  background: var(--gw-ch-tag-bg, #a88e57);
  color: var(--gw-ch-tag-text, #ffffff);
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ---------- title ----------
   Arapey is NOT a theme font — it arrives from the gw_title_font picker via
   font_face and lands in --gw-ch-title-font. 48px at BOTH breakpoints: the
   mobile frame does not downscale it, it wraps to two lines. */
.gw-collection-header__title {
  margin: 0;
  font-family: var(--gw-ch-title-font, "Arapey", serif);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--gw-ch-title-color, #242424);
}

/* ---------- description ---------- */
.gw-collection-header__description {
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gw-ch-text-color, #242424);
}

.gw-collection-header__description > * {
  margin: 0;
}

.gw-collection-header__description > * + * {
  margin-top: 16px;
}

/* assets/theme.min.css gives every li a margin-bottom:4.5px that a flex parent
   ADDS to its own height — zero it. A richtext setting accepts <ul>, so this is
   reachable here. (Recorded on gw-benefit-bar and gw-faq.) */
.gw-collection-header__description li {
  margin: 0;
  line-height: normal;
}

/* ---------- theme-editor placeholder ---------- */
.gw-collection-header__placeholder {
  padding: 24px 16px;
  font-family: var(--header-font-stack, "EB Garamond", serif);
  font-size: 14px;
  line-height: normal;
  color: var(--gw-ch-text-color, #242424);
}

/* ================= desktop ================= */
@media screen and (min-width: 1025px) {
  .gw-collection-header__row {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding-left: 64px;
    min-height: 361px;
  }

  /* Both children are flex:1 0 0, so at exactly 1440 they split
     1440 - 64 (inset) - 48 (gap) = 1328 into 664 + 664 — the frame's own
     measurements, reproduced by the geometry rather than pinned.
     The 66px block padding keeps the column clear of the out-of-flow crumb
     (24 top + 18 crumb + 24 minimum gap). It is symmetric, so a column that
     fits the 361 band centres exactly where it did (Figma's 100.5 top); a
     taller one — a long description — grows the band instead of riding up
     under the crumb (BugHerd #15 / #16). */
  .gw-collection-header__body {
    order: 0;
    flex: 1 0 0;
    min-width: 1px;
    width: auto;
    padding: 66px 0;
  }

  .gw-collection-header__media {
    order: 0;
    flex: 1 0 0;
    min-width: 1px;
    width: auto;
    height: auto;
    align-self: stretch;
  }

  /* Out of flow, resolved against __row's PADDING box — which begins at the
     row's left border edge, so left:48px lands at x=48 and the 64px column
     inset is untouched. Figma draws the crumb 16px left of the text column.
     The 58.5px gap below it is emergent from the column being vertically
     centred in the 361px band; it is deliberately not hardcoded. The
     column's 66px padding (above) sets its 24px floor. */
  .gw-collection-header__crumbs {
    position: absolute;
    left: 48px;
    top: 24px;
  }
}