/**
 * [dbc_readers_also_liked_carousel] — horizontal book cards (cover, compact rating, title, authors)
 */

.dbc-readers-also-liked {
  --dbc-ral-accent: #f7ce69;
  --dbc-ral-cover-radius: 12px;
  --dbc-ral-cover-max-w: 155px;
  --dbc-ral-cover-max-h: 220px;
  --dbc-ral-font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--dbc-ral-font);
}

.dbc-readers-also-liked--empty .dbc-readers-also-liked__empty {
  margin: 0;
  padding: 1rem 0;
  color: #666;
  font-size: 0.9375rem;
}

/* Shell: prev/next match [dbc_authors_of_month] slim pills; vertically centered on cover only */
.dbc-readers-also-liked__carousel-root {
  width: 100%;
  max-width: 100%;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel.dbc-carousel--nav-align-cover {
  --dbc-carousel-nav-box: 28px;
  --dbc-carousel-accent: #6b7280;
  --dbc-ral-slide-w: min(var(--dbc-ral-cover-max-w, 155px), clamp(112px, 28vw, 140px));
  /* Match rendered cover box (155×220 max; scales down with slide width) */
  --dbc-ral-cover-height: min(
    var(--dbc-ral-cover-max-h, 220px),
    calc(var(--dbc-ral-slide-w) * (220 / 155))
  );
  /* Global track top padding (10px) + slide top pad (8px) when shelf bookmark is present */
  --dbc-carousel-nav-align-pad: 18px;
  align-items: flex-start;
  align-self: start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  height: fit-content;
  min-height: 0;
  flex-grow: 0;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel__rail {
  align-self: start;
  height: fit-content;
  min-height: 0;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav {
  position: relative;
  flex: 0 0 auto;
  width: var(--dbc-carousel-nav-box);
  min-width: var(--dbc-carousel-nav-box);
  height: 72px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  color: transparent;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
  transform: none;
  margin-top: calc(
    var(--dbc-carousel-nav-align-pad) + (var(--dbc-ral-cover-height) / 2) - 36px
  );
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--prev {
  margin-right: 8px;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--next {
  margin-left: 8px;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav::before,
.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav::after {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transform: none;
  pointer-events: none;
  transition: background-color 0.15s ease-out;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav::after {
  display: none;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e96a3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18 -6 -6 6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e96a3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6 -6 -6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:hover:not(:disabled),
.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:focus-visible:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:hover:not(:disabled)::before,
.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:focus-visible:not(:disabled)::before {
  background-size: 18px 18px;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--prev:hover:not(:disabled)::before,
.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--prev:focus-visible:not(:disabled)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18 -6 -6 6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--next:hover:not(:disabled)::before,
.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav--next:focus-visible:not(:disabled)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6 -6 -6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:focus-visible:not(:disabled) {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:active:not(:disabled) {
  background: rgba(107, 114, 128, 0.14);
}

.dbc-readers-also-liked__carousel-root .dbc-carousel--nav-align-cover .dbc-carousel-nav:disabled {
  background: rgba(0, 0, 0, 0.03);
  opacity: 0.35;
  cursor: not-allowed;
}

.dbc-readers-also-liked__track.dbc-carousel__track {
  gap: 28px;
  padding-bottom: 12px;
  --dbc-carousel-page-items: 2;
}

@media (min-width: 480px) {
  .dbc-readers-also-liked__track.dbc-carousel__track {
    --dbc-carousel-page-items: 3;
  }
}

@media (min-width: 768px) {
  .dbc-readers-also-liked__track.dbc-carousel__track {
    --dbc-carousel-page-items: 4;
  }
}

@media (min-width: 1024px) {
  .dbc-readers-also-liked__track.dbc-carousel__track {
    --dbc-carousel-page-items: 4;
  }

  /* ~1 fewer visible cards; cover width capped at 155px */
  .dbc-readers-also-liked__carousel-root .dbc-carousel.dbc-carousel--nav-align-cover {
    --dbc-ral-slide-w: min(var(--dbc-ral-cover-max-w, 155px), clamp(124px, 18vw, 176px));
    --dbc-ral-cover-height: min(
      var(--dbc-ral-cover-max-h, 220px),
      calc(var(--dbc-ral-slide-w) * (220 / 155))
    );
  }
}

@media (min-width: 1280px) {
  .dbc-readers-also-liked__carousel-root .dbc-carousel.dbc-carousel--nav-align-cover {
    --dbc-ral-slide-w: min(var(--dbc-ral-cover-max-w, 155px), clamp(128px, 15vw, 184px));
    --dbc-ral-cover-height: min(
      var(--dbc-ral-cover-max-h, 220px),
      calc(var(--dbc-ral-slide-w) * (220 / 155))
    );
  }
}

.dbc-readers-also-liked__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: var(
    --dbc-ral-slide-w,
    min(155px, clamp(112px, 28vw, 140px))
  );
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dbc-readers-also-liked__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
}

/* Cover + quick shelf overlay (dbc_quick_shelf_bookmark_overlay_html); match global carousel bookmark rules in style.css */
.dbc-readers-also-liked__bookmark-slot {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: var(--dbc-ral-cover-max-w, 155px);
  border-radius: 0 var(--dbc-ral-cover-radius) var(--dbc-ral-cover-radius) 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@supports selector(:has(a)) {
  .dbc-readers-also-liked__bookmark-slot {
    overflow: visible;
  }
}

.dbc-readers-also-liked__cover-link {
  display: block;
  max-width: var(--dbc-ral-cover-max-w, 155px);
  line-height: 0;
  text-decoration: none;
  border-radius: inherit;
  overflow: hidden;
}

.dbc-readers-also-liked__cover-link:focus-visible {
  outline: 2px solid #69aaff;
  outline-offset: 2px;
}

.dbc-readers-also-liked__img {
  display: block;
  width: 100%;
  max-width: var(--dbc-ral-cover-max-w, 155px);
  height: auto;
  aspect-ratio: 155 / 220;
  max-height: var(--dbc-ral-cover-max-h, 220px);
  object-fit: cover;
  border-radius: inherit;
}

.dbc-readers-also-liked__placeholder {
  display: block;
  width: 100%;
  max-width: var(--dbc-ral-cover-max-w, 155px);
  aspect-ratio: 155 / 220;
  max-height: var(--dbc-ral-cover-max-h, 220px);
  background: linear-gradient(135deg, #f0f0f0, #e2e2e2);
  border-radius: inherit;
}

/*
 * Horizontal scroll only: global .dbc-carousel__track:has(.dbc-bod-bookmark-wrap) sets
 * overflow-y: visible (ribbon clearance). With overflow-x: auto that often creates a vertical
 * scrollport inside the track. Shelf popup is portaled when fixed.
 * Do NOT use touch-action: pan-x or overscroll-behavior-y: none here — they trap vertical
 * wheel/trackpad so the document cannot scroll while hovering this strip.
 */
.dbc-readers-also-liked .dbc-readers-also-liked__track.dbc-carousel__track {
  overflow-x: auto;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
}

.dbc-readers-also-liked .dbc-carousel.dbc-carousel--no-scroll .dbc-readers-also-liked__track.dbc-carousel__track,
.dbc-readers-also-liked .dbc-carousel.dbc-carousel--no-scroll .dbc-carousel__rail:not(:has(> .dbc-carousel__track)) {
  overscroll-behavior: auto !important;
  overflow-y: hidden !important;
}