/* =====================================================================
   jdtheme26 - /pet-toys/ designed layout, page 1 only (inc/jd-pet-toys-page.php; pass 3 2026-10-07 = built like the operator's reference picture,
   handoffs/2026-10-07-frontend-pet-toys-pass3-match-reference.md).
   Same vocabulary as the home page and the other category landings: .paper-edge panels (paper-edge.css), home headings (jd-home-title.css),
   .jd-card tokens (jd-product-card.css), pill buttons .jd-btn (jd-button.css), spacing tokens of jd-layout.css. Running text keeps the site
   standard (jd-typography.css) - nothing here sets font-size / line-height on body copy.
   Page order (pass 4, 2026-10-07, shopping first): hero -> ONE play-style chooser -> popular row (carousel) -> heading + the shop's own product grid (sort bar, cards,
   pagination are not styled here) -> safe-use guide -> [store card | FAQ] -> 8-category icon strip.
   Art = <img> or an empty .jd-pt-art--missing placeholder (picture not delivered yet). PAINTED art (hero scene, toy blobs, storefront) carries its own colour field: no CSS fill behind it. Transparent cut-outs (resting dog) sit on their panel; the 8
   icons of the strip sit in a pastel organic field drawn here (tones below).
   Fade-in: data-jd-reveal on the blocks, headings reveal through the shared .jd-home-head rule; the hero is the first screen and is never hidden.
   Card blocks carry .jd-pt-cardblock (jd-card-compare.js hides the LINE button while one is on screen, like the product grid).
   Breakpoints: phone <= 767, tablet 768-1024, desktop >= 1025 (the 4-up play band from 1280).
   ===================================================================== */

.jd-pt {
  --jd-pt-max: 1440px;
  --jd-pt-gap: var(--jd-space-m);
  --jd-pt-wrap-pad: 0px;   /* the container's own 15px gutters already match the shop grid */
  --jd-pt-anchor-offset: 140px;   /* header + category bar stack height, so a jump target is never hidden under the sticky stack */
  --jd-pt-eyebrow-color: #e2d4c8;   /* the home category band's English line */
  --jd-pt-tone-green: #eef5ee;
  --jd-pt-tone-pink: #fbeaea;
  --jd-pt-tone-sand: #f8f0e1;
  --jd-pt-tone-blue: #e9f1f6;
  --jd-pt-tone-lilac: #f1ecf8;
  --jd-pt-tone-peach: #fdeedd;
  /* the four chooser blocks: very light fills (about 65% of the icon-field tones, was the full tone) */
  --jd-pt-pick-green: #f2f8f2;
  --jd-pt-pick-pink: #fdeff0;
  --jd-pt-pick-sand: #faf4e5;
  --jd-pt-pick-lilac: #f6f1fb;
  --jd-pt-block-gap: var(--jd-space-l);   /* space between two blocks of the page */
  --jd-pt-col-gap: var(--jd-space-m);
  --jd-pt-organic: 52% 48% 50% 50% / 49% 52% 48% 51%;   /* the soft hand-cut outline of the icon fields */
}
.jd-pt .jd-home-head {
  --jd-home-eyebrow-color: var(--jd-pt-eyebrow-color);
  gap: 8px;
  margin: 0 0 var(--jd-space-s);
}
.jd-pt-wrap {
  box-sizing: border-box;
  max-width: var(--jd-pt-wrap-max, var(--jd-pt-max));
  margin-inline: auto;
  padding-inline: var(--jd-pt-wrap-pad, var(--jd-space-s));
}
.jd-pt ul,
.jd-pt ol { margin: 0; padding: 0; list-style: none; }
.jd-pt :where(li) { margin: 0; padding: 0; }   /* zero-specificity reset: a component class on an li (e.g. a card padding) always wins */
.jd-pt li:not(.paper-edge):not(.jd-pt-style)::before { content: none; }   /* theme list markers (a list item that is itself a watercolour panel keeps its panel layer) */
.jd-pt a { text-decoration: none; }

