/* =====================================================================
   jdtheme26 - PANEL KIT (the mail-card look as reusable site components)
   Source of the look: the order e-mail cards (inc/jd-email-kit.php): white rounded card, a yellow spark before the title,
   dashed rules between rows, rounded thumbnails, a cream inset box for details.
   Every value below is a token that already exists (justdog-colors*.css, --jd-card-* in jd-product-card.css, the spacing scale
   and --jd-panel-pad / --jd-panel-gap in jd-layout.css). The few tokens declared in this file are listed under TOKENS.

   COMPONENTS
     .jd-panel                 white card: --jd-card-* border / radius / shadow, inner padding --jd-panel-pad.
     .jd-panel-stack           vertical stack of panels, gap --jd-panel-gap (use it as the parent of several panels).
     .jd-panel__title          heading with the yellow spark in front. Put it first inside a .jd-panel (h2 / h3 / div).
     .jd-rows                  list whose direct children are separated by the dashed rule (ul / div).
     .jd-thumb                 rounded thumbnail: put it on an <img> or on a wrapper that holds one <img>.
                               Sizes: (none) 56px - .jd-thumb--sm 48px.
     .jd-detail-box            cream inset box. Rows: <div class="jd-detail-box__row"><span class="jd-detail-box__label">款式</span>
                               <span class="jd-detail-box__value">996</span></div>
     .jd-line-item             thumb | name + meta | price (bold, right). Children: .jd-line-item__thumb, .jd-line-item__main,
                               .jd-line-item__name, .jd-line-item__meta, .jd-line-item__price, .jd-line-item__extra
                               (full width under the line, holds a .jd-detail-box).
     .jd-kv                    label | value rows (order number / date / payment ...). Children .jd-kv__row > .jd-kv__label + .jd-kv__value.
     .jd-totals                subtotal / shipping / total rows; the .is-total row is bold and larger.
     .jd-chip                  small status pill (butter by default; .jd-chip--mint / --blush / --cream).
   TOKENS (declared once here, :root)
     --jd-panel-spark          spark colour = --jd-butter-400 (the four-point shape --jd-spark-mask lives in jd-layout.css, loaded first on every page)
     --jd-panel-title-fs / -ls title size and letter-spacing (the site's 16px section-title step, mail letter-spacing .08em)
     --jd-rule-dashed          the dashed rule = 1px dashed --jd-cream-200
     --jd-thumb-size           thumbnail edge (modifiers redefine it), --jd-thumb-radius 10px (mail)
     --jd-detail-bg / -radius / -pad-y / -pad-x   cream box fill (--jd-cream-50), radius 12px, padding 8px 14px (mail)
     --jd-price-color          colour of every price amount; default = the theme primary (justdog-colors-fixes.css),
                               panels set it to --jd-ink-900 (mail look: bold ink price)
   From jd-layout.css: --jd-panel-pad (20px, phones 15px) and --jd-panel-gap (20px, phones 15px).
   No !important, no ID-weight selectors. Comments in English only.
   ===================================================================== */

:root {
  --jd-panel-spark: var(--jd-butter-400);
  --jd-panel-title-fs: 16px;
  --jd-panel-title-ls: .08em;
  --jd-rule-dashed: 1px dashed var(--jd-cream-200);
  --jd-thumb-size: 56px;
  --jd-thumb-radius: 10px;
  --jd-detail-bg: var(--jd-cream-50);
  --jd-detail-radius: 12px;
  --jd-detail-pad-y: 8px;
  --jd-detail-pad-x: 14px;
}

/* ---------------------------------------------------------------- panel */
.jd-panel {
  --jd-price-color: var(--jd-ink-900);   /* panels print prices in the ink colour (mail look) */
  box-sizing: border-box;
  min-width: 0;
  padding: var(--jd-panel-pad);
  border: 1px solid var(--jd-card-border);
  border-radius: var(--jd-card-radius);
  background: var(--jd-card-bg);
  box-shadow: var(--jd-card-shadow);
  color: var(--jd-ink-700);
}
.jd-panel > :last-child { margin-bottom: 0; }
.jd-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }   /* a fieldset inside a panel carries no frame of its own */
.jd-panel-stack { display: flex; flex-direction: column; gap: var(--jd-panel-gap); min-width: 0; }
.jd-panel-stack > .jd-panel { margin: 0; }                          /* the stack owns the spacing between panels (WoodMart gives some of them a top margin) */
.jd-panel-stack > wc-order-attribution-inputs { display: none; }    /* WooCommerce's empty hidden-field holder would otherwise add one flex gap */

