/* =====================================================================
   jdtheme26 - LANDING PAGES of /product-category/cake/ (the birthday landing) and /pet-living/dining-ware/ (inc/jd-cake-landing.php), page 1 only.
   Rebuilt 2026-10-02 as an extension of the HOME PAGE (operator: design from the home page's irregular blocks and heading icons). Every part reuses
   the home vocabulary instead of inventing one:
     hero            .paper-band (paper-edge.css) in the home's #fcfaf6, text left / picture right like the store block, heading = home heading
                     (jd-home-title.css: English line with the small two-stroke icon + the H1 drawn with the home title face), icon row like the
                     store block's address / clock facts, pill buttons .jd-btn (butter + white)
     intro           .jd-card cards (jd-product-card.css tokens) with home headings; a single section is centred like the home intro block
     sections        second .paper-band in the home bestseller colour (#f5f6f0) holding .jd-card cards
     FAQ             the home FAQ look (jd-home-faq.css): paws beside the title, mint FAQ line, two columns of outlined rounded cards, pink bar before
                     the question, plus sign (native <details>, so the answers stay visible text for search engines)
   Body text = the site standard (jd-typography.css): nothing here sets font-size / line-height / letter-spacing on running text.
   Spacing = jd-layout.css tokens. Fade-in: data-jd-reveal on the cards / FAQ items (jd-reveal.js); the hero is the first screen and never hidden.
   ===================================================================== */

/* ---- bands: full-bleed (.paper-band), content on the site container so it lines up with the breadcrumb and the product grid ---- */
.jd-cat-hero.paper-band,
.jd-cat-landing__band.paper-band { padding-inline: 0; }
.jd-cat-hero__inner,
.jd-cat-landing__inner {
  box-sizing: border-box;
  max-width: var(--wd-container-w, 1222px);   /* WoodMart container: 1222px with 15px gutters */
  margin-inline: auto;
  padding-inline: var(--jd-space-s);
}

/* ---- hero ---- */
.jd-cat-hero.paper-band {
  --paper-color: #fcfaf6;
  padding-block: var(--jd-space-section);
  color: var(--jd-ink-700, #5c4a3c);
}
.jd-cat-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
}
.jd-cat-hero__text { min-width: 0; }
.jd-cat-hero .jd-home-head {
  --jd-home-title-size: clamp(28px, 2.6vw, 36px);   /* the page's H1: a little larger than the 24px section titles */
  gap: 8px;
  margin: 0 0 var(--jd-space-m);
}
.jd-cat-hero__lead { margin: 0 0 var(--jd-space-m); text-wrap: pretty; }
.jd-cat-hero__facts { margin: 0 0 var(--jd-space-l); padding: 0; list-style: none; }
.jd-cat-hero__facts li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 var(--jd-space-xs);
  padding: 0;
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-cat-hero__facts li::before { content: none; }
.jd-cat-hero__facts svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.jd-cat-hero__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; }
body .jd-cat-hero a.jd-btn { color: var(--jd-btn-fg); text-decoration: none; }
.jd-cat-hero__media { min-width: 0; margin: 0; }
.jd-cat-hero__img { display: block; width: 100%; max-width: 680px; height: auto; margin-inline: auto; }

