/* jdtheme26 - category pages: compare products on a phone (ported 2026-10-06 from the approved preview jd-preview/category-mobile; enqueued on product archives + search only by inc/jd-card-compare.php).
   Pieces (all built from existing tokens / components, nothing new in the look):
     1  card facts      variant count + stock chip row under the title, price in ink, 44px add / heart targets
     2  sort bar        sticky 排序 + 只看現貨 row (real WooCommerce orderby / WoodMart stock_status params, plain GET, no AJAX)
     4  quick view      bottom sheet on phones / centred card on wider screens: option chips, quantity, primary button
   Option chips (.jd-opt) are the same rules as jd-product-detail.css (single product page; that sheet loads on product pages only, this one on archives):
   if the two ever load together, move them into one shared sheet. */

:root {
  --jd-opt-min-h: 48px;
  --jd-opt-radius: 14px;
  --jd-sort-h: 52px;                 /* sort bar height */
  --jd-sort-ctl-h: 44px;             /* the sort select and the in-stock chip share this height (tap target) */
  --jd-qv-z: 600;                    /* above the floating toolbar (350) and the LINE button, below nothing the visitor needs */
}

/* ------------------------------------------------------------------ 1  card facts */
.jd-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 24px;                  /* every card has the row, so price and button stay level across a row */
  margin: 0;
  color: var(--jd-ink-700);
  font-size: 12.5px;
  line-height: 1.3;
}
.jd-card-variants { color: var(--jd-ink-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jd-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--jd-butter-100);
  color: var(--jd-ink-900);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.jd-card-chip--instock { background: var(--jd-mint-100); color: var(--jd-leaf-700); }
.jd-card-chip--soldout { background: var(--jd-cream-100); color: var(--jd-ink-700); }
.wd-product.is-soldout .price { color: var(--jd-ink-500); }
.wd-product.is-soldout .wd-product-img-link img { opacity: .55; }

/* touch targets: the visible 32-40px heart keeps its size, its hit area grows to 44px */
body .wd-product .wd-buttons .wd-action-btn > a { position: relative; }
body .wd-product .wd-buttons .wd-action-btn > a::after { content: ""; position: absolute; inset: -6px; }

/* the card the visitor came back from (jd-card-compare.js, sessionStorage): a quiet outline for two seconds */
.wd-product.is-last-viewed > .wd-product-wrapper { outline: 2px solid var(--jd-ink-900); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .wd-product.is-last-viewed > .wd-product-wrapper { transition: outline-color .6s ease 1.4s; }
}

/* ------------------------------------------------------------------ 2  sort bar */
.jd-sortbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--jd-sort-h);
  margin: 0 0 var(--jd-space-xs);
  padding: 4px 0;
  background: var(--jd-page-bg);
  /* both controls use the light chip look: soft border + the card shadow family (select reads these through jd-forms.css tokens) */
  --wd-form-brd-color: var(--jd-border);
  --jd-field-h: var(--jd-sort-ctl-h);
  --jd-field-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 4px 12px rgba(60, 30, 40, .05);
}
.jd-sortbar__form { display: contents; }
.jd-sortbar__count { flex: 1 1 auto; min-width: 0; color: var(--jd-ink-700); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-sortbar__sort { flex: 0 0 auto; display: block; margin: 0; }
/* the select is the site's standard dropdown (jd-forms.css: border / height / shadow come from the tokens set on .jd-sortbar, 14px radius, white, arrow from WoodMart) */
body .jd-sortbar__select { display: block; width: 100%; min-width: 132px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.jd-sortbar__stock { position: relative; flex: 0 0 auto; display: inline-flex; margin: 0; cursor: pointer; }
.jd-sortbar__check { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jd-sortbar__pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--jd-sort-ctl-h);
  padding: 0 16px 0 12px;
  border: 1px solid var(--wd-form-brd-color);
  border-radius: 14px;                          /* the field family: same radius and border as the select next to it */
  background: var(--jd-white);
  box-shadow: var(--jd-field-shadow);
  color: var(--jd-ink-900);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.jd-sortbar__pill::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--jd-cream-300);
  border-radius: 50%;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
}
.jd-sortbar__check:checked + .jd-sortbar__pill { border-color: var(--jd-butter-400); background: var(--jd-butter-100); }
.jd-sortbar__check:checked + .jd-sortbar__pill::before {
  border-color: var(--jd-ink-900);
  background: var(--jd-ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.jd-sortbar :is(.jd-sortbar__select, .jd-sortbar__check):focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 2px; }
.jd-sortbar__check:focus-visible + .jd-sortbar__pill { outline: 2px solid var(--jd-accent); outline-offset: 2px; }
.jd-sortbar__apply { flex: none; }                             /* no-JS fallback: a normal submit button (inside <noscript>) */
@media (max-width: 379.98px) {
  .jd-sortbar__count { display: none; }
  .jd-sortbar__sort { flex: 1 1 auto; }
  .jd-sortbar__select { width: 100%; min-width: 0; }
}
@media (min-width: 768px) {
  .jd-sortbar { padding: 0; }
  .jd-sortbar__count { font-size: 14px; }
}

/* ------------------------------------------------------------------ 4  quick view */
.jd-qv[hidden] { display: none; }
.jd-qv { position: fixed; inset: 0; z-index: var(--jd-qv-z); display: flex; align-items: flex-end; justify-content: center; }
.jd-qv__backdrop { position: absolute; inset: 0; background: rgba(59, 42, 31, .45); opacity: 0; transition: opacity .2s ease; }
.jd-qv__panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px var(--jd-space-m) calc(var(--jd-space-m) + env(safe-area-inset-bottom));
  background: var(--jd-white);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(60, 30, 40, .18);
  color: var(--jd-ink-700);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2, .7, .2, 1);
}
.jd-qv.is-open .jd-qv__backdrop { opacity: 1; }
.jd-qv.is-open .jd-qv__panel { transform: none; }
.jd-qv__grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--jd-cream-200); }
.jd-qv__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jd-cream-50);
  color: var(--jd-ink-900);
  cursor: pointer;
}
.jd-qv__close svg { width: 18px; height: 18px; }
.jd-qv__close:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 2px; }
.jd-qv__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding-inline-end: 52px; margin-bottom: var(--jd-space-s); }
.jd-qv__img { width: 88px; height: 88px; border: 1px solid var(--jd-card-border); border-radius: 14px; background: var(--jd-white); overflow: hidden; }
.jd-qv__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
body .jd-qv__name { margin: 0 0 4px; color: var(--jd-ink-900); font-family: var(--jd-font-body); font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
body .jd-qv__price { margin: 0; color: var(--jd-ink-900); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.jd-qv__price del { color: var(--jd-ink-500); font-size: 14px; font-weight: 400; margin-inline-start: 6px; }
.jd-qv__state { margin: 6px 0 0; }
.jd-qv__group { margin: 0 0 var(--jd-space-s); padding: 0; border: 0; min-width: 0; }
.jd-qv__legend { padding: 0; margin: 0 0 8px; color: var(--jd-ink-900); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.jd-qv__legend span { color: var(--jd-ink-700); font-weight: 400; }
.jd-qv__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.jd-opt {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-content: center;
  justify-items: start;
  min-height: var(--jd-opt-min-h);
  padding: 8px 14px;
  border: 1px solid var(--jd-border);
  border-radius: var(--jd-opt-radius);
  background: var(--jd-white);
  color: var(--jd-ink-900);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: start;
  text-transform: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.jd-opt__price { color: var(--jd-ink-700); font-size: 13px; font-variant-numeric: tabular-nums; }
.jd-opt__tag { color: var(--jd-ink-500); font-size: 12px; }
@media (hover: hover) { .jd-opt:hover { border-color: var(--jd-ink-900); } }
.jd-opt:active { transform: scale(.98); }
.jd-opt[aria-checked="true"] { border-color: var(--jd-ink-900); box-shadow: inset 0 0 0 1px var(--jd-ink-900); background: var(--jd-butter-100); font-weight: 700; }
.jd-opt[aria-checked="true"] .jd-opt__name::after { content: " \2713"; }
.jd-opt.is-unavailable { border-style: dashed; background: var(--jd-cream-50); color: var(--jd-ink-500); cursor: not-allowed; }
.jd-opt.is-unavailable .jd-opt__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.jd-opt:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 2px; }
.jd-qv__opts.has-error .jd-opt { border-color: var(--jd-error); }
.jd-qv__msg { display: block; max-height: 0; margin: 0; overflow: hidden; color: var(--jd-error); font-size: 13px; line-height: 1.5; opacity: 0; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; }
.jd-qv__msg.is-on { max-height: 3.2em; margin-top: 8px; opacity: 1; }
.jd-qv__row { display: flex; align-items: center; gap: 12px; margin-top: var(--jd-space-s); }
.jd-qv__qty { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--jd-border); border-radius: var(--jd-btn-radius-regular); background: var(--jd-white); }
.jd-qv__qty button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--jd-ink-900); font-size: 20px; line-height: 1; cursor: pointer; }
.jd-qv__qty button:disabled { color: var(--jd-cream-300); cursor: default; }
.jd-qv__qty button:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: -2px; }
.jd-qv__limit { margin: 6px 0 0; color: var(--jd-ink-700); font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.jd-qv__qty output { min-width: 32px; color: var(--jd-ink-900); font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.jd-qv__add { --jd-btn-h: 56px; flex: 1 1 auto; justify-content: center; }
.jd-qv__add[aria-disabled="true"] { opacity: .55; }
.jd-qv__add.is-busy { opacity: .7; pointer-events: none; }
.jd-qv__more { display: block; margin-top: var(--jd-space-s); color: var(--jd-ink-900); font-size: 14px; text-align: center; text-decoration: underline; text-decoration-color: #f7c5c8; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jd-qv__more:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 4px; }
.jd-qv__loading { padding: 30px 0; color: var(--jd-ink-500); text-align: center; }
/* while the sheet is open: nothing floats over it, the page behind does not scroll */
body.jd-qv-open { overflow: hidden; }
body.jd-qv-open :is(.jd-line-fab, .wd-toolbar, .scrollToTop) { visibility: hidden; }
@media (min-width: 768px) {
  .jd-qv { align-items: center; }
  .jd-qv__panel { max-width: 460px; border-radius: var(--jd-card-radius); transform: translateY(14px); opacity: 0; transition: transform .22s ease, opacity .2s ease; }
  .jd-qv.is-open .jd-qv__panel { opacity: 1; }
  .jd-qv__grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-qv__backdrop, .jd-qv__panel, .jd-opt { transition: none; }
}

/* ------------------------------------------------------------------ empty search: category pills (inc/jd-search-synonyms.php) */
.jd-nores { margin: var(--jd-space-m) 0 var(--jd-space-l); }
.jd-nores__lead { margin: 0 0 var(--jd-space-xs); color: var(--jd-ink-900); font-weight: 600; }
.jd-nores .jd-subcats { overflow: visible; margin-bottom: 0; }
.jd-nores .jd-subcats__list { flex-wrap: wrap; width: auto; }