/* Full width: the hero and the Instagram feed run edge to edge. Content
   width comes from .home-wrap inside each section, the rhythm from .home-section, so a
   section that renders nothing (no premium listings, no magazine posts) costs no space. */
.home-layout {
  --home-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
  flex: 1;
}

.home-layout:focus {
  outline: none;
}

.home-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

.home-section {
  padding: 56px 0;
}

/* The ad slots between the sections (ads.css). Each one takes the rhythm on the side where
   its neighbour has none of its own, and collapses with it when the slot stays unsold. */
.home-body {
  position: relative;
}

.home-body > .pdp-ad {
  --home-ad-gap: 56px;

  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-desktop);
}

.home-body > .pdp-ad-bb,
.home-body > .pdp-ad-incontent-2 {
  margin-top: var(--home-ad-gap);
}

.home-body > .pdp-ad-incontent-1 {
  margin-bottom: var(--home-ad-gap);
}

/* Shaped like the content container, which is what the rails in ads.css measure from. */
.home-ad-rails {
  position: absolute;
  inset: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  pointer-events: none;
}

/* The magazine's bottom padding: the skyscraper comes to rest where the content ends. */
.home-ad-rails .pdp-ad-rail {
  bottom: 56px;
}

.skip-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Desktop fills the viewport below the header, so the search is always in view: a 16:9 box
   pushes it below the fold from 1920 up. 147px is the desktop header (fixed-height rows).
   The floor keeps the content from overflowing on very short windows. */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100vh - 147px - var(--home-hero-ads-reserve, 0px));
  height: calc(100svh - 147px - var(--home-hero-ads-reserve, 0px));
  min-height: 480px;
  background: #111;
  color: #fff;
}

/* symplr's sticky footer covers the bottom of the viewport from 768 up: a 90px creative plus
   5px padding above and below. The hero ends above it, sold or not, so nothing shifts. */
html:not(.ads-unavailable) .home-hero-ads {
  --home-hero-ads-reserve: 100px;
}

.home-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.home-hero-poster,
.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fades in over the poster once it actually plays, so a slow start never shows black. */
.home-hero-video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.home-hero-video.is-playing {
  opacity: 1;
}

.home-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.22) 100%);
}

.home-hero-in {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 88px var(--padding-desktop) 56px;
}

.home-hero-col {
  max-width: 760px;
}

.home-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}

.home-hero-title {
  margin-bottom: 12px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: #fff;
}

.home-hero-sub {
  max-width: 560px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #e6e6e6;
}

.home-hero-search {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.home-hero-select,
.home-hero-input {
  width: 100%;
  height: 56px;
  border: 2px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background-color: #fff;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text);
}

.home-hero-select {
  padding: 0 40px 0 16px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2361646B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  text-overflow: ellipsis;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .home-hero-select:hover {
    border-color: var(--color-primary);
  }
}

.home-hero-input {
  padding: 0 16px;
}

/* A search input draws its own clear button and, in Safari, a rounded inset look. */
.home-hero-input::-webkit-search-decoration,
.home-hero-input::-webkit-search-cancel-button {
  appearance: none;
}

.home-hero-field {
  position: relative;
}

.home-hero-typing {
  position: absolute;
  inset: 0 18px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-placeholder);
  pointer-events: none;
}

.home-hero-typing[hidden] {
  display: none;
}

.home-hero-caret {
  flex: 0 0 auto;
  width: 2px;
  height: 20px;
  margin-left: 2px;
  background: var(--color-primary);
  animation: home-hero-caret 1s step-end infinite;
}

@keyframes home-hero-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.home-hero-submit {
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary-strong);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

/* Press feedback answers the finger on touch, where the hover states above never show. */
.home-hero-submit,
.home-hero-toggle {
  transition: background 0.2s, transform 0.16s var(--home-ease-out);
}

:is(.home-hero-submit, .home-hero-toggle, .home-cats-toggle, .home-premium-btn:not([aria-disabled="true"]), .home-latest-more, .home-seller-btn):active {
  transform: scale(0.97);
}

.home-cats-btn:not([aria-disabled="true"]):active {
  transform: translateY(-50%) scale(0.97);
}

.home-listing-watch:active .home-listing-watch-icon {
  transform: scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
  .home-hero-submit:hover {
    background: var(--color-primary-strong-hover);
  }
}

