/* 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;
}
/* Inline SVG icon: sized in em so it tracks whatever text it sits next to. */
.hhf-ico {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.125em;
}
.hhf-vector-icon {
  color: #b87333;
  width: 24px;
  height: 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-viewer__title .hhf-ico,
.hhf-badge .fa,
.hhf-badge .hhf-ico { 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);
}
/* The single reason-to-buy badge: solid copper, so it wins the slide. */
.hhf-badge--hot {
  background: #b87333;
  border-color: #b87333;
  color: #ffffff;
  font-weight: 600;
}
.hhf-badge--hot .hhf-ico { color: #ffffff; }
.hhf-viewer__name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.35;
}
.hhf-viewer__pitch {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.45;
}
.hhf-viewer__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.hhf-viewer__prices {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.hhf-viewer__price { color: #b87333; font-size: 17px; font-weight: 700; }
.hhf-viewer__price-old {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  text-decoration-thickness: 1px;
}
.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; }
}


/* ==========================================================================
   Storefront mobile layout — hosted here on purpose
   --------------------------------------------------------------------------
   These rules are not about the feed. They lived in arabiva-cards.css, the
   shared override layer, and were silently dropped twice by a parallel
   session whose rebase tool re-appends its own block over whatever is live;
   sentinel markers did not survive that. feed.css belongs to this plugin, is
   injected on every catalogue page by the same oc_event that loads feed.js,
   and no other session writes to it — so the rules stay put. Move them back
   once both sessions agree on one append protocol for that file.
   ========================================================================== */
   this file is the shared override layer and parallel sessions rebase onto it;
   an unmarked block gets dropped the next time someone re-appends theirs. */
/* ── Category list layout → two-column grid on phones ────────────────────── */
/* Some categories are set to Journal's list layout (المسك والعود among them),
   which on a 375px screen gives one product per row behind a 98px thumbnail.
   Fragrance browsing is image-led, so phones get two columns regardless of
   the per-category setting. Desktop keeps whatever the category chose.
   The image width comes from --product-list-image-width, which Journal's
   generated CSS sets to 30% at (0,4,0); the override below has to outrank it. */
@media (max-width: 767px) {
  .main-products.product-list.auto-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr floors at the item's min-content,
       and the "inspired by" block inside these cards is wide enough to push
       the columns past the container — the second column landed off-screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 12px;
    flex-direction: initial;
    align-items: start;
  }
  .main-products.product-list.auto-grid .product-layout,
  .main-products.product-list.auto-grid .product-thumb {
    max-width: 100%;
    width: auto;
    min-width: 0;
  }
  .main-products.main-products-style.product-list.product-list .product-layout .product-thumb {
    flex-direction: column;
    --product-list-image-width: 100%;
  }
  /* Journal sizes the caption as calc(100% - image - gap); at a full-width
     image that lands on zero, so state it outright. */
  .main-products.main-products-style.product-list.product-list .product-layout .caption {
    width: 100%;
  }
  .main-products.product-list .product-thumb .image-group,
  html[dir="rtl"] .main-products.product-list .product-thumb .image {
    float: none;
  }
}

/* ── Reference block on the card ─────────────────────────────────────────── */
/* identity.js builds these two lines and tags them; the layout lives here so
   it can change with the viewport. Both are block by default. */
.hh-id-card-reference .hh-id-ref-house,
.hh-id-card-reference .hh-id-ref-impression {
  display: block;
}

/* ── Phone card density: shorter reference line, lighter actions ─────────── */
/* At two columns a card is ~158px wide, so every line costs real estate.
   "ابتكار من أرابيڤا" is identical on all 36 cards on screen and sits above
   the line that actually varies — keep the varying half, on one line. */
