/* jdtheme26 — sub-category buttons on product category pages (2026-09-28).
   Operator: prod's "sub-cat" pills (All / 零食 / 肉泥 / 飼料乾糧 / 罐頭餐包) 「加到new站並且把按鈕背景色改成fcf1ed」, 「手機版能橫向捲軸」.
   Markup: [jd_subcats] → <nav class="jd-subcats"><ul class="jd-subcats__list"><li class="jd-subcat [is-current]"><a>. Printed by functions.php.
   Shape copied from prod (pill, radius 20px, padding 10px 20px, bold, 10px apart, ONE row that scrolls sideways, scrollbar hidden).
   Colours: button #fcf1ed (operator-given); the current button = the ink colour with white text (prod: orange #f19820 + white). */

.jd-subcats {
  --jd-subcat-bg: #fcf1ed;
  margin: 0 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                    /* Firefox */
  scroll-behavior: smooth;
}
.jd-subcats::-webkit-scrollbar { display: none; }

body .jd-subcats .jd-subcats__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 2px 0;                           /* room for the focus ring */
  list-style: none;
  width: max-content;                       /* the row is as long as its buttons; the nav scrolls */
  min-width: 100%;
}
body .jd-subcats .jd-subcat {
  flex: none;
  margin: 0;
  padding: 0;
}
body .jd-subcats .jd-subcat::before { content: none; }   /* theme list markers */

body .jd-subcats .jd-subcat > a {
  display: block;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: var(--jd-subcat-bg);
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  body .jd-subcats .jd-subcat > a:hover { background-color: #f7e0d8; }
}
body .jd-subcats .jd-subcat > a:focus-visible {
  outline: 2px solid var(--jd-ink-900, #3b2a1f);
  outline-offset: 1px;
}
body .jd-subcats .jd-subcat.is-current > a,
body .jd-subcats .jd-subcat.is-current > a:hover {
  background-color: var(--jd-ink-900, #3b2a1f);
  color: #fff;
}

@media (max-width: 768px) {
  .jd-subcats { margin-bottom: 18px; }
  body .jd-subcats .jd-subcat > a { padding: 9px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-subcats { scroll-behavior: auto; }
  body .jd-subcats .jd-subcat > a { transition: none; }
}

/* ---- [jd_catnav] (2026-09-28): main categories row + sub-category row, pinned under the sticky header ----
   .jd-catnav       keeps the block's place in the page (assets/js/jd-catnav.js gives it the bar's height while the bar is pinned)
   .jd-catnav__bar  the part that gets pinned: position fixed, full window width, under the sticky header bar
                    (--jd-catnav-top = height of the sticky header / admin bar, --jd-catnav-x = the content's left offset; both set by the script)
   Same pills for both rows (operator: 「跟子分類一樣的tag按鈕形式」). */
.jd-catnav { position: relative; }
.jd-catnav .jd-subcats { margin: 0; }
.jd-catnav .jd-subcats + .jd-subcats { margin-top: 10px; }
/* no background of its own in its place (operator 2026-09-29) — the page's colour shows; white while pinned. */
.jd-catnav__bar { background: none; }

.jd-catnav.is-stuck .jd-catnav__bar {
  position: fixed;
  z-index: 340;                                   /* under the sticky header (and its dropdowns), the scroll-to-top / LINE buttons (350) and every panel */
  top: var(--jd-catnav-top, 0px);
  left: 0;
  right: 0;
  padding: 10px var(--jd-catnav-x, 15px);
  background-color: #fff;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .18);
}
.jd-catnav.is-stuck .jd-catnav__inner { max-width: var(--jd-catnav-w, none); }
/* out of the way while WoodMart's full-screen search or a side panel is open */
.wd-search-opened .jd-catnav.is-stuck .jd-catnav__bar { display: none; }

/* desktop (the header shows the main categories as the menu): the bar holds the SUB-categories only; a category without sub-categories shows no bar */
@media (min-width: 1025px) {
  .jd-catnav .jd-subcats--main { display: none; }
  .jd-catnav .jd-subcats--main + .jd-subcats { margin-top: 0; }
  .jd-catnav:not(:has(.jd-subcats:not(.jd-subcats--main))) { display: none; }
}

@media (max-width: 768px) {
  .jd-catnav .jd-subcats + .jd-subcats { margin-top: 8px; }
  .jd-catnav.is-stuck .jd-catnav__bar { padding-block: 8px; }
}
@media print {
  .jd-catnav.is-stuck .jd-catnav__bar { position: static; box-shadow: none; padding: 0; }
}

/* ---- Desktop: pills centred (operator 2026-09-28: 「桌機版請將tag按鈕置中」) ----
   The list is at least as wide as the row (min-width: 100%), so centring only shows when the pills fit; a row that overflows still starts at its first pill. */
@media (min-width: 1025px) {
  body .jd-subcats .jd-subcats__list { justify-content: center; }
}

/* ---- "this row scrolls sideways" cue (operator 2026-09-28: 「怕user不知道這個tag可以往右滑 … 更直覺但有質感的方式」) ----
   Three quiet signals, all driven by assets/js/jd-catnav.js, shown ONLY while there really is more to see on that side:
     1. the row FADES OUT towards the side that continues (mask on the scroller) — the last pill is visibly cut, not just clipped;
     2. a small round arrow button sits on that fade (white, soft shadow) — tap / click scrolls the row by about one screen of pills;
     3. once per visit, the first row that overflows slides 26px to the left and back ("peek"), 0.7s after the page is shown.
   .jd-subcats-view = wrapper added by the script around each scroller (the buttons must not scroll with the pills).
   Classes on the wrapper: .has-more-end (more to the right), .has-more-start (more to the left). */
.jd-subcats-view {
  --jd-cue-fade: 56px;
  position: relative;
}
.jd-catnav .jd-subcats-view + .jd-subcats-view { margin-top: 10px; }
.jd-subcats-view > .jd-subcats { margin: 0; }
.jd-subcats-view:not(.jd-catnav *) { margin: 0 0 24px; }

.jd-subcats-view.has-more-end > .jd-subcats {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--jd-cue-fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--jd-cue-fade)), transparent);
}
.jd-subcats-view.has-more-start > .jd-subcats {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade));
          mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade));
}
.jd-subcats-view.has-more-start.has-more-end > .jd-subcats {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade), #000 calc(100% - var(--jd-cue-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--jd-cue-fade), #000 calc(100% - var(--jd-cue-fade)), transparent);
}