.home-hero :is(.home-hero-select, .home-hero-input, .home-hero-submit, .home-hero-toggle):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.home-hero-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

/* In the footage's corner, away from the search, so it labels the video without competing. */
.home-hero-ai {
  right: 16px;
  bottom: 16px;
}

.home-hero-ai .home-ai-tip {
  right: 0;
  left: auto;
}

.home-hero-ai .home-ai-tip::after {
  right: 16px;
  left: auto;
}

/* The top of the footage can be as light as the white ring; the dark gap keeps it visible. */
.home-hero-toggle:focus-visible {
  box-shadow: 0 0 0 2px #111;
}

.home-hero-toggle[hidden] {
  display: none;
}

.home-hero-toggle-play,
.home-hero-toggle.is-paused .home-hero-toggle-pause {
  display: none;
}

.home-hero-toggle.is-paused .home-hero-toggle-play {
  display: block;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.home-section-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--color-text-dark);
}

.home-cats {
  position: relative;
}

/* A plain scroller until the carousel script takes over and moves the list itself. */
.home-cats-viewport {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  scrollbar-width: none;
}

.home-cats-viewport::-webkit-scrollbar {
  display: none;
}

.is-ready .home-cats-viewport {
  overflow: hidden;
}

@media (pointer: fine) {
  .is-ready .home-cats-viewport {
    cursor: grab;
  }

  .is-ready .home-cats-viewport:active,
  .is-ready .home-cats-viewport:active a {
    cursor: grabbing;
  }
}

/* Spacing as slide padding, not gap: Embla takes the gap at the loop seam from the last
   slide's box only, so a CSS gap would leave the end and the start touching. */
.home-cats-track {
  display: flex;
  margin: 0 0 0 -16px;
  padding: 0;
  list-style: none;
}

/* Only once Embla handles the drag: before that the viewport is a plain scroller, and this
   would forbid the horizontal swipe it needs. */
.is-ready .home-cats-track {
  touch-action: pan-y pinch-zoom;
}

.home-cat {
  flex: 0 0 26%;
  min-width: 0;
  padding-left: 16px;
}

.home-cat-link {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  text-decoration: none;
}

/* Inside, because the track clips anything drawn outside the tile. */
.home-cat-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.home-cat-tile {
  align-items: flex-end;
  background: var(--color-footer-bg);
  transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-cat-tile:hover {
    opacity: 0.93;
  }
}

.home-cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* A missing photo leaves the dark tile with its name, not the shop-wide placeholder. */
.home-cat-img.is-image-fallback {
  display: none;
}

.home-cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.04) 100%);
}

.home-cat-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 46%;
  /* overflow: hidden on the tile does not clip a backdrop-filter to its rounded corners. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.9) 38%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.9) 38%, transparent 100%);
}

.home-cat-name {
  position: relative;
  z-index: 2;
  padding: 0 18px 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

.home-cat-promo {
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  background: var(--color-footer-bg);
}

@media (hover: hover) and (pointer: fine) {
  .home-cat-promo:hover {
    background: var(--color-footer-darker);
  }
}

.home-cat-promo-logo {
  width: 88px;
  height: auto;
}

.home-cat-promo-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-cat-promo-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.home-cats-btn,
.home-cats-toggle,
.home-premium-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.16s var(--home-ease-out);
}

.home-cats-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.home-cats-btn-prev {
  left: 12px;
}

.home-cats-btn-next {
  right: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .home-cats-btn:hover,
  .home-cats-toggle:hover,
  .home-premium-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
  }
}

.home-cats-btn[aria-disabled="true"],
.home-premium-btn[aria-disabled="true"] {
  opacity: 0.3;
  border-color: var(--color-border);
  color: var(--color-text-dark);
  box-shadow: none;
  cursor: default;
}

.home-cats-btn:focus-visible,
.home-cats-toggle:focus-visible,
.home-premium-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-cats-toggle {
  flex: 0 0 auto;
}

.home-cats-btn[hidden],
.home-cats-toggle[hidden],
.home-premium-btn[hidden] {
  display: none;
}

.home-cats-toggle-play,
.home-cats-toggle.is-paused .home-cats-toggle-pause {
  display: none;
}

.home-cats-toggle.is-paused .home-cats-toggle-play {
  display: block;
}

.home-section.home-premium,
.home-section.home-latest {
  padding-top: 0;
}

.home-premium-nav {
  display: flex;
  gap: 8px;
}

/* A plain scroller until the carousel script takes over and moves the list itself. */
.home-premium-viewport {
  overflow-x: auto;
  scrollbar-width: none;
}

