/* Homeateri ad sidebar. Fonts are inherited from your site.
   Change these variables to match your brand colors. */
.hm-ads {
  --hm-ad-bg: #ffffff;
  --hm-ad-line: #e6e1d8;
  --hm-ad-text: #2a2622;
  --hm-ad-muted: #6f675d;
  --hm-ad-accent: #2f6b4f;      /* button / price color */
  --hm-ad-accent-ink: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--hm-ad-text);
}

.hm-ads__title { margin: 0; font-size: .8rem; color: var(--hm-ad-muted); }

.hm-ad {
  display: flex;
  flex-direction: column;
  background: var(--hm-ad-bg);
  border: 1px solid var(--hm-ad-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.hm-ad:hover .hm-ad__cta { filter: brightness(1.1); }
.hm-ad:focus-visible { outline: 3px solid var(--hm-ad-accent); outline-offset: 2px; }

.hm-ad__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hm-ad__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.hm-ad__brand { font-size: .8rem; color: var(--hm-ad-muted); }
.hm-ad__headline { font-size: 1rem; line-height: 1.3; }
.hm-ad__blurb { font-size: .875rem; line-height: 1.45; color: var(--hm-ad-muted); }
.hm-ad__price { font-weight: 700; color: var(--hm-ad-accent); }
.hm-ad__cta {
  align-self: flex-start;
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--hm-ad-accent);
  color: var(--hm-ad-accent-ink);
  font-size: .85rem;
  font-weight: 600;
}

.hm-ad--open { padding: 16px 14px; gap: 6px; border-style: dashed; }
.hm-ads__more { font-size: .85rem; color: var(--hm-ad-muted); }

/* ---------- Page layout: main content left, ads right ---------- */
.hm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.hm-layout > .hm-ads { position: sticky; top: 20px; }

/* Tablets and phones: ads drop below the content */
@media (max-width: 900px) {
  .hm-layout { grid-template-columns: 1fr; }
  .hm-layout > .hm-ads { position: static; }
  .hm-layout > .hm-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .hm-ads__title { grid-column: 1 / -1; }
}