/* jdtheme26 — home page INTRO block above the 8-category grid (2026-09-29).
   Operator: 「在8個目錄上方加上一個區塊跟"VISIT JUST DOG"一樣的不規則邊緣，底色fcfaf6 … 三個內容都置中：英文副標 "JUST DOG" 顏色#43555e 右邊加一個愛心圖示裝飾 /
   中文大標題 / 內文」.
   Markup = Raw HTML element in the front page (row .jd-home-intro-row): <section class="jd-intro paper-band"> with the home title classes
   (assets/css/jd-home-title.css, variant --center --plain). Band = .paper-band (assets/css/paper-edge.css) in #fcfaf6.
   The title is the page's <h1>. */

.jd-home-intro-row .wpb_raw_code { margin-bottom: 0; }

.jd-intro.paper-band {
  --paper-color: #fcfaf6;
  padding-block: 100px;               /* operator 2026-09-29 (was 64px); phones keep 48px, see the media query below */
  margin-block: 30px 10px;
  text-align: center;
}
/* 2026-09-30 (operator: 「移除JUST DOG的底色和上下不規則邊緣，改成Shop by Category用底色和上下不規則邊緣」): no ground and no wavy edges here any more -
   the band's ::before layer is switched off (the markup keeps .paper-band); the #fcfaf6 band moved to Shop by Category below. */