.home-premium-viewport::-webkit-scrollbar {
  display: none;
}

.is-ready .home-premium-viewport {
  overflow: hidden;
}

.home-premium-list {
  display: flex;
  margin: 0 0 0 -16px;
  padding: 0;
  list-style: none;
}

.is-ready .home-premium-list {
  touch-action: pan-y pinch-zoom;
}

.home-premium-item {
  flex: 0 0 25%;
  min-width: 0;
  padding-left: 16px;
}

/* Inside the card: the viewport clips anything drawn outside it. */
.home-premium .home-listing:has(.home-listing-link:focus-visible) {
  outline-offset: -2px;
}

.home-latest-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-listing {
  position: relative;
  height: 100%;
  padding: 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-listing:hover {
    border-color: var(--color-border-strong);
  }
}

.home-listing-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.home-listing-media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-border-light);
}

.home-listing-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-listing-img.is-image-fallback,
.home-mag-img.is-image-fallback {
  display: none;
}

.home-listing-placeholder {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: auto;
  transform: translate(-50%, -50%);
}

.home-listing-media:not(:has(.home-listing-img:not(.is-image-fallback))),
.home-mag-media:not(:has(.home-mag-img:not(.is-image-fallback))) {
  background: var(--color-footer-bg);
}

.home-listing-media:not(:has(.home-listing-img:not(.is-image-fallback))) .home-listing-placeholder,
.home-mag-media:not(:has(.home-mag-img:not(.is-image-fallback))) .home-listing-placeholder {
  display: block;
}

.home-listing-watch {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.home-listing-watch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-listing-watch:hover .home-listing-watch-icon {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
  }
}

.home-listing-watch.is-noted {
  color: var(--color-primary);
}

.home-listing-watch.is-noted svg {
  fill: currentColor;
}

.home-listing-watch:disabled {
  cursor: default;
}

.home-listing-watch:focus-visible {
  outline: none;
}

.home-listing-watch:focus-visible .home-listing-watch-icon {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-listing-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 6px 6px;
}

/* Above the cover, so the title link takes the pointer here. */
.home-listing-head {
  position: relative;
  z-index: 2;
}

.home-listing-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
  color: var(--color-text-dark);
}

/* Both lines are always reserved, so price and place line up across the row. */
.home-listing-premium .home-listing-title {
  min-height: 2.5em;
}

.home-listing-link {
  color: inherit;
  text-decoration: none;
}

.home-listing-link:focus-visible {
  outline: none;
}

/* The ring goes round the whole card: the title alone would read as a text link. */
.home-listing:has(.home-listing-link:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-listing-price {
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-dark);
}

.home-listing-price-type {
  color: var(--color-primary-text);
}

.home-listing-meta {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.home-listing-meta svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.home-listing-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text);
}

.home-listing-verified svg {
  flex: 0 0 auto;
  color: var(--color-primary);
}

.home-listing-compact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.home-listing-compact .home-listing-media {
  flex: 0 0 42%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

.home-listing-compact .home-listing-placeholder {
  width: 64px;
}

.home-listing-compact .home-listing-watch-icon {
  width: 28px;
  height: 28px;
}

.home-listing-compact .home-listing-watch-icon svg {
  width: 16px;
  height: 16px;
}

.home-listing-compact .home-listing-body {
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  padding: 0;
}

.home-listing-compact .home-listing-title {
  font-size: var(--font-size-md);
  line-height: 1.35;
  letter-spacing: 0;
}

.home-listing-compact .home-listing-price {
  font-size: var(--font-size-lg);
}

.home-listing-compact .home-listing-meta {
  gap: 5px;
  font-size: var(--font-size-xs);
}

.home-listing-compact .home-listing-meta svg {
  width: 13px;
  height: 13px;
  margin-top: 1px;
}

.home-latest-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-latest-more:hover {
    border-color: var(--color-primary-text);
    color: var(--color-primary-text);
  }
}

