.hr-row {
  --hr-gap: 14px;
  container-type: inline-size;
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 3.2vw, 44px) 0;
  min-width: 0;
  scroll-margin-top: 1rem;
}
.hr-row:first-child {
  padding-top: 6px;
}
.hr-row:last-child {
  border-bottom: 0;
}
.hr-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.hr-heading h2 {
  font-size: clamp(23px, 2.15vw, 34px);
  letter-spacing: -0.055em;
  color: var(--ink);
}
.hr-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hr-controls[hidden] {
  display: none;
}
.hr-controls button {
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink);
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.hr-controls button:enabled:hover {
  background: var(--tint);
  border-color: var(--forest);
}
.hr-controls button:disabled {
  opacity: 0.37;
}
.hr-track {
  --hr-cols: 3;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--hr-cols) - 1) * var(--hr-gap)) / var(--hr-cols));
  grid-template-rows: auto;
  align-items: stretch;
  gap: var(--hr-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2px 0 6px;
  scrollbar-width: none;
}
.hr-track::-webkit-scrollbar {
  display: none;
}
.hr-cols-4 {
  --hr-cols: 4;
}
.hr-cols-5 {
  --hr-cols: 5;
}
.hr-cols-6 {
  --hr-cols: 6;
}
.hr-card {
  min-width: 0;
  position: relative;
  scroll-snap-align: start;
  color: var(--ink);
}
.hr-card > :is(a, button):not(.hr-save) {
  width: 100%;
  height: 100%;
  text-align: left;
  color: inherit;
  overflow: hidden;
}
.hr-card > :is(a, button):focus-visible,
.hr-track:focus-visible {
  outline-offset: -3px;
  outline: 3px solid var(--forest);
}
.hr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-card strong {
  display: block;
  line-height: 1.15;
  font-weight: 720;
  overflow-wrap: anywhere;
}
.hr-kicker,
.hr-meta {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.hr-kicker {
  color: var(--forest);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 750;
}
.hr-photo-labels {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.hr-sponsored,
.hr-sample {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.hr-sponsored {
  background: #e8f4bb;
  color: #253620;
}
.hr-sample {
  background: var(--tint);
  color: var(--ink);
}
.hr-photo-labels .hr-sample {
  background: #fff9e9ed;
  color: #30352d;
}
.hr-save {
  position: absolute;
  display: grid;
  place-items: center;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  right: 8px;
  top: 8px;
  color: #26392b;
  background: #fffdf3ed;
}
.hr-save[aria-pressed="true"] svg {
  fill: currentColor;
}
.hr-empty {
  font-size: 14px;
  border-left: 2px solid var(--line);
  padding: 5px 14px;
  line-height: 1.6;
  color: var(--muted);
}
.hr-empty .inline-action {
  color: var(--forest);
}

/* The image stub and tear line echo the offers on a retailer's listing. */
.hr-deal {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  min-height: 146px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  isolation: isolate;
}
.hr-deal-stub {
  display: block;
  position: relative;
  height: 100%;
  border-right: 1px dashed var(--forest);
}
.hr-deal-stub img {
  position: absolute;
  inset: 0;
}
.hr-deal-stub::before,
.hr-deal-stub::after {
  content: "";
  position: absolute;
  right: -7px;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.hr-deal-stub::before {
  top: -7px;
}
.hr-deal-stub::after {
  bottom: -7px;
}
.hr-deal-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 11px;
}
.hr-deal-copy .hr-meta {
  font-size: 11px;
}
.hr-offer {
  display: block;
  font-size: clamp(20px, 2.15vw, 32px);
  line-height: 1;
  letter-spacing: -0.065em;
  font-weight: 790;
  color: var(--forest);
}
.hr-deal-copy strong {
  font-size: 14px;
}
.hr-deal-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  margin-top: auto;
  padding-top: 5px;
}
.hr-shop,
.hr-product,
.hr-story {
  display: flex;
  flex-direction: column;
}
.hr-shop {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hr-shop-photo,
.hr-product-photo,
.hr-story-photo {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
}
.hr-shop-photo {
  aspect-ratio: 1.64;
}
.hr-shop-copy,
.hr-product-copy,
.hr-story-copy {
  display: grid;
  align-content: start;
  gap: 6px;
}
.hr-shop-copy {
  padding: 12px 13px 14px;
}
.hr-shop strong {
  font-size: clamp(16px, 1.35vw, 21px);
  letter-spacing: -0.035em;
}
.hr-shop .hr-meta {
  font-size: 11px;
}
.hr-event {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.hr-event-photo {
  position: relative;
  display: block;
  aspect-ratio: 2.4;
  overflow: hidden;
}
.hr-event-stamp {
  display: grid;
  place-content: center;
  justify-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  min-height: 49px;
  min-width: 44px;
  padding: 5px 7px;
  color: #253528;
  background: #fff9e9;
  border-radius: 4px;
  box-shadow: 0 1px 5px #101b1733;
}
.hr-event-stamp span {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.13em;
  font-weight: 775;
}
.hr-event-stamp b {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.06em;
}
.hr-no-date {
  min-height: 38px;
  min-width: 38px;
}
.hr-event-copy {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 15px 15px;
  border-top: 1px dashed var(--line);
}
.hr-event-copy::before,
.hr-event-copy::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  top: -7px;
}
.hr-event-copy::before {
  left: -7px;
}
.hr-event-copy::after {
  right: -7px;
}
.hr-event-top,
.hr-event-time,
.hr-delivery-tail,
.hr-product-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.hr-event-copy strong {
  font-size: clamp(18px, 1.55vw, 23px);
  letter-spacing: -0.035em;
}
.hr-event-time {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.hr-delivery {
  display: grid;
  grid-template-columns: clamp(65px, 19%, 96px) minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 9px;
}
.hr-delivery-photo {
  display: block;
  height: 100%;
  min-height: 70px;
  border-radius: 6px;
  overflow: hidden;
}
.hr-delivery-photo img {
  min-height: 70px;
}
.hr-delivery-copy {
  display: grid;
  gap: 4px;
}
.hr-delivery-copy > .hr-kicker {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hr-delivery-copy strong {
  font-size: 17px;
  letter-spacing: -0.035em;
}
.hr-delivery-tail:empty {
  display: none;
}
.hr-jump {
  color: var(--forest);
}
.hr-product {
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.hr-product-photo {
  aspect-ratio: 3 / 4;
  background: var(--tint);
}
.hr-product-copy {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hr-product-copy strong {
  font-size: 15px;
  letter-spacing: -0.03em;
}
.hr-product-copy .hr-meta {
  font-size: 11px;
}
.hr-product-foot {
  margin-top: auto;
  padding-top: 5px;
}
.hr-price {
  font-size: 15px;
  font-weight: 730;
}
.hr-story {
  border-top: 2px solid var(--forest);
  padding-top: 6px;
}
.hr-story-photo {
  aspect-ratio: 2.25;
  border-radius: 3px;
}
.hr-story-copy {
  padding: 12px 0 4px;
}
.hr-story-copy strong {
  font:
    700 clamp(23px, 2vw, 29px) / 1.03 "Cormorant",
    Georgia,
    serif;
  letter-spacing: -0.025em;
}
.hr-learn {
  background: var(--tint);
  border-radius: 10px;
  display: grid;
  grid-template-columns: clamp(75px, 29%, 110px) minmax(0, 1fr);
  align-items: stretch;
  min-height: 108px;
}
.hr-learn-photo {
  height: 100%;
  min-height: 108px;
}
.hr-learn-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
}
.hr-learn-copy strong {
  font-size: 17px;
  letter-spacing: -0.04em;
}
.hr-learn-copy .hr-meta {
  font-size: 11px;
}
.hr-articles-row .hr-save {
  left: 5px;
  right: auto;
  top: 5px;
}
:is(.hr-deal, .hr-shop, .hr-event, .hr-delivery, .hr-product, .hr-story, .hr-learn):hover
  strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
body:is([data-theme="print"], [data-theme="herbarium"]) .hr-heading h2 {
  font-family: "Cormorant", Georgia, serif;
  font-size: clamp(31px, 2.8vw, 42px);
}
@container (max-width: 1050px) {
  .hr-cols-6 {
    --hr-cols: 5;
  }
  .hr-cols-5 {
    --hr-cols: 4;
  }
}
@container (max-width: 840px) {
  .hr-cols-3,
  .hr-cols-4 {
    --hr-cols: 2;
  }
  .hr-cols-5 {
    --hr-cols: 3;
  }
  .hr-cols-6 {
    --hr-cols: 4;
  }
}
@container (max-width: 590px) {
  .hr-track {
    --hr-cols: 1.22;
    --hr-gap: 10px;
  }
  .hr-retailers-row .hr-track,
  .hr-brands-row .hr-track {
    --hr-cols: 2.13;
  }
  .hr-products-row .hr-track {
    --hr-cols: 2.3;
  }
  .hr-heading {
    margin-bottom: 12px;
  }
  .hr-controls button {
    width: 31px;
    height: 31px;
  }
  .hr-deal-copy {
    padding: 12px;
  }
  .hr-shop-copy {
    padding: 9px;
  }
}
@container (max-width: 390px) {
  .hr-retailers-row .hr-track,
  .hr-brands-row .hr-track,
  .hr-products-row .hr-track {
    --hr-cols: 2.08;
  }
  .hr-delivery {
    gap: 8px;
  }
  .hr-learn {
    grid-template-columns: 66px minmax(0, 1fr);
  }
}

.hr-note {
  margin: -6px 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted, #5f6b63);
}

/* ---- Deal card styles (v1.28.6): coupon (clip coupon + swing price tag, default), clip, ticket ---- */
.hr-heading-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hr-dswitch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.hr-dswitch button {
  border: 0;
  background: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.hr-dswitch button[aria-pressed="true"] {
  background: var(--forest);
  color: #fff;
}
.hr-deal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}
.hr-deal-foot .hr-deal-action {
  margin-top: 0;
}
.hr-deal-exp,
.hr-coupon-chip,
.hr-tag,
.hr-tag-string,
.hr-scissors,
.hr-promo-code,
.hr-act-coupon {
  display: none;
}
.hr-dstyle-ticket .hr-deal-foot {
  justify-content: flex-start;
}
/* Coupon + Clip */
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-track {
  padding-top: 12px;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal {
  grid-template-columns: 36% minmax(0, 1fr);
  gap: 12px;
  padding: 8px;
  min-height: 166px;
  background: #fffef6;
  border: 2px dashed var(--forest);
  border-radius: 14px;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-stub {
  border-right: 0;
  border-radius: 9px;
  overflow: hidden;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-stub::before,
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-stub::after {
  display: none;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-coupon-chip {
  display: block;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  background: var(--lime, #def19e);
  color: var(--forest);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-scissors {
  display: block;
  position: absolute;
  top: -11px;
  left: 22px;
  z-index: 3;
  padding: 0 5px;
  background: var(--bg);
  color: var(--forest);
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-copy {
  padding: 6px 4px 2px 0;
  gap: 4px;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-offer {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.06em;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-foot {
  border-top: 1px dashed var(--line);
  padding-top: 7px;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-exp {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-deal-action {
  color: var(--forest);
  font-weight: 750;
  white-space: nowrap;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-act-ticket {
  display: none;
}
:is(.hr-dstyle-coupon, .hr-dstyle-clip) .hr-act-coupon {
  display: inline;
}
/* The lime swing tag hangs from a string pinned at the top of the photo. */
.hr-dstyle-coupon .hr-tag-string {
  display: block;
  position: absolute;
  left: 10px;
  top: -2px;
  z-index: 1;
  width: 23px;
  height: 64px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  border-radius: 0 28px 0 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.hr-dstyle-coupon .hr-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 22px;
  top: 42px;
  z-index: 2;
  min-width: 78px;
  max-width: calc(100% - 28px);
  min-height: 40px;
  padding: 5px 9px 5px 24px;
  background: var(--lime, #def19e);
  color: var(--forest);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  transform: rotate(-8deg);
  transform-origin: 0 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}
.hr-dstyle-coupon .hr-tag::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--forest);
}
.hr-dstyle-coupon .hr-tag-long {
  font-size: 13px;
  white-space: normal;
}
@container (max-width: 760px) {
  .hr-dswitch button {
    padding: 4px 8px;
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  .hr-heading:has(.hr-dswitch) {
    flex-wrap: wrap;
  }
  .hr-dstyle-coupon .hr-tag {
    font-size: 13px;
    min-width: 60px;
    padding-right: 7px;
  }
}

/* Promo + tag (v1.28.8, default): Option E's dark promo-code card with a round photo, sitting inside a dashed
   cut-out line with a scissors mark, plus the lime swing price tag hanging over the photo. */
.hr-dstyle-promo .hr-track {
  padding-top: 12px;
}
.hr-dstyle-promo .hr-deal-card {
  padding: 6px;
  border: 2px dashed var(--forest);
  border-radius: 18px;
}
.hr-dstyle-promo .hr-scissors {
  display: block;
  position: absolute;
  top: -11px;
  left: 22px;
  z-index: 3;
  padding: 0 5px;
  background: var(--bg);
  color: var(--forest);
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
.hr-dstyle-promo .hr-deal {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 124px;
  min-height: 160px;
  border: 0;
  border-radius: 12px;
  background: radial-gradient(120% 140% at 0 0, #2f6247, #1b3a2a);
  color: #f3f6e6;
}
.hr-dstyle-promo .hr-deal::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(222, 241, 158, 0.25);
  border-radius: 9px;
  pointer-events: none;
}
.hr-dstyle-promo .hr-deal-stub {
  order: 2;
  align-self: start;
  justify-self: center;
  width: 100px;
  height: 100px;
  align-self: center;
  margin: 0 14px 0 0;
  border-right: 0;
}
.hr-dstyle-promo .hr-deal-stub::before,
.hr-dstyle-promo .hr-deal-stub::after {
  display: none;
}
.hr-dstyle-promo .hr-deal-stub img {
  border-radius: 50%;
  border: 3px solid var(--lime, #def19e);
  box-sizing: border-box;
}
.hr-dstyle-promo .hr-deal-copy {
  order: 1;
  padding: 16px 6px 14px 18px;
  gap: 4px;
}
.hr-dstyle-promo .hr-deal-copy .hr-meta {
  color: #bcd0b4;
}
.hr-dstyle-promo .hr-offer {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--lime, #def19e);
}
.hr-dstyle-promo .hr-deal-copy strong {
  color: #f3f6e6;
}
.hr-dstyle-promo .hr-deal-foot {
  justify-content: flex-start;
  gap: 8px;
  padding-top: 6px;
}
.hr-dstyle-promo .hr-promo-code {
  display: inline-flex;
}
.hr-dstyle-promo .hr-promo-code b {
  border: 1.5px dashed var(--lime, #def19e);
  color: var(--lime, #def19e);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hr-dstyle-promo .hr-deal-exp {
  display: block;
  font-size: 11px;
  color: #bcd0b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-dstyle-promo .hr-deal-action {
  display: none;
}
/* the price tag is clipped to the top edge of the deal, centered, so it never sits on the photo or the text
   (v1.29.5). The stub's own tag is hidden in this style; .hr-tag-top is only shown here. */
.hr-dstyle-promo .hr-tag-string,
.hr-dstyle-promo .hr-deal-stub .hr-tag,
.hr-deal-card > .hr-tag-top {
  display: none;
}
.hr-dstyle-promo .hr-track {
  padding-top: 20px;
}
.hr-dstyle-promo .hr-deal-card > .hr-tag-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: -15px;
  z-index: 4;
  min-width: 74px;
  min-height: 32px;
  padding: 3px 11px 3px 24px;
  background: var(--lime, #def19e);
  color: var(--forest);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.hr-dstyle-promo .hr-deal-card > .hr-tag-top::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #1b3a2a;
}
.hr-dstyle-promo .hr-deal-card > .hr-tag-long {
  max-width: 150px;
  font-size: 13px;
}
.hr-dstyle-promo .hr-deal-copy {
  padding-top: 22px;
}
@media (max-width: 640px) {
  .hr-dstyle-promo .hr-deal {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
  .hr-dstyle-promo .hr-deal-stub {
    width: 82px;
    height: 82px;
    margin: 0 10px 0 0;
  }
  .hr-dstyle-promo .hr-offer {
    max-width: none;
    font-size: 22px;
  }
  .hr-dstyle-promo .hr-deal-card > .hr-tag-top {
    font-size: 13px;
    min-width: 58px;
    min-height: 28px;
    top: -13px;
    padding-left: 21px;
  }
  .hr-dstyle-promo .hr-deal-foot {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ---------- Brand card: Shelf (v1.29.6, default) – logo + name, then a wooden shelf of real catalog products ---------- */
.hr-card > a.hr-bshelf {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}
.hr-bshelf .hr-bshelf-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 40px 10px 12px;
}
.hr-bshelf-logo {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.hr-bshelf-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hr-bshelf-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hr-bshelf-id strong {
  font-size: 15px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hr-bshelf-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  margin-top: auto;
  padding: 12px 10px 0;
  height: 96px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f4f1e8, #ece6d4);
}
.hr-bshelf-shelf i {
  display: block;
  height: 66px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08);
}
.hr-bshelf-shelf i:nth-child(2) {
  height: 78px;
}
.hr-bshelf-shelf i:nth-child(3) {
  height: 60px;
}
.hr-bshelf-shelf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-bshelf-solo {
  grid-template-columns: 1fr;
  justify-items: center;
}
.hr-bshelf-solo i {
  width: 58%;
  height: 78px !important;
}
.hr-bshelf-solo img {
  object-fit: contain;
}
.hr-bshelf-board {
  display: block;
  height: 9px;
  background: linear-gradient(180deg, #8a6a45, #6e5234);
}
.hr-bshelf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
}
.hr-bshelf-foot .hr-meta {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-bshelf-btn {
  flex: none;
  background: var(--forest);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 99px;
  padding: 6px 11px;
}
.hr-bshelf .hr-photo-labels {
  top: 74px;
  bottom: auto;
  left: 14px;
}

/* ---------- Retailer card: Door sign (v1.29.6, default) – full photo, hanging sign, big distance marker ---------- */
.hr-card > a.hr-door {
  position: relative;
  display: block;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: #1b2a20;
  color: #fff;
  text-decoration: none;
}
.hr-door > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.4s ease;
}
.hr-door:hover > img {
  transform: scale(1.04);
}
.hr-card > a.hr-door::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 14, 0.05) 30%, rgba(10, 20, 14, 0.9) 78%);
}
.hr-door-string {
  position: absolute;
  left: 50%;
  top: 0;
  width: 64px;
  height: 30px;
  transform: translateX(-50%);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #d9c9a3 calc(50% - 1px), #d9c9a3 calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), #d9c9a3 calc(50% - 1px), #d9c9a3 calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.hr-door-sign {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%) rotate(-3deg);
  display: grid;
  justify-items: center;
  gap: 1px;
  max-width: 72%;
  padding: 6px 13px 7px;
  background: #fffef2;
  color: var(--forest);
  border: 2px solid var(--forest);
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.hr-door-sign b {
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-size: 24px;
  line-height: 0.95;
  font-weight: 700;
}
.hr-door-sign span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hr-door-copy {
  position: absolute;
  left: 0;
  right: 82px;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: 14px;
}
.hr-door-copy .hr-kicker {
  color: var(--lime, #def19e);
}
.hr-door-copy strong {
  font-size: 17px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hr-door-copy .hr-meta {
  color: #d6e0cf;
}
/* the distance from the visitor: a big lime marker in the lower right */
.hr-door-dist {
  position: absolute;
  right: 12px;
  bottom: 14px;
  display: grid;
  justify-items: center;
  min-width: 62px;
  padding: 7px 7px 6px;
  border-radius: 14px;
  background: var(--lime, #def19e);
  color: var(--forest);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  line-height: 1;
}
.hr-door-pin {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -18px 0 3px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--lime, #def19e);
  border: 2px solid var(--lime, #def19e);
}
.hr-door-pin svg {
  width: 12px;
  height: 12px;
}
.hr-door-dist b {
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.05em;
}
.hr-door-dist small {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hr-door .hr-photo-labels {
  top: 8px;
  bottom: auto;
  left: 8px;
}
@media (max-width: 640px) {
  .hr-card > a.hr-door {
    height: 270px;
  }
}
/* narrow cards (two per view on phones): compact versions of both styles */
.hr-card > a.hr-door,
.hr-card > a.hr-bshelf {
  container-type: inline-size;
}
@container (max-width: 230px) {
  .hr-door-sign {
    top: 22px;
    padding: 5px 10px 6px;
    max-width: 84%;
  }
  .hr-door-sign b {
    font-size: 19px;
    white-space: nowrap;
  }
  .hr-door-sign span {
    font-size: 8.5px;
  }
  .hr-door-copy {
    right: 0;
    padding: 12px;
  }
  .hr-door-copy .hr-kicker {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hr-door-copy strong {
    font-size: 15px;
  }
  .hr-door-dist {
    right: auto;
    left: 10px;
    bottom: auto;
    top: 98px;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 5px 9px 5px 5px;
    border-radius: 99px;
  }
  .hr-door-pin {
    margin: 0;
  }
  .hr-door-dist b {
    font-size: 19px;
  }
  .hr-door-dist small {
    margin: 0;
    font-size: 8.5px;
  }
  .hr-bshelf .hr-bshelf-head {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 38px 8px 10px;
  }
  .hr-bshelf-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .hr-bshelf-id .hr-kicker {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hr-bshelf-id strong {
    font-size: 14px;
  }
  .hr-bshelf-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 86px;
  }
  .hr-bshelf-shelf:not(.hr-bshelf-solo) i:nth-child(4) {
    display: none;
  }
  .hr-bshelf-foot {
    padding: 8px 10px 10px;
  }
  .hr-bshelf-btn {
    padding: 5px 9px;
    font-size: 11px;
  }
  .hr-bshelf .hr-photo-labels {
    top: 60px;
    left: 58px;
  }
}

/* v1.29.6: no clipped names, places or hours on Shelf / Door sign cards */
.hr-door-sign span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  max-width: 150px;
}
.hr-bshelf-id strong {
  -webkit-line-clamp: 3;
  font-size: 14px;
}
.hr-bshelf-foot .hr-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.hr-door-dist.hr-door-dist-in {
  display: none;
}
@container (max-width: 230px) {
  .hr-door > .hr-door-dist {
    display: none;
  }
  .hr-door-copy .hr-door-dist.hr-door-dist-in {
    display: inline-grid;
    position: static;
    justify-self: start;
    margin-bottom: 4px;
  }
  .hr-door-copy .hr-kicker {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* v1.30.0: Shelf brand cards – 4 per row, bigger logo, brand name clearly bigger than the category */
.hr-bshelf .hr-bshelf-head {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 15px 42px 13px 15px;
}
.hr-bshelf-logo {
  width: 92px;
  height: 92px;
  border-radius: 18px;
}
.hr-bshelf-logo img {
  padding: 4px;
  box-sizing: border-box;
}
.hr-bshelf-id {
  gap: 4px;
}
.hr-bshelf-id .hr-kicker {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
}
.hr-bshelf-id strong {
  font: 800 19px/1.15 "DM Sans", Arial, sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink);
  -webkit-line-clamp: 3;
  order: -1;
}
.hr-bshelf .hr-photo-labels {
  top: 114px;
}
@container (max-width: 230px) {
  .hr-bshelf .hr-bshelf-head {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 38px 10px 12px;
  }
  .hr-bshelf-logo {
    width: 60px;
    height: 60px;
    border-radius: 13px;
  }
  .hr-bshelf-id strong {
    font-size: 16.5px;
  }
  .hr-bshelf-id .hr-kicker {
    font-size: 9.5px;
  }
  .hr-bshelf .hr-photo-labels {
    top: 78px;
    left: 80px;
  }
}

/* ===== v1.30.1 · News card styles ===== */
.hr-card[class*="hr-news-"] > a, .hr-card[class*="hr-learn-"] > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.hr-card[class*="hr-news-"] img, .hr-card[class*="hr-learn-"] img { padding-top: 0; margin: 0; display: block; }
.hr-card[class*="hr-news-"] strong, .hr-card[class*="hr-learn-"] strong { display: block; }
/* Front page */
.hr-nf { background: #f7f2e4; border: 1px solid #d9cfb4; border-radius: 4px; padding: 12px 14px 12px; box-shadow: 0 1px 0 #e6dcbd, 0 8px 18px rgba(40, 35, 20, 0.07); }
.hr-nf-mast { display: grid; justify-items: center; text-align: center; border-bottom: 3px double #2a2a22; padding-bottom: 6px; margin-bottom: 10px; }
.hr-nf-mast b { font: 700 22px/1 "Cormorant", Georgia, serif; letter-spacing: 0.01em; font-variant: small-caps; color: #1d1d18; }
.hr-nf-mast small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6d6650; margin-top: 4px; border-top: 1px solid #2a2a22; padding-top: 3px; width: 100%; }
.hr-nf-photo { position: relative; display: block; aspect-ratio: 2.1; overflow: hidden; border: 1px solid #cfc4a6; filter: saturate(0.82) contrast(1.04); }
.hr-nf-cat { display: inline-block; margin-top: 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #a3341f; }
.hr-nf strong { font: 700 clamp(22px, 1.9vw, 27px)/1.04 "Cormorant", Georgia, serif; letter-spacing: -0.02em; color: #1a1a15; margin-top: 3px; }
.hr-nf-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 7px; font: 400 14px/1.42 Georgia, "Times New Roman", serif; color: #3c3a30; }
.hr-nf-lede b { font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: 0.06em; color: #1a1a15; }
.hr-nf-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid #cfc4a6; font-size: 11px; font-weight: 700; color: #6d6650; }
.hr-nf-foot span:last-child { color: #1a1a15; }
.hr-news-front .hr-nf-foot { margin-top: auto; }
.hr-news-front .hr-nf-lede + .hr-nf-foot { margin-top: auto; }
.hr-news-front > a > .hr-nf-lede { margin-bottom: 9px; }
/* Breaking */
.hr-card > a.hr-nb { color: #fff; }
.hr-nb { background: #121514; border-radius: 12px; overflow: hidden; color: #fff; }
.hr-nb-photo { position: relative; display: block; aspect-ratio: 1.45; overflow: hidden; }
.hr-nb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(0, 0, 0, 0.82)); }
.hr-nb-bug { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: stretch; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.hr-nb-bug b { background: #d6261f; padding: 5px 9px; }
.hr-nb-bug { background: #fff; color: #111; }
.hr-nb-bug { padding-right: 9px; gap: 8px; align-items: center; border-radius: 3px; overflow: hidden; }
.hr-nb-live { position: absolute; z-index: 2; top: 13px; right: 46px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.55); padding: 4px 8px; border-radius: 20px; }
.hr-nb-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4b3e; box-shadow: 0 0 0 3px rgba(255, 75, 62, 0.3); animation: hrPulse 1.6s infinite; }
@keyframes hrPulse { 50% { opacity: 0.35; } }
.hr-nb-third { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 14px 12px; }
.hr-nb-loc { display: inline-block; background: #d6261f; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; padding: 3px 8px; margin-bottom: 6px; }
.hr-nb strong { font: 800 clamp(18px, 1.5vw, 21px)/1.12 "DM Sans", sans-serif; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.hr-nb-ticker { display: flex; align-items: stretch; margin-top: auto; background: #f4d23a; color: #111; font-size: 12.5px; font-weight: 700; min-height: 36px; }
.hr-nb-ticker > b { flex: none; display: grid; place-items: center; background: #111; color: #f4d23a; padding: 0 10px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.hr-nb-ticker > span { flex: 1; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hr-nb-ticker > span > span { white-space: nowrap; padding-left: 100%; animation: hrTick 18s linear infinite; }
.hr-nb:hover .hr-nb-ticker > span > span { animation-play-state: paused; }
@keyframes hrTick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hr-nb-ticker > span > span { animation: none; padding-left: 10px; } .hr-nb-live i { animation: none; } }
.hr-news-breaking .hr-save { top: 10px; right: 10px; }
.hr-news-breaking .hr-photo-labels { z-index: 2; top: 44px; bottom: auto; left: 12px; }
/* Wire */
.hr-nw { background: #fbfaf5 repeating-linear-gradient(transparent 0 25px, rgba(30, 60, 45, 0.06) 25px 26px); border: 1px solid #d8d5c8; border-left: 5px solid #1f3b2d; border-radius: 6px; padding: 12px 14px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.hr-nw-top { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.08em; padding-bottom: 8px; border-bottom: 1px dashed #b9b5a3; color: #4b5a50; padding-right: 30px; }
.hr-nw-top b { background: #1f3b2d; color: #d7f075; padding: 2px 6px; border-radius: 3px; }
.hr-nw-top time { margin-left: auto; color: #a3341f; font-weight: 700; }
.hr-nw-body { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; margin-top: 10px; }
.hr-nw strong { font: 800 17px/1.2 "DM Sans", sans-serif; letter-spacing: -0.02em; color: #15201a; }
.hr-nw-lede { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 12px; line-height: 1.55; color: #3d473f; }
.hr-nw-lede b { color: #15201a; }
.hr-nw-photo { display: block; width: 84px; height: 84px; border-radius: 4px; overflow: hidden; filter: grayscale(0.25); border: 1px solid #d8d5c8; }
.hr-nw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 10px; font-size: 10.5px; letter-spacing: 0.04em; color: #4b5a50; }
.hr-nw-foot span:last-child { margin-left: auto; color: #1f3b2d; font-weight: 700; }
.hr-nw-copy { min-width: 0; }
.hr-news-wire > a .hr-nw-body { margin-bottom: 10px; }
/* Clipping */
.hr-news-clip { padding: 12px 6px 6px; }
.hr-nc { position: relative; overflow: visible !important; }
.hr-nc-tape { position: absolute; z-index: 2; top: -10px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(232, 222, 170, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.hr-nc-paper { display: flex; flex-direction: column; flex: 1; background: #f3eedd; padding: 16px 14px 12px; transform: rotate(-0.8deg); box-shadow: 0 10px 20px rgba(40, 35, 20, 0.16); clip-path: polygon(0 1%, 4% 0, 9% 1.2%, 15% 0.2%, 22% 1%, 30% 0, 38% 1.1%, 46% 0.3%, 55% 1%, 63% 0, 71% 1.2%, 79% 0.2%, 87% 1%, 94% 0, 100% 1%, 99.4% 20%, 100% 40%, 99.3% 60%, 100% 80%, 99.5% 99%, 93% 100%, 85% 98.9%, 76% 100%, 67% 99%, 58% 100%, 49% 98.8%, 40% 100%, 31% 99%, 22% 100%, 13% 98.9%, 5% 100%, 0 99%, 0.6% 80%, 0 60%, 0.7% 40%, 0 20%); }
.hr-news-clip:nth-child(even) .hr-nc-paper { transform: rotate(0.9deg); }
.hr-nc-src { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #7c7358; border-bottom: 1px solid #cfc6a8; padding-bottom: 5px; }
.hr-nc strong { font: 700 clamp(21px, 1.8vw, 25px)/1.05 "Cormorant", Georgia, serif; color: #1c1b16; margin: 7px 0 9px; }
.hr-nc-photo { position: relative; display: block; aspect-ratio: 2.2; overflow: hidden; filter: grayscale(1) contrast(1.12) sepia(0.18); }
.hr-nc-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, 0.18) 0.8px, transparent 1.1px) 0 0 / 4px 4px; mix-blend-mode: multiply; }
.hr-nc-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font: 400 13.5px/1.45 Georgia, serif; color: #35332a; column-rule: 1px solid #cfc6a8; }
.hr-nc-lede b { font-family: "DM Sans", sans-serif; font-size: 10.5px; letter-spacing: 0.06em; }
.hr-nc-foot { margin-top: auto; padding-top: 9px; font-size: 10.5px; font-weight: 700; color: #7c7358; }
.hr-news-clip .hr-save { top: 18px; right: 14px; }
.hr-news-front .hr-save { top: 64px; right: 20px; }


/* ===== v1.30.1 · Learn card styles ===== */
/* Textbook */
.hr-lb { flex-direction: row !important; background: #fdfbf4; border: 1px solid #ddd5bd; border-radius: 4px 12px 12px 4px; overflow: hidden; min-height: 190px; box-shadow: 4px 6px 0 -1px #efe8d3, 4px 6px 0 0 #d9cfb4; }
.hr-lb-spine { flex: none; width: 34px; background: var(--hue) linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%, rgba(0, 0, 0, 0.18)); display: grid; place-items: center; }
.hr-lb-spine span { writing-mode: vertical-rl; transform: rotate(180deg); color: #f6efd9; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; max-height: 170px; }
.hr-lb-page { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 14px 14px 12px; position: relative; }
.hr-lb-ch { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hue); }
.hr-lb strong { font: 700 21px/1.08 "Cormorant", Georgia, serif; letter-spacing: -0.015em; margin: 6px 0; color: #1b231e; }
.hr-lb-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: #4a5249; }
.hr-lb-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #e6dec8; font-size: 11px; font-weight: 700; color: #6a7066; }
.hr-lb-tags { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.hr-lb-photo { flex: none; width: 34%; max-width: 130px; position: relative; overflow: hidden; border-left: 1px solid #e6dec8; }
.hr-lb-photo img { position: absolute; inset: 0; }
.hr-learn-book .hr-save { left: auto; right: 6px; top: 6px; }
/* Lesson */
.hr-ll { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(20, 40, 30, 0.06); }
.hr-ll-photo { position: relative; display: block; aspect-ratio: 2.2; overflow: hidden; }
.hr-ll-no { position: absolute; left: 12px; bottom: 10px; background: #fff; color: var(--hue); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.hr-ll-copy { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.hr-ll-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hr-ll-chips span { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 20px; background: color-mix(in srgb, var(--hue) 12%, #fff); color: var(--hue); }
.hr-ll-chips span + span { background: #f1f2ee; color: #555d55; }
.hr-ll strong { font: 800 17px/1.2 "DM Sans", sans-serif; letter-spacing: -0.03em; margin: 8px 0 5px; }
.hr-ll-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hr-ll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.hr-ll-src { font-size: 11px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-ll-go { flex: none; background: var(--hue); color: #fff; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 10px; }
.hr-learn-lesson .hr-save { left: auto; right: 8px; top: 8px; }
.hr-learn-lesson .hr-photo-labels { left: auto; right: 10px; }
/* Field guide plate */
.hr-lp { background: #f4efdf; border-radius: 6px; padding: 7px; box-shadow: 0 6px 16px rgba(40, 35, 20, 0.1); }
.hr-lp-frame { display: flex; flex-direction: column; flex: 1; border: 1.5px solid #7d6f49; outline: 1px solid #7d6f49; outline-offset: -5px; padding: 12px 12px 10px; position: relative; }
.hr-lp-no { align-self: center; font: italic 600 13px/1 "Cormorant", Georgia, serif; letter-spacing: 0.12em; color: #7d6f49; margin-bottom: 8px; }
.hr-lp-photo { position: relative; display: block; aspect-ratio: 1.9; overflow: hidden; border: 1px solid #b9ab80; border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px; filter: sepia(0.18); }
.hr-lp-sp { display: block; text-align: center; margin-top: 9px; font: italic 600 14px/1.2 "Cormorant", Georgia, serif; color: #7d6f49; }
.hr-lp strong { text-align: center; font: 700 20px/1.1 "Cormorant", Georgia, serif; color: #23271d; margin-top: 2px; }
.hr-lp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; margin-top: 6px; font-size: 12px; line-height: 1.45; color: #5b5a48; }
.hr-lp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px dotted #a99a6f; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #6f6447; }
.hr-lp-desc { margin-bottom: 9px; }
.hr-learn-plate .hr-save { left: auto; right: 14px; top: 14px; }

/* Index card */
.hr-learn-index { padding-top: 14px; }
.hr-li { position: relative; overflow: visible !important; }
.hr-li-tab { position: absolute; top: -14px; left: 16px; max-width: 70%; background: var(--hue); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px 8px; border-radius: 8px 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-li-card { position: relative; display: flex; flex-direction: column; flex: 1; background: #fffef8 repeating-linear-gradient(transparent 0 23px, #cfe0ee 23px 24px); background-position: 0 58px; border-radius: 4px 10px 10px 10px; box-shadow: 0 6px 14px rgba(30, 40, 50, 0.12); padding: 12px 14px 10px 22px; min-height: 190px; }
.hr-li-card::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1.5px; background: #e59b97; }
.hr-li-head { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; align-items: start; border-bottom: 2px solid #e59b97; padding-bottom: 8px; min-height: 46px; }
.hr-li strong { font: 700 17px/1.2 "DM Sans", sans-serif; letter-spacing: -0.03em; color: #1c2a33; }
.hr-li-photo { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.hr-li-lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font: 500 19px/24px "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #26406b; }
.hr-li-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 8px; font-size: 11px; font-weight: 700; color: #5b6b75; }
.hr-li-foot span:last-child { margin-left: auto; color: var(--hue); }
.hr-learn-index .hr-save { left: auto; right: 6px; top: -4px; }
@media (max-width: 640px) {
  .hr-nf strong, .hr-nc strong { font-size: 22px; }
  .hr-lb-photo { width: 28%; }
  .hr-nb-live { right: 44px; }
}
/* style switches with many options never push the page wider than the phone */
.hr-heading-tools { min-width: 0; max-width: 100%; }
.hr-dswitch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hr-dswitch::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .hr-heading-tools { flex: 1 1 100%; justify-content: space-between; }
  .hr-heading-tools .hr-dswitch { flex: 0 1 auto; min-width: 0; }
  .hr-heading-tools .hr-controls { flex: none; }
}

/* ===== Delivery card designs (v1.32.0) – "directions" is the default; the rest are visitor toggles ===== */
.hr-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hr-dselect select{appearance:none;border:1px solid var(--line);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23244d38' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;padding:6px 30px 6px 13px;font:700 12px/1.2 inherit;font-family:inherit;color:var(--forest);cursor:pointer}
.hr-dselect select:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.hr-delivery-row .hr-track{align-items:stretch}
.hr-dv{display:flex}
.hr-dv-card{--dv-ink:#1c3026;--dv-clay:#c8643b;--dv-deep:#14281d;display:flex;flex-direction:column;width:100%;position:relative;color:var(--ink);text-decoration:none;overflow:hidden;font-size:12px;line-height:1.3}
.hr-dv-card strong{font-size:15px;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.hr-dv-card small{display:block;font-size:11px;color:var(--muted)}
.hr-dv-card img{display:block;width:100%;height:100%;object-fit:cover}
.hr-dv-k{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dv-btn{display:inline-flex;align-items:center;font-size:12px;font-weight:800;border-radius:99px;padding:7px 12px;white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--forest)}
.hr-dv-btn.p{background:var(--forest);border-color:var(--forest);color:#fff}
.hr-dv-btn.l{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.hr-dv-ok{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:11px;font-weight:800;color:#2e7d4f;background:#e7f4ea;border-radius:99px;padding:4px 9px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dv-chip{display:inline-flex;align-items:center;gap:5px;background:var(--forest);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;white-space:nowrap}
.hr-dv-chip b{color:var(--lime)}
.hr-dv-tags{display:flex;gap:5px;flex-wrap:wrap}
.hr-dv-tags:empty{display:none}
.hr-dv-cp{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;min-width:0;flex:1}
.hr-dv-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
/* map tile */
.hr-dv-map{position:absolute;inset:0;background:#eef1e6;overflow:hidden}
.hr-dv-map:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/62px 62px,linear-gradient(0deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/62px 62px;opacity:.9}
.hr-dv-map .w{position:absolute;right:-30px;top:-20px;width:80px;height:150px;border-radius:50%;background:#cfe0e6}
.hr-dv-map .p{position:absolute;width:52px;height:34px;border-radius:8px;background:#d5e6c0;left:52%;top:56%}
.hr-dv-map>svg,.hr-dv-ph>svg{position:absolute;inset:0;width:100%;height:100%}
.hr-dv-map path{fill:none;stroke:var(--forest);stroke-width:3;stroke-dasharray:6 6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hr-dv-side{position:relative;display:block;min-height:120px}
.hr-dv-pin{position:absolute;z-index:2;display:grid;place-items:center;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.22);overflow:hidden}
.hr-dv-pin.s{width:32px;height:32px;left:10px;bottom:12px}
.hr-dv-pin.h{width:28px;height:28px;right:10px;top:12px;background:var(--forest);color:var(--lime);font-size:14px;font-weight:900}
/* A3 directions (default) */
.hr-dv-directions .hr-dv-card,.hr-dv-strip .hr-dv-card,.hr-dv-photo .hr-dv-card,.hr-dv-routemap .hr-dv-card,.hr-dv-tracker .hr-dv-card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.hr-dv-top{display:grid;grid-template-columns:minmax(0,1fr) 38%;flex:1;min-height:128px}
.hr-dv-it{position:relative;padding:13px 10px 10px 14px;display:flex;flex-direction:column;gap:12px}
.hr-dv-it:before{content:"";position:absolute;left:23px;top:30px;height:calc(100% - 80px);max-height:44px;border-left:2px dashed var(--forest)}
.hr-dv-st{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start}
.hr-dv-st i{width:20px;height:20px;border-radius:50%;background:var(--forest);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--forest)}
.hr-dv-st.h i{background:var(--lime)}
.hr-dv-st b{display:block;font-size:13.5px;letter-spacing:-.02em;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hr-dv-directions .hr-dv-side{min-height:0}
.hr-dv-bt{border-top:1px solid var(--line);padding:9px 12px 9px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:11.5px}
.hr-dv-bt>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A1 strip */
.hr-dv-strip .hr-dv-card{flex-direction:row;min-height:132px}
.hr-dv-strip .hr-dv-side{flex:0 0 36%}
/* A2 photo */
.hr-dv-ph{position:relative;display:block;height:150px;flex:none}
.hr-dv-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,29,.15),rgba(20,40,29,.55))}
.hr-dv-ph>svg{z-index:1}
.hr-dv-ph path{fill:none;stroke:var(--lime);stroke-width:3.5;stroke-dasharray:7 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hr-dv-ph .hr-dv-chip{position:absolute;left:12px;top:12px;z-index:2}
.hr-dv-ph .dot{position:absolute;left:6%;bottom:9%;width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid #fff;z-index:2;box-shadow:0 0 0 6px rgba(222,241,158,.35)}
.hr-dv-ph .hr-dv-pin.h{top:14px;right:14px;width:32px;height:32px}
.hr-dv-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
/* A route map (round 1) */
.hr-dv-routemap .hr-dv-side{height:118px;min-height:0;flex:none}
.hr-dv-routemap .hr-dv-chip.mid{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3}
.hr-dv-routemap .hr-dv-pin.h{top:auto;bottom:62px}
/* B1 mini label */
.hr-dv-label .hr-dv-card{flex-direction:row;background:#fff;border:1.5px solid var(--dv-ink);border-radius:6px;box-shadow:4px 4px 0 var(--tint);min-height:132px}
.hr-dv-lph{flex:0 0 64px;border-right:1.5px solid var(--dv-ink);display:grid;grid-template-rows:1fr 46px}
.hr-dv-lph i{display:block;overflow:hidden}
.hr-dv-lph .bcv{background:repeating-linear-gradient(0deg,var(--dv-ink) 0 2px,transparent 2px 4px,var(--dv-ink) 4px 6px,transparent 6px 9px);margin:6px 10px}
.hr-dv-lcp{display:flex;flex-direction:column;min-width:0;flex:1}
.hr-dv-hd{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid var(--dv-ink);padding:6px 10px}
.hr-dv-hd b{font-size:18px;font-weight:900;letter-spacing:-.03em}
.hr-dv-hd em{font-style:normal;background:var(--dv-ink);color:#fff;font-size:9px;font-weight:800;letter-spacing:.14em;padding:3px 6px}
.hr-dv-r{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;padding:6px 10px}
.hr-dv-r+.hr-dv-r{border-top:1.5px dashed var(--dv-ink)}
.hr-dv-r>small,.hr-dv-rows>small{font-size:8.5px;font-weight:800;letter-spacing:.14em;color:var(--dv-ink)}
.hr-dv-r b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dv-lcp .hr-dv-tags{padding:0 10px 8px}
.hr-dv-stamp{position:absolute;z-index:3;border:2.5px solid var(--dv-clay);color:var(--dv-clay);font-weight:900;font-size:10px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;transform:rotate(-12deg);background:rgba(255,255,255,.8)}
.hr-dv-label .hr-dv-stamp{left:4px;top:58px;font-size:9px;padding:1px 4px}
/* B2 label on the box */
.hr-dv-box .hr-dv-card{border-radius:16px;min-height:300px;background:#222;justify-content:flex-end}
.hr-dv-box .hr-dv-card>img{position:absolute;inset:0}
.hr-dv-lab{position:relative;z-index:2;margin:0 14px 16px;background:#fff;border:1.5px solid var(--dv-ink);border-radius:4px;transform:rotate(-2deg);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.hr-dv-lab .tape{position:absolute;width:56px;height:18px;background:rgba(244,236,206,.88);top:-9px}
.hr-dv-lab .tape.l{left:14px;transform:rotate(-8deg)}.hr-dv-lab .tape.r{right:14px;transform:rotate(8deg)}
.hr-dv-lab .bc,.hr-dv-shiplabel .bc{display:block;height:22px;margin:4px 10px 8px;background:repeating-linear-gradient(90deg,var(--dv-ink) 0 2px,transparent 2px 4px,var(--dv-ink) 4px 7px,transparent 7px 8px,var(--dv-ink) 8px 9px,transparent 9px 12px)}
.hr-dv-box .hr-dv-stamp{right:10px;top:14px}
.hr-dv-box .hr-dv-tags{position:absolute;left:12px;top:12px;z-index:3}
/* B3 priority sticker */
.hr-dv-sticker .hr-dv-card{border-radius:10px;padding:7px;background:repeating-linear-gradient(135deg,var(--forest) 0 12px,#fff 12px 18px,var(--lime) 18px 30px,#fff 30px 36px)}
.hr-dv-in{display:flex;flex-direction:column;flex:1;background:#fffef6;border-radius:5px;overflow:hidden}
.hr-dv-band{background:var(--forest);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
.hr-dv-band b{font-size:16px;font-weight:900;letter-spacing:.02em}.hr-dv-band b em{font-style:normal;color:var(--lime)}
.hr-dv-band small{color:var(--lime)!important;font-size:10px!important;font-weight:800;letter-spacing:.12em}
.hr-dv-body{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;padding:10px 12px;flex:1}
.hr-dv-r2{display:block;margin-bottom:6px}.hr-dv-r2 small{font-size:8.5px!important;font-weight:800;letter-spacing:.14em}
.hr-dv-r2 b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hr-dv-r2>span{color:var(--muted);font-size:11px}
.hr-dv-body .qr{display:block;width:58px;height:58px;border:4px solid var(--dv-ink);border-radius:4px;background:conic-gradient(var(--dv-ink) 0 90deg,#fff 90deg 180deg,var(--dv-ink) 180deg 270deg,#fff 270deg) 0 0/12px 12px}
.hr-dv-body .sp{display:block;width:58px;height:58px;border-radius:8px;overflow:hidden;margin-top:6px}
.hr-dv-ft2{border-top:1.5px dashed #b9c4b0;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.2em;font-weight:800}
.hr-dv-in .hr-dv-tags{padding:0 12px 8px}
/* B shipping label (round 1) */
.hr-dv-shiplabel .hr-dv-card{background:#fff;border:1.5px solid var(--dv-ink);border-radius:6px;box-shadow:4px 4px 0 var(--tint)}
.hr-dv-hd.big b{font-size:24px}
.hr-dv-rows{display:grid;grid-template-columns:56px minmax(0,1fr);border-bottom:1.5px solid var(--dv-ink)}
.hr-dv-rows>*{padding:7px 10px}
.hr-dv-rows>small{border-right:1.5px solid var(--dv-ink);display:flex;align-items:center}
.hr-dv-rows .to{border-top:1.5px solid var(--dv-ink)}
.hr-dv-rows b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dv-lp{display:flex;gap:10px;padding:9px 12px;align-items:center;border-bottom:1.5px solid var(--dv-ink)}
.hr-dv-lp i{width:50px;height:50px;flex:none;border-radius:4px;overflow:hidden}.hr-dv-lp>span{min-width:0;display:grid;gap:3px}
.hr-dv-shiplabel .trk{font-size:10px;letter-spacing:.3em;text-align:center;padding-bottom:8px;font-weight:700}
.hr-dv-shiplabel .hr-dv-stamp{right:10px;top:104px}
.hr-dv-shiplabel .hr-dv-tags{padding:0 12px 10px}
/* C kraft box */
.hr-dv-kraft .hr-dv-card{border-radius:10px;padding:42px 14px 14px;color:#3b2a17;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.06)),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),#c9a274;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.hr-dv-kraft .tape{position:absolute;left:50%;top:0;transform:translateX(-50%);width:60px;height:100%;background:rgba(244,232,196,.55);border-left:1px dashed rgba(0,0,0,.12);border-right:1px dashed rgba(0,0,0,.12)}
.hr-dv-kraft .arrows{position:absolute;left:12px;top:11px;font-size:11px;font-weight:900;letter-spacing:.08em;color:#5b4126}
.hr-dv-kraft .frag{position:absolute;right:12px;top:10px;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--dv-clay);border:1.5px solid var(--dv-clay);padding:2px 6px}
.hr-dv-stk{position:relative;background:#fffef6;border-radius:8px;box-shadow:0 3px 8px rgba(60,40,10,.25);padding:10px;display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;transform:rotate(-1.5deg)}
.hr-dv-stk i{width:60px;height:60px;border-radius:6px;overflow:hidden}.hr-dv-stk>span{display:grid;gap:2px;min-width:0}
.hr-dv-stk .hr-dv-k{color:var(--dv-clay)}
.hr-dv-kf{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:11.5px;font-weight:800}
.hr-dv-kf>span:first-child{display:inline-flex;gap:5px;align-items:center}
.hr-dv-kf .hr-dv-btn{background:#3b2a17;border-color:#3b2a17;color:#f4e8c4}
.hr-dv-kraft .hr-dv-tags{position:relative;margin-top:8px}
/* D live tracker */
.hr-dv-th{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px 14px 10px;align-items:center}
.hr-dv-th i{width:52px;height:52px;border-radius:12px;overflow:hidden}.hr-dv-th>span{display:grid;gap:2px;min-width:0}
.hr-dv-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:16px 8px 8px;background:var(--paper,#fafbf5);border-top:1px solid var(--line);margin-top:auto}
.hr-dv-steps:before{content:"";position:absolute;left:12.5%;right:12.5%;top:24px;height:3px;background:var(--line)}
.hr-dv-steps:after{content:"";position:absolute;left:12.5%;width:44%;top:24px;height:3px;background:var(--forest)}
.hr-dv-steps>span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--muted);text-align:center}
.hr-dv-steps b{width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.hr-dv-steps .on b{background:var(--forest);border-color:var(--forest)}.hr-dv-steps .on{color:var(--forest)}
.hr-dv-steps .now b{background:var(--lime);border-color:var(--forest);box-shadow:0 0 0 4px rgba(222,241,158,.6)}
.hr-dv-tf{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px 12px;background:var(--paper,#fafbf5)}
.hr-dv-tf>span:first-child{font-size:11px;color:var(--muted);min-width:0}.hr-dv-tf b{display:block;font-size:15px;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dv-tracker .hr-dv-tags{padding:0 14px 10px;background:var(--paper,#fafbf5)}
/* E zone radar */
.hr-dv-radar .hr-dv-card{background:var(--dv-deep);color:#eef3e2;border-radius:16px}
.hr-dv-radar strong{color:#fff}.hr-dv-radar small{color:#b6c6ad}.hr-dv-radar .hr-dv-k{color:var(--lime)}
.hr-dv-rad{height:140px;position:relative;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 70%,rgba(222,241,158,.18) 0 22%,rgba(222,241,158,.10) 22% 42%,rgba(222,241,158,.05) 42% 64%,transparent 64%)}
.hr-dv-rad:before{content:"";position:absolute;left:50%;top:70%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 20deg,rgba(222,241,158,.35),transparent 25%)}
.hr-dv-rad .ring{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);border:1px dashed rgba(222,241,158,.35);border-radius:50%}
.hr-dv-rad .r1{width:110px;height:110px}.hr-dv-rad .r2{width:200px;height:200px}.hr-dv-rad .r3{width:290px;height:290px}
.hr-dv-rad .you{position:absolute;left:62%;top:46%;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(222,241,158,.25)}
.hr-dv-rad .you:after{content:"You";position:absolute;left:18px;top:-3px;font-size:10px;font-weight:800;color:var(--lime)}
.hr-dv-rad .shop{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;overflow:hidden;border:3px solid var(--lime)}
.hr-dv-rad .in{position:absolute;right:12px;top:12px;background:var(--lime);color:var(--forest);font-size:11px;font-weight:900;padding:5px 9px;border-radius:99px}
.hr-dv-zips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}.hr-dv-zips span{font-size:10.5px;font-weight:800;border:1px solid rgba(222,241,158,.4);color:var(--lime);border-radius:6px;padding:2px 6px}
.hr-dv-card:hover{box-shadow:0 10px 24px rgba(20,40,29,.12)}
.hr-dv-card:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
@media (max-width:760px){.hr-dselect select{padding:5px 26px 5px 10px;font-size:11.5px;max-width:150px}}

/* ---------- v1.32.1 Big-logo brand cards (picker options; Shelf stays the default) ---------- */
.hr-card > a.hr-bb {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  container-type: inline-size;
  aspect-ratio: auto;
}
.hr-bb-logo {
  display: block;
  background: #fff;
  overflow: hidden;
}
.hr-bb-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hr-bb-id {
  display: grid;
  gap: 4px;
  padding: 12px 14px 0;
  min-width: 0;
}
.hr-bb-id strong {
  font: 800 19px/1.15 "DM Sans", Arial, sans-serif;
  letter-spacing: -0.025em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hr-bb-id .hr-kicker {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 650;
}
.hr-bb-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 14px 0;
  margin-top: auto;
}
.hr-bb-strip i,
.hr-bb-shelf i,
.hr-bb-grid i {
  display: block;
  overflow: hidden;
  background: #fff;
}
.hr-bb-strip i {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.hr-bb-strip img,
.hr-bb-shelf img,
.hr-bb-grid img,
.hr-bb-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-bb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  margin-top: auto;
}
.hr-bb-strip + .hr-bb-foot,
.hr-bb-board + .hr-bb-foot {
  margin-top: 0;
}
.hr-bb-foot .hr-meta {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-bb-btn {
  flex: none;
  background: var(--forest);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 99px;
  padding: 6px 11px;
}
.hr-bb .hr-photo-labels {
  top: 12px;
  left: 12px;
  bottom: auto;
}
/* Logo stage: big centered logo on a soft spotlight */
.hr-bb-stage {
  display: grid;
  place-items: center;
  padding: 22px 16px 18px;
  background: radial-gradient(ellipse at 50% 40%, #fff 0, #f4f1e8 62%, #ebe5d2 100%);
  border-bottom: 1px solid var(--line);
}
.hr-bb-stage .hr-bb-logo {
  width: min(62%, 170px);
  aspect-ratio: 1;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(30, 45, 30, 0.14);
}
.hr-bb-stage ~ .hr-bb-id {
  text-align: center;
  justify-items: center;
}
/* Logo hero: logo fills the whole top of the card */
.hr-bb-hero {
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hr-bb-hero {
  position: relative;
  overflow: hidden;
}
.hr-bb-fill {
  position: absolute;
  inset: -20px;
}
.hr-bb-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.85;
}
.hr-bb-hero .hr-bb-logo {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
}
/* Shop sign: logo is a big hanging sign above the shelf */
.hr-bb-wall {
  display: grid;
  justify-items: center;
  position: relative;
  padding: 26px 16px 6px;
  background: linear-gradient(180deg, #efe9d8, var(--surface));
}
.hr-bb-cords {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46%;
  height: 30px;
  transform: translateX(-50%);
  background:
    linear-gradient(to bottom right, transparent 49%, #8a6a45 49.5%, #8a6a45 51%, transparent 51.5%) left/50% 100% no-repeat,
    linear-gradient(to bottom left, transparent 49%, #8a6a45 49.5%, #8a6a45 51%, transparent 51.5%) right/50% 100% no-repeat;
}
.hr-bb-cords::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #6e5234;
}
.hr-bb-wall .hr-bb-logo {
  position: relative;
  width: min(58%, 160px);
  aspect-ratio: 1;
  border-radius: 14px;
  border: 5px solid #8a6a45;
  box-shadow: 0 8px 18px rgba(60, 40, 20, 0.22);
  transform: rotate(-2deg);
}
.hr-bb-wall ~ .hr-bb-id {
  text-align: center;
  justify-items: center;
}
.hr-bb-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  margin-top: auto;
  padding: 10px 10px 0;
  height: 74px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f4f1e8, #ece6d4);
}
.hr-bb-shelf i {
  height: 54px;
  border-radius: 6px 6px 0 0;
}
.hr-bb-shelf i:nth-child(2) {
  height: 64px;
}
.hr-bb-shelf i:nth-child(3) {
  height: 48px;
}
.hr-bb-sign .hr-bshelf-board {
  display: block;
  height: 8px;
  background: linear-gradient(180deg, #8a6a45, #6e5234);
}
/* Round badge: product photo banner with a big round logo overlapping it */
.hr-bb-banner {
  display: block;
  height: 104px;
  background: linear-gradient(135deg, #2c4a3a, #1d3328);
}
.hr-bb-banner img {
  filter: saturate(0.9) brightness(0.8);
}
.hr-bb-badge > .hr-bb-logo {
  width: min(56%, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: -70px auto 0;
  border: 5px solid var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  position: relative;
}
.hr-bb-badge > .hr-bb-logo img {
  object-fit: cover;
}
.hr-bb-badge .hr-bb-id {
  text-align: center;
  justify-items: center;
}
/* Logo + grid: big logo on the left, 2x2 product grid on the right */
.hr-bb-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6px;
  padding: 12px 12px 0;
}
.hr-bb-split .hr-bb-logo {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.hr-bb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}
.hr-bb-grid i {
  border-radius: 10px;
  border: 1px solid var(--line);
}
.hr-bb-grid i:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
/* Logo tile: the logo is the card, on a deep frame */
.hr-bb-tilebox {
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(160deg, var(--forest), #183026);
}
.hr-bb-tilebox .hr-bb-logo {
  width: 100%;
  aspect-ratio: 1.3;
  background: transparent;
}
.hr-bb-tilebox .hr-bb-logo img {
  border-radius: 14px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.hr-bb-tile .hr-bb-strip {
  grid-template-columns: repeat(4, 34px);
  justify-content: start;
}
.hr-bb-tile .hr-bb-strip i {
  border-radius: 50%;
}
/* narrow (2 per view on phones) */
@container (max-width: 230px) {
  .hr-bb-id {
    padding: 10px 10px 0;
  }
  .hr-bb-id strong {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }
  .hr-bb-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 10px 0;
  }
  .hr-bb-strip i:nth-child(4),
  .hr-bb-shelf i:nth-child(4) {
    display: none;
  }
  .hr-bb-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hr-bb-foot {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }
  .hr-bb-foot .hr-meta {
    white-space: normal;
  }
  .hr-bb-btn {
    text-align: center;
  }
  .hr-bb-stage .hr-bb-logo,
  .hr-bb-wall .hr-bb-logo {
    width: 78%;
  }
  .hr-bb-badge > .hr-bb-logo {
    width: 72%;
  }
  .hr-bb-split {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 10px 10px 0;
  }
  .hr-bb-split .hr-bb-logo {
    aspect-ratio: 1.25;
  }
  .hr-bb-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: 5px;
  }
  .hr-bb-grid i {
    aspect-ratio: 1;
  }
  .hr-bb-grid i:nth-child(4) {
    display: none;
  }
  .hr-bb-tile .hr-bb-strip {
    grid-template-columns: repeat(3, 28px);
  }
}

/* v1.33.8: "See all" text link beside each row's card toggles → the matching top-menu page */
.hr-seeall { flex: none; font-size: 14px; font-weight: 800; color: var(--forest); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; white-space: nowrap; padding: 6px 2px; }
.hr-seeall:hover { color: #1b3a2a; text-decoration-thickness: 2.5px; }
.hr-seeall:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
.hr-heading-tools:empty { display: none; }
@media (max-width: 640px) {
  .hr-seeall { font-size: 13px; margin-left: auto; }
  .hr-heading { flex-wrap: wrap; }
  .hr-heading-tools { flex: 1 1 100%; min-width: 0; }
  .hr-heading-tools select { flex: 0 1 auto; min-width: 0; width: auto; max-width: none; }
}
@media (max-width: 640px) { .hr-heading-tools .hr-dselect { flex: 0 1 auto; min-width: 0; } }

/* =====================================================================================================
   v1.33.8 – Product card designs for "Local Brand Menus" and "Local Retail Menus" (20 + Classic).
   One shared markup (productAlt in home-rows.js); each .hr-pc-{style} block below sets the look.
   ===================================================================================================== */
.hr-pc { --pc-r: 14px; }
.hr-card.hr-pc > a.hr-pc-a { display: flex; flex-direction: column; position: relative; height: 100%; color: var(--ink); text-decoration: none; }
.hr-pc-media { position: relative; display: block; isolation: isolate; }
.hr-pc-ph { display: block; aspect-ratio: 1; overflow: hidden; background: var(--tint); }
.hr-pc-ph img { transition: transform 0.35s ease; }
.hr-pc-a:hover .hr-pc-ph img { transform: scale(1.04); }
.hr-pc-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px 11px; flex: 1; min-width: 0; position: relative; }
.hr-pc-kind { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-pc-t { font-size: 14.5px; line-height: 1.18; letter-spacing: -0.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-pc-by { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-pc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hr-pc-chips i { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--tint); color: var(--forest); white-space: nowrap; }
.hr-pc-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 6px; }
.hr-pc-price { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--forest); }
.hr-pc-price.is-none { font-size: 12px; font-weight: 700; }
.hr-pc-unit { font-size: 11px; color: var(--muted); }
.hr-pc-go { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--forest); align-self: center; }
.hr-pc-code, .hr-pc-fx, .hr-pc-bars, .hr-pc-deco { display: none; }
.hr-pc .hr-pc-chips { display: none; }

/* 1 Apothecary jar */
.hr-pc-jar .hr-pc-a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pc-r); padding: 12px 10px 0; }
.hr-pc-jar .hr-pc-media { margin: 14px 8px 0; }
.hr-pc-jar .hr-pc-ph { border-radius: 26px 26px 18px 18px; border: 3px solid #cfd8c8; box-shadow: inset 0 0 0 4px rgba(255,255,255,.6); aspect-ratio: 0.9; }
.hr-pc-jar .hr-pc-deco { display: block; position: absolute; left: 14%; right: 14%; top: -14px; height: 16px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#3a5f49, #244d38); box-shadow: 0 2px 0 #1a3a29; z-index: 1; }
.hr-pc-jar .hr-pc-body { text-align: center; align-items: center; }
.hr-pc-jar .hr-pc-kind { background: #fff8e6; border: 1px solid #e3d6b0; color: #6b5a2c; padding: 2px 8px; border-radius: 4px; margin-top: -24px; position: relative; z-index: 2; max-width: 90%; }
.hr-pc-jar .hr-pc-foot { justify-content: center; width: 100%; }
.hr-pc-jar .hr-pc-go { display: none; }

/* 2 Hang tag */
.hr-pc-tag .hr-pc-a { background: #fffdf4; border: 1px solid #e3dcc2; border-radius: 10px 10px 10px 10px; clip-path: polygon(16% 0, 84% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); padding-top: 26px; }
.hr-pc-tag .hr-pc-deco { display: block; position: absolute; top: -16px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px #c9bf9d; }
.hr-pc-tag .hr-pc-media { margin: 0 12px; }
.hr-pc-tag .hr-pc-ph { border-radius: 8px; aspect-ratio: 1.1; }
.hr-pc-tag .hr-pc-body { border-top: 1px dashed #d8cfae; margin: 10px 8px 0; padding: 9px 4px 11px; }
.hr-pc-tag .hr-pc-price { font-size: 19px; }

/* 3 Shelf talker */
.hr-pc-shelf .hr-pc-a { background: linear-gradient(#f3efe4, #f3efe4 72%, #fff 72%); border-radius: var(--pc-r); overflow: hidden; border: 1px solid var(--line); }
.hr-pc-shelf .hr-pc-media { padding: 14px 18px 0; }
.hr-pc-shelf .hr-pc-ph { aspect-ratio: 0.95; border-radius: 6px; box-shadow: 0 10px 12px -8px rgba(40,30,10,.5); }
.hr-pc-shelf .hr-pc-deco { display: block; height: 12px; margin: 0 -18px; background: linear-gradient(#b98a57, #8f6436); box-shadow: 0 3px 0 #6d4a26; }
.hr-pc-shelf .hr-pc-body { background: #fff; }
.hr-pc-shelf .hr-pc-foot { background: #ffe86b; margin: 6px -11px -11px; padding: 6px 11px; border-top: 2px solid #e8c92e; }
.hr-pc-shelf .hr-pc-price { color: #1d2a20; font-size: 17px; }
.hr-pc-shelf .hr-pc-go { background: #fff6b8; }

/* 4 Polaroid */
.hr-pc-polaroid .hr-pc-a { background: #fff; padding: 9px 9px 0; box-shadow: 0 6px 16px rgba(20,40,29,.14); border-radius: 3px; transform: rotate(-1.2deg); transition: transform .2s ease; }
.hr-pc-polaroid:nth-child(even) .hr-pc-a { transform: rotate(1.1deg); }
.hr-pc-polaroid .hr-pc-a:hover { transform: rotate(0) translateY(-3px); }
.hr-pc-polaroid .hr-pc-ph { border-radius: 1px; }
.hr-pc-polaroid .hr-pc-body { padding: 10px 3px 12px; text-align: center; align-items: center; }
.hr-pc-polaroid .hr-pc-t { font-family: Cormorant, Georgia, serif; font-size: 19px; font-weight: 700; }
.hr-pc-polaroid .hr-pc-kind, .hr-pc-polaroid .hr-pc-go { display: none; }

/* 5 Receipt */
.hr-pc-receipt .hr-pc-a { background: #fff; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; border-radius: 4px 4px 0 0; box-shadow: 0 4px 12px rgba(20,40,29,.1); -webkit-mask: radial-gradient(circle 6px at 50% 100%, #0000 98%, #000) bottom / 14px 100% repeat-x; padding-bottom: 8px; }
.hr-pc-receipt .hr-pc-media { padding: 10px 10px 0; }
.hr-pc-receipt .hr-pc-ph { aspect-ratio: 1.5; filter: grayscale(.25) contrast(1.05); border-radius: 2px; }
.hr-pc-receipt .hr-pc-body { gap: 3px; }
.hr-pc-receipt .hr-pc-code { display: block; font-size: 10px; color: var(--muted); border-bottom: 1px dashed #bbb; padding-bottom: 4px; }
.hr-pc-receipt .hr-pc-code::before { content: "ITEM #"; }
.hr-pc-receipt .hr-pc-t { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.hr-pc-receipt .hr-pc-kind, .hr-pc-receipt .hr-pc-by { font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.hr-pc-receipt .hr-pc-foot { border-top: 1px dashed #bbb; justify-content: space-between; }
.hr-pc-receipt .hr-pc-foot::before { content: "TOTAL"; font-size: 11px; font-weight: 700; }
.hr-pc-receipt .hr-pc-price { font-size: 14px; color: var(--ink); }
.hr-pc-receipt .hr-pc-go, .hr-pc-receipt .hr-pc-unit { display: none; }

/* 6 Specimen label */
.hr-pc-specimen .hr-pc-a { background: #f6f1e2; border: 1px solid #d9cfb1; border-radius: 6px; padding: 8px; }
.hr-pc-specimen .hr-pc-ph { border: 1px solid #cdbf98; aspect-ratio: 1; }
.hr-pc-specimen .hr-pc-body { background: #fffdf5; border: 1px solid #cdbf98; margin-top: 8px; padding: 8px 9px; box-shadow: inset 0 0 0 3px #fffdf5, inset 0 0 0 4px #e1d6b6; }
.hr-pc-specimen .hr-pc-kind { color: #8b6b2e; }
.hr-pc-specimen .hr-pc-t { font-family: Cormorant, Georgia, serif; font-size: 18px; font-weight: 700; font-style: italic; }
.hr-pc-specimen .hr-pc-chips { display: flex; }
.hr-pc-specimen .hr-pc-chips i { background: transparent; border: 1px solid #cdbf98; color: #6b5a2c; border-radius: 3px; }
.hr-pc-specimen .hr-pc-go { display: none; }

/* 7 Product box */
.hr-pc-box .hr-pc-a { padding: 12px 14px 0; }
.hr-pc-box .hr-pc-media { transform: perspective(500px) rotateY(-12deg); transform-origin: left; margin-right: 10px; }
.hr-pc-box .hr-pc-ph { border-radius: 4px; box-shadow: 10px 0 0 #1f4331, 10px 8px 14px rgba(20,40,29,.3); aspect-ratio: 0.85; border: 3px solid #244d38; }
.hr-pc-box .hr-pc-deco { display: block; position: absolute; left: 0; right: -10px; bottom: -10px; height: 10px; background: radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 70%); }
.hr-pc-box .hr-pc-body { padding: 16px 2px 10px; }

/* 8 Die-cut sticker */
.hr-pc-sticker .hr-pc-a { align-items: center; text-align: center; background: var(--surface); border-radius: var(--pc-r); border: 1px solid var(--line); padding-top: 14px; }
.hr-pc-sticker .hr-pc-media { width: 78%; }
.hr-pc-sticker .hr-pc-ph { border-radius: 50%; border: 6px solid #fff; box-shadow: 0 0 0 1.5px #d7dccf, 0 6px 14px rgba(20,40,29,.18); transform: rotate(-4deg); }
.hr-pc-sticker .hr-pc-deco { display: block; position: absolute; right: 2%; top: 4%; width: 24px; height: 24px; background: linear-gradient(225deg, var(--bg) 50%, #e4e8dc 50%); border-radius: 0 50% 0 0; }
.hr-pc-sticker .hr-pc-body { align-items: center; width: 100%; }
.hr-pc-sticker .hr-pc-price { background: var(--lime); padding: 2px 10px; border-radius: 99px; }
.hr-pc-sticker .hr-pc-foot { justify-content: center; }
.hr-pc-sticker .hr-pc-go { display: none; }

/* 9 Chalkboard menu */
.hr-pc-chalk .hr-pc-a { background: #20302a radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 6px 6px; color: #f2f5e8; border-radius: 10px; border: 6px solid #8a6238; box-shadow: inset 0 0 0 1px #6d4a26; }
.hr-pc-chalk .hr-pc-ph { aspect-ratio: 1.3; opacity: .92; }
.hr-pc-chalk .hr-pc-kind { color: var(--lime); }
.hr-pc-chalk .hr-pc-t { font-family: "Comic Sans MS", "Bradley Hand", cursive; font-weight: 700; color: #fff; }
.hr-pc-chalk .hr-pc-by, .hr-pc-chalk .hr-pc-unit { color: rgba(242,245,232,.7); }
.hr-pc-chalk .hr-pc-foot { border-top: 1px dashed rgba(255,255,255,.3); }
.hr-pc-chalk .hr-pc-price { color: #ffe08a; font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 17px; }
.hr-pc-chalk .hr-pc-go { background: rgba(255,255,255,.12); color: #fff; }

/* 10 Kraft pouch */
.hr-pc-kraft .hr-pc-a { background: #c9a374 linear-gradient(170deg, rgba(255,255,255,.12), rgba(0,0,0,.06)); border-radius: 8px 8px 14px 14px; padding: 18px 12px 0; color: #2c2214; }
.hr-pc-kraft .hr-pc-deco { display: block; position: absolute; left: -12px; right: -12px; top: -18px; height: 10px; background: repeating-linear-gradient(90deg, #b48d5d 0 6px, #c9a374 6px 12px); }
.hr-pc-kraft .hr-pc-ph { border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px; border: 3px solid rgba(255,255,255,.7); aspect-ratio: 1.05; }
.hr-pc-kraft .hr-pc-body { background: #fffaf0; margin: 10px -2px 12px; border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.hr-pc-kraft .hr-pc-kind { color: #7a5a2c; }

/* 11 Seed packet */
.hr-pc-packet .hr-pc-a { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.hr-pc-packet .hr-pc-media { padding: 22px 10px 0; background: linear-gradient(var(--forest) 0 16px, #fff 16px); }
.hr-pc-packet .hr-pc-deco { display: block; position: absolute; left: 0; right: 0; top: 16px; height: 6px; background: radial-gradient(circle 3px at 50% 0, #fff 98%, transparent) 0 0 / 8px 6px repeat-x; }
.hr-pc-packet .hr-pc-ph { border-radius: 3px; aspect-ratio: 1.15; border: 1px solid var(--line); }
.hr-pc-packet .hr-pc-kind { color: var(--forest); }
.hr-pc-packet .hr-pc-t { font-family: Cormorant, Georgia, serif; font-weight: 700; font-size: 18px; }
.hr-pc-packet .hr-pc-chips { display: flex; }

/* 12 Vending slot */
.hr-pc-vending .hr-pc-a { background: #1a1f1d; border-radius: 12px; padding: 10px; color: #eef3e4; box-shadow: inset 0 0 0 2px #2c3430; }
.hr-pc-vending .hr-pc-ph { border-radius: 6px; aspect-ratio: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.hr-pc-vending .hr-pc-deco { display: block; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(115deg, rgba(255,255,255,.18) 0 18%, transparent 28%); pointer-events: none; }
.hr-pc-vending .hr-pc-body { padding: 8px 2px 2px; }
.hr-pc-vending .hr-pc-code { display: block; position: absolute; right: 2px; top: 8px; font: 800 11px/1 ui-monospace, monospace; color: #1a1f1d; background: var(--lime); padding: 3px 5px; border-radius: 3px; }
.hr-pc-vending .hr-pc-kind { color: #9fb4a3; padding-right: 30px; }
.hr-pc-vending .hr-pc-by, .hr-pc-vending .hr-pc-unit { color: #9fb4a3; }
.hr-pc-vending .hr-pc-price { font: 800 15px ui-monospace, monospace; color: #ff8a5b; background: #0b0e0d; padding: 2px 7px; border-radius: 3px; }
.hr-pc-vending .hr-pc-go { background: #2c3430; color: #fff; }

/* 13 Barcode label */
.hr-pc-barcode .hr-pc-a { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hr-pc-barcode .hr-pc-ph { aspect-ratio: 1.2; }
.hr-pc-barcode .hr-pc-t { text-transform: uppercase; font-size: 13px; letter-spacing: .01em; }
.hr-pc-barcode .hr-pc-foot { justify-content: space-between; }
.hr-pc-barcode .hr-pc-go { display: none; }
.hr-pc-barcode .hr-pc-bars { display: block; height: 26px; margin-top: 6px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px, #111 7px 10px, transparent 10px 11px); }

/* 14 Spotlight */
.hr-pc-spotlight .hr-pc-a { background: radial-gradient(circle at 50% 28%, #3c6a52 0, #14281d 62%); color: #f4f7ea; border-radius: var(--pc-r); align-items: center; text-align: center; padding-top: 16px; }
.hr-pc-spotlight .hr-pc-media { width: 74%; }
.hr-pc-spotlight .hr-pc-ph { border-radius: 50%; box-shadow: 0 0 0 4px rgba(222,241,158,.35), 0 0 30px rgba(222,241,158,.35); }
.hr-pc-spotlight .hr-pc-deco { display: block; position: absolute; left: 10%; right: 10%; bottom: -10px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); z-index: -1; }
.hr-pc-spotlight .hr-pc-body { align-items: center; width: 100%; padding-top: 14px; }
.hr-pc-spotlight .hr-pc-kind { color: var(--lime); }
.hr-pc-spotlight .hr-pc-by, .hr-pc-spotlight .hr-pc-unit { color: rgba(244,247,234,.7); }
.hr-pc-spotlight .hr-pc-price { color: var(--lime); }
.hr-pc-spotlight .hr-pc-foot { justify-content: center; }
.hr-pc-spotlight .hr-pc-go { display: none; }

/* 15 Minimal */
.hr-pc-minimal .hr-pc-ph { border-radius: 12px; aspect-ratio: 0.82; }
.hr-pc-minimal .hr-pc-body { padding: 8px 2px 4px; gap: 2px; }
.hr-pc-minimal .hr-pc-kind, .hr-pc-minimal .hr-pc-go { display: none; }
.hr-pc-minimal .hr-pc-foot { padding-top: 2px; }

/* 16 Photo overlay */
.hr-pc-overlay .hr-pc-a { border-radius: var(--pc-r); overflow: hidden; background: #14281d; color: #fff; min-height: 300px; }
.hr-pc-overlay .hr-pc-media { position: absolute; inset: 0; }
.hr-pc-overlay .hr-pc-ph { height: 100%; aspect-ratio: auto; }
.hr-pc-overlay .hr-pc-deco { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(10,22,15,.92) 88%); }
.hr-pc-overlay .hr-pc-body { margin-top: auto; flex: 0; z-index: 1; padding: 12px; }
.hr-pc-overlay .hr-pc-kind { color: var(--lime); }
.hr-pc-overlay .hr-pc-t { color: #fff; font-size: 16px; }
.hr-pc-overlay .hr-pc-by, .hr-pc-overlay .hr-pc-unit { color: rgba(255,255,255,.8); }
.hr-pc-overlay .hr-pc-price { color: #fff; }
.hr-pc-overlay .hr-pc-go { background: var(--lime); }
.hr-pc-overlay .hr-photo-labels { top: 10px; bottom: auto; left: 10px; }
.hr-pc-stamp .hr-save { top: 18px; right: 18px; }

/* 17 Market crate */
.hr-pc-crate .hr-pc-a { background: #fff; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.hr-pc-crate .hr-pc-ph { aspect-ratio: 1.15; }
.hr-pc-crate .hr-pc-deco { display: block; height: 30px; background: repeating-linear-gradient(180deg, #c79a62 0 9px, #a97c48 9px 10px); border-top: 2px solid #8a6238; position: relative; }
.hr-pc-crate .hr-pc-body { padding-top: 8px; }
.hr-pc-crate .hr-pc-foot { position: absolute; top: -34px; right: 8px; padding: 0; }
.hr-pc-crate .hr-pc-price { background: #22322b; color: #fff; font-family: "Comic Sans MS", "Bradley Hand", cursive; padding: 3px 10px; border-radius: 4px; border: 2px solid #8a6238; font-size: 14px; }
.hr-pc-crate .hr-pc-unit, .hr-pc-crate .hr-pc-go { display: none; }

/* 18 Facts panel */
.hr-pc-facts .hr-pc-a { background: #fff; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.hr-pc-facts .hr-pc-ph { aspect-ratio: 1.4; border-bottom: 2px solid var(--ink); }
.hr-pc-facts .hr-pc-kind { display: none; }
.hr-pc-facts .hr-pc-t { font-size: 15px; font-weight: 900; border-bottom: 6px solid var(--ink); padding-bottom: 4px; }
.hr-pc-facts .hr-pc-by { display: none; }
.hr-pc-facts .hr-pc-fx { display: grid; font-size: 11px; }
.hr-pc-facts .hr-pc-fx span { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px solid #bbb; padding: 2px 0; }
.hr-pc-facts .hr-pc-fx b { font-weight: 800; }
.hr-pc-facts .hr-pc-fx em { font-style: normal; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-pc-facts .hr-pc-foot { border-top: 4px solid var(--ink); margin-top: 6px; }
.hr-pc-facts .hr-pc-price { color: var(--ink); }

/* 19 Night glow */
.hr-pc-glow .hr-pc-a { background: #0f1a14; border-radius: var(--pc-r); color: #eaf3dc; border: 1px solid rgba(222,241,158,.5); box-shadow: 0 0 0 1px rgba(222,241,158,.12), 0 0 22px rgba(166,224,96,.18); padding: 8px; }
.hr-pc-glow .hr-pc-ph { border-radius: 10px; }
.hr-pc-glow .hr-pc-body { padding: 10px 4px 4px; }
.hr-pc-glow .hr-pc-kind { color: #a6e060; text-shadow: 0 0 8px rgba(166,224,96,.6); }
.hr-pc-glow .hr-pc-t { color: #fff; }
.hr-pc-glow .hr-pc-by, .hr-pc-glow .hr-pc-unit { color: #9fb4a3; }
.hr-pc-glow .hr-pc-price { color: var(--lime); text-shadow: 0 0 10px rgba(222,241,158,.6); }
.hr-pc-glow .hr-pc-go { background: rgba(222,241,158,.15); color: var(--lime); }

/* 20 Postage stamp */
.hr-pc-stamp .hr-pc-a { background: #fff; padding: 12px; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 5px, #0000 96%, #000) -7px -7px / 14px 14px round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 5px, #0000 96%, #000) -7px -7px / 14px 14px round; }
.hr-pc-stamp { filter: drop-shadow(0 4px 8px rgba(20,40,29,.16)); }
.hr-pc-stamp .hr-pc-ph { border: 1px solid #dfe3d8; aspect-ratio: 0.9; }
.hr-pc-stamp .hr-pc-deco { display: block; position: absolute; right: -8px; top: 10px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(36,77,56,.55); box-shadow: inset 0 0 0 4px #0000, inset 0 0 0 5px rgba(36,77,56,.4); transform: rotate(-14deg); }
.hr-pc-stamp .hr-pc-body { padding: 8px 2px 4px; }
.hr-pc-stamp .hr-pc-t { font-family: Cormorant, Georgia, serif; font-size: 17px; font-weight: 700; }
.hr-pc-stamp .hr-pc-price { font-family: Cormorant, Georgia, serif; font-size: 20px; }
.hr-pc-stamp .hr-pc-go { display: none; }

.hr-pc .hr-save { z-index: 3; }
.hr-pc-tag .hr-save, .hr-pc-kraft .hr-save { top: 30px; right: 14px; }
.hr-pc-polaroid .hr-save { top: 14px; right: 14px; }
@media (max-width: 640px) {
  .hr-pc-t { font-size: 13.5px; }
  .hr-pc-overlay .hr-pc-a { min-height: 260px; }
}
.hr-pc-vending .hr-pc-t, .hr-pc-spotlight .hr-pc-t, .hr-pc-chalk .hr-pc-t, .hr-pc-glow .hr-pc-t, .hr-pc-overlay .hr-pc-t { color: #fff; }
.hr-pc-stamp .hr-pc-deco { top: auto; bottom: -18px; right: -6px; }

/* ---------- v1.33.9: twelve more brand card designs ---------- */
.hr-bb .hr-bb-cap { display: block; padding: 10px 14px 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 750; color: var(--muted); }
/* Bottle label */
.hr-bb-paper { display: block; padding: 14px; background: #efe6cf linear-gradient(180deg, #f7f0dc, #eadfc2); }
.hr-bb-frame { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 12px 16px; background: #fbf6e8; border: 2px solid #8a6a3a; outline: 1px solid #8a6a3a; outline-offset: -7px; border-radius: 6px 6px 40px 40px; }
.hr-bb-frame .hr-bb-logo { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #c9b48a; }
.hr-bb-frame strong { font: 700 21px/1.1 "Cormorant", "Cormorant Garamond", Georgia, serif; color: #3d2c13; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-bb-frame .hr-kicker, .hr-bb-est { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a6a3a; font-weight: 700; }
/* Polaroid */
.hr-bb-desk { display: block; position: relative; height: 236px; overflow: hidden; background: #d9c6a5 repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 2px, transparent 2px 14px); }
.hr-bb-pol { position: absolute; left: 12%; top: 16px; width: 58%; background: #fff; padding: 8px 8px 30px; box-shadow: 0 8px 18px rgba(0,0,0,.22); transform: rotate(-5deg); z-index: 2; }
.hr-bb-pol .hr-bb-logo, .hr-bb-pol > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hr-bb-pol b { position: absolute; left: 6px; right: 6px; bottom: 6px; text-align: center; font: 600 15px/1.1 "Caveat", "Segoe Print", "Bradley Hand", cursive; color: #2b2b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-bb-pol2 { left: auto; right: 8%; top: 40px; width: 42%; padding-bottom: 14px; transform: rotate(7deg); z-index: 1; }
/* Record sleeve */
.hr-bb-sleeve { display: block; position: relative; margin: 14px 14px 0; aspect-ratio: 1.25; }
.hr-bb-sleeve > .hr-bb-logo { position: absolute; left: 0; top: 0; bottom: 0; width: 76%; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.2); z-index: 2; border: 1px solid var(--line); }
.hr-bb-disc { position: absolute; right: 0; top: 6%; height: 88%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px); overflow: hidden; display: grid; place-items: center; }
.hr-bb-disc img { width: 38%; height: 38%; border-radius: 50%; object-fit: cover; border: 3px solid #111; }
.hr-bb-track { display: block; padding: 4px 14px 0; font-size: 12px; color: var(--muted); font-weight: 650; }
/* Passport stamp */
.hr-bb-page { display: flex; align-items: center; gap: 12px; padding: 18px 14px; background: #eef2e6 repeating-linear-gradient(0deg, transparent 0 22px, rgba(23,58,44,.06) 22px 23px); border-bottom: 1px dashed #9db08a; }
.hr-bb-stamp { position: relative; flex: none; width: 48%; aspect-ratio: 1; transform: rotate(-8deg); }
.hr-bb-stamp .hr-bb-logo { position: absolute; inset: 12%; border-radius: 50%; }
.hr-bb-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px double #1f6b4a; box-shadow: inset 0 0 0 6px #eef2e6, inset 0 0 0 8px rgba(31,107,74,.6); }
.hr-bb-visa { display: grid; gap: 2px; min-width: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #1f6b4a; font-weight: 800; border: 2px solid #1f6b4a; padding: 6px 8px; transform: rotate(4deg); border-radius: 6px; }
.hr-bb-visa b { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Spotlight */
.hr-bb-dark { display: grid; justify-items: center; text-align: center; gap: 6px; position: relative; padding: 26px 14px 18px; background: radial-gradient(ellipse at 50% 100%, #2b3d33 0, #0f1a15 70%); color: #f3f1e6; overflow: hidden; }
.hr-bb-cone { position: absolute; left: 50%; top: -20px; width: 120%; height: 120%; transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0, transparent 0 8deg, rgba(255,250,215,.22) 14deg 26deg, transparent 32deg); pointer-events: none; }
.hr-bb-dark .hr-bb-logo { position: relative; width: 52%; aspect-ratio: 1; border-radius: 16px; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.5); }
.hr-bb-dark strong { position: relative; font: 800 19px/1.15 "DM Sans", Arial, sans-serif; }
.hr-bb-dark .hr-kicker { position: relative; color: var(--lime, #c3ee3f); font-size: 10.5px; letter-spacing: .08em; }
/* Billboard */
.hr-bb-sky { display: grid; justify-items: center; position: relative; padding: 14px 12px 0; background: linear-gradient(180deg, #bfe3f2, #e8f5ec 70%); }
.hr-bb-board2 { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; background: #fff; border: 5px solid #33433b; border-radius: 4px; box-shadow: 0 4px 0 #1f2a24; min-width: 0; }
.hr-bb-board2 .hr-bb-logo { flex: none; width: 38%; aspect-ratio: 1; }
.hr-bb-board2 b { font: 800 17px/1.1 "DM Sans", Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hr-bb-legs { width: 52%; height: 26px; background: linear-gradient(90deg, transparent 0 18%, #33433b 18% 24%, transparent 24% 76%, #33433b 76% 82%, transparent 82%); }
.hr-bb-ground { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 100%; padding: 8px 2px 10px; background: #7fa86a; margin: 0 -12px; width: calc(100% + 24px); padding-inline: 12px; }
.hr-bb-ground i { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; border: 2px solid #fff; }
.hr-bb-ground img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Business card */
.hr-bb-table { display: block; padding: 18px 14px; background: #2d3b33 radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.5px) 0 0 / 5px 5px; }
.hr-bb-bc { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 6px; padding: 12px; box-shadow: 0 10px 20px rgba(0,0,0,.35); transform: rotate(-2deg); min-width: 0; }
.hr-bb-bc .hr-bb-logo { flex: none; width: 40%; aspect-ratio: 1; border-right: 1px solid var(--line); padding-right: 8px; }
.hr-bb-bcid { display: grid; gap: 3px; min-width: 0; }
.hr-bb-bcid strong { font: 800 15px/1.15 "DM Sans", Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-bb-bcid .hr-kicker { font-size: 9.5px; letter-spacing: .08em; color: #1f6b4a; }
.hr-bb-bcl { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Product mosaic */
.hr-bb-mos { display: grid; place-items: center; position: relative; aspect-ratio: 1.3; overflow: hidden; background: #1d3328; }
.hr-bb-mosg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.hr-bb-mosg i { display: block; overflow: hidden; }
.hr-bb-mosg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.6) saturate(.85); }
.hr-bb-mosg i:only-child { grid-column: 1 / -1; grid-row: 1 / 3; }
.hr-bb-mos > .hr-bb-logo { position: relative; width: 46%; aspect-ratio: 1; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.45); border: 4px solid #fff; }
/* Award ribbon */
.hr-bb-award { display: grid; justify-items: center; position: relative; padding: 18px 14px 8px; background: linear-gradient(180deg, #fbf3d9, var(--surface)); }
.hr-bb-rosette { position: relative; width: 50%; aspect-ratio: 1; border-radius: 50%; padding: 9px; background: repeating-conic-gradient(#d9a62e 0 10deg, #f0c75a 10deg 20deg); box-shadow: 0 6px 14px rgba(0,0,0,.18); z-index: 2; }
.hr-bb-rosette .hr-bb-logo { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; }
.hr-bb-tails { width: 34%; height: 34px; margin-top: -14px; background: linear-gradient(100deg, transparent 0 8%, #1f6b4a 8% 46%, transparent 46% 54%, #1f6b4a 54% 92%, transparent 92%); clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 80%, 50% 100%, 25% 80%, 0 100%); }
.hr-bb-honor { margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #9a7417; }
.hr-bb-ribbon .hr-bb-id { text-align: center; justify-items: center; padding-top: 4px; }
/* Wooden crate */
.hr-bb-crate2 { display: grid; place-items: center; gap: 4px; position: relative; padding: 18px 14px 14px; background: #c79a5b; overflow: hidden; }
.hr-bb-slats { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #c99d60 0 34px, #9c7239 34px 37px), #c79a5b; opacity: .9; }
.hr-bb-crate2 .hr-bb-logo { position: relative; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid #5b3b14; box-shadow: 0 0 0 5px rgba(91,59,20,.25); }
.hr-bb-ink { position: relative; font: 800 15px/1.1 "DM Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #3b2408; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-bb-straw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px 14px; background: #e8cf8f repeating-linear-gradient(60deg, rgba(150,110,40,.25) 0 2px, transparent 2px 7px); }
.hr-bb-straw i { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 2px solid #fff; background: #fff; }
.hr-bb-straw img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Neon sign */
.hr-bb-brick { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 14px 18px; color: #eaffd0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,.35) 18px 20px), repeating-linear-gradient(90deg, #3b2723 0 38px, #2f201c 38px 40px), #2a1d1a; }
.hr-bb-tube { width: 52%; aspect-ratio: 1; padding: 6px; border-radius: 18px; border: 3px solid #d8ff7a; box-shadow: 0 0 8px #b8ff3a, 0 0 22px rgba(184,255,58,.6), inset 0 0 10px rgba(184,255,58,.5); }
.hr-bb-tube .hr-bb-logo { width: 100%; height: 100%; border-radius: 12px; }
.hr-bb-brick b { font: 800 18px/1.15 "DM Sans", Arial, sans-serif; text-shadow: 0 0 6px #b8ff3a, 0 0 16px rgba(184,255,58,.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-bb-open { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #ff8fb1; text-shadow: 0 0 6px #ff4f86; }
/* Hang tag */
.hr-bb-rack { display: grid; justify-items: center; position: relative; padding: 0 14px 14px; background: linear-gradient(180deg, #eef0e6, var(--surface)); }
.hr-bb-string { width: 2px; height: 22px; background: #8a7a5a; }
.hr-bb-tag { position: relative; display: grid; justify-items: center; text-align: center; gap: 5px; width: 80%; padding: 26px 12px 14px; background: #d8b98a linear-gradient(180deg, #e2c69a, #cfae7b); border-radius: 8px; clip-path: polygon(22% 0, 78% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.hr-bb-hole { position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #eef0e6; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.hr-bb-tag .hr-bb-logo { width: 56%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #7a5a2a; padding: 3px; background: #fff; }
.hr-bb-tag strong { font: 800 15px/1.15 "DM Sans", Arial, sans-serif; color: #3b2a12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hr-bb-tag .hr-kicker { font-size: 9.5px; letter-spacing: .1em; color: #6a4e22; }
.hr-bb-price { font-size: 11px; font-weight: 800; background: #3b2a12; color: #f3e6c8; padding: 3px 8px; border-radius: 99px; }
@container (max-width: 230px) {
  .hr-bb-frame strong { font-size: 17px; }
  .hr-bb-desk { height: 190px; }
  .hr-bb-page { flex-direction: column; }
  .hr-bb-board2 { flex-direction: column; }
  .hr-bb-board2 .hr-bb-logo, .hr-bb-bc .hr-bb-logo { width: 60%; }
  .hr-bb-bc { flex-direction: column; text-align: center; }
  .hr-bb-bc .hr-bb-logo { border-right: 0; padding-right: 0; }
  .hr-bb-straw i:nth-child(4), .hr-bb-ground i:nth-child(4) { display: none; }
  .hr-bb-straw, .hr-bb-ground { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- v1.33.9: ten more News designs (hr-nx) and ten more Learn designs (hr-lx) ---------- */
.hr-card > a.hr-nx, .hr-card > a.hr-lx { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; container-type: inline-size; }
.hr-nx img, .hr-lx img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-nx strong, .hr-lx strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hr-nx .hr-nx-lede, .hr-lx .hr-lx-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.hr-nx-chip, .hr-lx-chip { justify-self: start; align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--lime, #c3ee3f); color: #173a2c; }
.hr-nx-meta, .hr-lx-meta { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hr-nx .hr-photo-labels, .hr-lx .hr-photo-labels { position: absolute; top: 10px; left: 10px; bottom: auto; z-index: 4; }
/* N1 photo overlay */
.hr-nx-overlay, .hr-lx-overlay, .hr-lx-poster { min-height: 330px; }
.hr-nx-overlay > img, .hr-lx-overlay > img, .hr-lx-poster > img, .hr-nx-magazine > img { position: absolute; inset: 0; }
.hr-nx-shade, .hr-lx-shade { position: relative; margin-top: auto; display: grid; gap: 6px; padding: 60px 14px 14px; background: linear-gradient(180deg, transparent, rgba(8,20,14,.88) 55%); color: #fff; }
.hr-nx-shade strong, .hr-lx-shade strong { font: 800 18px/1.2 "DM Sans", Arial, sans-serif; }
.hr-nx-shade .hr-nx-meta, .hr-lx-shade .hr-lx-meta { color: rgba(255,255,255,.8); }
/* N2 magazine cover */
.hr-nx-magazine { min-height: 330px; }
.hr-nx-mast { position: relative; padding: 10px 12px 0; font: 900 44px/0.9 "Cormorant", "Cormorant Garamond", Georgia, serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.hr-nx-issue { position: relative; padding: 2px 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hr-nx-cover { position: relative; margin-top: auto; display: grid; gap: 6px; padding: 50px 14px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); color: #fff; }
.hr-nx-cover strong { font: 700 23px/1.05 "Cormorant", "Cormorant Garamond", Georgia, serif; }
.hr-nx-magazine .hr-photo-labels { top: auto; bottom: 14px; left: auto; right: 10px; }
/* N3 postcard */
.hr-card > a.hr-nx-postcard { background: #e9e2cf; padding: 12px; }
.hr-nx-pc { display: flex; flex-direction: column; height: 100%; background: #fffdf6; box-shadow: 0 6px 14px rgba(0,0,0,.14); border-radius: 4px; overflow: hidden; }
.hr-nx-pcph { position: relative; display: block; aspect-ratio: 1.7; }
.hr-nx-pcph b { position: absolute; left: 10px; bottom: 8px; right: 10px; font: italic 700 20px/1 "Cormorant", Georgia, serif; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hr-nx-pcback { position: relative; display: grid; gap: 6px; padding: 10px 12px 12px; background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(0,0,0,.06) 21px 22px); flex: 1; }
.hr-nx-pcback strong { font: 700 15px/1.25 "DM Sans", Arial, sans-serif; padding-right: 50px; }
.hr-nx-stampbox { position: absolute; top: 10px; right: 10px; width: 40px; height: 46px; border: 2px dotted #b44a3a; display: grid; place-items: center; background: #fbeee6; }
.hr-nx-stampbox i { font: 800 13px "DM Sans", sans-serif; color: #b44a3a; font-style: normal; }
.hr-nx-post { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6b5a3a; font-weight: 700; margin-top: auto; }
/* N4 bulletin board */
.hr-card > a.hr-nx-bulletin { background: #b98b5a; }
.hr-nx-cork { position: relative; display: block; flex: 1; min-height: 330px; background: radial-gradient(rgba(80,45,15,.35) 1px, transparent 1.6px) 0 0 / 7px 7px, #c79a66; border: 8px solid #7a5230; }
.hr-nx-snap { position: absolute; top: 14px; left: 10%; width: 64%; aspect-ratio: 1.15; padding: 6px; background: #fff; transform: rotate(-4deg); box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.hr-nx-note { position: absolute; left: 14%; right: 6%; bottom: 14px; display: grid; gap: 4px; padding: 14px 12px 12px; background: #fff7a8; transform: rotate(2deg); box-shadow: 0 6px 12px rgba(0,0,0,.2); }
.hr-nx-note b { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a6a10; }
.hr-nx-note strong { font: 700 15px/1.2 "DM Sans", Arial, sans-serif; color: #2b2410; }
.hr-nx-note small { font-size: 11px; color: #5c5020; }
.hr-nx-pin1, .hr-nx-pin2 { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #c7261a); box-shadow: 0 2px 3px rgba(0,0,0,.4); z-index: 3; }
.hr-nx-pin1 { top: 8px; left: 42%; }
.hr-nx-pin2 { top: -6px; left: 50%; }
/* N5 telegram */
.hr-card > a.hr-nx-telegram { background: #efe2b8; }
.hr-nx-tg { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 12px; font-family: "Courier New", Courier, monospace; color: #2a2414; }
.hr-nx-tghead { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid #2a2414; padding: 0 30px 6px 0; font-size: 11px; }
.hr-nx-tghead b { letter-spacing: .12em; }
.hr-nx-tgph { display: block; aspect-ratio: 2; filter: sepia(.55) contrast(1.05); border: 1px solid #a8925a; }
.hr-nx-tg strong { font: 700 14px/1.3 "Courier New", Courier, monospace; background: #fbf3d2; padding: 6px 8px; border-left: 4px solid #a3341f; }
.hr-nx-tg .hr-nx-lede { font-family: "Courier New", monospace; color: #4a4128; font-size: 11.5px; }
.hr-nx-tgfoot { margin-top: auto; font-size: 11px; font-weight: 700; color: #a3341f; }
/* N6 radio player */
.hr-card > a.hr-nx-radio { background: #14241c; color: #eef5e6; padding: 14px; gap: 12px; }
.hr-nx-rtop { display: flex; gap: 12px; align-items: center; min-width: 0; }
.hr-nx-rart { flex: none; width: 42%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.hr-nx-rid { display: grid; gap: 5px; min-width: 0; }
.hr-nx-rid b { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime, #c3ee3f); }
.hr-nx-rid strong { font: 800 15px/1.2 "DM Sans", Arial, sans-serif; -webkit-line-clamp: 4; }
.hr-nx-wave { display: flex; align-items: center; gap: 3px; height: 56px; }
.hr-nx-wave i { flex: 1; background: linear-gradient(180deg, #d7f075, #6fa83a); border-radius: 2px; opacity: .9; }
.hr-nx-wave i:nth-child(n+12) { opacity: .35; }
.hr-nx-rbar { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: rgba(238,245,230,.75); }
.hr-nx-rbar span:last-child { margin-left: auto; }
.hr-nx-play { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lime, #c3ee3f); color: #14241c; font-size: 13px; }
/* N7 chalkboard (matches the Chalkboard menu cards) */
.hr-card > a.hr-nx-chalk, .hr-card > a.hr-lx-chalk { background: #8a6238; padding: 7px; }
.hr-nx-board, .hr-lx-board { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; border-radius: 6px; background: #20302a radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 6px 6px; color: #f2f5e8; }
.hr-nx-ch, .hr-lx-lesson { font: 600 16px/1 "Caveat", "Segoe Print", "Bradley Hand", cursive; color: var(--lime, #c3ee3f); padding-right: 30px; }
.hr-nx-chph, .hr-lx-chph { display: block; aspect-ratio: 1.8; border-radius: 4px; overflow: hidden; opacity: .92; }
.hr-nx-board strong, .hr-lx-board strong { font: 700 18px/1.2 "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 21px; }
.hr-nx-board .hr-nx-lede, .hr-lx-board .hr-lx-desc { color: rgba(242,245,232,.78); }
.hr-nx-chfoot { margin-top: auto; font-size: 11px; color: rgba(242,245,232,.7); border-top: 1px dashed rgba(255,255,255,.25); padding-top: 7px; }
.hr-lx-tray { margin: auto -12px -12px; height: 8px; background: #6d4a26; }
/* N8 extra edition */
.hr-card > a.hr-nx-tabloid { background: #fdfbf4; padding: 12px; gap: 8px; }
.hr-nx-extra { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #c8261a; color: #fff; padding: 5px 34px 5px 10px; margin: -12px -12px 0; }
.hr-nx-extra b { font: 900 22px/1 "DM Sans", Arial, sans-serif; letter-spacing: .02em; font-style: italic; }
.hr-nx-extra span { font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.hr-nx-tabloid strong { font: 900 21px/1.05 "DM Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.hr-nx-tbph { position: relative; display: block; aspect-ratio: 1.5; filter: grayscale(.25) contrast(1.05); }
.hr-nx-burst { position: absolute; right: 8px; bottom: 8px; background: #ffe24a; color: #1a1a1a; font-size: 10.5px; font-weight: 900; text-transform: uppercase; padding: 8px 10px; clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 85% 52%, 100% 68%, 79% 72%, 82% 94%, 61% 83%, 50% 100%, 39% 83%, 18% 94%, 21% 72%, 0 68%, 15% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%); }
.hr-nx-tbfoot { margin-top: auto; font-size: 11px; font-weight: 700; color: #c8261a; border-top: 3px double #1a1a1a; padding-top: 6px; }
/* N9 phone alert */
.hr-card > a.hr-nx-phone { background: #e8ebe3; padding: 14px 18px; }
.hr-nx-screen { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 310px; border-radius: 26px; overflow: hidden; border: 7px solid #15201a; box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.hr-nx-screen > img { position: absolute; inset: 0; filter: brightness(.75); }
.hr-nx-clock { position: relative; text-align: center; padding-top: 18px; font: 800 26px/1 "DM Sans", Arial, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hr-nx-alert { position: relative; margin: auto 10px 12px; display: grid; gap: 4px; padding: 10px 11px; border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); }
.hr-nx-app { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #4b5a50; }
.hr-nx-app i { width: 18px; height: 18px; border-radius: 5px; background: #173a2c; color: var(--lime, #c3ee3f); display: grid; place-items: center; font: 800 11px "DM Sans", sans-serif; font-style: normal; }
.hr-nx-app small { margin-left: auto; }
.hr-nx-alert strong { font: 800 14px/1.25 "DM Sans", Arial, sans-serif; }
.hr-nx-alert > span:last-child { font-size: 11px; color: #4b5a50; }
/* N10 timeline */
.hr-card > a.hr-nx-timeline { padding: 14px; gap: 10px; }
.hr-nx-tl { display: flex; gap: 10px; align-items: stretch; }
.hr-nx-dot { flex: none; width: 54px; display: grid; place-content: center; text-align: center; background: #173a2c; color: #fff; border-radius: 12px; position: relative; }
.hr-nx-dot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 400px; background: linear-gradient(#173a2c, transparent 60%); }
.hr-nx-dot b { font: 800 22px/1 "DM Sans", sans-serif; }
.hr-nx-dot small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime, #c3ee3f); }
.hr-nx-tlph { flex: 1; aspect-ratio: 1.6; border-radius: 12px; overflow: hidden; }
.hr-nx-tlcopy { display: grid; gap: 6px; padding-left: 64px; }
.hr-nx-tlcopy strong { font: 800 16px/1.2 "DM Sans", Arial, sans-serif; }

/* L1 photo overlay: shares hr-nx overlay rules; chip uses the topic colour */
.hr-lx-overlay .hr-lx-chip, .hr-lx-badge .hr-lx-chip { background: var(--hue); color: #fff; }
/* L2 flashcard */
.hr-card > a.hr-lx-flash { background: #eef1e8; padding: 14px 14px 18px; }
.hr-lx-stack { position: absolute; left: 22px; right: 6px; top: 22px; bottom: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--line); transform: rotate(3deg); }
.hr-lx-fc { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px; background: #fff; border-radius: 12px; border: 1px solid var(--line); border-top: 6px solid var(--hue); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.hr-lx-q { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hue); padding-right: 26px; }
.hr-lx-fc strong { font: 800 18px/1.2 "DM Sans", Arial, sans-serif; }
.hr-lx-fcph { display: block; aspect-ratio: 1.8; border-radius: 8px; overflow: hidden; margin-top: auto; }
.hr-lx-tap { font-size: 12px; font-weight: 800; color: var(--hue); text-align: center; border-top: 1px dashed var(--line); padding-top: 8px; }
/* L3 notebook */
.hr-card > a.hr-lx-notebook { background: #fffef7; flex-direction: row; }
.hr-lx-spiral { flex: none; width: 22px; background: radial-gradient(circle at 50% 50%, #5d6b62 0 3px, transparent 3.5px) 0 6px / 22px 18px repeat-y, #ece8da; border-right: 1px solid #d7d2bf; }
.hr-lx-nb { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; padding: 12px 12px 12px 16px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(70,110,170,.18) 23px 24px); border-left: 2px solid rgba(200,60,60,.35); }
.hr-lx-nbdate { font: 600 15px/1 "Caveat", "Segoe Print", cursive; color: #2d5f8a; padding-right: 26px; }
.hr-lx-nb strong { font: 700 22px/1.05 "Caveat", "Segoe Print", "Bradley Hand", cursive; color: #1d2b4a; }
.hr-lx-nbph { display: block; aspect-ratio: 1.7; padding: 5px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); transform: rotate(-2deg); }
/* L4 certificate */
.hr-card > a.hr-lx-certificate { background: #f6efdc; padding: 10px; }
.hr-lx-cert { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; flex: 1; padding: 14px 12px; border: 2px solid #b08d3a; outline: 1px solid #b08d3a; outline-offset: -6px; background: #fffaf0; }
.hr-lx-ctop { font: italic 700 15px/1 "Cormorant", Georgia, serif; color: #8a6a1a; letter-spacing: .04em; }
.hr-lx-cph { width: 56%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #e4d3a3; }
.hr-lx-cert strong { font: 700 19px/1.15 "Cormorant", "Cormorant Garamond", Georgia, serif; color: #2a2210; }
.hr-lx-cline { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6b5a2a; border-top: 1px solid #d8c592; padding-top: 6px; }
.hr-lx-seal { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #c8402e 0 60%, #a02a1c 61%); color: #ffe7c2; font: 800 15px "Cormorant", serif; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.hr-lx-go { margin-top: auto; font-size: 12px; font-weight: 800; color: #8a6a1a; }
/* L6 round badge (matches the Round badge brand cards) */
.hr-lx-band { display: block; height: 92px; background: var(--hue); background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px); background-size: 8px 8px; }
.hr-lx-round { width: min(52%, 140px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: -64px auto 0; border: 5px solid var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.18); position: relative; }
.hr-lx-bid { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 10px 14px 0; }
.hr-lx-chip { justify-self: center; }
.hr-lx-bid strong { font: 800 17px/1.2 "DM Sans", Arial, sans-serif; }
.hr-lx-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 14px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.hr-lx-btn { background: var(--forest); color: #fff; font-weight: 800; border-radius: 99px; padding: 6px 12px; }
/* L7 recipe card */
.hr-card > a.hr-lx-recipe { background: #f1ead6; padding: 10px; }
.hr-lx-rc { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 10px 12px; background: #fff repeating-linear-gradient(0deg, transparent 0 21px, rgba(70,110,170,.16) 21px 22px); border-top: 22px solid #c8402e; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.1); position: relative; }
.hr-lx-rchead { position: absolute; top: -18px; left: 10px; right: 30px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-lx-rcrow { display: flex; gap: 10px; align-items: center; }
.hr-lx-rcph { flex: none; width: 38%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.hr-lx-rc strong { font: 700 20px/1.05 "Caveat", "Segoe Print", cursive; color: #3a2a14; -webkit-line-clamp: 4; }
.hr-lx-rcl { font-size: 12px; line-height: 1.45; color: #3d3b33; }
.hr-lx-rcl b { color: #c8402e; }
.hr-lx-rcd { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
/* L8 trail sign */
.hr-lx-woods { position: relative; display: block; aspect-ratio: .95; overflow: hidden; }
.hr-lx-woods > img { filter: brightness(.8) saturate(1.05); }
.hr-lx-post { position: absolute; left: 22%; top: 16%; bottom: 0; width: 12px; background: linear-gradient(90deg, #6a4420, #8d5d2c, #6a4420); }
.hr-lx-arrow { position: absolute; left: 8%; right: 8%; top: 22%; padding: 9px 26px 9px 12px; background: #9b6a34 repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px); color: #fff4dc; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); box-shadow: 0 4px 8px rgba(0,0,0,.3); }
.hr-lx-arrow b { font: 800 15px/1.2 "DM Sans", Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hr-lx-arrow2 { top: auto; bottom: 18%; left: 14%; right: 18%; padding: 6px 12px 6px 22px; clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); background: #7d5428; }
.hr-lx-arrow2 small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hr-lx-pad { padding: 10px 14px 14px; }
/* L9 specimen slide */
.hr-lx-bench { display: grid; place-items: center; padding: 18px 12px; background: #dfe7e0 radial-gradient(circle at 50% 50%, #f5f8f4, #d5dfd6); border-bottom: 1px solid var(--line); }
.hr-lx-glass { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border-radius: 4px; background: rgba(255,255,255,.55); border: 1px solid rgba(120,150,140,.6); box-shadow: 0 4px 10px rgba(0,0,0,.08), inset 0 0 0 3px rgba(255,255,255,.6); }
.hr-lx-slabel { flex: none; width: 34%; display: grid; gap: 2px; padding: 6px; background: #fffbe8; border: 1px solid #d9cfa5; font-size: 10px; }
.hr-lx-slabel b { font: 800 11px "DM Sans", sans-serif; }
.hr-lx-slabel i { font-family: "Cormorant", Georgia, serif; font-size: 13px; color: #4a3a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-lx-lens { flex: 1; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid #3b4a42; box-shadow: 0 0 0 3px #c9d4cc; }
.hr-lx-sid { display: grid; gap: 6px; padding: 12px 14px 14px; }
.hr-lx-sid strong { font: 800 16px/1.2 "DM Sans", Arial, sans-serif; }
/* L10 gig poster (matches the Gig poster event cards) */
.hr-lx-pshade { position: relative; margin-top: auto; display: grid; gap: 6px; padding: 70px 14px 14px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hue) 70%, #000) 60%); color: #fff; }
.hr-lx-pk { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lime, #c3ee3f); }
.hr-lx-pshade strong { font: 900 24px/1 "DM Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.hr-lx-pline { font-size: 11.5px; color: rgba(255,255,255,.82); }
.hr-lx-pbtn { justify-self: start; background: var(--lime, #c3ee3f); color: #173a2c; font-weight: 800; font-size: 12px; border-radius: 99px; padding: 7px 14px; }
@container (max-width: 230px) {
  .hr-nx-mast { font-size: 32px; }
  .hr-nx-cover strong, .hr-lx-pshade strong { font-size: 18px; }
  .hr-nx-rtop { flex-direction: column; align-items: stretch; }
  .hr-nx-rart { width: 100%; aspect-ratio: 1.6; }
  .hr-nx-tlcopy { padding-left: 0; }
  .hr-nx-dot::after { display: none; }
  .hr-lx-rcrow { flex-direction: column; align-items: stretch; }
  .hr-lx-rcph { width: 100%; aspect-ratio: 1.6; }
  .hr-lx-glass { flex-direction: column; }
  .hr-lx-slabel { width: 100%; }
}
/* v1.33.9: keep the Sample tag clear of header strips */
.hr-nx-telegram .hr-photo-labels, .hr-nx-chalk .hr-photo-labels { top: 40px; }
.hr-nx-tabloid .hr-photo-labels { top: auto; bottom: 44px; left: 22px; }
/* v1.33.10: keep the recipe-card header clear of the save button. */
.hr-lx-recipe .hr-lx-rchead { left: 30px; right: 8px; }