/* ---- intro sections under the hero ---- */
.jd-cat-landing { color: var(--jd-ink-700, #5c4a3c); }
.jd-cat-landing__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jd-space-m);
  margin: 0 0 var(--jd-space-l);
}
.jd-cat-landing__intro--single { display: block; }
.jd-cat-landing__sec--center { max-width: 850px; margin-inline: auto; text-align: center; }
.jd-cat-landing__card { padding: var(--jd-space-l); }
.jd-cat-landing .jd-home-head {
  --jd-home-eyebrow-color: #e2d4c8;   /* the home category band's English line */
  gap: 8px;
  margin: 0 0 var(--jd-space-s);
}
.jd-cat-landing__body p { margin: 0 0 var(--jd-space-xs); text-wrap: pretty; }
.jd-cat-landing__body > :last-child { margin-bottom: 0; }
.jd-cat-landing__body ul { margin: 0 0 var(--jd-space-xs); padding-left: 1.4em; list-style: disc; }
.jd-cat-landing__body li { margin: 0 0 6px; }
.jd-cat-landing__body li::marker { color: #f7c5c8; }
/* links: ink text with the home FAQ's soft pink underline */
.jd-cat-landing a {
  color: var(--jd-ink-900, #3b2a1f);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #f7c5c8;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.jd-cat-landing a:hover,
.jd-cat-landing a:focus-visible { text-decoration-color: var(--jd-ink-900, #3b2a1f); }

/* ---- sections after the product grid: a tinted band with the cards ---- */
.jd-cat-landing__band.paper-band {
  --paper-color: #f5f6f0;                 /* the home bestseller band */
  margin-top: var(--jd-space-l);
  padding-block: var(--jd-space-section);
}
.jd-cat-landing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jd-space-m);
}

/* ---- FAQ (home FAQ look) ---- */
.jd-cat-faq { margin-top: var(--jd-space-l); }
.jd-cat-faq__head { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--jd-space-m); text-align: center; }
.jd-cat-faq__title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.jd-cat-faq__title::before,
.jd-cat-faq__title::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../img/jd-paw-pink.webp") center / contain no-repeat;   /* the home FAQ's pink paws */
}
.jd-cat-faq__title::before { transform: rotate(-14deg); }
.jd-cat-faq__title::after { transform: scaleX(-1) rotate(-14deg); }
.jd-cat-faq__eyebrow {
  margin-top: 6px;
  font-family: "Gaegu", var(--jd-font-display, sans-serif);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .14em;
  color: #d6ecdf;
}
.jd-cat-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;                      /* an opened card grows by itself, its neighbour keeps its height */
  gap: 14px 28px;
}
.jd-cat-faq__item {
  border: 1px solid var(--jd-cream-200, #eadfcc);
  border-radius: 14px;
  background: var(--jd-white, #fff);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jd-cat-faq__item:hover,
.jd-cat-faq__item[open] { border-color: #ffe29c; box-shadow: 0 4px 14px rgba(59, 42, 31, .06); }
.jd-cat-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 16px 36px;
  cursor: pointer;
  list-style: none;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.jd-cat-faq__item summary::-webkit-details-marker { display: none; }
.jd-cat-faq__item summary::before {         /* the short pink bar before the question */
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  top: calc(16px + .25em);
  bottom: calc(16px + .25em);
  width: 2px;
  border-radius: 2px;
  background: #f7c5c8;
}
.jd-cat-faq__item summary::after {          /* plus sign, minus when open */
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.jd-cat-faq__item[open] summary::after { background-size: 100% 1.5px, 0 0; }
.jd-cat-faq__item summary:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; border-radius: 12px; }
.jd-cat-faq__item p { margin: 0; padding: 0 20px 18px 36px; }
.jd-cat-faq__note { margin: var(--jd-space-m) 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .jd-cat-faq__item,
  .jd-cat-landing a { transition: none; }
}

/* ---- tablet + phone ---- */
@media (max-width: 1279px) {
  /* narrower text column: slightly smaller buttons so that the two stay on one line */
  .jd-cat-hero__cta { gap: 12px 14px; }
  .jd-cat-hero__cta .jd-btn { --jd-btn-h: 48px; --jd-btn-px: 22px; --jd-btn-fs: 15px; }
}
@media (max-width: 767px) {
  .jd-cat-hero.paper-band { padding-block: var(--jd-space-l); }
  .jd-cat-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--jd-space-m); }
  .jd-cat-hero__media { order: -1; }            /* picture first, then the text */
  .jd-cat-hero__img { max-width: 420px; }
  .jd-cat-hero .jd-home-head { --jd-home-title-size: 26px; }
  .jd-cat-hero__facts { margin-bottom: var(--jd-space-m); }
  .jd-cat-hero__cta { flex-direction: column; gap: 12px; }
  .jd-cat-hero__cta .jd-btn { width: 100%; }
  .jd-cat-landing__intro,
  .jd-cat-landing__grid,
  .jd-cat-faq__list { grid-template-columns: minmax(0, 1fr); }
  .jd-cat-faq__list { gap: 12px; }
  .jd-cat-landing__card { padding: var(--jd-space-m); }
  .jd-cat-landing__band.paper-band { padding-block: var(--jd-space-l); }
  .jd-cat-faq__item summary { padding: 14px 16px 14px 32px; }
  .jd-cat-faq__item summary::before { inset-inline-start: 16px; top: calc(14px + .25em); bottom: calc(14px + .25em); }
  .jd-cat-faq__item p { padding: 0 16px 16px 32px; }
}