body .jd-subcats-cue {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(59, 42, 31, .08);
  border-radius: 50%;
  background-color: #fff;
  color: var(--jd-ink-900, #3b2a1f);
  box-shadow: 0 2px 8px rgba(59, 42, 31, .16);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(.85);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  -webkit-tap-highlight-color: transparent;
}
body .jd-subcats-cue--end   { right: 0; }
body .jd-subcats-cue--start { left: 0; }
body .jd-subcats-cue svg { display: block; width: 12px; height: 12px; }
body .jd-subcats-cue--start svg { transform: scaleX(-1); }
.jd-subcats-view.has-more-end > .jd-subcats-cue--end,
.jd-subcats-view.has-more-start > .jd-subcats-cue--start {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
@media (hover: hover) {
  body .jd-subcats-cue:hover { background-color: #fff; color: var(--jd-ink-900, #3b2a1f); box-shadow: 0 3px 12px rgba(59, 42, 31, .24); }
}
body .jd-subcats-cue:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 2px; }

/* the "peek": the row slides a little and comes back, once */
@keyframes jd-subcats-peek {
  0%, 100% { transform: translateX(0); }
  45%      { transform: translateX(-26px); }
}
.jd-subcats-view.is-peeking .jd-subcats__list { animation: jd-subcats-peek .9s cubic-bezier(.45, .05, .25, 1) 1; }
/* the arrow breathes twice together with the peek */
@keyframes jd-subcats-cue-breathe {
  0%, 100% { box-shadow: 0 2px 8px rgba(59, 42, 31, .16); }
  50%      { box-shadow: 0 2px 8px rgba(59, 42, 31, .16), 0 0 0 6px rgba(59, 42, 31, .07); }
}
.jd-subcats-view.is-peeking > .jd-subcats-cue--end { animation: jd-subcats-cue-breathe .9s ease 2; }

@media (max-width: 768px) {
  .jd-subcats-view { --jd-cue-fade: 48px; }
  .jd-catnav .jd-subcats-view + .jd-subcats-view { margin-top: 8px; }
  .jd-subcats-view:not(.jd-catnav *) { margin-bottom: 18px; }
  body .jd-subcats-cue { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body .jd-subcats-cue { transition: none; }
  .jd-subcats-view.is-peeking .jd-subcats__list,
  .jd-subcats-view.is-peeking > .jd-subcats-cue--end { animation: none; }
}
@media print {
  .jd-subcats-cue { display: none !important; }
  .jd-subcats-view > .jd-subcats { -webkit-mask-image: none !important; mask-image: none !important; }
}