@media (max-width: 767px) {
  .hh-id-card-reference .hh-id-ref-house {
    display: none;
  }
  .hh-id-card-reference .hh-id-ref-impression {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Compare is a desktop-comparison feature; it costs a whole button row
     on a phone and leaves cart + wishlist, which is what people tap. */
  .main-products .product-thumb .wish-group .btn-compare {
    display: none;
  }
  .main-products .product-thumb .button-group {
    align-items: center;
    margin: -5px;
  }
  .main-products .product-thumb .button-group .btn {
    margin: 5px;
  }
}

/* ── Cart table → stacked rows on phones ─────────────────────────────────── */
/* The cart renders a six-column table 737px wide inside a 325px column, so a
   phone showed under half a row and the customer had to scroll sideways —
   in RTL the totals and the quantity controls started off-screen — on the
   page where they are closest to paying. Each row becomes a small card:
   image, name, then unit price and line total, with the quantity controls
   on their own full-width line. */
@media (max-width: 767px) {
  #shopping-cart .table-responsive.table-scroll {
    overflow-x: visible;
  }
  #shopping-cart table.table-bordered {
    display: block;
    border: 0;
  }
  #shopping-cart table.table-bordered > thead {
    display: none;
  }
  #shopping-cart table.table-bordered > tbody {
    display: block;
  }
  #shopping-cart table.table-bordered > tbody > tr {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name  name"
      "img price total"
      "qty qty   qty";
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
  }
  #shopping-cart table.table-bordered > tbody > tr > td {
    display: block;
    border: 0;
    padding: 0;
    width: auto;
  }
  #shopping-cart table.table-bordered > tbody > tr > td.td-image { grid-area: img; }
  #shopping-cart table.table-bordered > tbody > tr > td.td-image img { width: 84px; height: auto; }
  #shopping-cart table.table-bordered > tbody > tr > td.td-name  { grid-area: name; text-align: start; }
  /* The model column repeats the category ("العطور") on every line. */
  #shopping-cart table.table-bordered > tbody > tr > td.td-model { display: none; }
  #shopping-cart table.table-bordered > tbody > tr > td.td-price {
    grid-area: price;
    text-align: start;
    font-size: 13px;
    color: #6b5f52;
  }
  #shopping-cart table.table-bordered > tbody > tr > td.td-total {
    grid-area: total;
    text-align: end;
    font-weight: 600;
    white-space: nowrap;
  }
  #shopping-cart table.table-bordered > tbody > tr > td.td-qty { grid-area: qty; text-align: start; }
}

/* ── Home product modules: reachable on a phone ──────────────────────────── */
/* These modules are configured as carousels, so Journal gives the scroller
   `grid-auto-flow: column`; every product lands on one row. At 375px that row
   is 2143px wide inside a 375px box, and the scroller has no usable scroll
   range — Journal's own JS then tags the module `no-scroll` and hides the
   arrows. Result: 2 of 8 products visible and the other 6 stranded off-screen
   with no way to reach them, on all three home product modules (918/641/957).

   The track list is built from Journal's --grid-min-col / --grid-max-col /
   --grid-min-width / --fr chain, which resists a simple variable override, so
   state the two columns outright and put the flow back to rows. */
@media (max-width: 767px) {
  .module-products .auto-grid .auto-grid-items {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: visible;
  }
}

/* ── Highlight badge (جديد / رائج / -30%) ───────────────────────────────── */
/* The badge ships in the stories payload and the bar renders it, but no rule
   was ever written for it: it stayed display:inline at 16px in the normal
   flow, landing on top of the circle label. English showed it worst, where
   two-line labels start higher — "New Arrivals" and its NEW badge overlapped
   by 13px. Lift it onto the circle, where a badge belongs. */
.hhf-circle {
  position: relative;
}
.hhf-circle__tag {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  z-index: 2;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #b87333;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 2px #ffffff;
}
/* Labels wrap to one or two lines, so pin the circles to a common top edge
   instead of letting each one float to its own height. */
.hhf-stories__track {
  align-items: flex-start;
}