/* =====================================================================
   JUST DOG — header / toolbar count badges (operator 2026-09-26)
   HISTORY: this file first carried the hand-drawn icon masks (account / favorite / cart / home SVGs replacing WoodMart's icon-font glyphs).
   The operator then asked to go back to the Kids theme's own icons (「請你換成這個theme的icon」 → Theme Settings icon_font = set 2, see
   build/scripts/header-and-colors/icons-kids.php), so the masks, the `assets/img/icons/*.svg` and the enlarged icon boxes were REMOVED
   (the SVGs are kept in wiki `sources/2026-09-26-justdog-handdrawn-svg-icons/`). What stays here: the count badges.
   ===================================================================== */

/* count badges at the icon's TOP-RIGHT corner everywhere (operator: 「桌機版的數量badge改成跟手機版一樣顯示在圖示右上方」).
   WoodMart's design-4 (desktop header cart / wishlist, mobile header cart) prints the number BESIDE the icon; the mobile bottom toolbar
   (design-5) already floats it on the corner. Same corner treatment (design-5's own offsets) for the header and the sticky clone.
   Colour = --jd-badge-bg (#fce7a8 since 2026-09-29) in justdog-colors-fixes.css. */
:is(.whb-header, .whb-clone) .wd-tools-element:is(.wd-header-cart, .wd-header-wishlist) .wd-tools-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -10px;
  display: block;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* mobile bottom toolbar: WoodMart paints it #333 outside the palette mapping — icons + labels in the site's title brown */
.wd-toolbar .wd-tools-element > a { color: var(--jd-text-title); }
.wd-toolbar .wd-tools-element:hover > a { color: var(--jd-accent); }

/* ---- logo-centre header (2026-09-27): the tools (search / account / wishlist / cart) now sit in the logo row ("top-bar" row) — WoodMart draws icons of that
   row small (14 px); keep the 20 px of the main row / sticky bar they had before. The count badges (rules above) follow the icon. */
.whb-header .whb-top-bar .wd-tools-element .wd-tools-icon,
.whb-header .whb-top-bar .wd-tools-element .wd-tools-icon::before { font-size: 20px; }