/* ================================================================
   Editorial listing — /articles (articles.php) and /blog (blog.php)
   Markup: includes/journal-listing.php. Loaded only by those two
   pages, after redesign.css. Every class is prefixed `ap-` so
   nothing here reaches the shop or the header.
   ================================================================ */

.ap {
  --ap-ink: #121416;
  --ap-text: #3a4046;
  --ap-muted: #6b737b;
  --ap-faint: #9aa1a8;
  --ap-line: #e6e8ea;
  --ap-soft: #f5f6f4;
  --ap-accent: var(--brand, #05944f);
  --ap-accent-soft: #e8f5ee;
  --ap-radius: 14px;
  color: var(--ap-text);
  margin-top: -16px;            /* sit flush under the category bar's 16px bottom margin */
  /* header-v2.php wraps every page in a .container. Break out of it so the
     masthead and topic bands run edge to edge, and so the .container inside
     each section lines up with the header instead of doubling the gutter. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap h1, .ap h2, .ap h3 { color: var(--ap-ink); margin: 0; }
.ap p { margin: 0; }
.ap a { color: inherit; text-decoration: none; }
.ap :focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; border-radius: 6px; }

.ap-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

/* ── Masthead ─────────────────────────────────────────────────── */
.ap-hero {
  background:
    radial-gradient(1200px 320px at 85% -40%, rgba(5, 148, 79, 0.10), transparent 70%),
    linear-gradient(180deg, #f7f8f6 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ap-line);
  padding: 22px 0 28px;
}
.ap-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--ap-muted);
}
.ap-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ap-faint); }
.ap-crumbs a:hover { color: var(--ap-accent); }
.ap-crumbs [aria-current] { color: var(--ap-ink); font-weight: 600; }

.ap-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.ap-hero h1 {
  margin-top: 10px;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.ap-lede {
  margin-top: 14px;
  max-width: 560px;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem);
  line-height: 1.6;
  color: var(--ap-muted);
}

.ap-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 1px 2px rgba(18, 20, 22, 0.04), 0 8px 24px -16px rgba(18, 20, 22, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ap-search:focus-within {
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 4px rgba(5, 148, 79, 0.10);
}
.ap-search-icon { position: absolute; left: 18px; color: var(--ap-faint); pointer-events: none; }
.ap-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 12px 10px 42px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ap-ink);
  outline: none;
}
.ap-search input::placeholder { color: var(--ap-faint); }
.ap-search input::-webkit-search-cancel-button { display: none; }
.ap-search button {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ap-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 20px;
  transition: background 0.2s;
}
.ap-search button:hover { background: var(--ap-accent); }

.ap-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ap-muted);
}
.ap-stats li { display: flex; align-items: center; gap: 6px; }
.ap-stats li + li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ap-line);
  margin-right: 16px;
}
.ap-stats strong { color: var(--ap-ink); font-weight: 700; }

/* ── Topic chips ──────────────────────────────────────────────── */
.ap-topics {
  background: #fff;
  border-bottom: 1px solid var(--ap-line);
}
.ap-chips,
.ap-subchips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ap-chips::-webkit-scrollbar,
.ap-subchips::-webkit-scrollbar { display: none; }
.ap-chips { padding: 14px 0; }
/* Wider screens: wrap instead of scroll -- a clipped last chip with no
   scrollbar gave no hint the row went on (the blog has more topics). */
@media (min-width: 641px) {
  .ap-chips { flex-wrap: wrap; overflow: visible; }
}
.ap-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ap-text);
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ap-chip span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ap-faint);
  font-variant-numeric: tabular-nums;
}
.ap-chip:hover { border-color: var(--ap-ink); color: var(--ap-ink); }
.ap-chip.is-active { background: var(--ap-ink); border-color: var(--ap-ink); color: #fff; }
.ap-chip.is-active span { color: rgba(255, 255, 255, 0.6); }

.ap-subchips {
  padding: 0 0 14px;
  gap: 18px;
  border-top: 1px dashed var(--ap-line);
  padding-top: 12px;
}
.ap-subchip {
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ap-muted);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.ap-subchip span { color: var(--ap-faint); font-size: 0.72rem; margin-left: 3px; }
.ap-subchip:hover { color: var(--ap-ink); }
.ap-subchip.is-active { color: var(--ap-accent); font-weight: 650; border-bottom-color: var(--ap-accent); }

/* ── Body & toolbar ───────────────────────────────────────────── */
.ap-body { padding-top: 28px; padding-bottom: 12px; }
.ap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.ap-count { font-size: 0.88rem; color: var(--ap-muted); }
.ap-count strong { color: var(--ap-ink); font-weight: 650; }
.ap-clear {
  margin-left: 10px;
  font-weight: 600;
  color: var(--ap-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ap-sort { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ap-sort label { font-size: 0.8rem; color: var(--ap-muted); }
.ap-sort select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b737b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 8px 34px 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ap-ink);
  cursor: pointer;
}
.ap-sort select:focus { outline: none; border-color: var(--ap-accent); }

/* ── Shared card parts ────────────────────────────────────────── */
.ap-tag {
  position: relative;
  z-index: 2;                   /* above the stretched title link */
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-accent);
}
a.ap-tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The title link covers the whole card, so any click opens the article
   without wrapping the card in an <a> (which would nest the author link). */
.ap-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.ap-excerpt {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ap-muted);
  overflow-wrap: break-word;
}
.ap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.76rem;
  color: var(--ap-faint);
}
.ap-meta-author { position: relative; z-index: 2; font-weight: 600; color: var(--ap-text); }
a.ap-meta-author:hover { color: var(--ap-accent); }
.ap-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.ap-feature-media,
.ap-row-media,
.ap-card-media {
  position: relative;
  overflow: hidden;
  background: var(--ap-soft);
}
.ap-feature-media img,
.ap-row-media img,
.ap-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ap-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c9cdd1;
}