.jd-intro.paper-band::before { content: none; }
.jd-intro .jd-home-head {
  --jd-home-eyebrow-color: #43555e;
  gap: 10px;
  margin: 0 0 16px;
}
.jd-intro .jd-home-eyebrow { gap: 8px; letter-spacing: .16em; }
.jd-intro__heart {
  flex: none;
  width: .8em;
  height: .8em;
  color: #fea1ab;
  transform: rotate(10deg);
}
.jd-intro .jd-intro__text {
  max-width: 720px;
  margin: 0 auto;
  color: var(--jd-ink-700, #5c4a3c);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .jd-intro.paper-band { padding-block: 48px; margin-block: 18px 6px; }
}

/* ---- 8-category grid on its own band (2026-09-29) ----
   Operator: 「在8個目錄這個區塊加上底色#f9f5ef。文字標題都靠左對齊。英文副標 Shop by Category，顏色e2d4c8，右邊加上小圖示；中文大標題 狗狗、貓咪的食品與日常用品，一次找齊」.
   2026-09-30: heading changed to 「寵物零食與寵物用品，一次找齊」 (operator; page content + title drawing).
   <section class="jd-catband paper-band"> wraps the heading and the unchanged grid (.jd-cats, assets/css/jd-category.css). */
.jd-home-cats-row .wpb_raw_code { margin-bottom: 0; }
/* 2026-09-29 (later): 「8個目錄這個區塊底色刪除」 → no background; 2026-09-30: the ground and the wavy upper / lower edge come back - the ones the
   JUST DOG intro had (#fcfaf6, .paper-band outline; operator 「改成Shop by Category用底色和上下不規則邊緣」). Margin 30px = half the wave depth. */
.jd-catband.paper-band {
  --paper-color: #fcfaf6;
  padding-block: 40px 32px;
  margin-block: 30px;
}
.jd-catband .jd-catband__head {
  --jd-home-eyebrow-color: #e2d4c8;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  text-align: left;
}
.jd-catband .jd-home-title { justify-content: flex-start; }
.jd-catband .jd-cats { padding: clamp(20px, 3vw, 40px) 0 0; }      /* the band brings the space above and below */

@media (max-width: 767px) {
  .jd-catband.paper-band { padding-block: 32px 24px; margin-block: 18px; }
}

/* ---- band under the member block 再買一次 / 為你的毛孩挑選 (2026-09-29) ----
   Operator: 「"再買一次"下方新增另一種弧度的不規則底色區塊#fbf8f1」. A .paper-band with the second outline (.paper-band--b) in #fbf8f1.
   It has NO content yet (the operator has not said what goes in it): an empty band of a fixed height, hidden from screen readers. */
.jd-home-bandb-row .wpb_raw_code { margin-bottom: 0; }
.jd-bandb.paper-band {
  --paper-color: #fbf8f1;
  padding-block: 64px;
}
/* 2026-09-30 (operator: 「JUST DOG Originals 刪除區塊底色和邊界」): no ground colour and no wavy edges any more - the paper layer is not drawn */
.jd-bandb.paper-band::before { display: none; }
.jd-bandb .paper-band__inner:empty { min-height: 160px; }
/* heading (2026-09-29): centred, English line 「JUST DOG Originals」 #fea1ab with the small icon on both sides */
.jd-bandb { text-align: center; }
.jd-bandb .jd-bandb__head {
  --jd-home-eyebrow-color: #e2d4c8;   /* operator 2026-09-30: the category band's colour (was #fea1ab) */
  gap: 8px;
  margin: 0;
}
.jd-bandb .jd-bandb__head:not(:last-child) { margin-bottom: 28px; }
@media (max-width: 767px) {
  .jd-bandb.paper-band { padding-block: 48px; }
  .jd-bandb .paper-band__inner:empty { min-height: 120px; }
}

/* ---- band b: three cards — JUST DOG's own treats / freeze-dried / cake (2026-09-29) ----
   Each picture (800×470, transparent) carries its own watercolour colour patch. The card's panel (::before, paper-edge "sm" outline, the patch's
   colour) continues that patch downwards under the text; the picture's lower edge fades out (mask) so that the two run into each other.
   Panel top is set in cqw = relative to the card's width, because the picture's height follows the width. */
body .jd-bandb .jd-orig {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  text-align: start;
}
body .jd-bandb .jd-orig__card {
  margin: 0;
  padding: 0;
  container-type: inline-size;
}
body .jd-bandb .jd-orig__card::before { content: none; }
body .jd-bandb .jd-orig__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--jd-ink-700, #5c4a3c);
  text-decoration: none;
}
body .jd-bandb .jd-orig__link::before {
  content: "";
  position: absolute;
  inset: 27cqw 0 0;                             /* full card width: the picture's own patch runs to the card edge (operator 2026-09-30 iPhone: the patch stuck out beside a 3.5%-inset panel) */
  z-index: -1;
  border-radius: 32px 26px 30px 36px / 26px 32px 36px 30px;
  background: var(--jd-orig-color, #fce8e0);
  filter: url(#paper-edge-sm);
  pointer-events: none;
}
.jd-orig__card--treats { --jd-orig-color: #fce8e0; }
.jd-orig__card--freeze { --jd-orig-color: #e0f3e0; }
.jd-orig__card--cake   { --jd-orig-color: #fde3e4; }
body .jd-bandb .jd-orig__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 470;
  -webkit-mask-image: linear-gradient(#000 80%, transparent 95%);
          mask-image: linear-gradient(#000 80%, transparent 95%);
  transition: transform .35s ease;
}
body .jd-bandb .jd-orig__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: -4cqw;
  padding: 0 10% 26px;
}
body .jd-bandb .jd-orig__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--jd-ink-900, #3b2a1f);
}
body .jd-bandb .jd-orig__text {
  margin: 0 0 14px;
  text-wrap: pretty;                  /* lines run the full width; only a one- or two-character last line is avoided (phones: balance, see below) */
  font-size: 13px;
  line-height: 1.7;
}
/* 「MORE」 (no arrow) = the theme's button (.jd-btn.jd-btn--cream.jd-btn--sm), text in Gaegu. The whole card is the link, so the card's hover drives it. */
body .jd-bandb .jd-orig__more {
  margin-top: auto;
  align-self: flex-end;
  font-family: "Gaegu", cursive;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .14em;
}
@media (hover: hover) {
  body .jd-bandb .jd-orig__link:hover { color: var(--jd-ink-700, #5c4a3c); }
  body .jd-bandb .jd-orig__link:hover .jd-orig__img { transform: translateY(-4px); }
  body .jd-bandb .jd-orig__link:hover .jd-orig__more::before { background-color: var(--jd-btn-bg-hover); }
}
body .jd-bandb .jd-orig__link:focus-visible { outline: 2px solid #3b2a1f; outline-offset: 4px; border-radius: 24px; }
@media (prefers-reduced-motion: reduce) {
  body .jd-bandb .jd-orig__img { transition: none; }
}
/* desktop (operator 2026-09-30: 「桌機版也縮小，間隔大一點比較有質感」): three 290px cards (= the phone card), 64px apart, centred */
@media (min-width: 1025px) {
  body .jd-bandb .jd-orig { grid-template-columns: repeat(3, 290px); justify-content: center; column-gap: 64px; }
}
@media (max-width: 1024px) {
  body .jd-bandb .jd-orig { gap: 24px 12px; }
  body .jd-bandb .jd-orig__body { padding-inline: 9%; }
}
@media (max-width: 767px) {
  body .jd-bandb .jd-orig { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; gap: 20px; }
  /* operator 2026-09-30: 「手機版的jd-orig__img幫我縮小一點」, then 「圖片縮小後色塊也要縮小」 → the whole card is narrower (290px instead of the
     column's ~350px), so picture, coloured panel and text shrink together and the panel keeps the picture's width (a picture narrower than
     its panel left the panel standing out on both sides) */
  body .jd-bandb .jd-orig { max-width: 290px; }
  /* operator 2026-09-29: 「手機版三個區塊內文右側是空的，請把more往上移」 → title + sentence on the left, MORE on the right beside the sentence */
  body .jd-bandb .jd-orig__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: end;
    padding: 0 8% 24px;
  }
  body .jd-bandb .jd-orig__title { grid-column: 1; }
  body .jd-bandb .jd-orig__text { grid-column: 1; margin-bottom: 0; text-wrap: balance; }
  body .jd-bandb .jd-orig__more { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
}

/* ---- 熱銷商品 (2026-09-30, operator: above JUST DOG Originals, ground #fbf6e8 with curved edges, six products in one row on desktop;
   heading as her picture: drawn title with its spark, a pink heart, grey line 大家都在買的毛孩好物, 看全部 → on the right).
   Markup: [jd_home_bestsellers] (inc/jd-home-bestsellers.php); the band = .paper-band (first outline, the category band's). ---- */
.jd-home-bestsell-row .wpb_raw_code { margin-bottom: 0; }
.jd-bestsell.paper-band { --paper-color: #f5f6f0; }   /* operator 2026-09-30 (was #f1fdfb, #eaf1f1, #fcfaf7, #fbf6e8 earlier the same day) */
.jd-bestsell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;                 /* heart, grey line and 看全部 sit on the title's line (the English line is above the title) */
  gap: 8px 14px;
  margin: 0 0 26px;
  text-align: start;
}
.jd-bestsell .jd-bestsell__title { --jd-home-eyebrow-color: #e2d4c8; position: relative; gap: 8px; margin: 0; padding-top: 30px; }   /* English line = the category band's (Shop by Category) */
/* the English line stands above the title without widening its box, so the heart follows the title directly */
.jd-bestsell .jd-bestsell__title .jd-home-eyebrow { position: absolute; top: 0; left: 0; }
.jd-bestsell__heart { flex: none; width: 20px; height: 20px; margin-bottom: 6px; color: #f7a8b2; transform: rotate(10deg); }
body .jd-bestsell .jd-bestsell__sub { margin: 0 0 5px 6px; color: #6b5b4f; font-size: 13px; letter-spacing: .06em; }   /* 13px: operator 2026-09-30 */
.jd-bestsell .jd-bestsell__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-bottom: 5px;
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 14px;
  letter-spacing: .06em;
  text-decoration: none;
}
.jd-bestsell .jd-bestsell__all span { transition: transform .25s ease; }
@media (hover: hover) { .jd-bestsell .jd-bestsell__all:hover span { transform: translateX(4px); } }
.jd-bestsell .jd-bestsell__all:focus-visible { outline: 1.5px solid var(--jd-ink-900, #3b2a1f); outline-offset: 4px; border-radius: 4px; }
/* six in a row on desktop, three on tablets (WoodMart's shop setting would give four) */
body .jd-bestsell .wd-products { --wd-col-lg: 6 !important; --wd-col-md: 3 !important; --wd-gap-lg: 16px !important; }
body .jd-bestsell .wd-products .wd-product { margin-bottom: 0; }
@media (max-width: 1024px) and (min-width: 768px) {
  body .jd-bestsell .wd-products { --wd-col: 3 !important; }
}
/* phones: one row that slides sideways (about two and a half cards visible) */
@media (max-width: 767px) {
  .jd-bestsell__head { gap: 6px 10px; margin-bottom: 18px; }
  body .jd-bestsell .jd-bestsell__sub { order: 3; flex-basis: 100%; margin: 2px 0 0; font-size: 13px; }
  body .jd-bestsell .wd-products {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    grid-auto-columns: 42%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 10px;
    scrollbar-width: none;
  }
  body .jd-bestsell .wd-products::-webkit-scrollbar { display: none; }
  body .jd-bestsell .wd-products > .wd-product { width: auto; max-width: none; scroll-snap-align: start; }
}


/* ---- JUST DOG FAVORITES / 人氣熱銷 TOP 5 (2026-09-30, operator: above Best Sellers, irregular edge NOT full width, ground #fdebed, heading centred).
   Markup: [jd_home_favorites] (inc/jd-home-bestsellers.php). The panel is a .paper-edge (all four sides wavy, inside the 1200px box);
   the section keeps the home sections' 60px above and below (jd-home-section). ---- */
.jd-home-favs-row .wpb_content_element { margin-bottom: 0; }
.jd-favs .jd-favs__panel.paper-edge { --paper-color: #faf7f2; padding: 70px clamp(24px, 4vw, 56px) 56px; }   /* 70px above the picture: operator 2026-09-30 */   /* operator 2026-09-30 (was #fdebed the same day) */
/* heading = the operator's picture 「JUST DOG Top 5 Picks」 200px wide + under it the text heading <h2> 人氣熱銷 TOP 5 at 14px (2026-09-30) */
.jd-favs .jd-favs__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding-bottom: 45px; text-align: center; }   /* 45px under 人氣熱銷 TOP 5: operator 2026-09-30 */
.jd-favs .jd-favs__pic { display: block; width: 200px; max-width: 100%; height: auto; }
body .jd-favs .jd-favs__title {
  margin: 0;
  font-family: var(--jd-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .15em;
  color: var(--jd-ink-900, #3b2a1f);
}
.jd-favs .jd-favs__list,
.jd-favs .products { margin-bottom: 0; }
/* five in one row on a desktop (as Best Sellers forces its six), three on tablets; phones keep WoodMart's two */
body .jd-favs .wd-products { --wd-col-lg: 5 !important; --wd-col-md: 3 !important; --wd-gap-lg: 16px !important; }
@media (max-width: 767px) {
  .jd-favs .jd-favs__panel.paper-edge { padding: 70px 16px 32px; }
}

/* rank numbers 1-5 on the TOP 5 cards (operator 2026-09-30, her picture: a soft coloured circle with a white number in the upper left corner,
   yellow / blue / coral / green / lavender). CSS counter in the order of the list (N0cake first). Sale tags move right, beside the number. Since 2026-09-30 later the circle sits half outside the card's upper left corner. */
/* the number is written per card (nth-child) - a CSS counter showed 0 in iPhone Safari (operator 2026-09-30) */
body .jd-favs .wd-product .wd-product-wrapper::after {
  content: var(--jd-rank-n, "");
  position: absolute;
  z-index: 3;
  top: -18px;                                  /* half of the circle stands outside the card's rounded corner (operator 2026-09-30) */
  left: -18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jd-rank-bg, #f3c965);
  box-shadow: 0 2px 6px rgba(60, 30, 40, .12);
  color: #fff;
  font-family: "Baloo 2", var(--jd-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
body .jd-favs .wd-product:nth-child(1) { --jd-rank-bg: #f3c965; --jd-rank-n: "1"; }
body .jd-favs .wd-product:nth-child(2) { --jd-rank-bg: #8db4e0; --jd-rank-n: "2"; }
body .jd-favs .wd-product:nth-child(3) { --jd-rank-bg: #ee9591; --jd-rank-n: "3"; }
body .jd-favs .wd-product:nth-child(4) { --jd-rank-bg: #93c08c; --jd-rank-n: "4"; }
body .jd-favs .wd-product:nth-child(5) { --jd-rank-bg: #a7a3d8; --jd-rank-n: "5"; }
body .jd-favs .wd-product .product-labels { display: none; }   /* no sale / new / sold-out labels in this block (operator 2026-09-30) */
@media (max-width: 767px) {
  body .jd-favs .wd-product .wd-product-wrapper::after { top: -15px; left: -15px; width: 30px; height: 30px; font-size: 17px; }
}