.home-latest-more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-primary-text);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .home-section-link:hover {
    text-decoration: underline;
  }
}

.home-section-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-section.home-magazine {
  padding-top: 0;
}

.home-magazine .home-section-head {
  flex-wrap: wrap;
  align-items: baseline;
}

.home-mag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-mag-lead {
  grid-row: span 2;
}

/* Fewer than three posts leave no second row for the lead to span. */
.home-mag-list:not(:has(> li:nth-child(3))) .home-mag-lead {
  grid-row: auto;
}

.home-mag-list:has(> li:only-child) .home-mag-lead {
  grid-column: 1 / -1;
}

.home-mag-card {
  position: relative;
  display: flex;
  gap: 12px;
  height: 100%;
  padding-right: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-mag-card:hover {
    border-color: var(--color-border-strong);
  }
}

.home-mag-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.home-mag-media {
  position: relative;
  flex: 0 0 44%;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
  background: var(--color-border-light);
}

.home-mag-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-mag-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 0;
}

.home-mag-date {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.home-mag-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  color: var(--color-text-dark);
}

.home-mag-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 0;
  font-size: var(--font-size-md);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.home-mag-title-link {
  color: inherit;
  text-decoration: none;
}

.home-mag-title-link:focus-visible {
  outline: none;
}

.home-mag-card:has(.home-mag-title-link:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-mag-lead .home-mag-card {
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.home-mag-lead .home-mag-media {
  flex: 1 1 240px;
  min-height: 200px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.home-mag-lead .home-mag-body {
  justify-content: flex-start;
  gap: 8px;
  padding: 20px;
}

.home-mag-lead .home-mag-title {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

/* Held to the content width rather than running edge to edge: the skyscrapers beside the
   content (ads.css) would otherwise cover it. Full-bleed again on the phone, like every card. */
.home-seller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: calc(100% - 2 * var(--padding-desktop));
  max-width: calc(var(--max-width) - 2 * var(--padding-desktop));
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1a1a1a;
  color: #fff;
}

.home-seller-media {
  position: relative;
  order: 2;
  min-height: 470px;
  background: #111;
}

.home-seller-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
}

.home-ai {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: default;
}

.home-ai:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-ai-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  display: none;
  padding: 7px 11px;
  border-radius: 10px;
  background: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.home-ai-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}

.home-ai:hover .home-ai-tip,
.home-ai:focus .home-ai-tip {
  display: block;
}

.home-seller-ai {
  bottom: 10px;
  left: 10px;
}

.home-seller-text {
  align-self: center;
  padding: 72px 64px;
}

.home-seller-title {
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.home-seller-lead {
  max-width: 460px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.55;
  color: #c6c6c6;
}

.home-seller-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-bottom: 24px;
  padding: 0 28px;
  border-radius: var(--radius-md);
  background: var(--color-primary-strong);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, transform 0.16s var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-seller-btn:hover {
    background: var(--color-primary-strong-hover);
  }
}

.home-seller-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-seller-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
}

.home-seller-point {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--color-footer-text);
}

.home-benefits-title {
  margin-bottom: 16px;
}

.home-benefits-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 48px;
}

.home-benefits-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

.home-benefit-figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
}

.home-benefit-figure-icon {
  margin-bottom: 8px;
  color: var(--color-primary);
}

.home-benefit-figure-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-benefit-figure-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dark);
}

.home-benefit-figure-label,
.home-benefit-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-dark);
}

