/* =====================================================================
   JUST DOG - product card and the default "card" surface (2026-09-29, operator mock-up + CSS).
   Card = white surface, hairline border, 20px corners, two soft shadows; inside: photo, title, then ONE block with price and
   (only if the product has ratings) stars on the left and a square add-to-cart icon button on the lower right;
   wishlist heart on the photo's upper right. No quick view, no compare on the card.
   Structure = Theme Settings products_hover "standard" (build/scripts/header-and-colors/cards-standard.php).
   Applies to every .wd-product card: shop / category / search grids, related + upsells.
   History: "Kids" card with a tinted tile 2026-09-26 .. 2026-09-29 (copy of that file:
   build/frozen/backup-20260928-home-layout/jd-product-card.pre-white-card.css).

   Spacing, button and icon positions = the design reference (wiki sources/2026-09-29-product-card/Main.dc.html, a 309px card):
   padding 20 / 22 / 22, 10px between the parts, photo 12px lower, label at 18 / 18 (the heart follows the production site instead: white 40px square on the photo's corner),
   (the reference's full-width pill was replaced the same day by an icon button: no background, black icon, 20px corners). Narrow cards (phones, two per row) scale these down with the card's width.

   THE DEFAULT CARD SURFACE for any block:  class="jd-card"   (tokens below)
   ===================================================================== */
:root {
  --jd-card-bg: #fff;
  --jd-card-border: #f2eeef;
  --jd-card-radius: 20px;
  --jd-card-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06);
  --jd-page-bg: #fcfbfb;
}
.jd-card,
.wd-product .wd-product-wrapper {
  background: var(--jd-card-bg);
  border: 1px solid var(--jd-card-border);
  border-radius: var(--jd-card-radius);
  box-shadow: var(--jd-card-shadow);
}

