/* Home-only sections — enqueued only on the HUACAN Editorial Home template. */

.hp-btn {
  display: inline-flex;
  align-items: center;
  padding: 18px 34px;
  font: 600 13px/1 var(--hp-font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.hp-btn--primary { background: var(--hp-lacquer); color: var(--hp-paper); }
.hp-btn--primary:hover { background: var(--hp-lacquer-hover); }
.hp-btn--secondary { border: 1px solid var(--hp-ink); color: var(--hp-ink); padding: 17px 32px; }
.hp-btn--secondary:hover { background: var(--hp-ink); color: var(--hp-paper); }

/* ===================== Hero ===================== */
.hp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
  background: var(--hp-cream);
}
.hp-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: var(--hp-space-6) var(--hp-gutter-desktop);
}
/* Spacing audit (2026-08-26): .hp-eyebrow's own 16px margin-bottom was
   stacking on top of this flex gap, leaving 38px between the eyebrow and
   headline — more space than between the headline and its own
   description. An eyebrow is paired with the thing directly below it; it
   should sit closer to it, not further. */
.hp-hero__text .hp-eyebrow { margin-bottom: 0; }
.hp-hero__headline {
  margin: 0;
  font: 400 76px/.98 var(--hp-font-serif);
  letter-spacing: -.02em;
  color: var(--hp-ink);
}
.hp-hero__description {
  margin: 0;
  max-width: 42ch;
  font: 400 18px/1.7 var(--hp-font-sans);
  color: #544B42;
}
.hp-hero__ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 4px; }
.hp-hero__cta-secondary { border-bottom-color: transparent; }
.hp-hero__cta-secondary:hover { border-bottom-color: var(--hp-lacquer); }
/* Trust line demoted to a quiet footnote (2026-08-26) — smaller and
   lighter than the old 12px/var(--hp-meta) treatment, which read at
   nearly the same weight as the CTAs and competed with them. */
.hp-hero__trust {
  display: flex; align-items: center; gap: 14px; padding-top: 10px;
  font: 500 11px/1 var(--hp-font-sans); color: var(--hp-meta-soft);
}
.hp-hero__trust .hp-star { color: var(--hp-lacquer); letter-spacing: .06em; }
.hp-hero__divider { width: 1px; height: 12px; background: var(--hp-sand); }
.hp-hero__media { position: relative; min-height: 420px; }
.hp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .hp-hero { grid-template-columns: 1fr; }
  .hp-hero__text { padding: var(--hp-space-4) var(--hp-gutter-mobile); order: 2; }
  .hp-hero__media { order: 1; min-height: 340px; }
  .hp-hero__headline { font-size: 44px; }
  .hp-hero__ctas { flex-direction: column; align-items: center; gap: 16px; }
  .hp-hero__ctas .hp-btn { justify-content: center; height: 56px; padding: 0; width: 100%; }
}

/* ===================== Editorial ===================== */
.hp-editorial {
  padding: var(--hp-space-7) var(--hp-gutter-desktop);
  background: var(--hp-paper);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--hp-space-6);
  align-items: start;
}
.hp-editorial__media { display: flex; flex-direction: column; gap: 18px; }
.hp-editorial__media img { width: 100%; height: 480px; object-fit: cover; display: block; }
.hp-editorial__caption { font: 500 12px/1.6 var(--hp-font-sans); color: var(--hp-meta); }
.hp-editorial__content { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; }
/* Same eyebrow-stacking fix as the hero (spacing audit, 2026-08-26): this
   flex column's own 32px gap was stacking with the eyebrow's 16px
   margin-bottom, putting more air between the eyebrow and heading (48px)
   than between the heading and its own body text (32px). */
.hp-editorial__content > .hp-eyebrow { margin-bottom: 0; }
.hp-editorial__heading {
  margin: 0; max-width: 22ch;
  font: 400 46px/1.06 var(--hp-font-serif); letter-spacing: -.015em; color: var(--hp-ink);
}
.hp-editorial__body { margin: 0; max-width: 50ch; font: 400 17px/1.75 var(--hp-font-sans); color: #544B42; }
.hp-editorial__steps { display: flex; flex-direction: column; border-top: 1px solid var(--hp-sand); }
.hp-editorial__step {
  display: grid; grid-template-columns: 44px 1fr 1fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--hp-sand); align-items: baseline;
}
.hp-editorial__step-num { font: 600 13px/1 var(--hp-font-sans); color: var(--hp-lacquer); }
.hp-editorial__step-title { font: 600 19px/1.25 var(--hp-font-sans); color: var(--hp-ink); }
.hp-editorial__step-body { font: 400 14px/1.6 var(--hp-font-sans); color: var(--hp-meta); }