.home-benefits-points {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.home-benefit-point {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.home-benefit-point:first-child {
  padding-top: 0;
  border-top: 0;
}

.home-benefit-point:last-child {
  padding-bottom: 0;
}

.home-benefit-point .home-chevrons {
  position: relative;
  top: -1px;
}

.home-benefit-point .home-benefit-title {
  margin-bottom: 4px;
}

.home-benefit-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.home-chevrons {
  flex: 0 0 auto;
  color: var(--color-primary);
}

.home-link-chevron {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.home-section-link {
  gap: 6px;
}

@media (hover: hover) and (pointer: fine) {
  :is(.home-latest-more, .home-section-link):hover .home-link-chevron {
    transform: translateX(2px);
  }
}

/* The section above already ends on the rhythm's padding. */
.home-section.home-seo {
  padding-top: 0;
}

.home-seo-text {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-text);
}

.home-seo-text h2 {
  margin: 32px 0 8px;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--color-text-dark);
}

.home-seo-text h3 {
  margin: 24px 0 6px;
  font-size: var(--font-size-lg);
  line-height: 1.35;
  color: var(--color-text-dark);
}

.home-seo-text > :first-child {
  margin-top: 0;
}

.home-seo-text p,
.home-seo-text ul,
.home-seo-text ol {
  margin-bottom: 12px;
}

.home-seo-text ul,
.home-seo-text ol {
  padding-left: 1.25em;
}

.home-seo-text a {
  color: var(--color-primary-text);
}

/* The wrap follows the navigation tier: the side padding shrinks together with the
   header, as in the design. */
@media (max-width: 1200px) {
  .home-wrap,
  .home-body > .pdp-ad {
    padding: 0 var(--padding-mobile);
  }

  .home-section {
    padding: 40px 0;
  }

  .home-body > .pdp-ad {
    --home-ad-gap: 40px;
  }

  /* 4:3, but never past the fold below the 61px tablet header (53px from 768 down); the
     content may still push the hero taller. */
  .home-hero {
    height: min(75vw, calc(100svh - 61px - var(--home-hero-ads-reserve, 0px)));
    min-height: min-content;
  }

  .home-hero-in {
    padding: 56px var(--padding-mobile) 40px;
  }

  .home-cat {
    flex-basis: 42%;
  }

  .home-premium-item {
    flex-basis: calc(100% / 3);
  }

  .home-latest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-listing-compact .home-listing-media {
    flex-basis: 36%;
  }

  .home-mag-lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .home-mag-lead .home-mag-card {
    flex-direction: row;
  }

  .home-mag-lead .home-mag-media {
    flex: 0 0 46%;
    min-height: 300px;
    border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
  }

  .home-mag-lead .home-mag-body {
    justify-content: center;
    padding: 24px;
  }

  .home-mag-lead .home-mag-excerpt {
    -webkit-line-clamp: 3;
  }

  .home-mag-lead .home-mag-title {
    -webkit-line-clamp: 3;
  }

  .home-mag-item:not(.home-mag-lead) .home-mag-card {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .home-mag-item:not(.home-mag-lead) .home-mag-media {
    flex: none;
    aspect-ratio: 2 / 1;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }

  .home-mag-item:not(.home-mag-lead) .home-mag-body {
    justify-content: flex-start;
    padding: 16px;
  }

  .home-seller {
    width: calc(100% - 2 * var(--padding-mobile));
  }

  .home-seller-text {
    padding: 52px 32px;
  }

  .home-benefits-grid {
    column-gap: 32px;
  }
}

@media (max-width: 992px) {
  .home-hero-col {
    max-width: none;
  }

  /* The search spans the full width from here: the label moves to the top, in the corner
     opposite the pause button so the two do not read as one control. */
  .home-hero-ai {
    top: 25px;
    right: auto;
    bottom: auto;
    left: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.45);
  }

  .home-hero-ai .home-ai-tip {
    top: calc(100% + 9px);
    right: auto;
    bottom: auto;
    left: 0;
  }

  .home-hero-ai .home-ai-tip::after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 16px;
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
  }
}