/* ---- pictures ---- */
.jd-pt-art { display: block; max-width: 100%; height: auto; }
.jd-pt-art--missing {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  border: 1px dashed var(--jd-cream-200, #eadfcc);
  border-radius: 20px;
}

/* ---- hero: shared frame (jd-hero-frame.css, modifier --copy-left) holds the painted scene; the copy sits in its plain left field ---- */
.jd-pt-hero { padding-inline: 0; --jd-pt-eyebrow-color: #fea1ab; }   /* the home eyebrow pink, on the cream field */
.jd-pt-hero__copy { gap: var(--jd-space-xs); }
.jd-pt-hero__title { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; color: var(--jd-ink-900, #3b2a1f); font-family: var(--jd-font-display, inherit); font-weight: 700; }
.jd-pt-hero__word { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.2; letter-spacing: .12em; }
.jd-pt-hero__sub { font-size: clamp(16px, 1.6vw, 24px); line-height: 1.4; letter-spacing: .1em; text-wrap: balance; }
.jd-pt-hero__lead { max-width: 26em; margin: 0 0 var(--jd-space-xs); text-wrap: pretty; }
.jd-pt-hero__eyebrow { margin: 0; }
@media (min-width: 768px) {
  /* copy column = the plain left field of the art (the animals start at about 42% of the picture): 4% .. 40% of the frame */
  .jd-pt-hero__copy { align-items: flex-start; padding: var(--jd-space-s) 60% var(--jd-space-s) 4%; gap: 6px; text-align: start; }
  .jd-pt-hero__title { align-items: flex-start; gap: 4px; }
  .jd-pt-hero__lead { margin-bottom: 4px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .jd-pt-hero__copy .jd-btn { --jd-btn-h: 44px; --jd-btn-px: 22px; --jd-btn-fs: 14px; }
}
@media (max-width: 767.98px) {
  .jd-pt-hero__copy .jd-btn { align-self: stretch; }   /* the main action is full width on phones */
}


/* small pill buttons of this page are 44px high (the site makes them 44px on touch screens only) */
.jd-pt .jd-btn--sm { --jd-btn-h: 44px; }

/* ---- page width: this page's WoodMart container (.wd-content-layout reads --wd-container-w) is the 1440 box like the home page's full-width blocks, so the sections AND
   the shop grid below them share one width and the same side gutters at every width; set on the body class of this page only (other archives keep 1222px) ---- */
body.jd-pet-toys-page .main-page-wrapper { --wd-container-w: 1440px; }

/* ---- blocks of the page: one rhythm between them ---- */
.jd-pt-wrap > * { margin-top: var(--jd-pt-block-gap); }
.jd-pt-wrap > .jd-pt-nav { margin-top: var(--jd-space-m); }
/* every panel: the watercolour panel of paper-edge.css at the full width of the block (it caps at 1200px by default), padding above half of the filter scale */
.jd-pt-hot,
.jd-pt-guide,
.jd-pt-faq { width: 100%; min-width: 0; padding: var(--jd-space-m); }   /* width: paper-edge centres with auto margins, which would shrink a grid item to its content */
.jd-pt-guide,
.jd-pt-faq { --paper-pad: var(--jd-space-m); }   /* the md panels take their padding from this token */
.jd-pt-hot { max-width: none; --paper-color: var(--jd-cream-50, #fbf6ec); }
.jd-pt-guide { --paper-color: #fbf5e9; }
.jd-pt-faq { --paper-color: #fbf5e9; }

/* ---- icon strip right under the hero: 8 across from 768px, a sideways row on phones ---- */
.jd-pt-nav { min-width: 0; }
.jd-pt-nav__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--jd-space-xs) 4px; }
.jd-pt-nav__item { display: flex; min-width: 0; }
.jd-pt-nav__item:nth-child(1) { --jd-pt-nav-tone: var(--jd-pt-tone-peach); }
.jd-pt-nav__item:nth-child(2) { --jd-pt-nav-tone: var(--jd-pt-tone-blue); }
.jd-pt-nav__item:nth-child(3) { --jd-pt-nav-tone: var(--jd-pt-tone-sand); }
.jd-pt-nav__item:nth-child(4) { --jd-pt-nav-tone: var(--jd-pt-tone-blue); }
.jd-pt-nav__item:nth-child(5) { --jd-pt-nav-tone: var(--jd-pt-tone-pink); }
.jd-pt-nav__item:nth-child(6) { --jd-pt-nav-tone: var(--jd-pt-tone-blue); }
.jd-pt-nav__item:nth-child(7) { --jd-pt-nav-tone: var(--jd-pt-tone-lilac); }
.jd-pt-nav__item:nth-child(8) { --jd-pt-nav-tone: var(--jd-pt-tone-green); }
.jd-pt-nav__item a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 2px;
  border-radius: 16px;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: center;
}
.jd-pt-nav__field {
  --jd-pt-nav-field: 104px;
  display: grid;
  place-items: center;
  width: min(100%, var(--jd-pt-nav-field));   /* never wider than its column, so neighbours never overlap */
  aspect-ratio: 1;
  background: var(--jd-pt-nav-tone, var(--jd-pt-tone-sand));
  border-radius: var(--jd-pt-organic);
}
.jd-pt-nav__item:nth-child(even) .jd-pt-nav__field { border-radius: 48% 52% 51% 49% / 52% 48% 52% 48%; }
.jd-pt-nav__item.is-current .jd-pt-nav__label { box-shadow: inset 0 -.55em 0 #fde794; }   /* the butter highlight of the current page */
.jd-pt-nav__art { width: auto; height: auto; max-width: 74%; max-height: 66%; object-fit: contain; }
.jd-pt-nav__art.jd-pt-art--missing { width: 60%; height: 60%; border-radius: 14px; }
.jd-pt-nav__label { white-space: nowrap; }
.jd-pt-nav__item a:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: -2px; }
@media (hover: hover) {
  .jd-pt-nav__item a:hover .jd-pt-nav__label { text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* ---- the ONE chooser: two small pet chips, then four play-style cards (2 x 2 on phones, 4 across from 768px). Each card = one stretched link. ---- */
.jd-pt-pick { min-width: 0; }
.jd-pt-pick .jd-home-head { margin-bottom: var(--jd-space-xs); }
.jd-pt .jd-pt-pick__pets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--jd-space-s); }   /* .jd-pt ul resets margins, so this needs the same scope */
.jd-pt-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--jd-border, #e6dcd2);
  border-radius: 999px;
  background: #fff;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
}
.jd-pt-chip:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }
.jd-pt-pick__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* phones: one full-width row per style, so the hint reads in one line */
/* each block = a watercolour paper (the paper-edge system: flat colour on ::before, wavy outline from an SVG filter on that layer only, text stays crisp). The soft filter of the
   buttons (#jd-btn-wavy: scale 14) is used so the outline is only slightly irregular; the four blocks differ by a mirrored background layer and their own corner radii. */
.jd-pt-style {
  --paper-color: var(--jd-pt-pick-green);
  --paper-radius: 34px 30px 36px 28px / 30px 36px 28px 34px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 12px 18px;
}
.jd-pt-style::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--paper-radius);
  background: var(--paper-color);
  filter: url(#jd-btn-wavy);
  transition: transform .2s ease;
}
.jd-pt-style--green { --paper-color: var(--jd-pt-pick-green); }
.jd-pt-style--pink { --paper-color: var(--jd-pt-pick-pink); --paper-radius: 28px 36px 30px 34px / 36px 28px 34px 30px; }
.jd-pt-style--pink::before { transform: scaleX(-1); }
.jd-pt-style--sand { --paper-color: var(--jd-pt-pick-sand); --paper-radius: 36px 28px 34px 30px / 28px 34px 30px 36px; }
.jd-pt-style--sand::before { transform: scaleY(-1); }
.jd-pt-style--lilac { --paper-color: var(--jd-pt-pick-lilac); --paper-radius: 30px 34px 28px 36px / 34px 30px 36px 28px; }
.jd-pt-style--lilac::before { transform: scale(-1, -1); }
.jd-pt-style__art { flex: none; display: block; width: 56px; aspect-ratio: 1; }
.jd-pt-style__art .jd-pt-art { width: 100%; height: 100%; object-fit: contain; }
.jd-pt-style__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-pt-style__name { margin: 0; color: var(--jd-ink-900, #3b2a1f); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.jd-pt-style__link { color: inherit; }
.jd-pt-style__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--jd-card-radius); }
.jd-pt-style__link:focus-visible { outline: none; }
.jd-pt-style__link:focus-visible::after { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: -3px; }
.jd-pt-style__hint { display: block; text-wrap: balance; }
.jd-pt-style__say { display: none; }
@media (hover: hover) {
  .jd-pt-style:hover::before { transform: translateY(-2px); }
  .jd-pt-style--pink:hover::before { transform: scaleX(-1) translateY(-2px); }
  .jd-pt-style--sand:hover::before { transform: scaleY(-1) translateY(2px); }
  .jd-pt-style--lilac:hover::before { transform: scale(-1, -1) translateY(2px); }
}
@media (min-width: 768px) {
  .jd-pt-pick__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jd-space-s); }
  .jd-pt-style { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px var(--jd-space-s); }
  .jd-pt-style__art { width: 80px; }
  .jd-pt-style__name { font-size: 18px; }
  .jd-pt-style__say { display: block; margin-top: 6px; text-wrap: pretty; }
}

/* ---- popular row (cream panel): head, then a scroll-snap row of real products; arrows from 768px (shown only while the row overflows) ---- */
.jd-pt-hot__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 var(--jd-space-s); margin-bottom: var(--jd-space-xs); }
.jd-pt-hot__head .jd-home-head { margin-bottom: var(--jd-space-xs); flex: none; width: auto; }
.jd-pt-hot__all { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--jd-ink-900, #3b2a1f); font-size: 14px; font-weight: 500; white-space: nowrap; }
.jd-pt-hot__all svg { width: 16px; height: 16px; }
.jd-pt-hot__all:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) {
  .jd-pt-hot__all:hover { text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
.jd-pt-hot__frame { position: relative; --jd-bleed: 16px; }   /* = the panel padding on phones: the row runs on to the panel edge (the half card is cut there) */
.jd-pt-hot__row {
  --jd-pt-hot-gap: 12px;
  --jd-pt-hot-per: 2.5;   /* cards in view: 2 whole + one cut in half at the right edge (the peek says "there is more") */
  display: flex;
  gap: var(--jd-pt-hot-gap);
  padding: 2px 0 14px 2px;   /* room for the card shadow and the focus ring; no right padding: the half card runs to the edge */
  margin: -2px calc(-1 * var(--jd-bleed)) -2px -2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jd-pt-hot__row::-webkit-scrollbar { display: none; }
.jd-pt-hot__row:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }
.jd-pt-prod {
  position: relative;
  flex: 0 0 calc((100% - (var(--jd-pt-hot-per) - .5) * var(--jd-pt-hot-gap)) / var(--jd-pt-hot-per));
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 8px;
  scroll-snap-align: start;
}
.jd-pt-prod__img { display: block; aspect-ratio: 1; }
.jd-pt-prod__photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.jd-pt-prod__name { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: .06em; min-height: 2.9em; }
.jd-pt-prod__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--jd-card-radius); }   /* the whole card is the link target (44px+ tap area); the cart button stays above it */
.jd-pt-prod__name a { color: var(--jd-ink-900, #3b2a1f); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.jd-pt-prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; }
.jd-pt-prod__price { min-width: 0; color: var(--jd-price-color, var(--jd-ink-900, #3b2a1f)); font-size: 15px; font-weight: 600; }
.jd-pt-prod__price del { margin-right: 4px; opacity: .6; font-weight: 400; }
.jd-pt-prod__price ins { text-decoration: none; }
.jd-pt-prod__from { margin-left: 2px; font-size: 12px; font-weight: 500; }
.jd-pt-prod__add {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border-radius: 50%;
  color: var(--jd-ink-900, #3b2a1f);
  transition: background-color .2s ease;
}
.jd-pt-prod__add:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: -2px; }
.jd-pt-prod__add.loading { opacity: .5; }
.jd-pt-prod__add.added { background: var(--jd-mint-100, #d4eedf); }
.jd-pt-prod .added_to_cart { display: none; }   /* WooCommerce appends a 'view cart' link after an ajax add; the mini cart already shows it */
.jd-pt-prod__name a:focus-visible { outline: none; }
.jd-pt-prod__name a:focus-visible::after { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: -3px; }
.jd-pt-hot__arrow {
  position: absolute;
  top: 38%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--jd-card-border);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--jd-card-shadow);
  color: var(--jd-ink-900, #3b2a1f);
  cursor: pointer;
}
.jd-pt-hot__arrow[hidden] { display: none; }
.jd-pt-hot__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }   /* at an end of the row: dimmed, still focusable */
.jd-pt-hot__arrow svg { width: 18px; height: 18px; }
.jd-pt-hot__arrow--prev { left: calc(-1 * var(--jd-space-m) + 2px); }
.jd-pt-hot__arrow--prev svg { transform: scaleX(-1); }
.jd-pt-hot__arrow--next { right: calc(-1 * var(--jd-space-m) + 2px); }
.jd-pt-hot__arrow:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }
@media (min-width: 768px) {
  .jd-pt-hot__row { --jd-pt-hot-gap: 14px; --jd-pt-hot-per: 3.5; }
  .jd-pt-hot__frame { --jd-bleed: var(--jd-space-m); }
  .jd-pt-hot__arrow { display: grid; }
  .jd-pt-hot__arrow[hidden] { display: none; }
}
@media (min-width: 1025px) {
  .jd-pt-hot__row { --jd-pt-hot-per: 5.5; }
}

/* ---- safe-use guide (after the grid) ---- */
/* a title phrase stays whole: the line breaks after the full-width comma, never inside a phrase */
.jd-pt-phrase { display: inline-block; }
.jd-pt-guide__text { max-width: 60em; margin: 0; text-wrap: pretty; }

/* ---- row: store card | FAQ panel ---- */
.jd-pt-end { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jd-pt-block-gap) var(--jd-pt-col-gap); align-items: start; }
/* store card: ONE green watercolour card (md panel in the painted field's green); the shop picture is cropped to its shop + tree part on the left, the copy sits
   in the clear area on the right, the button under it - no text over the picture. Phones: the picture on top, the copy below. */
.jd-pt-visit { --paper-color: #eaf1e3; --paper-pad: var(--jd-space-s) var(--jd-space-m); width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jd-space-xs); align-items: center; }
.jd-pt-visit__art { display: block; width: min(100%, 300px); margin-inline: auto; }
.jd-pt-visit__crop { display: block; aspect-ratio: 1.37; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 78%, transparent); mask: linear-gradient(90deg, #000 78%, transparent); }   /* x 3%-43% and y 22%-80% of the 2:1 painting; the right cut fades into the card colour */
.jd-pt-visit__crop .jd-pt-art { width: 250%; max-width: none; height: auto; margin: -27% 0 0 -8.3%; }
.jd-pt-visit__crop .jd-pt-art--missing { width: 100%; margin: 0; aspect-ratio: auto; height: 100%; }
.jd-pt-visit__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.jd-pt-visit__text .jd-home-head { margin-bottom: var(--jd-space-xs); }
.jd-pt-visit__text p { margin: 0 0 var(--jd-space-xs); text-wrap: pretty; }
.jd-pt-visit__text .jd-pt-visit__addr { margin-bottom: var(--jd-space-s); color: var(--jd-ink-900, #3b2a1f); font-weight: 600; }
@media (min-width: 768px) {
  .jd-pt-visit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--jd-space-s); }
  .jd-pt-visit__art { width: 100%; }
}
@media (min-width: 1025px) {
  .jd-pt-end { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
/* FAQ panel: head row = heading left, small resting dog right; the questions are two accordions side by side (one column on phones); the other four are behind a native details toggle */
.jd-pt-faq__top { display: flex; align-items: center; justify-content: space-between; gap: var(--jd-space-s); }
.jd-pt-faq__top .jd-home-head { margin-bottom: var(--jd-space-xs); }
.jd-pt-faq__art { flex: none; display: block; width: clamp(72px, 9vw, 110px); aspect-ratio: 5 / 3; }
.jd-pt-faq__art .jd-pt-art { width: 100%; height: 100%; object-fit: cover; }
.jd-pt-faq__art .jd-pt-art--missing { aspect-ratio: auto; }
.jd-pt-faq__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--jd-space-s); align-items: start; }
.jd-pt-faq .wd-accordion-title { padding-block: 12px; }
.jd-pt-faq h3.jd-faq-q { margin: 0; font-size: 14px; line-height: 1.5; }
.jd-pt-faq__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.jd-pt-faq__more > summary::-webkit-details-marker { display: none; }
.jd-pt-faq__more > summary::after { content: "+"; margin-left: 8px; font-size: 18px; line-height: 1; }
.jd-pt-faq__more[open] > summary::after { content: "\2212"; }
.jd-pt-faq__more > summary:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 768px) {
  .jd-pt-faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- heading above the real product grid (anchor of the hero button and the see-all link) ---- */
.jd-pt-gridhead { scroll-margin-top: var(--jd-pt-anchor-offset); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 var(--jd-space-s); }
.jd-pt-gridhead .jd-home-head { margin-bottom: 0; }
.jd-pt-gridhead__tools { display: flex; align-items: center; gap: var(--jd-space-s); margin-left: auto; }
.jd-pt-gridhead__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--jd-ink-900, #3b2a1f); font-size: 14px; font-weight: 500; white-space: nowrap; }
.jd-pt-gridhead__more svg { width: 16px; height: 16px; }
.jd-pt-gridhead__more:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 3px; border-radius: 4px; }

/* own hover / focus of the landing links: WoodMart turns every link inside a heading (and a:hover) blue; these keep the brand ink (underline in the pink of the other links, chips a cream fill) */
.jd-pt-style__name .jd-pt-style__link:hover,
.jd-pt-style__name .jd-pt-style__link:focus { color: var(--jd-ink-900, #3b2a1f); text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jd-pt-chip:hover,
.jd-pt-chip:focus { background: var(--jd-cream-100, #f5ecdd); color: var(--jd-ink-900, #3b2a1f); }
.jd-pt-gridhead__more:hover,
.jd-pt-gridhead__more:focus { color: var(--jd-ink-900, #3b2a1f); text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* popular row: title links, the see-all link and the cart button keep the brand ink on hover / focus (WoodMart blue otherwise) */
.jd-pt-hot .jd-pt-prod__name a:hover,
.jd-pt-hot .jd-pt-prod__name a:focus,
.jd-pt-hot .jd-pt-hot__all:hover,
.jd-pt-hot .jd-pt-hot__all:focus,
.jd-pt-hot .jd-pt-prod__add:hover,
.jd-pt-hot .jd-pt-prod__add:focus { color: var(--jd-ink-900, #3b2a1f); }
.jd-pt-hot .jd-pt-hot__all:hover { text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* slider wrapper: side arrows (desktop) centred on the grid's left / right edge; --jd-bleed = how far the row runs past the wrapper to the screen edge (phone / tablet: the page gutter) */
.jd-pt-slider { position: relative; --jd-bleed: var(--jd-space-s); }
.jd-pt-side {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 1px solid var(--jd-card-border);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--jd-card-shadow);
  color: var(--jd-ink-900, #3b2a1f);
  cursor: pointer;
}
.jd-pt-side[hidden] { display: none; }
.jd-pt-side svg { width: 22px; height: 22px; }
.jd-pt-side--prev svg { transform: scaleX(-1); }
/* half outside the cards where there is room; on a page as narrow as the grid's gutters the arrow is pulled in so it never leaves the screen */
.jd-pt-side--prev { left: max(-28px, calc((100% - var(--jd-page-w, 100vw)) / 2 + 2px)); }
.jd-pt-side--next { right: max(-28px, calc((100% - var(--jd-page-w, 100vw)) / 2 + 2px)); }
.jd-pt-side[aria-disabled="true"] { opacity: .35; cursor: default; }
.jd-pt-side:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }

/* ---- the shop's own grid on the landing = a two-row sideways row at every width: --jd-pt-per columns in view, the last one CUT IN HALF at the right edge (phone 2.5,
   tablet 3.5, 1025-1279 4.5, from 1280 5.5), one scroll-snap point per column (free scroll, not per page). Works without JS (swipe / scroll); the height is that of two rows
   from the first paint. Phone / tablet: the row starts at the page gutter and runs to the screen edge (--jd-bleed). ---- */
.jd-pet-toys-page .wd-products.products {
  --jd-pt-per: 2.5;
  --jd-pt-slide-gap: 12px;
  grid-template-columns: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--jd-pt-per) - .5) * var(--jd-pt-slide-gap)) / var(--jd-pt-per));
  gap: var(--jd-pt-slide-gap);
  margin: -4px calc(-1 * var(--jd-bleed)) 0 -4px;
  padding: 4px 0 14px 4px;   /* room for the card shadow (an overflow container clips it); no right padding: the half card runs to the edge */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 4px;
  scrollbar-width: none;
}
.jd-pet-toys-page .wd-products.products::-webkit-scrollbar { display: none; }
.jd-pet-toys-page .wd-products.products:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }
.jd-pet-toys-page .wd-products.products > .wd-product:nth-child(odd),
.jd-pet-toys-page .wd-products.products > .jd-lm-all { scroll-snap-align: start; }
@media (min-width: 768px) {
  .jd-pet-toys-page .wd-products.products { --jd-pt-per: 3.5; --jd-pt-slide-gap: 14px; }
}
@media (min-width: 1025px) {
  .jd-pt-slider { --jd-bleed: 0px; }
  .jd-pet-toys-page .wd-products.products { --jd-pt-per: 4.5; --jd-pt-slide-gap: 16px; }   /* 1025-1279: cards stay about 220px+ */
  .jd-pt-side { display: grid; }
  .jd-pt-side[hidden] { display: none; }
}
@media (min-width: 1280px) {
  .jd-pet-toys-page .wd-products.products { --jd-pt-per: 5.5; }
}

/* ---- phones ---- */
@media (max-width: 767.98px) {
  .jd-pt { --jd-pt-block-gap: var(--jd-space-l); }
  .jd-pt-hot,
  .jd-pt-guide,
  .jd-pt-faq { padding: 28px 16px; }
  .jd-pt-nav__list { display: flex; gap: 8px; margin-inline: calc(-1 * var(--jd-space-s)); padding-inline: var(--jd-space-s); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .jd-pt-nav__list::-webkit-scrollbar { display: none; }
  .jd-pt-nav__item { flex: 0 0 80px; scroll-snap-align: start; }
  .jd-pt-nav__field { --jd-pt-nav-field: 72px; }
  .jd-pt-nav__item a { font-size: 12px; letter-spacing: 0; }
  .jd-pt-visit__text .jd-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-pt-style,
  .jd-pt-prod__add { transition: none; }
}