/* ── Lead story + latest ─────────────────────────────────────── */
.ap-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}
.ap-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.ap-feature-media { aspect-ratio: 16 / 8.5; }
.ap-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 26px;
}
.ap-feature-top { display: flex; align-items: center; gap: 12px; }
.ap-flag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ap-accent);
  padding: 4px 9px;
  border-radius: 999px;
}
.ap-feature h2 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 750;
}
.ap-feature .ap-excerpt { font-size: 0.95rem; }
.ap-feature:hover { border-color: transparent; box-shadow: 0 24px 48px -28px rgba(18, 20, 22, 0.35); }
.ap-feature:hover img { transform: scale(1.03); }
.ap-feature:hover h2 { color: var(--ap-accent); }

.ap-latest {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ap-latest-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-muted);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ap-ink);
}
.ap-latest ol {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-latest li { flex: 1 1 0; border-bottom: 1px solid var(--ap-line); }
.ap-latest li:last-child { border-bottom: 0; }
.ap-row {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  height: 100%;
  padding: 18px 0;
}
.ap-row-media { aspect-ratio: 1 / 1; border-radius: 10px; }
.ap-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-row h3 {
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 650;
  overflow-wrap: break-word;
}
.ap-row:hover h3 { color: var(--ap-accent); }
.ap-row:hover img { transform: scale(1.05); }

.ap-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-muted) !important;
}
.ap-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ap-line); }

/* ── Grid cards ──────────────────────────────────────────────── */
.ap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.ap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.ap-card-media { aspect-ratio: 16 / 10; }
.ap-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
}
.ap-card h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
  font-weight: 650;
  overflow-wrap: break-word;
}
.ap-card .ap-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0f1f2;
}
.ap-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(18, 20, 22, 0.38);
}
.ap-card:hover img { transform: scale(1.045); }
.ap-card:hover h3 { color: var(--ap-accent); }

/* ── Pagination ──────────────────────────────────────────────── */
.ap-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ap-line);
}
.ap-pager-nums { display: flex; align-items: center; gap: 6px; }
.ap-pager-num,
.ap-pager-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ap-ink);
  background: #fff;
  transition: border-color 0.2s, color 0.2s;
}
.ap-pager-step { padding: 0 16px; }
a.ap-pager-num:hover,
a.ap-pager-step:hover { border-color: var(--ap-ink); }
.ap-pager-num.is-active { background: var(--ap-ink); border-color: var(--ap-ink); color: #fff; }
.ap-pager-step.is-disabled { color: #c3c8cc; border-color: #f0f1f2; }
.ap-pager-gap { color: var(--ap-faint); padding: 0 2px; }

/* ── Empty state ─────────────────────────────────────────────── */
.ap-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 64px 20px;
  border: 1px dashed var(--ap-line);
  border-radius: var(--ap-radius);
  color: var(--ap-faint);
}
.ap-empty h2 { font-size: 1.2rem; }
.ap-empty p { max-width: 420px; color: var(--ap-muted); font-size: 0.92rem; }
.ap-btn {
  margin-top: 8px;
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ap-ink);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.88rem;
}
.ap-btn:hover { background: var(--ap-accent); }

/* ── Recommended products ─────────────────────────────────────── */
.ap-recs {
  margin-top: 64px;
  padding: 36px;
  background: var(--ap-soft);
  border-radius: 20px;
}
.ap-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.ap-section-head h2 {
  margin-top: 6px;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  letter-spacing: -0.025em;
  font-weight: 750;
}
.ap-link {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ap-ink) !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ap-link:hover { color: var(--ap-accent) !important; }