@media (max-width: 768px) {
  .home-section {
    padding: 48px 0;
  }

  .home-section.home-categories {
    padding-top: 32px;
  }

  .home-body > .pdp-ad {
    --home-ad-gap: 48px;
  }

  /* The footage gets the space above the content instead of lying behind it, so the car at
     the middle of the frame stays visible and the text sits on the plain dark ground. */
  .home-hero {
    height: min(calc(100svh - 53px), 640px);
  }

  .home-hero-media {
    position: relative;
    inset: auto;
    flex: 1 0 64px;
  }

  .home-hero-media::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.3) 55%, #111 100%);
  }

  .home-hero-in {
    margin-top: -40px;
    padding: 0 var(--padding-mobile) 24px;
  }

  /* Back to the footage's bottom corner, now the video's own block; 52px clears the 40px the
     content above reaches into it. */
  .home-hero-ai {
    top: auto;
    right: 16px;
    bottom: 52px;
    left: auto;
  }

  .home-hero-ai .home-ai-tip {
    top: auto;
    right: 0;
    bottom: calc(100% + 9px);
    left: auto;
  }

  .home-hero-ai .home-ai-tip::after {
    top: 100%;
    right: 16px;
    bottom: auto;
    left: auto;
    border-top-color: #1a1a1a;
    border-bottom-color: transparent;
  }

  .home-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.5px;
  }

  .home-hero-title {
    font-size: 30px;
    letter-spacing: -0.2px;
  }

  .home-hero-sub {
    font-size: 14px;
  }

  .home-hero-search {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-hero-submit {
    width: 100%;
  }

  .home-cats-track {
    margin-left: -12px;
  }

  .home-cat {
    flex-basis: 72%;
    padding-left: 12px;
  }

  .home-cat-name {
    font-size: 16px;
  }

  .home-cat-promo {
    gap: 8px;
    padding: 12px;
  }

  .home-cat-promo-logo {
    width: 70px;
  }

  .home-cat-promo-title {
    font-size: 14px;
  }

  /* Runs to the screen edge, so the next card reads as scrollable rather than cut off. */
  .home-premium-viewport {
    margin: 0 calc(var(--padding-mobile) * -1);
  }

  .home-premium-list {
    margin-left: 0;
  }

  .home-premium-item {
    flex-basis: 78%;
    padding-left: var(--padding-mobile);
  }

  /* Embla stops the last slide at the viewport edge; its padding keeps the gutter there. */
  .home-premium-item:last-child {
    flex-basis: calc(78% + var(--padding-mobile));
    padding-right: var(--padding-mobile);
  }

  /* Rows that run edge to edge, like full-width cards. */
  .home-latest-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 calc(var(--padding-mobile) * -1);
  }

  .home-latest-item .home-listing {
    padding: 12px var(--padding-mobile);
    border-width: 1px 0 0;
    border-radius: 0;
  }

  .home-latest-item:last-child .home-listing {
    border-bottom-width: 1px;
  }

  .home-listing-compact .home-listing-media {
    flex-basis: min(36%, 160px);
  }

  .home-listing-compact .home-listing-meta {
    font-size: var(--font-size-sm);
  }

  .home-latest-item .home-listing:has(.home-listing-link:focus-visible) {
    outline-offset: -2px;
  }

  .home-latest-more {
    margin-top: 24px;
  }

  .home-mag-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-mag-item .home-mag-card,
  .home-mag-item:not(.home-mag-lead) .home-mag-card {
    flex-direction: row;
    gap: 12px;
    padding: 0 12px 0 0;
  }

  .home-mag-item .home-mag-media,
  .home-mag-item:not(.home-mag-lead) .home-mag-media {
    flex: 0 0 38%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
  }

  .home-mag-item .home-mag-body,
  .home-mag-item:not(.home-mag-lead) .home-mag-body {
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
  }

  .home-mag-title {
    -webkit-line-clamp: 3;
  }

  /* The lead keeps its photo on top, so the section does not read as more listing rows. */
  .home-mag-lead .home-mag-card {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .home-mag-lead .home-mag-media {
    flex: none;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }

  .home-mag-lead .home-mag-body {
    padding: 12px 16px 16px;
  }

  .home-mag-lead .home-mag-title {
    font-size: 20px;
    line-height: 1.3;
  }

  .home-mag-excerpt {
    display: none;
  }

  .home-seller {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    border-radius: 0;
  }

  .home-seller-media {
    order: 0;
    min-height: 260px;
  }

  .home-seller-text {
    padding: 30px var(--padding-mobile) 34px;
  }

  .home-seller-title {
    font-size: 24px;
  }

  .home-seller-btn {
    display: flex;
    height: 48px;
  }

  .home-benefits-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-benefits-figures {
    gap: 12px;
  }

  .home-benefit-figure {
    padding: 16px;
  }

  .home-benefit-figure-value {
    font-size: 28px;
    letter-spacing: -0.2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-caret {
    animation: none;
  }

  .home-hero-submit,
  .home-hero-toggle,
  .home-cat-tile,
  .home-cats-btn,
  .home-cats-toggle,
  .home-premium-btn,
  .home-listing,
  .home-listing-watch-icon,
  .home-latest-more,
  .home-mag-card,
  .home-seller-btn,
  .home-link-chevron {
    transition: none;
  }
}