/* jdtheme26 - load-more button of product lists + swipe cues of sideways product rows (2026-10-07).
   Markup: inc/jd-load-more.php. Scripts: assets/js/jd-load-more.js, assets/js/jd-row-cue.js. The button is a real link to the next page (works without script). */

/* ---- load-more button ---- */
.jd-lm { display: flex; flex-direction: column; align-items: center; gap: var(--jd-space-xs); margin: var(--jd-space-m) 0 var(--jd-space-s); }
/* is-done: only the screen-reader status is left */
.jd-lm.is-done { margin: 0; }
.jd-lm__btn { width: 100%; max-width: 420px; justify-content: center; }
.jd-lm__btn[aria-busy="true"] { opacity: .7; cursor: progress; pointer-events: none; }
.jd-lm__btn.has-error { --jd-btn-bg: #fdebed; --jd-btn-bg-hover: #fbd9dd; }
.jd-lm__prev { margin: 0 0 var(--jd-space-xs); text-align: center; }
.jd-lm__prev a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--jd-space-s); color: var(--jd-ink-900, #3b2a1f); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jd-lm__prev a:hover,
.jd-lm__prev a:focus { color: var(--jd-ink-900, #3b2a1f); }
.jd-lm__prev a:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; border-radius: 6px; }
/* the landing rows are sideways rows: no previous-page link above them is needed, the row never shows page 2+ */

/* script on: the numbered pager stays in the HTML for crawlers but is not shown (the script also makes it inert); script off: numbers + the next-page link both work.
   The landing rows (page 1 of /pet-toys/, /dog-food/) keep their numbered pager: they have no button. */
html.jd-lm-js body.jd-lm-page:not(.jd-lm-landing) .wd-loop-footer .wd-pagination {
  position: absolute;   /* visually-hidden utility */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- landing row: last card (see all, N items) ---- */
.jd-lm-all {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: var(--jd-space-s);
  border: 1px solid var(--jd-card-border);
  border-radius: var(--jd-card-radius);
  background: var(--jd-cream-50, #fbf6ec);
  box-shadow: var(--jd-card-shadow);
  color: var(--jd-ink-900, #3b2a1f);
  text-align: center;
}
.jd-lm-all__num { font-family: var(--jd-font-en, "Baloo 2", sans-serif); font-size: clamp(34px, 9vw, 52px); font-weight: 700; line-height: 1; }
.jd-lm-all__txt { font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.jd-lm-all__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jd-lm-all__go .jd-btn__icon svg { width: 18px; height: 18px; }
.jd-lm-all,
[data-jd-row] > :last-child { margin-right: var(--jd-bleed, 0px); }   /* the last card ends at the gutter, not flush with the screen edge */
.jd-lm-all:hover,
.jd-lm-all:focus { color: var(--jd-ink-900, #3b2a1f); }
.jd-lm-all:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }
@media (hover: hover) {
  .jd-lm-all:hover .jd-btn__icon { transform: translateX(3px); }
  .jd-lm-all .jd-btn__icon { transition: transform .2s ease; }
}

/* ---- slim progress bar under a sideways row (landing grids) ---- */
.jd-lm-progress { position: relative; height: 4px; margin: 2px auto var(--jd-space-xs); width: min(240px, 60%); border-radius: 4px; background: var(--jd-cream-200, #eadfcc); }
.jd-lm-progress[hidden] { display: none; }
.jd-lm-progress > span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 4px; background: var(--jd-ink-700, #5c4a3c); }

/* ---- swipe cues: pill label above the row, soft edge on the right, one-time nudge ---- */
.jd-cue-pill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  color: var(--jd-ink-700, #5c4a3c);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  transition: opacity .4s ease;
}
.jd-cue-pill__spark { width: 12px; height: 12px; background: var(--btn-accented-bgcolor, #fde794); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }   /* the yellow four-point spark of the home headings */
.jd-cue-pill .jd-btn__icon { display: inline-grid; place-items: center; transition: none; }
.jd-cue-pill .jd-btn__icon svg { width: 16px; height: 16px; }
.jd-cue-pill[hidden] { display: none; }
.jd-cue-pill.is-gone { opacity: 0; }
html.jd-cue-done .jd-cue-pill { display: none; }
.jd-cue-pill:not(.is-on) { visibility: hidden; }   /* space is reserved from the first paint; the script shows it only for a row that really overflows */
.jd-cue-pill.is-on .jd-btn__icon { animation: jd-cue-arrow 1.6s ease-in-out 3; }
@keyframes jd-cue-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.jd-cue-host { position: relative; }
.jd-cue-fade {
  position: absolute;
  right: calc(-1 * var(--jd-bleed, 0px));
  width: 28px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--jd-swipe-bg, var(--paper-color, var(--jd-page-bg, #fcfbfb))));
  opacity: 1;
  transition: opacity .25s ease;
}
.jd-cue-fade.is-end { opacity: 0; }
.jd-df-hot { --jd-swipe-bg: var(--jd-df-fill); }   /* the dog-food panel's own fill (the pet-toys panel uses --paper-color) */

@media (prefers-reduced-motion: reduce) {
  .jd-cue-pill { transition: none; }
  .jd-cue-pill.is-on .jd-btn__icon { animation: none; }
  .jd-cue-fade { transition: none; }
}

/* ---- placeholder cards shown between the tap and the arrival of the real cards (same size as a card, no motion) ---- */
.jd-lm-skel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--jd-card-border); border-radius: var(--jd-card-radius); background: var(--jd-card-bg, #fff); box-shadow: var(--jd-card-shadow); }
.jd-lm-skel__img { display: block; aspect-ratio: 1; border-radius: 12px; background: var(--jd-cream-100, #f5ecdd); }
.jd-lm-skel__line { display: block; height: 14px; border-radius: 7px; background: var(--jd-cream-100, #f5ecdd); }
.jd-lm-skel__line--s { width: 55%; }