/* ==========================================================================
   "Shop Your Room" product-picks page. Every number was measured from the live
   page's computed styles (1440px, 800px and 390px viewports).
   ========================================================================== */

.jth-picks {
  font-family: "Windsor", Georgia, serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--jth-ink);
}
.jth-picks h1, .jth-picks p { margin: 0; }

/* The old builder's container: 1170 / 970 / 750, full width with 15px gutters on phones. */
.jp-wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30px 15px 100px;
}
@media (min-width: 768px)  { .jp-wrap { width: 750px; } }
@media (min-width: 992px)  { .jp-wrap { width: 970px; } }
@media (min-width: 1200px) { .jp-wrap { width: 1170px; } }

.jth-picks .jp-title {
  margin-bottom: 16px;
  text-align: center;
  font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--jth-ink); /* Kadence colours headings itself, a few shades off the site's ink */
}

/* 4-up grid; 30px gutters, 60px between rows (a row is as tall as its tallest note). */
.jp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 60px;
}
.jp-item { min-width: 0; }
.jp-item__img { display: block; }
.jp-item__img img {
  display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.jp-item__text { padding: 10px 0; }
.jth-picks .jp-item__text p { margin: 0 0 16px; }
.jth-picks .jp-item__text p:last-child { margin-bottom: 0; }
.jth-picks .jp-item__text a { color: #4E5D7A; text-decoration: none; font-weight: 700; }
.jth-picks .jp-item__text strong, .jth-picks .jp-item__text b { font-weight: 700; }
/* A bold inline box can nudge its line taller by a pixel; keep the paragraph's 24px rhythm. */
.jth-picks .jp-item__text a, .jth-picks .jp-item__text strong, .jth-picks .jp-item__text b { line-height: 1; }

/* Phones: one column, 36px heading, 20px of air above and below each pick. */
@media (max-width: 767px) {
  .jth-picks .jp-title { font-size: 36px; line-height: 36px; letter-spacing: normal; margin-bottom: 36px; }
  .jp-grid { grid-template-columns: 1fr; row-gap: 0; }
  .jp-item { padding: 20px 0; }
  /* live keeps the original groups of four apart by 100px even when stacked */
  .jp-item:nth-child(4n+1):nth-child(n+5) { margin-top: 100px; }
}