@media (max-width: 900px) {
  .hp-editorial { padding: var(--hp-space-5) var(--hp-gutter-mobile); grid-template-columns: 1fr; gap: var(--hp-space-3); }
  .hp-editorial__media img { height: 260px; }
  .hp-editorial__heading { font-size: 30px; }
  .hp-editorial__step { grid-template-columns: 32px 1fr; }
  .hp-editorial__step-body { grid-column: 2; }
}

/* ===================== Craftsmanship ===================== */
.hp-craft { padding: var(--hp-space-7) var(--hp-gutter-desktop); background: var(--hp-paper); display: flex; flex-direction: column; gap: var(--hp-space-4); }
.hp-craft__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--hp-space-6); align-items: end; }
.hp-craft__heading { margin: 0; max-width: 24ch; font: 400 44px/1.05 var(--hp-font-serif); letter-spacing: -.015em; color: var(--hp-ink); }
.hp-craft__body { margin: 0; max-width: 48ch; font: 400 16px/1.7 var(--hp-font-sans); color: #544B42; }
.hp-craft__grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr); gap: 20px; height: 420px; }
.hp-craft__media { position: relative; overflow: hidden; background: var(--hp-cream); height: 100%; }
.hp-craft__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-craft__media-stack { display: flex; flex-direction: column; gap: 20px; }
.hp-craft__media-stack .hp-craft__media { flex: 1; }
.hp-craft__list { background: var(--hp-cream); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.hp-craft__items { display: flex; flex-direction: column; }
.hp-craft__item {
  display: flex; justify-content: space-between; padding: 13px 0;
  border-bottom: 1px solid #E2D9C9; font: 400 15px/1 var(--hp-font-sans); color: #3A342E;
}
.hp-craft__item-spec { color: var(--hp-meta); font-family: var(--hp-font-sans); font-weight: 500; font-size: 12px; }

@media (max-width: 900px) {
  .hp-craft { padding: var(--hp-space-5) var(--hp-gutter-mobile); }
  .hp-craft__head { grid-template-columns: 1fr; gap: var(--hp-space-2); }
  .hp-craft__heading { font-size: 28px; }
  .hp-craft__grid { grid-template-columns: 1fr; height: auto; }
  .hp-craft__media { height: 220px; }
}

/* ===================== Best sellers ===================== */
.hp-bestsellers {
  width: 100%;
  padding: var(--hp-space-6) var(--hp-gutter-desktop) var(--hp-space-7);
  background: var(--hp-cream);
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-5);
}
.hp-bestsellers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hp-space-2); }
.hp-bestsellers__grid { --hp-card-badge-bg: var(--hp-ink); }

@media (max-width: 900px) {
  .hp-bestsellers { padding: var(--hp-space-5) var(--hp-gutter-mobile); gap: var(--hp-space-3); }
  .hp-bestsellers__head .hp-mosaic__title { font-size: 32px; }
}

