/* jdtheme26 - side cart + cart remove control + free-shipping progress bar (operator-approved cart-account preview, 2026-10-06).
   Small sheet loaded on EVERY page (the side cart exists everywhere): trash icon for the remove controls, the side-cart row grid, the
   free-shipping progress bar (markup: inc/jd-free-ship.php, animation: assets/js/jd-mini-cart.js) and nothing else shared (the spark shape token --jd-spark-mask lives in jd-layout.css).
   Tokens only; every motion is wrapped for prefers-reduced-motion. Comments in English only, no !important except the reduced-motion kill-switch. */

/* ======================= trash icon: remove control of the side cart and the cart page ======================= */
:root {
  --jd-trash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E");   /* same 24px / 1.6 stroke / round line style as the account menu icons (jd-account.css) */
}
a.remove.jd-remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--jd-ink-500);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
a.remove.jd-remove::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: var(--jd-trash-icon) center / contain no-repeat;
          mask: var(--jd-trash-icon) center / contain no-repeat;
}
a.remove.jd-remove::after { content: none; }                  /* WoodMart draws its x with a font glyph on ::after */
@media (hover: hover) { a.remove.jd-remove:hover { color: var(--jd-error); background-color: var(--jd-error-bg); } }
a.remove.jd-remove:focus-visible { color: var(--jd-error); background-color: var(--jd-error-bg); outline: 2px solid var(--jd-accent); outline-offset: 2px; }
/* side-cart row (operator 2026-10-06): name on top, the 數量 x 金額 line at the bottom of the row with the trash icon on the same line, right.
   The row is a grid; .cart-info is dissolved (display: contents) so its name and quantity become grid items. Row 2 is at least 32px, so a
   1-2 line name keeps the row at the thumbnail's height and a 3-line name makes the row grow (the bottom line never collides with the name). */
body .woocommerce-mini-cart > li.mini_cart_item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  grid-template-rows: auto minmax(32px, 1fr);
  align-items: start;
}
body .woocommerce-mini-cart > li .cart-item-image { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
body .woocommerce-mini-cart > li .cart-info { display: contents; }
body .woocommerce-mini-cart > li .cart-info > .wd-entities-title { grid-column: 2 / span 2; grid-row: 1; margin: 0; }
body .woocommerce-mini-cart > li .cart-info > span.quantity { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
body .woocommerce-mini-cart > li a.remove.jd-remove {
  position: static;
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin: 0 -8px -12px 0;              /* the 28px glyph sits 8px inside its 44px box: glyph edge = row edge; box centre = the quantity line centre */
}
@media (max-width: 767.98px) { body.woocommerce-cart .woocommerce-cart-form__cart-item .product-name { padding-inline-end: 44px; } }   /* room for the 44px trash button on the name row */
.woocommerce-mini-cart > li.mini_cart_item.is-removing { overflow: hidden; opacity: 0; height: 0; padding-block: 0; margin: 0; border: 0; transition: height .25s ease, opacity .2s ease, padding .25s ease; }   /* M4 */

/* ======================= 4 free-shipping progress ======================= */
.jd-ship-bar { margin: 0 0 var(--jd-space-s); }
.jd-ship-bar__text { margin: 0 0 8px; color: var(--jd-ink-900); font-size: 13px; line-height: 1.5; letter-spacing: .04em; }
.jd-ship-bar__text strong { font-variant-numeric: tabular-nums; }
.jd-ship-bar__track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--jd-cream-100); }
.jd-ship-bar__fill { height: 100%; width: var(--p, 0%); border-radius: 999px; background: var(--jd-butter-400); transition: width .45s cubic-bezier(.22, .61, .36, 1); }
.jd-ship-bar.is-done .jd-ship-bar__fill { background: var(--jd-mint-400); }
.jd-ship-bar .jd-spark { display: none; }
.jd-ship-bar.is-done .jd-spark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  background: var(--jd-butter-400);
  -webkit-mask: var(--jd-spark-mask, none) center / contain no-repeat;
          mask: var(--jd-spark-mask, none) center / contain no-repeat;
  animation: jd-pop .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes jd-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .jd-ship-bar .jd-spark { animation: none !important; }   /* !important: reduced-motion kill-switch */
  .jd-ship-bar__fill, a.remove.jd-remove, .woocommerce-mini-cart > li.mini_cart_item.is-removing { transition: none; }
}