/* ==========================================================================
   JUST DOG — colour layer, selector corrections (2026-09-26)
   Same values as justdog-colors.css §3 (tokens only, COLOUR properties only) —
   only the selector weight differs. Each rule below LOSES in Woodmart 8.6.2 when
   written as in the spec, because Woodmart either prints the colour in an inline
   <style> after every stylesheet (Theme Settings CSS) or has a higher-specificity
   / later-loaded part-CSS rule. Verified with a rule-by-rule computed-style check.
   Loaded after justdog-colors.css.
   ========================================================================== */

/* Footer — Woodmart prints `.wd-footer{background-color:…}` inline.
   Operator 2026-09-26: footer + copyright bar + the arc band above the footer (a home-page row) are #FAE8E8 —
   the ONE colour in this layer that is not in the JUST DOG palette (given explicitly by the operator). */
:root { --jd-footer-bg: #FAE8E8; }
.wd-footer.footer-container { background-color: var(--jd-footer-bg); }
.copyrights-wrapper { background-color: var(--jd-footer-bg); }

/* Count badges (cart / wishlist) — `.wd-tools-element:is(.wd-design-2,.wd-design-5) .wd-tools-count` paints --wd-primary-color.
   Operator 2026-09-26: badge background #F7C5C8 (2nd colour of this layer that is not in the palette, given explicitly).
   Text is ink-900 instead of white: white on this light pink is ~1.5:1, ink-900 on it is ~9:1. */
:root { --jd-badge-bg: #fce7a8; }   /* operator 2026-09-29 (was #F7C5C8 since 2026-09-26) */
body .wd-tools-element .wd-tools-count.wd-tools-count { background-color: var(--jd-badge-bg); color: var(--jd-ink-900); }

/* Product labels — woo-mod-product-labels-default.css is loaded after our file.
   Operator 2026-09-26 (「不同促銷tag的配色都要跟他一樣」): sale / new / hot use the Kids demo's own tag colours, white text — three more
   NON-palette colours of this layer, taken over on instruction (contrast of white on them: sale 2.6:1, new 2.4:1, hot 2.3:1 — as in the Kids demo).
   Before: sale = blush-600, HOT = butter-300, NEW = mint-100. */
:root { --jd-tag-sale: #7EA4DE; --jd-tag-new: #ABBA81; --jd-tag-hot: #E3A28D; }
.product-label.onsale.onsale             { background-color: var(--jd-tag-sale);    color: var(--jd-white); }
.product-label.featured.featured         { background-color: var(--jd-tag-hot);     color: var(--jd-white); }
.product-label.new.new                   { background-color: var(--jd-tag-new);     color: var(--jd-white); }
.product-label.out-of-stock.out-of-stock { background-color: var(--jd-cream-100);   color: var(--jd-text-muted); }

/* Stock text — inline `p.stock.wd-style-default:is(.available-on-backorder,.in-stock)` */
body p.stock.wd-style-default.in-stock,  body .stock.in-stock     { color: var(--jd-leaf-700); }
body p.stock.wd-style-default.out-of-stock, body .stock.out-of-stock { color: var(--jd-error); }

/* Prices in product-card info blocks are painted `var(--wd-primary-color)` by an inline rule */
body .price { color: var(--jd-text-title); }

/* Required asterisks — WooCommerce/Woodmart form rules are more specific than `.required` */
body abbr.required, body .required { color: var(--jd-error); }

/* Operator decision 2026-09-26: the spec maps --color-gray-300 to cream-300 (#978169), but Woodmart uses gray-300 for small
   meta text (post dates, "(選填)") → 3.5–3.7:1. Use ink-500 (5.4:1). Border variables keep cream-300 (--brdcolor-gray-500). */
body { --color-gray-300: var(--jd-ink-500); }

/* --------------------------------------------------------------------------
   Woodmart re-defines the WHOLE grey scale inside every "dark text" colour scheme
   (`.color-scheme-dark`: info boxes, page-title band, popups, …) and the header-row nav colour inside
   `.whb-color-dark`. Those scoped values (#333 / #242424 / #767676 / #a5a5a5 …) beat the palette mapping
   that justdog-colors.css sets on <body>. Same mapping as the spec's §2 (+ the operator's gray-300 decision),
   applied inside that scope. Colour custom properties only.
   -------------------------------------------------------------------------- */
.color-scheme-dark {
  --color-gray-100:  var(--jd-cream-100);
  --color-gray-200:  var(--jd-cream-200);
  --color-gray-300:  var(--jd-ink-500);
  --color-gray-400:  var(--jd-text-muted);
  --color-gray-500:  var(--jd-text-muted);
  --color-gray-600:  var(--jd-text);
  --color-gray-700:  var(--jd-text);
  --color-gray-800:  var(--jd-text-title);
  --color-gray-900:  var(--jd-text-title);
  --bgcolor-white:   var(--jd-bg-surface);
  --bgcolor-gray-100: var(--jd-cream-100);
  --bgcolor-gray-200: var(--jd-cream-100);
  --bgcolor-gray-300: var(--jd-cream-200);
  --brdcolor-gray-200: var(--jd-border);
  --brdcolor-gray-300: var(--jd-border);
  --brdcolor-gray-500: var(--jd-cream-300);
  --wd-text-color:   var(--jd-text);
  --wd-title-color:  var(--jd-text-title);
  --wd-entities-title-color: var(--jd-text-title);
  --wd-entities-title-color-hover: var(--jd-accent);
  --wd-link-color:   var(--jd-accent);
  --wd-link-color-hover: var(--jd-accent-hover);
  --wd-form-brd-color: var(--jd-cream-300);
  --wd-form-brd-color-focus: var(--jd-accent);
  --wd-form-placeholder-color: var(--jd-text-muted);
  color: var(--jd-text-title);              /* Woodmart: `.color-scheme-dark{color:#333}` */
}
/* header nav text: Woodmart uses an "r, g, b" triplet inside rgba() — 59, 42, 31 = --jd-ink-900 */
.whb-color-dark .wd-nav-header { --wd-navigation-color: 59, 42, 31; }
/* header tool icons/labels (LOGIN / REGISTER, wishlist, cart …): `--wd-header-el-color` is #333 inside a dark-scheme header row */
/* `--wd-header-el-color` is (re)defined below the row, so set the colour on the element itself */
:is(.whb-header, .whb-clone) .wd-tools-element > a { color: var(--jd-text-title); }
:is(.whb-header, .whb-clone) .wd-tools-element:hover > a,
:is(.whb-header, .whb-clone) .wd-tools-element.wd-opened > a { color: var(--jd-accent); }

/* same nav triplet inside the dark scheme (mobile-menu tabs use rgba(var(--wd-navigation-color), .5) → 2.8:1) and a solid muted colour for the INACTIVE tab */
.color-scheme-dark { --wd-navigation-color: 59, 42, 31; }
/* mobile off-canvas menu (tabs + list) — nav triplet 59, 42, 31 = --jd-ink-900; inactive tab = solid ink-500 */
body .mobile-nav,
body .wd-nav-mobile,
body .wd-nav-mob-tab { --wd-navigation-color: 59, 42, 31; }
body .wd-nav-mob-tab { --nav-color: var(--jd-ink-500); }

/* stars (variable form used by the "simple" star style) — spec §3 already colours the classic glyph stars */
body { --wd-star-color: #FCDC74; --wd-empty-star-color: var(--jd-cream-200); }   /* filled stars #FCDC74: operator 2026-09-30 later (「星星都幫我改回黃色」; #FFBCC6 earlier the same day, #fce7a8 since 2026-09-29, butter before) */
body .star-rating span::before,
body .comment-form-rating .stars a:is(:hover, :focus, .active)::before,
body .comment-form-rating .stars:hover a::before,
body .comment-form-rating .stars.selected a:not(.active ~ a)::before { color: #FCDC74; }

/* Price amounts = the theme's primary colour (operator 2026-09-27: 「woocommerce-Price-amount amount 顏色改成primary color」).
   `--wd-primary-color` is Theme Settings' primary colour (#80CACB since the 2026-09-27 swap). Before: product-page / mini-cart prices used the title colour
   (`body .price` above), card prices the accent token. Applies to every `.woocommerce-Price-amount.amount` (cards, product page, cart, checkout, mini-cart, widgets);
   the strike-through old price of a sale keeps WoodMart's own `del` dimming (opacity), only its hue follows. */
body .woocommerce-Price-amount.amount,
body tr.cart_item .product-total .woocommerce-Price-amount.amount { color: var(--wd-primary-color); }   /* 2nd selector beats WoodMart's `tr.cart_item .product-total > .amount { color: var(--wd-text-color) }` (checkout / cart order table) */
