/* Arabiva Feed — highlights bar + story viewer (P1) v1.0.0
   Scope: everything under .hhf- only. Palette: black #111111 / white / copper #b87333. */

/* ---------- Highlights bar ---------- */
.hhf-stories {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: 14px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hhf-stories::-webkit-scrollbar { display: none; }

/* centered when it fits, scrollable when it overflows */
.hhf-stories__track {
  display: flex;
  gap: 18px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.hhf-circle {
  flex: 0 0 auto;
  width: 76px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #111111;
  font-family: inherit;
}
.hhf-circle:hover { text-decoration: none; color: #111111; }

.hhf-circle__ring {
  display: block;      /* spans stretch inline otherwise → oval rings */
  box-sizing: border-box;
  width: 66px;
  height: 66px;
  margin: 0 auto;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(45deg, #8c5a28 0%, #b87333 45%, #d9985f 70%, #b87333 100%);
  transition: transform .15s ease;
}
.hhf-circle:hover .hhf-circle__ring { transform: scale(1.07); }
.hhf-circle--seen .hhf-circle__ring { background: #dddddd; }

.hhf-circle__inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}
.hhf-vector-icon {
  color: #b87333;
  font-size: 24px;
}
.hhf-circle__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* link circles (families / quiz / feed entry): warm plate behind the icon */
.hhf-circle--link .hhf-circle__inner {
  background: linear-gradient(160deg, #fdf6ef, #f3e3d0);
}

.hhf-circle__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #111111;
  white-space: normal;
  overflow: hidden;
}

@media (max-width: 767px) {
  .hhf-stories { padding: 11px 0 8px; }
  .hhf-stories__track { gap: 14px; padding: 0 12px; }
  .hhf-circle { width: 66px; }
  .hhf-circle__ring { width: 58px; height: 58px; }
  .hhf-circle__label { font-size: 10.5px; }
}

/* ---------- Story viewer overlay ---------- */
.hhf-viewer {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(17, 17, 17, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhf-viewer * { box-sizing: border-box; }

.hhf-viewer__stage {
  position: relative;
  width: min(430px, 100vw);
  height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  background: #111111;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .hhf-viewer__stage { width: 100vw; height: 100%; border-radius: 0; }
}

.hhf-viewer__bars {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.hhf-viewer__bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.hhf-viewer__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #b87333;
}
.hhf-viewer__bar--done i { width: 100%; }

.hhf-viewer__head {
  position: absolute;
  top: 22px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
  color: #ffffff;
  font-size: 14px;
}
.hhf-viewer__title { display: flex; align-items: center; gap: 8px; }
.hhf-viewer__title .fa,
.hhf-badge .fa { color: #d9985f; }

.hhf-viewer__close {
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  color: #ffffff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.hhf-viewer__close:hover { background: rgba(255, 255, 255, 0.28); }

/* horizontal snap rail — same feel as the feed page */
.hhf-viewer__rail {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.hhf-viewer__rail::-webkit-scrollbar { display: none; }

.hhf-viewer__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 60px; /* clearance for bars + head */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* story medallion: a TRUE circle (equal width/height, never an oval)
   with a light white frame — IG highlight cover blown up */
.hhf-viewer__media {
  flex: 0 0 auto;
  width: min(76vw, 330px);
  height: min(76vw, 330px);
  margin: auto; /* centers the medallion in the free space — no dead gap */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhf-viewer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hhf-viewer__media--empty { font-size: 64px; background: linear-gradient(160deg, #f5ede4, #ffffff); }

.hhf-viewer__info {
  padding: 10px 16px 16px;
  background: #111111;
  color: #ffffff;
}
.hhf-viewer__badges { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hhf-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(184, 115, 51, 0.18);
  color: #d9985f;
  border: 1px solid rgba(184, 115, 51, 0.5);
}
.hhf-viewer__name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.35;
}
.hhf-viewer__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.hhf-viewer__price { color: #b87333; font-size: 17px; font-weight: 700; }
.hhf-viewer__proof { color: rgba(255, 255, 255, 0.6); font-size: 12px; }

.hhf-viewer__actions { display: flex; gap: 10px; }
.hhf-btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border: 1px solid #b87333;
  transition: background .15s ease, color .15s ease;
}
.hhf-btn--primary { background: #b87333; color: #ffffff; }
.hhf-btn--primary:hover { background: #d9985f; color: #ffffff; text-decoration: none; }
.hhf-btn--ghost { background: transparent; color: #d9985f; }
.hhf-btn--ghost:hover { background: rgba(184, 115, 51, 0.15); color: #d9985f; text-decoration: none; }
.hhf-btn[disabled] { opacity: .55; cursor: default; }

/* viewer like/save toggles */
.hhf-vact {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.hhf-vact:hover { border-color: #d9985f; }
.hhf-vact--on { border-color: #b87333; background: rgba(184, 115, 51, 0.22); }
.hhf-vact__ico,
.hhf-act__ico { display: inline-flex; align-items: center; justify-content: center; }
.hhf-vact--on .fa,
.hhf-act--on .fa { color: #b87333; }

/* inline latest-comment preview on feed cards */
.hhf-cpreview {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: #faf7f3;
  border: 0;
  border-radius: 8px;
  text-align: start;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: #444444;
  cursor: pointer;
}
.hhf-cpreview:hover { background: #f5eee6; }
.hhf-cpreview__line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hhf-cpreview__line strong { color: #111111; }
.hhf-cpreview__all {
  display: block;
  margin-top: 3px;
  color: #b87333;
  font-weight: 600;
  font-size: 12px;
}

.hhf-viewer__zone {
  position: absolute;
  top: 70px;
  bottom: 185px;
  width: 38%;
  z-index: 2;
  background: none;
  border: 0;
  cursor: pointer;
}
.hhf-viewer__zone--prev { inset-inline-start: 0; }
.hhf-viewer__zone--next { inset-inline-end: 0; width: 62%; }

.hhf-viewer__toast {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  background: #b87333;
  color: #ffffff;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.hhf-viewer__toast--show { opacity: 1; }

/* ---------- Feed page: horizontal rail (reels-style) ---------- */
/* nothing inside the feed page may ever widen the document */
.hhf-feed-wrap {
  background: #ffffff;
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
}

.hhf-feed-head {
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 16px 4px;
}
.hhf-feed-title {
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.hhf-feed {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 16px 34px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* align snapped cards to the rail's own padding edge */
  scroll-padding-inline-start: 16px;
  /* swiping the rail must not scroll the page or trigger back-navigation */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hhf-feed::-webkit-scrollbar { display: none; }

.hhf-card {
  flex: 0 0 auto;
  width: min(78vw, 400px);
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  overflow: hidden;
}

/* desktop rail arrows (hidden on touch widths) */
.hhf-feed-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
  background: rgba(255, 255, 255, 0.95);
  color: #b87333;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.12);
  transition: background .15s ease, color .15s ease;
}
.hhf-feed-nav:hover { background: #b87333; color: #ffffff; }
.hhf-feed-nav--prev { inset-inline-start: 10px; }
.hhf-feed-nav--next { inset-inline-end: 10px; }
@media (max-width: 767px) {
  .hhf-feed-nav { display: none; }
}

.hhf-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #f5ede4, #ffffff);
}
.hhf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hhf-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 64px;
}
.hhf-card__badges {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hhf-card__badges .hhf-badge {
  background: rgba(17, 17, 17, 0.72);
  border-color: rgba(184, 115, 51, 0.6);
}

.hhf-card__body { padding: 12px 14px 14px; }

.hhf-card__name { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.hhf-card__name a { color: #111111; text-decoration: none; }
.hhf-card__name a:hover { color: #b87333; }

/* "inspired by" tagline under the alias name */
.hhf-inspired {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #8a8a8a;
}
.hhf-inspired span { color: #b87333; font-weight: 600; }
.hhf-inspired--dark { color: rgba(255, 255, 255, 0.62); margin: 0 0 8px; }
.hhf-inspired--dark span { color: #d9985f; }

.hhf-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.hhf-card__price { color: #b87333; font-size: 16px; font-weight: 700; }
.hhf-card__proof { color: #777777; font-size: 12px; }

.hhf-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hhf-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  min-width: 46px;
  background: none;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  color: #111111;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.hhf-act:hover { border-color: #b87333; }
.hhf-act--on { border-color: #b87333; background: rgba(184, 115, 51, 0.08); }
.hhf-act__ico { line-height: 1; }
.hhf-act__n { font-size: 12px; color: #777777; min-width: 12px; }
.hhf-act--on .hhf-act__n { color: #b87333; font-weight: 600; }

/* full-width on its own row — never gets squeezed by the reaction chips */
.hhf-card__atc {
  flex: 1 1 100%;
  margin-inline-start: 0;
  padding: 11px 12px;
  font-size: 14px;
}

.hhf-feed-more {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 14px 40px;
  display: flex;
}
.hhf-feed-more__btn { flex: 1; }

.hhf-feed-empty {
  flex: 0 0 100%;
  text-align: center;
  color: #777777;
  font-size: 15px;
  padding: 40px 0;
}
.hhf-feed-empty .fa { color: #b87333; }

@media (max-width: 767px) {
  .hhf-feed { padding: 8px 12px 24px; gap: 12px; scroll-padding-inline-start: 12px; }
  .hhf-feed-head { padding: 14px 12px 2px; }
  .hhf-feed-title { font-size: 19px; }
}

/* ---------- Comments bottom sheet (P3) ---------- */
.hhf-sheet__title { display: inline-flex; align-items: center; gap: 8px; }
.hhf-sheet__title .fa { color: #b87333; }
.hhf-sheet {
  position: fixed;
  inset: 0;
  z-index: 99995;
  background: rgba(17, 17, 17, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hhf-sheet__panel {
  width: min(520px, 100vw);
  max-height: 78vh;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: hhf-sheet-up .22s ease;
}
@keyframes hhf-sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hhf-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8e8e8;
}
.hhf-sheet__title { font-size: 15px; font-weight: 700; color: #111111; }
.hhf-sheet__close {
  background: #f4f4f4;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  color: #111111;
}

.hhf-sheet__list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 16px;
}
.hhf-sheet__hint { color: #777777; text-align: center; padding: 26px 0; font-size: 14px; }

.hhf-comment { padding: 10px 0; border-bottom: 1px solid #f2f2f2; }
.hhf-comment:last-child { border-bottom: 0; }
.hhf-comment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.hhf-comment__name { font-size: 13px; font-weight: 700; color: #111111; }
.hhf-comment__verified { font-size: 10px; padding: 1px 7px; }
.hhf-comment__ago { font-size: 11px; color: #999999; }
.hhf-comment__body { margin: 0; font-size: 14px; line-height: 1.5; color: #333333; white-space: pre-line; }

.hhf-sheet__form { padding: 10px 16px 16px; border-top: 1px solid #e8e8e8; }
.hhf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 16px minimum — anything smaller makes iOS Safari auto-zoom on focus,
   which leaves the whole page magnified and horizontally scrolled */
.hhf-sheet__name {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  margin-bottom: 8px;
}
.hhf-sheet__row { display: flex; gap: 8px; align-items: flex-end; }
.hhf-sheet__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  resize: none;
  font-family: inherit;
}
.hhf-sheet__input:focus, .hhf-sheet__name:focus { outline: none; border-color: #b87333; }
.hhf-sheet__send { flex: 0 0 auto; padding: 9px 18px; }
.hhf-sheet__notice { margin: 8px 0 0; font-size: 13px; }
.hhf-sheet__notice--ok { color: #b87333; }
.hhf-sheet__notice--err { color: #c0392b; }

/* ---------- مخلطات الدار (house blends) ---------- */
.hhf-blends {
  max-width: 1060px;
  margin: 0 auto;
  padding: 8px 16px 4px;
}
.hhf-blends__title {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 2px;
}
.hhf-blends__lede {
  margin: 0 0 12px;
  font-size: 13px;
  color: #777777;
}
.hhf-blends__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.hhf-blends__rail::-webkit-scrollbar { display: none; }

.hhf-blend {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(160deg, #fffdfa, #ffffff);
}
.hhf-blend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.hhf-blend__name { font-size: 15px; font-weight: 700; color: #111111; }

.hhf-blend__layers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 6px;
  margin-bottom: 10px;
}
.hhf-blend__plus {
  align-self: center;
  color: #b87333;
  font-size: 18px;
  font-weight: 700;
}
.hhf-blend__layer {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #111111;
}
.hhf-blend__layer:hover { text-decoration: none; }
.hhf-blend__layer:hover .hhf-blend__layer-name { color: #b87333; }
.hhf-blend__role {
  display: block;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #b87333;
  margin-bottom: 4px;
}
.hhf-blend__layer img,
.hhf-blend__noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f7f2ec;
  display: block;
}
.hhf-blend__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #b87333;
}
.hhf-blend__layer-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
}
.hhf-blend__layer-price { display: block; font-size: 12px; font-weight: 700; color: #b87333; }
.hhf-blend__add { width: 100%; padding: 10px; font-size: 13.5px; }

@media (max-width: 767px) {
  .hhf-blends { padding: 6px 12px 2px; }
  .hhf-blends__title { font-size: 16px; }
}