/* page background of the pages that show product cards */
body:is(.woocommerce-page, .woocommerce, .search-results),
body:is(.woocommerce-page, .woocommerce, .search-results) :is(.website-wrapper, .wd-page-wrapper, .wd-page-content) { background-color: var(--jd-page-bg); }
/* cart, checkout and the product page stay white (operator 2026-09-30) */
body:is(.woocommerce-cart, .woocommerce-checkout, .single-product),
body:is(.woocommerce-cart, .woocommerce-checkout, .single-product) :is(.website-wrapper, .wd-page-wrapper, .wd-page-content) { background-color: #fff; }
/* store notices and the product names of the checkout order table (operator 2026-09-30) */
body :is(.woocommerce-error, .woocommerce-info) { font-size: 13px; }
body .woocommerce-checkout-review-order-table .cart_item .product-name { font-size: 12px; }

/* ---- the card ---- */
.wd-product { container-type: inline-size; display: flex; flex-direction: column; }
/* cards of one row are equally high, with or without stars */
body .wd-products > .wd-product { align-self: stretch; height: auto; }
body .wd-product > .wd-product-wrapper { flex: 1 1 auto; }
body .wd-product .wd-product-wrapper {
  --jd-card-pt: clamp(10px, 7.1cqw, 20px);
  --jd-card-px: clamp(10px, 7.8cqw, 22px);
  --jd-card-pb: clamp(10px, 7.8cqw, 22px);
  --jd-card-img-mt: clamp(2px, 4.2cqw, 12px);
  --jd-card-gap: clamp(6px, 3.5cqw, 10px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--jd-card-gap);
  height: 100%;
  box-sizing: border-box;
  padding: var(--jd-card-pt) var(--jd-card-px) var(--jd-card-pb);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .wd-product:hover .wd-product-wrapper {
    box-shadow: 0 1px 2px rgba(60, 30, 40, .05), 0 12px 30px rgba(60, 30, 40, .1);
    transform: translateY(-2px);
  }
}

/* photo */
body .wd-product .product-element-top {
  margin: var(--jd-card-img-mt) 0 0;
  border-radius: 12px;
  background: none;
  padding: 0;
  overflow: visible;                     /* the heart and the labels stand partly outside the photo, on the card's padding */
}
.wd-product .product-element-top .hover-img { inset: 0; border-radius: 12px; overflow: hidden; }
.wd-product .product-element-top .product-image-link img,
.wd-product .product-element-top .hover-img img { border-radius: 12px; }

/* wishlist heart = the production site's: a 40px white square, heart #fe7a7b (outline before adding, filled after - see below). It stands in the card's upper right
   corner, 6px from the card's edges — mostly on the card's padding, only its lower left part lies over the photo's corner.
   The white ground keeps it readable where it covers the photo. */
body .wd-product.wd-hover-standard .wd-buttons {
  top: calc(clamp(3px, 2.1cqw, 6px) - var(--jd-card-pt) - var(--jd-card-img-mt));
  inset-inline-end: calc(clamp(3px, 2.1cqw, 6px) - var(--jd-card-px));
  padding: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
body .wd-product.wd-hover-standard .wd-buttons .wd-action-btn > a {
  width: clamp(32px, 15cqw, 40px);
  height: clamp(32px, 15cqw, 40px);
  border-radius: 12px;
  background-color: #fff;
  color: #fe7a7b;
}
body .wd-product.wd-hover-standard .wd-buttons .wd-action-btn > a .wd-action-icon,
body .wd-product.wd-hover-standard .wd-buttons .wd-action-btn > a::before { font-size: clamp(17px, 7.5cqw, 20px); }
body .wd-product.wd-hover-standard .wd-buttons .wd-wishlist-btn > a:is(:hover, :focus, .added, .loading) { background-color: #fff; color: #fe7a7b; }
/* the glyph itself is the icon span's ::before and carries its own colour */
body .wd-product.wd-hover-standard .wd-buttons .wd-wishlist-btn > a .wd-action-icon::before,
body .wd-product.wd-hover-standard .wd-buttons .wd-wishlist-btn > a:is(:hover, :focus, .added, .loading) .wd-action-icon::before { color: #fe7a7b !important; }
/* ADDED TO THE WISHLIST (operator 2026-09-30) - everywhere, not only on cards: no tick badge (WoodMart's small round tick in the
   theme's primary colour); the heart itself is filled instead. The filled heart is drawn as a mask over the icon's own glyph, in the
   glyph's colour (pink), so it has the outline heart's size and place. */
body .wd-wishlist-btn > a.added .wd-check-icon { display: none; }
body .wd-wishlist-btn > a.added:not(.loading) .wd-action-icon::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2l-1.5-1.3C5.2 15.2 2 12.3 2 8.6 2 5.7 4.3 3.4 7.2 3.4c1.7 0 3.4.8 4.8 2.4 1.4-1.6 3.1-2.4 4.8-2.4C19.7 3.4 22 5.7 22 8.6c0 3.7-3.2 6.6-8.5 11.3L12 21.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2l-1.5-1.3C5.2 15.2 2 12.3 2 8.6 2 5.7 4.3 3.4 7.2 3.4c1.7 0 3.4.8 4.8 2.4 1.4-1.6 3.1-2.4 4.8-2.4C19.7 3.4 22 5.7 22 8.6c0 3.7-3.2 6.6-8.5 11.3L12 21.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: jd-heart-fill .3s ease-out;
}
@keyframes jd-heart-fill {
  0% { transform: scale(.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body .wd-wishlist-btn > a.added .wd-action-icon::before { animation: none; }
}
/* labels: 18px from the card's upper left corner */
body .wd-product .product-labels {
  top: calc(clamp(8px, 6cqw, 18px) - var(--jd-card-pt) - var(--jd-card-img-mt));
  inset-inline-start: calc(clamp(8px, 6cqw, 18px) - var(--jd-card-px));
}
/* no quick view, no compare on the card */
body .wd-product.wd-hover-standard .wd-buttons > :is(.wd-quick-view-btn, .wd-compare-btn) { display: none; }

/* every text inside a card: no letter-spacing (operator 2026-09-29; the site's default is .15em) */
body .wd-product,
body .wd-product :is(*, *::before, *::after) { letter-spacing: 0; }

/* text block: title across, then price + stars on the left and the add-to-cart icon on the lower right */
.wd-product .product-element-bottom {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;             /* 2026-09-30 (operator: a big gap between title and price): the price follows the title; */
  grid-auto-rows: auto;                  /* the spare height of a shorter card stays below everything. The title keeps a two-line box, */
  align-content: start;                  /* so price and button still stand at one height across a row. */
  align-items: end;
  column-gap: 10px;
  row-gap: clamp(3px, 2cqw, 6px);
  padding: 0;
  text-align: start;
}
.wd-product .product-element-bottom > * { grid-column: 1 / -1; margin: 0; }
.wd-product .product-element-bottom > .wd-entities-title { order: 1; align-self: start; }
.wd-product .product-element-bottom > :not(.wd-entities-title, .price, .star-rating, .wd-add-btn) { order: 2; }
.wd-product .product-element-bottom > .price { order: 3; grid-column: 1; }
.wd-product .product-element-bottom > .star-rating { order: 4; grid-column: 1; margin-inline: 0; }
.wd-product .product-element-bottom > .jd-card-rating { order: 4; grid-column: 1; }
/* rating 「★ 4.8 (892)」 (operator 2026-09-30, her picture; markup inc/jd-card-rating.php): one star in the site's star yellow #FCDC74, the average, the count in grey */
.wd-product .jd-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--jd-font-body);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
}
.wd-product .jd-card-rating__star {
  flex: none;
  width: 13px;
  height: 13px;
  background: #fcdc74;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.3 1.3-6.6L2.5 9.1l6.6-.8z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.3 1.3-6.6L2.5 9.1l6.6-.8z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wd-product .jd-card-rating__avg { color: var(--jd-ink-900, #3b2a1f); font-weight: 600; }
.wd-product .jd-card-rating__count { color: #8a7a6d; font-size: 12px; }
/* stars 10px on every product card (operator 2026-09-30) - the stars are the font-size of .star-rating */
body .wd-product .star-rating { font-size: 10px; }
.wd-product .product-element-bottom > .wd-add-btn {
  order: 3;
  grid-column: 2;
  grid-row: span 2;
  align-self: end;
  justify-self: end;
}

.wd-product .wd-entities-title,
.wd-product .wd-entities-title a {
  font-family: var(--jd-font-body);
  font-weight: 600;
  color: var(--jd-text-title);
}
/* title 15.5px (operator 2026-09-30; 14px earlier the same day, 15px before), line height 1.2, at most two lines - a longer title ends in … */
body .wd-product .wd-entities-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em;                     /* two lines, so that price and button stand at the same height in every card of a row */
  margin-top: 10px !important;           /* operator 2026-09-30 */
  font-size: 15.5px;
  line-height: 1.2;
}
/* never a third line (operator 2026-09-30, iPhone: part of a third line showed under the "…"): Safari does not always clip a clamped box,
   so the box is exactly two lines high and clipped at its lower edge whatever the browser does with line-clamp */
body .wd-product .wd-entities-title {
  display: -webkit-box !important;
  max-height: 2.4em;
  clip-path: inset(-4px -4px 0 -4px);
}
body .wd-product .wd-entities-title a { font-size: inherit; line-height: inherit; }
/* price: the title's font, 15px, bold — regular, sale and crossed-out price alike (operator 2026-09-29; weight 700 -> 400 -> bold the same day) */
body .wd-product .price,
body .wd-product .price :is(ins, del, .amount, bdi, span) {
  font-family: var(--jd-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;                      /* operator 2026-09-30 */
}
/* the currency sign 「NT$」 in front of every card price: 14px (operator 2026-09-30); the figure stays 15px */
body .wd-product .price .woocommerce-Price-currencySymbol { font-size: 14px; }
.wd-product .price { color: var(--jd-accent); }
.wd-product .price ins,
.wd-product .price ins .amount { color: var(--jd-sale); }
.wd-product .price del,
.wd-product .price del .amount { color: var(--jd-text-muted); }

/* add to cart: a square icon button (WoodMart's .wd-add-btn-replace), label kept for screen readers */
body .wd-product .wd-add-btn > a.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 15.5cqw, 44px);
  height: clamp(36px, 15.5cqw, 44px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-color: #feeab7;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
  color: #000;
  font-size: clamp(16px, 7cqw, 20px);
  overflow: hidden;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body .wd-product .wd-add-btn > a.button:hover { background-color: #fde19a; color: #000; box-shadow: 1px 2px 4px rgba(0, 0, 0, .14); }
body .wd-product .wd-add-btn > a.button .wd-action-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the button draws its three states itself (cart / working / done) in ::after; WoodMart's own state icon and spinner are not used */
body .wd-product .wd-add-btn > a.button .wd-action-icon { display: none; }
body .wd-product .wd-add-btn > a.button::before { content: none; }
body .wd-product .wd-add-btn > a.button::after {
  content: "";
  flex: none;
  width: 1.125em;
  height: 1.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the wishlist plugin's text link under the card: not shown (the heart on the photo is the wishlist) */
.wd-product .product-element-bottom .tinv-wraper { display: none; }

/* product title font wherever a product name is printed as a title */
body .product_title.entry-title,
body .wd-entities-title { font-family: var(--jd-font-body); }

/* ---- add to cart: movement (CSS; assets/js/jd-cart-fx.js adds the classes jd-cart-pop / jd-cart-bump) ----
   pointing at it   the button lifts, the cart icon rolls a little
   pressing         the button goes down
   working          a turning ring in the button (class .loading)
   done             the button pops, a ring spreads from it, a tick replaces the cart (class .added); the cart counters in the header and the
                    bottom toolbar bump
   Nothing moves for visitors who ask for reduced motion. */
@keyframes jd-cart-roll { 0%, 100% { transform: none; } 30% { transform: translateX(-2px) rotate(-10deg); } 65% { transform: translateX(3px) rotate(6deg); } }
@keyframes jd-cart-pop { 0% { transform: scale(1); } 35% { transform: scale(.86); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes jd-cart-ring { 0% { box-shadow: 0 0 0 0 rgba(254, 214, 110, .7); } 100% { box-shadow: 0 0 0 16px rgba(254, 214, 110, 0); } }
@keyframes jd-cart-bump { 0%, 100% { transform: none; } 30% { transform: scale(1.45) translateY(-2px); } 60% { transform: scale(.92); } }
/* working: a turning ring instead of the cart */
body .wd-product .wd-add-btn > a.button.loading::after {
  -webkit-mask: none;
          mask: none;
  background: none;
  border: 2px solid rgba(0, 0, 0, .2);
  border-top-color: #000;
  border-radius: 50%;
  box-sizing: border-box;
  animation: jd-cart-spin .7s linear infinite;
}
/* done: a tick instead of the cart */
body .wd-product .wd-add-btn > a.button.added:not(.loading)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes jd-cart-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    body .wd-product .wd-add-btn > a.button:hover { transform: translateY(-2px); }
    body .wd-product .wd-add-btn > a.button:hover::after { animation: jd-cart-roll .6s ease; }
  }
  body .wd-product .wd-add-btn > a.button:active { transform: translateY(1px) scale(.94); }
  body .wd-product .wd-add-btn > a.button.jd-cart-pop { animation: jd-cart-pop .5s cubic-bezier(.2, .7, .2, 1), jd-cart-ring .7s ease-out; }
  body .wd-tools-element .wd-tools-count.jd-cart-bump { animation: jd-cart-bump .55s cubic-bezier(.2, .7, .2, 1); }
}