/* inside a panel: text links are ink + underline (the teal accent #80cacb is 2:1 on white, below the 4.5:1 text minimum); focus ring on every control */
.jd-panel {
  --wd-link-color: var(--jd-ink-900);
  --wd-link-color-hover: var(--jd-ink-700);
}
.jd-panel :is(p, label, address, li, .jd-detail-box) a:not(.jd-btn, .jd-line-item__name, .jd-order__no) { text-decoration: underline; text-underline-offset: 3px; }
.jd-panel :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- title with the spark */
.jd-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--jd-space-xs);
  padding: 0;
  color: var(--jd-ink-900);
  font-size: var(--jd-panel-title-fs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--jd-panel-title-ls);
  text-transform: none;
}
.jd-panel__title::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: var(--jd-panel-spark);
  -webkit-mask: var(--jd-spark-mask) center / contain no-repeat;
          mask: var(--jd-spark-mask) center / contain no-repeat;
}

/* ---------------------------------------------------------------- dashed rules */
.jd-rows { margin: 0; padding: 0; list-style: none; }
.jd-rows > * { margin: 0; }
.jd-rows > * + * { border-top: var(--jd-rule-dashed); }

/* ---------------------------------------------------------------- thumbnail */
.jd-thumb {
  box-sizing: border-box;
  display: block;
  flex: none;
  width: var(--jd-thumb-size);
  height: var(--jd-thumb-size);
  overflow: hidden;
  border: 1px solid var(--jd-card-border);
  border-radius: var(--jd-thumb-radius);
  background: var(--jd-cream-50);
  object-fit: cover;
}
.jd-thumb > img, .jd-thumb > .jd-hover-wrap, .jd-thumb > .jd-hover-wrap > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-thumb--sm { --jd-thumb-size: 48px; }

/* ---------------------------------------------------------------- cream detail box */
.jd-detail-box {
  box-sizing: border-box;
  padding: var(--jd-detail-pad-y) var(--jd-detail-pad-x);
  border-radius: var(--jd-detail-radius);
  background: var(--jd-detail-bg);
}
.jd-detail-box__row { display: flex; gap: var(--jd-detail-pad-x); padding: 4px 0; font-size: 13px; line-height: 1.6; }
.jd-detail-box__label { flex: none; max-width: 45%; color: var(--jd-ink-500); }
.jd-detail-box__value { min-width: 0; color: var(--jd-ink-900); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- line item (mail "商品內容" row) */
.jd-line-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--jd-space-s);
  align-items: start;
  padding: var(--jd-space-xs) 0;
}
.jd-line-item__thumb { grid-column: 1; }
.jd-line-item__main { grid-column: 2; min-width: 0; }
.jd-line-item__price { grid-column: 3; color: var(--jd-ink-900); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.jd-line-item__name { display: block; color: var(--jd-ink-900); line-height: 1.5; overflow-wrap: anywhere; text-decoration: none; }
.jd-line-item__meta { display: block; margin-top: 2px; color: var(--jd-ink-500); font-size: 12px; line-height: 1.5; }
.jd-line-item__extra { grid-column: 1 / -1; margin-top: var(--jd-space-xs); }

/* ---------------------------------------------------------------- label | value rows */
.jd-kv { margin: 0; padding: 0; }
.jd-kv__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--jd-space-s); padding: 6px 0; line-height: 1.7; }
.jd-kv__label { margin: 0; color: var(--jd-ink-500); font-size: 14px; font-weight: 400; }
.jd-kv__value { margin: 0; color: var(--jd-ink-900); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.jd-kv mark { padding: 0; background: none; color: inherit; }   /* WoodMart highlights <mark>; WooCommerce prints the order number / date / status in it */

/* ---------------------------------------------------------------- totals */
.jd-totals { margin: var(--jd-space-xs) 0 0; padding: var(--jd-space-xs) 0 0; border-top: var(--jd-rule-dashed); }
.jd-totals__row { font-variant-numeric: tabular-nums; display: flex; align-items: baseline; justify-content: space-between; gap: var(--jd-space-s); padding: 5px 0; color: var(--jd-ink-500); }
.jd-totals__row > :last-child { color: var(--jd-ink-900); font-weight: 600; text-align: end; }
.jd-totals__row.is-total { color: var(--jd-ink-900); font-size: 16px; font-weight: 700; }
.jd-totals__row.is-total > :last-child { font-weight: 700; }

/* ---------------------------------------------------------------- status chip */
.jd-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--jd-butter-100);
  color: var(--jd-ink-900);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
  white-space: nowrap;
}
.jd-chip--mint { background: var(--jd-mint-100); }
.jd-chip--blush { background: var(--jd-blush-100); }
.jd-chip--cream { background: var(--jd-cream-100); }

/* narrow phones: the price drops under the name so the name column keeps a readable width */
@media (max-width: 479.98px) {
  .jd-line-item { grid-template-columns: auto minmax(0, 1fr); }
  .jd-line-item__price { grid-column: 2; grid-row: 2; margin-top: 2px; text-align: start; }
  .jd-line-item__extra { grid-row: 3; }
}

/* phones: label column of the label / value rows one step narrower */
@media (max-width: 767.98px) {
  .jd-kv__row { grid-template-columns: 80px minmax(0, 1fr); }
}