/**
 * Large / main UI icons from images/icons/main/*
 *
 * Scope: tile icons, spotlight tiles, begin-step badges, blog Quick Launch
 * tiles only. Full-color PNGs (not mask-safe) → background-image.
 *
 * Explicitly NOT applied to:
 *   .doodle--icon-*, .feature-glyph, tiny chrome (social / dock / CSS nav
 *   hamburger), .action__ico, .vehicle-card__ico, .lf-benefit__icon,
 *   .mk-form-van / form-rail art, .pc-fleet-viz, size-scales, photos, 3D tours.
 */

:root {
  --wagn-main-grooming-van: url("images/icons/grooming-van-doodle.png");
  --wagn-main-paw: url("images/icons/main/paw.png");
  --wagn-main-heart: url("images/icons/main/heart.png");
  --wagn-main-dog-face: url("images/icons/main/dog-face.png");
  --wagn-main-cat-face: url("images/icons/main/cat-face.png");
  --wagn-main-scissors: url("images/icons/main/scissors.png");
  --wagn-main-comb: url("images/icons/main/comb.png");
  --wagn-main-bathtub: url("images/icons/main/bathtub.png");
  --wagn-main-stethoscope: url("images/icons/main/stethoscope.png");
  --wagn-main-first-aid: url("images/icons/main/first-aid.png");
  --wagn-main-calendar: url("images/icons/main/calendar.png");
  --wagn-main-location-pin: url("images/icons/main/location-pin.png");
  --wagn-main-envelope: url("images/icons/main/envelope.png");
  --wagn-main-phone: url("images/icons/main/phone.png");
  --wagn-main-speech-bubble: url("images/icons/main/speech-bubble.png");
  --wagn-main-price-tag: url("images/icons/main/price-tag.png");
  --wagn-main-quality-badge: url("images/icons/main/quality-badge.png");
  --wagn-main-dollar-coin: url("images/icons/main/dollar-coin.png");
  --wagn-main-document-check: url("images/icons/main/document-check.png");
  /* Was 3 stacked lavender pills (read as DB/bread); paw is unambiguous */
  --wagn-main-hamburger-menu: url("images/icons/main/paw.png");
  /* Was key silhouette (“weird eye”); paw reads as pet care */
  --wagn-main-key: url("images/icons/main/paw.png");

  /* Harmonized display sizes for soft-blob sheet art */
  --wagn-main-tile-size: 3.1rem;
  --wagn-main-spotlight-size: 2.9rem;
  --wagn-main-begin-size: 1.55rem;
}

/* ---------- Shared paint helper for large tile / spotlight glyphs ---------- */
.tile-icon--vehicle,
.tile-icon--heart,
.tile-icon--dollar,
.tile-icon--calendar,
.tile-icon--pin,
.tile-icon--chat,
.tile-icon--paw,
.tile-icon--scissors,
.tile-icon--phone-info,
.tile-icon--headset,
.tile-icon--cloud-check,
.tile-icon--book,
.tile-icon--star,
.tile-icon--shield,
.tile-icon--wallet,
.tile-icon--user,
.tile-icon--key,
.spotlight-tile__icon--vehicle,
.spotlight-tile__icon--dollar {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  /* Kill old van aspect-ratio / filter leftovers that squash blob art */
  aspect-ratio: auto !important;
  filter: none !important;
  opacity: 1;
}

/* Harmonized footprint so soft blobs aren’t clipped or uneven */
.tile-icon--vehicle,
.tile-icon--heart,
.tile-icon--dollar,
.tile-icon--calendar,
.tile-icon--pin,
.tile-icon--chat,
.tile-icon--paw,
.tile-icon--scissors,
.tile-icon--phone-info,
.tile-icon--headset,
.tile-icon--cloud-check,
.tile-icon--book,
.tile-icon--star,
.tile-icon--shield,
.tile-icon--wallet,
.tile-icon--user,
.tile-icon--key {
  width: var(--wagn-main-tile-size) !important;
  height: var(--wagn-main-tile-size) !important;
  min-height: 0 !important;
}

.spotlight-tile__icon--vehicle,
.spotlight-tile__icon--dollar {
  width: var(--wagn-main-spotlight-size) !important;
  height: var(--wagn-main-spotlight-size) !important;
  min-height: 0 !important;
}