/* ===================== Custom photo (flagship, dark) ===================== */
.hp-custom-photo {
  width: 100%;
  padding: var(--hp-space-7) var(--hp-gutter-desktop);
  background: var(--hp-ink);
  color: var(--hp-cream);
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-5);
}
.hp-custom-photo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hp-space-6);
  align-items: end;
}
.hp-custom-photo__heading {
  margin: 0;
  font: 400 72px/.98 var(--hp-font-serif);
  letter-spacing: -.02em;
  color: var(--hp-paper);
}
.hp-custom-photo__heading em { font-style: italic; color: #D9A18C; }
.hp-custom-photo__text { display: flex; flex-direction: column; gap: 28px; padding-bottom: 6px; }
.hp-custom-photo__text p { margin: 0; max-width: 46ch; font: 400 18px/1.75 var(--hp-font-sans); color: var(--hp-cream-on-dark); }
/* 2026-08-26: swapped the category-thumbnail reuse (2 near-duplicate
   reference photos, no transformation shown) for a real catalog photo that
   actually visualizes "photo -> art" — an artist finishing a painted
   portrait on an easel, cropped from an existing product gallery image
   (S60a7a7b04b7045248aab062e9970e819R, its own baked-in text band
   cropped off). Real photography already licensed for this catalog, not
   fabricated or a customer's private photo. Aspect-ratio matches that
   image's real crop (1000x790) instead of the old 16:9. */
.hp-custom-photo__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hp-custom-photo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

@media (max-width: 900px) {
  .hp-custom-photo { padding: var(--hp-space-5) var(--hp-gutter-mobile); gap: var(--hp-space-3); }
  .hp-custom-photo__head { grid-template-columns: 1fr; gap: var(--hp-space-2); }
  .hp-custom-photo__heading { font-size: 40px; }
  .hp-custom-photo__media { aspect-ratio: 4 / 3; }
}

/* ===================== Reviews strip ===================== */
.hp-reviews {
  width: 100%;
  padding: var(--hp-space-6) var(--hp-gutter-desktop);
  background: var(--hp-paper);
  border-bottom: 1px solid #EDE6DA;
  display: grid;
  grid-template-columns: minmax(0, .7fr) repeat(3, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
.hp-reviews__summary { display: flex; flex-direction: column; gap: 10px; }
.hp-reviews__score { font: 400 52px/1 var(--hp-font-serif); color: var(--hp-ink); }
.hp-reviews__count { font: 500 12px/1.6 var(--hp-font-sans); color: var(--hp-meta); }
.hp-reviews__item { display: flex; flex-direction: column; gap: 14px; }
.hp-reviews__item p { margin: 0; font: 400 16px/1.7 var(--hp-font-sans); color: #3A342E; }
.hp-reviews__author { font: 500 12px/1 var(--hp-font-sans); color: var(--hp-meta); }
.hp-star--sm { font-size: 13px; }

@media (max-width: 900px) {
  .hp-reviews { padding: var(--hp-space-5) var(--hp-gutter-mobile); grid-template-columns: 1fr; gap: var(--hp-space-3); }
}

/* ===================== Newsletter ===================== */
/* 2026-08-26: Reviews and Newsletter were both Paper with only a 1px
   border between them — visually one flat block, which read as "a form
   dropped in before the footer" rather than its own moment. Cream gives
   it the same alternating rhythm as Best Sellers/Craft above, and a
   little extra vertical padding lets it breathe like the other sections
   instead of being the tightest block on the page right before the dark
   footer. */
.hp-newsletter {
  padding: var(--hp-space-7) var(--hp-gutter-desktop);
  background: var(--hp-cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hp-space-6);
  align-items: center;
}
.hp-newsletter__heading { margin: 0 0 16px; font: 400 38px/1.08 var(--hp-font-serif); letter-spacing: -.015em; color: var(--hp-ink); }
.hp-newsletter__body { margin: 0; font: 400 15px/1.6 var(--hp-font-sans); color: var(--hp-meta); }
.hp-newsletter__form { display: flex; flex-direction: column; gap: 14px; }
.hp-newsletter__field { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--hp-ink); padding-bottom: 14px; }
.hp-newsletter__field input {
  flex: 1; border: 0; outline: 0; background: none;
  font: 400 17px/1 var(--hp-font-sans); color: var(--hp-ink);
}
.hp-newsletter__field input::placeholder { color: var(--hp-meta); }
/* :focus-visible outline is the guaranteed-everywhere fallback; :has() adds a
   nicer full-field highlight on browsers that support it (progressive
   enhancement, not required for the accessibility requirement itself). */
.hp-newsletter__field input:focus-visible { outline: 2px solid var(--hp-lacquer); outline-offset: 2px; }
.hp-newsletter__field:has(input:focus-visible) { border-bottom-color: var(--hp-lacquer); }
.hp-newsletter__field button:focus-visible { outline: 2px solid var(--hp-lacquer); outline-offset: 2px; }
.hp-newsletter__field button {
  background: none; border: 0; cursor: pointer;
  font: 600 13px/1 var(--hp-font-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--hp-lacquer);
  transition: color .15s ease, transform .15s ease;
}
.hp-newsletter__field button:hover { color: var(--hp-lacquer-hover); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .hp-newsletter__field button { transition: none; }
  .hp-newsletter__field button:hover { transform: none; }
}
.hp-newsletter__note { font: 500 12px/1 var(--hp-font-sans); color: var(--hp-meta); }

@media (max-width: 900px) {
  .hp-newsletter { padding: var(--hp-space-5) var(--hp-gutter-mobile); grid-template-columns: 1fr; gap: var(--hp-space-3); }
  .hp-newsletter__heading { font-size: 28px; }
}

/* ===================== Before / After slider ===================== */
/* "Before" = blank numbered canvas, "After" = finished painting. The
   after image sits full-bleed; a clipped layer holds the before image
   and its width is driven by --hp-ba-pos (a %, JS-updated, 50% default).
   No JS => still a usable static 50/50 split. Square corners per the
   design system. */
.hp-ba {
  padding: var(--hp-space-6) var(--hp-gutter-desktop);
  background: var(--hp-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-4);
}
.hp-ba__head { text-align: center; display: flex; flex-direction: column; gap: 12px; max-width: 40ch; }
.hp-ba__heading { margin: 0; font: 400 38px/1.12 var(--hp-font-serif); letter-spacing: -.015em; color: var(--hp-ink); }
.hp-ba__viewer {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hp-sand);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.hp-ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hp-ba__before-layer {
  position: absolute; inset: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--hp-ba-pos, 50%)) 0 0);
}
.hp-ba__viewer:not(.is-dragging) .hp-ba__before-layer { transition: clip-path .12s ease-out; }
.hp-ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--hp-ba-pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--hp-paper);
  cursor: ew-resize;
}
.hp-ba__viewer:not(.is-dragging) .hp-ba__handle { transition: left .12s ease-out; }
.hp-ba__handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--hp-paper);
  color: var(--hp-ink);
  display: flex; align-items: center; justify-content: center;
}
.hp-ba__handle-grip::before,
.hp-ba__handle-grip::after {
  content: "";
  width: 0; height: 0;
  border-block: 5px solid transparent;
}
.hp-ba__handle-grip::before { border-right: 7px solid currentColor; margin-right: 5px; }
.hp-ba__handle-grip::after  { border-left: 7px solid currentColor; margin-left: 5px; }
.hp-ba__handle:focus-visible { outline: none; }
.hp-ba__handle:focus-visible .hp-ba__handle-grip { outline: 2px solid var(--hp-lacquer); outline-offset: 2px; }
.hp-ba__tag {
  position: absolute;
  top: 16px;
  font: 600 11px/1 var(--hp-font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hp-paper);
  background: rgba(36, 31, 27, .62);
  padding: 7px 12px;
  pointer-events: none;
}
.hp-ba__tag--before { left: 16px; }
.hp-ba__tag--after  { right: 16px; }
@media (prefers-reduced-motion: reduce) {
  .hp-ba__viewer:not(.is-dragging) .hp-ba__before-layer,
  .hp-ba__viewer:not(.is-dragging) .hp-ba__handle { transition: none; }
}
@media (max-width: 900px) {
  .hp-ba { padding: var(--hp-space-5) var(--hp-gutter-mobile); gap: var(--hp-space-3); }
  .hp-ba__heading { font-size: 28px; }
  .hp-ba__handle-grip { width: 38px; height: 38px; }
}

/* ===================== Section rhythm (2026-08-27) ===================== */
/* User feedback: the vertical gaps between home sections read as too large
   — editorial/craft/custom-photo/newsletter were --hp-space-7 (160px)
   top+bottom, stacking to ~320px between two blocks. Tightened to one
   consistent step so the page reads as a sequence, not isolated slabs. */
.hp-editorial,
.hp-craft,
.hp-custom-photo,
.hp-newsletter,
.hp-ba,
.hp-mosaic,
.hp-reviews { padding-top: var(--hp-space-4); padding-bottom: var(--hp-space-4); }
.hp-bestsellers { padding-top: var(--hp-space-4); padding-bottom: var(--hp-space-5); }
.hp-editorial { align-items: center; }
@media (max-width: 900px) {
  .hp-editorial,
  .hp-craft,
  .hp-custom-photo,
  .hp-newsletter,
  .hp-ba,
  .hp-mosaic,
  .hp-reviews,
  .hp-bestsellers { padding-top: var(--hp-space-4); padding-bottom: var(--hp-space-4); }
}