.ap-recs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.ap-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-radius: var(--ap-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 20, 22, 0.05);
  transition: transform 0.25s, box-shadow 0.25s;
}
.ap-product:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(18, 20, 22, 0.38); }
.ap-product-media { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.ap-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ap-product:hover .ap-product-media img { transform: scale(1.04); }
.ap-strain,
.ap-sale {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.ap-strain { left: 10px; background: #6d4bb8; }
.ap-strain--sativa { background: #d9751a; }
.ap-strain--hybrid { background: #0f8a67; }
.ap-sale { right: 10px; background: #d32f2f; }
.ap-product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  padding: 14px 16px 16px;
}
.ap-product h3 {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: break-word;
  min-height: 2.7em;           /* at least two lines, so short names still line up */
}
.ap-rating { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ap-faint); }
.ap-rating.is-empty { visibility: hidden; }
.ap-rating .stars { display: inline-flex; gap: 1px; letter-spacing: 0; }
.ap-rating .star { color: #e6e1d6; font-size: 0.86rem; line-height: 1; }
.ap-rating .star.filled,
.ap-rating .star.half { color: var(--star, #ff9100); }
.ap-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.ap-price { font-size: 0.98rem; font-weight: 750; color: var(--ap-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-product-cta { flex: 0 0 auto; font-size: 0.8rem; font-weight: 650; color: var(--ap-accent); }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ap-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .ap-search { max-width: 560px; }
  .ap-lead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ap-latest ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ap-latest li { border-bottom: 0; }
  .ap-row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; padding: 16px 0 0; }
  .ap-row-media { aspect-ratio: 16 / 10; }
  .ap-recs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ── Phone ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ap-hero { padding: 14px 0 20px; }
  .ap-crumbs ol { margin-bottom: 16px; font-size: 0.76rem; }
  .ap-hero h1 { margin-top: 6px; }
  .ap-lede { margin-top: 10px; font-size: 0.92rem; }
  .ap-search { padding: 4px; }
  .ap-search input { padding: 9px 8px 9px 38px; font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
  .ap-search-icon { left: 15px; }
  .ap-search button { padding: 9px 14px; font-size: 0.82rem; }
  .ap-stats { margin-top: 16px; gap: 6px 14px; font-size: 0.76rem; }
  .ap-stats li + li::before { margin-right: 8px; }
  .ap-stats li:last-child { display: none; }

  /* Chips run edge to edge and fade out, which reads as "scrolls". */
  .ap-topics .container { padding-left: 0; padding-right: 0; }
  .ap-chips, .ap-subchips { padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); scroll-padding: 0 var(--gutter, 16px); }
  .ap-chips { padding-top: 12px; padding-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ap-chip { padding: 7px 12px; font-size: 0.82rem; }

  .ap-body { padding-top: 18px; }
  .ap-toolbar { margin-bottom: 16px; }
  .ap-count { font-size: 0.8rem; }
  .ap-sort label { display: none; }
  .ap-sort select { font-size: 0.8rem; padding: 7px 30px 7px 12px; }

  .ap-lead { margin-bottom: 28px; }
  .ap-feature-media { aspect-ratio: 16 / 10; }
  .ap-feature-body { padding: 16px 16px 18px; gap: 10px; }
  .ap-feature .ap-excerpt { font-size: 0.88rem; }
  .ap-latest ol { display: flex; gap: 0; }
  .ap-latest li { border-bottom: 1px solid var(--ap-line); }
  .ap-row { grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0; }
  .ap-row-media { aspect-ratio: 1 / 1; }
  .ap-row h3 { font-size: 0.92rem; }
  .ap-row .ap-meta span:last-child,
  .ap-row .ap-meta .ap-dot:nth-of-type(2) { display: none; }

  .ap-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ap-card:hover { transform: none; }
  .ap-card-body { padding: 14px 16px 16px; }
  .ap-card h3 { font-size: 0.98rem; }

  .ap-pager { margin-top: 28px; padding-top: 18px; }
  .ap-pager-step span { display: none; }
  .ap-pager-step { padding: 0; width: 40px; }
  .ap-pager-num { min-width: 36px; height: 36px; padding: 0 8px; }

  .ap-recs { margin-top: 40px; padding: 22px 16px; border-radius: 16px; margin-left: calc(var(--gutter, 16px) * -1); margin-right: calc(var(--gutter, 16px) * -1); border-radius: 0; }
  .ap-section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .ap-link { font-size: 0.82rem; }
  .ap-recs-grid { gap: 10px; }
  .ap-product-body { padding: 10px 12px 12px; gap: 4px; }
  .ap-product h3 { font-size: 0.84rem; }
  .ap-rating { font-size: 0.7rem; }
  .ap-rating .star { font-size: 0.74rem; }
  .ap-product-foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ap-price { font-size: 0.86rem; }
  .ap-product-cta { display: none; }
  .ap-strain, .ap-sale { top: 8px; padding: 3px 8px; font-size: 0.62rem; }
  .ap-strain { left: 8px; }
  .ap-sale { right: 8px; }
}
@media (max-width: 360px) {
  .ap-search button { display: none; }        /* Enter submits; the field gets the full width */
  .ap-product-foot .ap-price { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ap *, .ap *::before, .ap *::after { transition: none !important; }
}