/* Hover / focus rules that recolor mask fills must not wipe the PNG */
body .tile-icon--vehicle,
body .tile-icon--heart,
body .tile-icon--dollar,
body .tile-icon--calendar,
body .tile-icon--pin,
body .tile-icon--chat,
body .tile-icon--paw,
body .tile-icon--scissors,
body .tile-icon--phone-info,
body .tile-icon--headset,
body .tile-icon--cloud-check,
body .tile-icon--book,
body .tile-icon--star,
body .tile-icon--shield,
body .tile-icon--wallet,
body .tile-icon--user,
body .tile-icon--key,
body .tile-icon--vehicle:hover,
body .tile-icon--heart:hover,
body .tile-icon--dollar:hover,
body .tile-icon--calendar:hover,
body .tile-icon--pin:hover,
body .tile-icon--chat:hover,
body .tile-icon--paw:hover,
body .tile-icon--scissors:hover,
body .tile-icon--phone-info:hover,
body .tile-icon--headset:hover,
body .tile-icon--cloud-check:hover,
body .tile-icon--book:hover,
body .tile-icon--star:hover,
body .tile-icon--shield:hover,
body .tile-icon--wallet:hover,
body .tile-icon--user:hover,
body .tile-icon--key:hover,
body *:hover .tile-icon--vehicle,
body *:hover .tile-icon--heart,
body *:hover .tile-icon--dollar,
body *:hover .tile-icon--calendar,
body *:hover .tile-icon--pin,
body *:hover .tile-icon--chat,
body *:hover .tile-icon--paw,
body *:hover .tile-icon--scissors,
body *:hover .tile-icon--phone-info,
body *:hover .tile-icon--headset,
body *:hover .tile-icon--cloud-check,
body *:hover .tile-icon--book,
body *:hover .tile-icon--star,
body *:hover .tile-icon--shield,
body *:hover .tile-icon--wallet,
body *:hover .tile-icon--user,
body *:hover .tile-icon--key,
body *:focus-visible .tile-icon--vehicle,
body *:focus-visible .tile-icon--heart,
body *:focus-visible .tile-icon--dollar,
body *:focus-visible .tile-icon--calendar,
body *:focus-visible .tile-icon--pin,
body *:focus-visible .tile-icon--chat,
body *:focus-visible .tile-icon--paw,
body *:focus-visible .tile-icon--scissors,
body *:focus-visible .tile-icon--phone-info,
body *:focus-visible .tile-icon--headset,
body *:focus-visible .tile-icon--cloud-check,
body *:focus-visible .tile-icon--book,
body *:focus-visible .tile-icon--star,
body *:focus-visible .tile-icon--shield,
body *:focus-visible .tile-icon--wallet,
body *:focus-visible .tile-icon--user,
body *:focus-visible .tile-icon--key,
body .spotlight-tile__icon--vehicle,
body .spotlight-tile__icon--dollar,
body .spotlight-tile:hover .spotlight-tile__icon--vehicle,
body .spotlight-tile:hover .spotlight-tile__icon--dollar,
body .spotlight-tile:focus-visible .spotlight-tile__icon--vehicle,
body .spotlight-tile:focus-visible .spotlight-tile__icon--dollar {
  background-color: transparent !important;
  filter: none !important;
}

/* Modifier → sheet icon */
.tile-icon--vehicle,
.spotlight-tile__icon--vehicle {
  background-image: var(--wagn-main-grooming-van) !important;
}

.tile-icon--heart {
  background-image: var(--wagn-main-heart) !important;
}

.tile-icon--dollar,
.spotlight-tile__icon--dollar {
  background-image: var(--wagn-main-dollar-coin) !important;
}

.tile-icon--calendar {
  background-image: var(--wagn-main-calendar) !important;
}

.tile-icon--pin {
  background-image: var(--wagn-main-location-pin) !important;
}

.tile-icon--chat {
  background-image: var(--wagn-main-speech-bubble) !important;
}

.tile-icon--paw {
  background-image: var(--wagn-main-paw) !important;
}

.tile-icon--scissors {
  background-image: var(--wagn-main-scissors) !important;
}

.tile-icon--phone-info,
.tile-icon--headset {
  background-image: var(--wagn-main-phone) !important;
}

.tile-icon--cloud-check {
  background-image: var(--wagn-main-document-check) !important;
}

/* Was stacked-disk / book silhouette; heart is unambiguous */
.tile-icon--book {
  background-image: var(--wagn-main-heart) !important;
}

.tile-icon--star {
  background-image: var(--wagn-main-quality-badge) !important;
}

.tile-icon--key {
  background-image: var(--wagn-main-key) !important;
}

.tile-icon--shield {
  background-image: var(--wagn-main-first-aid) !important;
}

.tile-icon--wallet {
  background-image: var(--wagn-main-price-tag) !important;
}

.tile-icon--user {
  background-image: var(--wagn-main-dog-face) !important;
}

/* ---------- Begin-step primary badges (homepage how-to-begin) ---------- */
.begin-step__motion--apply::before,
.begin-step__motion--select::before,
.begin-step__motion--guide::before,
.begin-step__motion--deliver::before {
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
  width: var(--wagn-main-begin-size);
  height: var(--wagn-main-begin-size);
}

.begin-step__motion--apply::before,
.begin-step__motion--guide::before {
  background-image: var(--wagn-main-document-check) !important;
  width: 1.55rem;
  height: 1.55rem;
}

.begin-step__motion--select::before {
  background-image: var(--wagn-main-grooming-van) !important;
  width: 1.7rem;
  height: 1.4rem;
}

.begin-step__motion--deliver::before {
  background-image: var(--wagn-main-quality-badge) !important;
  width: 1.55rem;
  height: 1.55rem;
}

/* ---------- Blog / resources Quick Launch ----------
   Base wells live in blog-resources.css (neutral soft pads).
   Ensure every launch glyph paints as a full-color PNG — never a mask. */
.br-launch-tile__icon::before {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  background-image: var(--launch-icon) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

.br-launch-tile[data-tone="mint"] .br-launch-tile__icon::before,
.br-launch-tile[data-tone="purple"] .br-launch-tile__icon::before,
.br-launch-tile[data-tone="lavender"] .br-launch-tile__icon::before,
.br-launch-tile[data-tone="teal"] .br-launch-tile__icon::before {
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}